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

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

  /* text */
  --text-primary:   #1a2330;
  /* `--ink` is the ink colour the defect-detail and diff styles were written
     against, and it was never defined. Six rules use it with NO fallback —
     `.dd-stale { color: var(--ink) }` and the `del`/`ins` colour-mixes in the
     redline diff — and an undefined var makes the whole declaration invalid,
     so removed and added text rendered in the surrounding body colour with no
     red/green at all. Aliased rather than hard-coded so it follows the theme:
     every `.app[data-theme=…]` block below redefines `--text-primary`, and
     this now moves with it. */
  --ink:            var(--text-primary);
  --text-secondary: #4f5764;
  --text-muted:     #8b94a0;
  --text-faint:     #b9bfc8;
  --text-inverse:   #ffffff;

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

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

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

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

  --focus: #315f9f;

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

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

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

.app[data-mode="detect"]   { --accent: var(--mode-detect);   --accent-soft: var(--bg-active-amber); }
.app[data-mode="simulate"] { --accent: var(--mode-simulate); --accent-soft: var(--bg-active-blue); }
.app[data-mode="stress"]   { --accent: var(--mode-stress);   --accent-soft: var(--bg-active-violet); }
.app[data-mode="draft"]    { --accent: var(--mode-draft);    --accent-soft: var(--bg-active-green); }
.app[data-mode="report"]   { --accent: var(--mode-report);   --accent-soft: var(--bg-active-blue); }

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

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

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

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

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

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

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

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

/* 8 · Midnight — dark navy */
.app[data-theme="midnight"] {
  --bg-page:  #0a1322;
  --bg-app:   #0f1a2c;
  --bg-pane:  #142133;
  --bg-doc:   #182840;
  --bg-sunken:#08101e;
  --bg-soft:  rgba(255,255,255,0.05);
  --bg-soft2: rgba(255,255,255,0.09);
  --bg-mark:  rgba(255, 220, 110, 0.22);

  --text-primary:   #e6ecf5;
  --text-secondary: #b6c1d3;
  --text-muted:     #7e8ba0;
  --text-faint:     #56627a;

  --border-subtle:   #233151;
  --border-hairline: #1c2842;
  --border-strong:   #36487a;

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

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

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

/* 9 · Eclipse — pure dark (grey-black) */
.app[data-theme="eclipse"] {
  --bg-page:  #141414;
  --bg-app:   #1b1b1b;
  --bg-pane:  #222222;
  --bg-doc:   #2a2a2a;
  --bg-sunken:#101010;
  --bg-soft:  rgba(255,255,255,0.05);
  --bg-soft2: rgba(255,255,255,0.08);
  --bg-mark:  rgba(255, 220, 110, 0.20);

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

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

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

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

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

/* `--ink` must be declared HERE, on the same element the themes above write
   `--text-primary` to, not on `:root`. A custom property is substituted where
   it is DECLARED: `--ink: var(--text-primary)` sitting in `:root` resolves
   against the ROOT's text colour and keeps the light value on a dark theme,
   which paints the redline's red and green over a dark pane in near-black.
   Declared on `.app`, it picks up whichever `--text-primary` won there. */
.app { --ink: 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: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}
.theme-tile.is-active .tt-name { color: var(--accent); }

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Findings row */
.lib-finding-item {
  position: relative;
  display: grid;
  grid-template-columns: 9px 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 7px 10px 7px 12px;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--text-secondary);
}
.lib-finding-item:hover { background: var(--bg-soft); color: var(--text-primary); }
.lib-finding-id {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}

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

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

/* In-flight upload pill — sits above the Upload button while a parse is
   running in the background. Click reopens the progress modal. */
.lib-upload-pill {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin-bottom: 6px;
  padding: 7px 10px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--text-primary);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 11.5px;
  text-align: left;
}
.lib-upload-pill:hover { filter: brightness(0.98); }
.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;
  letter-spacing: 0.01em;
  color: var(--accent);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.lup-name {
  font-size: 11.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lup-cta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.03em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ---- confidence dividers: high-confidence vs review-critically ---- */
.conf-head {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 8px; padding: 4px 2px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
}
.conf-head:first-child { margin-top: 2px; }
.conf-head::after { content: ""; flex: 1; height: 1px; background: var(--border-hairline); }
.conf-head .ch-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 16px; padding: 0 5px; border-radius: 8px;
  font-size: 10px; background: rgba(0,0,0,.05); color: var(--text-muted);
}
.conf-head.is-low { color: #b07a1f; }
.conf-head.is-res { color: var(--severity-success); }

/* ---- 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); }
.sev-chip.is-active .sc-num, .sev-chip.is-active .sc-label { color: #fff; }
.sev-chip.is-active .dot { box-shadow: 0 0 0 2px rgba(255,255,255,.55); }

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

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

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

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

.dd-grid { display: grid; grid-template-columns: 1fr 250px; gap: 30px; padding-top: 2px; }
.dd-main { min-width: 0; }
.dd-section { padding: 17px 0; border-bottom: 1px solid var(--border-hairline); }
.dd-section:last-child { border-bottom: 0; padding-bottom: 4px; }
.dd-section h5 {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted); margin: 0 0 10px;
}
.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; }

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

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

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

.detect-triage { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.detect-triage .dt-count { font-size: 12px; font-weight: 600; color: var(--severity-success); }
.dt-toggle { border: 1px solid var(--border-subtle); background: var(--bg-pane); border-radius: 7px; padding: 5px 10px; font-size: 12px; color: var(--text-secondary); cursor: pointer; }
.dt-toggle.is-on { border-color: var(--brand-navy); color: var(--brand-navy); background: var(--brand-blue-soft); }
.dt-toggle: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-text { font-size: 13px; color: var(--text-primary); line-height: 1.45; overflow-wrap: anywhere; }
.dd-c-ts { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; flex: none; }
.dd-comment-add { display: flex; gap: 8px; }
.dd-comment-input { flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 11px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-doc); font: inherit; font-size: 13px; color: var(--text-primary); }
.dd-comment-input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(49,95,159,.14); }

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


/* ===== Phase 2 — version diff: "what changed" banner + compare ===== */
/* Per-card "New"/"Changed" tag, prepended to the title. */
.ic-change { display: inline-block; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 6px; border-radius: 5px; margin-right: 8px; vertical-align: middle; transform: translateY(-1px); }
.ic-change.is-new   { color: #fff; background: var(--severity-high); }
.ic-change.is-moved { color: #fff; 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); }
/* 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; }
.wc-actions { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
.wc-link { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 550; color: var(--accent); cursor: pointer; white-space: nowrap; }
.wc-link:hover { text-decoration: underline; }
.wc-x { border: 0; background: none; padding: 2px 4px; font-size: 13px; line-height: 1; color: var(--text-muted); cursor: pointer; border-radius: 6px; }
.wc-x:hover { color: var(--text-primary); background: var(--bg-soft2); }
.wc-resolved { list-style: none; margin: -6px 0 14px; padding: 10px 14px; display: flex; flex-direction: column; gap: 7px; border: 1px dashed var(--border-subtle); border-radius: 10px; background: var(--bg-doc); }
.wcr-item { display: flex; align-items: center; gap: 10px; }
.wcr-item .dot { flex: none; }
.wcr-title { font-size: 13px; color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.wcr-meta { margin-left: auto; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--severity-success); white-space: nowrap; }

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


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

/* Fixed corner run pill / live ticker — survives mode switches, no layout shift. */
#runPillRoot { position: fixed; right: 22px; bottom: 22px; z-index: 60; pointer-events: none; }
#runPillRoot.is-on { pointer-events: auto; }
.run-pill { display: inline-flex; align-items: center; gap: 10px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--bg-doc); color: var(--text-primary); font: inherit; font-size: 13px; font-weight: 550; cursor: pointer; box-shadow: 0 6px 22px rgba(31,41,51,.16); animation: rp-in .3s ease both; }
.run-pill:hover { border-color: var(--accent); }
.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; }
.rp-text { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-count { flex: none; font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 650; padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--border-subtle); }
.rp-count[hidden] { display: none; }
.rp-count.rp-bump { animation: rp-bump .35s ease; }
@keyframes rp-spin { to { transform: rotate(360deg); } }
@keyframes rp-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes rp-bump { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .rp-spin, .rp-count.rp-bump, .run-pill { animation: none; } }


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

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

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

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

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

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

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

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

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

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


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

/* ============================================================
   DETECT — banger animation
============================================================ */
.detect-runtime {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
/* Detection in progress: a LOOPING scan band plus skeleton cards where
   findings will land. The previous version was a one-shot 4.4s sweep with
   `forwards`, so on any real run it played once and then froze at the bottom
   of the panel for the rest of the analysis. */
.scan-band {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 140px;
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--accent) 7%, transparent) 62%,
    color-mix(in srgb, var(--accent) 14%, transparent) 88%,
    color-mix(in srgb, var(--accent) 55%, transparent) 99%,
    transparent 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  box-shadow: 0 6px 26px -6px color-mix(in srgb, var(--accent) 38%, transparent);
  animation: scanBand 2.9s cubic-bezier(.45, .05, .35, 1) infinite;
  will-change: transform, opacity;
}
@keyframes scanBand {
  0%   { transform: translateY(-140px); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(calc(100% + 20px)); opacity: 0; }
}

.scan-skeletons {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  overflow: hidden;
}
.scan-skel {
  display: flex;
  gap: 12px;
  align-items: stretch;
  padding: 14px 14px 14px 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel, #fff) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink, #000) 8%, transparent);
  animation: skelRise .5s ease both;
}
@keyframes skelRise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: .85; transform: none; }
}
.sk-rail {
  width: 3px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  flex: none;
}
.sk-body { flex: 1; display: flex; flex-direction: column; gap: 9px; justify-content: center; }
.sk-line {
  height: 9px;
  border-radius: 5px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--ink, #000) 8%, transparent) 0%,
    color-mix(in srgb, var(--ink, #000) 14%, transparent) 38%,
    color-mix(in srgb, var(--ink, #000) 8%, transparent) 76%);
  background-size: 240% 100%;
  animation: skelShimmer 1.5s linear infinite;
}
.sk-w70 { width: 70%; }
.sk-w40 { width: 40%; }
@keyframes skelShimmer {
  from { background-position: 140% 0; }
  to   { background-position: -140% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .scan-band { animation-duration: 6s; }
  .sk-line   { animation: none; }
  .scan-skel { animation: none; opacity: .85; }
}

/* Compile log overlay */
.compile-log {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 560px;
  max-width: calc(100vw - 56px);
  background: #0b1018;
  border: 1px solid #1c2738;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 18px;
  color: #c2d1e6;
  box-shadow: 0 18px 40px rgba(0,0,0,.32);
  z-index: 30;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s;
}
.compile-log.is-on { opacity: 1; transform: translateY(0); }
.compile-log.is-fade-out { opacity: 0; transform: translateY(8px); }

.cl-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: #161f2c;
  color: #8696b0;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  border-bottom: 1px solid #1c2738;
}
.cl-head .cl-spinner {
  width: 8px; height: 8px;
  border: 1.5px solid color-mix(in srgb, var(--accent) 60%, white 0%);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.cl-head .cl-tag {
  margin-left: auto;
  color: var(--accent);
  font-family: var(--font-mono);
}
@keyframes spin { to { transform: rotate(360deg); } }

.cl-body {
  padding: 10px 14px 14px;
  max-height: 280px;
  overflow-y: auto;
}
.cl-line {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: baseline;
  animation: lineFade .22s ease;
}
.cl-line .cl-time { color: #5e6f87; }
.cl-line .cl-text { color: #d6e0ee; word-break: break-word; }
.cl-line .cl-text .cl-hit { color: #ff9966; font-weight: 600; }
.cl-line .cl-text .cl-ok  { color: #7cd6a0; }

/* line kinds */
.cl-line-rule .cl-text  { color: #f0e3a3; font-weight: 600; }
.cl-line-rule .cl-text .cl-fn  { color: #9bc7ff; }
.cl-line-rule .cl-text .cl-key { color: #c89eff; }

.cl-line-code .cl-text  {
  color: #9aa8c2;
  background: rgba(255,255,255,0.02);
  padding-left: 14px;
  border-left: 2px solid #243149;
  display: block;
}
.cl-line-code .cl-text .cl-key  { color: #c89eff; font-weight: 500; }
.cl-line-code .cl-text .cl-str  { color: #9ed8a8; }
.cl-line-code .cl-text .cl-op   { color: #ff9966; }
.cl-line-code .cl-text .cl-fn   { color: #9bc7ff; }
.cl-line-code .cl-text .cl-iss  { color: #ff9966; }
.cl-line-code .cl-text .cl-ref  { color: #ffc879; }

.cl-line-scan .cl-text  { color: #b8c6dc; }
.cl-line-scan .cl-text .cl-ref { color: #ffc879; }
.cl-line-scan .cl-text .cl-hit { color: #7cd6a0; font-weight: 700; letter-spacing: 0.04em; }

.cl-line-match .cl-text { color: #ffd5a8; font-weight: 500; }
.cl-line-match .cl-text .cl-arrow { color: #ff9966; font-weight: 700; }
.cl-line-match .cl-text .cl-iss  { color: #ff9966; font-weight: 700; }
.cl-line-match .cl-text .cl-sev          { font-weight: 700; }
.cl-line-match .cl-text .cl-sev-critical { color: #ff7a7a; }
.cl-line-match .cl-text .cl-sev-high     { color: #ffaa66; }
.cl-line-match .cl-text .cl-sev-medium   { color: #f0c878; }
.cl-line-match .cl-text .cl-sev-low      { color: #94c8e8; }

.cl-line-done .cl-text { color: #7cd6a0; font-weight: 700; letter-spacing: 0.02em; }
@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; }

/* ============================================================
   SIMULATE MODE
============================================================ */
.sim-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 36px 64px;
}

.sim-card {
  background: var(--bg-pane);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 18px;
}

.sim-timebar {
  background: var(--bg-pane);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 18px;
}
.sim-timebar-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
}
.sim-scen-pick {
  display: inline-flex;
  flex-direction: column;
  text-align: left;
  background: var(--bg-app);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  position: relative;
  min-width: 200px;
}
.sim-scen-pick:hover { border-color: var(--border-strong); }
.sim-scen-pick svg { position: absolute; right: 9px; top: 12px; color: var(--text-muted); }
.sim-scen-eyebrow {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
}
.sim-scen-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.sim-track-wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}
.sim-time-end {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}
.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;
}
.track-fill {
  position: absolute;
  left: 0; top: 13px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transition: width .12s ease;
}
.track-events {
  position: absolute;
  left: 0; right: 0; top: 9px; height: 10px;
  pointer-events: none;
}
.track-event {
  position: absolute;
  top: 3px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--text-muted);
  transform: translateX(-50%);
}
.track-event.is-conflict { background: var(--severity-critical); top: 1px; width: 8px; height: 8px; }
.track-event.is-rule     { background: var(--accent); }
.track-handle {
  position: absolute;
  top: 7px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--bg-app);
  border: 2px solid var(--accent);
  transform: translateX(-50%);
  box-shadow: 0 1px 3px rgba(31,41,51,.18);
  cursor: grab;
  transition: transform .1s;
}
.track-handle:hover, .track-handle:focus-visible { transform: translateX(-50%) scale(1.06); }

.sim-controls { display: flex; gap: 4px; align-items: center; }

.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-key { color: var(--text-muted); }
.watch-val { color: var(--text-primary); font-weight: 500; }
.watch.is-fresh {
  animation: chipFlash .9s ease;
  border-color: var(--accent);
}
.watch.is-conflict {
  border-color: var(--severity-critical);
  background: var(--bg-active-red);
}
.watch.is-conflict .watch-val { color: var(--severity-critical); }
.watches-empty { color: var(--text-muted); font-size: 11.5px; font-style: italic; padding: 4px 0; }
@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); }
}

.sim-stage {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
}
.sim-events {
  background: var(--bg-pane);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 18px 22px;
}
.sim-events h3 { font-size: 13px; font-weight: 600; margin: 0 0 12px; }
.sim-event-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}
.sim-event-list .se-date {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  padding-top: 1px;
}
.sim-event-list .se-row {
  display: grid;
  grid-template-columns: 14px 1fr;
  column-gap: 10px;
  align-items: start;
  opacity: 0;
  transform: translateX(-8px);
  /* Hidden until scrub reaches it; .is-revealed animates the row in. */
}
.sim-event-list .se-row.is-revealed {
  animation: seReveal .42s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes seReveal {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
.sim-event-list .se-text {
  color: var(--text-primary);
  /* long engine sentences stay scannable: clamp to two lines, full text on hover */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sim-event-list .se-row.is-conflict .se-text {
  color: var(--severity-critical);
  font-weight: 550;
}
/* Day-group headers: one "Day N" per day instead of a date on every row. */
.sim-event-list .se-dayhead {
  grid-template-columns: auto 1fr;
  align-items: center;
  margin-top: 10px;
}
.sim-event-list .se-dayhead:first-child { margin-top: 0; }
.se-dayhead-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.se-dayhead-rule { height: 1px; background: var(--border-subtle); }
/* Kind marker per event row (breach = red, right/rule = accent). */
.se-kind {
  width: 7px; height: 7px; border-radius: 50%;
  margin-top: 5px;
  background: var(--text-faint);
  opacity: .55;
}
.se-row.is-conflict .se-kind, .se-kind-conflict { background: var(--severity-critical); opacity: 1; }
.se-kind-rule-fire { background: var(--accent); opacity: .9; }
.se-kind-routine { opacity: .25; }
.sim-events h3 .se-counter {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-faint);
  margin-left: 8px;
}

/* Global file-drag hint: drop anywhere to upload. */
body.is-file-drag::after {
  content: "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;
}
.parse-queue {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--text-faint);
  border-top: 1px dashed var(--border-subtle);
  padding-top: 8px;
}

.sim-affected {
  background: var(--bg-pane);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 18px 20px;
}
.sim-affected h3 { font-size: 13px; font-weight: 600; margin: 0 0 12px; }

/* ---- Scenario outcome panel: verdict + plain-English consequences ---- */
.sim-empty {
  display: flex; flex-direction: column; gap: 14px;
  align-items: flex-start; padding: 24px;
}
.sim-outcome {
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 16px;
  background: var(--bg-app);
}
.sim-outcome.is-unsafe { border-color: color-mix(in srgb, var(--severity-critical) 45%, var(--border-subtle)); }
.sim-outcome.is-warn   { border-color: color-mix(in srgb, var(--severity-medium) 45%, var(--border-subtle)); }
.sim-outcome-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sim-outcome-head h3 { margin: 0; }
.sim-verdict {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  padding: 3px 8px; border-radius: 999px;
}
.sim-verdict.is-safe   { color: var(--severity-success);  background: var(--bg-active-green); }
.sim-verdict.is-unsafe { color: var(--severity-critical); background: var(--bg-active-red); }
.sim-verdict.is-warn   { color: var(--severity-medium);   background: var(--bg-active-amber); }
.sim-outcome-headline { font-size: 13px; font-weight: 550; margin: 10px 0 0; line-height: 1.45; }
.sim-outcome-expl { font-size: 12.5px; color: var(--text-muted); margin: 8px 0 0; line-height: 1.5; }
.sim-impact { margin-top: 12px; }
.sim-impact-h {
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint); margin: 12px 0 6px;
}
.sim-impact-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12.5px; padding: 3px 0;
}
.sim-impact-row .sim-impact-v { font-family: var(--font-mono); font-size: 12px; }
.sim-impact-row.is-changed .sim-impact-v { color: var(--severity-critical); font-weight: 600; }
.sim-impact-base { color: var(--text-faint); font-weight: 400; }
.sim-outcome-list {
  margin: 6px 0 0; padding-left: 16px;
  font-size: 12.5px; color: var(--text-muted); line-height: 1.5;
}
.sim-outcome-list li { margin-bottom: 4px; }
.sim-outcome-list.is-notes { color: var(--text-faint); }
.sim-assume { margin-top: 12px; font-size: 12px; color: var(--text-muted); }
.sim-assume summary { cursor: pointer; color: var(--text-faint); font-size: 11.5px; }
.sim-assume ul { margin: 6px 0 0; padding-left: 16px; line-height: 1.5; }
.sim-clause-card {
  border: 1px solid var(--border-hairline);
  background: var(--bg-app);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color .12s;
}
.sim-clause-card:hover { border-color: var(--accent); }
.sim-clause-card.is-fired   { border-color: var(--accent); background: var(--accent-soft); }
.sim-clause-card.is-conflict { border-color: var(--severity-critical); background: var(--bg-active-red); }
.scc-num {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  margin-right: 6px;
}
.scc-text {
  font-size: 12.5px;
  line-height: 19px;
  color: var(--text-primary);
}
.scc-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--accent);
  margin-left: 6px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  padding: 0 5px;
  border-radius: 8px;
}
.scc-tag.is-conflict { color: var(--severity-critical); background: rgba(180,35,24,.10); }

/* ============================================================
   STRESS MODE
============================================================ */
.stress-layout {
  max-width: 920px;
  margin: 0 auto;
  padding: 28px 36px 64px;
}
.stress-input-wrap {
  background: var(--bg-pane);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.stress-input {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-app);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 6px 6px 6px 14px;
  transition: border-color .12s, box-shadow .12s;
}
.stress-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.stress-input .prompt {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
}
.stress-input input {
  flex: 1 1 auto;
  background: transparent;
  border: 0; outline: 0;
  font-size: 13.5px;
  color: var(--text-primary);
  font-weight: 450;
}
.stress-input input::placeholder { color: var(--text-muted); }
.stress-input .stress-go {
  height: 30px;
  padding: 0 14px;
  background: var(--accent);
  color: var(--text-inverse);
  border: 0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.stress-input .stress-go:hover { filter: brightness(0.92); }
.stress-suggest { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.stress-suggest button {
  font-size: 11.5px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-subtle);
  padding: 4px 10px;
  border-radius: 12px;
  cursor: pointer;
}
.stress-suggest button:hover { color: var(--text-primary); border-color: var(--border-strong); background: var(--bg-app); }

.stress-current {
  background: var(--bg-pane);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 18px;
}
.stress-q {
  font-size: 13.5px;
  font-weight: 550;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.stress-q .prompt { color: var(--accent); font-family: var(--font-mono); margin-right: 8px; }

.stress-trace {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
}
.stress-trace li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  align-items: baseline;
  animation: lineFade .22s ease;
}
.stress-trace .stl-bullet { color: var(--text-faint); text-align: right; }
.stress-trace .stl-text { color: var(--text-secondary); }
.stress-trace .st-hit    { color: var(--severity-success); font-weight: 600; letter-spacing: 0.02em; }
.stress-trace .st-iss    { color: var(--severity-critical); font-weight: 600; }
.stress-trace .st-rule   { color: var(--accent); font-weight: 600; }
.stress-trace .st-key    { color: var(--mode-stress); }
.stress-trace .st-ref    { color: var(--severity-medium); }
.stress-trace .st-arrow  { color: var(--severity-critical); font-weight: 700; }
.stress-trace .st-num    { color: var(--text-primary); font-weight: 600; }
.stress-trace .st-bool   { color: var(--mode-simulate); }
.stress-trace .st-label  { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-size: 11.5px; }
.stress-trace .pulse::after {
  content: "";
  display: inline-block;
  width: 7px; height: 13px;
  margin-left: 2px;
  background: currentColor;
  vertical-align: -2px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.stress-verdict {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 14px;
  align-items: start;
  border: 1px solid;
}
.stress-verdict.is-safe   { background: var(--bg-active-green); border-color: #b8d8be; }
.stress-verdict.is-unsafe { background: var(--bg-active-red);   border-color: #f1c0bc; }
.stress-verdict.is-warn   { background: var(--bg-active-amber); border-color: #e7d28a; }
.sv-icon {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 600;
  line-height: 18px;
  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-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin: 0 0 4px; }
.sv-detail { font-size: 12.5px; color: var(--text-secondary); margin: 0 0 8px; line-height: 19px; }
.sv-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.sv-tag { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }

/* ---- live what-if outcome (assumptions, timeline, money) ---- */
.sv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 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-h {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600; color: var(--text-muted); margin: 12px 0 6px;
}
.sv-tl { list-style: none; margin: 0; padding: 0; }
.sv-tl li {
  display: grid; grid-template-columns: 78px 14px 1fr; gap: 8px;
  align-items: baseline; padding: 3px 0; font-size: 12px; line-height: 18px;
}
.sv-tl-day { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }
.sv-tl-dot {
  width: 7px; height: 7px; border-radius: 50%; align-self: center;
  background: var(--text-faint); justify-self: center;
}
.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-blocked   .sv-tl-dot { background: transparent; border: 1.5px solid var(--severity-medium); }
.svtl-routine   .sv-tl-dot { background: var(--text-faint); opacity: .55; }
.sv-tl-label { color: var(--text-secondary); }
.svtl-conflict .sv-tl-label { color: var(--text-primary); font-weight: 500; }
.svtl-routine  .sv-tl-label { color: var(--text-muted); }
.sv-life {
  margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--accent-ink);
}
.sv-money { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.sv-mtile {
  border: 1px solid var(--border-subtle); border-radius: 8px; padding: 9px 11px;
  background: color-mix(in srgb, var(--text-inverse) 45%, transparent);
}
.sv-mparty { font-size: 11.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.sv-mrow { display: flex; align-items: baseline; gap: 6px; font-size: 11.5px; color: var(--text-muted); padding: 1px 0; flex-wrap: wrap; }
.sv-mrow b { font-family: var(--font-mono); font-size: 12px; color: var(--text-primary); }
.sv-mrow b.is-neg { color: var(--severity-critical); }
.sv-mrow b.is-pos { color: var(--severity-success); }
.sv-mvs { font-size: 10px; }
.sv-notes { margin-top: 10px; font-size: 11px; color: var(--text-muted); line-height: 17px; }
.sv-suggest { margin-top: 2px; }

.stress-history-h {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--text-muted);
  margin: 22px 0 8px;
}
.stress-history { list-style: none; padding: 0; margin: 0; }
.stress-history li {
  display: grid;
  grid-template-columns: 14px 1fr auto auto;
  gap: 14px;
  padding: 10px 4px;
  align-items: center;
  font-size: 12.5px;
  border-bottom: 1px solid var(--border-hairline);
  cursor: pointer;
}
.stress-history li:hover { background: var(--bg-soft); }
.sh-q { color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-v {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}
.sh-v.is-safe   { color: var(--severity-success);  background: var(--bg-active-green); }
.sh-v.is-unsafe { color: var(--severity-critical); background: var(--bg-active-red); }
.sh-v.is-warn   { color: var(--severity-medium);   background: var(--bg-active-amber); }
.sh-ago { color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; }

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

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

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

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

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

.draft-cmd {
  position: sticky;
  bottom: 12px;
  background: var(--bg-pane);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  box-shadow: 0 4px 14px rgba(31,41,51,.06);
}
.draft-cmd .prompt {
  color: var(--mode-draft);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
}
.draft-cmd input {
  flex: 1;
  border: 0; outline: 0; background: transparent;
  font-size: 13px;
}
.draft-cmd input::placeholder { color: var(--text-muted); }
.draft-cmd-hint { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }
.draft-suggest {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 10px;
}
.draft-suggest button {
  font-size: 11.5px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-subtle);
  padding: 3px 9px;
  border-radius: 4px;
  cursor: pointer;
}
.draft-suggest button:hover { color: var(--mode-draft); border-color: var(--mode-draft); }

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

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

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

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

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

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

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

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

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

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

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

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


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

/* ---- HERO: the five-second read -------------------------------------- */
.rpt-hero {
  position: relative;
  border-radius: 16px;
  padding: 22px 26px 20px;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 12px 30px -18px rgba(20, 26, 34, .5);
  background: linear-gradient(135deg, #2a3646, #1a2431);
}
.rpt-hero.risk-severe  { background: linear-gradient(135deg, #7d1d15, #4a1410); }
.rpt-hero.risk-high    { background: linear-gradient(135deg, #8a3d10, #5a2a10); }
.rpt-hero.risk-medium  { background: linear-gradient(135deg, #7a5a16, #40340f); }
.rpt-hero.risk-low     { background: linear-gradient(135deg, #1e5a3a, #123a26); }
.rpt-hero.risk-clear   { background: linear-gradient(135deg, #1e5a3a, #123a26); }
.rpt-hero-top {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
.rpt-eyebrow { font-weight: 700; opacity: .72; }
.rpt-doc { opacity: .92; letter-spacing: .04em; text-transform: none; font-size: 12.5px; font-weight: 500; }
.rpt-hero-grid { display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.rpt-hero-verdict { flex: 1 1 340px; min-width: 260px; }
.rpt-hero-verdict h1 {
  font-size: 25px; line-height: 1.15; font-weight: 700; letter-spacing: -0.015em;
  margin: 0 0 8px; text-align: left; text-transform: none; font-family: var(--font-ui); color: #fff;
}
.rpt-hero-verdict p { margin: 0; font-size: 13.5px; line-height: 1.5; opacity: .9; max-width: 52ch; }
.rpt-risk-dot { display: none; }
.rpt-hero-stats { display: grid; grid-template-columns: repeat(2, minmax(96px, 1fr)); gap: 9px; flex: 0 0 auto; }
.rpt-tile {
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 11px; padding: 10px 14px; min-width: 96px; backdrop-filter: blur(2px);
}
.rpt-tile b { display: block; font-size: 22px; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; }
.rpt-tile span { display: block; margin-top: 5px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; opacity: .78; }
.rpt-tile.hot { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .3); }
.rpt-sevbar { display: flex; gap: 3px; height: 7px; margin-top: 18px; border-radius: 999px; overflow: hidden; }
.rpt-sevbar .seg { border-radius: 999px; min-width: 6px; }
.rpt-sevbar .seg.sev-critical { background: #ff6b5e; }
.rpt-sevbar .seg.sev-high { background: #ffa05e; }
.rpt-sevbar .seg.sev-medium { background: #ffd27a; }
.rpt-sevbar .seg.sev-low { background: rgba(255, 255, 255, .5); }

/* ---- FIX FIRST -------------------------------------------------------- */
.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) ---------------------------- */
.rpt-controls {
  position: sticky; top: 0; z-index: 8;
  margin: 26px 0 16px; padding: 12px 0;
  background: color-mix(in srgb, var(--bg-page) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 10px;
}
.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-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; }

/* ---- 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; }
.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: center; 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;
}
.rc-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rc-title { font-size: 14.5px; font-weight: 650; color: var(--text-primary); line-height: 1.25; }
.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: inline-flex; align-items: center; gap: 6px; flex: none; }
.rc-pill { display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 650; letter-spacing: .02em; white-space: nowrap; }
.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); }
.rc-chev { flex: none; color: var(--text-muted); transition: transform .2s ease; }
.rpt-card.open .rc-chev { transform: rotate(180deg); }

/* body: reveal with a grid-rows animation so it slides, never snaps. The single
   inner wrapper is what makes 0fr→1fr collapse cleanly (overflow hidden on it). */
.rpt-card-body {
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease;
}
.rpt-card.open .rpt-card-body { grid-template-rows: 1fr; }
.rpt-card-inner { overflow: hidden; min-height: 0; padding: 0 18px; }
.rpt-card.open .rpt-card-inner { padding: 2px 18px 18px; }
.rc-where { font-size: 11.5px; color: var(--text-muted); font-weight: 600; margin: 0 0 12px; text-transform: uppercase; letter-spacing: .04em; }
.rc-block { margin: 0 0 14px; }
.rc-block h4 {
  margin: 0 0 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted);
}
.rc-block p { margin: 0; font-size: 13.5px; line-height: 1.58; color: var(--text-primary); }
.rc-block.rc-plain p { color: var(--text-primary); }
.rc-block.rc-example { padding: 10px 14px; background: var(--bg-soft); border-radius: 9px; }
.rc-block.rc-example h4 { color: var(--accent-ink); }
.rc-block.rc-example p { font-style: italic; color: var(--text-secondary); }
.rc-block.rc-fix { padding: 12px 14px; background: color-mix(in srgb, var(--severity-success) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--severity-success) 18%, transparent); border-radius: 9px; margin-bottom: 0; }
.rc-block.rc-fix h4 { color: var(--severity-success); }
.rc-quote { margin: 0 0 14px; }
.rc-quote figcaption { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
.rc-quote blockquote {
  margin: 0; padding: 10px 14px; border-left: 3px solid var(--border-subtle);
  background: var(--bg-pane); border-radius: 0 8px 8px 0;
  font-family: var(--font-doc); font-size: 13px; line-height: 1.55; color: var(--text-primary);
}

/* ---- FOOTER ----------------------------------------------------------- */
.rpt-foot { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 16px; }
.rpt-foot-block h4 { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 700; }
.rpt-foot-block p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }
.rpt-foot-block p.mono { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); word-break: break-word; }
.rpt-disclaimer { margin: 4px 0 0; font-size: 11.5px; font-style: italic; color: var(--text-muted); }

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


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

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

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

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

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

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

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

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

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

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

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

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

/* Toggle rows with switch + optional description */
.set-rows { display: flex; flex-direction: column; }
.set-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; cursor: pointer; }
.set-toggle-row + .set-toggle-row { border-top: 1px solid var(--border-hairline); }
.st-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-label { font-size: 13px; font-weight: 550; color: var(--text-primary); }
.st-desc { font-size: 11.5px; line-height: 1.4; color: var(--text-muted); }
.set-toggle-row input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  position: relative; width: 38px; height: 22px; border-radius: 999px;
  background: var(--border-strong); cursor: pointer; transition: background .18s;
}
.set-toggle-row input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .18s;
}
.set-toggle-row input[type="checkbox"]:checked { background: var(--accent-ink); }
.set-toggle-row input[type="checkbox"]:checked::after { transform: translateX(16px); }
.set-toggle-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

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

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

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

/* Scenario picker menu */
.menu {
  position: fixed;
  z-index: 70;
  background: var(--bg-doc);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(31,41,51,.12);
  padding: 5px;
  min-width: 250px;
  font-size: 12.5px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
}
.menu-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 6px 9px 4px;
}
.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; }
.menu-item .mi-meta { margin-left: auto; color: var(--text-muted); font-size: 10.5px; font-family: var(--font-mono); }

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

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

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

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

/* ============================================================
   Mode transition (subtle slide-in)
============================================================ */
.stage-page, .sim-layout, .stress-layout, .draft-layout, .report-layout {
  animation: modeIn .22s cubic-bezier(.4,0,.2,1);
}
@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; }
  .sim-layout { grid-template-columns: 1fr; }
  .sim-stage { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  :root { --library-w: 220px; }
}

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

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

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

/* Scope caveats moved out of a page-wide banner and behind this triangle,
   next to Export findings. They qualify the findings; they are not the first
   thing a reader should meet. Shown only when there are any. */
.btn-caveat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-inline: 8px;
  color: var(--severity-high);
}
.btn-caveat:hover { background: rgba(214, 105, 79, .1); }
.btn-caveat svg { flex: none; }
.btn-caveat .caveat-count {
  font-size: 11px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cav-lede {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.cav-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.55;
}
.cav-list li + li { margin-top: 6px; }

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

/* The same two blocks on the memo page. Detect and the memo render the same
   structured fields, so a finding reads the same way wherever it is opened
   and in the exported PDF/DOCX. */
.rc-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 7px 20px;
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-left: 2px solid var(--border-subtle);
}
.rc-fact { min-width: 0; }
.rc-fact dt {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 2px;
}
.rc-fact dd {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.rc-tl {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: rctl;
}
.rc-tl li {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 4px 0 4px 14px;
  font-size: 12.5px;
  line-height: 1.45;
  border-left: 2px solid var(--border-subtle);
}
.rc-tl li::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.rc-tl li:last-child { border-left-color: transparent; }
.rc-tl-day {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--text-muted);
}
.rc-tl-text { min-width: 0; overflow-wrap: anywhere; }

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

.pb {
  position: relative;
  padding: 6px 12px 6px 18px;
  margin: 2px -12px;
  border-radius: 0 6px 6px 0;
  font-family: var(--font-doc);
  font-size: 14px;
  line-height: 24px;
  text-align: justify;
  hyphens: auto;
  cursor: text;
}
.pb:hover { background: var(--bg-soft); }
.pb:focus-within { background: var(--bg-soft); outline: 0; }
.pb::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px;
  background: transparent;
  border-radius: 2px;
}
.pb-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  margin-right: 10px;
  font-weight: 500;
  cursor: default;
}
.pb-num[data-edit-number] {
  border-radius: 3px;
  padding: 1px 2px;
}
.pb-num[data-edit-number]:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.pb-num-input {
  width: 64px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 1px 4px;
  background: var(--bg-doc);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 11.5px;
  outline: none;
}
.pb-body[contenteditable] { outline: none; }
.pb-body { display: inline; }
.pb-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mode-draft);
  background: color-mix(in srgb, var(--mode-draft) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--mode-draft) 30%, transparent);
  padding: 1px 6px;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: middle;
}

.pb-section {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-doc);
  font-size: 14.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  margin: 28px -12px 10px;
  padding: 6px 12px 6px 18px;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
}
.pb-section .pb-num {
  font-family: var(--font-mono);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.03em;
  font-size: 12.5px;
}
.pb {
  scroll-margin-top: 24px;
}
.pb.pb-section.is-jump-target,
.pb.pb-subsection.is-jump-target {
  background: var(--accent-soft);
  box-shadow: -8px 0 0 0 var(--accent-soft), 8px 0 0 0 var(--accent-soft);
  animation: jumpPulse 1.4s ease;
}
.pb-subsection {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-doc);
  font-size: 13.5px;
  font-weight: 650;
  margin: 18px -12px 6px;
  padding: 4px 12px 4px 18px;
  text-align: left;
}
.pb-subsection .pb-num {
  font-family: var(--font-mono);
  color: var(--accent);
  font-weight: 600;
  font-size: 11.5px;
}
.pb-appendix {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 36px -12px 10px;
  padding: 8px 12px 8px 18px;
  border-top: 2px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
}
.pb-appendix .pb-tag {
  color: var(--mode-stress);
  background: color-mix(in srgb, var(--mode-stress) 10%, transparent);
  border-color: color-mix(in srgb, var(--mode-stress) 30%, transparent);
}

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

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

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

.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);
}
.pb-signature-layout {
  display: grid;
  grid-template-columns: repeat(var(--sig-cols, 2), minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  font-family: var(--font-doc);
}
.pb-signature-col {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  background: var(--bg-pane);
}
.pb-signature-line {
  min-height: 20px;
  margin: 0 0 5px;
  font-size: 12.5px;
  line-height: 18px;
  color: var(--text-primary);
  white-space: pre-wrap;
}
.pb-signature-line.is-entity {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.pb-signature-line.is-meta {
  color: var(--text-secondary);
  font-size: 11.8px;
}
.pb-signature-rule {
  height: 22px;
  border-bottom: 1px solid var(--text-muted);
  margin: 10px 0 8px;
}
.pb-signature-line .pb-body {
  display: block;
  outline: none;
}
.pb-signature-line:focus-within {
  background: var(--bg-soft);
  border-radius: 3px;
}
@media (max-width: 720px) {
  .pb-signature-layout {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }
  .pb-signature-col + .pb-signature-col {
    border-left: 0;
    padding-left: 0;
  }
}

.pb-table-host {
  padding: 10px 12px 12px 18px;
  margin: 10px -12px;
  background: var(--bg-pane);
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
  text-align: left;
}
.pb-table-label {
  display: inline-block;
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.pb-table-attached { margin-top: 8px; }
.pb-table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.pb-schedule-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 2px 0 10px;
}
.pb-schedule-card {
  min-height: 78px;
  padding: 9px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  background: var(--bg-doc);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pb-schedule-card-kicker {
  font-family: var(--font-doc);
  font-size: 11.5px;
  color: var(--text-secondary);
}
.pb-schedule-card-value {
  font-family: var(--font-mono);
  font-size: 10.8px;
  color: var(--text-primary);
}
.pb-schedule-card-rate {
  margin-top: auto;
  font-family: var(--font-mono);
  font-weight: 750;
  font-size: 15px;
  color: var(--accent);
}
@media (max-width: 760px) {
  .pb-schedule-cards { grid-template-columns: 1fr; }
}
.pb-table th, .pb-table td {
  border: 1px solid var(--border-subtle);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}
.pb-table th {
  background: var(--bg-pane);
  font-weight: 600;
  color: var(--text-primary);
}
.pb-table th[contenteditable]:focus,
.pb-table td[contenteditable]:focus {
  outline: 1px solid var(--mode-draft);
  outline-offset: -1px;
  background: color-mix(in srgb, var(--mode-draft) 6%, transparent);
}

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

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

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

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

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

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

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

/* ============================================================
   Right-edge bubble panel (Samsung-style edge panel)
   - .edge-trigger is an invisible hover zone at the right edge.
   - .edge-panel attaches flush to the right side: its left side
     is a half-pill, its right side is the screen edge.
============================================================ */
.edge-trigger {
  position: fixed;
  top: 22%;
  right: 0;
  width: 14px;
  height: 56%;
  z-index: 70;
  background: transparent;
}
.edge-panel {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translate(8px, -50%);
  z-index: 71;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  width: 154px;
  padding: 10px 8px 10px 12px;
  background: var(--bg-doc);
  border: 1px solid var(--border-subtle);
  border-right: 0;
  /* Half-pill on the left, flush against the right edge */
  border-radius: 28px 0 0 28px;
  box-shadow: -8px 0 24px rgba(31, 41, 51, 0.08), -2px 0 6px rgba(31, 41, 51, 0.04);
  opacity: 0;
  pointer-events: none;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1), opacity .18s;
}
.edge-panel.is-on {
  transform: translate(0, -50%);
  opacity: 1;
  pointer-events: auto;
}
.edge-btn {
  width: 100%;
  min-height: 40px;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 8px;
  align-items: center;
  border: 0;
  background: transparent;
  border-radius: 20px 0 0 20px;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  padding: 5px 8px 5px 6px;
  transition: background .14s, color .14s, transform .14s;
}
.edge-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-soft);
}
.edge-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.edge-label {
  font-size: 11.5px;
  font-weight: 650;
  color: var(--text-primary);
  white-space: nowrap;
}
.edge-sub {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}
.edge-btn:hover {
  background: var(--bg-soft);
  color: var(--text-primary);
}
.edge-btn.is-active {
  background: var(--accent-soft);
  color: var(--accent);
}
.edge-btn.is-active .edge-icon {
  background: var(--bg-doc);
}
.edge-btn.is-disabled {
  color: var(--text-faint);
  cursor: default;
}
.edge-btn.is-disabled:hover {
  background: transparent;
  color: var(--text-faint);
}
.edge-btn:active { transform: scale(0.94); }
.pb-align {
  position: absolute;
  right: 6px;
  bottom: -10px;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  background: var(--bg-doc);
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(20, 28, 40, .08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px);
  transition: opacity .12s, transform .12s;
  z-index: 5;
}
.pb:hover > .pb-align,
.pb-doc-place:hover > .pb-align,
.pb-doc-date:hover > .pb-align,
.pb-signature-line:hover > .pb-align {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.pb-align-btn {
  width: 19px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
}
.pb-align-btn:hover { background: var(--bg-soft); color: var(--text-primary); }
.pb-align-btn.is-active { background: var(--accent-soft); color: var(--accent); }
/* Hide the floating toolbars only while the user is typing in the body —
   not while they're interacting with the toolbars themselves. Using :has()
   means focus on a toolbar button does NOT trigger the hide, so clicks land. */
.pb:has(> .pb-body:focus) > .pb-toolbar,
.pb:has(> .pb-body:focus) > .pb-align,
.pb-doc-place:has(.pb-body:focus) > .pb-align,
.pb-doc-date:has(.pb-body:focus) > .pb-align,
.pb-signature-line:has(.pb-body:focus) > .pb-align {
  opacity: 0;
  pointer-events: none;
}
.pb > .pb-align:hover,
.pb > .pb-align:focus-within {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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