/* ============================================================
   Sentinel — Contract Intelligence Engine
   Rail · Library · Main grid. Five modes. Deterministic vibe.
============================================================ */
:root {
  /* surfaces */
  --bg-page:  #f5f2ec;
  --bg-app:   #faf8f3;
  --bg-pane:  #fcfaf6;
  --bg-doc:   #ffffff;
  --bg-sunken:#f1ede4;
  --bg-soft:  rgba(31, 41, 51, 0.04);
  --bg-soft2: rgba(31, 41, 51, 0.07);
  --bg-mark:  #fff1c2;

  --bg-active-amber: #fdf3da;
  --bg-active-red:   #fdecea;
  --bg-active-green: #ecf6ee;
  --bg-active-blue:  #ecf2fb;
  --bg-active-violet:#f1ecf8;

  /* text */
  --text-primary:   #1a2330;
  /* `--ink` is the ink colour the defect-detail and diff styles were written
     against, and it was never defined. Six rules use it with NO fallback —
     `.dd-stale { color: var(--ink) }` and the `del`/`ins` colour-mixes in the
     redline diff — and an undefined var makes the whole declaration invalid,
     so removed and added text rendered in the surrounding body colour with no
     red/green at all. Aliased rather than hard-coded so it follows the theme:
     every `.app[data-theme=…]` block below redefines `--text-primary`, and
     this now moves with it. */
  --ink:            var(--text-primary);
  --text-secondary: #4f5764;
  --text-muted:     #8b94a0;
  --text-faint:     #b9bfc8;
  --text-inverse:   #ffffff;
  /* The light that sweeps across a bar while it works (the detect-runtime
     section fill and the run panel's last wait). It borrowed `--text-inverse`
     while that was white everywhere; Midnight's inverse is DARK, and the sweep
     turned into a dark band. A highlight is white in every theme, so it has
     its own token and no theme overrides it. */
  --shimmer:        #ffffff;

  /* borders */
  --border-subtle:    #e6e0d2;
  --border-hairline:  #ece6d6;
  --border-strong:    #c8c0b1;

  /* base brand */
  --brand-navy:        #1d3557;
  --brand-navy-hover:  #142a47;
  --brand-blue:        #315f9f;
  --brand-blue-soft:   #dde7f6;
  /* Foreground-only "ink" accent: navy on light themes, light-blue on dark ones
     (set per dark theme) so navy text/borders stay legible. Use for FOREGROUND
     accents that sit directly on a themed surface (not on --brand-blue-soft). */
  --accent-ink:        var(--brand-navy);

  /* severity */
  --severity-critical: #b42318;
  --severity-high:     #c2410c;
  --severity-medium:   #b7791f;
  --severity-low:      #6b7280;
  --severity-success:  #15803d;

  /* mode accents (subtle — used on rail + section heads) */
  --mode-detect:   #c2410c;   /* warm amber-orange */
  --mode-simulate: #315f9f;   /* blue */
  --mode-stress:   #6b3d9c;   /* deep violet */
  --mode-draft:    #4d6a2a;   /* olive */
  --mode-report:   #1d3557;   /* navy */

  --focus: #315f9f;

  /* fonts */
  --font-ui:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  --font-doc:   "Source Serif 4", "Source Serif Pro", Cambria, "Times New Roman", "Liberation Serif", Georgia, serif;
  /* User-controlled document typography. Overridden inline on .app by Settings. */
  --font-doc-size: 14px;
  --font-doc-line: 1.55;

  /* layout */
  --rail-w:    60px;
  --library-w: 256px;
  --modebar-h: 52px;

  /* current mode accent (set by [data-mode] on .app) */
  --accent: var(--mode-detect);
  --accent-soft: var(--bg-active-amber);
}

.app[data-mode="detect"]   { --accent: var(--mode-detect);   --accent-soft: var(--bg-active-amber); }
/* Simulate and Stress are one page now. It keeps Simulate's blue: the violet
   is still used outside these pages by `.pb-appendix .pb-tag`, so
   `--mode-stress` stays defined. */
.app[data-mode="whatif"]   { --accent: var(--mode-simulate); --accent-soft: var(--bg-active-blue); }
.app[data-mode="draft"]    { --accent: var(--mode-draft);    --accent-soft: var(--bg-active-green); }
.app[data-mode="report"]   { --accent: var(--mode-report);   --accent-soft: var(--bg-active-blue); }

/* ============================================================
   Themes — switch on .app[data-theme="..."]
============================================================ */

/* 1 · Parchment — default cream (no override needed) */

/* 2 · Paper — pure crisp white */
.app[data-theme="paper"] {
  --bg-page:  #f3f3f3;
  --bg-app:   #fafafa;
  --bg-pane:  #ffffff;
  --bg-doc:   #ffffff;
  --bg-sunken:#eeeeee;
  --border-subtle:   #e6e6e6;
  --border-hairline: #ececec;
  --border-strong:   #c7c7c7;
}

/* 3 · Slate — cool blue-grey */
.app[data-theme="slate"] {
  --bg-page:  #e8ecf2;
  --bg-app:   #eef2f7;
  --bg-pane:  #f5f7fb;
  --bg-doc:   #ffffff;
  --bg-sunken:#dee3eb;
  --border-subtle:   #d6dce6;
  --border-hairline: #e1e6ee;
  --border-strong:   #b6bdc9;
}

/* 4 · Sage — pale green */
.app[data-theme="sage"] {
  --bg-page:  #e6ede2;
  --bg-app:   #ecf1e7;
  --bg-pane:  #f3f6ee;
  --bg-doc:   #fbfdf6;
  --bg-sunken:#dae2cf;
  --border-subtle:   #d2dac4;
  --border-hairline: #dde4d2;
  --border-strong:   #a9b692;
}

/* 5 · Sand — warm beige (deeper than parchment) */
.app[data-theme="sand"] {
  --bg-page:  #ecdfc7;
  --bg-app:   #f0e6d0;
  --bg-pane:  #f5edd9;
  --bg-doc:   #fcf6e6;
  --bg-sunken:#e0d3b3;
  --border-subtle:   #d2c39d;
  --border-hairline: #ddd0ad;
  --border-strong:   #b3a079;
}

/* 6 · Lavender — pale purple */
.app[data-theme="lavender"] {
  --bg-page:  #ebe6f2;
  --bg-app:   #efebf5;
  --bg-pane:  #f5f2f9;
  --bg-doc:   #ffffff;
  --bg-sunken:#ddd6e6;
  --border-subtle:   #ddd5e6;
  --border-hairline: #e6dfee;
  --border-strong:   #b9aecc;
}

/* 7 · Graphite — medium grey ("grey-black" lighter end) */
.app[data-theme="graphite"] {
  --bg-page:  #d4d6d8;
  --bg-app:   #dde0e2;
  --bg-pane:  #e6e8ea;
  --bg-doc:   #f3f4f5;
  --bg-sunken:#c5c8ca;
  --border-subtle:   #bcc0c3;
  --border-hairline: #c8ccce;
  --border-strong:   #8e9296;
  --text-primary:   #181a1d;
  --text-secondary: #3e424a;
}

/* 8 · Midnight — the Landing's dark interface. The tokens below are the
   `.sd-demo` block of Landing/site/v2/v2.css VERBATIM — surfaces, text,
   borders, brand and severity — and the three demo accents land on the
   modes they demonstrate (Detect amber, Simulate blue, Report periwinkle),
   so the pages paint in exactly the palette the site shows. Tokens the
   demos never set are decided here: `--text-inverse` is dark, because the
   brand and accent colours are LIGHT on this theme and white text on them
   fails contrast; `--focus` is the periwinkle, because the root's navy ring
   is under 3:1 on these surfaces; Stress and Draft have no demo and stay in
   the family.
   THE PANELS ON <body>. The run panel, the theme popover, the menus, the
   save indicator and the Draft editor's pickers are appended to
   `document.body`, outside `.app`, so a theme scoped to `.app` never reached
   them and they painted parchment inside a dark page. `applyTheme` stamps the
   theme on <body> too, and the block below names those roots by class: only
   they take it, never <body> itself, so the sign-in screen (also a child of
   <body>) keeps its own palette. The same list is on the Eclipse block. */
.app[data-theme="midnight"],
body[data-theme="midnight"] > :is(.run-panel, .settings-pop, .menu, .parsed-save-indicator,
  .pb-type-menu, .pb-block-picker, .pb-bubble, .pb-classify-menu, .demo-cursor) {
  --bg-page:  #0b0c0e;
  --bg-app:   #0e0f11;
  --bg-pane:  #101113;
  --bg-doc:   #17191c;
  --bg-sunken:#0b0c0e;
  --bg-soft:  rgba(255,255,255,0.05);
  --bg-soft2: rgba(255,255,255,0.09);
  --bg-mark:  rgba(255, 214, 102, 0.22);

  --text-primary:   #f2f3f5;
  --text-secondary: #b6bcc6;
  --text-muted:     #8a8f98;
  --text-faint:     #5f646c;
  --text-inverse:   #0b0c0e;

  --border-subtle:   rgba(255,255,255,0.09);
  --border-hairline: rgba(255,255,255,0.07);
  --border-strong:   rgba(255,255,255,0.18);

  --brand-navy:       #8ea0ff;
  --brand-navy-hover: #a4b3ff;
  --brand-blue:       #6f88ff;
  --brand-blue-soft:  rgba(111, 136, 255, 0.16);
  --accent-ink:       #8ea0ff;

  --bg-active-amber: rgba(255, 159, 67, 0.14);
  --bg-active-red:   rgba(255, 95, 87, 0.14);
  --bg-active-green: rgba(47, 210, 127, 0.14);
  --bg-active-blue:  rgba(111, 136, 255, 0.16);
  --bg-active-violet:rgba(180, 140, 255, 0.14);

  --severity-critical: #ff5f57;
  --severity-high:     #ff9f43;
  --severity-medium:   #e0b64a;
  --severity-success:  #2fd27f;
  --severity-low:      #8a8f98;

  --mode-detect:   #ff9f43;
  --mode-simulate: #6f88ff;
  --mode-stress:   #c39bff;
  --mode-draft:    #2fd27f;
  --mode-report:   #8ea0ff;

  --focus: #8ea0ff;
}
/* The Report demo's soft accent is its own periwinkle tint on the Landing,
   not Simulate's blue; the mode rules map both to `--bg-active-blue`, so
   the Report gets its exact value here. */
.app[data-theme="midnight"][data-mode="report"] { --accent-soft: rgba(142, 160, 255, 0.16); }

/* 9 · Eclipse — pure dark (grey-black). Its tokens reach the panels on
   <body> the same way Midnight's do (see the note on the Midnight block). */
.app[data-theme="eclipse"],
body[data-theme="eclipse"] > :is(.run-panel, .settings-pop, .menu, .parsed-save-indicator,
  .pb-type-menu, .pb-block-picker, .pb-bubble, .pb-classify-menu, .demo-cursor) {
  --bg-page:  #141414;
  --bg-app:   #1b1b1b;
  --bg-pane:  #222222;
  --bg-doc:   #2a2a2a;
  --bg-sunken:#101010;
  --bg-soft:  rgba(255,255,255,0.05);
  --bg-soft2: rgba(255,255,255,0.08);
  --bg-mark:  rgba(255, 220, 110, 0.20);

  --text-primary:   #f0f0f0;
  --text-secondary: #c2c2c2;
  --text-muted:     #888888;
  --text-faint:     #5d5d5d;

  --border-subtle:   #343434;
  --border-hairline: #292929;
  --border-strong:   #555555;

  --bg-active-amber: rgba(244, 195, 105, 0.12);
  --bg-active-red:   rgba(220, 78, 78, 0.13);
  --bg-active-green: rgba(124, 214, 160, 0.12);
  --bg-active-blue:  rgba(120, 175, 245, 0.13);
  --bg-active-violet:rgba(180, 140, 255, 0.13);

  --severity-critical: #ff6b6b;
  --severity-high:     #ff9657;
  --severity-medium:   #f0c878;
  --severity-success:  #64d59c;
  --severity-low:      #9aa6ba;

  --mode-detect:   #ff9657;
  --mode-simulate: #79b1ee;
  --mode-stress:   #c39bff;
  --mode-draft:    #98c374;
  --mode-report:   #d8e0ec;
  --accent-ink:    #8ab4f0;
}

/* `--ink` must be declared HERE, on the same element the themes above write
   `--text-primary` to, not on `:root`. A custom property is substituted where
   it is DECLARED: `--ink: var(--text-primary)` sitting in `:root` resolves
   against the ROOT's text colour and keeps the light value on a dark theme,
   which paints the redline's red and green over a dark pane in near-black.
   Declared on `.app`, it picks up whichever `--text-primary` won there.
   THE TEXT COLOUR, FOR THE SAME REASON. `body { color: var(--text-primary) }`
   resolves on <body>, outside `.app`, so it is the root's parchment ink; every
   element that sets no colour of its own (page titles, money rows, report
   tables and facts, the Settings title, toasts) inherited #1a2330 and read at
   about 1.1:1 on Midnight and Eclipse. On the light themes `.app` resolves to
   the same ink (Graphite's is its own #181a1d). */
.app { --ink: var(--text-primary); color: var(--text-primary); }
/* ...and the panels on <body> that the dark themes now reach (the list on the
   Midnight block). <body> has no `data-mode`, so the root's `--accent` would
   be parchment's; they take the Detect accent of THEIR theme. `:where` keeps
   this at zero specificity, so a panel's own `color` (the save indicator's
   muted grey, the selection bubble's white) still wins. */
:where(body[data-theme="midnight"], body[data-theme="eclipse"])
  > :where(.run-panel, .settings-pop, .menu, .parsed-save-indicator,
           .pb-type-menu, .pb-block-picker, .pb-bubble, .pb-classify-menu, .demo-cursor) {
  color: var(--text-primary);
  --ink: var(--text-primary);
  --accent: var(--mode-detect);
  --accent-soft: var(--bg-active-amber);
}

/* Body bg follows page bg — keeps the surround consistent across themes */
body { background: var(--bg-page); }

/* Demo cursor (press "P" to play the walkthrough) */
.demo-cursor {
  position: fixed;
  left: 0; top: 0;
  width: 22px; height: 26px;
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
  transform: translate(-2px, -2px);
  transition: opacity .25s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.30));
}
.demo-cursor.is-on { opacity: 1; }
.demo-cursor svg { display: block; }
.demo-cursor.is-clicking::after {
  content: "";
  position: absolute;
  left: -8px; top: -8px;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2.4px solid var(--accent);
  animation: demoClickRipple .34s ease-out forwards;
}
@keyframes demoClickRipple {
  from { transform: scale(0.35); opacity: 1; }
  to   { transform: scale(1.5);  opacity: 0; }
}
.demo-cursor.is-dragging svg path {
  fill: var(--accent);
  stroke: #111;
}

/* Settings popover */
.settings-pop {
  position: fixed;
  left: calc(var(--rail-w) + 8px);
  bottom: 14px;
  z-index: 40;
  width: 280px;
  background: var(--bg-pane);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.16);
  padding: 14px 14px 12px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .16s, transform .16s;
}
.settings-pop.is-on { opacity: 1; transform: translateY(0); }
.settings-pop .sp-head {
  display: flex; align-items: center;
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.settings-pop .sp-head .sp-close {
  margin-left: auto; border: 0; background: transparent;
  cursor: pointer; color: var(--text-muted);
  font-size: 16px; line-height: 1; padding: 0 4px;
}
.settings-pop .sp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.theme-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-app);
  cursor: pointer;
  transition: border-color .15s, transform .15s;
  text-align: center;
}
.theme-tile:hover { border-color: var(--accent); transform: translateY(-1px); }
.theme-tile.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.theme-tile .tt-swatch {
  display: flex;
  height: 30px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--border-hairline);
}
.theme-tile .tt-swatch span { flex: 1 1 0; }
.theme-tile .tt-name {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}
.theme-tile.is-active .tt-name { color: var(--accent); }

/* ============================================================
   Base
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 20px;
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, select {
  font-family: inherit; font-size: 13px;
  background: transparent; color: var(--text-primary);
}
::selection { background: #cdd9ee; color: var(--brand-navy); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }

/* ============================================================
   App grid
============================================================ */
.app {
  display: grid;
  grid-template-columns: var(--rail-w) var(--library-w) 1fr;
  grid-template-rows: 100vh;
  height: 100vh;
  transition: grid-template-columns .28s cubic-bezier(.4, 0, .2, 1);
}
.app.is-lib-closed {
  grid-template-columns: var(--rail-w) 0 1fr;
}
.library { overflow: hidden; }
.app.is-lib-closed .library {
  opacity: 0;
  pointer-events: none;
}

/* Collapse / reopen tabs — both sit at the vertical middle of the panel
   edge, attached to the library's right edge (or to the rail when closed). */
.lib-reopen,
.lib-collapse {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 18;
  width: 22px;
  height: 56px;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--bg-pane);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s, background .15s, left .28s cubic-bezier(.4, 0, .2, 1);
}
.lib-reopen:hover,
.lib-collapse:hover { color: var(--accent); background: var(--bg-soft); }

/* Collapse — visible only when library is open. Attached to library's right edge. */
.lib-collapse {
  left: calc(var(--rail-w) + var(--library-w) - 11px);
  border-radius: 6px 0 0 6px;
  border-right: 0;
  box-shadow: -2px 0 6px rgba(0, 0, 0, .04);
  display: inline-flex;
}
.app.is-lib-closed .lib-collapse { display: none; }

/* Reopen — visible only when library is closed. Attached to rail's right edge. */
.lib-reopen {
  left: var(--rail-w);
  border-radius: 0 6px 6px 0;
  border-left: 0;
  box-shadow: 2px 0 6px rgba(0, 0, 0, .04);
}
.app.is-lib-closed .lib-reopen { display: inline-flex; }

/* ============================================================
   Rail
============================================================ */
.rail {
  background: var(--bg-pane);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0 12px;
  gap: 4px;
  overflow: hidden;
}
.rail-brand {
  position: relative;
  width: 18px; height: 22px;
  margin: 6px 0 14px;
}
.rb-rule {
  position: absolute;
  left: 8px; top: 2px; bottom: 2px;
  width: 1.5px;
  background: var(--brand-navy);
  border-radius: 1px;
}
.rb-mark {
  position: absolute;
  left: 4px; top: 9px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-navy);
}

.rail-btn {
  position: relative;
  width: 46px;
  padding: 8px 6px 6px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: background .15s, color .15s;
}
.rail-btn:hover { color: var(--text-primary); background: var(--bg-soft); }
.rail-btn .rail-label {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.rail-btn.is-active {
  color: var(--accent);
  background: var(--bg-soft);
}
.rail-btn.is-active::before {
  content: "";
  position: absolute;
  left: -1px; top: 9px; bottom: 9px;
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.rail-spacer { flex: 1; }
.rail-btn-quiet { padding: 8px; }
.rail-btn-quiet .rail-label { display: none; }

/* ============================================================
   Library pane
============================================================ */
.library {
  background: var(--bg-pane);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: opacity .18s ease;
}
.lib-head {
  height: var(--modebar-h);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border-hairline);
}
.brand-name {
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.brand-meta {
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 500;
}
/* Library tabs */
.lib-tabs {
  display: flex;
  gap: 0;
  padding: 0 4px;
  border-bottom: 1px solid var(--border-hairline);
  background: var(--bg-pane);
  flex: 0 0 36px;
  align-items: center;
}
.lib-tab {
  position: relative;
  height: 36px;
  padding: 0 4px;
  font-size: 9.5px;
  font-weight: 550;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  letter-spacing: -0.005em;
  flex: 1 1 0;
  justify-content: center;
  white-space: nowrap;
  min-width: 0;
}
.lib-tab svg.lib-tab-ico {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  fill: none;
  flex: 0 0 auto;
  opacity: .8;
}
.lib-tab:hover { color: var(--text-primary); }
.lib-tab.is-active { color: var(--text-primary); font-weight: 600; }
.lib-tab.is-active svg.lib-tab-ico { opacity: 1; }
.lib-tab.is-active::after {
  content: "";
  position: absolute;
  left: 5px; right: 5px;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.lib-tab .lt-count {
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--text-faint);
  font-weight: 500;
  margin-left: 1px;
}
.lib-tab.is-active .lt-count { color: var(--text-muted); }

/* Library scroll */
.lib-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 6px 8px;
}

/* Section divider (used inside Sessions for "today / earlier") */
.lib-divider {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--text-faint);
  padding: 12px 10px 4px;
}
.lib-divider:first-child { padding-top: 4px; }

/* Generic item — minimal, two-row max */
.lib-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 7px 10px 7px 12px;
  border-radius: 5px;
  cursor: pointer;
  color: var(--text-secondary);
}
.lib-item:hover { background: var(--bg-soft); color: var(--text-primary); }
.lib-item.is-active { background: var(--bg-soft); color: var(--text-primary); }
.lib-item[draggable="true"] { user-select: none; }
.lib-item.is-dragging {
  opacity: .45;
}
.lib-item.is-drop-target {
  background: var(--accent-soft);
  box-shadow: 0 -2px 0 var(--accent) inset;
}
.lib-item.is-active::before {
  content: "";
  position: absolute;
  left: 2px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.lib-item-title {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.lib-item-title .lit-mode {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  font-weight: 600;
  flex: 0 0 auto;
}
.lit-mode.m-detect   { color: var(--mode-detect); }
.lit-mode.m-whatif   { color: var(--mode-simulate); }
.lit-mode.m-draft    { color: var(--mode-draft); }
.lit-mode.m-report   { color: var(--mode-report); }
.lib-item-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.lib-item-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  flex: 0 0 auto;
}
.lib-rename-btn,
.lib-delete-btn {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s, color .12s, background .12s;
}
.lib-item:hover .lib-rename-btn,
.lib-item:focus-within .lib-rename-btn,
.lib-item:hover .lib-delete-btn,
.lib-item:focus-within .lib-delete-btn { opacity: 1; }
.lib-rename-btn:hover { color: var(--accent); background: var(--bg-soft2); }
.lib-delete-btn:hover { color: var(--severity-critical); background: var(--bg-soft2); }
.lib-rename-input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 2px 5px;
  background: var(--bg-doc);
  color: var(--text-primary);
  font-size: 12.5px;
  line-height: 17px;
  outline: none;
}

/* Section row (only used in Sections tab) */
.lib-section-item {
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr 9px;
  gap: 8px;
  align-items: center;
  padding: 7px 10px 7px 12px;
  border-radius: 5px;
  font-size: 12.5px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--text-secondary);
}
.lib-section-item:hover { background: var(--bg-soft); color: var(--text-primary); }
.lib-section-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
.lib-section-status {
  width: 7px; height: 7px;
  border-radius: 50%;
  justify-self: end;
}

/* ----- Document table-of-contents (Sections tab) -----
   Serif title, mono number, hairline rule between top-level entries,
   nested rows indented under their parent. */
.lib-toc {
  padding: 6px 2px 14px;
  display: flex;
  flex-direction: column;
}
.lib-toc-item {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 9px 10px 9px 12px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border-hairline);
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  color: var(--text-secondary);
  transition: background .12s, color .12s;
}
.lib-toc-item:first-child { border-top: 0; }
.lib-toc-item:hover {
  background: var(--bg-soft);
  color: var(--text-primary);
}
.lib-toc-item:focus-visible {
  outline: none;
  background: var(--bg-soft);
  color: var(--text-primary);
  box-shadow: inset 2px 0 0 var(--accent);
}
.lib-toc-num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--text-faint);
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}
.lib-toc-title {
  font-family: var(--font-doc);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 500;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.lib-toc-item.depth-0 .lib-toc-title {
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.lib-toc-item.depth-1 {
  padding-left: 28px;
  border-top-color: transparent;
}
.lib-toc-item.depth-1 .lib-toc-title {
  font-size: 12.5px;
  font-weight: 450;
  color: var(--text-secondary);
}
.lib-toc-item.depth-2 {
  padding-left: 44px;
  border-top-color: transparent;
}
.lib-toc-item.depth-2 .lib-toc-title {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}
.lib-toc-item.depth-3 {
  padding-left: 60px;
  border-top-color: transparent;
}
.lib-toc-item.depth-3 .lib-toc-title {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-muted);
}
.lib-toc-item:hover .lib-toc-num { color: var(--accent); }

/* Empty state inside library */
.lib-empty {
  padding: 16px 14px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 18px;
}
.lib-empty-files p { margin: 0 0 6px; }
.lib-empty-files p strong { color: var(--text-primary); }
.lib-empty-code {
  margin: 6px 0 10px;
  padding: 6px 8px;
  background: var(--bg-soft);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-primary);
  white-space: pre;
  overflow-x: auto;
}
.lib-empty-files .btn { margin-top: 4px; }

/* Library foot */
.lib-foot {
  padding: 8px 8px 10px;
  border-top: 1px solid var(--border-hairline);
}
.lib-foot-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 7px 10px;
  border-radius: 5px;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
}
.lib-foot-btn:hover { color: var(--accent); background: var(--bg-soft); }
.lib-foot-btn svg { color: currentColor; }

/* In-flight upload pill — sits above the Upload button while a parse is
   running in the background. Click reopens the progress modal. */
.lib-upload-pill {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin-bottom: 6px;
  padding: 7px 10px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--text-primary);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 11.5px;
  text-align: left;
}
/* `filter: brightness(0.98)` DARKENED the pill on midnight and eclipse,
   where `--accent-soft` is already dark — hover LOST contrast instead of
   gaining it. A token-derived tint lifts it the same way on all nine themes.
   (A `[data-theme="dark"]` split would have been dead code: the dark themes
   here are named `midnight` / `eclipse`, and every other dark adaptation in
   this file goes through the tokens, not a selector.) */
.lib-upload-pill:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* FAILED SHAPE. A parse that died stays on the rail until the reader
   dismisses it — it is the only way back to the error text — so this one is
   a container, not a button: an "open the error" button plus its own ×.
   (Nested buttons are not valid HTML, hence the split.) */
.lib-upload-pill.is-error {
  display: flex;
  align-items: stretch;
  padding: 0;
  cursor: default;
  /* the same red the modal's own error box uses (.parse-progress-error) */
  border-color: rgba(220, 78, 78, .35);
  background: rgba(220, 78, 78, .08);
}
.lib-upload-pill.is-error:hover { background: rgba(220, 78, 78, .13); }
.lup-open {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 4px 7px 10px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.lup-open:hover .lup-cta { text-decoration: underline; }
.lup-glyph { display: flex; align-items: center; color: var(--severity-critical); }
.lib-upload-pill.is-error .lup-title { color: var(--severity-critical); }
.lib-upload-pill.is-error .lup-cta   { color: var(--severity-critical); }
.lup-dismiss {
  flex: 0 0 auto;
  padding: 0 8px;
  border: 0;
  border-left: 1px solid rgba(220, 78, 78, .35);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1;
}
.lup-dismiss:hover { color: var(--severity-critical); }
.lup-spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.6px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-top-color: var(--accent);
  animation: lup-spin 0.9s linear infinite;
}
@keyframes lup-spin { to { transform: rotate(360deg); } }
.lup-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}
.lup-title {
  font-weight: 600;
  color: var(--accent);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;   /* one declaration: a 0.01em above it was dead */
  /* The title is now LIVE (the parse stage, or "Parse failed"), and the
     library rail is 256px: clipping it printed "РАЗБОР НЕ В…". It wraps
     instead — the pill grows by a line, which costs nothing, and the file
     name below it keeps the ellipsis because that one really is unbounded. */
  line-height: 1.25;
}
.lup-name {
  font-size: 11.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lup-cta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* ============================================================
   Mode bar
============================================================ */
.main {
  background: var(--bg-app);
  display: grid;
  grid-template-rows: var(--modebar-h) 1fr;
  min-height: 0;
}
.mode-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 22px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-app);
  overflow: hidden;            /* keep the single-row header from bleeding above/below */
  min-width: 0;
}
.mb-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--accent);
}
.mb-divider { color: var(--text-faint); }
.mb-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 1 auto;
}
.mb-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 1 auto;
}
.mb-spacer { flex: 1 1 auto; min-width: 8px; }
.mb-actions { display: flex; gap: 6px; align-items: center; flex: none; }
/* The mode-bar meta duplicates the in-page stat strip; drop it when the header
   gets tight so the title + actions always stay on one clean row. */
@media (max-width: 820px) {
  .mb-meta { display: none; }
}

/* ============================================================
   Buttons
============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 550;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  background: transparent;
  color: var(--text-primary);
  transition: background .12s, border-color .12s, color .12s;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary {
  background: var(--brand-navy);
  color: var(--text-inverse);
  border-color: var(--brand-navy);
}
.btn-primary:hover:not(:disabled) { background: var(--brand-navy-hover); border-color: var(--brand-navy-hover); }
.btn-accent {
  background: var(--accent);
  color: var(--text-inverse);
  border-color: var(--accent);
}
.btn-accent:hover:not(:disabled) { filter: brightness(0.92); }
.btn-secondary {
  border-color: var(--border-strong);
  background: var(--bg-pane);
}
.btn-secondary:hover { background: var(--bg-soft); }
.btn-ghost { color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-soft); color: var(--text-primary); }
.btn-danger {
  background: var(--severity-critical);
  border-color: var(--severity-critical);
  color: var(--text-inverse);
}
.btn-danger:hover:not(:disabled) { filter: brightness(0.92); }
.btn-danger:disabled { opacity: 0.65; cursor: default; }
.btn-icon {
  width: 28px; height: 28px;
  padding: 0;
  border-radius: 5px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-icon:hover { background: var(--bg-soft); color: var(--text-primary); }
.btn-sm { height: 24px; padding: 0 9px; font-size: 11.5px; }

/* dot helpers */
.dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; display: inline-block; }
.d-crit { background: var(--severity-critical); }
.d-high { background: var(--severity-high); }
.d-med  { background: var(--severity-medium); }
.d-low  { background: var(--severity-low); }
.d-ok   { background: var(--severity-success); }
.d-info { background: var(--brand-blue); }
.d-mute { background: var(--text-faint); }

.s-ok   { background: var(--severity-success); }
.s-warn { background: var(--severity-medium); }
.s-crit { background: var(--severity-critical); }
.s-na   { background: var(--text-faint); }

/* ============================================================
   Stage (mode body)
============================================================ */
.mode-stage {
  position: relative;
  overflow: auto;
  background: var(--bg-app);
}
.stage-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 36px 64px;
}
.stage-h1 {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.018em;
  margin: 0 0 4px;
}
.stage-h1-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 20px;
}

/* Eyebrow / section headings */
.eyebrow {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--text-muted);
}
.section-h {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--text-muted);
  margin: 0 0 10px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.section-h .count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

hr.hairline { border: 0; height: 1px; background: var(--border-hairline); margin: 18px 0; }
hr.subtle   { border: 0; height: 1px; background: var(--border-subtle);   margin: 24px 0; }

/* ============================================================
   DETECT MODE
============================================================ */
.detect-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  margin-bottom: 24px;
}

/* ===== v4 analytics: stability / risk / knockout badges ===== */
.analytics-badges { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.analytics-badge {
  display: flex; align-items: center; gap: 9px; padding: 8px 13px;
  border: 1px solid var(--border-subtle); border-radius: 11px;
  background: var(--bg-pane); cursor: pointer; transition: border-color .15s, transform .1s;
}
.analytics-badge:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.analytics-badge .ab-txt { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.analytics-badge .ab-k { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.analytics-badge .ab-v { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.analytics-badge .ab-grade {
  font-size: 20px; font-weight: 750; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 8px; font-variant-numeric: tabular-nums;
}
.sg-a .ab-grade, .stab-hero.sg-a .stab-hero-grade { background: color-mix(in srgb, #1a7f4b 18%, transparent); color: #1a7f4b; }
.sg-b .ab-grade, .stab-hero.sg-b .stab-hero-grade { background: color-mix(in srgb, #4a8f2f 18%, transparent); color: #4a8f2f; }
.sg-c .ab-grade, .stab-hero.sg-c .stab-hero-grade { background: color-mix(in srgb, #b8860b 20%, transparent); color: #b8860b; }
.sg-d .ab-grade, .stab-hero.sg-d .stab-hero-grade { background: color-mix(in srgb, var(--severity-high) 22%, transparent); color: var(--severity-high); }
.sg-f .ab-grade, .stab-hero.sg-f .stab-hero-grade { background: color-mix(in srgb, var(--severity-critical, #c0392b) 22%, transparent); color: var(--severity-critical, #c0392b); }
.analytics-badge.risk svg { color: var(--severity-high); }

/* stability modal */
.stab-modal { display: flex; flex-direction: column; gap: 16px; }
.stab-hero { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 12px; background: var(--bg-doc); border: 1px solid var(--border-hairline); }
.stab-hero-grade { font-size: 34px; font-weight: 800; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 12px; flex: none; }
.stab-hero p { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); margin: 0; }
.stab-eq h5, .stab-modal h5 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 0 0 8px; }
.eq-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border-hairline); }
.eq-party { font-weight: 600; }
.eq-move { font-size: 12.5px; color: var(--text-secondary); }
.eq-gain { font-variant-numeric: tabular-nums; font-weight: 650; min-width: 70px; text-align: right; }
.eq-gain.is-pos { color: var(--severity-critical, #c0392b); } .eq-gain.is-neg { color: #1a7f4b; }
.stab-meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--text-muted); }
.stab-narr { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

/* risk modal */
.risk-modal { display: flex; flex-direction: column; gap: 18px; }
.rk-party { border: 1px solid var(--border-hairline); border-radius: 12px; padding: 14px 16px; }
.rk-party-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.rk-party-name { font-weight: 650; }
.rk-prob { font-size: 12.5px; color: var(--severity-high); font-weight: 600; }
.rk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.rk-stat { display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; background: var(--bg-pane); border-radius: 9px; }
.rk-k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); }
.rk-v { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.rk-hist { display: flex; align-items: flex-end; gap: 3px; height: 60px; padding: 4px; background: var(--bg-doc); border-radius: 8px; }
.rk-bar { flex: 1; min-height: 2px; background: color-mix(in srgb, var(--severity-high) 60%, transparent); border-radius: 2px 2px 0 0; }
.rk-hist-cap { font-size: 11px; color: var(--text-muted); margin-top: 5px; text-align: center; }

/* knockout modal */
.ko-modal { display: flex; flex-direction: column; gap: 16px; }
.ko-group-head { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 13.5px; }
.ko-group-head .ko-count { font-size: 11px; padding: 1px 8px; border-radius: 20px; background: var(--bg-pane); color: var(--text-muted); }
.ko-group-head.ko-protective { color: #1a7f4b; } .ko-group-head.ko-knock-on { color: var(--accent); }
.ko-group-desc { font-size: 12px; color: var(--text-muted); margin: 3px 0 8px; }
.ko-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ko-chip { font-size: 12px; padding: 4px 10px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-pane); cursor: pointer; }
.ko-chip:hover { border-color: var(--border-strong); }

/* Load-bearing clauses: ranked weight bars + removal outcomes */
.ko-row { padding: 10px 0 12px; border-bottom: 1px solid var(--border-subtle); }
.ko-row:last-of-type { border-bottom: none; }
.ko-row-head { display: flex; align-items: center; gap: 8px; }
.ko-rank { font-size: 11px; font-weight: 650; color: var(--text-faint); min-width: 18px; text-align: right; }
.ko-clause { font-size: 13px; font-weight: 600; color: var(--text-primary); background: none; border: none; cursor: pointer; padding: 0; text-align: left; }
.ko-clause:hover { color: var(--accent); text-decoration: underline; }
.ko-roles { display: flex; gap: 4px; margin-left: auto; }
.ko-role { font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 20px; background: var(--bg-pane); color: var(--text-muted); }
.ko-role.ko-protective { background: rgba(26, 127, 75, .12); color: #1a7f4b; }
.ko-role.ko-knock-on { background: rgba(194, 65, 12, .1); color: var(--accent); }
.ko-bar-track { height: 6px; border-radius: 4px; background: var(--bg-pane); margin: 7px 0 6px 26px; overflow: hidden; }
.ko-bar { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), #e0733d); }
.ko-outcome { font-size: 12px; color: var(--text-muted); margin-left: 26px; line-height: 1.45; }
.ko-inert { margin-top: 14px; }
.ko-inert summary { font-size: 12.5px; font-weight: 600; color: var(--text-muted); cursor: pointer; padding: 6px 0; }

/* verified redline */
.rl-fix { border: 1px solid var(--border-hairline); border-radius: 10px; padding: 12px 13px; margin-bottom: 10px; background: var(--bg-doc); }
.rl-fix-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.rl-fix-title { font-weight: 600; font-size: 13.5px; }
.rl-tier { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; flex: none; }
.rl-tier.is-verified { background: color-mix(in srgb, #1a7f4b 16%, transparent); color: #1a7f4b; }
.rl-tier.is-mitigation { background: color-mix(in srgb, #b8860b 18%, transparent); color: #b8860b; }
.rl-fix-rationale { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin: 8px 0 0; }
.rl-evidence { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 12px; font-variant-numeric: tabular-nums; }
.rl-ev-before { color: var(--severity-critical, #c0392b); } .rl-ev-after { color: #1a7f4b; font-weight: 600; } .rl-ev-arrow { color: var(--text-muted); }
.rl-rejected { margin: 8px 0; font-size: 12.5px; }
.rl-rejected summary { cursor: pointer; color: var(--text-muted); padding: 4px 0; }
.rl-rej { padding: 8px 10px; border-left: 2px solid var(--border-subtle); margin: 6px 0; }
.rl-rej-title { font-weight: 600; font-size: 12.5px; }
.rl-rej-why { font-size: 12px; color: var(--text-muted); margin: 3px 0 0; line-height: 1.45; }
.dd-watch { background: var(--accent); }
.detect-stat-strip {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 0 14px;
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.detect-stat-strip li {
  display: inline-flex; align-items: center; gap: 7px;
  list-style: none;
}
.detect-stat-strip ul { display: contents; }
.detect-stat-strip .stat-num { font-weight: 600; color: var(--text-primary); }
.detect-stat-strip .stat-num.is-crit { color: var(--severity-critical); }
.detect-stat-strip .stat-meta { color: var(--text-muted); }
/* Clause-cache indicator: muted on the first (all-fresh) run, green when a
   re-run actually reused unchanged clauses from the incremental cache. */
.detect-stat-strip .cache-stat { gap: 6px; color: var(--text-muted); transition: color .2s; }
.detect-stat-strip .cache-stat .stat-num { color: var(--text-secondary); }
.detect-stat-strip .cache-stat.is-hit { color: var(--severity-success); font-weight: 550; }
.detect-stat-strip .cache-stat.is-hit .stat-num { color: var(--severity-success); }

.detect-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 14px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.pill-tabs { display: inline-flex; gap: 1px; }
.pill-tab {
  height: 26px;
  padding: 0 11px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 550;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.pill-tab:hover { color: var(--text-primary); }
.pill-tab.is-active { color: var(--text-primary); background: var(--bg-soft); }
.pill-tab .pt-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}
.pill-tab.is-active .pt-count { color: var(--text-secondary); }

.search {
  display: flex; align-items: center; height: 28px;
  padding: 0 10px 0 28px;
  background: var(--bg-pane);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  position: relative;
  width: 240px;
  margin-left: auto;
  color: var(--text-secondary);
}
.search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.search svg { position: absolute; left: 9px; opacity: 0.65; }
.search input { border: 0; outline: 0; width: 100%; background: transparent; font-size: 12.5px; }
.search input::placeholder { color: var(--text-muted); }

/* Issues grid (Detect) — lawyer-facing findings */
.issues-grid { list-style: none; margin: 0; padding: 0; }

/* ---- confidence dividers: high-confidence vs review-critically ---- */
.conf-head {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 8px; padding: 4px 2px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
}
.conf-head:first-child { margin-top: 2px; }
.conf-head::after { content: ""; flex: 1; height: 1px; background: var(--border-hairline); }
.conf-head .ch-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 16px; padding: 0 5px; border-radius: 8px;
  font-size: 10px; background: rgba(0,0,0,.05); color: var(--text-muted);
}
.conf-head.is-low { color: #b07a1f; }
.conf-head.is-res { color: var(--severity-success); }
/* The two TRIAGE sections. A finding you have decided on moves here, so the
   list above is what is genuinely left to do. Both sit below the open work and
   read as filed rather than pending. */
.conf-head.is-accepted { color: var(--severity-success); margin-top: 26px; }
.conf-head.is-archive  { color: var(--text-faint); margin-top: 26px; }
.conf-head.is-flash {
  animation: confHeadFlash 1.1s ease;
  border-radius: 6px;
}
@keyframes confHeadFlash {
  0%, 100% { background: transparent; }
  25%      { background: var(--accent-soft); }
}
/* Accepted keeps its full weight — it is going into the memo. Archived is
   dimmed but never hidden: a dismissal you cannot see again is a decision you
   cannot review. */
.issues-grid .issue-card.is-tdismissed {
  opacity: .62;
  background: var(--bg-doc);
}
.issues-grid .issue-card.is-tdismissed:hover { opacity: .85; }
.issues-grid .issue-card.is-taccepted {
  border-left: 3px solid var(--severity-success);
}

/* ---- a finding YOUR EDIT CLOSED ----
   Shown rather than silently removed. An issue that simply disappears between
   two runs is indistinguishable from one the engine lost, and the reader has
   no way to tell which happened — so it stays on the page for the run that
   closed it, struck through, with the language that settled it. Not clickable:
   there is no detail to open and no triage left to do. */
.issues-grid .issue-card.is-resolved { cursor: default; opacity: .72; border-style: dashed; background: var(--bg-doc); }
.issues-grid .issue-card.is-resolved:hover { opacity: 1; border-color: var(--border-subtle); box-shadow: none; }
.issue-card.is-resolved .ic-title { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--text-muted); font-weight: 550; }
.issue-card.is-resolved .ic-dot { opacity: .45; }

/* ---- Sentinel CNL block in the finding detail ---- */
.dd-cnl-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); font-size: 11px; }
.dd-cnl-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 10px; }
.dd-cnl-item {
  display: flex; gap: 10px; align-items: baseline;
  padding: 8px 10px; border-radius: 8px;
  background: rgba(0,0,0,.04);
  border: 1px solid var(--border-hairline);
}
.dd-cnl-tag {
  flex: 0 0 auto; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 11px; color: var(--accent); white-space: nowrap;
}
.dd-cnl-text {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12px; line-height: 1.55; color: var(--text-primary);
  white-space: pre-wrap; word-break: break-word; background: none;
}
.cnl-doc { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; padding-right: 4px; }
.cnl-doc-sec {
  margin: 10px 0 2px; font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
}
.cnl-doc-sec:first-child { margin-top: 0; }

.dd-conf.is-high { color: #1d7a4c; font-weight: 600; }
.dd-conf.is-medium { color: #b07a1f; font-weight: 600; }
.dd-conf.is-low { color: var(--text-muted); font-weight: 600; }

/* Severity filter chips — clickable counts (replace the old number + pill rows) */
.detect-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 2px 0 16px;
}
.sev-chips { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.sev-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 31px; padding: 0 13px;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  background: var(--bg-pane);
  cursor: pointer;
  font-size: 12.5px; color: var(--text-secondary);
  transition: border-color .14s, background .14s, color .14s, box-shadow .14s, transform .05s;
}
.sev-chip:hover { border-color: var(--border-strong); background: var(--bg-soft); }
.sev-chip:active { transform: translateY(1px); }
.sev-chip .sc-num { font-weight: 650; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.sev-chip .sc-label { color: var(--text-muted); }
.sev-chip .dot { margin: 0; }
.sev-chip:disabled { opacity: .5; cursor: default; }
.sev-chip.is-active { border-color: var(--brand-navy); background: var(--brand-navy); box-shadow: 0 1px 3px rgba(29,53,87,.20); }
/* The inverse token, not white: it IS white on every theme but Midnight, whose
   navy is a light periwinkle that white text fails on (2.44:1). */
.sev-chip.is-active .sc-num, .sev-chip.is-active .sc-label { color: var(--text-inverse); }
.sev-chip.is-active .dot { box-shadow: 0 0 0 2px rgba(255,255,255,.55); }

.detect-cov {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-muted);
  font-family: var(--font-mono); flex-wrap: wrap;
}
.detect-cov .dc-dot { color: var(--text-faint); }
.detect-cov .dc-status { color: var(--text-secondary); }
.detect-cov .cache-stat { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); }
.detect-cov .cache-stat.is-hit { color: var(--severity-success); font-weight: 600; }

/* Issue card — clean, spacious, vertical */
.issues-grid .issue-card {
  display: grid;
  grid-template-columns: 4px 1fr;
  gap: 15px;
  align-items: stretch;
  padding: 16px 18px 16px 15px;
  margin: 0 0 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--bg-pane);
  cursor: pointer;
  transition: border-color .14s, box-shadow .14s;
}
.issues-grid .issue-card:hover { border-color: var(--border-strong); box-shadow: 0 2px 12px rgba(31,41,51,.06); }
.issues-grid .issue-card.is-selected {
  border-color: var(--brand-navy);
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  box-shadow: 0 2px 14px rgba(29,53,87,.10);
}
.ic-dot { width: 4px; border-radius: 3px; align-self: stretch; background: var(--severity-low); }
.ic-dot.d-crit { background: var(--severity-critical); }
.ic-dot.d-high { background: var(--severity-high); }
.ic-dot.d-med  { background: var(--severity-medium); }
.ic-dot.d-low  { background: var(--severity-low); }
.ic-body { min-width: 0; }
.ic-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ic-title {
  font-family: var(--font-doc);
  font-size: 16px; font-weight: 600; line-height: 1.32;
  color: var(--text-primary); letter-spacing: -0.01em;
  min-width: 0; overflow-wrap: anywhere;
}
.ic-badges { display: inline-flex; align-items: center; gap: 7px; flex: none; white-space: nowrap; padding-top: 2px; }
.ic-summary {
  margin: 8px 0 0;
  font-size: 13.5px; line-height: 1.58;
  color: var(--text-secondary);
  max-width: 80ch; overflow-wrap: anywhere;
}
.ic-refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.ic-ref {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-sunken);
  border-radius: 5px; padding: 2px 7px;
}

/* Severity + degree badges (shared by card + detail) */
.ic-sev, .dd-sev {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.ic-sev.is-critical, .dd-sev.is-critical { color: var(--severity-critical); background: rgba(180,35,24,.09); }
.ic-sev.is-high, .dd-sev.is-high { color: var(--severity-high); background: rgba(194,65,12,.09); }
.ic-sev.is-medium, .dd-sev.is-medium { color: var(--severity-medium); background: rgba(183,121,31,.11); }
.ic-sev.is-low, .dd-sev.is-low { color: var(--severity-low); background: rgba(107,114,128,.11); }
.ic-deg, .dd-deg {
  font-size: 10px; font-weight: 600; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.ic-deg.deg-1st, .dd-deg.deg-1st { color: var(--brand-navy); background: var(--brand-blue-soft); }
.ic-deg.deg-2nd, .dd-deg.deg-2nd { color: var(--text-secondary); background: var(--bg-soft2); }
.ic-deg.deg-3rd, .dd-deg.deg-3rd { color: var(--severity-medium); background: rgba(183,121,31,.09); }

/* Inline detail — opens directly beneath the selected card */
.issue-detail-li { list-style: none; margin: -10px 0 16px; }
.detect-detail {
  border: 1px solid var(--brand-navy);
  border-top: 2px solid var(--brand-navy);
  border-radius: 0 0 12px 12px;
  background: var(--bg-app);
  padding: 2px 22px 22px;
  animation: detailIn .16s ease;
  box-shadow: 0 8px 22px rgba(29,53,87,.09);
}
@keyframes detailIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.dd-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 17px 0 15px; border-bottom: 1px solid var(--border-hairline);
}
.dd-head-main { min-width: 0; }
.dd-badges { display: inline-flex; gap: 7px; margin-bottom: 9px; }
.dd-title {
  font-family: var(--font-doc); font-size: 20px; font-weight: 600;
  line-height: 1.25; color: var(--text-primary); margin: 0; letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.dd-close { color: var(--text-muted); flex: none; }
.dd-close:hover { color: var(--text-primary); }

.dd-grid { display: grid; grid-template-columns: 1fr 250px; gap: 30px; padding-top: 2px; }
.dd-main { min-width: 0; }
.dd-section { padding: 17px 0; border-bottom: 1px solid var(--border-hairline); }
.dd-section:last-child { border-bottom: 0; padding-bottom: 4px; }
.dd-section h5 {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted); margin: 0 0 10px;
}
/* WHOSE SENTENCES THESE ARE. Without it, a finding reworded for a different
   audience simply looks like a different finding. */
.dd-reg-tag {
  margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--border-subtle); background: var(--bg-sunken);
  color: var(--text-muted); font-size: 9.5px; font-weight: 650; letter-spacing: .05em;
  text-transform: uppercase; vertical-align: 1px;
}
/* THE SAME TAG, SAYING THE WORDING IS SOMEBODY ELSE'S. Muted rather than
   alarming — the sentences are still true, they were simply written for
   another audience — and lower-case, so it does not read as a label for the
   register the reader actually chose. */
.dd-reg-tag.is-stale {
  border-style: dashed; background: transparent;
  color: var(--text-faint); text-transform: none; letter-spacing: 0;
  font-weight: 550; font-size: 10px;
}
.dd-reg-tag.is-stale .drt-v { color: var(--text-muted); font-weight: 650; }
.dd-prose { font-size: 14px; line-height: 1.64; color: var(--text-primary); margin: 0; max-width: 72ch; overflow-wrap: anywhere; }
.dd-note { font-size: 12px; line-height: 1.5; color: var(--text-muted); margin: 9px 0 0; }

/* How it can play out — timeline narrative */
.dd-timeline { list-style: none; margin: 0; padding: 0; }
.dd-timeline li { position: relative; display: flex; gap: 13px; align-items: flex-start; padding: 0 0 15px; }
.dd-timeline li:last-child { padding-bottom: 0; }
.dd-timeline li:not(:last-child)::before {
  content: ""; position: absolute; left: 11px; top: 25px; bottom: 1px; width: 1.5px; background: var(--border-subtle);
}
.dd-tl-num {
  flex: none; width: 23px; height: 23px; border-radius: 50%;
  background: var(--brand-blue-soft); color: var(--brand-navy);
  font-size: 11px; font-weight: 700; display: grid; place-items: center; z-index: 1;
}
.dd-tl-text { font-size: 13.5px; line-height: 1.5; color: var(--text-primary); padding-top: 2px; overflow-wrap: anywhere; }
/* The date and the scripted flag on a finding's timeline. Same type scale as
   `.sv-tl-day` / `.sv-tl-directed` on the what-if page, because they are the
   same two facts about the same kind of row — a reader who learns them in one
   place should not have to learn them again in the other. */
.dd-tl-day {
  flex: none; align-self: center; font-family: var(--font-mono);
  font-size: 10.5px; color: var(--text-muted); white-space: nowrap;
}
.dd-tl-flag {
  flex: none; align-self: center;
  font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-soft);
  padding: 1px 6px; border-radius: 999px; white-space: nowrap;
}
/* A step the contract refused, and a step that breaks it. The engine already
   writes the marker into the row's own words; these only make it visible at a
   glance, so a row that carries neither is unchanged. */
.dd-timeline li.is-risk .dd-tl-num { background: var(--bg-active-red); color: var(--severity-critical); }
.dd-timeline li.is-risk .dd-tl-text { color: var(--severity-critical); font-weight: 550; }
.dd-timeline li.is-refused .dd-tl-num { background: var(--bg-soft); color: var(--text-muted); }
.dd-timeline li.is-refused .dd-tl-text { color: var(--text-secondary); }

/* Contract language quotes */
.dd-evidence { margin: 0 0 12px; }
.dd-evidence:last-child { margin-bottom: 0; }
.dd-ev-ref { font-family: var(--font-mono); font-size: 11px; color: var(--accent); font-weight: 600; margin-bottom: 6px; }
.dd-ev-text {
  margin: 0; padding: 11px 15px;
  border-left: 3px solid var(--border-strong);
  background: var(--bg-pane);
  font-family: var(--font-doc); font-size: 13.5px; line-height: 1.58; color: var(--text-secondary);
  border-radius: 0 7px 7px 0; overflow-wrap: anywhere;
}
.dd-bullets { margin: 0; padding-left: 18px; }
.dd-bullets li { font-size: 13px; line-height: 1.55; color: var(--text-secondary); margin-bottom: 5px; }

/* Side meta panel */
.dd-side { min-width: 0; }
.dd-side-card {
  background: var(--bg-pane); border: 1px solid var(--border-subtle);
  border-radius: 11px; padding: 15px; margin-bottom: 12px;
}
.dd-side-card.dd-actions { display: flex; flex-direction: column; gap: 8px; }
.dd-actions .btn { width: 100%; height: 33px; }
.dd-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; }
.dd-meta-stack { padding: 11px 0 0; border-top: 1px solid var(--border-hairline); margin-top: 9px; }
.dd-meta-stack:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.dd-meta-k { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.dd-meta-stack .dd-meta-k { display: block; margin-bottom: 7px; }
.dd-meta-v { font-size: 13px; color: var(--text-primary); margin: 0; }
.dd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dd-chip {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
  background: var(--bg-sunken); border: 1px solid var(--border-hairline);
  border-radius: 6px; padding: 3px 8px; cursor: pointer; transition: border-color .12s, color .12s;
}
.dd-chip:hover { border-color: var(--brand-blue); color: var(--brand-navy); }

/* Triage: card state + controls + comments */
.ic-triage { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.ic-triage.is-accepted { color: var(--severity-success); background: rgba(21,128,61,.10); }
.ic-triage.is-dismissed { color: var(--text-muted); background: var(--bg-soft2); }
.issues-grid .issue-card.is-tdismissed { opacity: .55; }
.issues-grid .issue-card.is-tdismissed:hover { opacity: .85; }
.issues-grid .issue-card.is-taccepted { border-left: 0; box-shadow: inset 3px 0 0 var(--severity-success), 0 1px 2px rgba(31,41,51,.04); }

.detect-triage { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
/* The counts are buttons now — they jump to their section. */
.detect-triage .dt-count {
  border: 1px solid var(--border-subtle); background: var(--bg-pane);
  border-radius: 7px; padding: 5px 10px; cursor: pointer;
  font-size: 12px; font-weight: 600; font-family: inherit;
}
.detect-triage .dt-count.is-accepted { color: var(--severity-success); }
.detect-triage .dt-count.is-archived { color: var(--text-muted); }
.detect-triage .dt-count:hover { border-color: var(--border-strong); }

.dd-comments { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dd-comments li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 9px 12px; background: var(--bg-pane); border: 1px solid var(--border-hairline); border-radius: 8px; }
.dd-c-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dd-c-text { font-size: 13px; color: var(--text-primary); line-height: 1.45; overflow-wrap: anywhere; }
.dd-c-from { font-size: 11px; color: var(--text-muted); line-height: 1.35; overflow-wrap: anywhere; }
.dd-c-ts { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; flex: none; }
.dd-comment-add { display: flex; gap: 8px; }
.dd-comment-input { flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 11px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-doc); font: inherit; font-size: 13px; color: var(--text-primary); }
.dd-comment-input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(49,95,159,.14); }

@media (max-width: 900px) {
  .dd-grid { grid-template-columns: 1fr; gap: 18px; }
  .dd-side-card.dd-actions { flex-direction: row; flex-wrap: wrap; }
  .dd-actions .btn { width: auto; flex: 1 1 auto; }
}


/* ===== Phase 2 — version diff: "what changed" banner + compare ===== */
/* Per-card "New"/"Changed" tag, prepended to the title. */
.ic-change { display: inline-block; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 6px; border-radius: 5px; margin-right: 8px; vertical-align: middle; transform: translateY(-1px); }
/* `--text-inverse` (white except on Midnight, where these fills are light). */
.ic-change.is-new   { color: var(--text-inverse); background: var(--severity-high); }
.ic-change.is-moved { color: var(--text-inverse); background: var(--brand-navy); }
/* Carried over from the previous run: outlined, not filled. It is not news —
   it is the opposite, an issue still open after an edit — and giving it the
   same visual weight as "New" would make a re-run read as louder than the
   first run, which is exactly backwards. */
.ic-change.is-carried { color: var(--text-secondary); background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); }
.ic-change.is-res { color: var(--severity-success); background: rgba(21,128,61,.10); margin-right: 0; }

/* "Compare runs" inline text button in the coverage line. */
.cov-link { border: 0; background: none; padding: 0; margin: 0; font: inherit; font-size: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.cov-link:hover { color: var(--accent-ink); }

/* "What changed since last run" banner. */
.whatchanged { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--border-subtle); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--bg-pane); }
.wc-main { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.wc-icon { color: var(--accent); flex: none; }
.wc-text { font-size: 13px; color: var(--text-secondary); }
.wc-text b { font-weight: 650; }
.wc-new { color: var(--severity-high); }
.wc-moved { color: var(--accent-ink); }
.wc-res { color: var(--severity-success); }
.wc-carried { color: var(--text-secondary); }
/* Raised again by this run. Muted on purpose: it is the limb that makes the
   strip add up, not the one a reader acts on. */
.wc-same { color: var(--text-muted); }
/* Said out loud when carried findings were brought forward WITHOUT being
   re-read — the reader must not take the one for the other. */
.wc-note { font-size: 11.5px; color: var(--text-muted); font-style: italic; }
/* The run finished, its report has not come back, and the findings on screen
   are the ones the stream emitted. Amber, because nothing is broken and
   nothing is settled either. */
.whatchanged.is-pending { border-left-color: var(--severity-medium); }
.whatchanged.is-pending .wc-icon { color: var(--severity-medium); }
.wc-actions { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
.wc-link { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 550; color: var(--accent); cursor: pointer; white-space: nowrap; }
.wc-link:hover { text-decoration: underline; }
.wc-x { border: 0; background: none; padding: 2px 4px; font-size: 13px; line-height: 1; color: var(--text-muted); cursor: pointer; border-radius: 6px; }
.wc-x:hover { color: var(--text-primary); background: var(--bg-soft2); }
.wc-resolved { list-style: none; margin: -6px 0 14px; padding: 10px 14px; display: flex; flex-direction: column; gap: 7px; border: 1px dashed var(--border-subtle); border-radius: 10px; background: var(--bg-doc); }
.wcr-item { display: flex; align-items: center; gap: 10px; }
.wcr-item .dot { flex: none; }
.wcr-title { font-size: 13px; color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.wcr-meta { margin-left: auto; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--severity-success); white-space: nowrap; }

/* Compare-runs modal. */
#modalRoot .modal:has(.cmp-cols), #modalRoot .modal:has(.cmp-pickers) { max-width: 880px; width: 92vw; }
.cmp-loading, .cmp-empty { padding: 22px 6px; color: var(--text-muted); font-size: 13px; text-align: center; }
.cmp-empty { border: 1px dashed var(--border-subtle); border-radius: 10px; background: var(--bg-doc); }
.cmp-pickers { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border-hairline); }
.cmp-pick { display: flex; flex-direction: column; gap: 5px; flex: 1 1 220px; min-width: 0; }
.cmp-pick > span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.cmp-pick select { height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-doc); font: inherit; font-size: 13px; color: var(--text-primary); cursor: pointer; }
.cmp-pick select:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(49,95,159,.14); }
.cmp-arrow { font-size: 18px; color: var(--text-muted); padding-bottom: 7px; }
/* "Restore this run" sits with the pickers, not in the modal footer: it acts on
   the run the picker on its left is showing. */
.cmp-restore { flex: 0 0 auto; height: 36px; align-self: flex-end; white-space: nowrap; }
.cmp-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cmp-pill { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-subtle); color: var(--text-secondary); }
.cmp-pill.cmp-new { color: var(--severity-high); border-color: color-mix(in srgb, var(--severity-high) 38%, transparent); }
.cmp-pill.cmp-moved { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent-ink) 38%, transparent); }
.cmp-pill.cmp-res { color: var(--severity-success); border-color: color-mix(in srgb, var(--severity-success) 40%, transparent); }
.cmp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cmp-coltitle { margin: 0 0 10px; font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.cmp-sec { margin-bottom: 14px; }
.cmp-h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 7px; font-size: 12.5px; font-weight: 650; color: var(--text-primary); }
.cmp-h4 span { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.cmp-h-new { color: var(--severity-high); }
.cmp-h-moved { color: var(--accent-ink); }
.cmp-h-res { color: var(--severity-success); }
.cmp-flist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.cmp-frow { display: flex; align-items: center; gap: 9px; padding: 7px 10px; background: var(--bg-pane); border: 1px solid var(--border-hairline); border-radius: 8px; }
.cmp-frow .dot { flex: none; }
.cmp-ftitle { font-size: 12.5px; color: var(--text-primary); overflow-wrap: anywhere; }
.cmp-fsev { margin-left: auto; font-size: 10.5px; text-transform: capitalize; color: var(--text-muted); white-space: nowrap; }
.cmp-clauses { display: flex; flex-direction: column; gap: 10px; }
.cmp-cl { padding: 10px 12px; background: var(--bg-pane); border: 1px solid var(--border-hairline); border-radius: 8px; }
.cmp-cl-num { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 6px; }
.cmp-cl-num.cmp-added { color: var(--severity-success); }
.cmp-cl-num.cmp-removed { color: var(--severity-critical); }
.cmp-cl-before, .cmp-cl-after { font-size: 12.5px; line-height: 1.5; padding: 6px 9px; border-radius: 6px; overflow-wrap: anywhere; }
.cmp-cl-before { color: var(--severity-critical); background: color-mix(in srgb, var(--severity-critical) 9%, transparent); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--severity-critical) 50%, transparent); margin-bottom: 5px; }
.cmp-cl-after { color: var(--text-primary); background: color-mix(in srgb, var(--severity-success) 11%, transparent); }
@media (max-width: 760px) { .cmp-cols { grid-template-columns: 1fr; gap: 18px; } }


/* ===== Phase 3 — cost & scope preview + non-blocking run pill ===== */
.cost-est { display: flex; flex-direction: column; gap: 16px; }
.ce-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.ce-grid-sm { grid-template-columns: repeat(4, 1fr); }
.ce-note { font-size: 12px; color: var(--text-muted); padding: 0 2px; }
.ce-note.is-cache { color: var(--accent); font-weight: 550; }
/* The previous run did not finish, so this one is NOT free. Deliberately not
   the accent green the free-replay note uses: the two say opposite things. */
.ce-note.is-warn { color: var(--severity-medium); font-weight: 550; }
/* credits — the headline number */
.ce-credits { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 18px; border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--bg-pane)), var(--bg-pane)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border-subtle)); }
.ce-cred-main { display: flex; align-items: baseline; gap: 8px; }
.ce-cred-num { font-size: 40px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1; }
.ce-cred-unit { font-size: 15px; font-weight: 600; color: var(--text-secondary); }
.ce-cred-side { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.ce-cred-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-secondary); }
.ce-cred-row span:last-child { font-weight: 650; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.cost-credits { color: var(--accent); font-weight: 600; }
.ce-cell { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--bg-pane); border: 1px solid var(--border-hairline); border-radius: 10px; }
.ce-k { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.ce-v { font-size: 19px; font-weight: 650; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ce-cap { font-size: 12.5px; color: var(--text-secondary); padding: 10px 14px; border: 1px dashed var(--border-subtle); border-radius: 10px; background: var(--bg-doc); }
.ce-cap b { color: var(--text-primary); font-weight: 650; }
.ce-cap.is-capped { border-color: color-mix(in srgb, var(--severity-high) 45%, transparent); }
.ce-cap-warn { margin-top: 6px; font-size: 12px; color: var(--severity-high); font-weight: 550; }
.ce-toggle { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border: 1px solid var(--border-subtle); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.ce-toggle:hover { border-color: var(--border-strong); background: var(--bg-pane); }
.ce-toggle input { margin-top: 2px; flex: none; width: 16px; height: 16px; accent-color: var(--brand-navy); cursor: pointer; }
.ce-toggle span { font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.ce-toggle b { color: var(--text-primary); font-weight: 600; }
.ce-toggle input:disabled { cursor: not-allowed; }
.ce-toggle:has(input:disabled) { opacity: .6; cursor: not-allowed; }

/* Fixed corner run pill / live ticker — survives mode switches, no layout shift. */
/* Generic small spinner — used by the brief, usage, redline and memo
   panels. The run PILL that introduced it is gone; this is not. */
.rp-spin { width: 13px; height: 13px; flex: none; border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: rp-spin .8s linear infinite; }
@keyframes rp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rp-spin { animation: none; } }


/* ===== Phase 4 — two-way clause linking ===== */
/* Detect → Draft: transient highlight pulse on the landed clause. */
@keyframes seg-jump { 0% { background: color-mix(in srgb, var(--accent) 24%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent); } 100% { background: transparent; box-shadow: 0 0 0 6px transparent; } }
.seg-jump-pulse { animation: seg-jump 2.2s ease-out; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .seg-jump-pulse { animation: none; outline: 2px solid var(--accent); border-radius: 8px; } }

/* Deal brief modal (#extra). */
.brief-body { min-height: 60px; }
.brief-loading { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 13px; padding: 14px 2px; }
.brief-text { margin: 0; font-family: var(--font-doc, Georgia, serif); font-size: 15px; line-height: 1.6; color: var(--text-primary); white-space: pre-wrap; }
.brief-meta { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-hairline); font-size: 11.5px; color: var(--text-muted); }
.brief-empty { padding: 20px 16px; text-align: center; color: var(--text-muted); font-size: 13px; border: 1px dashed var(--border-subtle); border-radius: 10px; background: var(--bg-doc); }

/* Usage & runs panel (#19). */
#modalRoot .modal:has(.usage-table) { max-width: 760px; width: 92vw; }
.usage-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 14px; }
.usage-stat { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; background: var(--bg-pane); border: 1px solid var(--border-hairline); border-radius: 10px; }
.us-num { font-size: 20px; font-weight: 650; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.us-k { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.usage-cap { margin-bottom: 16px; }
.usage-cap-bar { height: 7px; border-radius: 999px; background: var(--bg-soft2); overflow: hidden; }
.usage-cap-bar span { display: block; height: 100%; background: var(--accent-ink); border-radius: 999px; }
.usage-cap-label { margin-top: 6px; font-size: 11.5px; color: var(--text-muted); }
.usage-tasks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.usage-task { display: inline-flex; flex-direction: column; gap: 1px; padding: 7px 12px; border: 1px solid var(--border-hairline); border-radius: 8px; background: var(--bg-doc); }
.ut-name { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.ut-meta { font-size: 11px; color: var(--text-muted); }
.usage-h4 { margin: 0 0 8px; font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.usage-table-wrap { max-height: 320px; overflow-y: auto; border: 1px solid var(--border-hairline); border-radius: 10px; }
.usage-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.usage-table th { position: sticky; top: 0; background: var(--bg-pane); text-align: left; padding: 9px 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); border-bottom: 1px solid var(--border-hairline); }
.usage-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-hairline); color: var(--text-secondary); white-space: nowrap; }
.usage-table tbody tr:last-child td { border-bottom: 0; }
.usage-table .ur-doc { color: var(--text-primary); font-weight: 550; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.usage-table .ur-empty { text-align: center; color: var(--text-muted); padding: 18px; }
.usage-foot { margin: 12px 0 0; font-size: 11px; color: var(--text-muted); }

/* Pinned / locked clauses (#16). */
.pb[data-pinned="true"] { box-shadow: inset 3px 0 0 var(--accent-ink); background: color-mix(in srgb, var(--accent-ink) 7%, transparent); border-radius: 6px; }
.pb-tool.pb-pin.is-on { color: var(--accent-ink); }
.pb-tool.pb-pin.is-on:hover { color: var(--brand-navy-hover); }
.pin-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pin-item { display: flex; gap: 12px; align-items: baseline; padding: 10px 12px; border: 1px solid var(--border-hairline); border-radius: 8px; background: var(--bg-pane); cursor: pointer; transition: border-color .15s, background .15s; }
.pin-item:hover { border-color: var(--accent); background: var(--bg-doc); }
.pin-num { flex: none; font-weight: 650; color: var(--accent-ink); font-size: 12.5px; min-width: 50px; }
.pin-text { font-size: 13px; color: var(--text-secondary); line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-empty { padding: 18px 14px; text-align: center; color: var(--text-muted); font-size: 13px; border: 1px dashed var(--border-subtle); border-radius: 10px; background: var(--bg-doc); list-style: none; }

/* Clause notes (#16): margin marker + thread modal. */
.seg-comment-marker { position: absolute; bottom: 6px; right: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--bg-doc); color: var(--text-muted); cursor: pointer; opacity: 0; transition: opacity .14s, color .14s, border-color .14s; }
.pb:hover > .seg-comment-marker, .seg-comment-marker.has-comments, .seg-comment-marker:focus-visible { opacity: 1; }
.seg-comment-marker.has-comments { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent-ink) 35%, transparent); }
.seg-comment-marker:hover { color: var(--accent); border-color: var(--accent); }
.scm-count { font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; }
.cmt-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.cmt-item { padding: 10px 12px; border: 1px solid var(--border-hairline); border-radius: 8px; background: var(--bg-pane); }
.cmt-text { font-size: 13px; line-height: 1.5; color: var(--text-primary); overflow-wrap: anywhere; }
.cmt-row { display: flex; justify-content: space-between; align-items: center; margin-top: 7px; }
.cmt-ts { font-size: 10.5px; color: var(--text-muted); }
.cmt-del { border: 0; background: none; padding: 0; font: inherit; font-size: 11px; color: var(--text-muted); cursor: pointer; }
.cmt-del:hover { color: var(--severity-critical); text-decoration: underline; }
.cmt-empty { padding: 16px; text-align: center; color: var(--text-muted); font-size: 13px; border: 1px dashed var(--border-subtle); border-radius: 10px; list-style: none; }
.cmt-add { display: flex; gap: 8px; }
.cmt-input { flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 11px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-doc); font: inherit; font-size: 13px; color: var(--text-primary); }
.cmt-input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(49,95,159,.14); }

/* Per-finding redline (#18). */
.dd-redline-text { margin: 0; padding: 13px 15px; border: 1px solid var(--border-subtle); border-left: 3px solid var(--accent); border-radius: 8px; background: var(--bg-doc); font-family: var(--font-doc, Georgia, serif); font-size: 14px; line-height: 1.6; color: var(--text-primary); white-space: pre-wrap; overflow-wrap: anywhere; }
.dd-redline-actions { display: flex; align-items: center; gap: 12px; margin-top: 9px; }
.dd-redline-note { font-size: 11px; color: var(--text-muted); }

/* Report page: per-doc export actions + clean empty state (#extra). */
.rd-actions { display: flex; gap: 10px; margin: 4px 0 8px; }
.report-doc.report-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.report-doc.report-empty h1 { margin: 0; }
.report-doc.report-empty .muted { max-width: 52ch; line-height: 1.6; }

/* #15 — "proven" affordance on kernel-proven findings. */
.ic-deg.is-proven { color: var(--severity-success); border-color: color-mix(in srgb, var(--severity-success) 40%, transparent); }
.ic-proven { vertical-align: -1px; margin-right: 3px; }

/* #11 — height + fade open animation for the inline finding detail (open-only). */
.issue-detail-li.dd-anim { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .3s ease, opacity .26s ease; }
.issue-detail-li.dd-anim > * { overflow: hidden; min-height: 0; }
.issue-detail-li.dd-anim.dd-open { grid-template-rows: 1fr; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .issue-detail-li.dd-anim { grid-template-rows: 1fr; opacity: 1; transition: none; } }

/* #12 — structure-aware skeleton loaders (report + detail loading states). */
@keyframes sk-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.sk { border-radius: 6px; background: linear-gradient(90deg, var(--bg-soft2) 25%, color-mix(in srgb, var(--bg-soft2) 40%, transparent) 37%, var(--bg-soft2) 63%); background-size: 200% 100%; animation: sk-shimmer 1.4s ease-in-out infinite; }
.sk-line { height: 12px; margin: 8px 0; }
.sk-line.w-40 { width: 40%; } .sk-line.w-60 { width: 60%; } .sk-line.w-80 { width: 80%; } .sk-line.w-100 { width: 100%; }
.sk-card { padding: 16px; border: 1px solid var(--border-hairline); border-radius: 10px; margin-bottom: 10px; background: var(--bg-pane); }
.sk-title { height: 16px; width: 46%; margin-bottom: 14px; }
.detect-skeleton { padding: 4px 0; }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }


/* Detect — empty state */
.detect-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 56px 20px 64px;
  text-align: center;
  border: 1px dashed var(--border-subtle);
  border-radius: 10px;
  background: var(--bg-pane);
  color: var(--text-muted);
}
.detect-empty svg { color: var(--text-faint); }
.detect-empty .de-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.detect-empty .de-sub {
  font-size: 12.5px;
  max-width: 460px;
  line-height: 18px;
  color: var(--text-muted);
}
.detect-empty .btn { margin-top: 6px; }

/* ============================================================
   DETECT — banger animation
============================================================ */
.detect-runtime {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
  border-radius: 10px;
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 22px;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--bg-app) 78%, transparent);
  backdrop-filter: blur(1.5px);
}
#issuesGridWrap.is-scanning { min-height: 320px; }
#issuesGridWrap.is-scanning .detect-empty { display: none; }

/* --- the document minimap ------------------------------------------------ */
.dr-map { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.dr-doc {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 10px 10px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-doc);
  box-shadow: 0 4px 18px -8px rgba(0, 0, 0, .14);
  overflow: hidden;
}
.dr-sec {
  position: relative;
  height: calc(var(--w, 2) * 4px + 4px);
  border-radius: 3px;
  background: var(--bg-sunken);
  overflow: hidden;
  animation: drSecIn .4s ease both;
}
.dr-sec.is-ghost { opacity: .55; animation: drSecIn .4s ease both, drGhost 1.6s ease-in-out infinite; }
.dr-sec-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 26%, var(--bg-sunken));
  transition: width .7s cubic-bezier(.33, 0, .2, 1);
}
.dr-sec.is-read .dr-sec-fill { width: 100%; }
.dr-sec-label {
  position: absolute;
  right: 5px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-faint);
  z-index: 1;
}
.dr-sec.is-read .dr-sec-label { color: color-mix(in srgb, var(--accent) 70%, var(--text-muted)); }
@keyframes drSecIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes drGhost { 0%, 100% { opacity: .35; } 50% { opacity: .7; } }

/* the extraction beam — a reading line that moves with the REAL progress */
.dr-beam {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 2px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--accent) 22%, var(--accent) 78%, transparent);
  box-shadow: 0 0 12px 1px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: top .7s cubic-bezier(.33, 0, .2, 1), opacity .3s;
}
.dr-beam.is-on { opacity: 1; }

/* the checking phase breathes over the whole read document */
.detect-runtime[data-phase="checking"] .dr-doc { animation: drCheck 1.4s ease-in-out infinite; }
@keyframes drCheck {
  0%, 100% { box-shadow: 0 4px 18px -8px rgba(0, 0, 0, .14); }
  50% { box-shadow: 0 4px 22px -6px color-mix(in srgb, var(--accent) 32%, transparent); }
}
/* the simulation runs threads of consequence over it */
.detect-runtime[data-phase="simulating"] .dr-sec-fill,
.detect-runtime[data-phase="weighing"] .dr-sec-fill {
  background-image: linear-gradient(100deg, transparent 32%,
    color-mix(in srgb, var(--shimmer) 34%, transparent) 50%, transparent 68%);
  background-size: 220% 100%;
  animation: drThread 1.8s linear infinite;
}
@keyframes drThread { from { background-position: 130% 0; } to { background-position: -60% 0; } }
/* THE LAST WAIT — the stream said `done` and the report is still on its way.
   `reporting` draws nothing of its own, which is invisible for the two
   seconds the engine spends there and reads as a FROZEN PAGE for the minute
   the report fetch can take. The run has not ended, so the document keeps
   breathing and the read sections keep their thread running until it has. */
.detect-runtime.is-finishing .dr-doc { animation: drCheck 1.4s ease-in-out infinite; }
.detect-runtime.is-finishing .dr-sec-fill {
  background-image: linear-gradient(100deg, transparent 32%,
    color-mix(in srgb, var(--shimmer) 34%, transparent) 50%, transparent 68%);
  background-size: 220% 100%;
  animation: drThread 1.8s linear infinite;
}

/* one pip per scenario — filled as each completes */
.dr-pips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}
.dr-pip {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--border-strong));
  background: transparent;
  transition: background .25s, transform .25s;
}
.dr-pip.is-done {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.05);
}

/* findings drop onto the section that carries them */
.dr-markers { position: absolute; inset: 0; pointer-events: none; }
.dr-marker {
  position: absolute;
  right: -2px;
  width: 8px; height: 8px;
  border-radius: 50%;
  transform: translateY(-50%);
  border: 2px solid var(--bg-doc);
  animation: drMarkerPop .45s cubic-bezier(.2, 1.6, .4, 1) both;
}
.dr-marker.d-critical { background: var(--severity-critical); }
.dr-marker.d-high     { background: var(--severity-high); }
.dr-marker.d-medium   { background: var(--severity-medium); }
.dr-marker.d-low      { background: var(--severity-low); }
@keyframes drMarkerPop { from { transform: translateY(-50%) scale(0); } to { transform: translateY(-50%) scale(1); } }

/* --- the story column ---------------------------------------------------- */
.dr-story {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  max-width: 520px;
}
.dr-msg {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
  min-height: 44px;
}
.dr-msg.is-swap { animation: rpnSwap .3s ease; }
.dr-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.dr-pass {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 999px;
  padding: 2px 9px;
}
.detect-runtime[data-phase="error"] .dr-msg { color: var(--severity-critical); }

@media (max-width: 860px) {
  .detect-runtime { grid-template-columns: 1fr; }
  .dr-map { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dr-sec, .dr-sec.is-ghost, .dr-marker { animation: none; }
  .detect-runtime[data-phase="checking"] .dr-doc,
  .detect-runtime[data-phase="simulating"] .dr-sec-fill,
  .detect-runtime[data-phase="weighing"] .dr-sec-fill,
  /* These two can be switched off from here because the rules that animate
     them are ABOVE (see .detect-runtime.is-finishing). The run panel's bar is
     animated BELOW, so its override has to live down there — a copy here would
     lose to it on document order. */
  .detect-runtime.is-finishing .dr-doc,
  .detect-runtime.is-finishing .dr-sec-fill { animation: none; }
  .dr-beam, .dr-sec-fill { transition: none; }
}

.run-panel {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 340px;
  max-width: calc(100vw - 56px);
  background: var(--bg-pane);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px 16px 13px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
  z-index: 30;
  opacity: 0;
  transform: translateY(10px) scale(.985);
  transition: opacity .24s cubic-bezier(.4, 0, .2, 1),
              transform .24s cubic-bezier(.4, 0, .2, 1);
}
.run-panel.is-on { opacity: 1; transform: translateY(0) scale(1); }
.run-panel.is-fade-out { opacity: 0; transform: translateY(10px) scale(.985); }

.rpn-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.rpn-title {
  font-size: 12.5px; font-weight: 600; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rpn-elapsed { margin-left: auto; font-size: 11px; color: var(--text-faint); }

.rpn-bar { height: 3px; border-radius: 999px; background: var(--border-subtle); overflow: hidden; }
.rpn-bar > span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--accent);
  /* Slow enough to read as motion, not as a jump between server events. */
  transition: width .55s cubic-bezier(.33, 0, .2, 1), background-color .3s;
}
.run-panel.is-complete .rpn-bar > span { background: var(--severity-success); }
.run-panel.is-error    .rpn-bar > span { background: var(--severity-critical); }
/* The run's LAST WAIT: the bar is held just short of complete on purpose, so
   the only honest way to say it is still working is to keep it moving without
   moving it. `finishRunPanel` takes the class off when the run really lands. */
.run-panel.is-finishing .rpn-bar > span {
  background-image: linear-gradient(100deg, transparent 28%,
    color-mix(in srgb, var(--shimmer) 46%, transparent) 50%, transparent 72%);
  background-size: 240% 100%;
  animation: rpnSweep 1.4s linear infinite;
}
@keyframes rpnSweep { from { background-position: 140% 0; } to { background-position: -60% 0; } }
/* AND IT HAS TO SIT HERE, AFTER THE RULE IT OVERRIDES. Both selectors are
   `.run-panel.is-finishing .rpn-bar > span` — identical specificity (0,3,1) —
   and a media query adds none, so document order alone decides. This lived in
   the reduced-motion block up with the detect-runtime overrides, several
   hundred lines ABOVE the sweep, where it lost: a reader who asks for reduced
   motion got an infinite shimmer for the whole minute-long wait. */
@media (prefers-reduced-motion: reduce) {
  .run-panel.is-finishing .rpn-bar > span { animation: none; }
}
/* The run finished and its report has not come back. Not a failure (nothing
   went wrong) and not a completion (there is nothing to read yet) — its own
   colour, and a button, because this is the one ending the reader can act on. */
.run-panel.is-pending  .rpn-bar > span { background: var(--severity-medium); }
.rpn-retry {
  display: block; width: 100%; margin-top: 10px;
  padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--border-subtle); background: var(--bg-soft2);
  font: inherit; font-size: 12px; font-weight: 550; color: var(--text-primary);
  cursor: pointer;
}
.rpn-retry:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink); }
.rpn-retry:disabled { opacity: .6; cursor: default; }

.rpn-stage {
  margin-top: 9px;
  font-size: 12px; line-height: 17px; color: var(--text-secondary);
  min-height: 34px;
}
.rpn-stage.is-swap { animation: rpnSwap .34s cubic-bezier(.4, 0, .2, 1); }
@keyframes rpnSwap {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.rpn-phases { list-style: none; margin: 8px 0 0; padding: 0; }
.rpn-phases li {
  display: flex; align-items: center; gap: 9px;
  font-size: 11.5px; line-height: 20px;
  color: var(--text-faint);
  transition: color .3s;
}
.rpn-phases li.is-active { color: var(--text-primary); font-weight: 550; }
.rpn-phases li.is-done   { color: var(--text-muted); }
.rpn-tick {
  width: 12px; height: 12px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--border-strong);
  position: relative;
  transition: border-color .3s, background-color .3s;
}
.rpn-phases li.is-active .rpn-tick {
  border-color: var(--accent);
  border-top-color: transparent;
  animation: srSpin .8s linear infinite;
}
.rpn-phases li.is-done .rpn-tick {
  border-color: var(--severity-success);
  background: var(--severity-success);
}
.rpn-phases li.is-done .rpn-tick::after {
  content: ""; position: absolute; left: 3px; top: 1.5px;
  width: 3px; height: 6px;
  border: solid var(--bg-pane); border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg);
}

.rpn-findings { margin-top: 11px; border-top: 1px solid var(--border-subtle); padding-top: 9px; }
.rpn-findings-h {
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 5px;
}
.rpn-findings-h #rpnCount { color: var(--text-primary); font-size: 11px; }
.rpn-findings-h #rpnCount.is-bump { animation: rpnBump .32s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes rpnBump { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }
.rpn-findings ul { list-style: none; margin: 0; padding: 0; }
.rpn-findings li {
  display: grid; grid-template-columns: 8px 1fr; gap: 8px; align-items: baseline;
  font-size: 11.5px; line-height: 17px; color: var(--text-secondary);
  padding: 2px 0;
  animation: rpnRow .34s cubic-bezier(.4, 0, .2, 1) both;
  overflow: hidden;
}
.rpn-findings li span:last-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@keyframes rpnRow {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes lineFade {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Issue cards stagger reveal */
.issue-card.is-revealing {
  opacity: 0;
  transform: translateY(6px);
  animation: cardReveal .26s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes cardReveal {
  to { opacity: 1; transform: translateY(0); }
}

/* Run button — has emphasis on Detect */
.run-btn-emphatic {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  background: var(--accent);
  color: var(--text-inverse);
  border: 0;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 24%, transparent);
  transition: filter .12s, transform .08s;
}
.run-btn-emphatic:hover { filter: brightness(0.92); }
.run-btn-emphatic:active { transform: translateY(1px); }
.run-btn-emphatic.is-running { filter: brightness(0.85); pointer-events: none; }
.track {
  position: relative;
  height: 28px;
  cursor: pointer;
}
.track::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 13px;
  height: 2px;
  background: var(--border-subtle);
  border-radius: 2px;
}

.watches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-hairline);
  min-height: 30px;
}
.watch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 11px;
  font-family: var(--font-mono);
  border: 1px solid var(--border-subtle);
  background: var(--bg-app);
  color: var(--text-secondary);
}
.watch.is-fresh {
  animation: chipFlash .9s ease;
  border-color: var(--accent);
}
.watch.is-conflict {
  border-color: var(--severity-critical);
  background: var(--bg-active-red);
}
@keyframes chipFlash {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 30%, transparent); }
  100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent); }
}
@keyframes seReveal {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Global file-drag hint: drop anywhere to upload. */
body.is-file-drag::after {
  /* Generated content cannot be reached by the i18n DOM pass, so the copy for
     each language lives in a custom property the <html lang> switch overrides. */
  content: var(--copy-drop-to-upload, "Drop to upload");
  position: fixed; inset: 10px; z-index: 400;
  border: 2px dashed var(--accent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-app) 84%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; color: var(--accent);
  pointer-events: none;
}
html[lang="ru"] { --copy-drop-to-upload: "Перетащите для загрузки"; }

/* ============================================================
   Language switch (settings popover)
============================================================ */
.settings-pop .sp-sec {
  margin: 14px 0 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.lang-switch {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* The circle: one button, two states, the inactive language showing through so
   it reads as a switch rather than a badge. */
.lang-dial {
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  background: var(--bg-app);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  font-family: var(--font-mono);
}
.lang-dial:hover { border-color: var(--accent); transform: translateY(-1px); }
.lang-dial:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lang-dial .ld-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  transition: transform .26s cubic-bezier(.4, 0, .2, 1), opacity .18s ease;
}
.lang-dial .ld-face.is-on {
  transform: translateY(0);
  opacity: 1;
  color: var(--accent);
}
.lang-dial .ld-face.is-off {
  transform: translateY(105%);
  opacity: 0;
  color: var(--text-muted);
}
.lang-dial::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: .28;
  pointer-events: none;
}
.lang-switch .ls-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lang-switch .ls-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}
.lang-switch .ls-hint {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 15px;
}
.parse-queue {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--text-faint);
  border-top: 1px dashed var(--border-subtle);
  padding-top: 8px;
}
.sim-impact { margin-top: 12px; }
.sim-impact-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12.5px; padding: 3px 0;
}
.sim-impact-row .sim-impact-v { font-family: var(--font-mono); font-size: 12px; }
.sim-impact-row.is-changed .sim-impact-v { color: var(--severity-critical); font-weight: 600; }
.sim-impact-base { color: var(--text-faint); font-weight: 400; }
.sim-clause-card {
  border: 1px solid var(--border-hairline);
  background: var(--bg-app);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color .12s;
}
.sim-clause-card:hover { border-color: var(--accent); }
.sim-clause-card.is-fired   { border-color: var(--accent); background: var(--accent-soft); }
.sim-clause-card.is-conflict { border-color: var(--severity-critical); background: var(--bg-active-red); }
.scc-num {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  margin-right: 6px;
}
.scc-text {
  font-size: 12.5px;
  line-height: 19px;
  color: var(--text-primary);
}
.scc-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--accent);
  margin-left: 6px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  padding: 0 5px;
  border-radius: 8px;
}
.scc-tag.is-conflict { color: var(--severity-critical); background: rgba(180,35,24,.10); }
.stress-input-wrap {
  background: var(--bg-pane);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.stress-input {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-app);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 6px 6px 6px 14px;
  transition: border-color .12s, box-shadow .12s;
}
.stress-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.stress-input .prompt {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
}
.stress-input input {
  flex: 1 1 auto;
  background: transparent;
  border: 0; outline: 0;
  font-size: 13.5px;
  color: var(--text-primary);
  font-weight: 450;
}
.stress-input input::placeholder { color: var(--text-muted); }
.stress-input .stress-go {
  height: 30px;
  padding: 0 14px;
  background: var(--accent);
  color: var(--text-inverse);
  border: 0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.stress-input .stress-go:hover { filter: brightness(0.92); }
.stress-suggest { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.stress-suggest button {
  font-size: 11.5px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-subtle);
  padding: 4px 10px;
  border-radius: 12px;
  cursor: pointer;
}
.stress-suggest button:hover { color: var(--text-primary); border-color: var(--border-strong); background: var(--bg-app); }

.stress-current {
  background: var(--bg-pane);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 18px;
}
.stress-q {
  font-size: 13.5px;
  font-weight: 550;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.stress-q .prompt { color: var(--accent); font-family: var(--font-mono); margin-right: 8px; }
.stress-q .sq-label {
  display: inline-block;
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); margin-right: 10px; vertical-align: 1px;
}
.stress-q .sq-text { font-weight: 550; }

/* ---- what-if in progress. Not a terminal: a determinate bar over the
   simulation's own steps, and the steps themselves as they land. ---- */
.stress-run { padding: 2px 0 2px; }
.sr-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.sr-label { font-size: 12.5px; color: var(--text-secondary); }
.sr-count { margin-left: auto; font-size: 11px; color: var(--text-muted); }
.sr-spin {
  width: 12px; height: 12px; border-radius: 50%; flex: none;
  border: 1.6px solid var(--border-strong);
  border-top-color: var(--accent);
  animation: srSpin .7s linear infinite;
}
@keyframes srSpin { to { transform: rotate(360deg); } }
.sr-bar {
  height: 3px; border-radius: 999px; overflow: hidden;
  background: var(--border-subtle);
}
.sr-bar > span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--accent);
  transition: width .32s cubic-bezier(.4, 0, .2, 1);
}
.sr-bar.is-indeterminate > span {
  width: 38% !important;
  animation: srSlide 1.25s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes srSlide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(265%); }
}
.sr-steps { list-style: none; margin: 12px 0 0; padding: 0; }
.sr-steps li {
  display: grid; grid-template-columns: 7px 1fr; gap: 10px;
  align-items: baseline; padding: 3px 0;
  font-size: 12.5px; line-height: 18px;
  animation: seReveal .32s cubic-bezier(.4, 0, .2, 1) both;
}
.sr-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-faint); opacity: .6; align-self: center;
}
.sr-step-text { color: var(--text-secondary); }
@keyframes blink { 50% { opacity: 0; } }

/* ---- the what-if result ---------------------------------------------------
   A three-column grid (icon | everything | tag) forced the verdict, the
   narration, the timeline and the money tiles all into ONE middle column of
   whatever width was left, and every one of them then read as a footnote to
   the icon. Now the verdict is a header band and the result is a full-width
   body under it, so a step of the simulation gets the room a sentence needs. */
.stress-verdict {
  margin-top: 16px;
  border-radius: 12px;
  border: 1px solid;
  overflow: hidden;
  background: var(--bg-pane);
}
/* Derived from the severity tokens rather than hardcoded light-theme hex:
   the old #b8d8be/#f1c0bc/#e7d28a stayed pastel-light in dark mode, the one
   part of the card that ignored the theme. */
.stress-verdict.is-safe   { border-color: color-mix(in srgb, var(--severity-success) 45%, var(--border-hairline)); }
.stress-verdict.is-unsafe { border-color: color-mix(in srgb, var(--severity-critical) 45%, var(--border-hairline)); }
.stress-verdict.is-warn   { border-color: color-mix(in srgb, var(--severity-medium) 45%, var(--border-hairline)); }
.stress-verdict.is-ask    { border-color: color-mix(in srgb, var(--severity-low) 45%, var(--border-hairline)); }
.is-ask .sv-head { background: color-mix(in srgb, var(--severity-low) 10%, var(--bg-pane)); }
.is-ask .sv-icon, .is-ask .sv-verdict-pill { color: var(--severity-low); }
.sv-head {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
}
.is-safe   .sv-head { background: var(--bg-active-green); }
.is-unsafe .sv-head { background: var(--bg-active-red); }
.is-warn   .sv-head { background: var(--bg-active-amber); }
.sv-head-text { min-width: 0; }
.sv-icon {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
}
.is-safe .sv-icon   { color: var(--severity-success); }
.is-unsafe .sv-icon { color: var(--severity-critical); }
.is-warn .sv-icon   { color: var(--severity-medium); }
.sv-verdict-pill {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--text-inverse) 55%, transparent);
}
.is-safe   .sv-verdict-pill { color: var(--severity-success); }
.is-unsafe .sv-verdict-pill { color: var(--severity-critical); }
.is-warn   .sv-verdict-pill { color: var(--severity-medium); }
/* Wraps rather than truncating: a scenario title is the question the reader
   just asked, and half of it is worse than two lines of it. */
.sv-title {
  font-size: 14.5px; font-weight: 600; color: var(--text-primary);
  margin: 6px 0 0; line-height: 1.35; overflow-wrap: anywhere;
}
.sv-answer {
  font-size: 13px; color: var(--text-secondary);
  margin: 5px 0 0; line-height: 1.5; max-width: 68ch;
}
.sv-body { padding: 4px 18px 16px; }
.sv-more { margin-top: 14px; font-size: 12.5px; color: var(--text-muted); }
.sv-more summary { cursor: pointer; font-size: 11.5px; color: var(--text-faint); }
.sv-more p { margin: 6px 0 0; line-height: 1.55; max-width: 72ch; }
.sv-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; }

/* ---- live what-if outcome (assumptions, timeline, money) ---- */
.sv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.sv-chip {
  font-size: 11px; line-height: 16px; padding: 3px 9px; border-radius: 999px;
  border: 1px dashed var(--border-strong); color: var(--text-secondary);
  background: color-mix(in srgb, var(--text-inverse) 45%, transparent);
}
.sv-sec { margin-top: 18px; }
.sv-sec-h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600; color: var(--text-muted);
  margin: 0 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border-hairline);
}
.sv-sec-n { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text-faint); }

/* The step list. Text WRAPS — every one of these rows is a sentence about
   what the contract did, and a clamped one stops mid-thought. */
.sv-tl { list-style: none; margin: 0; padding: 0; }
.sv-tl li {
  display: grid; grid-template-columns: 16px 1fr; gap: 12px;
  align-items: stretch; padding: 0 0 14px;
}
.sv-tl li:last-child { padding-bottom: 0; }
.sv-tl-rail { position: relative; display: flex; justify-content: center; }
/* The connecting line, so the steps read as a sequence rather than a list. */
.sv-tl li:not(:last-child) .sv-tl-rail::after {
  content: ""; position: absolute; top: 14px; bottom: -14px; width: 1px;
  background: var(--border-subtle);
}
.sv-tl-dot {
  width: 9px; height: 9px; border-radius: 50%; margin-top: 5px;
  background: var(--text-faint); flex: none; z-index: 1;
  box-shadow: 0 0 0 3px var(--bg-pane);
}
.sv-tl-body { min-width: 0; }
.sv-tl-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.sv-tl-n {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--text-faint);
}
.sv-tl-day { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }
.sv-tl-flag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--severity-critical); background: var(--bg-active-red);
  padding: 1px 6px; border-radius: 999px;
}
.sv-tl-label {
  margin: 0; font-size: 13px; line-height: 1.5;
  color: var(--text-primary); overflow-wrap: anywhere;
}
.sv-tl-meta {
  margin: 3px 0 0; font-size: 12px; line-height: 1.5;
  color: var(--text-muted); overflow-wrap: anywhere;
}
.sv-tl li.is-risk .sv-tl-dot   { background: var(--severity-critical); }
.sv-tl li.is-risk .sv-tl-label { color: var(--severity-critical); font-weight: 550; }
.sv-tl-missed { font-style: italic; }
.svtl-conflict  .sv-tl-dot { background: var(--severity-critical); }
.svtl-rule-fire .sv-tl-dot { background: var(--severity-medium); }
.svtl-lifecycle .sv-tl-dot { background: var(--accent-ink); }
.svtl-refused   .sv-tl-dot { background: transparent; border: 1.5px solid var(--severity-medium); }
.svtl-blocked   .sv-tl-dot { background: transparent; border: 1.5px solid var(--severity-medium); }
.svtl-routine   .sv-tl-dot { background: var(--text-faint); opacity: .55; }
.svtl-routine   .sv-tl-label { color: var(--text-muted); }

/* Chips on a timeline row: the clause that decided the step (a real button —
   it opens the clause in Draft) and the mark for a step the QUESTION scripted
   rather than the party choosing. */
.sv-tl-clause {
  font-family: var(--font-mono); font-size: 10.5px; line-height: 16px;
  padding: 0 7px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-strong); background: transparent;
  color: var(--text-secondary); white-space: nowrap;
  transition: color .12s ease, border-color .12s ease;
}
.sv-tl-clause:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.sv-tl-directed {
  font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-soft);
  padding: 1px 6px; border-radius: 999px; white-space: nowrap;
}

/* A run of quiet periods, folded into one row. The dashed button is the only
   thing in it — the rail dot stays so the line of the run is unbroken. */
.sv-tl-fold .sv-tl-dot { background: transparent; border: 1.5px dashed var(--border-strong); }
.sv-tl-fold-btn {
  align-self: center; justify-self: start;
  font-size: 11.5px; color: var(--text-muted); cursor: pointer;
  border: 1px dashed var(--border-strong); border-radius: 999px;
  background: transparent; padding: 3px 12px;
  transition: color .12s ease, border-color .12s ease;
}
.sv-tl-fold-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }

/* WHAT YOU ASKED — AND THE RULING. One row per act the question named:
   the act, a ruling word whose colour carries the outcome, the clause that
   decided it, and (when the ruling needs defending) the reasoning. */
.sv-asked-list { list-style: none; margin: 0; padding: 0; }
.sv-asked-row {
  padding: 9px 0; border-top: 1px solid var(--border-hairline);
}
.sv-asked-row:first-child { border-top: 0; }
.sv-asked-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sv-asked-act {
  font-size: 13px; line-height: 1.5; color: var(--text-primary);
  overflow-wrap: anywhere; flex: 1 1 240px;
}
.sv-asked-ruling {
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 1px 8px; border-radius: 999px; white-space: nowrap;
}
.sv-asked-row.is-permitted .sv-asked-ruling { color: var(--severity-success); background: color-mix(in srgb, var(--severity-success) 14%, transparent); }
.sv-asked-row.is-refused   .sv-asked-ruling { color: var(--severity-critical); background: var(--bg-active-red); }
.sv-asked-row.is-unclear   .sv-asked-ruling { color: var(--severity-medium); background: color-mix(in srgb, var(--severity-medium) 16%, transparent); }
.sv-asked-row.is-unreached .sv-asked-ruling,
.sv-asked-row.is-missing   .sv-asked-ruling { color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 12%, transparent); }
.sv-asked-clause {
  font-family: var(--font-mono); font-size: 10.5px; line-height: 16px;
  padding: 0 7px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-strong); background: transparent;
  color: var(--text-secondary); white-space: nowrap;
  transition: color .12s ease, border-color .12s ease;
}
.sv-asked-clause:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.sv-asked-clause.is-plain { cursor: default; }
.sv-asked-why {
  margin: 4px 0 0; font-size: 12px; line-height: 1.5;
  color: var(--text-muted); overflow-wrap: anywhere;
}

/* The two step counters in a section heading, separated by a middot that is
   its own node so each half can be translated on its own. */
.svn-sep { margin: 0 5px; color: var(--text-faint); }

/* The working panel's honest footnote under the elapsed clock. */
.sr-note { margin: 8px 0 0; font-size: 11.5px; color: var(--text-faint); line-height: 1.5; }
.sv-life {
  margin-top: 12px; padding: 8px 12px; border-radius: 8px;
  background: var(--accent-soft);
  font-size: 12.5px; font-weight: 600; color: var(--accent-ink); line-height: 1.5;
}
.sv-money { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
.sv-mtile {
  border: 1px solid var(--border-subtle); border-radius: 10px; padding: 12px 14px;
  background: var(--bg-app);
}
.sv-mtile.is-behind { border-color: color-mix(in srgb, var(--severity-critical) 35%, var(--border-subtle)); }
.sv-mtile.is-ahead  { border-color: color-mix(in srgb, var(--severity-success) 35%, var(--border-subtle)); }
/* A party name can be "Meridian Microfinance Holding Company LLC, (D/B/A)
   Meridian Impact Finance". It wraps here rather than pushing the tile wide. */
.sv-mparty {
  font-size: 12px; font-weight: 600; color: var(--text-primary);
  margin-bottom: 8px; line-height: 1.35; overflow-wrap: anywhere;
}
.sv-mmain { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.sv-mmain b { font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--text-primary); }
.sv-mdir { font-size: 11.5px; color: var(--text-muted); }
.is-behind .sv-mmain b { color: var(--severity-critical); }
.is-ahead  .sv-mmain b { color: var(--severity-success); }
.sv-mrow {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 11.5px; color: var(--text-muted); padding: 3px 0;
  border-top: 1px solid var(--border-hairline);
}
.sv-mrow b { font-family: var(--font-mono); font-size: 12px; color: var(--text-primary); white-space: nowrap; }
.sv-mrow b.is-neg  { color: var(--severity-critical); }
.sv-mrow b.is-pos  { color: var(--severity-success); }
.sv-mrow b.is-flat { color: var(--text-faint); font-family: inherit; }
/* "none: the same amounts fall due either way…" is a sentence, not a figure —
   the nowrap that keeps money on one line would push the tile off the grid. */
.sv-mrow b.is-wrap { white-space: normal; text-align: right; font-weight: 500; }
/* The end-of-term figure is context for the window above it, not a rival
   headline: it is kept so nothing that used to be shown disappeared, and
   dimmed so it cannot be mistaken for what this run measured. */
.sv-mrow.is-dim { color: var(--text-faint); }
.sv-mrow.is-dim b { color: var(--text-faint); font-weight: 500; }
.sv-notes {
  margin-top: 16px; padding-left: 14px;
  font-size: 12px; color: var(--text-muted); line-height: 1.55;
  border-left: 2px solid var(--border-subtle);
}
.sv-notes div + div { margin-top: 4px; }
.sv-suggest { margin-top: 2px; }

/* ============================================================
   DRAFT MODE
============================================================ */
.draft-layout {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 36px 32px;
  gap: 18px;
}
.draft-doc {
  background: var(--bg-doc);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 40px 56px 80px;
  min-height: 60vh;
}
.draft-doc h1 {
  font-family: var(--font-doc);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: 0 0 4px;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.18;
}
.draft-doc .doc-meta {
  font-family: var(--font-doc);
  font-size: 12.5px;
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: 14px;
  text-align: center;
}
.draft-doc h2 {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  margin: 28px 0 12px;
}
.draft-doc-strip {
  display: flex;
  gap: 16px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  padding: 10px 0 4px;
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
  margin: 14px 0 24px;
}
.draft-doc-strip strong {
  color: var(--text-primary);
  font-weight: 650;
  margin-right: 4px;
}
.draft-doc-strip .muted { margin-left: auto; color: var(--text-faint); }

.draft-section-h {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-doc);
  font-size: 14.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  margin: 30px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle);
  scroll-margin-top: 24px;
  transition: background .2s, box-shadow .2s;
}
.draft-section-h.is-jump-target {
  background: var(--accent-soft);
  box-shadow: -8px 0 0 0 var(--accent-soft), 8px 0 0 0 var(--accent-soft);
  animation: jumpPulse 1.4s ease;
}
@keyframes jumpPulse {
  0%   { background: transparent; }
  20%  { background: var(--accent-soft); }
  100% { background: transparent; }
}
.draft-section-h .dsh-num {
  font-family: var(--font-mono);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.03em;
}
.draft-section-h .dsh-title { flex: 1 1 auto; }
.draft-section-h .dsh-status {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--severity-success);
}
.draft-section-h .dsh-status.s-warn { background: var(--severity-medium); }
.draft-section-h .dsh-status.s-crit { background: var(--severity-critical); }
.draft-section-h .dsh-count {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-faint);
}

.draft-clause {
  position: relative;
  padding: 6px 12px 6px 18px;
  margin: 2px -12px;
  border-radius: 0 6px 6px 0;
  cursor: text;
  font-family: var(--font-doc);
  font-size: 14px;
  line-height: 24px;
  text-align: justify;
  hyphens: auto;
}
.draft-clause:hover { background: var(--bg-soft); }
.draft-clause:focus-within { background: var(--bg-soft); outline: 0; }
.draft-clause::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px;
  background: transparent;
  border-radius: 2px;
}
.draft-clause.is-new::before { background: var(--mode-draft); }
.draft-clause.is-issue-warn::before { background: var(--severity-medium); }
.draft-clause.is-issue-crit::before { background: var(--severity-critical); width: 3px; }
.draft-clause.is-issue-warn { background: rgba(244, 195, 105, 0.06); }
.draft-clause.is-issue-crit { background: rgba(220, 78, 78, 0.06); }
.draft-clause-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  margin-right: 10px;
  font-weight: 500;
}
.draft-clause-body[contenteditable] { outline: none; }
.draft-clause-body { display: inline; }

.dc-issues {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  padding-left: 0;
}
.dc-issue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-pane);
  color: var(--text-secondary);
  cursor: pointer;
  line-height: 14px;
}
.dc-issue:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-soft);
}
.dc-issue.is-crit { border-color: rgba(220, 78, 78, .35); }
.dc-issue.is-high { border-color: rgba(244, 195, 105, .45); }

.eye-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
}
.eye-toggle.is-on {
  color: var(--mode-draft);
  background: color-mix(in srgb, var(--mode-draft) 10%, transparent);
  border-color: color-mix(in srgb, var(--mode-draft) 35%, transparent);
}
.eye-toggle svg { flex: 0 0 auto; }

/* REMOVED with the slash-command bar it styled (app.js: bindDraft). */

/* ---- Document blocks (NDA / MSA / License style) ---- */
.doc-letterhead {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
  padding: 8px 0;
  margin: 12px 0 22px;
  justify-content: center;
}
.doc-letterhead span { white-space: nowrap; }

.doc-preamble,
.doc-recital,
.doc-intro,
.doc-paragraph {
  font-family: var(--font-doc);
  font-size: 14px;
  line-height: 1.7;
  text-align: justify;
  hyphens: auto;
  margin: 14px 0;
  padding: 4px 6px;
  border-radius: 4px;
  outline: 0;
}
.doc-preamble:focus,
.doc-recital:focus,
.doc-intro:focus,
.doc-paragraph:focus { background: var(--bg-soft); }

.doc-preamble { text-indent: 1.5em; }
.doc-recital  { text-indent: 1.5em; color: var(--text-secondary); }
.doc-recital::first-letter,
.doc-preamble::first-letter { font-weight: 600; }
.doc-intro    { font-weight: 600; text-indent: 1.5em; }

.doc-def {
  display: block;
  font-family: var(--font-doc);
  font-size: 14px;
  line-height: 1.7;
  margin: 6px 0;
  padding: 2px 6px;
  border-radius: 4px;
}
.doc-def:hover { background: var(--bg-soft); }
.doc-def-term {
  font-weight: 700;
  color: var(--text-primary);
  margin-right: 6px;
}
.doc-def-body {
  display: inline;
  outline: 0;
}

.doc-schedule {
  margin: 28px 0 18px;
  padding: 18px 20px;
  border: 1px dashed var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-pane);
}
.doc-schedule-h {
  font-family: var(--font-doc);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  margin: 0 0 6px;
}
.doc-schedule-intro {
  font-family: var(--font-doc);
  font-size: 12.5px;
  font-style: italic;
  color: var(--text-muted);
  margin: 0 0 12px;
}
.doc-schedule-rows {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
.doc-schedule-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}
.doc-schedule-card {
  min-height: 82px;
  padding: 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  background: var(--bg-doc);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.doc-schedule-card-label {
  font-family: var(--font-doc);
  font-size: 11.5px;
  color: var(--text-secondary);
}
.doc-schedule-card-value {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-primary);
}
.doc-schedule-card-rate {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
}
@media (max-width: 900px) {
  .doc-schedule-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.doc-schedule-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border-hairline);
}
.doc-schedule-row:last-child { border-bottom: 0; }
.doc-schedule-label {
  font-family: var(--font-doc);
  color: var(--text-secondary);
}
.doc-schedule-value {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
  text-align: right;
}

.doc-signature {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}
.doc-signature-grid {
  display: grid;
  grid-template-columns: repeat(var(--sig-parties, 2), minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 720px) {
  .doc-signature-grid { grid-template-columns: 1fr; }
}
.doc-sig {
  font-family: var(--font-doc);
  font-size: 12.5px;
}
.doc-sig-entity {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11.5px;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.doc-sig-line {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 8px;
}
.doc-sig-by {
  font-weight: 600;
  color: var(--text-secondary);
}
.doc-sig-rule {
  flex: 1;
  height: 20px;
  border-bottom: 1px solid var(--text-muted);
}
.doc-sig-meta {
  display: grid;
  gap: 2px;
  font-size: 11.5px;
  color: var(--text-secondary);
}
.doc-sig-key {
  display: inline-block;
  min-width: 46px;
  color: var(--text-muted);
  font-weight: 500;
}

.draft-empty {
  margin-top: 28px;
  padding: 36px 24px;
  border: 1px dashed var(--border-subtle);
  border-radius: 10px;
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-doc);
  font-size: 13.5px;
  line-height: 1.7;
}
.draft-empty p { margin: 4px 0; }
.draft-empty-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}

/* ---- Upload modal ---- */
.upload-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 18px;
  border: 1.5px dashed var(--border-subtle);
  border-radius: 10px;
  background: var(--bg-pane);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.upload-drop:hover,
.upload-drop.is-drag {
  border-color: var(--mode-draft);
  color: var(--mode-draft);
  background: color-mix(in srgb, var(--mode-draft) 6%, var(--bg-pane));
}
.upload-drop.is-picked {
  border-style: solid;
  border-color: var(--mode-draft);
  color: var(--text-primary);
}
.upload-drop svg { color: var(--mode-draft); }
.upload-drop-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.upload-drop-sub {
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.upload-drop button { margin-top: 4px; }
.upload-hint {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ============================================================
   REPORT MODE
============================================================ */
.report-layout {
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 36px 64px;
}
.report-doc {
  background: var(--bg-doc);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 48px 64px 64px;
  font-family: var(--font-doc);
  font-size: 14px;
  line-height: 24px;
  color: var(--text-primary);
  text-align: justify;
  hyphens: auto;
}
.report-doc .rd-eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--mode-report);
}
.report-doc h1 {
  font-family: var(--font-doc);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0;
  margin: 6px 0 8px;
  text-align: center;
  text-transform: uppercase;
}
.report-doc .rd-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 18px;
}
.report-doc h2 {
  font-family: var(--font-doc);
  font-size: 14.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--mode-report);
  margin: 32px 0 10px;
  text-align: left;
}
.report-doc h3 {
  font-family: var(--font-doc);
  font-size: 15px;
  font-weight: 600;
  margin: 18px 0 6px;
  text-align: left;
}
.report-doc .rd-meta { font-family: var(--font-ui); }
.report-doc p { margin: 0 0 12px; }
.report-doc .rd-quote {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 19px;
  border-left: 2px solid var(--severity-success);
  padding: 6px 0 6px 14px;
  color: var(--text-primary);
  margin: 8px 0 14px;
  white-space: pre-wrap;
}
.report-doc .rd-issue {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 12px;
}
.report-doc .rd-issue strong { font-weight: 600; }

.report-toc {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  border-left: 2px solid var(--border-subtle);
  padding-left: 14px;
  margin-bottom: 22px;
}
.report-toc-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}
.report-toc-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  width: 20px;
}

/* ============================================================
   Report — legal memorandum
============================================================ */
.report-toolbar {
  max-width: 980px;
  margin: 0 auto 14px;
  padding: 0 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.rt-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.rt-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 11px;
  border: 1px solid var(--border-subtle); border-radius: 999px;
  background: var(--bg-doc); color: var(--text-secondary);
  font-family: var(--font-ui); font-size: 12px; font-weight: 550; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.rt-chip:hover { border-color: var(--accent); color: var(--text-primary); }
.rt-chip.is-active { border-color: var(--accent-ink); color: var(--accent-ink); background: color-mix(in srgb, var(--accent-ink) 8%, transparent); }
.rt-count { font-variant-numeric: tabular-nums; font-size: 11px; color: var(--text-muted); }
.rt-chip.is-active .rt-count { color: var(--accent-ink); }
.rt-actions { display: flex; gap: 8px; }

.report-memo .rm-banner {
  font-family: var(--font-ui);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 650; color: var(--severity-critical);
  text-align: center; margin-bottom: 6px;
}
.report-memo h1.rm-title { letter-spacing: 0.16em; font-size: 26px; margin: 2px 0 4px; }
.rm-head {
  margin: 0 0 6px; padding: 14px 0 18px;
  border-top: 1px solid var(--text-primary); border-bottom: 1px solid var(--text-primary);
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 32px;
  font-family: var(--font-ui); font-size: 12.5px; text-align: left;
}
.rm-head > div { display: flex; gap: 10px; }
.rm-head dt {
  flex: none; min-width: 84px; font-weight: 650; text-transform: uppercase;
  font-size: 10.5px; letter-spacing: 0.06em; color: var(--text-muted); padding-top: 1px;
}
.rm-head dd { margin: 0; color: var(--text-primary); }
.report-memo h2.rm-h {
  text-transform: none; letter-spacing: 0; font-size: 16px; font-weight: 700;
  color: var(--text-primary); border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 5px; margin: 30px 0 12px;
}
.rm-loading {
  font-family: var(--font-ui); font-size: 12px; font-style: italic;
  color: var(--text-muted); text-align: left; margin: 0 0 14px;
}
.rm-finding { margin: 0 0 26px; padding: 0 0 22px; border-bottom: 1px solid var(--border-subtle); }
.rm-finding:last-of-type { border-bottom: 0; padding-bottom: 0; }
.rm-finding-h {
  text-align: left; font-size: 15.5px; font-weight: 700; margin: 0 0 9px;
  line-height: 1.4; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
}
.rm-num { color: var(--accent-ink); font-weight: 700; flex: none; }
.rm-cites { font-family: var(--font-ui); font-size: 11.5px; font-weight: 550; color: var(--text-muted); }
.rm-tag {
  font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
  border: 1px solid currentColor; line-height: 1.4; margin-left: auto;
}
.rm-tag.sev-critical { color: var(--severity-critical); }
.rm-tag.sev-high { color: var(--severity-high); }
.rm-tag.sev-medium { color: var(--severity-medium); }
.rm-tag.sev-low, .rm-tag.sev-info { color: var(--text-muted); }
.rm-tier { font-family: var(--font-ui); font-size: 10.5px; color: var(--text-muted); font-style: italic; font-weight: 500; }
.report-memo .rm-finding p { margin: 0 0 9px; }
.report-memo .rm-finding strong { font-weight: 700; }
/* Run-in labels read like a memo: Issue / In plain terms / For example / Recommendation. */
.report-memo .rm-finding p > strong:first-child {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary);
}
/* Plain-English gloss: a quiet, indented aside set off from the legal prose. */
.report-memo .rm-plain {
  text-align: left; padding-left: 16px; border-left: 2px solid var(--border-subtle);
  color: var(--text-secondary);
}
.report-memo .rm-plain > strong:first-child { color: var(--accent-ink); }
/* Analogy: an everyday illustration, set in italic like an aside. */
.report-memo .rm-analogy { text-align: left; font-style: italic; color: var(--text-secondary); }
.report-memo .rm-analogy > strong:first-child { font-style: normal; color: var(--text-muted); }
.report-memo .rm-stakes { color: var(--severity-high); font-weight: 500; }
.report-memo .rm-stakes > strong:first-child { color: var(--severity-high); }
.rm-support { margin: 4px 0 8px; }
.rm-support > p { margin: 0 0 4px; }
.report-memo blockquote.rm-quote {
  margin: 2px 0 10px; padding: 8px 0 8px 16px;
  border-left: 2px solid var(--border-strong);
  font-style: italic; color: var(--text-secondary); text-align: left;
}
.rm-quote .rm-cite {
  display: block; font-style: normal; font-family: var(--font-ui);
  font-size: 10.5px; font-weight: 650; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px;
}
.rm-none { color: var(--text-muted); font-style: italic; }
.rm-fine { font-size: 12px; color: var(--text-muted); line-height: 19px; }
.rm-sign {
  margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 2px; text-align: left;
}
.rm-sign-name { font-weight: 650; }
@media (max-width: 720px) { .rm-head { grid-template-columns: 1fr; } }


/* ============================================================
   Report v2 — dumb-friendly, filterable, formatting-first
============================================================ */
.report-layout.rpt {
  max-width: 940px;
  padding: 24px 32px 80px;
  font-family: var(--font-ui);
}
/* severity as one palette used everywhere in the report */
.rpt {
  --rc-critical: var(--severity-critical);
  --rc-high: var(--severity-high);
  --rc-medium: var(--severity-medium);
  --rc-low: var(--severity-low);
}

/* ---- HERO: the five-second read -------------------------------------- */
.rpt-hero {
  position: relative;
  border-radius: 16px;
  padding: 22px 26px 20px;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 12px 30px -18px rgba(20, 26, 34, .5);
  background: linear-gradient(135deg, #2a3646, #1a2431);
}
.rpt-hero.risk-severe  { background: linear-gradient(135deg, #7d1d15, #4a1410); }
.rpt-hero.risk-high    { background: linear-gradient(135deg, #8a3d10, #5a2a10); }
.rpt-hero.risk-medium  { background: linear-gradient(135deg, #7a5a16, #40340f); }
.rpt-hero.risk-low     { background: linear-gradient(135deg, #1e5a3a, #123a26); }
.rpt-hero.risk-clear   { background: linear-gradient(135deg, #1e5a3a, #123a26); }
.rpt-hero-top {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
.rpt-eyebrow { font-weight: 700; opacity: .72; }
.rpt-doc { opacity: .92; letter-spacing: .04em; text-transform: none; font-size: 12.5px; font-weight: 500; }
.rpt-hero-grid { display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.rpt-hero-verdict { flex: 1 1 340px; min-width: 260px; }
.rpt-hero-verdict h1 {
  font-size: 25px; line-height: 1.15; font-weight: 700; letter-spacing: -0.015em;
  margin: 0 0 8px; text-align: left; text-transform: none; font-family: var(--font-ui); color: #fff;
}
.rpt-hero-verdict p { margin: 0; font-size: 13.5px; line-height: 1.5; opacity: .9; max-width: 52ch; }
.rpt-risk-dot { display: none; }
/* SIX OR SEVEN TILES, NOT FOUR. The strip is the counts strip both exported
   files print — the four severity bands, the total, and the stability grade
   and the money where the report states them — so it needs four columns
   rather than two, and a narrower tile to hold them. */
.rpt-hero-stats { display: grid; grid-template-columns: repeat(4, minmax(78px, 1fr)); gap: 8px; flex: 0 0 auto; }
/* COLUMN-REVERSE, because the LABEL comes first in the markup and the number
   reads first on screen. The order matters beyond looks: the exported strip
   prints each column's label above its number, so a page that emitted the
   number first put the two surfaces' text in different orders for a reader
   comparing them (and for the parity tool that proves they match). */
.rpt-tile {
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 11px; padding: 10px 12px; min-width: 78px; backdrop-filter: blur(2px);
  display: flex; flex-direction: column-reverse; align-items: flex-start;
}
.rpt-tile b { display: block; font-size: 22px; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; }
.rpt-tile span { display: block; margin-top: 5px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; opacity: .78; }
.rpt-tile.hot { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .3); }
.rpt-sevbar { display: flex; gap: 3px; height: 7px; margin-top: 18px; border-radius: 999px; overflow: hidden; }
.rpt-sevbar .seg { border-radius: 999px; min-width: 6px; }
.rpt-sevbar .seg.sev-critical { background: #ff6b5e; }
.rpt-sevbar .seg.sev-high { background: #ffa05e; }
.rpt-sevbar .seg.sev-medium { background: #ffd27a; }
.rpt-sevbar .seg.sev-low { background: rgba(255, 255, 255, .5); }

/* ---- What kind of document this is ------------------------------------
   Inside the hero, so it is coloured for the dark gradient rather than for
   the page: every value here is white-on-translucent, like `.rpt-tile`. */
.rpt-doctype {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin-top: 18px; padding-top: 15px; border-top: 1px solid rgba(255, 255, 255, .16);
}
.rpt-dt-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; min-width: 0; }
.rpt-dt-k {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; opacity: .66;
}
.rpt-dt-v { font-size: 14px; font-weight: 650; letter-spacing: -0.005em; }
.rpt-dt-conf, .rpt-dt-src {
  font-size: 9.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2);
}
/* Low confidence is not an error, so it is not red — it is the state in which
   the override below is worth reaching for, and it says so quietly. */
.rpt-dt-conf.is-low { opacity: .82; }
.rpt-dt-conf.is-high { background: rgba(255, 255, 255, .22); }
.rpt-dt-ctl { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.rpt-dt-ctl select {
  height: 30px; max-width: 210px; padding: 0 8px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .12);
  color: #fff; font-family: var(--font-ui); font-size: 12.5px; cursor: pointer;
}
/* The list itself is painted by the OS with the page's colours, not the
   hero's, so the options need the readable pair back. */
.rpt-dt-ctl select option { color: var(--text-primary); background: var(--bg-doc); }
.rpt-dt-ctl .rpt-tool {
  background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .26); color: #fff;
}
.rpt-dt-ctl .rpt-tool:hover:not(:disabled) { background: rgba(255, 255, 255, .26); color: #fff; }
.rpt-dt-ctl .rpt-tool:disabled { opacity: .42; cursor: default; }
.rpt-dt-note { flex: 1 1 100%; margin: 0; font-size: 12px; opacity: .8; }
.rpt-dt-note b { font-weight: 650; }

/* The "What was checked" panel and its whole checklist family of rules are
   gone from the Report page: forty questions, most of them "clear", under the
   findings the reader came for. The engine still ships `checked`; only the
   page stopped printing it. */
@media (max-width: 620px) {
  .rpt-dt-ctl { margin-left: 0; flex: 1 1 100%; }
}

/* ---- FIX FIRST -------------------------------------------------------- */
/* ---- Memorandum: reading rhythm ----------------------------------------
   One vertical scale for the whole memo, so section spacing is a decision
   rather than an accident, and one entrance so nothing pops. */
.report-layout.rpt {
  --memo-gap: 30px;
  --memo-rule: 1px solid var(--border-subtle);
  font-size: 13.5px;
  line-height: 1.55;
}
.rpt > section,
.rpt > .rpt-findings { animation: memoRise .38s cubic-bezier(.22, .61, .36, 1) both; }
.rpt > section:nth-of-type(2) { animation-delay: .03s; }
.rpt > section:nth-of-type(3) { animation-delay: .06s; }
.rpt > section:nth-of-type(4) { animation-delay: .09s; }
@keyframes memoRise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .rpt > section, .rpt > .rpt-findings { animation: none; }
  .rpt-controls { transition: none; }
}

/* Section headings carry a rule, so the eye finds the seams without
   needing bigger type. */
.memo-block > h3,
.memo-group-h {
  display: flex; align-items: baseline; gap: 10px;
  letter-spacing: -0.005em;
}
.memo-block > h3::after {
  content: ""; flex: 1; height: 1px; background: var(--border-subtle);
}

/* ---- Memorandum sections (Report page) ---------------------------------
   The report is a memo before it is a list of cards: who it is for, the
   numbers, what the agreement is, every risk at once, then the risks
   themselves, then what to do. These rules carry that structure. */
.memo-loading {
  display: flex; align-items: center; gap: 9px;
  margin-top: 18px; font-size: 12.5px; color: var(--text-muted);
}
.memo-head {
  margin-top: var(--memo-gap); padding: 18px 20px;
  background: var(--bg-pane);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}
.memo-head-top { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.memo-title { font-family: var(--font-doc); font-size: 20px; font-weight: 600; margin: 0; color: var(--text-primary); }
.memo-particulars {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px 22px; margin: 0;
}
.memo-particular dt {
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 2px;
}
.memo-particular dd { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--text-primary); }
.memo-side { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.memo-side-label {
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted);
}
.memo-side-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.memo-side-btn {
  font-size: 12px; line-height: 18px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: transparent;
  color: var(--text-secondary); cursor: pointer;
  transition: background-color .16s, color .16s, border-color .16s;
}
.memo-side-btn:hover { border-color: var(--accent); color: var(--text-primary); }
/* Selected state follows the house pattern for a chip (.rpt-chip.is-on):
   a TINT plus accent-ink text. `--accent-ink` is a text colour — navy in the
   light themes — so painting it on an `--accent` background produced a label
   the same colour as the fill, i.e. invisible, in all eight themes. */
.memo-side-btn.is-on {
  border-color: var(--accent-ink);
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent-ink) 11%, transparent);
  font-weight: 600;
}
.memo-side-note { margin: 8px 0 0; font-size: 11.5px; color: var(--text-muted); }

.memo-block { margin-top: var(--memo-gap); }
.memo-block > h3 {
  font-size: 12px; font-weight: 700; color: var(--text-primary);
  letter-spacing: .04em; text-transform: uppercase; margin: 0 0 8px;
}
.memo-sub { margin: 0 0 10px; font-size: 11.5px; color: var(--text-muted); }
.memo-prose { margin: 6px 0 0; font-size: 13px; line-height: 21px; color: var(--text-secondary); }

.memo-table-wrap { overflow-x: auto; }
.memo-table {
  width: 100%; border-collapse: collapse; margin-top: 8px;
  font-size: 12.5px; line-height: 18px;
}
.memo-table th, .memo-table td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
.memo-terms th {
  width: 168px; white-space: nowrap;
  font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted); padding-top: 10px;
}
/* NO KEY TERM IS EVER CUT SHORT ON THIS PAGE.

   The memo now sends condensed values — every one complete and short — so
   there is nothing left for an ellipsis to hide, and a clamp here would hide
   the one thing the row exists to state. Every value wraps in full: the cell
   may take as many lines as the term needs, long unbroken strings (a URL, a
   run of clause numbers) break rather than widen the table, and no rule in
   this family sets `text-overflow`, `-webkit-line-clamp` or a max-height. */
.memo-terms td {
  color: var(--text-primary);
  overflow-wrap: anywhere; word-break: normal; white-space: normal;
}
.memo-term-cite, .memo-term-absent, .memo-term-checked .mtc-v {
  overflow-wrap: anywhere;
}
.memo-term-checked { margin: 4px 0 0; }
/* THE TABLE IS SIZED BY ITS COLUMNS, NOT BY ITS LONGEST CITATION.

   With `table-layout: auto` the WHERE cell — one unwrappable monospace line
   listing every clause a finding touches — set the width of the whole table:
   1379px inside an 876px column at 1440, 644px at 1024. The browser hid the
   overflow, so LEVEL and WHERE were the only columns a reader could see and
   HOW SURE / WHAT THE RISK IS / WHOSE WAY IT CUTS were simply gone from the
   page that exists to be "the whole picture without reading a single card".

   Fixed layout with declared widths is what makes the five columns share the
   space they have; every cell wraps (`overflow-wrap: anywhere`, and no cell
   keeps `white-space: nowrap`), and the citation list itself is shortened by
   the renderer to four addresses and a count. */
.memo-risks { table-layout: fixed; }
.memo-risks th, .memo-risks td { overflow-wrap: anywhere; word-break: normal; }
.memo-risks thead th {
  font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted); border-bottom-width: 1px;
}
/* level · where · how sure · what the risk is · whose way it cuts */
.memo-risks th:nth-child(1), .memo-risks td:nth-child(1) { width: 12%; }
.memo-risks th:nth-child(2), .memo-risks td:nth-child(2) { width: 23%; }
.memo-risks th:nth-child(3), .memo-risks td:nth-child(3) { width: 12%; }
.memo-risks th:nth-child(4), .memo-risks td:nth-child(4) { width: 35%; }
.memo-risks th:nth-child(5), .memo-risks td:nth-child(5) { width: 18%; }
.memo-risks tbody tr { cursor: pointer; transition: background-color .14s; }
.memo-risks tbody tr:hover { background: var(--bg-app); }
/* THE ONE COLUMN THAT MAY NOT BREAK INSIDE A WORD. It holds a single word —
   Critical / High / Medium / Low — and `anywhere`, which the citation column
   needs, printed "Mediu / m" at 1024. The word wraps under the dot instead;
   the column is wide enough for the longest of them. */
.memo-risks td:first-child { font-weight: 550; overflow-wrap: normal; }
.memo-level { margin-right: 6px; vertical-align: 1px; }
.memo-where { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary); }
/* The count that stands for the citations the cell does not print. Its own
   node so the language layer can swap it; the addresses beside it are the
   document's own words and are skipped. */
.memo-where-more { display: block; margin-top: 2px; font-family: var(--font-sans); font-style: italic; color: var(--text-muted); }
.memo-conf { font-size: 11px; color: var(--text-muted); }
.memo-conf.is-sure { color: var(--severity-success); font-weight: 550; }
.memo-side-tally {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
/* The counts are NOT wrapped in <b>. The i18n layer translates TEXT NODES, and
   markup inside a sentence shatters it into fragments none of which can be
   matched — so the Russian reader would have got Russian numbers joined by
   English connectives. One node, one string, one translation. */
.memo-side-tally { font-weight: 550; color: var(--text-primary); }
/* The previous side's reading, still true, while the new one is fetched. */
.memo-side.is-pending .memo-side-tally { color: var(--text-muted); font-style: italic; }
/* "Affects both sides" does not fit 18% of a 644px column on one line, and a
   cell that refuses to wrap inside a fixed-layout table is a cell that
   overflows its own column. */
.memo-stance { font-size: 11.5px; }
.memo-stance.is-against-you { color: var(--severity-critical); font-weight: 550; }
.memo-stance.is-in-your-favour { color: var(--severity-success); }

.memo-glossary { margin-top: 10px; }
.memo-glossary summary { font-size: 12px; color: var(--text-muted); cursor: pointer; }
.memo-glossary dl { margin: 8px 0 0; display: grid; gap: 6px; }
.memo-glossary dt { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.memo-glossary dd { margin: 0 0 0 0; font-size: 12px; line-height: 18px; color: var(--text-secondary); }

.memo-group-h {
  margin: 30px 0 12px; font-size: 12px; font-weight: 700; color: var(--text-primary);
  letter-spacing: .04em; text-transform: uppercase;
  padding-bottom: 7px; border-bottom: var(--memo-rule);
}
.memo-group-h span { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-muted); }

/* ---- What needs fixing ----------------------------------------------------
   Three plain ordered lists in the same grey made a blocking issue and a
   watch-item look identical, and the only thing carrying the priority was the
   heading above them. In a memo the priority IS the content, so each group
   gets its own colour down the side and each row is a visible target. */
.memo-steps-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.memo-steps-head h3 {
  font-size: 12px; font-weight: 700; color: var(--text-primary);
  letter-spacing: .04em; text-transform: uppercase; margin: 0 0 4px;
}
.memo-steps-head .memo-sub { margin: 0; }
.memo-steps-alarm {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--severity-critical);
  background: var(--bg-active-red); border-radius: 999px; padding: 5px 12px;
  white-space: nowrap;
}
.memo-steps-alarm b { font-size: 14px; font-family: var(--font-mono); }

.memo-steps .memo-step-group {
  margin-top: 16px; padding: 12px 14px 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--text-faint);
  background: var(--bg-app);
}
.memo-steps .is-before_signing { border-left-color: var(--severity-critical); }
.memo-steps .is-later         { border-left-color: var(--severity-medium); }
.memo-steps .is-monitor       { border-left-color: var(--text-faint); }
.msg-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.msg-head h4 {
  margin: 0; font-size: 13px; font-weight: 600; color: var(--text-primary);
}
.msg-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  color: var(--text-inverse, #fff); background: var(--text-faint);
}
.is-before_signing .msg-tag { background: var(--severity-critical); }
.is-later         .msg-tag { background: var(--severity-medium); }
.msg-count {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--text-muted);
}
.msg-note { margin: 5px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); }
.msg-list { margin: 10px 0 0; padding: 0; list-style: none; }
.msg-list li {
  display: grid; grid-template-columns: 20px 1fr 16px;
  align-items: start; gap: 10px;
  padding: 8px 10px; margin: 0 -10px;
  border-radius: 8px; cursor: pointer;
  transition: background-color .14s;
}
.msg-list li + li { border-top: 1px solid var(--border-hairline); }
.msg-list li:hover, .msg-list li:focus-visible {
  background: var(--bg-pane); outline: none;
}
.msg-list li:focus-visible { box-shadow: inset 0 0 0 1px var(--accent); }
.ms-n {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--text-faint); padding-top: 2px;
}
.ms-body { min-width: 0; }
/* Wraps. A finding title is a sentence, and the row is a link to the card
   rather than a summary of it. */
.ms-title {
  display: block; font-size: 13px; line-height: 1.45;
  color: var(--text-primary); overflow-wrap: anywhere;
}
.msg-list li:hover .ms-title { color: var(--accent); }
.ms-where {
  display: block; margin-top: 2px;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
}
.ms-go { color: var(--text-faint); align-self: center; flex: none; }
.msg-list li:hover .ms-go { color: var(--accent); }

/* Multi-line key-term values (every termination right, every priced fee)
   now that the server no longer truncates them to three and a count. */
.memo-term-list { margin: 0; padding-left: 16px; }
.memo-term-list li { margin: 0 0 3px; line-height: 1.5; }
.memo-term-list li:last-child { margin-bottom: 0; }

/* The confidence / who-it-hurts strip inside a finding card. */
.rc-verdictline {
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline;
  margin: 2px 0 10px; padding-bottom: 9px;
  border-bottom: 1px dashed var(--border-subtle);
  font-size: 11.5px; line-height: 17px; color: var(--text-secondary);
}
.rc-verdictline b {
  font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted); margin-right: 5px;
}
/* The engine's reason for withholding the beneficiary: the one sentence the
   header pill cannot hold, said once here and nowhere else on the card. */
.rcv-why { color: var(--text-muted); font-style: italic; }
.rcv-stance { font-weight: 600; }
.rcv-stance.is-against-you { color: var(--severity-critical); }
.rcv-stance.is-in-your-favour { color: var(--severity-success); }
.rc-pill.rc-conf { color: var(--text-muted); }
.rc-pill.rc-conf.is-sure { color: var(--severity-success); }

.rpt-fixfirst { margin-top: 20px; }
.rpt-fixfirst h2 {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-primary); margin: 0 0 10px;
}
.rpt-fixfirst h2 span { color: var(--text-muted); font-weight: 500; text-transform: none; letter-spacing: 0; }
.rpt-fixfirst ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.rpt-fixfirst li {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  background: var(--bg-pane); border: 1px solid var(--border-subtle); border-radius: 10px;
  padding: 11px 14px; transition: border-color .14s, transform .14s, box-shadow .14s;
}
.rpt-fixfirst li:hover { border-color: var(--accent); transform: translateX(2px); box-shadow: 0 6px 16px -12px rgba(20,26,34,.5); }
.ff-dot { flex: none; }
.ff-title { font-weight: 600; font-size: 13.5px; color: var(--text-primary); flex: 1; }
.ff-meta { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.ff-arrow { color: var(--text-muted); flex: none; }

/* ---- CONTROLS: filter + navigate (sticky) ---------------------------- */
/* The control bar PINS. It carries the reader's filter, and losing it on the
   way down to "what to do next" meant scrolling back up to change anything.
   Full-bleed inside the column so the blur covers the content sliding under
   it, and condensed once pinned so it costs less of the page. */
.rpt-controls {
  position: sticky; top: 0; z-index: 8;
  margin: 26px -32px 16px; padding: 12px 32px;
  background: color-mix(in srgb, var(--bg-app) 88%, transparent);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, padding .2s cubic-bezier(.4, 0, .2, 1),
              box-shadow .2s;
}
.rpt-controls.is-pinned {
  border-bottom-color: var(--border-subtle);
  padding-top: 8px; padding-bottom: 8px;
  box-shadow: 0 8px 20px -14px rgba(0, 0, 0, .45);
}
.rpt-sticky-sentinel { height: 1px; margin-bottom: -1px; }
.rpt-controls-inner { display: flex; flex-direction: column; gap: 9px; }
/* Row one: where to go and what to do with it. Row two: the filter. */
.rpt-controls-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rpt-controls-top .rpt-control-tools { margin-left: auto; }
.rpt-filter-row .rpt-count { margin-left: auto; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
/* Pinned: the severity filter and the count, nothing else. */
.rpt-controls.is-pinned .rpt-controls-top { display: none; }
/* Secondary filters and the section nav fold away once pinned: the severity
   row is what a reader actually reaches for mid-scroll. */
.rpt-controls.is-pinned .rpt-chips-sub { display: none; }

.rpt-jump { display: flex; flex-wrap: wrap; gap: 4px; }
.rpt-jump-btn {
  border: 0; background: none; cursor: pointer;
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 550;
  color: var(--text-muted); padding: 3px 9px; border-radius: 999px;
  transition: color .14s, background-color .14s;
}
.rpt-jump-btn:hover { color: var(--accent-ink); background: color-mix(in srgb, var(--accent-ink) 8%, transparent); }

/* Anchors clear the pinned bar instead of hiding behind it. */
.memo-block-anchor { scroll-margin-top: 78px; }

.rpt-filter-row { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.rpt-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.rpt-chips-sub { padding-left: 14px; border-left: 1px solid var(--border-subtle); }
.rpt-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px;
  border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--bg-doc);
  color: var(--text-secondary); font-family: var(--font-ui); font-size: 12px; font-weight: 550;
  cursor: pointer; transition: border-color .14s, color .14s, background .14s;
}
.rpt-chip:hover { border-color: var(--accent); color: var(--text-primary); }
.rpt-chip.is-on { border-color: var(--accent-ink); color: var(--accent-ink); background: color-mix(in srgb, var(--accent-ink) 9%, transparent); }
.rpt-chip-n { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rpt-chip.is-on .rpt-chip-n { color: var(--accent-ink); }
.rpt-control-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rpt-control-tools .rpt-count { margin-left: auto; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.rpt-search {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px;
  border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-doc);
  color: var(--text-muted); flex: 1; min-width: 180px; max-width: 320px;
}
.rpt-search:focus-within { border-color: var(--accent-ink); }
.rpt-search input { border: 0; background: none; outline: none; font-family: var(--font-ui); font-size: 13px; color: var(--text-primary); width: 100%; }
.rpt-tool {
  height: 30px; padding: 0 12px; border: 1px solid var(--border-subtle); border-radius: 8px;
  background: var(--bg-doc); color: var(--text-secondary); font-family: var(--font-ui);
  font-size: 12.5px; font-weight: 550; cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.rpt-tool:hover { background: var(--bg-sunken); color: var(--text-primary); }
.rpt-count { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* READING LEVEL, compact. The same preference as Settings › Intelligence,
   within reach of the findings it rewords. */
.rpt-langmode {
  display: inline-flex; align-items: stretch; height: 30px; padding: 2px;
  border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-sunken);
}
.rpt-lm {
  padding: 0 10px; border: 0; border-radius: 6px; background: none;
  color: var(--text-muted); font-family: var(--font-ui); font-size: 12px; font-weight: 550;
  cursor: pointer; white-space: nowrap; transition: background .12s, color .12s;
}
.rpt-lm:hover { color: var(--text-primary); }
.rpt-lm.is-on { background: var(--bg-doc); color: var(--text-primary); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* ---- FINDINGS: the card ---------------------------------------------- */
.rpt-findings { display: flex; flex-direction: column; gap: 12px; }
.rpt-explainer-loading { display: flex; align-items: center; gap: 9px; color: var(--text-muted); font-size: 13px; padding: 6px 2px; }
/* The route said it has none for this report: a statement, not a wait. */
.rpt-explainer-loading.is-off { font-style: italic; opacity: .75; }
/* LEGAL MODE says where the wording comes from, once, and does not spin —
   there is nothing being written; this is the engine's own text. */
.rpt-legal-note {
  margin: 0; padding: 7px 11px; border-left: 2px solid var(--border-subtle);
  color: var(--text-muted); font-size: 12.5px; line-height: 1.5;
}
.rpt-empty { text-align: center; padding: 48px 20px; color: var(--text-muted); }
.rpt-empty h3 { margin: 0 0 6px; font-size: 15px; color: var(--text-secondary); }
.rpt-empty p { margin: 0; font-size: 13px; }

.rpt-card {
  position: relative; overflow: hidden;
  background: var(--bg-doc); border: 1px solid var(--border-subtle); border-radius: 12px;
  padding-left: 5px; transition: box-shadow .16s, border-color .16s;
}
.rpt-card:hover { box-shadow: 0 8px 24px -16px rgba(20, 26, 34, .45); }
.rpt-card.rpt-flash { animation: rptFlash 1.1s ease; }
@keyframes rptFlash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 22% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-ink) 30%, transparent); } }
.rpt-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.rpt-card.sev-critical .rpt-rail { background: var(--rc-critical); }
.rpt-card.sev-high     .rpt-rail { background: var(--rc-high); }
.rpt-card.sev-medium   .rpt-rail { background: var(--rc-medium); }
.rpt-card.sev-low      .rpt-rail { background: var(--rc-low); }

.rpt-card-head {
  width: 100%; display: flex; align-items: flex-start; gap: 13px; text-align: left;
  background: none; border: 0; cursor: pointer; padding: 15px 18px; font-family: var(--font-ui);
}
.rc-num {
  flex: none; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  background: var(--bg-sunken); color: var(--text-secondary); font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* THE TITLE GETS THE ROOM. `.rc-pills` was `flex: none` beside a "Favors
   <party>" pill set to `nowrap`, and a real party name is "Meridian
   Microfinance Holding Company LLC, (D/B/A) Meridian Impact Finance". The pill
   therefore claimed several hundred pixels that it would not give back, the
   title column collapsed to whatever was left, and a five-word heading broke
   over four lines. The pills now have a ceiling and shrink before the title
   does; the who-pill ellipsizes and keeps its full text on the tooltip. */
.rc-titles { flex: 1 1 auto; min-width: 12rem; display: flex; flex-direction: column; gap: 3px; }
.rc-title {
  font-size: 14.5px; font-weight: 650; color: var(--text-primary); line-height: 1.3;
  overflow-wrap: anywhere;
}
.rc-oneliner { font-size: 12.5px; color: var(--text-secondary); line-height: 1.4; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.rpt-card.open .rc-oneliner { display: none; }
.rc-pills {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  flex: 0 1 auto; min-width: 0; max-width: 46%; flex-wrap: wrap;
  padding-top: 2px;
}
.rc-pill { display: inline-flex; align-items: center; gap: 4px; min-height: 21px; padding: 1px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 650; letter-spacing: .02em; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.rc-sev.sev-critical { background: color-mix(in srgb, var(--rc-critical) 14%, transparent); color: var(--rc-critical); }
.rc-sev.sev-high     { background: color-mix(in srgb, var(--rc-high) 14%, transparent); color: var(--rc-high); }
.rc-sev.sev-medium   { background: color-mix(in srgb, var(--rc-medium) 16%, transparent); color: var(--rc-medium); }
.rc-sev.sev-low      { background: var(--bg-sunken); color: var(--text-muted); }
.rc-proven { background: color-mix(in srgb, var(--severity-success) 14%, transparent); color: var(--severity-success); }
.rc-tier { background: var(--bg-sunken); color: var(--text-muted); }
.rc-who {
  background: color-mix(in srgb, var(--brand-navy) 10%, transparent); color: var(--brand-navy);
  /* The one pill whose text is arbitrary-length user data. It gets a ceiling
     of its own so a long party name cannot push the severity pill off the row
     even inside the shrinking `.rc-pills` box. */
  max-width: 22ch;
}
/* The pill is TWO text nodes: the fixed word, which the interface language
   layer swaps by exact string, and the party name, which is the contract's
   own words and passes through as data. The ellipsis therefore has to move
   off the pill and onto the half that can actually be long. */
.rc-who .rcp-k { flex: none; }
.rc-who .rcp-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Nothing was named. The pill stays — an absent pill is indistinguishable
   from a card nobody asked the question about — but it stops claiming a side. */
.rc-who.is-withheld { background: var(--bg-sunken); color: var(--text-muted); }
.rc-chev { flex: none; color: var(--text-muted); transition: transform .2s ease; margin-top: 3px; }
.rpt-card.open .rc-chev { transform: rotate(180deg); }

/* body: reveal with a grid-rows animation so it slides, never snaps. The single
   inner wrapper is what makes 0fr→1fr collapse cleanly (overflow hidden on it). */
.rpt-card-body {
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease;
}
.rpt-card.open .rpt-card-body { grid-template-rows: 1fr; }
.rpt-card-inner { overflow: hidden; min-height: 0; padding: 0 18px; }
.rpt-card.open .rpt-card-inner { padding: 2px 18px 18px; }
/* THE CITATION LINE IS A SENTENCE, AND A SENTENCE IS NOT SHOUTED.

   `text-transform: uppercase` turned "the signature block" into "THE SIGNATURE
   BLOCK" and "SHAREHOLDERS' AGREEMENT, second paragraph" into a line of
   capitals two and three rows deep on most cards. The addresses are the
   document's own words in the case the document wrote them; the transform is
   gone and the renderer prints four of them and a count. */
.rc-where { font-size: 11.5px; color: var(--text-muted); font-weight: 600; margin: 0 0 12px; letter-spacing: .01em; overflow-wrap: anywhere; }
.rc-where .rcw-k { text-transform: uppercase; letter-spacing: .04em; }
.rc-where .rcw-v { font-weight: 550; }
/* The count stands in for the rest of the list and opens it. It is a button
   because it does something, and it wears the line's own type so the citation
   still reads as one line. */
.rcw-more {
  appearance: none; border: 0; background: none; padding: 0;
  font: inherit; color: var(--accent-ink); cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}
.rcw-more:hover { color: var(--text-primary); }
.rc-block { margin: 0 0 14px; }
.rc-block h4 {
  margin: 0 0 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted);
}
.rc-block p { margin: 0; font-size: 13.5px; line-height: 1.58; color: var(--text-primary); }
.rc-block.rc-plain p { color: var(--text-primary); }
.rc-block.rc-example { padding: 10px 14px; background: var(--bg-soft); border-radius: 9px; }
.rc-block.rc-example h4 { color: var(--accent-ink); }
.rc-block.rc-example p { font-style: italic; color: var(--text-secondary); }
.rc-block.rc-fix { padding: 12px 14px; background: color-mix(in srgb, var(--severity-success) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--severity-success) 18%, transparent); border-radius: 9px; margin-bottom: 0; }
.rc-block.rc-fix h4 { color: var(--severity-success); }
.rc-quote { margin: 0 0 14px; }
.rc-quote figcaption { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
.rc-quote blockquote {
  margin: 0; padding: 10px 14px; border-left: 3px solid var(--border-subtle);
  background: var(--bg-pane); border-radius: 0 8px 8px 0;
  font-family: var(--font-doc); font-size: 13px; line-height: 1.55; color: var(--text-primary);
}

/* ---- FOOTER ----------------------------------------------------------- */
.rpt-foot { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 16px; }
.rpt-foot-block h4 { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 700; }
.rpt-foot-block p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }
.rpt-foot-block p.mono { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); word-break: break-word; }
/* THE COUNTS SENTENCE, under the assessment — `memo.bottom_line`, the
   sentence both exported files print and the page could only show when the
   memorandum was missing. */
.rpt-hero-count { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; opacity: .78; max-width: 62ch; }
/* THE CLIENT DISCLOSURES the footer used to drop: both files print them and
   the page printed none. Bulleted, muted, under their own block. */
.rpt-foot-notes p { margin: 0 0 3px; }
.rpt-signature { margin: 3px 0 0; }
/* A CARD WITH NO PLAIN-ENGLISH LINE SAYS SO, as both files do. Silence there
   is indistinguishable from a card nobody wrote one for. */
.rc-plain-missing {
  margin: 8px 0 0; font-size: 11.5px; font-style: italic; color: var(--text-muted);
}
/* The type's other reading, beside "Also read as" — a value, not a label, so
   it is one node with the words in front of it. */
.rpt-dt-also { font-weight: 650; }
.rpt-disclaimer { margin: 4px 0 0; font-size: 11.5px; font-style: italic; color: var(--text-muted); }

@media (max-width: 720px) {
  .report-layout.rpt { padding: 16px 14px 60px; }
  .rpt-hero-grid { flex-direction: column; }
  .rpt-hero-stats { grid-template-columns: repeat(4, 1fr); width: 100%; }
  .rpt-card-head { flex-wrap: wrap; }
  .rc-pills { width: 100%; max-width: none; justify-content: flex-start; padding-left: 39px; }
  .rc-who { max-width: 100%; }
}
@media print {
  .rpt-controls, .rpt-fixfirst .ff-arrow { display: none; }
  .rpt-card, .rpt-card-body { break-inside: avoid; }
  .rpt-card-body { grid-template-rows: 1fr !important; }
  .rc-oneliner { display: none !important; }
}


/* ============================================================
   Modals / palette / popover / toast
============================================================ */
.modal-root {
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
}
.modal-root.is-open { pointer-events: auto; }
.modal-back {
  position: absolute; inset: 0;
  background: rgba(31,41,51,.18);
  opacity: 0;
  transition: opacity .15s;
}
.modal-root.is-open .modal-back { opacity: 1; }
.modal {
  position: relative;
  background: var(--bg-doc);
  border-radius: 12px;
  max-width: 560px;
  width: 100%;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 14px 32px rgba(31,41,51,.10);
  transform: translateY(6px) scale(.99);
  opacity: 0;
  transition: transform .15s, opacity .15s;
}
.modal-root.is-open .modal { transform: translateY(0) scale(1); opacity: 1; }
.modal-head { padding: 18px 22px 8px; }
.modal-title { font-size: 15px; font-weight: 650; margin: 0; }
.modal-sub { color: var(--text-secondary); font-size: 12.5px; margin-top: 4px; }
.modal-body { padding: 12px 22px 18px; }
.modal-foot {
  padding: 10px 16px;
  display: flex; gap: 6px; justify-content: flex-end;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-app);
  border-radius: 0 0 12px 12px;
}

.confirm-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.confirm-body p { margin: 0 0 8px; }
.confirm-body p:last-child { margin-bottom: 0; }
.confirm-warn {
  color: var(--severity-critical);
  font-weight: 550;
}

/* ----- Settings modal ----- */
/* ===== Settings modal — sidebar + cards layout ===== */
#modalRoot .modal:has(.settings-body) { max-width: 884px; width: 94vw; }
#modalRoot .modal:has(.settings-body) .modal-body { padding: 0; }
#modalRoot .modal:has(.settings-body) .modal-head { padding-bottom: 14px; border-bottom: 1px solid var(--border-hairline); }

.settings-body {
  display: grid;
  grid-template-columns: 208px 1fr;
  height: 70vh;
  max-height: 620px;
  overflow: hidden;
}

/* Sidebar nav */
.settings-tabs {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 10px;
  background: var(--bg-sunken);
  border-right: 1px solid var(--border-hairline);
  overflow-y: auto;
}
.settings-nav-label {
  font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-faint); padding: 2px 10px 8px;
}
.settings-tab {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 11px;
  background: transparent; border: 0; border-radius: 8px;
  cursor: pointer; text-align: left;
  font-size: 13px; font-weight: 550; color: var(--text-secondary);
  transition: background .14s, color .14s;
}
.settings-tab svg { flex: none; color: var(--text-muted); transition: color .14s; }
.settings-tab:hover { background: var(--bg-soft); color: var(--text-primary); }
.settings-tab:hover svg { color: var(--text-secondary); }
.settings-tab.is-active { background: var(--bg-doc); color: var(--text-primary); box-shadow: 0 1px 3px rgba(31,41,51,.10); }
.settings-tab.is-active svg { color: var(--accent-ink); }
.settings-tab.is-active::before {
  content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--accent-ink);
}

/* Content area */
.settings-panes { overflow-y: auto; padding: 22px 26px 26px; }
.settings-pane { display: none; }
.settings-pane.is-active { display: block; animation: set-fade .2s ease both; }
@keyframes set-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.set-pane-head { margin-bottom: 16px; }
.set-pane-title { margin: 0; font-size: 17px; font-weight: 650; color: var(--text-primary); letter-spacing: -.01em; }
.set-pane-sub { margin: 5px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); max-width: 60ch; }

/* Group cards */
.set-card { border: 1px solid var(--border-hairline); border-radius: 12px; background: var(--bg-pane); padding: 16px 18px; margin-bottom: 14px; }
.set-card-head { margin-bottom: 12px; }
.set-card-head-split { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.set-card-title { margin: 0; font-size: 13.5px; font-weight: 650; color: var(--text-primary); }
.set-card-sub { margin: 3px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.set-card-sub code { font-family: var(--font-mono); font-size: 11px; background: var(--bg-soft2); padding: 1px 5px; border-radius: 4px; }
.set-card-foot { display: flex; justify-content: flex-end; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-hairline); }

/* keep legacy hooks alive (mini header / paragraph), now used sparingly */
.settings-h { margin: 0 0 7px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.settings-p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }

/* Display-mode picker (Entity View) */
.set-mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.set-mode { display: flex; flex-direction: column; gap: 4px; padding: 11px 13px; border: 1px solid var(--border-subtle); background: var(--bg-doc); border-radius: 9px; cursor: pointer; text-align: left; transition: border-color .14s, background .14s; }
.set-mode:hover { border-color: var(--border-strong); }
.set-mode.is-active { border-color: var(--accent-ink); background: color-mix(in srgb, var(--accent-ink) 8%, transparent); box-shadow: inset 0 0 0 1px var(--accent-ink); }
.set-mode-label { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.set-mode-desc { font-size: 11.5px; color: var(--text-secondary); line-height: 1.35; }

/* READING LEVEL — Settings › Intelligence. The same three choices as the
   Report's compact switch, with the line that says who each one is for; the
   note under them is the sentence that keeps the setting honest. */
.set-lang-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.set-lang-mode {
  display: flex; flex-direction: column; gap: 4px; padding: 11px 13px;
  border: 1px solid var(--border-subtle); background: var(--bg-doc); border-radius: 9px;
  cursor: pointer; text-align: left; font-family: var(--font-ui);
  transition: border-color .14s, background .14s;
}
.set-lang-mode:hover { border-color: var(--border-strong); }
.set-lang-mode.is-on {
  border-color: var(--accent-ink); background: color-mix(in srgb, var(--accent-ink) 8%, transparent);
  box-shadow: inset 0 0 0 1px var(--accent-ink);
}
.slm-label { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.slm-who { font-size: 11.5px; color: var(--text-secondary); line-height: 1.35; }
.set-lang-note { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); }
@media (max-width: 620px) {
  .set-lang-modes { grid-template-columns: 1fr; }
}

/* Color grid */
.set-color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
.set-color-row { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 7px; }
.set-color-row:hover { background: var(--bg-soft); }
.set-color-swatch { width: 16px; height: 16px; border-radius: 4px; cursor: pointer; border: 1px solid var(--border-subtle); box-shadow: 0 1px 2px rgba(31,41,51,.08); }
.set-color-label { font-size: 12.5px; color: var(--text-primary); }
.set-color-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.set-color-code { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }

/* Field rows (label + control) */
.set-field { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 14px; padding: 9px 0; }
.set-field + .set-field { border-top: 1px solid var(--border-hairline); }
.set-label { font-size: 12.5px; font-weight: 550; color: var(--text-secondary); }
.set-input { font-family: inherit; font-size: 13px; padding: 7px 10px; background: var(--bg-doc); border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text-primary); width: 100%; transition: border-color .14s, box-shadow .14s; }
.set-input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(49,95,159,.14); }
.set-input-sm { width: 90px; }
.set-input[type="range"] { padding: 0; background: transparent; border: 0; flex: 1 1 auto; accent-color: var(--accent-ink); }
.set-range { display: flex; align-items: center; gap: 12px; }
.set-range-value { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); min-width: 44px; text-align: right; }

/* Toggle rows with switch + optional description */
.set-rows { display: flex; flex-direction: column; }
.set-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; cursor: pointer; }
.set-toggle-row + .set-toggle-row { border-top: 1px solid var(--border-hairline); }
.st-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-label { font-size: 13px; font-weight: 550; color: var(--text-primary); }
.st-desc { font-size: 11.5px; line-height: 1.4; color: var(--text-muted); }
.set-toggle-row input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  position: relative; width: 38px; height: 22px; border-radius: 999px;
  background: var(--border-strong); cursor: pointer; transition: background .18s;
}
.set-toggle-row input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .18s;
}
.set-toggle-row input[type="checkbox"]:checked { background: var(--accent-ink); }
.set-toggle-row input[type="checkbox"]:checked::after { transform: translateX(16px); }
.set-toggle-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Settings › Account: the status line beside the Change-password button
   (the server's own sentence when it refuses, a confirmation when it saves). */
.set-card-foot-status { justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.set-msg { margin: 0; flex: 1 1 auto; font-size: 12px; line-height: 1.4; color: var(--text-muted); min-height: 1em; }
.set-msg.is-err { color: var(--severity-critical); }
.set-msg.is-ok { color: var(--severity-success); }

/* Backend action bar */
.set-actionbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 4px; padding: 14px 16px; border: 1px solid var(--border-hairline); border-radius: 12px; background: var(--bg-doc); }
.settings-status { font-size: 11.5px; line-height: 1.4; color: var(--text-secondary); }

/* Classify order — drag-to-reorder list */
.set-order-list { display: flex; flex-direction: column; gap: 4px; }
.set-order-row { display: grid; grid-template-columns: 16px 14px 1fr auto; align-items: center; gap: 11px; padding: 9px 11px; border: 1px solid var(--border-hairline); border-radius: 9px; background: var(--bg-doc); cursor: grab; user-select: none; transition: border-color .14s; }
.set-order-row:hover { border-color: var(--border-strong); }
.set-order-row.is-dragging { opacity: 0.4; }
.set-order-row.is-drop-target { background: color-mix(in srgb, var(--accent-ink) 9%, transparent); box-shadow: 0 -2px 0 var(--accent-ink) inset; }
.set-order-grip { color: var(--text-faint); font-size: 12px; letter-spacing: -2px; }
.set-order-swatch { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--border-subtle); }
.set-order-label { font-size: 12.5px; color: var(--text-primary); }
.set-order-index { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }

@media (max-width: 680px) {
  .settings-body { grid-template-columns: 1fr; height: auto; max-height: 76vh; }
  .settings-tabs { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border-hairline); }
  .settings-nav-label { display: none; }
  .settings-tab.is-active::before { display: none; }
}

/* Scenario picker menu */
.menu {
  position: fixed;
  z-index: 70;
  background: var(--bg-doc);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(31,41,51,.12);
  padding: 5px;
  min-width: 250px;
  font-size: 12.5px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
}
.menu-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 6px 9px;
  border-radius: 5px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-primary);
  text-align: left;
}
.menu-item:hover { background: var(--bg-soft); }
.menu-item.is-active { background: var(--bg-soft); font-weight: 550; }

/* Windows-style right-click context menu (reuses .menu shell) */
.ctx-menu {
  min-width: 200px;
  padding: 4px;
  font-size: 12.5px;
}
.ctx-item {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 9px;
  border: 0;
  background: transparent;
  border-radius: 4px;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  font-size: 12.5px;
}
.ctx-item:hover {
  background: var(--bg-soft);
}
.ctx-item.is-danger { color: var(--severity-critical); }
.ctx-item.is-danger:hover { background: color-mix(in srgb, var(--severity-critical) 8%, transparent); }
.ctx-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.ctx-item.is-danger .ctx-icon { color: var(--severity-critical); }
.ctx-label { white-space: nowrap; }
.ctx-hint {
  color: var(--text-muted);
  font-size: 10.5px;
  font-family: var(--font-mono);
  margin-left: 12px;
}
.ctx-sep {
  height: 1px;
  background: var(--border-hairline);
  margin: 4px 2px;
}

/* Popover */
.popover {
  position: fixed;
  z-index: 65;
  background: var(--bg-doc);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(31,41,51,.10);
  padding: 12px 14px;
  width: 320px;
  font-size: 12.5px;
  line-height: 19px;
}
.popover-h {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.popover-term { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.popover-body { color: var(--text-secondary); margin-bottom: 8px; }
.popover-foot { color: var(--text-muted); font-size: 11px; font-family: var(--font-mono); }

/* Command palette */
.palette-root {
  position: fixed; inset: 0; z-index: 80;
  pointer-events: none;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
}
.palette-root.is-open { pointer-events: auto; }
.palette-back {
  position: absolute; inset: 0;
  background: rgba(31,41,51,.20);
  opacity: 0;
  transition: opacity .15s;
}
.palette-root.is-open .palette-back { opacity: 1; }
.palette {
  position: relative;
  width: 540px;
  max-width: calc(100vw - 32px);
  background: var(--bg-doc);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(31,41,51,.18);
  transform: translateY(-8px) scale(.99);
  opacity: 0;
  transition: transform .15s, opacity .15s;
  overflow: hidden;
}
.palette-root.is-open .palette { transform: translateY(0) scale(1); opacity: 1; }
.palette-input {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-hairline);
}
.palette-input input { flex: 1; border: 0; outline: 0; font-size: 14px; color: var(--text-primary); }
.palette-list {
  list-style: none; margin: 0; padding: 6px;
  max-height: 360px; overflow-y: auto;
}
.palette-li {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 5px;
  font-size: 12.5px;
  cursor: pointer;
  align-items: center;
}
.palette-li:hover, .palette-li.is-cursor { background: var(--bg-soft); }
.palette-li .pl-kind {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.palette-li .pl-title { color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-empty { padding: 18px; color: var(--text-muted); font-size: 12.5px; text-align: center; }

/* Toasts */
.toast-root {
  position: fixed;
  bottom: 24px; right: 24px;
  display: flex; flex-direction: column;
  gap: 8px;
  z-index: 90;
  pointer-events: none;
}
/* Top-right variant — used for the "no valid API key" alert so it lands where
   the eye expects a system warning, distinct from the routine bottom toasts. */
.toast-root--top { top: 24px; right: 24px; bottom: auto; }
.toast {
  pointer-events: auto;
  background: var(--bg-doc);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  box-shadow: 0 6px 18px rgba(31,41,51,.06);
  animation: toastIn .14s ease;
}
.toast .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--severity-success); }
.toast.is-info .dot { background: var(--brand-blue); }
.toast.is-warn .dot { background: var(--severity-medium); }
.toast.has-action { padding-right: 6px; }
.toast .toast-msg { flex: 1; }
.toast-action {
  appearance: none;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--brand-blue);
  font: inherit;
  font-weight: 600;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 6px;
  cursor: pointer;
  margin-left: 6px;
}
.toast-action:hover { background: rgba(31,41,51,.04); }
.toast-action:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 1px; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Mode transition (subtle slide-in)
============================================================ */
.stage-page, .wi-layout, .draft-layout, .report-layout {
  animation: modeIn .22s cubic-bezier(.4,0,.2,1);
}
/* A RE-RENDER OF THE SAME VIEW IS NOT A NAVIGATION. Every streamed
   finding, every filter click and the completion render all rebuild
   `.stage-page`; replaying the entrance fade on each of them is what
   made the page look like it reloaded. `renderStage` sets this class
   whenever it is re-rendering the mode already on screen. */
.mode-stage.is-samestage > .stage-page,
.mode-stage.is-samestage > .wi-layout,
.mode-stage.is-samestage > .draft-layout,
.mode-stage.is-samestage > .report-layout { animation: none; }
@keyframes modeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Util
============================================================ */
.muted { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }
.mono { font-family: var(--font-mono); }
.t-tiny { font-size: 11px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.flex { display: flex; }
.gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; }

/* responsive nudges */
@media (max-width: 1240px) {
  .detect-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  :root { --library-w: 220px; }
}

/* ============================================================
   PARSE PROGRESS MODAL
============================================================ */
.parse-progress {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 2px 2px;
}
.parse-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.parse-progress-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 13.5px;
  word-break: break-all;
}
.parse-progress-percent {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
}
.parse-progress-bar {
  position: relative;
  height: 6px;
  background: var(--bg-sunken);
  border-radius: 999px;
  overflow: hidden;
}
.parse-progress-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--mode-draft), var(--accent, #315f9f));
  /* Matches the ramp-tick interval so per-tick width updates appear as a
     smooth continuous creep rather than a series of small jumps. */
  transition: width 600ms linear;
}
.parse-progress-stages {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  margin-top: 4px;
}
.parse-progress-stage {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  padding: 4px 0;
}
.parse-progress-stage .pps-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bg-sunken);
  flex: 0 0 auto;
  transition: background .2s;
}
.parse-progress-stage.is-done .pps-dot { background: var(--severity-success); }
.parse-progress-stage.is-active .pps-dot {
  background: var(--mode-draft);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mode-draft) 22%, transparent);
}
.parse-progress-stage.is-error .pps-dot { background: var(--severity-critical); }
.parse-progress-stage.is-active { color: var(--text-primary); }
.parse-progress-stage.is-done { color: var(--text-secondary); }
.parse-progress-stage.is-error { color: var(--severity-critical); }
.parse-progress-stage .pps-label { flex: 1 1 auto; }
.parse-progress-msg {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  min-height: 14px;
}
.parse-progress-error {
  background: rgba(220, 78, 78, .08);
  border: 1px solid rgba(220, 78, 78, .35);
  color: var(--severity-critical);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-family: var(--font-mono);
}

/* ============================================================
   PARSED DRAFT VIEW
============================================================ */
.parsed-doc {
  background: var(--bg-doc);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 40px 56px 80px;
  min-height: 60vh;
  font-family: var(--font-doc);
  color: var(--text-primary);
}
.parsed-doc h1 {
  font-family: var(--font-doc);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: 4px 0 10px;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.18;
}
.parsed-manual-parties {
  min-height: 18px;
  margin: 4px auto 12px;
  max-width: 680px;
  font-family: var(--font-doc);
  font-size: 12.5px;
  line-height: 18px;
  font-style: italic;
  color: var(--text-secondary);
  text-align: center;
  outline: none;
}
.parsed-manual-parties:empty::before {
  content: attr(data-placeholder);
  color: var(--text-faint);
}
/* Extracted parties are DATA standing in an editable field, not a hint. */
.parsed-manual-parties.has-detected:empty::before { color: var(--text-secondary); }
.parsed-manual-parties:focus {
  background: var(--bg-soft);
  border-radius: 4px;
}
.parsed-doc-strip {
  display: flex;
  gap: 16px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  padding: 10px 0 4px;
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
  margin: 14px 0 24px;
}
.parsed-doc-strip strong { color: var(--text-primary); font-weight: 650; margin-right: 4px; }
.parsed-doc-strip .muted { margin-left: auto; color: var(--text-faint); }
.parsed-warnings {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.parsed-warning {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--severity-medium);
  background: rgba(244, 195, 105, .08);
  border-left: 2px solid var(--severity-medium);
  padding: 4px 8px;
  border-radius: 0 4px 4px 0;
}
.parsed-warning .pw-code { font-weight: 600; margin-right: 6px; color: var(--severity-high); }

/* Degraded-run warning on Detect: the engine could not model the contract,
   so the findings list is NOT a clean bill of health. */
.degraded-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--severity-high);
  border-left-width: 4px;
  border-radius: 6px;
  background: rgba(214, 105, 79, .08);
  color: var(--text-primary);
}
.degraded-banner svg { flex: none; margin-top: 1px; color: var(--severity-high); }
.degraded-banner .db-title {
  font-weight: 650;
  font-size: 13px;
  color: var(--severity-high);
  margin-bottom: 4px;
}
.degraded-banner .db-list {
  margin: 0;
  padding-left: 16px;
  font-size: 12.5px;
  line-height: 1.5;
}
.degraded-banner .db-list li + li { margin-top: 2px; }

/* Scope caveats moved out of a page-wide banner and behind this triangle,
   next to Export findings. They qualify the findings; they are not the first
   thing a reader should meet. Shown only when there are any. */
.btn-caveat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-inline: 8px;
  color: var(--severity-high);
}
.btn-caveat:hover { background: rgba(214, 105, 79, .1); }

/* ---- "Update wording → <level>" -----------------------------------------
   Detect's one paid action that is not Run detection, so it must be legible
   as its own thing and must not compete with the orange run button beside
   it: an outlined violet pill with a dot, in the one accent this interface
   already themes for both light and dark (`--mode-stress`). It exists only
   while the reading level on screen is not the reader's own, so it is never
   part of the bar's resting state. */
.btn-register {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--mode-stress);
  border-color: color-mix(in srgb, var(--mode-stress) 38%, transparent);
  background: color-mix(in srgb, var(--mode-stress) 8%, transparent);
  border-radius: 999px;
  font-weight: 600;
}
.btn-register:hover:not(:disabled) {
  background: color-mix(in srgb, var(--mode-stress) 16%, transparent);
  border-color: var(--mode-stress);
}
.btn-register:disabled { opacity: .72; cursor: default; }
.btn-register .brg-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--mode-stress);
}
.btn-register .brg-spin {
  width: 11px; height: 11px; border-width: 1.5px;
  border-color: color-mix(in srgb, var(--mode-stress) 30%, transparent);
  border-top-color: var(--mode-stress);
}
.btn-register .brg-arrow { opacity: .6; }
.btn-register .brg-target { font-weight: 700; }
.btn-caveat svg { flex: none; }
.btn-caveat .caveat-count {
  font-size: 11px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cav-lede {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.cav-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.55;
}
.cav-list li + li { margin-top: 6px; }

/* Key facts as a record. Who gains / at stake / clauses sat inside a paragraph
   in a different place on every card; a reader scanning twenty of them had to
   re-read each one to find the same three things. */
.dd-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px 18px;
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: var(--bg-soft);
}
.dd-fact { min-width: 0; }
.dd-fact dt {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 2px;
}
.dd-fact dd {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

/* The same two blocks on the memo page. Detect and the memo render the same
   structured fields, so a finding reads the same way wherever it is opened
   and in the exported PDF/DOCX. */
/* KEY FACTS CARRIES ITS HEADING. Both exported files print "KEY FACTS" over
   these rows and the page printed the table bare, so the one block a reader
   checks the evidence in was the only unlabelled block on the card. The
   wrapper is `.rc-block` for its heading and spacing; the grid keeps its own
   rule and its own left rail. */
.rc-factsblock { margin: 10px 0 14px; }
.rc-factsblock .rc-facts { margin: 6px 0 0; }
.rc-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 7px 20px;
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-left: 2px solid var(--border-subtle);
}
.rc-fact { min-width: 0; }
.rc-fact dt {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 2px;
}
/* A CUT WITH NO MARKER READS AS A BUG IN THE ENGINE.

   "ALSO SEEN AS" and "CLAUSES" carry the longest values on the card, and they
   were printed whole into a grid cell that simply ran out of room — «…§8.3: “p»
   — a mid-word stop with nothing saying more text exists. The value is clamped
   to three lines WITH an ellipsis, the whole value rides the `title`, and the
   renderer marks a value the engine itself truncated. */
.rc-fact dd {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The marker for a value the ENGINE cut, kept out of the value's own text
   node so the language layer can still match it. */
.rc-fact-cut { color: var(--text-muted); }
.rc-tl {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: rctl;
}
.rc-tl li {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 4px 0 4px 14px;
  font-size: 12.5px;
  line-height: 1.45;
  border-left: 2px solid var(--border-subtle);
}
.rc-tl li::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.rc-tl li:last-child { border-left-color: transparent; }
.rc-tl-day {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--text-muted);
}
.rc-tl-text { min-width: 0; overflow-wrap: anywhere; }

.parsed-blocks {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pb-doc-place-date {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  margin: 18px 0 26px;
  font-family: var(--font-doc);
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
}
.pb-doc-place,
.pb-doc-date {
  position: relative;
  padding: 4px 34px 4px 4px;
}
.pb-doc-place { text-align: left; }
.pb-doc-date { text-align: right; }
.pb-party-intro {
  width: auto;
  max-width: none;
  margin: 8px -12px 18px;
  padding: 6px 12px 6px 18px;
  font-style: normal;
  font-size: 13.5px;
  line-height: 22px;
  text-align: justify;
  text-align-last: auto;
}

.pb {
  position: relative;
  padding: 6px 12px 6px 18px;
  margin: 2px -12px;
  border-radius: 0 6px 6px 0;
  font-family: var(--font-doc);
  font-size: 14px;
  line-height: 24px;
  text-align: justify;
  hyphens: auto;
  cursor: text;
}
.pb:hover { background: var(--bg-soft); }
.pb:focus-within { background: var(--bg-soft); outline: 0; }
.pb::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px;
  background: transparent;
  border-radius: 2px;
}
.pb-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  margin-right: 10px;
  font-weight: 500;
  cursor: default;
}
.pb-num[data-edit-number] {
  border-radius: 3px;
  padding: 1px 2px;
}
.pb-num[data-edit-number]:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
/* A HEADING WITH NO NUMBER SHOWS NO NUMBER. A lone "§" was printed in front of
   every unnumbered heading — and on a Word file, where the numbers live in the
   list definition rather than in the text, that was every heading in the
   document. The double-click-to-number affordance survives: the marker is
   still there, revealed on hover, and still takes the same width so nothing
   shifts when it appears. */
.pb-num[data-edit-number]:empty::before {
  content: "§";
  opacity: 0;
}
.pb:hover > .pb-num[data-edit-number]:empty::before { opacity: 0.35; }
.pb-num[data-edit-number]:empty:hover::before { opacity: 1; }
.pb-num-input {
  width: 64px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 1px 4px;
  background: var(--bg-doc);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 11.5px;
  outline: none;
}
.pb-body[contenteditable] { outline: none; }
.pb-body { display: inline; }
.pb-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mode-draft);
  background: color-mix(in srgb, var(--mode-draft) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--mode-draft) 30%, transparent);
  padding: 1px 6px;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: middle;
}

.pb-section {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-doc);
  font-size: 14.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  margin: 28px -12px 10px;
  padding: 6px 12px 6px 18px;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
}
.pb-section .pb-num {
  font-family: var(--font-mono);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.03em;
  font-size: 12.5px;
}
.pb {
  scroll-margin-top: 24px;
}
.pb.pb-section.is-jump-target,
.pb.pb-subsection.is-jump-target {
  background: var(--accent-soft);
  box-shadow: -8px 0 0 0 var(--accent-soft), 8px 0 0 0 var(--accent-soft);
  animation: jumpPulse 1.4s ease;
}
.pb-subsection {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-doc);
  font-size: 13.5px;
  font-weight: 650;
  margin: 18px -12px 6px;
  padding: 4px 12px 4px 18px;
  text-align: left;
}
.pb-subsection .pb-num {
  font-family: var(--font-mono);
  color: var(--accent);
  font-weight: 600;
  font-size: 11.5px;
}
/* A "subheading" that is really a sentence — "2.4 The Provider undertakes to:"
   — set at the weight of the clauses around it. docling labels these from
   visual weight, so one clause in a run gets emboldened and its neighbours do
   not, for no reason present in the contract. See `renderSegmentBlock`. */
.pb-subsection.is-prose {
  font-weight: 400;
  font-size: 13.5px;
  margin: 10px -12px 4px;
}
.pb-subsection.is-prose .pb-num { font-weight: 500; }
.pb-appendix {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 36px -12px 10px;
  padding: 8px 12px 8px 18px;
  border-top: 2px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
}
.pb-appendix .pb-tag {
  color: var(--mode-stress);
  background: color-mix(in srgb, var(--mode-stress) 10%, transparent);
  border-color: color-mix(in srgb, var(--mode-stress) 30%, transparent);
}

.pb-clause.is-sub {
  margin-left: 28px;
  font-size: 13.5px;
  color: var(--text-secondary);
}
.pb-clause.is-bullet {
  margin-left: 56px;
  font-size: 13px;
  color: var(--text-secondary);
}
.pb-clause.is-bullet .pb-num { color: var(--text-faint); }
.pb-add-after {
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%) scale(.96);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  background: var(--bg-doc);
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(20, 28, 40, .08);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s, transform .12s, background .12s;
  z-index: 4;
}
.pb:hover > .pb-add-after,
.pb:focus-within > .pb-add-after {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
}
.pb-add-after:hover { background: var(--accent-soft); }

/* ============================================================
   Block-insert picker — Instagram-style horizontal gallery
   ============================================================ */
.pb-block-picker {
  position: fixed;
  z-index: 90;
  width: 340px;
  max-width: calc(100vw - 24px);
  padding: 8px 0 10px;
  background: var(--bg-doc);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(20, 28, 40, .18), 0 2px 6px rgba(20, 28, 40, .06);
}
.pb-block-eyebrow {
  padding: 0 12px 6px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.pb-block-scroll {
  display: flex;
  gap: 6px;
  padding: 2px 12px 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.pb-block-scroll::-webkit-scrollbar { height: 5px; }
.pb-block-scroll::-webkit-scrollbar-track { background: transparent; }
.pb-block-scroll::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}
.pb-block-card {
  flex: 0 0 68px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 7px 4px 6px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-app);
  cursor: pointer;
  color: var(--text-primary);
  font-family: var(--font-ui);
  transition: border-color .12s, background .12s, transform .12s;
}
.pb-block-card:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
}
.pb-block-glyph {
  font-family: var(--font-doc);
  font-size: 15px;
  line-height: 1;
  color: var(--accent);
  font-weight: 600;
}
.pb-block-label {
  font-size: 10.5px;
  font-weight: 550;
  letter-spacing: 0.01em;
  margin-top: 1px;
}
.pb-block-hint {
  font-size: 9px;
  color: var(--text-faint);
  font-family: var(--font-mono);
}

.pb-paragraph {
  display: block;
  margin: 6px -12px;
}

/* The weight the drafter chose, measured from the source file. A clause can
   be bold in the original without being a heading — structure and weight are
   separate facts, and this is the weight one. */
.pb.is-src-bold .pb-body { font-weight: 600; }

.pb-signature {
  display: block;
  margin: 18px -12px;
  padding: 14px 12px 14px 18px;
  background: var(--bg-pane);
  border: 1px dashed var(--border-subtle);
  border-radius: 6px;
  font-family: var(--font-doc);
  white-space: pre-wrap;
}
.pb-signature .pb-tag {
  color: var(--brand-blue);
  background: color-mix(in srgb, var(--brand-blue) 10%, transparent);
  border-color: color-mix(in srgb, var(--brand-blue) 30%, transparent);
  margin-bottom: 6px;
  display: inline-block;
}
.pb-signature-zone {
  margin: 28px -4px 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-doc);
}
.pb-signature-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
}
.pb-signature-kicker {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
}
.pb-signature-note {
  font-size: 11.5px;
  color: var(--text-muted);
}
/* THE STANZA IS THE UNIT, so its lines sit as close together here as they do
   on the page they were printed on. An execution block is a dense list — role,
   name, address, registration, bank, signatory, seal — and spacing it out like
   body paragraphs is what made one party's details read as a dozen unrelated
   statements rather than one block belonging to one company. */
.pb-signature-caption {
  margin: -4px 0 12px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.pb-signature-caption .pb-signature-line {
  margin: 0;
}
.pb-signature-layout {
  display: grid;
  grid-template-columns: repeat(var(--sig-cols, 2), minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  font-family: var(--font-doc);
}
.pb-signature-col {
  min-width: 0;
  padding: 12px 14px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  background: var(--bg-pane);
}
.pb-signature-line {
  min-height: 17px;
  margin: 0 0 1px;
  font-size: 12.5px;
  line-height: 17px;
  color: var(--text-primary);
  white-space: pre-wrap;
}
.pb-signature-line.is-role {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.pb-signature-line.is-entity {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.pb-signature-line.is-entity + .pb-signature-line.is-entity {
  margin-top: -4px;
}
.pb-signature-line.is-meta {
  color: var(--text-secondary);
  font-size: 11.8px;
}
.pb-signature-rule {
  height: 18px;
  border-bottom: 1px solid var(--text-muted);
  margin: 8px 0 4px;
}
.pb-signature-line .pb-body {
  display: block;
  outline: none;
}
.pb-signature-line:focus-within {
  background: var(--bg-soft);
  border-radius: 3px;
}
@media (max-width: 720px) {
  .pb-signature-layout {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }
  .pb-signature-col + .pb-signature-col {
    border-left: 0;
    padding-left: 0;
  }
}

.pb-table-host {
  padding: 10px 12px 12px 18px;
  margin: 10px -12px;
  background: var(--bg-pane);
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
  text-align: left;
}
.pb-table-label {
  display: inline-block;
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.pb-table-attached { margin-top: 8px; }
.pb-table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 11.5px;
}
/* The `.pb-schedule-*` card styles were removed with the renderer that
   used them: it printed fabricated "Tier N" headings above a table for
   any table containing the word "tier". See `renderTable` in
   parsed-view.js. */
.pb-table th, .pb-table td {
  border: 1px solid var(--border-subtle);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}
.pb-table th {
  background: var(--bg-pane);
  font-weight: 600;
  color: var(--text-primary);
}
.pb-table th[contenteditable]:focus,
.pb-table td[contenteditable]:focus {
  outline: 1px solid var(--mode-draft);
  outline-offset: -1px;
  background: color-mix(in srgb, var(--mode-draft) 6%, transparent);
}

.pb-toolbar {
  position: absolute;
  top: -24px;
  right: 6px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  background: var(--bg-doc);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(20, 28, 40, .08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity .12s, transform .12s;
  z-index: 5;
}
/* Keep the toolbar visible while the cursor is on the block OR on the
   toolbar itself, so it stays usable as the cursor crosses the gap. */
.pb:hover > .pb-toolbar,
.pb > .pb-toolbar:hover,
.pb > .pb-toolbar:focus-within { opacity: 1; pointer-events: auto; transform: translateY(0); }
.pb-tool {
  background: transparent;
  border: 0;
  padding: 4px 5px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pb-tool:hover { background: var(--bg-soft); color: var(--text-primary); }
.pb-tool-danger:hover { background: rgba(220, 78, 78, .1); color: var(--severity-critical); }
.pb-tool-spacer {
  width: 1px;
  height: 14px;
  background: var(--border-subtle);
  margin: 0 2px;
}
.pb-tool-sep {
  width: 1px;
  height: 14px;
  background: var(--border-subtle);
  margin: 0 4px;
}

/* Type chip — first element in the toolbar. Reads the current block type
   and opens a popover with the alternatives. */
.pb-type-pick {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px 3px 8px;
  border-radius: 4px;
  background: var(--bg-soft);
  color: var(--text-primary);
  border: 0;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 550;
  letter-spacing: 0.01em;
}
.pb-type-pick:hover { background: var(--accent-soft); color: var(--accent); }
.pb-type-pick svg { color: currentColor; opacity: 0.7; }
.pb-type-label { white-space: nowrap; }

.pb-type-menu {
  position: fixed;
  z-index: 80;
  min-width: 200px;
  padding: 4px;
  background: var(--bg-doc);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(31, 41, 51, .14);
  font-family: var(--font-ui);
}
.pb-type-eyebrow {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 6px 8px 4px;
}
.pb-type-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 9px;
  border: 0;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-primary);
  text-align: left;
}
.pb-type-item:hover { background: var(--bg-soft); }
.pb-type-item.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.pb-type-item-hint {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
}
.pb-type-item.is-active .pb-type-item-hint { color: var(--accent); opacity: 0.85; }

/* Selection bubble — only shown when text is selected inside a body */
.pb-bubble {
  position: fixed;
  z-index: 90;
  display: none;
  align-items: center;
  gap: 1px;
  padding: 3px;
  background: #1e2733;
  color: #fff;
  border-radius: 7px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
  font-family: var(--font-ui);
  user-select: none;
}
.pb-bubble.is-on { display: inline-flex; }
.pb-bubble-btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: #f1f3f5;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  font-family: var(--font-ui);
}
.pb-bubble-btn b,
.pb-bubble-btn i,
.pb-bubble-btn u,
.pb-bubble-btn s { font-style: inherit; font-weight: inherit; text-decoration: inherit; }
.pb-bubble-btn b { font-weight: 700; }
.pb-bubble-btn i { font-style: italic; }
.pb-bubble-btn u { text-decoration: underline; }
.pb-bubble-btn s { text-decoration: line-through; }
.pb-bubble-btn:hover { background: rgba(255, 255, 255, .12); }
.pb-bubble-btn.is-active {
  background: rgba(255, 255, 255, .18);
  color: #ffffff;
}
.pb-bubble-sep {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, .18);
  margin: 0 3px;
}
.pb-bubble-group { display: inline-flex; align-items: center; gap: 1px; }
/* Both groups are always visible — selection bubble is universal. The
   visibility of individual mark buttons is controlled per-button by the host
   (Settings → Selection bubble). */
.pb-bubble-classify {
  display: inline-flex;
  padding-left: 4px;
  margin-left: 4px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.pb-bubble-classify-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  width: auto !important;
  padding: 0 8px;
  font-weight: 600;
  font-size: 11.5px;
}

/* Classify dropdown menu */
.pb-classify-menu {
  position: fixed;
  z-index: 92;
  min-width: 220px;
  padding: 4px;
  background: var(--bg-doc);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(31, 41, 51, .16);
  font-family: var(--font-ui);
}
.pb-classify-eyebrow {
  font-size: 10.5px;
  color: var(--text-muted);
  padding: 6px 9px 4px;
  font-weight: 600;
}
.pb-classify-note {
  max-width: 260px;
  margin: 0 5px 4px;
  padding: 6px 8px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--severity-medium) 10%, transparent);
  color: var(--text-secondary);
  font-size: 11.5px;
  line-height: 1.35;
}
.pb-classify-item {
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 6px 9px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-primary);
  text-align: left;
}
.pb-classify-item:hover { background: var(--bg-soft); }
.pb-classify-item.is-active {
  background: var(--bg-soft);
  font-weight: 600;
}
.pb-classify-item.is-danger { color: var(--severity-critical); }
.pb-classify-item.is-danger:hover { background: color-mix(in srgb, var(--severity-critical) 8%, transparent); }
.pb-classify-swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-muted);
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent);
}
.pb-classify-swatch.is-empty {
  background: transparent;
  border: 1.5px dashed var(--text-faint);
}
.pb-classify-sep {
  height: 1px;
  background: var(--border-hairline);
  margin: 4px 2px;
}
.pb-classify-scroll {
  /* Roughly 8 items tall (each ~30 px including padding). Scroll if longer. */
  max-height: 240px;
  overflow-y: auto;
  padding-right: 2px;
}
.pb-classify-scroll::-webkit-scrollbar { width: 6px; }
.pb-classify-scroll::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}
.pb-classify-sticky {
  position: sticky;
  bottom: -4px;
  background: var(--bg-doc);
  margin: 0 -4px -4px;
  padding: 0 4px 4px;
}

/* ============================================================
   EV mode — entity overlays inside body text
   Default CSS variables provide the base palette. The Settings
   modal overrides these via inline style on :root and .app.
============================================================ */
:root,
.app {
  --ev-party: #1d3557;
  --ev-person: #7c3aed;
  --ev-company: #0f766e;
  --ev-date: #15803d;
  --ev-time: #06b6d4;
  --ev-money: #b7791f;
  --ev-number: #0891b2;
  --ev-identifier: #0e7490;
  --ev-amount: #8a6f23;
  --ev-percent: #c2410c;
  --ev-ratio: #9a3412;
  --ev-duration: #6b3d9c;
  --ev-distance: #7e3f98;
  --ev-location: #0d9488;
  --ev-regulation: #b42318;
  --ev-citation: #315f9f;
  --ev-court: #7a1d3a;
  --ev-jurisdiction: #5a4632;
  --ev-url: #0369a1;
  --ev-email: #0369a1;
  --ev-phone: #0369a1;
  --ev-ssn: #be185d;
  --ev-product: #b45309;
  --ev-address: #64748b;
  --ev-definition: #6b21a8;
  --ev-defined_term: #7c3aed;
  --ev-crossref: #2563eb;
  --ev-external_value: #c026d3;
  --ev-party_role_expr: #db2777;
  --ev-event_ref: #ea580c;
  --ev-deontic: #dc2626;
  --ev-negation: #b91c1c;
  --ev-condition-marker: #d97706;
  --ev-recurrence-marker: #ca8a04;
  --ev-vague-standard: #65a30d;
  --ev-computation-marker: #0d9488;
  --ev-quantifier: #4f46e5;
  --ev-sequence-marker: #9333ea;
  --ev-automation-marker: #0284c7;
  --ev-maintenance-marker: #059669;
  --ev-copyright: #7c2d12;
  --ev-trademark: #92400e;
}
.ev-mark {
  /* No visual until EV mode is on. */
  cursor: text;
  --ev-color: #94a3b8; /* fallback so any unmapped type is still visible */
}
.app.ev-on .ev-mark { position: relative; }
.app.ev-on.ev-color-underline .ev-mark {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-skip-ink: none;
  text-underline-offset: 3px;
}
.app.ev-on.ev-color-text .ev-mark {
  /* Color the actual letters as well as / instead of underline. */
  font-weight: 550;
}
.ev-mark-party        { --ev-color: var(--ev-party); }
.ev-mark-person       { --ev-color: var(--ev-person); }
.ev-mark-company      { --ev-color: var(--ev-company); }
.ev-mark-date         { --ev-color: var(--ev-date); }
.ev-mark-money        { --ev-color: var(--ev-money); }
.ev-mark-amount       { --ev-color: var(--ev-amount); }
.ev-mark-percent      { --ev-color: var(--ev-percent); }
.ev-mark-ratio        { --ev-color: var(--ev-ratio); }
.ev-mark-duration     { --ev-color: var(--ev-duration); }
.ev-mark-distance     { --ev-color: var(--ev-distance); }
.ev-mark-location     { --ev-color: var(--ev-location); }
.ev-mark-regulation   { --ev-color: var(--ev-regulation); }
.ev-mark-citation     { --ev-color: var(--ev-citation); }
.ev-mark-court        { --ev-color: var(--ev-court); }
.ev-mark-jurisdiction { --ev-color: var(--ev-jurisdiction); }
.ev-mark-url          { --ev-color: var(--ev-url); }
.ev-mark-email        { --ev-color: var(--ev-email); }
.ev-mark-phone        { --ev-color: var(--ev-phone); }
.ev-mark-ssn          { --ev-color: var(--ev-ssn); }
.ev-mark-product      { --ev-color: var(--ev-product); }
.ev-mark-address      { --ev-color: var(--ev-address); }
.ev-mark-definition   { --ev-color: var(--ev-definition); }
.ev-mark-copyright    { --ev-color: var(--ev-copyright); }
.ev-mark-trademark    { --ev-color: var(--ev-trademark); }
/* --- KernelV2 span layers (L1a atoms · L1b entities · L2 markers · L3 statements) --- */
.ev-mark-number         { --ev-color: var(--ev-number); }
.ev-mark-identifier     { --ev-color: var(--ev-identifier); }
.ev-mark-time           { --ev-color: var(--ev-time); }
.ev-mark-defined_term   { --ev-color: var(--ev-defined_term); }
.ev-mark-crossref       { --ev-color: var(--ev-crossref); }
.ev-mark-external_value { --ev-color: var(--ev-external_value); }
.ev-mark-party_role_expr{ --ev-color: var(--ev-party_role_expr); }
.ev-mark-event_ref      { --ev-color: var(--ev-event_ref); }
.ev-mark-deontic        { --ev-color: var(--ev-deontic); }
.ev-mark-negation       { --ev-color: var(--ev-negation); }
.ev-mark-condition-marker   { --ev-color: var(--ev-condition-marker); }
.ev-mark-recurrence-marker  { --ev-color: var(--ev-recurrence-marker); }
.ev-mark-vague-standard     { --ev-color: var(--ev-vague-standard); }
.ev-mark-computation-marker { --ev-color: var(--ev-computation-marker); }
.ev-mark-quantifier         { --ev-color: var(--ev-quantifier); }
.ev-mark-sequence-marker    { --ev-color: var(--ev-sequence-marker); }
.ev-mark-automation-marker  { --ev-color: var(--ev-automation-marker); }
.ev-mark-maintenance-marker { --ev-color: var(--ev-maintenance-marker); }
.ev-mark-definition_statement, .ev-mark-obligation_statement, .ev-mark-remedy_statement,
.ev-mark-condition_statement, .ev-mark-reference_statement, .ev-mark-procedural_statement,
.ev-mark-boilerplate_statement, .ev-mark-representation_statement, .ev-mark-interpretation_statement,
.ev-mark-precedence_statement, .ev-mark-liability_statement, .ev-mark-table_statement,
.ev-mark-deeming_statement, .ev-mark-succession_statement { --ev-color: #475569; }
/* source provenance of a review label (golden truth vs gliner2 prediction) */
.app.ev-on .ev-mark[data-source="gliner2"] { text-decoration-style: dashed; }
.app.ev-on .ev-mark[data-source="golden"]  { text-decoration-style: solid; }
.app.ev-on .ev-mark[data-source="both"]    { text-decoration-style: double; }
.app.ev-on.ev-color-underline .ev-mark { text-decoration-color: var(--ev-color); }
.app.ev-on.ev-color-text      .ev-mark { color: var(--ev-color); }
.app.ev-on .ev-mark:hover {
  background: color-mix(in srgb, var(--ev-color) 8%, transparent);
  border-radius: 2px;
}
.app.ev-on .pb-body { cursor: text; }

/* ----- User typography (applied to body-bearing blocks in the parsed view).
   Headers and special blocks have their own font-size rules that stay fixed
   so the visual hierarchy doesn't collapse when a user picks a giant body
   size — we only resize body prose. ----- */
.parsed-doc .pb-clause,
.parsed-doc .pb-paragraph,
.parsed-doc .pb-party-intro {
  font-size: var(--font-doc-size);
  line-height: var(--font-doc-line);
}
.parsed-doc .pb-body { font-size: inherit; line-height: inherit; }

/* REMOVED: the right-edge hover panel. `.edge-trigger` was an invisible
   14px fixed strip at `right: 0`, z-index 70 — on top of the scrollbar,
   which it swallowed the pointer for on every page. See app.js. */
.pb-align {
  position: absolute;
  right: 6px;
  bottom: -10px;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  background: var(--bg-doc);
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(20, 28, 40, .08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px);
  transition: opacity .12s, transform .12s;
  z-index: 5;
}
.pb:hover > .pb-align,
.pb-doc-place:hover > .pb-align,
.pb-doc-date:hover > .pb-align,
.pb-signature-line:hover > .pb-align {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.pb-align-btn {
  width: 19px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
}
.pb-align-btn:hover { background: var(--bg-soft); color: var(--text-primary); }
.pb-align-btn.is-active { background: var(--accent-soft); color: var(--accent); }
/* Hide the floating toolbars only while the user is typing in the body —
   not while they're interacting with the toolbars themselves. Using :has()
   means focus on a toolbar button does NOT trigger the hide, so clicks land. */
.pb:has(> .pb-body:focus) > .pb-toolbar,
.pb:has(> .pb-body:focus) > .pb-align,
.pb-doc-place:has(.pb-body:focus) > .pb-align,
.pb-doc-date:has(.pb-body:focus) > .pb-align,
.pb-signature-line:has(.pb-body:focus) > .pb-align {
  opacity: 0;
  pointer-events: none;
}
.pb > .pb-align:hover,
.pb > .pb-align:focus-within {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.parsed-empty {
  padding: 60px 24px;
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-doc);
  font-size: 13.5px;
}
.parsed-save-indicator {
  position: fixed;
  bottom: 16px;
  right: 18px;
  z-index: 60;
  background: var(--bg-doc);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 4px 10px 4px 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(20, 28, 40, .08);
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.parsed-save-indicator.is-on { opacity: 1; }
.parsed-save-indicator .psi-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mode-draft);
}
.parsed-save-indicator.is-saved .psi-dot { background: var(--severity-success); }
.parsed-save-indicator.is-error .psi-dot { background: var(--severity-critical); }

/* ============================================================
   Dedicated sign-in / create-account page (#authScreen)
   A branded full-screen gate that fits the parchment + navy
   design language — replaces the old reused modal.
============================================================ */
.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  grid-template-rows: 100%;   /* fill viewport height so both columns span fully */
  background: var(--bg-page);
  font-family: var(--font-ui);
  color: var(--text-primary);
  /* The gate must never depend on the animation clock for visibility: a running
     animation's current keyframe overrides the base property, so if the entrance
     animated opacity, a paused/throttled clock (backgrounded tab, power modes,
     headless automation) would freeze it at opacity 0 over an inert app. Keep
     opacity a constant 1 and animate only transform — a frozen clock then leaves
     the gate fully visible, just un-slid. */
  opacity: 1;
  animation: authFade .28s cubic-bezier(.4, 0, .2, 1);
}
.auth-screen[hidden] { display: none; }

@keyframes authFade { from { transform: translateY(6px); } to { transform: none; } }

/* ---- Brand / pitch panel (left) ---- */
.auth-brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 44px 48px;
  background:
    radial-gradient(120% 90% at 12% 6%, #25426b 0%, rgba(37, 66, 107, 0) 55%),
    linear-gradient(165deg, var(--brand-navy) 0%, var(--brand-navy-hover) 100%);
  color: #eaf0f9;
}
/* faint oversized watermark mark */
.auth-brand::after {
  content: "";
  position: absolute;
  right: -90px; bottom: -120px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(253, 243, 218, 0.10) 0%, rgba(253, 243, 218, 0) 70%);
  pointer-events: none;
}
.auth-brand-top {
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1;
}
.auth-logo {
  position: relative;
  width: 22px; height: 28px;
  flex: none;
}
.auth-logo-rule {
  position: absolute;
  left: 10px; top: 2px; bottom: 2px;
  width: 2px;
  background: #f3f6fb;
  border-radius: 1px;
}
.auth-logo-mark {
  position: absolute;
  left: 5px; top: 11px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--bg-mark);
  box-shadow: 0 0 0 4px rgba(253, 241, 194, 0.18);
}
.auth-wordmark {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: #ffffff;
}
.auth-brand-body { z-index: 1; max-width: 460px; }
.auth-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--bg-mark);
  margin-bottom: 18px;
}
.auth-headline {
  font-family: var(--font-doc);
  font-weight: 600;
  font-size: 38px;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #ffffff;
  margin: 0 0 18px;
}
.auth-lede {
  font-size: 14.5px;
  line-height: 1.62;
  color: #c7d2e3;
  margin: 0 0 26px;
}
.auth-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-points li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13.5px;
  color: #dbe3f0;
}
.auth-tick {
  flex: none;
  margin-top: 3px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: rgba(253, 241, 194, 0.16);
  position: relative;
}
.auth-tick::after {
  content: "";
  position: absolute;
  left: 4.5px; top: 2.5px;
  width: 4px; height: 7px;
  border: solid var(--bg-mark);
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg);
}
.auth-brand-foot {
  z-index: 1;
  font-size: 11.5px;
  line-height: 1.5;
  color: #8ea2bf;
  margin: 0;
}

/* ---- Form panel (right) ---- */
.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px;
  background: var(--bg-app);
}
.auth-card {
  width: 100%;
  max-width: 372px;
}
.auth-card-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brand-blue);
  margin-bottom: 8px;
}
.auth-card-title {
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 6px;
}
.auth-card-sub {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 26px;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Author display rules beat the UA [hidden] rule, so restore it explicitly —
   otherwise the create-only Display name field shows during sign-in. */
.auth-field[hidden] { display: none; }
.auth-field-label {
  font-size: 12px;
  font-weight: 550;
  color: var(--text-secondary);
}
.auth-field-label em {
  font-style: normal;
  font-weight: 400;
  color: var(--text-faint);
  margin-left: 2px;
}
.auth-field input {
  height: 42px;
  padding: 0 13px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--bg-doc);
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-primary);
  transition: border-color .15s, box-shadow .15s;
}
.auth-field input::placeholder { color: var(--text-faint); }
.auth-field input:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(49, 95, 159, 0.16);
}
.auth-msg {
  margin: 2px 0 0;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  background: var(--bg-active-red);
  border: 1px solid #f3c9c3;
  color: var(--severity-critical);
}
.auth-msg[hidden] { display: none; }
/* Expired-session note: reassures that work survives + names the action
   that will resume right after signing back in. */
.auth-resume {
  margin: 10px 0 0;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  background: var(--bg-active-amber);
  border: 1px solid #e7d28a;
  color: var(--text-primary);
}
.auth-resume[hidden] { display: none; }
.auth-submit {
  margin-top: 6px;
  height: 44px;
  border: 1px solid var(--brand-navy);
  border-radius: 9px;
  background: var(--brand-navy);
  color: #ffffff;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background .15s, transform .05s, opacity .15s;
}
.auth-submit:hover { background: var(--brand-navy-hover); }
.auth-submit:active { transform: translateY(1px); }
.auth-submit:disabled { opacity: 0.6; cursor: progress; }
.auth-switch {
  margin: 22px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
}
.auth-switch-btn {
  border: none;
  background: none;
  padding: 0;
  margin-left: 4px;
  font: inherit;
  font-weight: 600;
  color: var(--brand-blue);
  cursor: pointer;
}
.auth-switch-btn:hover { text-decoration: underline; }
.auth-hint {
  margin: 14px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ---- The forced password change (#pwGate) ----------------------------------
   The same full-screen gate as the sign-in page (it reuses .auth-screen and
   every field class), with one thing deliberately missing: a way out. The
   account signed in with a credential its administrator also knows, and the
   server refuses every route but this change until it is replaced — so there
   is no Close, no Escape and no veil to click. The only other action is
   signing out, which is a button and not an X, because it is a decision.
   `z-index` sits one above .auth-screen: both can be in the DOM at once and
   this one must win the frame in which the other is being hidden. */
.pw-gate { z-index: 1001; }
.pw-gate .auth-card-eyebrow { color: var(--severity-high); }
/* The sign-in page's title is one word, so it never wrapped and never needed a
   line-height; this one is three, and four in Russian («Задайте собственный
   пароль»), where the second line all but touched the first. */
.pw-gate .auth-card-title { line-height: 1.2; margin-bottom: 8px; }
/* Two lines here against the sign-in page's one, so the 26 px it leaves under
   itself becomes a gap; everything else about the lede is already right. */
.pw-gate .auth-card-sub { margin-bottom: 20px; }
.auth-secondary {
  margin: 18px 0 0;
  width: 100%;
  height: 38px;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.auth-secondary:hover { background: var(--bg-sunken); color: var(--text-primary); }

/* ---- Responsive: collapse the brand panel into a slim header ---- */
@media (max-width: 880px) {
  .auth-screen { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth-brand { padding: 26px 28px; gap: 18px; }
  .auth-brand-body { max-width: none; }
  .auth-headline { font-size: 26px; }
  .auth-lede, .auth-points, .auth-brand-foot { display: none; }
  .auth-panel { padding: 32px 24px; align-items: flex-start; }
}
@media (max-width: 560px) {
  .auth-brand { display: none; }
  .auth-screen { grid-template-rows: 1fr; }
}

/* ============================================================
   22. DOC INTELLIGENCE (GDrive pattern) + CALENDAR (GCal pattern)
============================================================ */
:root {
  --mode-drive:    #0f766e;   /* teal   */
  --mode-calendar: #7a1d3a;   /* claret */
  --bg-active-teal: #e9f4f1;
  --bg-active-rose: #f8edf0;
  --k-payment:  #b7791f;
  --k-delivery: #315f9f;
  --k-notice:   #6b3d9c;
  --k-obligation:#4d6a2a;
  --k-renewal:  #b42318;
  --k-term:     #5a4632;
  --gshadow: 0 1px 2px rgba(30, 25, 15, .12), 0 1px 6px 1px rgba(30, 25, 15, .09);
  --gshadow-up: 0 1px 3px rgba(30, 25, 15, .16), 0 4px 10px 2px rgba(30, 25, 15, .12);
}
.app[data-mode="drive"]    { --accent: var(--mode-drive);    --accent-soft: var(--bg-active-teal); }
.app[data-mode="calendar"] { --accent: var(--mode-calendar); --accent-soft: var(--bg-active-rose); }

/* These pages ARE the app: collapse the library column like .is-lib-closed */
.app[data-mode="drive"], .app[data-mode="calendar"] { grid-template-columns: var(--rail-w) 0 1fr; }
.app[data-mode="drive"] .library, .app[data-mode="calendar"] .library { opacity: 0; pointer-events: none; }
.app[data-mode="drive"] .lib-collapse, .app[data-mode="calendar"] .lib-collapse,
.app[data-mode="drive"] .lib-reopen, .app[data-mode="calendar"] .lib-reopen { display: none; }

/* shared bits */
.menu-sep { height: 1px; margin: 4px 6px; background: var(--border-subtle); }
.menu-item.is-danger { color: var(--severity-critical); }
.menu-item[disabled] { opacity: .45; pointer-events: none; }
.menu-item svg { vertical-align: -3px; margin-right: 7px; }
.modal-label { display: block; margin: 12px 2px 4px; font-size: 11px; color: var(--text-muted); }
.modal-input {
  width: 100%; padding: 8px 10px; font: 500 13px var(--font-ui);
  color: var(--text-primary); background: var(--bg-doc);
  border: 1px solid var(--border-strong); border-radius: 7px; outline: none;
}
.modal-input:focus { border-color: var(--accent); }
.due-chip {
  display: inline-block; padding: 1px 7px; border-radius: 20px;
  font: 600 10px var(--font-mono); letter-spacing: .02em;
  background: var(--bg-soft); color: var(--text-secondary);
  border: 1px solid var(--border-subtle); white-space: nowrap;
}
.due-chip.is-warm { background: var(--bg-active-amber); color: #8a5a12; border-color: transparent; }
.due-chip.is-hot,
.due-chip.is-past { background: var(--bg-active-red); color: var(--severity-critical); border-color: transparent; }
.btn.is-danger { color: var(--severity-critical); }
.drv-empty { padding: 60px 30px; text-align: center; }
.drv-move-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow: auto; }
.drv-move-opt {
  text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 7px;
  cursor: pointer; font: 500 13px var(--font-ui); color: var(--text-primary); white-space: pre;
}
.drv-move-opt:hover { background: var(--accent-soft); color: var(--accent); }
.drv-viewtoggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; }
.drv-viewtoggle button {
  border: 0; background: var(--bg-doc); color: var(--text-muted); cursor: pointer;
  padding: 6px 13px; font: 600 12px var(--font-ui);
}
.drv-viewtoggle button.is-on { background: var(--accent-soft); color: var(--accent); }

/* ==================== GDRIVE — Documents ==================== */
.gdrv { display: grid; grid-template-columns: 248px minmax(0, 1fr) auto; min-height: 100%; }

/* sidebar */
.gdrv-side {
  padding: 14px 8px 14px 14px; display: flex; flex-direction: column;
  position: sticky; top: 0; align-self: start; max-height: calc(100vh - var(--modebar-h));
  overflow: auto;
}
.gdrv-new {
  display: inline-flex; align-items: center; gap: 11px; align-self: flex-start;
  padding: 14px 22px 14px 16px; margin: 2px 0 16px 2px;
  background: var(--bg-doc); color: var(--text-primary);
  border: 1px solid var(--border-hairline); border-radius: 16px; cursor: pointer;
  font: 550 14px var(--font-ui); box-shadow: var(--gshadow);
  transition: box-shadow .15s ease, background .15s ease;
}
.gdrv-new:hover { box-shadow: var(--gshadow-up); background: var(--accent-soft); }
.gdrv-new svg { color: var(--accent); }
.gdrv-nav { display: flex; flex-direction: column; }
.gdrv-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 14px;
  border-radius: 0 20px 20px 0; cursor: pointer; color: var(--text-secondary);
  font: 500 13px var(--font-ui); user-select: none; margin-left: -14px;
  position: relative;
}
.gdrv-row:hover { background: var(--bg-soft); }
.gdrv-row.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.gdrv-row.is-dropover { outline: 1.5px dashed var(--accent); outline-offset: -2px; background: var(--accent-soft); }
.gdrv-row-top { font-weight: 550; }
.gdrv-row-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gdrv-row-n { font: 500 10.5px var(--font-mono); color: var(--text-faint); }
.gdrv-chev {
  border: 0; background: none; cursor: pointer; color: var(--text-faint);
  width: 18px; height: 18px; padding: 0; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 4px; flex: 0 0 18px;
  transition: transform .15s ease;
}
.gdrv-chev.is-open { transform: rotate(90deg); }
.gdrv-chev.is-leaf { visibility: hidden; }
.gdrv-chev:hover { background: var(--bg-pane); color: var(--text-primary); }
.gdrv-row-menu {
  border: 0; background: none; color: var(--text-faint); cursor: pointer;
  padding: 0 4px; border-radius: 50%; visibility: hidden; font-size: 14px; line-height: 20px;
}
.gdrv-row:hover .gdrv-row-menu, .gdrv-ftile:hover .gdrv-row-menu,
.gdrv-card:hover .gdrv-row-menu, .gdrv-lrow:hover .gdrv-row-menu { visibility: visible; }
.gdrv-row-menu:hover { color: var(--text-primary); background: var(--bg-pane); }
.gdrv-meter { margin-top: auto; padding: 16px 10px 4px 2px; }
.gdrv-meter-bar { height: 4px; border-radius: 4px; background: var(--border-subtle); overflow: hidden; }
.gdrv-meter-bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.gdrv-meter-t { margin-top: 7px; font: 500 11px var(--font-ui); color: var(--text-muted); }

/* body */
.gdrv-body { padding: 12px 22px 40px; min-width: 0; }
.gdrv-search-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.gdrv-search {
  flex: 1; max-width: 680px; display: flex; align-items: center; gap: 11px;
  background: var(--bg-soft); border-radius: 24px; padding: 0 8px 0 16px; height: 44px;
  color: var(--text-muted); border: 1px solid transparent;
  transition: background .15s ease, box-shadow .15s ease;
}
.gdrv-search:focus-within { background: var(--bg-doc); box-shadow: var(--gshadow); border-color: var(--border-hairline); }
.gdrv-search input {
  flex: 1; border: 0; background: none; outline: none; height: 100%;
  font: 450 14.5px var(--font-ui); color: var(--text-primary);
}
.gdrv-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.gdrv-iconbtn {
  width: 36px; height: 36px; border-radius: 50%; border: 0; background: none;
  color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.gdrv-iconbtn:hover { background: var(--bg-soft); color: var(--text-primary); }
.gdrv-iconbtn.is-on { background: var(--accent-soft); color: var(--accent); }
.gdrv-title { margin: 2px 0 10px; font: 450 22px var(--font-ui); color: var(--text-primary); letter-spacing: -.01em; }
.gdrv-crumbs { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.gdrv-crumb {
  border: 0; background: none; cursor: pointer; padding: 3px 8px; border-radius: 8px;
  font: 450 22px var(--font-ui); color: var(--text-muted); letter-spacing: -.01em;
}
.gdrv-crumb:hover { background: var(--bg-soft); color: var(--text-primary); }
.gdrv-crumb.is-here { color: var(--text-primary); cursor: default; padding: 3px 8px; }
.gdrv-crumb-sep { color: var(--text-faint); font-size: 18px; }
.gdrv-fchips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 18px; }
.gdrv-fchip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px;
  border: 1px solid var(--border-strong); border-radius: 9px; background: var(--bg-doc);
  cursor: pointer; font: 550 12px var(--font-ui); color: var(--text-secondary);
}
.gdrv-fchip:hover { background: var(--bg-soft); }
.gdrv-fchip.is-on { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.gdrv-fx { font-style: normal; opacity: .7; padding: 0 1px; }
.gdrv-fx:hover { opacity: 1; }
.gdrv-selinfo { font: 600 12px var(--font-ui); color: var(--accent); margin-left: 6px; }
.gdrv-sec-h {
  font: 550 13px var(--font-ui); color: var(--text-secondary); margin: 4px 0 10px;
}
.gdrv-sec-h em { font-style: normal; color: var(--text-faint); font-weight: 500; }

/* folder tiles */
.gdrv-ftiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px; margin-bottom: 22px;
}
.gdrv-ftile {
  display: flex; align-items: center; gap: 10px; padding: 12px 8px 12px 16px;
  background: var(--bg-soft); border-radius: 12px; cursor: pointer;
  border: 1px solid transparent; color: var(--text-secondary);
  transition: background .12s ease, border-color .12s ease;
}
.gdrv-ftile:hover { background: var(--accent-soft); }
.gdrv-ftile.is-dropover { border-color: var(--accent); background: var(--accent-soft); }
.gdrv-ftile-name { flex: 1; font: 550 13px var(--font-ui); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gdrv-ftile-n { font: 500 10.5px var(--font-mono); color: var(--text-faint); }
.gdrv-ftile.is-trashed { cursor: default; }
.gdrv-ftile.is-trashed:hover { background: var(--bg-soft); }
.gdrv-trash { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }

/* document cards — preview on top, name row below (the Drive card) */
.gdrv-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: 14px;
}
.gdrv-card {
  background: var(--bg-doc); border: 1px solid var(--border-hairline); border-radius: 13px;
  padding: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 7px;
  transition: box-shadow .14s ease, background .14s ease;
}
.gdrv-card:hover { box-shadow: var(--gshadow); }
.gdrv-card.is-selected, .gdrv-lrow.is-selected { background: var(--accent-soft); border-color: var(--accent); }
.gdrv-prev {
  height: 118px; border-radius: 9px; background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center; gap: 16px;
  position: relative; overflow: hidden;
}
.gdrv-prev.is-plain { flex-direction: column; gap: 8px; color: var(--text-faint); font: 500 11px var(--font-ui); }
.gdrv-prev-grade {
  width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 700 22px var(--font-mono); color: #fff; background: var(--border-strong);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.gdrv-prev-grade.g-ok { background: var(--severity-success); }
.gdrv-prev-grade.g-med { background: var(--k-payment); }
.gdrv-prev-grade.g-high { background: var(--severity-high, #c2410c); }
.gdrv-prev-grade.g-crit { background: var(--severity-critical); }
.gdrv-prev-facts { display: flex; flex-direction: column; }
.gdrv-prev-facts b { font: 650 14px var(--font-ui); color: var(--text-primary); }
.gdrv-prev-facts i { font: 500 10.5px var(--font-ui); font-style: normal; color: var(--text-muted); }
.gdrv-prev-dots { position: absolute; bottom: 9px; left: 0; right: 0; display: flex; gap: 4px; justify-content: center; }
.gdrv-prev-dots i { width: 7px; height: 7px; border-radius: 50%; }
.gdrv-prev-dots .d-crit { background: var(--severity-critical); }
.gdrv-prev-dots .d-high { background: var(--severity-high, #c2410c); }
.gdrv-card-foot { display: flex; align-items: center; gap: 8px; padding: 0 3px; }
.gdrv-card-ic { color: var(--accent); display: inline-flex; }
.gdrv-card-name { flex: 1; font: 550 12.5px var(--font-ui); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gdrv-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 3px 3px; min-height: 18px; }
.gdrv-tag {
  padding: 1px 8px; border-radius: 20px; font: 600 10px var(--font-ui);
  border: 1px solid var(--border-subtle); color: var(--text-secondary); background: var(--bg-doc);
}
.gdrv-tag.is-client { border-style: dashed; }
.gdrv-grade {
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; font: 700 11.5px var(--font-mono); color: #fff; background: var(--border-strong);
}
.gdrv-grade.g-ok { background: var(--severity-success); }
.gdrv-grade.g-med { background: var(--k-payment); }
.gdrv-grade.g-high { background: var(--severity-high, #c2410c); }
.gdrv-grade.g-crit { background: var(--severity-critical); }

/* list view */
.gdrv-list { border: 1px solid var(--border-hairline); border-radius: 12px; overflow: hidden; background: var(--bg-doc); }
.gdrv-lhead, .gdrv-lrow {
  display: grid; grid-template-columns: minmax(220px, 2.2fr) 110px 64px 130px minmax(150px, 1.4fr) 34px;
  gap: 10px; align-items: center; padding: 0 14px;
}
.gdrv-lhead { border-bottom: 1px solid var(--border-hairline); }
.gdrv-th {
  text-align: left; border: 0; background: none; cursor: pointer; padding: 11px 0;
  font: 600 11px var(--font-ui); text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted);
}
.gdrv-th:hover { color: var(--text-primary); }
.gdrv-lrow { min-height: 46px; cursor: pointer; border-bottom: 1px solid var(--border-hairline); }
.gdrv-lrow:last-child { border-bottom: 0; }
.gdrv-lrow:hover { background: var(--bg-soft); }
.gdrv-lname { display: flex; align-items: center; gap: 9px; min-width: 0; font: 550 13px var(--font-ui); color: var(--text-primary); }
.gdrv-lname > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gdrv-lname svg { color: var(--accent); flex: 0 0 auto; }
.gdrv-lmod { font: 500 12px var(--font-ui); color: var(--text-muted); }
.gdrv-lexp { font: 600 11.5px var(--font-mono); color: var(--text-secondary); }
.gdrv-ldl { display: flex; align-items: center; gap: 7px; font: 500 11.5px var(--font-ui); color: var(--text-secondary); }
.gdrv-ldl em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.is-c { text-align: center; } .is-r { text-align: right; }
.gdrv-none { padding: 40px 8px; color: var(--text-muted); font: 500 13px var(--font-ui); }
.gdrv-none em { font-style: normal; color: var(--text-faint); }

/* details / overview panel */
.gdrv-info {
  width: 296px; border-left: 1px solid var(--border-subtle); padding: 16px 18px 30px;
  position: sticky; top: 0; align-self: start; max-height: calc(100vh - var(--modebar-h)); overflow: auto;
  background: var(--bg-app);
}
.gdrv-info-h { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.gdrv-info-h span { flex: 1; font: 600 14px var(--font-ui); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gdrv-info-h .gdrv-row-menu { visibility: visible; }
.gdrv-info .gdrv-prev { margin-bottom: 14px; }
.gdrv-info-rows { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.gdrv-info-rows > div { display: flex; gap: 10px; font: 500 12px var(--font-ui); }
.gdrv-info-rows span { color: var(--text-faint); width: 74px; flex: 0 0 74px; }
.gdrv-info-rows b { color: var(--text-primary); font-weight: 600; }
.gdrv-info-rows b i { font-style: normal; color: var(--text-faint); font-weight: 500; }
.gdrv-info-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.gdrv-ov-big { font: 500 13px var(--font-ui); color: var(--text-secondary); margin-bottom: 6px; }
.gdrv-ov-big b { font: 650 17px var(--font-ui); color: var(--text-primary); }
.gdrv-ov-big.is-crit b { color: var(--severity-critical); }
.gdrv-ov-big i { font-style: normal; color: var(--text-faint); font-size: 11px; }
.gdrv-ov-sec {
  font: 600 10.5px var(--font-ui); text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin: 16px 0 7px; padding-top: 12px; border-top: 1px solid var(--border-hairline);
}
.gdrv-ov-grades { display: flex; gap: 8px; align-items: flex-end; height: 52px; }
.drv-gcol { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; flex: 1; gap: 3px; }
.drv-gbar { width: 100%; max-width: 18px; border-radius: 3px 3px 0 0; background: var(--border-strong); min-height: 3px; }
.drv-gbar.g-ok   { background: var(--severity-success); }
.drv-gbar.g-med  { background: var(--k-payment); }
.drv-gbar.g-high { background: var(--severity-high, #c2410c); }
.drv-gbar.g-crit { background: var(--severity-critical); }
.drv-glabel { font: 600 9.5px var(--font-mono); color: var(--text-muted); }
.gdrv-ov-dl {
  display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left;
  border: 0; background: none; cursor: pointer; padding: 6px 6px; border-radius: 8px;
}
.gdrv-ov-dl:hover { background: var(--bg-soft); }
.gdrv-ov-dl span { display: flex; flex-direction: column; min-width: 0; }
.gdrv-ov-dl b { font: 550 12px var(--font-ui); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gdrv-ov-dl i { font: 500 10.5px var(--font-ui); font-style: normal; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gdrv-ov-none { font: 500 12px var(--font-ui); color: var(--text-faint); }
.gdrv-link { border: 0; background: none; cursor: pointer; color: var(--accent); font: 600 12px var(--font-ui); padding: 0; }
.gdrv-link:hover { text-decoration: underline; }

/* ==================== GCAL — Calendar ==================== */
.gcal { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100%; }
.gcal-side {
  padding: 14px 10px 20px 16px; border-right: 1px solid var(--border-subtle);
  position: sticky; top: 0; align-self: start; max-height: calc(100vh - var(--modebar-h)); overflow: auto;
}
.gcal-side .gdrv-new { margin-bottom: 18px; }

/* mini month */
.gcal-mini { margin-bottom: 16px; }
.gcal-mini-head { display: flex; align-items: center; gap: 2px; padding: 0 4px 8px; }
.gcal-mini-head span { flex: 1; font: 600 12.5px var(--font-ui); color: var(--text-primary); }
.gcal-iconbtn {
  width: 26px; height: 26px; border-radius: 50%; border: 0; background: none; cursor: pointer;
  color: var(--text-muted); font-size: 15px; line-height: 1;
}
.gcal-iconbtn:hover { background: var(--bg-soft); color: var(--text-primary); }
.gcal-iconbtn[disabled] { opacity: .35; pointer-events: none; }
.gcal-mini-w { display: grid; grid-template-columns: repeat(7, 1fr); }
.gcal-mini-w span { text-align: center; font: 600 9px var(--font-ui); color: var(--text-faint); padding: 2px 0 4px; }
.gcal-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.gcal-mini-d {
  position: relative; width: 26px; height: 26px; margin: 0 auto; border: 0; border-radius: 50%;
  background: none; cursor: pointer; font: 500 10.5px var(--font-ui); color: var(--text-secondary);
}
.gcal-mini-d:hover { background: var(--bg-soft); }
.gcal-mini-d.is-out { color: var(--text-faint); }
.gcal-mini-d.is-today { background: var(--accent); color: #fff; font-weight: 700; }
.gcal-mini-d.has-ev:not(.is-today)::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
}

/* checklists (GCal "My calendars") */
.gcal-sec { margin-bottom: 14px; }
.gcal-sec-h {
  font: 600 11px var(--font-ui); color: var(--text-secondary); padding: 8px 4px;
}
.gcal-check {
  display: flex; align-items: center; gap: 10px; padding: 5px 8px 5px 6px; border-radius: 7px;
  cursor: pointer; font: 500 12.5px var(--font-ui); color: var(--text-secondary); user-select: none;
}
.gcal-check:hover { background: var(--bg-soft); }
.gcal-check input { display: none; }
.gcal-check span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcal-check em { font-style: normal; font: 500 10px var(--font-mono); color: var(--text-faint); }
.gcal-box {
  width: 16px; height: 16px; border-radius: 4px; flex: 0 0 16px;
  border: 2px solid var(--kbox, var(--text-muted)); position: relative; background: transparent;
}
.gcal-check input:checked + .gcal-box { background: var(--kbox, var(--text-muted)); }
.gcal-check input:checked + .gcal-box::after {
  content: ""; position: absolute; left: 3.5px; top: .5px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.gcal-check.k-payment    { --kbox: var(--k-payment); }
.gcal-check.k-delivery   { --kbox: var(--k-delivery); }
.gcal-check.k-notice     { --kbox: var(--k-notice); }
.gcal-check.k-obligation { --kbox: var(--k-obligation); }
.gcal-check.k-renewal    { --kbox: var(--k-renewal); }
.gcal-check.k-term       { --kbox: var(--k-term); }
.gcal-check.is-doc       { --kbox: var(--accent); }

/* main + toolbar */
.gcal-main { padding: 12px 20px 30px; min-width: 0; display: flex; flex-direction: column; }
.gcal-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.gcal-today {
  padding: 8px 18px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--bg-doc); cursor: pointer; font: 550 13px var(--font-ui); color: var(--text-primary);
}
.gcal-today:hover { background: var(--bg-soft); }
.gcal-toolbar .gcal-iconbtn { width: 32px; height: 32px; font-size: 17px; }
.gcal-title { margin: 0 8px; font: 450 21px var(--font-ui); color: var(--text-primary); letter-spacing: -.01em; flex: 0 0 auto; }
.gcal-search {
  margin-left: auto; width: 190px; padding: 7px 14px; border-radius: 18px;
  border: 1px solid transparent; background: var(--bg-soft);
  font: 500 12px var(--font-ui); color: var(--text-primary); outline: none;
}
.gcal-search:focus { background: var(--bg-doc); border-color: var(--border-hairline); box-shadow: var(--gshadow); }
.cal-select {
  padding: 7px 10px; border-radius: 9px; border: 1px solid var(--border-strong);
  background: var(--bg-doc); color: var(--text-primary); font: 500 12px var(--font-ui);
  max-width: 170px;
}
.gcal-view {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-radius: 9px; border: 1px solid var(--border-strong); background: var(--bg-doc);
  cursor: pointer; font: 550 13px var(--font-ui); color: var(--text-primary);
}
.gcal-view:hover { background: var(--bg-soft); }

/* month grid — GCal: hairline grid, day number circles, solid chips */
.gcal-canvas { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.gcal-whead { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--border-subtle); }
.gcal-whead span { text-align: center; font: 600 10px var(--font-ui); letter-spacing: .08em; color: var(--text-muted); padding: 4px 0 6px; }
.gcal-grid {
  flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(104px, 1fr);
  border-left: 1px solid var(--border-subtle);
  min-height: 560px;
}
.gcal-cell {
  border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
  padding: 4px 5px; display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden;
}
.gcal-cell.is-out .gcal-dnum { color: var(--text-faint); }
.gcal-cell.is-selday { background: var(--accent-soft); }
.gcal-dnum {
  align-self: flex-start; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 550 11.5px var(--font-ui); color: var(--text-secondary); margin-bottom: 1px;
}
.gcal-dnum.is-today { background: var(--accent); color: #fff; font-weight: 700; }
.gcal-chip {
  display: block; width: 100%; border: 0; cursor: pointer; text-align: left;
  border-radius: 5px; padding: 2.5px 8px; color: #fff;
  font: 550 11px var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--text-muted);
}
.gcal-chip:hover { filter: brightness(1.12); }
.gcal-chip.k-payment    { background: var(--k-payment); }
.gcal-chip.k-delivery   { background: var(--k-delivery); }
.gcal-chip.k-notice     { background: var(--k-notice); }
.gcal-chip.k-obligation { background: var(--k-obligation); }
.gcal-chip.k-renewal    { background: var(--k-renewal); }
.gcal-chip.k-term       { background: var(--k-term); }
.gcal-chip.is-ours { box-shadow: inset 3px 0 0 rgba(255, 255, 255, .75); }
.gcal-more {
  border: 0; background: none; cursor: pointer; text-align: left; padding: 1px 8px;
  font: 600 10.5px var(--font-ui); color: var(--text-muted); border-radius: 5px;
}
.gcal-more:hover { background: var(--bg-soft); color: var(--text-primary); }
.cal-daylist { display: flex; flex-direction: column; gap: 5px; }
.gcal-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); flex: 0 0 auto; display: inline-block; }
.gcal-dot.k-payment    { background: var(--k-payment); }
.gcal-dot.k-delivery   { background: var(--k-delivery); }
.gcal-dot.k-notice     { background: var(--k-notice); }
.gcal-dot.k-obligation { background: var(--k-obligation); }
.gcal-dot.k-renewal    { background: var(--k-renewal); }
.gcal-dot.k-term       { background: var(--k-term); }

/* schedule view */
.gcal-sched { overflow: auto; }
.gcal-sched-day {
  display: grid; grid-template-columns: 118px 1fr; gap: 12px; padding: 10px 4px;
  border-bottom: 1px solid var(--border-hairline);
}
.gcal-sched-day.is-today { background: var(--accent-soft); border-radius: 10px; }
.gcal-sched-date { display: flex; align-items: baseline; gap: 8px; padding-left: 8px; }
.gcal-sched-date b { font: 450 26px var(--font-ui); color: var(--text-primary); }
.gcal-sched-date span { font: 600 10px var(--font-ui); letter-spacing: .06em; color: var(--text-muted); }
.gcal-sched-evs { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gcal-sched-ev {
  display: flex; align-items: center; gap: 11px; border: 0; background: none; cursor: pointer;
  text-align: left; padding: 6px 10px; border-radius: 8px; min-width: 0;
}
.gcal-sched-ev:hover { background: var(--bg-soft); }
.gcal-sched-t { display: flex; flex-direction: column; min-width: 0; }
.gcal-sched-t b { font: 550 13px var(--font-ui); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcal-sched-t i { font: 500 11px var(--font-ui); font-style: normal; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcal-none { padding: 40px 20px; color: var(--text-muted); font: 500 13px var(--font-ui); }

/* timeline (kept, restyled to the new shell) */
.cal-tl { border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-doc); padding: 14px 16px 10px; overflow-x: auto; }
.cal-tl-ruler { position: relative; height: 20px; margin-left: 178px; border-bottom: 1px solid var(--border-hairline); margin-bottom: 8px; }
.cal-tick { position: absolute; top: 0; font: 500 9.5px var(--font-mono); color: var(--text-faint); transform: translateX(-50%); white-space: nowrap; }
.cal-tl-today { position: absolute; bottom: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); transform: translateX(-50%); }
.cal-tl-group { font: 600 10.5px var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: 10px 0 4px; }
.cal-tl-lane { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.cal-tl-name { width: 170px; flex: 0 0 170px; font: 550 11.5px var(--font-ui); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-tl-track { position: relative; flex: 1; height: 22px; min-width: 420px; }
.cal-tl-bar { position: absolute; top: 8px; height: 6px; border-radius: 4px; background: var(--accent-soft); border: 1px solid var(--border-subtle); }
.cal-tl-window {
  position: absolute; top: 5px; height: 12px; border-radius: 3px;
  background: repeating-linear-gradient(45deg, transparent 0 3px, rgba(180, 35, 24, .28) 3px 6px);
  border: 1px solid var(--k-renewal);
}
.cal-tl-dot {
  position: absolute; top: 6px; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--bg-doc); cursor: pointer; transform: translateX(-50%);
  background: var(--border-strong); padding: 0;
}
.cal-tl-dot:hover { transform: translateX(-50%) scale(1.35); }
.cal-tl-dot.k-payment { background: var(--k-payment); }
.cal-tl-dot.k-delivery { background: var(--k-delivery); }
.cal-tl-dot.k-notice { background: var(--k-notice); }
.cal-tl-dot.k-obligation { background: var(--k-obligation); }
.cal-tl-dot.k-renewal { background: var(--k-renewal); }
.cal-tl-dot.k-term { background: var(--k-term); }
.cal-tl-dot.is-ours { box-shadow: 0 0 0 2px var(--accent-soft); }
.cal-tl-today-line { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--accent); opacity: .5; }
.cal-tl-legend { display: flex; gap: 14px; margin: 10px 0 2px 178px; font: 500 10.5px var(--font-ui); color: var(--text-muted); flex-wrap: wrap; }
.cal-tl-legend span { display: inline-flex; gap: 5px; align-items: center; }

/* rules footer + modal list */
.gcal-rules {
  display: flex; align-items: center; gap: 10px; margin-top: 12px; width: 100%;
  border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--bg-doc);
  cursor: pointer; padding: 10px 14px; font: 550 12px var(--font-ui); color: var(--text-secondary);
  text-align: left;
}
.gcal-rules:hover { border-color: var(--accent); color: var(--text-primary); }
.gcal-rules i { font-style: normal; }
.gcal-rules span { margin-left: auto; color: var(--accent); font-weight: 650; }
.gcal-rules-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.gcal-rules-list li { display: flex; gap: 10px; align-items: flex-start; font: 500 12.5px var(--font-ui); color: var(--text-secondary); }
.gcal-rules-list .gcal-dot { margin-top: 4px; }
.gcal-rules-list em { font-style: normal; font: 600 11px var(--font-mono); color: var(--k-notice); margin-left: 6px; }
.gcal-rule-doc { display: block; font-style: normal; color: var(--text-faint); font-size: 11px; margin-top: 1px; }

/* event popover (rides the .menu shell) */
.cal-pop { max-width: 330px; padding: 4px 6px; }
.cal-pop-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cal-pop-kindname { font: 700 10px var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.cal-pop-title { font: 650 14px var(--font-ui); color: var(--text-primary); margin-bottom: 8px; line-height: 1.35; }
.cal-pop-row { display: flex; gap: 8px; font: 500 11.5px var(--font-ui); color: var(--text-secondary); padding: 2px 0; }
.cal-pop-row span { color: var(--text-faint); width: 58px; flex: 0 0 58px; }
.cal-pop-row b { font-weight: 600; }
.cal-pop-cons {
  margin: 8px 0 2px; padding: 7px 9px; border-radius: 7px; font: 550 11.5px var(--font-ui);
  background: var(--bg-active-red); color: var(--severity-critical);
}
.cal-pop-src { margin-top: 7px; font: 400 11px var(--font-doc); font-style: italic; color: var(--text-muted); line-height: 1.45; }
.cal-pop-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

@media (max-width: 1180px) {
  .gdrv { grid-template-columns: 210px minmax(0, 1fr); }
  .gdrv-info { display: none; }
}
@media (max-width: 900px) {
  .gdrv, .gcal { grid-template-columns: 1fr; }
  .gdrv-side, .gcal-side { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--border-subtle); }
  .gdrv-meter { display: none; }
  .gcal-mini { display: none; }
}

/* ============================================================
   Applied fixes — staleness notice + word-level redline diff
   ============================================================ */
.dd-stale {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  background: color-mix(in srgb, #d98324 12%, transparent);
  border: 1px solid color-mix(in srgb, #d98324 42%, transparent);
}
.dd-stale-ico { font-size: 15px; line-height: 1.3; opacity: .85; flex: none; }
.dd-stale b { font-weight: 650; }
.dd-stale-actions { margin-top: 9px; }

.dd-diff {
  margin-top: 12px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.dd-diff-head {
  padding: 7px 12px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .02em;
  text-transform: uppercase;
  opacity: .7;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.dd-diff-body {
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}
.dd-diff-body del {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  background: color-mix(in srgb, #c0392b 15%, transparent);
  color: color-mix(in srgb, #c0392b 82%, var(--ink));
  border-radius: 3px;
  padding: 0 2px;
}
.dd-diff-body ins {
  text-decoration: none;
  background: color-mix(in srgb, #2e8b57 18%, transparent);
  color: color-mix(in srgb, #2e8b57 82%, var(--ink));
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 550;
}
.dd-redline-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dd-redline-actions .dd-diff { flex-basis: 100%; }

/* Suggested fix — a recommendation card rather than a bare paragraph */
.dd-fix-card {
  padding: 13px 15px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-left-width: 3px;
}
.dd-fix-card .dd-prose + .dd-prose { margin-top: 9px; }
.dd-fix-target {
  margin: 11px 0 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  opacity: .62;
}

/* The working behind a money figure. A number a reader cannot trace to the
   clauses it came from discredits the finding around it, so the terms that
   were counted are shown as a small ledger rather than described in prose. */
.dd-working {
  width: 100%;
  margin: 10px 0 0;
  border-collapse: collapse;
  font-size: 12.5px;
  line-height: 1.45;
}
.dd-working td {
  padding: 5px 10px 5px 0;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: top;
}
.dd-working td:first-child {
  white-space: nowrap;
  font-weight: 600;
  color: var(--text-muted);
}
.dd-working-amt {
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dd-working-total td {
  border-bottom: none;
  border-top: 1px solid var(--border-strong, var(--border-subtle));
  font-weight: 600;
}

/* ============================================================
   WHAT IF — the merged page

   One column, three zones read top to bottom: what this is, the box you ask
   in, the answer. Everything that used to be chrome — the scrubber, the play
   button, the watches strip, the scenario dropdown — is gone, so the widths
   and rhythm here are the page's whole layout.

   It reuses the answer card (`.stress-verdict` and its `.sv-*` parts) and the
   ask box (`.stress-input*`) unchanged, so a scenario and a typed question
   render identically. Only the shell and the two browse lists are new.
============================================================ */

.wi-layout {
  max-width: 920px;
  margin: 0 auto;
  padding: 28px 36px 64px;
}
.wi-head { margin-bottom: 18px; }
.wi-head .stage-h1 { margin-top: 4px; }

/* --- the answer, when there is one -------------------------------- */

/* The engine's own framing of the run, under the one-line answer. Quieter
   than `.sv-answer` on purpose: the answer is the sentence above it. */
.sv-lede {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
.sv-list {
  margin: 6px 0 0;
  padding-left: 16px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}
.sv-list li { margin-bottom: 4px; }
.sv-list.is-notes { color: var(--text-faint); }

/* The clause cards keep their own styling; they only need a lane to sit in. */
.wi-clauses {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

/* --- browse: the questions, under the answer ---------------------- */

.wi-browse {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--border-hairline);
}
/* One column when there is no history yet, and when the pane is narrow. */
.wi-browse:has(.wi-col:only-child) { grid-template-columns: 1fr; }
.wi-browse.is-empty {
  display: block;
  text-align: center;
  padding-top: 34px;
}
.wi-empty-line {
  margin: 0 auto 14px;
  max-width: 460px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-muted);
}
.wi-col { min-width: 0; }
.wi-col-h {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.wi-scens { display: flex; flex-direction: column; gap: 6px; }
.wi-scen {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  text-align: left;
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  background: var(--bg-pane);
  color: var(--text-primary);
  font-size: 12.5px;
  line-height: 1.45;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.wi-scen:hover { border-color: var(--border-strong); background: var(--bg-soft); }
.wi-scen:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* The one currently answered above. It is not "selected" in a list sense —
   it is the question the page is showing — so it takes the mode accent. */
.wi-scen.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.wi-scen-q { flex: 1 1 auto; min-width: 0; }
.wi-scen-meta {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
}

.wi-hist { list-style: none; margin: 0; padding: 0; }
.wi-hist-q { flex: 1 1 auto; min-width: 0; }
/* Same three tones as the verdict pill, so a row and the answer it opens
   agree at a glance. */
.wi-hist-dot {
  flex: 0 0 auto;
  width: 7px; height: 7px;
  border-radius: 50%;
  transform: translateY(-1px);
  background: var(--text-faint);
}
.wi-hist-dot.is-safe   { background: var(--severity-success); }
.wi-hist-dot.is-unsafe { background: var(--severity-critical); }
.wi-hist-dot.is-warn   { background: var(--severity-medium); }
.wi-hist-dot.is-ask    { background: var(--severity-low); }

@media (max-width: 900px) {
  .wi-layout { padding: 22px 20px 56px; }
  .wi-browse { grid-template-columns: 1fr; gap: 22px; }
}
.wi-loading {
  padding: 22px 0;
  font-size: 12.5px;
  color: var(--text-faint);
}

/* Visible to a screen reader, to nothing else. `display:none` and
   `visibility:hidden` both remove it from the accessibility tree too, which is
   the one thing it exists for. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The answer a ready-made question got, on its card. It replaced a finding
   count that was the same number on every card. */
.wi-scen-verdict {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.wi-scen-verdict.is-safe   { color: var(--severity-success);  background: var(--bg-active-green); }
.wi-scen-verdict.is-unsafe { color: var(--severity-critical); background: var(--bg-active-red); }
.wi-scen-verdict.is-warn   { color: var(--severity-medium);   background: var(--bg-active-amber); }
.wi-scen-verdict.is-ask    { color: var(--severity-low);      background: color-mix(in srgb, var(--severity-low) 12%, transparent); }

/* An earlier question is a real button inside its list item, so the list stays
   a list and the row stays operable. */
.wi-hist li { display: block; padding: 0; border-bottom: 1px solid var(--border-hairline); }
.wi-hist li > button {
  display: flex;
  align-items: baseline;
  gap: 9px;
  width: 100%;
  padding: 8px 4px;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.wi-hist li > button:hover { color: var(--text-primary); }
.wi-hist li > button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.wi-hist-v {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}
.wi-hist-v.is-safe   { color: var(--severity-success); }
.wi-hist-v.is-unsafe { color: var(--severity-critical); }
.wi-hist-v.is-warn   { color: var(--severity-medium); }
.wi-hist-v.is-ask    { color: var(--severity-low); }

/* The question a scenario answers sits above its card, exactly as a typed
   one does. */
.wi-layout .stress-q { margin-top: 22px; }

/* Said once, because it is true of the whole list. */
.wi-col-note {
  margin: -4px 0 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}
.wi-col-note b { font-weight: 600; }
.wi-col-note.is-unsafe b { color: var(--severity-critical); }
.wi-col-note.is-safe b   { color: var(--severity-success); }
.wi-col-note.is-warn b   { color: var(--severity-medium); }
.wi-col-note.is-ask b    { color: var(--severity-low); }

/* The build the server is running, in the Settings footer. Quiet: it is a
   fact to check, not a control. */
.set-build {
  font-size: 11.5px;
  color: var(--text-faint);
}
.set-build b {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--text-muted);
}

/* ===== Draft: Preview / Edit ============================================ */
/* The segmented switch in the Draft mode bar. Preview is the resting state
   of an uploaded contract — a page to READ — so the switch reads as a state
   indicator first and a control second. */
.draft-mode-toggle {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-sunken);
}
.dmt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 550;
  color: var(--text-muted);
  cursor: pointer;
}
.dmt-btn:hover { color: var(--text-primary); }
.dmt-btn.is-active {
  background: var(--bg-pane);
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}
.dmt-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* Reading polish: without the hover chrome the blocks need no reserved
   gutter affordances; give the text a touch more room to breathe. */
.parsed-doc.is-preview .pb { cursor: default; }
.parsed-doc.is-preview .pb:hover { background: none; }
.parsed-doc.is-preview .pb-body { cursor: text; }
.parsed-doc.is-preview .pb-num[data-edit-number] { cursor: default; }

/* ===== Two-way clause linking: the way back ============================= */
/* Floating return pill on the Draft page after a citation jump. Bottom
   center: the run panel owns bottom-right, the library owns the left. */
.draft-return-pill {
  position: fixed;
  bottom: 26px;
  left: calc(var(--rail-w) + var(--library-w) + (100vw - var(--rail-w) - var(--library-w)) / 2);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border-subtle));
  border-radius: 999px;
  background: var(--bg-pane);
  color: var(--accent-ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 550;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
  cursor: pointer;
  z-index: 40;
  animation: pillRise .22s cubic-bezier(.4, 0, .2, 1);
}
.draft-return-pill:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.draft-return-pill:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@keyframes pillRise {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .draft-return-pill { animation: none; }
}

/* Clause citations on finding cards are LINKS now — they carry the same
   look they had as text, plus the affordance the click deserves. */
button.ic-ref.is-link {
  border: 0;
  background: var(--bg-soft);
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
button.ic-ref.is-link:hover {
  color: var(--accent-ink);
  background: var(--accent-soft);
}
button.ic-ref.is-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.dd-ev-link {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.dd-ev-link:hover { color: var(--accent-ink); text-decoration: underline; }
.dd-ev-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }


/* ===== Settings: Team (the company admin's mini-page) =================== */
.set-team-loading, .set-team-error, .set-team-empty {
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 8px 2px;
}
.set-team-error { color: var(--severity-critical); }
.set-team-pool {
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--bg-pane);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.set-team-pool.is-legacy { display: flex; flex-direction: column; gap: 3px; }
.stp-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; }
.stp-k { font-weight: 600; color: var(--text-primary); }
.stp-v b { font-size: 15px; }
.stp-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.stp-bar {
  height: 4px; border-radius: 999px; background: var(--border-subtle);
  overflow: hidden; margin-top: 8px;
}
.stp-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.set-team-list { display: flex; flex-direction: column; }
.set-team-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 2px;
  border-bottom: 1px solid var(--border-hairline);
}
.set-team-row:last-child { border-bottom: 0; }
.set-team-row.is-off .str-who { opacity: .45; }
.str-name { font-size: 13px; font-weight: 550; color: var(--text-primary); display: block; }
.str-user { font-size: 11px; color: var(--text-faint); }
.str-credits { display: inline-flex; align-items: baseline; gap: 4px; font-size: 12.5px; }
.str-used { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.str-of { color: var(--text-faint); }
.str-alloc {
  width: 72px;
  padding: 3px 7px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: var(--bg-doc);
  color: var(--text-primary);
  font: inherit;
  font-size: 12.5px;
  text-align: right;
}
.str-allocro { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.str-managed { font-size: 11px; color: var(--text-faint); font-style: italic; }
.set-team-add {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.set-team-add #teamAddBtn { grid-column: 1 / -1; justify-self: start; }


/* run panel rows carry a live figure beside the active phase */
.rpn-phases li { display: flex; align-items: center; gap: 7px; }
.rpn-ph-label { flex: 1 1 auto; min-width: 0; }
.rpn-ph-sub {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.rpn-phases li.is-active .rpn-ph-sub { color: var(--accent-ink); }


/* ===== Admin console: the Overview dashboard ============================ */
.adm-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}
.adm-chart-card {
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--bg-pane);
  padding: 12px 14px 10px;
  min-width: 0;
}
.adm-chart-card.is-wide { grid-column: 1 / -1; }
.adm-chart-box { position: relative; height: 210px; }
.adm-chart-card.is-wide .adm-chart-box { height: 240px; }
@media (max-width: 900px) { .adm-charts { grid-template-columns: 1fr; } }

.adm-attn { display: flex; flex-direction: column; gap: 6px; }
.adm-attn-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-pane);
  font-size: 12.5px;
  cursor: default;
}
.adm-attn-row[data-user] { cursor: pointer; }
.adm-attn-row[data-user]:hover { border-color: var(--border-strong); }
.adm-attn-row > i {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
}
.adm-attn-row.is-blocked > i { background: var(--severity-critical); }
.adm-attn-row.is-near > i { background: var(--severity-medium); }
.adm-attn-row > span { flex: 1 1 auto; min-width: 0; }

.adm-health {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.adm-health b { color: var(--severity-medium); }
.adm-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
}
.adm-dot.on { background: var(--severity-success); }

/* the third role's badge (users table renders `adm-badge ${role}`) */
.adm-badge.company_admin { background: var(--bg-active-blue, #dde7f6); color: var(--brand-blue, #315f9f); }

/* ============================================================
   Midnight — the parts the Landing's dark demos paint differently
   The Midnight tokens are the Landing's, value for value, but a token only
   decides a colour where a rule asks for it. The rules below are where the
   page hard-codes a colour the demos take from the palette, or picks another
   token than the demo does for the same part. They are scoped to Midnight
   and they sit last, so every one of them wins over the rule it corrects.
   Where the demo's choice would read WORSE than the page's (the proven
   pill's green, the report quote's ink), the page keeps its own.
============================================================ */

/* Selected text: the root pairs a pale blue ground with `--brand-navy`, which
   is the light periwinkle here — 1.71:1. */
.app[data-theme="midnight"] ::selection,
body[data-theme="midnight"] > :is(.run-panel, .settings-pop, .menu, .parsed-save-indicator,
  .pb-type-menu, .pb-block-picker, .pb-bubble, .pb-classify-menu, .demo-cursor) ::selection {
  background: rgba(142, 160, 255, .32);
  color: var(--text-primary);
}

/* The rail is the demo's darkest surface (`.sd-rail` is --bg-page). */
.app[data-theme="midnight"] .rail { background: var(--bg-page); }

/* An opened finding is outlined in the page accent, as `.sd-card.sd-open`
   is — the card and the inline detail under it, which read as one piece. */
.app[data-theme="midnight"] .issues-grid .issue-card.is-selected,
.app[data-theme="midnight"] .detect-detail { border-color: var(--accent); }

/* Clause citations sit on the sunken ground `.sd-ref` uses; the hover keeps
   its accent tint. */
.app[data-theme="midnight"] button.ic-ref.is-link:not(:hover) { background: var(--bg-sunken); }

/* Confidence and the analytics greens were fixed parchment hexes (#1d7a4c at
   3.54:1, #1a7f4b at 3.76:1); the demo's "ok" is `--sev-ok`. */
.app[data-theme="midnight"] .dd-conf.is-high { color: var(--severity-success); }
.app[data-theme="midnight"] .dd-conf.is-medium,
.app[data-theme="midnight"] .conf-head.is-low { color: var(--severity-medium); }
.app[data-theme="midnight"] .sg-a .ab-grade,
.app[data-theme="midnight"] .stab-hero.sg-a .stab-hero-grade {
  background: color-mix(in srgb, var(--severity-success) 18%, transparent);
  color: var(--severity-success);
}
.app[data-theme="midnight"] .rl-tier.is-verified {
  background: color-mix(in srgb, var(--severity-success) 16%, transparent);
  color: var(--severity-success);
}
.app[data-theme="midnight"] .eq-gain.is-neg,
.app[data-theme="midnight"] .ko-group-head.ko-protective,
.app[data-theme="midnight"] .rl-ev-after { color: var(--severity-success); }
.app[data-theme="midnight"] .ko-role.ko-protective {
  background: color-mix(in srgb, var(--severity-success) 12%, transparent);
  color: var(--severity-success);
}

/* What-if: the "applied" clause tag in Simulate's blue is 4.2:1 on its own
   tint; the periwinkle reads. The conflict tag keeps its red. */
.app[data-theme="midnight"][data-mode="whatif"] .scc-tag:not(.is-conflict) { color: var(--brand-navy); }

/* The ready-made question on show already wears the accent tint; its verdict
   pill's own tint on top of it took "Not covered" under AA. */
.app[data-theme="midnight"] .wi-scen.is-active .wi-scen-verdict { background: transparent; }

/* Report · the "Watch" step tag: the inverse ink is dark here, and dark on
   --text-faint is 3.29:1. Blocking and Soon keep their own fills. */
.app[data-theme="midnight"] .is-monitor .msg-tag { background: var(--text-muted); }

/* Report · the quote sits on the page ground under an accent rule, as
   `.sd-quote` does. Its ink stays --text-primary: the demo's secondary grey
   would read at 10:1 where this reads at 17:1. */
.app[data-theme="midnight"] .rc-quote blockquote {
  background: var(--bg-page);
  border-left-color: var(--accent);
}

/* Report · the hero is the demo's memo card (`.sd-doc`): the document surface
   and its border, the accent eyebrow, the muted meta. Every value in the base
   hero is white on a fixed verdict gradient; here the verdict is a 3px rule
   in its severity colour, and a report with nothing flagged (or no verdict)
   gets a neutral one. */
.app[data-theme="midnight"] .rpt-hero {
  background: var(--bg-doc);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-strong);
  color: var(--text-primary);
}
.app[data-theme="midnight"] .rpt-hero.risk-severe { border-left-color: var(--severity-critical); }
.app[data-theme="midnight"] .rpt-hero.risk-high   { border-left-color: var(--severity-high); }
.app[data-theme="midnight"] .rpt-hero.risk-medium { border-left-color: var(--severity-medium); }
/* Low and clear are the good news: the base hero paints both green, so the
   rule does too, in the demo's --sev-ok. */
.app[data-theme="midnight"] .rpt-hero.risk-low,
.app[data-theme="midnight"] .rpt-hero.risk-clear  { border-left-color: var(--severity-success); }
.app[data-theme="midnight"] .rpt-hero .rpt-eyebrow { color: var(--accent); opacity: 1; }
.app[data-theme="midnight"] .rpt-hero .rpt-doc { color: var(--text-muted); opacity: 1; }
.app[data-theme="midnight"] .rpt-hero-verdict h1 { color: var(--text-primary); }
.app[data-theme="midnight"] .rpt-hero-verdict p { color: var(--text-secondary); opacity: 1; }
.app[data-theme="midnight"] .rpt-tile {
  background: var(--bg-soft);
  border-color: var(--border-hairline);
  backdrop-filter: none;
}
.app[data-theme="midnight"] .rpt-tile.hot { background: var(--bg-soft2); border-color: var(--border-subtle); }
.app[data-theme="midnight"] .rpt-tile b { color: var(--text-primary); }
.app[data-theme="midnight"] .rpt-tile span { color: var(--text-muted); opacity: 1; }
.app[data-theme="midnight"] .rpt-sevbar .seg.sev-critical { background: var(--severity-critical); }
.app[data-theme="midnight"] .rpt-sevbar .seg.sev-high     { background: var(--severity-high); }
.app[data-theme="midnight"] .rpt-sevbar .seg.sev-medium   { background: var(--severity-medium); }
.app[data-theme="midnight"] .rpt-sevbar .seg.sev-low      { background: var(--severity-low); }
/* ...and the document-type row inside it, which was white-on-translucent for
   the gradient. */
.app[data-theme="midnight"] .rpt-doctype { border-top-color: var(--border-hairline); }
.app[data-theme="midnight"] .rpt-dt-k { color: var(--text-muted); opacity: 1; }
.app[data-theme="midnight"] .rpt-dt-conf,
.app[data-theme="midnight"] .rpt-dt-src {
  background: var(--bg-soft2);
  border-color: var(--border-subtle);
  color: var(--text-secondary);
}
.app[data-theme="midnight"] .rpt-dt-conf.is-low { opacity: 1; }
.app[data-theme="midnight"] .rpt-dt-conf.is-high { color: var(--text-primary); }
.app[data-theme="midnight"] .rpt-dt-note { color: var(--text-secondary); opacity: 1; }
.app[data-theme="midnight"] .rpt-dt-ctl select {
  border-color: var(--border-strong);
  background: var(--bg-soft);
  color: var(--text-primary);
}
.app[data-theme="midnight"] .rpt-dt-ctl .rpt-tool {
  background: var(--bg-soft);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.app[data-theme="midnight"] .rpt-dt-ctl .rpt-tool:hover:not(:disabled) { background: var(--bg-soft2); color: var(--text-primary); }