/* DD Memo cockpit — "Industry" blueprint product UI.
   Steel-blue accent on a light technical ground, Barlow Condensed display over
   Barlow body, IBM Plex Mono for figures, square hairline surfaces. Class names
   are stable API for the templates; restyle here, not there. */

/* Self-hosted brand fonts — 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 them. Barlow Condensed (display), Barlow (body),
   IBM Plex Mono (figures/labels). font-display:swap paints immediately in the
   fallback then swaps, so first render is never blocked. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/vendor/fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/vendor/fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/vendor/fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/vendor/fonts/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/vendor/fonts/barlow-condensed-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/vendor/fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/vendor/fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/vendor/fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/vendor/fonts/ibm-plex-mono-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/vendor/fonts/ibm-plex-mono-600.woff2") format("woff2"); }

:root {
  /* Fonts — Industry system. Barlow Condensed display over Barlow body, IBM
     Plex Mono for figures and micro-labels. Faces are declared @font-face
     above; unloaded weights fall back within the family. */
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --vdr-navy: #1D2D3D;          /* rail / verdict plates — accent-900 */
  --vdr-navy-2: #2C455D;        /* accent-800 — gradient partner */
  /* Steel-blue accent (Industry). Reserved for the one primary action per
     surface, so it stays distinct from the quiet navy default buttons and reads
     as "do this first". The --nav-* token names are kept for API stability
     (templates/base.html reference them); they now hold the steel family.
     Link-size text uses the deeper --vdr-accent-strong step for contrast, since
     the base accent is tuned to the ground at ~3:1 (chrome, not body copy). */
  --vdr-accent: #5980A6;
  --vdr-accent-strong: #416180;
  --vdr-accent-soft: #E6EEF5;
  --vdr-accent-line: #B3C6D6;
  --vdr-accent-rgb: 89, 128, 166;
  --page-gutter-x: 30px;
  --page-gutter-y: 26px;

  /* Navbar (light-scope defaults; re-scoped to dark values inside .sidebar). */
  --nav-violet: var(--vdr-accent);
  --nav-violet-deep: #416180;    /* deeper — active text */
  --nav-violet-strong: #2C455D;  /* strongest — labels / hover text */
  --nav-tint: #E6EEF5;           /* hover surface */
  --nav-tint-active: #D8E4EE;    /* active surface */
  --nav-line: #C6D4E0;           /* steel-tinted border */
  --nav-text: #3A4654;           /* nav body text */
  --nav-text-muted: #6B7686;     /* section labels / secondary */

  /* Light technical ground: cards sit one step above the page canvas and read
     apart through a hairline square border, not elevation (Industry draws line
     objects on a ground — no soft shadows). */
  --vdr-line: rgba(29, 31, 32, 0.16);
  --vdr-row-hover: #E9E9EA;
  --vdr-row-selected: #E2E7EC;
  --vdr-bg: #F2F2F3;            /* card ground */
  --vdr-bg-soft: #E7E7E9;       /* app canvas — a step below the cards */
  --vdr-text: #1D1F20;
  --vdr-text-muted: #6E6E72;
  /* Severity drawn muted, inside the steel palette rather than shouting over it
     (the mockup's OKLCH severities resolved to sRGB, darkened for AA text). */
  --vdr-flag-red: #A24A46;
  --vdr-flag-amber: #8A6620;
  --vdr-flag-green: #3F7360;
  /* Square work surfaces, no shadow — hierarchy comes from the hairline frame
     and the one-step canvas contrast above. */
  --card-radius: 0;
  --card-shadow: none;
}

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

/* Barlow Condensed carries every heading; templates keep their h-tags and the
   .hd helper. Uppercase + tracking is applied per-surface (page titles, card
   kickers), not globally, so in-document headings (memo / deck body) stay
   sentence case. A bare element rule (specificity 0,0,1) sets only the default —
   any Tailwind weight utility (font-bold, etc.) still wins. */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); font-weight: 600; letter-spacing: 0; }

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- Industry blueprint helpers ----------
   Lifted from the design system so any template (and the self-contained
   exports) can frame a surface as a wireframe object. .hd = condensed display;
   .lbl = mono micro-label; .m = mono tabular figure; .blueprint frames a
   surface with a square hairline border.

   The registration crosshairs that used to sit 6px outside each corner are
   gone: at ninety surfaces they read as decoration rather than as the
   drafting reference they were borrowed from, and every one of them drew
   attention to an edge instead of to what the card said. */
.hd { font-family: var(--font-head); font-weight: 600; letter-spacing: .01em; }
.lbl { font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.m { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.blueprint { position: relative; border: 1px solid var(--vdr-line); border-radius: 0; }

/* ---------- App shell: dark sidebar + 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;
  /* Industry rail — a flat navy plate; steel (accent-400) is the jewel accent
     that reads on it. Nav tokens are re-scoped to dark values HERE so only the
     sidebar subtree flips; the rest of the app keeps the :root steel accent. */
  --nav-violet: #94BCE3;         /* steel accent-400 — reads on navy */
  --nav-violet-deep: #94BCE3;    /* kbd / active text */
  --nav-violet-strong: #F2F2F3;  /* near-white — hover / active / brand */
  --nav-tint: rgba(255, 255, 255, 0.06);       /* hover surface */
  --nav-tint-active: #2C455D;                   /* active surface — accent-800 */
  --nav-line: rgba(255, 255, 255, 0.12);        /* hairline border */
  --nav-text: #CFD8E1;                          /* body text */
  --nav-text-muted: #7E9CB8;                    /* section labels */
  background: var(--vdr-navy);
  border-right: 1px solid var(--nav-line);
  color: var(--nav-text);
}

.side-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 12px;
}
.side-brand .logo-mark {
  /* Industry brand mark: a square registration tile — hairline steel border,
     transparent field, condensed letters. */
  width: 32px;
  height: 32px;
  border-radius: 0;
  background: transparent;
  color: #94BCE3;
  box-shadow: inset 0 0 0 1px rgba(148, 188, 227, 0.55);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  display: grid;
  place-items: center;
  letter-spacing: 0.06em;
}
.side-brand .brand-name {
  color: var(--nav-violet-strong);
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.15;
  max-width: 168px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deal-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--nav-text-muted);
  font-size: 10px;
  letter-spacing: 0.06em;
}

/* Sidebar search — jump to the evidence library */
.side-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 14px 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--nav-line);
  border-radius: 0;
  color: var(--nav-text-muted);
}
.side-search svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--nav-violet); }
/* [type="search"] keeps specificity above the later generic light-surface
   input rule (background:#fff), which otherwise wins the tie by source order
   and paints this dark-sidebar pill white under its white text. */
.side-search input[type="search"] {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 12.5px;
  color: var(--nav-text);
}
.side-search input[type="search"]::placeholder { color: rgba(255, 255, 255, 0.4); }
.side-search .kbd {
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--nav-violet-deep);
  background: var(--nav-tint);
  border: 1px solid var(--nav-line);
  border-radius: 5px;
  padding: 2px 5px;
}
/* The "Ctrl K" hint is meaningless without a physical keyboard — hide on touch. */
@media (hover: none) and (pointer: coarse) {
  .side-search .kbd { display: none; }
}
.side-search:focus-within {
  border-color: #94BCE3;
  box-shadow: 0 0 0 3px rgba(148, 188, 227, 0.18);
}

/* Primary action pill */
.side-primary {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 14px 8px;
  padding: 10px 12px;
  border-radius: 0;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #F2F2F3;
  background: var(--vdr-accent);
  transition: filter 0.12s, box-shadow 0.12s, transform 0.04s;
}
.side-primary svg { width: 17px; height: 17px; flex-shrink: 0; }
.side-primary:hover { filter: brightness(1.08); }
.side-primary:active { transform: translateY(1px); }
.side-primary.is-active { box-shadow: 0 0 0 3px rgba(85, 217, 205, 0.28); }

.side-nav { flex: 1; overflow-y: auto; padding: 2px 0 12px; }
.side-nav::-webkit-scrollbar { width: 0; }

/* Top-level direct links (All Deals / Overview) */
.side-nav a.nav-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1px 10px;
  padding: 8px 10px;
  border-radius: 0;
  font-size: 12.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-violet); opacity: 0.9; }
.side-nav a.nav-top:hover { background: var(--nav-tint); color: var(--nav-violet-strong); }
.side-nav a.nav-top.active {
  background: var(--nav-tint-active);
  color: var(--nav-violet-strong);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--nav-violet);
}
.side-nav a.nav-top.active svg { color: var(--nav-violet-deep); opacity: 1; }

/* Collapsible groups (CSP-safe <details>/<summary>) */
.side-group { margin-top: 2px; }
.side-group > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 1px 10px;
  padding: 8px 10px;
  border-radius: 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--nav-text-muted);
  user-select: none;
  transition: background 0.12s, color 0.12s;
}
.side-group > summary::-webkit-details-marker { display: none; }
.side-group > summary:hover { background: var(--nav-tint); color: var(--nav-violet-strong); }
.side-group > summary .gi { width: 15px; height: 15px; flex-shrink: 0; color: var(--nav-violet); opacity: 0.85; }
.side-group > summary .chev {
  width: 13px;
  height: 13px;
  margin-left: auto;
  flex-shrink: 0;
  color: var(--nav-text-muted);
  opacity: 0.7;
  transition: transform 0.15s ease;
}
.side-group[open] > summary { color: var(--nav-violet-strong); }
.side-group[open] > summary .gi { opacity: 1; }
.side-group[open] > summary .chev { transform: rotate(90deg); }

/* Nested children — text-only, indented */
.side-sub { padding: 2px 0 6px; }
.side-sub a,
.side-nav .side-sub-group a {
  position: relative;
  display: block;
  margin: 1px 10px 1px 14px;
  padding: 6px 10px 6px 22px;
  border-radius: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--nav-text);
  transition: background 0.12s, color 0.12s;
}
.side-sub a:hover,
.side-nav .side-sub-group a:hover { background: var(--nav-tint); color: var(--nav-violet-strong); }
.side-sub a.active,
.side-nav .side-sub-group a.active {
  background: var(--nav-tint-active);
  color: var(--nav-violet-strong);
  font-weight: 600;
}
.side-sub a.active::before,
.side-nav .side-sub-group a.active::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  border-radius: 0;
  background: var(--nav-violet);
}

/* Advanced destinations stay discoverable without becoming one 30-item wall.
   Only the group containing the active page opens automatically. */
.side-sub-group { margin: 2px 10px; }
.side-sub-group > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 14px;
  list-style: none;
  border-radius: 0;
  cursor: pointer;
  color: var(--nav-text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.side-sub-group > summary::-webkit-details-marker { display: none; }
.side-sub-group > summary::after {
  content: "+";
  margin-left: auto;
  color: var(--nav-text-muted);
  font-size: 13px;
  font-weight: 500;
}
.side-sub-group > summary:hover,
.side-sub-group[open] > summary { background: var(--nav-tint); color: var(--nav-violet-strong); }
.side-sub-group[open] > summary::after { content: "−"; }
.side-sub-group .side-sub-group { margin: 0; }
.side-sub-group > a { margin-left: 4px; margin-right: 4px; }

/* Mockup sidebar — labelled sections (DEAL / ANALYSIS / VERIFICATION / MORE),
   flat sub-nav items, and count badges. */
.side-label {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--nav-text-muted);
  padding: 13px 14px 6px; margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, .10);
}
.side-nav > .side-label:first-child { margin-top: 0; border-top: 0; padding-top: 8px; }
.side-nav a.nav-sub {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px; font-size: 12.5px; color: var(--nav-text);
  border-left: 2px solid transparent; text-decoration: none;
}
.side-nav a.nav-sub:hover { background: var(--nav-tint); color: var(--nav-violet-strong); }
.side-nav a.nav-sub.active {
  background: var(--nav-tint-active); color: var(--nav-violet-strong);
  border-left-color: var(--nav-violet);
}
.nav-lbl { flex: 1; min-width: 0; }
.nav-badge {
  margin-left: auto; flex: none; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; font-size: 10px; color: var(--nav-text-muted);
}
.nav-badge.red { background: var(--vdr-flag-red); color: #F2F2F3; padding: 0 5px; }
.side-sub-group { margin-top: 2px; }
.side-nav .side-label + .side-sub-group { margin-top: 0; }

/* Account switcher (foot) */
.side-foot {
  border-top: 1px solid var(--nav-line);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.side-foot .avatar {
  width: 30px;
  height: 30px;
  border-radius: 0;
  background: var(--vdr-accent);
  color: #F2F2F3;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  display: grid;
  place-items: center;
  text-transform: uppercase;
  flex-shrink: 0;
}
.side-foot .who {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--nav-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.side-foot button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 0;
  color: var(--nav-text-muted);
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.side-foot button svg { width: 16px; height: 16px; }
.side-foot button:hover { background: var(--nav-tint); color: var(--nav-violet-strong); }

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

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

/* Topbar journey pipeline — connected mono chips, Intake → Deliver. Hidden on
   narrow topbars (shown from 1160px, where there is room beside the switcher). */
.topbar-pipe { display: none; align-items: center; }
@media (min-width: 1160px) { .topbar-pipe { display: flex; } }
.topbar-pipe .pipe {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 10px; white-space: nowrap; color: var(--vdr-text-muted);
  border: 1px solid var(--vdr-line); border-left: 0;
}
.topbar-pipe .pipe:first-child { border-left: 1px solid var(--vdr-line); }
.topbar-pipe .pipe.done { background: var(--vdr-accent-strong); color: #F2F2F3; border-color: var(--vdr-accent-strong); }
.topbar-pipe .pipe.current { background: var(--vdr-accent); color: #F2F2F3; border-color: var(--vdr-accent); }

.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: 0;
  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: 0 20px 60px rgba(8, 12, 30, 0.45);
  }
  .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(8, 12, 30, 0.5);
  }
  .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-label, .topbar-stage { display: none; }
  .deal-switcher select { max-width: min(44vw, 170px); }
  .topbar-access { margin-left: auto; }
}
@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: 0;
  background: #fff;
  transition: border-color 0.12s, box-shadow 0.12s;
}
input:focus-visible, select:focus, textarea:focus {
  outline: none;
  border-color: var(--vdr-accent-line) !important;
  box-shadow: 0 0 0 3px rgba(var(--vdr-accent-rgb), 0.14);
}
/* 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: 0;
  padding: 6px 8px;
  background: #fff;
  font-size: 12.5px;
  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 { 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: 7px;
  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: 12.5px;
}
.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-family: ui-monospace, monospace; color: var(--vdr-text-muted); font-size: 10.5px;
  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: #F1F4F8;
  color: var(--vdr-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.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-family: var(--font-mono); font-weight: 600; font-size: 10px;
  color: var(--vdr-text-muted); text-transform: uppercase; letter-spacing: 0.09em;
  padding: 9px 14px; border-bottom: 1px solid var(--vdr-line);
  background: #ECECED;
  position: sticky; top: 0; z-index: 1;
}
table.vdr-table td {
  padding: 10px 14px; border-bottom: 1px solid var(--vdr-line);
  vertical-align: top;
}
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-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  color: var(--vdr-text-muted);
}

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

.vdr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 15px; border-radius: 0;
  /* Quiet by default: a neutral navy action. The steel accent 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".
     Square, hairline, condensed label — a blueprint object, no elevation. */
  background: var(--vdr-navy); color: #F2F2F3;
  font-family: var(--font-head); letter-spacing: .02em;
  font-weight: 600; font-size: 14px;
  border: 1px solid var(--vdr-navy); cursor: pointer;
  box-shadow: none;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
}
.vdr-btn:hover { background: var(--vdr-navy-2); border-color: var(--vdr-navy-2); }
.vdr-btn.primary { background: var(--vdr-accent); border-color: var(--vdr-accent); color: #F2F2F3; }
.vdr-btn.primary:hover { background: var(--vdr-accent-strong); border-color: var(--vdr-accent-strong); }
.vdr-btn:active { transform: translateY(1px); }
.vdr-btn.ghost {
  background: transparent; color: var(--vdr-text);
  border-color: var(--vdr-line);
  box-shadow: none;
}
.vdr-btn.ghost:hover { background: color-mix(in srgb, var(--vdr-text) 6%, transparent); border-color: color-mix(in srgb, var(--vdr-text) 45%, transparent); }

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

/* One chip language app-wide: mono, squared, and muted into the steel palette
   (brick / ochre / sage severities, steel for neutral-accent), so a "red" reads
   the same on every surface and nothing shouts over the technical ground. */
.vdr-badge, .vdr-sev, .vdr-gate, .vdr-status, .vdr-cat {
  display: inline-block; padding: 3px 9px; border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  line-height: 1.5;
}

.vdr-badge.human    { background: #E1E9F1; color: #3C5B7A; }
.vdr-badge.agent    { background: #DBE8E1; color: #396D5A; }
.vdr-badge.running  { background: #ECE3D0; color: #7C5D1E; }
.vdr-badge.complete { background: #DBE8E1; color: #396D5A; }
.vdr-badge.failed   { background: #EFDBDA; color: #93403C; }

.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: #EFDBDA; color: #93403C; }
.vdr-sev.yellow { background: #ECE3D0; color: #7C5D1E; }
.vdr-sev.green  { background: #DBE8E1; color: #396D5A; }
.vdr-sev.info   { background: #E4E4E6; color: #6C6C70; }
/* 5x5 matrix scale */
.vdr-sev.critical    { background: #9E4A46; color: #F2F2F3; }
.vdr-sev.severe      { background: #E6D7CE; color: #86482C; }
.vdr-sev.moderate    { background: #ECE3D0; color: #7C5D1E; }
.vdr-sev.sustainable { background: #DBE8E1; color: #396D5A; }

.vdr-gate.failing { background: #EFDBDA; color: #93403C; }
.vdr-gate.warning { background: #ECE3D0; color: #7C5D1E; }
.vdr-gate.passing { background: #DBE8E1; color: #396D5A; }
.vdr-gate.unknown { background: #E4E4E6; color: #6C6C70; }

.vdr-status            { background: #E1E9F1; color: #3C5B7A; }
.vdr-status.open       { background: #ECE3D0; color: #7C5D1E; }
.vdr-status.mitigated  { background: #DBE8E1; color: #396D5A; }
.vdr-status.accepted   { background: #E1E9F1; color: #3C5B7A; }
.vdr-status.superseded { background: #E4E4E6; color: #6C6C70; }

/* Posture pill with status dot */
.vdr-rec {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
}
.vdr-rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.vdr-rec.go             { background: #DBE8E1; color: #396D5A; }
.vdr-rec.conditional_go { background: #ECE3D0; color: #7C5D1E; }
.vdr-rec.no_go          { background: #EFDBDA; color: #93403C; }
.vdr-rec.pending        { background: #E4E4E6; color: #6C6C70; }

/* Integration cost categories */
.vdr-cat { border-radius: 2px; font-family: var(--font-mono); padding: 2px 7px; }
.vdr-cat.ote        { background: #ECE3D0; color: #7C5D1E; }
.vdr-cat.capex      { background: #E1E9F1; color: #3C5B7A; }
.vdr-cat.opex_delta { background: #EFDBDA; color: #93403C; }
.vdr-cat.synergy    { background: #DBE8E1; color: #396D5A; }
.vdr-cat.idsw       { background: #E1E9F1; color: #3C5B7A; }
.vdr-cat.other      { background: #E4E4E6; color: #6C6C70; }
.vdr-cat.synergy_attainment    { background: #DBE8E1; color: #396D5A; }
.vdr-cat.tsa_exit_enablement   { background: #E1E9F1; color: #3C5B7A; }
.vdr-cat.systems_integration   { background: #E1E9F1; color: #3C5B7A; }
.vdr-cat.regulatory_compliance { background: #EFDBDA; color: #93403C; }

.evidence-pill {
  display: inline-block; padding: 2px 8px; margin: 2px 4px 0 0; border-radius: 2px;
  background: #E4E4E6; color: var(--vdr-text); font-family: var(--font-mono);
  font-size: 10px;
  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: 6px; background: #D4D4D7; border-radius: 0; overflow: hidden;
}
.cov-bar > span {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0;
  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: 10px; text-transform: uppercase; color: #8696AC; letter-spacing: 0.07em;
  font-weight: 600;
}
.vdr-kpi .kpi .value {
  font-size: 22px; font-weight: 700; 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: #1E2A4A; }
.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: #F1F5F9; 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: 30px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.06;
}
.tdd-hero h1 { text-transform: uppercase; letter-spacing: .02em; }
.workspace-deck {
  max-width: 820px;
  margin-top: 5px;
  color: var(--vdr-text-muted);
  font-size: 12.5px;
  line-height: 1.55;
}
.workspace-meta {
  margin-top: 5px;
  color: var(--vdr-text-muted);
  font-size: 11px;
}

/* 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: 1px;
  background: var(--vdr-line);
  border-top: 1px solid var(--vdr-line);
  border-bottom: 1px solid var(--vdr-line);
  height: calc(100vh - 172px);
  min-height: 560px;
}
.evidence-index,
.evidence-list,
.evidence-preview {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  border-radius: 0;
  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: 10.5px;
  font-weight: 700;
  letter-spacing: .01em;
}
.evidence-pane-head b {
  color: var(--vdr-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}
.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: 0;
  background: var(--vdr-accent-soft);
  color: var(--vdr-accent-strong);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.evidence-file-picker:hover { border-color: var(--vdr-accent); }
.evidence-file-picker:focus-within { outline: 2px solid var(--vdr-accent-line); 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: #FAFBFD; }
.evidence-row:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--vdr-accent-line);
  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: 0;
  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: 0;
  background: #fff;
  color: var(--vdr-text);
  font-size: 11.5px;
  font-weight: 650;
  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: 0;
  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 — Industry redesign ----------
   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 {
  margin: calc(var(--page-gutter-y) * -1) calc(var(--page-gutter-x) * -1) -34px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ev-upload-error {
  padding: 9px var(--page-gutter-x);
  border-bottom: 1px solid var(--vdr-flag-amber);
  background: rgba(138, 102, 32, .10);
  font-size: 12px;
}

/* 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-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 22px; 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 { display: flex; align-items: center; gap: 8px; margin-left: 6px; }
.ev-upload select {
  max-width: 168px; border: 1px solid var(--vdr-line); border-radius: 0;
  padding: 7px 8px; color: var(--vdr-text); font-size: 11px; background: #fff;
}
.ev-upload .vdr-btn { padding: 7px 12px; font-size: 11.5px; }

/* Panes share the light card ground; the workspace's line-coloured gap draws
   the hairline separators between them. */
.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: 1px solid var(--vdr-line);
  background: repeating-linear-gradient(45deg, #DCDCDE 0 4px, #E9E9EA 4px 8px);
}
.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-tab {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; padding: 5px 11px; border: 1px solid var(--vdr-line);
  border-left: 0; color: var(--vdr-text-muted);
}
.ev-tab:first-child { border-left: 1px solid var(--vdr-line); }
.ev-tab.on { background: var(--vdr-accent); color: #fff; border-color: var(--vdr-accent); }
.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); color: #fff; }
.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); padding: 5px 9px; color: var(--vdr-text); }
.ev-sort-form { display: flex; align-items: center; gap: 8px; }
.ev-sort-sel { font-size: 11px; background: var(--vdr-bg); cursor: pointer; border-radius: 0; }

.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: 16px; color: var(--vdr-text); }
.ev-card-s { font-size: 11px; color: var(--vdr-text-muted); margin-top: 3px; }
.ev-card-proof { font-size: 12.5px; color: #45474A; 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-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 19px; line-height: 1.2; color: var(--vdr-text); }

/* Severity badges — filled red for dealbreakers, hairline for the rest. */
.ev-badge {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; padding: 2px 7px; white-space: nowrap;
}
.ev-badge.red { background: var(--vdr-flag-red); color: #fff; }
.ev-badge.amber { border: 1px solid var(--vdr-flag-amber); color: var(--vdr-flag-amber); }
.ev-badge.green { border: 1px solid var(--vdr-flag-green); color: var(--vdr-flag-green); }

/* 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: #4A4C4F; }
.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-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; 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-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--vdr-line); color: var(--vdr-text-muted); padding: 3px 8px;
}
.ev-tag.ok { border-color: var(--vdr-flag-green); color: var(--vdr-flag-green); }
.ev-preview {
  margin: 16px; min-height: 118px; background: var(--vdr-accent-soft);
  display: grid; place-items: center; padding: 16px; text-align: center;
}
.ev-preview-excerpt { margin: 0; font-size: 12px; line-height: 1.55; color: #45474A; }
.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: #45474A;
}
.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) {
  .ev-room { margin-bottom: 0; }
  .evidence-workspace { grid-template-columns: 1fr; height: auto; }
  .ev-index-scroll { max-height: 320px; }
}

/* ---------- Exceptions — Industry redesign ----------
   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 {
  margin: calc(var(--page-gutter-y) * -1) calc(var(--page-gutter-x) * -1) -34px;
  display: flex; flex-direction: column; 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: 1px;
  background: var(--vdr-line);
  border-top: 1px solid var(--vdr-line); border-bottom: 1px solid var(--vdr-line);
  height: calc(100vh - 196px); min-height: 560px;
}
.exc-queue, .exc-resolve {
  background: var(--vdr-bg); display: flex; flex-direction: column;
  min-width: 0; overflow: hidden;
}

/* 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: 16.5px; color: var(--vdr-text); }
.exc-ws { color: var(--vdr-text-muted); }
.exc-detail { font-size: 12.5px; color: #424244; 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-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; white-space: nowrap;
}
.exc-badge.red { background: var(--vdr-flag-red); color: #fff; }
.exc-badge.amber { border: 1px solid var(--vdr-flag-amber); color: var(--vdr-flag-amber); }
.exc-badge.ok { border: 1px solid var(--vdr-flag-green); color: var(--vdr-flag-green); }
.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); 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; 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); 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: 12.5px; margin-top: 6px; border: 1px solid var(--vdr-line);
  padding: 8px 10px; background: #fff; color: var(--vdr-text);
}
.exc-textarea {
  font-size: 12.5px; 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: 0; width: 100%; box-sizing: border-box;
}
.exc-textarea:focus, .exc-input:focus { outline: 2px solid var(--vdr-accent-line); outline-offset: -1px; }
.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: 600; font-size: 16px; color: var(--vdr-text); }
.exc-empty-s { font-size: 12px; color: var(--vdr-text-muted); margin-top: 6px; }

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

/* ---------- Decision pack — Industry redesign ----------
   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 {
  margin: calc(var(--page-gutter-y) * -1) calc(var(--page-gutter-x) * -1) -34px;
  display: flex; flex-direction: column; min-height: 0;
  /* Fill exactly the viewport below the 56px topbar so the page itself never
     scrolls — the deliverable (.dp-doc) and side columns scroll internally.
     Flex (not a magic height constant) keeps this correct for any head height. */
  height: calc(100vh - 56px); overflow: hidden;
}
.dp-head-titles { max-width: 58ch; }
.dp-actions { gap: 9px; }
.dp-locked {
  border: 1px dashed var(--vdr-line); color: var(--vdr-text-muted);
  padding: 8px 12px; align-self: center;
}
.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: 1px;
  background: var(--vdr-line);
  border-top: 1px solid var(--vdr-line); border-bottom: 1px solid var(--vdr-line);
  /* Fill the remaining .dp-room height; each column owns its own scroll. */
  flex: 1; min-height: 0;
}

/* 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: 20px; 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); 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-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 7px; flex: none;
  border: 1px solid var(--vdr-line); color: var(--vdr-text-muted);
}
.dp-led-badge.verified { border-color: var(--vdr-flag-green); color: var(--vdr-flag-green); }
.dp-led-badge.derived, .dp-led-badge.inferred { border-color: var(--vdr-flag-amber); color: var(--vdr-flag-amber); }

/* 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-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
  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); }
.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-line); outline-offset: 1px; }
.dp-dec-note { font-size: 11.5px; color: var(--vdr-text-muted); line-height: 1.5; margin-top: 7px; }
.dp-refused {
  border: 1px solid var(--vdr-flag-red); padding: 10px 12px; margin-top: 12px;
  font-size: 12px; line-height: 1.5; color: #45474A;
}
.dp-refused strong { color: var(--vdr-flag-red); }
.dp-signed-h { font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--vdr-flag-green); }
.dp-signed-m { font-size: 11.5px; color: var(--vdr-text-muted); margin-top: 4px; }
.dp-signed-note { font-size: 12.5px; color: #45474A; 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 { margin-bottom: 0; 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: 10px;
  text-transform: uppercase;
  color: #8696AC;
  letter-spacing: 0.07em;
  font-weight: 600;
}

.tdd-metric .value {
  margin-top: 6px;
  font-size: 26px;
  font-weight: 700;
  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%), #E9EDF5 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: #DC2626; }
.gauge.yellow { --gauge-color: #F59E0B; }
.gauge.green  { --gauge-color: #10B981; }
/* No run yet: a neutral empty ring with an em-dash, never a "healthy" color. */
.gauge.na     { --gauge-color: #CBD5E1; }
.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: 0;
  background: #ECECED;
  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: 700;
  color: var(--vdr-text);
  font-variant-numeric: tabular-nums;
}
.tdd-mini small {
  margin-top: 2px;
  font-size: 10.5px;
  text-transform: uppercase;
  color: var(--vdr-text-muted);
  letter-spacing: 0.06em;
  font-weight: 600;
}

@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; }
.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: 0; 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: 0;
  box-shadow: var(--card-shadow); overflow: hidden;
}

.report-cover {
  padding: 34px 48px 26px;
  background: linear-gradient(135deg, var(--vdr-navy) 0%, var(--vdr-navy-2) 100%);
  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: 11.5px; font-weight: 600; letter-spacing: 0;
  color: rgba(255, 255, 255, 0.68);
}
.report-title { font-size: 30px; font-weight: 800; line-height: 1.12; margin: 4px 0 0; color: #fff; }
.report-meta { margin-top: 7px; font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.report-meta .mono { color: rgba(255, 255, 255, 0.85); }

.report-rec {
  margin-top: 22px; display: flex; align-items: center; gap: 18px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 0; padding: 15px 18px;
}
.report-rec .rec-badge {
  font-size: 15px; font-weight: 800; letter-spacing: 0.03em; padding: 9px 16px;
  border-radius: 8px; white-space: nowrap; flex-shrink: 0;
}
.report-rec.go .rec-badge { background: #10B981; color: #042419; }
.report-rec.conditional_go .rec-badge { background: #F59E0B; color: #3A2400; }
.report-rec.no_go .rec-badge { background: #DC2626; color: #fff; }
.report-rec.pending .rec-badge { background: #CBD5E1; color: #0F172A; }
.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.07em; color: rgba(255, 255, 255, 0.7); }
.report-byline { margin-top: 16px; font-size: 11px; color: rgba(255, 255, 255, 0.68); }

.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: 0; padding: 10px 12px; background: #ECECED; }
.report-kpi span { display: block; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.report-kpi small { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.045em; color: var(--vdr-text-muted); font-weight: 600; }
.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: 10.5px; text-transform: uppercase; letter-spacing: 0.045em;
  color: var(--vdr-text-muted); padding: 6px 10px; border-bottom: 1px solid var(--vdr-line); font-weight: 600;
}
table.report-rag th.num, table.report-rag td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.report-rag td { padding: 7px 10px; border-bottom: 1px solid #EEF1F7; }
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: #DC2626; } .rag-dot.yellow { background: #F59E0B; }
.rag-dot.green { background: #10B981; } .rag-dot.na { background: #CBD5E1; }

@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: #0F172A; border-bottom: 2px solid var(--vdr-navy); padding-left: 0; padding-right: 0; }
  .report-kicker, .report-meta, .report-byline { color: #64748B; }
  .report-meta .mono { color: #0F172A; }
  .report-title { color: #0F172A; }
  .report-confidential { color: #B91C1C; }
  .report-rec { background: #F4F6FB !important; border-color: var(--vdr-line); }
  .report-rec .rec-line { color: #0F172A; }
  .report-rec .rec-score-num { color: #0F172A !important; }
  .report-rec .rec-score-lbl { color: #64748B; }
  .report-rec .rec-badge { border: 1.5px solid #0F172A; color: #0F172A !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, .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; }

.slide {
  position: relative; width: 100%; min-height: 560px;
  background: #fff; border: 1px solid var(--vdr-line); border-radius: 0;
  box-shadow: var(--card-shadow); margin-bottom: 18px;
  padding: 30px 40px 46px; display: flex; flex-direction: column;
  counter-increment: slide;
}
.slide-head { border-bottom: 2px solid var(--vdr-navy); padding-bottom: 10px; margin-bottom: 16px; }
.slide-eyebrow { font-size: 11px; font-weight: 650; letter-spacing: 0; color: var(--vdr-accent-strong); }
.slide-title { font-size: 22px; font-weight: 700; 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: 9px; letter-spacing: 0.04em; color: #94A3B8;
  border-top: 1px solid var(--vdr-line); padding-top: 7px;
}
.slide-foot .pageno::before { content: counter(slide); }

.slide.cover { background: linear-gradient(135deg, var(--vdr-navy) 0%, var(--vdr-navy-2) 100%); 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: 0; color: rgba(255,255,255,0.68); }
.slide.cover h1 { font-size: 40px; font-weight: 800; line-height: 1.1; margin: 6px 0 0; color: #fff; }
.slide.cover .cover-meta { margin-top: 10px; font-size: 13px; color: rgba(255,255,255,0.62); }
.slide.cover .cover-rec { margin-top: 26px; }
.slide.cover .cover-byline { position: absolute; bottom: 28px; left: 40px; font-size: 11px; color: rgba(255,255,255,0.45); }

.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; font-size: 12.5px; margin-bottom: 12px;
}
.deck-recbox {
  background: #F4F6FB !important; border: 1px solid var(--vdr-line); border-radius: 0;
  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: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #475569; 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 #EEF1F7; }
.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 { display: none !important; }
  .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 (topbar) + deal portfolio cards ---------- */

.deal-switcher { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.deal-switcher-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--vdr-text-muted);
}
.deal-switcher select {
  border: 1px solid var(--vdr-line); border-radius: 0; background: #fff;
  font-size: 12.5px; font-weight: 600; color: var(--vdr-text);
  padding: 6px 8px; max-width: 220px; cursor: pointer;
}
.deal-switcher select:focus-visible {
  outline: none; border-color: #9AD6CC; box-shadow: 0 0 0 3px rgba(var(--vdr-accent-rgb), 0.14);
}
.deal-switcher-all {
  color: var(--vdr-text-muted); font-weight: 700; padding: 2px 7px; border-radius: 6px; line-height: 1;
}
.deal-switcher-all:hover { background: var(--vdr-row-hover); color: var(--vdr-text); }

.deals-grid { align-items: start; }
.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; background: #FCFDFF; }
.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: 6px;
  background: #B91C1C;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
@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: Industry verdict layout ----------
   The decision-first cockpit — a navy verdict plate over a spec 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-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ind-eyebrow { color: var(--vdr-accent-strong); }
.ind-h1 { margin: 4px 0 0; font-family: var(--font-head); font-weight: 600; font-size: 34px; line-height: 1; text-transform: uppercase; letter-spacing: .02em; color: var(--vdr-text); }
.ind-actions { display: flex; gap: 9px; flex-shrink: 0; }

/* Verdict plate — navy ground, light type, one decision on one plate */
.ind-verdict { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; padding: 24px 26px; background: var(--vdr-navy); color: #E6ECF2; }
.ind-verdict a { color: #94BCE3; }
.ind-verdict-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ind-stamp { font-family: var(--font-head); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 14px; color: #1D2D3D; }
.ind-stamp.conditional_go { background: #C6994E; }
.ind-stamp.go { background: #5E9B84; }
.ind-stamp.no_go { background: #A6524E; color: #F2F2F3; }
.ind-stamp.pending { background: #9AA7B4; }
.ind-verdict-lead { margin: 16px 0 0; font-size: 17.5px; line-height: 1.45; max-width: 62ch; color: #F2F2F3; }
.ind-cond-h { color: #7E9CB8; margin: 20px 0 10px; border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 12px; }
.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; }
.ind-cond-no { color: #94BCE3; }
.ind-cond-tag { color: #7E9CB8; text-align: right; white-space: nowrap; }
.ind-verdict-side { border-left: 1px solid rgba(255, 255, 255, .15); padding-left: 24px; display: flex; flex-direction: column; gap: 18px; }
.ind-verdict-side .lbl { color: #7E9CB8; }
.ind-bignum { font-size: 36px; line-height: 1.05; color: #F2F2F3; margin-top: 4px; }
.ind-breakdown { margin-top: 10px; display: grid; gap: 5px; font-size: 12.5px; color: #B8C6D3; }
.ind-breakdown > div { display: flex; justify-content: space-between; gap: 10px; }
.ind-breakdown .m { color: #E6ECF2; }
.ind-syn, .ind-syn .m { color: #7FC0AB !important; }
.ind-assur { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.ind-tag { border: 1px solid rgba(148, 188, 227, .5); color: #94BCE3; padding: 3px 8px; }
.ind-tag.pending { border-style: dashed; border-color: rgba(255, 255, 255, .3); color: #8FA2B4; }

/* Spec strip — six equal cells split by hairlines */
.ind-spec { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--vdr-line); background: var(--vdr-line); gap: 1px; }
.ind-spec-cell { background: var(--vdr-bg); padding: 14px 16px; }
.ind-spec-cell .lbl { color: var(--vdr-text-muted); }
.ind-spec-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 27px; line-height: 1; margin-top: 7px; color: var(--vdr-text); display: flex; align-items: baseline; gap: 5px; }
.ind-spec-num small { font-size: 11px; 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: 11.5px; color: var(--vdr-text-muted); margin-top: 6px; }

/* 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: 600; font-size: 18px; text-transform: uppercase; letter-spacing: .03em; }
.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-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; 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: 1px; background: var(--vdr-line); border: 1px solid var(--vdr-line); }
.rm-cell { aspect-ratio: 1.9; position: relative; display: grid; place-items: center; }
.rm-bub { display: grid; place-items: center; border-radius: 50%; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 10px; font-weight: 600; line-height: 1; }
.rm-xlabels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin-top: 6px; }
.rm-xlabels span { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--vdr-text-muted); text-align: center; }
.rm-xtitle { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; 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: 1px; background: var(--vdr-line); border: 1px solid var(--vdr-line); }
.ind-cash-phases > .ind-cash-cell { background: var(--vdr-bg); padding: 10px 12px; }
.ind-cash-amt { font-size: 17px; margin-top: 4px; color: var(--vdr-text); }
.ind-cash-note { font-size: 11px; color: var(--vdr-text-muted); margin-top: 3px; line-height: 1.4; }
.ind-cash-bar { display: flex; height: 26px; margin-top: 12px; border: 1px solid var(--vdr-line); overflow: hidden; }
.ind-cash-bar > div { display: grid; place-items: center; min-width: 0; overflow: hidden; }
.ind-cash-bar > div > span { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: #F2F2F3; white-space: nowrap; padding: 0 4px; }
.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 { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .15); padding-left: 0; padding-top: 16px; }
}
@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 ----------
   Navy header bars, restrained titles, a teal accent, and compact verdict
   chips. Everything is scoped under .epk so the teal palette applies only to
   customer-facing deliverables. */
.epk {
  --pk-navy: #1D2D3D;
  --pk-ink: #10192d;
  --pk-muted: #64748b;
  --pk-faint: #93a3bd;
  --pk-line: #e6eaf2;
  --pk-soft: #f5f7fb;
  /* Retired teal → steel: one accent family app-wide (Industry). Token names
     kept for API stability; the deliverable surfaces now read steel, not teal. */
  --pk-teal: #5980A6;
  --pk-teal-dark: #416180;
  --pk-teal-light: #94BCE3;
  --pk-mono: var(--font-mono);
  color: var(--pk-ink);
}

.epk-frame {
  border: 1px solid var(--pk-line);
  border-radius: 0;
  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: 12px; font-weight: 650; letter-spacing: 0;
  color: rgba(255, 255, 255, .72);
}
.epk-stamp {
  font-family: var(--pk-mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pk-teal-light); white-space: nowrap;
}
.epk-stamp.outlined { padding: 5px 11px; border: 1px solid rgba(85, 217, 205, .5); border-radius: 6px; }
/* Verdict-aware stamp colors: a negative posture must never read teal. */
.epk-stamp.warn    { color: #F2C879; }
.epk-stamp.bad     { color: #F79CA6; }
.epk-stamp.neutral { color: #93A3BD; }

/* 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: 5px 11px; border-radius: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
.epk-chip.teal  { background: #E6EEF5; color: var(--pk-teal-dark); }
.epk-chip.lav   { background: #eef0fb; color: #5a4fb0; }
.epk-chip.amber { background: #fdf3e0; color: #9a6a12; }
.epk-chip.rose  { background: #fdeaec; color: #b42a3a; }
.epk-chip.slate { background: #eef2f7; color: #45536b; }

/* "Enforced in code" callout — mint field, teal left rule, mono-bold header. */
.epk-callout {
  margin: 16px 22px 20px; padding: 14px 18px;
  border-left: 3px solid var(--pk-teal-dark); background: #EEF3F8;
  font-size: 13px; color: #23504a;
}
.epk-callout b {
  display: block; margin-bottom: 4px;
  font-size: 11.5px; 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-family: var(--pk-mono); font-size: 11px; letter-spacing: .04em; color: var(--pk-muted);
}
.epk-foot .r { color: var(--pk-muted); text-align: right; }

/* Decision headline + conditions list. */
.epk-headline {
  font-weight: 750; letter-spacing: -.025em; 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: #dc4654; box-shadow: 0 0 0 4px rgba(220, 70, 84, .12); }
.epk-dot.amber { background: #e19a20; box-shadow: 0 0 0 4px rgba(225, 154, 32, .13); }
.epk-dot.teal { background: var(--pk-teal); box-shadow: 0 0 0 4px rgba(89, 128, 166, .14); }
.epk-cond-tag { font-size: 10.5px; font-weight: 600; letter-spacing: .01em; color: var(--pk-muted); }

/* Teal assurance pills (every claim cited / challenge record included / …). */
.epk-pills { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 22px 20px; }
.epk-pill {
  padding: 6px 11px; border-radius: 6px; background: #E6EEF5; color: var(--pk-teal-dark);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0;
}
.epk-pill.pending { background: #eef2f7; color: #64748b; }
.epk-cond-plan { background: #fffdf8; }
/* 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: 11px; font-weight: 700;
  letter-spacing: 0; 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 teal tint (not a solid fill) so the single primary action still pops. */
.stage-chip {
  display: inline-block; padding: 4px 9px; border-radius: 6px;
  font-size: 11px; 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); background: #fff; }
.memo-signoff-strip .strip-alert + .strip-status { border-top: 0; }
.memo-signoff-strip .strip-alert.red { border-color: #FCA5A5; background: #FEF2F2; color: #B91C1C; }
.memo-signoff-strip .strip-status.green { border-color: #6EE7B7; background: #ECFDF5; }
.memo-signoff-strip .strip-status.amber { border: 1px dashed #F59E0B; background: #FFFBEB; }
.memo-signoff-strip .strip-warn { margin-top: 4px; color: #B91C1C; 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: 0; 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 Industry redesign.
   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. Square corners throughout (the blueprint idiom). 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; }
.rm-page .ev-head { margin-bottom: 0; }
.rm-export { padding: 8px 14px; font-size: 12.5px; margin-left: 6px; }

/* Empty state */
.rm-empty { background: var(--vdr-bg); padding: 40px 24px; text-align: center; margin-top: 18px; }
.rm-empty-h { font-family: var(--font-head); font-weight: 600; font-size: 20px; text-transform: uppercase; letter-spacing: .02em; color: var(--vdr-text); }
.rm-empty-s { max-width: 60ch; margin: 8px auto 0; font-size: 13px; line-height: 1.55; color: var(--vdr-text-muted); }

/* Body: diagram | 1px hairline | register rail */
.rm-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 396px;
  gap: 1px;
  background: var(--vdr-line);
  border-top: 1px solid var(--vdr-line);
  border-bottom: 1px solid var(--vdr-line);
}

/* ---- Diagram column ---- */
.rm-diagram { background: var(--vdr-bg); display: flex; flex-direction: column; min-width: 0; }
.rm-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px 24px; border-bottom: 1px solid var(--vdr-line);
}
.rm-tabs { display: flex; }
.rm-tab {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; padding: 5px 11px; border: 1px solid var(--vdr-line);
  border-left: 0; color: var(--vdr-text-muted); border-radius: 0; white-space: nowrap;
}
.rm-tab:first-child { border-left: 1px solid var(--vdr-line); }
.rm-tab.on { background: var(--vdr-accent); color: #fff; border-color: var(--vdr-accent); }
a.rm-tab:hover { background: var(--vdr-row-hover); color: var(--vdr-text); }
.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: 0; 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 */
.rm-wire { fill: none; stroke: var(--vdr-line); stroke-width: 1; }
.rm-wire.lit { stroke: var(--vdr-accent); stroke-width: 1.8; }
.rm-wire.dashed { stroke-dasharray: 4 4; }

/* Nodes — position/size carried in the column classes (position:absolute) */
.rm-node {
  position: absolute; box-sizing: border-box; display: block; border-radius: 0;
  color: var(--vdr-text); background: var(--vdr-bg-soft);
  border: 1px solid var(--vdr-line); padding: 11px;
}
a.rm-node:hover { background: var(--vdr-row-hover); }
.rm-node.sel {
  background: color-mix(in srgb, var(--vdr-accent) 14%, var(--vdr-bg));
  border-color: var(--vdr-accent-line);
}
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: 9.5px; 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 { color: var(--vdr-text-muted); }
.rm-node-meta.red { color: var(--vdr-flag-red); }
.rm-node-meta { margin-top: 4px; }
.rm-node-title {
  font-size: 12.5px; font-weight: 600; line-height: 1.3; margin-top: 4px;
  /* 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 84; left severity border */
.rm-risk {
  left: 0; width: 230px; height: 84px;
  border-left: 3px solid var(--vdr-line);
}
.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 66 */
.rm-find { left: 270px; width: 230px; height: 66px; padding: 10px 11px; }
.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); }
.rm-find.contra { border-color: color-mix(in srgb, var(--vdr-flag-red) 34%, var(--vdr-line)); }

/* Evidence column: left 540, width 230, height 60 */
.rm-ev { left: 540px; width: 230px; height: 60px; padding: 10px 11px; }
.rm-ev-name {
  font-size: 12.5px; font-weight: 600; line-height: 1.3; margin-top: 3px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}
.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-canvas-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--vdr-line); width: 770px;
}
.rm-canvas-foot .lbl { color: var(--vdr-text-muted); }
.rm-foot-link { font-size: 12.5px; color: var(--vdr-accent-strong); }
.rm-foot-link:hover { text-decoration: underline; }

/* ---- Register rail ---- */
.rm-rail { background: var(--vdr-bg); display: flex; flex-direction: column; min-width: 0; }
.rm-rail-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; border-bottom: 1px solid var(--vdr-line);
}
.rm-rail-head .lbl { color: var(--vdr-text-muted); }
.rm-sel-tag { color: var(--vdr-accent-strong); }

.rm-reg { border-bottom: 1px solid var(--vdr-line); }
.rm-reg-row {
  display: grid; grid-template-columns: 40px 1fr 62px; gap: 10px; align-items: center;
  padding: 10px 18px; color: var(--vdr-text); border-left: 3px solid var(--vdr-line);
}
.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: color-mix(in srgb, var(--vdr-accent) 14%, var(--vdr-bg)); }
.rm-reg-row.sel .rm-reg-title { font-weight: 600; }
.rm-reg-no { font-size: 10px; color: var(--vdr-text-muted); }
.rm-reg-row.sel .rm-reg-no { color: var(--vdr-accent-strong); }
.rm-reg-title { font-size: 12.5px; }
.rm-reg-exp { font-size: 11px; text-align: right; }
.rm-reg-exp.nq { color: var(--vdr-text-muted); }
.rm-reg-more { padding: 9px 18px; }

.rm-detail-head { padding: 16px 18px; border-bottom: 1px solid var(--vdr-line); }
.rm-detail-title { font-size: 19px; line-height: 1.2; color: var(--vdr-text); }
.rm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rm-chip { padding: 3px 8px; border-radius: 0; }
.rm-chip.outline { border: 1px solid var(--vdr-line); color: var(--vdr-text-muted); }
.rm-chip.sev-red { background: var(--vdr-flag-red); color: #F2F2F3; }
.rm-chip.sev-yellow { background: var(--vdr-flag-amber); color: #F2F2F3; }
.rm-chip.sev-green { background: var(--vdr-flag-green); color: #F2F2F3; }
.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: 10px; 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); 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 { margin-top: auto; padding: 14px 18px; border-top: 1px solid var(--vdr-line); display: flex; gap: 9px; }
.rm-rail-btn { font-size: 12.5px; padding: 9px 14px; flex: 1; text-align: center; }

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