/* Nimble Growth OS dashboard stylesheet.
 * Extracted from index.html inline <style> block 2026-05-18 (Tier 3 Session 3,
 * Phase 1 of the file split). Loaded by index.html via <link rel="stylesheet">.
 */
:root {
  --teal: #004447;
  --teal-dark: #003336;
  --teal-light: #1a5a5d;
  --orange: #d2804d;
  --orange-soft: #e89c6d;
  --sage: #8ca786;
  --sage-dark: #6e8a68;
  --bone: #fbf8f3;
  --red: #c0392b;
  --red-soft: #fde8e8;
  --amber: #d2804d;
  --amber-soft: #fde8d0;
  --green: #5a8a52;
  --green-soft: #d7e8d2;
  --grey-bg: #f0f2f0;
  --card: #ffffff;
  --text: #1a1a1a;
  --muted: #666666;
  --border: #e4e4e4;
  --border-light: #f0f0f0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: 'Raleway', sans-serif;
  background: var(--grey-bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ============== Top strip ============== */
.top-strip {
  background: var(--teal);
  color: white;
  display: flex;
  align-items: center;
  padding: 0 28px 0 0;
  height: 64px;
  gap: 28px;
  border-bottom: 3px solid var(--orange);
  position: sticky;
  top: 0;
  z-index: 100;
  /* flex-wrap removed 2026-05-25 (decision OPS-056): with the dispatch
     buttons now living in the strip (Refresh data + Run agent), wrapping
     was pushing Tracking + Sign out to a second row that overlapped the
     sidebar below. Strip stays single-row; narrower content drops via
     the @media (max-width: 900px) rule hiding strip-actions on mobile. */
  overflow: hidden;
}
.brand {
  display: flex;
  align-items: center;
  padding: 0 22px;
  margin-right: 8px;
  height: 64px;
  border-right: 3px solid var(--orange);
}
.brand img {
  height: 40px;
  width: auto;
  display: block;
}
.strip-item { display: flex; flex-direction: column; gap: 2px; }
.strip-label {
  font-size: 9px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  font-weight: 600;
}
.strip-value {
  font-size: 13px;
  font-weight: 600;
  color: white;
  display: flex;
  align-items: center;
  gap: 6px;
}
.strip-value .delta { font-size: 11px; font-weight: 500; opacity: 0.9; }
.strip-value .delta.hot { color: var(--orange-soft); }
.strip-value .delta.cold { color: var(--sage); }
.strip-spacer { flex: 1; }

.dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 3px rgba(140,167,134,0.18);
}
.dot.amber { background: var(--orange); box-shadow: 0 0 0 3px rgba(210,128,77,0.2); }
.dot.red { background: var(--red); box-shadow: 0 0 0 3px rgba(192,57,43,0.2); }
.dot.grey { background: #888; box-shadow: 0 0 0 3px rgba(0,0,0,0.08); }

/* ============== Layout ============== */
.layout { display: flex; min-height: calc(100vh - 56px); }
.side-nav {
  width: 220px;
  background: var(--teal-dark);
  flex-shrink: 0;
  padding: 28px 0;
  position: sticky;
  top: 56px;
  align-self: flex-start;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
}
.side-nav-label {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  padding: 0 24px 14px;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 10px;
}
.tab-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: rgba(255,255,255,0.55);
  font-family: 'Raleway', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  padding: 14px 24px 14px 21px;
  cursor: pointer;
  border-left: 3px solid transparent;
  text-align: left;
  transition: all 0.15s;
}
.tab-btn:hover { color: rgba(255,255,255,0.92); background: rgba(0,0,0,0.18); }
.tab-btn.active {
  color: var(--orange);
  border-left-color: var(--orange);
  background: rgba(0,0,0,0.25);
}
.tab-btn .badge-count {
  display: inline-block;
  background: var(--orange);
  color: white;
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 6px;
  font-weight: 700;
}

.content { flex: 1; padding: 32px 44px 60px; max-width: 1200px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn 0.18s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ============== Section primitives ============== */
.sec { margin-bottom: 36px; }
.sec-hdr {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--teal);
}
.sec-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: 0.5px;
  flex: 1;
  text-transform: uppercase;
}
.sec-sub { font-size: 11px; color: var(--muted); letter-spacing: 0.5px; }

.page-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}
.page-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 28px;
}
.page-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 18px;
}
.page-head-row .page-title, .page-head-row .page-sub { margin-bottom: 6px; }
.page-head-row .page-sub { margin-bottom: 0; }
.last-updated {
  background: var(--card);
  border-radius: 8px;
  padding: 10px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  border-left: 3px solid var(--sage);
  min-width: 180px;
  text-align: right;
}
.last-updated-label {
  display: block;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 4px;
}
.last-updated-value {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--teal);
}
.dispatch-btns {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
/* Strip-context for the dispatch buttons: live in the top banner now
   (moved 2026-05-25 from page-head-row). Tighter sizing, white-on-teal
   surface, neutral teal border with the agent button accented orange. */
.strip-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-right: 14px;
}
.strip-actions .dispatch-btn {
  flex: none;
  padding: 6px 12px;
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
.strip-actions .dispatch-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}
.strip-actions .dispatch-btn-agent {
  border-color: var(--orange);
  color: var(--orange);
}
.strip-actions .dispatch-btn-agent:hover:not(:disabled) {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
@media (max-width: 1100px) {
  .strip-actions { display: none; }  /* drop in narrow viewports; buttons return on desktop */
}
.dispatch-btn {
  flex: 1;
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 6px;
  border: 1.5px solid var(--sage);
  background: var(--card);
  color: var(--teal);
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: background 0.15s, color 0.15s;
}
.dispatch-btn:hover:not(:disabled) { background: var(--teal); color: #fff; border-color: var(--teal); }
.dispatch-btn-agent { border-color: var(--orange); color: var(--orange); }
.dispatch-btn-agent:hover:not(:disabled) { background: var(--orange); color: #fff; border-color: var(--orange); }
.dispatch-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ============== Cards / KPI ============== */
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.g6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.g2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 18px; }

.kpi {
  background: var(--card);
  border-radius: 8px;
  padding: 16px 18px;
  border-top: 4px solid var(--orange);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  position: relative;
}
.kpi h4 {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
  margin-bottom: 8px;
}
.kpi .big {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: 0.3px;
  line-height: 1.1;
}
.kpi .sub {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: 0.3px;
}
.kpi.green { border-top-color: var(--green); }
.kpi.amber { border-top-color: var(--orange); }
.kpi.red { border-top-color: var(--red); }
.kpi.grey { border-top-color: #aaa; }
.kpi .rag-tag {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 10px;
}
.rag-green { background: var(--green-soft); color: var(--green); }
.rag-amber { background: var(--amber-soft); color: #b5530a; }
.rag-red { background: var(--red-soft); color: var(--red); }
.rag-grey { background: #e4e4e4; color: var(--muted); }

/* ============== Hero v2 (Day X / 90, Expected vs Actual) ============== */
.hero-v2 {
  background: var(--card);
  border-radius: 10px;
  padding: 22px 26px;
  margin-bottom: 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  border-left: 6px solid var(--sage);
}
.hero-v2.amber { border-left-color: var(--orange); }
.hero-v2.red { border-left-color: var(--red); }
.hero-head {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 16px;
}
.hero-day { text-align: center; min-width: 110px; }
.hero-day-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 34px;
  font-weight: 800;
  color: var(--teal);
  line-height: 1;
  letter-spacing: -0.5px;
}
.hero-day-num .hero-day-slash { color: var(--orange); font-weight: 500; margin: 0 2px; }
#hero-day-total { color: var(--muted); font-weight: 600; font-size: 22px; }
.hero-day-label {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
  font-weight: 700;
}
.hero-phase { flex: 1; }
.hero-phase-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 4px;
  letter-spacing: 0.3px;
}
.hero-phase-guidance { font-size: 13.5px; color: var(--text); line-height: 1.5; }
.hero-status-pill {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 8px 16px;
  border-radius: 10px;
  background: var(--green-soft);
  color: var(--green);
  text-transform: uppercase;
  flex-shrink: 0;
}
.hero-v2.amber .hero-status-pill { background: var(--amber-soft); color: #b5530a; }
.hero-v2.red .hero-status-pill { background: var(--red-soft); color: var(--red); }
.hero-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.hero-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  border-left: 4px solid var(--sage);
  background: #fafafa;
}
.hero-row.amber { border-left-color: var(--orange); }
.hero-row.red { border-left-color: var(--red); }
.hero-row.grey { border-left-color: #aaa; }
.hero-row-label {
  font-size: 9.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 4px;
}
.hero-row-actual {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--teal);
  line-height: 1.1;
}
.hero-row-expected {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}
.hero-row-verdict {
  font-size: 11.5px;
  font-weight: 600;
  margin-top: 6px;
}
.hero-row.green .hero-row-verdict { color: var(--green); }
.hero-row.amber .hero-row-verdict { color: #b5530a; }
.hero-row.red .hero-row-verdict { color: var(--red); }
.hero-row.grey .hero-row-verdict { color: var(--muted); font-style: italic; }
.hero-row-action {
  font-size: 11px;
  color: var(--text);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
  line-height: 1.4;
}
.hero-row-action strong { color: var(--teal); }
.hero-net {
  background: var(--bone);
  border-left: 3px solid var(--orange);
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.5;
}
.hero-net strong { color: var(--teal); font-weight: 700; }
.hero-net-reasons {
  margin: 8px 0 0; padding-left: 20px;
  font-size: 13px; color: #1f2d2e; line-height: 1.55;
}
.hero-net-reasons li { margin-bottom: 3px; }
.hero-v2.red .hero-net-reasons { color: #6b2422; }
.hero-v2.amber .hero-net-reasons { color: #6b5012; }

/* ============== Flag list ============== */
.flags { background: var(--card); border-radius: 8px; padding: 4px 0; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.flag {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-light);
}
.flag:last-child { border-bottom: none; }
.flag .sev {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 3px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  min-width: 32px;
  text-align: center;
}
.sev-p1 { background: var(--red-soft); color: var(--red); }
.sev-p2 { background: var(--amber-soft); color: #b5530a; }
.sev-p3 { background: var(--green-soft); color: var(--green); }
.flag-body { flex: 1; font-size: 13px; }
.flag-link {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--orange);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.flag-link:hover { color: var(--teal); }

.empty {
  background: var(--card);
  border-radius: 8px;
  padding: 28px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

/* ============== To-do list ============== */
.todos { background: var(--card); border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.todo-add {
  display: flex;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-light);
  align-items: center;
}
.todo-add input[type="text"] {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
}
.todo-add select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  background: white;
}
.todo-add button {
  background: var(--teal);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
.todo-add button:hover { background: var(--teal-dark); }
/* OPS-077 follow-up: extended composer with due_date + owner inputs.
   Wraps to multiple rows on narrow viewports so nothing gets squashed. */
.todo-add-extended { flex-wrap: wrap; }
.todo-add-extended input[type="text"]#todo-input { flex: 2 1 240px; min-width: 200px; }
.todo-add-extended input[type="date"] {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  color: var(--text);
  background: white;
  min-width: 130px;
}
.todo-add-extended input[type="text"]#todo-owner {
  flex: 0 1 130px;
  min-width: 110px;
  font-size: 12px;
}
.todo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-light);
}
.todo:last-child { border-bottom: none; }
.todo input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--teal);
  cursor: pointer;
}
.todo.done .todo-text { text-decoration: line-through; color: var(--muted); }
.todo-priority {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 2px 7px;
  border-radius: 10px;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-top: 2px;
}
.pri-P1 { background: var(--red-soft); color: var(--red); }
.pri-P2 { background: var(--amber-soft); color: #b5530a; }
.pri-P3 { background: var(--green-soft); color: var(--green); }
.todo-text { flex: 1; font-size: 13px; line-height: 1.45; }
.todo-meta { font-size: 10px; color: var(--muted); margin-top: 2px; letter-spacing: 0.3px; }
.todo-del {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  align-self: flex-start;
}
.todo-del:hover { color: var(--red); }
.todo-section-label {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 18px 6px;
  font-weight: 700;
  border-top: 1px solid var(--border-light);
}

/* ============== Campaign tasks (from data/tasks.json) ============== */
.campaign-task {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-light);
  background: var(--card);
}
.campaign-task:last-child { border-bottom: none; }
.campaign-task.done { opacity: 0.55; }
.campaign-task.done .ct-text { text-decoration: line-through; }
.ct-row { display: flex; align-items: flex-start; gap: 10px; }
.ct-priority {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 2px 7px;
  border-radius: 10px;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-top: 1px;
}
.ct-id {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  margin-top: 1px;
  min-width: 22px;
}
.ct-text { flex: 1; font-size: 13px; line-height: 1.45; }
.ct-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 10px;
  color: var(--muted);
  margin: 6px 0 0 60px;
  letter-spacing: 0.3px;
}
.ct-when { color: var(--teal); font-weight: 600; }
.ct-owner { font-weight: 600; }
.ct-status.done { color: var(--green); font-weight: 600; }
.ct-status.open { color: var(--muted); }
.ct-notes {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
  margin: 6px 0 0 60px;
  font-style: italic;
}

/* ============== Decision resolve modal ============== */
.drm-card { max-width: 560px; }
.drm-card textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  resize: vertical;
  min-height: 72px;
}
.drm-card input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  font-family: var(--font-body);
}
.drm-task-row { margin: 14px 0 0; }
.drm-strategy-note {
  font-size: 11px; color: var(--muted, #888); margin: 6px 0 0;
}
.drm-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #444;
  cursor: pointer;
  margin: 0;
  font-weight: 400;
}
#drm-task-fields {
  display: none;
  margin-top: 10px;
  padding: 12px;
  background: var(--bg, #f5f5f5);
  border-radius: 8px;
}
/* Resolve button on decision cards */
.dc-resolve-btn {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 10px;
  border: 1.5px solid var(--teal);
  background: none;
  color: var(--teal);
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
}
.dc-resolve-btn:hover { background: var(--teal); color: white; }
/* Resolved outcome text */
.dc-outcome {
  font-size: 12px;
  color: var(--green, #2d7a3a);
  line-height: 1.5;
  margin: 6px 0 0 0;
  padding: 6px 10px;
  background: var(--green-soft, #e8f5e9);
  border-radius: 6px;
  border-left: 3px solid var(--green, #2d7a3a);
}

/* ============== Changes & Decisions summary (Setup tab) ============== */
.dec-summary {
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 18px;
}
.dec-summary-stats {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.dec-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.dec-stat-num {
  font-size: 26px;
  font-weight: 700;
  font-family: var(--font-head);
  color: var(--teal);
  line-height: 1;
}
.dec-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  font-weight: 600;
}
.dec-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.dec-cat-chip {
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 10px;
  background: var(--bg, #f0f0f0);
  color: #555;
  border: 1px solid var(--border-light);
}
.dec-cat-chip.zero { opacity: 0.4; }
.dec-cat-chip strong { color: var(--teal); margin-left: 3px; }
.dec-chart-wrap { }
.dec-chart-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.dec-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 64px;
}
.dec-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  height: 100%;
  gap: 2px;
}
.dec-bar-val {
  font-size: 9px;
  color: var(--muted);
  min-height: 12px;
  line-height: 12px;
}
.dec-bar {
  width: 100%;
  background: var(--teal-light, #5a9a9e);
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  flex-shrink: 0;
  transition: height 0.2s ease;
}
.dec-bar-lbl {
  font-size: 9px;
  color: var(--muted);
  text-align: center;
}

/* ============== Pending decisions sub-tab ============== */
.decision-card {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-light);
  background: var(--card);
}
.decision-card:last-child { border-bottom: none; }
.decision-card.resolved { opacity: 0.72; }
.decision-card.resolved .dc-title { color: var(--muted, #888); }
.dc-resolved-toggle {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  font-size: 12px; font-weight: 700; color: var(--muted, #888);
  padding: 10px 18px 6px; width: 100%; text-align: left;
  letter-spacing: 0.5px;
}
.dc-resolved-toggle:hover { color: var(--teal); }
.dc-toast {
  margin: 0 18px 10px;
  padding: 9px 14px;
  background: #eaf5f0; border: 1px solid #a8d8c0; border-radius: 6px;
  font-size: 12px; color: #2a6b4a; font-weight: 600;
  transition: opacity 0.5s;
}
.dc-toast.dc-toast-fade { opacity: 0; }
.dc-row { display: flex; align-items: flex-start; gap: 10px; }
.dc-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}
.dc-rec {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  padding: 2px 7px;
  border-radius: 10px;
  text-transform: uppercase;
  flex-shrink: 0;
  background: var(--teal-soft, #e6f0f0);
  color: var(--teal);
  margin-top: 1px;
}
.dc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 10px;
  color: var(--muted);
  margin: 5px 0 0 0;
  letter-spacing: 0.3px;
}
.dc-trigger { color: var(--orange); font-weight: 600; }
.dc-owner { font-weight: 600; }
.dc-notes {
  font-size: 12px;
  color: #555;
  line-height: 1.55;
  margin: 8px 0 0 0;
  padding: 8px 10px;
  background: var(--bg, #f5f5f5);
  border-radius: 6px;
  border-left: 3px solid var(--teal-light, #5a9a9e);
}
.dc-resolved-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--green);
  margin-top: 4px;
}
/* Decisions-pending tile on Status sub-tab */
.decisions-status-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--amber-soft, #fff3e0);
  border: 1px solid #f5c842;
  border-radius: 8px;
  padding: 9px 16px;
  margin-bottom: 14px;
  font-size: 12px;
}
.decisions-status-banner .dsb-count {
  font-size: 20px;
  font-weight: 700;
  color: #b5530a;
  line-height: 1;
}
.decisions-status-banner .dsb-label { flex: 1; color: #7a4000; }
.decisions-status-banner .dsb-link {
  font-size: 11px;
  font-weight: 600;
  color: var(--teal);
  cursor: pointer;
  text-decoration: none;
  border: none;
  background: none;
  padding: 0;
}
.decisions-status-banner .dsb-link:hover { text-decoration: underline; }

/* ============== Agent report (LLM digest, twice-daily) ============== */
.agent-card {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-light) 100%);
  color: white;
  border-radius: 12px;
  padding: 22px 26px;
  margin-bottom: 18px;
  box-shadow: 0 4px 20px rgba(0,68,71,0.18);
  position: relative;
  overflow: hidden;
}
.agent-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  border: 30px solid rgba(210,128,77,0.18);
  border-radius: 50%;
}
.agent-card.seed { background: var(--card); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,0.04); border: 1px dashed var(--border); }
.agent-card.seed::before { display: none; }
.agent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.agent-label {
  font-size: 9.5px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--orange);
}
.agent-card.seed .agent-label { color: var(--muted); }
.agent-timestamp {
  font-size: 10.5px;
  opacity: 0.7;
  letter-spacing: 0.3px;
}
.agent-wins {
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.agent-win {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(210,128,77,0.18);
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.4;
}
.agent-win-icon { font-size: 16px; flex-shrink: 0; }
.agent-state {
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.agent-card.seed .agent-state { border-bottom-color: var(--border); }
.agent-state-list {
  list-style: none; padding: 0; margin: 0;
}
.agent-state-list li {
  padding-left: 14px; position: relative; margin-bottom: 6px;
}
.agent-state-list li::before {
  content: '\2022'; position: absolute; left: 0; color: var(--orange);
  font-weight: bold;
}
.agent-state-list li:last-child { margin-bottom: 0; }
.agent-action {
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.agent-action-tag {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 6px 12px;
  border-radius: 8px;
  height: fit-content;
  flex-shrink: 0;
}
.agent-action-tag.TUNE { background: var(--orange); color: white; }
.agent-action-tag.PIVOT { background: var(--red); color: white; }
.agent-action-tag.HOLD { background: rgba(255,255,255,0.18); color: white; }
.agent-card.seed .agent-action-tag.HOLD { background: #e4e4e4; color: var(--muted); }
.agent-action-body { flex: 1; font-size: 13.5px; line-height: 1.5; }
.agent-action-body .action-what { font-weight: 600; margin-bottom: 6px; }
.agent-action-body .action-why { font-size: 13px; opacity: 1; margin-bottom: 6px; line-height: 1.45; color: rgba(255,255,255,0.92); }
.agent-card.seed .agent-action-body .action-why { color: #1f2d2e; }  /* Light variant for seed/empty state */
.agent-action-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.agent-action-body .action-watch { font-size: 11.5px; opacity: 0.7; font-style: italic; }
.agent-action-body strong { color: var(--orange); }
.agent-card.seed .agent-action-body strong { color: var(--teal); }
.agent-also {
  font-size: 12px;
  line-height: 1.5;
  position: relative;
  z-index: 1;
  padding-top: 4px;
}
.agent-also-label {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.7;
  margin-bottom: 6px;
}
.agent-also ul { list-style: none; padding-left: 0; }
.agent-also li { padding: 3px 0 3px 14px; position: relative; }
.agent-also li::before { content: '·'; position: absolute; left: 4px; color: var(--orange); font-weight: 700; }
.agent-also-item .noting-row { display: flex; align-items: flex-start; gap: 8px; }
.agent-also-item .noting-text { flex: 1; }
.agent-also-item .noting-fb { display: inline-flex; gap: 4px; flex-shrink: 0; opacity: 0; transition: opacity 0.15s; }
.agent-also-item:hover .noting-fb, .agent-also-item.has-feedback .noting-fb { opacity: 1; }
.noting-fb-btn, .noting-note-btn {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px; padding: 2px 8px; cursor: pointer; font-size: 13px;
  color: rgba(255,255,255,0.85); line-height: 1;
}
.noting-fb-btn:hover, .noting-note-btn:hover { background: rgba(255,255,255,0.18); }
.noting-fb-btn.keep.active { background: rgba(140,167,134,0.4); border-color: rgba(140,167,134,0.6); }
.noting-fb-btn.noise.active { background: rgba(177,50,47,0.4); border-color: rgba(177,50,47,0.6); }
.noting-note-btn { font-size: 11px; font-family: var(--font-body); }
.agent-card.seed .noting-fb-btn, .agent-card.seed .noting-note-btn { background: #f0f0f0; border-color: #d0d0d0; color: #555; }
.agent-card.seed .noting-fb-btn:hover, .agent-card.seed .noting-note-btn:hover { background: #e0e0e0; }
.noting-comment {
  margin-top: 4px; padding-left: 18px; font-size: 11.5px;
  color: rgba(255,255,255,0.75); font-style: italic; line-height: 1.4;
}
.agent-card.seed .noting-comment { color: #666; }
.noting-edit-form { margin-top: 6px; padding-left: 18px; display: flex; gap: 6px; }
.noting-edit-form input {
  flex: 1; min-width: 200px; padding: 5px 9px; font-size: 12px;
  border: 1px solid rgba(255,255,255,0.25); border-radius: 4px;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.95);
  font-family: var(--font-body);
}
.noting-edit-form input::placeholder { color: rgba(255,255,255,0.45); }
.noting-edit-form input:focus { outline: none; border-color: rgba(255,255,255,0.5); }
.noting-edit-form button {
  padding: 4px 10px; font-size: 11px; border-radius: 4px; cursor: pointer;
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.95); font-family: var(--font-body);
}
.noting-edit-form button:hover { background: rgba(255,255,255,0.25); }
.agent-card.seed .noting-edit-form input { background: #fff; border-color: #d0d0d0; color: #1f2d2e; }
.agent-card.seed .noting-edit-form input::placeholder { color: #888; }
.agent-card.seed .noting-edit-form button { background: var(--teal); color: #fff; border-color: var(--teal); }
.agent-ask {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(210,128,77,0.16);
  border-radius: 6px;
  font-size: 12.5px;
  font-style: italic;
  position: relative;
  z-index: 1;
}
.agent-ask::before { content: 'Q: '; font-weight: 800; font-style: normal; color: var(--orange); margin-right: 4px; }

/* ============== Phase 4 per-insight cards (OPS-046) ============== */
.agent-insights { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.insight-card-v2 {
  padding: 10px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  position: relative;
}
.insight-card-v2.shape-action { border-left: 3px solid var(--orange); }
.insight-card-v2.shape-heads_up { border-left: 3px solid #d4b53a; }
.insight-card-v2.shape-on_track { border-left: 3px solid var(--sage); }
.insight-card-v2.shape-spike { border-left: 3px solid #b1322f; }
.insight-card-v2.shape-pattern_emerging { border-left: 3px solid #6e90a0; }
.insight-card-v2.marked-done { opacity: 0.6; }
.insight-card-v2.marked-done .insight-card-headline { text-decoration: line-through; }
.insight-card-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11px; opacity: 0.85; margin-bottom: 4px;
}
.insight-card-icon { font-size: 14px; opacity: 1; }
.insight-card-shape { font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.insight-incorporated {
  margin-left: auto;
  padding: 1px 8px;
  background: rgba(140,167,134,0.18);
  border: 1px solid rgba(140,167,134,0.35);
  border-radius: 3px;
  font-size: 10.5px;
}
.insight-card-headline { font-weight: 700; line-height: 1.35; margin: 2px 0 6px; }
.insight-card-body { font-size: 12.5px; opacity: 0.85; line-height: 1.45; margin-bottom: 8px; }
/* Campaign read: 5-second indicator at top of Summary panel.
   Big verdict pill + one-line summary + Q1/Q2/Q3 trend strip.
   Goal: Anna scans this in <5 seconds and knows whether to dig in. */
.campaign-read {
  background: #fff;
  border: 1px solid var(--gray);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 12px 0 18px;
}
.cread-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cread-verdict {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.2px;
}
.cread-verdict.green { background: #e8f3e8; color: #2c6b2c; }
.cread-verdict.amber { background: #fdf2dc; color: #8a6a14; }
.cread-verdict.red   { background: #fbe8e3; color: #a83b1a; }
.cread-verdict-ico { font-size: 18px; }
.cread-summary {
  font-size: 13px;
  color: #4a4a4a;
  flex: 1;
  min-width: 200px;
}
.cread-fresh {
  font-size: 11px;
  color: #888;
  margin-left: 6px;
}
/* Overall read narrative under verdict pill (OPS-059). Replaces the old
   shape-count stats summary when the agent emits a narrative overall_read
   field. Falls back to stats when not. */
.cread-overall-read {
  font-size: 14px;
  color: #1a1a1a;
  flex: 1;
  min-width: 220px;
  line-height: 1.45;
}
.cread-overall-read .cread-fresh {
  font-size: 11px;
  color: #888;
  margin-left: 6px;
  white-space: nowrap;
}

/* OPS-062 follow-up 2026-06-01: 4 daily questions as visual cards above the
   Q-cards. Replaces the dense prose Overall Read. Each card holds one of
   the 4 daily questions (How going / What's new / Should we / Coming up).
   Empty fields collapse out via the JS filter, so 2-3 cards is common. */
.cread-fresh-inline {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}
.cread-daily-grid {
  /* deprecated · kept for backwards compat. .cread-daily-hero +
     .cread-daily-row replace this. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 14px;
  margin-bottom: 4px;
}
/* OPS-062 follow-up 2026-06-01 evening v2: single auto-fit row.
   Whats_new is often empty (when nothing genuinely new shipped), giving
   3 cards · they all sit one row at equal width. When whats_new is
   populated, auto-fit wraps to 2x2 instead of squishing to 4-up which
   Alex found unreadable. minmax(280px) is the floor before wrap. */
/* OPS-104 (2026-06-04): strict 2x2 grid at desktop so the 4 daily-read
   cards land equal-weight with no whitespace bottom-row. Previous
   auto-fit(minmax(280px,1fr)) produced 3+1 wrap which felt lopsided
   per Alex. At narrow widths (<720px) it collapses to 1-col for
   mobile readability. Single break point keeps the behaviour
   predictable: desktop = 2 cols, narrow = 1 col. */
.cread-daily-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
  align-items: start;
}
@media (max-width: 720px) {
  .cread-daily-row { grid-template-columns: 1fr; }
}
.cread-daily-bullets {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: disc;
}
.cread-daily-bullets li {
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
}
/* OPS-077 follow-up 2026-06-01 (Alex): feedback bar per daily_read card.
   Three small buttons (👍/👎/✎) reuse the existing qcard-fb-btn class
   styling so they match the Q-card feedback affordance visually.
   margin-top:auto pushes the bar to the bottom of the flex column · all
   cards in the row align their feedback bars at the bottom regardless
   of content length. */
.cread-daily-fb {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.06);
  display: flex;
  gap: 6px;
}
.cread-daily-fb .qcard-fb-btn {
  flex: 0 0 auto;
  width: 32px;
  height: 28px;
  padding: 0;
  font-size: 13px;
}
/* OPS-118 V1.0.9 (2026-06-07): the single Refine button has a text label
   not just an icon · widen it from the old 32px square. */
.cread-daily-fb .qcard-fb-btn.refinement {
  width: auto;
  padding: 0 12px;
  font-size: 12px;
  font-family: var(--font-body);
  font-weight: 600;
}

/* OPS-118 V1.0.9: past refinements list under each Q-card. Surfaces the
   team's feedback history so the agent's training signal is visible and
   you can see what's already been said. Last 3 shown by default, with
   '+N earlier note(s)' if more. */
.cread-refinements {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(195, 128, 77, 0.06);
  border-left: 2px solid #C3804D;
  border-radius: 0 4px 4px 0;
  font-size: 11.5px;
  color: var(--text);
}
.cread-refinements-head {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #8a5a14;
  margin-bottom: 6px;
}
.cread-refinement {
  margin-bottom: 4px;
  line-height: 1.45;
}
.cread-refinement:last-child { margin-bottom: 0; }
.cread-refinement-quote {
  font-style: italic;
  color: #555;
}
.cread-refinement-more {
  margin-top: 6px;
  font-size: 10.5px;
  color: #999;
  font-style: italic;
}
.cread-daily-card {
  background: #fdfaf2;
  border-left: 3px solid #C3804D;
  border-radius: 6px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* OPS-077 follow-up 2026-06-01 (Alex): equal height across the 3-up row
     so the feedback bar lands at the visual bottom of every card · with
     margin-top:auto on the .cread-daily-fb below, the buttons get pushed
     down regardless of how much content the card holds. */
  height: 100%;
}
.cread-daily-how_going { border-left-color: var(--teal); background: #f0f5f5; }
.cread-daily-whats_new { border-left-color: #8CA786; background: #f3f6ef; }
.cread-daily-should_we { border-left-color: #C3804D; background: #fdf4ec; }
.cread-daily-whats_coming_up { border-left-color: #aab5b5; background: #faf6ec; }
.cread-daily-label {
  font-family: 'Raleway', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.cread-daily-icon {
  font-size: 12px;
  color: var(--muted);
}
.cread-daily-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
}

/* Q-cards: replaces the old cread-qstrip mini cells (OPS-059). Three cards
   side-by-side with: question + trend pill + narrative + evidence bullets
   + feedback buttons. Collapses to single column on narrow viewports. */
.cread-qcards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.qcard {
  background: #f5efe6;
  border-left: 4px solid #c7c7c7;
  border-radius: 6px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qcard.green { border-left-color: #2c6b2c; background: #f0f6ee; }
.qcard.amber { border-left-color: #d2804d; background: #faf3e7; }
.qcard.red   { border-left-color: #a83b1a; background: #f8eae3; }
.qcard.grey  { border-left-color: #c7c7c7; }
.qcard-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.qcard-num {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 700;
  color: #6a6a6a;
}
.qcard-question {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: #1a1a1a;
}
.qcard-trend {
  font-size: 12px;
  font-weight: 600;
  color: #4a4a4a;
}
.qcard-trend.green { color: #2c6b2c; }
.qcard-trend.amber { color: #8a6a14; }
.qcard-trend.red   { color: #a83b1a; }
.qcard-trend.grey  { color: #6a6a6a; }
.qcard-trend-ico { margin-right: 3px; font-weight: 700; }
.qcard-narrative {
  font-size: 13px;
  line-height: 1.45;
  color: #1a1a1a;
}
.qcard-evidence {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  color: #4a4a4a;
  line-height: 1.5;
}
.qcard-evidence li {
  margin-bottom: 3px;
}
.qcard-evidence li:last-child {
  margin-bottom: 0;
}
.qcard-fb {
  display: flex;
  gap: 4px;
  margin-top: auto;
  padding-top: 6px;
}
.qcard-fb-btn {
  flex: 1;
  padding: 4px 6px;
  font-size: 13px;
  border: 1px solid rgba(0, 68, 71, 0.18);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.qcard-fb-btn:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 68, 71, 0.4);
}
/* OPS-116 (2026-06-06): active-state styling so users see their click
   register on 👍 / 👎 / ✓. Previously the click saved silently with no
   visual feedback · indistinguishable from broken. Phase 1 fix is
   click-time only (no hydrate-from-DB on page load yet · queued). */
.qcard-fb-btn.active {
  background: var(--teal, #004447);
  color: #fff;
  border-color: var(--teal, #004447);
}
.qcard-fb-btn.active:hover {
  background: #003133;
  border-color: #003133;
}
.qcard-refinement-form {
  margin-top: 6px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.qcard-refinement-input {
  flex: 1 1 100%;
  padding: 6px 8px;
  font-size: 12px;
  border: 1px solid #c7c7c7;
  border-radius: 4px;
}
.qcard-refinement-save, .qcard-refinement-cancel {
  padding: 4px 10px;
  font-size: 11.5px;
  border: 1px solid #c7c7c7;
  border-radius: 4px;
  cursor: pointer;
  background: white;
}
.qcard-refinement-save:hover { background: #2c6b2c; color: white; border-color: #2c6b2c; }
.qcard-refinement-cancel:hover { background: #f5f5f5; }

@media (max-width: 900px) {
  .cread-qcards { grid-template-columns: 1fr; }
  .cread-verdict { font-size: 14px; padding: 6px 12px; }
}
/* Decision frame: rendered on shape='action' insights only (OPS-058).
   Two-line stop-loss + trade-off block. Visual signal: this is a
   decision the team can execute or push back on, not just a read. */
.decision-frame {
  background: rgba(210, 128, 77, 0.08);
  border-left: 3px solid var(--orange);
  border-radius: 4px;
  padding: 8px 12px;
  margin: 8px 0 10px;
  font-size: 12.5px;
}
.dframe-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 2px 0;
}
.dframe-row + .dframe-row {
  border-top: 1px dashed rgba(210, 128, 77, 0.25);
  margin-top: 4px;
  padding-top: 6px;
}
.dframe-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 700;
  color: var(--orange);
}
.dframe-value {
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.45;
}
@media (max-width: 760px) {
  .dframe-row { grid-template-columns: 1fr; gap: 2px; }
}
.insight-card-bullets {
  font-size: 12.5px;
  opacity: 0.9;
  line-height: 1.5;
  margin: 4px 0 10px;
  padding-left: 18px;
}
.insight-card-bullets li {
  margin-bottom: 4px;
}
.insight-card-bullets li:last-child {
  margin-bottom: 0;
}
/* OPS-118 V1.3 (2026-06-08): Strategic Read insight buttons collapsed from
   4 (👍/👎/✎/✓) to 2 (✎ Refine + ✓ Mark done). Buttons now carry text
   labels alongside icons · widened padding + font tweak. Existing
   thumbs_up/wrong CSS retained because the .active classes might still
   be visible on rows that hydrated old data from before V1.3 · they're
   harmless decoration if so. */
.insight-fb { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.insight-fb-btn {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px; padding: 4px 10px; cursor: pointer; font-size: 12px;
  font-family: var(--font-body); font-weight: 600;
  color: rgba(255,255,255,0.85); line-height: 1.2;
}
.insight-fb-btn:hover { background: rgba(255,255,255,0.18); }
.insight-fb-btn.thumbs_up.active { background: rgba(140,167,134,0.4); border-color: rgba(140,167,134,0.6); }
.insight-fb-btn.wrong.active     { background: rgba(177,50,47,0.4);  border-color: rgba(177,50,47,0.6); }
.insight-fb-btn.accept.active    { background: rgba(210,128,77,0.4); border-color: rgba(210,128,77,0.6); }
.insight-refinements { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.insight-refinement {
  padding: 5px 9px;
  background: rgba(255,255,255,0.04);
  border-left: 2px solid rgba(255,255,255,0.25);
  font-size: 11.5px;
  font-style: italic;
  line-height: 1.4;
  color: rgba(255,255,255,0.85);
}
.insight-refinement.incorporated { border-left-color: var(--sage); }
.insight-refinement .agent-badge {
  font-style: normal;
  font-size: 10px;
  padding: 1px 5px;
  background: rgba(140,167,134,0.25);
  border-radius: 3px;
  margin-left: 6px;
}
.insight-refinement-form { margin-top: 8px; display: flex; gap: 6px; }
.insight-refinement-form input {
  flex: 1; min-width: 220px; padding: 5px 9px; font-size: 12px;
  border: 1px solid rgba(255,255,255,0.25); border-radius: 4px;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.95);
  font-family: var(--font-body);
}
.insight-refinement-form input::placeholder { color: rgba(255,255,255,0.45); }
.insight-refinement-form input:focus { outline: none; border-color: rgba(255,255,255,0.5); }
.insight-refinement-form button {
  padding: 4px 10px; font-size: 11px; border-radius: 4px; cursor: pointer;
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.95); font-family: var(--font-body);
}
.insight-refinement-form button:hover { background: rgba(255,255,255,0.25); }

/* ============== Auto Insights ============== */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.insight-card {
  background: var(--card);
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  border-left: 4px solid var(--orange);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.insight-card.good { border-left-color: var(--green); }
.insight-card.warn { border-left-color: var(--orange); }
.insight-card.bad { border-left-color: var(--red); }
.insight-card.info { border-left-color: var(--teal); }
.insight-ico {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  font-weight: 700;
}
.insight-card.good .insight-ico { background: var(--green-soft); color: var(--green); }
.insight-card.warn .insight-ico { background: var(--amber-soft); color: #b5530a; }
.insight-card.bad .insight-ico { background: var(--red-soft); color: var(--red); }
.insight-card.info .insight-ico { background: rgba(0,68,71,0.1); color: var(--teal); }
.insight-body { flex: 1; }
.insight-label {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 3px;
}
.insight-text { font-size: 12.5px; line-height: 1.45; color: var(--text); }
.insight-text strong { color: var(--teal); font-weight: 700; }
.insight-checked {
  margin-top: 6px;
}
.insight-check-btn {
  background: none;
  border: 1px dashed var(--border);
  font-family: 'Raleway', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.15s;
}
.insight-check-btn:hover { border-color: var(--teal); color: var(--teal); }

/* Phase 2-v2 (OPS-116, 2026-06-06): inline comment thread on each insight
   card. Head row (badge + preview) always shown; expanded body slides open
   in-place on badge click. Replaces the v1 'badge opens drawer' pattern. */
.insight-thread { margin-top: 10px; }
.insight-thread-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.insight-comment-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  color: var(--muted);
  font-family: var(--font-body);
  transition: all 0.15s;
  opacity: 0.5;
}
.insight-comment-badge:hover { opacity: 1; border-color: var(--teal); color: var(--teal); }
.insight-comment-badge.has-comments { opacity: 1; border-color: var(--teal); color: var(--teal); font-weight: 600; }
.insight-comment-badge.is-open { background: var(--teal); color: #fff; border-color: var(--teal); }

/* OPS-118 V1.0.2 (2026-06-07): pulse highlight on insight cards when
   routed to from a notification or feed item. ~1.8s ease-out · brief
   enough to not annoy on repeat, long enough for the eye to land. */
@keyframes insightCardPulse {
  0%   { box-shadow: 0 0 0 0 rgba(210,128,77,0.55), 0 1px 4px rgba(0,0,0,0.04); }
  60%  { box-shadow: 0 0 0 12px rgba(210,128,77,0),    0 1px 4px rgba(0,0,0,0.04); }
  100% { box-shadow: 0 0 0 0 rgba(210,128,77,0),       0 1px 4px rgba(0,0,0,0.04); }
}
.insight-card.insight-card-pulse {
  animation: insightCardPulse 1.8s ease-out;
}
.insight-comment-count { font-weight: 700; }

.insight-thread-preview {
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.4;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.insight-thread-expanded {
  margin-top: 8px;
  padding: 10px 12px;
  background: #fafbfb;
  border-left: 3px solid var(--teal);
  border-radius: 0 6px 6px 0;
}
.insight-thread-empty {
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
  padding: 4px 0;
}
.insight-thread-composer {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.insight-thread-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 12px;
  font-family: var(--font-body);
  resize: vertical;
  min-height: 44px;
}
.insight-thread-input:focus { outline: none; border-color: var(--teal); }
.insight-thread-reply {
  align-self: flex-end;
  padding: 4px 12px;
  border-radius: 6px;
  background: var(--teal);
  color: #fff;
  border: none;
  font-size: 11.5px;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
}
.insight-thread-reply:hover { opacity: 0.9; }
.insight-thread-reply:disabled { opacity: 0.5; cursor: wait; }

/* Inline comment blocks inside the expanded thread */
.inline-comment-root {
  background: #fff;
  border: 1px solid #ecf0f0;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
  position: relative;
}
.inline-comment-root.resolved { opacity: 0.65; }
.inline-comment-head {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}
.inline-comment-author { color: var(--teal); font-weight: 700; }
.inline-comment-when { color: #999; }
.inline-comment-resolved {
  background: #e6f1e6; color: #2c6b2c;
  padding: 1px 6px; border-radius: 4px;
  font-size: 10px; font-weight: 600; text-transform: uppercase;
}
.inline-comment-body {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
  margin-bottom: 4px;
}
.inline-comment-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.inline-comment-action {
  background: none;
  border: none;
  font-size: 10.5px;
  font-family: var(--font-body);
  color: var(--muted);
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
}
.inline-comment-action:hover { background: rgba(0,68,71,0.08); color: var(--teal); }
.inline-comment-action.danger { color: #b1322f; }
.inline-comment-action.danger:hover { background: #fdecec; color: #b1322f; }

.inline-comment-replies {
  margin-top: 6px;
  margin-left: 16px;
  padding-left: 8px;
  border-left: 2px solid #ecf0f0;
}
.inline-comment-reply {
  padding: 4px 0;
  position: relative;
}
.inline-comment-reply .inline-comment-head { font-size: 10.5px; }
.inline-comment-reply .inline-comment-body { font-size: 12px; }

.inline-comment-reply-box {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.inline-comment-reply-box textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11.5px;
  font-family: var(--font-body);
  resize: vertical;
  min-height: 36px;
}
.inline-comment-reply-submit {
  align-self: flex-end;
  padding: 3px 10px;
  border-radius: 5px;
  background: var(--teal);
  color: #fff;
  border: none;
  font-size: 11px;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
}

/* ============== Targets cards ============== */
.targets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.target-card {
  background: var(--card);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  border-top: 4px solid var(--teal);
  text-align: center;
}
.target-card.locked { border-top-color: #aaa; opacity: 0.75; }
.target-label {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 6px;
}
.target-big {
  font-family: 'Montserrat', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--teal);
  line-height: 1.1;
}
.target-sub {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: 0.2px;
}
.target-actual {
  font-size: 11.5px;
  color: var(--text);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.target-actual strong { color: var(--orange); font-weight: 700; }
.target-actual.locked-text { color: var(--muted); font-style: italic; }

/* ============== Pacing bar ============== */
.pacing-card {
  background: var(--card);
  border-radius: 8px;
  padding: 18px 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  margin-bottom: 14px;
}
.pacing-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.pacing-label {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.pacing-value { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 700; color: var(--teal); }
.pacing-bar-wrap {
  background: var(--border-light);
  border-radius: 8px;
  height: 14px;
  position: relative;
  overflow: hidden;
}
.pacing-bar {
  height: 100%;
  background: var(--sage);
  border-radius: 8px;
  transition: width 0.4s;
}
.pacing-bar.amber { background: var(--orange); }
.pacing-bar.red { background: var(--red); }
.pacing-marker {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--teal);
}
.pacing-foot { font-size: 11.5px; color: var(--muted); margin-top: 8px; line-height: 1.45; }
.pacing-foot strong { color: var(--text); font-weight: 600; }

/* ============== Strategy: Goal, Criteria etc. ============== */
.goal-card {
  background: var(--teal);
  color: white;
  border-radius: 10px;
  padding: 22px 26px;
  margin-bottom: 22px;
}
.goal-card .label {
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 700;
  margin-bottom: 8px;
}
.goal-card .goal-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
}

.rule-list { list-style: none; background: var(--card); border-radius: 8px; padding: 4px 18px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.rule-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
}
.rule-list li:last-child { border-bottom: none; }
.rule-num {
  background: var(--orange);
  color: white;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.rule-text { flex: 1; }
.rule-status {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 3px 8px;
  border-radius: 10px;
  text-transform: uppercase;
}
.status-Watching { background: var(--green-soft); color: var(--green); }
.status-Triggered { background: var(--amber-soft); color: #b5530a; }
.status-Cleared { background: #e4e4e4; color: var(--muted); }
.status-Biting { background: var(--red-soft); color: var(--red); }

.rule-card {
  background: var(--card);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  border-left: 4px solid var(--orange);
  display: grid;
  grid-template-columns: 78px 1fr 90px;
  gap: 16px;
  align-items: center;
}
.rule-card.pivot { border-left-color: var(--red); }
.rule-type {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 12px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
}
.type-tune { background: var(--amber-soft); color: #b5530a; }
.type-pivot { background: var(--red-soft); color: var(--red); }
.rule-card .rule-trigger {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.rule-card .rule-trigger strong { color: var(--teal); font-weight: 700; display: block; margin-bottom: 2px; }
.rule-card .rule-action { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.rule-card .rule-action strong { color: var(--text); font-weight: 600; display: inline; margin: 0; }

.beats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.beat {
  background: var(--card);
  border-radius: 8px;
  padding: 18px;
  border-top: 4px solid var(--sage);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.beat.now { border-top-color: var(--orange); }
.beat.done { border-top-color: #aaa; opacity: 0.75; }
.beat .beat-window {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 700;
  margin-bottom: 4px;
}
.beat.done .beat-window { color: #999; }
.beat .beat-label { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 600; color: var(--teal); }
.beat .beat-state { font-size: 10px; color: var(--muted); margin-top: 6px; }

.assumption-row, .risk-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--card);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  border-left: 4px solid var(--sage);
}
.assumption-row.amber, .risk-row.amber { border-left-color: var(--orange); }
.assumption-row.red, .risk-row.red { border-left-color: var(--red); }
.assumption-row.grey, .risk-row.grey { border-left-color: #aaa; }
.assumption-row .assumption-status, .risk-row .risk-status {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 3px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  flex-shrink: 0;
  min-width: 70px;
  text-align: center;
}
.assumption-body, .risk-body { flex: 1; font-size: 13px; }
.assumption-body .reason, .risk-body .why { font-size: 11.5px; color: var(--muted); margin-top: 4px; font-style: italic; }
.risk-body .impact { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.risk-body strong { color: var(--teal); }

/* ============== Funnel ============== */
.funnel-chain { background: var(--card); border-radius: 10px; padding: 24px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); margin-bottom: 18px; }
.funnel-step {
  display: grid;
  grid-template-columns: 28px 1.4fr 130px 110px 90px;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--border);
}
.funnel-step:last-child { border-bottom: none; }
.funnel-step .num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--teal);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
}
.funnel-step.breaking .num { background: var(--red); }
.funnel-step .step-name { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 600; color: var(--teal); }
.funnel-step .step-name .step-sub { font-size: 10.5px; color: var(--muted); font-weight: 400; margin-top: 2px; display: block; font-family: 'Raleway', sans-serif; }
.funnel-step .step-value { font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 700; color: var(--text); text-align: right; }
.funnel-step .step-cvr { font-size: 11px; color: var(--muted); text-align: right; }
.funnel-step .step-rag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  padding: 4px 8px;
  border-radius: 10px;
}
.funnel-step.unconnected { opacity: 0.5; }
.funnel-step.unconnected .step-value { font-style: italic; font-size: 12px; font-weight: 500; color: var(--muted); }

.period-toggle { display: inline-flex; background: var(--border); border-radius: 8px; padding: 3px; margin-bottom: 14px; }
.period-toggle button {
  border: none;
  background: none;
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--muted);
}
.period-toggle button.active { background: var(--teal); color: white; }

.benchmark-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: var(--card);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.benchmark-table th {
  background: var(--teal);
  color: white;
  padding: 8px 12px;
  text-align: left;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
}
.benchmark-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-light); }
.benchmark-table tr:last-child td { border-bottom: none; }
.benchmark-table tr:nth-child(even) td { background: #fafafa; }

/* ============== Creative scoreboard ============== */
.ad-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: var(--card);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  margin-bottom: 18px;
}
.ad-table th {
  background: var(--teal);
  color: white;
  padding: 9px 12px;
  text-align: left;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
}
.ad-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-light); vertical-align: top; }
.ad-table tr:last-child td { border-bottom: none; }
.ad-name { font-weight: 600; color: var(--teal); max-width: 280px; }
.ad-thumb {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  background: var(--border-light);
  display: block;
  object-fit: cover;
}
.ad-status-Fresh { background: var(--green-soft); color: var(--green); }
.ad-status-Tiring { background: var(--amber-soft); color: #b5530a; }
.ad-status-Fatigued { background: var(--red-soft); color: var(--red); }
.ad-status-Paused { background: #e4e4e4; color: var(--muted); }
.ad-status {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 10px;
  white-space: nowrap;
}
.ad-rank {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 800;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  text-align: center;
  line-height: 28px;
}
.rank-top { background: var(--orange); color: white; }
.rank-norm { background: var(--green-soft); color: var(--green); }
.rank-na { background: transparent; color: var(--muted); font-weight: 500; }

/* ============== Level toggle (Campaigns / Adsets / Ads) ============== */
.level-toggle {
  display: inline-flex;
  background: var(--border);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 16px;
}
.level-toggle button {
  border: none;
  background: none;
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--muted);
}
.level-toggle button.active { background: var(--teal); color: white; }

/* ============== Ad cards (replaces ad table) ============== */
.ad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.ad-card {
  background: var(--card);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  position: relative;
  border-top: 4px solid var(--sage);
}
.ad-card.status-Fresh { border-top-color: var(--sage); }
.ad-card.status-Tiring { border-top-color: var(--orange); }
.ad-card.status-Fatigued { border-top-color: var(--red); }
.ad-card.status-Paused { border-top-color: #aaa; opacity: 0.7; }
.ad-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f0f2f0;
  overflow: hidden;
}
.ad-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ad-card-thumb-empty {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
}
.ad-card-rank {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
}
.ad-card-rank .ad-rank {
  width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.ad-card-status {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}
.ad-card-status .ad-status {
  background: rgba(255,255,255,0.95);
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.ad-card-body { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; }
.ad-card-name {
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--teal);
  line-height: 1.35;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 32px;
}
.ad-card-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  font-size: 11.5px;
}
.ad-card-metric {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed var(--border-light);
  padding: 4px 0;
}
.ad-card-metric:last-child, .ad-card-metric:nth-last-child(2) { border-bottom: none; }
.ad-card-metric .lbl {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 700;
}
.ad-card-metric .val { color: var(--text); font-weight: 700; font-family: 'Montserrat', sans-serif; }

/* ============== Ad thumbnail strip (above table) ============== */
.ad-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.ad-strip-card {
  background: var(--card);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  border-top: 3px solid var(--sage);
  position: relative;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.12s;
}
.ad-strip-card:hover { transform: translateY(-2px); box-shadow: 0 3px 10px rgba(0,0,0,0.12); }
.ad-strip-card.status-Fresh { border-top-color: var(--sage); }
.ad-strip-card.status-Tiring { border-top-color: var(--orange); }
.ad-strip-card.status-Fatigued { border-top-color: var(--red); }
.ad-strip-card.status-Paused { border-top-color: #aaa; opacity: 0.7; }
.ad-strip-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f0f2f0;
  position: relative;
  overflow: hidden;
}
.ad-strip-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #1a1a1a;
  display: block;
}
.ad-strip-thumb-empty {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 700;
}
.ad-strip-rank {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 2;
}
.ad-strip-rank .ad-rank {
  width: 22px;
  height: 22px;
  line-height: 22px;
  font-size: 10px;
}
.ad-strip-name {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--teal);
  padding: 6px 8px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 32px;
}

/* ============== Generic level table (Campaign / Adset) ============== */
.level-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: var(--card);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.level-table th {
  background: var(--teal);
  color: white;
  padding: 9px 12px;
  text-align: left;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
}
.level-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.level-table tr:last-child td { border-bottom: none; }
.level-table tr:nth-child(even) td { background: #fafafa; }
.level-table .lvl-name { font-weight: 700; color: var(--teal); }
.level-table .lvl-sub { font-size: 10.5px; color: var(--muted); margin-top: 2px; display: block; font-weight: 400; }

/* ============== GA4 landing-page tab ============== */
.ga4-banner {
  background: var(--amber-soft);
  border-left: 4px solid var(--orange);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12px;
  margin-bottom: 16px;
  color: #6e3d12;
}
.ga4-banner.ok {
  background: var(--green-soft);
  border-left-color: var(--green);
  color: #1a4a23;
}
.ga4-banner strong { color: var(--teal); }
.ga4-grid-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.ga4-card {
  background: var(--card);
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  border-top: 4px solid var(--teal);
}
.ga4-card .lbl {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 6px;
}
.ga4-card .val {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--teal);
  line-height: 1.1;
}
.ga4-card .sub { font-size: 10.5px; color: var(--muted); margin-top: 4px; }
.ga4-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: var(--card);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  margin-bottom: 18px;
}
.ga4-table th {
  background: var(--teal);
  color: white;
  padding: 8px 12px;
  text-align: left;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
}
.ga4-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-light); }
.ga4-table tr:last-child td { border-bottom: none; }
.ga4-table tr:nth-child(even) td { background: #fafafa; }
.ga4-table td.num { text-align: right; font-family: 'Montserrat', sans-serif; font-weight: 600; }
.ga4-table .path { font-family: 'Montserrat', sans-serif; font-size: 11.5px; color: var(--teal); font-weight: 600; }
.utm-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 8px;
  margin-left: 6px;
}
.utm-badge.tagged { background: var(--green-soft); color: var(--green); }
.utm-badge.untagged { background: var(--red-soft); color: var(--red); }

/* ============== Funnel, inline benchmark band ============== */
.funnel-step .step-band {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 500;
  display: block;
  margin-top: 3px;
}
.funnel-step .step-band strong { color: var(--text); font-weight: 600; }

/* ============== Activity log + Ideas log ============== */
.log-add {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  background: var(--card);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  align-items: center;
}
.log-add input[type="text"] {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
}
.log-add select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  background: white;
}
.log-add button {
  background: var(--teal);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
.log-add button:hover { background: var(--teal-dark); }
.log-add-stack { flex-direction: column; align-items: stretch; }
.log-add-stack .log-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.log-add-stack .log-add-row input { flex: 1; }
.activity-toolbar { margin-bottom: 12px; display: flex; gap: 8px; }
.activity-add-toggle {
  background: none;
  border: 1px dashed var(--border);
  color: var(--muted);
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.activity-add-toggle:hover { border-color: var(--orange); color: var(--orange); }
.log-entry.is-auto .log-type-tag.system { background: rgba(0,68,71,0.1); color: var(--teal); }

/* OPS-118 V1.1 (2026-06-07): History kind pills (All / Events / Comments).
   Sits above the existing search + dropdowns filter row. */
.history-kind-pills {
  display: flex;
  gap: 6px;
  margin: 6px 0 10px;
}
.history-kind-pill {
  padding: 4px 12px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 999px;
  font-size: 11.5px;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.history-kind-pill:hover { border-color: var(--teal); color: var(--teal); }
.history-kind-pill.active {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}

/* OPS-118 V1.1: comment rows in History · click-anywhere routes to source surface. */
.log-entry.log-entry-comment { cursor: pointer; }
.log-entry.log-entry-comment:hover { background: #f5f9fa; }
.log-entry.log-entry-comment .log-icon {
  background: rgba(0,68,71,0.1);
  color: var(--teal);
}
.log-type-tag.comment {
  background: rgba(0,68,71,0.12);
  color: var(--teal);
}

.log-list { background: var(--card); border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.log-entry {
  display: flex;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-light);
  align-items: flex-start;
}
.log-entry:last-child { border-bottom: none; }
.log-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 800;
}
.log-entry.decision .log-icon { background: var(--amber-soft); color: #b5530a; }
.log-entry.observation .log-icon { background: rgba(0,68,71,0.1); color: var(--teal); }
.log-entry.note .log-icon { background: var(--green-soft); color: var(--green); }
.log-entry.system .log-icon { background: #eaeaea; color: var(--muted); }

/* Agent-report accordion expand */
.log-entry.is-agent .log-icon { background: rgba(0,68,71,0.12); color: var(--teal); }
.log-expand {
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  padding: 0 4px;
  margin-left: 4px;
  line-height: 1;
  vertical-align: middle;
}
.log-expand:hover { color: var(--teal); }
.log-agent-detail {
  display: none;
  margin-top: 10px;
  padding: 12px 14px;
  background: #fafafa;
  border-left: 3px solid var(--teal);
  border-radius: 4px;
  font-size: 12.5px;
  line-height: 1.55;
}
.log-entry.expanded .log-agent-detail { display: block; }
.agent-block { margin-bottom: 10px; }
.agent-block:last-of-type { margin-bottom: 4px; }
.agent-label {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 700;
  margin-bottom: 4px;
}
.agent-action-type {
  font-size: 9px;
  letter-spacing: 1.5px;
  padding: 1px 6px;
  border-radius: 8px;
  text-transform: uppercase;
  font-weight: 700;
  margin-left: 4px;
}
.pa-HOLD { background: var(--green-soft); color: var(--green); }
.pa-TUNE { background: var(--amber-soft); color: #b5530a; }
.pa-PIVOT { background: var(--red-soft); color: var(--red); }
.agent-body { color: var(--ink); margin-bottom: 4px; }
.agent-why { color: var(--muted); font-size: 11.5px; }
.agent-list { margin: 4px 0 0; padding-left: 18px; }
.agent-list li { margin-bottom: 4px; }
.win-icon { margin-right: 4px; }
.agent-foot {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
  font-size: 10px;
  letter-spacing: 0.3px;
  color: var(--muted);
}
.log-body { flex: 1; }
.log-text { font-size: 13px; line-height: 1.45; color: var(--text); }
.log-meta {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: 0.2px;
}
.log-type-tag {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 8px;
  margin-right: 6px;
}
.log-type-tag.decision { background: var(--amber-soft); color: #b5530a; }
.log-type-tag.observation { background: rgba(0,68,71,0.1); color: var(--teal); }
.log-type-tag.note { background: var(--green-soft); color: var(--green); }
.log-type-tag.system { background: #eaeaea; color: var(--muted); }
.log-del {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
}
.log-del:hover { color: var(--red); }

/* ============== Phase strip (compact bar above checkpoint stack) ============== */
.phase-strip {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  background: var(--card);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.phase-pill {
  flex: 1;
  padding: 10px 12px;
  border-radius: 6px;
  background: #f0f2f0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.phase-pill.current { background: var(--orange); color: white; }
.phase-pill.past { background: #d8dad8; opacity: 0.7; }
.phase-pill .pp-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}
.phase-pill .pp-days {
  font-size: 9.5px;
  letter-spacing: 1px;
  opacity: 0.85;
}
.phase-pill .pp-progress {
  position: absolute; left: 0; bottom: 0; height: 3px;
  background: var(--orange);
  border-radius: 0 0 6px 6px;
}

/* ============== Checkpoint stack (merged timeline + milestones) ============== */
.checkpoints-stack {
  position: relative;
  padding-left: 24px;
}
.checkpoints-stack::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, var(--border) 0%, var(--border) 100%);
}
.cp-day {
  position: relative;
  margin-bottom: 18px;
}
.cp-day::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 16px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--border);
  border: 3px solid var(--grey-bg);
  z-index: 1;
}
.cp-day.past::before { background: var(--sage); }
.cp-day.current::before {
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(210,128,77,0.25);
  width: 16px;
  height: 16px;
  left: -22px;
  top: 14px;
}
.cp-day.future::before { background: var(--border); }
.cp-day-card {
  background: var(--card);
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.cp-day.current .cp-day-card {
  box-shadow: 0 3px 14px rgba(210,128,77,0.18);
  border-left: 4px solid var(--orange);
  padding-left: 14px;
}
.cp-day.past .cp-day-card { opacity: 0.65; }
.cp-day-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.cp-day-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--teal);
  letter-spacing: 0.5px;
}
.cp-day.current .cp-day-num { color: var(--orange); }
.cp-day-tag {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 8px;
  background: #eaeaea;
  color: var(--muted);
}
.cp-day.current .cp-day-tag { background: var(--orange); color: white; }
.cp-day.past .cp-day-tag { background: var(--sage); color: white; }
.cp-day-rel { font-size: 11px; color: var(--muted); margin-left: auto; }
.cp-item {
  display: flex;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  padding: 6px 0;
  border-top: 1px dashed var(--border-light);
}
.cp-item:first-of-type { border-top: none; padding-top: 4px; }
.cp-item-ico {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  margin-top: 1px;
}
.cp-item.phase .cp-item-ico { background: var(--teal); color: var(--orange); }
.cp-item.milestone .cp-item-ico { background: var(--green-soft); color: var(--green); }
.cp-item.milestone.achieved .cp-item-ico { background: var(--green); color: white; }
.cp-item.milestone.locked .cp-item-ico { background: #ddd; color: #888; }
.cp-item.decision .cp-item-ico { background: var(--amber-soft); color: #b5530a; }
.cp-item.pivot .cp-item-ico { background: var(--red-soft); color: var(--red); }
.cp-item-body { flex: 1; }
.cp-item-title { font-weight: 600; color: var(--text); }
.cp-item.milestone.achieved .cp-item-title { color: var(--green); }
.cp-item.milestone.locked .cp-item-title { color: var(--muted); }
.cp-item-detail { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.cp-item-detail strong { color: var(--text); font-weight: 600; }
.cp-item-tag {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 6px;
  vertical-align: 1px;
}
.cp-item-tag.tune { background: var(--amber-soft); color: #b5530a; }
.cp-item-tag.pivot { background: var(--red-soft); color: var(--red); }
.cp-item-tag.achieved { background: var(--green-soft); color: var(--green); }
.cp-item-tag.pending { background: #eaeaea; color: var(--muted); }
.cp-item-tag.locked { background: #ddd; color: var(--muted); }

/* ============== Milestones (legacy, kept for any holdovers) ============== */
.milestone-group { margin-bottom: 24px; }
.milestone-group-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-light);
}
.milestone {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  border-left: 4px solid var(--border);
}
.milestone.achieved { border-left-color: var(--green); }
.milestone.next { border-left-color: var(--orange); }
.milestone.locked { border-left-color: #aaa; opacity: 0.7; }
.milestone-check {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #eaeaea;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 14px;
  color: var(--muted);
}
.milestone.achieved .milestone-check { background: var(--green); color: white; }
.milestone.next .milestone-check { background: var(--orange); color: white; }
.milestone.locked .milestone-check { background: #ddd; color: #888; }
.milestone-body { flex: 1; }
.milestone-name { font-size: 13px; font-weight: 600; color: var(--text); }
.milestone.achieved .milestone-name { color: var(--green); }
.milestone-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.milestone-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.milestone-tag.achieved { background: var(--green-soft); color: var(--green); }
.milestone-tag.next { background: var(--amber-soft); color: #b5530a; }
.milestone-tag.pending { background: #eaeaea; color: var(--muted); }
.milestone-tag.locked { background: #ddd; color: var(--muted); }

/* ============== Objectives / Plan (text content) ============== */
.brief-card {
  background: var(--card);
  border-radius: 10px;
  padding: 22px 26px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  margin-bottom: 14px;
  border-left: 4px solid var(--teal);
}
.brief-card .brief-label {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 700;
  margin-bottom: 8px;
}
.brief-card .brief-content {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}
.placeholder-banner {
  background: var(--amber-soft);
  border-left: 4px solid var(--orange);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12px;
  margin-bottom: 16px;
  color: #6e3d12;
}

/* ============== Connectors ============== */
.connector-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--card);
  border-radius: 10px;
  padding: 18px 22px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  margin-bottom: 10px;
  border-left: 4px solid var(--border);
}
.connector-card.connected { border-left-color: var(--green); }
.connector-card.in_progress { border-left-color: var(--orange); }
.connector-card.pending { border-left-color: #d2804d; opacity: 0.9; }
.connector-card.not_started { border-left-color: #aaa; opacity: 0.8; }
.connector-card .conn-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
  margin-top: 6px;
}
.connector-card.connected .conn-dot { background: var(--green); box-shadow: 0 0 0 3px rgba(90,138,82,0.18); }
.connector-card.in_progress .conn-dot { background: var(--orange); box-shadow: 0 0 0 3px rgba(210,128,77,0.18); }
.connector-card.pending .conn-dot { background: var(--amber); }
.connector-card.not_started .conn-dot { background: #aaa; }
.connector-body { flex: 1; }
.connector-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 2px;
}
.connector-status {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 8px;
}
.connector-card.connected .connector-status { background: var(--green-soft); color: var(--green); }
.connector-card.in_progress .connector-status { background: var(--amber-soft); color: #b5530a; }
.connector-card.pending .connector-status { background: var(--amber-soft); color: #b5530a; }
.connector-card.not_started .connector-status { background: #eaeaea; color: var(--muted); }
.connector-details { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
/* Live status overlay on each connector card. Populated from connector_runs. */
.connector-live { margin-top: 10px; padding: 8px 10px; background: #f6f7f7; border-radius: 6px; border: 1px solid #e5e7e7; }
.connector-live.empty { color: #888; font-size: 12px; font-style: italic; }
.connector-live-head { display: flex; align-items: center; gap: 8px; }
.connector-live-label { font-size: 12px; font-weight: 600; color: #333; }
.connector-live-failed { margin-top: 4px; font-size: 12px; color: #b1322f; }
.connector-live-history { margin-top: 6px; }
.connector-live-history summary { cursor: pointer; font-size: 11px; color: #666; user-select: none; }
.connector-runs-list { margin-top: 4px; }
.connector-run-row { display: flex; gap: 8px; padding: 2px 0; border-top: 1px dashed #eee; font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.connector-run-row .run-sym { width: 12px; }
.connector-run-row.ok .run-sym { color: #2c6b2c; }
.connector-run-row.err .run-sym { color: #b1322f; }
.connector-run-row.pending .run-sym { color: #888; }
.connector-run-row .run-ts { color: #888; min-width: 140px; }
.connector-run-row .run-dur { color: #555; min-width: 60px; text-align: right; }
.connector-run-row .run-msg { color: #b1322f; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============== Tracking tab ============== */
.track-card {
  background: var(--card);
  border-radius: 10px;
  padding: 20px 22px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  border-left: 5px solid var(--sage);
  margin-bottom: 14px;
}
.track-card.amber { border-left-color: var(--orange); }
.track-card.red { border-left-color: var(--red); }
.track-card.grey { border-left-color: #aaa; opacity: 0.85; }
.track-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--teal);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.track-card .track-status {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 10px;
  margin-left: auto;
}
.track-card p { font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.55; }
.track-detail { display: flex; gap: 24px; margin-top: 10px; font-size: 11.5px; }
.track-detail div span { display: block; font-size: 9px; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; margin-bottom: 2px; }
.track-detail div strong { font-family: 'Montserrat', sans-serif; font-size: 14px; color: var(--teal); }

/* ============== Misc ============== */
.muted { color: var(--muted); }
.footnote { font-size: 11px; color: var(--muted); font-style: italic; margin-top: 6px; }

.banner-seed {
  background: var(--amber-soft);
  border-left: 4px solid var(--orange);
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 12px;
  margin-bottom: 18px;
  color: #6e3d12;
}
.banner-seed strong { color: var(--red); }

/* ============== Sub-nav (within each tab) ============== */
.sub-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin: -8px -4px 24px;
  overflow-x: auto;
  scrollbar-width: none;
}
.sub-nav::-webkit-scrollbar { display: none; }
.sub-nav-btn {
  background: none;
  border: none;
  font-family: 'Raleway', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 12px 18px;
  cursor: pointer;
  color: var(--muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color 0.15s;
}
.sub-nav-btn:hover { color: var(--teal); }
.sub-nav-btn.active { color: var(--orange); border-bottom-color: var(--orange); }

/* OPS-118 (2026-06-07): Activity Hub feed surfaces. My Feed + Team Feed
   share the same item rendering (.feed-item) as the old drawer feed but
   live at screen-width inside Activity Hub sub-panels. */
.ah-feed-list {
  background: #fff;
  border: 1px solid #ecf0f0;
  border-radius: 8px;
  overflow: hidden;
}
.ah-feed-list .feed-item { padding: 12px 18px; }
.ah-feed-empty {
  padding: 32px 24px;
  text-align: center;
  font-size: 13px;
  color: #888;
  font-style: italic;
  background: #fafbfb;
  border: 1px dashed #d5d8d8;
  border-radius: 8px;
  line-height: 1.6;
}
.ah-teamfeed-toolbar {
  margin-bottom: 12px;
}
.ah-teamfeed-search {
  width: 100%;
  max-width: 480px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: var(--font-body);
  box-sizing: border-box;
}
.ah-teamfeed-search:focus { outline: none; border-color: var(--teal); }
.ah-coming-soon {
  padding: 32px 24px;
  text-align: center;
  font-size: 13px;
  color: #888;
  background: #fafbfb;
  border: 1px dashed #d5d8d8;
  border-radius: 8px;
  line-height: 1.6;
}

/* OPS-118 V1.0.3 (2026-06-07): My Feed sections (Tasks + Mentions & threads). */
.ah-feed-section { margin-bottom: 20px; }
.ah-feed-section-head {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
  font-weight: 700;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.ah-feed-section-count {
  background: #eef1f1; color: #555;
  padding: 0 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0;
}

/* Task cards inside My Feed · clickable, route to Activity Hub > Tasks. */
.ah-task-list {
  background: #fff;
  border: 1px solid #ecf0f0;
  border-radius: 8px;
  overflow: hidden;
}
.ah-task {
  padding: 12px 16px;
  border-bottom: 1px solid #f3f5f5;
  cursor: pointer;
  transition: background 0.12s;
}
.ah-task:last-child { border-bottom: none; }
.ah-task:hover { background: #f5f9fa; }
.ah-task-head {
  display: flex; gap: 10px; align-items: center;
  margin-bottom: 4px;
}
.ah-task-prio {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 4px;
  background: #eef1f1;
  color: #555;
  flex-shrink: 0;
}
.ah-task-prio-p0 { background: #fdecec; color: #b1322f; }
.ah-task-prio-p1 { background: #fde8d3; color: #8a5a14; }
.ah-task-prio-p2 { background: #eef1f1; color: #555; }
.ah-task-prio-p3 { background: #f3f5f5; color: #888; }
.ah-task-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  flex: 1;
}
.ah-task-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-left: 50px;
  font-size: 11px;
  color: var(--muted);
}
.ah-task-due { font-style: italic; }
.ah-task-owner { color: var(--teal); font-weight: 600; }
.ah-task-tag {
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 9.5px;
}
.ah-task-tag.overdue { background: #fdecec; color: #b1322f; }
.ah-task-tag.due-soon { background: #fde8d3; color: #8a5a14; }
.ah-task-tag.unassigned { background: #f3eaf5; color: #6b1d6b; }

/* OPS-118 V1.0.5 (2026-06-07): pulse highlight on any activity row that
   the user has just navigated to from My Feed. Reuses the same orange
   ring pattern as .insight-card-pulse but works on any element (.todo,
   .decision-card, etc.) without requiring the .insight-card box-shadow
   base. ~1.8s ease-out · brief enough to not annoy, long enough to land. */
@keyframes activityRowPulse {
  0%   { box-shadow: 0 0 0 0 rgba(210,128,77,0.55); }
  60%  { box-shadow: 0 0 0 12px rgba(210,128,77,0);    }
  100% { box-shadow: 0 0 0 0 rgba(210,128,77,0);       }
}
.activity-row-pulse { animation: activityRowPulse 1.8s ease-out; }
.sub-nav-btn .badge-count {
  display: inline-block;
  background: var(--orange);
  color: white;
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 4px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.sub-panel { display: none; }
.sub-panel.active { display: block; animation: fadeIn 0.18s ease-out; }

/* ============== Phase timeline ============== */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 1100px) {
  .timeline { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .timeline { grid-template-columns: 1fr; }
}
.phase-card {
  background: var(--card);
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  border-top: 4px solid var(--border);
  display: flex;
  flex-direction: column;
}
.phase-card.current {
  border-top-color: var(--orange);
  box-shadow: 0 4px 18px rgba(210,128,77,0.18);
  transform: translateY(-2px);
}
.phase-card.past {
  opacity: 0.65;
  border-top-color: #aaa;
}
.phase-card.upcoming {
  border-top-color: var(--sage);
}
.phase-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.phase-marker {
  font-size: 8.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.phase-card.current .phase-marker { color: var(--orange); }
.phase-status-tag {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 10px;
  background: #e4e4e4;
  color: var(--muted);
  white-space: nowrap;
}
.phase-card.current .phase-status-tag { background: var(--orange); color: white; }
.phase-card.past .phase-status-tag { background: #ddd; color: var(--muted); }
.phase-days {
  font-family: 'Montserrat', sans-serif;
  font-size: 10.5px;
  color: var(--muted);
  margin-bottom: 2px;
  font-weight: 600;
}
.phase-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 10px;
  letter-spacing: 0.2px;
}
.phase-guidance {
  font-size: 11.5px;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}
.phase-section-label {
  font-size: 8.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 8px;
  margin-top: 6px;
}
.phase-rule, .phase-beat {
  font-size: 11.5px;
  line-height: 1.4;
  margin-bottom: 10px;
  padding-left: 16px;
  position: relative;
}
.phase-rule strong, .phase-beat strong { color: var(--teal); font-weight: 700; display: block; margin-bottom: 2px; }
.phase-rule-action { font-size: 11px; color: var(--muted); font-style: italic; }
.phase-rule::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
}
.phase-rule.pivot::before { background: var(--red); }
.phase-rule .rule-tag {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 4px;
  vertical-align: 1px;
}
.phase-rule .rule-tag.tune { background: var(--amber-soft); color: #b5530a; }
.phase-rule .rule-tag.pivot { background: var(--red-soft); color: var(--red); }
.phase-beat::before {
  content: "▶";
  position: absolute;
  left: 2px;
  top: 0;
  color: var(--teal);
  font-size: 9px;
}
.phase-empty {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  padding-left: 16px;
  margin-bottom: 8px;
}
.phase-outcomes {
  background: var(--bone);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.phase-outcome-row {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  padding: 3px 0;
  border-bottom: 1px dashed rgba(0,68,71,0.08);
}
.phase-outcome-row:last-child { border-bottom: none; }
.phase-outcome-row span { color: var(--muted); }
.phase-outcome-row strong { color: var(--teal); font-weight: 700; }

/* ============== Mobile / tablet, full responsive pass ============== */
@media (max-width: 900px) {
  /* Top strip wraps gracefully */
  .top-strip {
    height: auto;
    min-height: 60px;
    padding: 0 14px 8px 0;
    gap: 14px;
    flex-wrap: wrap;
  }
  .brand {
    height: 60px;
    min-width: 150px;
    padding: 0 14px;
    margin-right: 12px;
  }
  .brand img { height: 34px; }
  .strip-item { font-size: 11px; }
  .strip-label { font-size: 8.5px; letter-spacing: 1.3px; }
  .strip-spacer { display: none; }

  /* Side nav becomes a horizontal top strip below the brand strip */
  .layout { flex-direction: column; }
  .side-nav {
    width: 100%;
    max-height: none;
    position: sticky;
    top: 60px;
    padding: 0;
    display: flex;
    overflow-x: auto;
    background: var(--teal-dark);
    z-index: 90;
    align-self: stretch;
    scrollbar-width: none;
  }
  .side-nav::-webkit-scrollbar { display: none; }
  .side-nav-label { display: none; }
  .tab-btn {
    font-size: 11px;
    padding: 12px 16px;
    text-align: center;
    border-left: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .tab-btn.active { border-left: none; border-bottom-color: var(--orange); }

  /* Content area takes full width */
  .content { padding: 20px 16px 50px; max-width: 100%; }
  .g3, .g4, .g6, .g2, .beats { grid-template-columns: 1fr 1fr; }
  .insights-grid, .targets-grid, .ga4-grid-summary { grid-template-columns: 1fr 1fr; }
  .ad-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .ad-strip { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

  /* Page-head-row stacks on narrow */
  .page-head-row { flex-direction: column; align-items: stretch; }
  .last-updated { text-align: left; min-width: 0; }

  /* Hero compares wrap to 2 cols */
  .hero-head { flex-wrap: wrap; gap: 16px; }
  .hero-compare { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .hero-day-num { font-size: 28px; }

  /* Phase strip wraps */
  .phase-strip { flex-wrap: wrap; }
  .phase-pill { flex: 1 1 45%; }

  /* Tables get horizontal scroll instead of overflowing the screen */
  .ad-table, .ga4-table, .level-table, .benchmark-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .ad-table thead, .ga4-table thead, .level-table thead, .benchmark-table thead { display: table-header-group; }
  .ad-table tbody, .ga4-table tbody, .level-table tbody, .benchmark-table tbody { display: table-row-group; }

  /* Agent card slightly tighter on mobile */
  .agent-card { padding: 18px 20px; }
}

/* === Phone (≤600px), single column everywhere === */
@media (max-width: 600px) {
  .top-strip { gap: 10px; }
  .brand { min-width: 130px; padding: 0 12px; margin-right: 8px; }
  .brand img { height: 30px; }
  .strip-item { font-size: 10.5px; }

  .tab-btn { font-size: 10.5px; padding: 11px 12px; letter-spacing: 1px; }

  .content { padding: 16px 12px 40px; }
  .page-title { font-size: 20px; }
  .page-sub { font-size: 12px; margin-bottom: 18px; }

  /* Single column for everything below 600px */
  .g3, .g4, .g6, .g2, .beats,
  .ad-grid, .ad-strip,
  .ga4-grid-summary, .insights-grid, .targets-grid,
  .hero-compare,
  .timeline {
    grid-template-columns: 1fr;
  }

  .hero-v2 { padding: 18px 18px; }
  .hero-head { flex-direction: column; align-items: flex-start; }
  .hero-day { text-align: left; min-width: 0; }
  .hero-day-num { font-size: 26px; }
  .hero-status-pill { font-size: 11px; padding: 6px 10px; align-self: flex-start; }

  /* Funnel step layout collapses to a 2-row grid: name on top, metrics below */
  .funnel-step {
    grid-template-columns: 26px 1fr;
    grid-template-rows: auto auto;
    gap: 6px 12px;
  }
  .funnel-step .step-name { grid-column: 2; grid-row: 1; }
  .funnel-step .step-value { grid-column: 2; grid-row: 2; text-align: left; }
  .funnel-step .step-cvr, .funnel-step .step-rag { grid-column: 2; grid-row: 3; text-align: left; }

  /* Phase strip stacks vertically */
  .phase-strip { flex-direction: column; gap: 6px; }
  .phase-pill { flex: 1 1 100%; text-align: left; padding: 8px 12px; }
  .phase-pill .pp-progress { position: static; height: 2px; margin-top: 4px; width: 100% !important; }

  /* Agent card */
  .agent-card { padding: 16px 16px; }
  .agent-action { flex-direction: column; gap: 10px; }
  .agent-action-tag { align-self: flex-start; }
  .agent-card::before { display: none; }

  /* Checkpoint stack */
  .checkpoints-stack { padding-left: 18px; }
  .cp-day::before { left: -16px; }
  .cp-day.current::before { left: -18px; }

  /* Sub-nav: convert to a 2-column button grid, no more horizontal scroll */
  .sub-nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    border-bottom: none;
    margin: -4px 0 20px;
    overflow: visible;
    padding: 0;
  }
  .sub-nav-btn {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card);
    padding: 10px 8px;
    font-size: 10px;
    letter-spacing: 1px;
    margin: 0;
    border-bottom-width: 1px;
  }
  .sub-nav-btn.active {
    border-color: var(--orange);
    background: var(--bone);
    color: var(--orange);
    border-bottom-color: var(--orange);
  }

  /* Rule cards stack their internal grid */
  .rule-card { grid-template-columns: 1fr; gap: 8px; }

  /* Pacing cards keep their 2-col grid (g2) collapsed via above; ensure pacing bars don't overflow */
  .pacing-card { padding: 14px 16px; }
  .pacing-foot { font-size: 11px; }

  /* Connector cards still readable */
  .connector-card { padding: 14px 16px; gap: 12px; }

  /* To-do list inputs stack */
  .todo-add { flex-wrap: wrap; }
  .todo-add input[type="text"] { width: 100%; flex: 1 1 100%; }

  /* Log add (activity) stack */
  .log-add { flex-wrap: wrap; }
  .log-add input[type="text"] { flex: 1 1 100%; }
}

/* ============== Insight framework (A2) ============== */
.action-chip-row { display: flex; margin: 0 0 18px 0; }
.action-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px; font-weight: 600;
  font-family: var(--font-body); font-size: 13px;
  border: 1px solid transparent;
}
.action-chip.all-clear { background: #ecf5ec; color: #2c6b2c; border-color: #cce4cc; }
.action-chip.to-check  { background: #fdf4e0; color: #8a6a14; border-color: #f3dfa8; }
.action-chip.needed    { background: #fdecec; color: #b1322f; border-color: #f5c8c6; }
.action-chip-ico { font-size: 14px; line-height: 1; }
.action-chip-detail { font-weight: 400; opacity: 0.8; }

.info-strip { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.info-strip .insight-card.info { padding: 12px 14px; }

.insight-zone { margin-bottom: 22px; }
.insight-zone.is-empty { display: none; }
.insight-zone-head {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 10px 0; font-family: var(--font-head);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal); font-weight: 600;
}
.insight-zone-head-ico { font-size: 16px; }
.insight-zone-head-count {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: rgba(0, 68, 71, 0.08); color: var(--teal);
  letter-spacing: 0; text-transform: none; font-weight: 500;
}
.insight-zone-empty {
  padding: 12px 14px; color: #777; font-size: 13px; font-style: italic;
  background: #fafafa; border-radius: 8px; border: 1px dashed #e0e0e0;
}

.insight-card { position: relative; }
.insight-tags {
  position: absolute; top: 10px; right: 12px;
  display: flex; gap: 6px; align-items: center;
}
.kind-tag, .phase-tag {
  font-size: 10px; padding: 2px 7px; border-radius: 4px;
  font-family: var(--font-body); letter-spacing: 0.04em; font-weight: 600;
  text-transform: uppercase;
}
.kind-tag.tech        { background: #fdecec; color: #b1322f; }
.kind-tag.performance { background: #eaf1f5; color: #1d4e6b; }
.kind-tag.funnel      { background: #f4eaf5; color: #6b1d6b; }
.kind-tag.info        { background: #f0f0f0; color: #555; }
.phase-tag.learning   { background: #fef6e3; color: #8a6a14; }
.phase-tag.optimize   { background: #e6f1e6; color: #2c6b2c; }
.phase-tag.scale      { background: #e8edf4; color: #1d3e6b; }
.phase-tag.all        { background: #f0f0f0; color: #555; }
.insight-body { padding-right: 70px; }  /* room for tags */

/* ============== Setup tab ============== */
.setup-prose { font-size: 14px; line-height: 1.6; color: #1f2d2e; max-width: 880px; }
.setup-prose p { margin: 10px 0; }
.setup-prose strong { color: #1f2d2e; }
.setup-prose code { background: rgba(0,68,71,0.08); padding: 1px 5px; border-radius: 3px; font-size: 13px; }
.setup-prose ul { margin: 10px 0; padding-left: 22px; line-height: 1.7; }
.setup-prose h3 { font-family: var(--font-head); color: var(--teal); font-size: 16px; margin: 22px 0 10px 0; }
.setup-prose h4 { font-family: var(--font-head); color: var(--teal); font-size: 14px; margin: 18px 0 8px 0; text-transform: uppercase; letter-spacing: 0.06em; }

.setup-card {
  background: #fff; border: 1px solid #e6e6e6; border-radius: 10px;
  padding: 18px 22px; margin-bottom: 16px;
}
.setup-card.callout { background: #f5f9fa; border-color: #d5e3e3; border-left: 4px solid var(--teal); }

.flow-diagram {
  font-family: 'SF Mono', Monaco, monospace; font-size: 12px; line-height: 1.5;
  background: #f5f9fa; border: 1px solid #d5e3e3; border-radius: 8px;
  padding: 16px 20px; margin: 16px 0; color: #1f2d2e; overflow-x: auto;
  white-space: pre;
}

.connection-card {
  display: flex; gap: 14px; padding: 14px 18px; margin-bottom: 10px;
  background: #fff; border: 1px solid #e6e6e6; border-radius: 8px;
}
.connection-status {
  flex-shrink: 0; font-size: 11px; padding: 4px 10px; border-radius: 999px;
  height: fit-content; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.connection-status.live    { background: #ecf5ec; color: #2c6b2c; }
.connection-status.partial { background: #fef6e3; color: #8a6a14; }
.connection-status.coming  { background: #f0f0f0; color: #555; }
.connection-body { flex: 1; }
.connection-name { font-weight: 600; color: #1f2d2e; font-size: 14px; margin-bottom: 4px; }
.connection-meta { font-size: 12px; color: #777; line-height: 1.5; }
.connection-meta strong { color: #1f2d2e; }

.metric-row, .rule-row {
  display: grid; grid-template-columns: 220px 1fr; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid #f0f0f0; align-items: baseline;
}
.metric-row:last-child, .rule-row:last-child { border-bottom: none; }
.metric-name { font-family: var(--font-head); color: var(--teal); font-weight: 600; font-size: 13px; }
.metric-def, .rule-body { font-size: 13px; color: #444; line-height: 1.55; }
.rule-tag { display: inline-block; font-size: 10px; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.04em; font-weight: 600; text-transform: uppercase; margin-right: 6px; vertical-align: middle; }
.rule-tag.tech { background: #fdecec; color: #b1322f; }
.rule-tag.performance { background: #eaf1f5; color: #1d4e6b; }
.rule-tag.funnel { background: #f4eaf5; color: #6b1d6b; }
.rule-tag.info { background: #f0f0f0; color: #555; }

.roadmap-slice {
  background: #fff; border: 1px solid #e6e6e6; border-radius: 10px;
  padding: 14px 18px; margin-bottom: 10px;
}
.roadmap-slice.done { border-left: 4px solid #2c6b2c; background: #f6fbf6; }
.roadmap-slice.in_progress { border-left: 4px solid #d2804d; background: #fffaf4; }
.roadmap-slice.queued { border-left: 4px solid var(--teal); }
.roadmap-slice.future { border-left: 4px solid #b0b0b0; opacity: 0.85; }
.roadmap-slice-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  cursor: pointer; user-select: none;
  margin-bottom: 0;
}
.roadmap-slice-head:hover { opacity: 0.85; }
.roadmap-slice-toggle {
  margin-left: auto; font-size: 14px; color: #777;
  transition: transform 0.15s;
}
.roadmap-slice.expanded .roadmap-slice-toggle { transform: rotate(90deg); }
.roadmap-slice-body { display: none; padding-top: 4px; }
.roadmap-slice.expanded .roadmap-slice-body { display: block; }
.roadmap-slice-shipped-by { font-size: 11px; color: #777; }
.roadmap-slice-id { font-family: var(--font-head); color: var(--teal); font-weight: 700; font-size: 13px; min-width: 70px; }
.roadmap-slice-title { font-weight: 600; color: #1f2d2e; font-size: 14px; flex: 1; }
.roadmap-status-pill { font-size: 10px; padding: 2px 8px; border-radius: 999px; letter-spacing: 0.04em; font-weight: 600; text-transform: uppercase; }
.roadmap-status-pill.done { background: #ecf5ec; color: #2c6b2c; }
.roadmap-status-pill.in_progress { background: #fef6e3; color: #8a6a14; }
.roadmap-status-pill.queued { background: rgba(0,68,71,0.10); color: var(--teal); }
.roadmap-status-pill.future { background: #f0f0f0; color: #555; }
.roadmap-slice-summary { font-size: 13px; color: #444; line-height: 1.55; margin: 6px 0 8px 0; }
.roadmap-items { font-size: 12px; color: #555; padding-left: 20px; line-height: 1.7; margin: 6px 0 0 0; }
.roadmap-items li.done { color: #555; }
.roadmap-items li.in_progress { color: #8a6a14; font-weight: 500; }
.roadmap-section { margin-top: 12px; }
.roadmap-section-label {
  font-family: var(--font-head); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--teal); font-weight: 600; margin-bottom: 4px;
}
.roadmap-section-body { font-size: 13px; color: #444; line-height: 1.6; }
.roadmap-slice-shipped { font-size: 11px; color: #777; margin-left: auto; }

/* OPS-086 Phase 3 (2026-06-02): Developer tab sub-nav + sub-panels */
.dev-subnav {
  display: flex;
  gap: 4px;
  background: #f3f5f5;
  border: 1px solid #e0e8e9;
  border-radius: 6px;
  padding: 4px;
  margin: 14px 0 20px 0;
}
.dev-subnav-btn {
  flex: 1;
  background: transparent;
  border: none;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--font-body);
  color: #6F8586;
  cursor: pointer;
  border-radius: 4px;
  letter-spacing: 0.02em;
  transition: background 0.12s ease, color 0.12s ease;
}
.dev-subnav-btn:hover { color: var(--teal); background: #fff; }
.dev-subnav-btn.active { background: var(--teal); color: #fff; }
.dev-subnav-btn.active:hover { background: #002A2D; color: #fff; }
.dev-subpanel-content {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 20px 24px;
}
.dev-subpanel-content > h4:first-child { margin-top: 0; }

/* OPS-086 Phase 3: Safe / Caution / Danger zone grid in Read first */
.dev-zone-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 14px 0 20px 0;
}
.dev-zone {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  padding: 12px 14px;
  border-top: 3px solid;
}
.dev-zone-safe { border-top-color: #4F7449; }
.dev-zone-caution { border-top-color: #C3804D; }
.dev-zone-danger { border-top-color: #a31616; }
.dev-zone-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1f2d2e;
  margin-bottom: 8px;
}
.dev-zone-safe .dev-zone-label { color: #4F7449; }
.dev-zone-caution .dev-zone-label { color: #8A5A1F; }
.dev-zone-danger .dev-zone-label { color: #a31616; }
.dev-zone ul {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  color: #444;
  line-height: 1.55;
}
.dev-zone code {
  font-size: 11px;
  background: #f3f5f5;
  padding: 1px 4px;
  border-radius: 3px;
}
@media (max-width: 900px) {
  .dev-zone-grid { grid-template-columns: 1fr; }
  .dev-subnav { flex-wrap: wrap; }
  .dev-subnav-btn { flex: 1 1 40%; }
}

/* OPS-135 (2026-06-16): initiative groups · the outcome-level parent that
   wraps lane sub-groups. Orange underline distinguishes it from the lane's
   teal underline (two-level hierarchy). */
.roadmap-initiative-group {
  margin-bottom: 34px;
}
.roadmap-initiative-header {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 4px;
  padding-bottom: 10px;
  border-bottom: 3px solid #C3804D;
}
.roadmap-initiative-label {
  font-family: var(--font-head); font-size: 22px;
  font-weight: 700; color: var(--teal);
  letter-spacing: 0.01em;
  flex: 1;
}
.roadmap-initiative-count {
  font-size: 11px; color: #6F8586;
  font-family: var(--font-body); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap;
}
.roadmap-initiative-vision {
  font-size: 14.5px; color: #3E6567;
  line-height: 1.5;
  margin: 10px 0 18px;
  font-weight: 600;
}
/* Lanes nested inside an initiative read as lighter sub-sections. */
.roadmap-initiative-group .roadmap-lane-group {
  background: #fbfcfc;
  margin-bottom: 14px;
}
.roadmap-initiative-group .roadmap-lane-label { font-size: 15px; }
.roadmap-initiative-group .roadmap-lane-header { border-bottom-width: 1px; }

/* OPS-086 (2026-06-02): two-tier card pattern + lane grouping. */
.roadmap-lane-group {
  background: #fcfdfd;
  border: 1px solid #e0e8e9;
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 22px;
}
.roadmap-lane-header {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 4px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--teal);
}
.roadmap-lane-label {
  font-family: var(--font-head); font-size: 18px;
  font-weight: 700; color: var(--teal);
  letter-spacing: 0.01em;
  flex: 1;
}
.roadmap-lane-count {
  font-size: 11px; color: #6F8586;
  font-family: var(--font-body); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.roadmap-lane-desc {
  font-size: 13px; color: #4a5d5e;
  line-height: 1.55;
  margin-bottom: 14px;
  font-style: italic;
}
.roadmap-slice-why-matters {
  font-size: 14px;
  color: #1f2d2e;
  line-height: 1.55;
  margin-top: 6px;
  padding: 0 0 4px 0;
}
.roadmap-slice-techid {
  font-size: 10.5px;
  color: #888;
  letter-spacing: 0.04em;
  margin-top: 8px;
  margin-bottom: 4px;
  font-family: var(--font-body);
}
.roadmap-slice-techid .roadmap-cat-chip {
  vertical-align: baseline;
  font-size: 10px;
}
/* When the card has plain_title + why_this_matters, the body opens on
   click of the toggle but the techid line stays visible (it's the
   compact reference). */
.roadmap-slice.shipped { border-left: 4px solid #2c6b2c; background: #f6fbf6; }
.roadmap-slice.deferred { border-left: 4px solid #b0b0b0; opacity: 0.85; }
.roadmap-slice.proposed { border-left: 4px solid var(--teal); border-left-style: dashed; }
.roadmap-status-pill.shipped { background: #ecf5ec; color: #2c6b2c; }
.roadmap-status-pill.deferred { background: #f0f0f0; color: #555; }
.roadmap-status-pill.proposed { background: rgba(0,68,71,0.06); color: var(--teal); }

.decision-card {
  background: #fff; border: 1px solid #e6e6e6; border-radius: 10px;
  padding: 16px 20px; margin-bottom: 12px;
  border-left: 4px solid var(--teal);
}
.decision-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.decision-id { font-family: var(--font-head); color: var(--teal); font-weight: 700; font-size: 12px; }
.decision-category {
  font-size: 10px; padding: 2px 8px; border-radius: 999px;
  background: rgba(0,68,71,0.08); color: var(--teal); letter-spacing: 0.04em; font-weight: 600; text-transform: uppercase;
}
.decision-date { font-size: 11px; color: #888; margin-left: auto; }
.decision-title { font-weight: 600; color: #1f2d2e; font-size: 14px; margin-bottom: 8px; line-height: 1.4; }
.decision-section { margin: 8px 0; font-size: 13px; line-height: 1.55; color: #444; }
.decision-section strong { color: #1f2d2e; }

.glossary-grid {
  display: grid; grid-template-columns: 200px 1fr; gap: 8px 16px;
  font-size: 13px; line-height: 1.6;
}
.glossary-grid dt { font-family: var(--font-head); color: var(--teal); font-weight: 600; }
.glossary-grid dd { margin: 0; color: #444; }

.filter-row {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
}
.filter-row button {
  padding: 6px 14px; font-size: 12px; border-radius: 999px;
  border: 1px solid #d0d0d0; background: #fff; cursor: pointer;
  font-family: var(--font-body); font-weight: 500;
}
.filter-row button.active { background: var(--teal); color: #fff; border-color: var(--teal); }
.filter-row button .filter-count {
  font-size: 10.5px; opacity: 0.7; margin-left: 4px;
}
.filter-row button.active .filter-count { opacity: 1; }

/* Setup → Roadmap + Changes & decisions: search / date / sort controls */
.setup-controls {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-bottom: 12px; padding: 10px 14px;
  background: #fafbfb; border: 1px solid #ececec; border-radius: 8px;
}
.setup-search {
  flex: 1; min-width: 200px;
  padding: 7px 11px; border: 1px solid #ddd; border-radius: 6px;
  font-size: 13px; font-family: var(--font-body);
}
.setup-search:focus { outline: none; border-color: var(--teal); }
.setup-sort {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #555;
}
.setup-sort label { font-weight: 500; }
.setup-sort select, .setup-sort input[type="date"] {
  padding: 5px 8px; border: 1px solid #ddd; border-radius: 6px;
  font-size: 12.5px; font-family: var(--font-body); background: #fff;
}
.setup-result-count {
  font-size: 12px; color: #777; margin: 4px 2px 14px;
  font-style: italic;
}

/* ============== Paid LP detail panel (Slice B) ============== */
.paid-lp-panel {
  background: linear-gradient(180deg, #f5f9fa 0%, #ecf4f5 100%);
  border: 1px solid #d5e3e3; border-radius: 12px;
  padding: 22px 24px; margin-bottom: 24px;
}
.paid-lp-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.paid-lp-head h3 { margin: 0; font-family: var(--font-head); color: var(--teal); font-size: 17px; }
.lp-section-label {
  margin: 18px 0 10px 0; font-family: var(--font-head);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal); font-weight: 600;
}
.lp-section-sublabel {
  margin: 14px 0 8px 0; font-size: 12px; color: #555; font-weight: 600;
}
.lp-soft-note { font-size: 12px; color: #777; }
.lp-soft-note code { background: rgba(0, 68, 71, 0.08); padding: 1px 5px; border-radius: 3px; }

/* Scroll-by-depth bar (Among the engaged) */
.scroll-depth-bar {
  background: #fff; border: 1px solid #e6e6e6; border-radius: 8px;
  padding: 10px 14px; margin-bottom: 12px;
}
.scroll-depth-bar .depth-row {
  display: grid; grid-template-columns: 50px 1fr 220px;
  align-items: center; gap: 12px; padding: 5px 0;
}
.scroll-depth-bar .depth-label {
  font-weight: 600; color: var(--teal); font-size: 13px;
  font-family: var(--font-head);
}
.scroll-depth-bar .depth-track {
  height: 12px; background: #ecf0f0; border-radius: 6px; overflow: hidden;
}
.scroll-depth-bar .depth-fill {
  height: 100%; background: linear-gradient(90deg, var(--orange), #b46a2a);
  border-radius: 6px; min-width: 2px; transition: width 0.3s ease;
}
.scroll-depth-bar .depth-meta {
  font-size: 12px; color: #555; text-align: right;
}
@media (max-width: 760px) {
  .scroll-depth-bar .depth-row { grid-template-columns: 40px 1fr; }
  .scroll-depth-bar .depth-meta { grid-column: 2; text-align: left; font-size: 11px; }
}

.lp-bounce-bar {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 18px; background: #fff;
  border-radius: 8px; border: 1px solid #e6e6e6;
  border-left-width: 4px;
}
.lp-bounce-bar.green  { border-left-color: #2c6b2c; }
.lp-bounce-bar.amber  { border-left-color: #d9822b; }
.lp-bounce-bar.red    { border-left-color: #b1322f; }
.lp-bounce-bar.grey   { border-left-color: #b0b0b0; }
.lp-bounce-pct { font-family: var(--font-head); font-size: 28px; font-weight: 700; color: #1f2d2e; }
.lp-bounce-verdict { font-size: 13px; color: #444; }

.lp-cta-row {
  margin-top: 8px; padding: 10px 14px;
  background: #fff; border-radius: 8px; border: 1px solid #e6e6e6;
  font-size: 13px; color: #444;
}
.lp-cta-row strong { color: #1f2d2e; margin-right: 6px; }
.cta-pill {
  display: inline-block; background: rgba(210, 128, 77, 0.12); color: #8a5024;
  padding: 3px 9px; border-radius: 999px; font-size: 12px;
  margin-right: 6px; margin-top: 4px;
}

.lp-context-strip {
  margin-top: 18px; padding: 10px 14px;
  background: #fafafa; border: 1px dashed #ddd; border-radius: 8px;
  font-size: 12px; color: #555; line-height: 1.5;
}
.lp-context-strip strong { color: #1f2d2e; }
.lp-context-strip em { color: #777; }

/* ============== Activity filter (A5+) ============== */
.activity-filter {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 10px 0 14px 0;
}
.activity-filter input[type="search"] {
  flex: 1; min-width: 200px; padding: 7px 11px;
  border: 1px solid #d0d0d0; border-radius: 6px; font-size: 13px;
  font-family: var(--font-body);
}
.activity-filter select {
  padding: 7px 11px; border: 1px solid #d0d0d0; border-radius: 6px;
  font-size: 13px; font-family: var(--font-body); background: #fff;
}
.activity-filter input:focus, .activity-filter select:focus { outline: none; border-color: var(--teal); }
.activity-filter-clear {
  width: 32px; height: 32px; border: 1px solid #d0d0d0; background: #fff;
  border-radius: 6px; cursor: pointer; font-size: 18px; color: #777;
  line-height: 1;
}
.activity-filter-clear:hover { background: #f5f5f5; color: #1f2d2e; }

/* ============== Inline dismiss / completion form (A5) ============== */
.dismiss-form, .complete-form {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 8px 0;
}
.dismiss-input, .complete-input {
  flex: 1; min-width: 200px; padding: 7px 10px;
  border: 1px solid #d0d0d0; border-radius: 6px; font-size: 13px;
  font-family: var(--font-body);
}
.dismiss-input:focus, .complete-input:focus { outline: none; border-color: var(--teal); }
.dismiss-save, .dismiss-cancel, .complete-save, .complete-cancel {
  padding: 7px 14px; font-size: 12px; border-radius: 6px;
  font-family: var(--font-body); cursor: pointer; border: 1px solid #d0d0d0;
}
.dismiss-save, .complete-save { background: var(--teal); color: #fff; border-color: var(--teal); font-weight: 600; }
.dismiss-cancel, .complete-cancel { background: #fff; color: #444; }
.dismiss-save:hover, .complete-save:hover { background: #003337; }

/* Completion note display in done list */
.todo-comment {
  margin-top: 4px; font-size: 12px; color: #555; font-style: italic;
  padding-left: 4px; border-left: 2px solid #ddd; padding-left: 8px;
}
.todo-signoff {
  font-size: 11px; color: #888; margin-top: 2px;
}

/* Tasks tab 4-section structure */
.tasks-section { margin-bottom: 22px; }
.tasks-section.collapsed .tasks-section-body { display: none; }
.tasks-section-head {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px 0;
  cursor: pointer; user-select: none;
  font-family: var(--font-head); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--teal); font-weight: 600;
}
.tasks-section-head:hover { opacity: 0.85; }
.tasks-section-head .count-pill {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: rgba(0, 68, 71, 0.08); color: var(--teal);
  letter-spacing: 0; text-transform: none; font-weight: 500;
}
.tasks-section-head .toggle-ico {
  margin-left: auto; font-size: 12px; transition: transform 0.15s;
}
.tasks-section.collapsed .tasks-section-head .toggle-ico { transform: rotate(-90deg); }
.tasks-empty {
  padding: 12px 14px; color: #777; font-size: 13px; font-style: italic;
  background: #fafafa; border-radius: 8px; border: 1px dashed #e0e0e0;
}
.todo .todo-kind, .todo .todo-when, .todo .todo-deeplink {
  font-size: 10px; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.04em;
  font-weight: 600; text-transform: uppercase; margin-right: 6px;
}
.todo .todo-kind.tech        { background: #fdecec; color: #b1322f; }
.todo .todo-kind.performance { background: #eaf1f5; color: #1d4e6b; }
.todo .todo-kind.funnel      { background: #f4eaf5; color: #6b1d6b; }
.todo .todo-kind.note        { background: #f0f0f0; color: #555; }
.todo .todo-when             { background: #fef6e3; color: #8a6a14; }
.todo .todo-deeplink {
  background: var(--teal); color: #fff; text-decoration: none;
  text-transform: none; letter-spacing: 0;
}
.todo .todo-deeplink:hover { background: #003337; }

/* ============== Task state actions (Done / Defer / Not required) ============== */
.task-actions {
  display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap;
}
.task-actions-inline { margin-top: 5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* OPS-077 follow-up 2026-06-01: inline due_date + owner edit on existing
   task cards. Click input to edit, saves on blur/change. */
.task-inline-edit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
}
.task-inline-edit-label {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.task-inline-edit input[type="date"],
.task-inline-edit input[type="text"] {
  border: 1px solid var(--border-light);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 11px;
  font-family: 'Raleway', sans-serif;
  color: var(--text);
  background: #fff;
  min-width: 130px;
}
.task-inline-edit input[type="text"] { min-width: 100px; }
.task-inline-edit input:focus { outline: 1px solid var(--teal); border-color: var(--teal); }
.task-act {
  font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  padding: 3px 10px; border-radius: 10px; border: 1.5px solid #bbb;
  background: none; color: #666; cursor: pointer;
}
.task-act:hover { border-color: var(--teal); color: var(--teal); }
.task-act.done-act { border-color: var(--green, #2d7a3a); color: var(--green, #2d7a3a); }
.task-act.done-act:hover { background: var(--green, #2d7a3a); color: #fff; }

.task-status-label {
  font-size: 11px; font-weight: 600; margin-top: 6px;
  display: flex; align-items: center; gap: 8px;
}
.deferred-label { color: #8a6a14; }
.not-req-label { color: #888; }
.task-undo-btn {
  font-size: 10px; padding: 2px 8px; border-radius: 8px;
  border: 1px solid #ccc; background: none; color: #888; cursor: pointer;
}
.task-undo-btn:hover { border-color: #888; color: #444; }

.task-defer-form, .task-not-req-form {
  margin-top: 8px; padding: 10px 12px; background: #f9f9f7;
  border: 1px solid #e0ddd5; border-radius: 8px;
}
.task-defer-row {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
}
.task-defer-row select,
.task-defer-row input[type="text"],
.task-defer-row input[type="date"] {
  font-size: 12px; padding: 5px 9px; border: 1px solid #d0d0d0;
  border-radius: 6px; background: #fff; flex: 1; min-width: 120px;
}
.task-not-req-form input[type="text"] {
  font-size: 12px; padding: 5px 9px; border: 1px solid #d0d0d0;
  border-radius: 6px; background: #fff; width: 100%; margin-bottom: 8px; box-sizing: border-box;
}
.task-defer-btns { display: flex; gap: 8px; }
.task-defer-confirm, .task-not-req-confirm {
  font-size: 11px; font-weight: 700; padding: 4px 14px; border-radius: 8px;
  border: none; background: var(--teal); color: #fff; cursor: pointer;
}
.task-defer-confirm:hover, .task-not-req-confirm:hover { background: #003337; }
.task-defer-cancel, .task-not-req-cancel {
  font-size: 11px; padding: 4px 12px; border-radius: 8px;
  border: 1px solid #ccc; background: none; color: #888; cursor: pointer;
}
.task-defer-cancel:hover, .task-not-req-cancel:hover { border-color: #999; color: #444; }

.todo.deferred { opacity: 0.8; }
.todo.not-required { opacity: 0.7; }

/* Decision defer button, shares styling with resolve btn */
.dc-defer-btn {
  font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  padding: 3px 10px; border-radius: 10px; border: 1.5px solid #bbb;
  background: none; color: #888; cursor: pointer; flex-shrink: 0;
}
.dc-defer-btn:hover { border-color: #8a6a14; color: #8a6a14; }
.dc-defer-undo-btn {
  font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  padding: 3px 10px; border-radius: 10px; border: 1.5px solid #ccc;
  background: none; color: #888; cursor: pointer; margin-left: auto;
}
.dc-defer-undo-btn:hover { border-color: #888; color: #444; }
.decision-card.deferred { opacity: 0.8; }
.dc-defer-form {
  margin: 8px 0; padding: 10px 12px; background: #f9f9f7;
  border: 1px solid #e0ddd5; border-radius: 8px;
}

/* ============== Strategy Check card (Slice A4) ============== */
.strategy-check-card {
  background: linear-gradient(180deg, #f5f9fa 0%, #ecf4f5 100%);
  border: 1px solid #d5e3e3; border-left: 4px solid var(--teal);
  border-radius: 10px; padding: 16px 20px; margin: 0 0 18px 0;
}
.strategy-check-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal); font-weight: 600; font-family: var(--font-head);
  margin-bottom: 8px;
}
.strategy-check-head .verdict-pill {
  margin-left: auto; font-size: 11px; padding: 3px 9px; border-radius: 999px;
  letter-spacing: 0; text-transform: none; font-weight: 500;
}
.verdict-pill.validating       { background: #ecf5ec; color: #2c6b2c; }
.verdict-pill.early_signal     { background: #f0f0f0; color: #555; }
.verdict-pill.invalidating     { background: #fdf4e0; color: #8a6a14; }
.verdict-pill.invalidated      { background: #fdecec; color: #b1322f; }
.verdict-pill.inconclusive     { background: #f0f0f0; color: #777; }
.verdict-pill.strategy_under_stress, .verdict-pill.implementation_drift { background: #fdecec; color: #b1322f; }
.verdict-pill.lucky_off_strategy { background: #f4eaf5; color: #6b1d6b; }

.confidence-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  margin-left: 6px; font-weight: 500;
}
.confidence-pill.high          { background: #ecf5ec; color: #2c6b2c; }
.confidence-pill.medium        { background: #fef6e3; color: #8a6a14; }
.confidence-pill.low           { background: #fdf4e0; color: #8a6a14; opacity: 0.8; }
.confidence-pill.experimental  { background: #f4eaf5; color: #6b1d6b; }
.strategy-check-hypothesis {
  font-weight: 600; color: #1f2d2e;
  margin-bottom: 6px; line-height: 1.45; font-size: 15px;
}
.strategy-check-source {
  font-size: 11px; color: #6b7d7e; margin-bottom: 14px;
  letter-spacing: 0.02em;
}
.strategy-check-meta-label {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #9aabac; font-weight: 600; margin-right: 4px;
}
.strategy-check-meta-dot { color: #c5d3d4; margin: 0 4px; }
.strategy-check-sectionlabel {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #9aabac; font-weight: 600; margin-bottom: 4px;
  font-family: var(--font-head);
}
.strategy-check-evidence {
  font-size: 13px; color: #2a3a3b; line-height: 1.55; margin-bottom: 12px;
}
.strategy-check-rec {
  font-size: 13px; color: #1f2d2e;
  background: rgba(210, 128, 77, 0.08);
  border-left: 3px solid var(--orange);
  padding: 8px 12px; border-radius: 0 6px 6px 0;
  margin-bottom: 12px;
}
.strategy-check-rec-label {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--orange); font-weight: 700; margin-right: 6px;
}
.strategy-check-alts {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed #d8e1e2;
}
.strategy-check-alts ul {
  margin: 0; padding-left: 18px; list-style: disc;
}
.strategy-check-alts li {
  font-size: 12.5px; color: #4a5e60; line-height: 1.55; margin-bottom: 4px;
}
.strategy-check-needs-review {
  margin-top: 10px; padding: 8px 12px; background: #fff3d4; color: #6b5012;
  border-radius: 6px; font-size: 12px; border: 1px solid #f0dca0;
}
.strategy-check-empty {
  font-size: 13px; color: #777; font-style: italic;
}
.strategy-check-deferred {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed #d8e1e2;
  font-size: 12px; color: #4a5e60;
}
.strategy-check-deferred strong { color: #1f2d2e; font-weight: 600; }
.strategy-check-deferred ul {
  margin: 4px 0 0 0; padding-left: 18px; list-style: disc;
}
.strategy-check-deferred li { margin-bottom: 3px; line-height: 1.5; }
.strategy-check-deferred-reason { color: #7a8e90; font-style: italic; }

/* ============== Change-request duplicate check modal ============== */
.modal-card.cr-dup-card { max-width: 620px; }
.cr-dup-draft {
  margin: 12px 0; padding: 10px 14px;
  background: #f5f9fa; border-left: 3px solid var(--teal); border-radius: 4px;
  font-size: 13px; color: #1f2d2e; line-height: 1.55;
}
.cr-dup-draft strong { color: var(--teal); }
.cr-dup-matches {
  display: flex; flex-direction: column; gap: 8px;
  margin: 14px 0 18px;
}
.cr-dup-match {
  padding: 10px 14px; border: 1px solid #e6e6e6; border-radius: 8px;
  background: #fafbfb; border-left: 3px solid var(--orange);
}
.cr-dup-match-meta {
  display: flex; gap: 10px; align-items: center;
  font-size: 11.5px; margin-bottom: 4px;
}
.cr-dup-pct {
  background: var(--orange); color: #fff;
  padding: 2px 8px; border-radius: 999px;
  font-weight: 600; letter-spacing: 0.04em;
}
.cr-dup-source { color: #666; font-family: 'SFMono-Regular', Menlo, monospace; }
.cr-dup-title { font-size: 13.5px; color: #1f2d2e; line-height: 1.5; font-weight: 500; }

/* ============== Guided tour ============== */
.tour-scrim {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0, 30, 32, 0.55);
  display: none;
  pointer-events: auto;
}
.tour-scrim.visible { display: block; }

.tour-card {
  position: fixed; z-index: 10002;
  display: none;
  width: 380px; max-width: 92vw;
  background: #fff; border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  padding: 18px 22px 16px;
  font-family: var(--font-body);
}
.tour-card.visible { display: block; }

.tour-card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.tour-step-counter {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #888; font-weight: 600;
}
.tour-status-tag {
  font-size: 10.5px; padding: 2px 9px; border-radius: 999px;
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.tour-status-working  { background: #ecf5ec; color: #2c6b2c; }
.tour-status-demo     { background: var(--orange); color: #fff; }
.tour-status-future   { background: #f4eaf5; color: #6b1d6b; }
.tour-skip {
  margin-left: auto;
  background: transparent; border: 1px solid #ddd;
  color: #777; padding: 3px 12px; border-radius: 6px;
  font-size: 11.5px; cursor: pointer;
  font-family: var(--font-body);
}
.tour-skip:hover { border-color: #b1322f; color: #b1322f; }

.tour-title {
  margin: 0 0 8px 0;
  font-family: var(--font-head); font-size: 18px;
  color: var(--teal); line-height: 1.3;
}
.tour-body {
  font-size: 13.5px; color: #1f2d2e; line-height: 1.55;
  margin-bottom: 14px;
}
.tour-body strong { color: var(--teal); font-weight: 600; }

.tour-actions {
  display: flex; flex-direction: column; gap: 10px;
}
.tour-ask {
  background: rgba(210, 128, 77, 0.12);
  color: #8a5024; border: 1px solid rgba(210, 128, 77, 0.4);
  padding: 8px 12px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: var(--font-body);
  text-align: center;
}
.tour-ask:hover { background: var(--orange); color: #fff; border-color: var(--orange); }
.tour-nav { display: flex; justify-content: space-between; gap: 8px; }
.tour-nav button {
  padding: 7px 16px;
  border-radius: 6px;
  font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: var(--font-body);
}
.tour-prev {
  background: transparent; color: #555;
  border: 1px solid #ddd;
}
.tour-prev:hover { border-color: var(--teal); color: var(--teal); }
.tour-next {
  background: var(--teal); color: #fff; border: none;
}
.tour-next:hover { background: #003337; }

/* Highlight ring around the current tour target. OPS-097 followup
   2026-06-03: lift the highlighted element ABOVE the scrim (z-index 10001
   vs scrim at 10000) so the element renders un-dimmed against the dark
   overlay · prior version had ring visible but element itself looked
   dimmed because scrim covered it. position: relative establishes a
   positioning context so z-index works for elements that are otherwise
   static; outline used instead of box-shadow so it sits OUTSIDE the
   element's natural box and doesn't get clipped by overflow. Pulse
   animation draws the eye. */
.tour-highlight {
  position: relative !important;
  z-index: 10001 !important;
  outline: 3px solid var(--orange) !important;
  outline-offset: 4px;
  border-radius: 6px;
  animation: tour-pulse 1.6s ease-in-out infinite;
}
@keyframes tour-pulse {
  0%, 100% { outline-color: var(--orange); outline-width: 3px; }
  50%      { outline-color: rgba(210, 128, 77, 0.5); outline-width: 6px; }
}

/* Setup → At a glance "Take the tour" CTA */
.setup-tour-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px 18px; margin-bottom: 24px;
  background: linear-gradient(180deg, #f5f9fa 0%, #ecf4f5 100%);
  border: 1px solid #d5e3e3; border-left: 4px solid var(--orange);
  border-radius: 10px;
  font-size: 14px; color: #1f2d2e;
}
.setup-tour-cta strong { color: var(--teal); }
.setup-tour-btn {
  padding: 9px 18px; background: var(--orange); color: #fff;
  border: none; border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 600; font-family: var(--font-body);
  white-space: nowrap;
}
.setup-tour-btn:hover { background: #b46a2a; }

/* ============== Change requests panel (Setup > At a glance) ============== */
.cr-panel {
  background: #fff8f0; border: 1.5px solid #e8b87a; border-radius: 10px;
  padding: 14px 18px; margin-bottom: 20px;
}
.cr-panel-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
}
.cr-panel-icon { font-size: 16px; }
.cr-panel-title { font-family: var(--font-head); font-weight: 700; color: #7a4e10; font-size: 14px; flex: 1; }
.cr-panel-count {
  background: var(--orange); color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 700; padding: 2px 8px; min-width: 22px; text-align: center;
}
.cr-panel-view-btn {
  padding: 5px 12px; font-size: 12px; border-radius: 6px;
  background: var(--teal); color: #fff; border: none; cursor: pointer;
  font-family: var(--font-body); font-weight: 600;
}
.cr-panel-view-btn:hover { opacity: 0.85; }
.cr-row {
  display: flex; gap: 10px; align-items: baseline; padding: 5px 0;
  border-top: 1px solid #f0dfc0; font-size: 12.5px; flex-wrap: wrap;
}
.cr-surface {
  font-family: var(--font-head); font-weight: 600; color: var(--teal);
  font-size: 11px; text-transform: capitalize; min-width: 70px;
}
.cr-body { flex: 1; color: #444; line-height: 1.4; }
.cr-time { color: #999; font-size: 11px; white-space: nowrap; }
.cr-more { font-size: 12px; color: #888; padding: 4px 0 0; font-style: italic; }
.cr-panel-note { font-size: 11.5px; color: #8a6230; margin: 10px 0 0; line-height: 1.5; }

/* ============== Change requests triage tab ============== */
.req-count-badge {
  display: inline-block; background: var(--orange); color: #fff;
  border-radius: 999px; font-size: 11px; font-weight: 700;
  padding: 1px 8px; margin-left: 8px; vertical-align: middle;
}
.req-card {
  background: #fff; border: 1px solid #e6e6e6; border-radius: 10px;
  padding: 16px 20px; margin-bottom: 12px;
  border-left: 4px solid var(--orange);
}
.req-card.req-resolved { opacity: 0.5; pointer-events: none; }
.req-card-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap;
}
.req-surface {
  font-family: var(--font-head); font-weight: 700; color: var(--teal);
  font-size: 11px; text-transform: capitalize;
}
.req-suggested-label { font-size: 11px; color: #888; font-style: italic; }
.req-meta { font-size: 11px; color: #aaa; margin-left: auto; }
.req-body {
  font-size: 13.5px; color: #333; line-height: 1.55;
  margin-bottom: 12px; padding: 8px 12px;
  background: #fafbfb; border-radius: 6px; border-left: 3px solid #e0e0e0;
}
.req-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.req-btn {
  padding: 6px 14px; font-size: 12px; border-radius: 6px;
  border: 1px solid #ddd; cursor: pointer; font-family: var(--font-body); font-weight: 600;
  background: #fff; color: #333;
}
.req-btn:hover { opacity: 0.8; }
.req-btn.accept-roadmap { background: var(--teal); color: #fff; border-color: var(--teal); }
.req-btn.accept-fix    { background: #2c6b2c; color: #fff; border-color: #2c6b2c; }
.req-btn.defer-btn     { background: #f5f0e8; color: #7a6040; border-color: #d8c9a8; }
.req-btn.decline-btn   { background: #fef0f0; color: #c0392b; border-color: #f5c0bb; }
.req-decline-form {
  display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap;
}
.req-decline-input {
  flex: 1; min-width: 200px; padding: 6px 10px; border: 1px solid #ddd;
  border-radius: 6px; font-size: 13px; font-family: var(--font-body);
}
.req-decline-confirm { padding: 6px 14px; background: #c0392b; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; font-family: var(--font-body); }
.req-decline-cancel  { padding: 6px 12px; background: #fff; color: #666; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; font-size: 12px; font-family: var(--font-body); }
.req-quickfix-form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.req-quickfix-task { padding: 6px 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; font-family: var(--font-body); width: 100%; box-sizing: border-box; }
.req-quickfix-row { display: flex; gap: 8px; }
.req-quickfix-owner, .req-quickfix-trigger { flex: 1; padding: 6px 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 12px; font-family: var(--font-body); }
.req-quickfix-actions { display: flex; gap: 8px; }
.req-quickfix-confirm { padding: 6px 14px; background: var(--teal); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; font-family: var(--font-body); }
.req-quickfix-cancel  { padding: 6px 12px; background: #fff; color: #666; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; font-size: 12px; font-family: var(--font-body); }
.comment-flag.agent-feedback { background: #fff3e0; color: #b45309; border: 1px solid #f5c97a; border-radius: 4px; font-size: 10.5px; font-weight: 700; padding: 2px 7px; }
.req-done {
  padding: 10px 14px; border-radius: 6px; font-size: 13px;
  background: #f0f7f0; color: #2c6b2c; border: 1px solid #c8e0c8;
}
.req-done.req-declined { background: #fef0f0; color: #c0392b; border-color: #f5c0bb; }
.req-done.req-deferred { background: #f5f0e8; color: #7a6040; border-color: #d8c9a8; }
.req-triaged-row { opacity: 0.7; }
.req-triaged-badge { font-size: 10.5px; font-weight: 700; color: #888; background: #f4f4f4; border-radius: 4px; padding: 2px 6px; margin-left: auto; }

/* ============== Roadmap category chips + group headers ============== */
.roadmap-cat-chip {
  font-size: 10px; padding: 2px 7px; border-radius: 999px;
  font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  margin-right: 4px; flex-shrink: 0;
}
.roadmap-cat-chip.cat-feature  { background: #e8f0ff; color: #2a4baa; }
.roadmap-cat-chip.cat-agent    { background: #f0e8ff; color: #6a2aaa; }
.roadmap-cat-chip.cat-infra    { background: #e8f5e8; color: #2a6a2a; }
.roadmap-cat-chip.cat-ux       { background: #fff4e0; color: #aa6a00; }
.roadmap-cat-chip.cat-fix      { background: #fde8e8; color: #aa2a2a; }
.roadmap-cat-chip.cat-ops      { background: #e8f0f5; color: #2a5a7a; }

.roadmap-cat-group { margin-bottom: 8px; }
.roadmap-cat-group-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px; margin: 20px 0 6px;
  background: #f8f9fa; border-radius: 8px; border-left: 4px solid #ddd;
}
.roadmap-cat-group[data-cat="feature"] .roadmap-cat-group-header { border-left-color: #2a4baa; }
.roadmap-cat-group[data-cat="agent"]   .roadmap-cat-group-header { border-left-color: #6a2aaa; }
.roadmap-cat-group[data-cat="infra"]   .roadmap-cat-group-header { border-left-color: #2a6a2a; }
.roadmap-cat-group[data-cat="ux"]      .roadmap-cat-group-header { border-left-color: #aa6a00; }
.roadmap-cat-group-label {
  font-family: var(--font-head); font-weight: 700; font-size: 13px;
  padding: 2px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em;
}
.roadmap-cat-group-label.cat-feature { background: #e8f0ff; color: #2a4baa; }
.roadmap-cat-group-label.cat-agent   { background: #f0e8ff; color: #6a2aaa; }
.roadmap-cat-group-label.cat-infra   { background: #e8f5e8; color: #2a6a2a; }
.roadmap-cat-group-label.cat-ux      { background: #fff4e0; color: #aa6a00; }
.roadmap-cat-group-desc { font-size: 12px; color: #666; flex: 1; }
.roadmap-cat-group-count {
  font-size: 11px; background: rgba(0,0,0,0.07); border-radius: 999px;
  padding: 2px 8px; color: #555; font-weight: 600;
}
/* Category filter row uses a slightly different shade to distinguish from status filters */
.roadmap-cat-filter button.active { background: #1f2d2e; color: #fff; border-color: #1f2d2e; }

/* ============== Change log accordion ============== */
.decision-card-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  cursor: pointer; user-select: none; padding: 2px 0;
}
.decision-card-head:hover { opacity: 0.82; }
.accordion-toggle {
  margin-left: auto; font-size: 11px; color: #aaa; flex-shrink: 0;
  transition: transform 0.15s;
}
.accordion-card.expanded .accordion-toggle { transform: rotate(90deg); }
.decision-card-body { display: none; padding-top: 10px; border-top: 1px solid #f0f0f0; margin-top: 8px; }
.accordion-card.expanded .decision-card-body { display: block; }
/* Title moves into the header row for the accordion */
.decision-card-head .decision-title { font-size: 13.5px; flex: 1; margin: 0; }

/* ============== Connector run history ============== */
.connector-runs { margin-top: 8px; padding-top: 8px; border-top: 1px solid #efefef; }
.connector-runs-label {
  font-size: 10.5px; font-weight: 600; color: #999; text-transform: uppercase;
  letter-spacing: 0.05em; display: block; margin-bottom: 4px;
}
.connector-run {
  display: flex; align-items: center; gap: 10px; font-size: 12px;
  padding: 3px 0; border-bottom: 1px solid #f5f5f5;
}
.connector-run:last-child { border-bottom: none; }
.connector-run-status { font-weight: 600; min-width: 60px; }
.connector-run-ok .connector-run-status { color: #2c6b2c; }
.connector-run-error .connector-run-status { color: #c0392b; }
.connector-run-running .connector-run-status { color: var(--orange); }
.connector-run-ts { color: #888; font-size: 11px; }
.connector-run-err { color: #c0392b; font-size: 11px; flex: 1; font-style: italic; }
.connector-runs-empty { font-size: 12px; color: #aaa; font-style: italic; }

@media (max-width: 540px) {
  .tour-card { width: calc(100vw - 24px); }
}

/* ============== Floating selection menu ============== */
.selection-menu {
  position: fixed; z-index: 10001;
  display: none;
  background: var(--teal); color: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  padding: 4px;
  font-family: var(--font-body);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
}
.selection-menu.visible { display: inline-flex; }
.selection-menu button {
  background: transparent; border: none;
  color: #fff; cursor: pointer;
  padding: 6px 12px; border-radius: 5px;
  font-size: 12.5px; font-weight: 600;
  font-family: var(--font-body);
  display: inline-flex; align-items: center; gap: 4px;
  line-height: 1;
}
.selection-menu button:hover { background: rgba(255,255,255,0.18); }
.selection-menu button#selection-dismiss {
  font-size: 16px; padding: 4px 8px; opacity: 0.7;
}
.selection-menu button#selection-dismiss:hover { opacity: 1; }
.selection-menu::after {
  content: ""; position: absolute; bottom: -6px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--teal);
}

/* ============== Quick-chat fab + drawer (site-wide) ============== */
/* panel-fab replaces both chat-fab and comments-fab */
.panel-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 9997;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--orange); color: #fff;
  border: none; cursor: pointer;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  transition: transform 0.15s, background 0.15s;
}
.panel-fab:hover { background: #b46a2a; transform: translateY(-2px); }
.panel-fab .fab-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--teal); color: #fff;
  border-radius: 999px; padding: 2px 7px;
  font-size: 11px; font-weight: 700; font-family: var(--font-body);
  min-width: 18px; box-sizing: border-box; border: 2px solid #fff;
}

/* unified panel drawer, replaces chat-drawer + comments-drawer */
.panel-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(480px, 92vw); z-index: 9998;
  background: #fff; box-shadow: -8px 0 32px rgba(0,0,0,0.18);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.panel-drawer.open { transform: translateX(0); }

.panel-drawer-header {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 8px;
  border-bottom: 1px solid #ecf0f0;
  background: linear-gradient(180deg, #f5f9fa 0%, #fff 100%);
  min-height: 32px;
}

/* OPS-118 (2026-06-07): drawer slimmed to agent-chat-only. The team feed
   moved to Activity Hub > Team Feed at screen-width.
   Phase 4-v2 had two stacked sections; 4-v2.1 widened the split to 50/50;
   OPS-118 strips the feed section entirely · agent section now takes full
   drawer height via the `.panel-agent-only` modifier. */
.panel-agent-section {
  display: flex; flex-direction: column;
  flex: 1 1 100%;
  min-height: 0;
  background: #fafbfb;
}
.panel-agent-section.panel-agent-only { flex: 1 1 auto; }
.panel-section-head {
  padding: 10px 14px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
  font-weight: 700;
  border-bottom: 1px solid #ecf0f0;
  display: flex; align-items: center; justify-content: space-between;
  background: #fff;
}
.panel-agent-section .panel-section-head { background: #fafbfb; }

/* Attention-feed sub-tabs */
.panel-feed-tabs {
  display: flex; gap: 0;
}
.panel-feed-tab {
  padding: 4px 12px; font-size: 11px; font-weight: 700;
  font-family: var(--font-head); border: none; background: none;
  cursor: pointer; color: #999; letter-spacing: 0.04em;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  text-transform: uppercase;
}
.panel-feed-tab:hover { color: var(--teal); }
.panel-feed-tab.active { color: var(--orange); border-bottom-color: var(--orange); }
.panel-feed-tab .cf-count {
  display: inline-block; margin-left: 4px;
  background: #eef1f1; color: #555;
  padding: 0 6px; border-radius: 999px;
  font-size: 10px; font-weight: 700;
}
.panel-feed-tab.active .cf-count { background: var(--orange); color: #fff; }

.panel-feed-list {
  flex: 1; overflow-y: auto;
  padding: 4px 0;
}
.panel-feed-empty {
  padding: 18px 16px;
  font-size: 12px; color: #888; font-style: italic;
  line-height: 1.5;
}

.feed-item {
  padding: 10px 14px;
  border-bottom: 1px solid #f3f5f5;
  cursor: pointer;
  transition: background 0.12s;
}
.feed-item:hover { background: #f5f9fa; }
.feed-item.resolved { opacity: 0.65; }
.feed-item-head {
  display: flex; gap: 6px; align-items: center;
  font-size: 11px; color: #888;
  margin-bottom: 3px;
  flex-wrap: wrap;
}
.feed-item-author { color: var(--teal); font-weight: 700; }
.feed-item-surface { color: #999; font-style: italic; }
.feed-item-when { color: #999; margin-left: auto; }
/* Phase 4-v2.1 (OPS-116): ✓ mark-as-read button. Hidden until hover,
   then sits at the right of the head row · click acks without routing. */
.feed-item-ack {
  display: none;
  background: none; border: 1px solid var(--border);
  border-radius: 999px; width: 18px; height: 18px;
  padding: 0; cursor: pointer; color: var(--muted);
  font-size: 11px; font-family: var(--font-body); font-weight: 700;
  align-items: center; justify-content: center;
  line-height: 1;
}
.feed-item:hover .feed-item-ack { display: inline-flex; }
.feed-item-ack:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.feed-item-body {
  font-size: 12.5px; color: var(--text);
  line-height: 1.45;
  margin-bottom: 4px;
}
.feed-item-meta {
  display: flex; gap: 6px; align-items: center;
  font-size: 10.5px; flex-wrap: wrap;
}
.feed-item-replies {
  color: #888;
  font-style: italic;
}
.feed-item-tag {
  padding: 1px 6px; border-radius: 4px;
  font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; font-size: 9.5px;
}
.feed-item-tag.mention { background: #fde8d3; color: #8a5a14; }
.feed-item-tag.resolved { background: #e6f1e6; color: #2c6b2c; }
.feed-item-tag.cr { background: #fde0e0; color: #b1322f; }
.feed-item-tag.af { background: #e3dcf4; color: #5a3fa0; }

.chat-drawer-threads-row {
  display: flex; gap: 8px; padding: 10px 18px;
  border-bottom: 1px solid #ecf0f0; background: #fafbfb;
  align-items: center;
}
.chat-drawer-thread-btn {
  padding: 6px 12px; background: var(--teal); color: #fff;
  border: none; border-radius: 6px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: var(--font-body); white-space: nowrap;
}
.chat-drawer-thread-btn:hover { background: #003337; }
.chat-drawer-thread-pick {
  flex: 1; padding: 5px 8px;
  border: 1px solid #ddd; border-radius: 6px;
  font-size: 12.5px; font-family: var(--font-body);
  background: #fff;
}

.chat-drawer-messages {
  flex: 1; overflow-y: auto;
  padding: 18px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.chat-msg-surface {
  background: rgba(0, 68, 71, 0.08); color: var(--teal);
  padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; margin-right: 4px;
}
.chat-msg-user .chat-msg-surface {
  background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.9);
}

.chat-drawer-composer {
  display: flex; gap: 8px; padding: 12px 14px;
  border-top: 1px solid #ecf0f0; background: #fafbfb;
}
.chat-drawer-composer textarea {
  flex: 1; padding: 8px 10px;
  border: 1px solid #ddd; border-radius: 6px;
  font-size: 13px; font-family: var(--font-body);
  resize: vertical; min-height: 40px;
}
.chat-drawer-composer textarea:focus { outline: none; border-color: var(--teal); }
.chat-drawer-composer .chat-send { padding: 8px 18px; font-size: 13px; align-self: stretch; }

@media (max-width: 540px) {
  .panel-fab { right: 14px; bottom: 14px; width: 48px; height: 48px; font-size: 18px; }
}

/* ============== Comments (inside panel drawer) ============== */

.comments-filter {
  display: flex; gap: 6px; padding: 10px 18px;
  border-bottom: 1px solid #ecf0f0; background: #fafbfb;
}
.comments-filter button {
  font-size: 12px; padding: 5px 12px; border-radius: 999px;
  background: #fff; border: 1px solid #d5e3e3; color: #555;
  cursor: pointer; font-family: var(--font-body);
}
.comments-filter button:hover { border-color: var(--teal); color: var(--teal); }
.comments-filter button.active {
  background: var(--teal); color: #fff; border-color: var(--teal);
}
.comments-filter .cf-count {
  font-size: 10.5px; opacity: 0.7; margin-left: 4px;
}
.comments-filter button.active .cf-count { opacity: 1; }

.comments-list {
  flex: 1; overflow-y: auto;
  padding: 14px 18px; display: flex; flex-direction: column; gap: 12px;
}
.comments-empty {
  margin: auto; padding: 28px 16px; text-align: center;
  color: #999; font-style: italic; font-size: 13px;
}

.comment-thread {
  background: #fff; border: 1px solid #e6e6e6; border-radius: 10px;
  padding: 12px 14px;
  border-left: 4px solid #d5e3e3;
}
.comment-thread.resolved { opacity: 0.65; border-left-color: #2c6b2c; }
.comment-thread.change-request { border-left-color: var(--orange); background: #fffaf2; }

.comment-row-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 6px; font-size: 11.5px;
}
.comment-author { font-weight: 600; color: var(--teal); }
.comment-when   { color: #888; }
.comment-surface-tag {
  background: #ecf4f5; color: var(--teal); padding: 1px 7px;
  border-radius: 999px; font-size: 10.5px;
}
.comment-flag {
  padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.04em;
}
.comment-flag.resolved       { background: #ecf5ec; color: #2c6b2c; }
.comment-flag.change-request { background: var(--orange); color: #fff; }
.comment-flag.resolved-by-agent {
  background: #ecf5f0; color: var(--teal); border: 1px solid #cfe6da;
  font-weight: 700;
}
.comment-flag.mentions       { background: #f4eaf5; color: #6b1d6b; }

.comment-body {
  font-size: 13.5px; color: #1f2d2e; line-height: 1.55;
  margin-bottom: 8px; white-space: pre-wrap;
}
.comment-mention {
  color: #004447; background: #d6eced;
  padding: 1px 5px; border-radius: 3px; font-weight: 700;
}

/* @mention autocomplete dropdown */
.mention-dropdown {
  display: none; position: fixed; z-index: 9999;
  background: #fff; border: 1.5px solid #d0dadb; border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,68,71,.12); overflow: hidden;
  min-width: 160px;
}
.mention-option {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer; font-size: 13px;
}
.mention-option:hover, .mention-option.selected { background: #ecf4f5; }
.mention-option-handle { font-weight: 700; color: var(--teal); }
.mention-option-name { color: #6b7a7b; font-size: 11.5px; }

.comment-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  font-size: 11.5px;
}
.comment-actions button {
  background: transparent; border: 1px solid #d5e3e3;
  padding: 3px 10px; border-radius: 6px;
  color: var(--teal); cursor: pointer; font-family: var(--font-body);
  font-size: 11.5px;
}
.comment-actions button:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.comment-actions .comment-action-danger { border-color: #f0c8c8; color: #b1322f; }
.comment-actions .comment-action-danger:hover { background: #b1322f; border-color: #b1322f; color: #fff; }

.comment-replies {
  margin-top: 10px; padding-left: 12px;
  border-left: 2px solid #ecf0f0;
  display: flex; flex-direction: column; gap: 8px;
}
.comment-reply {
  background: #fafbfb; border: 1px solid #ecf0f0; border-radius: 6px;
  padding: 8px 12px;
}
.comment-reply .comment-body { margin-bottom: 0; font-size: 13px; }
.comment-action-mini {
  background: transparent; border: none; color: #b1322f;
  font-size: 11px; cursor: pointer; padding: 4px 0 0; opacity: 0.7;
}
.comment-action-mini:hover { opacity: 1; text-decoration: underline; }

.comment-reply-box {
  margin-top: 10px; padding: 8px 0; display: none;
}
.comment-reply-box.open { display: block; }
.comment-reply-box textarea {
  width: 100%; box-sizing: border-box;
  padding: 8px 10px; border: 1px solid #ddd; border-radius: 6px;
  font-size: 13px; font-family: var(--font-body);
  resize: vertical; min-height: 50px;
}
.comment-reply-submit {
  margin-top: 6px; padding: 5px 14px;
  background: var(--teal); color: #fff; border: none; border-radius: 6px;
  font-size: 12px; cursor: pointer; font-family: var(--font-body);
}

.comments-composer {
  border-top: 1px solid #ecf0f0; padding: 14px 18px;
  background: #fafbfb;
}
.comments-composer-meta {
  font-size: 11.5px; color: #777; margin-bottom: 6px;
}
/* Phase 6-actual (OPS-116, 2026-06-06): soften 'Post to <surface>' framing.
   Lead with the action ('Add note'), surface is quieter context. */
.composer-meta-label { color: #555; font-weight: 600; }
.composer-meta-surface { color: var(--teal); }
.comments-composer textarea {
  width: 100%; box-sizing: border-box;
  padding: 9px 12px; border: 1px solid #ddd; border-radius: 6px;
  font-size: 13.5px; font-family: var(--font-body);
  resize: vertical; min-height: 60px;
}
.comments-composer textarea:focus { outline: none; border-color: var(--teal); }
.comments-composer-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 8px;
}
.comments-composer-cr {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #555; cursor: pointer;
}
.comments-composer-cr input { margin: 0; }
.comments-composer-submit {
  padding: 7px 18px; background: var(--teal); color: #fff;
  border: none; border-radius: 6px; cursor: pointer;
  font-size: 13px; font-weight: 600; font-family: var(--font-body);
}
.comments-composer-submit:hover { background: #003337; }

@media (max-width: 540px) {
  .panel-fab { right: 14px; bottom: 14px; width: 48px; height: 48px; font-size: 18px; }
}

/* ============== Chat tab (Slice D stub) ============== */
.tab-btn-badge {
  display: inline-block; margin-left: 6px;
  font-size: 9.5px; padding: 1px 6px; border-radius: 999px;
  background: var(--orange); color: #fff;
  letter-spacing: 0.04em; text-transform: lowercase;
  font-weight: 600; vertical-align: middle;
  font-family: var(--font-body);
}
.page-title-badge {
  display: inline-block; margin-left: 10px;
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  background: var(--orange); color: #fff;
  font-family: var(--font-body); font-weight: 600;
  letter-spacing: 0.04em; vertical-align: middle;
}

.chat-shell {
  display: grid; grid-template-columns: 260px 1fr;
  gap: 16px; min-height: 600px; align-items: stretch;
}
.chat-threads {
  display: flex; flex-direction: column; gap: 6px;
  background: #fafbfb; border: 1px solid #e6e6e6; border-radius: 10px;
  padding: 12px; overflow-y: auto;
  max-height: calc(100vh - 200px);
}
.chat-new-thread {
  width: 100%; padding: 10px 12px; margin-bottom: 8px;
  background: var(--teal); color: #fff;
  border: none; border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: var(--font-body);
}
.chat-new-thread:hover { background: #003337; }
.chat-thread {
  text-align: left; padding: 10px 12px;
  background: #fff; border: 1px solid #e6e6e6; border-radius: 8px;
  cursor: pointer; font-family: var(--font-body);
  border-left: 3px solid #d5e3e3;
}
.chat-thread:hover { border-left-color: var(--orange); background: #f5f9fa; }
.chat-thread.active {
  border-left-color: var(--orange);
  background: linear-gradient(180deg, #f5f9fa 0%, #ecf4f5 100%);
}
.chat-thread-title {
  font-size: 13px; color: var(--teal); font-weight: 600;
  margin-bottom: 3px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.chat-thread-meta { font-size: 11px; color: #888; }
.chat-threads-empty {
  font-size: 12px; color: #999; font-style: italic;
  padding: 12px 8px;
}

.chat-main {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e6e6e6; border-radius: 10px;
  overflow: hidden;
}
.chat-banner {
  padding: 10px 16px; font-size: 12.5px; line-height: 1.5;
  background: #fffaf2; color: #6b5012;
  border-bottom: 1px solid #f0dca0;
}
.chat-banner strong { color: #1f2d2e; }

/* Loud variant, used on the Chat tab + chat drawer so the stub state
   can't be mistaken for a real agent. */
.chat-banner-loud {
  background: linear-gradient(180deg, #fdecec 0%, #fdf6f5 100%);
  color: #6b2422; border-bottom: 2px solid #b1322f;
  padding: 14px 18px;
}
.chat-banner-loud .chat-banner-title {
  font-family: var(--font-head); font-size: 14px; font-weight: 700;
  color: #b1322f; margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.chat-banner-loud .chat-banner-body {
  font-size: 13px; color: #6b2422; line-height: 1.55;
}
.chat-banner-loud .chat-banner-body strong { color: #b1322f; }
.chat-banner-loud.chat-banner-compact {
  padding: 10px 14px;
}
.chat-banner-loud.chat-banner-compact .chat-banner-title { font-size: 12.5px; margin-bottom: 2px; }
.chat-banner-loud.chat-banner-compact .chat-banner-body { font-size: 12px; }
.chat-messages {
  flex: 1; overflow-y: auto;
  padding: 20px 24px; display: flex; flex-direction: column; gap: 12px;
  max-height: calc(100vh - 340px); min-height: 380px;
}
.chat-empty {
  margin: auto; color: #999; font-style: italic; font-size: 13px;
  text-align: center; max-width: 360px;
}
.chat-msg {
  max-width: 75%; padding: 10px 14px; border-radius: 12px;
  line-height: 1.55; font-size: 14px;
}
.chat-msg-user {
  align-self: flex-end;
  background: var(--teal); color: #fff;
  border-bottom-right-radius: 2px;
}
.chat-msg-bot {
  align-self: flex-start;
  background: #f0f3f3; color: #1f2d2e;
  border-bottom-left-radius: 2px;
}
.chat-msg-system {
  align-self: center;
  background: #fffaf2; color: #6b5012;
  font-size: 12.5px; font-style: italic;
  border: 1px dashed #f0dca0;
}
.chat-msg-body { white-space: pre-wrap; }
.chat-msg-meta {
  font-size: 10.5px; opacity: 0.7; margin-top: 6px;
  display: flex; align-items: center; gap: 6px;
}
.chat-msg-user .chat-msg-meta { color: rgba(255,255,255,0.75); justify-content: flex-end; }
.chat-msg-stub {
  background: var(--orange); color: #fff;
  padding: 1px 6px; border-radius: 999px;
  font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase;
  font-weight: 600;
}

/* Typing indicator (three-dot pulse while agent-chat edge function responds) */
.chat-msg-typing {
  opacity: 0.7;
}
.typing-dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: #8ca786; border-radius: 50%;
  margin: 0 2px;
  animation: typing-pulse 1.2s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
  40%           { opacity: 1;   transform: scale(1.15); }
}

/* Proposal footer - Accept / Decline / Defer block from agent */
.chat-msg-proposal-footer {
  margin-top: 10px;
  padding: 10px 12px;
  border-left: 3px solid var(--teal);
  background: #f4f8f8;
  border-radius: 0 6px 6px 0;
}
.chat-msg-proposal-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--teal); margin-bottom: 4px;
}
.chat-msg-proposal-title {
  font-size: 13px; color: #1f2d2e; line-height: 1.45; margin-bottom: 8px;
}
.chat-msg-proposal-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.chat-proposal-btn {
  padding: 4px 12px; border-radius: 6px;
  font-size: 12px; font-family: var(--font-body); font-weight: 600;
  cursor: not-allowed; opacity: 0.5; border: 1px solid transparent;
}
.chat-proposal-accept  { background: var(--teal); color: #fff; }
.chat-proposal-decline { background: transparent; color: var(--teal); border-color: var(--teal); }
.chat-proposal-defer   { background: transparent; color: #888; border-color: #ccc; }
.chat-msg-proposal-note {
  font-size: 10.5px; color: #999; margin-top: 6px; font-style: italic;
}

/* Phase 5 (OPS-116): per-message "File" button and inline destination form */
.chat-msg-file-btn {
  display: inline-block;
  margin-top: 6px;
  background: none; border: 1px dashed var(--border);
  border-radius: 6px; padding: 2px 8px;
  font-size: 11px; font-family: var(--font-body);
  color: var(--muted); cursor: pointer;
  transition: all 0.15s;
}
.chat-msg-file-btn:hover { border-color: var(--teal); color: var(--teal); }
.chat-msg-file-form {
  margin-top: 8px; padding: 10px 12px;
  border-left: 3px solid var(--orange);
  background: #fdf8f4; border-radius: 0 6px 6px 0;
}
.chat-file-text {
  width: 100%; box-sizing: border-box; border: 1px solid var(--border);
  border-radius: 5px; padding: 6px 8px; font-size: 12px;
  font-family: var(--font-body); resize: vertical; margin-bottom: 8px;
}
.chat-file-dests { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.chat-file-dest-btn {
  padding: 4px 10px; border-radius: 12px;
  font-size: 11px; font-family: var(--font-body); font-weight: 600;
  background: var(--card); border: 1px solid var(--border);
  cursor: pointer; transition: all 0.12s;
}
.chat-file-dest-btn:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.chat-file-dest-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.chat-file-cancel {
  font-size: 11px; color: var(--muted); background: none;
  border: none; cursor: pointer; font-family: var(--font-body);
}
.chat-file-cancel:hover { color: var(--red); }
.chat-file-status { font-size: 11px; color: var(--muted); font-style: italic; margin: 4px 0; }
.chat-file-done { font-size: 12px; color: var(--teal); font-weight: 600; }

/* Tool call count tag in message meta */
.chat-msg-tools {
  background: #e8f0ef; color: var(--teal);
  padding: 1px 6px; border-radius: 999px;
  font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase;
  font-weight: 600;
}

.chat-composer {
  display: flex; gap: 10px; padding: 14px 16px;
  border-top: 1px solid #ecf0f0; background: #fafbfb;
}
.chat-composer textarea {
  flex: 1; padding: 10px 12px;
  border: 1px solid #ddd; border-radius: 8px;
  font-size: 14px; font-family: var(--font-body);
  resize: vertical; min-height: 44px;
}
.chat-composer textarea:focus { outline: none; border-color: var(--teal); }
.chat-send {
  padding: 10px 22px; background: var(--teal); color: #fff;
  border: none; border-radius: 8px; cursor: pointer;
  font-size: 14px; font-weight: 600; font-family: var(--font-body);
  align-self: stretch;
}
.chat-send:hover { background: #003337; }

@media (max-width: 880px) {
  .chat-shell { grid-template-columns: 1fr; }
  .chat-threads { max-height: 200px; }
  .chat-messages { max-height: 360px; }
}

/* ============== Library tab ============== */
.library-layout {
  display: grid; grid-template-columns: 280px 1fr;
  gap: 22px; align-items: start;
}
.library-sidebar {
  display: flex; flex-direction: column; gap: 10px;
  position: sticky; top: 16px;
}
.library-tile {
  text-align: left; padding: 14px 16px;
  background: #fff; border: 1px solid #e6e6e6; border-radius: 10px;
  border-left: 4px solid #d5e3e3;
  cursor: pointer; font-family: var(--font-body);
  transition: border-color 0.15s, background 0.15s;
}
.library-tile:hover { border-left-color: var(--orange); background: #fafbfb; }
.library-tile.active {
  border-left-color: var(--orange);
  background: linear-gradient(180deg, #f5f9fa 0%, #ecf4f5 100%);
  border-color: #d5e3e3;
}
.library-tile-title {
  font-family: var(--font-head); font-size: 15px; color: var(--teal);
  font-weight: 600; margin-bottom: 4px;
}
.library-tile-sub { font-size: 12px; color: #555; line-height: 1.45; }
.library-tile-note {
  margin-top: 6px; font-size: 11px; color: var(--orange); font-style: italic;
}

.library-pane {
  background: #fff; border: 1px solid #e6e6e6; border-radius: 12px;
  padding: 0;
  /* Was overflow: hidden, silently clipped wide tables. Let the body scroll
     horizontally only if it absolutely has to (long URLs or table overflow). */
  overflow: visible;
  min-height: 600px;
  min-width: 0;        /* allow the grid column to shrink properly */
}
.library-empty {
  padding: 40px; text-align: center; color: #999; font-style: italic;
}
.library-doc-header {
  padding: 26px 32px 18px;
  border-bottom: 1px solid #ecf0f0;
  background: linear-gradient(180deg, #f5f9fa 0%, #fff 100%);
}
.library-doc-eyebrow {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--orange); font-weight: 600; margin-bottom: 8px;
  font-family: var(--font-head);
}
.library-doc-title {
  font-family: var(--font-head); font-size: 26px; color: var(--teal);
  margin: 0; line-height: 1.2;
}
.library-doc-meta {
  margin-top: 8px; font-size: 12.5px; color: #666;
}
.library-doc-meta strong { color: var(--teal); font-weight: 600; }
.library-doc-meta-reason {
  margin-top: 6px; font-style: italic; color: #777; font-size: 12px;
}
.library-doc-layout {
  display: grid; grid-template-columns: 240px 1fr;
  min-height: 500px;
}
.library-doc-toc {
  border-right: 1px solid #ecf0f0; background: #fafbfb;
  padding: 18px 14px; overflow-y: auto;
  font-size: 12.5px; line-height: 1.55;
  max-height: calc(100vh - 220px); position: sticky; top: 0;
}
.library-doc-toc .strategy-doc-toc-label {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal); font-weight: 600; margin: 0 0 10px;
}
.library-doc-toc a {
  display: block; padding: 5px 8px; border-radius: 4px;
  color: #444; text-decoration: none; margin-bottom: 1px;
}
.library-doc-toc a:hover { background: #ecf4f5; color: var(--teal); }
.library-doc-toc a.level-2 { font-weight: 600; color: var(--teal); margin-top: 8px; }
.library-doc-toc a.level-3 { padding-left: 18px; color: #555; font-size: 12px; }
.library-doc-body {
  padding: 28px 36px 40px;
  font-size: 15px; line-height: 1.75; color: #1f2d2e;
  /* Was max-width: 760px, fought with the grid column width and cut off
     the right side on standard screens. Let the column govern width; wrap
     long URLs / code so nothing overflows silently. */
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Tables can get wide. Wrap each in a horizontal scroll container so they
   never push the rest of the body past the visible edge. */
.library-doc-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
.library-doc-body h1, .library-doc-body h2, .library-doc-body h3, .library-doc-body h4 {
  font-family: var(--font-head); color: var(--teal); line-height: 1.3;
  margin: 28px 0 12px;
}
.library-doc-body h1 { font-size: 26px; }
.library-doc-body h2 {
  font-size: 21px; padding-top: 16px;
  border-top: 1px solid #ecf0f0;
}
.library-doc-body h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.library-doc-body h3 { font-size: 17px; color: var(--orange); }
.library-doc-body h4 {
  font-size: 14px; color: var(--teal);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.library-doc-body p { margin: 0 0 14px; }
.library-doc-body ul, .library-doc-body ol { margin: 0 0 16px; padding-left: 24px; }
.library-doc-body li { margin-bottom: 6px; }
.library-doc-body strong { color: var(--teal); font-weight: 600; }
.library-doc-body em { color: #555; font-style: italic; }
.library-doc-body code {
  background: #f0f3f3; color: var(--teal);
  padding: 2px 7px; border-radius: 3px; font-size: 13px;
  font-family: 'SFMono-Regular', Menlo, monospace;
}
.library-doc-body blockquote {
  margin: 14px 0 18px; padding: 12px 18px;
  background: #f5f9fa; border-left: 3px solid var(--teal); border-radius: 4px;
  color: #333;
}
.library-doc-body blockquote p { margin: 0 0 8px; }
.library-doc-body blockquote p:last-child { margin-bottom: 0; }
.library-doc-body hr { border: none; border-top: 1px solid #ecf0f0; margin: 26px 0; }
.library-doc-body table {
  width: 100%; border-collapse: collapse; margin: 0 0 18px;
  font-size: 13.5px;
}
.library-doc-body table th, .library-doc-body table td {
  border: 1px solid #e0e6e6; padding: 8px 12px; text-align: left; vertical-align: top;
}
.library-doc-body table th { background: #ecf4f5; color: var(--teal); font-weight: 600; }
.library-doc-body a { color: var(--orange); text-decoration: none; }
.library-doc-body a:hover { text-decoration: underline; }
.library-doc-body section.anchor-target { scroll-margin-top: 12px; }

@media (max-width: 960px) {
  .library-layout { grid-template-columns: 1fr; }
  .library-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .library-tile { flex: 1 1 200px; }
  .library-doc-layout { grid-template-columns: 1fr; }
  .library-doc-toc { display: none; }
}

/* Library → Transcripts placeholder (Slice F+G) */
.library-coming-soon {
  background: linear-gradient(180deg, #f5f9fa 0%, #fff 100%);
  border: 1px dashed #d5e3e3; border-radius: 12px;
  padding: 32px 36px;
}
.library-coming-soon-eyebrow {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--orange); font-weight: 600; margin-bottom: 8px;
  font-family: var(--font-head);
}
.library-coming-soon h3 {
  margin: 0 0 8px; font-family: var(--font-head);
  font-size: 22px; color: var(--teal); line-height: 1.25;
}
.library-coming-soon > p {
  font-size: 14px; color: #555; margin: 0 0 18px;
}
.library-coming-soon-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 18px;
}
.library-coming-soon-card {
  background: #fff; border: 1px solid #e6e6e6; border-radius: 10px;
  border-left: 4px solid var(--orange);
  padding: 16px 18px;
}
.library-coming-soon-card strong {
  display: block; color: var(--teal); font-family: var(--font-head);
  font-size: 14px; margin-bottom: 8px;
}
.library-coming-soon-card p {
  margin: 0; font-size: 13px; color: #444; line-height: 1.55;
}
.library-coming-soon-foot {
  padding: 12px 16px; background: #fafafa;
  border: 1px solid #ecf0f0; border-radius: 8px;
  font-size: 12.5px; color: #666; line-height: 1.55;
}
.library-coming-soon-foot code { background: #ecf4f5; color: var(--teal); padding: 1px 6px; border-radius: 3px; font-size: 11.5px; }
@media (max-width: 760px) {
  .library-coming-soon-row { grid-template-columns: 1fr; }
}

/* ============== Library cat tabs + editor (Supabase-backed, 2026-05-19) ============== */
.library-cat-tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 2px solid #ecf0f0; padding-bottom: 0; }
.library-cat-btn {
  padding: 7px 16px; font-size: 12.5px; font-weight: 600; background: none;
  border: none; border-bottom: 3px solid transparent; margin-bottom: -2px;
  cursor: pointer; color: #6b7a7b; border-radius: 4px 4px 0 0; transition: color .15s, border-color .15s;
}
.library-cat-btn:hover { color: var(--teal); }
.library-cat-btn.active { color: var(--teal); border-bottom-color: var(--teal); }

.library-editor-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.library-edit-btn {
  padding: 5px 13px; font-size: 11.5px; font-weight: 700; border-radius: 6px;
  border: 1.5px solid var(--teal); background: none; color: var(--teal); cursor: pointer;
}
.library-edit-btn:hover { background: var(--teal); color: #fff; }

.library-editor { display: flex; flex-direction: column; gap: 10px; }
.library-editor-textarea {
  width: 100%; min-height: 420px; font-family: 'Courier New', monospace; font-size: 12.5px;
  line-height: 1.6; padding: 14px; border: 1.5px solid #d0dadb; border-radius: 6px;
  background: #fafcfc; color: #222; resize: vertical; box-sizing: border-box;
}
.library-editor-textarea:focus { outline: none; border-color: var(--teal); }
.library-editor-actions { display: flex; gap: 8px; }
.library-editor-save {
  padding: 6px 18px; font-size: 12px; font-weight: 700; border-radius: 6px;
  border: 1.5px solid var(--teal); background: var(--teal); color: #fff; cursor: pointer;
}
.library-editor-save:hover { background: #005c60; }
.library-editor-save:disabled { opacity: 0.5; cursor: not-allowed; }
.library-editor-cancel {
  padding: 6px 14px; font-size: 12px; font-weight: 600; border-radius: 6px;
  border: 1.5px solid #ccc; background: none; color: #666; cursor: pointer;
}
.library-editor-cancel:hover { border-color: #999; color: #333; }
.library-doc-saved {
  font-size: 11.5px; color: var(--teal); font-weight: 700; padding: 4px 8px;
  background: #ecf4f5; border-radius: 4px; display: inline-block;
}
.library-editor-title { font-size: 14px; font-weight: 700; color: var(--teal); margin-right: 8px; }
.library-editor-meta { font-size: 11.5px; color: #8ca786; }

.library-transcript-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 24px; text-align: center; color: #8ca786;
}
.library-transcript-placeholder svg { margin-bottom: 16px; opacity: 0.5; }
.library-transcript-placeholder h3 { margin: 0 0 8px; font-size: 15px; color: var(--teal); }
.library-transcript-placeholder p { margin: 0; font-size: 13px; line-height: 1.5; max-width: 400px; }

/* ============== Strategy on a Page (2026 GTM tab) ============== */
.sop-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin: 0 0 22px 0;
  padding: 18px 22px;
  background: linear-gradient(180deg, var(--teal) 0%, #00373a 100%);
  border-radius: 10px; color: #fff;
}
.sop-eyebrow {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--orange); font-weight: 600; margin-bottom: 6px;
  font-family: var(--font-head);
}
.sop-title {
  margin: 0 0 6px 0; font-family: var(--font-head);
  font-size: 26px; color: #fff; line-height: 1.2;
}
.sop-sub {
  margin: 0; font-size: 13.5px; color: rgba(255,255,255,0.85); line-height: 1.55; max-width: 640px;
}
.sop-sub strong { color: #fff; }
.sop-meta { text-align: right; font-size: 12px; color: rgba(255,255,255,0.75); flex-shrink: 0; }
.sop-meta-row { margin-bottom: 4px; }
.sop-meta-version { font-style: italic; }
.sop-history-btn {
  margin-top: 8px;
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  padding: 5px 12px; border-radius: 6px;
  font-size: 12px; cursor: pointer;
  font-family: var(--font-body);
}
.sop-history-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.7); }

.sop-card {
  background: #fff; border: 1px solid #e6e6e6; border-radius: 10px;
  padding: 16px 20px; margin: 0 0 14px 0;
  border-left-width: 4px;
}
.sop-card.sop-tone-teal   { border-left-color: var(--teal); }
.sop-card.sop-tone-orange { border-left-color: var(--orange); }
.sop-card.sop-tone-plain  { border-left-color: #b0b0b0; }
.sop-card.sop-card-empty { background: #fafafa; border-style: dashed; }

.sop-card-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.sop-card-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--teal); color: #fff;
  font-family: var(--font-head); font-size: 13px; font-weight: 600;
  flex-shrink: 0;
}
.sop-tone-orange .sop-card-num { background: var(--orange); }
.sop-tone-plain .sop-card-num  { background: #777; }
.sop-card-title {
  flex: 1;
  font-family: var(--font-head); font-size: 16px; color: var(--teal);
  font-weight: 600;
}
.sop-edit-btn {
  background: transparent; border: 1px solid #d5e3e3;
  padding: 4px 10px; border-radius: 6px;
  font-size: 11.5px; cursor: pointer;
  color: var(--teal); font-family: var(--font-body);
}
.sop-edit-btn:hover { background: var(--teal); color: #fff; border-color: var(--teal); }

.sop-card-body { font-size: 14px; line-height: 1.6; color: #1f2d2e; }
.sop-text { white-space: pre-wrap; }
.sop-empty { color: #888; font-style: italic; padding: 6px 0; }
.sop-empty em { color: var(--orange); font-style: italic; font-weight: 600; }

.sop-list { margin: 0; padding-left: 22px; font-size: 13.5px; line-height: 1.65; }
.sop-list li { margin-bottom: 5px; }
.sop-list-tbc { color: #888; font-style: italic; }

.sop-pillars-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.sop-pillar {
  background: #f5f9fa; border: 1px solid #d5e3e3; border-radius: 8px;
  padding: 12px 14px;
}
.sop-pillar.sop-card-empty { background: #fafafa; border-style: dashed; }
.sop-pillar-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.sop-pillar-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--orange); color: #fff;
  font-size: 12px; font-weight: 600; flex-shrink: 0;
  font-family: var(--font-head);
}
.sop-pillar-title {
  flex: 1; font-family: var(--font-head); color: var(--teal);
  font-size: 14px; font-weight: 600; line-height: 1.3;
}
.sop-pillar-head .sop-edit-btn { padding: 2px 8px; font-size: 11px; }
.sop-pillar-purpose {
  font-size: 12.5px; color: #444; line-height: 1.5; margin-bottom: 8px;
}
.sop-pillar-moves {
  margin: 0; padding-left: 18px; font-size: 12px; color: #1f2d2e;
}
.sop-pillar-moves li { margin-bottom: 3px; line-height: 1.45; }

/* SOP edit modal */
.modal-card.sop-edit-card { max-width: 640px; }
.modal-card.sop-edit-card input[type="text"],
.modal-card.sop-edit-card textarea {
  width: 100%; box-sizing: border-box;
  padding: 9px 12px; border: 1px solid #ddd; border-radius: 6px;
  font-size: 14px; font-family: var(--font-body);
  line-height: 1.5;
}
.modal-card.sop-edit-card textarea { resize: vertical; min-height: 80px; }
.modal-card.sop-edit-card label {
  display: block; font-size: 12.5px; color: #444; font-weight: 600;
  margin: 12px 0 6px;
}
.modal-card.sop-edit-card label .lp-soft-note { font-weight: 400; color: #888; }
.sop-edit-pillars-list { list-style: none; padding: 0; margin: 0; }
.sop-edit-pillars-list li {
  display: flex; align-items: center; gap: 8px; padding: 4px 0;
}
.sop-edit-list-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--teal); color: #fff;
  font-size: 11px; font-weight: 600; flex-shrink: 0;
  font-family: var(--font-head);
}
.sop-edit-pillars-list input[type="text"] { flex: 1; }
.sop-edit-remove {
  background: transparent; border: 1px solid #f0c8c8; color: #b1322f;
  width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; font-size: 14px; line-height: 1;
}
.sop-edit-remove:hover { background: #b1322f; color: #fff; }
.sop-edit-add-pillar {
  margin-top: 10px; padding: 6px 14px;
  background: transparent; border: 1px dashed var(--teal);
  color: var(--teal); border-radius: 6px; cursor: pointer; font-size: 12.5px;
  font-family: var(--font-body);
}
.sop-edit-add-pillar:hover { background: var(--teal); color: #fff; }

/* SOP history modal */
.modal-card.sop-history-card { max-width: 800px; max-height: 85vh; padding: 0; display: flex; flex-direction: column; }
.sop-history-body-wrap { overflow-y: auto; padding: 4px 24px 24px; flex: 1; }
.sop-history-row {
  background: #fff; border: 1px solid #e6e6e6; border-radius: 8px;
  padding: 12px 14px; margin-bottom: 10px;
}
.sop-history-row-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.sop-history-key {
  background: #ecf4f5; color: var(--teal); padding: 2px 8px; border-radius: 4px;
  font-size: 12px; font-family: 'SFMono-Regular', Menlo, monospace;
}
.sop-history-when { font-size: 11.5px; color: #777; margin-left: auto; }
.sop-history-reason {
  font-size: 12.5px; color: #6b5012; padding: 6px 10px;
  background: #fffaf2; border-radius: 4px; margin-bottom: 8px;
}
.sop-history-diff {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.sop-history-side-label {
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #888; font-weight: 600; margin-bottom: 4px;
}
.sop-history-side-body {
  font-size: 12.5px; line-height: 1.5; color: #333;
  background: #fafbfb; padding: 8px 10px; border-radius: 4px;
  border-left: 2px solid #e6e6e6;
  white-space: pre-wrap;
}
.sop-history-side:last-child .sop-history-side-body { border-left-color: var(--teal); }
@media (max-width: 760px) {
  .sop-history-diff { grid-template-columns: 1fr; }
}

/* ============== Strategy doc viewer modal ============== */
.modal-card.strategy-doc-card {
  max-width: 1100px; width: 96%; max-height: 92vh;
  padding: 0; overflow: hidden; display: flex; flex-direction: column;
}
.strategy-doc-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; padding: 22px 28px 18px;
  border-bottom: 1px solid #e6e6e6; background: linear-gradient(180deg, #f5f9fa 0%, #fff 100%);
}
.strategy-doc-eyebrow {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--orange); font-weight: 600; margin-bottom: 4px;
}
.strategy-doc-header h3 { margin: 0; font-family: var(--font-head); color: var(--teal); font-size: 22px; }
.strategy-doc-meta { font-size: 12px; color: #666; margin-top: 6px; }
.strategy-doc-meta strong { color: var(--teal); font-weight: 600; }
.strategy-doc-close {
  background: transparent; border: none; font-size: 28px; line-height: 1;
  color: #999; cursor: pointer; padding: 0 4px;
}
.strategy-doc-close:hover { color: var(--teal); }
.strategy-doc-layout {
  display: grid; grid-template-columns: 240px 1fr; flex: 1; min-height: 0;
}
.strategy-doc-toc {
  border-right: 1px solid #e6e6e6; background: #fafbfb;
  padding: 18px 16px; overflow-y: auto;
  font-size: 12.5px; line-height: 1.5;
}
.strategy-doc-toc-label {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal); font-weight: 600; margin: 0 0 10px;
}
.strategy-doc-toc a {
  display: block; padding: 4px 8px; border-radius: 4px;
  color: #444; text-decoration: none; margin-bottom: 1px;
}
.strategy-doc-toc a:hover { background: #ecf4f5; color: var(--teal); }
.strategy-doc-toc a.level-2 { font-weight: 600; color: var(--teal); margin-top: 8px; }
.strategy-doc-toc a.level-3 { padding-left: 18px; color: #555; font-size: 12px; }
.strategy-doc-body {
  padding: 22px 32px 32px;
  overflow-y: auto; line-height: 1.6; color: #1f2d2e;
  font-size: 14px;
}
.strategy-doc-body h1, .strategy-doc-body h2, .strategy-doc-body h3, .strategy-doc-body h4 {
  font-family: var(--font-head); color: var(--teal); margin: 22px 0 10px; line-height: 1.3;
}
.strategy-doc-body h1 { font-size: 24px; }
.strategy-doc-body h2 {
  font-size: 19px; padding-top: 12px; border-top: 1px solid #ecf0f0;
}
.strategy-doc-body h2:first-child { border-top: none; padding-top: 0; }
.strategy-doc-body h3 { font-size: 16px; color: var(--orange); }
.strategy-doc-body h4 { font-size: 14px; color: var(--teal); text-transform: uppercase; letter-spacing: 0.05em; }
.strategy-doc-body p { margin: 0 0 12px; }
.strategy-doc-body ul, .strategy-doc-body ol { margin: 0 0 14px; padding-left: 22px; }
.strategy-doc-body li { margin-bottom: 5px; }
.strategy-doc-body strong { color: var(--teal); font-weight: 600; }
.strategy-doc-body em { color: #555; font-style: italic; }
.strategy-doc-body code {
  background: #f0f3f3; color: var(--teal);
  padding: 1px 6px; border-radius: 3px; font-size: 12.5px;
  font-family: 'SFMono-Regular', Menlo, monospace;
}
.strategy-doc-body blockquote {
  margin: 10px 0 14px; padding: 10px 16px;
  background: #f5f9fa; border-left: 3px solid var(--teal); border-radius: 4px;
  color: #333;
}
.strategy-doc-body blockquote p { margin: 0 0 6px; }
.strategy-doc-body blockquote p:last-child { margin-bottom: 0; }
.strategy-doc-body hr { border: none; border-top: 1px solid #e6e6e6; margin: 22px 0; }
.strategy-doc-body table {
  width: 100%; border-collapse: collapse; margin: 0 0 16px;
  font-size: 13px;
}
.strategy-doc-body table th, .strategy-doc-body table td {
  border: 1px solid #e0e6e6; padding: 7px 11px; text-align: left; vertical-align: top;
}
.strategy-doc-body table th { background: #ecf4f5; color: var(--teal); font-weight: 600; }
.strategy-doc-body a { color: var(--orange); text-decoration: none; }
.strategy-doc-body a:hover { text-decoration: underline; }
.strategy-doc-body section.anchor-target { scroll-margin-top: 12px; }
@media (max-width: 760px) {
  .strategy-doc-layout { grid-template-columns: 1fr; }
  .strategy-doc-toc { display: none; }
}

/* "Read full doc" button shown on the At-a-glance sub-tab + each card */
.glance-foot button.read-doc-btn,
.glance-card button.read-doc-btn {
  background: var(--teal); color: #fff; border: none;
  padding: 6px 14px; border-radius: 6px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; font-family: var(--font-body);
  margin-top: 6px;
}
.glance-foot button.read-doc-btn:hover,
.glance-card button.read-doc-btn:hover { background: #003337; }
.glance-card button.read-doc-btn {
  padding: 4px 10px; font-size: 11.5px; margin-top: 10px;
  background: transparent; color: var(--teal); border: 1px solid #d5e3e3;
}
.glance-card button.read-doc-btn:hover { background: #ecf4f5; color: var(--teal); }

/* ============== Strategy > Objectives sub-tab ============== */
.objective-frame {
  background: linear-gradient(180deg, var(--teal) 0%, #00373a 100%);
  color: #fff; border-radius: 10px;
  padding: 18px 22px; margin: 0 0 18px 0;
}
.objective-frame-label {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--orange); font-weight: 600; margin-bottom: 8px;
  font-family: var(--font-head);
}
.objective-frame-body { font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.92); }
.objective-frame-body strong { color: #fff; font-weight: 600; }
.objective-frame-body a { color: var(--orange); text-decoration: underline; }
.objective-frame-body a:hover { color: #f0a07a; }

.objective-sequence {
  background: #fff; border: 1px solid #e6e6e6; border-radius: 10px;
  padding: 16px 20px; margin: 0 0 18px 0;
}
.objective-sequence-label {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal); font-weight: 600; margin-bottom: 12px;
  font-family: var(--font-head);
}
.objective-sequence-row { display: flex; align-items: stretch; gap: 8px; }
.seq-step {
  flex: 1; padding: 12px 14px; border: 1px solid #d5e3e3; border-radius: 8px;
  background: #f5f9fa; min-width: 0;
}
.seq-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--teal); color: #fff; font-size: 12px; font-weight: 600;
  margin-bottom: 6px;
}
.seq-step-name {
  font-family: var(--font-head); font-size: 15px; color: var(--teal);
  font-weight: 600; margin-bottom: 2px;
}
.seq-step-sub { font-size: 11.5px; color: var(--orange); font-weight: 600; margin-bottom: 6px; }
.seq-step-detail { font-size: 12.5px; color: #444; line-height: 1.5; }
.seq-arrow {
  display: flex; align-items: center; font-size: 20px; color: var(--teal);
  font-weight: 700; padding: 0 2px;
}

.objective-success {
  background: #fff; border: 1px solid #e6e6e6; border-left: 4px solid var(--orange);
  border-radius: 8px; padding: 14px 18px; margin: 14px 0 0;
}
.objective-success-label {
  font-family: var(--font-head); font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--teal); font-weight: 600;
  margin-bottom: 12px; display: flex; align-items: center; gap: 10px;
}
.objective-success-ref {
  font-size: 10.5px; padding: 2px 8px; border-radius: 999px;
  background: #f0f3f3; color: #777; letter-spacing: 0; text-transform: none; font-weight: 500;
}
.objective-success-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.objective-success-table th, .objective-success-table td {
  border: 1px solid #e6e6e6; padding: 8px 11px; text-align: left;
}
.objective-success-table th { background: #ecf4f5; color: var(--teal); font-weight: 600; }
.objective-success-table strong { color: #1f2d2e; }
.objective-success-foot {
  margin-top: 12px; font-size: 12.5px; color: #6b5012; line-height: 1.5;
  padding: 10px 14px; background: #fffaf2; border: 1px solid #f0dca0; border-radius: 6px;
}
.objective-success-foot strong { color: #1f2d2e; }

@media (max-width: 760px) {
  .objective-sequence-row { flex-direction: column; }
  .seq-arrow { transform: rotate(90deg); padding: 4px 0; justify-content: center; }
}

/* ============== Scope chips + filter (Hypotheses, Assumptions, Risks, Learnings) ============== */
.scope-chip {
  display: inline-flex; align-items: center;
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  background: #ecf4f5; color: var(--teal); font-weight: 500;
  letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.scope-chip.scope-trade-campaign { background: #fef0e3; color: #b46a2a; }
.scope-chip.scope-website        { background: #eaf3fb; color: #2c4f7a; }
.scope-chip.scope-pricing        { background: #f3eaf5; color: #6b1d6b; }
.scope-chip.scope-icp            { background: #ecf5ec; color: #2c6b2c; }
.scope-chip.scope-offer          { background: #fef6e3; color: #8a6a14; }
.scope-chip.scope-creative       { background: #fdf4e0; color: #8a6a14; }
.scope-chip.scope-funnel         { background: #f0eaea; color: #6b3a3a; }
.scope-chip.scope-platform       { background: #eaecf5; color: #3a3a6b; }
.scope-chip.scope-cold-outreach  { background: #f5eaea; color: #6b3a3a; }
.scope-chip.scope-organic-content{ background: #eaf5ed; color: #2c6b4f; }
.scope-chip.scope-team           { background: #f0f0f0; color: #555; }
.scope-chip.scope-positioning    { background: #f4eaf5; color: #6b1d6b; }
.scope-chip.scope-uncategorised  { background: #f5f5f5; color: #999; font-style: italic; }

.scope-filter {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 14px; margin: 0 0 14px 0;
  background: #fafbfb; border: 1px solid #ececec; border-radius: 8px;
  align-items: center;
}
.scope-filter-label {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #777; font-weight: 600; margin-right: 8px;
}
.scope-filter button {
  font-size: 11.5px; padding: 4px 11px; border-radius: 999px;
  background: #fff; border: 1px solid #ddd; cursor: pointer;
  color: #555; font-family: var(--font-body);
}
.scope-filter button:hover { border-color: var(--teal); color: var(--teal); }
.scope-filter button.active { background: var(--teal); color: #fff; border-color: var(--teal); }
.scope-filter button .count {
  font-size: 10.5px; opacity: 0.7; margin-left: 5px;
}
.scope-filter button.active .count { opacity: 1; }
.scope-filter-empty {
  font-size: 12px; color: #999; font-style: italic;
  padding: 10px 14px; background: #fafafa; border-radius: 6px; border: 1px dashed #e0e0e0;
  margin-bottom: 14px;
}

/* On each artefact row */
.assumption-row .scope-chip,
.risk-row .scope-chip,
.learning-card .scope-chip,
.hypothesis-card .scope-chip {
  margin-left: auto; align-self: flex-start;
}

/* Brief-page separator between campaign-objectives and what-we're-running */
.brief-section-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0 14px;
}
.brief-section-divider-label {
  font-family: var(--font-head); font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--teal); font-weight: 600;
  white-space: nowrap;
}
.brief-section-divider-line {
  flex: 1; height: 1px; background: #e0e6e6;
}

/* ============== Strategy > At a glance sub-tab ============== */
.glance-header {
  display: flex; gap: 16px; align-items: flex-start;
  margin-bottom: 18px; padding: 14px 16px;
  background: #f5f9fa; border: 1px solid #d5e3e3; border-radius: 8px;
}
.glance-intro { margin: 0; font-size: 13px; color: #1f2d2e; line-height: 1.5; }
.glance-intro code { font-size: 12px; background: #fff; padding: 1px 5px; border-radius: 3px; color: var(--teal); }
.glance-version {
  font-size: 11px; padding: 4px 10px; border-radius: 999px;
  background: var(--teal); color: #fff; white-space: nowrap;
  letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600;
}
.glance-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px; margin-bottom: 18px;
}
.glance-card {
  background: #fff; border: 1px solid #e6e6e6; border-left: 4px solid var(--teal);
  border-radius: 8px; padding: 14px 16px;
}
.glance-card-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.glance-card-icon { font-size: 16px; color: var(--teal); }
.glance-card-title {
  font-family: var(--font-head); font-size: 14px; color: var(--teal);
  font-weight: 600; flex: 1;
}
.glance-card-ref {
  font-size: 11px; color: #888; background: #f5f5f5;
  padding: 2px 8px; border-radius: 999px;
}
.glance-card-body {
  font-size: 13px; color: #333; line-height: 1.55;
}
.glance-card-body p { margin: 0 0 8px 0; }
.glance-card-body p:last-child { margin-bottom: 0; }
.glance-card-body ul {
  margin: 6px 0; padding-left: 18px;
  font-size: 12.5px;
}
.glance-card-body li { margin-bottom: 3px; }
.glance-card-body strong { color: var(--teal); font-weight: 600; }
.glance-card-body em { font-style: normal; color: #555; }
.glance-card-body blockquote {
  margin: 6px 0; padding-left: 10px; border-left: 2px solid #ddd;
  color: #555; font-style: italic; font-size: 12.5px;
}
.glance-foot {
  font-size: 12px; color: #666; line-height: 1.55;
  padding: 10px 14px; background: #fafafa;
  border: 1px dashed #ddd; border-radius: 6px;
}
.glance-foot code { background: #fff; padding: 1px 5px; border-radius: 3px; color: var(--teal); font-size: 11.5px; }

/* ============== Strategy > Hypotheses sub-tab ============== */
.hypothesis-card {
  background: #fff; border: 1px solid #e6e6e6; border-radius: 8px;
  padding: 14px 16px; margin-bottom: 10px;
}
.hypothesis-card.status-testing      { border-left: 4px solid #b0b0b0; }
.hypothesis-card.status-validating   { border-left: 4px solid #2c6b2c; background: linear-gradient(180deg, #fff, #f6fbf6); }
.hypothesis-card.status-invalidating { border-left: 4px solid #d9822b; background: linear-gradient(180deg, #fff, #fffaf2); }
.hypothesis-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.hypothesis-meta-pill {
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  background: #f0f0f0; color: #555;
}
.hypothesis-text {
  font-weight: 600; color: #1f2d2e; line-height: 1.45;
  margin-bottom: 6px;
}
.hypothesis-source {
  font-size: 11.5px; color: #777; margin-bottom: 8px;
}
.hypothesis-evidence {
  font-size: 13px; color: #444; line-height: 1.5;
}
.hypothesis-version {
  font-size: 11.5px; color: #888; margin-top: 8px;
}
.hypotheses-intro {
  font-size: 13px; color: #555; margin: 0 0 16px 0; line-height: 1.55;
  padding: 12px 14px; background: #f5f9fa;
  border-radius: 6px; border: 1px solid #d5e3e3;
}
.hypotheses-intro strong { color: var(--teal); }

/* ============== Strategy > Learnings sub-tab ============== */
.learning-section { margin-bottom: 24px; }
.learning-section-head {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px 0;
  font-family: var(--font-head); font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--teal); font-weight: 600;
}
.learning-section-head .count-pill {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: rgba(0, 68, 71, 0.08); color: var(--teal);
  letter-spacing: 0; text-transform: none; font-weight: 500;
}
.learning-card {
  background: #fff; border: 1px solid #e6e6e6; border-radius: 8px;
  padding: 14px 16px; margin-bottom: 10px;
}
.learning-card.needs-decision { border-left: 4px solid #d9822b; background: #fffaf2; }
.learning-card.validated     { border-left: 4px solid #2c6b2c; background: #f6fbf6; }
.learning-card.validated.is-due-decision   { border-left-color: #d9822b; background: linear-gradient(90deg, #fffaf2, #f6fbf6); }
.learning-card.invalidated   { border-left: 4px solid #b1322f; background: #fdf6f5; }
.learning-card.invalidated.is-due-decision { border-left-color: #d9822b; background: linear-gradient(90deg, #fffaf2, #fdf6f5); }
.learning-card.in-progress { border-left: 4px solid var(--teal); }
.learning-card.closed { opacity: 0.75; border-left: 4px solid #b0b0b0; }
.learning-card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.learning-card-hypothesis { font-weight: 600; color: #1f2d2e; flex: 1; line-height: 1.4; }
.learning-card-meta { display: flex; gap: 14px; font-size: 12px; color: #666; margin-top: 8px; flex-wrap: wrap; }
.learning-card-meta strong { color: #1f2d2e; }
.learning-card-evidence { font-size: 13px; color: #444; line-height: 1.5; margin-top: 6px; }
.learning-card-decision { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.learning-card-decision button {
  padding: 6px 14px; border: 1px solid #ddd; border-radius: 6px;
  background: #fff; cursor: pointer; font-size: 12px; font-family: var(--font-body);
}
.learning-card-decision button:hover { background: #f5f5f5; }
.learning-card-decision .primary { background: var(--teal); color: #fff; border-color: var(--teal); }
.learning-card-decision .primary:hover { background: #003337; }
.learnings-empty {
  padding: 14px 16px; color: #777; font-size: 13px; font-style: italic;
  background: #fafafa; border-radius: 8px; border: 1px dashed #e0e0e0;
}
.learnings-actions-bar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
  padding: 12px 16px; background: #fffaf2; border: 1px solid #f0dca0; border-radius: 8px;
}
.learnings-actions-bar.no-pending { background: #f5f9fa; border-color: #d5e3e3; }
.learnings-actions-bar-text { flex: 1; font-size: 13px; color: #6b5012; }
.learnings-actions-bar.no-pending .learnings-actions-bar-text { color: #1f2d2e; }
.amend-btn {
  padding: 8px 16px; background: var(--teal); color: #fff; border: none;
  border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600;
  font-family: var(--font-body);
}
.amend-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ============== Modal (used by Amend strategy + future) ============== */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 9998;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-backdrop.visible { display: flex; }
.modal-card {
  background: #fff; border-radius: 10px; padding: 28px 32px;
  width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto;
}
.modal-card h3 { margin: 0 0 8px 0; font-family: var(--font-head); color: var(--teal); }
.modal-card .modal-sub { font-size: 13px; color: #666; margin: 0 0 18px 0; }
.modal-card label { display: block; font-size: 13px; color: #444; font-weight: 500; margin: 14px 0 6px; }
.modal-card input[type="text"], .modal-card textarea {
  width: 100%; box-sizing: border-box; padding: 8px 12px;
  border: 1px solid #ddd; border-radius: 6px; font-size: 14px; font-family: var(--font-body);
}
.modal-card textarea { resize: vertical; min-height: 80px; }
.modal-card pre.cmd {
  background: #f5f5f5; padding: 10px 14px; border-radius: 6px;
  font-size: 12px; overflow-x: auto; margin: 8px 0;
}
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.modal-actions button {
  padding: 8px 16px; border-radius: 6px; border: 1px solid #ddd;
  background: #fff; cursor: pointer; font-size: 13px; font-family: var(--font-body);
}
.modal-actions button.primary { background: var(--teal); color: #fff; border-color: var(--teal); font-weight: 600; }

/* ============== Login overlay ============== */
#login-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: linear-gradient(180deg, var(--teal) 0%, #002f31 100%);
  display: none; align-items: center; justify-content: center;
  font-family: var(--font-body);
}
#login-overlay.visible { display: flex; }
.login-card {
  background: #fff; border-radius: 12px; padding: 40px 44px;
  width: 100%; max-width: 420px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.login-card .brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.login-card .brand-row img { height: 28px; }
.login-card h2 { font-family: var(--font-head); font-size: 22px; color: var(--teal); margin: 0 0 8px 0; }
.login-card .login-sub { font-size: 14px; color: #666; margin: 0 0 24px 0; line-height: 1.5; }
.login-card label { display: block; font-size: 13px; color: #444; margin-bottom: 6px; font-weight: 500; }
.login-card input[type="email"] {
  width: 100%; box-sizing: border-box;
  padding: 11px 14px; border: 1px solid #ddd; border-radius: 8px;
  font-size: 15px; font-family: var(--font-body);
}
.login-card input[type="email"]:focus { outline: none; border-color: var(--teal); }
.login-card button.login-btn {
  width: 100%; margin-top: 14px; padding: 12px;
  background: var(--teal); color: #fff; border: none; border-radius: 8px;
  font-size: 15px; font-weight: 600; cursor: pointer; font-family: var(--font-body);
}
.login-card button.login-btn:hover:not(:disabled) { background: #003337; }
.login-card button.login-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.login-status, .login-error {
  margin-top: 14px; padding: 10px 12px; border-radius: 6px;
  font-size: 13px; line-height: 1.4;
}
.login-status { background: #f0f6f6; color: var(--teal); border: 1px solid #d5e3e3; }
.login-error { background: #fdecec; color: #b1322f; border: 1px solid #f5c8c6; }
.login-status:empty, .login-error:empty { display: none; }
.login-footer { margin-top: 22px; font-size: 12px; color: #999; text-align: center; }

/* Sign-out button in top strip */
.strip-signout {
  background: transparent; border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.85); padding: 5px 12px; border-radius: 6px;
  font-size: 12px; font-family: var(--font-body); cursor: pointer;
}
.strip-signout:hover { background: rgba(255,255,255,0.1); }

/* Phase 4-v2.2 (OPS-116, 2026-06-06): notifications bell in top-strip.
   Quick-glance @ You inbox · click an item to route + open inline thread
   on the card. Distinct from FAB (full activity drawer). */
.notif-bell-wrap {
  position: relative;
}
.notif-bell {
  position: relative;
  background: transparent; border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  padding: 5px 10px; border-radius: 6px;
  font-size: 16px; cursor: pointer;
  line-height: 1;
}
.notif-bell:hover { background: rgba(255,255,255,0.1); }
.notif-bell-icon { display: inline-block; }
.notif-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--orange);
  color: #fff;
  border-radius: 999px;
  padding: 0 5px;
  font-size: 10px; font-weight: 700;
  font-family: var(--font-body);
  min-width: 16px; height: 16px; line-height: 16px;
  box-sizing: border-box;
  border: 2px solid var(--teal);
  text-align: center;
}
.notif-dropdown {
  /* Phase 4-v2.2-fix: position:fixed (set in JS from bell rect) so the
     dropdown escapes the top-strip's sticky-positioning stacking context.
     z-index high enough to overlay page content + the strip itself.
     display:none by default · JS sets display:flex on open. */
  position: fixed;
  width: 360px;
  max-height: 480px;
  background: #fff;
  border: 1px solid #ecf0f0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  z-index: 9500;
  overflow: hidden;
  flex-direction: column;
}
.notif-dropdown-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #ecf0f0;
  background: #fafbfb;
  font-size: 12px;
  color: var(--teal);
}
.notif-dropdown-head strong {
  font-family: var(--font-head); font-weight: 700;
}
.notif-mark-all {
  background: none; border: none;
  color: var(--orange); font-size: 11px;
  font-family: var(--font-body); font-weight: 600;
  cursor: pointer;
}
.notif-mark-all:hover { text-decoration: underline; }
.notif-dropdown-list {
  flex: 1;
  overflow-y: auto;
}
.notif-item {
  padding: 10px 14px;
  border-bottom: 1px solid #f3f5f5;
  cursor: pointer;
  transition: background 0.12s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: #f5f9fa; }
.notif-item-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px;
  margin-bottom: 3px;
}
.notif-item-author { color: var(--teal); font-weight: 700; }
.notif-item-when { color: #999; }
.notif-item-body {
  font-size: 12.5px; color: var(--text);
  line-height: 1.4;
  margin-bottom: 3px;
}
.notif-item-surface {
  font-size: 10.5px; color: #999; font-style: italic;
}
.notif-dropdown-empty {
  padding: 24px 18px;
  font-size: 12px; color: #888; font-style: italic;
  line-height: 1.5;
  text-align: center;
}

/* ============== Overview Hypotheses sub-tab (OPS-046) ============== */
.hypothesis-card {
  background: #fff;
  border: 1px solid #e4e4e4;
  border-left: 4px solid #004447;
  border-radius: 8px;
  padding: 18px 22px;
  margin-bottom: 16px;
}
/* OPS-099 followup (2026-06-03): in the 2x2 Strategic Read grid the
   container's gap:16px handles spacing · don't double up with margin. */
.strategic-read-grid .hypothesis-card { margin-bottom: 0; }
.hypothesis-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.hypothesis-number {
  font-size: 18px;
  font-weight: 700;
  color: #004447;
  min-width: 32px;
}
.hypothesis-question {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.4;
  min-width: 240px;
}
.hypothesis-phases {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.phase-chip {
  display: inline-block;
  font-size: 11px;
  padding: 3px 8px;
  background: #f5efe6;
  color: #004447;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.hypothesis-read {
  font-size: 14px;
  color: #4a4a4a;
  line-height: 1.5;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: #fdf8ef;
  border-radius: 6px;
}
.hypothesis-read.has-read {
  background: #f5f9f5;
  color: #1a1a1a;
}
.hypothesis-read-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hypothesis-read em {
  color: #d2804d;
  font-style: italic;
}
.hypothesis-freshness {
  font-size: 12px;
  color: #888;
  margin-bottom: 12px;
  padding-left: 4px;
}
.hypothesis-evidence {
  font-size: 13px;
  color: #1a1a1a;
  margin-bottom: 10px;
}
.hypothesis-evidence ul {
  margin: 6px 0 0 0;
  padding-left: 20px;
}
/* Default li styling is for the configured-metric list (slug-like names).
   When inside .has-read sibling state we're showing the agent's prose
   evidence, drop the monospace + bump readability. */
.hypothesis-evidence li {
  margin-bottom: 3px;
  font-family: monospace;
  font-size: 12px;
  color: #4a4a4a;
}
.hypothesis-card:has(.hypothesis-read.has-read) .hypothesis-evidence li {
  font-family: inherit;
  font-size: 13px;
  color: #1a1a1a;
  line-height: 1.5;
}
.hypothesis-sharpens {
  font-size: 13px;
  color: #4a4a4a;
  padding-top: 8px;
  border-top: 1px dashed #e4e4e4;
  margin-top: 8px;
}
.empty-state {
  padding: 24px;
  text-align: center;
  color: #888;
  font-style: italic;
  background: #f5efe6;
  border-radius: 8px;
}

/* ============== OPS-077 A1 · Force-explain loop ============== */
/* Composer extensions: stacked layout with textarea + action row + dynamic hint */
.log-add-stack textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 12px;
  font-family: 'Raleway', sans-serif; font-size: 13px;
  resize: vertical; min-height: 60px;
  line-height: 1.5;
}
.log-add-actions {
  justify-content: space-between !important;
}
.log-add-hint {
  font-size: 12px; color: var(--muted);
  font-family: 'Raleway', sans-serif;
}
.log-add-hint strong { color: var(--teal); font-weight: 600; }
.log-add-warn { color: #a86936; }
/* OPS-085 Phase 3 follow-up (2026-06-02): structured per-kind metadata row.
   Sits between kind input and why textarea. Shown only when kind matches a
   typed shape (budget.change today, others as we hit them). */
.log-add-meta {
  background: #fef6ec;
  border-left: 3px solid #C3804D;
  padding: 8px 10px;
  border-radius: 3px;
  align-items: center;
}
.log-add-meta-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #8A5A1F;
  margin-right: 4px;
}
.log-add-meta input,
.log-add-meta select {
  font-size: 12.5px;
  padding: 4px 8px;
  border: 1px solid #e0c896;
  background: #fff;
  border-radius: 3px;
}

/* Open Loops section · sits between decisions-status-tile and agent-report on Overview */
.open-loops-sec .sec-hdr .sec-title {
  color: #a86936; /* nimble orange to flag attention */
}
.open-loops-list {
  display: flex; flex-direction: column; gap: 8px;
}
.ol-card {
  background: #fff8f2; /* warm tint so it reads as needs-attention */
  border: 1px solid #e8d4b8;
  border-left: 3px solid #a86936;
  border-radius: 8px;
  padding: 12px 16px;
}
.ol-head {
  display: flex; gap: 10px; align-items: center;
  margin-bottom: 6px;
}
.ol-tag {
  background: #a86936; color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 8px; border-radius: 4px;
}
.ol-meta {
  font-size: 11px; color: var(--muted);
  font-family: 'Raleway', sans-serif;
}
.ol-what {
  font-size: 14px; color: var(--text);
  margin-bottom: 10px;
  line-height: 1.4;
}
.ol-actions { display: flex; gap: 8px; }
.ol-actions button {
  padding: 6px 14px;
  border-radius: 6px; border: 1px solid var(--border);
  background: #fff; cursor: pointer;
  font-family: 'Raleway', sans-serif; font-size: 12px; font-weight: 600;
}
.ol-actions .ol-explain {
  background: var(--teal); color: #fff; border-color: var(--teal);
}
.ol-actions .ol-explain:hover { background: var(--teal-dark); }
.ol-actions .ol-dismiss:hover { background: #f5f5f5; }

/* Explain modal · sized for a single textarea + 3 buttons */
.modal-card.explain-card {
  max-width: 560px;
}
.modal-card.explain-card .modal-sub {
  font-style: italic;
  background: #f8f4ed;
  padding: 10px 14px;
  border-radius: 6px;
  border-left: 2px solid var(--teal);
  color: var(--text);
}