/* =========================================================
   APP SHELL
   ========================================================= */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100dvh;
}

/* ---------- SIDEBAR (Linear-style, always dark) ---------- */
.sidebar {
  background: var(--shell-bg);
  color: var(--shell-text);
  border-right: 1px solid var(--shell-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 14px var(--s4) 10px;
  border-bottom: 1px solid var(--shell-divider);
}
.sidebar__brand-mark {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: linear-gradient(135deg, #2A3040 0%, #171A24 100%);
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.4);
  color: #E6E7EB;
  flex-shrink: 0;
}
.sidebar__brand-text {
  display: flex; flex-direction: column; line-height: 1.2; min-width: 0;
}
.sidebar__brand-title {
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--shell-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar__brand-sub {
  font-size: 11px; color: var(--shell-text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar__brand-caret {
  margin-left: auto; color: var(--shell-text-faint); flex-shrink: 0;
}

.sidebar__quick {
  padding: 8px var(--s3) 4px;
  display: flex; flex-direction: column; gap: 2px;
}

.sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  color: var(--shell-text-muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.003em;
  cursor: pointer;
  position: relative;
}
.sidebar-link:hover { background: var(--shell-hover); color: var(--shell-text); }
.sidebar-link.is-active {
  background: var(--shell-active);
  color: #F0F1F4;
}
.sidebar-link svg { flex-shrink: 0; opacity: 0.9; }
.sidebar-link .kbd {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--shell-text-faint);
  font-family: var(--font-mono);
  background: transparent;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--shell-border);
}
.sidebar-link .count {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--shell-text-faint);
  background: var(--shell-hover);
  padding: 1px 7px;
  border-radius: var(--r-full);
  min-width: 20px;
  text-align: center;
}

.sidebar__groups {
  flex: 1;
  overflow-y: auto;
  padding: 10px var(--s3) var(--s6);
}
.sidebar__groups::-webkit-scrollbar { width: 6px; }
.sidebar__groups::-webkit-scrollbar-thumb { background: #1E222B; border-radius: 3px; }

.nav-group { margin-top: 14px; }
.nav-group--primary { margin-top: 0; }
.nav-group--primary .nav-group-items { margin-top: 0; }
.nav-group-head {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--shell-text-faint);
  cursor: pointer;
  user-select: none;
}
.nav-group-head:hover { color: var(--shell-text-muted); }
.nav-group-head svg { transition: transform var(--dur) var(--ease); }
.nav-group[data-collapsed="true"] .nav-group-head svg { transform: rotate(-90deg); }
.nav-group[data-collapsed="true"] .nav-group-items { display: none; }
.nav-group-head .spacer { flex: 1; }
.nav-group-head .action {
  color: var(--shell-text-faint);
  padding: 2px; border-radius: 4px;
  opacity: 0; transition: opacity var(--dur);
}
.nav-group:hover .nav-group-head .action { opacity: 1; }
.nav-group-head .action:hover { color: var(--shell-text); background: var(--shell-hover); }

.nav-group-items { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }

.sidebar__bottom {
  border-top: 1px solid var(--shell-divider);
  padding: 8px var(--s3);
  display: flex; flex-direction: column; gap: 2px;
}
.sidebar__user {
  display: flex; align-items: center; gap: 10px;
  padding: 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.sidebar__user:hover { background: var(--shell-hover); }
.sidebar__user-avatar {
  width: 24px; height: 24px; border-radius: var(--r-full);
  background: linear-gradient(135deg, #6A73F0, #3E45C4);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}
.sidebar__user-text { min-width: 0; line-height: 1.2; flex: 1; }
.sidebar__user-name { font-size: 12.5px; color: var(--shell-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__user-role { font-size: 11px; color: var(--shell-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- MAIN AREA ---------- */
.main {
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr;
  min-width: 0;
}

/* ---------- TOP BAR ---------- */
.topbar {
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s6);
  background: var(--canvas);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 40;
  height: var(--topbar-h);
}
[data-theme="dark"] .topbar { background: var(--surface); }

.crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); min-width: 0; }
.crumbs .sep { color: var(--faint); }
.crumbs .here { color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs .doctype {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; font-size: 11px; color: var(--muted);
  border: 1px solid var(--border); border-radius: var(--r-full);
  background: var(--surface);
  margin-right: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}

.topbar .spacer { flex: 1; }

.search {
  display: flex; align-items: center; gap: var(--s2);
  min-width: 280px; max-width: 420px; flex: 0 1 360px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}
.search:hover { border-color: var(--border-strong); color: var(--ink-2); }
.search .kbd {
  margin-left: auto;
  font-size: 10.5px; font-family: var(--font-mono);
  padding: 1px 5px; border-radius: 3px;
  border: 1px solid var(--border);
  color: var(--faint);
  background: var(--canvas);
}

.audience {
  display: inline-flex;
  padding: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 12.5px;
}
.audience button {
  padding: 4px 10px;
  border-radius: var(--r-sm);
  color: var(--muted); font-weight: 500;
}
.audience button.is-active {
  background: var(--canvas);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}
[data-theme="dark"] .audience button.is-active { background: var(--surface-sunk); }

.icon-btn {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  color: var(--muted);
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.mobile-only { display: none; }
@media (max-width: 860px) {
  .mobile-only { display: grid; }
}

/* Mobile sidebar overlay */
.sidebar.is-open {
  display: flex !important;
  position: fixed; inset: 0;
  width: 280px;
  z-index: 100;
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
}
.scrim {
  display: none;
  position: fixed; inset: 0;
  background: rgba(5, 7, 12, 0.5);
  z-index: 99;
  backdrop-filter: blur(2px);
}
.scrim.is-open { display: block; }

/* ---------- CONTENT LAYOUT ---------- */
.content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-w);
  min-width: 0;
  background: var(--bg);
}
.content--full { grid-template-columns: 1fr; }

.canvas {
  padding: var(--s8) var(--s10) var(--s20);
  min-width: 0;
  background: var(--bg);
}
.canvas--narrow { max-width: calc(var(--content-max) + var(--s20) * 2); margin: 0 auto; width: 100%; }

.rail {
  padding: var(--s6) var(--s6) var(--s20) var(--s4);
  border-left: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: var(--topbar-h);
  height: calc(100dvh - var(--topbar-h));
  overflow-y: auto;
}

/* ---------- PAGE HEADERS ---------- */
.page-header { margin-bottom: var(--s6); }
.page-header__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 500;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: var(--s3);
}
.page-header__eyebrow .dot {
  width: 6px; height: 6px; border-radius: var(--r-full);
  background: var(--accent);
}
.page-header__title {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: var(--s2);
}
.page-header__subtitle {
  font-size: var(--text-md);
  color: var(--muted);
  max-width: 68ch;
  line-height: 1.5;
}
.page-header__meta {
  display: flex; align-items: center; gap: var(--s4);
  margin-top: var(--s4);
  font-size: 12.5px; color: var(--muted);
  flex-wrap: wrap;
}
.page-header__meta-item { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--canvas);
  color: var(--ink-2);
  box-shadow: var(--shadow-xs);
}
.btn:hover { border-color: var(--border-strong); color: var(--ink); }
.btn--primary {
  background: var(--ink);
  color: var(--canvas);
  border-color: var(--ink);
}
[data-theme="dark"] .btn--primary { background: var(--accent); border-color: var(--accent); color: white; }
.btn--primary:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--canvas); }
.btn--ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); border-color: transparent; }

/* ---------- CHIPS ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-2);
  white-space: nowrap;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.chip--ok    { background: var(--ok-bg); color: var(--ok-ink); border-color: transparent; }
.chip--ok .dot { background: var(--ok); }
.chip--warn  { background: var(--warn-bg); color: var(--warn-ink); border-color: transparent; }
.chip--warn .dot { background: var(--warn); }
.chip--risk  { background: var(--risk-bg); color: var(--risk-ink); border-color: transparent; }
.chip--risk .dot { background: var(--risk); }
.chip--info  { background: var(--info-bg); color: var(--info-ink); border-color: transparent; }
.chip--info .dot { background: var(--info); }
.chip--ghost { background: transparent; }

/* Source chips */
.chip--src {
  padding: 2px 8px 2px 6px;
  font-size: 11px;
  gap: 5px;
  background: var(--surface);
}
.chip--src .src-dot {
  width: 12px; height: 12px; border-radius: 3px;
  display: grid; place-items: center; flex-shrink: 0;
  color: white; font-size: 8px; font-weight: 700;
}
.src-jira   .src-dot { background: var(--src-jira); }
.src-azdo   .src-dot { background: var(--src-azdo); }
.src-slack  .src-dot { background: var(--src-slack); }
.src-drive  .src-dot { background: var(--src-drive); }
.src-wiki   .src-dot { background: var(--src-wiki); }
.src-notion .src-dot { background: var(--src-notion); }

/* ---------- CARDS ---------- */
.card {
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}
.card__head {
  display: flex; align-items: center; gap: var(--s3);
  padding: 14px var(--s4);
  border-bottom: 1px solid var(--border);
}
.card__title {
  font-size: 13px; font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
}
.card__title .t-icon { color: var(--muted); }
.card__head .spacer { flex: 1; }
.card__more { color: var(--muted); font-size: 12px; }
.card__more:hover { color: var(--ink); }
.card__body { padding: var(--s4); }
.card__body--tight { padding: var(--s2); }
.card__foot {
  padding: 10px var(--s4);
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
  display: flex; align-items: center; gap: var(--s3);
}

/* ---------- METRIC CARDS (Stripe-style) ---------- */
.metrics-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
}
.metric {
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s4) var(--s5) var(--s5);
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
}
.metric__label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: -0.002em;
}
.metric__label svg { color: var(--faint); }
.metric__value {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.metric__value .unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: -0.005em;
}
.metric__delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.metric__delta--up    { color: var(--ok); }
.metric__delta--down  { color: var(--risk); }
.metric__delta--flat  { color: var(--muted); }
.metric__foot {
  font-size: 11.5px;
  color: var(--faint);
  display: flex; align-items: center; gap: 6px;
}
.metric__spark {
  height: 32px;
  margin-top: 2px;
}

/* ---------- LIST ITEMS (blockers, risks, updates) ---------- */
.list { display: flex; flex-direction: column; }
.list__row {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: 12px var(--s4);
  border-bottom: 1px solid var(--divider);
  cursor: pointer;
  min-width: 0;
}
.list__row:last-child { border-bottom: 0; }
.list__row:hover { background: var(--surface); }
.list__sev {
  width: 3px; align-self: stretch;
  border-radius: 3px;
  margin-top: 2px;
  flex-shrink: 0;
}
.list__sev--p0 { background: var(--risk); }
.list__sev--p1 { background: var(--warn); }
.list__sev--p2 { background: var(--info); }
.list__sev--p3 { background: var(--faint); }
.list__main { min-width: 0; flex: 1; }
.list__title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.list__meta {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--muted);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.list__meta-item { display: inline-flex; align-items: center; gap: 4px; }
.list__right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  flex-shrink: 0;
}

/* ---------- READING CANVAS (Notion-style) ---------- */
.prose {
  max-width: var(--content-max);
  font-family: var(--font-read);
  font-size: var(--text-read);
  line-height: var(--lh-read);
  color: var(--ink-2);
  letter-spacing: -0.003em;
}
.prose h2 {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: var(--s8) 0 var(--s3);
  letter-spacing: -0.015em;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: var(--s6) 0 var(--s2);
  letter-spacing: -0.01em;
}
.prose p { margin-bottom: var(--s4); }
.prose ul, .prose ol { margin: 0 0 var(--s4) var(--s5); }
.prose ul li { list-style: disc; margin-bottom: 6px; }
.prose ol li { list-style: decimal; margin-bottom: 6px; }
.prose a { color: var(--accent); border-bottom: 1px solid var(--accent-soft); }
.prose a:hover { background: var(--accent-soft); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose hr {
  border: 0; border-top: 1px solid var(--divider);
  margin: var(--s8) 0;
}

/* Source-backed claim */
.claim {
  display: block;
  padding: 2px 0;
  border-left: 2px solid var(--accent);
  padding-left: 14px;
  margin-left: -16px;
  background: linear-gradient(to right, var(--accent-soft) 0%, transparent 40%);
  border-radius: 2px;
  transition: background var(--dur);
}
[data-theme="dark"] .claim { background: linear-gradient(to right, rgba(112, 119, 245, 0.08) 0%, transparent 40%); }
.claim__refs {
  display: inline-flex;
  gap: 4px;
  margin-left: 6px;
  vertical-align: baseline;
  font-family: var(--font-ui);
}
.ref {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: var(--r-sm);
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border: 1px solid transparent;
  line-height: 1;
  cursor: pointer;
}
[data-theme="dark"] .ref { background: var(--accent-soft); color: var(--accent-ink); }
.ref:hover { background: var(--accent); color: white; }

/* Callouts */
.callout {
  display: flex; gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  margin: var(--s5) 0;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.callout__icon { flex-shrink: 0; color: var(--muted); margin-top: 1px; }
.callout__title {
  font-weight: 600; color: var(--ink); font-size: 13px;
  margin-bottom: 2px;
  letter-spacing: -0.005em;
}
.callout--gap   { background: var(--warn-bg); border-color: transparent; }
.callout--gap .callout__title { color: var(--warn-ink); }
.callout--gap .callout__icon { color: var(--warn); }
.callout--contra { background: var(--risk-bg); border-color: transparent; }
.callout--contra .callout__title { color: var(--risk-ink); }
.callout--contra .callout__icon { color: var(--risk); }
.callout--note { background: var(--info-bg); border-color: transparent; }
.callout--note .callout__title { color: var(--info-ink); }
.callout--note .callout__icon { color: var(--info); }

/* TL;DR block */
.tldr {
  padding: var(--s4) var(--s5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  margin-bottom: var(--s6);
  font-family: var(--font-ui);
}
.tldr__label {
  font-size: 10.5px; font-weight: 600;
  color: var(--accent); letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.tldr ul { margin: 0; padding-left: 18px; }
.tldr li {
  list-style: disc;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 4px;
}

/* ---------- RIGHT RAIL ---------- */
.rail-section { margin-bottom: var(--s6); }
.rail-section__title {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.rail-section__title svg { color: var(--faint); }

.meta-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px;
  padding: 5px 0;
}
.meta-row__k { color: var(--muted); }
.meta-row__v { color: var(--ink-2); font-weight: 500; }

/* Confidence bar */
.confidence {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.confidence__top {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px;
}
.confidence__label { color: var(--muted); }
.confidence__score { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.confidence__bar {
  height: 5px;
  background: var(--surface-sunk);
  border-radius: var(--r-full);
  overflow: hidden;
}
.confidence__fill {
  height: 100%;
  border-radius: var(--r-full);
  background: var(--conf-high);
}
.confidence--med .confidence__fill { background: var(--conf-med); }
.confidence--low .confidence__fill { background: var(--conf-low); }
.confidence__foot {
  font-size: 11px;
  color: var(--faint);
  display: flex; gap: 10px;
}

/* Source list in rail */
.src-item {
  display: flex; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--divider);
  min-width: 0;
}
.src-item:last-child { border-bottom: 0; }
.src-item__icon {
  width: 20px; height: 20px; border-radius: 4px;
  display: grid; place-items: center;
  color: white; font-size: 10px; font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.src-item__main { flex: 1; min-width: 0; }
.src-item__title {
  font-size: 12.5px;
  color: var(--ink-2);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.src-item__sub {
  font-size: 11px; color: var(--muted);
  margin-top: 2px;
  display: flex; gap: 6px;
}
.src-item__sub .dot { color: var(--faint); }

.related-item {
  display: flex; gap: 8px; padding: 7px 0;
  border-bottom: 1px solid var(--divider);
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
}
.related-item:last-child { border-bottom: 0; }
.related-item:hover { color: var(--accent); }
.related-item__icon { color: var(--faint); margin-top: 2px; flex-shrink: 0; }
.related-item__main { min-width: 0; flex: 1; }
.related-item__title {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500;
}
.related-item__sub { font-size: 11px; color: var(--muted); margin-top: 2px; }

.update-item {
  display: flex; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--divider);
  font-size: 12.5px;
}
.update-item:last-child { border-bottom: 0; }
.update-item__time {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--faint);
  white-space: nowrap;
  min-width: 48px;
  margin-top: 1px;
}
.update-item__text {
  color: var(--ink-2);
  line-height: 1.45;
}
.update-item__text b { font-weight: 600; color: var(--ink); }

/* ---------- EVIDENCE TABLE ---------- */
.etable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.etable th, .etable td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--divider);
  vertical-align: top;
}
.etable th {
  background: var(--surface-2);
  font-weight: 600;
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.etable tbody tr:last-child td { border-bottom: 0; }
.etable tbody tr:hover { background: var(--surface); }
.etable .t-id { font-family: var(--font-mono); color: var(--muted); font-size: 12px; }
.etable .t-title { color: var(--ink); font-weight: 500; }

/* ---------- SECTION HEADINGS (canvas) ---------- */
.sec-head {
  display: flex; align-items: center; gap: 10px;
  margin: var(--s8) 0 var(--s3);
}
.sec-head:first-child { margin-top: 0; }
.sec-head__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  display: inline-flex; align-items: center; gap: 8px;
}
.sec-head__title svg { color: var(--muted); }
.sec-head .spacer { flex: 1; }
.sec-head__actions { display: inline-flex; gap: 4px; font-size: 12px; color: var(--muted); }
.sec-head__actions a { color: var(--muted); }
.sec-head__actions a:hover { color: var(--ink); }

/* ---------- TWO-COLUMN DASHBOARD ROW ---------- */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
}
.grid-3 {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--s4);
}

/* ---------- Q&A (operational queries) ---------- */
.qa {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s5) var(--s6);
  background: linear-gradient(180deg, var(--accent-soft) 0%, transparent 80%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: var(--s6);
}
[data-theme="dark"] .qa { background: linear-gradient(180deg, rgba(112, 119, 245, 0.08) 0%, transparent 80%); }
.qa__label {
  font-size: 10.5px; font-weight: 600;
  color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em;
}
.qa__q {
  font-family: var(--font-read);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.35;
}
.qa__a {
  font-family: var(--font-read);
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.6;
  border-left: 3px solid var(--accent);
  padding-left: 14px;
  margin-top: 6px;
}
.qa__a strong { color: var(--ink); font-weight: 600; }

/* ---------- LEADERSHIP NOTE BLOCK ---------- */
.lead-note {
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s5) var(--s6);
}
.lead-note__head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--divider);
  margin-bottom: var(--s4);
}
.lead-note__avatar {
  width: 30px; height: 30px; border-radius: var(--r-full);
  background: linear-gradient(135deg, #8E96FF, #4C52E4);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: white;
}
.lead-note__who { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.lead-note__when { font-size: 12px; color: var(--muted); }
.lead-note__body {
  font-family: var(--font-read);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
}
.lead-note__body p { margin-bottom: var(--s3); }

/* ---------- STATUS GRID (weekly) ---------- */
.status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.status-cell {
  padding: var(--s4) var(--s5);
  border-right: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}
.status-cell:nth-child(2n) { border-right: 0; }
.status-cell:nth-last-child(-n+2) { border-bottom: 0; }
.status-cell__label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.status-cell__value {
  font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.4;
  display: flex; align-items: center; gap: 8px;
}

/* ---------- RAW EVIDENCE QUOTE ---------- */
.evidence-quote {
  position: relative;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: var(--s3) 0;
}
.evidence-quote__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
  font-family: var(--font-ui);
}
.evidence-quote__head .src-info {
  display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted);
}
.evidence-quote__head .link {
  font-size: 11.5px; color: var(--accent);
}
.evidence-quote__text { color: var(--ink-2); }
.evidence-quote__text mark {
  background: #FFF1A8; color: var(--ink); padding: 0 2px; border-radius: 2px;
}
[data-theme="dark"] .evidence-quote__text mark { background: #6E5B16; color: #FFF6CF; }

/* ---------- TIMELINE (raw evidence trail) ---------- */
.timeline {
  position: relative;
  padding-left: 20px;
}
.timeline::before {
  content: ""; position: absolute;
  left: 5px; top: 6px; bottom: 6px;
  width: 1px; background: var(--divider);
}
.timeline__item {
  position: relative;
  padding-bottom: var(--s5);
}
.timeline__item::before {
  content: ""; position: absolute;
  left: -18px; top: 6px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--canvas);
  border: 2px solid var(--faint);
}
.timeline__item--active::before { border-color: var(--accent); background: var(--accent); }
.timeline__head {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.timeline__head .who { color: var(--ink); font-weight: 500; }
.timeline__head .time { font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); }
.timeline__body {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* ---------- TAB STRIP ---------- */
.tabs {
  display: flex; align-items: center; gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s5);
}
.tab {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); border-bottom-color: var(--ink); }
.tab .count {
  margin-left: 6px;
  font-size: 11px;
  color: var(--faint);
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: var(--r-full);
  font-variant-numeric: tabular-nums;
}
.tab.is-active .count { background: var(--accent-soft); color: var(--accent-ink); }

/* ---------- FILTER BAR ---------- */
.filters {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: var(--s4);
  font-size: 12.5px;
}
.filter-btn {
  padding: 3px 9px;
  font-size: 12.5px;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  display: inline-flex; align-items: center; gap: 5px;
}
.filter-btn:hover { background: var(--canvas); color: var(--ink); border-color: var(--border); }
.filter-btn.is-active {
  background: var(--canvas); color: var(--ink); border-color: var(--border);
  box-shadow: var(--shadow-xs);
}

/* ---------- MOBILE ---------- */
@media (max-width: 1100px) {
  .content { grid-template-columns: 1fr; }
  .rail { display: none; }
  .canvas { padding: var(--s6) var(--s6) var(--s16); }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .metrics-row { grid-template-columns: 1fr 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .canvas { padding: var(--s5) var(--s4) var(--s16); }
  .topbar { padding: 0 var(--s4); gap: var(--s2); }
  .search { min-width: 0; flex: 1; }
  .search span:not(.kbd) { display: none; }
  .search .kbd { display: none; }
  .audience { display: none; }
  .crumbs > .here, .crumbs > .sep { display: none; }
  .crumbs { gap: 0; }
  .crumbs .doctype { display: inline-flex; margin-right: 0; }
  .icon-btn { width: 32px; height: 32px; }
  .status-grid { grid-template-columns: 1fr 1fr !important; }
  .page-header__title { font-size: 1.25rem; }
}

/* ---------- DIVIDERS for canvas wide layout ---------- */
.stack > * + * { margin-top: var(--s4); }
.stack-lg > * + * { margin-top: var(--s6); }
.stack-xl > * + * { margin-top: var(--s8); }