/* site.css — Bluebird NDB Insights chrome + chart system.

The chrome follows the Bluebird Horizon identity (horizon.axoquant.com):
a light surface masthead with a navy "Bluebird" word and a violet uppercase
"NDB INSIGHTS" product label, a violet hairline under it, a top-level nav of
five internal NDB sections, a two-column layout (sidenav + main), and a footer
on the light surface. DM Sans everywhere (the Horizon typeface — no display
serif). The reference site pins the palette to LIGHT: its head runs
setAttribute("data-theme","light") before any CSS, and the dark tokens only
apply under :root[data-theme=dark] / :root:not([data-theme=light]) — never
from a bare prefers-color-scheme match. This file replicates that exactly, so
the site renders light even on dark-OS machines.

Accessibility: body --ink #0f1e33 on --page #ffffff ≈ 13.9:1 (AAA);
secondary --ink-2 #4a5a72 ≈ 7:1 (AA); links --brand #5d4fff ≈ 5.2:1 (AA);
muted #7b8ca4 ≈ 3.4:1 is reserved for small decorative labels, not body text.
:focus-visible draws a 2px blue outline, ::selection fills violet.

The chart system follows the dataviz method: series colours are a validated
categorical palette, every figure renders into an ECharts .chartbox mount, and
text always wears ink rather than a series colour. A missing year renders as
"—"; a genuinely absent measure renders an explicit no-data placeholder.
*/

:root {
  /* Bluebird Horizon brand */
  --brand: #5d4fff;    /* primary accent / links / product label */
  --blue:  #0787d9;    /* hover / focus */
  --cyan:  #7ef9ff;    /* brand accent */
  --navy:  #00294b;    /* wordmark name / ribbon */
  /* chrome (light default) */
  --page:     #ffffff;
  --surface:  #f7f9fc;
  --ink:      #0f1e33;
  --ink-2:    #4a5a72;
  --muted:    #7b8ca4;
  --grid:     #e4eaf2;
  --baseline: #cbd5e1;
  --border:   rgba(15, 30, 51, 0.10);
  /* chart series */
  --c1: #5d4fff; --c2: #0787d9; --c3: #0ea5e9;
  --c4: #6366f1; --c5: #334155; --c6: #7c3aed;
  /* status / accents */
  --pos: #16a34a; --neg: #ea580c; --crit: #dc2626;
  --evidence: #dc2626;   /* form errors (readable red) */
  --nodata:   #4a5a72;   /* placeholder text (AA on page) */
  --petal:    #edf1fa;   /* pale violet wash — active sidenav entry */
  --petal-ink:#22365b;   /* text on the pale wash */
  --link:          #5d4fff;
  /* type */
  --sans:  "DM Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --shadow: 0 1px 2px rgba(15, 30, 51, 0.06), 0 6px 20px rgba(15, 30, 51, 0.06);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--sans); }

a { color: var(--link); }

/* --- masthead + wordmark ---------------------------------------------------
   The layout is Tailwind utilities (flex / px-8 py-3 ...); colours and type
   are bespoke so the prefers-color-scheme override can flip them. */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.logo { display: flex; align-items: center; gap: 10px; }

/* the Bluebird mark — same 34x34 flex-none as the Horizon masthead */
.bb-mark { width: 34px; height: 34px; flex: none; border-radius: 6px; }

.wordmark { text-decoration: none; color: inherit; display: flex; align-items: baseline; gap: 10px; }

.wordmark-name {
  font-family: var(--sans);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--navy);
}
.wordmark-product {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brand);
}

/* the violet hairline under the masthead (Horizon signature) */
.hairlines {
  max-width: 1400px;
  margin: 10px auto 0;
  border-top: 2px solid var(--brand);
  border-bottom: 1px solid var(--border);
  height: 3px;
}

.topnav .nav-link {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.92rem;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
}
.topnav .nav-link:hover { background: var(--petal); color: var(--petal-ink); }
.topnav .nav-link.active {
  color: #fff;
  background: var(--brand);
  font-weight: 600;
}
.topnav .btn-login {
  background: var(--brand);
  color: #fff;
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  font-weight: 600;
}
.topnav .btn-login:hover { background: var(--blue); }
.nav-username { color: var(--ink-2); font-weight: 600; font-size: 0.9rem; padding: 0 0.4rem; }

/* signed-in account chip: a small avatar circle with the user's initial */
.user-chip { display: inline-flex; align-items: center; gap: 0.45rem; }
.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}

/* --- breadcrumb ------------------------------------------------------------ */

.breadcrumb {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  color: var(--ink-2);
}

/* --- two-column layout: sidenav + main ---------------------------------------
   The flex layout, fixed sidenav width, sticky behaviour and main column are
   Tailwind utilities (layout flex items-start ... / sidenav shrink-0 w-sidenav
   sticky ... / main flex-1 max-w-main ...). The inner .group / .navbtn styling
   stays here, and main's background uses var(--page) so it flips with the
   theme. */

main#main { background: var(--page); color: var(--ink); }

.sidenav .group {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.1rem 0 0.3rem;
}
.sidenav .group:first-child { margin-top: 0; }

.sidenav .navbtn {
  display: block;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.32rem 0.6rem;
  border-radius: 8px;
}
.sidenav .navbtn:hover { background: var(--petal); color: var(--petal-ink); }
.sidenav .navbtn.active {
  background: var(--petal);
  color: var(--petal-ink);
  font-weight: 650;
}

h1 {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: var(--ink);
}

.intro { color: var(--ink-2); max-width: 60ch; margin: 0 0 1.25rem; }

/* --- KPI tiles ------------------------------------------------------------- */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0;
}

.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.kpi .label { font-size: 0.8rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.02em; }
.kpi .tlabel { font-size: 0.78rem; color: var(--muted); }
.kpi .value { font-size: 1.9rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi .basis { font-size: 0.78rem; color: var(--ink-2); border-top: 1px dashed var(--border); padding-top: 0.3rem; margin-top: 0.3rem; }
.kpi .source, .figure-card .source {
  display: block; font-size: 0.72rem; color: var(--muted); margin-top: 2px;
}
/* .fignote carries every honesty caveat the chart engine emits — the ranking
   pool, the axis-rescale and axis-extension disclaimers, the single-year
   explanation. It is body text, not a decorative label, so it takes --ink-2
   (6.64:1 on the card surface); --muted put the disclaimer at 3.25:1 — under
   the 4.5:1 AA bar, and the least legible line on the page. */
.fignote {
  font-size: 0.78rem; color: var(--ink-2); margin: 6px 0 0;
}
/* Each chart card ships an EMPTY .fignote (pages.py _chart_container) so the
   engine writes into a live region that already exists — a note created fresh
   on each render is a new node, and a screen reader announces nothing when the
   caveat under a chart changes. Empty, it must occupy no space.

   It must NOT be display:none while it does so. A live region that is
   display:none at the moment it is mutated is the case screen readers most
   often skip — the region is not in the accessibility tree when the text
   lands, so the announcement is lost — and empty -> text is exactly the FIRST
   filter selection of a session, which is when the honesty caveats first
   appear. visibility:hidden has the same defect (it removes the subtree from
   the accessibility tree too). The clip pattern below keeps the element
   mounted, exposed and announceable while taking it out of flow, so it
   contributes no height between the chart and the next card. */
.fignote:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- movers tables (the FY-pair change analysis beside each change chart) --- */

.movers { width: 100%; border-collapse: collapse; margin: 0.75rem 0 0; }
.movers th, .movers td {
  border-bottom: 1px solid var(--border);
  padding: 0.45rem 0.6rem;
  text-align: left;
}
.movers th { font-size: 0.78rem; color: var(--ink-2); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.02em; }
.movers th:not(:first-child), .movers td:not(:first-child) {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.movers tbody tr:last-child td { border-bottom: none; }

/* --- figure cards ---------------------------------------------------------- */

.figure-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 1.25rem 1.5rem 1.5rem;
  margin: 1.5rem 0;
}
.figure-card h2 {
  font-size: 1.35rem;
  margin: 0 0 0.25rem;
  color: var(--ink);
}
.figure-card .basis { color: var(--ink-2); font-size: 0.8rem; margin: 0 0 1rem; }

.note {
  color: var(--ink-2);
  font-size: 0.92rem;
  border-left: 3px solid var(--neg);
  padding: 0.4rem 0.75rem;
  margin: 0 0 1rem;
}

/* --- login form + hint ------------------------------------------------------ */

.login-form { max-width: 26rem; margin: 1.25rem 0; }
.login-form label {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-2);
  margin: 0.9rem 0 0.3rem;
}
.login-form input {
  display: block;
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: var(--page);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
}
.login-form input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(7, 135, 217, 0.14);
}
.login-form button {
  margin-top: 1.1rem;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
}
.login-form button:hover { background: var(--blue); }
.form-error {
  color: var(--evidence);
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  max-width: 26rem;
}
.hint { color: var(--ink-2); font-size: 0.88rem; max-width: 60ch; }

/* --- chat (gated Q&A) ------------------------------------------------------ */

.chatlog {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.25rem 0 0.25rem;
  max-height: 62vh;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.msg {
  max-width: 82%;
  padding: 0.6rem 0.85rem;
  border-radius: 14px;
  font-size: 0.95rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg p { margin: 0 0 0.4rem; }
.msg p:last-child { margin-bottom: 0; }
.msg ul { margin: 0.2rem 0; padding-left: 1.1rem; }

.msg.user {
  align-self: flex-end;
  background: var(--brand);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.msg.assistant {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.msg.assistant strong { color: var(--ink); }
.msg.typing {
  color: var(--muted);
  font-style: italic;
  background: transparent;
  border: none;
  padding-left: 0.25rem;
}

.msg .cite {
  margin-top: 0.5rem;
  padding-top: 0.45rem;
  border-top: 1px dashed var(--border);
  font-size: 0.74rem;
  color: var(--muted);
  white-space: normal;
}
.msg .cite a { color: var(--link); text-decoration: none; }
.msg .cite a:hover { text-decoration: underline; }

.escalate {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--ink-2);
}

.chat-input {
  max-width: 760px;
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}
.chat-input input {
  flex: 1;
  padding: 0.6rem 0.8rem;
  background: var(--page);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 0.95rem;
}
.chat-input input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(7, 135, 217, 0.14);
}
.chat-input button {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  border: none;
  border-radius: 8px;
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}
.chat-input button:hover { background: var(--blue); }

/* --- risk sections --------------------------------------------------------- */

.risk-section { margin: 1.5rem 0; }
.risk-absent {
  color: var(--ink-2);
  font-style: italic;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 0.9rem 1.1rem;
  max-width: 70ch;
}
.risk-summary { font-size: 1.02rem; color: var(--ink); max-width: 70ch; }
.provenance { color: var(--ink-2); font-size: 0.8rem; margin: 1.5rem 0 0; }

.risk-details { margin: 1rem 0 0; font-size: 0.85rem; color: var(--ink-2); }
.risk-details summary { cursor: pointer; color: var(--link); font-weight: 600; }
.risk-details .provenance { margin: 0.5rem 0 0; font-size: 0.78rem; }

/* risk-tier badges — the reader-facing rating, not the model internals */
.tier {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
}
.tier-low    { background: #e7f6ec; color: #15803d; }
.tier-medium { background: #fdeede; color: #c2410c; }
.tier-high   { background: #fee9e9; color: #b91c1c; }

.risk-search { max-width: 26rem; margin: 0.5rem 0; }
.risk-search input {
  width: 100%;
  padding: 0.5rem 0.7rem;
  background: var(--page);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 0.9rem;
}
.risk-search input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(7, 135, 217, 0.14);
}

.chartbox-sm { min-height: 220px; }

/* report + risk data tables (rendered by report.js / risk.js) */
.report-table { width: 100%; border-collapse: collapse; margin: 0.75rem 0; }
.report-table th, .report-table td {
  border-bottom: 1px solid var(--border);
  padding: 0.45rem 0.6rem;
  text-align: left;
}
.report-table th { font-size: 0.78rem; color: var(--ink-2); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.02em; }
.report-table td:not(:first-child) { font-variant-numeric: tabular-nums; }

/* --- reports page (deterministic lookup + built dashboard) --- */
.report-input {
  max-width: 760px;
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0;
}
.report-input input {
  flex: 1;
  padding: 0.6rem 0.8rem;
  background: var(--page);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 0.95rem;
}
.report-input input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(7, 135, 217, 0.14);
}
.report-input button {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 8px;
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}
.report-input button:hover { background: var(--blue); }

.report-out { max-width: 760px; }
.report-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 1rem 1.25rem 1.1rem;
  margin: 1rem 0;
}
.report-card h2 { margin-top: 0; }
.report-card .value { font-size: 2rem; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; margin: 0.2rem 0; }
.report-card .basis { color: var(--ink-2); font-size: 0.8rem; }
.report-card .cite { color: var(--muted); font-size: 0.76rem; }
.report-card .cta {
  display: inline-block;
  margin-top: 0.6rem;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  text-decoration: none;
}
.report-card .cta:hover { background: var(--blue); }

/* "Your reports" index table (reports page) */
.reports-index td { vertical-align: middle; }
.reports-index .report-req { max-width: 28rem; overflow-wrap: anywhere; }
.reports-index .report-when { white-space: nowrap; color: var(--ink-2); font-size: 0.85rem; }
.reports-index .report-actions { white-space: nowrap; text-align: right; }
.reports-index .report-actions .nav-link { margin-right: 0.6rem; }

.status-badge {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.status-ready    { background: #e7f6ec; color: #15803d; }
.status-building { background: #eaf2fd; color: #1d4ed8; }
.status-error    { background: #fee9e9; color: #b91c1c; }
.status-unknown  { background: #f1f5f9; color: #64748b; }

.report-delete {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.2rem 0.6rem;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.report-delete:hover { border-color: #b91c1c; color: #b91c1c; }

/* risk ranking: sortable, filterable, clickable */
.risk-controls {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0.5rem 0;
}
.risk-filter-label {
  font-size: 0.85rem;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.risk-filter-label select {
  padding: 0.35rem 0.5rem;
  background: var(--page);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 0.85rem;
}
.risk-table tbody tr { cursor: pointer; }
.risk-table tbody tr:hover td { background: #f3f1ff; }
.risk-table tbody tr.selected td { background: #ece9ff; }
.risk-table th.sortable { cursor: pointer; user-select: none; }
.risk-table th.sortable:hover { color: var(--blue); }
.risk-table th.sort-asc::after { content: " \2191"; color: var(--blue); }
.risk-table th.sort-desc::after { content: " \2193"; color: var(--blue); }
.detail-close {
  float: right;
  background: transparent;
  border: none;
  color: var(--ink-2);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  text-decoration: underline;
}
.detail-close:hover { color: var(--blue); }

/* build theatre (queued job cards) */
.job-card .statusline { display: flex; align-items: center; gap: 0.5rem; }
.job-card .job-status { font-weight: 600; }
.job-steps { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.job-steps li {
  color: var(--ink-2);
  font-size: 0.8rem;
  padding: 0.15rem 0;
  border-left: 2px solid var(--border);
  padding-left: 0.6rem;
}
.job-steps li:last-child { color: var(--ink); border-left-color: var(--blue); }
.job-step { margin-left: 0.4rem; font-size: 0.78rem; }
.job-retry {
  margin-top: 0.6rem;
  background: transparent;
  color: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 6px;
  padding: 0.3rem 0.8rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.job-retry:hover { background: var(--blue); color: #fff; }
.spin {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid var(--border);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- ECharts containers ---------------------------------------------------- */

.chartbox { min-height: 320px; }

/* A horizontal ranking draws every category label (interval: 0), so its 20
   bands need room: at the 320px default they share ~280px — ~14px a band
   against an 11px font — and the labels collide. pages.py (_chart_container)
   now emits .topn with the markup for a top_n figure, so the tall box is there
   before any script runs. ndb-charts.js re-adds it on mount (a no-op on a
   server-classed box) and REMOVES it when the same box falls back to a trend or
   a placeholder — a one-agency selection turns a ranking into a trend. */
.chartbox.topn { min-height: 560px; }

/* --- no-data placeholders -------------------------------------------------- */

.nodata {
  color: var(--nodata);
  font-style: italic;
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 1rem;
  margin: 0.5rem 0;
  max-width: 70ch;
}

/* --- lineage page ---------------------------------------------------------- */

.lineage { margin-top: 2rem; font-size: 0.95rem; }
pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.45;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
section { margin: 1.4rem 0; }
.op, .call { margin: 0.9rem 0; }
.meta { color: var(--muted); font-size: 0.8rem; }
.apitable { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.apitable th, .apitable td {
  border: 1px solid var(--border);
  padding: 0.55rem 0.75rem;
  text-align: left;
  vertical-align: top;
}
.apitable th { background: var(--surface); font-weight: 600; }
.apitable code { background: var(--surface); padding: 0.1rem 0.3rem; border-radius: 3px;
  font-size: 0.85em; }

/* --- data notes (verbatim corpus) ------------------------------------------ */

.notes { max-width: 78ch; }

/* Tailwind preflight zeroes all element margins; bare paragraphs/pre blocks
   on the prose pages (how-to-use, api) get their vertical rhythm back. */
main p, main pre { margin: 0.75rem 0; }
.notes h1 { font-size: 1.6rem; }
.notes h2 { font-size: 1.25rem; margin: 1.6rem 0 0.5rem; }
.notes p { margin: 0.75rem 0; }
.notes ul { list-style: disc; padding-left: 1.25rem; }
.notes em { font-style: italic; }

/* --- filters + how-to ------------------------------------------------------ */

.filters {
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--ink-2);
  font-size: 0.88rem;
  padding: 0.6rem 1rem;
  margin: 1rem 0 1.5rem;
}
.filter-select {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--grid);
  border-radius: 8px;
  padding: 0.3rem 0.5rem;
  font: inherit;
}
.filter-select:focus { outline: none; border-color: var(--blue); }
h2 { font-size: 1.3rem; margin: 1.5rem 0 0.5rem; }
/* Tailwind's preflight resets ul/ol to list-style:none; the prose lists
   (how-to-use, data-notes) render with bullets again here. */
ul { list-style: disc; padding-left: 1.25rem; }

/* --- footer ----------------------------------------------------------------
   The band bg, text colour and padding are bespoke + Tailwind layout (bg via
   var(--surface) so it flips; px-8 py-7 via utilities). */

.sitefoot { background: var(--surface); border-top: 1px solid var(--border); }
.sitefoot .country { margin-bottom: 0.4rem; color: var(--ink-2); }
.sitefoot .legal { margin-bottom: 0.4rem; color: var(--ink-2); }
.sitefoot .legal a { color: var(--link); }
.sitefoot .legal .sep { color: var(--muted); padding: 0 0.3em; }
.sitefoot .stack { color: var(--muted); }
.sitefoot a { color: var(--link); }

/* --- focus states ---------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--brand); color: #fff; }

/* --- skip link (WCAG 2.4.1): visually hidden until focused ------------------ */



/* --- strategic landing: headline + insight block --- */
.headline {
  display: flex; align-items: baseline; gap: 1.5rem;
  padding: 1.4rem 1.6rem; border: 1px solid #e2e6ef; border-radius: 10px;
  background: linear-gradient(135deg, #f6f7fb, #ffffff); margin: 1rem 0 1.4rem;
}
.headline-num {
  font-size: 3.4rem; font-weight: 700; color: #1b2a4a; letter-spacing: -0.02em;
}
.headline-meta p { margin: 0.1rem 0; }
.headline-label { font-weight: 600; color: #1b2a4a; }
.headline-change { font-size: 1.25rem; font-weight: 700; color: #6d5efc; }
.insights {
  border-left: 3px solid #6d5efc; padding: 0.4rem 0 0.4rem 1rem;
  margin: 1rem 0 1.4rem;
}
.insights h2 { font-size: 1.05rem; color: #1b2a4a; margin: 0 0 0.5rem; }
.insights ul { margin: 0; padding: 0; list-style: none; }
.insights li { margin: 0.4rem 0; line-height: 1.45; }
.insight-cite {
  display: inline-block; font-size: 0.72rem; color: #5b5bd6; margin: 0 0.4rem 0.15rem 0;
  padding: 0.05rem 0.4rem; border: 1px solid #dcdcf7; border-radius: 999px;
  background: #f6f6ff; white-space: nowrap; text-decoration: none;
}
.insights a.insight-cite:hover { background: #ececff; text-decoration: none; }




/* KPI tiles align to the top so a long basis label on one tile does not
   stretch its neighbours into empty holes */
.kpis { align-items: start; }

/* a sparse percentage series does not need a 320px box: the empty grid above
   and below a flat line reads as missing data */
.chartbox.compact { height: 240px; }

/* --- hero: the landing first screen --- */
.hero {
  display: grid; grid-template-columns: 380px 1fr; gap: 2rem;
  align-items: center; margin: 0.4rem 0 1.2rem;
  padding: 1.2rem 1.4rem 1.6rem; border: 1px solid #e2e6ef; border-radius: 14px;
  background: linear-gradient(135deg, #f7f8fc, #ffffff);
}
.hero h1 { margin: 0 0 0.3rem; }
.hero .intro { margin: 0 0 0.8rem; }
.hero .headline-num { font-size: 4.6rem; line-height: 1; }
.hero .headline-change { margin: 0.2rem 0; font-size: 1.3rem; }
.hero .basis { font-size: 0.78rem; margin: 0.2rem 0 1rem; }
.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.hero-chip {
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.5rem 0.7rem; border: 1px solid #e2e6ef; border-radius: 8px;
  background: #ffffff;
}
.hero-chip .chip-value { font-weight: 700; color: #1b2a4a; font-size: 1.05rem; }
.hero-chip .chip-label { font-size: 0.72rem; color: #8a94ad; line-height: 1.2; }
.hero-right .hero-chart-title { margin: 0 0 0.2rem; font-size: 1rem; color: #1b2a4a; }
.chartbox.hero-chart { height: 400px; border: none; background: transparent; }
.hero-strip {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.4rem;
}
.strip-card {
  border: 1px solid #e2e6ef; border-radius: 12px; padding: 0.8rem 1rem;
  background: #ffffff;
}
.strip-card h3 { margin: 0 0 0.3rem; font-size: 0.95rem; color: #1b2a4a; }
.strip-card .chartbox { height: 300px; border: none; }
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; }
  .hero-strip { grid-template-columns: 1fr; }
}


/* data tables rendered by site.pages: the month table, sector history,
   individuals history, the sector movers table and both restatement tables.
   The class was in the markup long before it had a rule, so every column ran
   together. */
.datatable {
  width: 100%; border-collapse: collapse; margin: 0.75rem 0 1.4rem;
  font-size: 0.9rem;
}
.datatable th, .datatable td {
  padding: 0.45rem 0.75rem; border-bottom: 1px solid #e8ebf2;
  text-align: left; vertical-align: top;
}
.datatable thead th {
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.02em;
  color: #6a7385; font-weight: 600; white-space: nowrap;
  border-bottom: 1px solid #d7dce8;
}
.datatable tbody tr:hover td { background: #fafbff; }
.datatable td:not(:first-child) { font-variant-numeric: tabular-nums; }
.datatable th:first-child, .datatable td:first-child { white-space: nowrap; }
.datatable td { color: #3c4557; }

/* publication history timeline on the provenance page */
ol.history { list-style: none; margin: 0 0 1.6rem; padding: 0; }
li.history-entry {
  display: grid; grid-template-columns: 120px 1fr; gap: 0.9rem;
  padding: 0.6rem 0 0.6rem 0.8rem; border-left: 2px solid #e2e6ef;
  margin-bottom: 0.3rem;
}
li.history-entry:hover { border-left-color: #6d5efc; background: #fafbff; }
.history-date { font-family: ui-monospace, Consolas, monospace; font-size: 0.8rem;
  color: #6a7385; padding-top: 0.15rem; }
.history-body { display: block; }
.history-detail { display: block; color: #5b6478; font-size: 0.86rem;
  line-height: 1.45; margin-top: 0.2rem; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
}
.skip-link:focus {
  left: 0;
  top: 0;
  background: var(--surface);
  color: var(--ink);
  padding: 0.6rem 1rem;
  border: 2px solid var(--blue);
  border-radius: 0 0 6px 0;
  text-decoration: none;
}

/* --- dark variant (opt-in, never auto) ----------------------------------------
   Exactly the reference site's mechanism: the palette only goes dark when the
   root carries data-theme=dark, or when prefers-color-scheme is dark AND the
   page did not pin data-theme=light. chrome() pins data-theme=light in the head
   before any CSS, so on the live site this block is inert — the page stays
   light regardless of OS theme, matching horizon.axoquant.com. Tailwind
   utilities are static hex, so the chrome colours ride on the var() tokens
   above rather than utilities. */

:root[data-theme=dark] {
  --page:     #0b1b33;
  --surface:  #10274a;
  --ink:      #e8f0fa;
  --ink-2:    #b0c2d9;
  --muted:    #7e93ad;
  --grid:     #1d3a5f;
  --baseline: #2a4a74;
  --border:   rgba(232, 240, 250, 0.12);
  --c1: #8b81ff; --c2: #3fa2e8; --c3: #4fc1f0;
  --c4: #7c8cff; --c5: #9fb2cc; --c6: #a78bfa;
  --navy:     #e8f0fa;        /* wordmark name flips to light */
  --petal:    #123055;        /* active sidenav wash on dark */
  --petal-ink:#c6d6ec;
  --nodata:   #b0c2d9;
  --link:          #3fa2e8;
  --link-visited:  #a78bfa;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --page:     #0b1b33;
    --surface:  #10274a;
    --ink:      #e8f0fa;
    --ink-2:    #b0c2d9;
    --muted:    #7e93ad;
    --grid:     #1d3a5f;
    --baseline: #2a4a74;
    --border:   rgba(232, 240, 250, 0.12);
    --c1: #8b81ff; --c2: #3fa2e8; --c3: #4fc1f0;
    --c4: #7c8cff; --c5: #9fb2cc; --c6: #a78bfa;
    --navy:     #e8f0fa;        /* wordmark name flips to light */
    --petal:    #123055;        /* active sidenav wash on dark */
    --petal-ink:#c6d6ec;
    --nodata:   #b0c2d9;
    --link:          #3fa2e8;
    --link-visited:  #a78bfa;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3);
  }
}

/* --- responsive collapse under 900px --------------------------------------- */

/* The < 900px collapse restyles the chrome the way Tailwind utilities own it
   (layout / sidenav / main / header / breadcrumb), so those selectors carry
   !important to beat the utility layer. `.sidenav .group` / `.sidenav .navbtn`
   are bespoke-only (utilities never touch them) and need no override. */

@media (max-width: 900px) {
  .layout { flex-direction: column !important; }
  .sidenav {
    flex: none !important;
    width: 100% !important;
    position: static !important;
    max-height: none !important;
    overflow-y: visible !important;
    padding: 1rem 1.5rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.25rem 0.5rem !important;
    border-bottom: 1px solid var(--border);
  }
  .sidenav .group {
    flex: 0 0 100%;
    margin: 0.5rem 0 0.1rem;
  }
  .sidenav .navbtn {
    display: inline-block;
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
  }
  main { padding: 1.5rem !important; }
  .site-header { padding: 0.7rem 1.25rem !important; }
  .breadcrumb { padding: 0.5rem 1.25rem !important; }
}

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