/* portfolio-dd. Tokens first; see docs/design.md for the reasoning. */

:root {
  color-scheme: light;
  --page: #F4F6F8;
  --sheet: #FFFFFF;
  --ink: #10202B;
  --ink-2: #4A5C6A;
  --muted: #7C8B96;        /* non-text chrome only: 3.2:1 on the page */
  --hairline: #DDE3E8;
  --rule: #C9D1D8;         /* section-opening rules, axis baselines */
  --accent: #1F5FD0;
  --accent-wash: #E6EEFB;
  --loss: #B23A3A;
  --loss-wash: #F8E9E9;
  --good: #1F7A4D;
  --watch: #8A5A00;
  --deemph: #B7C1C9;

  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
  --series-5: #e87ba4; --series-6: #008300; --series-7: #4a3aa7; --series-8: #e34948;
  /* ordinal ramp, A (safest) to F (riskiest); heavier = riskier */
  --ramp-1: #86b6ef; --ramp-2: #5598e7; --ramp-3: #2a78d6;
  --ramp-4: #1c5cab; --ramp-5: #104281; --ramp-6: #0d366b;
  /* ordinal ramp for report charts (charts.js picks a validated subset per class count):
     blue 250, 350, 400, 450, 550, 650, 700 */
  --ord-1: #86b6ef; --ord-2: #5598e7; --ord-3: #3987e5; --ord-4: #2a78d6;
  --ord-5: #1c5cab; --ord-6: #104281; --ord-7: #0d366b;

  --font-display: 'Instrument Serif', 'Times New Roman', serif;
  --font-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 72px; --space-9: 112px;
  --radius: 6px;
  --gutter: 24px;
  --content-max: 1120px;
  --margin-col: 200px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0F1519; --sheet: #161D23; --ink: #F2F5F7; --ink-2: #B9C4CC; --muted: #8A98A3;
    --hairline: #26313A; --rule: #34424D; --accent: #4D8DE6; --accent-wash: #1A2B42;
    --loss: #E06666; --loss-wash: #3A1E21; --good: #3DA872; --watch: #E0A73A; --deemph: #3E4A54;
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
    --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767;
    --ramp-1: #184f95; --ramp-2: #256abf; --ramp-3: #3987e5;
    --ramp-4: #6da7ec; --ramp-5: #9ec5f4; --ramp-6: #cde2fb;
    /* blue 600, 500, 450, 400, 300, 200, 100: darkest first, riskiest lightest */
    --ord-1: #184f95; --ord-2: #256abf; --ord-3: #2a78d6; --ord-4: #3987e5;
    --ord-5: #6da7ec; --ord-6: #9ec5f4; --ord-7: #cde2fb;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0F1519; --sheet: #161D23; --ink: #F2F5F7; --ink-2: #B9C4CC; --muted: #8A98A3;
  --hairline: #26313A; --rule: #34424D; --accent: #4D8DE6; --accent-wash: #1A2B42;
  --loss: #E06666; --loss-wash: #3A1E21; --good: #3DA872; --watch: #E0A73A; --deemph: #3E4A54;
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
  --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767;
  --ramp-1: #184f95; --ramp-2: #256abf; --ramp-3: #3987e5;
  --ramp-4: #6da7ec; --ramp-5: #9ec5f4; --ramp-6: #cde2fb;
  --ord-1: #184f95; --ord-2: #256abf; --ord-3: #2a78d6; --ord-4: #3987e5;
  --ord-5: #6da7ec; --ord-6: #9ec5f4; --ord-7: #cde2fb;
}

@media (max-width: 599px) { :root { --gutter: 16px; } }

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  font-variant-numeric: proportional-nums;
  overflow-wrap: break-word;
}
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}
h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.02; letter-spacing: -0.01em; }
h2 { font-size: 32px; line-height: 1.1; letter-spacing: -0.005em; }
h1 em, h2 em { font-style: italic; }
h3 { font-size: 17px; line-height: 1.4; font-weight: 600; margin: 0; }
p { margin: 0 0 var(--space-4); max-width: 68ch; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.small { font-size: 14px; line-height: 1.45; }
.secondary { color: var(--ink-2); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -48px; z-index: 10;
  background: var(--sheet); padding: var(--space-2) var(--space-3); border-radius: var(--radius);
}
.skip-link:focus { top: var(--space-2); }

.wrap { max-width: calc(var(--content-max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- nav ---------- */

.site-nav { padding: var(--space-5) 0 var(--space-4); }
.site-nav .wrap { display: flex; align-items: baseline; gap: var(--space-6); flex-wrap: wrap; }
.wordmark {
  font-family: var(--font-display); font-size: 28px; line-height: 1; color: var(--ink);
  text-decoration: none; letter-spacing: -0.01em;
}
.nav-links { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.nav-links a { color: var(--ink-2); text-decoration: none; padding: var(--space-1) 0; }
.nav-links a:hover { color: var(--ink); text-decoration: underline; }
.nav-links a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.theme-toggle {
  margin-left: auto; font: inherit; font-size: 14px; color: var(--ink-2);
  background: none; border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: var(--space-1) var(--space-3); cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--rule); }
@media (max-width: 599px) {
  .site-nav .wrap { gap: var(--space-3) var(--space-5); }
  .nav-links { gap: var(--space-4); order: 3; width: 100%; }
}

/* ---------- ledger grid ---------- */

main { padding-bottom: var(--space-9); }
main:focus { outline: none; }
.ledger {
  border-top: 1px solid var(--rule);
  padding: var(--space-6) 0 var(--space-8);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}
.ledger-margin h2 { font-size: 30px; }
.ledger-margin p { margin-top: var(--space-3); color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.ledger-content { min-width: 0; }
.ledger-content > * + * { margin-top: var(--space-6); }
@media (min-width: 960px) {
  .ledger { grid-template-columns: var(--margin-col) minmax(0, 1fr); column-gap: var(--space-7); }
  .ledger-margin h2 { font-size: 26px; line-height: 1.15; }
  .ledger-margin { position: relative; }
}

/* ---------- sheet ---------- */

.sheet {
  background: var(--sheet);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 28px;
}
@media (max-width: 599px) { .sheet { padding: var(--space-4); } }

/* ---------- buttons and links that act ---------- */

.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.button {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: inherit; font-size: 16px; font-weight: 600; line-height: 1.2;
  padding: 12px 18px; border-radius: var(--radius); cursor: pointer;
  text-decoration: none; border: 1px solid var(--accent);
}
.button-primary { background: var(--accent); color: #FFFFFF; }
.button-primary:hover { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); }
:root[data-theme="dark"] .button-primary { color: #0F1519; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .button-primary { color: #0F1519; } }
.button-secondary { background: transparent; color: var(--accent); }
.button-secondary:hover { background: var(--accent-wash); }
.button[disabled], .button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.button-quiet {
  font: inherit; font-size: 14px; color: var(--accent); background: none; border: 0;
  padding: var(--space-1) 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- home: hero ---------- */

.hero { padding: var(--space-7) 0 var(--space-8); display: grid; gap: var(--space-7); }
.hero-copy p { font-size: 19px; color: var(--ink-2); margin-top: var(--space-5); max-width: 46ch; }
.hero-figure { margin: 0; min-width: 0; }
.hero-figure figcaption { font-size: 14px; color: var(--ink-2); margin-top: var(--space-3); max-width: 60ch; }
.hero-curve { width: 100%; height: auto; display: block; overflow: visible; }
.hero-curve .grid { stroke: var(--hairline); stroke-width: 1; shape-rendering: crispEdges; }
.hero-curve .baseline { stroke: var(--rule); stroke-width: 1; shape-rendering: crispEdges; }
.hero-curve .tick { fill: var(--ink-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.hero-curve .curve { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hero-curve .end-label { fill: var(--ink); font-size: 14px; font-weight: 600; }
.hero-curve .end-value { fill: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.hero-curve .end-dot { stroke: var(--page); stroke-width: 2; }
.hero-empty { border: 1px dashed var(--rule); border-radius: var(--radius); padding: var(--space-6); color: var(--ink-2); }
@media (min-width: 960px) {
  .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--space-8); padding-top: var(--space-8); }
}

/* ---------- home: stages ---------- */

.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); counter-reset: stage; }
.stages li { counter-increment: stage; display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--space-3); align-content: start; }
.stages li > * { grid-column: 2; }
.stages li::before {
  content: counter(stage); grid-column: 1; grid-row: 1 / span 2; align-self: start;
  font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--accent);
  width: 28px; height: 28px; border: 1px solid var(--accent); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
}
.stages h3 { margin-bottom: var(--space-1); }
.stages p { color: var(--ink-2); font-size: 16px; }
@media (min-width: 720px) { .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- headline strip: one sheet, ruled cells ---------- */

.figures-strip { padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .figures-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.figures-strip > div { padding: 20px 24px 22px; border-top: 1px solid var(--hairline); margin-top: -1px; }
.figures-strip > div + div { border-left: 1px solid var(--hairline); }
.figures-strip dt { font-size: 14px; color: var(--ink-2); line-height: 1.35; }
.figures-strip dd { margin: var(--space-2) 0 0; font-size: 32px; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: proportional-nums; }
.figures-strip .figure-note { display: block; font-size: 13px; color: var(--ink-2); font-weight: 400; margin-top: var(--space-2); letter-spacing: 0; line-height: 1.4; }
.figures-strip { overflow: hidden; }
.figures-strip > div { margin-left: -1px; }
@media (max-width: 479px) {
  .figures-strip > div { padding: 16px; }
  .figures-strip dd { font-size: 26px; }
}

.deliverables { margin: 0; padding: 0; list-style: none; max-width: 68ch; }
.deliverables li { padding: var(--space-3) 0; border-top: 1px solid var(--hairline); }
.deliverables li:first-child { border-top: 0; padding-top: 0; }
.deliverables strong { font-weight: 600; }
.deliverables span { color: var(--ink-2); }

/* ---------- page heads ---------- */

.page-head { padding: var(--space-7) 0 var(--space-7); }
.page-head p { font-size: 19px; color: var(--ink-2); margin-top: var(--space-5); }
.page-head .meta { margin: var(--space-5) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: 14px; color: var(--ink-2); }
.page-head .meta dt { display: inline; }
.page-head .meta dd { display: inline; margin: 0 0 0 var(--space-1); color: var(--ink); font-weight: 600; }

/* ---------- figures ---------- */

.figure { margin: 0; }
.figure-head { margin-bottom: var(--space-5); }
.figure-head p { margin: var(--space-1) 0 0; font-size: 15px; color: var(--ink-2); }
.figure-note { margin-top: var(--space-4); font-size: 14px; color: var(--ink-2); }
.findings { list-style: none; margin: var(--space-4) 0 0; padding: 0; max-width: 72ch; }
.findings li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--hairline); }
.findings li:first-child { border-top: 0; }
.finding-mark { display: inline-flex; align-items: flex-start; gap: 6px; font-size: 14px; line-height: 1.6; color: var(--ink-2); padding-top: 1px; }
.finding-mark svg { flex: none; margin-top: 4px; }
.finding-concern .finding-mark { color: var(--ink); font-weight: 600; }
.finding-concern .finding-mark .icon-fill { fill: var(--loss); }
.finding-watch .finding-mark .icon-stroke { stroke: var(--watch); }
.finding-info .finding-mark .icon-stroke { stroke: var(--muted); }
@media (max-width: 479px) { .findings li { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } }

/* ---------- chart chrome (rendered by charts.js) ---------- */

.figure { position: relative; }
.figure .figure-head { padding-right: 96px; }
.chart-toolbar-solo { position: absolute; top: 28px; right: 28px; margin: 0; }
@media (max-width: 599px) { .chart-toolbar-solo { top: 16px; right: 16px; } }
.chart-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-4); }
.chart-toolbar .toggle { margin-left: auto; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend svg { flex: none; }
.chart-plot { position: relative; }
.chart-plot svg { display: block; overflow: visible; }
.chart-plot:focus-visible { outline-offset: 4px; }
.chart-svg .grid { stroke: var(--hairline); stroke-width: 1; shape-rendering: crispEdges; }
.chart-svg .baseline { stroke: var(--rule); stroke-width: 1; shape-rendering: crispEdges; }
.chart-svg .tick { fill: var(--ink-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.chart-svg .cat { fill: var(--ink-2); font-size: 13px; }
.chart-svg .axis-label { fill: var(--ink-2); font-size: 13px; }
.chart-svg .value-label { fill: var(--ink); font-size: 13px; font-weight: 600; }
.chart-svg .series-label { fill: var(--ink); font-size: 13px; font-weight: 600; }
.chart-svg .crosshair { stroke: var(--rule); stroke-width: 1; shape-rendering: crispEdges; }
.chart-svg .mark { transition: opacity 120ms; }
.chart-svg .mark.is-dim { opacity: 0.45; }
.chart-svg .dot { stroke: var(--sheet); stroke-width: 2; }
.chart-svg .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tooltip {
  position: absolute; z-index: 5; pointer-events: none; min-width: 120px; max-width: 260px;
  background: var(--sheet); border: 1px solid var(--hairline); border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(16, 32, 43, 0.12); padding: 10px 12px; font-size: 13px; line-height: 1.4;
}
.tooltip[hidden] { display: none; }
.tooltip-title { color: var(--ink-2); margin-bottom: 6px; }
.tooltip-row { display: grid; grid-template-columns: 14px auto minmax(0, 1fr); align-items: baseline; gap: 6px; }
.tooltip-row + .tooltip-row { margin-top: 3px; }
.tooltip-row strong { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.tooltip-row span { color: var(--ink-2); }
.tooltip-key { width: 12px; height: 2px; border-radius: 1px; align-self: center; }

/* ---------- tables ---------- */

.table-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.4; }
.data-table caption { text-align: left; font-size: 14px; color: var(--ink-2); padding-bottom: var(--space-3); }
.data-table th, .data-table td { padding: 9px 12px; border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: top; }
.data-table thead th { font-weight: 600; color: var(--ink-2); font-size: 14px; border-bottom-color: var(--rule); }
.data-table th:first-child, .data-table td:first-child { padding-left: 0; }
.data-table th:last-child, .data-table td:last-child { padding-right: 0; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table tbody th { font-weight: 400; color: var(--ink); }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table code, .field-name { font-family: inherit; font-weight: 600; font-size: inherit; }

/* ---------- notices ---------- */

.notice { border: 1px solid var(--hairline); border-left: 3px solid var(--accent); background: var(--sheet); border-radius: var(--radius); padding: var(--space-4) var(--space-5); max-width: 72ch; }
.notice h2 { font-size: 26px; margin-bottom: var(--space-2); }
.notice-error { border-left-color: var(--loss); }
.notice-error strong { color: var(--ink); }
.notice-warn { border-left-color: var(--watch); }

/* ---------- about ---------- */

.prose h3 { margin: var(--space-6) 0 var(--space-2); }
.prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.2em; max-width: 68ch; margin: 0 0 var(--space-4); }
.prose li + li { margin-top: var(--space-2); }
.formula { margin: 0 0 var(--space-5); max-width: 68ch; }
.formula dt { font-weight: 600; }
.formula dd { margin: var(--space-1) 0 0; color: var(--ink-2); }
.formula + .formula { padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
.roadmap { list-style: none; padding: 0; margin: 0; counter-reset: step; max-width: 68ch; }
.roadmap li { counter-increment: step; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--hairline); }
.roadmap li:first-child { border-top: 0; }
.roadmap li::before { content: counter(step); font-weight: 600; color: var(--ink-2); }
.roadmap .state { font-size: 14px; color: var(--ink-2); }
.required-mark { font-size: 13px; color: var(--ink-2); white-space: nowrap; }

/* ---------- tool ---------- */

.upload { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.upload .status-line:empty { display: none; }
.field input[type="text"] { width: 100%; }
.dropzone {
  position: relative; border: 1px dashed var(--rule); border-radius: var(--radius);
  padding: var(--space-6) var(--space-5); background: var(--page);
}
.dropzone.is-over { border-color: var(--accent); background: var(--accent-wash); }
.dropzone p { margin: 0; color: var(--ink-2); }
.dropzone label { font-weight: 600; color: var(--ink); }
.dropzone input[type="file"] { display: block; margin-top: var(--space-3); font: inherit; font-size: 15px; max-width: 100%; color: var(--ink-2); }
.field { display: grid; gap: var(--space-1); max-width: 420px; }
.field label { font-size: 15px; font-weight: 600; }
.field .hint { font-size: 14px; color: var(--ink-2); }
input[type="text"], select {
  font: inherit; font-size: 15px; color: var(--ink); background: var(--sheet);
  border: 1px solid var(--rule); border-radius: var(--radius); padding: 8px 10px; min-height: 40px; max-width: 100%;
}
select { padding-right: 28px; }
.status-line { font-size: 15px; color: var(--ink-2); min-height: 1.55em; }
.status-line.is-error { color: var(--ink); }
.dataset-list { list-style: none; margin: 0; padding: 0; }
.dataset-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); align-items: baseline; padding: var(--space-3) 0; border-top: 1px solid var(--hairline); }
.dataset-list li:first-child { border-top: 0; padding-top: 0; }
.dataset-list .facts { font-size: 14px; color: var(--ink-2); grid-column: 1 / -1; }
.badge { display: inline-block; font-size: 13px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--hairline); color: var(--ink-2); white-space: nowrap; }
.badge-good { border-color: color-mix(in srgb, var(--good) 45%, transparent); color: var(--ink); }

.steps-nav { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: 15px; color: var(--ink-2); counter-reset: tstep; }
.steps-nav li { counter-increment: tstep; }
.steps-nav li::before { content: counter(tstep) " "; font-weight: 600; }
.steps-nav li[aria-current="step"] { color: var(--ink); font-weight: 600; }
.steps-nav li.is-done { color: var(--ink); }

.mapping-table td { vertical-align: middle; }
.mapping-table select { width: 100%; min-width: 160px; }
.confidence { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.confidence-track { width: 48px; height: 6px; border-radius: 3px; background: var(--hairline); overflow: hidden; }
.confidence-fill { height: 100%; background: var(--series-1); border-radius: 3px; }
.confidence.is-low .confidence-fill { background: var(--watch); }
.rationale { font-size: 14px; color: var(--ink-2); max-width: 44ch; }
.source-tag { font-size: 13px; color: var(--ink-2); }
.issue-list { list-style: none; padding: 0; margin: 0; }
.issue-list li { padding: var(--space-2) 0; border-top: 1px solid var(--hairline); font-size: 15px; }
.issue-list li:first-child { border-top: 0; }
.tool-panel + .tool-panel { margin-top: var(--space-6); }
.tool-panel h2 { margin-bottom: var(--space-3); }
.tool-panel > p { color: var(--ink-2); }
.report-root > * + * { margin-top: var(--space-6); }
.report-section { border-top: 1px solid var(--rule); padding-top: var(--space-6); }
.report-section > h2 { margin-bottom: var(--space-2); }
.report-section > .intro { color: var(--ink-2); }
.report-section > .sheet { margin-top: var(--space-5); }

/* mapping table collapses to stacked rows on phones */
@media (max-width: 719px) {
  .mapping-table thead { display: none; }
  .mapping-table tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); }
  .mapping-table td, .mapping-table th { border: 0; padding: 2px 0; }
}

/* ---------- footer ---------- */

.site-footer { border-top: 1px solid var(--rule); padding: var(--space-6) 0 var(--space-7); font-size: 14px; color: var(--ink-2); }
.site-footer dl { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-7); margin: 0; }
.site-footer dt { color: var(--ink-2); }
.site-footer dd { margin: 2px 0 0; color: var(--ink); }
.site-footer .made { margin-top: var(--space-5); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* tool helpers */
.actions-tight { margin-top: 0; align-items: center; }
.panel-subhead { margin-top: var(--space-5); margin-bottom: var(--space-2); }
details > summary { cursor: pointer; color: var(--accent); font-weight: 600; }
details > .table-scroll { margin-top: var(--space-4); }
.samples { color: var(--ink-2); font-size: 14px; }
.outlier-table td:last-child { min-width: 24ch; }
.contents-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.ledger-contents { padding-bottom: var(--space-6); }

/* tool: outliers */
.outliers-panel > h3 { margin-bottom: var(--space-4); }
.outliers-actions label { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-2); }
.outliers-panel .status-line { margin-top: var(--space-3); }
#outliers-result > * + * { margin-top: var(--space-4); }
#outliers-result.is-pending { opacity: 0.55; transition: opacity 120ms; }
.outliers-notice { margin-top: var(--space-4); }
.outliers-empty { color: var(--ink-2); }
.outlier-table td:last-child { min-width: 0; }
.outlier-table td:last-child, .outlier-table th:last-child { white-space: nowrap; }
.outlier-table tr.has-explanation > * { border-bottom: 0; padding-bottom: 2px; }
.outlier-table .explanation-row td { padding-top: 0; white-space: normal; }
.outlier-explanation { margin: 0; max-width: 72ch; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.direction { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); }
.direction svg { flex: none; }
.direction-worse { color: var(--ink); font-weight: 600; }
.direction-worse path { fill: var(--loss); }
.direction-better path { fill: none; stroke: var(--ink-2); stroke-width: 1.2; stroke-linejoin: round; }

/* ---------- landing and mapping copy (builder C) ---------- */
.hero-login { margin-top: var(--space-3); }
.hero-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .hero-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.page-head .meta-line { font-size: 15px; margin-top: var(--space-3); }
.page-head .meta-line:empty { display: none; }
.visibility-row p { font-size: 15px; margin-top: var(--space-3); color: var(--ink-2); }
.stages p a { white-space: nowrap; }

/* ---------- chart flags (charts.js; docs/redesign-brief.md §3.2) ---------- */

.chart-stage { position: relative; }
.chart-stage[hidden] { display: none; }
.chart-link-layer { position: absolute; inset: 0; pointer-events: none; }
.chart-links { display: block; overflow: visible; }
.chart-links a { pointer-events: auto; cursor: pointer; }
.chart-links a:focus { outline: none; }
.chart-links .flag-badge { fill: var(--ink); }
.chart-links .flag-badge-text { fill: var(--sheet); font-size: 11px; font-weight: 600; pointer-events: none; }
.chart-links .flag-badge-link:hover .flag-badge { fill: var(--accent); }
.chart-links .flag-badge-link:focus-visible .flag-badge { fill: var(--accent); stroke: var(--accent); stroke-width: 2; }
.chart-links .flag-badge-link:focus-visible .flag-hit { stroke: var(--accent); stroke-width: 2; rx: 6; }
.chart-svg .flag-outline { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.chart-svg .hatch-line { stroke: var(--sheet); stroke-width: 1.5; stroke-opacity: 0.55; }
.chart-svg .flag-label { fill: var(--ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-svg .reference { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 5 4; shape-rendering: crispEdges; }
.chart-svg .reference-label { fill: var(--ink); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-svg .whisker line { stroke: var(--ink-2); stroke-width: 1; shape-rendering: crispEdges; }
.chart-svg .line-book { stroke-dasharray: 6 4; stroke-width: 1.5; stroke-linecap: butt; }
.chart-svg .line-flagged { stroke-width: 3; }
.chart-svg .series-label-book { fill: var(--ink-2); font-weight: 400; }
.data-table .flag-cell { white-space: nowrap; }
.chart-svg.reveal-columns .mark path { transform-box: fill-box; transform-origin: bottom; animation: pdd-grow-up 700ms cubic-bezier(0.3, 0.6, 0.2, 1) both; }
.chart-svg.reveal-rows .mark path { transform-box: fill-box; transform-origin: left; animation: pdd-grow-right 700ms cubic-bezier(0.3, 0.6, 0.2, 1) both; }
.chart-svg .reveal-fade { animation: pdd-fade 900ms ease-out both; }
@keyframes pdd-grow-up { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pdd-grow-right { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pdd-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- portfolio pages (builder B) ---------- */

.breadcrumb { margin-bottom: var(--space-3); }
.button-small { font-size: 14px; padding: 7px 12px; }
.flag-tag {
  display: inline-block; min-width: 26px; padding: 0 6px; border-radius: 4px; text-align: center;
  background: var(--ink); color: var(--sheet); font-size: 12px; font-weight: 600; line-height: 18px;
  font-variant-numeric: tabular-nums;
}
.severity { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--ink); }
.severity svg { flex: none; }
.severity-high .icon-fill { fill: var(--loss); }
.severity-medium .icon-stroke { stroke: var(--watch); }
.severity-low .icon-stroke { stroke: var(--ink-2); }

/* list */
.portfolio-sheet { padding: var(--space-2) var(--space-5); }
.portfolio-table .portfolio-name a { font-weight: 600; }
.portfolio-table .owner-line { display: block; font-size: 13px; color: var(--ink-2); }
.portfolio-table td, .portfolio-table th { vertical-align: baseline; }
.portfolio-table .row-actions { text-align: right; }
.portfolio-table td[data-label="As of"], .portfolio-table td[data-label="Findings"] { white-space: nowrap; }
@media (max-width: 719px) {
  .portfolio-table thead { display: none; }
  .portfolio-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); }
  .portfolio-table tbody tr:last-child { border-bottom: 0; }
  .portfolio-table th, .portfolio-table td, .portfolio-table td.num { border: 0; padding: 0; text-align: left; font-size: 14px; }
  .portfolio-table .portfolio-name { grid-column: 1 / -1; font-size: 16px; }
  /* "2 medium · 19 low" does not fit half a phone row: it takes the full row. */
  .portfolio-table td[data-label="Findings"] { grid-column: 1 / -1; white-space: normal; }
  .portfolio-table td[data-label]::before { content: attr(data-label) " "; color: var(--ink-2); }
  .portfolio-table .row-actions { grid-column: 1 / -1; text-align: left; }
  .portfolio-table .row-actions:empty { display: none; }
}

/* overview */
.ov-head { padding-bottom: var(--space-5); }
.facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: var(--space-5) 0 0; font-size: 15px; color: var(--ink-2); }
.facts dt { display: inline; }
.facts dd { display: inline; margin: 0 0 0 var(--space-1); color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.facts-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-6); margin-top: var(--space-5); }
.facts-row .facts { margin: 0; }
.facts-link { font-size: 15px; font-weight: 600; white-space: nowrap; }
.ov-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.ov-actions:empty { display: none; }
.ov-head .status-line:empty { display: none; }
.checks-strip { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-5); padding: var(--space-3) var(--space-5); }
.checks-strip p { margin: 0; }
.ov-notice, .ov-run { margin-top: var(--space-5); }
.ov-run .button { margin-bottom: var(--space-3); }
.ov-section { border-top: 1px solid var(--rule); margin-top: var(--space-6); padding-top: var(--space-5); }
.ov-section > h2 { margin-bottom: var(--space-4); }
.rail-count { margin: 0; padding: var(--space-1) 0; color: var(--ink); }
@media (min-width: 640px) { .rail > summary { display: none; } }
@media (max-width: 639px) { .rail-count { display: none; } }
.rail > summary, .rail-more > summary { color: var(--ink); font-weight: 400; padding: var(--space-1) 0; }
.rail-more > summary { color: var(--accent); font-weight: 600; margin-top: var(--space-2); }
.rail-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.rail-item {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: baseline;
  gap: var(--space-1) var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--hairline);
}
.rail-meta { font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.rail-link { white-space: nowrap; font-size: 15px; }
@media (max-width: 719px) {
  .rail-item { grid-template-columns: auto minmax(0, 1fr); }
  .rail-text { grid-column: 1 / -1; }
  .rail-link { grid-column: 1 / -1; }
}
.ov-rows { display: grid; gap: var(--space-6); }
.ov-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.ov-row > * { min-width: 0; }
@media (min-width: 1024px) { .ov-row { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-5); align-items: start; } }
.ov-cards { display: grid; gap: var(--space-3); align-content: start; }
.ov-empty { color: var(--ink-2); font-size: 15px; margin: 0; }
@media (min-width: 1024px) { .ov-empty { padding-top: var(--space-5); } }
.finding-card {
  position: relative; background: var(--sheet); border: 1px solid var(--hairline); border-left: 3px solid var(--ink-2);
  border-radius: var(--radius); padding: var(--space-4); font-size: 15px;
}
.finding-card-high { border-left-color: var(--loss); }
.finding-card-medium { border-left-color: var(--watch); }
.finding-card:hover { border-color: var(--rule); }
.finding-card p { margin: 0; }
.finding-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 14px; }
.finding-kind { color: var(--ink-2); }
.finding-card-text { margin-top: var(--space-2) !important; color: var(--ink); }
.finding-card-detail { margin-top: var(--space-2) !important; font-size: 13px; color: var(--ink-2); }
.finding-card-link { display: inline-block; margin-top: var(--space-3); font-weight: 600; font-size: 14px; }
.finding-card-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.finding-card-link:focus-visible { outline: none; }
.finding-card-link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }
.method-note { margin-top: var(--space-6); font-size: 14px; color: var(--ink-2); max-width: 80ch; }

/* landing hero row */
@media (max-width: 959px) { .hero { grid-template-columns: minmax(0, 1fr); } }
.hero-overview { min-width: 0; }
.hero-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.hero-row > * { min-width: 0; }
.hero-chart { padding: var(--space-4) var(--space-4) var(--space-3); }
/* The card column exists only when a card renders: the landing draws the chart alone. */
@media (min-width: 1280px) { .hero-row:has(.hero-card) { grid-template-columns: minmax(0, 1fr) 220px; align-items: start; } }

/* checks */
.check + .check { margin-top: var(--space-4); }
.check h3 { margin-bottom: var(--space-2); }
.check .table-scroll { margin-top: var(--space-3); }
.check-fix { margin-top: var(--space-3); font-size: 15px; font-weight: 600; }
.check-blocking { border-left: 3px solid var(--loss); }
.check-warning { border-left: 3px solid var(--watch); }
.checks-foot { margin-top: var(--space-6); }
.checks-foot .status-line { margin-top: var(--space-3); }

/* segment */
.seg-findings { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-4) 0 0; padding: 0; font-size: 15px; color: var(--ink-2); }
.seg-findings li { display: inline-flex; align-items: center; gap: var(--space-2); }
.seg-sentence { font-size: 17px !important; color: var(--ink) !important; margin-top: var(--space-3) !important; }
.seg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); border-top: 1px solid var(--rule); padding-top: var(--space-5); margin-top: var(--space-6); }
@media (min-width: 1024px) { .seg-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.seg-panel > h2, .seg-section > h2 { margin-bottom: var(--space-4); font-size: 28px; }
.seg-section { border-top: 1px solid var(--rule); padding-top: var(--space-5); margin-top: var(--space-6); }
.comparison-table .interval { display: block; font-size: 13px; color: var(--ink-2); }
.seg-card { margin-top: var(--space-4); font-size: 15px; }
.seg-multiples { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.seg-multiples .sheet { padding: var(--space-4); }
.seg-multiples .figure-head { margin-bottom: var(--space-2); }
.mix-list { list-style: none; margin: 0; padding: var(--space-4) var(--space-5); }
.decomposition { padding: 0; margin-bottom: var(--space-4); }
.mix-list li + li { margin-top: var(--space-4); }
.mix-list p { margin: 0 0 var(--space-2); font-size: 15px; }
.mix-bars { display: grid; gap: 3px; }
.mix-bar { display: block; height: 8px; border-radius: 0 3px 3px 0; min-width: 2px; }
.mix-bar-segment { background: var(--accent); }
.mix-bar-book { background: var(--deemph); }
.mix-bar.is-negative { background: repeating-linear-gradient(45deg, var(--accent) 0 3px, transparent 3px 6px); border: 1px solid var(--accent); }
.mix-key { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.mix-key-swatch { display: inline-block; width: 12px; height: 8px; border-radius: 2px; }
.mix-key-swatch + .mix-key-swatch, .mix-key .mix-key-swatch:not(:first-child) { margin-left: var(--space-3); }
.narrative { max-width: 72ch; }
.loans-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-5); margin-bottom: var(--space-3); }
.loans-head p { margin: 0; }
@media (max-width: 639px) {
  .loans-table thead { display: none; }
  .loans-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--hairline); }
  .loans-table th, .loans-table td, .loans-table td.num { border: 0; padding: 0; text-align: left; font-size: 14px; }
  .loans-table th { grid-column: 1 / -1; font-weight: 600; }
  .loans-table td[data-label]::before { content: attr(data-label) " "; color: var(--ink-2); }
}

/* chart DOM order (P3-12): the toolbar follows the plot for Tab, and is drawn above it */
.chart { display: flex; flex-direction: column; }
.chart > .figure-head { order: -2; }
.chart > .chart-toolbar:not(.chart-toolbar-solo) { order: -1; }
.figure-key { margin: var(--space-3) 0 0; font-size: 13px; color: var(--ink-2); }
.figure-key[hidden] { display: none; }
.chart-svg .leader { fill: none; stroke: var(--ink-2); stroke-width: 1; stroke-opacity: 0.6; }

/* segment: collapsible sections (small multiples, narrative), mix key inside its sheet, foot */
.seg-details > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: var(--space-3); }
.seg-details > summary::-webkit-details-marker { display: none; }
.seg-details > summary::before { content: "▸"; color: var(--ink-2); font-size: 18px; transition: transform 120ms; }
.seg-details[open] > summary::before { transform: rotate(90deg); }
.seg-details > summary > h2 { display: inline; margin: 0; font-size: 28px; }
.seg-details[open] > summary { margin-bottom: var(--space-4); }
.sheet > .mix-key { margin: 0; padding: 0 var(--space-5) var(--space-4); }
.seg-foot { border-top: 1px solid var(--rule); margin-top: var(--space-6); padding-top: var(--space-4); font-size: 15px; }
.seg-summary { font-size: 17px !important; color: var(--ink) !important; margin-top: var(--space-2) !important; }
.seg-ladder-figures { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 1024px) { .seg-ladder-figures.has-reference { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.seg-rungs { margin-top: var(--space-4); }
.seg-rungs > summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 15px; margin-bottom: var(--space-3); }
.rung-table tr.is-named th, .rung-table tr.is-named td { font-weight: 600; }

/* landing */
.hero-copy h1 { max-width: 16ch; }
.hero-copy p + p { margin-top: var(--space-4); }
.close .ledger-content p { font-size: 19px; color: var(--ink-2); max-width: 46ch; font-variant-numeric: tabular-nums; }
.actions-close { margin-top: var(--space-5); }
@media (max-width: 959px) { .close .ledger-margin { display: none; } }

/* ---------- fraud overview, loans to review, loan page (pages builder, fraud round) ---------- */

/* chart marks */
.chart-svg .band polygon { fill: var(--ink-2); fill-opacity: 0.1; }
.chart-svg .reference-halo { paint-order: stroke; stroke: var(--sheet); stroke-width: 4px; stroke-linejoin: round; }
.chart-svg .reference-x { stroke-dasharray: 3 3; }
.chart-svg .point-flagged { stroke: var(--ink); stroke-width: 1.5; }
.chart-svg .point-ring { fill: none; stroke: var(--ink); stroke-width: 1.5; pointer-events: none; }
.chart-svg .flagged-point circle { stroke: var(--sheet); stroke-width: 1; }
.chart-svg .heat-empty { fill: none; stroke: var(--hairline); stroke-width: 1; }
.chart-svg .heat-label { fill: var(--ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; pointer-events: none; }
.chart-svg .heat-label.is-strong { fill: var(--sheet); }
.chart-svg .heat-label.is-empty { fill: var(--ink-2); font-weight: 400; }
.chart-svg .heat-cell { transition: opacity 120ms; }
.chart-svg .heat-cell.is-dim { opacity: 0.55; }
.chart-links .flag-badge-static .flag-badge { fill: var(--ink); }
.heat-scale { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--ink-2); }
.heat-scale svg { display: block; overflow: visible; }
.heat-scale .tick { fill: var(--ink-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.legend circle.point-flagged { stroke: var(--ink); stroke-width: 1.5; }
.typed-table tr.is-clear > * { color: var(--ink-2); }
.typed-table tr.is-flagged > * { color: var(--ink); }
.typed-table tr.is-flagged td.num { font-weight: 600; }
.data-table td.is-flagged { font-weight: 600; outline: 2px solid var(--ink); outline-offset: -2px; }
/* Narrow screens keep a typed table's Flag column: Share goes first, then Balance (UX P2-10). */
@media (max-width: 639px) {
  .typed-table .col-share { display: none; }
  .typed-table th, .typed-table td { padding-left: 6px; padding-right: 6px; }
  .typed-table thead th { white-space: normal; vertical-align: bottom; }
  .typed-table th.col-test, .typed-table th.col-cluster { min-width: 9ch; }
}
@media (max-width: 479px) {
  .typed-table .col-balance { display: none; }
}

/* overview: header links, loans to review, not run */
.facts-links { margin: 0; font-size: 15px; }
.ov-more { font-size: 14px; }
.review-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 900px) { .review-cards.has-confirm { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.review-card { display: flex; flex-direction: column; gap: var(--space-3); }
.review-card h3 { margin: 0; }
.review-figures { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-7); margin: 0; }
.review-figures dt { font-size: 14px; color: var(--ink-2); }
.review-figures dd { margin: 2px 0 0; font-size: 28px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.review-share { font-size: 14px; font-weight: 400; color: var(--ink-2); white-space: nowrap; }
.review-note, .review-marks { margin: 0; font-size: 15px; color: var(--ink-2); }
.review-marks { color: var(--ink); }
.review-reasons-title { font-size: 15px; margin-top: var(--space-2) !important; }
.review-reasons { margin: 0; padding-left: 1.4em; font-size: 15px; }
.review-reasons li + li { margin-top: 2px; }
.review-reason-count { color: var(--ink-2); white-space: nowrap; }
.review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin: var(--space-2) 0 0; }
.review-csv { font-size: 15px; }
.not-run-list { margin: 0; padding-left: 1.2em; max-width: 80ch; color: var(--ink-2); font-size: 15px; }
.not-run-list li + li { margin-top: var(--space-2); }

/* loans to review */
.loans-page-head { padding-bottom: var(--space-5); }
.loan-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-4); padding: var(--space-4) var(--space-5); }
.filter-field { display: grid; gap: var(--space-1); min-width: 0; }
.filter-field label { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.filter-field select { max-width: 320px; }
.filter-narrow input { width: 96px; }
.filter-actions { display: flex; align-items: center; gap: var(--space-4); padding-bottom: 2px; }
.filter-clear { font-size: 15px; }
input[type="month"], input[type="number"], textarea {
  font: inherit; font-size: 15px; color: var(--ink); background: var(--sheet);
  border: 1px solid var(--rule); border-radius: var(--radius); padding: 8px 10px; min-height: 40px; max-width: 100%;
}
textarea { width: 100%; resize: vertical; line-height: 1.45; }
.active-filters { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: 15px; }
.active-filters a { margin-left: var(--space-1); font-size: 14px; }
.loans-notice { margin-top: var(--space-5); }
.loans-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-5); margin-top: var(--space-5); }
.loans-count { margin: 0; font-size: 15px; color: var(--ink); max-width: none; }
.loans-truncated { display: block; color: var(--ink-2); font-size: 14px; }
.loans-csv { font-size: 15px; font-weight: 600; white-space: nowrap; }
#review-status:empty { display: none; }
.loans-sheet { padding: var(--space-2) var(--space-5); margin-top: var(--space-3); }
.loans-empty { margin-top: var(--space-5); }
.review-table { font-size: 14px; }
.review-table th, .review-table td { vertical-align: middle; }
.review-table .review-loan a { font-weight: 600; font-variant-numeric: tabular-nums; }
.review-table td[data-label="Originated"] { white-space: nowrap; font-variant-numeric: tabular-nums; }
.review-table td[data-label="Status"] { white-space: nowrap; }
.review-table tr.review-row > * { border-bottom-color: var(--hairline); }
.reason-details { margin-top: 4px; font-size: 13px; }
.reason-details > summary { color: var(--ink-2); cursor: pointer; width: max-content; }
.reason-details[open] > summary { margin-bottom: var(--space-1); }
.review-sentences { margin: 0; padding-left: 1.2em; max-width: 90ch; color: var(--ink-2); }
.loans-lead { margin: var(--space-2) 0 0; max-width: 70ch; color: var(--ink-2); }
.chip-key { margin: var(--space-2) 0 0; font-size: 13px; color: var(--ink-2); }
.chip-key-item { white-space: nowrap; }
.chip-glyph { font-size: 9px; vertical-align: 1px; color: var(--ink-2); }
.chip-glyph-strong { color: var(--loss); }
.chip-glyph-medium { color: var(--watch); }
.chip-key-dashed { display: inline-block; padding: 0 6px; border: 1px dashed var(--rule); border-radius: 4px; line-height: 18px; color: var(--ink); }
.log-in-line { margin: var(--space-2) 0 0; font-size: 14px; color: var(--ink-2); }
.review-sentences li + li { margin-top: var(--space-1); }
.score { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.score-bar { width: 48px; height: 6px; border-radius: 3px; background: var(--hairline); overflow: hidden; }
.score-fill { display: block; height: 100%; background: var(--ink-2); border-radius: 0 3px 3px 0; }
.score-value { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  display: inline-block; max-width: 100%; overflow-wrap: anywhere;
  font-size: 13px; line-height: 20px; padding: 0 8px; border-radius: 4px;
  border: 1px solid var(--rule); color: var(--ink); background: var(--sheet); cursor: help;
}
.chip::before { display: inline-block; margin-right: 4px; font-size: 9px; color: var(--ink-2); vertical-align: 1px; }
.chip-strong { border-color: var(--ink); }
.chip-strong::before { content: "▲" / ""; color: var(--loss); }
.chip-medium::before { content: "○" / ""; color: var(--watch); }
.chip-weak::before { content: "–" / ""; }
.chip-integrity { border-style: dashed; }
.mark-group { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.mark-button {
  font: inherit; font-size: 13px; line-height: 1.2; padding: 6px 8px; min-height: 32px; background: var(--sheet);
  color: var(--ink-2); border: 0; cursor: pointer;
}
.mark-button + .mark-button { border-left: 1px solid var(--rule); }
.mark-button:hover { color: var(--ink); background: var(--accent-wash); }
.mark-button[aria-pressed="true"] { background: var(--ink); color: var(--sheet); font-weight: 600; }
.mark-group[aria-busy="true"] { opacity: 0.7; }
.mark-word { color: var(--ink); }
.pager { display: flex; align-items: baseline; justify-content: center; gap: var(--space-5); margin-top: var(--space-4); font-size: 15px; color: var(--ink-2); }
.pager-off { color: var(--muted); }
@media (max-width: 719px) {
  .loans-sheet { padding: var(--space-2) var(--space-4); }
  .review-table thead { display: none; }
  .review-table tr.review-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px var(--space-3); padding: var(--space-3) 0 var(--space-2); border-top: 1px solid var(--hairline); }
  .review-table tbody tr.review-row:first-child { border-top: 0; }
  .review-table tr.review-row > * { border: 0; padding: 0; text-align: left; }
  .review-table td.num { text-align: left; }
  .review-table td[data-label]::before { content: attr(data-label) " "; color: var(--ink-2); display: block; font-size: 12px; }
  .review-table .review-loan { grid-column: 1 / -1; font-size: 16px; }
  .review-table .review-reasons-cell, .review-table .review-mark-cell { grid-column: 1 / -1; }
  .filter-field, .filter-field select { width: 100%; max-width: none; }
  .filter-narrow { width: auto; }
}

/* loan page */
.loan-head { padding-bottom: var(--space-5); }
.loan-head h1 { font-variant-numeric: tabular-nums; }
.loan-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 1024px) {
  .loan-grid { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .loan-side { position: sticky; top: var(--space-4); }
}
.loan-main { min-width: 0; }
.loan-section { border-top: 1px solid var(--rule); padding-top: var(--space-5); }
.loan-section + .loan-section { margin-top: var(--space-6); }
.loan-section > h2 { margin-bottom: var(--space-4); font-size: 28px; }
.loan-section > .sheet { padding: var(--space-2) var(--space-5); }
.loan-section > .figure { padding: 28px; }
.loan-note { margin-top: var(--space-3); font-size: 14px; color: var(--ink-2); }
.score-table .score-sentence { color: var(--ink-2); min-width: 32ch; }
.score-table tr.score-total > * { font-weight: 600; color: var(--ink); border-top: 1px solid var(--rule); }
.loan-explanation { font-size: 19px; color: var(--ink); }
.evidence-list { margin: 0; padding-left: 1.2em; max-width: 80ch; color: var(--ink-2); font-size: 15px; }
.evidence-list li + li { margin-top: var(--space-2); }
.loan-periods { margin-top: var(--space-4); }
.loan-periods > .sheet { margin-top: var(--space-3); padding: var(--space-2) var(--space-5); max-height: 420px; overflow-y: auto; }
.history-table tr.is-missed > * { font-weight: 600; }
.fields-table th { width: 40%; color: var(--ink-2) !important; }
.fields-table td { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.loan-side { display: grid; gap: var(--space-4); min-width: 0; }
.loan-panel h2 { font-size: 26px; margin-bottom: var(--space-3); }
.mark-fieldset { border: 0; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.mark-choice { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; cursor: pointer; }
.note-label { display: block; font-size: 14px; font-weight: 600; color: var(--ink-2); margin-bottom: var(--space-1); }
.review-form .actions { margin-top: var(--space-3); }
.review-form .status-line { margin-top: var(--space-2); font-size: 14px; }
.case-note { margin-top: var(--space-3); font-size: 15px; line-height: 1.55; }
@media (max-width: 599px) {
  .loan-section > .sheet, .loans-sheet { padding: var(--space-2) var(--space-4); }
  .loan-section > .figure { padding: var(--space-4); }
}
.score-table tbody th { min-width: 14ch; }
.score-table td:nth-child(2) { white-space: nowrap; }

/* mapping page: repayment history */
.history-state { margin: 0 0 var(--space-3); font-size: 16px; color: var(--ink); }
.history-state-unmatched { color: var(--loss); }
.history-issues { margin: 0 0 var(--space-3); padding-left: 1.2em; font-size: 14px; color: var(--ink-2); }
.history-upload { margin-top: var(--space-4); }
.history-upload .field { margin: var(--space-2) 0; }

/* loan page at phone width: score rows stack (reason, strength, points, sentence), and the
   segments table reads as rows of label and value (UX P2-13). */
@media (max-width: 639px) {
  .score-table thead { display: none; }
  .score-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: 2px var(--space-3); justify-content: start; padding: var(--space-2) 0; border-bottom: 1px solid var(--hairline); }
  .score-table tr > *, .score-table td.num { border: 0; padding: 0; text-align: left; }
  .score-table tr > th { grid-column: 1 / -1; }
  .score-table td:empty { display: none; }
  .score-table td[data-label]::before { content: attr(data-label) " "; color: var(--ink-2); font-size: 12px; display: block; }
  .score-table tr.score-total { grid-template-columns: auto auto; align-items: baseline; }
  .score-table tr.score-total > * { border-top: 0; }
  .score-table tr.score-total > th { grid-column: auto; }
  .score-table tr.score-total td[data-label]::before { display: none; }
  .score-table td.score-sentence { grid-column: 1 / -1; min-width: 0; }
  .score-table td.score-sentence:empty { display: none; }
  .position-table thead { display: none; }
  .position-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--hairline); }
  .position-table tr > *, .position-table td.num { border: 0; padding: 0; text-align: left; }
  .position-table tr > th, .position-table td:nth-child(2) { grid-column: 1 / -1; }
  .position-table td[data-label]::before { content: attr(data-label) " "; color: var(--ink-2); font-size: 12px; display: block; }
}
.weight-note { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-2); }

/* brand: Bookrule (docs/brand.md). The mark is ink on light and white-ish ink on dark,
   which is exactly --ink in each theme, so --brand-ink follows it and needs no dark
   override. Never --accent or --loss on the mark. */
:root { --brand-ink: var(--ink); }
.wordmark { display: inline-flex; align-items: baseline; gap: 0.28em; color: var(--brand-ink); }
/* An SVG has no text baseline, so flex puts its bottom edge on the text baseline. At
   0.857em (24px at the nav's 28px) the top of the three posted ticks meets the cap height. */
.wordmark-mark { flex: none; width: 0.857em; height: 0.857em; fill: currentColor; }

/* ---------- round three: wayfinding (docs/design.md §9) ---------- */

/* The portfolio's views, under the h1 on every portfolio page; one row at every width. */
.subnav { margin-top: var(--space-4); border-bottom: 1px solid var(--hairline); }
.subnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.subnav a { display: inline-block; padding: var(--space-2) 0 10px; font-size: 15px; color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subnav a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.subnav a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
@media (max-width: 479px) {
  .subnav ul { gap: 0 var(--space-3); }
  .subnav a { font-size: 14px; }
}
.breadcrumb-here { color: var(--ink-2); }

/* ---------- round three: chart discipline ---------- */

/* The book rule's key in the legend line, beside the series. */
.legend-reference-line { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 3; }
/* "Show table" has one place on every chart: the figure head's top right. The legend line
   above the plot is only a legend. */
.chart-toolbar .toggle { position: absolute; top: 28px; right: 28px; margin: 0; white-space: nowrap; }
@media (max-width: 599px) { .chart-toolbar .toggle { top: 16px; right: 16px; } }
/* The solo toolbar is itself pinned to that corner; its toggle sits in it. */
.chart-toolbar-solo .toggle { position: static; }
/* Dark sheets need a stronger band to read as a reference (#161D23). */
:root[data-theme="dark"] .chart-svg .band polygon { fill-opacity: 0.18; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chart-svg .band polygon { fill-opacity: 0.18; } }
.figure-key-partial { margin: var(--space-3) 0 0; font-size: 14px; color: var(--ink-2); }

/* ---------- round three: overview readability ---------- */

/* The one empty state: a small ink tick, then "Nothing flagged." */
.ov-empty.is-clear { display: flex; align-items: baseline; gap: var(--space-2); font-size: 14px; }
.ov-empty.is-clear::before { content: ""; flex: none; width: 9px; height: 5px; border-left: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: translateY(-3px) rotate(-45deg); }
/* Rail: one line per finding (id, severity, label, link); the card carries the sentence. */
.rail-item { grid-template-columns: auto 92px minmax(0, 1fr) auto; padding: var(--space-2) 0; }
.rail-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.rail-label { color: var(--ink); text-decoration-color: var(--rule); }
.rail-label:hover { text-decoration-color: currentColor; }
@media (max-width: 719px) {
  .rail-item { grid-template-columns: auto auto minmax(0, 1fr); }
  .rail-text { grid-column: 1 / -1; white-space: normal; }
  .rail-link { grid-column: 1 / -1; }
}
.ov-loose-title { margin-top: var(--space-6); margin-bottom: var(--space-3); }
.ov-loose-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); }
/* Typed tables: tests with no failures fold under one line. */
.table-fold { margin-top: var(--space-3); font-size: 14px; }
.table-fold > summary { font-weight: 400; color: var(--ink-2); }
.table-fold > p { margin: var(--space-2) 0 0; color: var(--ink-2); }

/* ---------- round three: loans list density ---------- */

/* One line per loan at desktop: chips stay on one line ("+n" past three), the row's
   case-note sentences open from the chips, and cells are 6px top and bottom. */
@media (min-width: 720px) {
  .review-table th, .review-table td { padding-top: 6px; padding-bottom: 6px; }
  .review-table td[data-label="Balance"], .review-table td[data-label="Score"] { white-space: nowrap; }
  .review-table .review-reasons-cell { width: 100%; }
  .review-table .chips { flex-wrap: nowrap; overflow: hidden; }
  .review-table .chip { white-space: nowrap; flex: none; }
  .mark-button { min-height: 28px; padding: 4px 8px; }
}
.reason-details { margin: 0; font-size: 13px; }
.reason-details > summary.chips { list-style: none; cursor: pointer; display: flex; gap: 4px; width: auto; color: var(--ink); font-weight: 400; }
.reason-details > summary.chips::-webkit-details-marker { display: none; }
.reason-details > summary.chips:hover .chip { border-color: var(--ink-2); }
.reason-details[open] > summary.chips { margin-bottom: var(--space-2); }
.reason-details .chip { cursor: pointer; }
.chip-more { color: var(--ink-2); }
.chip-more::before { content: none; }
.review-table .review-sentences { white-space: normal; }

/* ---------- round three: loan page ---------- */

/* Fields in three short tables, label and value columns aligned across them. */
/* Two columns that pack (the borrower table is the long one), one on phones. */
.field-groups { column-gap: var(--space-4); }
@media (min-width: 720px) { .field-groups { columns: 2; } }
.field-groups > .field-group { break-inside: avoid; margin-bottom: var(--space-4); }
.loan-section .field-group { padding: var(--space-3) var(--space-5) var(--space-2); }
.fields-table caption { font-size: 15px; font-weight: 600; color: var(--ink); padding-bottom: var(--space-2); }
.fields-table th { width: 58%; font-size: 14px; }
.fields-table th, .fields-table td { padding-top: 6px; padding-bottom: 6px; }
.fields-table td { text-align: right; font-variant-numeric: tabular-nums; }
.fields-table td.is-zero { color: var(--ink-2); }
/* The aside is as tall as its content and scrolls away with the page. */
@media (min-width: 1024px) { .loan-side { position: static; align-self: start; } }

/* ---------- round three: landing proof ---------- */

.proof { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding-bottom: var(--space-8); }
@media (min-width: 960px) { .proof { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; } }
.proof-figures { grid-template-columns: minmax(0, 1fr) !important; }
@media (max-width: 959px) { .proof-figures { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
.proof-queue { margin: 0; min-width: 0; }
.proof-queue figcaption { margin-top: var(--space-3); font-size: 14px; }
.proof-sheet { padding: var(--space-2) var(--space-5); }
.proof-table .proof-score { font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; width: 3ch; }
.proof-table .chips { flex-wrap: nowrap; overflow: hidden; }
.proof-table .chip { white-space: nowrap; cursor: default; }
.proof-reasons { margin: var(--space-3) 0; padding-left: 1.4em; font-size: 15px; }
@media (max-width: 719px) {
  .proof-table thead { display: table-header-group; }
}

/* Phone: a loan is three short lines (id and score; originated, balance, status; chips), and
   an empty mark takes no line. */
@media (max-width: 719px) {
  .review-table tr.review-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px var(--space-3); padding: var(--space-2) 0; }
  .review-table .review-loan { grid-column: 1 / 3; order: -2; }
  .review-table td[data-label="Score"] { order: -1; text-align: right; }
  /* Originated, balance and status read by their values ("2012-12", "$8,875", "Charged off"). */
  .review-table td[data-label]::before { display: none; }
  /* Two amounts need their names: balance at origination and outstanding now. */
  .review-table td[data-label="Balance"]::before, .review-table td[data-label="Outstanding"]::before { display: block; font-size: 12px; }
  .review-table .review-mark-cell.is-empty { display: none; }
}
/* The landing's queue fits a phone: fixed columns, the chips clipped inside their cell. */
.proof-table { table-layout: fixed; }
.proof-table th:nth-child(1) { width: 4.5em; }
.proof-table th:nth-child(2) { width: 7.5em; }
.proof-table th, .proof-table td { white-space: nowrap; }
@media (max-width: 599px) {
  .proof-figures { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .proof-figures > div { padding: 12px; }
  .proof-figures dt { font-size: 13px; }
  .proof-figures dd { font-size: 22px; }
}
.chart-svg .whisker .whisker-halo { stroke: var(--sheet); stroke-width: 3; shape-rendering: crispEdges; }