/* The desk: color tokens for both themes, the page shell and its tabs, and the parts every screen shares
   (summary tiles, status pills, cards, legends, line charts, tables, alerts and the assumptions ledger). */
:root {
  --bg: #f1f1ed;
  --surface: #fcfcfb;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #73726c;
  --grid: #e4e3dc;
  --axis: #c3c2b7;
  --hair: rgba(11, 11, 11, 0.10);
  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;
  --s4: #eda100;
  --bench: #9b9a93;
  --band: #2a78d6;
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --select-bg: #0b0b0b;
  --select-fg: #fcfcfb;
  --chat-bg: #eaf0f8;
  --chat-line: #cfdbea;
  --div-pos: #2a78d6;
  --div-neg: #e34948;
  --div-mid: #f0efec;
  --div-max: 85%;
  --font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-doc: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --radius: 6px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0d0d; --surface: #1a1a19; --ink: #ffffff; --ink-2: #c3c2b7; --muted: #9c9b92;
    --grid: #2c2c2a; --axis: #45453f; --hair: rgba(255, 255, 255, 0.10);
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --bench: #76756e; --band: #3987e5;
    --select-bg: #ffffff; --select-fg: #1a1a19; --chat-bg: #18233a; --chat-line: #2e4466;
    --div-pos: #3987e5; --div-neg: #e66767; --div-mid: #383835; --div-max: 70%;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d0d0d; --surface: #1a1a19; --ink: #ffffff; --ink-2: #c3c2b7; --muted: #9c9b92;
  --grid: #2c2c2a; --axis: #45453f; --hair: rgba(255, 255, 255, 0.10);
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --bench: #76756e; --band: #3987e5;
  --select-bg: #ffffff; --select-fg: #1a1a19; --chat-bg: #18233a; --chat-line: #2e4466;
    --div-pos: #3987e5; --div-neg: #e66767; --div-mid: #383835; --div-max: 70%;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  padding-inline: 16px;
  padding-block: 20px 40px;
}
.wrap { max-width: 1180px; margin-inline: auto; display: grid; gap: 16px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--s1); outline-offset: 2px; }

/* Header */
.top { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-end; justify-content: space-between; padding-block: 4px 8px; }
.top-text { display: grid; gap: 6px; min-width: 0; max-width: 62ch; }
.eyebrow { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.eyebrow b { color: var(--ink-2); font-weight: 500; }
h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.lede { color: var(--ink-2); font-size: 15px; }
.runline { font-size: 12.5px; color: var(--muted); }
.control { display: grid; gap: 6px; }
.control-label { font-size: 12px; color: var(--muted); }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--hair); border-radius: var(--radius); background: var(--surface); padding: 3px; gap: 3px; }
.seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.seg button:hover { background: var(--hair); }
.seg button[aria-pressed="true"] { background: var(--select-bg); color: var(--select-fg); }

/* Tiles */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tile { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 6px; align-content: start; }
.tile-label { font-size: 12.5px; color: var(--ink-2); }
.tile-value { font-size: 28px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }
.tile-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--muted); }

/* Status pills: icon and label, never color alone */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--ink); padding: 2px 8px 2px 6px; border-radius: 999px; white-space: nowrap; }
.pill svg { width: 13px; height: 13px; flex: none; }
.pill--good { background: color-mix(in srgb, var(--good) 15%, transparent); }
.pill--good svg { color: var(--good); }
.pill--warning { background: color-mix(in srgb, var(--warning) 22%, transparent); }
.pill--warning svg { color: #b57a00; }
.pill--critical { background: color-mix(in srgb, var(--critical) 15%, transparent); }
.pill--critical svg { color: var(--critical); }
:root[data-theme="dark"] .pill--warning svg { color: var(--warning); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pill--warning svg { color: var(--warning); } }

/* Sections and cards */
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; padding-top: 12px; }
.section-head h2 { font-size: 17px; font-weight: 600; }
.section-head .note { font-size: 12.5px; color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.card { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius); padding: 16px; display: grid; gap: 12px; min-width: 0; align-content: start; }
.card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 16px; }
.card-head > div { display: grid; gap: 2px; min-width: 0; }
.card h3 { font-size: 15px; font-weight: 600; }
.card .sub { font-size: 12.5px; color: var(--muted); }
.ghost { border: 1px solid var(--hair); background: transparent; border-radius: 4px; padding: 4px 10px; font-size: 12.5px; cursor: pointer; color: var(--ink-2); }
.ghost:hover { background: var(--hair); }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; }
.stack { display: grid; gap: 16px; align-content: start; min-width: 0; }

/* Legend */
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--ink-2); padding: 0; margin: 0; list-style: none; }
.legend li { display: inline-flex; align-items: center; gap: 7px; }
.key-line { width: 16px; height: 2px; border-radius: 1px; display: inline-block; flex: none; }
.key-band { width: 16px; height: 10px; border-radius: 2px; display: inline-block; flex: none; opacity: 0.22; }
.legend .end { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.legend code, .mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }

/* Charts */
.chart { position: relative; min-height: 120px; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart svg text { font-family: var(--font-ui); font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.tip { position: absolute; top: 0; left: 0; pointer-events: none; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,0.12); padding: 8px 10px; font-size: 12px; min-width: 150px; display: grid; gap: 3px; z-index: 2; }
.tip-head { color: var(--muted); font-size: 11.5px; margin-bottom: 2px; }
.tip-row { display: grid; grid-template-columns: 14px auto 1fr; align-items: center; gap: 7px; }
.tip-row strong { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.tip-row span:last-child { color: var(--ink-2); }
.table-wrap { overflow-x: auto; }

/* Tables */
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: 13px; }
th, td { padding: 8px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--grid); }
th { font-weight: 500; font-size: 12px; color: var(--muted); }
th:first-child, td:first-child { text-align: left; }
tbody tr:last-child td { border-bottom: 0; }
tr.divider td { border-top: 1px solid var(--axis); }
td .who { display: inline-flex; align-items: center; gap: 8px; }
td .who small { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.meter { display: inline-grid; grid-template-columns: 56px auto; align-items: center; gap: 8px; justify-content: end; }
.meter i { display: block; height: 4px; border-radius: 2px; background: var(--grid); position: relative; overflow: hidden; }
.meter i b { position: absolute; inset: 0 auto 0 0; border-radius: 2px; }
.verdict { font-size: 13.5px; color: var(--ink-2); max-width: 80ch; }
.verdict strong { color: var(--ink); font-weight: 600; }
details { font-size: 13px; color: var(--ink-2); }
details summary { cursor: pointer; color: var(--ink); font-weight: 500; font-size: 13px; }
details dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 10px 0 0; }
details dt { color: var(--ink); font-weight: 500; }
details dd { margin: 0; max-width: 72ch; }

/* Alerts */
.alerts { list-style: none; margin: 0; padding: 0; display: grid; }
.alerts li { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--grid); align-items: start; }
.alerts li:last-child { border-bottom: 0; }
.alerts .msg { font-size: 13px; }
.alerts .when { grid-column: 2; font-size: 11.5px; color: var(--muted); }

/* Ledger */
.ledger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; margin: 0; }
.ledger div { display: grid; gap: 2px; min-width: 0; }
.ledger dt { font-size: 12px; color: var(--muted); }
.ledger dd { margin: 0; font-size: 13px; }
footer { font-size: 12px; color: var(--muted); padding-top: 4px; max-width: 90ch; }
footer a { color: inherit; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .ledger { grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: 22px; }
  details dl { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* App shell: name, tabs, and a short intro for each panel */
.app-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 32px; border-bottom: 1px solid var(--axis); }
.app-bar { flex: 1 0 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { padding-bottom: 12px; }
.theme-switch { padding: 2px; gap: 2px; }
.theme-switch button { display: grid; place-items: center; padding: 4px 7px; }
.theme-switch svg { width: 14px; height: 14px; }
/* Folder tabs, for the views and for a filing's sections: every tab sits on the line,
   and only the selected one opens into the area below it. */
.tabs [role="tab"], .sec-tabs [role="tab"] { border: 1px solid var(--hair); border-bottom: 0; border-radius: 6px 6px 0 0; margin-bottom: -1px; cursor: pointer; font-weight: 500; color: var(--ink-2); box-shadow: inset 0 -1px 0 var(--axis); }
.tabs [role="tab"]:hover, .sec-tabs [role="tab"]:hover { color: var(--ink); border-color: var(--axis); }
.tabs [role="tab"][aria-selected="true"], .sec-tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-color: var(--axis); box-shadow: inset 0 2px 0 var(--ink); }
.tabs { display: flex; gap: 4px; }
.tabs [role="tab"] { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 10px; font-size: 14px; background: color-mix(in srgb, var(--ink) 6%, var(--bg)); }
.tabs [role="tab"][aria-selected="true"] { background: var(--bg); }
.tabs svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.tabs [role="tab"]:hover svg, .tabs [role="tab"][aria-selected="true"] svg { color: var(--ink); }
.panel { display: grid; gap: 16px; min-width: 0; }
.panel-intro { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-end; justify-content: space-between; padding-top: 4px; }
.panel-intro > div:first-child { display: grid; gap: 6px; min-width: 0; max-width: 64ch; }
/* Notes, disclaimers and ledger links appear on more than one screen. */
.note { font-size: 12px; color: var(--ink-2); background: var(--bg); border-radius: 4px; padding: 6px 10px; }
.disclaimer { font-size: 12px; color: var(--muted); margin-top: -6px; }
.ledger a { color: inherit; text-underline-offset: 3px; }
/* Highlighted quotes and search hits, and the as-of sliders. */
mark { color: inherit; border-radius: 2px; padding: 0 1px; }
mark.quote { background: color-mix(in srgb, var(--s4) 38%, transparent); }
mark.hit { background: color-mix(in srgb, var(--s1) 22%, transparent); }
.asof { width: 280px; max-width: 100%; accent-color: var(--ink); }
.control-label b { color: var(--ink); font-weight: 600; }
/* On a phone, the tabs share the width, each icon above its label. */
@media (max-width: 520px) {
  .tabs { width: 100%; }
  .tabs [role="tab"] { flex: 1 1 0; flex-direction: column; gap: 3px; padding: 8px 4px 9px; font-size: 12.5px; line-height: 1.25; text-align: center; }
}