/* The site kit: v2's tokens and the pieces every page is built from.
 *
 * One stylesheet, linked first by every page: the front page, the utility and
 * legal pages and the guides (through tools/shell.mjs), the web journal and
 * account (app.html), admin, partners and the settings page.
 *
 * The tokens are v2's (owner ruling, 30 Sept 2026: "go to v2", with his
 * rulings R1-R20 on top): words in the system face, with Instrument Sans as
 * its declared fallback and IBM Plex Mono for figures only, always tabular;
 * the one accent is for the single thing you press or focus, and on this
 * site's own chrome not even that (O13: the site's primary and focus ring are
 * ink). The meaning rules hold here as in the app: money never takes a hue,
 * an empty is named, a verdict is hue for behaviour and fill for outcome,
 * nothing congratulates, nothing claims more than the product does. Until
 * v2 plan F.3 (docs/LOG.md "the site's tokens") this file painted 1.2.0's
 * names (--canvas, --surface, --ink-2, --line-strong, ...); each went, in one
 * commit, to the v2 token the app sends it to (Palette+V2Names.swift), so
 * the site and the app agree on every job.
 *
 * Colours are a chain this file may not type into: design/system/tokens.json
 * = Palette.swift (tokens-are-the-palette gate) → `swift run -q uispec` →
 * site/spec/ui.json `system` → the custom properties below: every colour,
 * name for name (dots to dashes: fill.weekColumn is --fill-weekColumn) and
 * register for register, the two face stacks, every radius and the motion,
 * held by tools/the-site-paints-the-tokens-gate.mjs. There are no aliases.
 *
 * Three registers. :root is light, the published register. `.k-figure` is a
 * picture of the app, drawn in the app's light appearance like the page
 * around it (owner ruling O12a, 30 Sept 2026: "use white theme examples and
 * showcase that you can switch to dark"); `.k-figure[data-theme="dark"]` is
 * the same picture in the app's dark appearance, which the front page's month
 * switches to on request. `.k-system` is a region that follows the viewer's
 * system (and a `data-theme` pin), for the web journal, which mirrors the Mac.
 * The dark values are v2's derived register (R6: v2 drew no dark), the same
 * as the app's.
 *
 * No inline style and no inline script anywhere (the CSP forbids both), and
 * tools/css-used-gate.mjs holds every class here to a wearer: /kit wears all
 * of them. Nothing in this file places a box by flex or grid ordering, because
 * tools/hero-order-gate.mjs reads every sheet the front page links. */

@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700;
  font-stretch: 100%; font-display: swap;
  src: url('/assets/fonts/instrument-sans-variable.ttf?v=b24f1812') format('truetype'); }
/* The italic, google/fonts' own variable file beside the roman, under the same
 * OFL (OFL-InstrumentSans.txt names the Instrument Sans Project Authors, who
 * made both). It is what <em> sets; nothing invents an oblique. */
@font-face { font-family: 'Instrument Sans'; font-style: italic; font-weight: 400 700;
  font-stretch: 100%; font-display: swap;
  src: url('/assets/fonts/instrument-sans-italic-variable.ttf?v=a74203cc') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/assets/fonts/ibm-plex-mono-400-latin.woff2?v=c36f509c') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('/assets/fonts/ibm-plex-mono-500-latin.woff2?v=a76f53ca') format('woff2'); }

/* The published register: ui.json system.colour, light, and the scale. */
:root {
  color-scheme: light;
  --accent: #2F6FED;                          /* accent  The one blue */
  --accent-focusRing: rgba(47,111,237,0.28);  /* accent.focusRing  The halo round a custom-focused view */
  --accent-pressed: #1F55C4;                  /* accent.pressed  The primary button held down */
  --accent-text: #1F55C4;                     /* accent.text  Words in the accent ('Add Rule…') */
  --accent-tint: #E8EFFD;                     /* accent.tint  An informational chip's ground */
  --attention: #8A6710;                       /* attention  Needs you */
  --metric-great: #7A47BF;                    /* metric.great  A metric in its top band */
  --break: #C13527;                           /* break  A rule went */
  --break-cell: #FFF7F5;                      /* break.cell  A day or a row that holds a break */
  --break-ink: #A82C20;                       /* break.ink  Words that say a rule went, on break.tint or a card */
  --break-tint: #FBE9E6;                      /* break.tint  The break chip's ground */
  --control-off: #D5D9DF;                     /* control.off  A switch's off track, in drawings only */
  --fill-future: #FCFCFD;                     /* fill.future  A day that has not happened yet */
  --fill-hover: rgba(23,26,31,0.05);          /* fill.hover  Under the pointer */
  --fill-inspector: #FAFBFC;                  /* fill.inspector  The inspector column */
  --fill-neutralChip: #F2F4F7;                /* fill.neutralChip  A quiet chip */
  --fill-page: #F5F6F8;                       /* fill.page  The window's detail column and form pages */
  --fill-raised: #FFFFFF;                     /* fill.raised  A card, a grouped list, a key cap, a field, a popover */
  --fill-sidebar: #ECEFF3;                    /* fill.sidebar  The sidebar, opaque */
  --fill-sidebarSelected: rgba(23,26,31,0.09);/* fill.sidebarSelected  A selected row in a sidebar the app paints itself (web figures) */
  --fill-stripe: #F5F6F8;                     /* fill.stripe  A list's alternate row */
  --fill-track: #E8EBEF;                      /* fill.track  An empty track (budget, price, progress) */
  --fill-weekColumn: #F7F8FA;                 /* fill.weekColumn  The calendar's week column */
  --grade-A-bg: #E7F2EC;                      /* grade.A.bg  Good (S, A) grade tile (R8) */
  --grade-A-ink: #25643F;                     /* grade.A.ink  Good grade's letter */
  --grade-B-bg: #EEF0F4;                      /* grade.B.bg  Fair grade tile */
  --grade-B-ink: #171A1F;                     /* grade.B.ink  Fair grade's letter */
  --grade-C-bg: #FBE9E6;                      /* grade.C.bg  Poor (C, D, F) grade tile */
  --grade-C-ink: #A82C20;                     /* grade.C.ink  Poor grade's letter */
  --grade-D-bg: #FBE9E6;                      /* grade.D.bg  v2 names a D */
  --grade-D-ink: #A82C20;                     /* grade.D.ink  As grade.C.ink */
  --grade-none-bg: #EEF0F4;                   /* grade.none.bg  No grade yet */
  --grade-none-ink: #555C66;                  /* grade.none.ink  No grade yet */
  --ink-onAccent: #FFFFFF;                    /* ink.onAccent  Words on the accent */
  --ink-primary: #171A1F;                     /* ink.primary  Headings, data, money */
  --ink-secondary: #555C66;                   /* ink.secondary  Secondary prose, labels, help text and every named empty */
  --ink-tertiary: #8A919B;                    /* ink.tertiary  Disabled controls, an empty field's placeholder, decoration */
  --key-flatten: #C13527;                     /* key.flatten  FLATTEN's live face */
  --key-ink: #FFFFFF;                         /* key.ink  The name and chord on a live key */
  --key-protect: #26773F;                     /* key.protect  PROTECT's live face (owner ruling O2, 30 Sept 2026) */
  --key-runner: #1D6DA7;                      /* key.runner  RUNNER's live face */
  --key-trail: #7A47BF;                       /* key.trail  TRAIL's live face */
  --line-chrome: rgba(0,0,0,0.14);            /* line.chrome  A control's ring and the toolbar's edge */
  --line-hairline: #E2E5EA;                   /* line.hairline  Grid lines and the default border */
  --line-row: #E8EBEF;                        /* line.row  The divider between rows inside a group */
  --ok: #26773F;                              /* ok  OK, connected, live, stop held, clean */
  --ok-ink: #25643F;                          /* ok.ink  Words that say OK, on ok.tint or a card */
  --ok-tint: #E7F2EC;                         /* ok.tint  The Live and Stop held chips' ground */
  --plate: #171A1F;                           /* plate  The lock's ground */
  --plate-card: #22262B;                      /* plate.card  The details card on the lock plate */
  --plate-ink: #F1F3F6;                       /* plate.ink  Headline type reversed out of the plate */
  --plate-ink-2: #A8B0BC;                     /* plate.ink.2  Secondary type reversed out of the plate */
  --verdict-kept: #26773F;                    /* verdict.kept  The rules held (O5, R3) */

  /* The faces (ui.json system.fonts): words in the system face with Instrument
     Sans as its declared fallback, figures in Plex. The wordmark is a logotype and
     keeps its face on every platform (design/mark/mark.json lockup.family). */
  --ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable', system-ui, 'Instrument Sans', sans-serif;
  --figures: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;
  --wordmark: 'Instrument Sans', var(--ui);

  /* ui.json system.radius, every corner v2 names. */
  --r-candle: 1px;              /* radius.candle */
  --r-tick: 3px;                /* radius.tick */
  --r-field: 6px;               /* radius.field */
  --r-row: 7px;                 /* radius.row  a button, a field, an exit key, a small plate */
  --r-sidebarRow: 8px;          /* radius.sidebarRow */
  --r-group: 12px;              /* radius.group  a card, a table, the lock plate, the big CTA */
  --r-window: 14px;             /* radius.window */
  --r-popover: 16px;            /* radius.popover */
  --r-notification: 20px;       /* radius.notification */
  --r-gradeLarge: 22px;         /* radius.gradeLarge */
  --r-alert: 24px;              /* radius.alert */
  --r-web-tileSmall: 24px;      /* radius.web.tileSmall */
  --r-web-tile: 28px;           /* radius.web.tile */
  --r-pill: 999px;              /* radius.pill  a pill, a chip */

  /* The sheets' shadows, copied as painted: rgb(23,33,28) is the sheet's
     green-black, not the ink, and the primary's is the accent's own. */
  --shadow-card: 0 1px 2px rgba(23,33,28,.04);
  --shadow-raised: 0 1px 2px rgba(23,33,28,.05);
  --shadow-floating: 0 8px 24px rgba(23,33,28,.12), 0 1px 2px rgba(23,33,28,.06);
  --shadow-panel: 0 8px 24px rgba(23,33,28,.10);   /* Web 10c's card, lifted off the canvas */
  --shadow-primary: 0 1px 2px rgba(20,44,102,.28), inset 0 1px 0 rgba(255,255,255,.22);
  --shadow-nav-cta: 0 1px 2px rgba(23,33,28,.16);
  --shadow-cta: 0 2px 6px rgba(23,33,28,.2);
  --shadow-figure: 0 12px 32px rgba(23,33,28,.22);
  --shadow-plate: 0 8px 24px rgba(23,33,28,.18);
  --shadow-key: 0 2px 4px rgba(23,33,28,.18);
  --shadow-segment: 0 1px 2px rgba(23,33,50,.16), 0 0 0 .5px rgba(23,33,50,.08);   /* App 01/03: the selected segment */

  /* State changes only; hover does not animate (System §05). */
  --t-press: 90ms; --t-state: 180ms; --t-fold: 240ms; --t-plate: 250ms;

  /* ui.json measures (the Mac's Metrics), and the sheet's own sizes. */
  --s1: 5px; --s2: 10px; --s3: 20px; --s4: 40px; --s5: 80px;
  --row: 26px; --mark: 9px; --tap: 44px; --gutter: 16px;
  --h-row: 40px;              /* a table row on the site; 38px inside a picture of the app */
  --measure: 720px;
  --wide: 1200px;             /* the web container (web.container): one column for every page, the front page's (the owner, 7 Oct 2026: "everything must match and be the same as main page"; it was 1024 everywhere but there) */
  --side: clamp(var(--gutter), 4vw, var(--s4));
}

/* The operating register: ui.json system.colour, dark. A picture of the app
 * in its dark appearance, when the page asks for one (the front page's
 * Light / Dark switch). Dark cards carry no shadow (System §06). */
.k-figure[data-theme="dark"] {
  color-scheme: dark;
  --accent: #2F6FED;
  --accent-focusRing: rgba(77,141,255,0.45);
  --accent-pressed: #1F55C4;
  --accent-text: #4D8DFF;
  --accent-tint: #16233B;
  --attention: #C9A64A;
  --metric-great: #A985F2;
  --break: #F2685C;
  --break-cell: #221A1B;
  --break-ink: #F2685C;
  --break-tint: #3A1D1A;
  --control-off: #3A4149;
  --fill-future: #171A1E;
  --fill-hover: rgba(255,255,255,0.06);
  --fill-inspector: #16191D;
  --fill-neutralChip: #2A2E35;
  --fill-page: #121417;
  --fill-raised: #191C20;
  --fill-sidebar: #1C1F24;
  --fill-sidebarSelected: rgba(255,255,255,0.10);
  --fill-stripe: #1E2126;
  --fill-track: #2F343A;
  --fill-weekColumn: #14171A;
  --grade-A-bg: #16301F;
  --grade-A-ink: #38A85A;
  --grade-B-bg: #2A2E35;
  --grade-B-ink: #E6E9ED;
  --grade-C-bg: #3A1D1A;
  --grade-C-ink: #F2685C;
  --grade-D-bg: #3A1D1A;
  --grade-D-ink: #F2685C;
  --grade-none-bg: #2A2E35;
  --grade-none-ink: #9AA2AC;
  --ink-onAccent: #FFFFFF;
  --ink-primary: #E6E9ED;
  --ink-secondary: #9AA2AC;
  --ink-tertiary: #6B727B;
  --key-flatten: #F2685C;
  --key-ink: #121417;
  --key-protect: #38A85A;
  --key-runner: #2C9BE9;
  --key-trail: #A985F2;
  --line-chrome: rgba(255,255,255,0.14);
  --line-hairline: #2A2F35;
  --line-row: #24282E;
  --ok: #38A85A;
  --ok-ink: #38A85A;
  --ok-tint: #16301F;
  --plate: #F2F5F9;
  --plate-card: #ECEEF2;
  --plate-ink: #121417;
  --plate-ink-2: #555C66;
  --verdict-kept: #38A85A;
  --shadow-card: none; --shadow-raised: none; --shadow-primary: none;
  --shadow-segment: 0 1px 2px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  --h-row: 38px;
}

/* A region that follows the system: light unless the viewer's system is dark,
 * and either way when `data-theme` pins it, on the region or above it. */
.k-system { color-scheme: light; background: var(--fill-page); color: var(--ink-primary); }
@media (prefers-color-scheme: dark) {
  .k-system:not([data-theme="light"]):not([data-theme="light"] *) {
    color-scheme: dark;
    --accent: #2F6FED;
    --accent-focusRing: rgba(77,141,255,0.45);
    --accent-pressed: #1F55C4;
    --accent-text: #4D8DFF;
    --accent-tint: #16233B;
    --attention: #C9A64A;
    --metric-great: #A985F2;
    --break: #F2685C;
    --break-cell: #221A1B;
    --break-ink: #F2685C;
    --break-tint: #3A1D1A;
    --control-off: #3A4149;
    --fill-future: #171A1E;
    --fill-hover: rgba(255,255,255,0.06);
    --fill-inspector: #16191D;
    --fill-neutralChip: #2A2E35;
    --fill-page: #121417;
    --fill-raised: #191C20;
    --fill-sidebar: #1C1F24;
    --fill-sidebarSelected: rgba(255,255,255,0.10);
    --fill-stripe: #1E2126;
    --fill-track: #2F343A;
    --fill-weekColumn: #14171A;
    --grade-A-bg: #16301F;
    --grade-A-ink: #38A85A;
    --grade-B-bg: #2A2E35;
    --grade-B-ink: #E6E9ED;
    --grade-C-bg: #3A1D1A;
    --grade-C-ink: #F2685C;
    --grade-D-bg: #3A1D1A;
    --grade-D-ink: #F2685C;
    --grade-none-bg: #2A2E35;
    --grade-none-ink: #9AA2AC;
    --ink-onAccent: #FFFFFF;
    --ink-primary: #E6E9ED;
    --ink-secondary: #9AA2AC;
    --ink-tertiary: #6B727B;
    --key-flatten: #F2685C;
    --key-ink: #121417;
    --key-protect: #38A85A;
    --key-runner: #2C9BE9;
    --key-trail: #A985F2;
    --line-chrome: rgba(255,255,255,0.14);
    --line-hairline: #2A2F35;
    --line-row: #24282E;
    --ok: #38A85A;
    --ok-ink: #38A85A;
    --ok-tint: #16301F;
    --plate: #F2F5F9;
    --plate-card: #ECEEF2;
    --plate-ink: #121417;
    --plate-ink-2: #555C66;
    --verdict-kept: #38A85A;
    --shadow-card: none; --shadow-raised: none; --shadow-primary: none;
  --shadow-segment: 0 1px 2px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  }
}
.k-system[data-theme="dark"], [data-theme="dark"] .k-system {
  color-scheme: dark;
  --accent: #2F6FED;
  --accent-focusRing: rgba(77,141,255,0.45);
  --accent-pressed: #1F55C4;
  --accent-text: #4D8DFF;
  --accent-tint: #16233B;
  --attention: #C9A64A;
  --metric-great: #A985F2;
  --break: #F2685C;
  --break-cell: #221A1B;
  --break-ink: #F2685C;
  --break-tint: #3A1D1A;
  --control-off: #3A4149;
  --fill-future: #171A1E;
  --fill-hover: rgba(255,255,255,0.06);
  --fill-inspector: #16191D;
  --fill-neutralChip: #2A2E35;
  --fill-page: #121417;
  --fill-raised: #191C20;
  --fill-sidebar: #1C1F24;
  --fill-sidebarSelected: rgba(255,255,255,0.10);
  --fill-stripe: #1E2126;
  --fill-track: #2F343A;
  --fill-weekColumn: #14171A;
  --grade-A-bg: #16301F;
  --grade-A-ink: #38A85A;
  --grade-B-bg: #2A2E35;
  --grade-B-ink: #E6E9ED;
  --grade-C-bg: #3A1D1A;
  --grade-C-ink: #F2685C;
  --grade-D-bg: #3A1D1A;
  --grade-D-ink: #F2685C;
  --grade-none-bg: #2A2E35;
  --grade-none-ink: #9AA2AC;
  --ink-onAccent: #FFFFFF;
  --ink-primary: #E6E9ED;
  --ink-secondary: #9AA2AC;
  --ink-tertiary: #6B727B;
  --key-flatten: #F2685C;
  --key-ink: #121417;
  --key-protect: #38A85A;
  --key-runner: #2C9BE9;
  --key-trail: #A985F2;
  --line-chrome: rgba(255,255,255,0.14);
  --line-hairline: #2A2F35;
  --line-row: #24282E;
  --ok: #38A85A;
  --ok-ink: #38A85A;
  --ok-tint: #16301F;
  --plate: #F2F5F9;
  --plate-card: #ECEEF2;
  --plate-ink: #121417;
  --plate-ink-2: #555C66;
  --verdict-kept: #38A85A;
  --shadow-card: none; --shadow-raised: none; --shadow-primary: none;
  --shadow-segment: 0 1px 2px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
}

/* ---- Reading: the page, its links, its prose ---------------------------- */
/* Moved here from pages.css so no two pages disagree about a paragraph. The
 * Web sheet's reading rule: 18 / 1.65 in a 720 measure. */

* { box-sizing: border-box; }
body { margin: 0; background: var(--fill-page); color: var(--ink-primary);
  font: 400 16px/1.55 var(--ui); -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums lining-nums; }
b, strong { font-weight: 600; }
/* Emphasis is the face's own italic: SF Pro's on a Mac, Instrument Sans'
 * (served above; the lead's decision 20, 29 Sept 2026) where the system stack
 * falls back to it (v2 plan F.3; DESIGN-TBD: the WEB lane may pin <em> to
 * Instrument Sans Italic everywhere). The browser may not slant a face that
 * has no italic of its own: Plex is served upright only, so a figure in an <em> stays upright
 * rather than taking an invented oblique. <i> is not emphasis here (the web
 * journal sets secondary words in it), so it stays upright. */
body { font-synthesis-style: none; }
em { font-style: italic; }
i { font-style: normal; }
a { color: var(--ink-primary); text-decoration: underline; text-decoration-color: var(--line-chrome);
  text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink-primary); }
:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }

/* Every page starts on the bar's left edge. A reading page keeps its measure
 * inside that column, where it used to be a 720 column centred under a wider
 * bar. */
.page { max-width: calc(var(--wide) + 2 * var(--s4)); margin: 0 auto;
  padding: 0 var(--side) var(--s5); }
.page:not(.page-wide) > * { max-width: var(--measure); }
/* Prose keeps its measure on a wide page; a grid or a matrix does not. */
.measure { max-width: var(--measure); }

.head { padding: 56px 0 var(--s4); margin: 0 0 var(--s4); border-bottom: 1px solid var(--line-hairline); }
.head > .k-label { margin: 0; color: var(--ink-secondary); }
.head > h1 { margin: var(--s2) 0 0; max-width: var(--measure); text-wrap: balance; }
.head-meta { margin: 14px 0 0; max-width: var(--measure); }

.prose { font-size: 18px; line-height: 1.65; max-width: var(--measure); }
.prose p { margin: 0 0 18px; }
.prose h2 { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em;
  margin: var(--s4) 0 14px; }
.prose h3 { font-size: 18px; font-weight: 600; line-height: 1.3; margin: 28px 0 10px; }
.prose hr { border: 0; border-top: 1px solid var(--line-hairline); margin: 32px 0; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 18px; display: grid; gap: 6px; }
/* `code` is one of the elements a browser hands its own family to, so the
 * face is stated (tools/the-browser-draws-no-defaults-gate.mjs). */
.prose code { font-family: var(--figures); font-size: 15px; background: var(--fill-weekColumn);
  border: 1px solid var(--line-hairline); border-radius: var(--r-row); padding: 0 5px;
  overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.small { font-size: 14px; line-height: 1.5; color: var(--ink-secondary); margin: 15px 0 0; }
.footnote { font-size: 14px; line-height: 1.5; color: var(--ink-secondary); margin: var(--s3) 0 0; }
.say { font-size: 18px; line-height: 1.65; color: var(--ink-primary); margin: 0 0 18px; max-width: var(--measure); }

/* ---- Type: the System's nine styles and the Web sheet's own sizes ------- */
/* Sentence case always; 13px is the floor, and v2's 11 and 12 only for a
 * caption or a footnote class (tools/the-site-paints-the-tokens-gate.mjs).
 * Figures are Plex, tabular, and never a sentence. */

.k-display { font: 700 42px/1.1 var(--ui); letter-spacing: -0.03em; color: var(--ink-primary); margin: 0; }
.k-title { font: 700 26px/1.2 var(--ui); letter-spacing: -0.02em; color: var(--ink-primary); margin: 0; }
.k-heading { font: 600 20px/1.3 var(--ui); letter-spacing: -0.015em; color: var(--ink-primary); margin: 0; }
.k-lede { font: 400 19px/1.55 var(--ui); color: var(--ink-secondary); margin: 0; }
.k-body { font: 400 16px/1.55 var(--ui); color: var(--ink-primary); }
.k-ui { font: 500 15px/1.3 var(--ui); color: var(--ink-primary); }
.k-label { font: 500 13px/1.3 var(--ui); color: var(--ink-secondary); }
.k-secondary { font: 400 15px/1.5 var(--ui); color: var(--ink-secondary); }
.k-num { font-family: var(--figures); font-size: 15px; font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums; }
.k-num-row { font: 400 14px/1.3 var(--figures); font-variant-numeric: tabular-nums lining-nums; }
/* A figure set in running type, and its emphasis. */
.k-data { font: 400 14px/1.45 var(--figures); color: var(--ink-primary);
  font-variant-numeric: tabular-nums lining-nums; }
.k-data-em { font: 500 14px/1.45 var(--figures); color: var(--ink-primary);
  font-variant-numeric: tabular-nums lining-nums; }

.k-hero { font: 700 clamp(40px, 6vw, 72px)/1.04 var(--ui); letter-spacing: -0.035em; color: var(--ink-primary);
  margin: 0; text-wrap: balance; }
.k-section-title { font: 700 clamp(32px, 4.5vw, 52px)/1.06 var(--ui); letter-spacing: -0.03em; color: var(--ink-primary);
  margin: 0; text-wrap: balance; }
/* v2's smaller panel heading (privacy, questions), its eyebrow, the hero's
 * kicker under the app icon and the line under the headline. */
.k-panel-title { font: 700 clamp(28px, 3.6vw, 40px)/1.1 var(--ui); letter-spacing: -0.025em; color: var(--ink-primary);
  margin: 0; text-wrap: balance; }
.k-eyebrow { font: 600 17px/1.3 var(--ui); color: var(--ink-secondary); margin: 0; }
.k-hero-kicker { font: 600 21px/1.3 var(--ui); color: var(--ink-primary); margin: 0; }
.k-hero-sub { font: 400 clamp(17px, 2vw, 21px)/1.45 var(--ui); color: var(--ink-secondary); margin: 0; max-width: 620px;
  text-wrap: balance; }
.k-guide-title { font: 700 clamp(32px, 4.5vw, 52px)/1.06 var(--ui); letter-spacing: -0.03em; color: var(--ink-primary);
  margin: 0; text-wrap: balance; }
.k-standfirst { font: 400 21px/1.5 var(--ui); color: var(--ink-secondary); margin: 0; }
.k-card-head { font: 700 19px/1.25 var(--ui); letter-spacing: -0.015em; color: var(--ink-primary); margin: 0; }
.k-kicker { font: 500 14px/1.3 var(--ui); color: var(--ink-secondary); margin: 0; }
/* The key that does the same thing, on the button's face: `Write the card  W`. */
/* In the label's own ink, never dimmed: at opacity .7 it measured 3.0:1 on the
 * primary button, whose label is only 4.55:1 at full strength (2 Oct 2026).
 * The figures face is what sets it apart from the words. */
.k-kbd { font: 500 13px/1 var(--figures); color: inherit; }

/* ---- The lockup: the tile, then "Degen Pro", never in capitals ---------- */

.k-lockup { display: inline-flex; align-items: center; gap: 11px; color: var(--ink-primary);
  text-decoration: none; }
.k-lockup > svg { width: 28px; height: 28px; display: block; flex-shrink: 0; }
/* The words are an <svg>, 1em tall, drawn from the face at 600 and -0.015em
 * (tools/wordmark-svg.mjs, which holds both): the font-size sizes them, and
 * there is no text in them to set in a web font. */
.k-wordmark { font: 600 18px/1 var(--wordmark); color: var(--ink-primary); }
.k-wordmark > svg { display: block; }
/* The mark at the System sheet's sizes, each at its own pixels (/kit). */
.k-mark-ladder { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s4);
  margin: 0; padding: 0; list-style: none; }
.k-mark-ladder > li { display: grid; justify-items: start; gap: 8px; }
.k-mark-size { display: block; color: var(--plate); line-height: 0; }
.k-mark-size svg { display: block; width: 100%; height: 100%; }
.k-mark-size-56 { width: 56px; height: 56px; }
.k-mark-size-30 { width: 30px; height: 30px; }
.k-mark-size-18 { width: 18px; height: 18px; }
.k-mark-size-10 { width: 10px; height: 10px; }

/* ---- Buttons (System §06) ----------------------------------------------- */
/* 38px, 15/500, a control's radius. The primary is ink with fill.raised words,
 * one per section (owner ruling O13, 30 Sept 2026: the website's primary is
 * black, because on this site colour now means a verdict — kept green, broke
 * red — so the chrome around it carries none; black on white is also the
 * strongest pair there is). Inside a picture of the app it is still the app's
 * one blue, because the Mac app keeps it. The secondary is raised on a strong
 * line; the tertiary is sunk. Pressed is fill.neutralChip, disabled is
 * fill.stripe with ink.tertiary — the one place ink.tertiary goes. The focus ring is
 * ink, 2px, set off by 2px, so it never depends on seeing blue. */

.k-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 38px; padding: 0 16px; margin: 0; font: 500 15px/1 var(--ui);
  color: var(--ink-primary); white-space: nowrap; background: var(--fill-raised);
  border: 1px solid var(--line-chrome); border-radius: var(--r-pill);
  box-shadow: var(--shadow-raised); text-decoration: none; cursor: pointer;
  transition: background-color var(--t-press), box-shadow var(--t-press); }
.k-btn:hover { text-decoration: none; }
.k-btn-primary { background: var(--ink-primary); color: var(--fill-raised); border-color: var(--ink-primary);
  box-shadow: var(--shadow-nav-cta); }
.k-figure .k-btn-primary { background: var(--accent); color: var(--ink-onAccent); border-color: var(--accent);
  box-shadow: var(--shadow-primary); }
.k-btn-secondary { background: var(--fill-raised); color: var(--ink-primary); border-color: var(--line-chrome); }
.k-btn-tertiary { min-height: 36px; padding: 0 14px; background: var(--fill-weekColumn);
  border-color: var(--line-hairline); box-shadow: none; }
.k-btn-on-plate { background: var(--plate-ink); color: var(--plate); border-color: var(--plate-ink);
  box-shadow: none; }
.k-btn:active, .k-btn[aria-pressed="true"] { background: var(--fill-neutralChip);
  color: var(--ink-primary); border-color: var(--fill-neutralChip); box-shadow: none; }
.k-btn:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }
.k-btn:disabled, .k-btn[aria-disabled="true"] { background: var(--fill-stripe);
  border-color: var(--line-hairline); color: var(--ink-tertiary); box-shadow: none; cursor: default; }
/* Sizes: the hero's call to action, and the one in the nav. */
.k-btn-cta { min-height: 44px; padding: 0 22px; font-size: 17px; font-weight: 600; border-radius: var(--r-pill);
  box-shadow: var(--shadow-cta); }
.k-btn-nav { min-height: 36px; padding: 0 16px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow-nav-cta); }
/* A button inside a picture of the app is the Mac's own size: 30 tall, 13/500. */
.k-figure .k-btn { min-height: 30px; padding: 0 14px; font-size: 13px; }
.k-btn:hover:not(:disabled):not([aria-disabled="true"]):not(.k-btn-on-plate) { background-image: linear-gradient(var(--fill-hover), var(--fill-hover)); }
.k-btn-primary:hover:not(:disabled):not([aria-disabled="true"]) { background-image: linear-gradient(color-mix(in srgb, var(--fill-raised) 12%, transparent), color-mix(in srgb, var(--fill-raised) 12%, transparent)); }

/* ---- Exit keys (System §06; colours: owner ruling O2, 30 Sept 2026) ------- */
/* Their names are the one thing set in capitals, because the code pins them.
 * Each key wears its own face, as the Mac draws it (Brand/ExitKey.swift, ExitKeyPaint):
 * PROTECT green, RUNNER blue, TRAIL purple, FLATTEN red, the name in key.ink.
 * A plain .k-key with no hue is the neutral face (a key offering nothing).
 * A dead key is muted, not hidden: its name stays in ink.secondary, readable. Flatten
 * is never dead while a position is held — that is the app's rule, drawn
 * here, not decided here. */
.k-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.k-key { min-height: 46px; display: flex; align-items: center; justify-content: center;
  font: 600 15px/1 var(--ui); letter-spacing: .02em; border-radius: var(--r-row);
  background: var(--ink-primary); color: var(--key-ink); border: 1px solid var(--ink-primary);
  box-shadow: var(--shadow-key); }
.k-key-protect { background: var(--key-protect); border-color: var(--key-protect); }
.k-key-runner { background: var(--key-runner); border-color: var(--key-runner); }
.k-key-trail { background: var(--key-trail); border-color: var(--key-trail); }
.k-key-flatten { background: var(--key-flatten); border-color: var(--key-flatten); }
/* Held down: the face under a 22% veil, as the Mac's press draws it
 * (KeyHue.pressVeil); no shadow. The ink over the four hues (darker on light,
 * lighter on dark); the surface over the neutral face, which is the ink. */
.k-key:active, .k-key.is-pressed { box-shadow: none; border-color: transparent; background-image: linear-gradient(color-mix(in srgb, var(--fill-raised) 22%, transparent), color-mix(in srgb, var(--fill-raised) 22%, transparent)); }
:is(.k-key-protect, .k-key-runner, .k-key-trail, .k-key-flatten):is(:active, .is-pressed) { background-image: linear-gradient(color-mix(in srgb, var(--ink-primary) 22%, transparent), color-mix(in srgb, var(--ink-primary) 22%, transparent)); }
.k-key-dead, .k-key-dead:active { background: var(--fill-stripe); background-image: none;
  color: var(--ink-secondary); border-color: var(--line-chrome); box-shadow: none; }

/* ---- Pills and chips ------------------------------------------------------ */
/* A pill says what something is ("macOS · for Interactive Brokers"); a chip
 * is a filter and can be on. A chip carries words and may lead with a mark;
 * it never takes a verdict's hue as its ground. */
.k-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px;
  font: 500 14px/1 var(--ui); color: var(--ink-primary); white-space: nowrap;
  background: var(--fill-raised); border: 1px solid var(--line-hairline); border-radius: var(--r-pill);
  text-decoration: none; }
.k-pill-sunk { min-height: 28px; padding: 0 11px; background: var(--fill-page); border-color: var(--fill-page);
  color: var(--ink-secondary); }

.k-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.k-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 13px;
  font: 400 14px/1 var(--ui); color: var(--ink-primary); background: var(--fill-raised);
  border: 1px solid var(--line-hairline); border-radius: var(--r-pill); white-space: nowrap; cursor: pointer;
  transition: background-color var(--t-state); }
.k-chip:hover { background: var(--fill-stripe); }
.k-chip[aria-pressed="true"], .k-chip.is-on { background: var(--ink-primary); border-color: var(--ink-primary);
  color: var(--fill-raised); font-weight: 500; }
.k-chip:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }
/* A mark's words inside a chip take the chip's ink, on or off; on a pressed
 * chip the mark itself does too, on the ink fill as System §06 draws it (the
 * words beside it still say which verdict). The fill is ink, never the accent
 * (the lead's correction 19, 29 Sept 2026): System §06 paints a pressed chip
 * #171A1F with #FFFFFF words in light and #E6E9ED with #121417 in dark, which
 * are ink.primary and fill.raised in each register (v2's ink.onAccent is white
 * in both, so it cannot be the words on a light-ink fill; plan F.3). The
 * accent is a primary in a picture of the app and the selected day
 * (tools/the-site-has-one-blue-gate.mjs); the site's focus ring is ink. */
.k-chip .k-marked { color: inherit; font: inherit; }
.k-chip[aria-pressed="true"] .k-mark, .k-chip.is-on .k-mark { color: var(--fill-raised); }
/* A chip at rest is raised on line in light (#FFFFFF on #E2E5EA) and on
 * line.chrome in dark (white at 14%): System §06 draws the two edges
 * differently, so the dark one is said per register. The same for the front
 * page's legend chips and the web journal's legend (review of 5c21bc7f). */
.k-figure[data-theme="dark"] :is(.k-chip, .legend > span):not([aria-pressed="true"]):not(.is-on),
.k-system[data-theme="dark"] :is(.k-chip, .legend > span):not([aria-pressed="true"]):not(.is-on),
[data-theme="dark"] .k-system :is(.k-chip, .legend > span):not([aria-pressed="true"]):not(.is-on) {
  border-color: var(--line-chrome); }
@media (prefers-color-scheme: dark) {
  .k-system:not([data-theme="light"]):not([data-theme="light"] *) :is(.k-chip, .legend > span):not([aria-pressed="true"]):not(.is-on) {
    border-color: var(--line-chrome); }
}

/* ---- Fields: inset, never raised ---------------------------------------- */

.k-field { display: grid; gap: 6px; margin: 0; }
.k-field-label { font: 500 13px/1.3 var(--ui); color: var(--ink-secondary); }
.k-input { width: 100%; min-width: 0; height: 38px; padding: 0 12px; font: 400 15px/1 var(--ui);
  color: var(--ink-primary); background: var(--fill-weekColumn); border: 1px solid var(--line-hairline);
  border-radius: var(--r-row); font-variant-numeric: tabular-nums lining-nums; }
.k-input::placeholder { color: var(--ink-secondary); }
.k-input:focus, .k-input.is-focus { outline: none; background: var(--fill-raised);
  border: 2px solid var(--ink-primary); padding: 0 11px; }
/* A warning is an outline, never a fill. */
.k-input.is-attention { border: 2px solid var(--attention); padding: 0 11px; }
/* A figure field is Plex, right-aligned. */
.k-input-num { font-family: var(--figures); text-align: right; }
.k-field-note { font: 400 14px/1.5 var(--ui); color: var(--ink-secondary); margin: 0; }

/* A `select` is drawn by the platform until it is told not to be:
 * `-webkit-appearance: menulist` outranks any radius or fill declared on it,
 * which is how /budget's picker once shipped the system's own grey fill. So
 * the appearance goes off here, once, for every select on every page, and the
 * control's own radius is the kit's. With the appearance goes the platform's
 * chevron; the kit draws one back on the wrapper, because a pseudo-element on
 * a `select` is not reliably drawn. tools/the-browser-draws-no-defaults-gate.mjs
 * refuses a select that is not inside `.k-picker`. */
select { appearance: none; -webkit-appearance: none; }
.k-picker { position: relative; display: block; }
.k-picker > select { padding-right: 30px; border-radius: var(--r-row); }
.k-picker::after { content: ""; position: absolute; right: 13px; top: 50%;
  width: 6px; height: 6px; margin-top: -5px; transform: rotate(45deg);
  border-right: 1.5px solid var(--ink-secondary); border-bottom: 1.5px solid var(--ink-secondary);
  pointer-events: none; }

/* ---- Cards ---------------------------------------------------------------- */

.k-card { background: var(--fill-raised); border: 1px solid var(--line-hairline); border-radius: var(--r-group);
  box-shadow: var(--shadow-card); padding: 20px 22px; margin: 0; }
/* A picture at the head of a card, the sheet's 150px, flush with the card's
 * edges (Web 09's guide cards). Only a picture the thing really has. */
.k-card-img { display: block; width: calc(100% + 44px); max-width: none; height: 150px;
  margin: -20px -22px 6px; object-fit: cover; border-radius: var(--r-group) var(--r-group) 0 0; }
.k-card-sunk { background: var(--fill-weekColumn); border: 1px solid var(--line-hairline);
  border-radius: var(--r-group); padding: 20px 22px; margin: 0; }
/* The plate: the lock's ground, and the band that answers the two objections.
 * The only surface whose ink inverts. */
.k-card-plate { background: var(--plate); color: var(--plate-ink); border-radius: var(--r-group);
  padding: 24px 28px; margin: 0; }
.k-card-plate .k-secondary, .k-card-plate .k-kicker { color: var(--plate-ink-2); }
.k-card-plate .k-card-head { color: var(--plate-ink); }
/* The lockup reversed out of the plate: the tile inverts, the shapes show the plate. */
.k-card-plate .k-lockup, .k-card-plate .k-wordmark { color: var(--plate-ink); }

/* A list of rows inside a card: a word on the left, its value on the right. */
/* Key and value rows, as Web 12's account cards set them: the key in ink.secondary,
 * the value in ink, no rule between rows, 10 apart. A figure in the value
 * wears .k-num. */
.k-kv { display: grid; gap: 10px; margin: 0 0 12px; }
.k-kv > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 4px 16px; }
.k-kv dt { margin: 0; font: 400 15px/1.4 var(--ui); color: var(--ink-secondary); }
.k-kv dd { margin: 0; font: 400 15px/1.4 var(--ui); color: var(--ink-primary); text-align: right;
  overflow-wrap: anywhere; }
.k-rows { list-style: none; margin: 0; padding: 0; }
.k-rows > li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--line-row); font-size: 16px; color: var(--ink-primary); }
.k-rows > li:first-child { border-top: 0; }
.k-rows-value { color: var(--ink-secondary); white-space: nowrap; }

/* ---- Tables: 40px rows, nothing wraps ------------------------------------ */
/* A surface on a hairline with a surface's radius. Columns size to their
 * longest string; a table wider than the phone scrolls inside its own box.
 * Hover is fill.stripe; the picked row carries a 3px ink bar at its start. */

.k-table-wrap { overflow-x: auto; margin: 0; background: var(--fill-raised);
  border: 1px solid var(--line-hairline); border-radius: var(--r-group); }
.k-table { border-collapse: collapse; width: 100%; font: 400 15px/1.3 var(--ui);
  color: var(--ink-primary); font-variant-numeric: tabular-nums lining-nums; }
.k-table th, .k-table td { height: var(--h-row); padding: 0 14px; text-align: left;
  vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 1px solid var(--line-row); }
.k-table tbody tr:last-child td { border-bottom: 0; }
.k-table th { font: 500 13px/1.3 var(--ui); color: var(--ink-secondary); background: var(--fill-weekColumn);
  border-bottom-color: var(--line-hairline); }
.k-table tbody tr:hover { background: var(--fill-stripe); }
/* The picked row's 3px ink bar, painted as a background so no shadow is cast. */
.k-table tbody tr.is-selected > :first-child { background-image: linear-gradient(var(--ink-primary), var(--ink-primary));
  background-size: 3px 100%; background-repeat: no-repeat; }
.k-table th.k-num { text-align: right; }
.k-table td.k-num { text-align: right; font-family: var(--figures); font-size: 14px; }

/* ---- Named empties ------------------------------------------------------- */
/* `open`, `not judged`, `no clip`, `not recorded`, `0 trades`, `filtered out`:
 * a blank never stands for any of them. In words, ink.secondary, never ink.tertiary. */

.k-empty { font: 400 15px/1.5 var(--ui); color: var(--ink-secondary); }
.k-table .k-empty { font-size: inherit; }

/* ---- Verdict marks -------------------------------------------------------- */
/* Round, 9px. Hue says whether the rules held; fill says whether it paid:
 * solid won, a 2px ring lost, a thin ring not known yet (open, not judged,
 * no R). Rings are drawn inside the box, so every state has one footprint.
 * site/marks.js picks the two classes from ui.json's `marks`. */

.k-mark { display: inline-block; flex-shrink: 0; box-sizing: border-box;
  width: var(--mark); height: var(--mark); vertical-align: middle; border-radius: 50%;
  border: 0 solid currentColor; background: transparent; }
.k-mark-kept { color: var(--verdict-kept); }
.k-mark-broke { color: var(--break); }
.k-mark-attention { color: var(--attention); }
.k-mark-inactive { color: var(--ink-tertiary); }
.k-mark-solid { background: currentColor; }
.k-mark-ring1 { border-width: 1.5px; }
.k-mark-ring2 { border-width: 2px; }
/* A mark with its words beside it. */
.k-marked { display: inline-flex; align-items: center; gap: 8px;
  font: 400 15px/1.5 var(--ui); color: var(--ink-secondary); white-space: nowrap; }

/* ---- Stacks, regions and bands --------------------------------------------- */
/* A stack spaces its children 16px apart and nothing else. */
.k-stack { display: grid; gap: 16px; align-content: start; }
.k-stack > * { margin: 0; }

/* A band runs the width of the page, 56px of air above and below; its inner
 * column holds the site's width. A region is a surface between hairlines; a
 * strip is equal cards in a row. */

.k-region { background: var(--fill-raised); border-top: 1px solid var(--line-hairline);
  border-bottom: 1px solid var(--line-hairline); padding: var(--s3); }
.k-region-sunk { background: var(--fill-weekColumn); }
.k-band { padding: 56px 0; border-top: 1px solid var(--line-hairline); }
.k-band-inner { max-width: calc(var(--wide) + 2 * var(--s4)); margin: 0 auto; padding: 0 var(--side); }
.k-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
/* At no specificity, so a card, a register or a page's own class on a child wins. */
:where(.k-strip) > * { background: var(--fill-weekColumn); border: 1px solid var(--line-hairline);
  border-radius: var(--r-group); padding: 20px 22px; margin: 0; }

/* ---- The lock plate -------------------------------------------------------- */
/* The plate's ground with its own ink: facts only, and no money in the
 * headline. Inside a picture of the app it is the small plate, radius 7. */

.k-plate { background: var(--plate); color: var(--plate-ink); border-radius: var(--r-group);
  padding: 22px; margin: 0; }
.k-plate-label { font: 500 14px/1.3 var(--ui); color: var(--plate-ink-2); margin: 0; }
.k-plate-line { font: 600 22px/1.22 var(--ui); letter-spacing: -0.015em; color: var(--plate-ink);
  margin: 8px 0 0; }
.k-plate-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--s3);
  margin: 12px 0 0; font: 400 15px/1.5 var(--ui); }
/* The plate's one line of figures: "Loss budget spent · opens tomorrow 06:30". */
.k-plate-meta { font: 400 14px/1.45 var(--figures); color: var(--plate-ink-2); margin: 10px 0 0; }
.k-plate-facts dt { color: var(--plate-ink-2); }
.k-plate-facts dd { margin: 0; color: var(--plate-ink); }
.k-figure .k-plate { border-radius: var(--r-row); padding: 14px 16px; }
.k-figure .k-plate-line { font-size: 17px; line-height: 1.3; }

/* ---- A picture of the app ------------------------------------------------ */
/* In the app's light appearance unless it says otherwise, drawn from the same
 * tokens and marks, and captioned as an illustration of the app — never
 * called a screenshot. <figure class="k-illustration"> holds the `.k-figure`
 * and, outside it on the page's own ground, the `.k-figure-caption`. The
 * window's own ground is the app's canvas, edged by a line so it stands off a
 * page of the same canvas. */

.k-illustration { margin: 0; }
.k-figure { background: var(--fill-page); color: var(--ink-primary); border: 1px solid var(--line-hairline);
  border-radius: var(--r-group); box-shadow: var(--shadow-figure); padding: 18px;
  overflow-x: auto; }
.k-figure .k-table-wrap { border-radius: var(--r-row); border-color: var(--fill-raised); }
.k-figure-caption { font: 400 15px/1.5 var(--ui); color: var(--ink-secondary); margin: 0; padding: 12px 0 0; }

/* ---- Section label and contents ------------------------------------------ */
/* What a section is, in the label style, its number in Plex. */

.k-section-label { display: flex; align-items: baseline; gap: var(--s2); margin: 0 0 var(--s3);
  font: 500 13px/1.3 var(--ui); color: var(--ink-secondary); }
.k-section-num { font-family: var(--figures); color: var(--ink-secondary); }

/* "On this page": a sunk card holding a guide's real headings, numbered by
 * the list, never by typed numbers. */
.k-contents { margin: 0; background: var(--fill-weekColumn); border: 1px solid var(--line-hairline);
  border-radius: var(--r-group); padding: 18px 20px; }
.k-contents ol { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: k-contents;
  display: grid; gap: 4px; }
.k-contents li { counter-increment: k-contents; display: grid; grid-template-columns: 30px 1fr;
  font: 400 15px/1.5 var(--ui); }
.k-contents li::before { content: counter(k-contents, decimal-leading-zero);
  font-family: var(--figures); font-size: 14px; color: var(--ink-secondary); }
.k-contents a { color: var(--ink-primary); text-decoration: none; }
.k-contents a:hover { text-decoration: underline; }

/* ---- The shell: nav, menu, footer ---------------------------------------- */
/* The nav sits on the canvas on most pages and on the surface on a guide
 * (`data-ground`). Its links at 16/400, gap 22, and the one primary. On a
 * phone the links fold into a menu that is a <details>, so it opens with no
 * script at all and every link stays reachable. */

.k-nav { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--line-chrome);
  background: color-mix(in srgb, var(--fill-page) 80%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); }
.k-nav[data-ground="surface"] { background: color-mix(in srgb, var(--fill-raised) 80%, transparent); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .k-nav { background: var(--fill-page); }
  .k-nav[data-ground="surface"] { background: var(--fill-raised); }
}
@media (prefers-reduced-transparency: reduce) {
  .k-nav { background: var(--fill-page); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .k-nav[data-ground="surface"] { background: var(--fill-raised); }
}
.k-nav-in { max-width: calc(var(--wide) + 2 * var(--s4)); margin: 0 auto; padding: 0 var(--side);
  min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; }
.k-nav-home { display: flex; align-items: center; gap: 12px; min-width: 0; }
.k-nav-end { display: flex; align-items: center; gap: 12px 24px; }
.k-nav-links { display: flex; align-items: center; gap: 8px 24px; }
.k-nav-links a { font: 400 15px/1.3 var(--ui); color: var(--ink-primary); text-decoration: none;
  white-space: nowrap; }
.k-nav-links a:hover { text-decoration: underline; text-decoration-color: var(--line-chrome); }
.k-nav-links a[aria-current="page"] { font-weight: 600; }
/* The bar at a size that suits a 1280 page under a 72-point headline (the
 * owner, 7 Oct 2026: "Check if header is proper size too"): 64 tall, the mark
 * 24 with the name at 17, links at 15. It was 48, 20, 15 and 13. */
.k-nav .k-lockup > svg { width: 24px; height: 24px; }
.k-nav .k-lockup { gap: 10px; }
.k-nav .k-wordmark { font-size: 17px; }
.k-menu { display: none; position: relative; }
.k-menu-btn { list-style: none; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; width: 40px; height: 40px; cursor: pointer;
  background: var(--fill-raised); border: 1px solid var(--line-hairline); border-radius: var(--r-pill); }
.k-menu-btn::-webkit-details-marker { display: none; }
.k-menu-bar { display: block; width: 16px; height: 2px; border-radius: var(--r-pill); background: var(--ink-primary); }
.k-menu-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 220px;
  display: grid; padding: 6px; margin: 0; list-style: none; background: var(--fill-raised);
  border: 1px solid var(--line-hairline); border-radius: var(--r-group); box-shadow: var(--shadow-floating); }
/* The folded links only: Start stays in the bar beside the menu (v2 web spec
 * E1), so the menu holds no button for a bare `.k-menu-list a` to repaint. */
.k-menu-list a { display: flex; align-items: center; min-height: var(--tap); padding: 0 12px;
  font: 400 16px/1.3 var(--ui); color: var(--ink-primary); text-decoration: none;
  border-radius: var(--r-row); }
.k-menu-list a:hover { background: var(--fill-stripe); }
.k-menu-list a[aria-current="page"] { font-weight: 600; }

/* The sheets draw no footer; this one is composed from the tokens. It is a
 * card on the canvas, the way every other block of the site is a tile: the
 * lockup and the one line on the left, the link columns beside it, each under
 * a heading in ink. It was four lists of grey links on the page's own ground
 * (the owner, 8 Oct 2026: "Footer still looks like plain text"). */
.k-foot { border-top: 1px solid var(--line-hairline); background: var(--fill-page); margin-top: var(--s4); }
.k-foot-in { max-width: calc(var(--wide) + 2 * var(--s4)); margin: 0 auto;
  padding: var(--s4) var(--side) 40px; }
.k-foot-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 32px 48px;
  padding: 40px; border-radius: var(--r-web-tile); background: var(--fill-raised);
  border: 1px solid var(--line-hairline); box-shadow: var(--shadow-card); }
.k-foot-brand { display: grid; align-content: start; justify-items: start; gap: 14px; }
.k-foot-brand .k-secondary { margin: 0; }
.k-foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; }
.k-foot-col .k-label { margin: 0; color: var(--ink-primary); font-weight: 600; }
.k-foot-col ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.k-foot-col a { font: 400 15px/1.5 var(--ui); color: var(--ink-secondary); text-decoration: none; }
.k-foot-col a:hover { color: var(--ink-primary); text-decoration: underline; }
/* The risk line, under the card: set at 13 for contrast, in ink.secondary. */
.k-risk-foot { margin: 20px 0 0; padding: 0 max(0px, calc(100% - 760px)) 0 8px;
  font: 400 13px/1.5 var(--ui); color: var(--ink-secondary); }

/* ---- v2's web components --------------------------------------------------- */
/* Tiles: the Web sheet's rounded blocks (28 for a feature, 24 for a small
 * one), white on the page's band or the page's ground on white. */
.k-tile { background: var(--fill-raised); border-radius: var(--r-web-tile); padding: 32px 30px 30px;
  display: grid; gap: 22px; align-content: start; margin: 0; }
.k-tile-small { border-radius: var(--r-web-tileSmall); padding: 26px 24px; gap: 12px; }
.k-tile-page { background: var(--fill-page); }
.k-tile-ring { border: 1px solid var(--line-hairline); }
/* A small block of rows inside a tile: a sunk group of white rows. */
.k-excerpt { display: grid; gap: 8px; margin: 0; padding: 14px; list-style: none; background: var(--fill-page);
  border-radius: var(--r-popover); }
.k-excerpt > li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px;
  min-height: 38px; padding: 6px 14px; background: var(--fill-raised); border: 1px solid var(--line-row);
  border-radius: var(--r-sidebarRow); font: 400 14px/1.3 var(--ui); color: var(--ink-primary); }
.k-excerpt .k-num-row { color: var(--ink-primary); }
.k-ok { color: var(--ok-ink); font-weight: 500; }

/* The segmented control (System 04): a track, and a raised segment on it.
 * On a page it is the Light / Dark switch; in a picture of the app it is the
 * toolbar's Month, List and Year, drawn as inert spans. */
.k-seg { display: inline-flex; align-items: center; gap: 0; margin: 0; padding: 2px;
  background: var(--fill-hover); border: 1px solid var(--line-row); border-radius: var(--r-pill); }
.k-seg-btn { display: inline-flex; align-items: center; min-height: 26px; padding: 0 14px; margin: 0;
  font: 500 13px/1 var(--ui); color: var(--ink-secondary); background: transparent; border: 0;
  border-radius: var(--r-pill); white-space: nowrap; cursor: pointer; }
button.k-seg-btn:hover { color: var(--ink-primary); }
.k-seg-btn[aria-pressed="true"], .k-seg-btn.is-on { background: var(--fill-raised); color: var(--ink-primary);
  box-shadow: var(--shadow-segment); }
span.k-seg-btn { cursor: default; }

/* The one accordion, on the front page and under every guide (a <details>:
 * it opens with no script, one at a time by `name`, and the browser's
 * find-in-page opens a closed answer). */
.faq + .faq { border-top: 1px solid var(--line-row); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 14px 0; font: 600 19px/1.35 var(--ui); color: var(--ink-primary);
  cursor: pointer; list-style: none; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after { content: "+"; flex-shrink: 0; font: 400 22px/1 var(--ui); color: var(--ink-secondary);
  transition: transform var(--t-state); }
.faq[open] > .faq-q::after { transform: rotate(45deg); }
.faq-q:hover { text-decoration: underline; text-decoration-color: var(--line-chrome); }
.faq-a { margin: 0; padding: 0 40px 22px 0; font: 400 16px/1.55 var(--ui); color: var(--ink-secondary); }
.faq-a a { color: var(--ink-primary); }

/* A grade tile, as the Mac draws it (44 for an inspector, 24 in a list); the
 * colours are the grade bands' (R8: good S/A, fair B, poor C to F). */
.k-grade { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 44px; height: 44px; margin: 0; border-radius: var(--r-group); font: 700 22px/1 var(--ui);
  background: var(--grade-none-bg); color: var(--grade-none-ink); }
.k-grade-good { background: var(--grade-A-bg); color: var(--grade-A-ink); }
.k-grade-fair { background: var(--grade-B-bg); color: var(--grade-B-ink); }
.k-grade-poor { background: var(--grade-C-bg); color: var(--grade-C-ink); }

/* A status chip, as the Mac's (20 tall): the break count and Today. */
.k-status { display: inline-flex; align-items: center; gap: 6px; min-height: 20px; padding: 0 8px;
  font: 600 13px/1 var(--ui); color: var(--ink-secondary); background: var(--fill-neutralChip);
  border-radius: var(--r-pill); white-space: nowrap; }
.k-status-break { background: var(--break-tint); color: var(--break-ink); }
.k-status-break::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--break); }

/* Skip link: the first stop on every page, shown on focus (WCAG 2.4.1). */
.k-skip { position: absolute; left: 12px; top: -80px; z-index: 30; display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 16px; font: 600 15px/1 var(--ui); color: var(--fill-raised);
  background: var(--ink-primary); border-radius: var(--r-pill); text-decoration: none; }
.k-skip:focus { top: 8px; }
/* In-page links land clear of the sticky nav (WCAG 2.4.11). */
[id] { scroll-margin-top: 64px; }

/* Windows' High Contrast keeps the shape of every control. */
@media (forced-colors: active) {
  .k-btn, .k-chip, .k-seg, .k-key, .k-status, .k-grade { border: 1px solid CanvasText; }
  .k-mark { forced-color-adjust: none; }
}

/* ---- Phones --------------------------------------------------------------- */
/* The sheet's 390 layout: an 18px side, the hero and guide titles stepped
 * down, the CTA full width, the nav a lockup and a menu button. Every control
 * a thumb meets reaches 44px (ui.json tapMin), which the sheet draws at 40. */
/* Between a phone and a desk the brand takes its own row above the columns. */
@media (max-width: 1000px) { .k-foot-card { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  :root { --side: 18px; }
  .k-display { font-size: 32px; }
  .k-standfirst { font-size: 19px; }
  .k-lede { font-size: 17px; }
  .prose { font-size: 17px; }
  .head { padding: var(--s4) 0 var(--s3); margin-bottom: var(--s3); }
  .k-btn, .k-input { min-height: var(--tap); }
  /* 16px on a phone, because Safari on iOS zooms the page into any field set
     smaller, and the first thing a phone visitor does is type an email into
     the sign-in field (audit W-10). The sheet's 15px stays on a desk. */
  .k-input { font-size: 16px; }
  .k-btn-cta { display: flex; width: 100%; min-height: 48px; font-weight: 600; }
  .k-chip { min-height: var(--tap); }
  .k-pill { min-height: 30px; }
  .k-contents li { min-height: var(--tap); align-items: center; }
  .k-plate-facts { grid-template-columns: 1fr; }
  .k-figure { padding: 14px; }
  .k-nav-in { padding: 0 var(--side); min-height: 56px; gap: 8px; }
  .k-lockup > svg { width: 26px; height: 26px; }
  .k-lockup { gap: 10px; min-height: var(--tap); }
  .k-wordmark { font-size: 17px; }
  .k-nav .k-lockup > svg { width: 22px; height: 22px; }
  .k-nav .k-wordmark { font-size: 16px; }
  .k-nav-end { gap: 8px; }
  .k-btn-nav { min-height: var(--tap); }
  .k-nav-links { display: none; }
  .k-menu { display: block; }
  .k-seg-btn { min-height: var(--tap); }
  .k-menu-btn { width: var(--tap); height: var(--tap); }
  .k-foot-card { grid-template-columns: 1fr; gap: 24px; padding: 28px 22px; border-radius: var(--r-web-tileSmall); }
  .k-foot-cols { grid-template-columns: 1fr 1fr; gap: 24px 20px; padding-top: 24px; border-top: 1px solid var(--line-row); }
  .k-foot-col ul { gap: 0; }
  .k-foot-col a { display: inline-flex; align-items: center; min-height: var(--tap); }
}

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

/* Legal pages get printed and kept. Black on white, and a link that says where
 * it goes, because a printed page cannot be clicked. */
@media print {
  body { background: #fff; color: #000; font-size: 12pt; }
  .k-nav, .k-foot, .route, .k-btn { display: none; }
  .page { max-width: none; padding: 0; }
  a { color: #000; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; }
  .head-meta, .small, .footnote, .clause-num { color: #000; }
}