/* The website's own look. GENERATED by tools/v2-css.mjs from
 * design/website-v2/tokens.json and look.css; do not edit. */

@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%;
  font-display: swap; src: url('/assets/fonts/archivo-variable-latin.woff2?v=4c98b9d4') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url('/assets/fonts/jetbrains-mono-variable-latin.woff2?v=2c32b9b3') format('woff2'); }

/* The website's table. Dark: the night ground, pale words. */
:root {
  color-scheme: dark;
  --v-ink: #eef3ee;
  --v-ink2: #9aa69f;
  --v-ink3: #848f88;
  --v-paper: #0b0f0d;
  --v-paper2: #141a16;
  --v-card: #161d19;
  --v-line: #243029;
  --v-line2: #2e3a33;
  --v-line-chrome: rgba(238,243,238,.14);
  --v-hover: rgba(238,243,238,.06);
  --v-jade: #2fd18f;
  --v-jade-d: #19b073;
  --v-jade-t: #0f2a20;
  --v-jade-ink: #06281a;
  --v-mint: #2fd18f;
  --v-hot: #ff3d14;
  --v-hot-mark: #ff4f2b;
  --v-hot-d: #ff5f57;
  --v-hot-t: #3a1410;
  --v-hot-cell: #24110d;
  --v-hot-night: #140604;
  --v-hot-night-ink: #ffe9e2;
  --v-amber: #ffb020;
  --v-amber-d: #ffc24d;
  --v-amber-t: #332a12;
  --v-blue: #2e86ff;
  --v-night: #161d19;
  --v-night2: #1f2823;
  --v-night3: #283229;
  --v-nink: #eef3ee;
  --v-nink2: #9aa69f;
  --v-nline: rgba(238,243,238,.14);
  --v-nav-glass: rgba(11,15,13,.84);
  --v-white: #ffffff;
  --v-hot-night-ink2: #d3a092;
  --v-hot-night-panel: #1c0906;
  --v-hot-night-line: rgba(255,110,80,.26);
  --v-hot-night-grid: rgba(255,110,80,.10);
  --v-hot-night-glass: rgba(20,6,4,.82);
  --v-chart-grid: rgba(238,243,238,.06);
  --v-panel-shade: rgba(0,0,0,.4);
  --v-track: #1f2823;
  --v-hot-hatch: #2a0f0b;
  --v-pulse: rgba(128,128,128,.45);
  --v-pulse-out: rgba(128,128,128,0);
  --v-nline-faint: rgba(238,243,238,.08);
  --v-key-protect: #12a36b;
  --v-key-protect-lip: #0a6944;
  --v-key-protect-ink: #04130c;
  --v-key-flatten: #ff3d14;
  --v-key-flatten-lip: #a82407;
  --v-key-flatten-ink: #1c0500;
  --v-key-runner: #2e86ff;
  --v-key-runner-lip: #1552b0;
  --v-key-runner-ink: #020d1f;
  --v-key-trail: #ffb020;
  --v-key-trail-lip: #a86c05;
  --v-key-trail-ink: #1f1300;
  --v-key-shade: rgba(0,0,0,.45);
  --v-hot-bright: #ff5f57;
  --v-jade-t-ink2: #9fd9bc;
  --v-kept-wash1: rgba(47,209,143,.14);
  --v-kept-wash2: rgba(47,209,143,.24);
  --v-kept-wash3: rgba(47,209,143,.36);
  --v-broke-wash1: rgba(255,79,43,.14);
  --v-broke-wash2: rgba(255,79,43,.24);
  --v-broke-wash3: rgba(255,79,43,.36);
  --v-jade-glow: rgba(47,209,143,.45);
  --v-ui: 'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --v-display: 'Archivo', 'Arial Narrow', sans-serif;
  --v-figures: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --v-r-s: 12px;
  --v-r-m: 20px;
  --v-r-l: 28px;
  --v-r-xl: 40px;
  --v-r-pill: 999px;
  --v-shadow-card: 0 1px 0 rgba(0,0,0,.3), 0 24px 48px rgba(0,0,0,.4);
  --v-shadow-pop: 0 24px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(238,243,238,.1);

  /* The kit's names, repainted. */
  --fill-page: var(--v-paper);
  --fill-raised: var(--v-card);
  --fill-weekColumn: var(--v-paper2);
  --fill-stripe: var(--v-paper);
  --fill-neutralChip: var(--v-paper2);
  --fill-track: var(--v-line);
  --fill-hover: var(--v-hover);
  --fill-inspector: var(--v-card);
  --ink-primary: var(--v-ink);
  --ink-secondary: var(--v-ink2);
  --ink-tertiary: var(--v-ink3);
  --line-hairline: var(--v-line);
  --line-row: var(--v-line);
  --line-chrome: var(--v-line-chrome);
  --ok: var(--v-jade);
  --ok-ink: var(--v-jade-d);
  --ok-tint: var(--v-jade-t);
  --verdict-kept: var(--v-jade);
  --break: var(--v-hot-mark);
  --break-ink: var(--v-hot-d);
  --break-tint: var(--v-hot-t);
  --break-cell: var(--v-hot-cell);
  --attention: var(--v-amber-d);
  --plate: var(--v-night);
  --plate-card: var(--v-night2);
  --plate-ink: var(--v-nink);
  --plate-ink-2: var(--v-nink2);
  /* The kit's names the table does not repaint: the app's dark register. */
  --accent: #2F6FED;
  --accent-focusRing: rgba(77,141,255,0.45);
  --accent-pressed: #1F55C4;
  --accent-text: #4D8DFF;
  --accent-tint: #16233B;
  --control-off: #3A4149;
  --fill-future: #171A1E;
  --fill-sidebar: #1C1F24;
  --fill-sidebarSelected: rgba(255,255,255,0.10);
  --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;
  --key-flatten: #F2685C;
  --key-ink: #121417;
  --key-protect: #38A85A;
  --key-runner: #2C9BE9;
  --key-trail: #A985F2;
  --metric-great: #A985F2;
  --ui: var(--v-ui);
  --figures: var(--v-figures);
  --r-group: var(--v-r-l);
  --r-row: var(--v-r-s);
  --shadow-card: var(--v-shadow-card);
  --shadow-raised: var(--v-shadow-card);
  --shadow-panel: var(--v-shadow-card);
}

/* A picture of the app is the app's: its own light table, faces and corners. */
.k-figure:not([data-theme="dark"]) {
  color-scheme: light;
  --accent: #2F6FED;
  --accent-focusRing: rgba(47,111,237,0.28);
  --accent-pressed: #1F55C4;
  --accent-text: #1F55C4;
  --accent-tint: #E8EFFD;
  --attention: #8A6710;
  --break: #C13527;
  --break-cell: #FFF7F5;
  --break-ink: #A82C20;
  --break-tint: #FBE9E6;
  --control-off: #D5D9DF;
  --fill-future: #FCFCFD;
  --fill-hover: rgba(23,26,31,0.05);
  --fill-inspector: #FAFBFC;
  --fill-neutralChip: #F2F4F7;
  --fill-page: #F5F6F8;
  --fill-raised: #FFFFFF;
  --fill-sidebar: #ECEFF3;
  --fill-sidebarSelected: rgba(23,26,31,0.09);
  --fill-stripe: #F5F6F8;
  --fill-track: #E8EBEF;
  --fill-weekColumn: #F7F8FA;
  --grade-A-bg: #E7F2EC;
  --grade-A-ink: #25643F;
  --grade-B-bg: #EEF0F4;
  --grade-B-ink: #171A1F;
  --grade-C-bg: #FBE9E6;
  --grade-C-ink: #A82C20;
  --grade-D-bg: #FBE9E6;
  --grade-D-ink: #A82C20;
  --grade-none-bg: #EEF0F4;
  --grade-none-ink: #555C66;
  --ink-onAccent: #FFFFFF;
  --ink-primary: #171A1F;
  --ink-secondary: #555C66;
  --ink-tertiary: #8A919B;
  --key-flatten: #C13527;
  --key-ink: #FFFFFF;
  --key-protect: #26773F;
  --key-runner: #1D6DA7;
  --key-trail: #7A47BF;
  --line-chrome: rgba(0,0,0,0.14);
  --line-hairline: #E2E5EA;
  --line-row: #E8EBEF;
  --metric-great: #7A47BF;
  --ok: #26773F;
  --ok-ink: #25643F;
  --ok-tint: #E7F2EC;
  --plate: #171A1F;
  --plate-card: #22262B;
  --plate-ink: #F1F3F6;
  --plate-ink-2: #A8B0BC;
  --verdict-kept: #26773F;
}

/* The web journal (app.html puts .k-system on its body) keeps its own Light /
 * Dark / Auto (site/app-appearance.js), and opens Dark since 14 Oct 2026.
 * Dark, pinned or followed from this device, is the website's own night (the
 * journal's board, WebJournal.dc.html, was re-coloured with every page): the
 * kit's dark register is repainted with the table, as :root is. Light, pinned
 * or followed, is the app's light table, every name; and the few of the
 * website's own names the shell draws with directly (the bar's glass, the
 * pale ink of a selected link, a button's outline) follow it, so a light
 * journal does not sit under a bar of night with dark words on it. */
.k-system[data-theme="dark"], [data-theme="dark"] .k-system {
  color-scheme: dark;
  --fill-page: var(--v-paper);
  --fill-raised: var(--v-card);
  --fill-weekColumn: var(--v-paper2);
  --fill-stripe: var(--v-paper);
  --fill-neutralChip: var(--v-paper2);
  --fill-track: var(--v-line);
  --fill-hover: var(--v-hover);
  --fill-inspector: var(--v-card);
  --ink-primary: var(--v-ink);
  --ink-secondary: var(--v-ink2);
  --ink-tertiary: var(--v-ink3);
  --line-hairline: var(--v-line);
  --line-row: var(--v-line);
  --line-chrome: var(--v-line-chrome);
  --ok: var(--v-jade);
  --ok-ink: var(--v-jade-d);
  --ok-tint: var(--v-jade-t);
  --verdict-kept: var(--v-jade);
  --break: var(--v-hot-mark);
  --break-ink: var(--v-hot-d);
  --break-tint: var(--v-hot-t);
  --break-cell: var(--v-hot-cell);
  --attention: var(--v-amber-d);
  --plate: var(--v-night);
  --plate-card: var(--v-night2);
  --plate-ink: var(--v-nink);
  --plate-ink-2: var(--v-nink2);
  --accent: #2F6FED;
  --accent-focusRing: rgba(77,141,255,0.45);
  --accent-pressed: #1F55C4;
  --accent-text: #4D8DFF;
  --accent-tint: #16233B;
  --control-off: #3A4149;
  --fill-future: #171A1E;
  --fill-sidebar: #1C1F24;
  --fill-sidebarSelected: rgba(255,255,255,0.10);
  --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;
  --key-flatten: #F2685C;
  --key-ink: #121417;
  --key-protect: #38A85A;
  --key-runner: #2C9BE9;
  --key-trail: #A985F2;
  --metric-great: #A985F2;
}
@media (prefers-color-scheme: dark) {
  .k-system:not([data-theme="light"]):not([data-theme="light"] *) {
    color-scheme: dark;
    --fill-page: var(--v-paper);
    --fill-raised: var(--v-card);
    --fill-weekColumn: var(--v-paper2);
    --fill-stripe: var(--v-paper);
    --fill-neutralChip: var(--v-paper2);
    --fill-track: var(--v-line);
    --fill-hover: var(--v-hover);
    --fill-inspector: var(--v-card);
    --ink-primary: var(--v-ink);
    --ink-secondary: var(--v-ink2);
    --ink-tertiary: var(--v-ink3);
    --line-hairline: var(--v-line);
    --line-row: var(--v-line);
    --line-chrome: var(--v-line-chrome);
    --ok: var(--v-jade);
    --ok-ink: var(--v-jade-d);
    --ok-tint: var(--v-jade-t);
    --verdict-kept: var(--v-jade);
    --break: var(--v-hot-mark);
    --break-ink: var(--v-hot-d);
    --break-tint: var(--v-hot-t);
    --break-cell: var(--v-hot-cell);
    --attention: var(--v-amber-d);
    --plate: var(--v-night);
    --plate-card: var(--v-night2);
    --plate-ink: var(--v-nink);
    --plate-ink-2: var(--v-nink2);
    --accent: #2F6FED;
    --accent-focusRing: rgba(77,141,255,0.45);
    --accent-pressed: #1F55C4;
    --accent-text: #4D8DFF;
    --accent-tint: #16233B;
    --control-off: #3A4149;
    --fill-future: #171A1E;
    --fill-sidebar: #1C1F24;
    --fill-sidebarSelected: rgba(255,255,255,0.10);
    --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;
    --key-flatten: #F2685C;
    --key-ink: #121417;
    --key-protect: #38A85A;
    --key-runner: #2C9BE9;
    --key-trail: #A985F2;
    --metric-great: #A985F2;
  }
}
.k-system[data-theme="light"], [data-theme="light"] .k-system {
  color-scheme: light;
  --accent: #2F6FED;
  --accent-focusRing: rgba(47,111,237,0.28);
  --accent-pressed: #1F55C4;
  --accent-text: #1F55C4;
  --accent-tint: #E8EFFD;
  --attention: #8A6710;
  --break: #C13527;
  --break-cell: #FFF7F5;
  --break-ink: #A82C20;
  --break-tint: #FBE9E6;
  --control-off: #D5D9DF;
  --fill-future: #FCFCFD;
  --fill-hover: rgba(23,26,31,0.05);
  --fill-inspector: #FAFBFC;
  --fill-neutralChip: #F2F4F7;
  --fill-page: #F5F6F8;
  --fill-raised: #FFFFFF;
  --fill-sidebar: #ECEFF3;
  --fill-sidebarSelected: rgba(23,26,31,0.09);
  --fill-stripe: #F5F6F8;
  --fill-track: #E8EBEF;
  --fill-weekColumn: #F7F8FA;
  --grade-A-bg: #E7F2EC;
  --grade-A-ink: #25643F;
  --grade-B-bg: #EEF0F4;
  --grade-B-ink: #171A1F;
  --grade-C-bg: #FBE9E6;
  --grade-C-ink: #A82C20;
  --grade-D-bg: #FBE9E6;
  --grade-D-ink: #A82C20;
  --grade-none-bg: #EEF0F4;
  --grade-none-ink: #555C66;
  --ink-onAccent: #FFFFFF;
  --ink-primary: #171A1F;
  --ink-secondary: #555C66;
  --ink-tertiary: #8A919B;
  --key-flatten: #C13527;
  --key-ink: #FFFFFF;
  --key-protect: #26773F;
  --key-runner: #1D6DA7;
  --key-trail: #7A47BF;
  --line-chrome: rgba(0,0,0,0.14);
  --line-hairline: #E2E5EA;
  --line-row: #E8EBEF;
  --metric-great: #7A47BF;
  --ok: #26773F;
  --ok-ink: #25643F;
  --ok-tint: #E7F2EC;
  --plate: #171A1F;
  --plate-card: #22262B;
  --plate-ink: #F1F3F6;
  --plate-ink-2: #A8B0BC;
  --verdict-kept: #26773F;
  --v-ink: var(--ink-primary);
  --v-ink2: var(--ink-secondary);
  --v-ink3: var(--ink-tertiary);
  --v-paper: var(--fill-page);
  --v-paper2: var(--fill-weekColumn);
  --v-card: var(--fill-raised);
  --v-line: var(--line-hairline);
  --v-line2: var(--line-row);
  --v-line-chrome: var(--line-chrome);
  --v-nav-glass: color-mix(in srgb, var(--fill-page) 84%, transparent);
}
@media (prefers-color-scheme: light) {
  .k-system:not([data-theme="dark"]):not([data-theme="dark"] *) {
    color-scheme: light;
    --accent: #2F6FED;
    --accent-focusRing: rgba(47,111,237,0.28);
    --accent-pressed: #1F55C4;
    --accent-text: #1F55C4;
    --accent-tint: #E8EFFD;
    --attention: #8A6710;
    --break: #C13527;
    --break-cell: #FFF7F5;
    --break-ink: #A82C20;
    --break-tint: #FBE9E6;
    --control-off: #D5D9DF;
    --fill-future: #FCFCFD;
    --fill-hover: rgba(23,26,31,0.05);
    --fill-inspector: #FAFBFC;
    --fill-neutralChip: #F2F4F7;
    --fill-page: #F5F6F8;
    --fill-raised: #FFFFFF;
    --fill-sidebar: #ECEFF3;
    --fill-sidebarSelected: rgba(23,26,31,0.09);
    --fill-stripe: #F5F6F8;
    --fill-track: #E8EBEF;
    --fill-weekColumn: #F7F8FA;
    --grade-A-bg: #E7F2EC;
    --grade-A-ink: #25643F;
    --grade-B-bg: #EEF0F4;
    --grade-B-ink: #171A1F;
    --grade-C-bg: #FBE9E6;
    --grade-C-ink: #A82C20;
    --grade-D-bg: #FBE9E6;
    --grade-D-ink: #A82C20;
    --grade-none-bg: #EEF0F4;
    --grade-none-ink: #555C66;
    --ink-onAccent: #FFFFFF;
    --ink-primary: #171A1F;
    --ink-secondary: #555C66;
    --ink-tertiary: #8A919B;
    --key-flatten: #C13527;
    --key-ink: #FFFFFF;
    --key-protect: #26773F;
    --key-runner: #1D6DA7;
    --key-trail: #7A47BF;
    --line-chrome: rgba(0,0,0,0.14);
    --line-hairline: #E2E5EA;
    --line-row: #E8EBEF;
    --metric-great: #7A47BF;
    --ok: #26773F;
    --ok-ink: #25643F;
    --ok-tint: #E7F2EC;
    --plate: #171A1F;
    --plate-card: #22262B;
    --plate-ink: #F1F3F6;
    --plate-ink-2: #A8B0BC;
    --verdict-kept: #26773F;
    --v-ink: var(--ink-primary);
    --v-ink2: var(--ink-secondary);
    --v-ink3: var(--ink-tertiary);
    --v-paper: var(--fill-page);
    --v-paper2: var(--fill-weekColumn);
    --v-card: var(--fill-raised);
    --v-line: var(--line-hairline);
    --v-line2: var(--line-row);
    --v-line-chrome: var(--line-chrome);
    --v-nav-glass: color-mix(in srgb, var(--fill-page) 84%, transparent);
  }
}
.k-figure {
  --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;
  --r-group: 12px;
  --r-row: 7px;
  --shadow-card: 0 1px 2px rgba(23,33,28,.04);
  --shadow-raised: 0 1px 2px rgba(23,33,28,.05);
  --shadow-panel: 0 8px 24px rgba(23,33,28,.10);
  font-family: var(--ui);
}

/* ---- The rules. No colour is typed here: every one is a token above. ----- */

html { scroll-behavior: smooth; }
body { font-family: var(--v-ui); font-size: 18px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 3px solid var(--v-jade); outline-offset: 3px; }
/* Every control answers the pointer, in 150ms (the 14 Oct audit, item 8: none
 * of the front page's sixty did), and a focused one is jade on the night
 * ground, where currentColor was pale ink on pale ink. */
a, button, .k-btn { transition: background-color .15s ease, color .15s ease, transform .15s ease; }
.k-btn:hover, .l-start:hover, .l-price-go:hover { transform: translateY(-1px); }

/* ---- The type floor -----------------------------------------------------------
 * The owner, 13 Oct 2026: "we still have a bunch of small font text, people
 * dont read it". Nothing on the website is set under 13px, and 13px is only a
 * mono label inside a figure. A line somebody reads is 16px or more; an
 * eyebrow, a crumb, a caption and the footer's risk line are 15px; a chip, a
 * tag and a mono label over a column are 14px (design/website-v2/HANDOFF.md,
 * part 5). test/the-type-floor.test.mjs holds it.
 *
 * The kit is the app's table too and is not edited: its small sizes are raised
 * here, where only the website's pages are. A picture of the app (.k-figure)
 * keeps the app's own sizes, which is what `:where(:not(.k-figure *))` says,
 * at no cost in specificity. It stands first, so every rule below that sets
 * a size of its own for one of these still wins. */
:is(.small, .footnote, .k-ui, .k-secondary, .k-num-row, .k-data, .k-data-em, .k-btn, .k-key, .k-pill,
  .k-input, .k-field-note, .k-table, .k-empty, .k-marked, .k-skip):where(:not(.k-figure *)) { font-size: 16px; }
:is(.k-label, .k-kbd, .k-field-label, .k-section-label, .k-seg-btn, .k-status):where(:not(.k-figure *)) { font-size: 15px; }
.k-num:where(:not(.k-display, .k-figure *)) { font-size: 16px; }
.prose code:where(:not(.k-figure *)) { font-size: 16px; }
.k-kv dt:where(:not(.k-figure *)), .k-kv dd:where(:not(.k-figure *)) { font-size: 16px; }
.k-table th:where(:not(.k-figure *)) { font-size: 15px; }
.k-table td.k-num:where(:not(.k-figure *)) { font-size: 16px; }
.k-contents li { font-size: 16px; }
.k-excerpt > li:where(:not(.k-figure *)) { font-size: 16px; }


/* Display type: condensed, heavy, uppercase by CSS (the words stay sentence
 * case in the page, for a reader and a search engine alike). */
.k-title, .head > .k-title, .k-guide-title, .stage-title {
  font-family: var(--v-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase;
  line-height: .92; letter-spacing: -0.005em; text-wrap: balance; }
.head > .k-title { font-size: clamp(44px, 8vw, 112px); margin-top: 10px; }
.k-guide-title { font-size: clamp(40px, 6.4vw, 88px); }

/* The eyebrow over a title, and every small label: mono, uppercase. */
.head > .k-label, .k-kicker, .sec-num, .clause-num, .stage-where, .route-where,
.guide-contents-label, .k-foot-col .k-label {
  font-family: var(--v-figures); font-size: 15px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-secondary); }
.head-meta, .k-standfirst { font-size: clamp(19px, 1.9vw, 24px); line-height: 1.35; color: var(--ink-secondary);
  max-width: 700px; text-wrap: pretty; }
.head { padding-top: clamp(20px, 4vw, 56px); }

/* A section's heading: a rule of ink over it, the number in jade. */
.block { margin-top: clamp(48px, 7vw, 96px); padding-top: clamp(20px, 3vw, 32px); border-top: 2px solid var(--ink-primary); }
.sec-head { font-family: var(--v-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase;
  font-size: clamp(30px, 4.2vw, 52px); line-height: .94; letter-spacing: 0; display: block; }
.sec-head > .sec-num { display: block; margin: 0 0 8px; color: var(--ok); font-weight: 700; }
.prose h2 { font-family: var(--v-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase;
  font-size: clamp(30px, 4vw, 48px); line-height: .94; letter-spacing: 0; margin: 56px 0 18px; text-wrap: balance; }
.prose h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; }
.prose { font-size: 19px; line-height: 1.6; }
.prose a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
  text-decoration-color: var(--ok); }
.prose li::marker { font-family: var(--v-figures); font-size: .8em; font-weight: 700; color: var(--ok); }

/* Buttons: pills of ink. */
.k-btn { border-radius: var(--v-r-pill); font-weight: 800; border: 0; transition: transform .12s ease; }
.k-btn:hover { transform: translateY(-2px); }
.k-btn:active { transform: translateY(1px); }
/* The kit's own names (repainted above): the primary is ink, its words the raised fill (O13; one-blue gate). */
.k-btn-primary { background: var(--ink-primary); color: var(--fill-raised); box-shadow: none; }
.k-btn-secondary { background: transparent; color: var(--v-ink); box-shadow: inset 0 0 0 2px var(--v-ink); }
.k-btn-nav { min-height: 40px; padding: 0 18px; font-size: 16px; font-weight: 700; box-shadow: none; }
.k-btn-cta { min-height: 56px; padding: 0 30px; font-size: 18px; }

/* Surfaces: white cards with wide corners on paper. */
.k-card, .steps, .dl-card, .calc, .fig-card, .guide-card, .fold, .matrix-wrap, .k-table-wrap {
  border: 0; border-radius: var(--v-r-l); box-shadow: var(--v-shadow-card); }
.k-card-head { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.k-pill { border-radius: var(--v-r-pill); font-weight: 700; }
.step-num { width: 44px; height: 44px; border: 0; background: var(--v-ink); color: var(--v-paper);
  font-family: var(--v-figures); font-size: 16px; font-weight: 700; }
.step { grid-template-columns: 44px minmax(0, 1fr); gap: 0 16px; }
.step-done { color: var(--ok-ink); font-weight: 600; }

/* The bar: paper glass. */
.k-nav { background: var(--v-nav-glass); border-bottom: 0; box-shadow: inset 0 -1px 0 var(--v-line-chrome);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); }
/* The bar's links: the words where they were, the press a finger's height
 * (they were 21px, the text only). */
.k-nav-links a { font-size: 16px; font-weight: 500; display: inline-flex; align-items: center; min-height: 44px; }
.k-nav-links a[aria-current="page"] { font-weight: 500; box-shadow: inset 0 -2px 0 var(--v-ink); }
.k-nav .k-wordmark, .k-wordmark { font-family: var(--v-ui); font-weight: 800; letter-spacing: -0.01em; }
.k-menu-list { border-radius: 18px; box-shadow: var(--v-shadow-pop); border: 0; }

/* The footer: night. */
/* The kit draws the footer's columns on a white raised card. On night that is
 * pale links on white, which is what went live on 13 Oct 2026 and the owner
 * photographed. The design has no card: the columns sit on the night ground. */
.k-foot-card { background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.k-foot { background: var(--v-night); color: var(--v-nink); border-top: 0; margin-top: clamp(56px, 9vw, 120px); }
.k-foot .k-lockup, .k-foot .k-wordmark, .k-foot-col a { color: var(--v-nink); }
.k-foot .k-secondary, .k-foot-col .k-label, .k-risk-foot { color: var(--v-nink2); }
.k-foot-col .k-label { font-size: 14px; }
.k-foot-col a { font-size: 16px; }
.k-risk-foot { border-top: 1px solid var(--v-nline); font-size: 15px; line-height: 1.5; }
.k-risk-foot a { color: var(--v-nink); }

/* Said, not shown: the sentence a screen reader needs before a picture ("an
 * illustration, not a screenshot") and a reader with eyes never did. The one
 * name for it on the website; the front page wears the same class. One line
 * (`nowrap`), or a screen reader runs the words together in a box 1px wide;
 * and clipped on both axes in longhand, which is what tools/phone-fit-gate.mjs
 * reads to know a long unwrapped line cannot widen a phone's page. */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow-x: hidden; overflow-y: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Figures are figures. */
.k-num, .out-value, .k-input-num { font-family: var(--v-figures); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---- The utility pages: /download /setup /404 /partners /budget /stops /read
 *
 * design/website-v2/{Download,Setup,NotFound,Partners,Budget,Stops,Read}.dc.html,
 * laid over the markup site/tools/pages.mjs writes. 00-base.css has already
 * repainted the shared pieces (the bar, the footer, buttons, titles, cards,
 * steps); this part arranges each page and draws what only these pages have.
 * No colour is typed: every one is a token of the website's table. A picture
 * of the app (.k-figure) is left alone.
 *
 * Three things here lean on :has(): the head losing its rule when a page's
 * own first piece follows it (`.top`), /download's two columns, and the dark
 * 404. A browser without it draws the same pages in one column on paper. */

/* ---- The head ------------------------------------------------------------ */
.head:has(+ .top) { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.head:has(+ .top) > h1 { max-width: none; }
.measure.top { margin-top: 22px; }

/* Words a person will look for on a screen: a small plate, not a pill. */
.path { padding: 1px 6px; border: 0; border-radius: 6px; font-weight: 600; }
.path[data-from="file"] { font-size: 16px; }
.say a, .dl-note a, .step-body a, .after-foot a, .stage-main > .small a, .nf-say a {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
  text-decoration-color: var(--v-jade); }

/* ---- A section in two columns: its heading held left, its matter right ---- */
.block-main { min-width: 0; margin-top: clamp(22px, 3vw, 36px); }
.block-main > :first-child { margin-top: 0; }
@media (min-width: 900px) {
  .block-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
    gap: 0 clamp(20px, 4vw, 56px); align-items: start; }
  .block-split > .block-main { margin-top: 0; }
}

/* A list of what a page does not know, or of what to do: one card a line. */
.limits { display: grid; gap: 12px; padding: 0; background: transparent; border-radius: 0; box-shadow: none;
  font-size: 17px; line-height: 1.5; }
.limits li { padding: 20px 22px; border-top: 0; border-radius: var(--v-r-m); background: var(--v-card); }

/* The sentence a section turns on, and the paid part under it. */
.say-big { max-width: none; margin: 0 0 16px; font-size: clamp(20px, 2vw, 26px); line-height: 1.35;
  font-weight: 600; text-wrap: pretty; }
.paid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px;
  margin: 16px 0 0; padding: clamp(20px, 2.6vw, 30px); border-radius: var(--v-r-l);
  background: var(--v-jade-t); color: var(--v-ink); }
.paid-say { flex: 1 1 320px; min-width: 0; }
.paid-say > p { margin: 0; font-size: 19px; line-height: 1.35; font-weight: 600; }
.paid-say > p + p { margin-top: 8px; font-size: 16px; font-weight: 500; }
.also-free { font-size: 16px; }

/* ---- /download ----------------------------------------------------------- */
.dl-lead { max-width: 700px; margin-top: 18px; }
.dl-say { margin: 0; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.35; color: var(--v-ink2);
  text-wrap: pretty; }
.dl-actions { align-items: center; gap: 12px 20px; margin: 26px 0 0; }
.dl-day { margin: 14px 0 0; font-size: 16px; line-height: 1.45; color: var(--v-ink2); }

/* The build: the mark, the version as the page's figure, the size under it. */
.dl-card { gap: 20px; margin-top: clamp(28px, 4vw, 48px); padding: clamp(20px, 2.6vw, 30px);
  border-radius: var(--v-r-xl); }
.dl-card > .k-card-head, .dl-key { font-family: var(--v-figures); font-size: 14px; font-weight: 500;
  line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: var(--v-ink2); }
.dl-build { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 18px; }
.dl-icon { grid-row: 1 / span 2; display: block; width: 96px; height: 96px; line-height: 0;
  border-radius: 28%; color: var(--v-ink); box-shadow: var(--v-shadow-card); }
.dl-icon > svg { display: block; width: 100%; height: 100%; }
.dl-version { display: flex; flex-direction: column; align-self: end; gap: 4px; margin: 0; }
.dl-version > .k-num { font-family: var(--v-display); font-stretch: 62%; font-weight: 900; font-size: 64px;
  line-height: .9; letter-spacing: -0.005em; color: var(--v-ink); }
.dl-size { display: flex; align-items: baseline; gap: 8px; align-self: start; margin: 0; }
.dl-size > .k-num { font-size: 16px; color: var(--v-ink2); }
.dl-rows { display: block; font-size: 16px; }
.dl-rows li { display: grid; grid-template-columns: minmax(84px, 150px) minmax(0, 1fr); align-items: baseline;
  gap: 2px 12px; padding: 14px 0; border-top: 1px solid var(--v-line); }
.dl-rows li > span:last-child { font-weight: 600; line-height: 1.4; }

/* Known issues: an outlined box, so it never reads as one more card of copy. */
.dl-status { padding: clamp(20px, 2.6vw, 30px); border-top: 0; border-radius: var(--v-r-l);
  box-shadow: inset 0 0 0 1px var(--v-line2); }
.dl-status-line { font-size: 19px; line-height: 1.4; font-weight: 600; }
.dl-status-list { margin: 12px 0 0; padding: 0 0 0 1.25em; font-size: 17px; line-height: 1.5; }

/* The three notes. The one that is a fault wears the mark of one. */
.dl-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px;
  margin-top: clamp(48px, 7vw, 96px); }
.dl-note { margin: 0; padding: clamp(20px, 2.6vw, 30px); border-radius: var(--v-r-l); background: var(--v-card);
  box-shadow: var(--v-shadow-card); font-size: 16px; line-height: 1.5; color: var(--v-ink2); }
.dl-note-alarm::before { content: ""; display: block; width: 10px; height: 10px; margin: 0 0 12px;
  border-radius: 50%; background: var(--v-hot-d); }

@media (min-width: 900px) {
  .page:has(> .dl-lead) { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    column-gap: clamp(20px, 4vw, 56px); align-items: start; }
  .page:has(> .dl-lead) > * { grid-column: 1 / -1; }
  .page:has(> .dl-lead) > .head { grid-column: 1; grid-row: 1; }
  .page:has(> .dl-lead) > .dl-lead { grid-column: 1; grid-row: 2; }
  .page:has(> .dl-lead) > .dl-card { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin-top: 0; }
}

/* ---- /setup ---------------------------------------------------------------
 * The plate under the heading is no card now: the line that ends the lede,
 * the four places as four cards, the short answers as one list. */
.after { display: block; padding: 0; background: transparent; border-radius: 0; box-shadow: none; }
.after-lede { max-width: 700px; margin: 6px 0 0; }
.after-lede p { font-size: clamp(19px, 1.9vw, 24px); line-height: 1.35; color: var(--v-ink2); }

.route { margin-top: clamp(28px, 4vw, 48px); }
.route ol { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.route a { gap: 0; padding: clamp(20px, 2.6vw, 30px); border: 0; border-radius: var(--v-r-l);
  background: var(--v-card); box-shadow: var(--v-shadow-card); transition: transform .18s ease; }
.route a:hover { background: var(--v-card); transform: translateY(-3px); }
.route-head { display: block; }
.route-num { display: block; width: auto; height: auto; margin: 0; border: 0; border-radius: 0;
  font-family: var(--v-display); font-stretch: 62%; font-weight: 900; font-size: 72px; line-height: .9;
  color: var(--v-jade); }
.route-title { display: block; margin-top: 10px; font-size: 21px; font-weight: 800; line-height: 1.2; }
.route-where { margin-top: 6px; font-size: 14px; }
.route-steps { margin-top: 14px; font-size: 16px; line-height: 1.45; color: var(--v-ink); }
.route-asks { margin-top: 6px; font-size: 16px; line-height: 1.45; }

.after-foot { display: block; margin-top: 28px; padding: 0; background: transparent; border-radius: 0; }
.after-foot > div { display: grid; grid-template-columns: minmax(110px, 180px) minmax(0, 1fr);
  align-items: baseline; gap: 2px 16px; padding: 14px 0; border-top: 1px solid var(--v-line); }
.after-foot dt { font: 500 14px/1.4 var(--v-figures); letter-spacing: .06em; text-transform: uppercase;
  color: var(--v-ink2); }
.after-foot dd { margin: 0; font-size: 17px; line-height: 1.45; font-weight: 600; color: var(--v-ink); }

/* A place: a rule of ink, its name held left, its steps right. */
.stage { margin-top: clamp(56px, 9vw, 120px); padding-top: clamp(22px, 3vw, 36px);
  border-top: 2px solid var(--v-ink); }
.stage-where { gap: 0; font-weight: 700; color: var(--v-jade-d); }
.stage-where > .sec-num { font-size: inherit; font-weight: inherit; color: inherit; }
.stage-where > .sec-num::after { content: "\00a0\00b7\00a0"; }
.stage-title { margin: 8px 0 0; font-size: clamp(34px, 5vw, 64px); }
.stage-asks { margin: 14px 0 0; font-size: 18px; line-height: 1.45; }
.stage-asks-label { display: inline; margin: 0; font: inherit; color: inherit; }
.stage-main { margin-top: clamp(20px, 3vw, 32px); }
.stage-main > .small { max-width: 680px; margin: 14px 0 0; font-size: 16px; }
.stage-lede { margin: 0 0 12px; padding: 18px 20px; border-radius: var(--v-r-m); background: var(--v-jade-t);
  color: var(--v-ink); font-size: 16px; line-height: 1.45; }
.stage-lede + .stage-lede { background: var(--v-paper2); color: var(--v-ink); }
@media (min-width: 1000px) {
  .stage { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 0 clamp(20px, 4vw, 56px); }
  .stage-side { top: 84px; padding-top: 0; }
  .stage-main { margin-top: 0; }
}

/* The steps: a card each. "You'll know it worked" is the line it ends on. */
.steps { display: grid; gap: 12px; padding: 0; background: transparent; border-radius: 0; box-shadow: none; }
.step { padding: 20px 22px; border-top: 0; border-radius: var(--v-r-m); background: var(--v-card); }
.step-num { margin: 0; }
.step-title { margin: 0 0 6px; font-size: 21px; font-weight: 800; line-height: 1.2; }
.step-body { font-size: 17px; line-height: 1.5; color: var(--v-ink2); }
.step-warn { font-size: 16px; border: 0; border-radius: var(--v-r-s); padding: 12px 14px; background: var(--v-amber-t);
  color: var(--v-amber-d); font-weight: 600; }
.step-done { position: relative; margin: 14px 0 0; font-size: 16px; padding: 0 0 0 20px; background: transparent;
  border-radius: 0; }
.step-done::before { content: ""; position: absolute; left: 0; top: .4em; width: 10px; height: 10px;
  border-radius: 50%; background: var(--v-jade); }
.step-done-label { font: 500 14px/1.5 var(--v-figures); letter-spacing: .06em; text-transform: uppercase;
  color: var(--v-jade-d); }
.setup-figure { margin: 12px 0 0; }
/* The enforcement card is a list of words, so it is read: the type floor's
 * sizes, in the app's own faces. Its state stays a tag. */
.setup-figure .fig-card, .setup-figure .fig-say { font-size: 16px; }
.setup-figure .fig-card .k-label { font-size: 15px; }
.steps-after-figure { margin-top: 12px; }

/* A step's short explanation (site/explainers.css, linked after this sheet,
 * so each rule here is one class heavier than the one it raises). What is read
 * is the floor's size: the story, the two lines under it, the legend. The
 * numeral in a beat's circle is a label. The drawing's own labels are left at
 * the sizes they were drawn to fit: the words in the bar are clipped by it,
 * and the dashed cut is placed by the height of the row above. The sentence
 * under the second bar wraps, so it is raised. */
figure.dx { font-size: 16px; }
.dx .dx-beats small, .dx .dx-foot, .dx .dx-cap, .dx .dx-cap > strong, .dx .dx-flag { font-size: 16px; }
.dx .dx-beats > li::before, .dx .dx-btn { font-size: 14px; }

/* A step's several actions: a row each, with the box as it should be left. */
.step-list { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 16px;
  line-height: 1.45; font-weight: 600; color: var(--v-ink); }
.step-list li { position: relative; min-height: 48px; padding: 12px 14px 12px 50px;
  border-radius: var(--v-r-s); background: var(--v-paper); }
.step-list li + li { margin-top: 0; }
.step-list .path { background: var(--v-paper2); }
.tick { position: absolute; left: 14px; top: 12px; width: 24px; height: 24px; border-radius: 7px;
  box-shadow: inset 0 0 0 2px var(--v-ink); }
.tick-on { background: var(--v-ink); }
.tick-on::after { content: ""; position: absolute; left: 6px; top: 7px; width: 11px; height: 6px;
  border-left: 3px solid var(--v-paper); border-bottom: 3px solid var(--v-paper); transform: rotate(-45deg); }

/* The last place is help: a band of night. */
.stage-night { --ink-primary: var(--v-nink); --ink-secondary: var(--v-nink2);
  --line-hairline: var(--v-nline); --fill-weekColumn: var(--v-night2);
  padding: clamp(24px, 4vw, 56px); border-top: 0; border-radius: var(--v-r-xl);
  background: var(--v-night); color: var(--v-nink); }
.stage-night .stage-where { color: var(--v-nink2); }
.stage-night .prose { font-size: 18px; line-height: 1.5; }

/* ---- /404: the one dark page ---------------------------------------------- */
body:has(.nf) { background: var(--v-hot-night); color: var(--v-hot-night-ink); }
.page:has(> .nf) { --ink-primary: var(--v-hot-night-ink); --ink-secondary: var(--v-hot-night-ink);
  padding-top: clamp(20px, 4vw, 56px); padding-bottom: clamp(56px, 9vw, 120px); }
.page:has(> .nf) > .head > .k-label { font-family: var(--v-display); font-stretch: 62%; font-weight: 900;
  font-size: clamp(160px, 34vw, 480px); line-height: .74; letter-spacing: -0.005em; color: var(--v-hot); }
.page:has(> .nf) > .head > .k-title { margin-top: clamp(18px, 3vw, 36px); font-size: clamp(40px, 6vw, 88px); }
.nf-say { max-width: 560px; margin: 18px 0 0; font-size: clamp(18px, 1.9vw, 22px); line-height: 1.45; }
.nf-say a { color: inherit; }
.ways { align-items: center; gap: 12px 20px; }
.ways .k-btn-primary { background: var(--v-hot); color: var(--v-hot-night); }
.ways .k-btn-secondary { min-height: 44px; padding: 0; background: transparent; box-shadow: none;
  color: inherit; font-weight: 700; }
.ways .k-btn-secondary:hover { text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 4px; }

/* ---- /partners ----------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px;
  margin: clamp(22px, 3vw, 36px) 0 0; padding: 0; list-style: none; }
.cards > li { padding: clamp(20px, 2.6vw, 30px); border-radius: var(--v-r-l); background: var(--v-card);
  box-shadow: var(--v-shadow-card); font-size: 16px; line-height: 1.45; color: var(--v-ink2); }
.cards > li > strong { display: block; margin: 0 0 8px; font-size: 21px; font-weight: 800; line-height: 1.2;
  letter-spacing: -0.01em; color: var(--v-ink); }
.cards-count { counter-reset: card; }
.cards-count > li { counter-increment: card; }
.cards-count > li::before { content: counter(card); display: block; margin: 0 0 12px;
  font-family: var(--v-display); font-stretch: 62%; font-weight: 900; font-size: 72px; line-height: .9;
  color: var(--v-jade); }
.cards-code { padding: 2px 8px; border-radius: 8px; background: var(--v-paper); color: var(--v-ink);
  font-family: var(--v-figures); font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.block-night { --ink-primary: var(--v-nink); --ink-secondary: var(--v-nink2);
  padding: clamp(24px, 4vw, 56px); border-top: 0; border-radius: var(--v-r-xl);
  background: var(--v-night); color: var(--v-nink); }
.block-night > .sec-head > .sec-num { color: var(--v-hot); }
.block-night .cards > li { padding: 22px 24px; border-radius: 24px; background: var(--v-night2);
  box-shadow: none; color: var(--v-nink2); }
.block-night .cards > li > strong { color: var(--v-nink); }
.closing { margin: clamp(48px, 7vw, 96px) 0 0; padding: clamp(22px, 3vw, 36px) max(0px, calc(100% - 820px)) 0 0;
  border-top: 2px solid var(--v-ink); font-size: clamp(20px, 2vw, 26px); line-height: 1.35; font-weight: 600;
  text-wrap: pretty; }

/* ---- /budget: the fields on a card, the answers on night ------------------- */
.calc { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px; margin: clamp(28px, 4vw, 48px) 0 0;
  border-radius: 0; box-shadow: none; }
.calc-in { flex: 1 1 380px; min-width: 0; gap: 22px; padding: clamp(20px, 2.6vw, 30px);
  border-radius: var(--v-r-xl); }
.calc-in .k-field { gap: 8px; }
.calc-in .k-field-label { font: 800 16px/1.3 var(--v-ui); letter-spacing: -0.01em; color: var(--v-ink); }
.calc-in .k-field-note { font-size: 16px; line-height: 1.4; color: var(--v-ink2); }
.calc-in .k-input { height: 64px; padding: 0 18px; border: 0; border-radius: 16px; background: var(--v-paper);
  color: var(--v-ink); box-shadow: inset 0 0 0 2px var(--v-line2); font-size: 24px; font-weight: 700;
  letter-spacing: -0.02em; text-align: left; }
.calc-in .k-input:focus { outline: none; background: var(--v-paper); box-shadow: inset 0 0 0 3px var(--v-ink); }
.calc-in select.k-input { padding-right: 48px; font-family: var(--v-ui); font-size: 17px; font-weight: 600;
  letter-spacing: 0; }
.calc-in .k-picker::after { right: 22px; }
.field-row { position: relative; display: block; }
.field-unit { position: absolute; left: 18px; top: 0; display: flex; align-items: center; height: 64px;
  font: 700 24px/1 var(--v-figures); color: var(--v-ink2); pointer-events: none; }
.field-unit + .k-input { padding-left: 40px; }

.calc > .calc-out { flex: 1.3 1 440px; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 36px) 16px; padding: clamp(24px, 4vw, 48px); border-radius: var(--v-r-xl);
  background: var(--v-night); color: var(--v-nink); }
.calc > .calc-out > .out { gap: 8px; padding: 20px 22px; border-radius: 24px; background: var(--v-night2);
  box-shadow: none; color: var(--v-nink); }
.calc > .calc-out > .out:first-child { grid-column: 1 / -1; padding: 0; border-radius: 0; background: transparent; }
.calc > .calc-out .k-label, .calc-out-wide .k-label { font: 500 14px/1.4 var(--v-figures); letter-spacing: .06em;
  text-transform: uppercase; }
.calc > .calc-out .k-label, .calc > .calc-out .k-secondary { color: var(--v-nink2); }
.calc > .calc-out .k-secondary { font-size: 16px; line-height: 1.45; }
.calc > .calc-out > .out:first-child .k-secondary { max-width: 520px; font-size: 17px; }
/* An answer is the page's figure, in the display face. A named empty is the
 * same face, smaller and in the quiet ink: words, and seen to be. */
.calc > .calc-out .out-value, .calc-out-wide .out-value { font-family: var(--v-display); font-stretch: 62%;
  font-weight: 900; font-size: 72px; line-height: .9; letter-spacing: -0.005em; text-transform: uppercase; }
.calc > .calc-out .out-value { color: var(--v-nink); }
.calc > .calc-out > .out:first-child .out-value { font-size: clamp(48px, 7vw, 96px); }
.calc > .calc-out .out-value[data-empty] { font-size: clamp(32px, 4.4vw, 48px); color: var(--v-nink2); }

/* ---- /stops --------------------------------------------------------------- */
.kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px;
  margin-top: clamp(22px, 3vw, 36px); }
.kind { margin: 0; padding: clamp(20px, 2.6vw, 30px); border-radius: var(--v-r-l); background: var(--v-card);
  box-shadow: var(--v-shadow-card); font-size: 18px; line-height: 1.4; color: var(--v-ink2); }
.kind > strong { font-family: var(--v-display); font-stretch: 62%; font-weight: 900;
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1; text-transform: uppercase; color: var(--v-ink); }
.kinds-after { margin: 20px 0 0; }

/* Where a cell came from: said in words first, and then by its colour. */
.legend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 20px 0 22px; }
.legend > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.legend dd { margin: 0; font-size: 16px; line-height: 1.45; color: var(--v-ink); }
.tag { gap: 7px; min-height: 26px; margin: 0; padding: 2px 11px; border: 0; border-radius: var(--v-r-pill);
  background: var(--v-paper2); color: var(--v-ink2); font: 700 14px/1.2 var(--v-ui); vertical-align: baseline; }
.tag::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tag-doc { background: var(--v-jade-t); color: var(--v-jade-d); }
.tag-rep { background: var(--v-amber-t); color: var(--v-amber-d); }
.tag-unk { background: var(--v-hot-t); color: var(--v-hot-d); }
.matrix { min-width: 760px; font-size: 16px; line-height: 1.4; }
.matrix th, .matrix td { padding: 18px 20px; border-bottom: 0; border-top: 1px solid var(--v-line); }
.matrix th { padding: 16px 20px; border-top: 0; background: transparent; vertical-align: bottom;
  font: 500 14px/1.3 var(--v-figures); letter-spacing: .06em; text-transform: uppercase; color: var(--v-ink2); }
.matrix td:first-child { width: 24%; font-weight: 800; letter-spacing: -0.01em; }
.matrix td:has(> .tag-unk) { background: var(--v-hot-cell); }
.matrix .tag { display: flex; width: fit-content; margin: 0 0 8px; }
.matrix .k-empty { font-size: 16px; line-height: 1.4; }

/* The gap in the grid: the hot world, because nobody is holding it. */
.block-hot { --ink-primary: var(--v-hot-night-ink); --ink-secondary: var(--v-hot-night-ink);
  padding: clamp(24px, 4vw, 56px); border-top: 0; border-radius: var(--v-r-xl);
  background: var(--v-hot-night); color: var(--v-hot-night-ink); }
.block-hot > .sec-head, .block-hot > .sec-head > .sec-num { color: var(--v-hot); }
.block-cols { columns: 340px 2; column-gap: 28px; margin-top: 22px; }
.block-cols > .say { max-width: none; margin: 0 0 16px; break-inside: avoid; line-height: 1.5; }
.block-cols > .say:last-child { margin-bottom: 0; }

/* ---- /read ---------------------------------------------------------------- */
.drop { display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin: clamp(28px, 4vw, 48px) 0 0; padding: clamp(28px, 5vw, 64px) 24px;
  border: 3px dashed var(--v-line2); border-radius: var(--v-r-l); background: var(--v-card); }
.drop[data-over] { border-color: var(--v-ink); background: var(--v-paper2); }
.drop-icon { width: 56px; height: 56px; fill: none; stroke: var(--v-ink); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round; }
.drop-title { font-family: var(--v-display); font-stretch: 62%; font-weight: 900;
  font-size: clamp(32px, 4.4vw, 56px); line-height: .92; letter-spacing: 0; text-transform: uppercase;
  text-wrap: balance; }
.drop-pick { position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 30px; border-radius: var(--v-r-pill); background: var(--v-ink);
  color: var(--v-paper); font-size: 18px; font-weight: 800; text-decoration: none;
  transition: transform .12s ease; }
.drop-pick:hover { transform: translateY(-2px); }
.drop-pick:focus-within { outline: 3px solid var(--v-ink); outline-offset: 3px; }
.drop-note { max-width: 520px; margin: 0; font-size: 16px; line-height: 1.45; }
.trouble { margin: 14px 0 0; padding: 16px 20px; border: 0; border-radius: var(--v-r-m);
  background: var(--v-amber-t); }
.trouble-why { color: var(--v-amber-d); font-weight: 600; }
.result { margin: 14px 0 0; }
.result-from { margin: 0 0 16px; font: 500 16px/1.45 var(--v-figures); }

/* The six answers. Before a file is read each says so, in the quiet ink. */
.calc-out-wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.calc-out-wide > .out { gap: 0; padding: clamp(20px, 2.6vw, 30px); }
.calc-out-wide .k-label { color: var(--v-ink2); }
.calc-out-wide .out-value { margin-top: 12px; font-size: 56px; color: var(--v-ink); }
.calc-out-wide .out-value[data-empty] { color: var(--v-ink3); }
.calc-out-wide .k-secondary { margin-top: 8px; font-size: 16px; line-height: 1.45; }
/* The count the page is about is the one in an ink line. */
.out-key { box-shadow: inset 0 0 0 2px var(--v-ink); }

/* The same stop in the two exports. */
.twobox { margin: 22px 0 0; }
.twobox-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.twobox-box { padding: clamp(20px, 2.6vw, 30px); border-radius: var(--v-r-l); background: var(--v-card);
  box-shadow: var(--v-shadow-card); }
.twobox-all { background: var(--v-night); color: var(--v-nink); box-shadow: none; }
.twobox-label { margin: 0; font: 500 14px/1.4 var(--v-figures); letter-spacing: .06em; text-transform: uppercase;
  color: var(--v-ink2); }
.twobox-all .twobox-label, .twobox-to { color: var(--v-nink2); }
.twobox-num { margin: 14px 0 0; font: 700 26px/1.2 var(--v-figures); font-variant-numeric: tabular-nums; }
.twobox-caption { margin: 10px 0 0; font-size: 16px; line-height: 1.45; color: var(--v-ink2); }

/* ---- Phones ---------------------------------------------------------------- */
@media (max-width: 720px) {
  .step { gap: 0 12px; padding: 18px 16px; }
  .limits li { padding: 18px 16px; }
  .dl-version > .k-num { font-size: 56px; }
  .dl-icon { width: 80px; height: 80px; }
  .after-foot > div { grid-template-columns: minmax(0, 1fr); }
  .calc > .calc-out .out-value, .calc-out-wide .out-value { font-size: 56px; }
  .ways .k-btn-secondary { justify-content: flex-start; }
  .drop-pick { min-height: 56px; }
  .block-night .cards > li { padding: 20px 18px; }
}
@media (max-width: 560px) {
  .calc > .calc-out { grid-template-columns: minmax(0, 1fr); }
}

/* ---- /learn and /learn/<slug> ------------------------------------------------
 * design/website-v2/Learn.dc.html and Guide.dc.html, over the kit and
 * site/learn.css. Where each piece sits is learn.css's; this is the look: the
 * faces, the display type, the paint. Every class here is one learn.css or the
 * kit defines and tools/articles.mjs writes (tools/css-used-gate.mjs does not
 * read v2.css, so a class invented here would be worn and undefined).
 *
 * No colour is typed: each is the website's token. A picture is left alone: a
 * guide's hero and its figures keep the corners learn.css gives them, and only
 * a caption's type is set here.
 *
 * What the mocks draw and this does not, each for a reason that is not taste:
 * the closing "Stop blowing up" band with a second Start (a guide links
 * checkout once, from the nav: test/guides.test.mjs); the "Free tool" card in
 * the article (it is not in the article, and the template adds no sentence);
 * the featured guide's "Read it" button (the whole card is the link, and
 * /learn's words have a ceiling); rows with no picture (/learn is held to its
 * pictures: test/guides-seo.test.mjs). */

/* ---- The guide --------------------------------------------------------------- */

/* On the paper, like every other page of the website. */
.guide-page { background: var(--v-paper); }
/* The bar is held at the top of the window, 64 tall: a linked heading and the
 * column beside the article both clear it. */
.guide [id] { scroll-margin-top: 88px; }
/* The way back to the guides, in the bar on a phone: the floor's size. */
.guide-page .k-nav-home .k-pill { font-size: 16px; }

/* The head: crumb, eyebrow, title, standfirst, byline. */
.guide-head { gap: 0; margin-bottom: clamp(24px, 4vw, 44px); }
.guide-crumb, .guide-eyebrow, .guide-byline { font-family: var(--v-figures); font-size: 15px; font-weight: 500;
  line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; color: var(--v-ink2); }
.guide-crumb a { color: var(--v-ink2); text-decoration: none; }
.guide-crumb a:hover { color: var(--v-ink); text-decoration: underline; }
.guide-eyebrow { letter-spacing: .06em; color: var(--v-jade-d); font-weight: 700; }
.guide-head > .k-guide-title { margin-top: 10px; font-size: clamp(40px, 7vw, 96px); max-width: 1050px; }
.guide-head > .k-standfirst { margin-top: 18px; }
.guide-head > .guide-byline { margin-top: 20px; text-transform: none; letter-spacing: 0; font-size: 16px; }

/* The grid on a wide screen: the title across the page, then the contents and
 * the argument in a narrow column on the left, held in view under the bar, and
 * the picture, the article and what follows it in the reading column. Narrower
 * than 1040 nothing here applies and learn.css's one column stands, with the
 * side column's pieces placed in the reading order and nothing held. */
@media (min-width: 1040px) {
  .guide { grid-template-columns: minmax(0, 260px) minmax(0, var(--measure)); column-gap: clamp(32px, 4vw, 56px); }
  .guide > .guide-head { grid-column: 1 / -1; grid-row: 1; }
  .guide > .guide-hero, .guide > .guide-body, .guide > .guide-after { grid-column: 2; }
  .guide > .guide-side { grid-column: 1; grid-row: 2 / span 3; top: 88px; max-height: calc(100vh - 112px); gap: 22px; }
}

/* A caption: small, in the second ink. The picture above it is not touched. */
.figure figcaption { margin-top: 12px; font-size: 16px; line-height: 1.45; color: var(--v-ink2); }
.guide-body .prose .figure { margin: 34px 0; }

/* "On this page". Beside the article it is a plain list under its label, each
 * entry numbered by the list in jade mono, a hairline between them. Folded
 * (narrower than 1040) it stays a card, on the second paper. */
.guide-contents { border: 0; box-shadow: none; background: var(--v-paper2); border-radius: var(--v-r-m); }
.guide-contents ol { counter-reset: guide-toc; gap: 0; }
.guide-contents li { counter-increment: guide-toc; font-size: 16px; line-height: 1.3; }
.guide-contents a { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--v-line); color: var(--v-ink2); }
.guide-contents a::before { content: counter(guide-toc, decimal-leading-zero); flex: none; padding-top: 2px;
  font-family: var(--v-figures); font-size: 14px; font-weight: 700; color: var(--v-jade); }
.guide-contents a:hover { color: var(--v-ink); text-decoration: none; }
.guide-contents a[aria-current] { color: var(--v-ink); font-weight: 700; }
@media (min-width: 1040px) {
  .guide-contents { background: transparent; border-radius: 0; padding: 0; }
}

/* The argument: the jade card. Whose sentence it is in mono, the sentence
 * heavy, the one link on. */
.argument { background: var(--v-jade-t); color: var(--v-ink); border-radius: var(--v-r-m); padding: 18px 20px; }
.argument-name { font-family: var(--v-figures); font-size: 14px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--v-jade-d); }
.argument-line { font-size: 17px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; color: var(--v-ink); }
.argument-more { font-size: 16px; font-weight: 700; }
.argument-more a { color: var(--v-ink); text-decoration-color: var(--v-jade); }

/* The article. */
.guide-body .prose { font-size: 19px; line-height: 1.6; }
.guide-body .prose p { margin: 0 0 22px; }
.guide-body .prose h2 { margin: 56px 0 18px; }
.guide-body .guide-rest > h2:first-child { margin-top: 36px; }
.guide-body .prose h3 { font-size: 22px; font-weight: 800; margin: 34px 0 10px; }
.guide-body .prose li { padding-left: 4px; }
.guide-body .prose blockquote { border-left: 3px solid var(--v-ink); color: var(--v-ink2); padding-left: 18px; }
.guide-body .prose pre { font-size: 16px; background: var(--v-paper2); border: 0; border-radius: var(--v-r-s); }
.guide-body .k-table { font-size: 16px; }
.guide-body .k-table th { font-family: var(--v-figures); font-size: 14px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--v-ink2); }
.guide-body .k-table td { border-color: var(--v-line); }

/* "The short answer": the jade note, the label in mono. */
.guide-answer { margin: 0 0 22px; padding: 24px 26px; background: var(--v-jade-t); color: var(--v-ink);
  border-radius: var(--v-r-m); line-height: 1.55; }
.guide-body .guide-answer .guide-answer-label { font-family: var(--v-figures); font-size: 14px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--v-jade-d); }
.guide-answer a { color: var(--v-ink); }

/* After the article: three headings in the display face. */
.guide-section { font-family: var(--v-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase;
  font-size: clamp(30px, 4vw, 48px); line-height: .94; letter-spacing: 0; margin: 56px 0 18px; text-wrap: balance; }

/* The questions: rows under a rule of ink, no card. */
.guide-faq-list { background: transparent; border: 0; border-top: 2px solid var(--v-ink); border-radius: 0;
  box-shadow: none; padding: 0; }
.guide-faq-list .faq { border-bottom: 1px solid var(--v-line2); }
.guide-faq-list .faq + .faq { border-top: 0; }
.guide-faq-list .faq-q { min-height: 68px; padding: 12px 0; font-size: 20px; font-weight: 700; line-height: 1.3;
  letter-spacing: -0.01em; }
.guide-faq-list .faq-q::after { font-size: 30px; font-weight: 300; color: var(--v-ink); }
.guide-faq-list .faq-a { padding: 0 0 22px; max-width: 680px; font-size: 17px; line-height: 1.5; color: var(--v-ink2); }

/* The sources. */
.sources a { color: var(--v-ink2); text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 3px; text-decoration-color: var(--v-jade); }
.sources a:hover { color: var(--v-ink); }

/* More guides: rows. The title heavy, the reading time in mono at the end. */
.more { border-top: 2px solid var(--v-ink); }
.more > li { padding: 18px 0; border-top: 1px solid var(--v-line2); }
.more > li:first-child { border-top: 0; }
.more-title { font-size: clamp(19px, 2vw, 24px); font-weight: 800; letter-spacing: -0.015em; line-height: 1.15;
  text-wrap: balance; }
.more a:hover .more-title { text-decoration-thickness: 2px; text-underline-offset: 4px; }
.more-meta { font-family: var(--v-figures); font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--v-ink2); }
.more-all { border-top: 1px solid var(--v-line2); font-weight: 700; }
.more-all a { text-decoration: none; }
.more-all a:hover { text-decoration: underline; }

/* ---- The index -------------------------------------------------------------- */

/* The head: the count as the eyebrow, the title at the page-title size. */
.guide-index-head { gap: 0; max-width: none; margin-bottom: clamp(28px, 4vw, 48px); }
.guide-index-meta, .guide-index-meta a { font-family: var(--v-figures); font-size: 15px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--v-ink2); }
.guide-index-head > .k-guide-title { margin-top: 10px; font-size: clamp(44px, 8vw, 112px); }
.guide-index-head > .k-standfirst { margin-top: 18px; }

/* The filter: pills. The pressed one is ink. */
.guide-topics { margin-bottom: 18px; }
.guide-topic { padding: 0 18px; border: 0; border-radius: var(--v-r-pill); background: transparent;
  color: var(--v-ink2); box-shadow: inset 0 0 0 1px var(--v-line2); font-family: var(--v-ui); font-size: 16px;
  font-weight: 700; }
.guide-topic:hover { color: var(--v-ink); }
.guide-topic[aria-pressed="true"] { background: var(--v-ink); color: var(--v-paper); box-shadow: none; }
.guide-topics-shown { font-family: var(--v-figures); font-size: 16px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--v-ink2); }

/* The rows: no card, a hairline over each; the title heavy, the date and the
 * reading time in mono. */
.guide-cards { border-bottom: 1px solid var(--v-line2); }
.guide-card { padding: 22px 0; border-top: 1px solid var(--v-line2); border-radius: 0; box-shadow: none; }
.guide-card .k-card-img { border-radius: var(--v-r-s); }
.guide-card .k-card-head { font-size: clamp(21px, 2.3vw, 28px); font-weight: 800; letter-spacing: -0.015em;
  line-height: 1.15; }
.guide-card .k-kicker { font-size: 14px; letter-spacing: .04em; }
.guide-card-line { max-width: 640px; }
.guide-card:hover .k-card-head { text-decoration-thickness: 2px; text-underline-offset: 4px;
  text-decoration-color: currentColor; }

/* The newest guide: the night card, its title in the display face, the kicker
 * in mint. */
.guide-cards .guide-first .guide-card { margin-bottom: clamp(20px, 3vw, 36px); padding: clamp(24px, 4vw, 48px);
  border-top: 0; border-radius: var(--v-r-xl); background: var(--v-night); color: var(--v-nink);
  transition: transform .18s ease; }
.guide-cards .guide-first .guide-card:hover { transform: translateY(-3px); }
.guide-cards .guide-first .k-card-img { border-radius: var(--v-r-m); }
.guide-cards .guide-first .k-kicker { color: var(--v-mint); }
.guide-cards .guide-first .k-card-head { margin-top: 6px; font-family: var(--v-display); font-stretch: 62%;
  font-weight: 900; text-transform: uppercase; font-size: clamp(36px, 5.4vw, 76px); line-height: .92;
  letter-spacing: -0.005em; color: var(--v-nink); }
.guide-cards .guide-first .guide-card-line { margin-top: 8px; max-width: none; font-size: 19px; line-height: 1.4;
  color: var(--v-nink2); }
.guide-cards .guide-first .guide-card:hover .k-card-head { text-decoration: none; }

/* ---- /terms /privacy /disclaimer, and /settings ---------------------------
 * design/website-v2/Legal.dc.html and Settings.dc.html, over the kit and
 * pages.css. Every class here is one those two sheets already define and the
 * generators already wear (tools/css-used-gate.mjs does not read v2.css, so a
 * new class would be worn and undefined); what this look adds of its own is
 * hooked on a data attribute the generators write (`data-legal`, `data-set`,
 * `data-fact`, `data-cap`). No colour is typed: each is the website's token,
 * and the four exit keys' faces are the kit's --key-*, the app's own hues. */

/* ---- Legal: one template -------------------------------------------------- */

/* When it changed and what reading it costs: mono, small, under the title. */
.head-meta > [data-legal="changed"] { display: block; font-family: var(--v-figures); font-size: 15px;
  font-weight: 500; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; color: var(--v-ink2); }

/* The lede: what the page is, in ink. The note under it stays small. */
[data-legal="lede"] { margin-top: clamp(20px, 3vw, 32px); max-width: 700px; }
[data-legal="lede"] > p:first-child { font-size: clamp(19px, 1.9vw, 24px); line-height: 1.35; font-weight: 600;
  color: var(--v-ink); text-wrap: pretty; }
[data-legal="lede"] > .small { font-size: 16px; line-height: 1.5; color: var(--v-ink2); margin: 0; }

/* Contents beside the clauses on a wide screen; above them under 820. */
[data-legal="split"] { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 4vw, 56px);
  margin-top: clamp(28px, 4vw, 48px); align-items: start; }
[data-legal="clauses"] { min-width: 0; }

.k-contents.clause-contents { margin: 0; padding: 0; max-width: none; background: none; border: 0; border-radius: 0; }
.clause-contents > .k-label { margin: 0; font-family: var(--v-figures); font-size: 15px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--v-ink2); }
.clause-contents ol { margin: 12px 0 0; gap: 0; }
.clause-contents li { grid-template-columns: 30px minmax(0, 1fr); align-items: baseline; min-height: 44px;
  border-top: 1px solid var(--v-line); font-size: 16px; line-height: 1.3; }
.clause-contents li::before { font-family: var(--v-figures); font-size: 14px; font-weight: 700; color: var(--v-jade); }
.clause-contents a { display: flex; align-items: center; min-height: 44px; padding: 9px 0; color: var(--v-ink2); }
.clause-contents a:hover { color: var(--v-ink); text-decoration: none; }

/* A clause: its number in mono jade over a condensed heading. */
.clause { margin: 0; scroll-margin-top: 84px; }
.clause + .clause { margin-top: clamp(40px, 5vw, 56px); }
.prose .clause-head { display: block; margin: 0 0 18px; }
.clause-head > .clause-num { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 700; line-height: 1.3;
  color: var(--v-jade); }
.clause > p { margin: 0; }

/* The footnote: a quiet plate. The other pages under it, each a full target. */
.footnote[data-legal="note"] { margin: 40px 0 0; padding: 18px 20px; border-radius: var(--v-r-m);
  background: var(--v-paper2); font-size: 16px; line-height: 1.5; color: var(--v-ink); }
.footnote[data-legal="more"] { margin: 16px 0 0; font-size: 16px; font-weight: 700; color: var(--v-ink3); }
.footnote[data-legal="more"] > a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px;
  color: var(--v-ink); }

@media (min-width: 821px) {
  [data-legal="split"] { grid-template-columns: minmax(200px, 280px) minmax(0, 720px); }
  .k-contents.clause-contents { position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow-y: auto; }
}

/* ---- /settings ------------------------------------------------------------ */

/* The short answers: a figure in jade over its name, each a way down the page;
 * the fourth is the one rule about all of them, on night. */
[data-set="facts"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
  margin: clamp(28px, 4vw, 48px) 0 clamp(28px, 4vw, 48px); }
[data-set="facts"] > * { display: flex; flex-direction: column; min-width: 0; padding: clamp(20px, 2.6vw, 30px);
  border-radius: var(--v-r-l); }
[data-set="facts"] > a { background: var(--v-card); color: var(--v-ink); box-shadow: var(--v-shadow-card);
  text-decoration: none; transition: transform .18s ease; }
[data-set="facts"] > a:hover { transform: translateY(-3px); text-decoration: none; }
/* Placed by row, never by `order` (tools/hero-order-gate.mjs reads every sheet the front page links). */
[data-set="facts"] > a { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
[data-set="facts"] > a > [data-fact="label"] { grid-row: 2; }
[data-set="facts"] > a > [data-fact="more"] { grid-row: 3; }
[data-fact="num"] { grid-row: 1; font-family: var(--v-display); font-stretch: 62%; font-weight: 900; font-size: 96px;
  line-height: .9; color: var(--v-jade); font-variant-numeric: tabular-nums; }
[data-set="facts"] > a > [data-fact="label"] { margin-top: 8px; font-size: 21px; font-weight: 800;
  letter-spacing: -0.01em; line-height: 1.2; }
[data-fact="more"] { margin-top: 6px; font-family: var(--v-figures); font-size: 15px; font-weight: 500;
  color: var(--v-ink2); }
/* Said to a reader who hears the page; the line under the figure needs none. */
[data-fact="said"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; }
[data-fact="way"] { background: var(--v-night); color: var(--v-nink); }
[data-fact="way"] > [data-fact="label"] { font-family: var(--v-figures); font-size: 14px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--v-nink2); }
[data-fact="lead"] { margin-top: 14px; font-family: var(--v-display); font-stretch: 62%; font-weight: 900;
  text-transform: uppercase; font-size: clamp(30px, 3vw, 40px); line-height: .92; text-wrap: balance; }
[data-fact="rest"] { margin-top: 10px; font-size: 17px; line-height: 1.4; color: var(--v-nink2); }

/* A fact card lands its heading clear of the bar. */
.sec-head { scroll-margin-top: 84px; }

/* 01. The rules: a card each, the name over what it does. */
.set-list.set-list-wide { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px;
  margin-top: clamp(22px, 3vw, 36px); padding: 0; background: none; border-radius: 0; box-shadow: none; }
.set-list-wide li { display: block; padding: clamp(20px, 2.6vw, 30px); border-top: 0; background: var(--v-card);
  border-radius: var(--v-r-l); box-shadow: var(--v-shadow-card); }
.set-list-wide .set-name { display: block; font-size: 21px; font-weight: 800; letter-spacing: -0.01em;
  line-height: 1.2; color: var(--v-ink); }
.set-list-wide .set-note { display: block; margin-top: 8px; font-size: 16px; line-height: 1.45; color: var(--v-ink2); }

/* 02. The keys: a night panel, and inside it the kit's names read night's
 * inks, so the heading, the line under it and every key's words follow. */
.block[aria-labelledby="keys"] { border-top: 0; border-radius: var(--v-r-xl); padding: clamp(32px, 6vw, 72px) clamp(20px, 4vw, 56px);
  background: var(--v-night); color: var(--v-nink);
  --ink-primary: var(--v-nink); --ink-secondary: var(--v-nink2); --line-row: var(--v-nline); --ok: var(--v-mint); }
.block[aria-labelledby="keys"] > .k-secondary { margin: 16px 0 0; font-size: 19px; line-height: 1.45; max-width: 640px; }
/* Two to a row, in the app's own order: PROTECT FLATTEN over RUNNER TRAIL. */
.keys { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(24px, 4vw, 44px); }
.key { gap: 0; padding: 24px; background: var(--v-night2); border-radius: var(--v-r-l); box-shadow: none; }
/* A keycap. The heading is the lip: the key's own hue under a veil of night.
 * The face on it is the hue itself, with the name in the kit's key ink. */
.key .key-name { position: relative; display: block; min-height: 0; height: 91px; padding: 0; border: 0;
  border-radius: 18px; box-shadow: none; }
.key .key-name:active { background-image: none; }
.key .key-name::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--v-night); opacity: .4; }
.key-name > [data-cap] { position: relative; display: flex; align-items: center; justify-content: center;
  height: 84px; border-radius: 18px; background: inherit; color: var(--key-ink);
  font-family: var(--v-display); font-stretch: 62%; font-weight: 900; font-size: 34px; line-height: 1;
  letter-spacing: 0; text-transform: uppercase; }
.key .key-one { margin-top: 26px; font-size: 18px; font-weight: 700; line-height: 1.35; }
.key .set-list { margin-top: 12px; padding-left: 1.1em; list-style: disc; display: grid; gap: 8px;
  font-size: 16px; line-height: 1.45; }
.key .set-list li { display: list-item; padding: 0; border-top: 0; }
.key .set-list li::marker { color: var(--v-nink2); }

/* 03. The panes: folds under a rule of ink, the heading beside them when
 * there is room. Each pane's pages are chips in mono. */
.block[aria-labelledby="panes"] > .k-secondary { margin: 14px 0 0; font-size: 18px; line-height: 1.45; }
.block[aria-labelledby="panes"] > .small { margin: 20px 0 0; padding: 18px 20px; border-radius: var(--v-r-m);
  background: var(--v-paper2); font-size: 16px; line-height: 1.5; color: var(--v-ink); }
.folds { margin: clamp(22px, 3vw, 36px) 0 0; padding: 0; background: none; border: 0; border-radius: 0;
  border-top: 2px solid var(--v-ink); }
.folds > .fold { border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--v-line2); }
.fold-head { align-items: center; gap: 0 12px; min-height: 68px; padding: 12px 0; }
.fold-head::after { margin-left: 0; font-family: var(--v-ui); font-size: 30px; font-weight: 300; line-height: 1;
  color: var(--v-ink); }
.fold-name { flex: 0 1 auto; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.fold-count { margin-right: auto; font-family: var(--v-figures); font-size: 15px; font-weight: 500;
  color: var(--v-ink2); }
.fold-blurb { margin: 0 0 12px; font-size: 17px; line-height: 1.45; color: var(--v-ink2); max-width: 680px; }
.fold > .set-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; background: none;
  border: 0; border-radius: 0; }
.fold > .set-list li { min-height: 32px; padding: 6px 12px; border-top: 0; border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--v-line2); align-items: center;
  font-family: var(--v-figures); font-size: 14px; font-weight: 500; line-height: 1.4; }
.fold > .set-list .set-note { color: var(--v-ink2); }

@media (min-width: 900px) {
  .block[aria-labelledby="panes"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
    grid-template-rows: auto auto auto 1fr; column-gap: clamp(20px, 4vw, 56px); align-items: start; }
  .block[aria-labelledby="panes"] > * { grid-column: 1; }
  .block[aria-labelledby="panes"] > .folds { grid-column: 2; grid-row: 1 / -1; margin-top: 0; }
}

/* A phone: one key to a row, and the night panel runs edge to edge. */
@media (max-width: 720px) {
  [data-fact="num"] { font-size: 72px; }
  .block[aria-labelledby="keys"] { margin-left: calc(var(--side) * -1); margin-right: calc(var(--side) * -1);
    padding-left: var(--side); padding-right: var(--side); border-radius: 0; }
  .keys { grid-template-columns: minmax(0, 1fr); }
  .key { padding: 20px; }
  .fold-name { font-size: 18px; }
}

/* ---- /app: your account, and the page before it ----------------------------
 * design/website-v2/Account.dc.html and App.dc.html (HANDOFF.md, part 10),
 * over the kit and app.css. The five panes are peers in a row of tabs; each
 * opens with one line that answers what it was opened for; the two steps the
 * page cannot see sit on night.
 *
 * What is selected here: an id the page carries, a class app.html wears in its
 * own markup, or a `data-v` hook app.js and app-account.js write on what they
 * build. Never a class only a script writes: tools/css-used-gate.mjs reads
 * this sheet's wearers off the pages, and cannot see a script's.
 *
 * Every account rule sits under `#side[data-row="tabs"]`, which drawSideBar
 * writes only while the account is the whole page. That page is the
 * website's, dark since 14 Oct 2026 (app-appearance.js pins a register only
 * once the journal is drawn), so the journal's Settings, light or dark, keeps
 * the kit's look and none of this.
 * No colour is typed: each is the kit's name, repainted by the table above.
 * app.css loses to these by the id in each selector. */

/* ---- The head: who, then the page's name in display type ------------------ */
.acct-head .acct-who { font-size: 16px; line-height: 1.4; }
.acct-head .k-section-title { font-family: var(--v-display); font-stretch: 62%; font-weight: 900;
  text-transform: uppercase; font-size: clamp(44px, 7vw, 72px); line-height: .92; letter-spacing: -0.005em; }

/* ---- The five, as tabs ----------------------------------------------------- */
#side[data-row="tabs"] { gap: 8px; padding: 0; }
#side[data-row="tabs"] > button { min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--v-r-pill);
  background: transparent; box-shadow: inset 0 0 0 1px var(--line-chrome); color: var(--ink-secondary);
  font: 700 16px/1 var(--ui); white-space: nowrap; }
#side[data-row="tabs"] > button:hover { background: var(--fill-hover); color: var(--ink-primary); }
#side[data-row="tabs"] > button[aria-pressed="true"] { background: var(--ink-primary); color: var(--fill-raised);
  box-shadow: none; }

/* ---- A pane: one column of cards ------------------------------------------ */
#side[data-row="tabs"] ~ #side-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
  max-width: 920px; margin-top: 10px; }
#side[data-row="tabs"] ~ #side-body > p:empty,
#side[data-row="tabs"] ~ #side-body > [data-v="list"]:empty { display: none; }
#side[data-row="tabs"] ~ #side-body > :is(div, details):not([data-v]) { margin: 0; padding: clamp(20px, 3vw, 28px);
  border-radius: var(--r-group); background: var(--fill-raised); box-shadow: var(--shadow-card); }
#side[data-row="tabs"] ~ #side-body h2:not([data-v]) { margin: 0 0 12px; font: 800 20px/1.2 var(--ui);
  letter-spacing: -0.01em; }
#side[data-row="tabs"] ~ #side-body .fine { font-size: 16px; line-height: 1.5; }

/* What app.css sets small inside a card, at the website's floor: a fold's
 * summary (a full target), the list of what is included, a typed command, and
 * the label over the address that closes the account. */
#side[data-row="tabs"] ~ #side-body details > summary { display: flex; align-items: center; min-height: 44px;
  font-size: 16px; }
#side[data-row="tabs"] ~ #side-body details > div > div :is(span, b) { font-size: 16px; line-height: 1.4; }
#side[data-row="tabs"] ~ #side-body code { font-size: 16px; }
#side[data-row="tabs"] ~ #side-body .k-field-label { font-size: 16px; }

/* The first line: what the pane was opened to find out. */
#side[data-row="tabs"] ~ #side-body [data-v="lead"] { margin: 0 0 14px; font-family: var(--v-display);
  font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(28px, 4vw, 34px);
  line-height: .96; letter-spacing: 0; text-wrap: balance; overflow-wrap: anywhere; color: var(--ink-primary); }
#side[data-row="tabs"] ~ #side-body > [data-v="lead"] { margin: 14px 0 4px; }
#side[data-row="tabs"] ~ #side-body [data-v="beside"] { margin-left: 12px; }

/* Key and value: the key a fixed column, the value in ink beside it. */
#side[data-row="tabs"] ~ #side-body .k-kv > div { justify-content: flex-start; gap: 2px 24px; }
#side[data-row="tabs"] ~ #side-body .k-kv dt { flex: 0 0 160px; font-size: 17px; font-weight: 500; }
#side[data-row="tabs"] ~ #side-body .k-kv dd { min-width: 0; font-size: 17px; font-weight: 600; text-align: left;
  overflow-wrap: anywhere; }

/* ---- Buttons and fields: pills of ink, here and on the sign-in page -------- */
#side[data-row="tabs"] ~ #side-body .btn, #signin .btn { min-height: 48px; padding: 0 22px; border: 0;
  border-radius: var(--v-r-pill); background: var(--fill-raised); color: var(--ink-primary);
  box-shadow: inset 0 0 0 1px var(--line-chrome); font: 800 16px/1.2 var(--ui); }
#side[data-row="tabs"] ~ #side-body .btn:hover, #signin .btn:hover { background: var(--fill-stripe); }
#side[data-row="tabs"] ~ #side-body .btn.primary, #signin .btn.primary { background: var(--ink-primary);
  color: var(--fill-raised); box-shadow: none; }
/* One black button to a view: with Apple's door open, Google is the plain one. */
#signin #signin-apple:not([hidden]) + #signin-google { background: var(--fill-raised); color: var(--ink-primary);
  box-shadow: inset 0 0 0 2px var(--ink-primary); }
/* A button that cannot be pressed yet looks it: Close my account until the
 * address is typed, the Mac's button until its code is known to be waiting. */
#side[data-row="tabs"] ~ #side-body .btn:disabled, #signin .btn:disabled { background: var(--fill-stripe);
  color: var(--ink-tertiary); box-shadow: inset 0 0 0 1px var(--line-hairline); cursor: default; }
#side[data-row="tabs"] ~ #side-body .k-input, #signin .k-input { height: 52px; min-height: 52px; padding: 0 18px;
  border: 0; border-radius: var(--v-r-s); background: var(--fill-raised); color: var(--ink-primary);
  box-shadow: inset 0 0 0 1px var(--line-chrome); font-size: 16px; }
#side[data-row="tabs"] ~ #side-body .k-input:focus, #signin .k-input:focus { outline: none;
  box-shadow: inset 0 0 0 2px var(--ink-primary); }

/* ---- Start here ------------------------------------------------------------ */
#side[data-row="tabs"] ~ #side-body > [data-v="receipt"] { margin: 0; padding: 18px 22px; border: 0;
  border-radius: var(--v-r-m); background: var(--fill-raised); box-shadow: var(--shadow-card);
  font-size: 16px; line-height: 1.5; }
#side[data-row="tabs"] ~ #side-body > [data-v="head"] { display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 8px 16px; margin: 14px 0 0; }
#side[data-row="tabs"] ~ #side-body > [data-v="head"] > [data-v="lead"] { margin: 0; }
#side[data-row="tabs"] ~ #side-body [data-v="count"] { margin-left: auto; font: 700 16px/1.3 var(--figures);
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-secondary); }
#side[data-row="tabs"] ~ #side-body [data-v="count"][data-all="true"] { color: var(--ok-ink); }

/* The three the server can see: a card each, the number in a disc. Done is a
 * tick in jade; the one to do next is ringed in ink and holds the button. */
#side[data-row="tabs"] ~ #side-body .steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-radius: 0; box-shadow: none; }
#side[data-row="tabs"] ~ #side-body .step { display: flex; flex-direction: column; gap: 8px; min-height: 150px;
  padding: 22px 24px; border: 0; border-radius: var(--r-group); background: var(--fill-raised);
  box-shadow: var(--shadow-card); }
#side[data-row="tabs"] ~ #side-body .step[data-step="here"] {
  box-shadow: inset 0 0 0 2px var(--ink-primary), var(--shadow-card); }
#side[data-row="tabs"] ~ #side-body .step [data-v="top"] { display: flex; flex-direction: column;
  align-items: flex-start; gap: 8px; }
#side[data-row="tabs"] ~ #side-body .step [data-v="top"] > b { font: 800 20px/1.2 var(--ui); letter-spacing: -0.01em; }
#side[data-row="tabs"] ~ #side-body .step [data-v="n"] { display: inline-flex; align-items: center;
  justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: var(--fill-neutralChip); color: var(--ink-secondary); font: 800 16px/1 var(--ui); }
#side[data-row="tabs"] ~ #side-body .step[data-step="done"] [data-v="n"] { background: var(--ok-tint);
  color: var(--ok-ink); }
#side[data-row="tabs"] ~ #side-body .step[data-step="here"] [data-v="n"] { background: var(--ink-primary);
  color: var(--fill-raised); }
#side[data-row="tabs"] ~ #side-body .step [data-v="body"] p { margin: 0 0 12px; font-size: 16px; line-height: 1.4;
  color: var(--ink-secondary); }
#side[data-row="tabs"] ~ #side-body .step [data-v="state"] { margin-top: auto; font: 700 16px/1.3 var(--ui);
  color: var(--ink-secondary); }
#side[data-row="tabs"] ~ #side-body .step[data-step="done"] [data-v="state"] { color: var(--ok-ink); }
#side[data-row="tabs"] ~ #side-body .step[data-step="done"] [data-v="state"]::before { content: "\2713\00a0"; }
#side[data-row="tabs"] ~ #side-body .step[data-step="here"] [data-v="state"] { color: var(--ink-primary); }

/* The two that happen in the app, on night: a different place, said by the
 * ground. The one link to /setup is a full target. */
#side[data-row="tabs"] ~ #side-body > [data-v="then"] { display: grid; gap: 18px 40px; margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr)); padding: clamp(20px, 3vw, 28px); border: 0;
  border-radius: var(--r-group); background: var(--plate); color: var(--plate-ink); box-shadow: none; }
#side[data-row="tabs"] ~ #side-body [data-v="then-h"] { grid-column: 1 / -1; margin: 0;
  font: 500 16px/1.3 var(--figures); letter-spacing: .06em; text-transform: uppercase; color: var(--plate-ink-2); }
#side[data-row="tabs"] ~ #side-body [data-v="then-row"] { display: grid; gap: 6px; align-content: start; }
#side[data-row="tabs"] ~ #side-body [data-v="then-row"] > b { font: 800 20px/1.2 var(--ui); color: var(--plate-ink); }
#side[data-row="tabs"] ~ #side-body [data-v="then-row"] > span { font-size: 16px; line-height: 1.45;
  color: var(--plate-ink-2); }
#side[data-row="tabs"] ~ #side-body [data-v="then-link"] { grid-column: 1 / -1; margin: 0; font-size: 16px;
  color: var(--plate-ink-2); }
#side[data-row="tabs"] ~ #side-body [data-v="then-link"] > a { display: inline-flex; align-items: center;
  min-height: 44px; color: var(--plate-ink); font-weight: 700; text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 3px; }
#side[data-row="tabs"] ~ #side-body > [data-v="say"] { margin: 0; }

/* ---- Your machines: each a row of its own, its one action at the end ------- */
#side[data-row="tabs"] ~ #side-body > [data-v="list"] > ul { display: grid; gap: 8px; margin: 0; padding: 0;
  list-style: none; }
#side[data-row="tabs"] ~ #side-body > [data-v="list"] li { display: grid; align-items: center; gap: 8px 14px;
  grid-template-columns: auto minmax(0, 1fr) auto; padding: 16px 20px; border: 0; border-radius: var(--v-r-m);
  background: var(--fill-raised); box-shadow: inset 0 0 0 1px var(--line-hairline); }
#side[data-row="tabs"] ~ #side-body > [data-v="list"] li > span:first-child { margin: 0; }
#side[data-row="tabs"] ~ #side-body > [data-v="list"] li b { font: 700 17px/1.3 var(--ui); }
#side[data-row="tabs"] ~ #side-body > [data-v="list"] li .btn { min-height: 44px; margin: 0; }

/* ---- /app, signed out: the ask on the left, the doors as one card ---------- */
#signin:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start;
  max-width: 1180px; margin: 0 auto; padding: clamp(16px, 4vw, 56px) 0 clamp(40px, 7vw, 96px); text-align: left; }
/* The bar above already carries the lockup; a second one under it read as a
 * double logo (the owner, 15 Oct 2026). The markup stays in app.html for the
 * emailed-link confirm page, which has no bar and borrows it from here. */
#signin .si-brand { display: none; }
#signin .si-brand { gap: 10px; margin: 0 0 clamp(20px, 4vw, 44px); font: 800 18px/1 var(--v-ui);
  letter-spacing: -0.01em; }
#signin .si-brand svg { width: 24px; height: 24px; }
/* The three steps, numbered by the sheet: the one they are on is ink. */
#signin .si-steps { counter-reset: si-step; justify-content: flex-start; gap: 8px; margin: 0 0 18px;
  font: 700 16px/1 var(--v-figures); letter-spacing: .04em; text-transform: uppercase; }
#signin .si-steps li { counter-increment: si-step; display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 0 14px; border-radius: var(--v-r-pill); color: var(--ink-secondary);
  box-shadow: inset 0 0 0 1px var(--line-chrome); }
#signin .si-steps li::before { content: counter(si-step); margin: 0; color: inherit; }
#signin .si-steps li[aria-current] { background: var(--ink-primary); color: var(--fill-raised); box-shadow: none; }
#signin h1 { margin: 0; font-family: var(--v-display); font-stretch: 62%; font-weight: 900;
  text-transform: uppercase; font-size: clamp(52px, 9vw, 112px); line-height: .9; letter-spacing: -0.005em;
  text-wrap: balance; }
#signin .si-next { max-width: 520px; margin: 18px 0 0; font: 400 clamp(18px, 1.8vw, 22px)/1.4 var(--ui);
  color: var(--ink-secondary); }
#signin .fine { font-size: 16px; line-height: 1.5; }
#signin .si-note { max-width: 520px; margin: 14px 0 0; }
#signin .si-note:empty { display: none; }
#signin .doors { width: 100%; max-width: 520px; gap: 12px; margin: 28px 0 0; padding: clamp(22px, 4vw, 44px);
  border: 0; border-radius: var(--v-r-xl); background: var(--fill-raised); box-shadow: var(--shadow-card); }
#signin .doors .btn.wide { min-height: 52px; }
#signin .door-email { margin: 0; }
#signin .door-email .row { gap: 12px; }
/* "Or any email address", between two rules. */
#signin .door-email .k-field-label { display: flex; align-items: center; gap: 12px; margin: 10px 0 12px;
  font: 500 16px/1.3 var(--v-figures); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-secondary); }
#signin .door-email .k-field-label::before,
#signin .door-email .k-field-label::after { content: ""; flex: 1 1 0; height: 1px; background: var(--line-hairline); }
#signin .door-email .fine { margin: 12px 0 0; text-align: center; color: var(--ink-secondary); }
#signin .si-legal { max-width: 520px; margin: 18px 0 0; color: var(--ink-secondary); }

@media (min-width: 900px) {
  /* Two columns. The card spans every row on the right; the last row on the
   * left is the one that stretches, so the ask stays together at the top. */
  #signin:not([hidden]) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 520px);
    grid-template-rows: repeat(5, auto) 1fr auto; column-gap: clamp(24px, 5vw, 72px); }
  #signin > * { grid-column: 1; }
  /* The card is its content's height, so one button sits with even room
   * around it (the owner, 15 Oct 2026, of "Back to Degen Pro" alone at the
   * top of a tall empty card: "make this button even"). */
  #signin > .doors { grid-column: 2; grid-row: 1 / span 6; margin: 0; align-self: start; }
  #signin > .si-legal { grid-column: 2; grid-row: 7; }
}
@media (max-width: 640px) {
  #side[data-row="tabs"] ~ #side-body > [data-v="then"] { grid-template-columns: minmax(0, 1fr); }
  #side[data-row="tabs"] ~ #side-body > [data-v="list"] li { grid-template-columns: auto minmax(0, 1fr); }
  #side[data-row="tabs"] ~ #side-body > [data-v="list"] li .btn { grid-column: 1 / -1; justify-self: start; }
  #side[data-row="tabs"] ~ #side-body .k-kv dt { flex-basis: 100%; }
  #side[data-row="tabs"] ~ #side-body [data-v="beside"] { display: block; margin: 10px 0 0; }
}

/* ---- The web journal: Trades, the month, a day, Study, Coach ---------------
 * design/website-v2/WebJournal.dc.html, over the kit and app.css. The journal
 * is classic scripts drawing into app.html, so nothing here is a new class:
 * a rule is hooked on a container's id in app.html, or on a data attribute
 * the scripts write (`data-ground`, `data-ink`, `data-cal`, `data-grade`,
 * `data-pos`, `data-day-name`, `data-coach`, `data-md`), and
 * site/test/the-web-journal-is-the-board.test.mjs checks each attribute and
 * value read here is one a script writes.
 *
 * No colour is typed. Inside the journal every colour is one of the kit's own
 * names (`--ok`, `--break`, `--attention`, `--metric-great`, the inks and the
 * fills), because those have a dark value and the journal can be pinned
 * Light, Dark or Auto (site/app-appearance.js; Dark, the website's own night,
 * since 14 Oct 2026); a `--v-*` name is the website's table and is used here
 * only for faces, corners and the glow. A tint that must be stronger in the dark register is one hue under a
 * different opacity, which is how the Mac lays its own (CalendarGround.alpha).
 */

/* The journal's titles in the display face, as every page's is. */
#list-title, #cal-title, #day-title, #progress > .pane-head > h1, #coach > .pane-head > h1 {
  font-family: var(--v-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase;
  font-size: clamp(34px, 4.4vw, 56px); line-height: .94; letter-spacing: 0; text-wrap: balance; }

/* ---- Names the website and the journal both use -----------------------------
 * app.html links v2.css since 14 Oct 2026, and five of the website's classes
 * are also the journal's, for other things: a guide page's `.block` is a
 * section under a rule of ink and Study's is a card; `/stops` has a `.kind`
 * card and a `.legend`, the list has a `.kind` label and a `.legend` of marks;
 * `/settings` lays its `.keys` out as a grid and the journal's is a line of
 * key hints. Here the journal's own win, at the values app.css gives them. */
#prog-blocks > .block { margin-top: 0; padding: 20px 22px; border-top: 0; }
#jt-body .kind { margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none;
  font-size: 16px; line-height: inherit; color: var(--ink-secondary); }
#legend { gap: 8px; margin: 18px 0 12px; }
#days > .keys, #calendar > .keys { gap: 10px; margin-top: 10px; }

/* ---- The numbers: a figure wears its grade, with the word beside it --------
 * R43 (the owner, 7 Oct 2026): green good, brass watch, red poor, purple very
 * good. Never a fill: a figure and a word, as the Mac's tiles are. */
[data-grade="great"] > b { color: var(--metric-great); }
[data-grade="good"] > b { color: var(--ok-ink); }
[data-grade="watch"] > b { color: var(--attention); }
[data-grade="poor"] > b { color: var(--break-ink); }
[data-grade-word] { display: inline-block; vertical-align: middle; margin-left: 4px; padding: 4px 10px;
  border-radius: var(--v-r-pill); box-shadow: inset 0 0 0 1px currentColor;
  font-family: var(--ui); font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: 0; white-space: nowrap; }

/* ---- The list ---------------------------------------------------------------
 * Position carries what four columns did: the instrument, which way and how
 * many on its first line; the playbook's count and the clips, quiet, under. */
#jt-body [data-pos="what"] { display: block; font-weight: 600; white-space: nowrap; }
#jt-body [data-pos="more"] { display: block; margin-top: 2px; font-size: 16px; line-height: 1.3;
  color: var(--ink-secondary); white-space: nowrap; }

/* A day's name, wherever it is said: its group row in the list, the day's own
 * head, the month's panel. The hue is the ground's; the word is always there. */
[data-day-name], #day-name, #cal-panel [data-cal="day-name"] {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: var(--v-r-pill);
  font-family: var(--ui); font-size: 16px; font-weight: 700; line-height: 1; white-space: nowrap; }
[data-day-name][data-ground^="kept"], #day-name[data-ground^="kept"], #cal-panel [data-cal="day-name"][data-ground^="kept"] {
  background: var(--ok-tint); color: var(--ok-ink); }
[data-day-name][data-ground^="broke"], #day-name[data-ground^="broke"], #cal-panel [data-cal="day-name"][data-ground^="broke"] {
  background: var(--break-tint); color: var(--break-ink); }
[data-day-name][data-ground="waiting"], #day-name[data-ground="waiting"], #cal-panel [data-cal="day-name"][data-ground="waiting"] {
  color: var(--attention); box-shadow: inset 0 0 0 1px currentColor; }
[data-day-name][data-ground="oneAndDone"], #day-name[data-ground="oneAndDone"], #cal-panel [data-cal="day-name"][data-ground="oneAndDone"] {
  background: var(--ok-ink); color: var(--fill-raised); }
#cal-panel [data-cal="day-name"] { justify-self: start; margin: 0 0 10px; }
#day-name { align-self: center; }

/* ---- The month: what paints a day --------------------------------------------
 * The Mac's ground rule (journal-calendar.js, `CalGround`): every rule kept is
 * green, deeper with the positions; a rule broke is red, deeper with the
 * breaks; One and Done is the one solid cell; nobody has answered is a brass
 * edge and nothing painted; nothing recorded is the raised ground.
 *
 * The grid is cells on the page with a gap, not a ruled table: the solid
 * cell's glow has to leave its cell, and the grid clipped it. */
#cal-grid { gap: 6px; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
#cal-grid > div { gap: 6px; background: none; }
#cal-grid > div > * { border-radius: var(--v-r-s); }
#cal-grid > div > [data-ground], #cal-grid > div > button, #cal-grid > div > [aria-label] {
  box-shadow: inset 0 0 0 1px var(--line-hairline); }

/* The wash: the hue under an opacity, over whatever the cell already is, so
 * the pointer's own ground still shows through it. */
#cal-grid [data-ground] { position: relative; isolation: isolate; }
#cal-grid [data-ground]::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  pointer-events: none; opacity: 0; }
#cal-grid [data-ground^="kept"]::before { background: var(--ok); }
#cal-grid [data-ground^="broke"]::before { background: var(--break); }
#cal-grid [data-ground$="-light"]::before { opacity: .12; }
#cal-grid [data-ground$="-deeper"]::before { opacity: .2; }
#cal-grid [data-ground$="-deepest"]::before { opacity: .3; }
/* A day that holds a break was a pink cell (app.css, `.is-broke`); the wash
 * says it now, and says how much. */
#cal-grid button[data-ground^="broke"] { background-color: var(--fill-raised); }
#cal-grid button[data-ground^="broke"]:hover { background-color: var(--fill-stripe); }
#cal-grid > div > [data-ground^="kept"], #cal-grid > div > [data-ground^="broke"] { box-shadow: none; }
/* A painted week is washed over the raised fill, as a day is. Over the week
 * column's own fill, which the website paints a step darker than the app's,
 * "1 break" in the break's ink on a green week read 4.0:1. */
#cal-grid > div > span[data-ground^="kept"], #cal-grid > div > span[data-ground^="broke"] { background-color: var(--fill-raised); }

/* Nobody has answered: a brass left edge, and nothing painted. */
#cal-grid > div > [data-ground="waiting"] { box-shadow: inset 4px 0 0 var(--attention), inset 0 0 0 1px var(--line-hairline); }

/* One and Done: the one opaque cell, and it glows. The website's jade under
 * white words reads 4.4:1, a hair under what a line this size needs, so the
 * light register's solid is the deeper jade the kit keeps for words. */
#cal-grid [data-ground="oneAndDone"]::before { background: var(--ok-ink); opacity: 1; }
#cal-grid > div > [data-ground="oneAndDone"] { box-shadow: 0 0 18px var(--v-jade-glow); }
/* Its name is the one set larger, and it may take the line the marks left
 * empty: the cell is the mark, so no circle is drawn on it. */
#cal-grid [data-ground="oneAndDone"] [data-cal="verdict"] { font-size: 18px; font-weight: 800; line-height: 1.1;
  letter-spacing: -0.01em; white-space: normal; overflow: visible; }

/* The words over a ground: each line's ink is the one the rule names
 * (`CalGround.inks`). A hue's own ink reads only on the light fill. */
#cal-grid [data-ground] [data-ink="primary"] { color: var(--ink-primary); }
#cal-grid [data-ground] [data-ink="secondary"] { color: var(--ink-secondary); }
#cal-grid [data-ground^="kept"] [data-ink="hue"] { color: var(--ok-ink); }
#cal-grid [data-ground^="broke"] [data-ink="hue"], #cal-grid [data-ground] [data-ink="break"] { color: var(--break-ink); }
#cal-grid [data-ground="waiting"] [data-ink="hue"] { color: var(--attention); }
#cal-grid [data-ground="none"] [data-ink="hue"] { color: var(--ink-secondary); }
#cal-grid [data-ground="oneAndDone"] [data-ink="onSolid"] { color: var(--fill-raised); }

/* The cell's lines: the name under the date, the marks under the name, the
 * figure and the count at the foot. */
#cal-grid [data-cal="verdict"] { font-family: var(--ui); font-size: 16px; font-weight: 700; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cal-grid [data-cal="marks"] { display: flex; min-height: 9px; }
#cal-grid [data-cal="foot"] { flex-wrap: wrap; row-gap: 2px; }
#cal-grid [data-cal="foot"] > :last-child { font-size: 16px; }
#cal-ground { margin-top: 6px; max-width: 760px; }

/* A phone's cell is about 50px inside: the name is in the day's reading and in
 * the panel under the grid, and the cell keeps its date, its marks and its
 * colour. */
@media (max-width: 760px) {
  #cal-grid, #cal-grid > div { gap: 4px; }
  #cal-grid [data-cal="verdict"] { display: none; }
  #cal-grid > div > [data-ground="oneAndDone"] { box-shadow: 0 0 10px var(--v-jade-glow); }
}

/* ---- A day -------------------------------------------------------------------
 * Its facts as cards, the figure in the figures' face. */
#day-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
  padding: 16px 0 20px; border: 0; }
#day-stats > div { min-width: 0; padding: 16px 18px; border-radius: var(--v-r-m); background: var(--fill-raised);
  box-shadow: var(--shadow-card); }
#day-stats > div > b { margin-top: 4px; font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }

/* ---- Coach -------------------------------------------------------------------
 * The answer is Markdown drawn as elements (journal-coach.js, `coachNodes`):
 * a line somebody reads is 17px, and nothing here is under 16. */
[data-coach="question"], [data-coach="answer"] { font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
[data-coach="answer"] > * { margin: 0; }
[data-coach="answer"] > * + * { margin-top: 10px; }
[data-md="heading"] { font-family: var(--ui); font-size: 19px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
[data-coach="answer"] > [data-md="heading"]:not(:first-child) { margin-top: 18px; }
[data-md="list"] { padding-left: 24px; }
[data-md="list"] > li + li { margin-top: 4px; }
[data-md="rule"] { border: 0; border-top: 1px solid var(--line-hairline); }
[data-md="code"], [data-coach="answer"] code { font-family: var(--figures); font-size: 16px;
  background: var(--fill-neutralChip); border-radius: 6px; }
[data-coach="answer"] code { padding: 1px 5px; }
[data-md="code"] { padding: 10px 12px; overflow-x: auto; white-space: pre; }
[data-md="table"] { max-width: 100%; overflow-x: auto; }
[data-md="table"] > table { border-collapse: collapse; font-size: 16px; }
[data-md="table"] th { padding: 8px 12px 8px 0; text-align: left; white-space: nowrap;
  font-family: var(--figures); font-size: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-secondary); border-bottom: 1px solid var(--line-chrome); }
[data-md="table"] td { padding: 8px 12px 8px 0; vertical-align: top; border-bottom: 1px solid var(--line-hairline); }
/* The days an answer cites, each a chip that opens that day. */
[data-coach="cited"] { margin-top: 12px; }

/* ---- Dark ----------------------------------------------------------------------
 * Pinned (`data-theme="dark"` on the page) and Auto on a dark device (no pin).
 * The washes are the Mac's dark alphas (.14 / .24 / .36), a step over the
 * light ones, because the same alpha of a brighter hue on a dark ground takes
 * less of the words' contrast (CalendarGround.alpha). The solid cell is the
 * register's own green under the page's dark ink, as the Mac draws it. And
 * the kit's outlined button is drawn in the website's ink, which is the dark
 * of the light table: inside the journal it takes the register's. */
[data-theme="dark"] #cal-grid [data-ground$="-light"]::before { opacity: .14; }
[data-theme="dark"] #cal-grid [data-ground$="-deeper"]::before { opacity: .24; }
[data-theme="dark"] #cal-grid [data-ground$="-deepest"]::before { opacity: .36; }
[data-theme="dark"] #cal-grid [data-ground="oneAndDone"]::before { background: var(--ok); opacity: 1; }
[data-theme="dark"] #cal-grid [data-ground="oneAndDone"] [data-ink="onSolid"] { color: var(--fill-page); }
[data-theme="dark"] :is([data-day-name], #day-name, #cal-panel [data-cal="day-name"])[data-ground="oneAndDone"] {
  background: var(--ok); color: var(--fill-page); }
[data-theme="dark"] #main .k-btn-secondary { color: var(--ink-primary); box-shadow: inset 0 0 0 2px var(--ink-primary); }
@media (prefers-color-scheme: dark) {
  body:not([data-theme]) #cal-grid [data-ground$="-light"]::before { opacity: .14; }
  body:not([data-theme]) #cal-grid [data-ground$="-deeper"]::before { opacity: .24; }
  body:not([data-theme]) #cal-grid [data-ground$="-deepest"]::before { opacity: .36; }
  body:not([data-theme]) #cal-grid [data-ground="oneAndDone"]::before { background: var(--ok); opacity: 1; }
  body:not([data-theme]) #cal-grid [data-ground="oneAndDone"] [data-ink="onSolid"] { color: var(--fill-page); }
  body:not([data-theme]) :is([data-day-name], #day-name, #cal-panel [data-cal="day-name"])[data-ground="oneAndDone"] {
    background: var(--ok); color: var(--fill-page); }
  body:not([data-theme]) #main .k-btn-secondary { color: var(--ink-primary); box-shadow: inset 0 0 0 2px var(--ink-primary); }
}


/* ---- /admin: the owner's page ----------------------------------------------
 * design/website-v2/Admin.dc.html (HANDOFF.md, part 10), over the kit and
 * app.css. The page is drawn by site/admin.js, so most of what it wears is
 * built at runtime and tools/css-used-gate.mjs cannot see it: a class named in
 * this sheet has to be worn in admin.html itself. So what the script builds is
 * hooked on what it already writes (an id, `data-act`, the shared `name` of a
 * row's sheet) or on `data-adm`, and the only classes named here are ones
 * admin.html wears. Everything is under #admin or #main so nothing reaches the
 * web journal, which links this sheet too. No colour is typed: each is the
 * website's token. Dark since 14 Oct 2026, as the whole website is: admin.html
 * is not a `.k-system` region and has no appearance switch, so it wears the
 * website's table at :root (HANDOFF.md part 11).
 *
 * Where app.css must lose (its admin rules are 13 and 14px, square, and hold
 * the row's menu inside the cell), the rule here out-specifies it with the id.
 * Nothing is set under 16px: on this page a label is a line the owner reads. */

/* Whose sign-in this is, in the bar (the board's "signed in as the owner").
 * app.css hides `.who` in every bar since the journal's bar lost room for it;
 * this bar is the wide one, only admin.html has it, and here the address is
 * how the owner knows which account he is acting from. It shortens with an
 * ellipsis before it pushes a button off. */
.bar-row-wide .bar-right > .who { display: block; max-width: 34ch; font-family: var(--v-figures); font-size: 16px;
  color: var(--v-ink2); }
@media (max-width: 560px) { .bar-row-wide .bar-right > .who { display: none; } }

/* The page's title: the week, in the display face. */
#admin > [data-adm="title"] { margin: 8px 0 0; font-family: var(--v-display); font-stretch: 62%; font-weight: 900;
  text-transform: uppercase; font-size: clamp(36px, 4.4vw, 56px); line-height: .94; letter-spacing: 0;
  color: var(--v-ink); }

/* This week: four figures. */
#admin [data-adm="tiles"] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin: 14px 0 0; }
#admin [data-adm="tile"] { min-width: 0; padding: 18px 20px; border-radius: var(--v-r-m);
  background: var(--v-card); box-shadow: var(--v-shadow-card); }
#admin [data-adm="v"] { margin: 0; font-family: var(--v-figures); font-weight: 700;
  font-size: clamp(28px, 3vw, 40px); line-height: 1; letter-spacing: -0.02em; color: var(--v-ink);
  overflow-wrap: anywhere; }
#admin [data-adm="of"] { font-size: 20px; font-weight: 500; letter-spacing: 0; color: var(--v-ink2); }
#admin [data-adm="l"] { margin: 8px 0 0; font-size: 16px; line-height: 1.4; color: var(--v-ink2); }
/* The figure the page cannot count yet: an outline, and words where the
 * number would be, so it cannot be read as a count of none. */
#admin [data-adm="tile"][data-empty] { background: none; box-shadow: inset 0 0 0 1px var(--v-line2); }
#admin [data-empty] > [data-adm="v"] { font-family: var(--v-ui); font-size: 22px; line-height: 1.15;
  letter-spacing: 0; color: var(--v-ink2); }
@media (max-width: 980px) { #admin [data-adm="tiles"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { #admin [data-adm="tiles"] { grid-template-columns: minmax(0, 1fr); } }

/* A section's name: a small mono label, as the board has it. */
#admin > h2.sec { margin: 36px 0 10px; font-family: var(--v-figures); font-size: 16px; font-weight: 500;
  line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--v-ink2); }
#admin .fine { font-size: 16px; line-height: 1.5; }
#admin .panel { margin: 12px 0 0; padding: 18px 20px; border: 0; border-radius: var(--v-r-m);
  background: var(--v-card); box-shadow: inset 0 0 0 1px var(--v-line); }
#admin .sec-what code { font-size: 16px; }
#admin .btn.small, #main > .sheet .btn.small { min-height: 36px; padding: 0 14px; font-size: 16px; font-weight: 700; }

/* Customers: the four filters with their counts, the search, how many. */
#admin [data-adm="tools"] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 10px; }
#admin .seg { flex-wrap: wrap; gap: 2px; padding: 4px; border: 0; border-radius: var(--v-r-m);
  background: var(--v-paper2); }
#admin .seg-b { min-height: 36px; padding: 0 14px; border-radius: var(--v-r-pill); font-family: var(--v-ui);
  font-size: 16px; font-weight: 700; line-height: 1; color: var(--v-ink2); }
#admin .seg-b.is-on { background: var(--v-ink); color: var(--v-paper); box-shadow: none; }
#admin [data-adm="n"] { margin-left: 4px; font-family: var(--v-figures); font-weight: 500; }
#admin .search { flex: 1 1 220px; max-width: 320px; height: 44px; padding: 0 16px; font-size: 16px;
  border-radius: var(--v-r-pill); border: 1px solid var(--v-line2); background: var(--v-card); }
#admin .search:focus { border: 2px solid var(--v-ink); padding: 0 15px; }
#admin #count { margin: 0 0 0 auto; }

/* The tables: white, one hairline round them, mono labels over the columns. */
#admin .table-wrap { border: 0; border-radius: var(--v-r-m); background: var(--v-card);
  box-shadow: inset 0 0 0 1px var(--v-line); }
#admin .adm { font-size: 16px; }
#admin .adm th { padding: 12px 14px; font-family: var(--v-figures); font-size: 16px; font-weight: 500;
  line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--v-ink2);
  background: none; border-bottom: 1px solid var(--v-line2); }
#admin .adm td { padding: 12px 14px; border-bottom: 1px solid var(--v-line); vertical-align: middle; }
#admin .adm td.right { font-family: var(--v-figures); }
#admin .adm tbody > tr:last-child > td { border-bottom: 0; }
/* The row whose sheet is open. */
#admin .adm tr:has(details[open]) { background: var(--v-paper); }

/* The plan, as a pill. The word is the page's; access picks the tint. */
#admin [data-adm="pill"] { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px;
  border-radius: var(--v-r-pill); font-size: 16px; font-weight: 700; line-height: 1; white-space: nowrap;
  background: var(--v-paper2); color: var(--v-ink2); }
#admin [data-plan="paid"] { background: var(--v-jade-t); color: var(--v-jade-d); }
#admin [data-plan="trial"] { background: var(--v-amber-t); color: var(--v-amber-d); }
#admin [data-plan="comped"] { background: var(--v-track); color: var(--v-ink); }

/* A row's sheet. The summary is the row's one button; what it opens is held
 * at the side of the window (fixed, so the table's own scroll cannot clip it)
 * and only one is open at a time. */
#admin details[name="rowmenu"] > summary { display: inline-flex; align-items: center; min-height: 36px;
  padding: 0 14px; border: 0; border-radius: var(--v-r-pill); background: var(--v-card);
  box-shadow: inset 0 0 0 1px var(--v-line2); font-size: 16px; font-weight: 800; color: var(--v-ink2); }
#admin details[name="rowmenu"][open] > summary { background: var(--v-ink); color: var(--v-paper); box-shadow: none; }
#admin details[name="rowmenu"][open] > summary::after { color: inherit; }
#admin [data-adm="sheet"] { position: fixed; z-index: 30; top: 88px; right: 24px; display: block;
  width: min(420px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 112px); overflow: auto;
  padding: 22px 24px; border-radius: var(--v-r-l); background: var(--v-card); box-shadow: var(--v-shadow-pop);
  white-space: normal; text-align: left; }
#admin [data-adm="who"] { margin: 0; font-family: var(--v-figures); font-size: 16px; font-weight: 500;
  line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: var(--v-ink2);
  overflow-wrap: anywhere; }
#admin [data-adm="acts"] { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
#admin [data-adm="acts"] > [data-act] { min-height: 44px; margin: 0; padding: 0 14px; border: 0;
  border-radius: var(--v-r-pill); background: var(--v-card); box-shadow: inset 0 0 0 1px var(--v-line2);
  font-size: 16px; font-weight: 800; color: var(--v-ink2); }
#admin [data-adm="acts"] > [data-act]:hover { color: var(--v-ink); box-shadow: inset 0 0 0 1px var(--v-ink2); }
#admin [data-adm="acts"] > [data-act="comp"] { background: var(--v-ink); color: var(--v-paper); box-shadow: none; }
#admin [data-adm="acts"] > [data-act="delete"] { color: var(--v-hot-d); }
#admin [data-adm="lab"] { margin: 18px 0 2px; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--v-ink2); }
#admin [data-adm="devs"] > div, #admin [data-adm="devs"] details > div { display: flex; align-items: center;
  justify-content: space-between; gap: 10px; min-height: 44px; padding: 0; white-space: normal;
  border-top: 1px solid var(--v-line); }
#admin [data-adm="devs"] [data-act="revoke"] { flex: none; min-height: 44px; padding: 0 4px; font-size: 16px;
  font-weight: 700; color: var(--v-hot-d); text-decoration: underline; }
#admin [data-adm="devs"] summary { display: flex; align-items: center; min-height: 44px; font-size: 16px; }
#admin [data-adm="foot"] { display: flex; justify-content: flex-end; margin: 14px 0 0; }
#admin [data-adm="foot"] > button { min-height: 44px; }

/* Partners: the form's fields at a size a thumb can use. */
#admin #partner-form { margin-top: 14px; }
#admin #partner-form label { font-size: 16px; font-weight: 700; }
#admin #partner-form input { min-height: 44px; padding: 0 14px; font-size: 16px; border-radius: var(--v-r-s);
  border: 1px solid var(--v-line2); }
#admin #partner-form .fine { font-size: 16px; font-weight: 400; }
#admin #partner-form .pct-sign { font-size: 16px; }
#admin #partner-form .share-in { padding-right: 30px; }

/* The three dialogs: the action's question, an account's history, its
 * timeline. The same forms and the same buttons, in the website's card. */
#main > .sheet { border: 0; border-radius: var(--v-r-l); box-shadow: var(--v-shadow-pop); }
#main > .sheet h2 { font-size: 22px; font-weight: 800; line-height: 1.2; }
#main > .sheet .fine { font-size: 16px; line-height: 1.5; }
#main > .sheet label { font-size: 16px; font-weight: 700; }
#main > .sheet input, #main > .sheet textarea { min-height: 44px; font-size: 16px; border-radius: var(--v-r-s);
  border: 1px solid var(--v-line2); }
#main > .sheet .sheet-foot > .btn { min-height: 44px; }
#main > .sheet .adm { font-size: 16px; }
#main > .sheet .adm th { font-family: var(--v-figures); font-size: 16px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--v-ink2); background: none; }

/* A finger, or a phone: every control is 44 high, the rows stack as cards,
 * and the sheet comes up from the bottom edge. */
@media (pointer: coarse), (max-width: 760px) {
  #admin .btn.small, #main > .sheet .btn.small, #admin .seg-b,
  #admin details[name="rowmenu"] > summary { min-height: 44px; }
}
@media (max-width: 760px) {
  #admin #count { margin-left: 0; flex-basis: 100%; }
  #admin .search { flex-basis: 100%; max-width: none; }
  #admin .table-wrap { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
  #admin .adm tr { margin: 0 0 10px; border: 0; border-radius: var(--v-r-m); background: var(--v-card);
    box-shadow: inset 0 0 0 1px var(--v-line); }
  #admin .adm td { padding: 4px 14px; border-bottom: 0; overflow-wrap: anywhere; }
  #admin .adm td:first-child { padding-top: 14px; }
  #admin .adm td:last-child { padding-bottom: 14px; }
  #admin .adm td[data-l]::before { font-size: 16px; }
  #admin [data-adm="sheet"] { top: auto; right: 8px; bottom: 8px; left: 8px; width: auto; max-height: 80vh; }
}