/* Competitive-intelligence platform — design system (v4).
   A conventional SEMrush-style SaaS analytics register: a LIGHT icon+label sidebar, a slim top bar
   with global search, breadcrumb + title + filter bar, quiet 1px-bordered cards with a minimal
   shadow, KPI cards with deltas, CSS charts, a data table with heat cells and sparklines, feed rows
   with a severity stripe, and a grounded Ask card. Teal is the identity (#0C6E68 light / #3FB5A8
   dark). Everything maps onto the existing template class names so every screen reskins at once.
   Theme-aware: full dark mode via prefers-color-scheme AND :root[data-theme] so a toggle works. */

:root{
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;

  --bg:#F6F8F9; --surface:#FFFFFF; --surface-2:#F3F6F7; --surface-3:#EAEFF0;
  --ink:#111A1C; --ink-2:#3A484C; --muted:#5C696D;
  /* --faint and --line-2 are held at ACCESSIBLE values, not the mockup's lighter tints. --faint
     carries every publication date, run duration and hostname in the product; the v4 #93A0A4 is
     2.68:1 on white. #5F6D75 is 5.34:1. --line-2 draws the watch-priority meter (meaningful non-text
     UI needing 3:1); the v4 #D2DBDC is 1.54:1, so #87949B (3.3:1) is kept. Both fixes are audited. */
  --faint:#5F6D75;
  --line:#E4EAEB; --line-2:#87949B;
  --accent:#0C6E68; --accent-2:#0a564f; --accent-soft:#0c6e6810; --on-accent:#fff;
  --hi:#C0432A; --hi-soft:#c0432a12; --med:#8C6210; --med-soft:#8c621014;
  --low:#4E6472; --low-soft:#4e647212; --noise:#657079; --noise-soft:#65707912;
  --ok:#1D7A55; --ok-soft:#1d7a5512; --warn:#8A6410;
  --human:#1D7A55; --machine:#8697A0;
  /* Login-only dark gradient surface, kept on-brand (deep teal). */
  --nav:#0A2E2B; --nav-2:#06201D; --nav-ink:#E6EDF2; --nav-muted:#8FB2AC;
  --shadow:0 1px 2px rgba(9,25,25,.04),0 1px 3px rgba(9,25,25,.03);
  --radius:10px; --radius-sm:7px;
  --sidebar:230px;
  --seq-1:#06332F; --seq-2:#0C6E68; --seq-3:#6FB2AB; --seq-4:#BFDBD8;
  /* Content-type accents for the resource shelf. Each is a foreground hue; the badge derives its
     translucent fill + border from currentColor, so ONE token per type per theme covers both. Held
     dark enough to read on white here; lightened in the dark blocks below. */
  --ct-default:#3A484C; --ct-ebook:#3457C4; --ct-case_study:#2F7D54; --ct-whitepaper:#6D4AA0;
  --ct-webinar:#B03A72; --ct-report:#A15C07; --ct-guide:#0E7C8C; --ct-playbook:#BD4B24;
  --ct-template:#4A6572; --ct-toolkit:#7A44C6;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0C1112; --surface:#141C1D; --surface-2:#182122; --surface-3:#1F2A2B;
  --ink:#E8EEEE; --ink-2:#BCC9C9; --muted:#849696; --faint:#8B99A2;   /* accessible: 5.9:1 */
  --line:#212D2E; --line-2:#5F6E79;                                    /* accessible: 3.3:1 */
  --accent:#3FB5A8; --accent-2:#5AC7BA; --accent-soft:#3fb5a814; --on-accent:#04211E;
  --hi:#E8836A; --hi-soft:#e8836a16; --med:#D9A84A; --med-soft:#d9a84a16;
  --low:#8CA6B4; --low-soft:#8ca6b414; --noise:#8E98A0; --noise-soft:#8e98a014;
  --ok:#5CC79B; --ok-soft:#5cc79b14; --warn:#D9A84A;
  --human:#5CC79B; --machine:#7E9094;
  --nav:#0A2E2B; --nav-2:#06201D; --nav-ink:#E6EDF2; --nav-muted:#8FB2AC;
  --shadow:0 1px 2px rgba(0,0,0,.32);
  --seq-1:#A6E5DD; --seq-2:#4FBBB0; --seq-3:#2A7B73; --seq-4:#1B4B47;
  --ct-default:#BCC9C9; --ct-ebook:#8AA0F0; --ct-case_study:#6BC79A; --ct-whitepaper:#B9A0E6;
  --ct-webinar:#E68FB8; --ct-report:#E0B25C; --ct-guide:#5EC0D0; --ct-playbook:#F0A184;
  --ct-template:#9DB0BC; --ct-toolkit:#C1A0F0;
}}
:root[data-theme="light"]{
  --bg:#F6F8F9; --surface:#FFFFFF; --surface-2:#F3F6F7; --surface-3:#EAEFF0;
  --ink:#111A1C; --ink-2:#3A484C; --muted:#5C696D; --faint:#5F6D75;
  --line:#E4EAEB; --line-2:#87949B;
  --accent:#0C6E68; --accent-2:#0a564f; --accent-soft:#0c6e6810; --on-accent:#fff;
  --hi:#C0432A; --hi-soft:#c0432a12; --med:#8C6210; --med-soft:#8c621014;
  --low:#4E6472; --low-soft:#4e647212; --noise:#657079; --noise-soft:#65707912;
  --ok:#1D7A55; --ok-soft:#1d7a5512; --warn:#8A6410;
  --human:#1D7A55; --machine:#8697A0;
  --nav:#0A2E2B; --nav-2:#06201D; --nav-ink:#E6EDF2; --nav-muted:#8FB2AC;
  --shadow:0 1px 2px rgba(9,25,25,.04),0 1px 3px rgba(9,25,25,.03);
  --seq-1:#06332F; --seq-2:#0C6E68; --seq-3:#6FB2AB; --seq-4:#BFDBD8;
  --ct-default:#3A484C; --ct-ebook:#3457C4; --ct-case_study:#2F7D54; --ct-whitepaper:#6D4AA0;
  --ct-webinar:#B03A72; --ct-report:#A15C07; --ct-guide:#0E7C8C; --ct-playbook:#BD4B24;
  --ct-template:#4A6572; --ct-toolkit:#7A44C6;
}
:root[data-theme="dark"]{
  --bg:#0C1112; --surface:#141C1D; --surface-2:#182122; --surface-3:#1F2A2B;
  --ink:#E8EEEE; --ink-2:#BCC9C9; --muted:#849696; --faint:#8B99A2;
  --line:#212D2E; --line-2:#5F6E79;
  --accent:#3FB5A8; --accent-2:#5AC7BA; --accent-soft:#3fb5a814; --on-accent:#04211E;
  --hi:#E8836A; --hi-soft:#e8836a16; --med:#D9A84A; --med-soft:#d9a84a16;
  --low:#8CA6B4; --low-soft:#8ca6b414; --noise:#8E98A0; --noise-soft:#8e98a014;
  --ok:#5CC79B; --ok-soft:#5cc79b14; --warn:#D9A84A;
  --human:#5CC79B; --machine:#7E9094;
  --nav:#0A2E2B; --nav-2:#06201D; --nav-ink:#E6EDF2; --nav-muted:#8FB2AC;
  --shadow:0 1px 2px rgba(0,0,0,.32);
  --seq-1:#A6E5DD; --seq-2:#4FBBB0; --seq-3:#2A7B73; --seq-4:#1B4B47;
  --ct-default:#BCC9C9; --ct-ebook:#8AA0F0; --ct-case_study:#6BC79A; --ct-whitepaper:#B9A0E6;
  --ct-webinar:#E68FB8; --ct-report:#E0B25C; --ct-guide:#5EC0D0; --ct-playbook:#F0A184;
  --ct-template:#9DB0BC; --ct-toolkit:#C1A0F0;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:13px;
  line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4,h5{margin:0;font-weight:640;letter-spacing:-.012em;line-height:1.2}
code,kbd{font-family:var(--mono);font-size:.88em}

/* ── shell ─────────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}

/* LIGHT sidebar (SEMrush-style icon+label — here label-only, still clean). */
.side{background:var(--surface);color:var(--ink);display:flex;flex-direction:column;
  border-right:1px solid var(--line);position:sticky;top:0;height:100vh;overflow-y:auto}
.side-brand{padding:15px 16px 13px;display:flex;flex-direction:column;gap:2px}
.side-brand .logo{font-weight:700;font-size:.96rem;letter-spacing:-.02em;color:var(--ink)}
.side-brand .logo::first-letter{color:var(--accent)}
.side-brand .sub{font-size:.6rem;color:var(--faint);font-family:var(--mono);
  letter-spacing:.09em;text-transform:uppercase}

/* ── Notion-style workspace switcher ──────────────────────────────────────────
   A <details> disclosure. `.wsw > summary` is the always-visible current-workspace button;
   `.wsw-menu` is the dropdown, list-marker suppressed and revealed only when [open]. */
.wsw{margin:2px 10px 6px;position:relative}
.wsw > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  padding:7px 9px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--surface-2)}
.wsw > summary::-webkit-details-marker{display:none}
.wsw > summary:hover{background:var(--surface-3);border-color:var(--line-2)}
.wsw > summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wsw-ico{flex:0 0 auto;width:22px;height:22px;display:inline-flex;align-items:center;
  justify-content:center;font-size:.86rem;border-radius:6px;background:var(--surface);
  border:1px solid var(--line);line-height:1}
.wsw-id{min-width:0;display:flex;flex-direction:column;gap:1px;flex:1 1 auto}
.wsw-name{font-size:.82rem;font-weight:600;color:var(--ink);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsw-goal{font-size:.62rem;color:var(--faint);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsw-caret{flex:0 0 auto;color:var(--muted);font-size:.62rem;transition:transform .12s ease}
.wsw[open] > summary .wsw-caret{transform:rotate(180deg)}
.wsw[open] > summary{border-color:var(--line-2)}
/* The menu. Positioned in-flow (pushes nav down) so it works with zero JS and never clips inside
   the scrolling sidebar; kept visually distinct with its own surface + shadow. */
.wsw-menu{margin-top:5px;padding:5px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:1px}
.wsw-item{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:var(--radius-sm);
  color:var(--ink-2);text-decoration:none}
.wsw-item:hover{background:var(--surface-2);text-decoration:none}
.wsw-item.on{background:var(--accent-soft)}
.wsw-item.on .wsw-name{color:var(--accent)}
.wsw-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.wsw-check{flex:0 0 auto;margin-left:auto;color:var(--accent);font-weight:700;font-size:.74rem}
.wsw-div{height:1px;background:var(--line);margin:4px 2px}
.wsw-new{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:var(--radius-sm);
  color:var(--accent);font-size:.8rem;font-weight:550;text-decoration:none}
.wsw-new:hover{background:var(--accent-soft);text-decoration:none}
.wsw-new:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.side-sec{padding:8px 10px 2px}
.side-sec h6{margin:8px 8px 5px;font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);font-family:var(--mono);font-weight:600}
.side a.nav,.side .nav{display:flex;align-items:center;gap:9px;padding:6px 10px;border-radius:7px;
  color:var(--ink-2);font-size:.82rem;margin-bottom:1px;font-weight:450}
.side a.nav:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.side a.nav.on{background:var(--accent-soft);color:var(--accent);font-weight:580}
.side a.nav .ct{margin-left:auto;font-family:var(--mono);font-size:.66rem;color:var(--faint);font-weight:600}
.side-foot{margin-top:auto;padding:11px 16px;border-top:1px solid var(--line);
  font-size:.74rem;color:var(--muted);line-height:1.6}
.side-foot a{color:var(--ink-2);font-weight:550}
.side-foot a:hover{color:var(--accent)}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:14px;padding:10px 22px;background:var(--surface);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.crumbs{font-size:.78rem;color:var(--muted);display:flex;gap:7px;align-items:center;min-width:0}
.crumbs b{color:var(--ink);font-weight:600}
.crumbs a:hover{color:var(--accent)}
.crumbs .sep{color:var(--faint)}
.topbar .spacer{margin-left:auto}
.content{padding:20px 22px 56px;max-width:1440px;width:100%}

/* ── typography bits ───────────────────────────────────── */
.eyebrow{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.page-title{font-size:1.5rem;letter-spacing:-.02em}
.page-sub{color:var(--muted);margin-top:5px;max-width:76ch;line-height:1.55}
.section{margin-top:26px}
.section-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.section-head h2{font-size:1.02rem}
.section-head .note{color:var(--muted);font-size:.8rem}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.mono{font-family:var(--mono)}

/* ── stat strip / KPI cards ────────────────────────────── */
/* Hairline-separated cells: the v4 KPI signature. Applies to the existing .stats/.stat markup
   (number first, label below) and to the new .kpis/.kpi markup (label first, number, delta). */
.stats,.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.stat,.kpi{background:var(--surface);padding:13px 15px}
.stat .n{font-size:1.7rem;font-weight:670;letter-spacing:-.03em;line-height:1.05;
  font-variant-numeric:tabular-nums}
.stat .l{font-family:var(--mono);font-size:.58rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin-top:6px}
.stat.hi .n{color:var(--hi)} .stat.med .n{color:var(--med)} .stat.ok .n{color:var(--ok)}
.stat .delta,.kpi .delta{margin-top:6px}

/* New label-first KPI card (v4), for the dashboard rebuild. */
.kpi{display:flex;flex-direction:column;gap:3px}
.kpi .l{font-family:var(--mono);font-size:.57rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px}
.kpi .l svg{width:12px;height:12px;opacity:.7}
.kpi .n{font-size:1.7rem;font-weight:670;letter-spacing:-.03em;line-height:1.05;
  font-variant-numeric:tabular-nums}
.kpi.hi .n{color:var(--hi)}
.kpi .r{display:flex;align-items:center;gap:7px}
.kpi .s{font-size:.7rem;color:var(--faint)}

/* ── cards / panels ────────────────────────────────────── */
.panel,.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow)}
.panel-head{display:flex;align-items:center;gap:10px;padding:12px 15px;border-bottom:1px solid var(--line)}
.panel-head h3{font-size:.9rem;font-weight:620}
.panel-head h3 a:hover{color:var(--accent)}
.panel-body{padding:15px}
.grid{display:grid;gap:12px}
/* min(100%, …) so a track never demands more than the container has. A bare minmax(320px,1fr) forces
   a 320px column even inside a 288px phone content box, which is exactly what pushed the document into
   horizontal scroll at 320 CSS px. */
.grid.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,268px),1fr))}

/* New v4 card head/body (scoped so it never touches .cluster .ch). */
.card .ch{display:flex;align-items:center;gap:8px;padding:12px 15px 10px;border-bottom:1px solid var(--line)}
.card .ch h3{font-size:.85rem;font-weight:620}
.card .ch .sub{font-family:var(--mono);font-size:.64rem;color:var(--faint)}
.card .ch .r{margin-left:auto;display:flex;align-items:center;gap:8px}
.card .cb{padding:14px 15px}

/* Gauge (field-activity dial). */
.toprow{display:grid;grid-template-columns:240px 1fr;gap:14px}
.gauge{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 14px 15px}
.gauge .ring{position:relative;width:180px;height:104px}
.gauge .num{position:absolute;left:0;right:0;bottom:0;font-size:2.4rem;font-weight:700;
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.gauge .of{font-size:.8rem;color:var(--faint);font-weight:500}
.gauge .lab{margin-top:5px;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--warn);font-weight:700}
.gauge .cap{color:var(--muted);font-size:.74rem;margin-top:6px;line-height:1.4}

/* ── badges ────────────────────────────────────────────── */
.tag{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.06em;text-transform:uppercase;font-weight:660;padding:2px 7px;border-radius:5px;
  white-space:nowrap}
.tag.high{color:var(--hi);background:var(--hi-soft)}
.tag.medium{color:var(--med);background:var(--med-soft)}
.tag.low{color:var(--low);background:var(--low-soft)}
.tag.noise{color:var(--noise);background:var(--noise-soft)}
.tag.ungraded{color:var(--muted);background:var(--surface-3)}
.tag.kind{color:var(--ink-2);background:var(--surface-3)}
.tag.tier1{color:var(--hi);background:var(--hi-soft)}
.tag.tier2{color:var(--med);background:var(--med-soft)}
.tag.tier3{color:var(--low);background:var(--low-soft)}
.tag.ok{color:var(--ok);background:var(--ok-soft)}
.conf{font-family:var(--mono);font-size:.62rem;color:var(--faint);border:1px solid var(--line-2);
  border-radius:4px;padding:1px 5px}

/* ── designed error / permission recovery page ─────────────────────────────── */
/* `.err-shell`, NOT `.err`: the bare `.err` class is the pre-existing inline alert box used by
   login/signup/_flash, and reusing it here collided both ways (the alert grew to full-viewport
   height; this page picked up the alert's red tint + 9px padding). Distinct name, no collision. */
.err-shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;padding:40px 20px;text-align:center}
.err-brand{display:flex;flex-direction:column;gap:2px}
.err-brand .logo{font-weight:700;letter-spacing:.14em;color:var(--accent);font-size:1rem}
.err-brand-sub{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint)}
.err-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:34px 30px;max-width:520px;width:100%}
.err-code{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.12em;
  color:var(--accent);margin-bottom:10px}
.err-title{font-size:1.4rem;font-weight:640;color:var(--ink);line-height:1.25}
.err-msg{color:var(--muted);margin-top:12px;line-height:1.6}
.err-detail{color:var(--ink-2);margin-top:10px;font-size:.9rem;line-height:1.55}
.err-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.err-ref{color:var(--faint);font-size:.78rem;margin-top:18px}
.err-ref code{font-family:var(--mono);color:var(--ink-2)}

/* watch-priority meter — a documented 1–10 scale, so TEN cells, one per point, render every value
   distinctly (5 cells collapsed 6–10 into one full bar). The numeric --meter-n sits alongside. */
.meter{display:inline-flex;gap:1.5px;vertical-align:middle}
.meter i{width:3px;height:11px;border-radius:1.5px;background:var(--line-2);display:block}
.meter i.on{background:var(--accent)}
.meter-n{font-family:var(--mono);font-size:.62rem;color:var(--faint);font-weight:600;
  margin-left:5px;vertical-align:middle}

/* ── signal rows / feed ────────────────────────────────── */
.sig{display:flex;gap:13px;padding:13px 15px;border-bottom:1px solid var(--line);
  align-items:flex-start}
.sig:last-child{border-bottom:0}
.sig:hover{background:var(--surface-2)}
.sig.dismissed{opacity:.42}
.sig .bar{width:3px;align-self:stretch;border-radius:2px;flex:0 0 3px;background:var(--line-2)}
.sig.m-high .bar{background:var(--hi)} .sig.m-medium .bar{background:var(--med)}
.sig.m-low .bar{background:var(--low)} .sig.m-noise .bar{background:var(--noise)}
.sig .body,.sig .sig-main{min-width:0;flex:1}
.sig .ttl,.sig .sig-title{display:block;font-weight:600;line-height:1.35;margin-bottom:3px;
  font-size:.92rem}
.sig .ttl a:hover,.sig .sig-title:hover{color:var(--accent)}
.sig .meta,.sig .sig-meta{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:.74rem;
  color:var(--muted);margin-top:2px}
.sig .meta a:hover,.sig .sig-meta a:hover{color:var(--accent)}
.sig .impl{margin-top:6px;font-family:var(--serif);font-size:.9rem;line-height:1.5;color:var(--ink-2);
  border-left:2px solid var(--accent);padding-left:10px}
.sig .diff{margin-top:7px;font-family:var(--mono);font-size:.72rem;white-space:pre-wrap;
  background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:8px 10px;
  max-height:180px;overflow:auto;color:var(--ink-2)}
.sig .acts{display:flex;gap:4px;flex:0 0 auto}
.iconbtn{border:1px solid var(--line-2);background:var(--surface);border-radius:6px;padding:3px 7px;
  font-size:.72rem;color:var(--muted);cursor:pointer;font-family:var(--mono)}
.iconbtn:hover{border-color:var(--accent);color:var(--accent)}
.iconbtn.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* ── rival cards ───────────────────────────────────────── */
.rcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow)}
.rcard:hover{border-color:var(--line-2);text-decoration:none}
.rcard.watch{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft),var(--shadow)}
.rcard .top{display:flex;align-items:center;gap:8px}
.rcard h4{font-size:.94rem}
.rcard .why{font-size:.82rem;color:var(--ink-2);line-height:1.45}
.rcard .chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{font-size:.66rem;background:var(--surface-3);color:var(--ink-2);border-radius:4px;
  padding:2px 6px}
.rcard .foot{margin-top:auto;display:flex;align-items:center;gap:8px;font-size:.72rem;
  color:var(--muted);padding-top:8px;border-top:1px solid var(--line)}

/* ── cluster ───────────────────────────────────────────── */
.cluster{margin-top:24px}
.cluster .ch{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.cluster .ch h3{font-size:1rem}
.cluster .ct{font-family:var(--mono);font-size:.66rem;background:var(--surface-3);
  border-radius:20px;padding:1px 8px;color:var(--muted)}
.cluster .blurb{color:var(--ink-2);font-size:.855rem;max-width:88ch;margin-bottom:12px;
  line-height:1.55}

/* ── tables ────────────────────────────────────────────── */
table.t{width:100%;border-collapse:collapse;font-size:.82rem}
table.t th{text-align:left;font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);font-weight:600;padding:9px 12px;
  border-bottom:1px solid var(--line)}
table.t td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.t tr:last-child td{border-bottom:0}
table.t tbody tr:hover td{background:var(--surface-2)}

.rowlist{width:100%;border-collapse:collapse}
.rowlist th{text-align:left;font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);padding:7px 10px;border-bottom:1px solid var(--line)}
.rowlist td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.rowlist tr:last-child td{border-bottom:0}

/* New v4 data table: hover, sortable header, heat cell, right-align. For the dashboard rebuild. */
.tbl{width:100%;border-collapse:collapse;font-size:.8rem}
.tbl th{text-align:left;font-family:var(--mono);font-size:.58rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);font-weight:600;padding:9px 12px;
  border-bottom:1px solid var(--line);cursor:pointer;white-space:nowrap;user-select:none}
.tbl th.r,.tbl td.r{text-align:right}
.tbl th .sort{color:var(--accent);margin-left:3px}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:var(--surface-2)}
.tbl .co{display:flex;align-items:center;gap:9px;font-weight:560;color:var(--ink)}
.tbl .co .fav{width:22px;height:22px;border-radius:5px;flex:0 0 22px;display:grid;place-items:center;
  font-size:.54rem;font-weight:800;color:#fff;font-family:var(--mono)}
.tbl .co small{display:block;font-family:var(--mono);font-size:.56rem;color:var(--faint);
  text-transform:uppercase;font-weight:600}
.heat{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums;border-radius:5px;
  padding:2px 8px;display:inline-block;min-width:30px;text-align:center;
  background:var(--surface-3);color:var(--muted)}
.heat.hi{background:var(--hi-soft);color:var(--hi)}
.heat.md{background:var(--med-soft);color:var(--med)}
.prov-dot{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:.62rem;
  color:var(--machine)}
.prov-dot .d{width:6px;height:6px;border-radius:50%;background:var(--machine)}
.prov-dot.human{color:var(--human)}.prov-dot.human .d{background:var(--human)}

/* ── forms / buttons ───────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--accent);
  color:var(--on-accent);border:0;border-radius:8px;padding:7px 13px;font-size:.8rem;font-weight:600;
  cursor:pointer;font-family:inherit;min-height:24px}
.btn:hover{background:var(--accent-2);text-decoration:none}
.btn.ghost{background:var(--surface);color:var(--ink-2);border:1px solid var(--line-2)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--surface)}
.btn.sm{padding:4px 9px;font-size:.75rem}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=url],
input[type=number],select,textarea{
  background:var(--surface);border:1px solid var(--line-2);border-radius:7px;padding:7px 10px;
  font-size:.84rem;color:var(--ink);font-family:inherit;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
input::placeholder,textarea::placeholder{color:var(--faint)}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
/* Checkboxes must be excluded from the min-width rule: a 130px-wide checkbox pushes its own label
   130px to the right, which reads as two unrelated controls rather than one labelled one. */
.filters select,.filters input:not([type=checkbox]):not([type=radio]){width:auto;min-width:130px}
.filters input[type=checkbox],.filters input[type=radio]{width:auto;min-width:0;margin:0}
.filters label{white-space:nowrap;font-size:.83rem;color:var(--ink-2)}

.form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);max-width:none}
.form-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.form-grid .full{grid-column:1/-1}
.fieldset{border:0;padding:0;margin:0 0 22px}
.fieldset legend{font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);padding:0 0 8px}
.f{margin-bottom:14px}
.f label{display:block;font-size:.8rem;font-weight:600;color:var(--ink-2);margin-bottom:4px}
.hint{display:block;font-weight:400;color:var(--muted);font-size:.76rem;margin-top:2px}
.f .hint{display:block}
.f input[type=text],.f input[type=url],.f input[type=email],.f input[type=password],
.f input[type=number],.f select,.f textarea{
  width:100%;padding:7px 10px;border:1px solid var(--line-2);border-radius:6px;
  background:var(--surface);color:var(--ink);font-family:var(--sans);font-size:.86rem}
.f textarea{min-height:92px;resize:vertical;line-height:1.5}
.f textarea.tall{min-height:150px}
.f input:disabled,.f textarea:disabled{background:var(--surface-3);color:var(--muted)}
.form-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding-top:16px;border-top:1px solid var(--line);margin-top:6px}
.form-actions .spacer{flex:1}

/* ── Workspace purpose picker ─────────────────────────────────────────────────
   Radio cards. The native radio is visually hidden but stays in the DOM and focusable, so the
   whole thing is keyboard-operable and works with no JS; selection is shown with :has(:checked)
   and keyboard focus with :focus-within. */
.purpose-field{border:0;padding:0;margin:0 0 14px;min-width:0}
.purpose-field legend{font-size:.8rem;font-weight:600;color:var(--ink-2);margin-bottom:6px;padding:0}
.purpose-picker{display:flex;flex-direction:column;gap:8px}
.purpose-picker label.ppick{display:flex;align-items:flex-start;gap:11px;position:relative;
  padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;
  background:var(--surface);margin:0}
.purpose-picker label.ppick:hover{border-color:var(--line-2)}
.purpose-picker .ppick input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.purpose-picker label.ppick:has(input:checked){border-color:var(--accent);
  background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.purpose-picker label.ppick:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.ppick-ico{font-size:1.05rem;line-height:1.2;flex:0 0 auto}
.ppick-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.ppick-label{font-weight:600;color:var(--ink);font-size:.86rem}
.ppick-ent{font-weight:450;color:var(--muted);font-size:.74rem}
.ppick-desc{color:var(--muted);font-size:.76rem;line-height:1.4}

/* Status messages carried in the querystring, so a refresh is harmless. */
.flash{padding:10px 14px;border-radius:8px;margin-bottom:18px;font-size:.85rem;
  border:1px solid transparent}
.flash.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.flash.error{background:var(--hi-soft);border-color:var(--hi);color:var(--hi)}
.flash.warn{background:var(--med-soft);border-color:var(--med);color:var(--med)}
.err{background:var(--hi-soft);border:1px solid var(--hi);color:var(--hi);
  padding:9px 12px;border-radius:8px;margin-bottom:14px;font-size:.84rem}

/* Destructive actions look destructive. */
.danger-zone{border:1px solid var(--hi);border-radius:var(--radius);padding:16px;
  margin-top:26px;background:var(--hi-soft)}
.danger-zone h3{color:var(--hi);font-size:.94rem;margin-bottom:6px}
.btn.danger{background:var(--hi);color:#fff;border-color:var(--hi)}
.btn.danger:hover{filter:brightness(.9)}

.linkbtn{background:none;border:0;color:inherit;font:inherit;padding:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px}
.signout{display:inline}

/* ── top-bar search + filter bar (v4, for the dashboard rebuild) ── */
.search{flex:1;max-width:560px;position:relative;display:flex;align-items:center}
.search input{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;
  padding:8px 12px 8px 34px;font-size:.82rem;color:var(--ink);font-family:inherit}
.search input:focus{outline:2px solid var(--accent-soft);border-color:var(--accent);background:var(--surface)}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;
  color:var(--accent)}
.search .kbd{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-family:var(--mono);
  font-size:.62rem;color:var(--faint);border:1px solid var(--line-2);border-radius:4px;padding:0 5px}
.titlerow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.titlerow h1{font-size:1.3rem}
.titlerow .synced{font-family:var(--mono);font-size:.68rem;color:var(--muted)}
.titlerow .live{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);
  font-size:.66rem;color:var(--ok)}
.titlerow .live .d{width:6px;height:6px;border-radius:50%;background:var(--ok)}
/* Workspace north-star, shown under the dashboard title. Reframes the whole screen by purpose. */
.wgoal{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:5px 11px 5px 8px;
  background:var(--accent-soft);border:1px solid var(--line);border-radius:20px;max-width:100%}
.wgoal-ico{font-size:.82rem;line-height:1}
.wgoal-k{font-family:var(--mono);font-size:.56rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;color:var(--accent)}
.wgoal-v{font-size:.78rem;color:var(--ink-2);font-weight:520;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* Segmented control. NOT named .seg — that class is already the stacked-column chart segment
   (.colstack .seg) used by trends.html; reusing it would repaint the chart bars. */
.segbar{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);
  border-radius:7px;padding:2px}
.segbar button{border:0;background:transparent;color:var(--muted);font-family:var(--mono);
  font-size:.68rem;padding:4px 10px;border-radius:5px;cursor:pointer;font-weight:600}
.segbar button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.chart-wrap{padding:6px 8px 4px}
.axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.62rem;
  color:var(--faint);padding:2px 6px 0}
.legend{display:flex;gap:14px;font-size:.72rem;color:var(--muted);padding:8px 6px 0}
.legend span{display:inline-flex;align-items:center;gap:5px}

/* distribution bars (v4) */
.dist{display:flex;flex-direction:column;gap:10px}
.drow{display:grid;grid-template-columns:1fr auto;gap:3px 10px;align-items:center}
.drow .nm{font-size:.79rem;color:var(--ink-2)}
.drow .v{font-family:var(--mono);font-size:.68rem;color:var(--muted);font-variant-numeric:tabular-nums}
.drow .bar{grid-column:1/-1;height:7px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.drow .bar i{display:block;height:100%;border-radius:4px;background:var(--accent)}
.drow.hi .bar i{background:var(--hi)}.drow.md .bar i{background:var(--med)}

/* coverage + ask cards (v4) */
.cov-b{display:flex;align-items:baseline;gap:8px}
.cov-b .n{font-size:1.55rem;font-weight:700;font-variant-numeric:tabular-nums}
.cov-b .d{color:var(--muted);font-size:.8rem}
.cov-track{height:8px;border-radius:5px;background:var(--surface-3);overflow:hidden;display:flex;
  gap:2px;margin:10px 0}
.cov-track .ok{background:var(--ok)}.cov-track .bl{background:var(--hi)}
.miss{display:flex;flex-direction:column;gap:5px;font-size:.73rem}
.miss .m{display:flex;align-items:center;gap:7px}
.miss .m code{font-family:var(--mono);font-size:.64rem;color:var(--hi);background:var(--hi-soft);
  border-radius:4px;padding:1px 5px}
.miss b{color:var(--ink-2)}
.cites{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.cite{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:7px;
  padding:4px 8px;font-size:.7rem;background:var(--surface-2)}
.cite .k{font-family:var(--mono);font-size:.56rem;color:var(--accent);font-weight:700}
.cite .dt{color:var(--faint);font-family:var(--mono);font-size:.62rem}

/* ── login ─────────────────────────────────────────────── */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:linear-gradient(155deg,var(--nav) 0%,var(--nav-2) 100%)}
.login{background:var(--surface);border-radius:14px;padding:30px;width:100%;max-width:392px;
  box-shadow:0 20px 60px rgba(0,0,0,.3)}
.login h1{font-size:1.2rem;margin-bottom:4px}
.login .f{margin-top:14px}
.login label{display:block;font-size:.74rem;color:var(--muted);margin-bottom:5px;
  font-family:var(--mono);letter-spacing:.05em;text-transform:uppercase}

/* ── misc ──────────────────────────────────────────────── */
.empty{padding:40px 20px;text-align:center;color:var(--muted)}
.empty h4{color:var(--ink);margin-bottom:6px}
.pager{display:flex;gap:6px;align-items:center;margin-top:16px;justify-content:center}
.pill{font-family:var(--mono);font-size:.7rem;padding:3px 9px;border-radius:20px;
  background:var(--surface-3);color:var(--ink-2)}
.notice{background:var(--accent-soft);border:1px solid var(--accent);border-radius:8px;
  padding:10px 13px;font-size:.84rem;margin-bottom:16px}
.warn{background:var(--med-soft);border:1px solid var(--med);color:var(--ink);border-radius:8px;
  padding:10px 13px;font-size:.84rem;margin-bottom:16px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:.83rem}
.kv dt{color:var(--muted);font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;
  text-transform:uppercase;padding-top:2px}
.kv dd{margin:0}
ul.tight{margin:0;padding-left:17px} ul.tight li{margin-bottom:4px}

.staleness{font-family:var(--mono);font-size:.66rem;padding:1px 6px;border-radius:4px}
.staleness.fresh{color:var(--ok);background:var(--ok-soft)}
.staleness.aging{color:var(--med);background:var(--med-soft)}
.staleness.stale{color:var(--hi);background:var(--hi-soft)}
.staleness.never{color:var(--muted);background:var(--surface-3)}

/* Materiality override — disclosure-based, so it costs no JS. */
.regrade{position:relative;display:inline-block}
.regrade summary{list-style:none;cursor:pointer;min-width:32px;min-height:32px;
  display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-2);
  border-radius:6px;background:var(--surface);color:var(--muted);font-size:1rem}
.regrade summary::-webkit-details-marker{display:none}
.regrade summary:hover{border-color:var(--accent);color:var(--accent)}
.regrade[open] summary{border-color:var(--accent);color:var(--accent)}
.regrade-menu{position:absolute;right:0;top:36px;z-index:20;background:var(--surface);
  border:1px solid var(--line-2);border-radius:8px;box-shadow:var(--shadow);padding:8px;
  display:flex;flex-direction:column;gap:4px;min-width:132px}
.regrade-menu form{display:block}
.regrade-menu .btn{width:100%;justify-content:center}
.regrade-menu .btn[disabled]{opacity:.45;cursor:default}

/* Legal footer. */
.site-foot{padding:22px 24px;border-top:1px solid var(--line);margin-top:40px;
  color:var(--muted);font-size:.78rem}
.site-foot a{color:var(--muted)}
.site-foot a:hover{color:var(--accent)}

/* Long analyst notes collapse to their first sentence. */
details.lede > summary{cursor:pointer;list-style:none}
details.lede > summary::-webkit-details-marker{display:none}
details.lede > summary .more{color:var(--accent);font-size:.8rem;white-space:nowrap;
  margin-left:6px;text-decoration:underline;text-underline-offset:2px}
details.lede[open] > summary .more::after{content:" (hide)"}

/* When an action returns the reader to a row, briefly mark which one. */
.sig:target{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* ─────────────────────────────────────────────────────────────────────────
   Accessibility and provenance. Preserved from the audited-defect fixes.
   ───────────────────────────────────────────────────────────────────────── */

/* Screen-reader-only utility — labels every icon-only control and graphical meter. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Skip link — bypass the sidebar with a keyboard. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);
  color:var(--on-accent);padding:10px 16px;border-radius:0 0 var(--radius) 0;font-weight:600}
.skip-link:focus{left:0}

/* Focus must be visible on EVERY interactive element. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px}

/* Icon buttons: 32px minimum comfortable target; the real name comes from an .sr-only span. */
.iconbtn{min-width:32px;min-height:32px;display:inline-flex;align-items:center;
  justify-content:center}
.iconbtn[aria-pressed=true]{background:var(--accent);border-color:var(--accent);
  color:var(--on-accent)}

/* Provenance. Machine output is visually distinct AND labelled, not styled like authored analysis. */
.chip-ai,.chip-human{display:inline-block;font-size:.66rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;padding:1px 6px;border-radius:4px;
  vertical-align:1px;margin-right:6px;white-space:nowrap}
.chip-ai{background:var(--med-soft);color:var(--med);border:1px solid var(--med)}
.chip-human{background:var(--ok-soft);color:var(--ok);border:1px solid var(--ok)}
.sig .impl.ai{border-left-style:dashed;border-left-color:var(--med)}

/* Two provenance states with no categorical meaning: deliberately LOW-chroma so they never read as
   a severity level. .chip-sample = synthetic demo text; .chip-none = no grader recorded. */
.chip-sample,.chip-none{display:inline-block;font-size:.66rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;padding:1px 6px;border-radius:4px;
  vertical-align:1px;margin-right:6px;white-space:nowrap;
  background:transparent;color:var(--ink-2);border:1px dashed var(--line-2)}
.sig .impl.unattributed{border-left-style:dotted;border-left-color:var(--line-2)}

/* Imported/collected: a factual, non-graded provenance — brought in wholesale, not judged by this
   system. Neutral and low-chroma so it never reads as a severity, but a SOLID border distinguishes
   it from the dashed unattributed marker: the grade has a known origin, it just wasn't graded here. */
.chip-collector{display:inline-block;font-size:.66rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;padding:1px 6px;border-radius:4px;vertical-align:1px;margin-right:6px;
  white-space:nowrap;background:var(--surface-3);color:var(--ink-2);border:1px solid var(--line-2)}

/* ── VISUAL EVIDENCE: ad creatives, social posts, article screenshots ────────────────────────────
   Images always sit in their own bordered, neutral frame so a light creative never bleeds into a
   light page, and each frame owns its overflow so a wide creative can never break the row layout.
   Alt text and lazy-loading are set at the call site (see _macros.html). */
.ev{margin-top:9px}
.ev-frame{display:block;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;
  background:var(--surface-2);line-height:0;max-width:100%}
.ev-frame:hover{border-color:var(--accent)}
.ev-frame:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ev-frame img{display:block;width:100%;height:auto}
.ev-ad{max-width:280px}
.ev-post{max-width:340px}
.ev-ad .ev-frame img,.ev-post .ev-frame img{max-height:360px;object-fit:contain}
/* Article/OG screenshots: cap height and crop from the top so a tall full-page capture reads as a
   preview rather than dominating the row. */
.ev-doc{max-width:460px}
.ev-doc img{max-height:280px;object-fit:cover;object-position:top center}
.ev-cap{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:6px;line-height:1.3}
.ev-kind{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.6rem;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:4px;
  border:1px solid var(--accent);color:var(--accent);background:var(--accent-soft);white-space:nowrap}
.ev-kind-post{border-color:var(--low);color:var(--low);background:var(--low-soft)}
.ev-run{font-family:var(--mono);font-size:.68rem;color:var(--muted)}
.ev-body{margin-top:7px;font-size:.86rem;line-height:1.5;color:var(--ink-2);max-width:64ch}

/* Site-change event caption: a calm kind chip + the honest page length + a link back to the page
   that moved. Neutral (not a severity colour) so it reads as an event, never an error. */
.ev-change{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:8px;line-height:1.3}
.ev-kind-change{border-color:var(--line-2);color:var(--ink-2);background:var(--surface-3)}
.ev-change-link{color:var(--accent);font-weight:600}
.ev-change-link:hover{text-decoration:underline}

/* ── RESOURCE SHELF: gated marketing content (ebooks, case studies, webinars…) ────────────────────
   A text-and-badge row, by design imageless. `content_card` emits only the inner row so it composes
   inside a feed row, the dashboard strip, or a rival panel; `.reslist` supplies the separators when
   the rows stand alone. The badge takes its hue from a per-content-type token and derives its fill +
   border from currentColor, so it is one calibration for both themes. */
.res{display:flex;align-items:flex-start;gap:11px;min-width:0}
.res-badge{flex:0 0 auto;margin-top:1px;display:inline-flex;align-items:center;
  font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:4px;white-space:nowrap;color:var(--ct-default);
  background:color-mix(in srgb, currentColor 13%, transparent);
  border:1px solid color-mix(in srgb, currentColor 42%, transparent)}
.res-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.res-title{font-weight:600;line-height:1.35;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
a.res-title:hover{color:var(--accent);text-decoration:none}
.res-title.nolink{color:var(--ink-2)}
.res-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.74rem;color:var(--muted)}
.res-who{font-weight:600;color:var(--ink-2)}
/* Standalone list (dashboard strip, rival Resources): rows gain padding + hairline separators. */
.reslist .res{padding:11px 2px;border-bottom:1px solid var(--line)}
.reslist .res:first-child{padding-top:2px}
.reslist .res:last-child{border-bottom:0;padding-bottom:2px}

.ct-default{color:var(--ct-default)} .ct-resource{color:var(--ct-default)}
.ct-ebook{color:var(--ct-ebook)} .ct-case_study{color:var(--ct-case_study)}
.ct-whitepaper{color:var(--ct-whitepaper)} .ct-webinar{color:var(--ct-webinar)}
.ct-report{color:var(--ct-report)} .ct-guide{color:var(--ct-guide)}
.ct-playbook{color:var(--ct-playbook)} .ct-template{color:var(--ct-template)}
.ct-toolkit{color:var(--ct-toolkit)}

/* Creative wall: a horizontal strip of ad creatives. It scrolls INSIDE its own container, so the
   page body never scrolls sideways no matter how many creatives a competitor is running. */
.wall{display:flex;gap:12px;overflow-x:auto;max-width:100%;padding:2px 2px 10px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.wall:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wall-card{flex:0 0 auto;width:188px;scroll-snap-align:start;display:flex;flex-direction:column;
  gap:7px;text-decoration:none;color:var(--ink-2)}
.wall-card:hover{text-decoration:none}
.wall-shot{display:block;height:148px;border:1px solid var(--line-2);border-radius:8px;
  overflow:hidden;background:var(--surface-2);line-height:0}
.wall-card:hover .wall-shot{border-color:var(--accent)}
.wall-card:focus-visible .wall-shot{outline:2px solid var(--accent);outline-offset:2px}
.wall-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.wall-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.wall-who{font-size:.78rem;font-weight:600;color:var(--ink);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wall-net{font-family:var(--mono);font-size:.6rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint)}
.wall-card:hover .wall-who{color:var(--accent)}

/* Feed quick-view toggle (All / Ads / Posts). Layout only — the buttons reuse .btn / .btn.ghost. */
.viewtoggle{display:flex;gap:8px;flex-wrap:wrap}

/* Tables scroll inside their own container; the document never scrolls sideways. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media print{
  .side,.topbar,.filters,form,.iconbtn{display:none !important}
  body{background:#fff;color:#000;font-size:11pt}
  .main{margin:0;padding:0;max-width:none}
  .panel,.card,.sig,.rcard{break-inside:avoid;page-break-inside:avoid;box-shadow:none;
    border:1px solid #bbb}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444;
    word-break:break-all}
}

/* ─────────────────────────────────────────────────────────────────────────
   Charts. No JavaScript and no external library — the CSP forbids remote scripts and the rest of
   the app works without JS, so the charts do too.

   The ramp is SEQUENTIAL, one hue, monotonic in lightness, because materiality is ordinal
   (high > medium > low > noise) rather than four unrelated identities. The semantic tag colours are
   deliberately NOT used here: as a categorical palette they fall below the readable ΔE floor for
   deuteranopes. In the feed those colours always sit beside the words HIGH / MEDIUM so identity is
   never colour-alone; in a stacked column it would be.
   ───────────────────────────────────────────────────────────────────────── */
.chart-legend{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px;font-size:.78rem;
  color:var(--ink-2)}
.legend-item{display:inline-flex;align-items:center;gap:6px;text-transform:capitalize}
.legend-item .swatch{width:11px;height:11px;border-radius:3px;display:inline-block}

.s-high{background:var(--seq-1)} .s-medium{background:var(--seq-2)}
.s-low{background:var(--seq-3)}  .s-noise{background:var(--seq-4)}

.colchart{display:flex;align-items:flex-end;gap:10px;min-height:240px;padding:8px 2px 0;
  min-width:560px}
.colslot{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:4px}
.colstack{display:flex;flex-direction:column-reverse;justify-content:flex-start;
  width:100%;max-width:24px;min-height:1px}
/* The 2px surface gap separates touching segments — never a border, which would add ink that is
   not data. */
.colstack .seg + .seg{margin-bottom:2px}
.colstack .seg:first-child{border-radius:0 0 2px 2px}
.colstack .seg:last-child{border-radius:4px 4px 0 0}
.colvalue{font-family:var(--mono);font-size:.7rem;color:var(--ink-2);min-height:1em}
.collabel{font-family:var(--mono);font-size:.64rem;color:var(--faint);white-space:nowrap}

/* Per-competitor small multiples: one hue, so no categorical palette is involved. */
.spark{display:flex;align-items:flex-end;gap:2px;height:28px}
.spark i{flex:1 1 0;background:var(--line-2);border-radius:2px 2px 0 0;min-height:1px}
.spark i.on{background:var(--seq-2)}

.delta{display:inline-flex;align-items:center;gap:2px;font-family:var(--mono);font-size:.66rem;
  font-weight:700;margin-left:5px;padding:1px 5px;border-radius:4px}
.delta.up{color:var(--ok);background:var(--ok-soft)}
.delta.down{color:var(--muted);background:var(--surface-3)}
.delta.dn{color:var(--hi);background:var(--hi-soft)}
.delta.flat{color:var(--muted);background:var(--surface-3)}

/* ─────────────────────────────────────────────────────────────────────────
   MOBILE. The sidebar stays in the DOM at every width; on a phone it becomes a single-row
   horizontal scroller with the section labels KEPT as inline prefixes. Total chrome is capped,
   nothing is hidden, and no JavaScript is involved. Re-implemented here for the LIGHT sidebar.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .toprow{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
}
/* ── The mobile navigation disclosure ───────────────────────────────────────────────────────────
   The old mobile shell laid the ENTIRE 14-item hierarchy out as one ~2,215px horizontal strip: none
   of the links was in the initial viewport, and the whole page scrolled sideways. It is replaced by a
   real, reachable menu. The `.nav-toggle` button is `hidden` in markup and only revealed by app.js
   (script-src is strict 'self', so no inline script). PROGRESSIVE ENHANCEMENT: with JS the sidebar
   collapses behind the toggle (open ≤ two activations to any destination); WITHOUT JS the toggle stays
   hidden and the sidebar renders as a plain VERTICAL list — reachable by scrolling, and — crucially —
   never a horizontal document scroll. */
.nav-toggle{display:none}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  /* A vertical stack, never a horizontal strip. This is the no-JS baseline AND the opened state.
     `min-width:0` stops the grid item from expanding to its widest child's min-content (which pushed
     the drawer to ~342px and reintroduced document scroll when open); any non-wrapping child then
     scrolls/clip WITHIN the drawer, never the document. */
  .side{position:static;height:auto;min-width:0;max-width:100%;padding:10px 12px;border-right:0;
    border-bottom:1px solid var(--line);background:var(--surface);
    display:flex;flex-direction:column;align-items:stretch;gap:4px;
    overflow-x:hidden;overflow-y:visible;white-space:normal}
  .main{min-width:0}
  .side > *{flex:0 0 auto}
  .side-brand{border:0;padding:6px 0;margin:0}
  .side-sec{padding:6px 0;margin:0;display:block;border:0}
  .side-sec h6{display:block;margin:0 0 4px;white-space:normal}
  .side-sec .nav{display:block;white-space:normal;padding:10px 10px;margin:0;font-size:.9rem;
    min-height:44px}                       /* 44px touch target for primary phone actions */
  .wsw,.wsw-cur{width:100%}
  .side-foot{margin:6px 0 0;border-top:1px solid var(--line);padding:10px 0 0;
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:.85rem}
  .side-foot br{display:none}
  .side-foot .linkbtn{min-height:44px;display:inline-flex;align-items:center}

  /* The toggle: a real 44px control, revealed by app.js (`:not([hidden])`). */
  .nav-toggle:not([hidden]){display:inline-flex;align-items:center;gap:9px;position:sticky;top:0;
    z-index:40;margin:8px 12px 0;padding:0 14px;min-height:44px;cursor:pointer;font:inherit;
    font-size:.9rem;font-weight:600;color:var(--ink);background:var(--surface);
    border:1px solid var(--line-2);border-radius:9px}
  .nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{display:block;width:17px;
    height:2px;background:currentColor;border-radius:2px}
  .nav-toggle-bars{position:relative}
  .nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0}
  .nav-toggle-bars::before{top:-5px}.nav-toggle-bars::after{top:5px}
  /* With JS on, the sidebar is collapsed until the toggle opens it. `has-js` is set by app.js so the
     no-JS baseline (sidebar visible) is untouched. */
  body.has-js .side[data-collapsed]{display:none}

  .content{padding:16px}
  .topbar{padding:10px 16px}
  .stats,.kpis{grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr))}
  .form-grid{grid-template-columns:1fr}
  /* Any inline two-column grid (e.g. the dashboard split sections) collapses to one column so it does
     not force the document wider than the phone. */
  section.grid[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  /* WIDE data tables keep an intentional, LABELLED horizontal scroll inside their own wrapper; the
     document itself never scrolls sideways. Narrow key/value tables (no wrapper) simply reflow. */
  .table-wrap{overflow-x:auto;max-width:100%}
  .table-wrap>table{min-width:520px}
  table:not(.table-wrap table){max-width:100%}
  /* Touch sizing for the small controls the audit flagged. */
  .btn{min-height:44px}
  .iconbtn{min-width:44px;min-height:44px}
}

/* ── Inbox: two-pane team-triage surface ─────────────────────────────────────────────────────────
   A scrollable queue on the left, a disposition detail on the right. Additive and cohesive: it reuses
   the existing --tokens and the .panel/.tag/.btn primitives, and collapses at the SAME 900px
   breakpoint the rest of the shell uses. No new colour system — the review-state badges reuse the
   materiality .tag colours, mapped in the template (new→ungraded, working→medium, done→ok,
   archived→noise), so not one new hex is introduced. */
.inbox{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
.inbox-list-pane{min-width:0}
.inbox-detail-pane{min-width:0;position:sticky;top:12px}
.inbox-views{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.inbox-view{display:inline-flex;align-items:center;gap:1px}
.inbox-view-del{display:inline-flex;margin:0}
.inbox-view-del .linkbtn{color:var(--faint);font-size:.8rem;padding:2px 5px}
.inbox-view-del .linkbtn:hover{color:var(--hi)}
.inbox-view-save{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto}
.inbox-bulk-form{margin:0}
.inbox-bulkbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 2px;margin-bottom:6px}
.inbox-list{padding:0}
/* A compact row: the whole row is the selection target, the title is the actual link, the checkbox
   opts it into a bulk action. */
.inbox-row{display:flex;gap:10px;align-items:flex-start;padding:9px 13px;border-bottom:1px solid var(--line)}
.inbox-row:last-child{border-bottom:0}
.inbox-row:hover{background:var(--surface-2)}
.inbox-row.sel{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
/* The JS keyboard-nav highlight (j/k), distinct from the server-rendered selection. */
.inbox-row.kbd{outline:2px solid var(--accent);outline-offset:-2px}
.inbox-check{display:flex;align-items:center;padding-top:2px;flex:0 0 auto}
.inbox-check input{width:auto}
.inbox-row-main{min-width:0;flex:1}
.inbox-row-title{display:block;font-weight:600;font-size:.9rem;line-height:1.35;color:var(--ink)}
.inbox-row-title:hover{color:var(--accent)}
.inbox-row-meta{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:.72rem;
  color:var(--muted);margin-top:3px}
.inbox-owner{color:var(--ink-2)}
.inbox-detail-title{font-size:1.05rem;line-height:1.3;margin-top:2px}
.inbox-detail-title a:hover{color:var(--accent)}
.inbox-dispo{border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.inbox-dispo-group{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.inbox-dispo-group .eyebrow{flex:0 0 100%;margin-bottom:-2px}
.inbox-dispo-group form{display:inline-flex;margin:0}
/* Stack the two panes (list, then detail) on a phone, the same axis the rest of the shell collapses
   on. The sticky detail becomes a normal block so it does not pin over the list. */
@media (max-width:900px){
  .inbox{grid-template-columns:1fr}
  .inbox-detail-pane{position:static}
}

/* ── Recomposed Home + shell search (additive; reuses existing tokens/primitives) ─────────────── */

/* Workspace search promoted into the app shell (base.html topbar). Compact and keyboard-usable; it
   GETs the same /w/{ws}/search route the Search nav link and search.html already use. Sits between
   the crumbs spacer and the per-page actions, so it never disturbs the existing crumbs/actions row. */
.topbar-search{display:flex;align-items:center;gap:6px;min-width:0}
.topbar-search input[type=search]{width:200px;min-width:0;max-width:38vw;padding:5px 9px;font-size:.8rem}
@media (max-width:900px){.topbar-search input[type=search]{width:130px}}

/* Segmented control as links (Table | Cards on the competitor page). Mirrors the existing
   `.segbar button` styling for the anchor variant — no new colours, same container. */
.segbar a{border:0;background:transparent;color:var(--muted);font-family:var(--mono);
  font-size:.68rem;padding:4px 10px;border-radius:5px;font-weight:600;text-decoration:none}
.segbar a:hover{color:var(--ink);text-decoration:none}
.segbar a.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}

/* "Needs attention" cards reuse the .kpi visual language but are links to a pre-filtered queue. */
a.kpi{cursor:pointer;transition:background .12s}
a.kpi:hover{background:var(--surface-2);text-decoration:none}
a.kpi:hover .s{color:var(--accent)}

/* "What changed" — one reviewed insight per row (claim + competitor + confidence + status). */
.chg{display:flex;align-items:center;gap:12px;padding:12px 15px;border-bottom:1px solid var(--line)}
.chg:last-child{border-bottom:0}
.chg:hover{background:var(--surface-2);text-decoration:none}
.chg-main{min-width:0;flex:1}
.chg-ttl{font-weight:560;color:var(--ink);line-height:1.4}
.chg-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:5px;font-size:.74rem;color:var(--ink-2)}
.chg-go{color:var(--faint);font-size:1rem;flex:0 0 auto}

/* Monitoring health — collapsed <details> by default, expandable for diagnosis. */
details.health>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:8px 0}
details.health>summary::-webkit-details-marker{display:none}
details.health>summary .note{color:var(--muted);font-size:.8rem}
details.health .chev{margin-left:auto;color:var(--faint);transition:transform .15s}
details.health[open] .chev{transform:rotate(180deg)}

/* ── Competitor detail: sticky identity + section sub-nav ────────────────────────────────────────
   The competitor page is recomposed into seven governed sections (Overview, Changes, Evidence,
   Messaging, Assets, Activity, Monitoring). This is ONE sticky component under the global topbar: an
   always-visible identity summary and a keyboard-reachable rail of anchor links to those sections.
   Additive, token-only, theme-aware; on narrow screens it goes static (so it never fights the mobile
   topbar) and the rail scrolls horizontally rather than forcing the document wider. */
.rival-head{position:sticky;top:46px;z-index:14;background:var(--bg);
  margin:-4px 0 16px;padding:6px 0 0;border-bottom:1px solid var(--line)}
.rival-head-id{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:8px}
.rival-head-id .page-title{font-size:1.2rem;margin:0}
.subnav{display:flex;gap:2px;flex-wrap:wrap;padding:4px 0 6px}
.subnav a{font-size:.78rem;color:var(--muted);text-decoration:none;padding:5px 10px;
  border-radius:var(--radius-sm);border:1px solid transparent;white-space:nowrap;line-height:1.1}
.subnav a:hover{color:var(--ink);background:var(--surface-2);border-color:var(--line)}
.subnav a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.subnav a.on{color:var(--accent);background:var(--accent-soft);border-color:var(--line)}
/* Anchored sections clear the sticky topbar + this sticky header when jumped to via the rail. */
.section[id]{scroll-margin-top:120px}
/* Messaging groups its three blocks (ads / posts / resources) under one <h2>; each is a lighter h3. */
.subsec{margin-top:18px}
.subsec>.section-head h3{font-size:.92rem}

/* Activity timeline — a compact chronological log of every collected signal (date · kind · title). */
.timeline{list-style:none;margin:0;padding:0}
.tl-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;padding:9px 15px;
  border-bottom:1px solid var(--line)}
.tl-row:last-child{border-bottom:0}
.tl-row:hover{background:var(--surface-2)}
.tl-when{flex:0 0 auto;min-width:64px}
.tl-what{min-width:0;flex:1;overflow-wrap:anywhere}
.tl-what a{color:var(--ink)} .tl-what a:hover{color:var(--accent)}

/* ── Structured page diff (the shared change_body renderer) ──────────────────────────────────────
   Added / removed lines rendered distinctly and IDENTICALLY on the competitor page, the feed and the
   inbox detail. The +/- marker is kept on every line so the add/remove distinction never rests on
   colour alone (WCAG 1.4.1); the colour reuses the semantic --ok / --hi tokens and reads in both
   themes. A body with no structured +/- lines never reaches this — it degrades to the honest
   site-change note or to prose (see the macro), so a diff is never fabricated. */
.diff-lines{margin-top:7px;border:1px solid var(--line);border-radius:6px;overflow:auto;
  max-height:220px;background:var(--surface-2)}
.sig .diff.diff-lines{padding:0;white-space:normal}
.dl{display:flex;gap:8px;align-items:baseline;padding:3px 10px;font-family:var(--mono);
  font-size:.72rem;line-height:1.5;border-left:3px solid transparent}
.dl-mark{flex:0 0 auto;width:.8em;text-align:center;font-weight:700;user-select:none}
.dl-text{min-width:0;white-space:pre-wrap;overflow-wrap:anywhere}
.dl-add{background:var(--ok-soft);border-left-color:var(--ok)}
.dl-add .dl-mark{color:var(--ok)}
.dl-del{background:var(--hi-soft);border-left-color:var(--hi)}
.dl-del .dl-mark{color:var(--hi)}
.dl-ctx{color:var(--ink-2)}
.dl-add .dl-text,.dl-del .dl-text{color:var(--ink)}

@media (max-width:900px){
  .rival-head{position:static;margin-top:0}
  .subnav{flex-wrap:nowrap;overflow-x:auto}
  .section[id]{scroll-margin-top:8px}
}

/* ── Live social intelligence — visual post + comment-thread cards ─────────────────────────────── */
.live-dot{display:inline-block;vertical-align:middle;margin-left:9px;font-size:.6rem;font-weight:800;
  letter-spacing:.08em;color:#fff;background:var(--hi);padding:2px 8px;border-radius:999px;position:relative;top:-2px}
.live-dot::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#fff;
  margin-right:5px;vertical-align:middle;animation:si-pulse 1.8s ease-in-out infinite}
@keyframes si-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.live-dot::before{animation:none}}
.si-summary{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-end;padding:17px 22px;margin-bottom:15px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.si-stat .n{font-size:1.75rem;font-weight:680;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.si-stat .l{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:6px}
.si-stat.alarm .n{color:var(--hi)}
.si-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.si-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:box-shadow .15s,transform .15s}
.si-card:hover{box-shadow:0 6px 22px rgba(9,25,25,.12),0 2px 7px rgba(9,25,25,.07);transform:translateY(-2px)}
.si-shot{position:relative;display:block;aspect-ratio:16/10;background:var(--surface-3);overflow:hidden}
.si-shot img{width:100%;height:100%;object-fit:cover;display:block}
.si-noshot{position:absolute;inset:0;display:grid;place-items:center;color:var(--faint);font-size:.8rem}
.si-platform{position:absolute;left:10px;top:10px;font-size:.66rem;font-weight:700;color:#fff;
  background:rgba(0,0,0,.55);padding:3px 9px;border-radius:999px}
.si-body{padding:13px 15px 15px}
.si-cap{font-weight:560;color:var(--ink);font-size:.92rem;margin-bottom:10px}
.si-metrics{display:flex;gap:15px;font-size:.78rem;color:var(--muted);padding-bottom:11px;
  border-bottom:1px solid var(--line);margin-bottom:12px;font-variant-numeric:tabular-nums}
.si-gap{margin-left:auto;color:var(--hi);font-weight:700}
.si-thread{list-style:none;display:flex;flex-direction:column;gap:12px}
.si-cmt{display:flex;gap:9px}
.si-av{flex:none;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;
  font-size:.72rem;font-weight:800;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent);opacity:.92}
.si-cmt-b{min-width:0;flex:1}
.si-cmt-h{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:2px}
.si-user{font-weight:640;font-size:.78rem;color:var(--ink-2)}
.si-flag{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:1px 6px;border-radius:999px;white-space:nowrap}
.si-flag.f-q{background:var(--med-soft);color:var(--med)}
.si-flag.f-spam{background:var(--hi-soft);color:var(--hi)}
.si-flag.f-lang{background:var(--accent-soft);color:var(--accent)}
.si-cmt-t{font-size:.85rem;color:var(--ink-2);line-height:1.42;word-break:break-word}
@media (max-width:640px){.si-grid{grid-template-columns:1fr}}

/* ── Brand monogram avatars ────────────────────────────────────────────────────────────────────── */
.avatar{position:relative;flex:none;display:inline-grid;place-items:center;width:34px;height:34px;
  border-radius:9px;font-size:.82rem;font-weight:800;color:#fff;line-height:1;user-select:none;
  overflow:hidden;box-shadow:inset 0 0 0 1px rgba(10,25,25,.09)}
.av-logo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;z-index:1}
.av-mono{position:relative}
.avatar.av-lg{width:46px;height:46px;border-radius:12px;font-size:1.05rem}
.avatar.av-sm{width:27px;height:27px;border-radius:7px;font-size:.66rem}
.av-0{background:#0C6E68}.av-1{background:#3457C4}.av-2{background:#2F7D54}.av-3{background:#6D4AA0}
.av-4{background:#B03A72}.av-5{background:#A15C07}.av-6{background:#BD4B24}.av-7{background:#41637A}
.rcard-name{display:flex;gap:9px;align-items:center;margin-bottom:2px}
.rcard-name h4{margin:0}
/* ── Opportunity mix chips ─────────────────────────────────────────────────────────────────────── */
.opp-mix{display:flex;gap:8px;flex-wrap:wrap;margin-top:7px}
.opp-chip{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;font-weight:560;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--line);padding:4px 10px 4px 9px;border-radius:999px}
.opp-chip i{width:8px;height:8px;border-radius:50%;flex:none}
.opp-chip b{color:var(--ink);font-weight:700}
/* ── Premium hover tooltips (dark, floating) ───────────────────────────────────────────────────── */
[data-tip]{position:relative}
[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:0;bottom:calc(100% + 9px);z-index:60;
  width:max-content;max-width:300px;white-space:normal;background:var(--nav);color:var(--nav-ink);
  font-size:.735rem;font-weight:500;line-height:1.45;padding:9px 12px;border-radius:9px;
  box-shadow:0 12px 34px rgba(0,0,0,.28);pointer-events:none;animation:tip-in .12s ease-out}
[data-tip]:hover::before{content:"";position:absolute;left:15px;bottom:calc(100% + 3px);z-index:60;
  border:6px solid transparent;border-top-color:var(--nav);pointer-events:none}
@keyframes tip-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){[data-tip]:hover::after{animation:none}}
.tag[data-tip],.bar[data-tip]{cursor:help}
/* ── Signal rows: premium hover affordance ─────────────────────────────────────────────────────── */
.sig{transition:background .15s ease,box-shadow .15s ease}
.sig:hover{background:var(--surface-2)}
.sig:hover .bar{filter:saturate(1.25) brightness(1.05)}

/* ═══ PREMIUM POLISH LAYER — global, additive; lifts every page ═══════════════════════════════════ */
@media (prefers-reduced-motion:no-preference){
  .btn,.tag,.chip,.pill,.rcard,.panel,a,input,select,textarea,summary,.tl-row,.wall-card,.stat,.opp-chip{
    transition:background-color .15s ease,border-color .15s ease,box-shadow .17s ease,color .12s ease,transform .16s cubic-bezier(.2,.7,.3,1)}
}
/* Buttons: depth, lift, press */
.btn{box-shadow:0 1px 1.5px rgba(9,25,25,.05)}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 11px rgba(9,25,25,.11)}
.btn:active{transform:translateY(0);box-shadow:0 1px 1.5px rgba(9,25,25,.06)}
.btn.ghost{box-shadow:none}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--line-2);transform:translateY(-1px)}
/* Premium accessible focus ring everywhere */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:5px}
/* Inputs: refined focus with an accent ring */
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}
/* Links: crisper underline rhythm */
a{text-decoration-thickness:.6px;text-underline-offset:2.5px}
/* Table rows: hover affordance */
.t tbody tr,.tbl tbody tr,table.t tbody tr{transition:background .12s ease}
.t tbody tr:hover,.tbl tbody tr:hover{background:var(--surface-2)}
/* Timeline rows hover */
.tl-row:hover{background:var(--surface-2)}
/* Brand-tinted text selection */
::selection{background:var(--accent-soft);color:var(--ink)}
/* Premium thin scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:3px solid var(--bg);background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}
::-webkit-scrollbar-track{background:transparent}
/* Panels: a hair more depth on hover for the interactive ones */
.wall-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(9,25,25,.12)}

/* ═══ Chrome premium (sidebar + top-bar) ═════════════════════════════════════════════════════════ */
.side{border-right:1px solid var(--line)}
.side a.nav{position:relative}
.side a.nav.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.side a.nav.on::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;
  border-radius:0 3px 3px 0;background:var(--accent)}
.wsw > summary:hover{box-shadow:0 1px 3px rgba(9,25,25,.07)}
.wsw[open] .wsw-caret{transform:rotate(180deg)}
.wsw-menu{box-shadow:0 16px 44px rgba(9,25,25,.17)}
.topbar{position:sticky;top:0;z-index:20;backdrop-filter:saturate(1.08)}
/* ═══ Social cards: premium hover-zoom on the post ═══════════════════════════════════════════════ */
.si-shot img{transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.si-card:hover .si-shot img{transform:scale(1.055)}
.si-card:hover{box-shadow:0 10px 28px rgba(9,25,25,.13)}
.si-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.06));pointer-events:none}
.si-more{margin-top:10px}
.si-more>summary{cursor:pointer;font-size:.74rem;font-weight:650;color:var(--accent);list-style:none;
  display:inline-flex;align-items:center;gap:6px;padding:3px 0;user-select:none}
.si-more>summary::-webkit-details-marker{display:none}
.si-more>summary::before{content:"▸";font-size:.62rem;transition:transform .14s ease}
.si-more[open]>summary::before{transform:rotate(90deg)}
.si-more>summary:hover{filter:brightness(1.1)}

/* ═══ Premium split-screen sign-in ═══════════════════════════════════════════════════════════════ */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1.05fr}
.auth-panel{display:flex;align-items:center;justify-content:center;padding:40px 30px;background:var(--bg)}
.auth .login{width:100%;max-width:364px;box-shadow:none;border:0;padding:0;background:none}
.auth-brand{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:24px}
.auth-dot{color:var(--accent)}
.auth-h1{font-size:1.75rem;letter-spacing:-.025em;margin:0 0 6px;color:var(--ink)}
.auth-sub{color:var(--muted);font-size:.9rem;margin:0 0 22px}
.auth-btn{width:100%;justify-content:center;margin-top:6px;padding:11px 16px;font-size:.92rem}
.auth-legal{text-align:center;margin-top:22px;font-size:.75rem;color:var(--faint)}
.auth-legal a{color:var(--faint)}
.auth-hero{position:relative;overflow:hidden;display:flex;align-items:center;padding:56px;
  background:linear-gradient(155deg,var(--nav) 0%,var(--nav-2) 100%);color:var(--nav-ink)}
.auth-hero::before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;top:-140px;right:-160px;
  background:radial-gradient(circle,var(--accent) 0%,transparent 66%);opacity:.24}
.auth-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 92%,var(--accent-soft),transparent 42%)}
.auth-hero-in{position:relative;max-width:430px}
.auth-hero-mark{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nav-muted);margin-bottom:28px}
.auth-hero-h{font-size:2.15rem;line-height:1.14;letter-spacing:-.025em;margin:0 0 16px;color:#fff}
.auth-hero-p{color:var(--nav-muted);font-size:1rem;line-height:1.6;margin:0 0 28px}
.auth-hero-list{list-style:none;display:flex;flex-direction:column;gap:13px;padding:0;margin:0}
.auth-hero-list li{position:relative;padding-left:27px;color:var(--nav-ink);font-size:.93rem}
.auth-hero-list li::before{content:"✓";position:absolute;left:0;top:-1px;color:var(--accent);font-weight:800}
@media (max-width:820px){.auth{grid-template-columns:1fr}.auth-hero{display:none}}

/* ═══ Per-surface premium polish (merged from workflow signals-premium-pass) ═══════════════════ */
/* Battlecards surface — premium enhancements, namespaced .bc-.
   All colours are design-system tokens only. Every rule here is additive polish:
   the template already lays out correctly on the shared app.css classes + inline
   token styles, so nothing below is load-bearing. */

/* KPI status tiles: let the coloured status TAG act as the label without the
   .stat .l uppercase/letter-spacing transform fighting the tag's own type. */
.bc-status .stat .l.bc-stat-l{
  text-transform:none;
  letter-spacing:0;
  margin-top:8px;
}

/* Competitor cell — keep the brand avatar and the name column tidy. */
.bc-co{min-width:0}
.bc-co a{overflow-wrap:anywhere}
.bc-co .bc-prio{display:block;margin-top:3px}

/* A competitor with no card is a visible gap, not an error: a quiet accent rail
   and a hair more warmth on hover so the "Write one" action reads as the next step. */
tr.bc-missing td:first-child{box-shadow:inset 2px 0 0 var(--med-soft)}
tr.bc-missing td{background:var(--surface-2)}
.tbl tbody tr.bc-missing:hover td{background:var(--surface-3)}

/* The "may be stale" AI chip sits inline with the status tag — give it breathing room. */
.bc-status .stat .l .tag{max-width:100%}
/* Feed surface — premium polish. Namespaced .fd-; tokens only, no hardcoded colours.
   Loaded in addition to app.css; nothing here overrides a shared class. */

/* Rival identity inside a dense signal-meta row: brand avatar + name read as one unit,
   vertically centred against the tags around it. The avatar tile itself is styled by
   app.css (.avatar/.av-sm); this only handles the inline pairing. */
.fd-rival{display:inline-flex;align-items:center;gap:6px}
.fd-rival .avatar.av-sm{width:22px;height:22px;border-radius:6px;font-size:.58rem}

/* Teaching empty state: the next-action buttons sit centred under the guidance copy,
   matching the centred .empty block from app.css. */
.fd-empty-acts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
/* Premium polish for insights_list.html — namespaced .ins-, tokens only.
   Additive: reuses the design system (.tbl, .tag, .avatar, .chip-*, data-tip)
   and only adds what the shared classes don't already cover. */

/* Competitor cell: brand avatar + name, aligned as one identity in the table row. */
.ins-co{display:inline-flex;align-items:center;gap:8px;font-weight:560;max-width:100%}
.ins-co .ins-co-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Evidence count as a quiet, mono citation badge — a bare number reads as noise;
   a bordered pill reads as "this insight cites N signals". */
.ins-ev{display:inline-block;min-width:24px;padding:2px 8px;border-radius:var(--radius-sm);
  font-family:var(--mono);font-size:.72rem;font-weight:600;line-height:1.3;text-align:center;
  color:var(--ink-2);background:var(--surface-3);border:1px solid var(--line)}
.ins-ev.ins-ev-0{color:var(--faint);background:transparent;border-color:var(--line-2)}

/* Header cells that carry jargon get a help cursor to signal the tooltip is there. */
.tbl th[data-tip]{cursor:help;text-decoration:underline dotted var(--line-2);
  text-underline-offset:3px;text-decoration-thickness:1px}
/* ── Target dashboard (target.html) — namespaced premium polish ──────────────────
   Additive only. Colours come exclusively from design-system tokens; no hex.
   Everything else on this surface reuses existing app.css components. */

/* A KPI/metric label that carries an explanatory data-tip should read as hoverable,
   the same affordance app.css already gives .tag[data-tip] / .bar[data-tip]. */
.dash-tip{cursor:help}

/* Give the metric labels that now carry a tooltip a faint dotted underline so a
   first-timer can SEE there is an explanation to hover — never colour-alone, and it
   inherits the label's own colour so it stays legible in both themes. */
.kpi .l.dash-tip,
.gauge h3.dash-tip{
  text-decoration:underline dotted var(--line-2);
  text-underline-offset:3px;
}
.gauge h3.dash-tip{text-decoration-thickness:1px}
/* Trends surface — premium polish. Namespaced .trd-*; tokens only, no hardcoded colours.
   Every rule degrades gracefully: if this sheet never loads, the page still reads correctly
   (avatars fall back to inline flow, spacing to default margins). */

/* KPI overview row sits above the charts; give it breathing room from the page sub. */
.trd-kpis{margin-top:20px;margin-bottom:26px}

/* Competitor identity cell in the movers table: brand monogram + name on one baseline. */
.trd-ent{display:flex;align-items:center;gap:9px;min-width:0}
.trd-ent .trd-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Legend items become quietly interactive now that each carries an explanatory tooltip. */
.trd-legend .legend-item{cursor:help;border-radius:var(--radius-sm);padding:2px 4px;margin:-2px -2px;
  transition:background .12s ease}
.trd-legend .legend-item:hover{background:var(--surface-2)}
/* Workspace overview — premium polish, namespaced .ws-  (tokens only, no hardcoded colors).
   The live page (base.html) loads only app.css, so workspace.html was made self-sufficient with
   existing design-system classes + inline token styles. These rules are additive refinements for
   any build step that concatenates premium_css/*.css after app.css — safe to load, nothing here is
   required for the surface to render correctly. */

/* Target identity cell: avatar + name/url stack, kept vertically centered. */
.ws-tgt{display:inline-flex;align-items:center;gap:10px;min-width:0}
.ws-tgt-id{min-width:0}
.ws-tgt-id a{font-weight:640}
.ws-tgt-id .ws-url{color:var(--faint);font-family:var(--mono);font-size:.72rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:26ch}

/* KPI strip: nudge the severity tiles so High/Medium read as the priority signal. */
.ws-kpis .stat.hi .n{color:var(--hi)}
.ws-kpis .stat.med .n{color:var(--med)}

/* Row hover affordance consistent with the rest of the app's table lift. */
.ws-table tbody tr{transition:background var(--motion,.15s) ease}
.ws-table tbody tr:hover{background:var(--surface-2)}

/* ═══ Profile / visual social-footprint module (rival overview redesign) ═════════════════════════ */
.pf-facts{display:grid;grid-template-columns:1fr 1fr;gap:13px 22px}
.pf-facts .pf-wide{grid-column:1 / -1}
.pf-facts > div{display:flex;flex-direction:column;gap:3px;min-width:0}
.pf-k{font-family:var(--mono);font-size:.58rem;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.pf-v{font-size:.9rem;color:var(--ink);font-weight:500;line-height:1.4}
.pf-social{margin-top:18px}
.pf-rows{margin-top:9px;display:flex;flex-direction:column;gap:1px}
.pf-row{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:var(--radius-sm);color:var(--ink-2);font-size:.83rem;line-height:1.2}
.pf-row:hover{background:var(--surface-2);text-decoration:none}
.pf-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--pc,var(--muted))}
.pf-plat{font-weight:640;color:var(--ink);min-width:84px;flex:none}
.pf-handle{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pf-followers{margin-left:auto;font-family:var(--mono);font-size:.76rem;color:var(--ink);font-weight:600;flex:none;white-space:nowrap}
.pf-act{width:7px;height:7px;border-radius:50%;flex:none;background:var(--low)}
.pf-act.act-veryhigh,.pf-act.act-high{background:var(--ok)}
.pf-act.act-medium{background:var(--med)}
.pf-act.act-low,.pf-act.act-dormant{background:var(--line-2)}
.pf-instagram{--pc:#E1306C}.pf-x{--pc:#1DA1F2}.pf-twitter{--pc:#1DA1F2}.pf-tiktok{--pc:#EE1D52}
.pf-facebook{--pc:#1877F2}.pf-youtube{--pc:#FF0000}.pf-linkedin{--pc:#0A66C2}.pf-threads{--pc:#8A8A8A}
.pf-meta{margin-top:11px;display:flex;gap:8px;flex-wrap:wrap;font-size:.73rem}
.pf-mchip{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px 10px;color:var(--muted)}
.pf-desc{margin-top:16px;color:var(--ink-2);line-height:1.6;font-size:.9rem}
.ev-block{margin-top:16px}
.ev-sources{margin-top:9px;display:flex;flex-wrap:wrap;gap:7px}
.ev-chip{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:550;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px 11px;max-width:100%}
.ev-chip::before{content:"↗";font-size:.64rem;color:var(--faint)}
.ev-chip:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}

/* ═══ Social handles: top-N + "all channels" modal ══════════════════════════════════════════════ */
.pf-count{font-family:var(--mono);font-size:.6rem;color:var(--faint);font-weight:600;margin-left:5px;background:var(--surface-3);padding:1px 7px;border-radius:999px}
.pf-scope{color:var(--muted);font-size:.76rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none;max-width:16ch}
.pf-more{margin-top:11px;font-size:.78rem;font-weight:600;color:var(--accent);background:var(--accent-soft);border:1px solid transparent;border-radius:999px;padding:6px 14px;cursor:pointer;transition:background .13s ease,color .13s ease}
.pf-more:hover{background:var(--accent);color:var(--on-accent)}
.pf-live{width:8px;height:8px;border-radius:50%;flex:none}
.pf-live.lv-live{background:var(--ok)}
.pf-live.lv-blocked{background:var(--med)}
.pf-live.lv-dead{background:var(--line-2)}
.hmodal{width:min(700px,93vw);max-height:84vh;border:1px solid var(--line);border-radius:var(--radius);padding:0;background:var(--surface);color:var(--ink);box-shadow:0 30px 90px rgba(0,0,0,.34)}
.hmodal::backdrop{background:rgba(9,25,25,.52)}
.hmodal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:17px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:1}
.hmodal-head h3{font-size:1.02rem;margin:0}
.hmodal-sub{font-size:.76rem;color:var(--muted);margin-top:3px}
.hmodal-x{width:31px;height:31px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);cursor:pointer;font-size:.82rem;line-height:1;flex:none;transition:background .12s,color .12s}
.hmodal-x:hover{background:var(--surface-3);color:var(--ink)}
.hmodal-body{padding:12px 14px;overflow-y:auto;max-height:calc(84vh - 66px)}

/* ── SOCIAL OPERATIONS INTELLIGENCE ────────────────────────────────────────────────────────────────
   The "who runs their social" module on a prospect page: a coverage verdict banner, the ICUC wedge
   callout, sourced agency rows (with an ICUC-competitor badge), the in-house evidence, a dated
   history, operational tells, and a sources/honesty footer. Reuses .tag/.chip/.ev-chip/.panel and the
   data-tip tooltip; every confidence grade and source is inherited from those, so nothing here can
   render an unattributed claim. */
.so-verdict{display:flex;gap:18px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--line-2);
  border-radius:var(--radius);padding:15px 18px;box-shadow:var(--shadow)}
.so-verdict.m-in_house{border-left-color:var(--ok)}
.so-verdict.m-agency_led{border-left-color:var(--hi)}
.so-verdict.m-hybrid{border-left-color:var(--med)}
.so-verdict.m-bpo_care{border-left-color:var(--med)}
.so-verdict.m-unknown{border-left-color:var(--line-2)}
.so-verdict-main{flex:1 1 460px;min-width:0}
.so-model{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.so-model-lbl{font-size:1.12rem;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.so-sum{margin:8px 0 0;font-size:.92rem;line-height:1.5;color:var(--ink-2);max-width:64ch}
.so-verdict-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.so-flag-hot{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.04em;
  color:var(--on-accent);background:var(--hi);padding:3px 8px;border-radius:5px;cursor:help}
.so-flag-soft{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.04em;
  color:var(--med);background:var(--med-soft);border:1px solid var(--med);padding:2px 7px;border-radius:5px;cursor:help}
.so-vstamp{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.03em;
  padding:2px 7px;border-radius:5px;border:1px solid var(--line);cursor:help}
.so-vstamp.v-verified{color:var(--ok);background:var(--ok-soft);border-color:var(--ok)}
.so-vstamp.v-partial{color:var(--med);background:var(--med-soft);border-color:var(--med)}
.so-vstamp.v-unverified{color:var(--muted);background:var(--surface-3)}

/* Ownership verification — the sales-deciding question the coverage_model alone can't answer: who does the
   BULK day-to-day grind (internal vs a quiet vendor), how sure we are, and what a rep must still confirm. */
.so-ownership{margin-top:10px;background:var(--surface-2);border:1px solid var(--line);
  border-left:4px solid var(--line-2);border-radius:var(--radius);padding:11px 15px}
.so-ownership.ov-confirmed_inhouse,.so-ownership.ov-likely_inhouse{border-left-color:var(--ok)}
.so-ownership.ov-ambiguous{border-left-color:var(--med)}
.so-ownership.ov-likely_outsourced,.so-ownership.ov-confirmed_outsourced{border-left-color:var(--hi)}
.ov-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ov-eyebrow{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);flex-basis:100%}
.ov-verdict{font-size:.9rem;font-weight:700;color:var(--ink)}
.ov-owner{margin:6px 0 0;font-size:.86rem;line-height:1.45;color:var(--ink-2);max-width:74ch}
.ov-residual,.ov-ask{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:8px}
.ov-k{font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);flex:none;padding-top:2px}
.ov-q{font-size:.86rem;line-height:1.45;color:var(--ink-2);font-style:italic;max-width:70ch}
.chip.warn{background:var(--med-soft);border:1px solid var(--med);color:var(--med)}

/* ICUC wedge — the money box: the specific play against the evidenced coverage model. */
.so-wedge{margin-top:12px;background:linear-gradient(180deg,var(--accent-soft),transparent);
  border:1px solid var(--accent);border-radius:var(--radius);padding:13px 16px}
.so-wedge-tag{font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-2)}
.so-wedge .so-vs{color:var(--hi)}
.so-wedge p{margin:6px 0 0;font-size:.94rem;line-height:1.5;color:var(--ink);max-width:78ch}

/* Agency rows */
.so-agency{padding:11px 0;border-top:1px solid var(--line)}
.so-agency:first-child{border-top:0}
.so-agency.so-hot{margin:0 -15px;padding:11px 15px;background:var(--hi-soft);
  border-top:1px solid var(--hi-soft);border-left:3px solid var(--hi)}
.so-agency.so-hot-soft{margin:0 -15px;padding:11px 15px;background:var(--med-soft);
  border-top:1px solid var(--med-soft);border-left:3px solid var(--med)}
.so-agency.so-former{opacity:.72}
.so-ag-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.so-ag-name{font-weight:650;font-size:.94rem;color:var(--ink)}
.so-status{font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:2px 6px;border-radius:4px;cursor:help}
.so-status.s-current{color:var(--ok);background:var(--ok-soft)}
.so-status.s-former{color:var(--muted);background:var(--surface-3)}
.so-status.s-unconfirmed{color:var(--med);background:var(--med-soft)}
.so-badge{font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.03em;
  padding:2px 7px;border-radius:4px;cursor:help;white-space:nowrap}
.so-comp-direct{color:#fff;background:var(--hi)}
.so-comp-adj{color:var(--med);background:var(--med-soft);border:1px solid var(--med)}
.so-comp-tool{color:var(--muted);background:var(--surface-3)}
.so-ag-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:5px;font-size:.82rem;color:var(--muted)}
.so-role{color:var(--ink-2);font-weight:550}
.so-ev{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.so-hist{margin-top:8px;border-top:1px solid var(--line);padding-top:6px}
.so-hist>summary{font-size:.8rem;color:var(--accent);cursor:pointer;padding:4px 0;list-style:none}
.so-hist>summary::-webkit-details-marker{display:none}
.so-hist>summary::before{content:"▸ ";color:var(--faint)}
.so-hist[open]>summary::before{content:"▾ "}

/* In-house evidence */
.so-kv{display:flex;gap:10px;margin-top:9px;font-size:.86rem;align-items:baseline}
.so-kv .so-k{flex:0 0 92px;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);padding-top:2px}
.so-kv .so-v{flex:1 1 auto;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.so-people{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:.86rem}
.so-people li{color:var(--ink-2);padding-left:12px;position:relative}
.so-people li::before{content:"—";position:absolute;left:0;color:var(--faint)}

/* History timeline */
.so-tl{list-style:none;margin:0;padding:0}
.so-tl-row{display:flex;gap:12px;padding:9px 0;border-top:1px solid var(--line);align-items:baseline}
.so-tl-row:first-child{border-top:0}
.so-tl-date{flex:0 0 62px;color:var(--faint);font-size:.74rem;text-align:right}
.so-tl-body{flex:1 1 auto;font-size:.88rem;line-height:1.5;color:var(--ink-2);
  display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* Operational tells */
.so-tells{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.so-tells li{font-size:.88rem;line-height:1.5;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.so-tell-k{font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent-2);background:var(--accent-soft);padding:2px 6px;border-radius:4px;flex-shrink:0}

/* Sources + honesty footer */
.so-foot{margin-top:14px;padding:13px 16px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius)}
.so-foot-src .so-ev{margin-top:8px}
.so-notes{margin:12px 0 0;font-size:.82rem;line-height:1.5;color:var(--muted);font-style:italic}
.so-notes-k{font-style:normal;font-weight:650;color:var(--ink-2)}
.so-badge[data-tip],.so-flag-hot[data-tip],.so-status[data-tip],.so-vstamp[data-tip]{cursor:help}

/* ══ SIGNAL SEND COCKPIT — reforged to the design critique (recommendation-as-UI) ══════════════════ */
:root{
  --augment:#257A55; --augment-soft:#EEF7F2; --augment-line:#CBE3D5;
  --displace:#A94432; --displace-soft:#FBF1EE; --displace-line:#EBCFC8;
}
/* thin sticky prospect header (52px, blurred, recommendation survives scroll on compress) */
.cockpit-head{position:sticky;top:0;z-index:20;padding:9px 0;margin-bottom:2px;
  background:color-mix(in srgb, var(--bg) 90%, transparent);backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line)}
.ch-id{display:flex;align-items:center;gap:12px}
.ch-name{min-width:0}
.ch-name h1{margin:0;font-size:18px;font-weight:650;letter-spacing:-.025em;line-height:1.15}
.ch-sub{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px;margin-top:2px;flex-wrap:wrap}
.ch-sub .dot{width:3px;height:3px;border-radius:50%;background:var(--line-2,#c8cfd0)}
.ch-actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex:none}

/* the OPERATING SURFACE — Play (judge) + Compose (write) as ONE panel, side by side */
.operator{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,.82fr);
  margin-top:16px;border:1px solid var(--line-2,#DDE1E1);border-radius:14px;overflow:hidden;
  background:var(--surface);box-shadow:0 1px 2px rgba(16,24,24,.03),0 10px 30px rgba(16,24,24,.04)}
@media(max-width:1200px){.operator{grid-template-columns:1fr}}

/* THE PLAY — the recommendation IS the interface */
.op-play{padding:24px 26px 22px;position:relative}
.op-play::before{content:"";position:absolute;inset:0 auto 0 0;width:3px}
.op-play.play-augment::before{background:var(--augment)}
.op-play.play-displace::before{background:var(--displace)}
.play-eyebrow{display:flex;align-items:center;gap:10px}
.sem{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.sem-augment{color:var(--augment)}.sem-displace{color:var(--displace)}
.play-conf{font-size:11px;color:var(--muted);font-weight:500}
.play-title{margin:11px 0 0;font-size:28px;line-height:1.08;font-weight:650;letter-spacing:-.035em;color:var(--ink);max-width:20ch}
.play-hook{margin:13px 0 0;font-size:17px;line-height:1.36;font-weight:600;letter-spacing:-.012em;color:var(--ink);max-width:52ch}
.play-thesis{margin:9px 0 0;font-size:14px;line-height:1.55;color:var(--ink-2);max-width:64ch}
.play-actions{display:flex;align-items:center;gap:18px;margin-top:18px}
.btn.primary{height:34px;padding:0 15px;border-radius:7px;font-size:13px;font-weight:600;
  background:var(--accent);color:var(--on-accent);border:0;display:inline-flex;align-items:center;cursor:pointer;transition:background .12s}
.btn.primary:hover{background:var(--accent-2)}
.btn-text{background:none;border:0;color:var(--accent);font-size:13px;font-weight:600;cursor:pointer;padding:0}
.btn-text:hover{text-decoration:underline}
.play-facts{display:flex;gap:30px;flex-wrap:wrap;margin-top:20px;padding-top:15px;border-top:1px solid var(--line)}
.play-facts .fk{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.play-facts .fv{display:block;font-size:13px;font-weight:500;color:var(--ink);margin-top:3px}

/* other viable angles — findings as rows, not truncated pills */
.play-more{margin-top:18px}
.play-more-h{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.finding{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:7px 0;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.finding .f-sev{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);flex:none}

/* COMPOSE column — the execution surface, one border (not a sibling card) */
.op-compose{border-left:1px solid var(--line);background:var(--surface-2);padding:20px 22px;scroll-margin-top:70px}
@media(max-width:1200px){.op-compose{border-left:0;border-top:1px solid var(--line)}}
.op-compose>h3{margin:0 0 4px;font-size:13px;font-weight:600;color:var(--ink)}
.op-compose .oc-sub{font-size:11px;color:var(--muted);margin:0 0 12px}
.op-compose .f label{font-size:11px;color:var(--muted);font-weight:500}
.op-compose select,.op-compose input[type=text]{font-size:13px}

/* metadata chips — neutral fill, no border (data ≠ control) */
.mchip{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;background:var(--surface-2);color:var(--ink-2);font-size:11px;font-weight:500;border:0}

/* tabs — nouns, ink underline, quiet (interactivity ≠ everything) */
.rtabs{margin-top:30px}
.rtablist{display:flex;gap:24px;border-bottom:1px solid var(--line);overflow-x:auto}
.rtab{appearance:none;background:none;border:0;padding:10px 0 11px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;position:relative;white-space:nowrap}
.rtab:hover{color:var(--ink)}
.rtab.on{color:var(--ink);font-weight:600}
.rtab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink)}
.rtab:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.rtabpanels{padding-top:16px}
.rtabpanels .section{scroll-margin-top:70px}
.compose-sec{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:var(--surface)}

/* compose column internals */
.oc-sub{font-size:11px;color:var(--muted);margin:0 0 14px}
.oc-form{display:flex;flex-direction:column;gap:12px}
.oc-f{display:flex;flex-direction:column;gap:4px}
.oc-f label{font-size:11px;font-weight:500;color:var(--muted)}
.oc-f .hint{font-weight:400;color:var(--faint,var(--muted));opacity:.85}
.oc-f select,.oc-f input[type=text]{height:32px;padding:0 9px;font-size:13px;border:1px solid var(--line-2,#D5DADA);border-radius:7px;background:var(--surface);color:var(--ink);width:100%}
.oc-f input[type=text]{padding:0 10px}
.oc-f select:focus,.oc-f input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.oc-row{display:flex;gap:9px}.oc-row .oc-f{flex:1;min-width:0}
.oc-actions{display:flex;align-items:center;gap:14px;margin-top:4px}
.oc-actions .btn.primary[disabled]{opacity:.5;cursor:not-allowed}
/* status banners — quiet, one border-tint */
.oc-banner{border-radius:9px;padding:11px 13px;margin-bottom:12px;border:1px solid var(--line)}
.oc-banner .oc-b-v{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.oc-banner .oc-b-p{margin:4px 0 0;font-size:12px;line-height:1.5;color:var(--ink-2)}
.oc-run{background:var(--accent-soft);border-color:var(--accent-line,var(--accent-soft))}
.oc-ok{background:var(--augment-soft);border-color:var(--augment-line)}.oc-ok .oc-b-v{color:var(--augment)}
.oc-warn{background:#FBF6EC;border-color:#EAD9B0}
.oc-err{background:var(--displace-soft);border-color:var(--displace-line)}.oc-err .oc-b-v{color:var(--displace)}
/* claims budget disclosure */
.oc-budget{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.oc-budget>summary{cursor:pointer;font-size:11px;font-weight:600;color:var(--accent);list-style:none;display:flex;align-items:center;gap:6px}
.oc-budget>summary::-webkit-details-marker{display:none}
.oc-budget>summary::before{content:"▸";font-size:9px;transition:transform .12s}
.oc-budget[open]>summary::before{transform:rotate(90deg)}
.oc-claims{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.oc-claim{display:flex;gap:8px;font-size:12px;line-height:1.45;color:var(--ink-2)}
.oc-c-tag{flex:none;height:18px;display:inline-flex;align-items:center;padding:0 6px;border-radius:5px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.oc-c-tag.t-ok{background:var(--augment-soft);color:var(--augment)}
.oc-c-tag.t-med{background:#FBF6EC;color:#8A6D1E}
.oc-c-tag.t-lo{background:var(--surface-2);color:var(--muted)}
.oc-empty{font-size:12px;color:var(--muted);margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.oc-drafts{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.oc-drafts>h4{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.op-compose.oc-flash{animation:ocflash .7s ease}
@keyframes ocflash{0%{background:var(--accent-soft)}100%{background:var(--surface-2)}}

/* ══ EVIDENCE-LINKED COMPOSER — per-sentence provenance made visceral ═══════════════════════════════ */
.oc-drafts .ev-draft + .ev-draft{margin-top:14px}
.ev-draft{border:1px solid var(--line);border-radius:11px;background:var(--surface);padding:14px 15px 12px;box-shadow:0 1px 2px rgba(16,24,24,.03)}
.evd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.evd-subject{font-size:13px;font-weight:650;letter-spacing:-.01em;color:var(--ink);line-height:1.3}
.evd-badges{display:flex;gap:5px;flex-wrap:wrap;flex:none;justify-content:flex-end}
.evd-badge{font-size:10px;font-weight:600;letter-spacing:.02em;padding:2px 6px;border-radius:5px;white-space:nowrap;background:var(--surface-2);color:var(--muted)}
.evd-badge.b-ok{background:var(--augment-soft);color:var(--augment)}
.evd-badge.b-med{background:#FBF6EC;color:#8A6D1E}
.evd-badge.b-no{background:var(--displace-soft);color:var(--displace)}
.evd-badge.b-plain{background:var(--surface-2);color:var(--ink-2)}
/* the email as a document */
.evd-body{font-size:13.5px;line-height:1.62;color:var(--ink);white-space:pre-wrap}
.ev-sent{border-radius:3px;padding:0 1px;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background .12s ease,text-decoration-color .12s ease}
.ev-sent[data-claims]{text-decoration:underline;text-decoration-style:dotted;text-decoration-thickness:1px;
  text-decoration-color:var(--accent-line,#BFDCD8);text-underline-offset:3px;cursor:default}
.ev-sent.hot{background:var(--accent-soft);text-decoration-color:var(--accent);text-decoration-style:solid}
.ev-sent.ev-uncited{color:var(--ink)} /* greeting/CTA lines carry no specific claim — plain, no underline */
.evd-cta{margin:10px 0 0;font-size:12.5px;color:var(--ink-2)}
.evd-cta-k{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-right:5px}
/* sources rail */
.evd-sources{margin-top:13px;border-top:1px solid var(--line);padding-top:11px;display:flex;flex-direction:column;gap:5px}
.evd-sources-h{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.ev-src{display:flex;align-items:flex-start;gap:6px;border:1px solid transparent;border-radius:8px;padding:5px 7px;
  transition:background .12s ease,border-color .12s ease}
.ev-src.hot{background:var(--accent-soft);border-color:var(--accent-line,#BFDCD8)}
.ev-src.pinned{background:var(--accent-soft);border-color:var(--accent)}
.ev-src-main{appearance:none;background:none;border:0;padding:0;margin:0;flex:1;min-width:0;display:flex;align-items:flex-start;
  gap:7px;text-align:left;cursor:pointer;font:inherit;color:var(--ink-2)}
.ev-src-main:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.ev-src-tag{flex:none;height:16px;display:inline-flex;align-items:center;padding:0 5px;border-radius:4px;
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-top:1px}
.ev-src-tag.t-ok{background:var(--augment-soft);color:var(--augment)}
.ev-src-tag.t-med{background:#FBF6EC;color:#8A6D1E}
.ev-src-tag.t-lo{background:var(--surface-2);color:var(--muted)}
.ev-src-text{font-size:12px;line-height:1.4}
.ev-src.pinned .ev-src-text,.ev-src.hot .ev-src-text{color:var(--ink)}
.ev-src-link{flex:none;color:var(--muted);text-decoration:none;font-size:13px;padding:0 2px;border-radius:4px}
.ev-src-link:hover{color:var(--accent)}
.ev-src-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* draft actions */
.evd-actions{display:flex;align-items:center;gap:12px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);flex-wrap:wrap}
.evd-actions form{display:inline}
.btn-text-muted{color:var(--muted)!important}
.btn-text-muted:hover{color:var(--displace)!important}
.ev-srclist{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:5px}

/* ══ PROSPECT POLISH v2 — declutter compose + calm, scannable intel ════════════════════════════════ */
/* compose heading + advanced-options disclosure (Angle+Generate stay; the 6 knobs collapse) */
.op-compose>h3{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.oc-sub-inline{font-size:11px;font-weight:400;color:var(--muted)}
.oc-adv{margin-top:14px;border-top:1px solid var(--line);padding-top:11px}
.oc-adv>summary{cursor:pointer;font-size:11px;font-weight:600;color:var(--muted);list-style:none;display:flex;align-items:center;gap:6px}
.oc-adv>summary::-webkit-details-marker{display:none}
.oc-adv>summary::before{content:"▸";font-size:9px;transition:transform .12s}
.oc-adv[open]>summary::before{transform:rotate(90deg)}
.oc-adv-hint{font-weight:400;color:var(--muted);opacity:.75}
.oc-adv-body{margin-top:13px;display:flex;flex-direction:column;gap:12px}
.oc-form .oc-actions{margin-top:10px}
/* abstain as a quiet note, not an alarm */
.oc-abstain{margin-top:14px;border-left:2px solid #D9A441;padding:1px 0 1px 12px}
.oc-abstain-k{display:block;font-size:12px;line-height:1.5;color:var(--ink-2)}
.oc-abstain-q{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--ink-2)}
.oc-abstain-q>span{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-right:6px}

/* INTEL — calm chrome; rank from space, not a wall of boxes (UX_DOCTRINE L5 · dashboard archetype) */
.rtabpanels .section{margin:0 0 30px;padding:0;border:0;background:none;box-shadow:none}
.rtabpanels .section-head{display:flex;align-items:baseline;gap:10px;margin-bottom:13px;border:0;padding:0;flex-wrap:wrap}
.rtabpanels .section-head h2{font-size:15px;font-weight:650;letter-spacing:-.012em;color:var(--ink);margin:0}
.rtabpanels .section-head .note{font-size:12px;color:var(--muted)}
.rtabpanels .panel{border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:none;overflow:hidden}
.rtabpanels .grid.g2,.rtabpanels .grid{gap:16px}
.rtabpanels .panel-head{padding:11px 16px 10px;border-bottom:1px solid var(--line);background:none}
.rtabpanels .panel-head h3{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0}
.rtabpanels .panel-body{padding:15px 16px}
/* signal card → scannable row; detail behind a disclosure */
.rtabpanels .panel>.sig{display:block;border:0;border-top:1px solid var(--line);border-radius:0;background:none;box-shadow:none;padding:13px 16px;margin:0}
.rtabpanels .panel>.sig:first-child{border-top:0}
.rtabpanels .sig .bar{display:none}
.rtabpanels .sig .body{padding:0}
.rtabpanels .sig .ttl{font-size:13.5px;font-weight:600;line-height:1.42}
.rtabpanels .sig .ttl a{color:var(--ink);text-decoration:none}
.rtabpanels .sig .ttl a:hover{color:var(--accent);text-decoration:underline}
.rtabpanels .sig .meta{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:11px;color:var(--muted);flex-wrap:wrap}
.rtabpanels .sig.dismissed{opacity:.5}
/* quieter tags in the intel meta rows (materiality keeps its semantic color) */
.rtabpanels .sig .meta .tag{height:18px;padding:0 6px;border-radius:5px;font-size:10px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;border:0}
.rtabpanels .sig .meta .tag.kind{background:var(--surface-2);color:var(--muted)}
/* the "Why it matters" disclosure */
.sig-more{margin-top:9px}
.sig-more>summary{cursor:pointer;font-size:11px;font-weight:600;color:var(--accent);list-style:none;display:inline-flex;align-items:center;gap:5px}
.sig-more>summary::-webkit-details-marker{display:none}
.sig-more>summary::before{content:"▸";font-size:9px;transition:transform .12s}
.sig-more[open]>summary::before{transform:rotate(90deg)}
.sig-more[open]>summary{margin-bottom:9px}
.sig-more>:not(summary){font-size:12.5px;line-height:1.58;color:var(--ink-2)}
/* the .sig .impl styles were defeating the native <details> collapse — force it closed when not open */
.sig-more:not([open]) > :not(summary){display:none !important}

/* ══ PROSPECT INTEL v3 — SEMrush-tier: sticky nav · spacious · skimmable (verdicts not prose walls) ══ */
/* sticky, visible sub-tabs — reachable from anywhere in the intel */
.rtabs{margin-top:30px}
.rtablist{position:sticky;top:51px;z-index:15;gap:26px;padding:0;
  background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line-2,#DDE1E1)}
.rtab{padding:12px 1px 13px;font-size:13.5px;font-weight:500;color:var(--muted)}
.rtab:hover{color:var(--ink)}
.rtab.on{color:var(--ink);font-weight:650}
.rtab.on::after{bottom:-1px;height:2.5px;background:var(--accent)}
.rtabpanels{padding-top:24px}
/* calm, spacious sections — de-box + de-cramp */
.rtabpanels .section{margin:0 0 40px}
.rtabpanels .section-head{margin-bottom:16px}
.rtabpanels .section-head h2{font-size:16px}
.rtabpanels .panel{border:1px solid var(--line);border-radius:14px;box-shadow:none}
.rtabpanels .panel-head{padding:13px 20px 11px}
.rtabpanels .panel-body{padding:20px}
.rtabpanels .grid.g2{gap:20px}
.rtabpanels p{line-height:1.62}
.rtabpanels .pf-desc,.rtabpanels .so-sum,.rtabpanels .so-lead,.rtabpanels .ov-lead{max-width:76ch}

/* social-ops verdict — a scannable strip, not a prose card */
.so-verdict{border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:none;
  padding:18px 22px;margin:0 0 16px;border-left:3px solid var(--muted);display:block}
.so-verdict.m-in_house{border-left-color:var(--augment)}
.so-verdict.m-agency_led,.so-verdict.m-bpo_care{border-left-color:var(--displace)}
.so-verdict.m-hybrid{border-left-color:#C08A2D}
.so-verdict-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.so-model-lbl{font-size:17px;font-weight:650;letter-spacing:-.012em;color:var(--ink)}
.so-verdict-side{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:11px;color:var(--muted)}
.so-lead,.ov-lead{margin:12px 0 0;font-size:13.5px;line-height:1.62;color:var(--ink-2)}
/* full-analysis disclosures */
details.so-full{margin-top:11px}
details.so-full>summary{cursor:pointer;font-size:11px;font-weight:600;color:var(--accent);list-style:none;display:inline-flex;align-items:center;gap:5px}
details.so-full>summary::-webkit-details-marker{display:none}
details.so-full>summary::before{content:"▸";font-size:9px;transition:transform .12s}
details.so-full[open]>summary::before{transform:rotate(90deg)}
details.so-full[open]>summary{margin-bottom:11px}
details.so-full>:not(summary){font-size:13px;line-height:1.66;color:var(--ink-2);max-width:76ch;margin:0}
details.so-full:not([open])>:not(summary){display:none !important}

/* ownership verdict — calm surface, clear label */
.so-ownership{border:1px solid var(--line);border-radius:14px;background:var(--surface-2);box-shadow:none;padding:16px 22px;margin:0 0 16px}
.so-ownership .ov-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0}
.ov-eyebrow{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ov-verdict{font-size:14px;font-weight:650;color:var(--ink)}
.ov-residual{margin-top:13px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:12px;border-top:1px solid var(--line)}
.ov-residual .ov-k{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#8A6D1E}
.ov-ask{margin-top:11px;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.ov-ask .ov-k{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--muted);margin-right:6px}

/* ICUC play strip — the recommendation, tinted */
.so-wedge{margin:0 0 20px;padding:14px 20px;border-radius:12px;background:var(--accent-soft);border:1px solid var(--accent-line,#BFDCD8)}
.so-wedge-tag{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--accent-2,var(--accent));margin-bottom:6px}
.so-wedge p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink);max-width:76ch}

/* roomier key-value + people lists */
.so-kv{display:flex;gap:14px;margin-top:13px;font-size:13px;line-height:1.5}
.so-kv .so-k{flex:none;min-width:100px;color:var(--muted);font-weight:500}
.so-people{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.so-people li{font-size:13px;line-height:1.45}
.so-tl-row{display:flex;gap:14px;padding:8px 0}
.so-tl-date{flex:none;min-width:80px;color:var(--muted);font-size:12px}

/* fix stacked-sticky conflict: the global .topbar owns top:0 (keeps the breadcrumb + name); the prospect
   identity scrolls away, and the sub-tabs pin just beneath the topbar. Solid bars (no backdrop-filter,
   which also blanked headless screenshots). */
.cockpit-head{position:static;backdrop-filter:none;-webkit-backdrop-filter:none}
.rtablist{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible}
/* panels size to content — no stretched half-empty boxes */
.rtabpanels .grid.g2,.rtabpanels .grid{align-items:start}

/* ══ SUB-TABS → a prominent SEGMENTED CONTROL (icons + counts), not buried underlined text ══════════ */
.rtabs{margin-top:26px}
.rtabbar{position:sticky;top:50px;z-index:16;background:var(--bg);padding:12px 0 14px;margin:0;border-bottom:1px solid var(--line)}
.rtablist{position:static;display:inline-flex;gap:3px;padding:4px;border:1px solid var(--line-2,#DDE1E1);border-radius:11px;
  background:var(--surface-2);overflow:visible;box-shadow:0 1px 2px rgba(16,24,24,.04);backdrop-filter:none}
.rtab{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:0;border-radius:8px;background:none;
  font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;transition:background .12s,color .12s}
.rtab:hover{color:var(--ink);background:color-mix(in srgb,var(--surface) 55%,transparent)}
.rtab.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(16,24,24,.10),0 0 0 1px rgba(16,24,24,.03);font-weight:650}
.rtab.on::after{display:none}
.rtab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rtab-ico{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.rtab.on .rtab-ico{opacity:1;stroke:var(--accent)}
.rtab-count{font-size:11px;font-weight:700;line-height:1;color:var(--muted);background:color-mix(in srgb,var(--muted) 15%,transparent);
  border-radius:20px;padding:2px 6px;min-width:17px;text-align:center}
.rtab.on .rtab-count{color:var(--accent);background:var(--accent-soft)}
@media(max-width:560px){.rtablist{display:flex;overflow-x:auto;max-width:100%}}

/* Activity card — evidence-forward, graceful without a scraped image (research-sourced posts) */
.si-grid{align-items:start}
.si-card.no-img{background:var(--surface)}
.si-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px}
.si-plat-chip{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--surface-2);padding:3px 8px;border-radius:6px}
.si-link{font-size:11px;font-weight:600;color:var(--accent);text-decoration:none;white-space:nowrap}
.si-link:hover{text-decoration:underline}
.si-card.no-img .si-body{padding:16px 17px 16px}
.si-card.no-img .si-cap{font-size:.95rem;line-height:1.5;color:var(--ink);font-weight:560;margin-bottom:12px}
.si-metrics{flex-wrap:wrap;align-items:center}
.si-metrics .si-gap{margin-left:0}
.si-flag-h{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:2px 0 9px}