/* ============================================================
   Sentinel — Contract Intelligence Engine
   Rail · Library · Main grid. Five modes. Deterministic vibe.
============================================================ */
/* THE TOKENS LIVE IN v2/tokens.css (design system v2). It is GENERATED by tools/ui/gen-tokens.mjs: all nine themes
   computed in OKLCH, System (Parchment, or Midnight under prefers-color-scheme: dark), High contrast, and every name
   below aliased onto the new ones (--text-muted -> --ink-3, --accent -> --brand ...) on every theme root, so the
   rules in this file follow without a change. tests/v2-tokens.mjs checks every text pair at 4.5:1 and the brand,
   focus and control outline at 3:1 in every theme.
   The :root block here is only the PARCHMENT FALLBACK for a page that loads this file without v2/tokens.css (the
   admin console until it links the tokens): the same values the generator writes for Parchment. */
: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: rgba(161, 74, 7, 0.1);
  --bg-active-red:   rgba(159, 18, 57, 0.1);
  --bg-active-green: rgba(17, 113, 53, 0.1);
  --bg-active-blue:  rgba(26, 47, 230, 0.08);
  --bg-active-violet:rgba(109, 40, 217, 0.1);

  /* text: --text-muted reads at >= 4.5:1 on every surface; --text-faint is decoration and disabled only */
  --text-primary:   #1a2330;
  /* `--ink` is the ink colour the defect-detail and diff styles were written
     against; it follows the theme (v2/tokens.css aliases it on every theme
     root, and `.app` below re-declares it where the themes write). */
  --ink:            var(--text-primary);
  --text-secondary: #4a515e;
  --text-muted:     #59626e;
  --text-faint:     #858d98;
  --text-inverse:   #ffffff;
  /* The light that sweeps across a bar while it works. A highlight is white
     in every theme, so it has its own token. */
  --shimmer:        #ffffff;

  /* borders */
  --border-subtle:    #e6e0d2;
  --border-hairline:  #ede6d6;
  --border-strong:    #c7c0b1;

  /* ONE BRAND COLOUR for every page (the Landing's cobalt); the old names point at it */
  --brand-navy:        #1a2fe6;
  --brand-navy-hover:  #1424b8;
  --brand-blue:        #1a2fe6;
  --brand-blue-soft:   rgba(26, 47, 230, 0.08);
  --accent-ink:        #1a2fe6;

  /* severity: Critical crimson and High rust clearly apart; orange and red mean RISK only */
  --severity-critical: #9f1239;
  --severity-high:     #b03c0e;
  --severity-medium:   #8f5603;
  --severity-low:      #5b6470;
  --severity-success:  #117135;

  /* THE PAGE ACCENTS ARE GONE. Draft olive, Detect orange, What-if blue,
     Report navy and Docs teal are all the brand now: a page keeps its
     identity through its icon and its title. The names stay (rules use
     them) and v2/tokens.css aliases each one to --brand. */
  --mode-detect:   #1a2fe6;
  --mode-simulate: #1a2fe6;
  --mode-stress:   #1a2fe6;
  --mode-draft:    #1a2fe6;
  --mode-report:   #1a2fe6;
  --mode-docs:     #1a2fe6;

  --focus: #1a2fe6;

  /* 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;
  /* the library's width: its default, and the reader's own (app.js applyLibraryWidth sets --library-w on #app, from the default
     up to half again as much); a narrow screen's drawer keeps its own width whatever the reader chose */
  --library-w-default: 256px;
  --library-w: var(--library-w-default);
  --modebar-h: 52px;

  /* the accent is the brand on every page (v2/tokens.css re-declares both on every theme root) */
  --accent: var(--brand-navy);
  --accent-soft: var(--brand-blue-soft);
}

/* ============================================================
   Themes — switch on .app[data-theme="..."] (and <body>, <html>)
   Every theme's values are in v2/tokens.css: Parchment (the default),
   Paper, Slate, Sage, Sand, Lavender, Graphite, Midnight (the Landing's
   dark interface), Eclipse (neutral dark), plus System and High contrast.
   <body> carries the theme itself, so the panels appended to it (the run
   panel, the menus, the popovers, the save indicator, the Draft editor's
   pickers) and the sign-in screen inherit it; no panel list is needed.
============================================================ */

/* `--ink` must be declared HERE, on the same element the themes write
   `--text-primary` to, not on `:root`: a custom property is substituted where
   it is DECLARED. THE TEXT COLOUR, FOR THE SAME REASON: `body`'s colour
   resolves on <body>; `.app` re-states it so every element that sets no colour
   of its own takes the theme's ink. */
.app { --ink: var(--text-primary); color: var(--text-primary); }

/* 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: var(--fs-micro, 11px);
  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
============================================================ */
/* THE COLUMN IS NOT TRANSITIONED. Animating `grid-template-columns` laid the
   whole page out again on every frame of a fold (CLS 0.24 a fold, the text
   re-wrapping, the library squeezed). The fold is one change inside a view
   transition (setLibrary, `html[data-vt="lib"]`): the panel, the page and the
   handle glide as pictures, and without view transitions it is instant. */
.app {
  display: grid;
  grid-template-columns: var(--rail-w) var(--library-w) 1fr;
  grid-template-rows: 100vh;
  height: 100vh;
}
.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;
}
/* the pictures of the panel and the page are drawn at their own size, clipped
   as the column moves, never stretched or squeezed with it */
::view-transition-old(ml-lib),
::view-transition-new(ml-lib),
::view-transition-old(ml-main),
::view-transition-new(ml-main) {
  height: 100%;
  object-fit: none;
  object-position: left top;
}

/* 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 var(--ml-dur-xs) var(--ml-ease-out), background var(--ml-dur-xs) var(--ml-ease-out);
}
.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; }

/* DOCS, A PAGE OF THE APP (the owner, 2026-10-13: the Docs page "feels completely separate ... the whole app kinda reloads"). Its
   root (.dx, clm.js) takes the library's and the page's columns while the rail stays; its own side nav is as wide as the library
   (--library-w, the reader's width too). Every other page leaves it out of the layout. */
.app:not([data-mode="docs"]) > .dx { display: none !important; }
.app[data-mode="docs"] > .dx { grid-column: 2 / -1; grid-row: 1; min-width: 0; }
.app[data-mode="docs"] > .library,
.app[data-mode="docs"] > .main,
.app[data-mode="docs"] > .lib-collapse,
.app[data-mode="docs"] > .lib-reopen,
.app[data-mode="docs"] > .lib-scrim { display: none !important; }
.app[data-mode="docs"].is-lib-closed .lib-resize { display: block; }   /* Docs' nav has no fold: its edge widens it whatever the library does */
@media (max-width: 1100px) {
  .app[data-mode="docs"] .lib-resize { display: none; }
}

/* THE PANEL'S EDGE IS A HANDLE (the owner, 2026-10-13): dragged, it widens the library when a file's name is cut - from its default
   width up to half again as much - and the width stays as the reader left it (app.js wireLibraryResize). Under the collapse tab,
   which keeps its own click. */
.lib-resize {
  position: fixed;
  top: 0;
  bottom: 0;
  left: calc(var(--rail-w) + var(--library-w) - 3px);
  z-index: 17;
  width: 7px;
  cursor: col-resize;
  touch-action: none;
  outline: none;
}
.lib-resize::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2px;
  width: 2px;
  background: transparent;
  transition: background var(--ml-dur-xs) var(--ml-ease-out);
}
.lib-resize:hover::after,
.lib-resize:focus-visible::after,
.app.is-lib-resizing .lib-resize::after { background: var(--accent); }
.app.is-lib-closed .lib-resize { display: none; }
.app.is-lib-resizing { cursor: col-resize; user-select: none; }
.app.is-lib-resizing * { cursor: col-resize !important; }
@media (max-width: 980px) {
  .lib-resize { display: none; }
}

/* ============================================================
   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: var(--fs-micro, 11px);
  font-weight: 600;
  letter-spacing: 0;
  /* "WHAT IF" is one line like every other label (it wrapped to two in the 34px box, a button taller than the rest) */
  white-space: nowrap;
}
.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: var(--fs-micro, 11px);
  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: var(--fs-micro, 11px);
  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: var(--fs-micro, 11px);
  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: var(--fs-micro, 11px);
  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: var(--fs-micro, 11px);
  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: var(--fs-micro, 11px);
  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: var(--fs-micro, 11px);
  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; }

/* THE LEGAL LINKS (WS11-T02): quiet, under the library footer, on every page
   of the signed-in product. Text links, not buttons: each opens a published
   page in a new tab and none of them asks the reader for anything. */
.lib-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  padding: 0 18px 10px;
  font-size: var(--fs-micro, 11px);
  line-height: 1.5;
}
.lib-legal a { color: var(--text-faint); text-decoration: none; }
.lib-legal a:hover, .lib-legal a:focus-visible { color: var(--accent); text-decoration: underline; }
/* the admin console is a plain document: the links sit under it, centred */
.adm-legal { justify-content: center; max-width: 1400px; margin: 0 auto; padding: 0 28px 28px; font-size: 11px; }
/* the "not legal advice" line under the Report masthead and in the redline
   drawer (WS11-T02) — the exports carry the same in their trailing block */
.rpt-hero-advice { margin: 6px 0 0; font-size: 11.5px; opacity: .82; }
/* a priced headline over cards that carry no exposure of their own (WS11-T03) */
.rpt-hero-note { margin: 10px 0 0; font-size: 12px; opacity: .88; }
.dd-redline-advice { margin: 10px 0 0; font-size: 11px; color: var(--text-muted); }

/* 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: var(--fs-micro, 11px);
  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: var(--fs-micro, 11px);
  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 DOCUMENT'S NAME IS NOT WHAT GIVES WAY (owner decision N6). Between the
   phone bar and a wide desk (981-1100px with the panel docked, and Draft's
   long action row even at 1440) the actions never shrank, so the title and
   the meta took all of the squeeze: Detect at 1024 showed "r." of its
   document. The meta (it repeats the page's own stat strip) now gives way
   first, the title last, and the action row scrolls sideways inside itself
   when it still does not fit. Where everything fits nothing moves. The
   padding/margin pair only keeps a focused button's outline unclipped. */
@media (min-width: 761px) {
  .mb-title { flex-shrink: 0.25; }
  .mb-meta { flex-shrink: 6; }
  .mb-actions {
    flex: 0 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding: 4px;
    margin: -4px;
  }
  .mb-actions::-webkit-scrollbar { display: none; }
  .mb-actions > * { 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: var(--fs-micro, 11px);
  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: var(--fs-micro, 11px); 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); }
/* A BADGE THAT STATES A STATE, NOT A FIGURE (WS11-T01): "Not priced",
   "No amounts stated", "Not assessed". Quieter than a figure, and still a
   button — it opens the modal that says why. */
.analytics-badge.is-state { border-style: dashed; }
.analytics-badge.is-state .ab-v { font-weight: 500; color: var(--text-secondary); }
.analytics-badge.is-state.risk svg { color: var(--text-muted); }
.analytics-badge .ab-note { font-size: var(--fs-micro, 11px); color: var(--text-muted); }
.money-state-modal .dd-note { margin: 0; }

/* 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: var(--fs-micro, 11px); 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: var(--fs-micro, 11px); 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; }
/* the document's status beside the version in the library (a draft until marked signed) */
.lib-signed { color: var(--text); font-weight: 600; }
.memo-status { margin-bottom: 12px; }
/* the points the review checked and set aside (renderCheckedList) */
.rpt-setaside { margin: 18px 0 6px; font-size: 13px; border-top: 1px solid var(--border-subtle); padding-top: 10px; }
.rpt-setaside summary { cursor: pointer; color: var(--text-muted); padding: 4px 0; }
.rpt-setaside-note { color: var(--text-muted); margin: 6px 0 8px; }
.rpt-setaside ul { list-style: none; margin: 0; padding: 0; }
.rpt-setaside li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 40%); gap: 2px 12px; padding: 7px 0; border-bottom: 1px dashed var(--border-hairline); }
.rpt-setaside-title { color: var(--text); }
.rpt-setaside-where { color: var(--text-muted); font-size: 12px; text-align: right; overflow-wrap: anywhere; }
.rpt-setaside-why { grid-column: 1 / -1; color: var(--text-muted); 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: var(--fs-micro, 11px);
  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: var(--fs-micro, 11px); 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: var(--fs-micro, 11px); 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: var(--fs-micro, 11px); 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: var(--fs-micro, 11px); 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: var(--fs-micro, 11px);
}
.dd-reg-tag.is-stale .drt-v { color: var(--text-muted); font-weight: 650; }
/* THE SAME TAG ON THE REPORT'S "In plain terms" AND ON A DETECT LIST LINE (2026-10-14): a line still in the level the cards were
   written in before - "Simple — rewriting to Plain English" while the new wording is written. Muted and dashed, as above. */
.rc-reg-tag, .ic-reg-tag {
  display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 999px;
  border: 1px dashed var(--border-subtle); color: var(--text-faint);
  font-size: var(--fs-micro, 11px); font-weight: 550; letter-spacing: 0; text-transform: none; vertical-align: 1px;
  font-family: var(--font-ui, inherit); line-height: 1.6; white-space: nowrap;
}
.rc-reg-tag .drt-v, .ic-reg-tag .drt-v { color: var(--text-muted); font-weight: 650; }
.rc-reg-tag.is-rewriting, .ic-reg-tag.is-rewriting { border-style: dotted; }
.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: var(--fs-micro, 11px); color: var(--text-muted); white-space: nowrap;
}
.dd-tl-flag {
  flex: none; align-self: center;
  font-size: var(--fs-micro, 11px); 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;
}
/* A clause and its sub-clauses, one per line as the editor shows them; the sub-clause the finding is about is lit (the owner,
   2026-10-12). `--d` is the line's depth under the clause. */
.dd-ev-text.dd-ev-lines { padding: 9px 13px; }
.dd-lines, .dd-prose-lines { display: flex; flex-direction: column; gap: 3px; }
.dd-line { display: flex; gap: 8px; align-items: baseline; padding: 3px 6px; margin-left: calc(var(--d, 0) * 16px); border-radius: 5px; }
.dd-line.is-head { margin-left: 0; color: var(--text-primary); }
.dd-line-n { flex: none; min-width: 2.4em; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }
.dd-line-t { min-width: 0; }
.dd-line.is-cited { background: var(--accent-soft, rgba(196, 92, 38, .10)); box-shadow: inset 2px 0 0 var(--accent); color: var(--text-primary); }
.dd-line.is-cited .dd-line-n { color: var(--accent); font-weight: 600; }
.dd-prose-lines {
  margin: 8px 0; padding: 8px 10px; border-left: 3px solid var(--border-strong); background: var(--bg-pane);
  border-radius: 0 7px 7px 0; font-family: var(--font-doc); font-size: 13.5px; line-height: 1.55; color: var(--text-secondary);
}
div.dd-prose { margin: 0 0 10px; }
/* The tier badge that waits on a reader (a "Verified" tier at medium confidence): the medium tone, never the verified one. */
.dd-deg.is-check, .ic-deg.is-check { color: var(--severity-medium, #b7791f); background: color-mix(in srgb, var(--severity-medium, #b7791f) 12%, transparent); }
.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: var(--fs-micro, 11px); 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: var(--fs-micro, 11px); 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: var(--fs-micro, 11px); 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: var(--fs-micro, 11px); 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); }
/* a run that did not finish (refused, failed, stopped by its reader), over the report it left */
.whatchanged.is-failed { border-left-color: var(--severity-high); }
.whatchanged.is-failed .wc-icon { color: var(--severity-high); }
.whatchanged.is-failed .wc-why { color: var(--text-primary); }
.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: var(--fs-micro, 11px); 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: var(--fs-micro, 11px); 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; }
/* a gap between the label and the figure: a long balance ran into the words ("You have9999998.2 credits") */
.ce-cred-row { display: flex; justify-content: space-between; gap: 12px; 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; }
/* the quote's notes, redrawn when another depth is quoted: they stay items of the dialog's own column */
.ce-notes { display: contents; }
/* the depth: Standard | Deep, each its own quote */
.ce-tier { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ce-tier-opts { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-pane); border: 1px solid var(--border-hairline); border-radius: 9px; }
.ce-seg { font: inherit; font-size: 12.5px; font-weight: 550; min-height: 28px; padding: 4px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--text-secondary); cursor: pointer; }
.ce-seg:hover:not(:disabled) { color: var(--text-primary); }
.ce-seg.is-on { background: var(--bg-doc); color: var(--text-primary); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 .5px var(--border-subtle); }
.ce-seg:disabled { cursor: default; opacity: .7; }
.ce-seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 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); } }


/* ===== 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; }

/* 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 var(--ml-dur-xs) var(--ml-ease-out), color var(--ml-dur-xs), border-color var(--ml-dur-xs); }
.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: var(--fs-micro, 11px); 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); }
/* what Jev read of a drafted redline against the whole contract */
.dd-redline-check { font-size: 12px; line-height: 1.5; margin: 8px 0 0; padding: 6px 10px; border-left: 3px solid var(--border-subtle); color: var(--text-secondary); }
.dd-redline-check.is-ok { border-left-color: #1a7f4b; }
.dd-redline-check.is-warn { border-left-color: #b8860b; }
.dd-redline-check-p { font-variant-numeric: tabular-nums; 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).
   With the motion layer the open AND the close are the list patch's own glide
   (app.js `detectMorph`); `dd-anim` is the fallback for a page without it. */
.issue-detail-li.dd-anim { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--ml-dur-lg, .3s) var(--ml-ease-out, ease), opacity var(--ml-dur-md, .26s) var(--ml-ease-out, ease); }
.issue-detail-li.dd-anim > * { overflow: hidden; min-height: 0; }
.issue-detail-li.dd-anim.dd-open { grid-template-rows: 1fr; opacity: 1; }

/* #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); }
/* N5 — a report still on its way is not "never analysed": until it lands the
   date stamp, the counts and the status are placeholders of their own size,
   never "not yet analyzed", "0" or "not yet run". */
.sk.sk-inline { display: inline-block; width: 8.5em; height: .85em; margin: 0; vertical-align: -1px; }
.sev-chip.is-loading .sc-num,
.pill-tab.is-loading .pt-count,
.dc-status.is-loading {
  color: transparent; border-radius: 4px;
  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-title { height: 16px; width: 46%; margin-bottom: 14px; }
.detect-skeleton { padding: 4px 0; }


/* 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; }

/* The analysis run's loom, dock and landing (once the minimap overlay and the
   corner run panel): interface/v2/run.css. */

@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; }
/* `text-align: left`: the card is a <button>, and a button centres its text by
   default, so a clause's 150 words wrapped as a centred block on the what-if
   answer (3.12 page sweep, l2_answer_expanded_s4). */
.sim-clause-card {
  border: 1px solid var(--border-hairline);
  background: var(--bg-app);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  text-align: left;
  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: var(--fs-micro, 11px);
  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;
}
/* `min-width: 0`: a text input's automatic minimum is its intrinsic width
   (about 184px), so in a narrow card the box would not shrink and pushed Run
   out past the card and the screen's edge. */
.stress-input input {
  flex: 1 1 auto;
  min-width: 0;
  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: var(--fs-micro, 11px); 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:empty { display: none; }
.sr-step-label { display: block; color: var(--text-primary); }
.sr-step-obs { display: block; color: var(--text-secondary); font-size: 11.5px; line-height: 16px; }
.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: var(--fs-micro, 11px); 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: var(--fs-micro, 11px); 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: var(--fs-micro, 11px); font-weight: 700;
  color: var(--text-faint);
}
.sv-tl-day { font-family: var(--font-mono); font-size: var(--fs-micro, 11px); color: var(--text-muted); white-space: nowrap; }
.sv-tl-flag {
  font-size: var(--fs-micro, 11px); 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: var(--fs-micro, 11px); 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: var(--fs-micro, 11px); 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: var(--fs-micro, 11px); 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: var(--fs-micro, 11px); 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; }

/* ---- the what-if answer, version 2 ----------------------------------------
   The engine plays a question on the contract's calendar now, so the card has
   a dated timeline, a ledger, an end state and each side's options. Every
   piece below reuses the card's own scale - the section heading, the 13px
   row text, the mono 10.5px for dates and figures, the hairline borders - so
   the new sections read as part of the card rather than beside it. */

/* "Read for <party>" under the ruling's sentence. */
.sv-readfor { margin: 6px 0 0; font-size: 11.5px; color: var(--text-muted); }
.sv-readfor b { font-weight: 600; color: var(--text-secondary); }

/* THE DATED TIMELINE. A third column on the left carries the date, on the
   first row of each day only, so a day reads as one block. */
.sv-tl-dated li { grid-template-columns: 92px 16px minmax(0, 1fr); }
.sv-tl-when { display: flex; flex-direction: column; gap: 1px; padding-top: 2px; min-width: 0; }
.sv-tl-date {
  font-family: var(--font-mono); font-size: var(--fs-micro, 11px); font-weight: 600;
  color: var(--text-secondary); white-space: nowrap;
}
.sv-tl-dayn { font-family: var(--font-mono); font-size: var(--fs-micro, 11px); color: var(--text-faint); white-space: nowrap; }
/* Time passing between two days: a dashed dot and the count, quieter than a row. */
.sv-tl-dated li.sv-tl-gap { padding-bottom: 10px; }
.sv-tl-gap .sv-tl-dot { background: transparent; border: 1.5px dashed var(--border-strong); width: 7px; height: 7px; margin-top: 3px; }
.sv-tl-gap-t { font-family: var(--font-mono); font-size: var(--fs-micro, 11px); color: var(--text-faint); }
/* A chip that marks a kind without alarm: a payment, a notice, a waiting clause. */
.sv-tl-flag.is-quiet { color: var(--text-secondary); background: color-mix(in srgb, var(--text-muted) 12%, transparent); }
.sv-tl-amt { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
/* The same happening twice in a day, folded into one row and counted. */
.sv-tl-times { font-family: var(--font-mono); font-size: var(--fs-micro, 11px); font-weight: 600; color: var(--text-muted); }
.sv-tl-cause { font-size: 11.5px; }
.sv-tl-cause-c { font-family: var(--font-mono); font-size: var(--fs-micro, 11px); }
.sv-tl-clause.is-plain { cursor: default; }
.svtl-payment     .sv-tl-dot { background: var(--severity-success); }
.svtl-notice      .sv-tl-dot { background: var(--severity-medium); }
.svtl-consequence .sv-tl-dot { background: var(--accent-ink); }
.svtl-expiry      .sv-tl-dot { background: var(--accent-ink); }
.svtl-waits .sv-tl-dot,
.svtl-held  .sv-tl-dot { background: transparent; border: 1.5px solid var(--text-faint); }
.svtl-waits .sv-tl-label,
.svtl-held  .sv-tl-label { color: var(--text-muted); }
.sv-tl li.svtl-termination .sv-tl-dot { background: var(--severity-critical); box-shadow: 0 0 0 3px var(--bg-pane), 0 0 0 4px var(--severity-critical); }
/* The contract's ordinary course, folded under the question's own rows. */
.sv-elsewhere { margin-top: 12px; }
.sv-elsewhere[open] > summary { margin-bottom: 8px; }
.sv-elsewhere-note { margin: 0 0 10px; font-size: 11.5px; line-height: 1.5; color: var(--text-faint); max-width: 72ch; }

/* WHERE THINGS STAND, and each side's options: a label column and its items. */
.sv-state { width: 100%; border-collapse: collapse; font-size: 12.5px; line-height: 1.5; }
.sv-state th {
  width: 150px; text-align: left; vertical-align: top; padding: 7px 12px 7px 0;
  font-size: var(--fs-micro, 11px); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); border-top: 1px solid var(--border-hairline);
}
.sv-state td { padding: 6px 0; vertical-align: top; color: var(--text-primary); border-top: 1px solid var(--border-hairline); overflow-wrap: anywhere; }
.sv-state tr:first-child th, .sv-state tr:first-child td { border-top: 0; }
.sv-state-contract { font-weight: 600; }
.sv-state-contract.is-ended, .sv-state-contract.is-expired { color: var(--accent-ink); }
.sv-state-list { list-style: none; margin: 0; padding: 0; }
.sv-state-list li { padding: 1px 0; color: var(--text-secondary); }
.sv-state-list li + li { margin-top: 3px; }
.sv-state-list li.is-none { color: var(--text-faint); font-style: italic; }
.sv-state-amt { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.sv-state-who { font-size: 11.5px; color: var(--text-muted); }
.sv-side-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.sv-side { border: 1px solid var(--border-subtle); border-radius: 10px; padding: 10px 14px; background: var(--bg-app); min-width: 0; }
.sv-side.is-read { border-color: color-mix(in srgb, var(--accent) 40%, var(--border-subtle)); }
.sv-side-h { font-size: 11.5px; color: var(--text-muted); margin-bottom: 6px; overflow-wrap: anywhere; }
.sv-side-h b { font-weight: 600; color: var(--text-primary); }

/* THE LEDGER. Its own scroll box at narrow widths, so the page never scrolls
   sideways; figures right-aligned in mono, the total row ruled off. */
.sv-ledger-wrap { overflow-x: auto; border: 1px solid var(--border-hairline); border-radius: 10px; }
.sv-ledger-t { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 12px; line-height: 1.45; }
.sv-ledger-t th {
  text-align: left; padding: 8px 10px; background: var(--bg-pane);
  font-size: var(--fs-micro, 11px); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted);
  border-bottom: 1px solid var(--border-hairline); white-space: nowrap;
}
.sv-ledger-t td { padding: 7px 10px; border-bottom: 1px solid var(--border-hairline); vertical-align: top; color: var(--text-secondary); }
.sv-ledger-t .is-num { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.sv-ledger-t .sv-lg-date, .sv-ledger-t .sv-lg-late { font-family: var(--font-mono); font-size: 11px; white-space: nowrap; }
.sv-lg-name { color: var(--text-primary); font-weight: 550; }
.sv-lg-who { display: block; font-size: 11px; color: var(--text-faint); }
.sv-lg-st { font-family: inherit; font-size: 11px; color: var(--text-muted); }
/* The interest's working is a sentence, not a figure: the UI face, wrapping. */
.sv-lg-work { display: block; font-family: var(--font-ui); font-size: var(--fs-micro, 11px); color: var(--text-faint); white-space: normal; max-width: 220px; margin-left: auto; }
.sv-ledger-t tr.is-late .sv-lg-late { color: var(--severity-medium); font-weight: 600; }
.sv-ledger-t tr.is-unpaid td:first-child { box-shadow: inset 2px 0 0 var(--severity-critical); }
.sv-ledger-t tr.is-unpaid .sv-lg-st { color: var(--severity-critical); font-weight: 600; }
.sv-ledger-t tr.is-void td { color: var(--text-faint); }
.sv-ledger-t tfoot th, .sv-ledger-t tfoot td {
  background: var(--bg-pane); border-bottom: 0; border-top: 1px solid var(--border-strong);
  text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--text-primary);
}
.sv-ledger-t tfoot b { font-weight: 650; }
.sv-lg-split { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; color: var(--text-muted); }
/* The reason money is not shown, where the tiles would be. */
.sv-gate { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-muted); max-width: 72ch; }
.sv-gate span:first-child { color: var(--text-secondary); font-weight: 600; }

@media (max-width: 640px) {
  /* The date column becomes a line above its day: 92px of a phone's width is
     a third of the text column. */
  .sv-tl-dated li { grid-template-columns: 16px minmax(0, 1fr); }
  .sv-tl-dated .sv-tl-when { grid-column: 1 / -1; flex-direction: row; gap: 8px; padding: 0 0 4px; }
  .sv-tl-dated .sv-tl-when:empty { display: none; }
  .sv-state th, .sv-state td { display: block; width: auto; }
  .sv-state th { padding-bottom: 0; }
  .sv-state td { border-top: 0; padding-top: 2px; }
}

/* ============================================================
   DRAFT MODE
============================================================ */
/* `minmax(0, 1fr)`, NOT `1fr`. A bare `1fr` track may not be narrower than
   its content's min-content width, so one unbreakable line — the parsed
   title "RC_FX1_SERVICES_EN.DOCX" — set the column at 429px inside a 330px
   pane, and the contract's every paragraph ran past the right edge with it. */
.draft-layout {
  display: grid;
  grid-template-columns: minmax(0, 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: var(--fs-micro, 11px);
  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: var(--fs-micro, 11px);
  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: var(--fs-micro, 11px);
  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: var(--fs-micro, 11px); 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: var(--fs-micro, 11px); 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: var(--fs-micro, 11px); 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: var(--fs-micro, 11px); 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: var(--fs-micro, 11px); 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 -------------------------------------- */
/* THE HERO IS ON THE THEME'S OWN SURFACES (v2): the document surface, a 3px rule in the verdict's severity token and
   a faint wash of it - in every theme. The fixed verdict gradients (four literal rust/amber/green hexes) painted
   the same rust slab on eight of nine themes; Midnight's flat card was the only themed one and is now the base.
   The full hero is v2/report.css. */
.rpt-hero {
  position: relative;
  border-radius: 14px;
  padding: 16px 20px 12px 22px;
  color: var(--text-primary);
  background: var(--bg-doc);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-strong);
}
.rpt-hero.risk-severe { border-left-color: var(--severity-critical); }
.rpt-hero.risk-high   { border-left-color: var(--severity-high); }
.rpt-hero.risk-medium { border-left-color: var(--severity-medium); }
.rpt-hero.risk-low,
.rpt-hero.risk-clear  { border-left-color: var(--severity-success); }
.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: var(--fs-micro, 11px); text-transform: uppercase; letter-spacing: .06em; opacity: .78; }
.rpt-tile.hot { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .3); }
/* the state in words where a figure would go: smaller, so it reads as a note */
.rpt-tile.is-state b { font-size: 13px; font-weight: 600; line-height: 1.2; max-width: 9em; }

/* ---- 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: var(--fs-micro, 11px); 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: var(--fs-micro, 11px); 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;
}
/* An ENTRANCE: it plays when a section first arrives. A re-render of the page
   on screen patches the sections it already has (app.js `renderReport`), so it
   never replays on a filter, a search key or the memo's own arrival. */
.rpt > section,
.rpt > .rpt-findings { animation: memoRise var(--ml-dur-md, .26s) var(--ml-ease-out, cubic-bezier(.22, 1, .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); }
}

/* 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);
}
/* N1 — the hero's headline and sentence are the memo's: until it lands they
   are placeholders of their own size, never a fallback sentence swapped out. */
.rpt-hero-verdict h1 .rpt-hero-sk { display: inline-block; width: min(70%, 22em); height: .78em; margin: 0; vertical-align: -.04em; }
.rpt-hero-verdict p .rpt-hero-sk-line { display: block; width: 100%; height: 12px; margin: 5px 0 9px; }
.rpt-hero-verdict p .rpt-hero-sk-line.is-short { width: 72%; }
.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: var(--fs-micro, 11px); 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: var(--fs-micro, 11px); 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: var(--fs-micro, 11px); 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; }
.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: var(--fs-micro, 11px); 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); }

/* ---- What needs fixing carries every risk (the owner, 2026-10-13) ----------
   The rows say what "Every risk at a glance" said - level, where, how sure, whose way it cuts - on one quiet line under the title,
   and fold by level: a chip per level folds or shows its rows, a group says how many of its rows are folded. */
.memo-anchor { display: block; height: 0; }
.ms-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0;
  margin-top: 3px; font-size: 11px; line-height: 1.5; color: var(--text-muted);
}
.ms-meta > span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.ms-meta > span + span::before { content: "·"; margin: 0 7px; color: var(--text-faint); }
.ms-level { font-weight: 600; color: var(--text-secondary); }
.ms-meta .ms-where { display: inline; margin-top: 0; overflow-wrap: anywhere; }
.ms-conf.is-sure { color: var(--severity-success); font-weight: 550; }
.ms-stance.memo-stance { font-size: 11px; }
.msg-list li.is-folded { display: none; }
.memo-step-group.is-all-folded .msg-note,
.memo-step-group.is-all-folded .msg-list { display: none; }
.msg-folded {
  display: inline-flex; align-items: center; gap: 4px; margin: 8px 0 0; padding: 3px 9px;
  border: 1px dashed var(--border-subtle); border-radius: 999px; background: transparent;
  font: inherit; font-size: 11.5px; color: var(--text-muted); cursor: pointer;
}
.msg-folded:hover, .msg-folded:focus-visible { color: var(--accent); border-color: var(--accent); }
.msg-folded-n { font-family: var(--font-mono); font-weight: 650; }
.msg-folded-sep { margin: 0 3px; color: var(--text-faint); }
.msg-folded-show { font-weight: 600; }
.msf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; }
.msf-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--bg-pane);
  font: inherit; font-size: 12px; font-weight: 550; color: var(--text-primary); cursor: pointer;
  transition: background-color .14s, border-color .14s, color .14s, opacity .14s;
}
.msf-chip:hover { border-color: var(--border-strong); }
.msf-n { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.msf-chip.is-folded { background: transparent; color: var(--text-muted); border-style: dashed; }
.msf-chip.is-folded .dot { opacity: .45; }
.msf-chip.is-folded .msf-l { text-decoration: line-through; text-decoration-color: var(--text-faint); }
.msf-quick {
  margin-left: 4px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--accent); cursor: pointer;
}
.msf-quick:hover, .msf-quick:focus-visible { text-decoration: underline; }

/* 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: var(--fs-micro, 11px); 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;
  /* NO PADDING TRANSITION: the pinned bar's height is made up in its margin
     (SentinelMotion.pin) the frame it pins, so the page under it never moves;
     a padding still animating would hand the last 8 px back a frame at a time. */
  transition: border-color var(--ml-dur-sm, .18s) var(--ml-ease-out, ease),
              box-shadow var(--ml-dur-sm, .18s) var(--ml-ease-out, ease);
}
.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: --ml-pin-h is the
   pinned bar's own height, published by SentinelMotion.pin on the scroller. */
.memo-block-anchor { scroll-margin-top: calc(var(--ml-pin-h, 78px) + 8px); }

.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; }
/* how many cards of how many are written while the strip spins, and its "Check again" when the page stopped waiting */
.rpt-explainer-loading .rel-n { font-variant-numeric: tabular-nums; color: var(--text-faint); font-size: 12px; }
.rpt-explainer-loading .rel-again {
  font: inherit; font-style: normal; font-size: 12px; color: var(--accent-ink, var(--text-primary));
  background: none; border: 0; padding: 0 2px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
/* 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: var(--fs-micro, 11px); 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 var(--ml-dur-lg, .2s) var(--ml-ease-out, 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 var(--ml-dur-lg, .22s) var(--ml-ease-out, 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: var(--fs-micro, 11px); 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; }
  /* The pinned bar is full-bleed by cancelling the column's side padding, so
     it cancels THIS padding here: the desk's -32px reached 18px past both
     edges of a phone and gave the page a sideways scroll. */
  .rpt-controls { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
  .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-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; }
/* Overlays arrive on a long soft curve and leave short (motion-layer.css tokens). */
.modal-back {
  position: absolute; inset: 0;
  background: rgba(31,41,51,.18);
  opacity: 0;
  transition: opacity var(--ml-dur-sm) var(--ml-ease-in);
}
.modal-root.is-open .modal-back { opacity: 1; transition: opacity var(--ml-dur-md) var(--ml-ease-out); }
.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 var(--ml-dur-sm) var(--ml-ease-in), opacity var(--ml-dur-sm) var(--ml-ease-in);
}
.modal-root.is-open .modal {
  transform: translateY(0) scale(1); opacity: 1;
  transition: transform var(--ml-dur-md) var(--ml-ease-out), opacity var(--ml-dur-md) var(--ml-ease-out);
}
.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: var(--fs-micro, 11px); 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: var(--fs-micro, 11px); 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 */
/* Settings › Legal & security: one document per line, each a row that opens the published page in a new tab */
.set-legal { display: flex; flex-direction: column; }
.set-legal a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 2px; font-size: 13px; font-weight: 550; color: var(--text-primary); text-decoration: none;
}
.set-legal a + a { border-top: 1px solid var(--border-hairline); }
.set-legal a::after { content: "↗"; font-size: 12px; color: var(--text-muted); }
.set-legal a:hover, .set-legal a:focus-visible { color: var(--accent); }
.set-legal a:hover::after, .set-legal a:focus-visible::after { color: var(--accent); }
.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: var(--fs-micro, 11px); 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; }
  /* Two columns of colour rows ran 40px past a phone-width dialog. */
  .set-color-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 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: var(--fs-micro, 11px);
  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: var(--fs-micro, 11px);
  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 var(--ml-dur-sm) var(--ml-ease-in);
}
.palette-root.is-open .palette-back { opacity: 1; transition: opacity var(--ml-dur-md) var(--ml-ease-out); }
.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 var(--ml-dur-sm) var(--ml-ease-in), opacity var(--ml-dur-sm) var(--ml-ease-in);
  overflow: hidden;
}
.palette-root.is-open .palette {
  transform: translateY(0) scale(1); opacity: 1;
  transition: transform var(--ml-dur-md) var(--ml-ease-out), opacity var(--ml-dur-md) var(--ml-ease-out);
}
.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: var(--fs-micro, 11px);
  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;
  transition: bottom var(--ml-dur-md) var(--ml-ease-out);
}
/* 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; }
/* THE TOASTS STAND ABOVE THE CORNER'S OTHER PILLS. "Opened …" sat over the
   Draft's auto-save pill (bottom right) for two seconds, and on a phone the
   clause-jump return pill shares the same strip; while either is up the stack
   rises above it. */
body:has(.parsed-save-indicator.is-on) .toast-root:not(.toast-root--top) { bottom: 64px; }
body:has(.draft-return-pill) .toast-root:not(.toast-root--top) { bottom: 72px; }
/* On a phone the top alert sat over the whole rail bar (every page button,
   Search, Theme and Settings) for as long as it was up: it goes under the bar. */
@media (max-width: 760px) {
  .toast-root--top { top: calc(var(--phone-bar-h, 52px) + 8px); left: 16px; right: 16px; }
}
.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);
  /* the entrance is the motion layer's spring (SentinelMotion.toast.add) */
}
.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)
============================================================ */
/* Only where the browser has no view transitions: there a page switch is a
   crossfade of the old page into the new one (SentinelMotion.navigate), and
   this entrance on top of it would fade the new page twice. */
html:not(.ml-vt-capable) .stage-page,
html:not(.ml-vt-capable) .wi-layout,
html:not(.ml-vt-capable) .draft-layout,
html:not(.ml-vt-capable) .report-layout {
  animation: modeIn var(--ml-dur-md) var(--ml-ease-out);
}
/* 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; }
  .app { --library-w: 220px !important; }      /* the drawer's width, over a width the reader set on a wide screen */
}

/* ============================================================
   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;
  /* A title is often the file's name — one word with no space to wrap at. */
  overflow-wrap: anywhere;
}
/* the title is renamed in place (app.js wireDraftTitle): a quiet frame says so on hover, the focus ring while it is being typed */
.parsed-doc h1.parsed-title[contenteditable="true"] {
  cursor: text; outline: none; border-radius: 6px; padding: 2px 8px;
  transition: box-shadow var(--ml-dur-xs, .12s) var(--ml-ease-out, ease-out);
}
.parsed-doc h1.parsed-title[contenteditable="true"]:hover { box-shadow: 0 0 0 1px var(--border-subtle); }
.parsed-doc h1.parsed-title[contenteditable="true"]:focus { box-shadow: 0 0 0 2px var(--focus); text-transform: none; }
/* THE PARTIES LINE (the party track, 2026-10-14): the roster as parties - name and role - and its editor, which writes
   `parsed.parties` (parse_stats.parties_by = "user"). */
.parsed-parties {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 8px;
  min-height: 18px;
  margin: 4px auto 12px;
  max-width: 680px;
  font-family: var(--font-doc);
  font-size: 12.5px;
  line-height: 18px;
  color: var(--text-secondary);
  text-align: center;
}
.parsed-parties .pp-party b { font-weight: 600; color: var(--text); }
.parsed-parties .pp-role { font-style: italic; }
.parsed-parties .pp-sep { color: var(--text-faint); }
.parsed-parties .pp-tag {
  font-family: var(--font-ui, inherit); font-size: 11px; padding: 0 6px; border-radius: 999px;
  background: var(--bg-soft); color: var(--text-secondary);
}
.parsed-parties .pp-edit {
  font-family: var(--font-ui, inherit); font-size: 11.5px; background: none; border: 0; padding: 0 2px;
  color: var(--accent-ink, var(--accent)); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.parsed-parties .pp-note { flex-basis: 100%; }
.parsed-parties .parties-editor {
  width: 100%; display: flex; flex-direction: column; gap: 6px; text-align: left;
  font-family: var(--font-ui, inherit); font-size: 13px;
  padding: 10px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--surface-raised);
}
.parties-editor .pe-row { display: flex; gap: 6px; align-items: center; }
.parties-editor .pe-row input {
  min-width: 0; padding: 5px 8px; border: 1px solid var(--border-subtle); border-radius: 6px;
  background: var(--surface-raised); color: var(--text); font: inherit;
}
.parties-editor .pe-name { flex: 3 1 0; }
.parties-editor .pe-role { flex: 2 1 0; }
.parties-editor .pe-del { flex: none; width: 28px; height: 28px; border: 0; background: none; color: var(--text-secondary); cursor: pointer; font-size: 16px; }
.parties-editor .pe-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.parties-editor .pe-grow { flex: 1 1 auto; }
.parties-editor button.pe-add, .parties-editor button.pe-cancel, .parties-editor button.pe-reread, .parties-editor button.pe-save {
  padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border-subtle); background: var(--bg-soft); color: var(--text); cursor: pointer; font: inherit;
}
.parties-editor button.pe-save { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
@media (max-width: 560px) {
  .parties-editor .pe-row { flex-wrap: wrap; }
  .parties-editor .pe-name, .parties-editor .pe-role { flex: 1 1 100%; }
}
.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; }
/* still writing after the page stopped waiting, or the last request failed: the same pill, its dot hollow */
.btn-register.is-late .brg-dot, .btn-register.is-failed .brg-dot { background: transparent; border: 1.5px solid var(--mode-stress); }
.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: var(--fs-micro, 11px);
  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: var(--fs-micro, 11px);
  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;
}
/* a paragraph break inside a clause, drawn in Preview (parsed-view.js paragraphBreak): a short gap, not an empty line */
.pb-gap { display: block; height: .6em; }
.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; }
/* AN EMPTY BLOCK IS SOMEWHERE TO TYPE. An inline body with no text has no
   line box: it measured 0 x 0, so the one paragraph a new blank document is
   seeded with (and any empty sub-clause) was an invisible 12-pixel strip with
   nothing to click and nowhere for the keys to go (UI sweep 3.12.a,
   draft:F2). While editing, an empty body takes a line of its own width and
   says what it is for; the hint is the root's `--pb-empty-hint`
   (parsed-view.js, render), so it is translated. A preview has no hint. */
.parsed-doc:not(.is-preview) .pb-body[contenteditable="true"]:empty {
  display: inline-block;
  min-width: min(100%, 16em);
  min-height: 24px;
  vertical-align: top;
  cursor: text;
}
.parsed-doc:not(.is-preview) .pb-body[contenteditable="true"]:empty::before {
  content: var(--pb-empty-hint, "");
  color: var(--text-faint);
  pointer-events: none;
}
.pb-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro, 11px);
  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: var(--fs-micro, 11px);
  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: var(--fs-micro, 11px);
  font-weight: 550;
  letter-spacing: 0.01em;
  margin-top: 1px;
}
.pb-block-hint {
  font-size: var(--fs-micro, 11px);
  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; }

/* A numbered sub-heading joined to its body ("3.1 Cash Retainer" + the
   paragraph under it) is one clause whose title is still a heading: it is set
   as a run-in line at the sub-heading's weight, inside the same editable
   body (parsed-view.js `runInTitle`). */
.pb-clause .pb-runin {
  font-weight: 650;
  color: var(--text-primary);
}

.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: var(--fs-micro, 11px);
  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: var(--fs-micro, 11px);
  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);
}

/* THE BLOCK'S TOOLBAR SITS ON ITS OWN BLOCK (DR-5, owner's decision). At top:-24px it was drawn over the last line of the
   block ABOVE and over that block's "Add a note" marker, so a pointer moving up to the marker landed on this block's red
   Delete - which has no undo. It now sits in this block's top-right corner: its top edge stays inside the 12 px between
   this block and the last line above it (4 px apart, then the block's bottom padding), and where the block carries a note
   marker the toolbar keeps to the left of the marker's column, so on a one-line clause the marker stays reachable. */
.pb-toolbar {
  position: absolute;
  top: -8px;
  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 var(--ml-dur-xs) var(--ml-ease-out), transform var(--ml-dur-xs) var(--ml-ease-out);
  z-index: 5;
}
.pb:has(> .seg-comment-marker) > .pb-toolbar { right: 42px; }
/* 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: var(--fs-micro, 11px);
  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: var(--fs-micro, 11px);
  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: var(--fs-micro, 11px);
  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.
   TYPING, NOT FOCUS: keyed on focus alone this outranked the hover rule, so a
   block's toolbar could not be reached while the caret was in it, and "Split
   at cursor" never had a cursor to split at (UI sweep 3.12.a, draft:F3).
   `.is-typing` is set by a key press in a body and cleared when the mouse
   moves (parsed-view.js, bind). */
.parsed-doc.is-typing .pb:has(> .pb-body:focus) > .pb-toolbar,
.parsed-doc.is-typing .pb:has(> .pb-body:focus) > .pb-align,
.parsed-doc.is-typing .pb-doc-place:has(.pb-body:focus) > .pb-align,
.parsed-doc.is-typing .pb-doc-date:has(.pb-body:focus) > .pb-align,
.parsed-doc.is-typing .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: var(--fs-micro, 11px);
  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 var(--ml-dur-sm) var(--ml-ease-in);
  pointer-events: none;
}
.parsed-save-indicator.is-on { opacity: 1; transition: opacity var(--ml-dur-md) var(--ml-ease-out); }
.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); }
/* a save that did not land is a button: a click tries again, or asks which copy to keep (app.js retryHeldSaves) */
.parsed-save-indicator.is-error.is-on { pointer-events: auto; cursor: pointer; }
.parsed-save-indicator.is-error:focus-visible { outline: 2px solid var(--focus, var(--severity-critical)); outline-offset: 2px; }

/* ============================================================
   Dedicated sign-in page (#authScreen) and the forced password change (#pwGate)
   v2 (area brand): the screen paints on the READER'S theme, not a navy slab. It sits outside #app (a child of <body>), so
   the .app[data-theme] tokens never reach it: v2/auth.css gives it its own small palette (--au-*) per theme on
   `body[data-theme=X] > .auth-screen` (theme-boot.js and applyTheme stamp the theme on <body>). Split layout: the brand
   panel (mark, the lattice stage, a serif headline, three plain benefits) and the form card on the tokens (40 px controls,
   one cobalt primary). On a phone the panel folds to a compact header that keeps the mark and the product name.
============================================================ */
.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  grid-template-rows: 100%;   /* fill viewport height so both columns span fully */
  background: var(--au-bg);
  font-family: var(--font-ui);
  color: var(--au-ink);
  -webkit-font-smoothing: antialiased;
  /* 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(.22, 1, .36, 1);
}
.auth-screen[hidden] { display: none; }
.auth-screen.is-leaving {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ml-dur-md) var(--ml-ease-out);
}

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

/* ---- Brand panel (left) ---- */
.auth-brand {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 28px;
  padding: 40px 48px 36px;
  background:
    radial-gradient(60% 46% at 50% 40%, var(--au-brand-soft) 0%, transparent 72%),
    var(--au-panel);
  border-right: 1px solid var(--au-line);
  color: var(--au-ink);
}
.auth-brand-top {
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1;
}
.auth-logo {
  width: 22px; height: 22px;
  flex: none;
  color: var(--au-brand);
}
.auth-wordmark {
  font-weight: 650;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--au-ink);
}
.auth-brand-body { z-index: 1; max-width: 480px; }
.auth-eyebrow {
  display: inline-block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--au-ink-3);
  margin-bottom: 14px;
}
.auth-headline {
  font-family: var(--font-doc);
  font-weight: 600;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -0.015em;
  color: var(--au-ink);
  margin: 0 0 22px;
  text-wrap: balance;
}
.auth-lede {
  font-size: 15px;
  line-height: 24px;
  color: var(--au-ink-2);
  margin: 0;
  max-width: 460px;
}
.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: 12px;
  font-size: 15px;
  line-height: 22px;
  color: var(--au-ink-2);
}
.auth-tick {
  flex: none;
  margin-top: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--au-brand-soft);
  position: relative;
}
.auth-tick::after {
  content: "";
  position: absolute;
  left: 5.5px; top: 3px;
  width: 4px; height: 7px;
  border: solid var(--au-brand);
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg);
}
.auth-brand-foot {
  z-index: 1;
  font-size: 12px;
  line-height: 18px;
  color: var(--au-ink-3);
  margin: 0;
  max-width: 480px;
}

/* ---- Form panel (right) ---- */
.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  background: var(--au-bg);
  overflow-y: auto;
}
.auth-card {
  width: 100%;
  max-width: 380px;
}
.auth-card-eyebrow {
  display: block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--au-ink-3);
  margin-bottom: 8px;
}
.auth-card-title {
  font-size: 28px;
  line-height: 36px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--au-ink);
  margin: 0 0 6px;
}
.auth-card-sub {
  font-size: 14px;
  line-height: 20px;
  color: var(--au-ink-2);
  margin: 0 0 28px;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.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: 13px;
  line-height: 18px;
  font-weight: 550;
  color: var(--au-ink-2);
}
.auth-field-label em {
  font-style: normal;
  font-weight: 400;
  color: var(--au-ink-3);
  margin-left: 2px;
}
.auth-field input {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--au-line-strong);
  border-radius: 6px;
  background: var(--au-field);
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--au-ink);
  box-shadow: var(--au-shadow-1);
  transition: border-color .12s cubic-bezier(.22, 1, .36, 1), box-shadow .12s cubic-bezier(.22, 1, .36, 1);
}
.auth-field input::placeholder { color: var(--au-ink-4); }
.auth-field input:hover { border-color: var(--au-ink-4); }
.auth-field input:focus {
  outline: none;
  border-color: var(--au-brand);
  box-shadow: 0 0 0 3px var(--au-focus);
}
.auth-field input[aria-invalid="true"] { border-color: var(--au-danger); }
.auth-msg {
  margin: 0;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 18px;
  background: var(--au-danger-soft);
  border: 1px solid var(--au-danger-line);
  color: var(--au-danger);
}
.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: -12px 0 20px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 18px;
  background: var(--au-brand-soft);
  border: 1px solid var(--au-line);
  color: var(--au-ink);
}
.auth-resume[hidden] { display: none; }
.auth-submit {
  margin-top: 8px;
  height: 40px;
  border: 1px solid var(--au-brand);
  border-radius: 6px;
  background: var(--au-brand);
  color: var(--au-on-brand);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background .12s cubic-bezier(.22, 1, .36, 1), opacity .12s;
}
.auth-submit:hover { background: var(--au-brand-hover); border-color: var(--au-brand-hover); }
/* press feedback on pointerdown, instant (the motion rules' 0-16 ms tier) */
.auth-submit:active { transform: scale(.985); }
.auth-submit:focus-visible { outline: 2px solid var(--au-brand); outline-offset: 2px; }
.auth-submit:disabled { opacity: 0.6; cursor: progress; }
.auth-switch {
  margin: 22px 0 0;
  font-size: 13px;
  color: var(--au-ink-2);
}
.auth-switch-btn {
  border: none;
  background: none;
  padding: 0;
  margin-left: 4px;
  font: inherit;
  font-weight: 600;
  color: var(--au-brand);
  cursor: pointer;
}
.auth-switch-btn:hover { text-decoration: underline; }
.auth-hint {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--au-ink-3);
}

/* ---- 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; }
/* the eyebrow says what is required; a warning, never a risk colour on a control */
.pw-gate .auth-card-eyebrow { color: var(--au-warn); }
/* 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 28 px it leaves under
   itself becomes a gap; everything else about the lede is already right. */
.pw-gate .auth-card-sub { margin-bottom: 20px; }
.pw-gate .auth-form .auth-hint { margin-top: -6px; }
.auth-secondary {
  margin: 16px 0 0;
  width: 100%;
  height: 40px;
  border: 1px solid var(--au-line-strong);
  border-radius: 6px;
  background: transparent;
  color: var(--au-ink-2);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.auth-secondary:hover { background: var(--au-hover); color: var(--au-ink); }
.auth-secondary:focus-visible { outline: 2px solid var(--au-brand); outline-offset: 2px; }

/* ---- Responsive: the brand panel folds into a compact header ---- */
@media (max-width: 880px) {
  .auth-screen { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .auth-brand {
    display: flex; flex-direction: column; gap: 14px;
    padding: 20px 24px 22px;
    border-right: 0; border-bottom: 1px solid var(--au-line);
    background: var(--au-panel);
  }
  .auth-brand-body { max-width: none; }
  .auth-eyebrow { display: none; }
  .auth-headline { font-size: 24px; line-height: 30px; margin: 0; }
  .auth-lede, .auth-points, .auth-brand-foot, .auth-stage { display: none; }
  .auth-panel { padding: 32px 24px 40px; align-items: flex-start; }
}
/* A phone keeps the mark and the product name (it used to drop the whole panel and sign in with no brand at all). */
@media (max-width: 560px) {
  .auth-brand { padding: 16px 16px 18px; gap: 10px; }
  .auth-headline { font-size: 20px; line-height: 26px; }
  .auth-panel { padding: 24px 16px 32px; }
  .auth-card-title { font-size: 24px; line-height: 30px; }
  .auth-card-sub { margin-bottom: 22px; }
  /* 16 px in a field keeps a phone from zooming the page when it takes focus */
  .auth-field input { font-size: 16px; }
}
/* 44 px targets on a coarse pointer, whatever the width */
@media (pointer: coarse) {
  .auth-field input, .auth-submit, .auth-secondary { height: 44px; }
}

/* 22. The retired Drive and Calendar app pages' styles are gone with the pages (v2 shell): the Docs pages are the account's files
   and calendar (clm*.css). */

/* ============================================================
   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);
}
/* "Findings you can ask about" under the ready-made questions in one column:
   a second heading, set off from the list above it, and its one-line hint. */
.wi-col-h.wi-col-sub { margin-top: 24px; }
.wi-col-hint { margin: -4px 0 8px; font-size: 11.5px; line-height: 1.5; 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: var(--fs-micro, 11px);
  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: var(--fs-micro, 11px);
  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: var(--fs-micro, 11px);
  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: the parse, the original, or both (preview.js) ============== */
.draft-view-toggle {
  display: inline-flex; align-items: stretch; border: 1px solid var(--border-subtle); border-radius: 8px; overflow: hidden;
  background: var(--bg-sunken); margin-right: 6px;
}
.dvt-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; transition: color .15s ease, background-color .15s ease;
}
.dvt-btn + .dvt-btn { border-left: 1px solid var(--border-hairline, var(--border-subtle)); }
.dvt-btn:hover { color: var(--text-primary); }
.dvt-btn.is-active { background: var(--bg-pane); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.dvt-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
@media (max-width: 1100px) { .dvt-btn span { display: none; } .dvt-btn { padding: 4px 9px; } }

.draft-original { height: 100%; animation: modeIn var(--ml-dur-md) var(--ml-ease-out) both; }
.draft-original .dco-host { height: 100%; }
.draft-compare {
  --dco-w: 46%;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, var(--dco-w)); align-items: start; min-height: 100%;
}
.draft-compare-parsed { min-width: 0; }
/* a title that is a file name has no spaces to wrap at ("CONTRACT_TEST_ANONYMIZED.PDF"): it breaks anywhere, never runs past its page */
.parsed-doc > h1 { overflow-wrap: anywhere; }
.draft-compare .draft-layout { max-width: 860px; padding-left: 28px; padding-right: 28px; grid-template-columns: minmax(0, 1fr); }
/* a stage too narrow for two readable columns (wireCompare decides, by the stage's width): the original is a sheet pinned to the
   bottom of the page while the parse scrolls above it - never parked under a document tens of screens long */
.draft-compare.is-stacked { display: block; }
.draft-compare.is-stacked .draft-compare-orig {
  position: sticky; top: auto; bottom: 0; height: min(46vh, 520px); z-index: 5; border-left: 0; border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -10px 30px rgba(15, 23, 42, .12); border-radius: 12px 12px 0 0; overflow: hidden; animation: dcoUp var(--ml-dur-lg) var(--ml-ease-out) both;
}
.draft-compare.is-stacked .dco-handle { display: none; }
@keyframes dcoUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.draft-compare-orig {
  position: sticky; top: 0; height: var(--dco-h, calc(100vh - 110px)); border-left: 1px solid var(--border-subtle);
  background: var(--bg-sunken); display: flex; min-width: 0; animation: dcoIn var(--ml-dur-lg) var(--ml-ease-out) both;
}
.draft-compare-orig .dco-host { flex: 1; min-width: 0; height: 100%; }
.dco-handle {
  position: absolute; left: -5px; top: 0; bottom: 0; width: 10px; cursor: col-resize; z-index: 3; touch-action: none;
}
.dco-handle::after {
  content: ""; position: absolute; left: 4px; top: 50%; width: 2px; height: 40px; margin-top: -20px; border-radius: 2px;
  background: var(--border-strong); opacity: 0; transition: opacity var(--ml-dur-xs) var(--ml-ease-out);
}
.draft-compare-orig:hover .dco-handle::after, .draft-compare.is-resizing .dco-handle::after { opacity: 1; }
.draft-compare.is-resizing { user-select: none; cursor: col-resize; }
.draft-compare-parsed [data-seg] { cursor: pointer; }
.draft-compare-parsed .seg-located { box-shadow: inset 3px 0 0 var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); transition: background-color var(--ml-dur-lg) var(--ml-ease-out); }
@keyframes dcoIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
/* A REDRAW OF THE DRAFT PAGE IS NOT AN ARRIVAL (DR-3, DR-4). The same-view rule for the page entrance matches a DIRECT child
   of the stage, and Side by side nests the parse two levels down - so Preview/Edit, every structural edit and every switch
   between the three views faded the whole parse in from nothing and slid the original in again. On the same page the
   entrances are off at any depth; a view switch crossfades instead (draftSwap in app.js, a view transition). */
.mode-stage.is-samestage .draft-layout,
.mode-stage.is-samestage .draft-original,
.mode-stage.is-samestage .draft-compare-orig,
.mode-stage.is-samestage .draft-compare.is-stacked .draft-compare-orig,
.mode-stage.is-samestage .draft-return-pill { animation: none; }

/* ===== 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 var(--ml-dur-md) var(--ml-ease-out);
}
.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); }
}

/* 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; }




/* ===== 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); }

/* ============================================================
   Token fixes, then the dark themes' own parts (design system v2)
   A token only decides a colour where a rule asks for it. The first rules
   below replace a colour the page hard-coded with the token that means it;
   they hold in EVERY theme (System included), so they are not scoped. The
   rules after them are where a dark theme paints a part differently (the
   Landing's dark demos); they cover Midnight and Eclipse and sit last, so
   every one of them wins over the rule it corrects.
============================================================ */

/* Selected text, in every theme: the theme's own opaque highlight
   (v2/tokens.css --selection: a pale blue under the brand ink on the light
   themes; the indigo under white on the dark ones). */
.app ::selection,
body[data-theme] ::selection { background: var(--selection, #cdd9ee); color: var(--selection-ink, var(--brand-navy)); }

/* Confidence and the analytics greens were fixed parchment hexes (#1d7a4c at
   3.54:1 on Midnight, #1a7f4b at 3.76:1); the token reads in every theme. */
.dd-conf.is-high { color: var(--severity-success); }
.dd-conf.is-medium,
.conf-head.is-low { color: var(--severity-medium); }
.sg-a .ab-grade,
.stab-hero.sg-a .stab-hero-grade {
  background: var(--bg-active-green);
  color: var(--severity-success);
}
.rl-tier.is-verified {
  background: var(--bg-active-green);
  color: var(--severity-success);
}
.eq-gain.is-neg,
.ko-group-head.ko-protective,
.rl-ev-after { color: var(--severity-success); }
.ko-role.ko-protective {
  background: var(--bg-active-green);
  color: var(--severity-success);
}

/* What-if: the "applied" clause tag reads in the brand ink. The conflict tag keeps its red. */
.app[data-mode="whatif"] .scc-tag:not(.is-conflict) { color: var(--accent-ink); }

/* 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. */
.wi-scen.is-active .wi-scen-verdict { background: transparent; }

/* Report · the "Watch" step tag: the inverse ink on --text-faint was 2.5:1
   (white, light themes) and 3.29:1 (dark ink, Midnight); on --text-muted it
   reads in every theme. Blocking and Soon keep their own fills. */
.is-monitor .msg-tag { background: var(--text-muted); }

/* THE DARK THEMES. Selected text: an OPAQUE HIGHLIGHT (the owner, 2026-10-13:
   "anywhere you highlight in the app shouldn't become invisible"). White on
   this indigo is 7:1 on every ground; paper (the originals) has its own rules
   in preview.css and preview.js. */
.app[data-theme="midnight"] ::selection,
body[data-theme="midnight"] ::selection,
.app[data-theme="eclipse"] ::selection,
body[data-theme="eclipse"] ::selection {
  background: #4a56a6;
  color: #ffffff;
}

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

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

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

/* 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 Midnight hero block is gone: the base hero (styles.css "HERO" + v2/report.css) is on the theme's
   tokens in every theme now, which is what this block did for Midnight alone. */

/* ============================================================
   Narrow layouts — the library as a drawer at 980px and below
   (LIBRARY_DRAWER_QUERY in app.js, the same number), and the rail
   as a bar across the top at 760px and below.

   The app had no layout for a narrow screen at all. At 390px the
   60px rail and the 220px library stayed docked and every page was
   squeezed into the 110px left over: a finding's title one letter
   per line, the parsed contract cut at the right edge, the mode-bar
   buttons clipped out of reach. A tablet held upright (768-940px)
   kept the docked library too, and it left Detect too little room
   for its own bar: Re-run detection sat past the right edge.

   At 980px and below the library is a drawer over the page
   (`.is-drawer-open`, never stored) and the page has the width the
   rail leaves; at 760px and below the rail is a bar across the top
   and the page has the whole screen. 981px and up is the desk
   layout, unchanged.

   Everything is scoped to `.app:not(.dx)`: the Docs page (clm.html)
   loads this file for its tokens and its rail, and keeps its own
   narrow layout in clm.css.
============================================================ */
.rail .lib-toggle,
.lib-scrim { display: none; }

/* ---- the library, as a drawer ---- */
@media (max-width: 980px) {
  .app:not(.dx)[data-mode] {
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    transition: none;
  }
  .app:not(.dx) .main { min-width: 0; }
  .app:not(.dx) .rail .lib-toggle { display: flex; }
  .app:not(.dx).is-drawer-open .rail .lib-toggle { color: var(--accent); background: var(--bg-soft); }
  .app:not(.dx) .library {
    position: fixed;
    z-index: 50;               /* over the page and the run panel, under a modal */
    top: 0;
    bottom: 0;
    left: var(--rail-w);
    width: min(300px, calc(100vw - var(--rail-w) - 40px));
    box-shadow: 12px 0 32px rgba(0, 0, 0, .16);
    opacity: 1;
    pointer-events: none;
    visibility: hidden;
    transform: translateX(calc(-100% - var(--rail-w)));
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .25s;
  }
  .app:not(.dx).is-drawer-open .library {
    pointer-events: auto;
    visibility: visible;
    transform: none;
    transition: transform .25s cubic-bezier(.4, 0, .2, 1);
  }
  /* THE SHADE FADES BOTH WAYS, IN STEP WITH THE SLIDE. It was shown only
     while open (display: block with an entrance animation), so on close it
     vanished in the first frame while the drawer was still sliding out for a
     quarter of a second. It is always laid out here and fades on opacity;
     `visibility` lets it go only once the fade is over. */
  .app:not(.dx) .lib-scrim {
    display: block;
    position: fixed;
    z-index: 49;
    top: 0; right: 0; bottom: 0;
    left: var(--rail-w);
    background: rgba(15, 18, 22, .28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .25s;
  }
  .app:not(.dx).is-drawer-open .lib-scrim {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .25s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s;
  }
  /* The drawer slides out from under the rail, never across it (761-980px). */
  .app:not(.dx) .rail { position: relative; z-index: 51; }
  /* The docked panel's own tabs have no edge to sit on here. */
  .app:not(.dx) .lib-collapse,
  .app:not(.dx) .lib-reopen { display: none; }
  /* Centred over the page, which no longer starts after a docked library. */
  .draft-return-pill { left: calc(var(--rail-w) + (100vw - var(--rail-w)) / 2); }
  .app[data-mode="docs"] > .dx { grid-column: 2; }
}

/* ---- the rail, as a bar across the top ---- */
@media (max-width: 760px) {
  :root { --phone-bar-h: 52px; }
  .app[data-mode="docs"] > .dx { grid-column: 1; grid-row: 2; height: auto; grid-template-rows: minmax(0, 1fr); }
  .app[data-mode="docs"] .dx .dx-side { left: 0; top: var(--phone-bar-h); }

  .app:not(.dx)[data-mode] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--phone-bar-h) minmax(0, 1fr);
    height: 100vh;
    height: 100dvh;
  }
  .app:not(.dx) .rail {
    grid-column: 1;
    grid-row: 1;
    flex-direction: row;
    gap: 2px;
    padding: 0 4px;
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle);
    /* On a screen too narrow even for this, the bar scrolls inside itself:
       never the page. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .app:not(.dx) .rail::-webkit-scrollbar { display: none; }
  .app:not(.dx) .rail-brand { display: none; }
  /* Each page button is as wide as its own label, so the Russian labels
     ("Документы" is 57px, "Отчёт" 28px) fit a 390px screen whole; the
     buttons take the free width first (the spacer's share is 1 in 501) and
     the spacer only what is left once they reach 64px, which pushes the quiet
     buttons to the right. */
  .app:not(.dx) .rail-spacer { flex: 1 0 0; }
  .app:not(.dx) .rail-btn {
    flex: 100 1 auto;
    width: auto;
    min-width: 34px;
    max-width: 64px;
    padding: 6px 2px 5px;
  }
  /* On a screen narrower still, a label longer than its button ends in an
     ellipsis instead of running under its neighbours; the button's title has
     it whole. */
  .app:not(.dx) .rail-btn .rail-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 10px;
    white-space: nowrap;
  }
  .app:not(.dx) .rail-btn-quiet { flex: 0 0 32px; min-width: 32px; padding: 8px 0; }
  .app:not(.dx) .rail .lib-toggle { flex: 0 0 36px; min-width: 36px; }
  /* The page marker sits under the button, not beside it. */
  .app:not(.dx) .rail-btn.is-active::before {
    left: 12px; right: 12px; top: auto; bottom: -3px;
    width: auto; height: 2px;
  }

  /* The drawer opens under the bar, from the screen's own edge. */
  .app:not(.dx) .library {
    top: var(--phone-bar-h);
    left: 0;
    width: min(320px, 86vw);
    transform: translateX(-100%);
  }
  .app:not(.dx) .lib-scrim,
  .app:not(.dx).is-drawer-open .lib-scrim { top: var(--phone-bar-h); left: 0; }

  /* ---- the page ---- */
  .app:not(.dx) .main {
    grid-column: 1;
    grid-row: 2;
    grid-template-rows: auto minmax(0, 1fr);
  }
  /* The mode bar wraps instead of clipping: the title keeps the first line
     and the actions take the next ones. With `overflow: hidden` and actions
     that never wrapped, Re-run detection, Export findings, Edit and Upload
     sat past the right edge where nothing could reach them. */
  .app:not(.dx) .mode-bar {
    flex-wrap: wrap;
    row-gap: 8px;
    column-gap: 8px;
    padding: 9px 14px;
    min-height: 44px;
  }
  .app:not(.dx) .mb-title { flex: 1 1 0; }
  .app:not(.dx) .mb-spacer { display: none; }
  .app:not(.dx) .mb-actions { flex: 1 1 100%; flex-wrap: wrap; row-gap: 6px; }
  .app:not(.dx) .mb-actions:empty { display: none; }
  .app:not(.dx) .stage-page { padding: 20px 16px 56px; }

  /* Popovers that were placed against the side rail. */
  .settings-pop {
    left: auto; right: 8px;
    top: calc(var(--phone-bar-h) + 6px); bottom: auto;
    width: min(280px, calc(100vw - 16px));
  }
  .draft-return-pill { left: 50%; }

  /* ---- Detect ---- */
  .app:not(.dx) .detect-hero { grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
  .app:not(.dx) .analytics-badges { justify-content: flex-start; }
  /* A finding's title over its badges. Side by side, the badges (never
     wrapping, never shrinking) took the row and left the title 14px: "A
     table does not add up" set one letter per line. */
  .app:not(.dx) .ic-top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .app:not(.dx) .ic-badges { flex-wrap: wrap; white-space: normal; }
  /* The filter tabs wrap as tabs; a tab's own words never wrap inside its
     26px height ("From the terms" stood on three lines). */
  .app:not(.dx) .pill-tabs { flex-wrap: wrap; }
  .app:not(.dx) .pill-tab { white-space: nowrap; }

  /* ---- Draft ---- */
  .app:not(.dx) .draft-layout { padding: 16px 12px 28px; }
  .app:not(.dx) .parsed-doc,
  .app:not(.dx) .draft-doc { padding: 24px 18px 56px; }
  .app:not(.dx) .parsed-doc h1 { font-size: 21px; }

  /* ---- Report ---- */
  /* Seven tiles, two to a row on a phone: four abreast is 4 x 78px and the
     gaps, wider than the hero, and the fourth tile was cut at its edge. */
  .app:not(.dx) .rpt-hero-stats { grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)); }
  .app:not(.dx) .rpt-tile { min-width: 0; }
}
@keyframes libScrimIn { from { opacity: 0; } to { opacity: 1; } }