/* Maison Neue is commercially licensed, so the binaries are not in the repo
   and are never deployed — a url() source could only ever 404 on the hosted
   build. local() picks up an installed copy with no request at all, and
   anyone without it falls through to the system stack. Drop the .otf files
   into "Maison Neue/" for local work and the local() source finds them once
   they are installed. tuneIconOptics() measures whichever font wins, so the
   icon alignment is correct either way. */
/* One face per weight, named exactly as the fonts name themselves in their
   OTF name tables: "Maison Neue Medium" / "Maison Neue DemiBold" / "Maison
   Neue Bold". The demi face is DemiBold, not "Demi" — an earlier guess at
   that name matched nothing and fell through to a Bold fallback, so every
   600-weight element in the app rendered a full weight too heavy. There is
   deliberately no cross-weight fallback now: if a face is missing it is
   better to drop to the system stack at the right weight than to silently
   substitute the wrong one. */
@font-face {
  font-family: "Maison Neue";
  src: local("Maison Neue Medium"), local("MaisonNeue-Medium");
  font-weight: 400 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Maison Neue";
  src: local("Maison Neue DemiBold"), local("MaisonNeue-DemiBold");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Maison Neue";
  src: local("Maison Neue Bold"), local("MaisonNeue-Bold");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ═══════ TOKENS — from src/brand ═══════ */
:root {
  --n50:#f9fafb; --n100:#f3f4f6; --n200:#e5e7eb; --n300:#d1d5db;
  --n400:#9ca3af; --n500:#6b7280; --n600:#4b5563; --n700:#374151; --n900:#111827;
  --white:#ffffff; --black:#000000;

  --page: var(--n50);
  --card: var(--white);
  --subtle: var(--n50);
  --soft: var(--n100);
  --border: var(--n200);
  --border-mid: var(--n300);
  --border-strong: var(--black);

  --text: var(--n900);
  --text-2: var(--n700);
  --text-3: var(--n500);
  --text-4: var(--n400);

  --rule:#a61d24; --rule-ink:#7d1519; --rule-tint:#fdf3f3; --rule-edge:#f2d4d5;
  --sug:#5240b8;  --sug-tint:#f5f3fd;  --sug-edge:#ded8f6;
  --wait:#b45309; --wait-tint:#fffbeb; --wait-edge:#fcd34d; --wait-dot:#f59e0b;
  /* Done is blue, not green. --ok keeps its name because it keeps its
     meaning; only the hue moved, so every finished state travelled with it.
     It now matches --info: an unread reply and a finished finding share a
     hue, and stay apart by label, icon, and the border + shadow that only
     the unread card carries. */
  --ok:#2563eb;   --ok-tint:#eef4ff;   --ok-edge:#c5d9fd;
  /* one step darker, for blue text sitting on a strong tint rather than
     on --ok-tint: #2563eb on #dbeafe is 4.24:1 and fails */
  --ok-strong:#1d4ed8;
  /* Reserved for "something new arrived" — nothing else uses it */
  --info:#2563eb; --info-tint:#eef4ff; --info-edge:#c5d9fd;

  /* The document side is a canvas; the findings side is a panel */
  --canvas:#e8ebf1;

  /* Radii — dialled back from 24 so cards read as documents, not bubbles */
  --r-sm:8px; --r-control:10px; --r-card:12px; --r-pill:9999px;

  --s4:4px; --s6:6px; --s8:8px; --s10:10px; --s12:12px; --s16:16px;
  --s20:20px; --s24:24px; --s32:32px; --s40:40px;

  --h-sm:40px; --h-md:52px; --h-lg:56px;
  --topbar:72px;

  --shadow-1: 0 1px 2px rgba(17,24,39,.04);
  --shadow-2: 0 4px 16px rgba(17,24,39,.06);
  --shadow-3: 0 24px 64px rgba(17,24,39,.16);

  --glass: rgba(255,255,255,.78);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --t-press:140ms; --t-fast:180ms; --t-base:240ms;
}

*,*::before,*::after { box-sizing: border-box; }
/* The app is a fixed workspace: only panes inside a screen scroll. clip,
   unlike hidden, also refuses scrollIntoView(), which otherwise nudged these
   outer layers and produced a stray page-level scrollbar. */
html, body { height:100%; overflow:clip; }
body {
  margin:0;
  font-family:"Maison Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.5; color:var(--text); background:var(--page);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,ul,ol,dl,dd { margin:0; padding:0; }
ul,ol { list-style:none; }
button,input,textarea,select { font:inherit; color:inherit; }
[hidden] { display:none !important; }

:focus-visible { outline:2px solid var(--black); outline-offset:2px; border-radius:var(--s4); }
/* Focused programmatically to move the reading position — a routed heading, a
   dialog container, a highlighted passage. None are controls, so none should
   paint a ring; Chrome otherwise rings the whole modal when it opened via keyboard. */
h1[tabindex="-1"]:focus,
.modal:focus, .modal:focus-visible,
.anchor:focus, .slot:focus { outline:none; }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link {
  position:absolute; top:-60px; left:12px; z-index:300;
  padding:var(--s12) var(--s20); background:var(--black); color:var(--white);
  border-radius:var(--r-pill); text-decoration:none;
  transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus { top:12px; }

.icon {
  display:inline-block; width:20px; height:20px; flex:none;
  background-color:currentColor;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
}

/* ── Optically centring an icon against the words beside it ──────────────
   Two offsets stack here, and both are real:

   1. A line box is not symmetric around its text. This stack's ascent is
      .867em against a .333em descent, so the baseline sits low in the box
      and `align-items:center` leaves a centred icon 1.25px BELOW the
      text's optical centre (mid cap-height) at 15px.
   2. Phosphor's ink is not centred in its own 256 viewBox for 15 of the
      35 icons here — lock-simple sits 12 units high, file-pdf 8,
      thumbs-down 12 low. Uncorrected, two icons in the same slot disagree
      with each other, which is what made the rule and suggestion bands
      read as ragged against one another.

   --ink-y is a percentage of the icon's OWN box, so it holds at any icon
   size; the em correction is a share of the font size. Everything routes
   through --icon-shift so the ack animation below can reuse it without
   re-deriving it. (`text-box: trim-both cap alphabetic` would fix 1
   font-independently, but it collapses the line box and would resize
   every band, so it is deliberately not used.) */
:root { --icon-optical:-.083em; }

/* Ink offset, measured from each glyph's bounding box in its viewBox.
   Only the 15 that are actually off-centre are listed. */
.icon { --ink-y:0%; --icon-shift:var(--ink-y); }
.icon[data-icon="lock-simple"]            { --ink-y:4.688%; }
.icon[data-icon="upload-simple"]          { --ink-y:4.688%; }
.icon[data-icon="arrow-counter-clockwise"]{ --ink-y:3.320%; }
.icon[data-icon="file-pdf"]               { --ink-y:3.125%; }
.icon[data-icon="arrow-bend-down-right"]  { --ink-y:1.563%; }
.icon[data-icon="house"]                  { --ink-y:1.563%; }
.icon[data-icon="pencil-simple"]          { --ink-y:1.563%; }
.icon[data-icon="sparkle"]                { --ink-y:1.563%; }
.icon[data-icon="circle-dashed"]          { --ink-y:-.404%; }
.icon[data-icon="folder-open"]            { --ink-y:-1.563%; }
.icon[data-icon="quotes"]                 { --ink-y:-1.563%; }
.icon[data-icon="caret-down"]             { --ink-y:-3.125%; }
.icon[data-icon="funnel-simple"]          { --ink-y:-3.125%; }
.icon[data-icon="paper-plane-tilt"]       { --ink-y:-3.125%; }
.icon[data-icon="thumbs-down"]            { --ink-y:-4.688%; }

/* Beside text: correct for the line box as well as the ink. The ack
   button carries the word "Noted" only once it is pressed; unpressed it
   is icon-only, so it must not take the text correction. */
.flag-kind .icon, .btn .icon, .pill .icon, .filetab .icon,
.band-x .icon, .slot .icon, .drop .icon,
.ack[aria-pressed="true"] .icon {
  --icon-shift:calc(var(--icon-optical) + var(--ink-y));
}

/* Alone in a box the box already centres it, so only the ink is off —
   that is the inherited default, which .icon-btn and .rail-item keep. */
.icon { transform:translateY(var(--icon-shift)); }

/* ═══════ AMBIENT ═══════ */
.ambient { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.orb { position:absolute; border-radius:50%; filter:blur(100px); opacity:.42; }
.orb-a { width:44vw; height:44vw; top:-16vw; left:-10vw; background:#e0e7f8; }
.orb-b { width:34vw; height:34vw; bottom:-12vw; right:-6vw; background:#ebe6f8; }

/* ═══════ SHELL ═══════ */
.app {
  position:relative; z-index:1;
  display:grid; grid-template-columns:64px 1fr;
  height:100vh; overflow:clip;
}
.rail {
  display:flex; flex-direction:column; align-items:center; gap:var(--s4);
  padding:var(--s16) 0;
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(1.6); -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border-right:1px solid var(--border);
}
.rail-mark {
  width:32px; height:32px; display:grid; place-items:center; margin-bottom:var(--s16);
  border-radius:var(--r-control); background:var(--black); color:var(--white);
  font-weight:600; font-size:15px;
}
.rail-spacer { flex:1; }
.rail-item {
  position:relative; width:42px; height:42px; display:grid; place-items:center;
  border:0; border-radius:var(--r-control); background:transparent;
  color:var(--text-3); cursor:pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-press) var(--ease-out);
}
.rail-item:active { transform:scale(.94); }
.rail-item[aria-current="true"] { background:var(--soft); color:var(--text); }

.rail-badge {
  position:absolute; top:4px; right:4px; min-width:18px; height:18px; padding:0 5px;
  display:grid; place-items:center; border-radius:var(--r-pill);
  background:var(--rule); color:var(--white); font-size:15px; font-weight:600; line-height:1;
}
/* Unread signal — something arrived while you were elsewhere */
.rail-dot {
  position:absolute; top:6px; right:8px; width:9px; height:9px; border-radius:50%;
  background:var(--info); box-shadow:0 0 0 2px var(--white);
}
.rail-avatar {
  width:34px; height:34px; padding:0; border:0; border-radius:var(--r-pill);
  overflow:hidden; background:var(--soft); cursor:pointer;
}
.rail-avatar img { width:100%; height:100%; object-fit:cover; display:block; }

.stage { position:relative; overflow:clip; }
.screen {
  position:absolute; inset:0; overflow:auto;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), visibility 0s linear var(--t-base);
}
.screen.is-active {
  opacity:1; visibility:visible; transform:none;
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), visibility 0s;
}

/* ═══════ TYPE ═══════ */
h1 { font-size:26px; line-height:32px; font-weight:600; letter-spacing:-.02em; }
.page-sub { margin-top:var(--s4); font-size:15px; color:var(--text-3); }
.form-label {
  display:block; font-size:15px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--text-3); margin-bottom:var(--s8);
}

/* ═══════ BUTTONS ═══════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s8);
  min-height:var(--h-md); padding:0 var(--s24);
  border:1.5px solid transparent; border-radius:var(--r-pill);
  background:var(--card); font-size:15px; font-weight:600; cursor:pointer; white-space:nowrap;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out), transform var(--t-press) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.btn:active { transform:scale(.97); }
.btn .icon { width:17px; height:17px; }

.btn-primary { background:var(--black); color:var(--white); }
.btn-primary:hover { background:var(--n900); }
.btn-outline { background:var(--card); border-color:var(--border-mid); color:var(--text); }
.btn-outline:hover { border-color:var(--border-strong); background:var(--subtle); }
.btn-ghost { min-height:var(--h-sm); padding:0 var(--s12); background:transparent; color:var(--text-2); font-weight:500; }
.btn-ghost:hover { background:var(--soft); color:var(--text); }
.btn-block { width:100%; }
.btn-sm { min-height:44px; padding:0 var(--s16); font-size:15px; }
.btn:disabled { background:var(--soft); color:var(--text-3); border-color:transparent; cursor:not-allowed; transform:none; }

.icon-btn {
  width:var(--h-sm); height:var(--h-sm); display:grid; place-items:center;
  border:0; border-radius:var(--r-control); background:transparent; color:var(--text-2); cursor:pointer;
  transition: background-color var(--t-fast) var(--ease-out), transform var(--t-press) var(--ease-out);
}
.icon-btn:hover { background:var(--soft); color:var(--text); }
.icon-btn:active { transform:scale(.94); }

/* Text links — no icons, so the icon set stays small */
.txt-link {
  border:0; background:transparent; padding:var(--s8) 0; margin:0; min-height:36px;
  color:var(--text-3); font-size:15px; font-weight:500; cursor:pointer;
  text-underline-offset:3px; text-decoration:underline; text-decoration-color:var(--border-mid);
  transition: color var(--t-fast) var(--ease-out), text-decoration-color var(--t-fast) var(--ease-out);
}
.txt-link:hover { color:var(--text); text-decoration-color:var(--text-3); }

/* ═══════ PILLS ═══════ */
.pill {
  display:inline-flex; align-items:center; gap:var(--s6);
  padding:5px var(--s10); border:1px solid transparent;
  border-radius:var(--r-sm); font-size:15px; font-weight:600; white-space:nowrap;
}
.pill .icon { width:14px; height:14px; }
.pill .dot { width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.pill-rule  { background:var(--rule-tint); border-color:var(--rule-edge); color:var(--rule-ink); }
.pill-sug   { background:var(--sug-tint);  border-color:var(--sug-edge);  color:var(--sug); }
.pill-wait  { background:var(--wait-tint); border-color:var(--wait-edge); color:var(--wait); }
.pill-ok    { background:var(--ok-tint);   border-color:var(--ok-edge);   color:var(--ok); }
.pill-quiet { background:var(--soft); border-color:var(--border); color:var(--text-2); }
.pill-new   { background:var(--info); border-color:var(--info); color:var(--white); }

/* ═══════ SEGMENTED CONTROL ═══════ */
.segmented {
  display:flex; width:100%; gap:2px; padding:3px;
  background:var(--soft); border:1px solid var(--border); border-radius:var(--r-pill);
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.segmented::-webkit-scrollbar { display:none; }
.seg {
  flex:1 0 auto; min-width:0;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s6);
  min-height:38px; padding:0 var(--s8);
  border:0; border-radius:var(--r-pill); background:transparent;
  color:var(--text-2); font-size:15px; font-weight:500; cursor:pointer; white-space:nowrap;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.seg:hover { color:var(--text); }
.seg[aria-selected="true"] {
  background:var(--card); color:var(--text); font-weight:600; box-shadow:var(--shadow-1);
}
/* One disc for both counters. They had drifted to 19px and 22px, and at
   19px a 15px numeral had almost no room around it. */
.seg-count {
  display:grid; place-items:center; min-width:22px; height:22px; padding:0 6px;
  border-radius:var(--r-pill); background:var(--border); color:var(--text-2);
  font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1;
}
.seg[aria-selected="true"] .seg-count { background:var(--black); color:var(--white); }


/* A digit has no descender, so its ink sits about 1.15px above the centre of
   its own line box, and centring that box in a 22px disc left the number
   visibly high. The same measured line-box offset that lifts the icons onto
   their text lowers the digit onto its disc, inverted — which also means it
   flips sign correctly when the fallback font is the one rendering.
   (text-box:trim-both would be the tidy fix, but Chrome does not apply it to
   an anonymous item inside a grid container, so the box stayed 18px.) */
.seg-count .num, .filetab-count .num {
  display:block; transform:translateY(calc(-1 * var(--icon-optical)));
}
.segmented-lg { width:auto; display:inline-flex; margin-bottom:var(--s24); }
.segmented-lg .seg { flex:0 0 auto; min-height:40px; padding:0 var(--s16); font-size:15px; }

/* ═══════ PAGE ═══════ */
.page { max-width:860px; margin:0 auto; padding:var(--s40) var(--s24) 96px; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s24); margin-bottom:var(--s32); }

@keyframes rise { from { opacity:0; transform:translateY(8px); } }

.made-by {
  margin-top:var(--s24); text-align:center;
  font-size:15px; color:var(--text-3);
}
.made-by .txt-link { font-size:15px; min-height:auto; padding:0; }

.made-by a { color:var(--text-2); text-underline-offset:3px; }
.made-by a:hover { color:var(--text); }

/* ═══════ SCANNING ═══════ */
.screen-scanning { display:grid; place-items:center; }
.scan { width:min(440px,88vw); text-align:center; }
.wave { display:flex; justify-content:center; align-items:center; gap:var(--s4); height:24px; margin-bottom:var(--s32); }
.wave span { width:4px; height:24px; border-radius:2px; background:var(--black); transform:scaleY(0); animation: wave 1500ms linear infinite; }
.wave span:nth-child(1){animation-delay:0ms} .wave span:nth-child(2){animation-delay:50ms}
.wave span:nth-child(3){animation-delay:100ms} .wave span:nth-child(4){animation-delay:150ms}
.wave span:nth-child(5){animation-delay:200ms} .wave span:nth-child(6){animation-delay:250ms}
.wave span:nth-child(7){animation-delay:300ms} .wave span:nth-child(8){animation-delay:350ms}
.wave span:nth-child(9){animation-delay:400ms} .wave span:nth-child(10){animation-delay:450ms}
.wave span:nth-child(11){animation-delay:500ms} .wave span:nth-child(12){animation-delay:550ms}
@keyframes wave { 0%{transform:scaleY(0)} 50%{transform:scaleY(1)} 100%{transform:scaleY(0)} }
.scan h1 { margin-bottom:var(--s8); }
.scan-now { font-size:16px; color:var(--text-3); min-height:24px; transition: opacity var(--t-fast) var(--ease-out); }
.scan-now.is-swapping { opacity:0; }
.scan-track { margin-top:var(--s32); height:4px; border-radius:var(--r-pill); background:var(--border); overflow:hidden; }
.scan-track span { display:block; height:100%; width:0; border-radius:var(--r-pill); background:var(--black); transition: width 460ms linear; }

/* ═══════ REVIEW ═══════ */
/* A workspace, not a page: only the document and the findings panel scroll */
@media (min-width:901px) { .screen-review { overflow:clip; } }
.review-grid {
  display:grid; grid-template-columns:minmax(0,65fr) minmax(340px,35fr);
  height:100%; overflow:clip;
}
.doc-col { display:flex; flex-direction:column; min-width:0; min-height:0; border-right:1px solid var(--border); }

/* Both column headers are exactly one --topbar tall so they share a baseline */
.topbar {
  height:var(--topbar); flex:none;
  display:flex; align-items:center; gap:var(--s10);
  padding:0 var(--s20);
  border-bottom:1px solid var(--border);
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(1.6); -webkit-backdrop-filter:blur(20px) saturate(1.6);
}
.topbar-copy { min-width:0; flex:1; }
.topbar-copy h1 { font-size:17px; line-height:22px; font-weight:600; }
.topbar-copy p { font-size:15px; line-height:18px; color:var(--text-3); }

.gate { justify-content:flex-start; gap:var(--s10); }
.gate-status { font-size:18px; line-height:24px; font-weight:600; color:var(--text); }
.gate-count { min-width:24px; height:24px; padding:0 8px; display:grid; place-items:center; border-radius:var(--r-pill);
  background:var(--soft); color:var(--text-2); font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; }

/* File switcher */
.filetabs {
  flex:none; display:flex; gap:var(--s4); overflow-x:auto;
  padding:var(--s10) var(--s20); border-bottom:1px solid var(--border);
  background:var(--card);
}
.filetab {
  display:inline-flex; align-items:center; gap:var(--s8);
  min-height:36px; padding:0 var(--s12);
  /* shrink rather than overflow: three tabs at their natural width need
     more room than the column has, which clipped the third one and left a
     scrollbar eating 16px of height */
  flex:0 1 auto; min-width:0;
  border:1px solid transparent; border-radius:var(--r-sm);
  background:transparent; color:var(--text-3);
  font-size:15px; cursor:pointer; white-space:nowrap;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.filetab:hover { background:var(--soft); color:var(--text); }
.filetab[aria-selected="true"] { background:var(--card); border-color:var(--border-mid); color:var(--text); font-weight:600; }
.filetab .icon { width:16px; height:16px; color:var(--text-3); }
.filetab .icon { flex:none; }
/* The shared prefix gives way; the part that identifies the file never does. */
.filetab-name { display:flex; min-width:0; }
.filetab-head { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.filetab-tail { flex:none; white-space:nowrap; }
/* Below this the prefix cannot show enough to be worth reading — it was
   rendering as "l…" — so drop it and let the tabs breathe. The full name
   stays on the button's title and aria-label. */
@media (max-width:1150px) { .filetab-head { display:none; } }
.filetab-count {
  /* Tinted, not solid. Three saturated red discs across the strip shouted
     louder than the findings themselves; red is reserved for "this blocks
     publishing", and a count is not that. */
  display:grid; place-items:center; flex:none;
  min-width:22px; height:22px; padding:0 6px;
  border-radius:var(--r-pill); background:var(--rule-edge); color:var(--rule-ink);
  font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1;
}

.doc-scroll {
  flex:1; overflow:auto; padding:var(--s32) var(--s24) 64px;
  display:flex; justify-content:center;
  background:var(--canvas);
}

.post {
  width:min(500px,100%); height:fit-content;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-card); box-shadow:var(--shadow-1); overflow:hidden;
}
.post-head { display:flex; align-items:center; gap:var(--s12); padding:var(--s16) var(--s20) var(--s12); }
.post-avatar { width:38px; height:38px; border-radius:var(--r-pill); object-fit:cover; }
.post-head strong { display:block; font-size:15px; font-weight:600; }
.post-head span { font-size:15px; color:var(--text-3); }
.post-body { padding:0 var(--s20) var(--s16); display:grid; gap:var(--s12); font-size:15px; line-height:1.6; }
.post-tags { color:var(--sug); }

.anchor {
  background:var(--sug-tint); color:var(--text); border-bottom:2px solid var(--sug);
  padding:1px 3px; border-radius:3px 3px 0 0; scroll-margin:120px;
  transition: background-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.anchor.is-lit { background:#e6e0fa; box-shadow:0 0 0 5px #e6e0fa; }
.anchor.is-fixed { background:var(--ok-tint); border-bottom-color:var(--ok); }
/* A rule highlighted in place reads red, not indigo */
.anchor.is-rule { background:var(--rule-tint); border-bottom-color:var(--rule); }
.anchor.is-rule.is-lit { background:#fbdcdd; box-shadow:0 0 0 5px #fbdcdd; }

.post-img {
  display:block; width:100%; height:220px; object-fit:cover;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:var(--soft);
}
.slot {
  display:flex; align-items:center; gap:var(--s10);
  margin:var(--s16) var(--s20) var(--s20); padding:var(--s12) var(--s16);
  border:1.5px dashed var(--rule-edge); border-radius:var(--r-control);
  background:var(--rule-tint); color:var(--rule-ink);
  font-size:15px; font-weight:500; scroll-margin:120px;
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.slot.is-lit { border-color:var(--rule); box-shadow:0 0 0 5px rgba(166,29,36,.1); }
.slot.is-fixed { border-style:solid; border-color:var(--ok-edge); background:var(--ok-tint); color:var(--ok); font-weight:400; }

/* Email and landing-page drafts render as documents */
.doc-sheet {
  width:min(560px,100%); height:fit-content;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-card); overflow:hidden;
}
.doc-kicker {
  padding:var(--s12) var(--s24); border-bottom:1px solid var(--border);
  background:var(--subtle);
  font-size:15px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3);
}
.mail-head { display:grid; gap:1px; background:var(--border); border-bottom:1px solid var(--border); }
.mail-head div { display:grid; grid-template-columns:72px 1fr; gap:var(--s12); padding:var(--s12) var(--s24); background:var(--card); }
.mail-head dt { font-size:15px; color:var(--text-3); }
.mail-head dd { margin:0; font-size:15px; }
.doc-body { padding:var(--s24); display:grid; gap:var(--s16); font-size:15px; line-height:1.65; }
.doc-h1 { font-size:24px; line-height:30px; font-weight:600; letter-spacing:-.02em; }
.doc-h2 { font-size:16px; font-weight:600; margin-top:var(--s8); }
.doc-lede { font-size:18px; line-height:26px; color:var(--text); }
.doc-cta { font-weight:600; color:var(--sug); }
.doc-sign { font-size:15px; color:var(--text-3); }
.pull {
  margin:0; padding:var(--s16) var(--s20); border-left:3px solid var(--border-mid);
  background:var(--subtle); border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:15px; line-height:23px;
}
.pull cite { display:block; margin-top:var(--s8); font-style:normal; font-size:15px; color:var(--text-3); }

/* ── Inspector ── */
.inspector { display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--n50); }
.filterbar { flex:none; padding:var(--s16) var(--s16) var(--s12); border-bottom:1px solid var(--border); }
.filter-hint { margin-top:var(--s10); font-size:15px; line-height:18px; color:var(--text-3); }
.inspector-scroll { flex:1; overflow:auto; padding:var(--s16) var(--s20) 64px; }
.stack { display:grid; gap:var(--s10); }

.empty-state { padding:var(--s32) var(--s16); text-align:center; color:var(--text-3); font-size:15px; }

/* ── Flag cards: a tinted header band naming the kind, then a white body.
      Tinting the whole card read as alarm; confining it to the band keeps
      the finding itself readable and lets the two kinds still scan apart. ── */
.flag {
  border:1px solid var(--border);
  border-radius:var(--r-card); background:var(--card); overflow:hidden;
  box-shadow:var(--shadow-1);
  animation: rise 300ms var(--ease-out) backwards;
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out),
    opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out),
    filter var(--t-base) var(--ease-out);
}
.flag:nth-child(2){animation-delay:50ms}
.flag.is-lit { border-color:var(--border-mid); box-shadow:var(--shadow-2); }
.flag.is-morphing { filter:blur(3px); opacity:.5; }

.flag-band {
  display:flex; align-items:center; justify-content:space-between; gap:var(--s10);
  padding:var(--s12) var(--s16);
  border-bottom:1px solid var(--border);
  background:var(--subtle);
}
.flag-kind {
  display:inline-flex; align-items:center; gap:var(--s8);
  font-size:15px; line-height:1.2; font-weight:600; letter-spacing:-.005em;
  /* the height of the ack control sitting opposite it, so a band with no ack
     (the About modal, a dismissed card) is exactly as tall as one with it */
  min-height:24px;
}
.flag-kind .icon { width:17px; height:17px; }

/* "I've seen this and I'll handle it" — an acknowledgement, not a resolution.
   It never clears the finding; the banner keeps counting it. */
.ack {
  position:relative; display:inline-flex; align-items:center; gap:var(--s6);
  min-height:32px; padding:0 var(--s8); margin:-4px -6px -4px 0;
  border:0; border-radius:var(--r-pill); background:transparent;
  color:var(--text-3); font-size:15px; font-weight:600; cursor:pointer;
  transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out),
    transform var(--t-press) var(--ease-out);
}
.ack .icon { width:20px; height:20px; }
.ack:hover { background:rgba(17,24,39,.06); color:var(--text); }
.ack:active { transform:scale(.9); }
.ack[aria-pressed="true"] { color:var(--ok); }

/* Confirm: the mark pops, and a ring leaves from underneath it */
.ack.is-acking .icon { animation: ack-pop 320ms var(--ease-out); }
@keyframes ack-pop {
  0%   { transform:translateY(var(--icon-shift)) scale(.7); }
  55%  { transform:translateY(var(--icon-shift)) scale(1.18); }
  100% { transform:translateY(var(--icon-shift)) scale(1); }
}
.ack.is-acking::after {
  content:""; position:absolute; inset:2px 6px; border-radius:var(--r-pill);
  border:2px solid var(--ok); animation: ack-ring 460ms var(--ease-out) forwards; pointer-events:none;
}
@keyframes ack-ring { from { transform:scale(.85); opacity:.65; } to { transform:scale(1.5); opacity:0; } }

.band-x {
  display:grid; place-items:center; width:30px; height:30px; margin:-4px -6px -4px 0;
  border:0; border-radius:50%; background:transparent; color:var(--text-3); cursor:pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out),
    transform var(--t-press) var(--ease-out);
}
.band-x .icon { width:17px; height:17px; }
.band-x:hover { background:rgba(17,24,39,.06); color:var(--text); }
.band-x:active { transform:scale(.9); }

.flag.is-leaving { opacity:0; transform:translateX(12px); }

/* Demo affordance so the reply path can be walked without a second browser.
   Marked off from the card's real UI — delete this block before presenting. */
.demo-row {
  padding:var(--s6) var(--s16) var(--s10);
  border-top:1px dashed var(--border-mid);
  background:var(--subtle);
}
.demo-row .txt-link { color:var(--text-3); }

@media (prefers-reduced-motion: reduce) {
  .ack.is-acking .icon { animation:none; }
  .ack.is-acking::after { display:none; }
}

.flag[data-kind="rule"] .flag-band { background:var(--rule-tint); border-bottom-color:var(--rule-edge); }
.flag[data-kind="rule"] .flag-kind { color:var(--rule-ink); }

.flag[data-kind="suggestion"] .flag-band { background:var(--sug-tint); border-bottom-color:var(--sug-edge); }
.flag[data-kind="suggestion"] .flag-kind { color:var(--sug); }

.flag[data-state="ticketed"] .flag-band,
.flag[data-state="replied"] .flag-band { background:var(--wait-tint); border-bottom-color:var(--wait-edge); }
.flag[data-state="ticketed"] .flag-kind,
.flag[data-state="replied"] .flag-kind { color:var(--wait); }

.flag[data-state="resolved"] .flag-band { background:var(--ok-tint); border-bottom-color:var(--ok-edge); }
.flag[data-state="resolved"] .flag-kind { color:var(--ok); }

.flag[data-state="declined"] .flag-band { background:var(--soft); border-bottom-color:var(--border); }
.flag[data-state="declined"] .flag-kind { color:var(--text-2); }

/* An unread reply takes the blue — the only place this colour appears */
.flag[data-unread="true"] .flag-band { background:var(--info-tint); border-bottom-color:var(--info-edge); }
.flag[data-unread="true"] .flag-kind { color:var(--info); }
.flag[data-unread="true"] { border-color:var(--info-edge); box-shadow:var(--shadow-2); }

.flag-main {
  width:100%; display:block; padding:var(--s16) var(--s16) var(--s12);
  border:0; background:transparent; text-align:left; cursor:pointer;
}
.flag-badges { display:flex; align-items:center; gap:var(--s6); flex-wrap:wrap; margin-bottom:var(--s10); }
.flag-title {
  display:block; font-size:16px; font-weight:600; line-height:22px;
  letter-spacing:-.01em; margin-bottom:var(--s6);
}
.flag-main:hover .flag-title { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.flag-why { display:block; font-size:15px; line-height:21px; color:var(--text-2); }

.flag-source {
  display:block; margin-top:var(--s12); padding:var(--s12);
  border-radius:var(--r-sm); background:var(--subtle); border:1px solid var(--border);
  /* 22px to match .flag-why above it — at 19px the citation's two lines
     nearly touched, which read as cramped against the card's 16px rhythm */
  font-size:15px; line-height:22px; color:var(--text-2);
}
.flag-source b {
  display:block; font-size:15px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--text-3); margin-bottom:var(--s6);
}

.diff {
  display:block; margin-top:var(--s12); padding:var(--s12);
  border:1px solid var(--sug-edge); border-radius:var(--r-sm);
  background:var(--sug-tint); font-size:15px; line-height:22px;
}
.diff del { background:#fadddf; color:var(--rule-ink); text-decoration:line-through; text-decoration-thickness:1.5px; padding:1px 4px; border-radius:3px; }
.diff ins { background:#dbeafe; color:var(--ok-strong); text-decoration:none; font-weight:600; padding:1px 4px; border-radius:3px; }

/* One consistent footer rhythm on every card state */
.flag-foot {
  display:flex; align-items:center; gap:var(--s20); flex-wrap:wrap;
  padding:var(--s12) var(--s16);
  border-top:1px solid var(--border);
}
/* Only the ticket reference gets pushed to the far end */
.flag-foot .ref { margin-left:auto; }
.flag-foot-links { display:flex; align-items:center; gap:var(--s16); flex-wrap:wrap; }
.flag-actions { padding:0 var(--s16) var(--s16); display:grid; gap:var(--s8); }
.flag-row { display:flex; gap:var(--s8); }
.flag-row .btn { flex:1; }

/* Ticket reference — quiet metadata, not a headline */
.ref { font-size:15px; color:var(--text-3); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Collapsed summary of the conversation */
.reply-line {
  display:inline-flex; align-items:center; gap:var(--s8); min-height:32px;
  border:0; background:transparent; padding:0; margin:0;
  font-size:15px; font-weight:500; color:var(--text-2); cursor:pointer;
  transition: color var(--t-fast) var(--ease-out);
}
.reply-line:hover { color:var(--text); }

.reply-caret {
  width:14px; height:14px; flex:none;
  transition: transform var(--t-base) var(--ease-out);
}
.flag.is-open .reply-caret { transform:rotate(180deg); }

/* Height is animated from JS so the panel opens to its exact size and
   stays interruptible if you click again mid-slide. */
.reply-panel { overflow:hidden; height:0; }
.reply-list { display:grid; gap:var(--s10); padding:0 var(--s16) var(--s16); }
.reply-actions {
  display:flex; align-items:center; gap:var(--s20); flex-wrap:wrap;
  margin-top:var(--s4); padding-top:var(--s8);
  border-top:1px solid var(--border);
}
.earlier { justify-self:center; min-height:auto; padding:var(--s4) 0; font-size:15px; }

/* Unread marker on a link */
.has-unread { color:var(--wait); font-weight:600; text-decoration-color:var(--wait-edge); }
.unread-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--wait); margin-left:var(--s6); vertical-align:middle; }

/* Ticket timeline */
.timeline { padding:var(--s12) var(--s16); border-top:1px solid var(--border); background:var(--subtle); display:grid; gap:0; }
.step { position:relative; display:flex; gap:var(--s12); padding:5px 0; font-size:15px; color:var(--text-3); }
.step::before { content:""; width:8px; height:8px; margin-top:7px; border-radius:50%; background:var(--border-mid); flex:none; }
.step[data-done="true"]::before { background:var(--wait-dot); }
.step[data-done="true"] { color:var(--text); }
.step:not(:last-child)::after { content:""; position:absolute; left:3.5px; top:19px; bottom:-2px; width:1px; background:var(--border-mid); }

/* ═══════ TABLES ═══════ */
.table-wrap {
  border:1px solid var(--border); border-radius:var(--r-card);
  background:var(--card); overflow:hidden;
}
.table { width:100%; border-collapse:separate; border-spacing:0; }
.table th {
  text-align:left; padding:var(--s12) var(--s20);
  font-size:15px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-3); background:var(--subtle); border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.table td { padding:var(--s16) var(--s20); border-bottom:1px solid var(--border); font-size:15px; vertical-align:middle; }
.table tbody tr:last-child td { border-bottom:0; }
.table tbody tr[data-campaign],
.table tbody tr[data-ticket],
.table tbody tr[data-audit] { cursor:pointer; }
.table tbody tr { transition: background-color var(--t-fast) var(--ease-out); }
/* The row carries the click; the inner button only carries focus */
.table tbody tr:focus-within { background:var(--subtle); }
.table tbody tr:focus-within .cell-link { outline:2px solid var(--black); outline-offset:3px; border-radius:4px; }
.table tbody tr:hover { background:var(--subtle); }
.table .num { font-variant-numeric:tabular-nums; color:var(--text-2); white-space:nowrap; }
.table .muted { color:var(--text-3); }
.col-tight { width:1%; white-space:nowrap; }

/* The row's primary target lives in the first cell so keyboards can reach it */
.cell-link {
  display:inline-flex; align-items:center; min-height:24px;
  border:0; background:transparent; padding:0; margin:0; text-align:left; cursor:pointer;
  font-size:15px; font-weight:600; color:var(--text); letter-spacing:-.01em;
}
.cell-link:hover { text-decoration:underline; text-underline-offset:3px; }
.cell-sub { display:block; margin-top:2px; font-size:15px; font-weight:400; color:var(--text-3); }

/* ═══════ QUEUE ROWS ═══════ */
.tab-panel { outline:none; }
.panel-note { margin-bottom:var(--s16); font-size:15px; color:var(--text-3); }
.queue-meta { display:flex; align-items:center; gap:var(--s6); flex-wrap:wrap; font-size:15px; color:var(--text-3); }
.queue-meta .sep { opacity:.45; }
.queue-meta .urgent { color:var(--rule); font-weight:600; }
.queue-right { display:flex; align-items:center; gap:var(--s10); }
.confidence { display:grid; gap:4px; justify-items:end; font-size:15px; color:var(--text-3); font-variant-numeric:tabular-nums; }
.confidence-bar { width:52px; height:4px; border-radius:var(--r-pill); background:var(--soft); overflow:hidden; }
.confidence-bar span { display:block; height:100%; border-radius:var(--r-pill); background:var(--text-2); }

/* ═══════ DETAIL ═══════ */
.detail-card { border:1px solid var(--border); border-radius:var(--r-card); background:var(--card); overflow:hidden; }
.detail-head { padding:var(--s24); border-bottom:1px solid var(--border); }
.detail-head h1 { font-size:22px; line-height:28px; margin:var(--s10) 0 var(--s8); }
.detail-sec { padding:var(--s24); border-bottom:1px solid var(--border); }
.detail-sec:last-of-type { border-bottom:0; }
.detail-sec h2 { font-size:15px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); margin-bottom:var(--s12); }
.detail-sec p { font-size:15px; line-height:23px; color:var(--text-2); }
.detail-sec p + p { margin-top:var(--s10); }

.quote {
  margin-top:var(--s12); padding:var(--s16);
  border-left:3px solid var(--border-mid); background:var(--subtle);
  border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:15px; line-height:22px; color:var(--text);
}
.quote cite { display:block; margin-top:var(--s8); font-size:15px; font-style:normal; color:var(--text-3); }
.reasons { display:grid; gap:var(--s10); }
.reasons li { font-size:15px; line-height:22px; color:var(--text-2); padding-left:var(--s16); position:relative; }
.reasons li::before { content:""; position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:50%; background:var(--border-mid); }
.outcome {
  display:flex; align-items:center; gap:var(--s10); padding:var(--s12) var(--s16);
  border-radius:var(--r-sm); background:var(--ok-tint); border:1px solid var(--ok-edge);
  font-size:15px; color:var(--ok);
}
.detail-actions { display:flex; gap:var(--s8); flex-wrap:wrap; padding:var(--s20) var(--s24); background:var(--subtle); border-top:1px solid var(--border); }
.detail-actions .btn { min-height:44px; padding:0 var(--s16); font-size:15px; }
.detail-note { flex-basis:100%; font-size:15px; color:var(--text-3); margin-bottom:var(--s4); }

/* ═══════ MESSAGE BUBBLES ═══════
   iOS convention: what you sent is blue and right-aligned, what came
   back is grey and left-aligned. The blue is darkened from #007AFF,
   which only reaches 3.6:1 against white text. */
.thread { display:grid; gap:var(--s12); }
.bubble-row { display:grid; gap:var(--s4); justify-items:start; }
.bubble-row.is-me { justify-items:end; }
.bubble-meta { padding:0 var(--s10); font-size:15px; color:var(--text-3); }
.bubble {
  max-width:78%; padding:9px var(--s16);
  border-radius:18px; font-size:15px; line-height:20px;
}
.bubble-row.is-them .bubble {
  background:var(--n200); color:var(--text);
  border-bottom-left-radius:6px;
}
.bubble-row.is-me .bubble {
  background:var(--info); color:var(--white);
  border-bottom-right-radius:6px;
}
.empty { font-size:15px; color:var(--text-3); padding:var(--s12) 0; }

/* ═══════ MODAL ═══════ */
.scrim {
  position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:var(--s24);
  background:rgba(17,24,39,.34);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transition: opacity var(--t-fast) var(--ease-out);
}
.scrim.is-open { opacity:1; }
.modal {
  width:min(520px,100%); max-height:88vh; display:flex; flex-direction:column;
  border-radius:var(--r-card);
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(40px) saturate(1.8); -webkit-backdrop-filter:blur(40px) saturate(1.8);
  border:1px solid rgba(255,255,255,.9); box-shadow:var(--shadow-3); overflow:hidden;
  transform-origin:center; transform:scale(.96); opacity:0;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out);
}
.scrim.is-open .modal { transform:scale(1); opacity:1; }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:var(--s16); padding:var(--s20) var(--s20) var(--s12); }
.modal-head h2 { font-size:21px; line-height:27px; font-weight:600; letter-spacing:-.02em; }
.modal-body { flex:1; overflow:auto; padding:0 var(--s20) var(--s20); }
.modal-intro { font-size:15px; line-height:22px; color:var(--text-3); margin-bottom:var(--s16); }
.modal-intro:last-child { margin-bottom:0; }
.modal-foot { display:flex; justify-content:flex-end; gap:var(--s8); padding:var(--s16) var(--s20); border-top:1px solid var(--border); background:rgba(249,250,251,.7); }
.modal-foot .btn { min-height:48px; }
.modal-foot .credit { margin-right:auto; align-self:center; font-size:15px; color:var(--text-3); }
.modal-foot .credit a { color:var(--text-2); text-underline-offset:3px; }
.modal-foot .credit a:hover { color:var(--text); }

.field { margin-bottom:var(--s20); }
.field:last-child { margin-bottom:0; }
.control {
  width:100%; min-height:var(--h-lg); padding:0 var(--s16);
  border:1.5px solid var(--border); border-radius:var(--r-control);
  background:var(--card); font-size:16px;
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
textarea.control { padding:var(--s12) var(--s16); min-height:84px; resize:vertical; line-height:22px; }
.control:focus { outline:none; border-color:var(--border-strong); box-shadow:0 0 0 3px rgba(0,0,0,.06); }
.control::placeholder { color:var(--text-3); }

select.control {
  appearance:none; -webkit-appearance:none;
  padding-right:46px; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right var(--s16) center;
}
select.control:hover { border-color:var(--border-mid); }
.hint { margin-top:var(--s8); font-size:15px; color:var(--text-3); }

.dd { position:relative; }
.dd > summary { list-style:none; display:flex; align-items:center; padding-right:46px; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right var(--s16) center; }
.dd > summary::-webkit-details-marker { display:none; }
.dd-menu { position:absolute; z-index:5; left:0; right:0; top:calc(100% + 4px);
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-card);
  box-shadow:0 8px 24px rgba(0,0,0,.08); padding:var(--s8) 0; }
.dd-opt { display:flex; align-items:center; gap:var(--s10); min-height:44px; padding:0 var(--s16);
  font-size:15px; cursor:pointer; }
.dd-opt:hover { background:var(--soft); }
.dd-opt input { width:18px; height:18px; accent-color:var(--black); margin:0; }

.drop {
  display:flex; align-items:center; justify-content:center; gap:var(--s10);
  width:100%; min-height:80px;
  border:1.5px dashed var(--border-mid); border-radius:var(--r-control);
  background:transparent; color:var(--text-3); font-size:15px; cursor:pointer;
  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.drop:hover { border-color:var(--border-strong); background:var(--subtle); color:var(--text); }
.drop b { font-weight:600; }

.files { display:grid; gap:var(--s8); margin-bottom:var(--s10); }
.file {
  display:flex; align-items:center; gap:var(--s12);
  padding:var(--s10) var(--s12); border:1px solid var(--border);
  border-radius:var(--r-sm); background:var(--card); color:var(--text-3);
  animation: rise 240ms var(--ease-out) backwards;
}
.file-name { flex:1; min-width:0; font-size:15px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-drop {
  border:0; background:transparent; color:var(--text-3); cursor:pointer;
  width:var(--h-sm); height:var(--h-sm); display:grid; place-items:center; border-radius:var(--r-sm);
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.file-drop:hover { background:var(--soft); color:var(--rule); }

.choices { display:grid; gap:var(--s8); margin-bottom:var(--s16); }
.choice {
  min-height:var(--h-lg); padding:var(--s12) var(--s16);
  border:1.5px solid var(--border); border-radius:var(--r-control);
  background:var(--card); text-align:left; font-size:15px; font-weight:500; cursor:pointer;
  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), transform var(--t-press) var(--ease-out);
}
.choice:active { transform:scale(.99); }
.choice.is-on { border-color:var(--border-strong); background:var(--subtle); box-shadow:inset 0 0 0 1px var(--black); }

.summary {
  display:grid; gap:1px; margin-bottom:var(--s16);
  border:1px solid var(--border); border-radius:var(--r-control); background:var(--border); overflow:hidden;
}
.summary div { display:grid; grid-template-columns:104px 1fr; gap:var(--s12); padding:var(--s10) var(--s16); background:var(--card); font-size:15px; }
.summary dt { color:var(--text-3); }
.summary dd { margin:0; font-weight:600; }

.evidence { display:grid; gap:var(--s8); }
.evidence li { padding:var(--s12) var(--s16); border:1px solid var(--border); border-radius:var(--r-sm); background:var(--card); }
.evidence li.is-primary { border-color:var(--border-mid); background:var(--subtle); }
.evidence b { display:block; font-size:15px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); margin-bottom:3px; }
.evidence strong { display:block; font-size:15px; font-weight:600; margin-bottom:3px; }
.evidence p { font-size:15px; line-height:21px; color:var(--text-2); }


/* ═══════ TOAST ═══════ */
.toast {
  position:fixed; left:50%; bottom:var(--s32); z-index:250;
  display:flex; align-items:center; gap:var(--s16);
  padding:var(--s12) var(--s20); border-radius:var(--r-pill);
  background:#323232; color:var(--white); font-size:15px; box-shadow:var(--shadow-3);
  transform:translate(-50%,160%); opacity:0;
  transition: transform 400ms var(--ease-out), opacity 400ms var(--ease-out);
}
.toast.is-visible { transform:translate(-50%,0); opacity:1; }
.toast.is-info { background:var(--info); }
.toast.is-info .toast-action { color:#d7e5ff; }
.toast.is-info .toast-action:hover { color:var(--white); }
.toast-action { border:0; background:transparent; color:#93b7ff; font-weight:600; cursor:pointer; padding:4px var(--s8); border-radius:var(--s8); }
.toast-action:hover { color:#bcd3ff; }

/* ═══════ RESPONSIVE ═══════ */
@media (max-width:1240px) { .review-grid { grid-template-columns:minmax(0,60fr) minmax(340px,40fr); } }
@media (max-width:640px) {
  .intro-split { grid-template-columns:1fr; }
}

@media (max-width:900px) {
  .review-grid { grid-template-columns:1fr; height:auto; overflow:visible; }
  .doc-col { border-right:0; border-bottom:1px solid var(--border); }
  .page-head { flex-direction:column; align-items:flex-start; }
  .campaign { grid-template-columns:1fr; gap:var(--s10); }
  .campaign-right { justify-content:space-between; }
}
@media (hover:hover) and (pointer:fine) {
  .campaign:hover { border-color:var(--border-mid); box-shadow:var(--shadow-2); }
  .queue-row:hover { border-color:var(--border-mid); box-shadow:var(--shadow-2); }
}

/* ═══════ REDUCED MOTION ═══════ */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .screen,.campaign,.queue-row,.flag,.file { transform:none !important; }
  .modal { transform:none !important; transition: opacity 150ms linear !important; }
  .toast { transform:translate(-50%,0) !important; transition: opacity 150ms linear !important; }
  .wave span { animation:none !important; transform:scaleY(.5); opacity:.55; }
  .scan-track span { transition: width 200ms linear !important; }
  .orb { display:none; }
}
.filter-hint:empty { display:none; }

/* ═══ SPLASH ═══ */
.splash {
  position:fixed; inset:0; z-index:100; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  background:var(--page); animation:sp-in 420ms var(--ease-out) both;
}
.splash.is-leaving { animation:sp-out 240ms var(--ease-out) both; }
@keyframes sp-in { from { opacity:0; } }
@keyframes sp-out { to { opacity:0; transform:scale(.985); } }
@keyframes sp-rise { from { opacity:0; transform:translateY(12px); } }

.splash-copy {
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--s40);
  padding:clamp(32px, 5vw, 72px) clamp(24px, 6vw, 112px); overflow:auto;
}
.splash-eyebrow { font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.splash-main { max-width:560px; }
.splash h1 { font-size:clamp(40px, 4.6vw, 68px); font-weight:600; line-height:1.02; letter-spacing:-.03em; color:var(--text);
  animation:sp-rise 600ms var(--ease-out) 80ms both; }
.splash-lede { margin-top:var(--s24); max-width:44ch; font-size:19px; line-height:1.5; color:var(--text-2);
  animation:sp-rise 600ms var(--ease-out) 160ms both; }
.splash-steps { margin-top:var(--s40); display:grid; grid-template-columns:1fr 1fr; gap:var(--s24) var(--s32); }
.splash-steps li { display:grid; grid-template-columns:auto 1fr; column-gap:var(--s12); row-gap:2px;
  padding-top:var(--s16); border-top:1px solid var(--border);
  animation:sp-rise 500ms var(--ease-out) both; animation-delay:calc(300ms + var(--i) * 90ms); }
.splash-steps b { font-size:15px; font-weight:600; color:var(--text); }
.splash-steps li > span:last-child { grid-column:2; font-size:15px; line-height:1.45; color:var(--text-3); }
.sw { width:10px; height:10px; margin-top:6px; border-radius:3px; }
.sw-rule { background-color:var(--rule); } .sw-sug { background:var(--sug); }
.sw-wait { background:var(--wait-dot); } .sw-info { background:var(--info); }
.splash-start { margin-top:var(--s40); min-width:160px; animation:sp-rise 500ms var(--ease-out) 700ms both; }
.splash-copy .credit { font-size:14px; color:var(--text-3); }

/* Right half: a letter-size page being read. Notes sit outside the page in
   the margin, each with a leader back to its line. One 8s loop — scan,
   catch a rule, catch a suggestion, flag the gap, hand to Legal, clear. */
.splash-art {
  position:relative; margin:var(--s16); border-radius:24px; overflow:hidden;
  border:10px solid var(--card); background:var(--canvas); box-shadow:var(--shadow-2);
  display:flex; align-items:center; padding:var(--s32) 168px var(--s32) clamp(24px, 3vw, 48px);
  animation:sp-rise 700ms var(--ease-out) 150ms both;
}
.lp {
  position:relative; overflow:hidden; flex:none; width:min(100%, calc((100vh - 120px) * 0.773), 680px); aspect-ratio:8.5 / 11;
  padding:6% 8% 0; background:var(--white); box-shadow:0 1px 3px rgba(17,24,39,.08), 0 18px 48px rgba(17,24,39,.14);
  font-family:Arial, "Helvetica Neue", Helvetica, sans-serif; line-height:1.4; color:#111; container-type:inline-size;
}
/* Type is sized from the page width, so the page scales as one sheet */
.lp p, .lp dl { margin:0 0 2cqw; font-size:2.7cqw; }
.lp-title { margin:0 0 14px; padding-bottom:6px; border-bottom:2.5px solid #111; text-align:center;
  font-size:5cqw; font-weight:700; letter-spacing:.01em; text-transform:uppercase; }
.lp-parties { display:grid; grid-template-columns:19cqw 1fr; gap:2cqw 3cqw; margin:3.4cqw 0 4cqw !important; }
.lp-parties dt { font-weight:700; }
.lp-parties dd { margin:0; }
.lp-h { margin-top:4cqw !important; font-weight:700; text-transform:uppercase; }
.lp-slot { display:inline-block; padding:2px 6px; border:1px dashed #9ca3af; color:#6b7280; animation:sp-slot 8s infinite; }
.lp-foot { position:absolute; left:8%; right:8%; bottom:4%; display:flex; justify-content:space-between;
  padding-top:.8cqw; border-top:1px solid #111; font-size:2.4cqw; }
/* A marker pass, not a link: a solid tint swept left to right behind the
   words, no underline. Ink stays black so the clause still reads as text. */
.sp-hl { background-color:transparent; color:inherit; padding:1px 2px; margin:0 -2px; border-radius:2px;
  background-repeat:no-repeat; background-size:0% 100%; }
.sp-hl-rule { background-image:linear-gradient(rgba(166,29,36,.14), rgba(166,29,36,.14)); animation:sp-hl-rule 8s infinite; }
.sp-hl-sug  { background-image:linear-gradient(rgba(82,64,184,.14), rgba(82,64,184,.14)); animation:sp-hl-sug 8s infinite; }
.sp-scan { position:absolute; left:0; right:0; top:0; height:80px; pointer-events:none; z-index:2;
  background:linear-gradient(to bottom, transparent, rgba(82,64,184,.08) 70%, rgba(82,64,184,.28) 100%);
  border-bottom:1.5px solid rgba(82,64,184,.5); animation:sp-scan 8s cubic-bezier(.45,0,.55,1) infinite; }

/* Margin note: a change bar in the page margin spanning the flagged lines,
   a short leader from its midpoint, then the label — all on one column. */
.co { position:absolute; z-index:3; display:flex; align-items:center; }
.co-rule, .co-slot { color:var(--rule); } .co-sug { color:var(--sug); }
.co-bar { position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:2px; background:currentColor;
  transform-origin:top; opacity:0; }
.co-line { width:40px; height:0; margin-left:3px; border-top:1.5px solid currentColor; transform-origin:left; opacity:0; }
.co-tags { position:relative; display:grid; }
.co-tags > .sp-tag { grid-area:1 / 1; }
.co-rule .co-bar, .co-rule .co-line { animation:sp-co-rule 8s var(--ease-out) infinite; }
.co-sug  .co-bar, .co-sug  .co-line { animation:sp-co-sug 8s var(--ease-out) infinite; }
.co-slot .co-bar, .co-slot .co-line { animation:sp-co-slot 8s var(--ease-out) infinite; }
@keyframes sp-co-rule { 0%,12% { opacity:0; transform:scale(0.6); } 15%,80% { opacity:1; transform:none; } 86%,100% { opacity:0; } }
@keyframes sp-co-sug  { 0%,19% { opacity:0; transform:scale(0.6); } 22%,50% { opacity:1; transform:none; } 56%,100% { opacity:0; } }
@keyframes sp-co-slot { 0%,26% { opacity:0; transform:scale(0.6); } 29%,80% { opacity:1; transform:none; } 86%,100% { opacity:0; } }
.sp-tag { font-family:"Maison Neue",-apple-system,BlinkMacSystemFont,sans-serif; padding:5px 11px; border-radius:var(--r-pill);
  font-size:12px; font-weight:600; white-space:nowrap; border:1px solid; display:flex; align-items:center; gap:6px; opacity:0;
  box-shadow:var(--shadow-2); }
.sp-tag-rule { background:var(--rule-tint); border-color:var(--rule-edge); color:var(--rule-ink); animation:sp-tag-rule 8s infinite; }
.sp-tag-slot { background:var(--rule-tint); border-color:var(--rule-edge); color:var(--rule-ink); animation:sp-tag-slot 8s infinite; }
.sp-tag-sug  { background:var(--sug-tint); border-color:var(--sug-edge); color:var(--sug); animation:sp-tag-sug 8s infinite; }
.sp-tag-wait { background:var(--wait-tint); border-color:var(--wait-edge); color:var(--wait); animation:sp-tag-wait 8s infinite; }
.sp-dot { width:6px; height:6px; border-radius:50%; background:var(--wait-dot); animation:sp-pulse 1s infinite alternate; }
.sp-verdict { position:absolute; right:24px; bottom:24px; height:40px; width:170px; z-index:3; }
.sp-verdict span { position:absolute; right:0; bottom:0; white-space:nowrap; padding:9px 18px; border-radius:var(--r-pill);
  font-size:15px; font-weight:600; box-shadow:var(--shadow-2); opacity:0; }
.sp-v-no  { background-color:var(--rule); color:var(--white); animation:sp-v-no 8s infinite; }
.sp-v-yes { background:var(--ok); color:var(--white); animation:sp-v-yes 8s infinite; }

@keyframes sp-scan    { 0% { transform:translateY(-80px); } 36%,100% { transform:translateY(900px); } }
@keyframes sp-hl-rule { 0%,9% { background-size:0% 100%; } 14%,80% { background-size:100% 100%; } 88%,100% { background-size:0% 100%; } }
@keyframes sp-hl-sug  { 0%,16% { background-size:0% 100%; } 21%,50% { background-size:100% 100%; } 56%,100% { background-size:0% 100%; } }
@keyframes sp-slot    { 0%,24% { border-color:#9ca3af; } 28%,80% { border-color:var(--rule); background:var(--rule-tint); color:var(--rule-ink); } 88%,100% { border-color:transparent; background:none; color:#111; } }
@keyframes sp-tag-rule{ 0%,12% { opacity:0; transform:translateX(-6px); } 16%,54% { opacity:1; transform:none; } 58%,100% { opacity:0; } }
@keyframes sp-tag-rule-line { 0%,12% { opacity:0; } 16%,80% { opacity:1; } 86%,100% { opacity:0; } }
@keyframes sp-tag-slot{ 0%,26% { opacity:0; transform:translateX(-6px); } 30%,80% { opacity:1; transform:none; } 86%,100% { opacity:0; } }
@keyframes sp-tag-sug { 0%,19% { opacity:0; transform:translateX(-6px); } 23%,50% { opacity:1; transform:none; } 56%,100% { opacity:0; } }
@keyframes sp-tag-wait{ 0%,58% { opacity:0; transform:translateX(-6px); } 62%,80% { opacity:1; transform:none; } 86%,100% { opacity:0; } }
@keyframes sp-v-no    { 0%,36% { opacity:0; transform:translateY(6px); } 40%,82% { opacity:1; transform:none; } 86%,100% { opacity:0; } }
@keyframes sp-v-yes   { 0%,86% { opacity:0; transform:translateY(6px); } 90%,98% { opacity:1; transform:none; } 100% { opacity:0; } }
@keyframes sp-pulse   { to { opacity:.35; } }

@media (max-width: 960px) {
  .splash { grid-template-columns:1fr; grid-template-rows:auto auto; overflow:auto; }
  .splash-art { order:-1; margin:var(--s16) var(--s16) 0; padding:var(--s20) 130px var(--s20) var(--s16); border-width:6px; height:70vh; }
  .splash-copy { padding:var(--s32) var(--s16); overflow:visible; }
  .splash-steps { grid-template-columns:1fr; }
  .sp-verdict { right:12px; bottom:12px; }
}
@media (prefers-reduced-motion: reduce) {
  .splash *, .splash { animation:none !important; }
  .sp-hl { background-size:100% 100%; }
  .sp-tag-rule, .sp-tag-sug, .sp-tag-slot, .co-bar, .co-line, .sp-v-no { opacity:1; }
}

/* ═══ Inline reply composer ═══ */
/* The list is a grid; without a 0 min width, a long unbroken file name
   stretches the column and pushes the thread out past the card. */
.reply-list { grid-template-columns:minmax(0, 1fr); }
/* position:relative keeps the absolutely placed sr-only label inside the
   card. Without it the label escaped the scrolling panes and made the whole
   review screen scroll as a second, outer scrollbar. */
.composer {
  position:relative; margin-top:var(--s4); border:1.5px solid var(--border-mid); border-radius:22px; background:var(--card);
  transition:border-color var(--t-fast) var(--ease-out);
}
.composer:focus-within { border-color:var(--black); }
.composer-row { display:flex; align-items:flex-end; gap:var(--s4); padding:5px; }
.composer-attach, .composer-send { flex:none; height:34px; border-radius:var(--r-pill); cursor:pointer;
  transition:background-color var(--t-fast) ease, transform var(--t-press) var(--ease-out); }
.composer-attach { width:34px; display:grid; place-items:center; color:var(--text-2); }
.composer-attach .icon { width:18px; height:18px; }
@media (hover:hover) and (pointer:fine) { .composer-attach:hover { background:var(--soft); color:var(--text); } }
.composer-attach:active, .composer-send:active { transform:scale(.96); }
.composer-input {
  flex:1; min-width:0; min-height:34px; max-height:140px; resize:none; border:0; outline:none; background:none;
  padding:7px 2px; font-size:15px; line-height:20px;
}
.composer-input::placeholder { color:var(--text-3); }
.composer-send { padding:0 14px; border:0; background:var(--black); color:var(--white); font-size:14px; font-weight:600; }
.composer-file { display:flex; align-items:center; gap:var(--s4); margin:6px 6px 0; padding:4px 4px 4px 12px;
  border-radius:var(--r-pill); background:var(--soft); font-size:14px; color:var(--text-2); }
.composer-file[hidden] { display:none; }
.composer-file-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.composer-file-x { flex:none; width:24px; height:24px; display:grid; place-items:center; border:0; border-radius:50%;
  background:none; color:var(--text-3); cursor:pointer; }
.composer-file-x .icon { width:14px; height:14px; }
@media (hover:hover) and (pointer:fine) { .composer-file-x:hover { background:var(--border); color:var(--text); } }
/* A file on its own sits in the bubble exactly like text would; only a
   file under a message gets the gap. */
.bubble-file { display:block; overflow-wrap:anywhere; font-size:14px; text-decoration:underline; text-underline-offset:2px; }
.bubble-text + .bubble-file { margin-top:var(--s6); }