/* DD Memo cockpit — the indigo product UI.
   One typeface (Plus Jakarta Sans, 400–800), an indigo accent on a white-card /
   off-white ground, soft 12px cards behind 1px borders, and tabular figures in
   the same face — no separate mono. Class names are stable API for the
   templates; restyle here, not there. */

/* Self-hosted brand font — served same-origin from /static, so confidential
   M&A diligence never leaks font usage to a third-party CDN, and CSP
   `font-src 'self'` allows it. Plus Jakarta Sans 400/500/600/700/800 (OFL-1.1,
   licence beside the files), latin + latin-ext subsets split by unicode-range
   so a page only fetches the block it renders. font-display:swap paints
   immediately in the fallback then swaps, so first render is never blocked. */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/vendor/fonts/plus-jakarta-sans-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/vendor/fonts/plus-jakarta-sans-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/vendor/fonts/plus-jakarta-sans-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/vendor/fonts/plus-jakarta-sans-latin-ext-500.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/vendor/fonts/plus-jakarta-sans-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/vendor/fonts/plus-jakarta-sans-latin-ext-600.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/vendor/fonts/plus-jakarta-sans-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/vendor/fonts/plus-jakarta-sans-latin-ext-700.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/vendor/fonts/plus-jakarta-sans-latin-800.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/vendor/fonts/plus-jakarta-sans-latin-ext-800.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  /* One face for everything — headings, body, labels, figures. The three font
     tokens are kept as API (templates and exports reference all three); they
     now resolve to the same family, and figures read tabular through
     font-variant-numeric on .m / .mono rather than through a mono face. */
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: var(--font-body);
  --font-mono: var(--font-body);

  /* Dark surface — the next-step hero, verdict plates, report covers. */
  --vdr-navy: #151827;
  --vdr-navy-2: #1e2238;        /* same-hue step for gradient partners */
  --vdr-on-dark-body: #c7cad8;  /* body copy on the dark surface */
  --vdr-on-dark-accent: #b4a5fc;/* kicker / link on the dark surface */
  --vdr-on-dark-faint: #9ca3af; /* ~6.3:1 on #151827 — dark surfaces ONLY, never on a light ground */

  /* Indigo accent. Reserved for the one primary action per surface, the active
     rail item and links; the tint pair carries chips and selected rows. The
     --nav-* token names are kept for API stability (base.html references them). */
  --vdr-accent: #5b3bf0;           /* the brand tile: the logo's violet (2026-09-14) */
  --vdr-accent-strong: #5238ca;
  --vdr-accent-soft: #f1eeff;
  --vdr-accent-line: #d1c7fe;
  --vdr-accent-rgb: 91, 59, 240;
  --page-gutter-x: 28px;
  --page-gutter-y: 26px;

  /* Navbar — a white rail on the off-white ground. */
  --nav-violet: var(--vdr-accent);
  --nav-violet-deep: #5238ca;    /* active text */
  --nav-violet-strong: #5238ca;  /* hover / brand text */
  --nav-tint: #f3f4f6;           /* hover surface */
  --nav-tint-active: #f1eeff;    /* active surface */
  --nav-line: #e5e7eb;           /* rail border */
  --nav-text: #374151;           /* nav body text */
  --nav-text-muted: #6b7280;     /* section labels / counts */

  /* Ground and surfaces: white cards on an off-white canvas, parted by a 1px
     #e5e7eb border and 12px corners — no elevation on cards. */
  --vdr-line: #e5e7eb;
  --vdr-line-strong: #d1d5db;
  --vdr-row-hover: #f9fafb;
  --vdr-row-selected: #f1eeff;
  --vdr-bg: #ffffff;            /* card */
  --vdr-bg-soft: #f9fafb;       /* app canvas / table header row */
  --vdr-text: #111827;
  --vdr-text-secondary: #4b5563;
  --vdr-text-muted: #6b7280;    /* the small-text floor on light grounds (4.83:1) */
  --vdr-icon: #9ca3af;          /* icon strokes and dividers ONLY — 2.54:1, never text */
  /* Severity: a saturated hue for marks and figures, a tint pair for pills. */
  --vdr-flag-red: #dc2626;
  --vdr-flag-red-tint: #fee2e2;
  --vdr-flag-red-text: #b91c1c;
  --vdr-flag-amber: #d97706;
  --vdr-flag-amber-tint: #fffbeb;
  --vdr-flag-amber-text: #92400e;
  --vdr-flag-green: #059669;
  --vdr-flag-green-tint: #ecfdf5;
  --vdr-flag-green-text: #047857;
  /* Radii: card 12 · control 9 · pill 6. Cards carry no shadow; the frame
     shadow is for floating surfaces only (tooltips, menus, the mobile drawer). */
  --card-radius: 12px;
  --control-radius: 9px;
  --pill-radius: 6px;
  --card-shadow: none;
  --frame-shadow: 0 18px 44px rgba(17, 24, 39, .14);
}

/* Root drives the rem ramp: Tailwind's text-sm/-lg/-2xl and rem spacing all key
   off this, so raising it from 13px lifts the whole type scale and the content
   whitespace at once (e.g. an h1 text-2xl goes 19.5px -> 22.5px). The dense
   text-[10/11/12px] label chrome is absolute px and deliberately stays put. */
html { font-size: 15px; background: var(--vdr-bg-soft); }
/* Keyboard focus is one visible 2px accent ring on every interactive element —
   never the browser's default blue. Applies only under :focus-visible so mouse
   clicks stay clean. Component rules that draw their own ring pair with this. */
:focus-visible { outline: 2px solid var(--vdr-accent); outline-offset: 2px; }
body {
  background: var(--vdr-bg-soft);
  color: var(--vdr-text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Headings are the same face, heavy and tight: 700–800 with negative
   tracking. Sentence case everywhere — no uppercase transforms on titles. A bare
   element rule (specificity 0,0,1) sets only the default, so any Tailwind
   weight utility (font-bold, etc.) still wins. */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); font-weight: 700; letter-spacing: -.02em; }

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
/* Code and hashes keep a real mono face — the only place one is used. */
.code, code, kbd, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---------- Type helpers ----------
   Shared by the templates and the self-contained exports. .hd = heavy display
   weight; .lbl = the 10px uppercase micro-label (kicker, table header, section
   label); .m = tabular figure; .blueprint frames a surface as a soft card. */
.hd { font-family: var(--font-head); font-weight: 800; letter-spacing: -.02em; }
.lbl { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--vdr-text-muted); }
.m { font-variant-numeric: tabular-nums; }
.blueprint { position: relative; border: 1px solid var(--vdr-line); border-radius: var(--card-radius); background: var(--vdr-bg); }

/* ---------- App shell: white rail + slim topbar ---------- */

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 216px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  /* A white rail beside the off-white canvas, parted by one 1px border. The
     --nav-* tokens resolve from :root (light values); nothing is re-scoped. */
  background: #fff;
  border-right: 1px solid var(--nav-line);
  color: var(--nav-text);
}

.side-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 8px;
}
.side-brand .logo-mark {
  /* The brand mark is the logo itself -- the founder's icon, whole, at 48px --
     not a glyph inside a tile of our own. */
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: block;
}
.side-brand .logo-mark img { width: 48px; height: 48px; display: block; }
.side-brand .brand-name {
  color: var(--vdr-text);
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  max-width: 168px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deal-code {
  color: var(--nav-text-muted);
  font-size: 11px;
  margin-top: 3px;
}

/* Sidebar search — a button that opens the ⌘K palette (one search entry
   point: evidence, ask, jump, method). */
.side-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 28px);
  margin: 0 14px 8px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid var(--nav-line);
  border-radius: var(--control-radius);
  color: var(--nav-text-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.side-search:hover { border-color: var(--vdr-line-strong); background: var(--vdr-row-hover); }
.side-search svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--vdr-icon); }
.side-search-label { flex: 1; min-width: 0; font-size: 12.5px; color: var(--nav-text-muted); }
.side-search .kbd {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  color: var(--nav-text-muted);
  background: #f3f4f6;
  border: 0;
  border-radius: 5px;
  padding: 2px 6px;
}
/* The "Ctrl K" hint is meaningless without a physical keyboard — hide on touch. */
@media (hover: none) and (pointer: coarse) {
  .side-search .kbd, .palette-foot, .palette-esc { display: none; }
}

/* Primary action pill */
.side-primary {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 14px 8px;
  padding: 10px 12px;
  border-radius: var(--control-radius);
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  background: var(--vdr-accent);
  transition: background 0.12s, box-shadow 0.12s, transform 0.04s;
}
.side-primary svg { width: 17px; height: 17px; flex-shrink: 0; }
.side-primary:hover { background: var(--vdr-accent-strong); }
.side-primary:active { transform: translateY(1px); }
.side-primary.is-active { box-shadow: 0 0 0 3px rgba(var(--vdr-accent-rgb), 0.24); }

.side-nav { flex: 1; overflow-y: auto; padding: 2px 0 8px; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--vdr-line-strong) transparent; }
.side-nav::-webkit-scrollbar { width: 6px; }
.side-nav::-webkit-scrollbar-thumb { background: var(--vdr-line-strong); border-radius: 3px; }
.side-nav::-webkit-scrollbar-track { background: transparent; }

/* Top-level direct links (All Deals / Overview) */
.side-nav a.nav-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1px 10px;
  padding: 4px 10px;
  line-height: 20px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--nav-text);
  transition: background 0.12s, color 0.12s;
}
.side-nav a.nav-top svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--nav-text-muted); }
.side-nav a.nav-top:hover { background: var(--nav-tint); color: var(--vdr-text); }
.side-nav a.nav-top.active {
  background: var(--nav-tint-active);
  color: var(--nav-violet-deep);
  font-weight: 600;
}
.side-nav a.nav-top.active svg { color: var(--vdr-accent); }

/* Rail sections (DEAL / ANALYSIS / …): a 10px uppercase label over flat
   items, each with an optional count at its right edge. */
.side-label {
  font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--nav-text-muted);
  padding: 11px 16px 3px; line-height: 12px;
}
.side-nav > .side-label:first-child { padding-top: 6px; }
.side-nav a.nav-sub {
  display: flex; align-items: center; gap: 8px;
  margin: 1px 10px; padding: 3px 10px; line-height: 18px; border-radius: 8px;
  font-size: 13px; color: var(--nav-text); text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.side-nav a.nav-sub:hover { background: var(--nav-tint); color: var(--vdr-text); }
.side-nav a.nav-sub.active {
  background: var(--nav-tint-active); color: var(--nav-violet-deep); font-weight: 600;
}
.nav-lbl { flex: 1; min-width: 0; }
.nav-badge {
  margin-left: auto; flex: none;
  font-variant-numeric: tabular-nums; font-size: 11px; color: var(--nav-text-muted);
}
/* An outstanding count that gates the work — a red tint pill, never a bare hue. */
.nav-badge.red {
  background: var(--vdr-flag-red-tint); color: var(--vdr-flag-red-text);
  font-size: 11.5px; font-weight: 600; padding: 1px 7px; line-height: 16px; border-radius: var(--pill-radius);
}
.nav-badge.danger { color: var(--vdr-flag-red-text); }
.nav-badge.accent-text { color: var(--vdr-accent); font-size: 10px; font-weight: 700; }
.nav-badge.accent {
  background: var(--vdr-accent-soft); color: var(--vdr-accent-strong);
  font-size: 11.5px; font-weight: 600; padding: 1px 7px; line-height: 16px; border-radius: var(--pill-radius);
}

/* ---------- Rail foot: stage block + account menu ---------- */
.side-foot-stack { margin-top: auto; flex: none; padding: 8px 14px 10px; position: relative; }
/* "More below" — a white fade over the rail's last visible rows while the
   nav can still scroll (app.js sets data-nav-more on the sidebar). */
.side-foot-stack::before {
  content: ""; position: absolute; left: 0; right: 0; top: -32px; height: 32px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  pointer-events: none; opacity: 0; transition: opacity 0.15s;
}
.sidebar[data-nav-more] .side-foot-stack::before { opacity: 1; }

/* The stage block — stage N of 5, five segments, what holds the next stage.
   It links straight to the next action, so the primary move is one click
   from every screen. */
.stage-block {
  display: block;
  background: var(--vdr-bg-soft);
  border: 1px solid var(--vdr-line);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  color: var(--vdr-text-secondary);
  transition: border-color 0.12s, background 0.12s;
}
.stage-block:hover { border-color: var(--vdr-line-strong); background: #fff; }
.stage-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.stage-block-kicker { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--vdr-text-secondary); }
.stage-block-of { font-size: 11px; color: var(--vdr-text-muted); }
.stage-segs { display: flex; gap: 3px; margin-top: 8px; }
.stage-segs .seg { flex: 1; height: 4px; border-radius: 2px; background: var(--vdr-line); }
.stage-segs .seg.done { background: var(--vdr-accent); }
.stage-segs .seg.current { background: #9681f8; }
.stage-block-foot { display: flex; align-items: flex-start; gap: 7px; margin-top: 8px; }
.stage-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--vdr-line-strong); flex: none; margin-top: 5px; }
.stage-dot.blocker { background: var(--vdr-flag-red); }
.stage-block-line { flex: 1; min-width: 0; font-size: 12px; line-height: 1.35; color: var(--vdr-text-secondary); }
.stage-block-foot svg { width: 13px; height: 13px; flex: none; margin-top: 2px; color: var(--vdr-accent); }

/* Account menu — the settings configured once for the firm live here, beside
   sign-out, out of the deal rail. */
.account { position: relative; border-top: 1px solid var(--vdr-line); padding-top: 8px; }
.account-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 4px; border-radius: 8px; text-align: left; font: inherit; cursor: pointer;
  color: var(--nav-text); transition: background 0.12s;
}
.account-btn:hover { background: var(--nav-tint); }
.account-btn .avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--vdr-accent-soft); color: var(--vdr-accent-strong);
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  display: grid; place-items: center;
}
.account-btn .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.who-name { font-size: 12.5px; color: var(--vdr-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-sub { font-size: 11px; color: var(--nav-text-muted); margin-top: 1px; }
.account-btn > svg { width: 14px; height: 14px; flex: none; color: var(--vdr-icon); transition: transform 0.15s; }
.account-btn[aria-expanded="true"] > svg { transform: rotate(180deg); }
.account-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 60;
  background: #fff; border: 1px solid var(--vdr-line); border-radius: 10px;
  box-shadow: var(--frame-shadow); padding: 6px;
}
.account-menu-label { padding: 6px 10px 4px; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--nav-text-muted); }
.account-menu a, .account-menu button {
  display: block; width: 100%; text-align: left; padding: 7px 10px; border-radius: 7px;
  font: inherit; font-size: 13px; color: var(--nav-text); cursor: pointer;
}
.account-menu a:hover, .account-menu button:hover { background: var(--nav-tint); color: var(--vdr-text); }
.account-menu a.active { background: var(--nav-tint-active); color: var(--nav-violet-deep); font-weight: 600; }
.account-menu-sep { height: 1px; background: var(--vdr-line); margin: 6px 4px; }

.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 58px;
  background: #fff;
  border-bottom: 1px solid var(--vdr-line);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
}

/* Breadcrumb: All deals / <deal> / <screen>. The deal segment is the switcher
   itself, styled as a crumb, so changing deals never leaves the crumb line. */
.crumbs { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13px; }
.crumb { color: var(--vdr-text-muted); white-space: nowrap; }
a.crumb:hover { color: var(--vdr-text); }
.crumb.current { color: var(--vdr-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.crumb-sep { color: var(--vdr-line-strong); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 20px; font-size: 12px; color: var(--vdr-text-muted); white-space: nowrap; }
.topbar-access { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--vdr-text-secondary); }
.topbar-access svg { width: 16px; height: 16px; color: var(--vdr-text-muted); }
.topbar-access:hover { color: var(--vdr-text); }

.page {
  width: 100%;
  max-width: 1460px;
  margin: 0 auto;
  padding: var(--page-gutter-y) var(--page-gutter-x) 34px;
}

/* Mobile nav trigger + backdrop — inert on desktop, activated in the ≤1024 query. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: 4px;
  border: 1px solid var(--vdr-line);
  border-radius: var(--control-radius);
  background: #fff;
  color: var(--vdr-text);
  flex-shrink: 0;
}
.nav-toggle svg { width: 18px; height: 18px; }
.nav-scrim { display: none; }
.workflow-inline-cta { display: none !important; }

@media (max-width: 1024px) {
  /* The sidebar becomes an off-canvas drawer instead of stacking its full
     height (including the open Advanced tree) on top of the content. The
     hamburger in the topbar toggles it; a scrim dims and dismisses it. */
  .nav-toggle { display: inline-flex; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: 82%;
    max-width: 320px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    border-right: 1px solid var(--nav-line);
    box-shadow: var(--frame-shadow);
  }
  .app-shell.nav-open .sidebar { transform: translateX(0); }
  .app-shell.nav-open .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(17, 24, 39, 0.45);
  }
  .content { width: 100%; min-width: 0; }
  .page { --page-gutter-x: 24px; --page-gutter-y: 22px; }
  .workflow-inline-cta { display: inline-flex !important; }
}
@media (max-width: 640px) {
  .page { --page-gutter-x: 16px; --page-gutter-y: 16px; padding-bottom: 24px; }
  .topbar { gap: 8px; padding: 0 12px; }
  .nav-toggle { margin-right: 0; }
  .deal-switcher { min-width: 0; gap: 4px; }
  .deal-switcher select { max-width: min(44vw, 170px); }
  .topbar-right { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* ---------- Inputs ---------- */

input[type="text"], input[type="search"], input[type="email"],
input[type="password"], select, textarea {
  border-radius: var(--control-radius);
  background: #fff;
  transition: border-color 0.12s, box-shadow 0.12s;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--vdr-accent);
  outline-offset: 0;
  border-color: var(--vdr-accent) !important;
  box-shadow: none;
}
/* Component class referenced across templates (assessment, ask). Tailwind
   preflight zeroes borders and padding, so without this rule the fields
   render as invisible border-less strips on white panes. */
.vdr-input {
  border: 1px solid var(--vdr-line);
  border-radius: var(--control-radius);
  padding: 7px 10px;
  background: #fff;
  font-size: 13px;
  color: var(--vdr-text);
}
/* The sidebar pill draws its own focus ring via .side-search:focus-within —
   suppress the generic input ring so focus is not doubled. */
.side-search input[type="search"]:focus-visible { outline: none; box-shadow: none; }
/* Sign-off controls sit on the navy report cover: the generic rule paints
   them #fff while the cover's color:#fff would otherwise be inherited as
   their text color (white-on-white). Pair both halves explicitly. */
.report-signoff select,
.report-signoff input[type="text"] {
  color: var(--vdr-text);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 4px 8px;
  font-size: 12px;
}
.report-signoff button {
  background: #fff;
  color: var(--vdr-navy);
  border: 0;
  border-radius: var(--control-radius);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- Cards / panes ---------- */

.vdr-pane {
  background: var(--vdr-bg);
  border: 1px solid var(--vdr-line);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

/* ---------- Evidence index (browser left pane) ---------- */

.vdr-folder {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: baseline; gap: 8px;
  margin: 2px 8px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--vdr-text); cursor: pointer;
  font-size: 13px;
}
.vdr-folder:hover { background: var(--vdr-row-hover); }
.vdr-folder.active {
  background: var(--vdr-accent-soft);
  color: var(--vdr-accent-strong);
  font-weight: 600;
}
.vdr-folder .num {
  font-variant-numeric: tabular-nums; color: var(--vdr-text-muted); font-size: 11px;
  min-width: 30px;
}
.vdr-folder.active .num { color: var(--vdr-accent); }
.vdr-folder .folder-count {
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #f3f4f6;
  color: var(--vdr-text-muted);
  font-size: 10.5px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.vdr-folder.active .folder-count { background: #fff; color: var(--vdr-accent-strong); }

/* ---------- Tables ---------- */

table.vdr-table { width: 100%; border-collapse: collapse; }
table.vdr-table th {
  text-align: left; font-weight: 600; font-size: 10px;
  color: var(--vdr-text-muted); text-transform: uppercase; letter-spacing: 0.12em;
  padding: 10px 14px; border-bottom: 1px solid var(--vdr-line);
  background: var(--vdr-bg-soft);
  position: sticky; top: 0; z-index: 1;
}
table.vdr-table td {
  padding: 11px 14px; border-bottom: 1px solid #f3f4f6;
  vertical-align: top; font-size: 13.5px;
}
table.vdr-table tbody tr:last-child td { border-bottom: 0; }
table.vdr-table tr:hover td { background: var(--vdr-row-hover); }
table.vdr-table tr.selected td { background: var(--vdr-row-selected); }
table.vdr-table .mono {
  font-variant-numeric: tabular-nums; font-size: 11.5px;
  color: var(--vdr-text-muted);
}

/* ---------- Buttons ---------- */

.vdr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 15px; border-radius: var(--control-radius);
  /* Two kinds only. The default is the quiet secondary — white, 1px border,
     dark label. The indigo fill is reserved for the one primary action per
     surface (.vdr-btn.primary plus the sidebar .side-primary) so the accent
     reads as "do this first", not "every button". */
  background: #fff; color: var(--vdr-text-secondary);
  font-family: var(--font-body);
  font-weight: 600; font-size: 13px; line-height: 1.3;
  border: 1px solid var(--vdr-line); cursor: pointer;
  box-shadow: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.06s;
}
.vdr-btn:hover { background: var(--vdr-row-hover); border-color: var(--vdr-line-strong); color: var(--vdr-text); }
.vdr-btn.primary { background: var(--vdr-accent); border-color: var(--vdr-accent); color: #fff; font-weight: 700; }
.vdr-btn.primary:hover { background: var(--vdr-accent-strong); border-color: var(--vdr-accent-strong); color: #fff; }
.vdr-btn:active { transform: translateY(1px); }
.vdr-btn.ghost {
  background: transparent; color: var(--vdr-text-secondary);
  border-color: var(--vdr-line);
  box-shadow: none;
}
.vdr-btn.ghost:hover { background: var(--vdr-row-hover); border-color: var(--vdr-line-strong); color: var(--vdr-text); }
.vdr-btn.danger { background: var(--vdr-flag-red); border-color: var(--vdr-flag-red); color: #fff; font-weight: 700; }
.vdr-btn.danger:hover { background: var(--vdr-flag-red-text); border-color: var(--vdr-flag-red-text); color: #fff; }

/* ---------- Chips ---------- */

/* One chip language app-wide: 11.5px / 600 sentence case on a 6px-radius
   tint — never a bare hue on white. Red / amber / green tints carry severity,
   the indigo tint carries accent states, grey is neutral. */
.vdr-badge, .vdr-sev, .vdr-gate, .vdr-status, .vdr-cat {
  display: inline-block; padding: 3px 9px; border-radius: var(--pill-radius);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0;
  line-height: 1.4; white-space: nowrap;
}

.vdr-badge.human    { background: var(--vdr-accent-soft); color: var(--vdr-accent-strong); }
.vdr-badge.agent    { background: var(--vdr-flag-green-tint); color: var(--vdr-flag-green-text); }
.vdr-badge.running  { background: var(--vdr-flag-amber-tint); color: var(--vdr-flag-amber-text); }
.vdr-badge.complete { background: var(--vdr-flag-green-tint); color: var(--vdr-flag-green-text); }
.vdr-badge.failed   { background: var(--vdr-flag-red-tint); color: var(--vdr-flag-red-text); }

.vdr-flag-red   { color: var(--vdr-flag-red); }
.vdr-flag-amber { color: var(--vdr-flag-amber); }
.vdr-flag-green { color: var(--vdr-flag-green); }

.vdr-sev.red    { background: var(--vdr-flag-red-tint); color: var(--vdr-flag-red-text); }
.vdr-sev.yellow { background: var(--vdr-flag-amber-tint); color: var(--vdr-flag-amber-text); }
.vdr-sev.green  { background: var(--vdr-flag-green-tint); color: var(--vdr-flag-green-text); }
.vdr-sev.info   { background: #f3f4f6; color: var(--vdr-text-secondary); }
/* 5x5 matrix scale */
.vdr-sev.critical    { background: var(--vdr-flag-red); color: #fff; }
.vdr-sev.severe      { background: var(--vdr-flag-red-tint); color: var(--vdr-flag-red-text); }
.vdr-sev.moderate    { background: var(--vdr-flag-amber-tint); color: var(--vdr-flag-amber-text); }
.vdr-sev.sustainable { background: var(--vdr-flag-green-tint); color: var(--vdr-flag-green-text); }

.vdr-gate.failing { background: var(--vdr-flag-red-tint); color: var(--vdr-flag-red-text); }
.vdr-gate.warning { background: var(--vdr-flag-amber-tint); color: var(--vdr-flag-amber-text); }
.vdr-gate.passing { background: var(--vdr-flag-green-tint); color: var(--vdr-flag-green-text); }
.vdr-gate.unknown { background: #f3f4f6; color: var(--vdr-text-secondary); }

.vdr-status            { background: var(--vdr-accent-soft); color: var(--vdr-accent-strong); }
.vdr-status.open       { background: var(--vdr-flag-amber-tint); color: var(--vdr-flag-amber-text); }
.vdr-status.mitigated  { background: var(--vdr-flag-green-tint); color: var(--vdr-flag-green-text); }
.vdr-status.accepted   { background: var(--vdr-accent-soft); color: var(--vdr-accent-strong); }
.vdr-status.superseded { background: #f3f4f6; color: var(--vdr-text-secondary); }

/* Posture pill with status dot */
.vdr-rec {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: var(--pill-radius);
  font-size: 12px; font-weight: 700; letter-spacing: 0;
}
.vdr-rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.vdr-rec.go             { background: var(--vdr-flag-green-tint); color: var(--vdr-flag-green-text); }
.vdr-rec.conditional_go { background: var(--vdr-flag-amber-tint); color: var(--vdr-flag-amber-text); }
.vdr-rec.no_go          { background: var(--vdr-flag-red-tint); color: var(--vdr-flag-red-text); }
.vdr-rec.pending        { background: #f3f4f6; color: var(--vdr-text-secondary); }

/* Integration cost categories */
.vdr-cat { padding: 2px 8px; }
.vdr-cat.ote        { background: var(--vdr-flag-amber-tint); color: var(--vdr-flag-amber-text); }
.vdr-cat.capex      { background: var(--vdr-accent-soft); color: var(--vdr-accent-strong); }
.vdr-cat.opex_delta { background: var(--vdr-flag-red-tint); color: var(--vdr-flag-red-text); }
.vdr-cat.synergy    { background: var(--vdr-flag-green-tint); color: var(--vdr-flag-green-text); }
.vdr-cat.idsw       { background: var(--vdr-accent-soft); color: var(--vdr-accent-strong); }
.vdr-cat.other      { background: #f3f4f6; color: var(--vdr-text-secondary); }
.vdr-cat.synergy_attainment    { background: var(--vdr-flag-green-tint); color: var(--vdr-flag-green-text); }
.vdr-cat.tsa_exit_enablement   { background: var(--vdr-accent-soft); color: var(--vdr-accent-strong); }
.vdr-cat.systems_integration   { background: var(--vdr-accent-soft); color: var(--vdr-accent-strong); }
.vdr-cat.regulatory_compliance { background: var(--vdr-flag-red-tint); color: var(--vdr-flag-red-text); }

.evidence-pill {
  display: inline-block; padding: 2px 8px; margin: 2px 4px 0 0; border-radius: var(--pill-radius);
  background: #f3f4f6; color: var(--vdr-text-secondary);
  font-size: 11px; font-weight: 500;
  transition: background 0.12s, color 0.12s;
}
.evidence-pill:hover { background: var(--vdr-accent-soft); color: var(--vdr-accent-strong); }

/* ---------- Progress bars ---------- */

.cov-bar {
  position: relative; height: 5px; background: var(--vdr-line); border-radius: 3px; overflow: hidden;
}
.cov-bar > span {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px;
  background: var(--vdr-accent);
  transition: width 0.4s ease;
}
.cov-bar.warn > span { background: var(--vdr-flag-amber); }
.cov-bar.crit > span { background: var(--vdr-flag-red); }

/* ---------- KPI strips (inside panes) ---------- */

.vdr-kpi {
  display: flex; flex-wrap: wrap; gap: 32px; padding: 16px 20px;
  background: var(--vdr-bg);
  border: 1px solid var(--vdr-line);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
.vdr-pane .vdr-kpi {
  border: 0; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--vdr-line);
}
.vdr-kpi .kpi { flex: 0 0 auto; min-width: 92px; }
.vdr-kpi .kpi .label {
  font-size: 12px; color: var(--vdr-text-muted);
  font-weight: 500;
}
.vdr-kpi .kpi .value {
  font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--vdr-text);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.vdr-kpi .kpi.red    .value { color: var(--vdr-flag-red); }
.vdr-kpi .kpi.yellow .value { color: var(--vdr-flag-amber); }
.vdr-kpi .kpi.green  .value { color: var(--vdr-flag-green); }

/* ---------- Preview / memo ---------- */

.vdr-preview pre {
  white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  color: var(--vdr-text);
}

.memo-doc { max-width: 820px; }
.memo-doc h1 { font-size: 22px; font-weight: 700; margin: 1.2em 0 0.4em; }
.memo-doc h2 { font-size: 17px; font-weight: 700; margin: 1.2em 0 0.4em; color: var(--vdr-text); }
.memo-doc h3 { font-size: 14px; font-weight: 700; margin: 1em 0 0.3em; }
.memo-doc p, .memo-doc li { margin: 0.4em 0; }
.memo-doc table { border-collapse: collapse; margin: 1em 0; font-size: 12px; }
.memo-doc th, .memo-doc td { border: 1px solid var(--vdr-line); padding: 6px 10px; }
.memo-doc code { background: #f3f4f6; padding: 1px 4px; border-radius: 4px; font-size: 12px; }
.memo-doc ul, .memo-doc ol { padding-left: 1.4em; }

.htmx-swapping { opacity: 0.55; transition: opacity 0.12s; }

/* ---------- Cockpit: hero, gauge, scoreboard ---------- */

.tdd-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 8px;
}

/* Quiet page heading used on the primary customer surfaces. It removes the
   extra "card around the title" so the decision/evidence content becomes the
   first visual object, matching the deliverable-first product language. */
.workspace-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 0 0 8px;
}
.workspace-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 3px;
}
.workspace-title-row h1 {
  margin: 0;
  color: var(--vdr-text);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.tdd-hero h1 { font-weight: 800; letter-spacing: -.03em; }
.workspace-deck {
  max-width: 820px;
  margin-top: 7px;
  color: var(--vdr-text-muted);
  font-size: 13.5px;
  line-height: 1.55;
}
.workspace-meta {
  margin-top: 5px;
  color: var(--vdr-text-muted);
  font-size: 12px;
}

/* Evidence room — a functional version of the clean routed-document surface
   shown publicly: all workstreams by default, with the working index, upload,
   and preview controls kept visible around it. */
.evidence-workspace {
  display: grid;
  grid-template-columns: minmax(210px, 234px) minmax(430px, 1fr) minmax(320px, 400px);
  gap: 16px;
  height: calc(100vh - 330px);
  min-height: 560px;
}
.evidence-index,
.evidence-list,
.evidence-preview {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  border: 1px solid var(--vdr-line);
  border-radius: var(--card-radius);
  overflow: hidden;
}
.evidence-index { overflow-y: auto; }
.evidence-pane-head {
  min-height: 45px;
  padding: 0 15px;
  border-bottom: 1px solid var(--vdr-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--vdr-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}
.evidence-pane-head b {
  color: var(--vdr-text);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
}
.evidence-toolbar {
  min-height: 55px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--vdr-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
}
.evidence-summary {
  flex-shrink: 0;
  color: var(--vdr-text-muted);
  font-size: 11.5px;
}
.evidence-summary strong { color: var(--vdr-text); font-variant-numeric: tabular-nums; }
.evidence-query { display: block; margin-top: 2px; font-size: 10px; }
.evidence-query a { color: var(--vdr-accent-strong); font-weight: 700; }
.evidence-upload {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.evidence-upload select {
  max-width: 190px;
  border: 1px solid var(--vdr-line);
  padding: 6px 8px;
  color: var(--vdr-text);
  font-size: 11px;
}
.evidence-upload .vdr-btn { padding: 6px 11px; font-size: 11px; }
.evidence-file-picker {
  display: inline-flex;
  min-width: 112px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--vdr-accent-line);
  border-radius: var(--control-radius);
  background: var(--vdr-accent-soft);
  color: var(--vdr-accent-strong);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.evidence-file-picker:hover { border-color: var(--vdr-accent); }
.evidence-file-picker:focus-within { outline: 2px solid var(--vdr-accent); outline-offset: 2px; }
.evidence-file-picker svg { width: 14px; height: 14px; flex-shrink: 0; }
.evidence-scroll { display: flex; min-height: 0; flex: 1; flex-direction: column; overflow-y: auto; }
.evidence-row {
  width: 100%;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease;
}
.evidence-row:hover { background: var(--vdr-row-hover); }
.evidence-row:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--vdr-accent);
  outline-offset: -2px;
}
.evidence-empty {
  margin: auto;
  padding: 48px 24px;
  text-align: center;
  color: var(--vdr-text-muted);
  font-size: 13px;
}
.evidence-empty strong { display: block; color: var(--vdr-text); font-size: 14px; font-weight: 650; }
.evidence-empty small { display: block; max-width: 380px; margin: 7px auto 0; font-size: 11.5px; line-height: 1.5; }
.evidence-empty-icon {
  display: grid;
  width: 38px;
  height: 38px;
  margin: 0 auto 13px;
  place-items: center;
  border: 1px solid var(--vdr-accent-line);
  border-radius: var(--control-radius);
  background: var(--vdr-accent-soft);
  color: var(--vdr-accent-strong);
  font-size: 22px;
  font-weight: 300;
}
.evidence-empty-action {
  display: inline-flex;
  margin-top: 16px;
  padding: 7px 12px;
  border: 1px solid var(--vdr-line);
  border-radius: var(--control-radius);
  background: #fff;
  color: var(--vdr-text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.evidence-empty-action:hover { border-color: var(--vdr-accent); color: var(--vdr-accent-strong); }
.evidence-preview-empty {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.evidence-preview-empty .preview-icon {
  width: 34px;
  height: 34px;
  margin-bottom: 10px;
  border-radius: var(--control-radius);
  display: grid;
  place-items: center;
  background: var(--vdr-accent-soft);
  color: var(--vdr-accent);
  font-size: 18px;
}
.evidence-preview-empty strong { color: var(--vdr-text); font-size: 12px; }
.evidence-preview-empty small { max-width: 220px; margin-top: 4px; font-size: 10.5px; line-height: 1.5; }

/* ---------- Evidence room ----------
   Coverage-aware data room: a head strip of metrics over three hairline panes
   (index · held+outstanding register · document detail). The .evidence-*
   grid/pane classes above stay the stable API; the .ev-* rules dress it. */
.ev-room { min-height: 0; }
.ev-upload-error {
  padding: 9px var(--page-gutter-x);
  border-bottom: 1px solid var(--vdr-flag-amber);
  background: var(--vdr-flag-amber-tint);
  color: var(--vdr-flag-amber-text);
  font-size: 12.5px;
}

/* Head strip */
.ev-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 18px var(--page-gutter-x) 15px;
  border-bottom: 1px solid var(--vdr-line);
  background: var(--vdr-bg);
}
.ev-eyebrow { color: var(--vdr-accent-strong); }
.ev-head .ind-h1 { margin-top: 4px; }
.ev-head-right { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.ev-metric .lbl { color: var(--vdr-text-muted); }
.ev-metric-n { font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin-top: 3px; color: var(--vdr-text); }
.ev-metric-n.red { color: var(--vdr-flag-red); }
.ev-metric-n small { font-size: 12px; color: var(--vdr-text-muted); }
.ev-metric-div { width: 1px; height: 34px; background: var(--vdr-line); }
.ev-upload select.vdr-input { max-width: 190px; font-size: 12.5px; }
.ev-upload .evidence-file-picker { background: #fff; color: var(--vdr-text-secondary); border-color: var(--vdr-line); }
.ev-upload .evidence-file-picker:hover { border-color: var(--vdr-line-strong); color: var(--vdr-text); }

/* Panes are white cards on the ground. */
.evidence-index, .evidence-list, .evidence-preview { background: var(--vdr-bg); }

/* Left: coverage-aware index */
.ev-index-scroll { flex: 1; overflow-y: auto; padding: 6px 0; }
.ev-idx {
  display: grid; grid-template-columns: 24px 1fr auto; gap: 9px; align-items: center;
  padding: 8px 14px; color: var(--vdr-text); border-left: 2px solid transparent;
}
.ev-idx:hover { background: var(--vdr-row-hover); }
.ev-idx.active { background: var(--vdr-row-selected); border-left-color: var(--vdr-accent); }
.ev-idx.muted { color: var(--vdr-text-muted); }
.ev-idx-no { font-size: 10px; color: var(--vdr-text-muted); }
.ev-idx.active .ev-idx-no { color: var(--vdr-accent-strong); }
.ev-idx-name { font-size: 13px; }
.ev-idx-c { font-size: 10.5px; color: var(--vdr-text-muted); }
.ev-idx-c.danger, .ev-idx-group.danger { color: var(--vdr-flag-red); }
.ev-idx-group { color: var(--vdr-text-muted); padding: 13px 14px 6px; }
.ev-idx-group.danger { border-top: 1px solid var(--vdr-line); margin-top: 6px; padding-top: 13px; }
.ev-coverage { padding: 13px 14px; border-top: 1px solid var(--vdr-line); }
.ev-coverage .lbl { color: var(--vdr-text-muted); }
.ev-cov-bar {
  display: flex; height: 6px; margin-top: 8px; border-radius: 3px; overflow: hidden;
  background: var(--vdr-line);
}
.ev-cov-fill { background: var(--vdr-accent); }
.ev-cov-note { margin: 8px 0 0; font-size: 11.5px; color: var(--vdr-text-muted); line-height: 1.5; }

/* Centre: held artifacts + outstanding register */
.ev-list-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--vdr-line); background: var(--vdr-bg);
}
.ev-tabs { display: flex; }
.ev-tabs { gap: 2px; }
.ev-tab {
  font-size: 12px; font-weight: 600; letter-spacing: 0;
  padding: 5px 11px; border-radius: var(--pill-radius); color: var(--vdr-text-muted);
}
.ev-tab.on { background: var(--vdr-accent-soft); color: var(--vdr-accent-strong); }
.ev-tab { cursor: pointer; transition: background .12s ease, color .12s ease; }
.ev-tab:hover { background: var(--vdr-row-hover); color: var(--vdr-text); }
.ev-tab.on:hover { background: var(--vdr-accent-soft); color: var(--vdr-accent-strong); }
.ev-sort { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ev-sort .lbl { color: var(--vdr-text-muted); }
.ev-sort-v { border: 1px solid var(--vdr-line); border-radius: var(--pill-radius); padding: 5px 9px; color: var(--vdr-text); }
.ev-sort-form { display: flex; align-items: center; gap: 8px; }
.ev-sort-sel { font-size: 12px; background: var(--vdr-bg); cursor: pointer; border-radius: var(--pill-radius); }

.ev-card {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: flex-start;
  padding: 14px 18px; border-bottom: 1px solid var(--vdr-line);
  border-left: 2px solid transparent; color: var(--vdr-text);
}
.ev-card:hover { background: var(--vdr-row-hover); }
.ev-card.sel { background: var(--vdr-row-selected); border-left-color: var(--vdr-accent); }
.ev-card-no { font-size: 10.5px; color: var(--vdr-text-muted); padding-top: 3px; }
.ev-card.sel .ev-card-no { color: var(--vdr-accent-strong); }
.ev-card-main { min-width: 0; display: flex; flex-direction: column; }
.ev-card-titles { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ev-card-t { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--vdr-text); }
.ev-card-s { font-size: 11.5px; color: var(--vdr-text-muted); margin-top: 3px; }
.ev-card-proof { font-size: 12.5px; color: var(--vdr-text-secondary); line-height: 1.5; margin-top: 7px; }
.ev-card-cited { text-align: right; }
.ev-card-cited .lbl { color: var(--vdr-text-muted); }
.ev-card-cited-n { font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 800; line-height: 1.2; color: var(--vdr-text); }

/* Severity badges — tint pills, 11.5px / 600. */
.ev-badge {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0;
  padding: 3px 9px; border-radius: var(--pill-radius); white-space: nowrap;
}
.ev-badge.red { background: var(--vdr-flag-red-tint); color: var(--vdr-flag-red-text); }
.ev-badge.amber { background: var(--vdr-flag-amber-tint); color: var(--vdr-flag-amber-text); }
.ev-badge.green { background: var(--vdr-flag-green-tint); color: var(--vdr-flag-green-text); }

/* Outstanding band */
.ev-out-band {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; background: var(--vdr-bg-soft); border-bottom: 1px solid var(--vdr-line);
}
.ev-out-band .danger { color: var(--vdr-flag-red); }
.ev-out-link { font-size: 12px; }
.ev-out {
  display: grid; grid-template-columns: 40px 1fr 108px 88px; gap: 12px; align-items: center;
  padding: 11px 18px; border-bottom: 1px solid var(--vdr-line); color: var(--vdr-text-muted);
}
.ev-out:hover { background: var(--vdr-row-hover); }
.ev-out-no { font-size: 10.5px; color: var(--vdr-text-muted); }
.ev-out-t { font-size: 13.5px; font-weight: 600; color: var(--vdr-text); }
.ev-out-b { display: block; font-size: 11.5px; color: var(--vdr-text-muted); margin-top: 2px; }
.ev-out-tag { color: var(--vdr-text-muted); }
.ev-out-tag.red { color: var(--vdr-flag-red); }
.ev-out-due { font-size: 11px; color: var(--vdr-text-muted); text-align: right; }
.ev-list-foot {
  display: flex; justify-content: space-between; padding: 10px 18px;
  font-size: 11.5px; color: var(--vdr-text-muted);
}

/* Right: document detail */
.ev-detail-scroll { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.ev-detail-head { padding: 16px; border-bottom: 1px solid var(--vdr-line); }
.ev-detail-title { font-size: 18px; line-height: 1.15; color: var(--vdr-text); }
.ev-detail-meta { font-size: 11px; color: var(--vdr-text-muted); margin-top: 4px; }
.ev-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.ev-tag {
  font-size: 11px; font-weight: 600; letter-spacing: 0; border-radius: var(--pill-radius);
  background: #f3f4f6; color: var(--vdr-text-secondary); padding: 3px 8px;
}
.ev-tag.ok { background: var(--vdr-flag-green-tint); color: var(--vdr-flag-green-text); }
.ev-preview {
  margin: 16px; min-height: 118px; background: var(--vdr-bg-soft); border-radius: 10px;
  display: grid; place-items: center; padding: 16px; text-align: center;
}
.ev-preview-excerpt { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--vdr-text-secondary); }
.ev-preview-ph { display: grid; place-items: center; gap: 8px; color: var(--vdr-accent-strong); }
.ev-detail-body { padding: 0 16px 16px; }
.ev-sec-h { color: var(--vdr-text-muted); padding-bottom: 8px; border-bottom: 1px solid var(--vdr-line); }
.ev-sec-h2 { margin-top: 14px; }
.ev-passage { padding: 12px 0; border-bottom: 1px solid var(--vdr-line); }
.ev-passage-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.ev-passage-p { color: var(--vdr-accent-strong); }
.ev-sev.red { color: var(--vdr-flag-red); }
.ev-sev.amber { color: var(--vdr-flag-amber); }
.ev-sev.green { color: var(--vdr-flag-green); }
.ev-quote {
  margin: 7px 0 0; padding-left: 11px; border-left: 2px solid var(--vdr-accent);
  font-size: 12.5px; line-height: 1.55; color: var(--vdr-text-secondary);
}
.ev-passage-refs { font-size: 11.5px; color: var(--vdr-text-muted); margin-top: 7px; }
.ev-empty-note { font-size: 12px; color: var(--vdr-text-muted); line-height: 1.5; padding: 12px 0; }
.ev-custody { display: grid; gap: 7px; margin-top: 9px; }
.ev-custody-row {
  display: grid; grid-template-columns: 84px 1fr; gap: 10px;
  font-size: 11.5px; color: var(--vdr-text-muted);
}
.ev-custody-when { color: var(--vdr-text); }
.ev-detail-foot {
  margin-top: auto; display: flex; gap: 9px; padding: 14px 16px;
  border-top: 1px solid var(--vdr-line);
}
.ev-detail-foot .vdr-btn { flex: 1; text-align: center; }

/* Narrow viewports: the three panes stack into one scrolling column. */
@media (max-width: 1080px) {
  .evidence-workspace { grid-template-columns: 1fr; height: auto; }
  .ev-index-scroll { max-height: 320px; }
}

/* ---------- Exceptions ----------
   Two-pane sign-off queue: individual blocker/advisory risks on the left, an
   in-page disposition pane on the right (judgment happens here). Reuses the
   .ev-head / .ev-metric / .ev-tabs / .ev-tag chrome from the Evidence room. */
.exc-room { min-height: 0; }
.exc-head-titles { max-width: 60ch; }
.exc-sub { margin: 6px 0 0; font-size: 13px; color: var(--vdr-text-muted); line-height: 1.5; }
.exc-log-btn { margin-left: 8px; }
.exc-workspace {
  display: grid; grid-template-columns: minmax(0, 1fr) 496px; gap: 16px;
  height: calc(100vh - 330px); min-height: 560px;
}
.exc-queue, .exc-resolve {
  background: var(--vdr-bg); display: flex; flex-direction: column;
  min-width: 0; overflow: hidden;
  border: 1px solid var(--vdr-line); border-radius: var(--card-radius);
}

/* Queue */
.exc-qbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 20px; border-bottom: 1px solid var(--vdr-line);
}
.exc-qhint { margin-left: auto; color: var(--vdr-text-muted); }
.exc-scroll { flex: 1; overflow-y: auto; }
.exc-band {
  padding: 10px 20px; background: var(--vdr-bg-soft);
  border-bottom: 1px solid var(--vdr-line);
}
.exc-band .lbl { color: var(--vdr-text-muted); }
.exc-card {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: flex-start;
  padding: 15px 20px; border-bottom: 1px solid var(--vdr-line);
  border-left: 3px solid transparent; color: var(--vdr-text);
}
.exc-card:hover { background: var(--vdr-row-hover); }
.exc-card.blocker { border-left-color: var(--vdr-flag-red); }
.exc-card.advisory { border-left-color: var(--vdr-flag-amber); }
.exc-card.sel { background: var(--vdr-row-selected); }
.exc-no { font-size: 11px; color: var(--vdr-text-muted); padding-top: 4px; }
.exc-card.sel .exc-no { color: var(--vdr-accent-strong); }
.exc-main { min-width: 0; }
.exc-titlerow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.exc-t { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: var(--vdr-text); }
.exc-ws { color: var(--vdr-text-muted); }
.exc-detail { font-size: 12.5px; color: var(--vdr-text-secondary); line-height: 1.5; margin-top: 7px; }
.exc-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 9px; }
.exc-meta .lbl { color: var(--vdr-text-muted); }
.exc-status { flex: none; padding-top: 5px; color: var(--vdr-flag-amber); white-space: nowrap; }
.exc-status.pending { color: var(--vdr-text-muted); }
.exc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px;
}
.exc-foot .lbl { color: var(--vdr-text-muted); }
.exc-foot-link { font-size: 12.5px; }

/* Blocker/advisory badge */
.exc-badge {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0;
  padding: 3px 9px; border-radius: var(--pill-radius); white-space: nowrap;
}
.exc-badge.red { background: var(--vdr-flag-red-tint); color: var(--vdr-flag-red-text); }
.exc-badge.amber { background: var(--vdr-flag-amber-tint); color: var(--vdr-flag-amber-text); }
.exc-badge.ok { background: var(--vdr-flag-green-tint); color: var(--vdr-flag-green-text); }
.exc-card.disposed { border-left-color: var(--vdr-flag-green); }
.exc-status.ok { color: var(--vdr-flag-green); }
.exc-disposed { border: 1px solid var(--vdr-line); border-radius: 10px; padding: 12px 14px; }
.exc-disposed-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.exc-disposed-note { margin: 0; }

/* Resolve pane */
.exc-resolve { overflow-y: auto; }
.exc-rhead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-bottom: 1px solid var(--vdr-line);
}
.exc-rhead .lbl { color: var(--vdr-text-muted); }
.exc-rhead-no { color: var(--vdr-accent-strong) !important; }
.exc-rtitle-wrap { padding: 18px; border-bottom: 1px solid var(--vdr-line); }
.exc-rtitle { font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--vdr-text); }
.exc-sec { padding: 16px 18px; border-bottom: 1px solid var(--vdr-line); }
.exc-sec-h { color: var(--vdr-text-muted); display: block; }
.exc-asserted { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: var(--vdr-text); }
.exc-ev { margin-top: 10px; padding-left: 11px; border-left: 2px solid var(--vdr-accent); }
.exc-ev-ref { font-size: 10.5px; color: var(--vdr-accent-strong); }
.exc-ev .ev-quote { margin-top: 5px; border-left: 0; padding-left: 0; }
.exc-challenge { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.exc-challenge-note { font-size: 11.5px; color: var(--vdr-text-muted); }

/* Disposition form */
.exc-form { display: flex; flex-direction: column; }
.exc-disp {
  display: grid; gap: 1px; background: var(--vdr-line);
  border: 1px solid var(--vdr-line); border-radius: 10px; overflow: hidden; margin-top: 10px;
}
.exc-opt {
  background: var(--vdr-bg); padding: 11px 13px; display: grid;
  grid-template-columns: 16px 1fr; gap: 11px; align-items: start; cursor: pointer;
}
.exc-opt:hover { background: var(--vdr-row-hover); }
.exc-opt input { margin-top: 3px; accent-color: var(--vdr-accent); }
.exc-opt:has(input:checked) { background: var(--vdr-row-selected); }
.exc-opt-body { display: flex; flex-direction: column; }
.exc-opt-t { font-size: 13.5px; font-weight: 600; }
.exc-opt-d { font-size: 11.5px; color: var(--vdr-text-muted); line-height: 1.5; margin-top: 2px; }
.exc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.exc-field { display: flex; flex-direction: column; }
.exc-field-full { margin-top: 12px; }
.exc-input {
  font-size: 13px; margin-top: 6px; border: 1px solid var(--vdr-line);
  padding: 8px 10px; background: #fff; color: var(--vdr-text); border-radius: var(--control-radius);
}
.exc-textarea {
  font-size: 13px; line-height: 1.5; margin-top: 6px; border: 1px solid var(--vdr-line);
  padding: 8px 10px; background: #fff; color: var(--vdr-text); resize: vertical;
  font-family: var(--font-body); border-radius: var(--control-radius); width: 100%; box-sizing: border-box;
}
.exc-textarea:focus-visible, .exc-input:focus-visible { outline: 2px solid var(--vdr-accent); outline-offset: 0; }
.exc-cite-note { display: flex; align-items: center; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.exc-cite-note .lbl { color: var(--vdr-text-muted); }
.exc-cite-warn { color: var(--vdr-flag-amber) !important; }
.exc-rfoot {
  margin-top: auto; display: flex; gap: 9px; padding: 14px 18px;
  border-top: 1px solid var(--vdr-line);
}
.exc-defer { flex: 1; text-align: center; }
.exc-record { flex: 2; text-align: center; }

/* Exceptions empty state */
.exc-empty { margin: auto; padding: 48px 24px; text-align: center; }
.exc-empty-h { font-family: var(--font-head); font-weight: 800; letter-spacing: -.02em; font-size: 18px; color: var(--vdr-text); }
.exc-empty-s { font-size: 12px; color: var(--vdr-text-muted); margin-top: 6px; }

@media (max-width: 1080px) {
  .exc-workspace { grid-template-columns: 1fr; height: auto; }
}

/* ---------- Decision pack ----------
   Three columns: contents rail · the deliverable (serif .report-doc) · a fixed
   approval column (code-enforced gate, provenance ledger, sign-off). Reuses the
   .ev-head chrome and the existing .report-doc for the document itself. */
.dp-room {
  min-height: 0;
  /* Fill the viewport below the topbar and the page gutters so the page
     itself never scrolls — the deliverable (.dp-doc) and side columns scroll
     internally. */
  height: calc(100vh - 58px - var(--page-gutter-y) - 34px); overflow: hidden;
}
.dp-head-titles { max-width: 58ch; }
.dp-actions { gap: 9px; }
.dp-locked {
  border: 1px dashed var(--vdr-line-strong); border-radius: var(--control-radius); color: var(--vdr-text-muted);
  padding: 8px 12px; align-self: center; font-size: 12.5px; font-weight: 600;
}
.dp-workspace {
  display: grid; grid-template-columns: 210px minmax(0, 1fr) 400px;
  /* Bound the single row to the container height (minmax min of 0 lets the
     columns shrink below their content) so each column's overflow-y:auto
     actually scrolls, instead of the row auto-growing to the full report. */
  grid-template-rows: minmax(0, 1fr); gap: 16px;
  /* Fill the remaining .dp-room height; each column owns its own scroll. */
  flex: 1; min-height: 0;
}
.dp-toc, .dp-doc, .dp-approval { border: 1px solid var(--vdr-line); border-radius: var(--card-radius); }

/* Contents rail */
.dp-toc { background: var(--vdr-bg); display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.dp-toc-head { padding: 12px 14px; border-bottom: 1px solid var(--vdr-line); }
.dp-toc-head .lbl { color: var(--vdr-text-muted); }
.dp-toc-list { flex: 1; overflow-y: auto; padding: 6px 0; }
.dp-toc-item {
  display: grid; grid-template-columns: 20px 1fr; gap: 9px; padding: 8px 14px;
  color: var(--vdr-text); font-size: 12.5px;
}
.dp-toc-item:hover { background: var(--vdr-row-hover); }
.dp-toc-no { font-size: 10px; color: var(--vdr-text-muted); }
.dp-toc-foot { border-top: 1px solid var(--vdr-line); padding: 14px; }
.dp-toc-foot .lbl { color: var(--vdr-text-muted); }
.dp-toc-cite { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
.dp-toc-cite .m { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--vdr-text); }
.dp-toc-note { font-size: 11.5px; color: var(--vdr-text-muted); line-height: 1.5; margin: 7px 0 0; }

/* Deliverable column */
.dp-doc {
  background: var(--vdr-bg-soft); overflow-y: auto; min-width: 0; min-height: 0;
  padding: 22px; display: flex; flex-direction: column; gap: 18px;
  /* Contain absolutely-positioned descendants (e.g. an .sr-only label deep in
     the report). Without a positioned ancestor their containing block is <html>,
     so they land at their static offset in PAGE space and stretch the root
     scroller — the real source of the whole-page scroll. */
  position: relative;
}
/* The deliverable article must NOT shrink to fit .dp-doc: .report-doc sets
   overflow:hidden, which (as a flex item) zeroes its auto min-height and would
   otherwise collapse it to the cover — clipping the sections and spilling the
   scroll onto the whole page. Pinning flex-shrink:0 keeps it full-height so
   .dp-doc's own overflow-y:auto scrolls the document. */
.dp-doc .memo-doc { margin: 0; max-width: none; flex-shrink: 0; }
.dp-doc-foot { display: flex; justify-content: space-between; padding: 2px 4px; }
.dp-doc-foot .lbl { color: var(--vdr-text-muted); }

/* Approval column */
.dp-approval { background: var(--vdr-bg); display: flex; flex-direction: column; overflow-y: auto; min-height: 0; }
.dp-ap-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-bottom: 1px solid var(--vdr-line);
}
.dp-ap-head .lbl { color: var(--vdr-text-muted); }
.dp-ap-draft { color: var(--vdr-flag-red) !important; }
.dp-ap-signed { color: var(--vdr-flag-green) !important; }
.dp-gate {
  padding: 16px 18px; border-bottom: 1px solid var(--vdr-line);
  background: var(--vdr-accent-soft);
}
.dp-gate-h { color: var(--vdr-accent-strong); }
.dp-gate-p { margin: 9px 0 0; font-size: 13px; line-height: 1.55; color: var(--vdr-text); }
.dp-gate-tbl {
  display: grid; gap: 1px; background: var(--vdr-line);
  border: 1px solid var(--vdr-line); border-radius: 10px; overflow: hidden; margin-top: 12px;
}
.dp-gate-row {
  background: var(--vdr-bg); padding: 9px 12px; display: flex;
  justify-content: space-between; align-items: center; font-size: 12.5px;
}
.dp-gate-row .m { font-size: 13px; }
.dp-gate-row .m.red { color: var(--vdr-flag-red); }
.dp-gate-link { display: inline-block; font-size: 12.5px; margin-top: 11px; }

.dp-sec { padding: 16px 18px; border-bottom: 1px solid var(--vdr-line); }
.dp-sec-h { color: var(--vdr-text-muted); display: block; }
.dp-ledger { display: grid; gap: 9px; margin-top: 11px; }
.dp-led-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.dp-led-t { font-size: 12.5px; font-weight: 600; color: var(--vdr-text); }
.dp-led-s { font-size: 11.5px; color: var(--vdr-text-muted); margin-top: 1px; }
.dp-led-badge {
  font-size: 11px; font-weight: 600; letter-spacing: 0; border-radius: var(--pill-radius);
  padding: 3px 8px; flex: none;
  background: #f3f4f6; color: var(--vdr-text-secondary);
}
.dp-led-badge.verified { background: var(--vdr-flag-green-tint); color: var(--vdr-flag-green-text); }
.dp-led-badge.derived, .dp-led-badge.inferred { background: var(--vdr-flag-amber-tint); color: var(--vdr-flag-amber-text); }

/* Sign-off */
.dp-field { margin-top: 12px; }
.dp-decision { display: flex; margin-top: 6px; }
.dp-dec-opt { position: relative; flex: 1; }
.dp-dec-opt input { position: absolute; opacity: 0; pointer-events: none; }
.dp-dec-opt span {
  display: block; text-align: center;
  font-size: 12px; font-weight: 600;
  padding: 8px 6px; border: 1px solid var(--vdr-line); border-left: 0;
  color: var(--vdr-text-muted); cursor: pointer;
}
.dp-dec-opt:first-child span { border-left: 1px solid var(--vdr-line); border-radius: var(--control-radius) 0 0 var(--control-radius); }
.dp-dec-opt:last-child span { border-radius: 0 var(--control-radius) var(--control-radius) 0; }
.dp-dec-opt input:checked + span { background: var(--vdr-accent); color: #fff; border-color: var(--vdr-accent); }
.dp-dec-opt input:focus-visible + span { outline: 2px solid var(--vdr-accent); outline-offset: 2px; }
.dp-dec-note { font-size: 11.5px; color: var(--vdr-text-muted); line-height: 1.5; margin-top: 7px; }
.dp-refused {
  border: 1px solid #fca5a5; background: var(--vdr-flag-red-tint); border-radius: 10px;
  padding: 10px 12px; margin-top: 12px;
  font-size: 12.5px; line-height: 1.5; color: var(--vdr-flag-red-text);
}
.dp-refused strong { color: var(--vdr-flag-red-text); }
.dp-signed-h { font-family: var(--font-head); font-weight: 800; letter-spacing: -.01em; font-size: 15px; color: var(--vdr-flag-green-text); }
.dp-signed-m { font-size: 11.5px; color: var(--vdr-text-muted); margin-top: 4px; }
.dp-signed-note { font-size: 12.5px; color: var(--vdr-text-secondary); margin-top: 6px; font-style: italic; }
.dp-signed-audit { font-size: 11px; color: var(--vdr-text-muted); margin-top: 6px; }
.dp-note-muted { font-size: 12px; color: var(--vdr-text-muted); line-height: 1.5; margin-top: 8px; }

/* Record / audit trail */
.dp-audit { display: grid; gap: 6px; margin-top: 9px; }
.dp-rec-row { display: grid; grid-template-columns: 92px 1fr; gap: 10px; font-size: 11.5px; color: var(--vdr-text-muted); }
.dp-rec-when { color: var(--vdr-text); }

.dp-rfoot {
  margin-top: auto; display: flex; gap: 9px; padding: 14px 18px;
  border-top: 1px solid var(--vdr-line);
}
.dp-rerun { flex: 1; text-align: center; }
.dp-record { flex: 1; text-align: center; }
.dp-record-off { flex: 1; text-align: center; opacity: .5; cursor: not-allowed; }

@media (max-width: 1080px) {
  /* Stacked single column: let the page scroll normally instead of trapping
     scroll inside a viewport-locked room. */
  .dp-room { height: auto; overflow: visible; }
  .dp-workspace { grid-template-columns: 1fr; height: auto; }
}

.tdd-scoreboard {
  display: grid;
  grid-template-columns: minmax(230px, 1.35fr) repeat(5, minmax(120px, 1fr));
  gap: 12px;
}

.tdd-score, .tdd-metric {
  background: var(--vdr-bg);
  border: 1px solid var(--vdr-line);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: 16px;
  min-height: 96px;
}

.tdd-score { display: flex; align-items: center; gap: 16px; }

.tdd-score .label, .tdd-metric .label {
  font-size: 12px;
  color: var(--vdr-text-muted);
  font-weight: 500;
}

.tdd-metric .value {
  margin-top: 6px;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--vdr-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tdd-metric .value.red    { color: var(--vdr-flag-red); }
.tdd-metric .value.yellow { color: var(--vdr-flag-amber); }
.tdd-metric .value.green  { color: var(--vdr-flag-green); }

/* CSS-only donut gauge: set --val (0-100) inline. */
.gauge {
  --val: 0;
  --gauge-color: var(--vdr-accent);
  width: 96px;
  aspect-ratio: 1;
  flex-shrink: 0;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--vdr-bg) 76%, transparent 77% 100%),
    conic-gradient(var(--gauge-color) calc(var(--val) * 1%), var(--vdr-line) 0);
  display: grid;
  place-items: center;
}
.gauge b {
  font-size: 26px;
  font-weight: 800;
  color: var(--vdr-text);
  font-variant-numeric: tabular-nums;
}
.gauge.red    { --gauge-color: var(--vdr-flag-red); }
.gauge.yellow { --gauge-color: var(--vdr-flag-amber); }
.gauge.green  { --gauge-color: var(--vdr-flag-green); }
/* No run yet: a neutral empty ring with an em-dash, never a "healthy" color. */
.gauge.na     { --gauge-color: var(--vdr-line-strong); }
.gauge.na b   { color: var(--vdr-text-muted); }

.tdd-mini {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 72px;
  border: 1px solid var(--vdr-line);
  border-radius: 10px;
  background: var(--vdr-bg-soft);
  padding: 10px 12px;
  transition: background 0.12s, border-color 0.12s;
}
.tdd-mini:hover { background: var(--vdr-accent-soft); border-color: var(--vdr-accent-line); }
.tdd-mini span {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--vdr-text);
  font-variant-numeric: tabular-nums;
}
.tdd-mini small {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--vdr-text-muted);
  font-weight: 500;
}

@media (max-width: 1280px) {
  .tdd-scoreboard { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tdd-score { grid-column: span 3; }
}

@media (max-width: 720px) {
  .tdd-hero, .workspace-header { align-items: flex-start; flex-direction: column; }
  .tdd-scoreboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tdd-score { grid-column: span 2; }
}

/* ---------- Charts (server-side SVG) ---------- */

.chart-wrap { padding: 16px 18px 14px; }
.chart-svg { width: 100%; height: auto; display: block; }
/* A chart drawn on a ~500px canvas reads as a poster when stretched across a
   1,400px content column; cap it and let the column breathe. */
.chart-narrow .chart-svg { max-width: 640px; }
.chart-donut { width: 132px; height: 132px; flex-shrink: 0; }

/* Donut + legend side by side inside a pane. */
.chart-donut-row { display: flex; align-items: center; gap: 18px; padding: 16px 18px; }

.chart-legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  padding: 0 18px 14px;
}
.chart-legend.tight { padding: 10px 0 0; }
.chart-legend .item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--vdr-text-muted);
}
.chart-legend .dot {
  width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0;
}
.chart-legend .dot.round { border-radius: 50%; }
.chart-legend .item b { color: var(--vdr-text); font-variant-numeric: tabular-nums; }

/* Overview chart trio sit in one row at equal (stretched) height. Pin the
   header to the top and legend to the bottom, and center the chart between
   them so the shorter charts read as balanced cards, not half-empty ones. */
.chart-pane { display: flex; flex-direction: column; }
.chart-pane > .chart-wrap {
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
}
.chart-pane > .chart-donut-row { flex: 1 1 auto; }

/* A one-line caption beneath a chart — the "so what" for the IC. */
.chart-cap {
  padding: 0 18px 16px;
  font-size: 11.5px; color: var(--vdr-text-muted);
  display: flex; flex-wrap: wrap; gap: 4px 18px;
}
.chart-cap b { color: var(--vdr-text); font-variant-numeric: tabular-nums; font-weight: 700; }

/* Charts embedded in the printable memo. */
.memo-figure { margin: 1.1em 0 1.4em; max-width: 640px; }
.memo-figure .chart-svg { border: 1px solid var(--vdr-line); border-radius: 10px; padding: 10px; background: #fff; }
.memo-figure figcaption { font-size: 11px; color: var(--vdr-text-muted); margin-top: 6px; }

/* ---------- IC report deliverable (/memo) ---------- */

.report-actions {
  max-width: 880px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.report-doc {
  max-width: 880px; margin: 0 auto; background: #fff;
  border: 1px solid var(--vdr-line); border-radius: var(--card-radius);
  box-shadow: var(--card-shadow); overflow: hidden;
}

.report-cover {
  padding: 34px 48px 26px;
  background: var(--vdr-navy);
  color: #fff;
}
.report-confidential {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #fca5a5;
}
.report-kicker {
  margin-top: 14px; font-size: 12px; font-weight: 600; letter-spacing: 0;
  color: var(--vdr-on-dark-accent);
}
.report-title { font-size: 31px; font-weight: 800; letter-spacing: -.03em; line-height: 1.12; margin: 4px 0 0; color: #fff; }
.report-meta { margin-top: 7px; font-size: 12px; color: var(--vdr-on-dark-body); }
.report-meta .mono { color: #fff; }

.report-rec {
  margin-top: 22px; display: flex; align-items: center; gap: 18px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px; padding: 15px 18px;
}
.report-rec .rec-badge {
  font-size: 14px; font-weight: 800; letter-spacing: 0; padding: 8px 14px;
  border-radius: var(--pill-radius); white-space: nowrap; flex-shrink: 0;
}
.report-rec.go .rec-badge { background: #064e3b; color: #a7f3d0; }
.report-rec.conditional_go .rec-badge { background: #78350f; color: #fde68a; }
.report-rec.no_go .rec-badge { background: #7f1d1d; color: #fecaca; }
.report-rec.pending .rec-badge { background: rgba(255, 255, 255, 0.12); color: #fff; }
.report-rec .rec-body { flex: 1; min-width: 0; }
.report-rec .rec-line { font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.92); }
.report-rec .rec-score { text-align: center; flex-shrink: 0; }
.report-rec .rec-score-num { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.report-rec .rec-score-lbl { margin-top: 3px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--vdr-on-dark-body); }
.report-byline { margin-top: 16px; font-size: 11.5px; color: var(--vdr-on-dark-body); }

.report-section { padding: 22px 48px; border-bottom: 1px solid var(--vdr-line); }
.report-section:last-child { border-bottom: 0; }
.report-doc.memo-doc .report-section > h2:first-child { margin-top: 0; }

.report-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 16px 0; }
.report-kpi { border: 1px solid var(--vdr-line); border-radius: 10px; padding: 10px 12px; background: var(--vdr-bg-soft); }
.report-kpi > span { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.report-kpi small { font-size: 11.5px; color: var(--vdr-text-muted); font-weight: 500; }
.report-kpi.red > span { color: var(--vdr-flag-red); }
.report-kpi.green > span { color: var(--vdr-flag-green); }

table.report-rag { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 8px 0 4px; }
table.report-rag th {
  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--vdr-text-muted); padding: 7px 10px; border-bottom: 1px solid var(--vdr-line); font-weight: 600;
  background: var(--vdr-bg-soft);
}
table.report-rag th.num, table.report-rag td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.report-rag td { padding: 8px 10px; border-bottom: 1px solid #f3f4f6; }
table.report-rag tr:last-child td { border-bottom: 0; }
.rag-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.rag-dot.red { background: var(--vdr-flag-red); } .rag-dot.yellow { background: var(--vdr-flag-amber); }
.rag-dot.green { background: var(--vdr-flag-green); } .rag-dot.na { background: var(--vdr-line-strong); }

@media (max-width: 720px) {
  .report-actions { align-items: stretch; }
  .report-actions-buttons {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .report-actions-buttons > * { justify-content: center; text-align: center; }
  .report-actions-buttons > :last-child { grid-column: 1 / -1; }
  .report-doc { max-width: 100%; }
  .report-cover, .report-section { padding-left: 22px; padding-right: 22px; }
  .report-section { overflow-x: auto; overscroll-behavior-x: contain; }
  .report-rec { flex-wrap: wrap; }
  .report-kpis { grid-template-columns: repeat(2, 1fr); }
  .memo-status-card .epk-bar { align-items: flex-start; flex-direction: column; gap: 9px; }
  .memo-status-card .epk-stamps { width: 100%; flex-wrap: wrap; gap: 8px; }
  .memo-status-card .epk-foot { align-items: flex-start; flex-direction: column; }
  .memo-status-card .epk-foot .r { text-align: left; }
  .memo-signoff-strip .strip-form { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .memo-signoff-strip .strip-form label,
  .memo-signoff-strip .strip-form select,
  .memo-signoff-strip .strip-form input[type="text"],
  .memo-signoff-strip .strip-form button { width: 100%; min-width: 0; }
}

/* ---------- Print: drop the app chrome, render a clean document ---------- */
@media print {
  .sidebar, .topbar, .report-actions { display: none !important; }
  .app-shell { display: block; }
  .content, .page { display: block; max-width: none; margin: 0; padding: 0; }
  html, body { background: #fff; }
  .chart-svg, .memo-figure, .memo-figure .chart-svg,
  .report-section, .vdr-pane, table.report-rag { break-inside: avoid; }
  .report-section h2, .report-section h3 { break-after: avoid; }
  .report-doc { border: 0; border-radius: 0; box-shadow: none; max-width: none; }

  /* Browsers strip backgrounds by default — keep the dark cover legible. */
  .report-cover { background: #fff !important; color: var(--vdr-text); border-bottom: 2px solid var(--vdr-navy); padding-left: 0; padding-right: 0; }
  .report-kicker, .report-meta, .report-byline { color: var(--vdr-text-muted); }
  .report-meta .mono { color: var(--vdr-text); }
  .report-title { color: var(--vdr-text); }
  .report-confidential { color: var(--vdr-flag-red-text); }
  .report-rec { background: var(--vdr-bg-soft) !important; border-color: var(--vdr-line); }
  .report-rec .rec-line { color: var(--vdr-text); }
  .report-rec .rec-score-num { color: var(--vdr-text) !important; }
  .report-rec .rec-score-lbl { color: var(--vdr-text-muted); }
  .report-rec .rec-badge { border: 1.5px solid var(--vdr-text); color: var(--vdr-text) !important; background: #fff !important; }
  .report-section { padding-left: 0; padding-right: 0; }

  /* Decision-pack 3-column shell → a single flowing document for print/PDF:
     drop the viewport-height locks and internal scroll, hide the side rails. */
  .ev-head, .scr-head, .page-tabs, .dp-toc, .dp-approval, .dp-doc-foot { display: none !important; }
  .dp-room { display: block; height: auto; overflow: visible; margin: 0; }
  .dp-workspace { display: block; height: auto; overflow: visible; border: 0; }
  .dp-doc { display: block; height: auto; overflow: visible; padding: 0; background: #fff; }
}

/* ---------- IC presentation deck (/deck) ---------- */

.deck-actions {
  max-width: 1060px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.deck { max-width: 1060px; margin: 0 auto; counter-reset: slide; min-width: 0; }
/* Presentation screen: a sticky contents rail beside the deck. */
.deck-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.deck-contents { position: sticky; top: calc(58px + 16px); max-height: calc(100vh - 58px - 32px); overflow: auto; }
.deck-toc { list-style: none; margin: 0; padding: 6px 0; }
.deck-toc li a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 10px 18px; color: var(--vdr-text); border-top: 1px solid #f3f4f6; }
.deck-toc li:first-child a { border-top: 0; }
.deck-toc li a:hover { background: var(--vdr-row-hover); }
.deck-toc .n { color: var(--vdr-accent); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12.5px; padding-top: 1px; }
.deck-toc .t { font-size: 13.5px; font-weight: 600; }
.deck-toc .s { display: block; font-size: 11.5px; color: var(--vdr-text-muted); margin-top: 2px; font-weight: 400; }
/* Draft watermark on every slide while the pack is unsigned. */
.deck.is-draft .slide::before { content: "DRAFT · UNSIGNED"; position: absolute; top: 14px; right: 18px; font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--vdr-text-muted); }
.deck.is-draft .slide.cover::before { color: var(--vdr-on-dark-faint); }
@media (max-width: 1100px) { .deck-layout { grid-template-columns: 1fr; } .deck-contents { position: static; max-height: none; } }

.slide {
  position: relative; width: 100%; min-height: 560px;
  background: #fff; border: 1px solid var(--vdr-line); border-radius: var(--card-radius);
  box-shadow: var(--card-shadow); margin-bottom: 18px;
  padding: 30px 40px 46px; display: flex; flex-direction: column;
  counter-increment: slide;
}
.slide-head { border-bottom: 1px solid var(--vdr-line); padding-bottom: 10px; margin-bottom: 16px; }
.slide-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--vdr-accent-strong); }
.slide-title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin: 5px 0 0; color: var(--vdr-text); }
.slide-body { flex: 1 1 auto; min-height: 0; font-size: 13px; line-height: 1.5; color: var(--vdr-text); }
.slide-foot {
  position: absolute; left: 40px; right: 40px; bottom: 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 9.5px; letter-spacing: 0.04em; color: var(--vdr-text-muted);
  border-top: 1px solid var(--vdr-line); padding-top: 7px;
}
.slide-foot .pageno::before { content: counter(slide); }

.slide.cover { background: var(--vdr-navy); color: #fff; justify-content: center; border: 0; }
.slide.cover .cover-confidential { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #fca5a5; }
.slide.cover .cover-kicker { margin-top: 18px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--vdr-on-dark-accent); }
.slide.cover h1 { font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin: 6px 0 0; color: #fff; }
.slide.cover .cover-meta { margin-top: 10px; font-size: 13px; color: var(--vdr-on-dark-body); }
.slide.cover .cover-rec { margin-top: 26px; }
.slide.cover .cover-byline { position: absolute; bottom: 28px; left: 40px; font-size: 11px; color: var(--vdr-on-dark-body); }

.slide-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.slide-cols-60-40 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 26px; align-items: start; }
.slide-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin: 4px 0 14px; }
.slide-fig { display: flex; align-items: center; justify-content: center; }
.slide-fig .chart-svg { width: auto; height: auto; max-height: 330px; max-width: 100%; }
.slide-takeaway {
  background: var(--vdr-accent-soft); border-left: 3px solid var(--vdr-accent);
  padding: 9px 13px; border-radius: 0 8px 8px 0; font-size: 12.5px; margin-bottom: 12px;
}
.deck-recbox {
  background: var(--vdr-bg-soft) !important; border: 1px solid var(--vdr-line); border-radius: 10px;
  padding: 14px 16px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 0 14px;
}
.deck-recbox .rec-score-num { color: var(--vdr-text); }
.deck-recbox .rec-score-lbl { color: var(--vdr-text-muted); }

.deck-h { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vdr-text-muted); margin: 14px 0 5px; }
.deck-h:first-child { margin-top: 0; }
.deck-ul, .deck-ol { padding-left: 1.25em; margin: 4px 0; }
.deck-ul li, .deck-ol li { margin: 3px 0; font-size: 12.5px; line-height: 1.45; }
.deck-ul { list-style: disc; } .deck-ol { list-style: decimal; }
.deck-p { font-size: 12.5px; line-height: 1.55; margin: 4px 0; }
.deck-lead { font-size: 15px; line-height: 1.6; max-width: 60ch; }
.deck-rag { width: 100%; }
.deck-legend td { padding: 5px 8px; font-size: 12px; border-bottom: 1px solid #f3f4f6; }
.deck-prov { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.deck-appendix { columns: 2; column-gap: 28px; }
.deck-appendix h4 { break-after: avoid; }
.deck-appendix ul { break-inside: avoid; }

@media (max-width: 860px) {
  .slide-2col, .slide-cols-60-40, .deck-prov { grid-template-columns: 1fr; }
  .deck-appendix { columns: 1; }
  .slide { padding: 24px; }
}

/* Print: one landscape slide per page, backgrounds on (use --print-background).
   The landscape @page rule lives in deck.html itself — @page cannot be scoped
   by selector, and a global one here hijacked printing of the portrait IC
   report (and every other page). */
@media print {
  html, body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sidebar, .topbar, .deck-actions, .deck-page .scr-head, .deck-page .band, .deck-contents { display: none !important; }
  .deck-layout { display: block; }
  .app-shell { display: block; }
  .content, .page { display: block; max-width: none; margin: 0; padding: 0; }
  .deck { max-width: none; margin: 0; }
  .slide {
    width: 13.333in; min-height: 7.5in; margin: 0;
    border: 0; border-radius: 0; box-shadow: none;
    padding: 0.5in 0.66in 0.5in;
    break-after: page; page-break-after: always; break-inside: avoid;
  }
  .slide:last-child { break-after: auto; page-break-after: auto; }
  .slide-foot { left: 0.66in; right: 0.66in; }
  .slide-fig .chart-svg { max-height: 3.4in; }
}

/* ---------- Deal switcher (a crumb) + deal portfolio cards ---------- */

.deal-switcher { display: flex; align-items: center; flex-shrink: 0; min-width: 0; }
.deal-switcher select {
  border: 1px solid transparent; border-radius: var(--pill-radius); background: transparent;
  font-size: 13px; font-weight: 600; color: var(--vdr-text);
  padding: 3px 6px; margin: 0 -6px; max-width: 220px; cursor: pointer;
}
.deal-switcher select:hover { border-color: var(--vdr-line); background: #fff; }

.deals-grid { align-items: start; }
/* The subscription card on All deals: plan, units used, term. */
.sub-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 14px 18px; }
.sub-card.is-ended { border-color: #fecaca; background: #fef2f2; }
.sub-card-v { font-family: var(--font-head); font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: var(--vdr-text); margin-top: 4px; }
.sub-card-v .n { font-variant-numeric: tabular-nums; }
.sub-card-s { font-size: 12px; color: var(--vdr-text-muted); margin-top: 5px; line-height: 1.45; max-width: 60ch; }
.sub-card-side { text-align: right; flex: none; max-width: 32ch; }
.sub-card-side .sub-card-s { text-align: right; }
.deal-card { align-self: start; }
.deal-card.is-current {
  border-color: var(--vdr-accent);
  box-shadow: 0 0 0 1px var(--vdr-accent), var(--card-shadow);
}
.deal-card-new { align-self: start; border-style: dashed; border-color: var(--vdr-line-strong); background: #fff; }
.deal-card-new-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 18px;
  list-style: none;
  cursor: pointer;
}
.deal-card-new-summary::-webkit-details-marker { display: none; }
.deal-card-new-summary strong { display: block; color: var(--vdr-text); font-size: 13px; }
.deal-card-new-summary small { display: block; margin-top: 2px; color: var(--vdr-text-muted); font-size: 11px; }
.deal-card-new-icon {
  display: grid;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  place-items: center;
  border-radius: 50%;
  background: var(--vdr-accent-soft);
  color: var(--vdr-accent-strong);
  font-size: 20px;
  font-weight: 300;
}
.deal-card-new[open] .deal-card-new-summary { border-bottom: 1px solid var(--vdr-line); }
.deal-card-new-form { background: #fff; }

/* Cited-evidence highlight (moved out of preview_page.html's inline <style>
   so the page can run under a strict CSP). */
mark#cited {
  background: #fde68a;
  padding: 1px 2px;
  border-radius: 3px;
  scroll-margin-top: 80px;
}

/* Global HTMX failure toast (populated by static/app.js). */
.htmx-error-bar {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: none;
  max-width: 90vw;
  padding: 10px 16px;
  border-radius: var(--control-radius);
  background: var(--vdr-flag-red-text);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--frame-shadow);
}
@media print { .htmx-error-bar { display: none !important; } }

/* Visually-hidden but screen-reader-available (chart data tables, labels). */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Overview: verdict layout ----------
   The decision-first cockpit — a dark verdict plate over a stat strip over the
   risk matrix / domains / side column. Self-contained here; the template binds
   only real run data (no fabricated values). */
.ind-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ind-eyebrow { color: var(--vdr-text-muted); font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.ind-h1 { margin: 5px 0 0; font-family: var(--font-head); font-weight: 800; font-size: 34px; line-height: 1.05; letter-spacing: -.03em; color: var(--vdr-text); }
.ind-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* Verdict plate — the dark surface, light type, one decision on one plate */
.ind-verdict { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; padding: 30px 32px; background: var(--vdr-navy); color: var(--vdr-on-dark-body); border-radius: var(--card-radius); }
.ind-verdict a { color: var(--vdr-on-dark-accent); }
.ind-verdict-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ind-stamp { font-family: var(--font-head); font-weight: 600; font-size: 11.5px; letter-spacing: 0; padding: 4px 9px; border-radius: var(--pill-radius); }
.ind-stamp.conditional_go { background: #78350f; color: #fde68a; }
.ind-stamp.go { background: #064e3b; color: #a7f3d0; }
.ind-stamp.no_go { background: #7f1d1d; color: #fecaca; }
.ind-stamp.pending { background: rgba(255, 255, 255, .12); color: #fff; }
.ind-verdict-lead { margin: 14px 0 0; font-family: var(--font-head); font-weight: 800; letter-spacing: -.03em; font-size: 31px; line-height: 1.15; max-width: 26ch; color: #fff; }
.ind-cond-h { color: var(--vdr-on-dark-accent); margin: 20px 0 10px; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 14px; }
.ind-cond-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.ind-cond-list li { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: baseline; font-size: 13.5px; line-height: 1.45; color: var(--vdr-on-dark-body); }
.ind-cond-no { color: var(--vdr-on-dark-accent); }
.ind-cond-tag { color: var(--vdr-on-dark-faint); text-align: right; white-space: nowrap; }
.ind-verdict-side { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.ind-verdict-side .lbl { color: var(--vdr-on-dark-accent); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.ind-bignum { font-family: var(--font-head); font-weight: 800; letter-spacing: -.03em; font-size: 42px; line-height: 1.05; color: #fff; margin-top: 6px; }
.ind-breakdown { margin-top: 10px; display: grid; gap: 8px; font-size: 13px; color: var(--vdr-on-dark-body); border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 16px; }
.ind-breakdown > div { display: flex; justify-content: space-between; gap: 10px; }
.ind-breakdown .m { color: #fff; font-weight: 600; }
.ind-syn, .ind-syn .m { color: #6ee7b7 !important; }
.ind-assur { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.ind-tag { background: rgba(165, 180, 252, .14); color: var(--vdr-on-dark-accent); padding: 3px 8px; border-radius: var(--pill-radius); font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.ind-tag.pending { background: transparent; border: 1px dashed rgba(255, 255, 255, .3); color: var(--vdr-on-dark-faint); }

/* Stat strip — six equal cells split by 1px dividers inside one white card */
.ind-spec { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--vdr-line); background: var(--vdr-line); gap: 1px; border-radius: var(--card-radius); overflow: hidden; }
.ind-spec-cell { background: var(--vdr-bg); padding: 16px 18px; }
.ind-spec-cell .lbl { color: var(--vdr-text-muted); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.ind-spec-num { font-family: var(--font-head); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; font-size: 27px; line-height: 1; margin-top: 8px; color: var(--vdr-text); display: flex; align-items: baseline; gap: 5px; }
.ind-spec-num small { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--vdr-text-muted); }
.ind-spec-num.red { color: var(--vdr-flag-red); }
.ind-spec-num.amber { color: var(--vdr-flag-amber); }
.ind-spec-num.green { color: var(--vdr-flag-green); }
.ind-spec-sub { font-size: 12px; color: var(--vdr-text-muted); margin-top: 8px; }

/* Matrix + domains / side column */
.ind-cols { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 22px; align-items: start; }
.ind-cardhead { padding: 14px 18px; border-bottom: 1px solid var(--vdr-line); display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ind-cardhead h3 { margin: 0; font-family: var(--font-head); font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.ind-cardhead .sub { font-size: 12px; color: var(--vdr-text-muted); margin-top: 2px; }
.ind-next-cta { padding: 14px 18px; border-bottom: 1px solid var(--vdr-line); }
.ind-next-item { display: block; padding: 11px 18px; border-bottom: 1px solid var(--vdr-line); }
.ind-next-item:last-child { border-bottom: 0; }
.ind-next-item:hover { background: var(--vdr-row-hover); }
.ind-scope { margin: 0; padding: 12px 18px 14px; list-style: none; display: grid; gap: 9px; }
.ind-scope li { display: grid; grid-template-columns: 12px 1fr; gap: 9px; font-size: 12.5px; line-height: 1.5; color: var(--vdr-text); }
.ind-scope li .d { color: var(--vdr-text-muted); }

/* Compact risk matrix (HTML grid) — wide cells on the steel severity ramp with
   EV-sized bubbles; deliberately short so it reads as a plate, not a chart. */
.rm { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.rm-yaxis { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--vdr-text-muted); writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; align-self: center; }
.rm-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.rm-cell { aspect-ratio: 1.9; position: relative; display: grid; place-items: center; border-radius: 8px; background: #f3f4f6; }
.rm-bub { display: grid; place-items: center; border-radius: 50%; font-variant-numeric: tabular-nums; font-size: 10.5px; font-weight: 700; line-height: 1; }
.rm-xlabels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 8px; }
.rm-xlabels span { font-size: 11px; color: var(--vdr-text-muted); text-align: center; }
.rm-xtitle { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--vdr-text-muted); text-align: center; margin-top: 6px; }

/* Year-1 cash card — 3-phase grid + proportional phase bar (Industry mockup). */
.ind-cash-phases { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.ind-cash-phases > .ind-cash-cell { background: var(--vdr-bg); padding: 0; }
.ind-cash-amt { font-family: var(--font-head); font-weight: 800; letter-spacing: -.02em; font-size: 20px; margin-top: 3px; color: var(--vdr-text); }
.ind-cash-note { font-size: 11.5px; color: var(--vdr-text-muted); margin-top: 2px; line-height: 1.4; }
.ind-cash-bar { display: flex; height: 26px; margin-top: 12px; border-radius: var(--pill-radius); overflow: hidden; }
.ind-cash-bar > div { display: grid; place-items: center; min-width: 0; overflow: hidden; }
.ind-cash-bar > div > span { font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; padding: 0 6px; }
.ind-cash-syn { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; margin-top: 12px; color: var(--vdr-text); }

@media (max-width: 1200px) {
  .ind-cols { grid-template-columns: 1fr; }
  .ind-verdict { grid-template-columns: 1fr; }
  .ind-verdict-side { padding: 18px; }
}
@media (max-width: 900px) { .ind-spec { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .ind-spec { grid-template-columns: repeat(2, 1fr); } .ind-h1 { font-size: 28px; } }

/* ---------- Deliverable surfaces ----------
   Dark header bars, restrained titles, the indigo accent, and compact verdict
   chips. Everything is scoped under .epk. The --pk-teal* names are kept as API
   (they predate the indigo language); they now resolve to the indigo family. */
.epk {
  --pk-navy: var(--vdr-navy);
  --pk-ink: var(--vdr-text);
  --pk-muted: var(--vdr-text-muted);
  --pk-faint: var(--vdr-text-muted);
  --pk-line: var(--vdr-line);
  --pk-soft: var(--vdr-bg-soft);
  --pk-teal: var(--vdr-accent);
  --pk-teal-dark: var(--vdr-accent-strong);
  --pk-teal-light: var(--vdr-on-dark-accent);
  --pk-mono: var(--font-mono);
  color: var(--pk-ink);
}

.epk-frame {
  border: 1px solid var(--pk-line);
  border-radius: var(--card-radius);
  background: #fff;
  overflow: hidden;
  box-shadow: none;
}
.epk-frame + .epk-frame { margin-top: 18px; }

/* Navy title bar: plain-language title left, status stamp right. */
.epk-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 22px;
  background: var(--pk-navy);
}
.epk-eyebrow {
  margin: 0; /* also used as the page h1 when the card titles the page */
  font-size: 13px; font-weight: 600; letter-spacing: 0;
  color: var(--vdr-on-dark-body);
}
.epk-stamp {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0;
  color: var(--pk-teal-light); white-space: nowrap;
}
.epk-stamp.outlined { padding: 4px 10px; border: 1px solid rgba(165, 180, 252, .45); border-radius: var(--pill-radius); }
/* Verdict-aware stamp colors: a negative posture must never read as the accent. */
.epk-stamp.warn    { color: #fde68a; }
.epk-stamp.bad     { color: #fecaca; }
.epk-stamp.neutral { color: var(--vdr-on-dark-body); }

/* Hairline-separated content rows: clear title + muted subtitle + right chip. */
.epk-rows { padding: 2px 0; }
.epk-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px;
  padding: 15px 22px; border-top: 1px solid var(--pk-line);
}
.epk-row:first-child { border-top: 0; }
.epk-row-t { font-size: 14px; font-weight: 600; color: var(--pk-ink); line-height: 1.35; }
.epk-row-s { margin-top: 3px; font-size: 12px; color: var(--pk-muted); }
.epk-row-t, .epk-row-s { display: block; }

/* Verdict / provenance / routing chips. */
.epk-chip {
  display: inline-block; padding: 4px 10px; border-radius: var(--pill-radius);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0; white-space: nowrap;
}
.epk-chip.teal  { background: var(--vdr-accent-soft); color: var(--vdr-accent-strong); }
.epk-chip.lav   { background: var(--vdr-accent-soft); color: var(--vdr-accent-strong); }
.epk-chip.amber { background: var(--vdr-flag-amber-tint); color: var(--vdr-flag-amber-text); }
.epk-chip.rose  { background: var(--vdr-flag-red-tint); color: var(--vdr-flag-red-text); }
.epk-chip.slate { background: #f3f4f6; color: var(--vdr-text-secondary); }

/* "Enforced in code" callout — indigo-tinted field with a left rule. */
.epk-callout {
  margin: 16px 22px 20px; padding: 14px 18px;
  border-left: 3px solid var(--pk-teal-dark); background: var(--vdr-accent-soft);
  border-radius: 0 10px 10px 0;
  font-size: 13px; color: var(--vdr-text-secondary);
}
.epk-callout b {
  display: block; margin-bottom: 4px;
  font-size: 12px; letter-spacing: 0;
  color: var(--pk-teal-dark);
}

/* Light footer bar — mono, split left/right. */
.epk-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 22px; border-top: 1px solid var(--pk-line); background: var(--pk-soft);
  font-size: 11.5px; letter-spacing: 0; color: var(--pk-muted);
}
.epk-foot .r { color: var(--pk-muted); text-align: right; }

/* Decision headline + conditions list. */
.epk-headline {
  font-weight: 800; letter-spacing: -.03em; line-height: 1.14;
  font-size: clamp(1.6rem, 3vw, 2.15rem); color: var(--pk-ink);
  padding: 26px 22px 20px;
}
.epk-cond {
  display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 12px;
  padding: 14px 22px; border-top: 1px solid var(--pk-line); font-size: 14px; color: var(--pk-ink);
}
.epk-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.epk-dot.red { background: var(--vdr-flag-red); box-shadow: 0 0 0 4px var(--vdr-flag-red-tint); }
.epk-dot.amber { background: var(--vdr-flag-amber); box-shadow: 0 0 0 4px var(--vdr-flag-amber-tint); }
.epk-dot.teal { background: var(--pk-teal); box-shadow: 0 0 0 4px var(--vdr-accent-soft); }
.epk-cond-tag { font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--pk-muted); }

/* Assurance pills (every claim cited / challenge record included / …). */
.epk-pills { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 22px 20px; }
.epk-pill {
  padding: 5px 10px; border-radius: var(--pill-radius); background: var(--vdr-accent-soft); color: var(--pk-teal-dark);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0;
}
.epk-pill.pending { background: #f3f4f6; color: var(--vdr-text-muted); }
.epk-cond-plan { background: var(--vdr-flag-amber-tint); }
/* Section label between closing conditions and 100-day-plan rows, so the
   headline count ("N conditions") visibly matches the condition rows only. */
.epk-cond-sep {
  padding: 12px 22px 4px; border-top: 1px solid var(--pk-line);
  font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pk-muted);
}

.memo-status-card { max-width: 880px; margin: 0 auto 16px; }

/* Guided-engagement stage chips — quiet by default; the completed stages are a
   soft indigo tint (not a solid fill) so the single primary action still pops. */
.stage-chip {
  display: inline-block; padding: 4px 9px; border-radius: var(--pill-radius);
  font-size: 11.5px; font-weight: 600; border: 1px solid transparent;
}
.stage-chip.done    { background: var(--vdr-accent-soft); color: var(--vdr-accent-strong); border-color: var(--vdr-accent-line); }
.stage-chip.current { border-color: var(--vdr-accent); color: var(--vdr-accent-strong); font-weight: 600; }
.stage-chip.todo    { border-color: var(--vdr-line); color: var(--vdr-text-muted); }

/* Auth backdrop — the faint ledger-grid texture from the product references
   ("the audit-trail texture") gives the flat navy depth without gradients. */
.auth-body { position: relative; }
.auth-body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 56px);
}
.auth-body > * { position: relative; }

/* Sign-off controls under the decision card — app chrome, not deliverable
   content, so it is hidden in print (the card's footer carries signed state). */
.memo-signoff-strip { max-width: 880px; margin: 0 auto 16px; font-size: 12px; }
.memo-signoff-strip .strip-alert,
.memo-signoff-strip .strip-status { padding: 10px 14px; border: 1px solid var(--vdr-line); border-radius: 10px; background: #fff; }
.memo-signoff-strip .strip-alert + .strip-status { margin-top: 8px; }
.memo-signoff-strip .strip-alert.red { border-color: #fca5a5; background: var(--vdr-flag-red-tint); color: var(--vdr-flag-red-text); }
.memo-signoff-strip .strip-status.green { border-color: #a7f3d0; background: var(--vdr-flag-green-tint); }
.memo-signoff-strip .strip-status.amber { border: 1px dashed var(--vdr-flag-amber); background: var(--vdr-flag-amber-tint); }
.memo-signoff-strip .strip-warn { margin-top: 4px; color: var(--vdr-flag-red-text); font-weight: 700; }
.memo-signoff-strip .strip-muted { margin-top: 4px; color: var(--vdr-text-muted); }
.memo-signoff-strip .strip-form { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.memo-signoff-strip .strip-form input[type="text"] { flex: 1; min-width: 180px; }
@media print { .memo-signoff-strip { display: none !important; } }
.challenge-kpis { border-radius: var(--card-radius); box-shadow: none; }

@media (max-width: 1280px) {
  .evidence-workspace {
    grid-template-columns: 190px minmax(440px, 1fr) minmax(240px, 280px);
  }
  .evidence-toolbar { align-items: flex-start; flex-direction: column; }
  .evidence-upload { width: 100%; justify-content: flex-start; }
}

@media (max-width: 900px) {
  .evidence-workspace {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
  }
  .evidence-index { max-height: 260px; }
  .evidence-list { min-height: 430px; }
  .evidence-preview { min-height: 280px; }
  .evidence-upload { flex-wrap: wrap; }
  .evidence-file-picker { min-width: 0; }
}

/* ============================================================================
   Risk -> Evidence map (GET /risk-map) — server-rendered.
   One lit trace at a time; everything else recedes to hairlines. Node colour
   carries severity only; a dashed evidence node is a document requested but
   never received. Uses only --vdr-* tokens: severity -> flag-red/amber/green,
   accent/lit tint from --vdr-accent, dividers from --vdr-line.
   ========================================================================== */
.rm-page { display: flex; flex-direction: column; }

/* Empty state */
/* Empty state: the shared .hero, tagged .rm-empty for the tests. */

/* Body: diagram | 1px hairline | register rail */
.rm-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
}

/* The next-step hero, tuned for this page: the side panel lists the risks
   that rest on nothing. Row labels clamp to one line. */
.rm-hero .hero-side-s { margin-top: 4px; }
/* The rows grid must not size to its nowrap content, or a long risk title
   pushes the value out of the panel. */
.rm-hero .hero-rows { grid-template-columns: minmax(0, 1fr); }
.rm-hero .hero-row { min-width: 0; }
.rm-hero-row-l { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-hero .hero-row > .n, .rm-hero-muted { flex: none; white-space: nowrap; }
.rm-hero-muted { color: var(--vdr-on-dark-faint); }
.rm-stat-alert { background: #fef2f2; }
.rm-stat-alert .stat-l { color: #991b1b; font-weight: 600; }
.rm-stat-alert .stat-s { color: var(--vdr-flag-red-text); }
.stat-s.red { color: var(--vdr-flag-red-text); }

/* ---- Diagram column ---- */
.rm-diagram { background: var(--vdr-bg); display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--vdr-line); border-radius: var(--card-radius); overflow: hidden; }
.rm-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 24px 4px;
}
.rm-title { margin: 0; font-family: var(--font-head); font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--vdr-text); }
.rm-tabs { margin-left: auto; }
.rm-tab.alert { background: var(--vdr-flag-red-tint); color: var(--vdr-flag-red-text); }
a.rm-tab.alert:hover { background: #fecaca; color: var(--vdr-flag-red-text); }
.rm-tabs { display: flex; }
.rm-tabs { gap: 2px; }
.rm-tab {
  font-size: 12px; font-weight: 600; letter-spacing: 0;
  padding: 5px 11px; color: var(--vdr-text-muted); border-radius: var(--pill-radius); white-space: nowrap;
}
.rm-tab.on { background: var(--vdr-accent-soft); color: var(--vdr-accent-strong); }
a.rm-tab:hover { background: var(--vdr-row-hover); color: var(--vdr-text); }
a.rm-tab.on:hover { background: var(--vdr-accent-soft); color: var(--vdr-accent-strong); }
.rm-legend { margin-left: auto; display: flex; align-items: center; gap: 15px; font-size: 11.5px; color: var(--vdr-text-muted); flex-wrap: wrap; }
.rm-leg { display: flex; align-items: center; gap: 6px; }
.rm-swatch { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.rm-swatch.red { background: var(--vdr-flag-red); }
.rm-swatch.amber { background: var(--vdr-flag-amber); }
.rm-swatch.green { background: var(--vdr-flag-green); }
.rm-dash { width: 14px; height: 0; border-top: 1px dashed var(--vdr-text-muted); display: inline-block; }

.rm-canvas-wrap { padding: 16px 24px 24px; overflow-x: auto; }
.rm-colhead { display: grid; grid-template-columns: 230px 40px 230px 40px 230px; margin-bottom: 10px; }
.rm-colhead .lbl { color: var(--vdr-text-muted); }

.rm-canvas { position: relative; width: 770px; }
.rm-svg { position: absolute; inset: 0; }

/* Wires: kind first, the lit (selected) trace on top of everything */
.rm-wire { fill: none; stroke: #d1d5db; stroke-width: 1.4; }
.rm-wire.k-contra { stroke: var(--vdr-flag-red); stroke-width: 1.6; }
.rm-wire.k-dashed { stroke-dasharray: 4 4; }
.rm-wire.k-broken { stroke: #fca5a5; stroke-width: 1.6; stroke-dasharray: 5 5; }
.rm-wire.lit { stroke: var(--vdr-accent); stroke-width: 2.2; stroke-dasharray: none; }
.rm-wire.lit.k-broken { stroke: var(--vdr-flag-red); stroke-dasharray: 5 5; }

/* Nodes — position/size carried in the column classes (position:absolute) */
.rm-node {
  position: absolute; box-sizing: border-box; display: block; border-radius: 10px;
  color: var(--vdr-text); background: var(--vdr-bg);
  border: 1px solid var(--vdr-line); padding: 12px 14px;
}
a.rm-node:hover { background: var(--vdr-row-hover); }
.rm-node.sel {
  background: var(--vdr-accent-soft);
  border: 2px solid var(--vdr-accent);
  padding: 11px 13px;
}
/* A broken link in the chain: no finding behind a risk, or nothing cited by a
   finding. Dashed red, never quietly blank. */
.rm-node.broken { border: 1px dashed #fca5a5; background: #fef2f2; display: flex; flex-direction: column; justify-content: center; }
.rm-node.broken.sel { border: 2px dashed var(--vdr-flag-red); padding: 11px 13px; }
.rm-broken-h { font-size: 12.5px; font-weight: 700; color: var(--vdr-flag-red-text); }
.rm-broken-s { font-size: 11.5px; line-height: 1.4; color: var(--vdr-flag-red-text); margin-top: 3px; }
.rm-broken-link { font-size: 11.5px; font-weight: 700; color: var(--vdr-flag-red-text); margin-top: 5px; }
.rm-broken-link:hover { text-decoration: underline; }
.rm-node-meta-row { display: flex; align-items: center; gap: 7px; margin-top: 6px; }
.rm-node-meta-row .rm-node-meta { margin-top: 0; }
.rm-pill-unsupported { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: var(--pill-radius); background: var(--vdr-flag-red-tint); color: var(--vdr-flag-red-text); }
a.rm-node.sel:hover { background: color-mix(in srgb, var(--vdr-accent) 20%, var(--vdr-bg)); }
.rm-node-top { display: flex; justify-content: space-between; gap: 8px; }
.rm-node-no { font-size: 11px; font-weight: 600; color: var(--vdr-text-muted); }
.rm-node.sel .rm-node-no { color: var(--vdr-accent-strong); }
.rm-node-ws, .rm-node-conf, .rm-node-meta {
  font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--vdr-text-muted);
}
.rm-node-meta { font-size: 11.5px; }
.rm-node.sel .rm-node-ws, .rm-node.sel .rm-node-conf, .rm-node.sel .rm-node-meta { color: var(--vdr-accent-strong); }
.rm-node.sel .rm-node-meta { font-weight: 600; }
.rm-node-conf.high { color: var(--vdr-flag-green-text); font-weight: 600; }
.rm-node-meta.red { color: var(--vdr-flag-red); }
.rm-node-meta { margin-top: 4px; }
.rm-node-title {
  font-size: 13px; font-weight: 700; line-height: 1.35; margin-top: 5px;
  /* Nodes are fixed-height (so the SVG wires align to their centre); clamp the
     text so a long title can never spill the box — caps at 2 lines + ellipsis. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}

/* Risk column: left 0, width 230, height 96; left severity border */
.rm-risk {
  left: 0; width: 230px; height: 96px;
  border-left: 3px solid var(--vdr-line);
}
.rm-risk.unsupported { border-color: #fecaca; }
.rm-risk.sel { border-left-width: 3px; }
.rm-risk.sev-red { border-left-color: var(--vdr-flag-red); }
.rm-risk.sev-yellow { border-left-color: var(--vdr-flag-amber); }
.rm-risk.sev-green { border-left-color: var(--vdr-flag-green); }

/* Finding column: left 270, width 230, height 76 */
.rm-find { left: 270px; width: 230px; height: 76px; }
.rm-find-claim {
  font-size: 12.5px; line-height: 1.3; margin-top: 4px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}
.rm-node-conf.contra { color: var(--vdr-flag-red-text); font-weight: 600; }
.rm-find.contra { border-color: #fecaca; background: #fffbfb; }

/* Evidence column: left 540, width 230, height 76 */
.rm-ev { left: 540px; width: 230px; height: 76px; }
.rm-ev-icon { width: 14px; height: 14px; flex: none; color: var(--vdr-text-muted); }
.rm-ev.sel .rm-ev-icon { color: var(--vdr-accent-strong); }
.rm-ev-name {
  font-size: 12.5px; font-weight: 700; line-height: 1.3; margin-top: 6px;
  display: flex; align-items: center; gap: 7px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.rm-ev.missing {
  border: 1px dashed color-mix(in srgb, var(--vdr-text-muted) 60%, var(--vdr-line));
  background: var(--vdr-row-hover);
}
.rm-ev.missing .rm-ev-name { font-weight: 400; color: var(--vdr-text-muted); }

.rm-legend-row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; width: 770px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid #f3f4f6;
  font-size: 12px; color: var(--vdr-text-secondary);
}
.rm-line { width: 16px; height: 0; border-top: 2px solid; display: inline-block; }
.rm-line.lit { border-color: var(--vdr-accent); }
.rm-line.contra { border-color: var(--vdr-flag-red); }
.rm-line.broken { border-top-style: dashed; border-color: #fca5a5; }
.rm-line.dashed { border-top-style: dashed; border-color: #d1d5db; }
.rm-canvas-note {
  width: 770px; box-sizing: border-box; margin-top: 12px; padding: 11px 14px;
  background: var(--vdr-bg-soft); border-radius: 9px;
  font-size: 12.5px; line-height: 1.5; color: var(--vdr-text-secondary);
}
.rm-foot-link { font-size: 12.5px; color: var(--vdr-accent-strong); }
.rm-foot-link:hover { text-decoration: underline; }

/* ---- Register rail: the register card, then the selected risk card ---- */
.rm-rail-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.rm-rail { background: var(--vdr-bg); display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--vdr-line); border-radius: var(--card-radius); overflow: hidden; }
.rm-rail-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 18px; border-bottom: 1px solid var(--vdr-line);
}
.rm-rail-title { font-family: var(--font-head); font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: var(--vdr-text); }
.rm-reg-title-wrap { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rm-reg-unsupported { font-size: 11px; font-weight: 600; color: var(--vdr-flag-red-text); }
.rm-reg-row.unsupported { background: #fffbfb; }
.rm-reg-row.unsupported .rm-reg-exp:not(.nq) { color: var(--vdr-text); }
.rm-verdict { font-size: 12px; line-height: 1.5; color: var(--vdr-flag-amber-text); margin-top: 7px; background: var(--vdr-flag-amber-tint); border-radius: 7px; padding: 8px 10px; }
.rm-chip.is-amber { background: var(--vdr-flag-amber-tint); color: var(--vdr-flag-amber-text); }
.rm-sel-tag { font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: var(--pill-radius); background: var(--vdr-accent-soft); color: var(--vdr-accent-strong); }

.rm-reg { }
.rm-reg-row {
  display: grid; grid-template-columns: 40px 1fr 58px; gap: 10px; align-items: start;
  padding: 12px 18px; color: var(--vdr-text); border-left: 3px solid var(--vdr-line);
  border-bottom: 1px solid #f3f4f6;
}
.rm-reg-row:last-child { border-bottom: 0; }
.rm-reg-row.sev-red { border-left-color: var(--vdr-flag-red); }
.rm-reg-row.sev-yellow { border-left-color: var(--vdr-flag-amber); }
.rm-reg-row.sev-green { border-left-color: var(--vdr-flag-green); }
.rm-reg-row:hover { background: var(--vdr-row-hover); }
.rm-reg-row.sel { background: var(--vdr-accent-soft); border-left-color: var(--vdr-accent); }
.rm-reg-row.sel .rm-reg-title { font-weight: 600; }
.rm-reg-no { font-size: 11px; font-weight: 600; color: var(--vdr-text-muted); padding-top: 1px; }
.rm-reg-row.sel .rm-reg-no { color: var(--vdr-accent-strong); }
.rm-reg-title { font-size: 12.5px; line-height: 1.4; color: var(--vdr-text-secondary); }
.rm-reg-row.sel .rm-reg-title { color: var(--vdr-text); }
.rm-reg-exp { font-size: 12px; text-align: right; font-weight: 700; }
.rm-reg-exp.nq { color: var(--vdr-text-muted); }
.rm-reg-more { padding: 9px 18px; }

.rm-detail-head { padding: 17px 18px; border-bottom: 1px solid var(--vdr-line); }
.rm-detail-title { font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--vdr-text); }
.rm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rm-chip { padding: 3px 9px; border-radius: var(--pill-radius); font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.rm-chip.is-outline { border: 1px solid var(--vdr-line); color: var(--vdr-text-muted); }
.rm-chip.sev-red { background: var(--vdr-flag-red-tint); color: var(--vdr-flag-red-text); }
.rm-chip.sev-yellow { background: var(--vdr-flag-amber-tint); color: var(--vdr-flag-amber-text); }
.rm-chip.sev-green { background: var(--vdr-flag-green-tint); color: var(--vdr-flag-green-text); }
.rm-detail-desc { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--vdr-text); }

.rm-sect { padding: 16px 18px; border-bottom: 1px solid var(--vdr-line); }
.rm-sect-h { color: var(--vdr-text-muted); }
.rm-find-line { margin-top: 11px; padding-left: 11px; border-left: 2px solid var(--vdr-accent); }
.rm-find-line.contra { border-left-color: var(--vdr-flag-red); }
.rm-find-line1 { font-size: 11px; font-weight: 600; color: var(--vdr-accent-strong); }
.rm-find-line1.contra { color: var(--vdr-flag-red); }
.rm-find-text { font-size: 12.5px; line-height: 1.5; color: var(--vdr-text); margin-top: 3px; }
.rm-empty-inline { font-size: 12.5px; color: var(--vdr-text-muted); margin-top: 10px; }

.rm-quant { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.rm-quant-note { font-size: 12px; color: var(--vdr-text-muted); line-height: 1.5; }

.rm-gate { display: grid; gap: 1px; background: var(--vdr-line); border: 1px solid var(--vdr-line); border-radius: 10px; overflow: hidden; margin-top: 10px; }
.rm-gate-row { background: var(--vdr-bg); padding: 9px 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; color: var(--vdr-text); }
.rm-gate-link { font-size: 12.5px; color: var(--vdr-accent-strong); }
.rm-gate-link:hover { text-decoration: underline; }
.rm-gate-v { font-size: 12px; }
.rm-gate-v.muted { color: var(--vdr-text-muted); }
.rm-gate-block { color: var(--vdr-flag-red); }

.rm-rail-foot { padding: 14px 18px; border-top: 1px solid var(--vdr-line); display: flex; gap: 9px; }
.rm-rail-btn { font-size: 13px; padding: 9px 14px; flex: 1; text-align: center; }

@media (max-width: 1080px) {
  .rm-body { grid-template-columns: 1fr; }
}


/* ---------- Provenance kind badges (fact store) ----------
   A small tinted chip next to a value, with a hover/focus tooltip carrying the
   kind-correct detail. Emitted by the badge() macro in _provenance.html. The
   kind distinction is load-bearing for the accuracy invariant, so every kind
   keeps its own tint; -stale overrides to red whatever the kind. */
.prov-badge {
  position: relative; display: inline-flex; align-items: center; margin-left: .35em;
  padding: .1em .5em; border-radius: var(--pill-radius);
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  line-height: 1.5; white-space: nowrap; cursor: help; vertical-align: middle;
  border: 1px solid transparent;
}
.prov-verified     { color: var(--vdr-flag-green-text); background: var(--vdr-flag-green-tint); border-color: #a7f3d0; }
.prov-derived      { color: var(--vdr-accent-strong); background: var(--vdr-accent-soft); border-color: var(--vdr-accent-line); }
.prov-inferred     { color: var(--vdr-text-secondary); background: #f3f4f6; border-color: var(--vdr-line); }
.prov-illustrative { color: var(--vdr-flag-amber-text); background: var(--vdr-flag-amber-tint); border-color: #fde68a; }
.prov-unknown      { color: var(--vdr-text-muted); background: var(--vdr-bg-soft); border-color: var(--vdr-line); }
.prov-advisory     { color: var(--vdr-accent-strong); background: #fff; border-color: var(--vdr-accent-line); border-style: dashed; }
.prov-stale        { color: var(--vdr-flag-red-text) !important; background: var(--vdr-flag-red-tint) !important; border-color: #fca5a5 !important; }
.prov-tip {
  position: absolute; z-index: 40; left: 0; top: calc(100% + 6px);
  min-width: 220px; max-width: 340px; display: none; padding: .6rem .7rem;
  border-radius: 10px; background: var(--vdr-navy); color: #fff;
  font-size: 11.5px; font-weight: 400; text-transform: none; letter-spacing: normal;
  line-height: 1.5; white-space: normal; box-shadow: var(--frame-shadow);
}
.prov-badge:hover .prov-tip, .prov-badge:focus .prov-tip, .prov-badge:focus-within .prov-tip { display: block; }
.prov-tip-kind { display: block; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 9.5px; color: var(--vdr-on-dark-accent); margin-bottom: .25rem; }
.prov-tip-row { display: block; margin-top: .15rem; color: var(--vdr-on-dark-body); }
.prov-tip-stale { color: #fca5a5; }
.prov-tip-asof { display: block; margin-top: .35rem; color: var(--vdr-on-dark-faint); font-size: 10.5px; }

/* ---------- Page tabs ----------
   The underline strip under a screen's header: 14.5px/600, the current tab in
   the accent with a 2px rule. One strip per screen, defined once in
   _screens.html so every tab of a screen renders the same strip. */
.page-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--vdr-line); margin-top: 14px; overflow-x: auto; }
.page-tab {
  padding: 10px 14px 12px; margin-bottom: -1px; white-space: nowrap;
  font-size: 14.5px; font-weight: 600; color: var(--vdr-text-muted);
  border-bottom: 2px solid transparent; transition: color 0.12s, border-color 0.12s;
}
.page-tab:hover { color: var(--vdr-text); }
.page-tab.on { color: var(--vdr-accent); border-bottom-color: var(--vdr-accent); }
.ev-tabs-row { padding: 0 var(--page-gutter-x); background: var(--vdr-bg); border-bottom: 1px solid var(--vdr-line); }
.ev-tabs-row .page-tabs { margin-top: 0; border-bottom: 0; }
/* A tab that used to be its own page introduces itself under the strip. */
.tab-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 6px; }
.tab-intro > :first-child { flex: 1 1 360px; min-width: 0; max-width: 72ch; }
.tab-title { margin: 0; font-family: var(--font-head); font-weight: 800; font-size: 20px; letter-spacing: -.02em; color: var(--vdr-text); }
.tab-intro .workspace-deck { margin-top: 5px; }

/* ---------- ⌘K palette ----------
   One search entry point. A floating frame (the one place the frame shadow is
   meant for) over a scrim; results arrive as an htmx fragment from /palette. */
.palette { position: fixed; inset: 0; z-index: 100; }
.palette-scrim { position: absolute; inset: 0; background: rgba(17, 24, 39, .45); }
.palette-dialog {
  position: relative; width: min(680px, calc(100vw - 32px)); margin: 10vh auto 0;
  background: #fff; border: 1px solid var(--vdr-line); border-radius: var(--card-radius);
  box-shadow: var(--frame-shadow); overflow: hidden;
}
.palette-form { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--vdr-line); }
.palette-form svg { width: 18px; height: 18px; color: var(--vdr-icon); flex: none; }
.palette-input {
  flex: 1; min-width: 0; border: 0 !important; background: transparent; padding: 4px 0;
  font-size: 15px; color: var(--vdr-text); box-shadow: none !important; outline: none !important;
}
.palette-input::placeholder { color: var(--vdr-text-muted); }
.palette-input::-webkit-search-cancel-button { display: none; }
.palette-esc, .palette-foot kbd {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 600; color: var(--vdr-text-muted);
  background: #f3f4f6; border-radius: 5px; padding: 2px 6px;
}
.palette-results { max-height: min(60vh, 520px); overflow-y: auto; padding: 6px; }
.palette-group { padding: 4px 0 6px; }
.palette-group + .palette-group { border-top: 1px solid var(--vdr-line); margin-top: 4px; padding-top: 8px; }
.palette-group-label { padding: 6px 12px 4px; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--vdr-text-muted); }
.palette-item {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 8px; color: var(--vdr-text); font-size: 13.5px;
}
.palette-item svg { width: 16px; height: 16px; color: var(--vdr-icon); }
.palette-item:hover, .palette-item.is-active { background: var(--vdr-accent-soft); color: var(--vdr-accent-strong); }
.palette-item:hover svg, .palette-item.is-active svg { color: var(--vdr-accent); }
.palette-item-main { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-item-meta { font-size: 11.5px; color: var(--vdr-text-muted); white-space: nowrap; }
.palette-sev { width: 9px; height: 9px; border-radius: 50%; background: var(--vdr-line-strong); justify-self: center; }
.palette-sev.red { background: var(--vdr-flag-red); }
.palette-sev.yellow { background: var(--vdr-flag-amber); }
.palette-sev.green { background: var(--vdr-flag-green); }
.palette-more { color: var(--vdr-accent-strong); font-weight: 600; grid-template-columns: minmax(0, 1fr) auto; }
.palette-empty { padding: 10px 12px; font-size: 12.5px; color: var(--vdr-text-muted); line-height: 1.5; }
.palette-foot { display: flex; align-items: center; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--vdr-line); background: var(--vdr-bg-soft); font-size: 11.5px; color: var(--vdr-text-muted); }
.palette-foot span { display: inline-flex; align-items: center; gap: 4px; }
.palette-foot span:last-child { margin-left: auto; text-align: right; }
@media (max-width: 640px) {
  .palette-dialog { margin-top: 12px; }
  .palette-foot span:last-child { display: none; }
}

/* ============================================================================
   Screen patterns (phase 3)
   The pieces every rebuilt screen is made of. Defined once; a screen composes
   them and binds real run data — nothing here carries a figure of its own.
   ========================================================================== */

/* Page header: eyebrow · 34px/800 title · one-line sub, actions at right. */
.scr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.scr-head > :first-child { flex: 1 1 360px; min-width: 0; }
.scr-eyebrow { font-size: 13px; color: var(--vdr-text-muted); }
.scr-h1 { margin: 5px 0 0; font-family: var(--font-head); font-weight: 800; font-size: 34px; letter-spacing: -.03em; line-height: 1.05; color: var(--vdr-text); }
.scr-sub { font-size: 13.5px; color: var(--vdr-text-muted); margin-top: 7px; }
.scr-actions { display: flex; align-items: center; gap: 10px; flex: none; flex-wrap: wrap; }
.scr-stack { display: flex; flex-direction: column; gap: 24px; }

/* Stage stepper: five steps across the content width. Complete = check on
   #e5e0ff, current = number on solid indigo, pending = number in a #d1d5db
   ring; connectors #d1c7fe behind the current step, #e5e7eb ahead of it. */
.stepper { display: flex; align-items: center; }
.step { display: flex; align-items: center; gap: 9px; flex: none; font-size: 13px; color: var(--vdr-text-muted); }
.step-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; border: 1px solid var(--vdr-line-strong); color: var(--vdr-text-muted); }
.step-n svg { width: 13px; height: 13px; }
.step.done .step-n { background: #e5e0ff; border-color: #e5e0ff; color: var(--vdr-accent-strong); }
.step.done { color: var(--vdr-text-secondary); }
.step.current .step-n { background: var(--vdr-accent); border-color: var(--vdr-accent); color: #fff; font-weight: 700; }
.step.current { color: var(--vdr-text); font-weight: 700; }
.step-line { flex: 1; height: 1px; background: var(--vdr-line); margin: 0 14px; }
.step-line.done { background: var(--vdr-accent-line); }

/* Next-step hero: the dark card. Kicker in the on-dark accent, a two-line
   31–33px/800 headline, one paragraph, the primary action inside the card,
   and an optional right panel (money, an upload target, a watch list). */
.hero { background: var(--vdr-navy); border-radius: var(--card-radius); padding: 30px 32px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: center; color: var(--vdr-on-dark-body); }
.hero.no-side { grid-template-columns: minmax(0, 1fr); }
.hero-kicker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--vdr-on-dark-accent); }
.hero-kicker svg { width: 15px; height: 15px; }
.hero-h { margin: 14px 0 0; font-family: var(--font-head); font-weight: 800; font-size: 33px; letter-spacing: -.03em; line-height: 1.15; color: #fff; max-width: 22ch; }
.hero-p { margin: 14px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--vdr-on-dark-body); max-width: 52ch; }
.hero-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.hero .vdr-btn.primary { padding: 11px 16px; font-size: 13.5px; }
.hero .vdr-btn.on-dark { background: rgba(255, 255, 255, .09); border-color: transparent; color: #fff; padding: 11px 16px; font-size: 13.5px; }
.hero .vdr-btn.on-dark:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.hero-side { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; padding: 22px; }
.hero-side.dashed { border-style: dashed; border-color: rgba(255, 255, 255, .28); background: transparent; text-align: center; }
.hero-side-k { font-size: 12px; font-weight: 600; color: var(--vdr-on-dark-accent); }
.hero-side-k .est { color: var(--vdr-on-dark-faint); font-weight: 400; }
.hero-side-big { font-family: var(--font-head); font-weight: 800; font-size: 42px; letter-spacing: -.03em; line-height: 1.05; color: #fff; margin-top: 6px; font-variant-numeric: tabular-nums; }
.hero-rows { display: grid; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12); }
.hero-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--vdr-on-dark-body); }
.hero-row .n { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.hero-row.sub { font-size: 12.5px; color: var(--vdr-on-dark-faint); padding-left: 10px; }
.hero-row.sub .n { color: var(--vdr-on-dark-body); font-weight: 400; }
.hero-row.good, .hero-row.good .n { color: #6ee7b7; }
.hero-side-sec { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); }
.hero-side-sec .hero-side-k { margin-bottom: 8px; }
.hero-side-list { margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, .12); list-style: none; text-align: left; display: grid; gap: 6px; font-size: 13px; color: var(--vdr-on-dark-body); }
.hero-side-list .n { color: var(--vdr-on-dark-faint); margin-right: 6px; font-variant-numeric: tabular-nums; }
.hero-side-t { font-size: 15px; font-weight: 700; color: #fff; margin-top: 12px; }
.hero-side-s { font-size: 13px; color: var(--vdr-on-dark-body); margin-top: 4px; }
.hero-side-icon { width: 22px; height: 22px; color: var(--vdr-on-dark-accent); margin: 0 auto; }
/* Verdict pill on the dark card — a deep tint, never a bare hue. */
.pill { display: inline-block; font-size: 11.5px; font-weight: 600; border-radius: var(--pill-radius); padding: 4px 9px; line-height: 1.3; white-space: nowrap; }
.pill.conditional_go { background: #78350f; color: #fde68a; }
.pill.go { background: #064e3b; color: #a7f3d0; }
.pill.no_go { background: #7f1d1d; color: #fecaca; }
.pill.pending { background: rgba(255, 255, 255, .12); color: #fff; }
/* Light-ground severity pills. */
.pill.red { background: var(--vdr-flag-red-tint); color: var(--vdr-flag-red-text); }
.pill.amber { background: var(--vdr-flag-amber-tint); color: var(--vdr-flag-amber-text); }
.pill.green { background: var(--vdr-flag-green-tint); color: var(--vdr-flag-green-text); }
.pill.grey { background: #f3f4f6; color: var(--vdr-text-secondary); }
.pill.indigo { background: var(--vdr-accent-soft); color: var(--vdr-accent-strong); }

/* Stat strip: one white card, equal columns, 1px dividers, 12px muted label,
   27px/800 figure, 12px muted sub. */
.stat-strip { display: grid; grid-template-columns: repeat(6, 1fr); background: #fff; border: 1px solid var(--vdr-line); border-radius: var(--card-radius); overflow: hidden; }
.stat-strip.cols-4 { grid-template-columns: repeat(4, 1fr); }
.stat-strip.cols-5 { grid-template-columns: repeat(5, 1fr); }
.stat { padding: 17px 19px; border-right: 1px solid var(--vdr-line); min-width: 0; }
.stat:last-child { border-right: 0; }
.stat-l { font-size: 12px; color: var(--vdr-text-muted); }
.stat-v { display: flex; align-items: baseline; gap: 4px; margin-top: 7px; font-family: var(--font-head); font-weight: 800; font-size: 27px; letter-spacing: -.02em; line-height: 1; color: var(--vdr-text); font-variant-numeric: tabular-nums; }
.stat-v small { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--vdr-text-muted); }
.stat-v.red { color: var(--vdr-flag-red); }
.stat-v.amber { color: var(--vdr-flag-amber); }
.stat-v.green { color: var(--vdr-flag-green); }
.stat-s { font-size: 12px; color: var(--vdr-text-muted); margin-top: 8px; }
.stat-bar { height: 4px; border-radius: 2px; background: #f3f4f6; margin-top: 10px; overflow: hidden; }
.stat-bar > span { display: block; height: 100%; border-radius: 2px; background: var(--vdr-accent); }
.stat-bar.red > span { background: var(--vdr-flag-red); }
.stat-bar.amber > span { background: var(--vdr-flag-amber); }
.stat-bar.green > span { background: var(--vdr-flag-green); }

/* Cards: white, 1px, 12px. Head = 18px/800 title with a muted right note. */
.card { background: #fff; border: 1px solid var(--vdr-line); border-radius: var(--card-radius); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px 0; }
.card-head.rule { padding-bottom: 14px; border-bottom: 1px solid var(--vdr-line); }
.card-h { margin: 0; font-family: var(--font-head); font-weight: 800; font-size: 18px; letter-spacing: -.02em; color: var(--vdr-text); }
.card-h.sm { font-size: 16px; }
.card-note { font-size: 12.5px; color: var(--vdr-text-muted); white-space: nowrap; }
.card-note a { color: var(--vdr-accent); font-weight: 600; }
.card-body { padding: 16px 20px 20px; }
.card-body .vdr-input { max-width: 100%; box-sizing: border-box; }
.card-body select.vdr-input { width: 100%; }
.card-foot { padding: 12px 20px 16px; font-size: 12.5px; color: var(--vdr-text-muted); line-height: 1.5; }
/* A section title outside a card, with its right-hand note. */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sec-h { margin: 0; font-family: var(--font-head); font-weight: 800; font-size: 18px; letter-spacing: -.02em; color: var(--vdr-text); }
.sec-note { font-size: 12.5px; color: var(--vdr-text-muted); }
.sec-note a { color: var(--vdr-accent); font-weight: 600; }

/* Tables: #f9fafb header row with 10px uppercase labels, #f3f4f6 row rules,
   13.5px semibold primary cell with an 11.5px muted sub-line under it. */
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; padding: 11px 16px; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--vdr-text-muted); background: var(--vdr-bg-soft); border-bottom: 1px solid var(--vdr-line); white-space: nowrap; }
.tbl td { padding: 13px 16px; border-bottom: 1px solid #f3f4f6; font-size: 13.5px; color: var(--vdr-text-secondary); vertical-align: middle; overflow-wrap: anywhere; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .t-main { font-weight: 600; color: var(--vdr-text); }
.tbl .t-sub { display: block; font-size: 11.5px; color: var(--vdr-text-muted); margin-top: 2px; font-weight: 400; }
.tbl .t-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .t-right { text-align: right; }
.tbl .t-ref { color: var(--vdr-text-muted); font-variant-numeric: tabular-nums; font-size: 12.5px; white-space: nowrap; }
/* Action cells and short identifiers never break mid-word: a "Waive" that
   wraps to "Waiv / e" or a hash split in two is a defect, not a reflow. */
.tbl td.t-right, .tbl td.t-act, .tbl .t-hash, .tbl .t-actor { white-space: nowrap; overflow-wrap: normal; }
.tbl td .vdr-btn { white-space: nowrap; }
.tbl .t-red { color: var(--vdr-flag-red); font-weight: 600; }
.tbl .t-strong { color: var(--vdr-text); font-weight: 700; }
.tbl a.t-main:hover { color: var(--vdr-accent-strong); }
.tbl-wrap { overflow-x: auto; }
.tbl-wrap > table { min-width: 560px; }
.tbl-wrap.fit > table { min-width: 0; }  /* a side-column table wraps instead of scrolling */

/* Notice bands: red / amber / green / indigo tinted rows with an action. */
.band { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 10px; border: 1px solid; font-size: 13.5px; line-height: 1.45; }
.band svg { width: 18px; height: 18px; flex: none; }
.band-body { flex: 1; min-width: 0; }
.band-t { font-weight: 700; }
.band-s { font-size: 13px; margin-top: 2px; }
.band .vdr-btn { flex: none; }
.band.red { background: var(--vdr-flag-red-tint); border-color: #fca5a5; color: var(--vdr-flag-red-text); }
.band.amber { background: var(--vdr-flag-amber-tint); border-color: #fde68a; color: var(--vdr-flag-amber-text); }
.band.green { background: var(--vdr-flag-green-tint); border-color: #a7f3d0; color: var(--vdr-flag-green-text); }
.band.indigo { background: var(--vdr-accent-soft); border-color: var(--vdr-accent-line); color: var(--vdr-accent-strong); }
.band.grey { background: var(--vdr-bg-soft); border-color: var(--vdr-line); color: var(--vdr-text-secondary); }
.band.grey .band-t a { color: var(--vdr-text); }
.band a:not(.vdr-btn) { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Empty-state value grid: what the screen will give you, each card marked
   "Awaiting analysis" / "Not configured". */
.unlock-grid { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--vdr-line); gap: 1px; border: 1px solid var(--vdr-line); border-radius: var(--card-radius); overflow: hidden; }
.unlock { background: #fff; padding: 20px 22px; }
.unlock-t { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; color: var(--vdr-text); }
.unlock-t svg { width: 17px; height: 17px; color: var(--vdr-text-secondary); flex: none; }
.unlock-s { font-size: 13.5px; color: var(--vdr-text-secondary); line-height: 1.5; margin-top: 8px; }
.unlock-state { display: flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 12.5px; color: var(--vdr-text-muted); }
.unlock-state svg { width: 14px; height: 14px; }

/* Two-column body: main + 300px side column. */
.cols-side { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.cols-side > * { min-width: 0; }
.col-stack { display: flex; flex-direction: column; gap: 24px; }

/* Numbered list rows (conditions, next steps). */
.rows { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 14px 20px; border-top: 1px solid #f3f4f6; font-size: 13.5px; color: var(--vdr-text-secondary); }
.row:first-child { border-top: 0; }
.row-no { color: var(--vdr-accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.row-cost { min-width: 72px; text-align: right; font-weight: 700; color: var(--vdr-text); font-variant-numeric: tabular-nums; }
.row-cost.muted { color: var(--vdr-text-muted); font-weight: 400; }
/* Side-column list items: title + sub, a pill at right. */
.item { display: block; padding: 13px 18px; border-top: 1px solid #f3f4f6; }
.item:first-child { border-top: 0; }
.item-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.item-t { font-size: 13.5px; font-weight: 700; color: var(--vdr-text); }
.item-s { font-size: 12px; color: var(--vdr-text-muted); margin-top: 3px; line-height: 1.45; }
a.item:hover .item-t { color: var(--vdr-accent-strong); }
/* Bullet list with faint dashes replaced by a proper marker in the floor colour. */
.dash-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.dash-list li { display: grid; grid-template-columns: 12px 1fr; gap: 9px; font-size: 13px; line-height: 1.5; color: var(--vdr-text-secondary); }
.dash-list li::before { content: "·"; color: var(--vdr-text-muted); font-weight: 700; }
/* Phase bar (year-1 phasing). */
.phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.phase-l { font-size: 12px; color: var(--vdr-text-muted); }
.phase-v { font-family: var(--font-head); font-weight: 800; font-size: 20px; letter-spacing: -.02em; color: var(--vdr-text); margin-top: 3px; font-variant-numeric: tabular-nums; }
.phase-s { font-size: 11.5px; color: var(--vdr-text-muted); margin-top: 2px; }
.phase-bar { display: flex; height: 26px; margin-top: 14px; border-radius: var(--pill-radius); overflow: hidden; }
.phase-bar > div { display: grid; place-items: center; min-width: 0; overflow: hidden; }
.phase-bar > div > span { font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; padding: 0 6px; }
.phase-bar .b-red { background: var(--vdr-flag-red); }
.phase-bar .b-amber { background: var(--vdr-flag-amber); }
.phase-bar .b-navy { background: var(--vdr-navy); }
/* Page foot line. */
.page-foot { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--vdr-text-muted); padding-top: 4px; }

@media (max-width: 1200px) {
  .cols-side { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: repeat(3, 1fr); }
  .stat:nth-child(3n) { border-right: 0; }
  .stat:nth-child(-n+3) { border-bottom: 1px solid var(--vdr-line); }
  .unlock-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .stepper { flex-wrap: wrap; gap: 8px 0; }
  .step-line { min-width: 12px; }
  .hero { padding: 22px 20px; }
  .hero-h { font-size: 27px; }
  .stat-strip, .stat-strip.cols-4, .stat-strip.cols-5 { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3n) { border-right: 1px solid var(--vdr-line); }
  .stat:nth-child(2n) { border-right: 0; }
  .unlock-grid { grid-template-columns: 1fr; }
  .row { grid-template-columns: 44px minmax(0, 1fr); }
  .row-cost { grid-column: 2; text-align: left; }
}

/* ---------- Data requests ---------- */
.reg-bulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0; font-size: 12.5px; color: var(--vdr-text-secondary); }
.reg-bulk-all { display: inline-flex; align-items: center; gap: 6px; }
.reg-bulk .vdr-btn { padding: 6px 11px; font-size: 12.5px; }
.reg-row-form { display: inline-block; }
.reg-new { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(120px, 1fr)) auto; gap: 12px; align-items: end; }
.reg-new label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--vdr-text-secondary); }
.reg-new .vdr-input { width: 100%; }
@media (max-width: 1100px) { .reg-new { grid-template-columns: repeat(2, minmax(0, 1fr)); } .reg-new .vdr-btn { grid-column: 1 / -1; } }

/* ---------- Economics: cost build-up bars ---------- */
.eco-bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 18px; align-items: end; height: 300px; padding-bottom: 6px; }
.eco-bar { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; min-width: 0; }
.eco-bar-track { width: 100%; max-width: 92px; flex: 1; display: flex; align-items: flex-end; }
.eco-bar-fill { width: 100%; border-radius: 4px 4px 0 0; background: var(--vdr-accent); min-height: 3px; }
.eco-bar-fill.red { background: var(--vdr-flag-red); }
.eco-bar-fill.amber { background: var(--vdr-flag-amber); }
.eco-bar-fill.green { background: var(--vdr-flag-green); }
.eco-bar-fill.indigo { background: var(--vdr-accent); }
.eco-bar-fill.navy { background: var(--vdr-navy); }
.eco-bar-fill.grey { background: var(--vdr-line-strong); }
.eco-bar-l { margin-top: 12px; font-size: 12px; color: var(--vdr-text-secondary); text-align: center; line-height: 1.3; max-width: 120px; }
.eco-bar-v { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--vdr-text); font-variant-numeric: tabular-nums; }
.eco-bar-v.good { color: var(--vdr-flag-green); }

/* ---------- Verification: the challenge record ---------- */
.ver-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 18px 22px; border-top: 1px solid #f3f4f6; border-left: 3px solid transparent; }
.ver-row:first-child { border-top: 0; border-top-left-radius: var(--card-radius); }
.ver-row.contra { background: var(--vdr-flag-red-tint); border-left-color: var(--vdr-flag-red); }
.ver-no { font-size: 12.5px; color: var(--vdr-text-muted); font-variant-numeric: tabular-nums; padding-top: 2px; }
.ver-main { min-width: 0; }
.ver-claim { font-size: 15px; font-weight: 700; color: var(--vdr-text); letter-spacing: -.01em; line-height: 1.4; }
.ver-meta { font-size: 13px; color: var(--vdr-text-muted); margin-top: 6px; }
.ver-meta a { color: var(--vdr-accent); font-weight: 500; }
.ver-result { font-size: 13.5px; color: var(--vdr-text-secondary); margin-top: 8px; line-height: 1.5; }