/* Parola app styles. Tokens live in tokens.css (Abyss default; light via data-theme).
   Compose semantic tokens only — theme swaps happen in tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
/* Paint the dark canvas for the full viewport so short or long pages never show a white gap. */
html { background: var(--bg-deep); min-height: 100%; }
body {
  min-height: 100vh; min-height: 100dvh;
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: var(--lh-md);
  font-weight: 400;
  color: var(--ink);
  background: var(--page-bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--beam); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--mist); }
.xs { font-size: var(--text-xs); line-height: var(--lh-xs); }
.sm { font-size: var(--text-sm); line-height: var(--lh-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- shell ---------- */
.app {
  display: grid; grid-template-columns: var(--rail-icon) 1fr; min-height: 100vh; min-height: 100dvh;
  /* Paint the rails for the full page height; the rail contents stay sticky. */
  background: linear-gradient(90deg, var(--navy) 0 var(--rail-icon), transparent var(--rail-icon));
}
.app.with-beams {
  grid-template-columns: var(--rail-icon) var(--rail-beam) 1fr;
  background:
    linear-gradient(90deg, var(--navy) 0 var(--rail-icon), transparent var(--rail-icon)),
    linear-gradient(90deg, transparent calc(var(--rail-icon) + var(--rail-beam) - 1px), var(--line) calc(var(--rail-icon) + var(--rail-beam) - 1px) calc(var(--rail-icon) + var(--rail-beam)), transparent calc(var(--rail-icon) + var(--rail-beam)));
}

/* Derek sidebar spec: 220px labeled sidebar ↔ 64px icon rail (html.rail-collapsed, set by the
   <head> boot script + public/nav-shell.js). Rows 40px, 12px side padding, 20px icons, 12px gap;
   Plus Jakarta Sans 14/500 at 72% white; active = white on soft navy, 3px gold bar, gold icon. */
.rail {
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  background: var(--rail-bg); color: var(--foam-text);
  display: flex; flex-direction: column; align-items: stretch;
  padding: 20px var(--space-3) var(--space-3);
  font-family: var(--font-nav);
}
.rail-mark { display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 6px; margin-bottom: var(--space-5); text-decoration: none; }
.rail-mark img { width: 28px; height: 28px; display: block; flex: none; }
.rail-mark img.rail-word { width: auto; height: 18px; }
.rail-group { display: flex; flex-direction: column; gap: 2px; }
.rail-group + .rail-group { margin-top: 8px; }
.rail-group-bottom { margin-top: var(--space-2); }
.rail-item, .rail-toggle {
  position: relative; box-sizing: border-box;
  height: 40px; padding: 0 12px;
  display: flex; align-items: center; gap: 12px;
  border-radius: var(--r-md);
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-nav); font-size: var(--text-sm); line-height: 20px; font-weight: 500;
  text-decoration: none;
}
.rail-item svg, .rail-toggle svg { width: 20px; height: 20px; flex: none; }
.rail-item:hover, .rail-toggle:hover { color: var(--white); background: rgba(247, 244, 238, 0.06); }
.rail-item[aria-current="page"] { color: var(--white); background: var(--rail-active); }
.rail-item[aria-current="page"] svg { color: var(--beam); }
/* Bar sits on the row's own left edge (inside the fill) so it reads as part of the active row in
   both the 220px sidebar and the 64px rail. */
.rail-item[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 2px 2px 0; background: var(--beam);
}
.rail-item .tip, .rail-item .tip.lbl, .rail-toggle .lbl {
  font: inherit; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
/* Alerts unread count (alerts.js, same number as the bell); hidden at 0. Rail mode: a dot-badge on the icon. */
.rail-item .nav-count { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--neg); color: var(--white); font-size: var(--text-label); font-weight: 600; line-height: 18px; text-align: center; flex: none; }
.nav-count[hidden] { display: none; }
.rail-toggle { width: 100%; margin-top: var(--space-2); border: 0; background: none; cursor: pointer; text-align: left; }
.rail-toggle svg { transition: transform .16s; }
.rail-spacer { flex: 1; min-height: var(--space-4); }

/* Plan meter: a small card above the bottom group; gold Upgrade text link. */
.rail-plan {
  margin: 0 0 var(--space-1); padding: 10px 12px;
  border: 1px solid rgba(247, 244, 238, 0.08); border-radius: var(--r-md);
  background: rgba(247, 244, 238, 0.03);
  font-family: var(--font-nav); font-size: var(--text-xs); line-height: var(--lh-xs); color: rgba(255, 255, 255, 0.72);
}
.rail-plan-head { display: flex; align-items: baseline; gap: 8px; }
.rail-plan-name { font-weight: 600; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-plan-num { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: rgba(255, 255, 255, 0.6); white-space: nowrap; }
.rail-plan .bar { height: 4px; border-radius: 2px; background: rgba(247, 244, 238, 0.14); margin: 8px 0 0; overflow: hidden; }
.rail-plan .bar span { display: block; height: 100%; background: var(--foam-text); opacity: .8; }
.rail-upgrade { display: inline-block; margin-top: 8px; color: var(--beam); font-weight: 600; text-decoration: none; }
.rail-upgrade:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 32px usage ring: rail mode only (the card's text meter doesn't fit 40px). */
.rail-ring { display: none; width: 32px; height: 32px; border-radius: 50%; }
.rail-ring svg { display: block; width: 32px; height: 32px; transform: rotate(-90deg); }
.rail-ring circle { fill: none; stroke-width: 3; }
.rail-ring .ring-track { stroke: rgba(247, 244, 238, 0.14); }
.rail-ring .ring-fill { stroke: var(--beam); stroke-linecap: round; }

/* Icon rail (64px): mark only, labels become hover / focus tooltips, compact meter. */
@media (min-width: 761px) {
  html.rail-collapsed { --rail-icon: var(--rail-mini); }
  /* Chunk mark 32px, centered; 4px less gap below keeps the nav rows where the 28px mark left them. */
  html.rail-collapsed .rail-mark { justify-content: center; padding: 0; height: 32px; margin-bottom: calc(var(--space-5) - 4px); }
  html.rail-collapsed .rail-mark img { width: 32px; height: 32px; }
  html.rail-collapsed .rail-word, html.rail-collapsed .rail-toggle .lbl,
  html.rail-collapsed .rail-plan-name, html.rail-collapsed .rail-upgrade { display: none; }
  html.rail-collapsed .rail-item, html.rail-collapsed .rail-toggle { justify-content: center; padding: 0; }
  html.rail-collapsed .rail-item .nav-count { position: absolute; top: 2px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; font-size: var(--text-micro); line-height: 16px; }
  html.rail-collapsed .rail-toggle svg { transform: rotate(180deg); }
  html.rail-collapsed .rail-item .tip, html.rail-collapsed .rail-item .tip.lbl {
    position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
    background: var(--surface-raised); color: var(--ink);
    font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: 500;
    padding: 4px 8px; border-radius: var(--r-sm); border: 1px solid var(--line-strong);
    overflow: visible; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 50;
  }
  html.rail-collapsed .rail-item:hover .tip, html.rail-collapsed .rail-item:focus-visible .tip { opacity: 1; }
  html.rail-collapsed .rail-plan { display: flex; justify-content: center; padding: 4px 0; border: 0; background: none; }
  html.rail-collapsed .rail-plan-head, html.rail-collapsed .rail-plan .bar { display: none; }
  html.rail-collapsed .rail-ring { display: block; }
}

/* Beams column: 200px, collapsible to its 24px chevron (html.beams-collapsed). Labels 13px;
   counts right-aligned 12px JetBrains Mono at 60% white. */
.beam-rail {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: linear-gradient(180deg, rgba(10, 32, 51, 0.9), rgba(8, 26, 42, 0.95)); border-right: 1px solid var(--line);
  padding: var(--space-4) var(--space-3);
  align-self: start;
}
.beam-rail h2 {
  display: flex; align-items: center; gap: 4px;
  font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: 600; margin: 4px 0 12px;
}
.beam-title { flex: 1; min-width: 0; }
.beam-rail h2 a { font-weight: 500; color: var(--mist); text-decoration: none; font-size: var(--text-xs); margin-right: 8px; }
.beam-toggle {
  width: 24px; height: 24px; flex: none; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm); background: none; color: rgba(255, 255, 255, 0.6); cursor: pointer;
}
.beam-toggle:hover { color: var(--white); background: var(--navy-hover); }
.beam-toggle svg { width: 16px; height: 16px; transition: transform .16s; }
.beam-group { font-size: var(--text-xs); color: var(--mist); font-weight: 500; margin: 16px 8px 4px; }
.beam {
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 8px; border-radius: var(--r-md);
  text-decoration: none; color: var(--mist); font-size: var(--text-xs); line-height: 18px; font-weight: 500;
}
.beam-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.beam:hover { background: var(--navy-hover); color: var(--foam); }
.beam[aria-current="page"] { background: rgba(247, 244, 238, 0.05); color: var(--foam); }
.beam .count {
  margin-left: auto; text-align: right; flex: none;
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: 16px; font-weight: 400;
  color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums;
}
.beam svg { width: 14px; height: 14px; flex: none; opacity: .7; }
html.beams-collapsed { --rail-beam: var(--rail-beam-mini); }
html.beams-collapsed .beam-rail { padding: var(--space-4) 0; overflow: hidden; }
html.beams-collapsed .beam-rail h2 { justify-content: center; }
html.beams-collapsed .beam-title, html.beams-collapsed .beam-rail h2 a, html.beams-collapsed .beam-list { display: none; }
html.beams-collapsed .beam-toggle svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .rail-toggle svg, .beam-toggle svg { transition: none; } }

.main { min-width: 0; flex: 1; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.topbar {
  height: var(--topbar); flex: none;
  display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--line);
  /* Material comes from .glass (tokens.css, 20px blur) or .topbar-solid: no gradient, no blur here. */
  position: sticky; top: 0; z-index: 10;
}
.topbar h1 { flex: none; font-size: var(--text-xl); line-height: var(--lh-xl); font-weight: 600; margin: 0; white-space: nowrap; color: var(--foam); letter-spacing: -0.02em; }
/* Only the crumb and search may shrink (crumb ellipsizes), so a long brand or beam name never
   pushes the bell and avatar off the right edge. */
.topbar .crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--mist); font-size: var(--text-sm); white-space: nowrap; }
.topbar .spacer { flex: 1; }
.topbar .search { position: relative; flex: 0 1 260px; min-width: 160px; }
.topbar .search input {
  width: 100%; height: 36px; padding: 0 12px 0 34px;
  background: var(--navy-wash); border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: var(--text-sm); color: var(--ink);
}
.topbar .search input::placeholder { color: var(--mist); }
.topbar .search svg { position: absolute; left: 11px; top: 11px; width: 14px; height: 14px; color: var(--mist); }
.topbar .brief-time { flex: none; color: var(--mist); font-size: var(--text-xs); white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.topbar .brief-time svg { width: 14px; height: 14px; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--avatar-from), var(--avatar-to)); color: var(--foam);
  border: 1px solid var(--line-strong);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .02em;
}
.account { position: relative; flex: none; }
.account summary { list-style: none; cursor: pointer; }
.account summary::-webkit-details-marker { display: none; }
.account .menu {
  position: absolute; right: 0; top: 40px; min-width: 220px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  box-shadow: var(--shadow-1); padding: var(--space-2); z-index: 30;
}
.account .menu .who { padding: 6px 8px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.account .menu a, .account .menu button {
  display: block; width: 100%; text-align: left; padding: 8px; border-radius: var(--r-sm);
  background: none; border: 0; text-decoration: none; font-size: var(--text-sm); cursor: pointer;
}
.account .menu a:hover, .account .menu button:hover { background: var(--navy-hover); }
.account .menu form { margin: 0; }
/* Theme switch (views/shell.ts themeSwitch): the pressed look follows <html data-theme-pref>. */
.theme-switch button {
  height: 28px; padding: 0 12px; display: inline-flex; align-items: center;
  border: 0; border-radius: 7px; background: none; cursor: pointer;
  font: inherit; font-size: var(--text-xs); font-weight: 500; color: var(--mist);
}
.theme-switch button:hover { color: var(--ink); }
:root:not([data-theme-pref]) .theme-switch [data-theme-choice="dark"],
[data-theme-pref="light"] .theme-switch [data-theme-choice="light"],
[data-theme-pref="dark"] .theme-switch [data-theme-choice="dark"],
[data-theme-pref="system"] .theme-switch [data-theme-choice="system"] { background: var(--seg-on); color: var(--foam); box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
[data-theme-pref="light"][data-theme="light"] .theme-switch [data-theme-choice="light"],
[data-theme-pref="system"][data-theme="light"] .theme-switch [data-theme-choice="system"] { background: var(--surface); color: var(--navy); }
.account .menu .menu-theme { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.account .menu .theme-switch button { display: inline-flex; width: auto; padding: 0 10px; text-align: center; }
.account .menu .theme-switch button:hover { background: none; }

.page { min-width: 0; padding: var(--space-6) var(--space-5); flex: 1; }
.page-head { display: flex; align-items: flex-end; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.page-head .lede { margin: 0; color: var(--mist); font-size: var(--text-md); line-height: var(--lh-md); }
.page-head .grow { flex: 1; min-width: 0; }

/* ---------- grid ---------- */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.row { display: flex; align-items: center; gap: var(--space-2); }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }

/* ---------- cards ---------- */
.card {
  background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: var(--space-5);
}
.card.flat { box-shadow: none; }
.card-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.card-head h2, .card-head h3 { font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: 600; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.card-head .sub { color: var(--mist); font-size: var(--text-xs); }
.card-head .grow { flex: 1; }
.card-foot { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); color: var(--mist); font-size: var(--text-xs); }

.kpi { padding: 20px; display: flex; flex-direction: column; gap: 6px; min-height: 112px; background: var(--kpi-bg); overflow: hidden; }
.kpi .label { color: var(--mist); font-size: var(--text-sm); font-weight: 500; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.kpi .metric { font-size: var(--metric); line-height: var(--lh-metric); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--foam); letter-spacing: -0.03em; }
.kpi .metric small { font-size: var(--text-md); font-weight: 500; color: var(--mist); margin-left: 4px; }
.kpi .foot { color: var(--mist); font-size: var(--text-xs); margin-top: auto; }
.delta { font-size: var(--text-xs); font-weight: 500; }
.delta svg { width: 12px; height: 12px; }
.delta.pos { color: var(--pos); } .delta.neg { color: var(--neg); } .delta.neu { color: var(--neu); }

/* ---------- chips / pills ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: var(--r-pill);
  font-size: var(--text-xs); line-height: 1; font-weight: 500; white-space: nowrap;
  border: 1px solid var(--line); background: transparent; color: var(--mist);
}
.chip.ink { color: var(--ink); }
.chip.pos { background: var(--pos-soft); color: var(--pos); border-color: transparent; }
.chip.neg { background: var(--neg-soft); color: var(--neg); border-color: transparent; }
.chip.priority { font-weight: 600; }
.mention.is-priority { box-shadow: inset 3px 0 0 var(--neg), var(--shadow-1); }
.chip.neu { background: var(--neu-soft); color: var(--neu); border-color: transparent; }
.chip.mixed { background: var(--neu-soft); color: var(--mist); border-color: transparent; }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.corrected::after { content: "edited"; font-weight: 400; opacity: .75; margin-left: 2px; }
/* Sample data: teal info chip, never gold. Must be visible on every sample surface. */
.sample-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 10px; border-radius: var(--r-pill);
  background: var(--teal-soft); color: var(--teal); border: 1px dashed rgba(74, 112, 136, 0.55);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .01em; white-space: nowrap;
}
.sample-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid currentColor; }
/* AI engines not run: neutral, so it never reads as data. */
.sample-pill.not-run { background: var(--neu-soft); color: var(--ink); border-color: rgba(107, 114, 128, 0.55); }
/* AI engine coming soon: neutral and muted, never a rate. */
.sample-pill.coming-soon { background: var(--neu-soft); color: var(--mist); border-color: rgba(107, 114, 128, 0.4); border-style: solid; }
th .sample-pill.coming-soon { height: 18px; padding: 0 6px; margin-left: 4px; font-weight: 500; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: var(--r-md);
  font-size: var(--text-sm); font-weight: 500; text-decoration: none; cursor: pointer;
  border: 1px solid var(--line-strong); background: transparent; color: var(--foam); white-space: nowrap;
}
.btn:hover { border-color: var(--line-strong); background: var(--navy-hover); }
.btn.primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border-color: transparent; font-weight: 600; }
.btn.primary:hover, .btn.primary:focus-visible { filter: brightness(1.05); box-shadow: 0 0 20px var(--beam-glow); }
.btn.accent { background: var(--beam); color: var(--navy); border-color: var(--beam); font-weight: 600; }
.btn.accent:hover { background: var(--ember); border-color: var(--ember); }
.btn.sm { height: 30px; padding: 0 10px; font-size: var(--text-xs); }
.btn.text { border: 0; background: none; padding: 0 6px; height: 28px; color: var(--mist); }
.btn.text:hover { color: var(--ink); }
.btn svg { width: 14px; height: 14px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }

.seg { display: inline-flex; padding: 3px; background: rgba(0, 12, 24, 0.5); border: 1px solid var(--line); border-radius: var(--r-md); gap: 2px; }
.seg a, .seg span {
  height: 28px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px;
  border-radius: 7px; font-size: var(--text-xs); font-weight: 500; color: var(--mist); text-decoration: none;
}
.seg a:hover { color: var(--ink); }
.seg [aria-current="true"] { background: var(--seg-on); color: var(--foam); box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.seg .count { color: var(--mist); font-weight: 400; }

/* ---------- forms ---------- */
label.field { display: block; font-size: var(--text-sm); font-weight: 500; margin: var(--space-4) 0 var(--space-2); }
.input, input.input, select.input, textarea.input {
  width: 100%; min-height: 36px; padding: 7px 12px;
  background: rgba(0, 12, 24, 0.55); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: var(--text-md); color: var(--ink);
}
.input:focus { outline: 2px solid var(--beam); outline-offset: 1px; border-color: var(--line-strong); }
.alert { padding: 10px 14px; border-radius: var(--r-md); font-size: var(--text-sm); margin: 12px 0; border: 1px solid var(--line); background: var(--navy-wash); }
.alert.error { border-color: rgba(163, 59, 43, .4); color: var(--neg); background: var(--neg-soft); }
.alert.note { border-style: dashed; color: var(--mist); }

/* ---------- tables ---------- */
/* position: relative keeps .sr-only cells inside the scroller; otherwise they widen the whole page. */
.table-wrap { position: relative; min-width: 0; max-width: 100%; overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
table.t th {
  position: sticky; top: 0; background: var(--surface);
  text-align: left; font-weight: 500; color: var(--mist); font-size: var(--text-xs);
  padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.t td { padding: 12px; height: 46px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.t tbody tr:last-child td { border-bottom: 0; }
table.t tbody tr:hover td { background: var(--navy-hover); }
table.t .r { text-align: right; font-variant-numeric: tabular-nums; }
table.t .c { text-align: center; }
table.t a { text-decoration: none; font-weight: 500; }
table.t a:hover { text-decoration: underline; }
.em-dash { color: var(--mist); }

/* ---------- charts ---------- */
.bars { display: flex; flex-direction: column; gap: 12px; }
.bar-row { display: grid; grid-template-columns: 120px 1fr 52px; align-items: center; gap: 12px; font-size: var(--text-sm); }
.bar-row .name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row .track { height: 10px; background: rgba(0, 12, 24, 0.55); border-radius: var(--r-pill); overflow: hidden; border: 1px solid var(--line); }
.bar-row .fill { height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--bar-start), var(--teal)); }
.bar-row .fill.own { background: var(--beam); }
.bar-row .pct { color: var(--foam); }
.bar-row .fill.teal { background: var(--teal); }
.bar-row .pct { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.bar-row a.name { text-decoration: none; }
.bar-row a.name:hover { text-decoration: underline; }

.mix { display: flex; height: 10px; border-radius: var(--r-pill); overflow: hidden; background: rgba(0,12,24,0.55); border: 1px solid var(--line); }
.mix span { display: block; height: 100%; }
.mix .pos { background: var(--pos); } .mix .neu { background: var(--neu); } .mix .neg { background: var(--neg); }
.mix-legend { display: flex; gap: 14px; font-size: var(--text-xs); color: var(--mist); margin-top: 8px; flex-wrap: wrap; }
.mix-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }

svg.spark { display: block; overflow: visible; }
svg.chart text { font-family: var(--font-ui); font-size: 12px; fill: var(--mist); }

.dot-yes, .dot-no { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; flex: none; }
/* Filled = appears, hollow ring = missing. --ink is bright foam on Abyss and navy on light. */
.dot-yes { background: var(--ink); border: 2px solid var(--ink); }
.dot-no { background: transparent; border: 2px solid var(--mist); }
.trend { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 500; }
.trend.up { color: var(--pos); } .trend.down { color: var(--neg); } .trend.flat { color: var(--neu); }
.trend svg { width: 12px; height: 12px; }

/* ---------- mention card (Shore) ---------- */
.feed { display: flex; flex-direction: column; gap: 12px; }
.mention {
  position: relative;
  background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.mention:hover { border-color: var(--line-strong); }
.mention:target { border-color: var(--mist); }
.mention.unread::before {
  content: ""; position: absolute; left: 8px; top: 22px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--beam);
}
.mention .r1 { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); }
.mention .r1 .who { font-weight: 500; color: var(--foam); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mention .r1 .who .plat { color: var(--mist); font-weight: 400; }
.mention .r1 time { margin-left: auto; color: var(--mist); font-size: var(--text-xs); white-space: nowrap; }
.glyph {
  width: 28px; height: 28px; flex: none; border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(74, 112, 136, 0.25); border: 1px solid var(--line); color: var(--mist);
  font-size: var(--text-micro); font-weight: 600; letter-spacing: -.02em;
}
.glyph svg { display: block; width: 16px; height: 16px; }
.mention .title { font-weight: 600; margin: 0; font-size: var(--text-md); }
.mention .snip {
  margin: 0; font-size: var(--text-md); line-height: 22px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
mark.kw { background: none; color: inherit; text-decoration: underline; text-decoration-color: var(--beam-line); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mention a.title, .mention a.snip-link { text-decoration: none; }
.mention a.title:hover, .mention a.snip-link:hover { text-decoration: underline; }
.mention.is-detail .meta-line .actions { opacity: 1; }
.mention .r4 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mention .r4 .actions { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.mention.noise { opacity: .72; }

.feed-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.feed-controls .counter { color: var(--mist); font-size: var(--text-sm); }
.feed-controls .counter strong { color: var(--ink); font-weight: 600; }

/* ---------- empty state ---------- */
.empty { max-width: 420px; margin: 64px auto; text-align: center; }
.empty img { width: 112px; height: 112px; }
.empty h2 { font-size: var(--text-xl); line-height: var(--lh-xl); font-weight: 600; margin: 16px 0 6px; }
.empty p { color: var(--mist); margin: 0 0 16px; }

/* ---------- AI visibility ---------- */
.score-head { display: flex; align-items: center; gap: var(--space-5); padding: 20px 24px; }
.score-num { font-family: var(--font-ui); font-weight: 600; font-size: 64px; line-height: 64px; font-variant-numeric: lining-nums tabular-nums; }
.score-num small { font-family: var(--font-ui); font-size: var(--text-lg); color: var(--mist); font-weight: 500; margin-left: 4px; }
.score-meta { display: flex; flex-direction: column; gap: 8px; }
.score-meta .label { font-weight: 600; font-size: var(--text-lg); }
.wow { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font-size: var(--text-xs); font-weight: 600; }
.wow.pos { background: var(--pos-soft); color: var(--pos); }
.wow.neg { background: var(--neg-soft); color: var(--neg); }
.wow.neu { background: var(--neu-soft); color: var(--neu); }
.wow svg { width: 12px; height: 12px; }
.day-picker, .week-picker { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
.day-picker a, .week-picker a, .day-picker span.arrow, .week-picker span.arrow { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; color: var(--mist); text-decoration: none; }
.day-picker a:hover, .week-picker a:hover { background: var(--foam-raised); color: var(--ink); }
.day-picker span.arrow, .week-picker span.arrow { opacity: .35; }
.day-picker .wk, .week-picker .wk { padding: 0 10px; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.day-picker svg, .week-picker svg { width: 14px; height: 14px; }

.coverage-note { font-size: var(--text-xs); color: var(--mist); margin: 10px 2px 0; }

/* ---------- brief ---------- */
.brief-doc { max-width: 680px; }
.brief-title { font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 40px; margin: 0 0 6px; }
.brief-doc h3 { font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: 600; margin: 24px 0 10px; }
.brief-doc p { margin: 0 0 10px; }
.frame-label { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }

/* ---------- auth (onboarding canvas, no sidebar) ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 48px 16px; }
.auth-card { width: 100%; max-width: 420px; }
.auth-brand { display: inline-flex; align-items: center; margin-bottom: var(--space-6); padding: 8px 0; text-decoration: none; }
.auth-brand img { height: 40px; width: auto; display: block; } /* Chunk lockup; wordmark baked in */
.auth h1 { font-size: var(--title); line-height: var(--lh-title); font-weight: 650; letter-spacing: -0.025em; margin: 0 0 6px; }
/* First-run headlines keep the serif: setup steps and the screens that create or join a workspace. */
.auth .setup-card h1, .auth .auth-welcome h1 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; }
.auth .lede { color: var(--mist); margin: 0 0 8px; }
.auth form .btn { width: 100%; height: 44px; margin-top: var(--space-5); }
.auth .foot { margin-top: var(--space-5); color: var(--mist); font-size: var(--text-sm); }
.auth .foot a { color: var(--ink); font-weight: 500; }
/* Auth bodies come from routes/auth.ts as plain card + label/input markup. */
.auth .card { padding: var(--space-6); }
.auth label { display: block; font-size: var(--text-sm); font-weight: 500; margin: var(--space-4) 0 var(--space-2); }
.auth input, .auth select, .auth textarea {
  width: 100%; height: 44px; padding: 0 12px;
  background: var(--navy-deep); border: 1px solid color-mix(in srgb, var(--foam) 10%, transparent); border-radius: 12px; font-size: var(--text-md); color: var(--foam);
}
.auth input:focus { outline: 2px solid var(--beam); outline-offset: 1px; }
.auth button.primary {
  width: 100%; height: 44px; margin-top: var(--space-5); cursor: pointer;
  background: var(--gold); color: var(--navy); border: 0; border-radius: 12px; font-weight: 600;
}
.auth button.primary:hover { background: var(--beam); filter: brightness(1.05); }
.auth p.muted { margin: var(--space-5) 0 0; font-size: var(--text-sm); }
.auth p.muted a { color: var(--ink); font-weight: 500; }

/* 1280-1439px with the beam rail (Mentions) leaves the bar ~820px: a narrower search fits it unshrunk. */
@media (max-width: 1439px) {
  .app.with-beams .topbar .search { flex-basis: 200px; }
}
/* Under 1280px the sidebar auto-collapses to the 64px rail, which leaves room for Beams down to 1024px. */
@media (max-width: 1279px) {
  .topbar .search { flex-basis: 200px; }
  .app.with-beams .topbar .brief-time { display: none; }
}
@media (max-width: 1023px) {
  .app.with-beams { grid-template-columns: var(--rail-icon) 1fr; }
  .app.with-beams .beam-rail { display: none; }
}

/* ---------- feed: day groups + 24h strip ---------- */
.day { display: flex; flex-direction: column; gap: 12px; }
.day + .day { margin-top: 28px; }
.day-head { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.day-head h2 { margin: 0; font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.day-head .date { color: var(--mist); font-size: var(--text-xs); }
.day-head .n { margin-left: auto; color: var(--mist); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.daystrip { position: relative; height: 76px; padding: 0 18px; background: var(--foam-raised); border: 1px solid var(--line); border-radius: var(--r-lg); }
.daystrip .track { position: absolute; inset: 0 18px; }
.daystrip .base { position: absolute; left: 0; right: 0; bottom: 20px; height: 1px; background: var(--line-strong); }
.daystrip .hour { position: absolute; bottom: 2px; transform: translateX(-50%); font-size: var(--text-micro); line-height: 14px; color: var(--mist); }
.daystrip .hour::before { content: ""; position: absolute; left: 50%; bottom: 18px; width: 1px; height: 5px; background: var(--line-strong); }
.daystrip .now { position: absolute; top: 8px; bottom: 20px; border-left: 1px dashed var(--teal); }
.daystrip .pin {
  position: absolute; bottom: calc(26px + var(--lane) * 14px); transform: translateX(-50%);
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--line-strong); color: var(--ink);
  font-size: 9px; font-weight: 600; letter-spacing: -.02em; text-decoration: none;
}
.daystrip .pin::after { content: ""; position: absolute; left: 50%; top: 100%; height: calc(var(--lane) * 14px + 6px); border-left: 1px solid var(--line-strong); }
.daystrip .pin:hover, .daystrip .pin:focus-visible { border-color: var(--navy); z-index: 2; }
.daystrip .pin.muted { opacity: .5; }

/* ---------- triage + categories ---------- */
.mention.is-done { opacity: .78; }
.mention.is-irrelevant { opacity: .6; }
.chip.triage svg { width: 12px; height: 12px; }
.filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -4px 0 16px; }
.filter-row .label { color: var(--mist); font-size: var(--text-xs); font-weight: 500; min-width: 64px; }
.chip-link { text-decoration: none; }
.chip-link:hover { border-color: var(--line-strong); color: var(--ink); }
.chip-link[aria-current="true"] { background: var(--foam-raised); border-color: var(--navy); color: var(--ink); box-shadow: var(--shadow-1); }
.chip-link .count { opacity: .75; font-weight: 400; font-variant-numeric: tabular-nums; }

/* ---------- who's talking (supporters vs critics) ---------- */
.voices-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.voices-grid > div + div { border-left: 1px solid var(--line); padding-left: 24px; }
.voices-h { margin: 0 0 8px; font-size: var(--text-md); font-weight: 600; display: flex; gap: 8px; align-items: baseline; }
.voices { list-style: none; margin: 0; padding: 0; }
.voices li { display: grid; grid-template-columns: 18px 20px minmax(0, 1fr) auto 112px; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.voices li:last-child { border-bottom: 0; }
.voices .rank { color: var(--mist); font-size: var(--text-xs); text-align: right; }
.voices .who { display: flex; flex-direction: column; min-width: 0; }
.voices .who > a { font-weight: 500; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voices .who > a:hover { text-decoration: underline; }
.voices .who .xs a { color: inherit; }
.voices .lean { white-space: nowrap; font-weight: 500; font-variant-numeric: tabular-nums; }
.voices .reach { text-align: right; font-weight: 600; font-size: var(--text-sm); }
.voices .reach-bar { display: block; height: 4px; margin-top: 4px; border-radius: var(--r-pill); background: var(--foam); overflow: hidden; }
.voices .reach-bar span { display: block; height: 100%; background: var(--teal); border-radius: var(--r-pill); }
.voice-empty { margin: 8px 0; }
@media (max-width: 1100px) { .voices-grid { grid-template-columns: 1fr; } .voices-grid > div + div { border-left: 0; padding-left: 0; } }

/* ---------- public read-only dashboard ---------- */
body.public { background: var(--bg); }
.public-bar {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 24px; background: var(--navy); color: var(--foam-text);
}
.public-bar .lockup { height: 28px; width: auto; display: block; }
.public-bar .grow { flex: 1; }
.public-bar .xs { opacity: .8; }
.public-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill);
  background: var(--abyss); border: 1px solid rgba(247, 244, 238, .22); font-size: var(--text-xs); font-weight: 500;
}
.public-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--beam); }
.public-main { max-width: 1200px; padding: 24px; margin: 0 auto; }
.public-list { list-style: none; margin: 0; padding: 0; }
.public-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: start; }
.public-list li:last-child { border-bottom: 0; }
.public-list .meta { font-size: var(--text-sm); }
.public-list .meta strong { font-weight: 500; }
.public-list .title { margin: 4px 0 0; font-weight: 600; }
.public-list .snip { margin: 4px 0 0; overflow-wrap: anywhere; }
.public-list .side { display: flex; align-items: center; gap: 4px; }
.public-foot { color: var(--mist); font-size: var(--text-xs); text-align: center; margin: 24px 0 8px; }

/* ---------- webhook activity log ---------- */
.attempts { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 6px; }
.attempts i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: transparent; }
.attempts i.ok { background: var(--pos); border-color: var(--pos); }
.attempts i.bad { background: var(--neg-soft); border-color: var(--neg); }
.chip svg { width: 12px; height: 12px; }
code { font-family: var(--font-code); font-size: var(--text-xs); }


/* Load skeleton: paints instantly on rail navigate so the pane never flashes blank. */
.page-skeleton { display: none; padding: 24px; gap: 16px; }
html.is-nav[data-sk="page"] .page-skeleton[data-sk-kind="page"], html.is-nav[data-sk="feed"] .page-skeleton[data-sk-kind="feed"],
html.is-nav[data-sk="tiles"] .page-skeleton[data-sk-kind="tiles"], html.is-nav[data-sk="drafts"] .page-skeleton[data-sk-kind="drafts"],
html.is-nav[data-sk="ai"] .page-skeleton[data-sk-kind="ai"] { display: grid; }
html.is-nav .page > :not(.page-skeleton) { display: none; }
.page-skeleton .sk {
  background: linear-gradient(90deg, var(--surf) 0%, var(--surf3) 50%, var(--surf) 100%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.1s ease-in-out infinite;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.page-skeleton .sk-h { height: 28px; width: min(280px, 60%); }
.page-skeleton .sk-lede { height: 16px; width: min(520px, 80%); }
.page-skeleton .sk-row { display: grid; grid-template-columns: minmax(0, 1.8fr) repeat(3, minmax(0, 1fr)); gap: 12px; }
.page-skeleton .sk-kpi { height: 132px; } /* matches .kpi min-height — no layout jump */
.page-skeleton .sk-block { height: 220px; }
.page-skeleton .sk-tools { height: 36px; width: min(360px, 90%); }
.page-skeleton .sk-mention { height: 112px; }
.page-skeleton .sk-strip { height: 28px; width: min(640px, 100%); }
.page-skeleton .sk-hero { height: 280px; max-width: 820px; }
.page-skeleton .sk-line { height: 40px; max-width: 820px; }
.page-skeleton .sk-score { height: 148px; }
@keyframes sk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .page-skeleton .sk { animation: none; background: var(--line); }
}


/* v3 Share of voice: donut + sources under it, zero-brand fold, hero callout */
.donut-block { display: flex; align-items: center; gap: 28px; padding: 4px 0; flex-wrap: wrap; }
.donut-wrap { position: relative; width: 168px; height: 168px; flex-shrink: 0; }
.donut-wrap svg { width: 168px; height: 168px; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.donut-center .big { font-size: 36px; font-weight: 600; color: var(--ink); letter-spacing: -0.03em; line-height: 1; }
.donut-center .sub { font-size: var(--text-xs); color: var(--mist); font-weight: 500; margin-top: 4px; }
.donut-leg { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 140px; }
.donut-leg .row { display: flex; align-items: center; gap: 10px; font-size: var(--text-xs); color: var(--ink); }
.donut-leg .sw { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; display: inline-block; }
.donut-leg .cnt { margin-left: auto; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.donut-leg .lp { width: 40px; text-align: right; color: var(--mist); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.src-list { display: flex; flex-direction: column; gap: 8px; }
.src-row { display: grid; grid-template-columns: 72px 1fr 28px; align-items: center; gap: 10px; }
.src-row .nm { font-size: var(--text-xs); font-weight: 500; color: var(--mist); }
.src-row .trk { height: 8px; background: rgba(0,12,24,0.55); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.src-row .fl { height: 100%; border-radius: 999px; background: var(--teal); }
.src-row .n { font-size: var(--text-xs); font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.sov-zero { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--navy-wash); border: 1px solid var(--line); font-size: var(--text-xs); line-height: 1.4; color: var(--mist); font-weight: 500; }
.hero-callout { margin: 0 0 12px; color: var(--ink); font-size: var(--t-body); line-height: 1.5; font-weight: 600; }
.demo-pill { font-size: var(--text-xs); font-weight: 500; color: var(--mist); background: rgba(247,244,238,0.04); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; }
.feed-summary { font-size: var(--text-sm); color: var(--mist); margin: 4px 0 12px; }
.feed-summary strong { color: var(--foam); font-weight: 600; }


/* ---- Abyss extras: mention detail, brief report, tabs ---- */
.mention .meta-line {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.mention .meta-line .actions { margin-left: auto; display: flex; align-items: center; gap: 2px; }
/* Priority and sentiment stay on one row: a long keyword truncates (its title has it all). */
.mention .meta-core { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.mention .meta-core .chip.priority { min-width: 0; overflow: hidden; }
.mention .meta-core .chip.priority > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mention .meta-core > :not(.chip) { flex: none; }
.own-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px; font-size: var(--text-label); line-height: 1; font-weight: 500; white-space: nowrap; color: var(--mist); background: color-mix(in srgb, var(--mist) 14%, transparent); }

.tabs { display: flex; gap: var(--space-5); margin-bottom: var(--space-5); box-shadow: inset 0 -1px 0 var(--line); }
.tabs a {
  height: 36px; display: inline-flex; align-items: center; flex: none;
  font-size: var(--text-sm); font-weight: 500; color: var(--mist); text-decoration: none;
}
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 currentColor; }

.brief-report {
  background: var(--card-solid); border: 1px solid var(--line); border-radius: 16px; padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-5);
}
.brief-report h2.report-title {
  font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 46px; color: var(--ink);
  letter-spacing: -0.02em; margin: 0;
}
.brief-report .report-head p { margin: 4px 0 0; }
.brief-report .report-lede { font-size: var(--t-body); line-height: 1.5; color: var(--mist); max-width: 720px; }
.brief-report .report-lede strong { color: var(--ink); font-weight: 500; }
.mkpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.mkpi { background: var(--card-solid-2); border-radius: 12px; padding: var(--space-5); }
.mkpi .l { font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: 500; color: var(--mist); margin-bottom: 8px; }
.mkpi .v { font-size: var(--metric); font-weight: 600; color: var(--ink); letter-spacing: -0.03em; line-height: 1; }
.mkpi .d { font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--mist); margin-top: 8px; }
.sec-t { font-size: var(--text-label); line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mist-2); margin-bottom: 8px; }
.flares { display: flex; flex-direction: column; }
.flare { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--text-md); line-height: 1.5; color: var(--ink); }
.flare:last-child { border-bottom: 0; }
.flare .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--mist); margin-top: 9px; flex-shrink: 0; }
.looks { display: flex; flex-direction: column; }
.looks .empty-hint { margin: 8px auto; }
.look { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--text-md); line-height: 1.5; }
.look:last-child { border-bottom: 0; }
.look .src { font-size: var(--text-label); line-height: 16px; font-weight: 600; color: var(--mist); text-transform: uppercase; letter-spacing: 0.04em; padding-top: 3px; }
.look .txt { color: var(--ink); }
.look .meta { font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--mist); margin-top: 2px; }
.brief-report .reply-draft .reply-text { border-left-color: var(--line-strong); } /* five replies would be five gold bars */
.brief-mid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-5); }
.sov-mini { display: flex; flex-direction: column; gap: 5px; }
.sov-mini .row { display: grid; grid-template-columns: 90px 1fr 36px; gap: 8px; align-items: center; }
.sov-mini .nm { font-size: var(--text-xs); font-weight: 500; color: var(--mist); }
.sov-mini .row.own .nm { color: var(--ink); font-weight: 600; }
.sov-mini .trk { height: 7px; background: rgba(0,12,24,0.55); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.sov-mini .fl { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--bar-start), var(--teal)); }
.sov-mini .fl.g { background: var(--beam); }
.sov-mini .pc { font-size: var(--text-xs); font-weight: 600; color: var(--ink); text-align: right; }
.sov-mini .zero { font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--mist); padding: 4px 0 0; }
.src-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: 6px; }
.sc { background: var(--navy-wash); border-radius: 10px; padding: 8px; text-align: center; }
.sc .sn { font-size: var(--t-body-lg); font-weight: 600; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sc .sl { font-size: var(--text-xs); color: var(--mist); margin-top: 2px; font-weight: 500; }
.brief-cta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.brief-cta .hint { font-size: var(--text-xs); color: var(--mist); }
.arch-list { display: flex; flex-direction: column; gap: 8px; }
.arch-item { background: var(--navy-wash); border: 1px solid transparent; border-radius: 12px; padding: 12px 14px; text-decoration: none; color: inherit; display: block; }
.arch-item.on { border-color: var(--line-strong); }
.arch-item .d { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.arch-item .m { font-size: var(--text-xs); color: var(--mist); margin-top: 4px; }
.arch-item .preview { margin-top: 8px; font-size: var(--text-xs); font-weight: 500; color: var(--mist); }

/* light theme overrides for composed gradients */
[data-theme="light"] body { background: var(--foam); background-attachment: initial; }
[data-theme="light"] .rail { background: var(--navy); }
[data-theme="light"] .beam-rail { background: var(--foam); }
[data-theme="light"] .topbar:not(.glass) { background: var(--foam); backdrop-filter: none; }
/* Chunk on Foam: navy-body variants (README rule 6). Rail stays navy, so it keeps mark-light. */
[data-theme="light"] .auth-brand img { content: url(/brand/lockups/lockup-sans-horizontal-dark.svg); }
[data-theme="light"] .empty img[data-chunk="sleepy"] { content: url(/brand/expressions/sleepy-full.svg); }
[data-theme="light"] .topbar h1 { color: var(--ink); }
[data-theme="light"] .card, [data-theme="light"] .mention, [data-theme="light"] .brief-report { background: var(--surface); }
[data-theme="light"] .kpi { background: var(--surface); }
[data-theme="light"] .sec-t { color: var(--mist); }
[data-theme="light"] .kpi .metric, [data-theme="light"] .mention .r1 .who, [data-theme="light"] .bar-row .pct { color: var(--ink); }
[data-theme="light"] .btn { background: var(--foam); color: var(--ink); border-color: var(--line); }
[data-theme="light"] .btn.text { background: none; }
[data-theme="light"] .btn.primary, [data-theme="light"] .btn.primary:hover, [data-theme="light"] .btn.primary:focus-visible { background: var(--navy); color: var(--foam); box-shadow: none; }
[data-theme="light"] .seg { background: var(--foam); }
[data-theme="light"] .seg [aria-current="true"] { background: var(--surface); color: var(--navy); }

/* High-priority alerts: bell (topbar), banner, /alerts list. Polled by /alerts.js. */
.alerts-bell .bell-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; color: var(--mist); }
.alerts-bell .bell-btn:hover { color: var(--ink); background: var(--navy-hover); }
.alerts-bell .bell-btn svg { width: 18px; height: 18px; }
.alerts-bell .bell-count { position: absolute; top: -2px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--neg); color: var(--white); font-size: var(--text-micro); font-weight: 600; line-height: 16px; text-align: center; }
.alerts-bell .alerts-menu { min-width: 360px; max-width: 420px; }
.alerts-menu-head { display: flex; align-items: center; gap: 8px; padding: 4px 8px 8px; border-bottom: 1px solid var(--line); }
.alerts-menu-head .spacer { flex: 1; }
.account .menu button.alerts-read-all { width: auto; padding: 2px 6px; font-size: var(--text-xs); color: var(--mist); }
.alerts-list { list-style: none; margin: 0; padding: 4px 0; max-height: 360px; overflow: auto; }
.alerts-list li { padding: 8px; border-radius: var(--r-sm); }
.alerts-list li.unread { background: var(--neg-soft); }
.account .menu .alerts-list a { display: inline; padding: 0; width: auto; }
.alerts-list .t { font-size: var(--text-sm); color: var(--ink); margin: 4px 0 2px; }
.alerts-menu-foot { display: flex; justify-content: space-between; padding: 6px 8px 2px; border-top: 1px solid var(--line); }
.account .menu .alerts-menu-foot a { display: inline; width: auto; padding: 0; font-size: var(--text-xs); }
/* One line at the 1280px demo width: the alert text ellipsizes (full text in its title). */
/* Plan cap hit (services/usage-caps.ts): listening paused for the org. Wraps; never hidden. */
.cap-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px var(--space-5) 0; padding: 10px 14px; border: 1px solid var(--neg); border-left-width: 4px; border-radius: var(--r-md); background: var(--neg-soft); color: var(--ink); }
.cap-banner .t { flex: 1; min-width: 0; }
.cap-banner .t strong { font-weight: 600; }
.cap-banner .btn { flex: none; }
.alert-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.alert-item { position: relative; padding: 12px 0 12px 14px; border-bottom: 1px solid var(--line); }
.alert-item:last-child { border-bottom: 0; }
.alert-item.unread::before { content: ""; position: absolute; left: 0; top: 21px; width: 6px; height: 6px; border-radius: 50%; background: var(--neg); }
.alert-item .alert-title { display: block; margin: 6px 0 4px; color: var(--ink); font-size: var(--t-body); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.alert-item:not(.unread) .alert-title { color: var(--mist); font-weight: 400; }
.alert-item .alert-title:hover { text-decoration: underline; }

/* Brief: suggested reply drafts under "Worth a human look" (display only, never sent). */
.reply-draft { margin: 8px 0 4px; padding: 12px 14px; border-radius: var(--r-md); background: var(--navy-wash); }
.reply-draft .why { margin: 0 0 6px; color: var(--ink); font-size: var(--text-sm); line-height: 1.45; }
.reply-draft .reply-head { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.reply-draft .reply-head .chip { font-size: var(--text-xs); padding: 1px 6px; }
.reply-draft .reply-text { margin: 4px 0; padding: 6px 10px; border-left: 2px solid var(--line-strong); color: var(--ink); font-size: var(--text-md); line-height: 1.5; white-space: pre-wrap; }
.reply-draft p.xs { margin: 2px 0 0; }

/* ===================================================================
   Product screens on Chunk (Capitalio-leaning): setup flow, brand profile,
   feed sentiment, Needs review, Opportunity Sniper, AI visibility.
   Gold stays accent only (current step pip, primary button, unread). Chunk
   expressions render as shipped: no opacity, filter or recolour on .chunk.
   =================================================================== */
.chunk { display: inline-block; flex: none; vertical-align: middle; }
/* pageHeader() in views/ui.ts: the one page head. Sans, always. */
.page-eyebrow { margin: 0 0 4px; font-size: var(--text-label); line-height: var(--lh-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mist-2); }
[data-theme="light"] .page-eyebrow { color: var(--mist); }
.page-title { margin: 0 0 6px; overflow-wrap: anywhere; font-size: var(--title); line-height: var(--lh-title); font-weight: 650; letter-spacing: -0.025em; color: var(--foam); }
.page-head .lede { max-width: 760px; }
.m0 { margin: 0; }
.card-lede { margin: 0 0 8px; }
.section-gap { margin-bottom: var(--space-4); }
.kpi-row { margin-bottom: var(--space-4); }
.kpi .label .chunk { margin: -4px 0; }
.hint { margin: 4px 0 0; font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--mist); }
.check-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; cursor: pointer; }
.check-row input { margin-top: 3px; width: 16px; height: 16px; flex: none; accent-color: var(--beam); }
.form-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }
.form-actions .btn, .form-actions button { min-height: 44px; }
.alert.ok { border-color: rgba(61, 155, 116, .35); color: var(--ink); background: var(--pos-soft); }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: rgba(0, 26, 46, .18); font-size: var(--text-label); font-weight: 600; }
.btn:not(.primary) .badge { background: var(--neg-soft); color: var(--neg); }

/* Setup flow stepper */
.stepper { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); counter-reset: step; }
.stepper .step { display: flex; align-items: center; gap: 6px; color: var(--mist); font-size: var(--text-xs); min-width: 0; }
.stepper .step .l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepper .step .n { width: 18px; height: 18px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); font-size: var(--text-micro); font-weight: 600; }
.stepper .step.current { color: var(--foam); font-weight: 500; }
.stepper .step.current .n { background: var(--beam); color: var(--navy); border-color: transparent; }
.stepper .step.done { color: var(--ink); }
.stepper .step.done .n { background: var(--pos-soft); color: var(--pos); border-color: transparent; }

/* Wider onboarding canvas for the profile + terms steps */
.auth.wide .auth-card { max-width: 920px; }
.auth .setup-card { padding: 28px 32px; }
.auth .setup-card h1 { font-size: 40px; line-height: 46px; margin: 0 0 var(--space-3); }
/* Step 1: one question on a narrow centered card, Paro above it, Skip a plain link under the button. */
.auth.wide .auth-card:has(> [data-setup="website"]) { max-width: 520px; }
[data-setup="website"] > .chunk { display: block; margin: 0 auto var(--space-3); }
[data-setup="website"] > h1, [data-setup="website"] > p.muted { text-align: center; }
.setup-skip { margin: var(--space-3) 0 0; text-align: center; font-size: var(--text-sm); }
.auth .setup-skip a { color: var(--mist); }
.setup-more { margin: var(--space-3) 0 var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.setup-more > summary { cursor: pointer; font-size: var(--text-sm); font-weight: 500; color: var(--mist); }
.setup-more[open] > summary { margin-bottom: var(--space-2); }
.auth .setup-card .card { padding: var(--space-4); }
.setup-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
/* Paste your links: setup step 3, Settings → Brand profile. */
.link-fields { display: grid; gap: var(--space-4); margin: var(--space-4) 0; min-width: 0; }
.link-socials { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); min-width: 0; }
.link-field { min-width: 0; }
.link-field label { display: block; margin-bottom: var(--space-1); font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
.link-field .hint { margin: 0 0 var(--space-2); }
.link-field input, .link-field textarea { width: 100%; }
.link-results { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-2); min-width: 0; }
.link-results:empty { display: none; }
.link-results li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-width: 0; font-size: var(--text-xs); color: var(--mist); }
.link-results .link-name { min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.link-results .link-note { flex-basis: 100%; }
.auth .form-actions button.primary { width: auto; margin-top: 0; padding: 0 22px; background: var(--beam); color: var(--navy); font-weight: 600; }
.auth .form-actions button.primary:hover { filter: brightness(1.05); background: var(--beam); }
.auth .form-actions .btn { height: 44px; }
.auth textarea, .auth textarea.input { height: auto; min-height: 72px; padding: 8px 12px; line-height: 20px; }
.auth .profile-summary { margin: var(--space-4) 0; }
.auth .term-review { margin-top: var(--space-4); }
.auth .term-review .t { display: block; overflow-x: auto; }

/* Generated brand profile (summary) */
.profile-summary { display: flex; flex-direction: column; gap: var(--space-3); background: linear-gradient(165deg, rgba(14, 39, 64, .7), rgba(10, 30, 48, .95)); }
.ps-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.ps-head .grow { flex: 1; min-width: 0; }
.ps-kicker { text-transform: uppercase; letter-spacing: .08em; font-weight: 600; font-size: var(--text-label); }
.ps-name { margin: 2px 0 2px; font-size: var(--text-lg); line-height: 26px; font-weight: 600; color: var(--foam); letter-spacing: -0.02em; }
.ps-industry { margin: 0; color: var(--ink); }
.ps-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px var(--space-5); }
.ps-row { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); min-width: 0; }
.ps-row dt { font-size: var(--text-xs); color: var(--mist); font-weight: 500; }
.ps-row dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ps-row dd .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ps-row[data-ps="negative"] { grid-column: 1 / -1; }

/* Grouped profile editor */
.brand-profile.panel .profile-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.profile-group { margin: 0; min-width: 0; }
.profile-group legend { float: left; width: 100%; padding: 0; margin: 0 0 2px; font-size: var(--text-md); font-weight: 600; color: var(--foam); }
.profile-group legend + * { clear: both; }
.profile-group label.field:first-of-type { margin-top: 10px; }
.profile-page .profile-summary { margin-bottom: var(--space-2); }

/* Mentions: per-brand sentiment card */
/* Full Mentions width (no reading measure); the mix bar stretches the body across it. */
.sc-bar { height: 6px; width: 100%; }
/* Mentions toolbar: Export CSV + Brand brief sit as one group just left of Latest | Urgent, so they never drop under the filter chips. */
.feed-actions { display: flex; gap: 8px; flex: none; white-space: nowrap; }
.beam .count.hot { color: var(--neg); font-weight: 600; }

/* Needs review */
.review-done { display: flex; align-items: center; gap: 10px; }
.review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.review-item { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.ri-meta { display: flex; align-items: center; gap: 10px; }
.ri-meta .grow { flex: 1; min-width: 0; }
.ri-who { font-weight: 500; color: var(--foam); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ri-title { margin: 0; font-weight: 600; }
.ri-body { margin: 0; font-size: var(--text-md); line-height: 22px; overflow-wrap: anywhere; }
.ri-why { margin: 0; padding: 8px 10px; border-radius: var(--r-md); background: var(--navy-wash); border: 1px solid var(--line); color: var(--ink); display: flex; gap: 8px; flex-wrap: wrap; }
.ri-why-k { color: var(--mist); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: var(--text-label); }
.ri-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin: 0; }
.ri-actions .input { flex: 1; min-width: 220px; min-height: 40px; }
.ri-buttons { display: flex; gap: var(--space-2); }
.ri-buttons .btn { height: 40px; padding: 0 16px; }
.ri-done { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Opportunity Sniper */
.op-queue .opportunity + .opportunity { margin-top: var(--space-3); }
.opportunity .op-head { margin-bottom: 8px; flex-wrap: wrap; gap: 6px; }
.opportunity .op-title { margin: 0 0 6px; font-weight: 600; font-size: var(--text-md); line-height: 22px; }
.opportunity .op-excerpt { margin: 0 0 8px; overflow-wrap: anywhere; }
.opportunity .op-why { margin-bottom: 6px; }
.opportunity .op-why ul { margin: 6px 0 0; padding-left: 18px; }

/* AI visibility: not run */
/* "Not run yet" is a status, not a metric: Sora (Fraunces stays wordmark + Brief H1 only). */
.score-head .not-run-title { font-family: var(--font-ui); font-size: var(--metric); line-height: 34px; letter-spacing: -0.02em; white-space: nowrap; }

/* ===================================================================
   Polish: labeled sidebar, loading, compact empties, spacing, mobile.
   =================================================================== */

/* Stacked pages: segmented controls keep their natural width; one rhythm between head and body. */
.stack > .seg, .stack > nav.seg { align-self: flex-start; max-width: 100%; }
.stack > .page-head { margin-bottom: var(--space-1); }
.page-head .btn { flex: none; }
/* One gold action per head: a second primary reads as a plain button. */

/* Busy buttons (public/forms.js): label swap + a small ring in currentColor (never gold on its own). */
.btn.is-busy, button.is-busy { cursor: progress; opacity: .85; }
.btn.is-busy::before, button.is-busy::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%; flex: none; display: inline-block; margin-right: 8px; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent; animation: busy-spin .7s linear infinite;
}
form[aria-busy="true"] .input, form[aria-busy="true"] textarea { opacity: .8; }
@keyframes busy-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-busy::before, button.is-busy::before { animation: none; } }

/* Compact empty state inside a card */
.empty-inline { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: var(--mist); font-size: var(--text-sm); line-height: var(--lh-sm); }
.empty-inline p { margin: 0; }
.empty { padding: 0 16px; }
/* EmptyHint (P1-FR2, 2026-10-31) */
.empty-hint { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 480px; margin: 12vh auto 0; padding: 0 16px; gap: 12px; }
.empty-hint-icon { color: var(--mist-2, var(--mist)); opacity: 0.85; }
.empty-hint-text { margin: 0; font-size: var(--t-body); line-height: 1.5; color: var(--mist); }
.card .empty-hint { margin: 24px auto; }
.empty-hint-action { font-size: var(--text-sm); color: var(--ink); text-decoration: none; text-underline-offset: 2px; }
.empty-hint-action:hover { text-decoration: underline; }
.empty-hint-title { margin: 0; font-size: var(--text-2xl); line-height: 28px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); }
.empty-hint form { margin: 0; }
/* An empty page centres its one message in the space left, so no dead band sits under it. */
.page:has(> .empty-hint, > .empty) { display: flex; flex-direction: column; }
.page > .empty-hint, .page > .empty { width: 100%; margin-block: auto; }
/* Full-page empties are a Paro moment: one centred Paro, one message, one gold action, filling the pane. */
.empty-hint.is-paro, .compare-page .empty-hint.is-paro { justify-content: center; gap: 8px; width: 100%; min-height: var(--empty-pane); margin: 0 auto; padding: var(--space-5) 16px; }
.is-paro .chunk { width: 112px; height: 112px; margin-bottom: 8px; }
.is-paro .empty-hint-title { font-family: var(--font-serif); font-weight: 400; font-size: var(--metric); line-height: 34px; letter-spacing: 0; }
.is-paro .empty-hint-text { max-width: 44ch; }
.is-paro .btn, .empty .btn.primary, .radar-gate .btn.primary { height: 44px; margin-top: 8px; padding: 0 28px; font-size: var(--t-body); }
/* Empty, first-run and success moments use navy Paro on both themes (the dark default is otherwise the
   white art). The eye stays as drawn. */
:is(.empty, .is-paro, .radar-gate, .first-run, [data-setup], .site-note) img.chunk[data-chunk="sleepy"] { content: url(/brand/expressions/sleepy-full.svg); }
:is(.empty, .is-paro, .radar-gate, .first-run, [data-setup], .site-note) img.chunk[data-chunk="curious"] { content: url(/brand/expressions/curious-full.svg); }
:is(.empty, .is-paro, .radar-gate, .first-run, [data-setup], .site-note) img.chunk[data-chunk="concerned"] { content: url(/brand/expressions/concerned-full.svg); }
:is(.empty, .is-paro, .radar-gate, .first-run, [data-setup], .site-note) img.chunk[data-chunk="wink"] { content: url(/brand/expressions/wink-full.svg); }
:is(.empty, .is-paro, .radar-gate, .first-run, [data-setup], .site-note) img.chunk[data-chunk="happy"] { content: url(/brand/expressions/happy-full.svg); }
/* Inside a card it is one block among others: a smaller Paro, and the page's gold stays elsewhere. */
.card .empty-hint.is-paro { min-height: 0; padding: 0 16px; }
.card .is-paro .chunk { width: 64px; height: 64px; margin-bottom: 0; }
.card .is-paro .empty-hint-title { font-family: var(--font-ui); font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: 600; }
.card .is-paro .btn.primary { height: 36px; padding: 0 14px; background: none; color: var(--ink); border-color: var(--line-strong); box-shadow: none; font-size: var(--text-sm); }

/* Tablet: two-column profile editor collapses before the sidebar does. */
@media (max-width: 1100px) {
  .brand-profile.panel .profile-groups { grid-template-columns: 1fr; }
}

/* ---------- Mobile (≤760px): bottom tab bar, stacked content, 44px targets ---------- */
@media (max-width: 760px) {
  .app, .app.with-beams { display: block; background: none; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .rail {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: calc(60px + env(safe-area-inset-bottom)); z-index: 40;
    flex-direction: row; align-items: center; justify-content: space-around; gap: 0;
    padding: 4px 4px env(safe-area-inset-bottom); border-top: 1px solid var(--line-strong);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .35);
  }
  .rail-mark, .rail-plan, .rail-spacer, .rail-help, .rail-toggle { display: none; }
  .rail-group, .rail-group + .rail-group, .rail-group-bottom { display: contents; margin: 0; }
  .rail-item { flex: 1 1 0; min-width: 44px; height: 52px; padding: 0; justify-content: center; flex-direction: column; gap: 3px; }
  .rail-item .tip, .rail-item .tip.lbl { font-size: 9.5px; line-height: 12px; max-width: 100%; padding: 0 2px; }
  .rail-item[aria-current="page"]::before { left: 50%; top: -4px; bottom: auto; width: 22px; height: 3px; transform: translateX(-50%); }
  .beam-rail { display: none; }
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar h1 { font-size: var(--text-lg); }
  .topbar .crumb, .topbar .brief-time { display: none; }
  .topbar .search { flex: 1 1 auto; min-width: 0; }
  .alerts-bell .alerts-menu { position: fixed; left: 8px; right: 8px; top: 52px; min-width: 0; max-width: none; }
  .cap-banner { margin: 8px 12px 0; }
  .page { padding: var(--space-4) var(--space-3) var(--space-5); }
  .page-head { flex-direction: column; align-items: stretch; gap: var(--space-3); margin-bottom: var(--space-4); }
  .page-head .btn { align-self: flex-start; }
  .grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .grid > [class*="span-"] { grid-column: 1 / -1; }
  .seg, .tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }
  .seg a, .seg span { flex: none; height: 36px; }
  .filter-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -12px; padding-right: 12px; }
  .filter-row::-webkit-scrollbar { display: none; }
  .filter-row .chip { flex: none; height: 32px; }
  .feed-controls { gap: 8px; }
  .feed-controls > span[style*="flex:1"] { display: none; }
  .row, .card-head { flex-wrap: wrap; }
  .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .rail-item .lbl[data-short] { font-size: 0; }
  .rail-item .lbl[data-short]::after { content: attr(data-short); font-size: var(--text-micro); line-height: 12px; }
  .btn { height: 40px; }
  .btn.primary, button.primary, .form-actions .btn, .form-actions button { min-height: 44px; }
  .btn.sm { height: 36px; }
  .card { padding: 14px; }
  .kpi { min-height: 0; padding: 14px; }
  .mention { padding: 12px; }
  .mention .r4 .actions { margin-left: 0; }
  /* Mentions row: Open, the ⋯ menu and every pick inside it are ≥44px to tap.
     .btn.text (28px) and .btn.sm (36px) out-rank the mobile .btn height, so set them here. */
  .mention .btn, .mention .btn.text, .mention .btn.sm { height: auto; min-height: 44px; }
  .mention .more-btn { min-width: 44px; }
  .more-menu .btn, .more-menu .more-tags .input { min-height: 44px; }
  table.t th, table.t td { padding: 8px; }
  .bar-row { grid-template-columns: 88px minmax(0, 1fr) 44px; gap: 8px; }
  .voices li { grid-template-columns: 18px minmax(0, 1fr) auto; }
  .voices li > :nth-child(2), .voices li > :nth-child(5) { display: none; }
  .brief-mid { grid-template-columns: 1fr; }
  .brief-report { padding: var(--space-4); }
  .brief-report h2.report-title { font-size: 32px; line-height: 38px; }
  .mkpis { grid-template-columns: minmax(0, 1fr); }
  .mkpi { padding: var(--space-4); }
  .score-head { flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: 16px; }
  .score-num { font-size: 48px; line-height: 52px; }
  .empty { margin: 32px auto; }
  /* Product screens */
  .review-item { padding: 14px; }
  .ri-actions .input { min-width: 100%; }
  .ri-buttons { width: 100%; }
  .ri-buttons .btn { flex: 1; height: 44px; }
  .ps-head { flex-direction: column; }
  .ps-facts { grid-template-columns: minmax(0, 1fr); }
  .opportunity .op-head .grow { display: none; }
  /* Onboarding canvas */
  .auth { padding: 20px 12px 32px; place-items: start center; }
  .auth .card { padding: var(--space-5) var(--space-4); }
  .auth .setup-card { padding: 18px 14px; }
  .auth .setup-card h1 { font-size: 32px; line-height: 38px; }
  .setup-two { grid-template-columns: 1fr; }
  .link-socials { grid-template-columns: 1fr; }
  .stepper { gap: var(--space-2); }
  .stepper .step:not(.current) .l { display: none; }
  .auth .form-actions { flex-direction: column; align-items: stretch; }
  .auth .form-actions button.primary, .auth .form-actions .btn { width: 100%; }
}

/* Onboarding: website read note + step 4 Start listening */
.site-note { display: flex; align-items: center; gap: 10px; }
.listen-head { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-4); }
.listen-head h1 { margin-top: 4px; }
.listen-plan { margin: 0; }
.listen-plan h2 { margin: 0 0 8px; font-weight: 600; color: var(--foam); }
.listen-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3); margin: 0; font-size: var(--text-sm); color: var(--mist); }
.listen-names { display: inline-flex; flex-wrap: wrap; gap: 4px var(--space-2); }
.listen-names:empty { display: none; }
.listen-source { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); }
.listen-source[data-state="checking"] { opacity: .65; }
.listen-source .glyph { width: 14px; height: 14px; border: 0; background: none; }
.listen-source .glyph svg { width: 14px; height: 14px; }
.auth .form-actions a.btn.primary { background: var(--beam); color: var(--navy); padding: 0 22px; height: 44px; }
/* One-step setup: editable chips (review) + live first results (listen) */
.chip-field { border: 0; margin: var(--space-3) 0 var(--space-4); padding: 0; min-width: 0; }
.chip-field legend { padding: 0; margin-bottom: 6px; font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
.chip-field .hint { margin: -2px 0 8px; }
.chip-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; min-height: 44px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: rgba(0, 12, 24, .35); }
.chip-list:focus-within { border-color: var(--teal-bright); }
.chip.edit { height: 30px; padding: 0 4px 0 10px; color: var(--ink); background: var(--surf3); border-color: var(--line-strong); max-width: 100%; }
.chip.edit label { display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; font: inherit; color: inherit; min-width: 0; }
.chip.edit label span { overflow: hidden; text-overflow: ellipsis; }
.chip.edit input[type="checkbox"] { width: 14px; height: 14px; margin: 0; accent-color: var(--beam); }
.chip.edit:has(input:not(:checked)) { opacity: .55; }
.chip-x { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--mist); font-size: var(--t-body-lg); line-height: 1; cursor: pointer; }
.chip-x:hover, .chip-x:focus-visible { background: var(--navy-hover); color: var(--ink); }
.chip-list:has(.chip-x:not([hidden])) .chip.edit input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.auth .chip-list .chip-add, .chip-list .chip-add { flex: 1; width: auto; min-width: 120px; height: 30px; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--ink); font: inherit; font-size: var(--text-sm); padding: 0 4px; outline: none; }
.market-picker { margin-top: var(--space-4); }
.market-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.market-field legend { padding: 0; margin-bottom: var(--space-1); font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
.market-field .hint { margin: 0 0 var(--space-3); }
.market-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.market-option, .auth .market-option { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; min-width: 0; margin: 0; padding: var(--space-1) var(--space-3); border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--text-sm); font-weight: 500; color: var(--ink); cursor: pointer; transition: border-color var(--dur-1) var(--ease-out); }
.market-option:hover { border-color: var(--line-strong); }
.market-option:has(input:checked) { border-color: var(--teal-bright); }
.market-option input, .auth .market-option input { flex: none; width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--teal-bright); }
.market-worldwide { grid-column: 1 / -1; }
@media (max-width: 760px) { .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .market-option, .auth .market-option { transition: none; } }
.listen-results { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.listen-results:empty { display: none; }
.listen-results li { display: flex; align-items: baseline; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--text-sm); min-width: 0; overflow-wrap: anywhere; }
.listen-results li .chip { flex: none; }
.listen-results li.is-new { animation: listen-in .4s ease-out; }
.listen-pulse { display: inline-block; width: 8px; height: 8px; margin-left: 10px; border-radius: 50%; background: var(--beam); vertical-align: middle; animation: listen-pulse 1.4s ease-in-out infinite; }
@keyframes listen-pulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@keyframes listen-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .listen-pulse, .listen-results li.is-new { animation: none; } }
@media (max-width: 760px) {
  .listen-head { flex-direction: column; gap: var(--space-2); }
  .listen-head .chunk { width: 48px; height: 48px; }
  .chip.edit { height: 36px; }
  .chip-x { width: 32px; height: 32px; }
}

/* Alerts → Channels, Slack incoming webhook, outgoing webhooks */
.channel-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.channel-list li { display: grid; grid-template-columns: 72px auto minmax(0, 1fr); align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid var(--line); }
.channel-list li:last-child { border-bottom: 0; }
.channel-list .ch-name { font-weight: 600; font-size: var(--text-sm); color: var(--foam); }
.channel-pref { margin: 0; }
.slack-current { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.slack-form { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin: 0; }
.slack-form .input { flex: 1; min-width: 240px; min-height: 40px; }
.slack-form .btn { height: 40px; }
.hook-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hook-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hook-list .grow { flex: 1; }
.slack-log { margin-top: var(--space-4); }
.slack-log ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.slack-log li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.slack-log li:last-child { border-bottom: 0; }
.slack-log-title { font-size: var(--text-sm); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slack-log-meta { grid-column: 1 / -1; }
.slack-log-tries { display: inline-flex; align-items: center; }
.payload-preview { margin-top: var(--space-3); }
.payload-preview summary { cursor: pointer; }
.payload-preview pre { margin: 8px 0 0; padding: 10px 12px; border-radius: var(--r-md); background: rgba(0, 12, 24, .55); border: 1px solid var(--line); font-size: var(--text-xs); line-height: 18px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
@media (max-width: 760px) {
  .channel-list li { grid-template-columns: 64px auto; padding: 8px 0; }
  .channel-list .ch-note { grid-column: 1 / -1; }
  .slack-form .input { min-width: 100%; }
  .slack-log li { grid-template-columns: auto minmax(0, 1fr); }
  .slack-log-title { grid-column: 1 / -1; grid-row: 2; white-space: normal; overflow-wrap: anywhere; }
  .slack-log-tries { justify-self: end; }
  .slack-form .btn { height: 44px; }
}
/* Setup flow buttons: gold primary (not the navy login button), secondary buttons keep their width. */
.auth .setup-card button.primary { background: var(--beam); color: var(--navy); font-weight: 600; height: 44px; }
.auth .setup-card button.primary:hover { background: var(--beam); filter: brightness(1.05); }
.auth .form-actions .btn { width: auto; margin-top: 0; }

/* ===================================================================
   Full Sniper + AI visibility pages (Capitalio rhythm on Chunk).
   Same head → KPI row → filters → list pattern as Mentions / Needs review.
   =================================================================== */
/* AI visibility */
.ai-sec { margin-top: var(--space-5); }
.ai-head { margin-bottom: var(--space-2); }
.ai-head .page-title .sample-pill { vertical-align: 3px; margin-left: 6px; }
.ai-meta { margin: 6px 0 0; color: var(--mist); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.ai-meta strong { color: var(--ink); font-weight: 500; }
.ai-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--mist); margin: 0 6px; }
.ai-cadence { margin: 0 0 var(--space-4); max-width: 760px; }
.day-picker.is-empty .wk { color: var(--mist); }
.sniper-kpis .kpi .metric small { font-size: var(--text-md); font-weight: 500; color: var(--mist); margin-left: 2px; }
.kpi-prog { position: relative; height: 6px; border-radius: var(--r-pill); background: var(--line); margin: 4px 0 2px; }
.kpi-prog .f { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--beam); }
.kpi-prog .m { position: absolute; top: -3px; width: 2px; height: 12px; border-radius: 1px; background: var(--ink); }
.kpi .foot .wow { font-size: var(--text-xs); }
.pq { display: inline-flex; align-items: baseline; gap: 10px; }
.pq i { font-style: normal; color: var(--mist); font-size: var(--text-xs); min-width: 18px; }
.cov { display: inline-flex; align-items: center; gap: 6px; }
.cov .b { display: inline-flex; gap: 2px; }
.cov .b i { width: 7px; height: 12px; border-radius: 2px; background: var(--line-strong); }
.cov .b i.on { background: var(--ink); }
.cov.full .b i.on { background: var(--ink); }
.cov b { font-weight: 600; font-size: var(--text-xs); }
[data-ai-citations] .filter-row { margin: 0 0 10px; }

/* Opportunity Sniper: queue + aside */
.op-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-4); align-items: start; margin-bottom: var(--space-4); }
.op-main, .op-aside { min-width: 0; }
.op-aside { display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: var(--space-4); }
.op-filters { padding: 14px 16px 10px; margin-bottom: var(--space-3); }
.op-filters .filter-row { margin: 0 0 8px; }
.op-results { margin: 6px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }
.op-results strong { color: var(--ink); }
.op-how .card-head { gap: 8px; }
.op-how ul { margin: 0 0 10px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }

/* AI citation queue (/sniper) */
.sniper-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.sniper-item { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; box-shadow: none; }
.sniper-item.is-new { border-color: var(--line-strong); box-shadow: inset 3px 0 0 var(--mist); }
.si-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.si-head .grow { flex: 1; min-width: 0; }
.si-glyph { width: 32px; height: 32px; font-size: var(--text-label); }
.si-domain { font-weight: 600; color: var(--foam); overflow-wrap: anywhere; }
.si-facts { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-3); padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.si-facts > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.si-facts .label { color: var(--mist); font-size: var(--text-xs); font-weight: 500; }
.si-gaps { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.si-pack { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; color: var(--mist); }
.sniper-draft { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
.sniper-draft .sd-excerpt { margin: 0; overflow-wrap: anywhere; }
.sniper-draft .reply-draft { margin: 0; }

@media (max-width: 1100px) {
  /* minmax(0, …): a bare 1fr floors at min-content, so the nowrap filter chips widened the page. */
  .op-layout { grid-template-columns: minmax(0, 1fr); }
  .op-aside { position: static; }
}
@media (max-width: 760px) {
  .si-facts { grid-template-columns: 1fr 1fr; }
  .si-facts > div:first-child { grid-column: 1 / -1; }
}

/* Compact mobile plan cap banner: one short strip, not half the first screen. The reason keeps 2
   lines; role=alert stays on the markup. The notice line lives in premium.css (AppNoticeStack). */
@media (max-width: 760px) {
  .cap-banner {
    margin: 6px 8px 0; padding: 6px 10px; gap: 8px; flex-wrap: nowrap; max-height: 56px; overflow: hidden;
    border-left-width: 3px; font-size: var(--text-xs); line-height: var(--lh-xs);
  }
  .cap-banner .t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cap-banner .btn { flex: none; height: 32px; min-height: 32px; padding: 0 10px; font-size: var(--text-xs); }
}

/* Opportunity Sniper · Reddit threads (views/sniper-reddit.ts): the same two editable drafts as a lead. */
.sniper-thread [data-promo-rule] { margin: 4px 0 6px; }
@media (max-width: 640px) { .sniper-thread .btn.sm, .sniper-thread .btn.text { min-height: 44px; } }
[data-sniper-queue] .sniper-thread + .sniper-thread { margin-top: var(--space-3); }

/* Brand Shield (Alerts → Brand Shield): risk chips, list, one item, copy report. */
.chip.warn { background: rgba(224, 138, 46, 0.16); color: var(--ember); border-color: transparent; }
/* Protect calm (P1-2): Mentions' column, hairlines over boxes, mist chips. A flat section keeps .card: alerts.js reads it. */
.protect-page { width: 100%; max-width: 760px; margin-inline: auto; }
.protect-page .protect-eyebrow { margin: 0; color: var(--mist); font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.card.protect-flat { padding: 0; background: none; border: 0; box-shadow: none; }
.protect-page .empty-hint { margin: 24px auto; }
/* --neg alone is 3.6:1 on the dark card; the Foam mix reaches 5.5:1 at chip size. */
.risk-chip { border-color: var(--line-strong); }
.risk-chip.high { color: color-mix(in srgb, var(--neg) 70%, var(--foam)); }
[data-theme="light"] .risk-chip.high { color: var(--neg); }
.shield-item-head .chip.neg, .shield-item-head .chip.pos { background: none; border-color: var(--line-strong); }
.protect-advanced { border-top: 1px solid var(--line); padding-top: var(--space-3); }
.protect-advanced > summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-height: 32px; cursor: pointer; list-style: none; }
.protect-advanced > summary::-webkit-details-marker { display: none; }
.protect-advanced > summary::before { content: "›"; color: var(--mist); transition: transform .15s; }
.protect-advanced[open] > summary::before { transform: rotate(90deg); }
.protect-advanced > .card { margin-top: var(--space-4); }
.alerts-tabs { align-self: flex-start; }
.shield-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.shield-item { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.shield-item:last-child { border-bottom: 0; }
.shield-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shield-item-head .grow { flex: 1; }
.shield-reason { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; text-decoration: none; }
.shield-reason:hover { text-decoration: underline; }
.shield-target { font-weight: 600; }
.shield-excerpt { margin: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shield-card { display: flex; flex-direction: column; gap: 12px; }
.shield-title { margin: 0; font-size: var(--text-lg, 20px); overflow-wrap: anywhere; }
.shield-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 20px; }
.shield-facts dt { color: var(--mist); font-size: var(--text-label, 11px); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.shield-facts dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.shield-quote { margin: 0; padding: 10px 12px; border-left: 3px solid var(--line-strong, var(--line)); background: var(--navy-wash); border-radius: var(--r-md); overflow-wrap: anywhere; }
.shield-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: 0; }
.shield-report summary { cursor: pointer; list-style: none; }
.shield-report summary::-webkit-details-marker { display: none; }
.shield-report summary h2 { display: inline; margin: 0; }
.shield-report-text { width: 100%; min-height: 220px; font-family: var(--font-code); font-size: var(--text-xs); line-height: 19px; white-space: pre-wrap; margin-top: 8px; }
@media (max-width: 760px) {
  .shield-actions .btn { flex: 1 1 100%; justify-content: center; }
  .shield-item-head .xs { flex-basis: 100%; }
  .protect-page .page-head .chip, .protect-page .page-head .sample-pill, .channel-list .chip { align-self: flex-start; justify-self: start; }
}

/* Spike alerts (Alerts → Spikes): card with sparkline, cause, top posts, actions. */
.spike-list { display: flex; flex-direction: column; }
.spike-card { display: flex; flex-direction: column; gap: 12px; }
.spike-list .spike-card { padding: var(--space-4) 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.spike-list .spike-card:last-child { border-bottom: 0; }
.spike-card .shield-title a { color: var(--ink); text-decoration: none; }
.spike-card .shield-title a:hover { text-decoration: underline; }
.spike-numbers { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.spike-spark { flex: none; overflow: visible; }
.spike-spark .spark-line { fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.spike-spark .spark-base { stroke: var(--mist); stroke-width: 1; stroke-dasharray: 3 3; }
.spike-spark .spark-now { fill: var(--ember); }
.spike-card[data-severity="high"] .spark-now { fill: var(--neg); }
.spike-facts { margin: 0; display: flex; gap: 24px; }
.spike-facts dt { color: var(--mist); font-size: var(--text-label, 11px); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.spike-facts dd { margin: 2px 0 0; font-size: var(--text-2xl); font-weight: 600; }
.spike-facts .spike-now { font-size: var(--metric); line-height: var(--lh-metric); font-weight: 700; letter-spacing: -0.02em; }
/* One spike on the page: the last-24h count is its number. */
.spike-card:has(h1.shield-title) .spike-now { font-size: var(--metric-lead); line-height: var(--lh-metric-lead); }
/* A list of spikes keeps one gold action: the first open card's. */
.spike-h { margin: 0 0 4px; font-size: var(--text-label, 11px); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--mist); }
.spike-summary { margin: 0; overflow-wrap: anywhere; }
.spike-posts { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.spike-posts li { overflow-wrap: anywhere; }
.spike-posts li .xs { display: block; }
.spike-brief summary .btn { pointer-events: none; }
@media (max-width: 760px) {
  .spike-actions, .spike-actions form { width: 100%; }
  .spike-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* Opportunity Sniper reply-draft meter (views/sniper-reddit.ts draftMeterCard). */
.draft-meter { padding: 12px 16px; margin: 0 0 var(--space-3); }
.draft-meter .dm-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.draft-meter .dm-bar { height: 6px; margin-top: 8px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.draft-meter .dm-bar span { display: block; height: 100%; background: var(--teal); }
.draft-meter[data-state="warn"] .dm-bar span { background: var(--ember); }
.draft-meter[data-state="blocked"] .dm-bar span { background: var(--neg); }
.draft-meter .alert { margin-top: 10px; }
.alert.warn { border-color: rgba(224, 138, 46, .45); color: var(--ink); background: rgba(224, 138, 46, .12); }
.draft-meter .dm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; color: var(--ink); }
.sniper-thread .thread-actions { gap: 8px; }
@media (max-width: 640px) { .draft-meter .btn.sm { min-height: 44px; } }

/* Compare pages (/radar, /sniper): one 960px column under a quiet eyebrow. */
.compare-page { width: 100%; max-width: 960px; margin-inline: auto; }
.compare-page > .page-head { margin-bottom: var(--space-5); }
.compare-page > .ai-sec + .ai-sec { margin-top: var(--space-5); }
.compare-page .card-lede { margin: 0 0 var(--space-3); }
.compare-page .empty-hint { margin: var(--space-4) auto; }
.compare-page > .empty-hint { margin-top: 12vh; }
.sniper-queue-page { gap: var(--space-5); }
.sniper-queue-page > .page-head { margin-bottom: 0; }

/* Competitor radar */
.card.radar-gate { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: var(--empty-pane); padding: var(--space-5) 16px; border: 0; background: none; box-shadow: none; text-align: center; }
.radar-gate strong { font-family: var(--font-serif); font-weight: 400; font-size: var(--metric); line-height: 34px; color: var(--ink); }
.page:has(> .compare-page > .radar-gate), .compare-page:has(> .radar-gate) { display: flex; flex-direction: column; }
.compare-page:has(> .radar-gate) { flex: 1; }
.compare-page:has(> .radar-gate) > .page-head { margin-bottom: 0; }
.radar-t th { white-space: nowrap; }
.radar-cell { display: grid; gap: 4px; min-width: 140px; }
.radar-cell .bars { margin: 0; }
.radar-cell .bar-row { grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; }
.radar-cell .bar-row .name { display: none; }
.radar-mix { margin: 0; }
.radar-hit { display: inline-flex; align-items: center; gap: 6px; }
.radar-prompts td:first-child { min-width: 220px; }
.radar-signals, .radar-comps { list-style: none; margin: 0; padding: 0; }
.radar-signal { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.radar-signal:first-child { border-top: 0; }
.radar-signal .btn { justify-self: start; }
.radar-comps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-3); }
.radar-comp { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); }
.radar-add .input { flex: 1 1 220px; min-width: 0; }
.radar-cap { justify-content: space-between; gap: 8px; }
.radar-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.radar-pack { display: grid; gap: 8px; align-content: start; padding: 12px; }
.radar-pack ul { margin: 0; padding-left: 16px; }
.radar-pack form { align-self: end; }
.radar-edit { margin-top: 12px; }
@media (max-width: 760px) {
  .radar-t, .radar-t tbody, .radar-t tr, .radar-t td { display: block; width: 100%; }
  .radar-t thead { display: none; }
  .radar-t tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .radar-t tbody tr:last-child { border-bottom: 0; }
  table.t.radar-t td { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: auto; padding: 6px 0; border: 0; text-align: right; }
  .radar-t td::before { content: attr(data-label); color: var(--mist); font-size: var(--text-xs); text-align: left; flex: none; max-width: 45%; }
  .radar-t.radar-prompts td:first-child { display: block; text-align: left; font-weight: 500; min-width: 0; }
  .radar-t.radar-prompts td:first-child::before { content: none; }
  .radar-cell { min-width: 0; flex: 1 1 auto; max-width: 60%; justify-items: end; }
  .radar-cell .bars { width: 100%; }
  .radar-comp { flex-wrap: wrap; max-width: 100%; border-radius: var(--r-lg); }
  .radar-comp .btn, .radar-add .btn, .radar-pack .btn, .radar-cap .btn, .radar-signal .btn, .radar-gate .btn { min-height: 44px; }
}

/* First-run checklist (P1-FR1, 2026-10-31) */

.first-run { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2, var(--surface)); padding: 14px 16px 8px; margin: 0 0 20px; max-width: 720px; }
.first-run-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.first-run-copy { flex: 1; min-width: 0; }
.first-run-eyebrow { margin: 0; font-size: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mist-2, var(--mist)); }
.first-run-title { margin: 2px 0 0; font-family: var(--font-serif, Instrument Serif, Georgia, serif); font-weight: 400; font-size: var(--text-2xl); line-height: 1.25; color: var(--foam, var(--ink)); }
.first-run-progress { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.first-run-count { font-size: var(--text-xs); color: var(--mist); white-space: nowrap; }
.first-run-bar { display: flex; gap: 3px; width: 72px; height: 4px; }
.first-run-seg { flex: 1; border-radius: 2px; background: var(--foam); opacity: 0.35; }
.first-run-seg[data-on="true"] { background: var(--ink); opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .first-run-seg[data-on="true"] { transition: flex-grow 200ms ease-out, opacity 200ms ease-out; }
}
.first-run-close { width: 32px; height: 32px; border: 0; background: transparent; color: var(--mist); border-radius: 8px; cursor: pointer; font-size: var(--text-lg); line-height: 1; }
.first-run-close:hover { background: var(--surface-3, rgba(255,255,255,0.06)); color: var(--ink); }
.first-run-list { list-style: none; margin: 0; padding: 0; }
.first-run-row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 0; border-top: 1px solid var(--line); }
.first-run-row:first-child { border-top: 0; }
.first-run-check { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--mist-2, var(--mist)); flex: 0 0 auto; display: grid; place-items: center; }
.first-run-row[data-done="true"] .first-run-check { background: var(--navy); border-color: var(--navy); color: var(--white); }
.first-run-row[data-done="true"] .first-run-label { color: var(--mist); }
.first-run-text { flex: 1; min-width: 0; }
.first-run-label { display: block; font-size: var(--text-md); line-height: 1.3; margin: 0; color: var(--ink); text-decoration: none; }
a.first-run-label:hover { text-decoration: underline; }
.first-run-helper { margin: 2px 0 0; font-size: var(--text-xs); line-height: 1.35; color: var(--mist); }
.first-run-done { display: flex; align-items: center; gap: 14px; padding: 8px 0 12px; }
.first-run-done p { margin: 0; font-size: var(--text-md); color: var(--mist); }

/* ---------- Guided tooltips: hover hints + coach marks (views/tooltips.ts, public/tooltips.js) ---------- */
:root {
  --gtip-bg: var(--navy); --gtip-fg: var(--foam);
  --gtip-shadow: 0 4px 16px rgba(0, 26, 46, .18);
  --gtip-width: 240px; --gtip-radius: 8px; --gtip-arrow-size: 6px;
}
.gtip {
  position: fixed; left: 0; top: 0; z-index: 60; box-sizing: border-box; max-width: var(--gtip-width); padding: 8px 12px;
  border-radius: var(--gtip-radius); background: var(--gtip-bg); color: var(--gtip-fg); box-shadow: var(--gtip-shadow);
  font: 500 var(--text-xs)/1.45 var(--font-ui); opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s;
}
.gtip[hidden] { display: none; }
.gtip.is-on { opacity: 1; transform: none; }
.gtip-arrow { position: absolute; width: 0; height: 0; border: var(--gtip-arrow-size) solid transparent; }
.gtip[data-side="right"] .gtip-arrow { right: 100%; top: var(--gtip-arrow); margin-top: calc(var(--gtip-arrow-size) * -1); border-left-width: 0; border-right-color: var(--gtip-bg); }
.gtip[data-side="left"] .gtip-arrow { left: 100%; top: var(--gtip-arrow); margin-top: calc(var(--gtip-arrow-size) * -1); border-right-width: 0; border-left-color: var(--gtip-bg); }
.gtip[data-side="top"] .gtip-arrow { top: 100%; left: var(--gtip-arrow); margin-left: calc(var(--gtip-arrow-size) * -1); border-bottom-width: 0; border-top-color: var(--gtip-bg); }
.gtip[data-side="bottom"] .gtip-arrow { bottom: 100%; left: var(--gtip-arrow); margin-left: calc(var(--gtip-arrow-size) * -1); border-top-width: 0; border-bottom-color: var(--gtip-bg); }
/* Coach marks dock in .coach-slot under the top bar, like .notice-stack: in the flow, so they take room
   instead of covering the header or a page's actions. Navy in both themes, for the white Paro head. */
.gtip-coach { position: static; display: flex; align-items: center; gap: 10px; max-width: none; margin: 8px var(--space-5) 0; padding: 4px 8px 4px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: none; }
.gtip-mark { flex: none; width: 16px; height: 16px; }
.gtip-body { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gtip-body p { margin: 0; min-width: 0; }
.gtip-got { flex: none; min-height: 28px; padding: 0 6px; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* The bar can't point, so its control wears a quiet ring while it shows. */
[data-coach-on] { outline: 2px solid var(--mist); outline-offset: 1px; }
.gtip-host { border-radius: 2px; }
.rail-eyebrow:focus-visible { outline-offset: -2px; border-radius: 4px; } /* .rail-groups clips an outer ring */
@media (prefers-reduced-motion: reduce) { .gtip { transform: none; transition: none; } }
@media (max-width: 1023px) {
  .gtip-coach { margin: 6px 8px 0; }
  .gtip-got { min-height: 44px; }
}

/* ===================================================================
   Light theme (Foam) for the product screens: brand profile, sentiment,
   Needs review, Sniper, AI visibility, onboarding, alert settings.
   Abyss stays the default; these only swap dark-only text / surfaces.
   Gold stays accent only (current step pip). Chunk swaps to the navy-body
   "-full" art on Foam (README rule 6): content only, never opacity / filter.
   =================================================================== */
[data-theme="light"] img.chunk[data-chunk="sleepy"] { content: url(/brand/expressions/sleepy-full.svg); }
[data-theme="light"] img.chunk[data-chunk="curious"] { content: url(/brand/expressions/curious-full.svg); }
[data-theme="light"] img.chunk[data-chunk="glow"] { content: url(/brand/expressions/glow-full.svg); }
[data-theme="light"] img.chunk[data-chunk="wink"] { content: url(/brand/expressions/wink-full.svg); }
[data-theme="light"] img.chunk[data-chunk="focused"] { content: url(/brand/expressions/focused-full.svg); }
[data-theme="light"] img.chunk[data-chunk="happy"] { content: url(/brand/expressions/happy-full.svg); }
[data-theme="light"] img.chunk[data-chunk="concerned"] { content: url(/brand/expressions/concerned-full.svg); }
[data-theme="light"] img.chunk[data-chunk="surprised"] { content: url(/brand/expressions/surprised-full.svg); }
[data-theme="light"] img.chunk[data-chunk="loading"] { content: url(/brand/expressions/loading-full.svg); }

/* Headings / names that were Foam-on-Abyss read as ink on Foam. */
[data-theme="light"] .page-title,
[data-theme="light"] .ps-name,
[data-theme="light"] .profile-group legend,
[data-theme="light"] .ri-who,
[data-theme="light"] .listen-plan h2,
[data-theme="light"] .channel-list .ch-name,
[data-theme="light"] .si-domain,
[data-theme="light"] .feed-summary strong { color: var(--ink); }

/* Forms (onboarding, Needs review note, Slack webhook): light field on the white card. */
[data-theme="light"] .input,
[data-theme="light"] input.input,
[data-theme="light"] select.input,
[data-theme="light"] textarea.input { background: var(--surface); border-color: var(--line-strong); }

/* Beams rail Check group (Needs review, Brand profile) */
[data-theme="light"] .beam:hover { color: var(--ink); }
[data-theme="light"] .beam[aria-current="page"] { background: var(--navy-wash); color: var(--navy); }

/* Profile summary, review items, Sniper and AI cards are .card: flat white via the rule above.
   Needs review "Why unsure" sits on Foam; AI visibility day picker on white. */
[data-theme="light"] .ri-why { background: var(--foam); }
[data-theme="light"] .day-picker, [data-theme="light"] .week-picker { background: var(--surface); }

/* Onboarding (setup flow): Foam steps, navy primary like the rest of light; gold only on the current pip. */
[data-theme="light"] .stepper .step { color: var(--mist); }
[data-theme="light"] .stepper .step.current { color: var(--ink); }
[data-theme="light"] .listen-plan { margin: 0; }
[data-theme="light"] .auth .setup-card button.primary,
[data-theme="light"] .auth .form-actions button.primary,
[data-theme="light"] .auth .form-actions a.btn.primary { background: var(--navy); color: var(--foam); }
[data-theme="light"] .auth .setup-card button.primary:hover,
[data-theme="light"] .auth .form-actions button.primary:hover { background: var(--abyss); filter: none; }

/* Onboarding chip fields (Keywords, Competitors…): white field and Foam chips, not the Abyss wash
   (rgba navy read as a grey fill behind the Keywords chips on light). */
[data-theme="light"] .chip-list { background: var(--surface); }
[data-theme="light"] .chip.edit { background: var(--foam); border-color: var(--line-strong); color: var(--ink); }

/* Alert settings: payload preview */
[data-theme="light"] .payload-preview pre { background: var(--foam); }

/* Brand Shield quote on Foam. */
[data-theme="light"] .shield-quote { background: var(--foam); }