/* ============================================================================
   SELMIS — Suyog Electricals management information system
   ----------------------------------------------------------------------------
   The house design system, taken from fintale-cfo/src/theme.jsx.

   Every value below is lifted from that file rather than matched by eye, so the
   two products agree exactly. Where SELMIS needs something the CFO dashboard
   does not have — a stale-data warning, an MSME status chip — it is built from
   these tokens rather than beside them.

   Type, and a correction. An earlier pass here replaced this system with a
   serif display face and set money in a proportional sans. That looked
   deliberate and was wrong on both counts: it moved the pack away from the
   firm's own product, and financial figures in this house set in DM Mono. Back
   to the three faces the system specifies:

     Plus Jakarta Sans   headings — the premium fintech weight
     Inter               body text
     DM Mono             every financial figure, always

   Colour is two independent axes, never mixed:
     accent   #1D4ED8   navigation, links, focus — never state
     state    #047857 / #B45309 / #B91C1C — good, watch, act
   These are the LIGHT palette's cyan, amber and red, deepened from the dark
   theme's for contrast on a white card, exactly as theme.jsx does it.

   Copper (#a2562a) survives in the wordmark alone. It is SEPL's raw material
   and their largest cost line; it never signals anything.
   ========================================================================== */

:root {
  /* Surfaces — theme.jsx LIGHT */
  --canvas:        #f4f7fb;   /* bg: off-white, blue tint */
  --surface:       #ffffff;   /* card */
  --surface-2:     #fafcff;
  --surface-3:     #eef3f9;

  /* Ink */
  --ink:           #0c1a2e;   /* text: deep navy */
  --ink-muted:     #3d5471;
  --ink-subtle:    #5a7090;   /* muted */
  --on-accent:     #ffffff;

  /* Line — cardBorder and dim */
  --line:          #e1e8f0;
  --line-strong:   #d1dce8;
  --scroll-shade:  rgba(12, 26, 46, .14);

  /* Accent — wayfinding only, never state. theme.jsx calls it cyan; it is
     Blue 700, deepened from the dark theme's Blue 500 for a white card. */
  --accent:        #1d4ed8;
  --accent-hover:  #1e40af;
  --accent-soft:   #eff6ff;

  /* State */
  --pos:           #047857;
  --pos-strong:    #059669;
  --pos-soft:      #ecfdf5;
  --warn:          #b45309;
  --warn-strong:   #d97706;
  --warn-soft:     #fffbeb;
  --crit:          #b91c1c;
  --crit-strong:   #dc2626;
  --crit-soft:     #fef2f2;

  --chip-well:     rgba(255, 255, 255, .55);

  /* Series — LIGHT_CHART_COLORS, in order. */
  --s0:            #1d4ed8;
  --s1:            #047857;
  --s2:            #b45309;
  --s3:            #6d28d9;

  /* Identity */
  --brand:         #a2562a;

  --font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", sans-serif;
  --font:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, sans-serif;
  --mono:         "DM Mono", "Roboto Mono", ui-monospace, SFMono-Regular,
                  Menlo, monospace;

  /* RADIUS, from theme.jsx */
  --r-sm: 4px;
  --r:    10px;
  --r-lg: 16px;

  /* cardShadow(false) */
  --shadow-sm: 0 1px 3px rgba(12, 26, 46, .06);
  --shadow:    0 1px 3px rgba(12, 26, 46, .06), 0 2px 8px rgba(12, 26, 46, .04);
  --shadow-lg: 0 8px 32px rgba(12, 26, 46, .14);
}

/* Dark is defined token-side only, so every component below inherits it without
   a second definition. Guarded so an explicit light choice beats a dark OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas:      #0b1120;
    --surface:     #131c2e;
    --surface-2:   #182238;
    --surface-3:   #1e2d45;
    --ink:         #f0f4ff;
    --ink-muted:   #a9bcdf;
    --ink-subtle:  #8b9ec7;
    --line:        #1e2d45;
    --line-strong: #2b3d5b;
    --scroll-shade: rgba(0, 0, 0, .45);
    --on-accent:   #0b1120;
    --accent:      #3b82f6;
    --accent-hover:#60a5fa;
    --accent-soft: #16233f;
    --pos:         #10b981;  --pos-strong: #34d399;  --pos-soft:  #0c2820;
    --warn:        #f59e0b;  --warn-strong:#fbbf24;  --warn-soft: #2a2010;
    --crit:        #ef4444;  --crit-strong:#f87171;  --crit-soft: #2b1512;
    --brand:       #d18a50;
    --chip-well:   rgba(0, 0, 0, .28);
    /* Violet 400, not 500: #8b5cf6 measures 4.02 against the dark card, and
     this token also colours a KPI value. Both are in DARK_CHART_COLORS. */
    --s0: #3b82f6; --s1: #10b981; --s2: #f59e0b; --s3: #a78bfa;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);
    --shadow:    0 1px 3px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, .6);

  }
}

:root[data-theme="dark"] {
  --canvas:    #0b1120;
  --surface:   #131c2e;
  --surface-2:   #182238;
  --surface-3:   #1e2d45;
  --ink:     #f0f4ff;
  --ink-muted:   #a9bcdf;
  --ink-subtle:  #8b9ec7;
  --line:    #1e2d45;
  --line-strong: #2b3d5b;
  --scroll-shade: rgba(0, 0, 0, .45);
  --on-accent:   #0b1120;
  --accent:    #3b82f6;
  --accent-hover:#60a5fa;
  --accent-soft: #16233f;
  --pos:     #10b981;  --pos-strong: #34d399;  --pos-soft:  #0c2820;
  --warn:    #f59e0b;  --warn-strong:#fbbf24;  --warn-soft: #2a2010;
  --crit:    #ef4444;  --crit-strong:#f87171;  --crit-soft: #2b1512;
  --brand:     #d18a50;
  --chip-well:   rgba(0, 0, 0, .28);
  --s0: #3b82f6; --s1: #10b981; --s2: #f59e0b; --s3: #a78bfa;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);
  --shadow:  0 1px 3px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, .6);

}

:root[data-theme="light"] { color-scheme: light; }

/* ── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Headings take the text face by default and the serif only where the size
   earns it — see .page-head h1, .insight .headline. A 13px section head set in
   a single-weight display serif is worse than one set in a good sans. */
h1, h2, h3, h4 {
  font-family: var(--font);
  letter-spacing: -.018em;
}

/* Every figure is tabular, so a column of them lines up and a misread digit
   cannot become a misread crore.

   It is no longer monospaced. Setting money in DM Mono lined the digits up and
   made the entire pack read like console output — the single thing that most
   separated it from the products it is measured against. Figtree's tabular
   figures align exactly as well, sit properly beside the words around them, and
   let a heading and its number look like they belong to the same document.
   The mono is still here, for things that really are codes. */
.num, td.n, th.n, .stat .v, .meter .cap, .kpi-spark-val {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: -.012em;
}
code, .mono { font-family: var(--mono); font-size: .92em; }

/* ── Application shell ───────────────────────────────────────────────────── */
.app-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 0 20px;
  position: sticky; top: 0; z-index: 40;
}
.app-header .inner {
  max-width: 1320px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px; height: 58px;
}
.wordmark {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--font-display);
  font-weight: 400; font-size: 21px; letter-spacing: -.01em; color: var(--ink);
}
.wordmark:hover { text-decoration: none; color: var(--ink); }
.wordmark .mark {
  width: 26px; height: 26px; border-radius: var(--r-sm);
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .02em;
}
.wordmark .co {
  color: var(--ink-subtle); font-family: var(--font);
  font-weight: 400; font-size: 13px; letter-spacing: 0;
  padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--line);
}
.header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* Nav: a pill rail, closer to an application than a document's table of
   contents. The underline tab said "sections of a report"; this says "views". */
.tabnav {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 0 20px;
  position: sticky; top: 58px; z-index: 30;
}
/* Wraps rather than scrolls.
   It scrolled horizontally with the scrollbar hidden, which was fine at
   thirteen destinations and broke at nineteen: the bar needed 1,745px inside a
   1,280px container, so Provisions, MSME, GST 2B, Trade finance and Board pack
   sat past the right edge with no affordance to reach them. A hidden scrollbar
   is invisible on a mouse, and shift+wheel is not something a reader should
   have to know.

   Two rows is the honest answer for a pack with this many destinations. The
   phone keeps the swipe, where a touch drag is the expected gesture and
   wrapping nineteen pills would push the page content off the screen. */
.tabnav .inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 7px 0 8px;
}
.tabnav a {
  padding: 7px 14px; border-radius: 2em;
  font-size: 13.5px; font-weight: 500; color: var(--ink-subtle);
  white-space: nowrap; display: flex; align-items: center; gap: 7px;
  border: 1px solid transparent;
}
.tabnav a:hover {
  color: var(--ink); background: var(--surface-2);
  border-color: var(--line); text-decoration: none;
}
.tabnav a.on {
  color: var(--on-accent); background: var(--accent);
  border-color: var(--accent); font-weight: 600;
}
.tabnav a.on:hover { color: var(--on-accent); background: var(--accent-hover); }
/* The maintained registers are a different kind of page from the read-only
   views, so they sit apart rather than in the same run.

   A rule, not `margin-left: auto`. The auto margin pushed them to the far right
   of the row, which does nothing once the bar overflows and leaves a strange
   gap once it wraps. A divider reads the same on one row or two. */
.tabnav a.aside { position: relative; margin-left: 15px; }
.tabnav a.aside::before {
  content: ""; position: absolute; left: -9px; top: 22%; bottom: 22%;
  border-left: 1px solid var(--line-strong);
}

main { max-width: 1280px; margin: 0 auto; padding: 34px 20px 110px; }

/* ── Page head ───────────────────────────────────────────────────────────── */
.page-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 20px;
  margin-bottom: 20px;
}
.page-head .titles { min-width: 0; }
.page-head .kicker {
  font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-subtle); font-weight: 600; margin-bottom: 7px;
}
/* The one place the serif is set large enough to do what a serif is for. */
.page-head h1 {
  font-family: var(--font-display);
  font-size: 36px; font-weight: 400; letter-spacing: -.012em;
  margin: 0; line-height: 1.1; text-wrap: balance;
}
.page-head .sub {
  color: var(--ink-subtle); font-size: 14px; margin: 7px 0 0; max-width: 78ch;
}
.page-head .head-meta {
  margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}

/* Where the position date lives now: a chip, not four rows of report metadata.
   The entity never changes on a single-client MIS and the source never changes
   at all, so printing both on every page was three lines of furniture. */
.asof {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 2em; padding: 5px 12px;
  font-size: 12.5px; color: var(--ink-muted); white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.asof .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pos-strong); }
.asof.stale .dot { background: var(--warn-strong); }

/* The action count. Its whole job is to send a reader who has thirty seconds
   straight to the part of the page that asks something of them. */
.jump-action {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: 2em; padding: 5px 13px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--crit); background: var(--crit-soft); color: var(--crit);
}
.jump-action:hover { text-decoration: none; filter: brightness(.97); color: var(--crit); }
.jump-action.watch { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.jump-action.clear { border-color: var(--pos); background: var(--pos-soft); color: var(--pos); }
.jump-action .n {
  font-family: var(--mono); font-weight: 500;
  background: var(--chip-well); border-radius: 2em; padding: 0 6px;
}
:root[data-theme="dark"] .jump-action .n,

/* ── The alert band ──────────────────────────────────────────────────────── */
.verdict {
  display: flex; gap: 13px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); box-shadow: var(--shadow-sm);
  padding: 17px 20px; margin-bottom: 22px;
}
.verdict.is-warn { border-color: var(--warn); background: var(--warn-soft); }
.verdict.is-crit { border-color: var(--crit); background: var(--crit-soft); }
.verdict.is-good { border-color: var(--pos);  background: var(--pos-soft); }
.verdict .icon {
  font-family: var(--mono); font-weight: 500; font-size: 15px; line-height: 1.5;
}
.verdict.is-warn .icon { color: var(--warn); }
.verdict.is-crit .icon { color: var(--crit); }
.verdict.is-good .icon { color: var(--pos); }
.verdict .t { font-weight: 700; margin-bottom: 4px; font-size: 15px; }
.verdict .d { color: var(--ink-muted); font-size: 13.5px; }

/* ── KPI band — the top of every page ────────────────────────────────────── */
.stats {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 30px;
}
.stat {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); padding: 18px 20px 17px;
  box-shadow: var(--shadow);
}
/* State reads on the tile itself. Colouring only the number made a critical
   figure and a merely large one look identical until you read them. */
.stat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: transparent;
}
.stat.is-crit::before { background: var(--crit-strong); }
.stat.is-warn::before { background: var(--warn-strong); }
.stat.is-good::before { background: var(--pos-strong); }
.stat .k {
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-subtle); margin-bottom: 12px;
  display: flex; align-items: center; gap: 6px;
}
/* The figure is the reason the tile exists, so it is set like one: large,
   light, tightly tracked, with the unit stepped well back so it never competes
   with the number it qualifies. */
.stat .v {
  font-size: 31px; font-weight: 500; letter-spacing: -.035em; line-height: 1.05;
  color: var(--ink); display: flex; align-items: baseline; gap: 5px;
}
.stat .v .u {
  font-size: 12px; font-weight: 500;
  color: var(--ink-subtle); letter-spacing: 0;
}
.stat .d { font-size: 12.5px; color: var(--ink-subtle); margin-top: 8px; line-height: 1.5; }
.stat.is-crit .v { color: var(--crit); }
.stat.is-warn .v { color: var(--warn); }
.stat.is-good .v { color: var(--pos); }

/* ── Comparative ─────────────────────────────────────────────────────────────
   Colour follows favourability, not direction: rising cash and rising
   receivables are not the same news. The arrow carries direction, so the pair
   still reads correctly in greyscale. */
.cmp {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px;
  margin-top: 8px; font-size: 12px; color: var(--ink-subtle);
  font-variant-numeric: tabular-nums;
  border-radius: 2em; padding: 2px 8px 2px 6px; background: var(--surface-2);
}
.cmp .arw { font-size: 9px; line-height: 1; }
.cmp .pc  { color: inherit; opacity: .8; }
.cmp .vs  { flex-basis: 100%; color: var(--ink-subtle); font-size: 11px;
            padding-left: 2px; }
.cmp.fav  { color: var(--pos);  background: var(--pos-soft); }
.cmp.adv  { color: var(--crit); background: var(--crit-soft); }
.cmp.fav .vs, .cmp.adv .vs { color: inherit; opacity: .72; }
.cmp.none { color: var(--ink-subtle); font-style: italic; background: none; padding-left: 0; }

td .cmp { display: inline-flex; margin-top: 0; gap: 3px; background: none; padding: 0; }
td .cmp .vs { display: none; }

/* ── Card ────────────────────────────────────────────────────────────────── */
.box {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); margin-bottom: 20px; overflow: hidden;
  box-shadow: var(--shadow);
}
.box > header {
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 13px 18px; display: flex; align-items: center; gap: 10px;
}
.box > header h2 {
  font-size: 15px; font-weight: 700;
  letter-spacing: -.015em; margin: 0;
}
.box > header .right { margin-left: auto; font-size: 12px; color: var(--ink-subtle); }
.box .body { padding: 18px; }
.box .foot {
  background: var(--surface-2); border-top: 1px solid var(--line);
  padding: 11px 18px; font-size: 12.5px; color: var(--ink-muted); line-height: 1.55;
}

/* ── Meter: a credit line read as a load gauge ───────────────────────────── */
.meters { display: flex; flex-direction: column; }
.meter { padding: 15px 18px; border-bottom: 1px solid var(--line); }
.meter:last-child { border-bottom: none; }
.meter .top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 8px;
}
.meter .who { font-weight: 600; font-size: 13.5px; }
.meter .what { color: var(--ink-subtle); font-weight: 400; }
.meter .cap { font-size: 12.5px; color: var(--ink-muted); white-space: nowrap; }
.meter .track {
  height: 8px; border-radius: 6px; background: var(--surface-3);
  overflow: hidden; position: relative;
}
.meter .fill { height: 100%; border-radius: 6px; }
.fill.ok   { background: var(--pos-strong); }
.fill.warn { background: var(--warn-strong); }
.fill.crit { background: var(--crit-strong); }
.meter .bottom {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px; gap: 10px;
}

/* ── Label ───────────────────────────────────────────────────────────────── */
.label {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600; line-height: 19px;
  padding: 0 8px; border-radius: 2em;
  border: 1px solid transparent; white-space: nowrap;
}
.label.ok   { color: var(--pos);  background: var(--pos-soft);  border-color: color-mix(in srgb, var(--pos) 30%, transparent); }
.label.warn { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.label.crit { color: var(--crit); background: var(--crit-soft); border-color: color-mix(in srgb, var(--crit) 30%, transparent); }
.label.info { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.label.plain{ color: var(--ink-subtle); background: var(--surface-2); border-color: var(--line); }

/* ── Tables ──────────────────────────────────────────────────────────────────
   Horizontal scroll with a visible edge, so a column that runs off a phone
   screen announces itself. The two `local` layers scroll with the content and
   mask the shadow at each end; the two `scroll` layers stay pinned. The shadow
   is therefore drawn only where content actually continues. */
.table-wrap {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--surface), transparent) 0 0 / 28px 100% no-repeat local,
    linear-gradient(to left,  var(--surface), transparent) 100% 0 / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--scroll-shade), transparent)
      0 0 / 11px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--scroll-shade), transparent)
      100% 0 / 11px 100% no-repeat scroll;
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  background: var(--surface-2); text-align: left;
  font-size: 10.5px; font-weight: 600; color: var(--ink-subtle);
  letter-spacing: .07em; text-transform: uppercase;
  padding: 11px 20px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; white-space: nowrap;
}
tbody td { padding: 13px 20px; border-bottom: 1px solid var(--line); }
td.instr.repeat .label { display: none; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
td.n, th.n { text-align: right; white-space: nowrap; }
td.rowhead { font-weight: 600; }
tr.total td { font-weight: 700; background: var(--surface-2); }
.ok-fg { color: var(--pos); } .warn-fg { color: var(--warn); }
.crit-fg { color: var(--crit); } .muted { color: var(--ink-subtle); }

.prop { height: 7px; border-radius: 4px; background: var(--surface-3); overflow: hidden; min-width: 60px; }
.prop span { display: block; height: 100%; border-radius: 4px; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 6px 13px; cursor: pointer; box-shadow: var(--shadow-sm);
}
.btn:hover:not(:disabled) { background: var(--surface-2); text-decoration: none; color: var(--ink); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.primary, .btn-primary {
  color: var(--on-accent); background: var(--accent); border-color: var(--accent);
}
.btn.primary:hover:not(:disabled), .btn-primary:hover:not(:disabled) {
  background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent);
}
.btn.danger { color: var(--crit); border-color: var(--line-strong); }
.btn.danger:hover { background: var(--crit-strong); color: #fff; border-color: var(--crit-strong); }
.btn .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pos-strong); }
.btn.is-busy .dot { background: var(--warn-strong); animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
.refresh-note { font-size: 12px; color: var(--ink-subtle); max-width: 30ch; }
.refresh-note.crit { color: var(--crit); }

.freshness { font-size: 12.5px; color: var(--ink-muted); display: flex; align-items: center; gap: 7px; }
.freshness .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pos-strong); }
.freshness.stale .dot { background: var(--warn-strong); }

/* ── Flash / blankslate ──────────────────────────────────────────────────── */
.flash {
  border: 1px solid var(--accent); background: var(--accent-soft);
  border-radius: var(--r); padding: 14px 18px; margin-bottom: 16px; font-size: 13.5px;
}
.flash.warn { border-color: var(--warn); background: var(--warn-soft); }
.flash.crit { border-color: var(--crit); background: var(--crit-soft); }
.blankslate { text-align: center; padding: 48px 24px; color: var(--ink-subtle); }
.blankslate h3 { color: var(--ink); font-size: 16px; margin: 0 0 6px; }

/* ── Login ───────────────────────────────────────────────────────────────── */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--canvas); }
.login-card { width: 100%; max-width: 350px; }
.login-card .brandline { display: flex; align-items: center; gap: 11px; justify-content: center; margin-bottom: 22px; }
.login-card .brandline .mark {
  width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--brand);
  color: #fff; display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px;
}
.login-card .brandline strong { font-family: var(--font-display); font-size: 18px; letter-spacing: -.02em; }
.login-box {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px 24px; box-shadow: var(--shadow-lg);
}
.login-box h1 { font-size: 16px; font-weight: 600; text-align: center; margin: 0 0 20px; }
.login-box label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.login-box input {
  display: block; width: 100%; margin-top: 6px; padding: 8px 12px;
  font: inherit; font-size: 14px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); line-height: 22px;
}
.login-box input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.login-box .btn { width: 100%; justify-content: center; margin-top: 4px; }
.login-foot { text-align: center; font-size: 12px; color: var(--ink-subtle); margin-top: 16px; }

.routes { list-style: none; margin: 16px 0 0; padding: 0; }
.routes li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.routes li:last-child { border-bottom: none; }
.routes a { font-weight: 600; }
.routes .d { color: var(--ink-subtle); font-size: 13px; }

/* ── Section ─────────────────────────────────────────────────────────────────
   No numbers. "1.1" and "Exhibit 3" are cross-reference machinery for a printed
   document read in a meeting; on a screen where the whole page is visible they
   are decoration, and they were the loudest thing in the heading. */
.section { margin: 0 0 40px; }
.section > h2 {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 19px; font-weight: 700;
  letter-spacing: -.022em; margin: 0 0 4px;
}
.section > .intro {
  color: var(--ink-subtle); font-size: 13.5px; margin: 6px 0 16px; max-width: 80ch;
}

.exhibit { margin-bottom: 20px; }
.exhibit > .cap {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-subtle); margin-bottom: 9px;
}

/* ── Insight panel — the written interpretation, at the foot of the page ─────
   Was the first thing on every page. A reader who opens this daily already
   knows the basis and wants the position; the prose is for the reader who
   looked at a figure and asked why. That reader scrolls. */
.insight {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow);
  padding: 22px 24px; margin: 34px 0 24px; scroll-margin-top: 130px;
}
.insight > h2 {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-subtle);
  margin: 0 0 14px;
}
.insight .headline {
  font-family: var(--font-display);
  font-size: 25px; line-height: 1.32; font-weight: 400; letter-spacing: -.01em;
  margin: 0 0 6px; max-width: 66ch; text-wrap: pretty;
}
.insight ol { margin: 12px 0 0; padding-left: 0; list-style: none; }
.insight ol li {
  padding: 14px 0; border-top: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.6; max-width: 84ch;
}
.insight .act {
  display: block; margin-top: 7px; font-size: 12.5px; color: var(--ink);
  padding: 7px 12px; border-radius: var(--r-sm);
  background: var(--accent-soft); border-left: 2px solid var(--accent);
}
.insight .act b { font-weight: 700; }
.insight .basis {
  display: block; margin-top: 6px; font-family: var(--mono);
  font-size: 11px; color: var(--ink-muted);
}
.rank {
  display: inline-block; font-size: 10px; letter-spacing: .09em;
  text-transform: uppercase; font-weight: 700; padding: 2px 7px;
  border-radius: 2em; margin-right: 9px; vertical-align: 1px;
}
.rank.action  { background: var(--crit-soft); color: var(--crit); }
.rank.watch   { background: var(--warn-soft); color: var(--warn); }
.rank.context { background: var(--surface-2); color: var(--ink-subtle); border: 1px solid var(--line); }

/* ── Collapsible note ────────────────────────────────────────────────────────
   The old `.sidenote` printed a teaching paragraph beside every exhibit,
   permanently. It is right the first time somebody reads the pack and noise
   every time after, so it is available on demand instead of occupying the
   column. The content is unchanged; only its default state is. */
.note { margin: 10px 0 0; font-size: 13px; }
.note > summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-subtle); padding: 4px 0;
}
.note > summary::-webkit-details-marker { display: none; }
.note > summary::before {
  content: "?"; font-family: var(--mono); font-size: 10px; font-weight: 500;
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--line-strong); color: var(--ink-subtle);
  display: grid; place-items: center; flex: none;
}
.note > summary:hover { color: var(--ink); }
.note > summary:hover::before { border-color: var(--ink-subtle); }
.note[open] > summary { color: var(--ink); margin-bottom: 4px; }
.note .note-body {
  color: var(--ink-muted); line-height: 1.6; max-width: 76ch;
  border-left: 2px solid var(--line); padding: 2px 0 2px 14px; margin-left: 7px;
}
.note .note-body p { margin: 0 0 9px; }
.note .note-body p:last-child { margin-bottom: 0; }
.note .note-body h4 {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink); margin: 12px 0 6px; font-weight: 700;
}
.note .note-body h4:first-child { margin-top: 0; }

/* An exhibit and its note now stack: the note is one line until opened, so the
   280px column it used to reserve was mostly empty. */
.with-note { display: block; }
.sidenote { /* retained for any page not yet converted */
  font-size: 13px; line-height: 1.6; color: var(--ink-muted);
  border-left: 2px solid var(--line); padding-left: 14px; margin-top: 12px;
}
.sidenote h4 {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 7px; font-weight: 700;
}
.sidenote p { margin: 0 0 9px; }
.sidenote p:last-child { margin-bottom: 0; }

/* ── Basis of preparation, collapsed ─────────────────────────────────────── */
.basis-block {
  border-top: 1px solid var(--line); margin-top: 30px; padding-top: 16px;
  font-size: 12.5px; color: var(--ink-muted); line-height: 1.65;
}
.basis-block > summary {
  cursor: pointer; list-style: none;
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-subtle); font-weight: 700; padding: 4px 0;
  display: inline-flex; align-items: center; gap: 8px;
}
.basis-block > summary::-webkit-details-marker { display: none; }
.basis-block > summary::after {
  content: "▸"; font-size: 10px; transition: transform .15s ease;
}
.basis-block[open] > summary::after { transform: rotate(90deg); }
.basis-block > summary:hover { color: var(--ink); }
.basis-block dl {
  display: grid; grid-template-columns: 180px 1fr; gap: 8px 20px;
  margin: 14px 0 0;
}
.basis-block dt { font-weight: 600; color: var(--ink); }
.basis-block dd { margin: 0; }
.confidential {
  margin-top: 18px; font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-subtle);
}

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-card {
  max-width: 100%; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px 24px; box-shadow: var(--shadow);
}
.form-card .section { margin-bottom: 20px; }
.field-grid {
  display: grid; gap: 15px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-bottom: 15px;
}
.field { display: block; }
.field .l {
  display: block; font-size: 12px; font-weight: 600; color: var(--ink);
  margin-bottom: 6px;
}
.field .l em { font-style: normal; font-weight: 400; color: var(--ink-subtle); margin-left: 5px; }
.field input, .field select {
  width: 100%; padding: 8px 11px; font: inherit; font-size: 14px;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
}
.field input:focus, .field select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.field input[inputmode="decimal"], .field input[inputmode="numeric"] {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.check { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 0; font-size: 14px; cursor: pointer; }
.check em { font-style: normal; color: var(--ink-subtle); }

.picker-tools { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
.picker-tools input[type="search"] {
  flex: 1; padding: 8px 11px; font: inherit; font-size: 14px;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
}
.picker-tools input[type="search"]:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.picker-tools .muted { font-size: 12px; white-space: nowrap; }
.picker {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  max-height: 340px; overflow-y: auto; background: var(--surface);
}
.pick {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: auto 1fr auto auto auto;
  padding: 9px 13px; border-bottom: 1px solid var(--line);
  font-size: 13.5px; cursor: pointer;
}
.pick:last-child { border-bottom: none; }
.pick:hover { background: var(--surface-2); }
.pick .nm { font-weight: 500; }
.pick .gp { color: var(--ink-subtle); font-size: 12px; }
.pick .bl { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.pick.is-taken { opacity: .62; }

.form-actions {
  display: flex; align-items: center; gap: 10px;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
}
.form-actions .spacer { margin-left: auto; }

/* ── Period selector ─────────────────────────────────────────────────────── */
.periodbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 16px; }
.periodbar .l {
  font-size: 10.5px; color: var(--ink-subtle); margin-right: 4px;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}
.chip {
  padding: 5px 12px; border: 1px solid var(--line); border-radius: 2em;
  font-size: 13px; font-weight: 500; color: var(--ink-muted); background: var(--surface);
  white-space: nowrap;
}
.chip:hover { border-color: var(--line-strong); color: var(--ink); text-decoration: none; background: var(--surface-2); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }

/* A trend table is wider than it is tall; anchor the head column. */
table.trend th:first-child, table.trend td:first-child {
  position: sticky; left: 0; background: var(--surface);
}
table.trend tr.total td:first-child, table.trend thead th:first-child { background: var(--surface-2); }

/* ── Charts ──────────────────────────────────────────────────────────────────
   Drawn server-side as inline SVG, so they survive printing and need no script.
   Series colours are deliberately all cool hues: emerald, amber and red are the
   state axis in this product, and a revenue line that happened to be red would
   read as a warning. Each series also carries a dash pattern, because the pack
   is read in greyscale as often as in colour. */
.spark { display: block; margin-top: 9px; width: 100%; height: 30px; overflow: visible; }
.spark-line { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.spark-area { stroke: none; opacity: .13; }
.spark-dot  { stroke: var(--surface); stroke-width: 1.4; }
/* A hollow dot marks a month still running, so a part month is never read as a
   level one. */
.spark-dot.partial { fill: var(--surface) !important; stroke-width: 1.8; }
.spark.fav  .spark-line, .spark.fav  .spark-dot { stroke: var(--pos-strong); }
.spark.fav  .spark-area, .spark.fav  .spark-dot { fill: var(--pos-strong); }
.spark.adv  .spark-line, .spark.adv  .spark-dot { stroke: var(--crit-strong); }
.spark.adv  .spark-area, .spark.adv  .spark-dot { fill: var(--crit-strong); }
.spark.neutral .spark-line, .spark.neutral .spark-dot { stroke: var(--s0); }
.spark.neutral .spark-area, .spark.neutral .spark-dot { fill: var(--s0); }
.spark.flat .spark-line, .spark.flat .spark-dot { stroke: var(--ink-subtle); }
.spark.flat .spark-area, .spark.flat .spark-dot { fill: var(--ink-subtle); }

.chart-wrap {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow);
  padding: 16px 16px 12px; margin-bottom: 12px;
}
.chart { display: block; width: 100%; height: auto; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-grid.base { stroke: var(--line-strong); }
.chart-axis {
  fill: var(--ink-subtle); font-family: var(--mono); font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.chart-axis.partial { font-style: italic; }
.chart-line { fill: none; stroke-width: 2.1; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { stroke: var(--surface); stroke-width: 1.6; }
.chart-dot.partial { fill: var(--surface) !important; stroke-width: 2; }

.chart-line.s0 { stroke: var(--s0); }
.chart-line.s1 { stroke: var(--s1); stroke-dasharray: 7 4; }
.chart-line.s2 { stroke: var(--s2); stroke-dasharray: 2 3.5; }
.chart-line.s3 { stroke: var(--s3); stroke-dasharray: 11 3 2 3; }
.chart-dot.s0 { fill: var(--s0); }
.chart-dot.s1 { fill: var(--s1); }
.chart-dot.s2 { fill: var(--s2); }
.chart-dot.s3 { fill: var(--s3); }

.chart-legend {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px;
  padding-top: 11px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-muted);
}
.chart-legend .key { display: inline-flex; align-items: center; gap: 7px; }
.chart-legend .key i { width: 15px; height: 3px; border-radius: 2px; flex: none; }
.chart-legend .key.s0 i { background: var(--s0); }
.chart-legend .key.s1 i { background: var(--s1); }
.chart-legend .key.s2 i { background: var(--s2); }
.chart-legend .key.s3 i { background: var(--s3); }
.chart-legend .key.unit {
  margin-left: auto; color: var(--ink-subtle);
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 600;
}
.chart-note { margin-top: 10px; font-size: 12px; color: var(--ink-subtle); line-height: 1.55; }

@media (max-width: 620px) {
  /* Month labels and axis figures are the first things to collapse when the
     viewBox scales down, so they scale back up as the chart narrows. */
  .chart-axis { font-size: 15px; }
  .chart-wrap { padding: 13px 12px 10px; }
  .chart-legend { gap: 5px 14px; font-size: 12px; }
  .chart-legend .key.unit { margin-left: 0; flex-basis: 100%; }
}

.sparkcell { width: 118px; min-width: 118px; padding-top: 4px; padding-bottom: 4px; }
.sparkcell .spark { margin-top: 0; }

.panels {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-bottom: 12px;
}
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow); padding: 13px 14px 10px;
}
.panel-head { display: flex; align-items: baseline; gap: 10px; }
.panel-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .085em;
  text-transform: uppercase; color: var(--ink-subtle);
}
.panel-val { margin-left: auto; font-size: 19px; font-weight: 500; letter-spacing: -.03em; }
.panel-delta {
  font-size: 12px; margin-top: 3px; display: flex; align-items: baseline; gap: 4px;
  font-variant-numeric: tabular-nums; color: var(--ink-subtle);
}
.panel-delta .arw { font-size: 9px; }
.panel-delta.fav { color: var(--pos); }
.panel-delta.adv { color: var(--crit); }
.panel-delta.neutral { color: var(--s0); }
.panel-chart { display: block; width: 100%; height: 60px; margin-top: 9px; }
.panel-chart .spark-line { fill: none; stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.panel-chart .spark-area { stroke: none; opacity: .12; }
.panel-chart .spark-dot { stroke: var(--surface); stroke-width: 1.2; }
.panel-chart .spark-dot.partial { fill: var(--surface) !important; stroke-width: 1.6; }
.panel-chart.fav     .spark-line { stroke: var(--pos-strong); }
.panel-chart.fav     .spark-area, .panel-chart.fav .spark-dot { fill: var(--pos-strong); }
.panel-chart.adv     .spark-line { stroke: var(--crit-strong); }
.panel-chart.adv     .spark-area, .panel-chart.adv .spark-dot { fill: var(--crit-strong); }
.panel-chart.neutral .spark-line { stroke: var(--s0); }
.panel-chart.neutral .spark-area, .panel-chart.neutral .spark-dot { fill: var(--s0); }
.panel-chart.flat    .spark-line { stroke: var(--ink-subtle); }
.panel-chart.flat    .spark-area, .panel-chart.flat .spark-dot { fill: var(--ink-subtle); }
.panel-foot {
  display: flex; align-items: baseline; gap: 8px; margin-top: 6px;
  font-size: 10.5px; color: var(--ink-subtle);
}
.panel-foot .band {
  margin-left: auto; margin-right: auto; font-size: 10.5px; opacity: .85;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .basis-block dl { grid-template-columns: 1fr; gap: 2px 0; }
  .basis-block dd { margin-bottom: 10px; }
}

@media (max-width: 620px) {
  .app-header { padding: 0 14px; }
  .app-header .inner { height: 54px; gap: 10px; }
  .tabnav { padding: 0 14px; top: 54px; }
  /* Wraps here too, and deliberately.
     A swipeable row was the obvious mobile pattern and it was reported as
     "sliding throws me back to the start": a horizontally scrolling strip
     inside a sticky bar loses its scroll position on any reflow, and with the
     scrollbar hidden there is nothing to show it moved at all. A container
     that does not scroll cannot snap back. The pills shrink so the whole set
     fits in three or four rows. */
  .tabnav .inner { flex-wrap: wrap; overflow-x: visible; gap: 5px 4px; }
  .tabnav a { padding: 5px 10px; font-size: 12.5px; }
  .tabnav a.aside { margin-left: 13px; }
  .wordmark .co { display: none; }
  .wordmark span:not(.mark):not(.co) { display: none; }
  .header-right { gap: 8px; }
  .freshness { font-size: 11.5px; white-space: nowrap; }
  /* Finger-sized targets without looking bigger: the padding extends the hit
     area, the header height absorbs it. */
  .header-right a, .header-right button {
    white-space: nowrap; padding-top: 12px; padding-bottom: 12px;
    display: inline-flex; align-items: center;
  }
  .btn { padding: 8px 10px; font-size: 12.5px; }
  main { padding: 18px 14px 80px; }
  .page-head h1 { font-size: 23px; }
  .page-head .head-meta { margin-left: 0; }
  .stats { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; }
  .stat .v { font-size: 21px; }
  .section > h2 { font-size: 16.5px; }
  .insight { padding: 18px 16px; border-radius: var(--r); }
  .insight .headline { font-size: 16px; }
  .form-card { padding: 18px 16px; }
  thead th, tbody td { padding: 9px 13px; }
  .refresh-note { display: none; }
}

@media (max-width: 640px) {
  .pick {
    grid-template-columns: auto 1fr; row-gap: 3px;
    grid-template-areas: "cb nm" ". gp" ". bl" ". tag";
  }
  .pick input { grid-area: cb; }
  .pick .nm { grid-area: nm; }
  .pick .gp { grid-area: gp; }
  .pick .bl { grid-area: bl; }
  .pick .label { grid-area: tag; justify-self: start; }
  .form-actions { flex-wrap: wrap; }
  /* Declared after the rules they override — same specificity, so the later
     one wins whatever the earlier media query said. */
  .insight .basis, .note .note-body p, .sidenote p { font-size: 12px; }
  .insight .rank { font-size: 11px; }
  .insight li { line-height: 1.62; }
}

/* ── Tables become cards on a phone ──────────────────────────────────────────
   Below 480px the widest tables no longer fit, so each row restacks as a
   labelled card and the horizontal swipe disappears. The header row is the
   source of the labels, carried on each cell as `data-label` and printed by
   ::before — one copy of the column names in the markup. */
@media (max-width: 480px) {
  table.trend th:first-child, table.trend td:first-child { position: static; }

  .table-wrap { overflow-x: visible; background: none; }
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td {
    display: block; width: auto;
  }
  /* Kept in the accessibility tree, out of the visual flow. */
  .table-wrap thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .table-wrap tr {
    border: 1px solid var(--line); border-radius: var(--r);
    margin-bottom: 10px; padding: 4px 0; background: var(--surface);
  }
  .table-wrap tr:hover { background: var(--surface); }
  .table-wrap tr:last-child { margin-bottom: 0; }

  .table-wrap td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; padding: 7px 14px; border-bottom: none; text-align: left;
  }
  .table-wrap td::before {
    content: attr(data-label);
    flex: 0 0 auto; font-size: 11px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--ink-subtle);
  }
  .table-wrap td:not([data-label]):not(.rowhead) { display: none; }
  .table-wrap td:empty { display: none; }

  .table-wrap td.rowhead {
    font-weight: 700; font-size: 14px; padding: 10px 14px 8px;
    border-bottom: 1px solid var(--line); margin-bottom: 3px; display: block;
  }
  .table-wrap td.rowhead::before { content: none; }
  .table-wrap td.rowhead a { display: inline-block; padding: 2px 0; }
  .table-wrap td.n { justify-content: space-between; text-align: right; }
  .table-wrap td.barcell { display: block; }
  .table-wrap td.barcell::before { display: block; margin-bottom: 6px; }
  .table-wrap td.barcell .prop { width: 100%; }
  /* On a card the sparkline gets the full width under its label, like the
     proportion bar — squeezed into a flex row it collapses to a smear. */
  .table-wrap td.sparkcell { display: block; width: auto; min-width: 0; }
  .table-wrap td.sparkcell::before { display: block; margin-bottom: 6px; }
  .table-wrap td.sparkcell .spark { width: 100%; height: 34px; }
  .table-wrap tr.total { background: var(--surface-2); border-color: var(--line-strong); }
  .table-wrap tr.total td { font-weight: 700; }
  .table-wrap td.instr.repeat .label { display: inline-flex; }
}

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

/* ── Print ───────────────────────────────────────────────────────────────────
   The pack is still printed, and a printed page has no "open this toggle". So
   every collapsed note and the basis block expand on paper. */
@media print {
  @page { margin: 16mm 14mm; }
  :root {
    --canvas: #fff; --surface: #fff; --surface-2: #fff; --surface-3: #eee;
    --ink: #000; --ink-muted: #333; --ink-subtle: #444;
    --line: #bbb; --line-strong: #999;
  }
  .app-header, .tabnav, .btn, .refresh-note, #refresh-btn, .jump-action { display: none !important; }
  main { max-width: none; padding: 0; }
  body { font-size: 10.5pt; background: #fff; }
  .section, .exhibit, .box, .insight { break-inside: avoid; }
  .section > h2 { break-after: avoid; }
  thead { display: table-header-group; }
  a { color: #000; text-decoration: none; }
  .stat, .box, .insight, .form-card { box-shadow: none; }
  details { display: block; }
  details > summary { list-style: none; }
  .note > summary::before, .basis-block > summary::after { content: none; }
  .note .note-body, .basis-block dl { display: block !important; }
  details:not([open]) > *:not(summary) { display: revert !important; }
  .chart-wrap, .panel { border-color: #999; box-shadow: none; break-inside: avoid; }
  .panels { grid-template-columns: repeat(2, 1fr); }
  :root { --s0: #000; --s1: #555; --s2: #888; --s3: #aaa; }
  .print-only { display: block !important; }
}
.print-only { display: none; }
/* ── Home ────────────────────────────────────────────────────────────────────
   The one page that is a way in rather than a report. It states the position in
   a sentence, names what needs a decision, and routes to everything else — so
   it is laid out as a hero and a directory, not as another stack of exhibits.

   Nothing here is computed on this page. Every figure is stated fully, with its
   own basis, on the page it links to; repeating a number without its caveats is
   how a summary surface starts disagreeing with the pack behind it. */
.home-hero {
  display: grid; gap: 28px 40px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: start;
  padding: 8px 0 34px; margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.home-hero-main .kicker {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-subtle); font-weight: 600; margin-bottom: 14px;
}
/* The serif, at the largest size it is used anywhere. This sentence is the
   whole point of the page. */
.home-hero-main h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12; letter-spacing: -.015em;
  margin: 0; text-wrap: balance; max-width: 20ch;
}
.home-hero-main .sub {
  color: var(--ink-muted); font-size: 15px; line-height: 1.6;
  margin: 14px 0 0; max-width: 46ch;
}
.home-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* Four figures, as links. Each is the headline of the page behind it, so the
   card is the door and the number is the sign on it. */
.home-figures {
  display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-fig {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); padding: 17px 18px 16px;
  box-shadow: var(--shadow); color: var(--ink);
}
.home-fig:hover {
  text-decoration: none; color: var(--ink);
  border-color: var(--line-strong); box-shadow: var(--shadow-lg);
}
.home-fig::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: transparent;
}
.home-fig.is-crit::before { background: var(--crit-strong); }
.home-fig.is-warn::before { background: var(--warn-strong); }
.home-fig .k {
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-subtle); margin-bottom: 10px;
}
.home-fig .v {
  font-size: 28px; font-weight: 500; letter-spacing: -.035em; line-height: 1.05;
  display: flex; align-items: baseline; gap: 5px;
}
.home-fig .v .u { font-size: 11.5px; font-weight: 500; color: var(--ink-subtle); }
.home-fig .d { font-size: 12px; color: var(--ink-subtle); margin-top: 7px; }

/* Findings as cards rather than the alert band the digest uses: on the home
   page they are an invitation to look, not an alarm being raised. */
.home-findings {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  align-items: stretch;
}
.home-finding {
  display: block; color: var(--ink);
  border: 1px solid var(--line); border-left: 3px solid var(--crit-strong);
  border-radius: var(--r); background: var(--surface);
  padding: 16px 18px; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.home-finding .act { margin-top: auto; }
.home-finding:hover {
  text-decoration: none; color: var(--ink);
  border-color: var(--line-strong); border-left-color: var(--crit-strong);
  box-shadow: var(--shadow-lg);
}
.home-finding .src {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--crit); margin-bottom: 8px;
}
.home-finding .txt { font-size: 13.5px; line-height: 1.55; color: var(--ink-muted); }
.home-finding .act {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink);
}

/* The directory. Grouped, because eleven undifferentiated tiles is a list. */
.home-grid {
  display: grid; gap: 26px 28px;
  grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
}
.home-group-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-subtle);
  padding-bottom: 9px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
}
.home-card {
  display: block; color: var(--ink); padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--line);
}
.home-group .home-card:last-child { border-bottom: none; }
.home-card:hover { text-decoration: none; color: var(--accent); }
.home-card .t { font-weight: 600; font-size: 14.5px; }
.home-card .q { font-size: 12.5px; color: var(--ink-subtle); margin-top: 2px; }
.home-card .s {
  font-size: 12.5px; color: var(--ink-muted); margin-top: 5px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .home-hero { grid-template-columns: 1fr; gap: 24px; }
  .home-hero-main h1 { max-width: none; }
}
@media (max-width: 620px) {
  .home-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .home-fig { padding: 14px; }
  .home-fig .v { font-size: 22px; }
  .home-hero { padding-bottom: 26px; }
}


/* ── Board pack ──────────────────────────────────────────────────────────────
   The one surface designed for paper first. Everywhere else the screen is the
   primary medium and print is a courtesy; here it is the other way round, so
   the rules below set up a document and the print block mostly gets out of the
   way.

   It is an edit, not a concatenation. Reproducing all fifteen pages would be a
   printout, and a printout is what a board pack exists instead of. */
.pack-toolbar {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface-2); padding: 16px 20px; margin-bottom: 26px;
}
.pack-toolbar .t { font-weight: 700; font-size: 15px; }
.pack-toolbar .d {
  font-size: 12.5px; color: var(--ink-subtle); margin-top: 3px; max-width: 62ch;
}
.pack-toolbar .btn { margin-left: auto; }

.pack {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 44px 48px 40px;
  box-shadow: var(--shadow);
}

/* ── Cover ───────────────────────────────────────────────────────────────── */
.pack-cover {
  display: grid; gap: 4px 18px; grid-template-columns: auto 1fr;
  padding-bottom: 30px; margin-bottom: 34px;
  border-bottom: 2px solid var(--ink);
}
.pack-cover .mark {
  width: 44px; height: 44px; border-radius: var(--r-sm);
  background: var(--brand); color: #fff; display: grid; place-items: center;
  font-family: var(--mono); font-size: 13px; grid-row: span 2;
}
.pack-cover h1 {
  font-family: var(--font-display); font-weight: 400; font-size: 32px;
  letter-spacing: -.012em; margin: 0; line-height: 1.1;
}
.pack-cover .sub {
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-subtle); font-weight: 600; margin-top: 5px;
}
.pack-meta {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 40px;
  margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
}
.pack-meta dt {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-subtle); font-weight: 600;
}
.pack-meta dd {
  margin: 3px 0 0; font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* The one sentence a director reads if they read nothing else. */
.pack-lede {
  grid-column: 1 / -1; font-family: var(--font-display); font-weight: 400;
  font-size: 27px; line-height: 1.25; letter-spacing: -.01em;
  margin: 28px 0 0; max-width: 34ch; text-wrap: balance;
}
.pack-sub {
  grid-column: 1 / -1; color: var(--ink-muted); font-size: 14.5px;
  margin: 10px 0 0; max-width: 62ch;
}
.pack-warn {
  grid-column: 1 / -1; margin: 16px 0 0; font-size: 13px;
  color: var(--crit); border-left: 3px solid var(--crit);
  padding: 8px 0 8px 12px; background: var(--crit-soft);
}

/* ── Parts ───────────────────────────────────────────────────────────────────
   Numbered, unlike the interactive pages. A director referring to "section 4"
   across a table has no tab to point at; that is precisely the case the
   numbering was decoration for on screen and is navigation for here. */
.pack-part { margin: 0 0 42px; }
.pack-part > h2 {
  display: flex; align-items: baseline; gap: 14px;
  font-size: 20px; font-weight: 700; letter-spacing: -.02em;
  margin: 0 0 6px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line-strong);
}
.pack-part > h2 .no {
  font-size: 12px; font-weight: 700; color: var(--accent);
  letter-spacing: .06em; flex: none;
}
.pack-part > .standfirst {
  color: var(--ink-subtle); font-size: 13.5px; margin: 10px 0 18px; max-width: 76ch;
}
.pack-part h3 {
  font-size: 13px; font-weight: 700; margin: 24px 0 10px; letter-spacing: .02em;
}
.pack-part h3:first-of-type { margin-top: 14px; }

/* A row of figures, flat: a document does not need twelve raised surfaces on
   one page. The 1px gap over a line-coloured ground draws the dividers. */
.pack-figures {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-sm); overflow: hidden; margin-bottom: 20px;
}
.pack-figures > div {
  background: var(--surface); padding: 13px 15px;
  display: flex; flex-direction: column; gap: 6px;
}
.pack-figures .k {
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-subtle); font-weight: 600;
}
.pack-figures .v {
  font-size: 19px; font-weight: 600; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}

.pack-table {
  width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 16px;
}
.pack-table thead th {
  text-align: left; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-subtle); font-weight: 600;
  padding: 8px 10px; border-bottom: 1px solid var(--line-strong); white-space: nowrap;
}
.pack-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.pack-table td.n, .pack-table th.n {
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.pack-table td.rowhead { font-weight: 600; }
.pack-table tr.total td { font-weight: 700; border-top: 1px solid var(--line-strong); }
.pack-table.compact td { padding: 6px 10px; font-size: 12.5px; }

.pack-two {
  display: grid; gap: 14px 32px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.pack-findings { margin: 0; padding-left: 22px; }
.pack-findings li { margin-bottom: 20px; padding-left: 4px; }
.pack-findings li::marker { font-weight: 700; color: var(--crit); }
.pack-findings .src {
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; color: var(--crit); margin-bottom: 4px;
}
.pack-findings .txt { font-size: 13.5px; line-height: 1.6; }
.pack-findings .act { margin-top: 7px; font-size: 13px; }
.pack-findings .basis {
  margin-top: 5px; font-family: var(--mono); font-size: 11px; color: var(--ink-subtle);
}

.pack-watch { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.65; }
.pack-watch li { margin-bottom: 9px; }
.pack-watch .src {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-subtle); margin-right: 7px;
}

.pack-note {
  font-size: 12.5px; color: var(--ink-muted); line-height: 1.6;
  border-left: 2px solid var(--line-strong); padding-left: 14px;
  margin: 14px 0 0; max-width: 84ch;
}
.pack-clear { font-size: 13.5px; color: var(--ink-muted); }

.pack-basis { margin: 8px 0 0; }
.pack-basis > div {
  display: grid; grid-template-columns: 170px 1fr; gap: 20px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.pack-basis dt { font-weight: 600; font-size: 12.5px; }
.pack-basis dd { margin: 0; font-size: 12.5px; color: var(--ink-muted); line-height: 1.6; }

@media (max-width: 720px) {
  .pack { padding: 24px 18px; border-radius: var(--r); }
  .pack-cover { grid-template-columns: 1fr; }
  .pack-cover .mark { grid-row: auto; }
  .pack-cover h1 { font-size: 25px; }
  .pack-lede { font-size: 21px; max-width: none; }
  .pack-basis > div { grid-template-columns: 1fr; gap: 3px; }
  .pack-toolbar .btn { margin-left: 0; }
}

@media print {
  /* The toolbar is the only thing here that exists for the screen. */
  .pack-toolbar { display: none !important; }
  .pack { border: none; border-radius: 0; padding: 0; box-shadow: none; }
  /* Each numbered part starts a page. A board pack whose section 4 begins
     two-thirds down a sheet is one nobody can refer to across a table. */
  .pack-part { break-before: page; break-inside: auto; margin-bottom: 0; }
  .pack-part > h2 { break-after: avoid; }
  .pack-part h3 { break-after: avoid; }
  /* The cover does not also force a break. Every part already starts a page,
     and two mechanisms pushing the same boundary print a blank sheet between
     the cover and section 1. */
  .pack-cover { padding-bottom: 24px; }
  .pack-figures, .pack-two, .pack-findings li, .pack-basis > div { break-inside: avoid; }
  .pack-table { break-inside: auto; }
  .pack-table tr { break-inside: avoid; }
  .pack-table thead { display: table-header-group; }
  .pack-lede { font-size: 20pt; }
  .pack-cover h1 { font-size: 22pt; }
}


/* ── Numbers first ───────────────────────────────────────────────────────────
   The pack was reported as reading dull and static: too much prose, figures
   sized like body text, every tile the same grey. These rules invert that
   weight without moving a single number or changing what any page says.

   Colour rule is unchanged and still load-bearing: a tile carrying state
   (crit / warn / good) keeps the state colour, because that is the axis a
   reader acts on. Only a tile with NO state takes a series hue, cycling by
   position — decoration on a figure that has nothing to declare, never on one
   that does. A neutral tile going blue can mislead nobody; a critical one
   going blue could. */

.stat .v { font-size: 36px; letter-spacing: -.04em; font-weight: 600; }
.stat .v .u { font-size: 13px; }
.stat { padding: 20px 22px 18px; }
.stat::before { width: 4px; }

/* Neutral tiles, coloured by position. :not() keeps every state tile out. */
.stats > .stat:not(.is-crit):not(.is-warn):not(.is-good):nth-child(4n+1) { --tile: var(--s0); }
.stats > .stat:not(.is-crit):not(.is-warn):not(.is-good):nth-child(4n+2) { --tile: var(--s1); }
.stats > .stat:not(.is-crit):not(.is-warn):not(.is-good):nth-child(4n+3) { --tile: var(--s2); }
.stats > .stat:not(.is-crit):not(.is-warn):not(.is-good):nth-child(4n+4) { --tile: var(--s3); }
.stats > .stat:not(.is-crit):not(.is-warn):not(.is-good)::before { background: var(--tile); }
.stats > .stat:not(.is-crit):not(.is-warn):not(.is-good) .v { color: var(--tile); }
.stats > .stat:not(.is-crit):not(.is-warn):not(.is-good) .k { color: var(--tile); opacity: .85; }

/* The line under a figure is a caption, not a paragraph. Two lines maximum;
   anything longer belongs in the collapsed note, not under the number. */
.stat .d {
  font-size: 12px; line-height: 1.45; margin-top: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* A delta beside a figure, the way the reference dashboard carries MoM / YoY.
   Direction is in the glyph as well as the hue, so it survives greyscale and
   colour blindness. */
.deltas { display: flex; flex-wrap: wrap; gap: 3px 14px; margin-top: 9px; }
.delta {
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: baseline; gap: 4px; color: var(--ink-subtle);
}
.delta .arw { font-size: 9px; }
.delta .vs { font-weight: 400; color: var(--ink-subtle); }
.delta.fav { color: var(--pos); }
.delta.adv { color: var(--crit); }

/* ── Section prose, stepped back ─────────────────────────────────────────────
   Kept, because an intro that says what a section answers is worth one line.
   Sized so it reads as a caption under the heading rather than as copy the
   reader has to get through before reaching the table. */
.section > .intro { font-size: 13px; max-width: 76ch; color: var(--ink-subtle); }

/* The card footnote is where the caveats live — "this is not gross margin",
   "the 2B covers 8% of the period". They cannot be deleted without making the
   figures above them misleading, so they are set smaller and quieter instead. */
.box .foot { font-size: 12px; line-height: 1.5; color: var(--ink-subtle); }
.box .foot b, .box .foot strong { color: var(--ink-muted); }

/* ── The written interpretation, now a disclosure ────────────────────────── */
.insight { padding: 0; margin: 30px 0 24px; overflow: hidden; }
.insight > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 12px;
  padding: 15px 22px; font-weight: 600; font-size: 13.5px;
}
.insight > summary::-webkit-details-marker { display: none; }
.insight > summary::after {
  content: "▸"; margin-left: auto; font-size: 11px; color: var(--ink-subtle);
  transition: transform .15s ease;
}
.insight[open] > summary::after { transform: rotate(90deg); }
.insight > summary:hover { background: var(--surface-2); }
.insight > summary .lbl { color: var(--ink); }
.insight > summary .pill {
  font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 2em;
  background: var(--surface-3); color: var(--ink-subtle);
}
.insight > summary .pill.crit { background: var(--crit-soft); color: var(--crit); }
.insight .insight-body { padding: 4px 22px 20px; border-top: 1px solid var(--line); }
.insight .headline {
  font-family: var(--font-display); font-size: 21px; line-height: 1.35;
  font-weight: 400; letter-spacing: -.01em; margin: 16px 0 6px; max-width: 66ch;
}

/* ── Bar chart, for a distribution a table states but does not show ───────── */
.bars { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.bar-row {
  display: grid; grid-template-columns: minmax(120px, 1.1fr) 1fr auto;
  align-items: center; gap: 14px; padding: 7px 0;
}
.bar-row .lbl { font-size: 13px; font-weight: 500; }
.bar-row .track {
  height: 22px; border-radius: 5px; background: var(--surface-3); overflow: hidden;
}
/* display:block, or nothing renders. The fill is a <span>, and width and
   height do not apply to an inline box - the track blockifies because it is a
   grid item, its child does not. The same trap is already handled a few rules
   up for .prop span. */
.bar-row .fill {
  display: block; height: 100%; border-radius: 5px; background: var(--s0);
}
.bar-row .fill.ok { background: var(--pos-strong); }
.bar-row .fill.warn { background: var(--warn-strong); }
.bar-row .fill.crit { background: var(--crit-strong); }
.bar-row .amt {
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap; text-align: right; min-width: 96px;
}
.bar-row .amt .pc {
  display: block; font-size: 11px; font-weight: 400; color: var(--ink-subtle);
}

@media (max-width: 620px) {
  .stat .v { font-size: 28px; }
  .bar-row { grid-template-columns: 1fr auto; row-gap: 5px; }
  .bar-row .track { grid-column: 1 / -1; height: 16px; }
  .insight .headline { font-size: 18px; }
}

/* ── Waterfall ───────────────────────────────────────────────────────────────
   A subtotal is neither good nor bad — it is just where you have got to — so it
   stays neutral. A deduction genuinely is unfavourable and takes the state
   colour, which is the one place on a chart that is legitimate: this is not a
   series, it is an arithmetic sign. */
.waterfall { display: block; width: 100%; height: auto; }
.wf-bar.total { fill: var(--s0); }
.wf-bar.up    { fill: var(--pos-strong); }
.wf-bar.down  { fill: var(--crit-strong); }
.wf-link { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.wf-val {
  font-family: var(--font); font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums; fill: var(--ink);
}
.wf-lbl {
  font-family: var(--font); font-size: 11.5px; fill: var(--ink-subtle);
}
.chart-legend .wf-k {
  width: 11px; height: 11px; border-radius: 3px; flex: none; display: inline-block;
}
.chart-legend .wf-k.total { background: var(--s0); }
.chart-legend .wf-k.up    { background: var(--pos-strong); }
.chart-legend .wf-k.down  { background: var(--crit-strong); }

@media (max-width: 620px) {
  .wf-val { font-size: 15px; }
  .wf-lbl { font-size: 14px; }
}
@media print {
  .wf-bar.total { fill: #444; }
  .wf-bar.up { fill: #777; }
  .wf-bar.down { fill: #000; }
}


/* ── Sidebar ─────────────────────────────────────────────────────────────────
   The tab bar carried thirteen destinations comfortably and nineteen badly. It
   scrolled horizontally with a hidden scrollbar, which put five pages out of
   reach on a mouse; wrapping it to two rows fixed that and cost a band of
   chrome above every page.

   A vertical rail has room the horizontal one never did, and it groups. The
   groups are the questions a reader is holding — can we pay for this, what is
   the working capital doing, what are we selling, what do we owe by statute —
   rather than which table the figures come from.

   One definition feeds this and the directory on the home page. They listed the
   same pages in two places before and would have drifted the first time one was
   added. */
/* Only splits when there is a rail to split for. Declaring two columns
   unconditionally squeezed main into the 232px first column on every page
   without a sidebar — which is the login page, and any page rendered without a
   session. */
.shell.with-nav {
  display: grid;
  grid-template-columns: var(--nav-w, 232px) minmax(0, 1fr);
  align-items: start;
}
/* Collapse to a single column, not to a zero-width first one.
   `display: none` takes the aside out of the grid entirely, so main becomes the
   first grid item — and with a 0px first column it was squeezed to its
   min-content width, about 330px, with the rest of the page empty. Anyone who
   collapsed the menu got that. The column count has to change, not its width. */
body.nav-hidden .shell.with-nav { grid-template-columns: minmax(0, 1fr); }
body.nav-hidden .sidenav { display: none; }

.sidenav {
  position: sticky; top: 58px;
  height: calc(100vh - 58px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 14px 0 28px;
}
.sidenav::-webkit-scrollbar { width: 8px; }
.sidenav::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 4px;
}

.nav-group { margin-bottom: 14px; }
.nav-group-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-subtle);
  padding: 8px 18px 6px; opacity: .75;
}

.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 18px;
  font-size: 13.5px; font-weight: 500; color: var(--ink-muted);
  /* The active marker is a left border rather than a filled pill: nineteen
     pills in a column is a lot of shape, and the rule reads as a position in a
     list, which is what it is. */
  border-left: 3px solid transparent;
  white-space: nowrap;
}
.nav-item svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .75;
}
.nav-item:hover {
  text-decoration: none; color: var(--ink); background: var(--surface-2);
}
.nav-item:hover svg { opacity: 1; }
.nav-item.on {
  color: var(--accent); font-weight: 600;
  border-left-color: var(--accent);
  background: var(--accent-soft);
}
.nav-item.on svg { opacity: 1; }

/* The header keeps its own width; the shell below it does not, because a rail
   plus a centred column is two competing centres. Main keeps its measure. */
.shell.with-nav > main { max-width: 1180px; padding: 30px 30px 110px; }

.icon-btn { padding: 6px 8px; }
.icon-btn svg {
  width: 16px; height: 16px; display: block;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 1000px) {
  /* Off-canvas rather than squeezed: below this the rail and a readable
     measure cannot both fit, and a 140px rail helps nobody. */
  .shell.with-nav { grid-template-columns: minmax(0, 1fr); }
  .sidenav {
    position: fixed; left: 0; top: 54px; z-index: 45;
    width: 250px; height: calc(100vh - 54px);
    box-shadow: var(--shadow-lg);
  }
  /* One class throughout, set explicitly by the script — which also picks the
     default, closed here and open on a desktop. An earlier draft had a second
     class the script never set, so the menu could not be opened on a phone at
     all. */
  .shell.with-nav > main { padding: 20px 16px 90px; }
}

@media print {
  .sidenav, #nav-toggle { display: none !important; }
  .shell.with-nav { display: block; }
  .shell.with-nav > main { max-width: none; padding: 0; }
}


/* ── Aligned to the CFO design system ────────────────────────────────────────
   Everything below overrides the earlier pass. Values from
   fintale-cfo/src/theme.jsx: KPICard, SectionHeader, Badge, StatusPill and the
   TYPE scale.

   The correction that matters most: financial figures set in DM Mono again. An
   earlier pass here moved them to a proportional sans with tabular numerals,
   on the reasoning that a mono made the pack read like console output. In this
   house money sets in DM Mono — FONT_NUM in theme.jsx, used for every KPI
   value, every tooltip figure and every printed table — so the pack now agrees
   with the product it sits beside. */

/* TYPE scale: xs 11 / sm 13 / md 15 / lg 18 / xl 24 / xxl 32 */
body { font-size: 13px; line-height: 1.5; }

h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -.015em; }

/* Money is monospaced, and tabular, and that is the house rule. */
.num, td.n, th.n, .stat .v, .meter .cap, .kpi-spark-val,
.pack-figures .v, .home-fig .v, .bar-row .amt, .delta {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: -.02em;
}

/* ── KPI card ────────────────────────────────────────────────────────────────
   theme.jsx KPICard: an accent bar across the TOP rather than down the side,
   a 9px uppercase label, and a 21px monospaced value in the accent colour. */
.stats {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 24px;
}
.stat {
  position: relative; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 16px 13px;
  box-shadow: var(--shadow);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.stat::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2.5px;
  background: linear-gradient(90deg, var(--tile, var(--accent)),
                              color-mix(in srgb, var(--tile, var(--accent)) 53%, transparent));
  opacity: .6; border-radius: var(--r) var(--r) 0 0;
  width: auto;
}
.stat:hover {
  border-color: color-mix(in srgb, var(--tile, var(--accent)) 33%, transparent);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--tile, var(--accent)) 13%, transparent),
              0 2px 8px rgba(12, 26, 46, .06);
}
.stat:hover::before { opacity: 1; }

.stat.is-crit { --tile: var(--crit); }
.stat.is-warn { --tile: var(--warn); }
.stat.is-good { --tile: var(--pos); }
.stats > .stat:not(.is-crit):not(.is-warn):not(.is-good):nth-child(4n+1) { --tile: var(--s0); }
.stats > .stat:not(.is-crit):not(.is-warn):not(.is-good):nth-child(4n+2) { --tile: var(--s1); }
.stats > .stat:not(.is-crit):not(.is-warn):not(.is-good):nth-child(4n+3) { --tile: var(--s2); }
.stats > .stat:not(.is-crit):not(.is-warn):not(.is-good):nth-child(4n+4) { --tile: var(--s3); }

.stat .k {
  font-size: 9px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-subtle);
  margin: 2px 0 7px; line-height: 1;
  display: flex; align-items: center; gap: 4px;
}
.stat .v {
  font-size: 21px; font-weight: 700; line-height: 1.15;
  color: var(--tile, var(--accent));
  display: flex; align-items: baseline; gap: 4px;
}
.stat .v .u {
  font-family: var(--font); font-size: 10.5px; font-weight: 500;
  color: var(--ink-subtle); letter-spacing: 0;
}
.stat .d {
  font-size: 10.5px; color: var(--ink-subtle); margin-top: 4px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Deltas sit under the value, as the reference carries MoM / YoY. */
.deltas { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 6px; }
.delta {
  font-size: 10.5px; font-weight: 600;
  display: inline-flex; align-items: baseline; gap: 3px; color: var(--ink-subtle);
}
.delta .arw { font-size: 8px; }
.delta .vs { font-family: var(--font); font-weight: 400; color: var(--ink-subtle); }
.delta.fav { color: var(--pos); }
.delta.adv { color: var(--crit); }

/* ── Section heading — SectionHeader, 14.5px / 700 ───────────────────────── */
.section > h2 { font-size: 14.5px; font-weight: 700; letter-spacing: -.015em; }
.section > .intro { font-size: 11.5px; color: var(--ink-subtle); line-height: 1.6; }
.section { margin: 0 0 26px; }

/* ── Badge and label — Badge / StatusPill ────────────────────────────────── */
.label {
  font-size: 10px; font-weight: 600; letter-spacing: .04em;
  line-height: 18px; padding: 0 8px; border-radius: 5px;
}
.label.ok   { color: var(--pos);    background: color-mix(in srgb, var(--pos) 8%, transparent);    border-color: color-mix(in srgb, var(--pos) 19%, transparent); }
.label.warn { color: var(--warn);   background: color-mix(in srgb, var(--warn) 8%, transparent);   border-color: color-mix(in srgb, var(--warn) 19%, transparent); }
.label.crit { color: var(--crit);   background: color-mix(in srgb, var(--crit) 8%, transparent);   border-color: color-mix(in srgb, var(--crit) 19%, transparent); }
.label.info { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: color-mix(in srgb, var(--accent) 19%, transparent); }

/* ── Tables — print spec proportions, screen sizes ───────────────────────── */
table { font-size: 12.5px; }
thead th {
  background: var(--accent-soft); color: var(--accent);
  font-size: 9px; letter-spacing: .06em; font-weight: 700;
  padding: 8px 14px;
}
tbody td { padding: 9px 14px; }
tbody tr:nth-child(even) td { background: var(--surface-2); }
tbody tr:hover td { background: var(--accent-soft); }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.box { border-radius: var(--r); }
.box > header h2 { font-size: 14.5px; }
.box .foot { font-size: 11px; line-height: 1.6; }

/* ── Alert bands — print-alert-* proportions ─────────────────────────────── */
.verdict {
  border-radius: 0 6px 6px 0;
  border: 1px solid var(--line); border-left-width: 3px;
  padding: 12px 16px;
}
.verdict.is-crit { border-left-color: var(--crit); background: var(--crit-soft); }
.verdict.is-warn { border-left-color: var(--warn); background: var(--warn-soft); }
.verdict.is-good { border-left-color: var(--pos);  background: var(--pos-soft); }
.verdict .t { font-size: 13px; font-weight: 700; font-family: var(--font-display); }
.verdict .d { font-size: 11.5px; line-height: 1.6; }

/* ── Page head ───────────────────────────────────────────────────────────── */
.page-head h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 24px; letter-spacing: -.02em; line-height: 1.25;
}
.page-head .kicker { font-size: 9px; letter-spacing: .1em; }
.page-head .sub { font-size: 12.5px; }

/* ── Home hero ───────────────────────────────────────────────────────────── */
.home-hero-main h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.02em; line-height: 1.15;
}
.home-fig .v { font-size: 21px; font-weight: 700; }
.home-fig .k { font-size: 9px; letter-spacing: .08em; font-weight: 700; }

/* ── Insight ─────────────────────────────────────────────────────────────── */
.insight .headline {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; line-height: 1.35; letter-spacing: -.015em;
}

/* ── Sidebar, to the same scale ──────────────────────────────────────────── */
.nav-item { font-size: 12.5px; }
.nav-group-label { font-size: 9px; letter-spacing: .1em; }
.wordmark { font-family: var(--font-display); font-weight: 800; font-size: 15px;
            letter-spacing: -.02em; }

@media (max-width: 620px) {
  .stat .v { font-size: 19px; }
  .page-head h1 { font-size: 21px; }
}

/* ── Score ring ──────────────────────────────────────────────────────────── */
.ring { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: none; }
.ring svg { display: block; overflow: visible; }
.ring-track { fill: none; stroke: var(--surface-3); stroke-width: 6; }
.ring-arc {
  fill: none; stroke-width: 6; stroke-linecap: round;
  stroke: var(--accent);
}
.ring.is-good .ring-arc { stroke: var(--pos); }
.ring.is-warn .ring-arc { stroke: var(--warn); }
.ring.is-crit .ring-arc { stroke: var(--crit); }
.ring-val {
  font-family: var(--mono); font-size: 21px; font-weight: 700;
  fill: var(--ink); font-variant-numeric: tabular-nums;
}
.ring.is-good .ring-val { fill: var(--pos); }
.ring.is-warn .ring-val { fill: var(--warn); }
.ring.is-crit .ring-val { fill: var(--crit); }
.ring-label {
  font-size: 8.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-subtle);
}

/* ── Sparkline inside a KPI tile ─────────────────────────────────────────────
   theme.jsx puts MiniSparkline bottom-right at 35% opacity, behind the figure
   rather than beside it: the shape is context for the number, not a second
   thing to read. The existing spark() macro draws it — one definition, so a
   tile and a table cell cannot disagree about what a series looks like. */
.stat .spark {
  position: absolute; right: 0; bottom: 0;
  width: 96px; height: 30px; margin: 0; opacity: .35;
  pointer-events: none;
}
.stat:hover .spark { opacity: .55; }
.stat .v, .stat .k, .stat .d, .stat .deltas { position: relative; z-index: 1; }

/* The hero's kicker and ring sit on one line, so the score reads as a property
   of the position rather than a separate panel. */
.hero-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; margin-bottom: 12px;
}
.hero-top .kicker { margin-bottom: 0; }

.score-row {
  display: flex; align-items: center; gap: 20px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 16px 20px; margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.score-say .t { font-weight: 700; font-size: 13.5px; }
.score-say .d {
  font-size: 11.5px; color: var(--ink-subtle); line-height: 1.6;
  margin-top: 4px; max-width: 72ch;
}
@media (max-width: 620px) {
  .hero-top { flex-direction: column-reverse; align-items: flex-start; gap: 12px; }
  .score-row { flex-direction: column; align-items: flex-start; gap: 12px; }
}