/* ToolForge Design System 1.1.0 — revised 2026-08-10
 * Machine copy of DESIGN_SYSTEM.md. The prose wins on conflict and this file is then a bug.
 *
 * Built from two specification files in Claude Design project
 * 5ad56ae4-26c4-412b-ada6-85dbc0547533:
 *     ToolForge ds web1.dc.html      — the web layer
 *     ToolForge ds mobile1.dc.html   — the mobile layer
 *
 * FONTS ARE SELF-HOSTED. This stylesheet makes no third-party request. The 44 face rules
 * below name the 25 woff2 subsets in ./fonts/, which ship beside this file. Never replace
 * them with a hosted-font stylesheet request — that is the fault this release closes.
 *
 * Generated by _build_css.py. Edit that file, not this one.
 */

/* ------------------------------------------------------------------ 1 · FONTS */
@font-face {font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/geist-mono-329751fe.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face {font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/geist-mono-56f24e0d.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face {font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/geist-mono-a195c572.woff2') format('woff2'); unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;}
@font-face {font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/geist-mono-7ff35b19.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face {font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/geist-mono-41dbd4ad.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/geist-mono-101f830f.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/geist-mono-329751fe.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face {font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/geist-mono-56f24e0d.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face {font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/geist-mono-a195c572.woff2') format('woff2'); unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;}
@font-face {font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/geist-mono-7ff35b19.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face {font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/geist-mono-41dbd4ad.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/geist-mono-101f830f.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Geist Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/geist-mono-329751fe.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face {font-family: 'Geist Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/geist-mono-56f24e0d.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face {font-family: 'Geist Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/geist-mono-a195c572.woff2') format('woff2'); unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;}
@font-face {font-family: 'Geist Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/geist-mono-7ff35b19.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face {font-family: 'Geist Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/geist-mono-41dbd4ad.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Geist Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/geist-mono-101f830f.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/poppins-ae8f61e6.woff2') format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;}
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/poppins-90926c36.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/poppins-9212f6f9.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/poppins-0fba8261.woff2') format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;}
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/poppins-1f24684c.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/poppins-a09f2fcc.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/poppins-8de9fc06.woff2') format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;}
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/poppins-a575b6d9.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/poppins-72993ddd.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/poppins-5854492a.woff2') format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;}
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/poppins-367d2aa0.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/poppins-25b0e113.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Roboto Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/roboto-condensed-91b72f99.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face {font-family: 'Roboto Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/roboto-condensed-4b6dbec2.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face {font-family: 'Roboto Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/roboto-condensed-690168e1.woff2') format('woff2'); unicode-range: U+1F00-1FFF;}
@font-face {font-family: 'Roboto Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/roboto-condensed-70da1694.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face {font-family: 'Roboto Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/roboto-condensed-57663fa6.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face {font-family: 'Roboto Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/roboto-condensed-33e52238.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Roboto Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/roboto-condensed-9e5e9744.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Roboto Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/roboto-condensed-91b72f99.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face {font-family: 'Roboto Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/roboto-condensed-4b6dbec2.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face {font-family: 'Roboto Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/roboto-condensed-690168e1.woff2') format('woff2'); unicode-range: U+1F00-1FFF;}
@font-face {font-family: 'Roboto Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/roboto-condensed-70da1694.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face {font-family: 'Roboto Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/roboto-condensed-57663fa6.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face {font-family: 'Roboto Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/roboto-condensed-33e52238.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Roboto Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/roboto-condensed-9e5e9744.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ------------------------------------------------------------------ 2 · TOKENS */
:root {
  /* Colour — 27 values and no twenty-eighth. Core 6 */
  --tf-ink:#0B0B0B; --tf-ink-60:#45423D; --tf-muted:#8A857C;
  --tf-line:#DCD8D0; --tf-canvas:#F1EFEA; --tf-paper:#FFFFFF;

  /* Signal 10 */
  --tf-red:#C0111B; --tf-red-press:#96070F; --tf-red-tint:#FBE9EA; --tf-red-rev-tint:#FFD9DB;
  --tf-yellow:#FFC400; --tf-yellow-press:#E6B000; --tf-yellow-tint:#FFF6D6;
  --tf-yellow-text:#8A6A00; --tf-yellow-deep:#4A3F00; --tf-success:#157F3D;

  /* Support 11 */
  --tf-ink-line:#262626; --tf-ink-raised:#1A1A1A; --tf-ink-sunken:#141414;
  --tf-pipe-dark:#5E5E5E; --tf-pipe-light:#B6B1A8; --tf-muted-rev:#B8B4AE;
  --tf-code-rev:#D8D4CE; --tf-disabled:#C6C2BA; --tf-divider:#EEEBE5;
  --tf-zebra:#FAF9F6; --tf-shimmer:#F7F5F1;

  /* Families */
  --tf-font:'Poppins',system-ui,sans-serif;
  --tf-font-label:'Roboto Condensed',sans-serif;
  --tf-font-mono:'Geist Mono',ui-monospace,monospace;

  /* Size — the 20 published steps */
  --tf-size-numeral-xl:64px; --tf-size-display:56px; --tf-size-metric-l:44px;
  --tf-size-wordmark-page:42px; --tf-size-h1:40px; --tf-size-metric-m:40px;
  --tf-size-wordmark-footer:30px; --tf-size-h2:28px; --tf-size-head-404:26px;
  --tf-size-wordmark-nav:24px; --tf-size-panel-title:22px; --tf-size-h3:20px;
  --tf-size-card-title:19px; --tf-size-lead:18px; --tf-size-button-l:17px;
  --tf-size-body-l:16px; --tf-size-body:15px; --tf-size-small:14px;
  --tf-size-helper:13px; --tf-size-label:12px; --tf-size-label-s:11px;

  /* Size — mobile step-downs. These four are rendered by the mobile specification
     and are NOT in the 20-step table. Reported as defect T1 in DESIGN_SYSTEM.md. */
  --tf-size-m-display:34px; --tf-size-m-metric:32px;
  --tf-size-m-head-404:21px; --tf-size-m-meta-label:10px;

  /* Tracking — the 8 published values */
  --tf-track-metric:-0.03em; --tf-track-wordmark:-0.025em; --tf-track-h1:-0.02em;
  --tf-track-h3:-0.01em; --tf-track-body:0; --tf-track-service:0.11em;
  --tf-track-label:0.13em; --tf-track-section:0.18em;

  /* Tracking — the 5 values in use that the table does not publish.
     Reported as defect T2 in DESIGN_SYSTEM.md. */
  --tf-track-x-08:0.08em; --tf-track-x-09:0.09em; --tf-track-x-10:0.1em;
  --tf-track-x-12:0.12em; --tf-track-x-14:0.14em;

  /* Leading — 12 values */
  --tf-lead-numeral:1; --tf-lead-display:1.05; --tf-lead-h1:1.15; --tf-lead-h2:1.25;
  --tf-lead-h3:1.35; --tf-lead-quote:1.4; --tf-lead-caption:1.55; --tf-lead-body-tight:1.6;
  --tf-lead-lead:1.65; --tf-lead-body:1.7; --tf-lead-body-long:1.75; --tf-lead-terminal:1.9;

  /* Spacing tier 1 — layout only, strict 4px grid.
     Component padding is tabulated per component and is NOT drawn from this list. */
  --tf-space-1:4px;  --tf-space-2:8px;  --tf-space-3:12px; --tf-space-4:16px;
  --tf-space-5:20px; --tf-space-6:24px; --tf-space-8:32px; --tf-space-10:40px;
  --tf-space-12:48px; --tf-space-14:56px; --tf-space-16:64px; --tf-space-30:120px;

  /* Borders — six roles */
  --tf-border-hairline:1px; --tf-border-control:2px; --tf-border-rule:3px;
  --tf-border-ring:4px; --tf-border-accent:6px; --tf-border-portrait:8px;

  /* Corners — two values, no third */
  --tf-radius-ui:0; --tf-radius-round:50%;

  /* Mobile touch targets. Derived from the mobile specification's own controls;
     no prose in that file names them. Reported as defect T3. */
  --tf-touch-l:56px; --tf-touch-m:52px; --tf-touch-s:48px; --tf-touch-min:44px;

  /* Frame */
  --tf-frame-max:1440px;
  --tf-frame-pad:56px 48px 120px;
  --tf-frame-gap:64px;
}

/* ------------------------------------------------------------------ 3 · BASE */
.tf-root { margin:0; background:var(--tf-canvas); color:var(--tf-ink);
  font-family:var(--tf-font); font-size:var(--tf-size-body);
  -webkit-font-smoothing:antialiased; }
.tf-frame { max-width:var(--tf-frame-max); margin:0 auto; padding:var(--tf-frame-pad);
  display:flex; flex-direction:column; gap:var(--tf-frame-gap); }
.tf-root a { color:var(--tf-red); text-decoration:underline; text-underline-offset:2px; }
.tf-root a:hover { color:var(--tf-red-press); }
@keyframes tf-spin { to { transform:rotate(360deg); } }
@keyframes tf-shimmer { 0% { background-position:-320px 0; } 100% { background-position:320px 0; } }

/* ------------------------------------------------------------------ 4 · TYPE */
.tf-display { font-size:var(--tf-size-display); font-weight:600; letter-spacing:var(--tf-track-h1); line-height:var(--tf-lead-display); }
.tf-h1 { font-size:var(--tf-size-h1); font-weight:600; letter-spacing:var(--tf-track-h1); line-height:var(--tf-lead-h1); }
.tf-h2 { font-size:var(--tf-size-h2); font-weight:600; letter-spacing:var(--tf-track-h1); line-height:var(--tf-lead-h2); }
.tf-h3 { font-size:var(--tf-size-h3); font-weight:600; letter-spacing:var(--tf-track-h3); line-height:var(--tf-lead-h3); }
.tf-lead { font-size:var(--tf-size-lead); line-height:var(--tf-lead-lead); }
.tf-body { font-size:var(--tf-size-body); line-height:var(--tf-lead-body); }
.tf-body-l { font-size:var(--tf-size-body-l); line-height:var(--tf-lead-body-long); }
.tf-small { font-size:var(--tf-size-small); line-height:var(--tf-lead-caption); }
.tf-helper { font-size:var(--tf-size-helper); color:var(--tf-muted); line-height:var(--tf-lead-caption); }
.tf-label { font-family:var(--tf-font-label); font-weight:700; font-size:var(--tf-size-label);
  letter-spacing:var(--tf-track-label); }
.tf-label-s { font-family:var(--tf-font-label); font-weight:700; font-size:var(--tf-size-label-s);
  letter-spacing:var(--tf-track-service); }
.tf-mono { font-family:var(--tf-font-mono); font-size:var(--tf-size-small); }
.tf-section-no { font-family:var(--tf-font-label); font-weight:700; font-size:var(--tf-size-helper);
  letter-spacing:var(--tf-track-section); color:var(--tf-muted); }

/* ------------------------------------------------------------------ 5 · LOCKUP
   RULE 1 — the mark is Ink on light or white on dark. Never red, never tinted.
   RULE 2 — on dark, every part carries an explicit fill. Nothing inherits.
   These two selectors exist so a violation is visible in review, not to be overridden. */
.tf-mark { display:block; flex:none; }
.tf-mark--ink path { fill:#0B0B0B; }
.tf-mark--rev path { fill:#FFFFFF; }
.tf-lockup { display:flex; align-items:center; }
.tf-lockup__word { font-weight:600; letter-spacing:var(--tf-track-wordmark); line-height:1; }
.tf-lockup--rev .tf-lockup__word { color:#FFFFFF; }
.tf-service { font-family:var(--tf-font-label); font-weight:700; text-transform:uppercase;
  letter-spacing:var(--tf-track-service); display:flex; align-items:center; }
.tf-service--rev { color:#FFFFFF; }
.tf-service__pipe { color:var(--tf-pipe-dark); }
.tf-service--on-light .tf-service__pipe { color:var(--tf-pipe-light); }

/* ------------------------------------------------------------------ 6 · BUTTONS */
.tf-btn { font-family:var(--tf-font); font-size:var(--tf-size-body); font-weight:600;
  border:var(--tf-border-control) solid transparent; border-radius:var(--tf-radius-ui);
  padding:12px 26px; cursor:pointer; display:inline-flex; align-items:center;
  justify-content:center; gap:10px; }
.tf-btn--primary { color:#fff; background:var(--tf-red); border-color:var(--tf-red); }
.tf-btn--primary:hover { background:var(--tf-red-press); border-color:var(--tf-red-press); }
.tf-btn--secondary { color:var(--tf-ink); background:var(--tf-paper); border-color:var(--tf-ink); }
.tf-btn--secondary:hover { background:var(--tf-ink); color:#fff; }
.tf-btn--highlight { color:var(--tf-ink); background:var(--tf-yellow); border-color:var(--tf-yellow); }
.tf-btn--highlight:hover { background:var(--tf-yellow-press); border-color:var(--tf-yellow-press); }
.tf-btn--ghost { color:var(--tf-ink); background:transparent; padding:12px 20px;
  text-decoration:underline; text-underline-offset:4px; }
.tf-btn--ghost:hover { color:var(--tf-red); }
.tf-btn--disabled, .tf-btn:disabled { color:var(--tf-muted); background:var(--tf-canvas);
  border-color:var(--tf-line); cursor:not-allowed; }
.tf-btn--mark { color:#fff; background:var(--tf-ink); border-color:var(--tf-ink); padding:12px 22px; }
.tf-btn--mark:hover { background:var(--tf-red); border-color:var(--tf-red); }
.tf-btn--s { font-size:var(--tf-size-helper); padding:8px 18px; }
.tf-btn--l { font-size:var(--tf-size-button-l); padding:16px 34px; }

/* ------------------------------------------------------------------ 7 · FORMS */
.tf-field { display:flex; flex-direction:column; gap:8px; }
.tf-field__label { font-family:var(--tf-font-label); font-weight:700; font-size:var(--tf-size-label);
  letter-spacing:var(--tf-track-label); color:var(--tf-ink); }
.tf-input, .tf-textarea, .tf-select { font-family:var(--tf-font); font-size:var(--tf-size-body);
  color:var(--tf-ink); padding:12px 14px; border:var(--tf-border-control) solid var(--tf-ink);
  background:var(--tf-paper); border-radius:var(--tf-radius-ui); outline:none;
  min-width:0; width:100%; box-sizing:border-box; }
.tf-input:focus, .tf-textarea:focus, .tf-select:focus { border-color:var(--tf-red); }
.tf-textarea { resize:vertical; }
.tf-select { padding:12px 44px 12px 14px; appearance:none; }
.tf-select-wrap { position:relative; display:flex; }
.tf-select-wrap::after { content:'\25BE'; position:absolute; right:14px; top:50%;
  transform:translateY(-50%); font-family:var(--tf-font-mono); font-size:var(--tf-size-body);
  color:var(--tf-ink); pointer-events:none; }
.tf-field--error .tf-field__label, .tf-field--error .tf-helper { color:var(--tf-red); }
.tf-input--error { font-family:var(--tf-font-mono); border-color:var(--tf-red);
  background:var(--tf-red-tint); }
.tf-input:disabled, .tf-input--disabled { color:var(--tf-muted); border-color:var(--tf-line);
  background:var(--tf-canvas); }
.tf-check { width:20px; height:20px; border:var(--tf-border-control) solid var(--tf-ink);
  background:var(--tf-paper); display:flex; align-items:center; justify-content:center; flex:none; }
.tf-check--on { background:var(--tf-red); }
.tf-check--on::after { content:''; width:8px; height:8px; background:#fff; }
.tf-radio { width:20px; height:20px; border:var(--tf-border-control) solid var(--tf-ink);
  border-radius:var(--tf-radius-round); background:var(--tf-paper); display:flex;
  align-items:center; justify-content:center; flex:none; }
.tf-radio--on::after { content:''; width:9px; height:9px; border-radius:var(--tf-radius-round);
  background:var(--tf-red); }
.tf-toggle { width:52px; height:28px; padding:0 3px; box-sizing:border-box; display:flex;
  align-items:center; cursor:pointer; background:var(--tf-paper);
  border:var(--tf-border-control) solid var(--tf-line); justify-content:flex-start; }
.tf-toggle__knob { width:20px; height:20px; background:var(--tf-line); }
.tf-toggle--on { background:var(--tf-red); border-color:var(--tf-red); justify-content:flex-end; }
.tf-toggle--on .tf-toggle__knob { background:#fff; }
.tf-range { height:6px; background:var(--tf-line); position:relative; }
.tf-range__fill { position:absolute; left:0; top:0; bottom:0; background:var(--tf-ink); }
.tf-range__thumb { position:absolute; top:-7px; width:20px; height:20px; background:var(--tf-red);
  margin-left:-10px; }

/* ------------------------------------------------------------------ 8 · STATUS */
.tf-badge { font-family:var(--tf-font-label); font-weight:700; font-size:var(--tf-size-label);
  letter-spacing:var(--tf-track-service); padding:6px 12px; display:inline-block; }
.tf-badge--default { background:var(--tf-ink); color:#fff; }
.tf-badge--failed { background:var(--tf-red); color:#fff; }
.tf-badge--degraded { background:var(--tf-yellow); color:var(--tf-ink); }
.tf-badge--healthy { background:var(--tf-success); color:#fff; }
.tf-badge--outline { background:var(--tf-paper); color:var(--tf-ink);
  border:var(--tf-border-control) solid var(--tf-ink); padding:4px 12px; }
.tf-badge--muted { background:var(--tf-canvas); color:var(--tf-ink-60); }
.tf-badge--cell { font-size:var(--tf-size-label-s); padding:5px 10px; }
.tf-dot { width:9px; height:9px; border-radius:var(--tf-radius-round); display:inline-block; flex:none; }
.tf-alert { display:flex; gap:16px; padding:16px 20px;
  border-left:var(--tf-border-accent) solid var(--tf-ink); background:var(--tf-canvas); }
.tf-alert__glyph { font-family:var(--tf-font-mono); font-weight:700;
  font-size:var(--tf-size-body); flex:none; }
.tf-alert--error { background:var(--tf-red-tint); border-left-color:var(--tf-red); }
.tf-alert--error .tf-alert__glyph { color:var(--tf-red); }
.tf-alert--error .tf-alert__title { color:var(--tf-red-press); }
.tf-alert--warn { background:var(--tf-yellow-tint); border-left-color:var(--tf-yellow); }
.tf-toast { display:flex; gap:20px; align-items:center; background:var(--tf-ink);
  padding:16px 20px; color:#fff; }
.tf-toast__action { font-family:var(--tf-font-label); font-weight:700;
  font-size:var(--tf-size-label); letter-spacing:var(--tf-track-service);
  color:var(--tf-yellow); cursor:pointer; }

/* ------------------------------------------------------------------ 9 · CARDS & METRICS */
.tf-card { background:var(--tf-paper); border:var(--tf-border-hairline) solid var(--tf-line);
  border-radius:var(--tf-radius-ui); }
.tf-metric { background:var(--tf-paper); border:var(--tf-border-hairline) solid var(--tf-line);
  border-top:var(--tf-border-accent) solid var(--tf-ink); padding:24px 26px 26px;
  display:flex; flex-direction:column; gap:10px; min-width:0; }
.tf-metric__label { font-family:var(--tf-font-label); font-weight:700;
  font-size:var(--tf-size-label); letter-spacing:var(--tf-track-label); color:var(--tf-muted); }
.tf-metric__value { font-size:var(--tf-size-metric-l); font-weight:600;
  letter-spacing:var(--tf-track-metric); line-height:var(--tf-lead-numeral); color:var(--tf-ink); }
.tf-metric__unit { font-size:var(--tf-size-panel-title); font-weight:400; color:var(--tf-muted); }
.tf-metric__foot { font-size:var(--tf-size-small); font-weight:500; }
.tf-metric--positive { border-top-color:var(--tf-success); }
.tf-metric--positive .tf-metric__foot { color:var(--tf-success); }
.tf-metric--advisory { border-top-color:var(--tf-yellow); }
.tf-metric--advisory .tf-metric__foot { color:var(--tf-yellow-text); }
.tf-metric--critical { border-top-color:var(--tf-red); }
.tf-metric--critical .tf-metric__foot { color:var(--tf-red); }
.tf-metric--unavailable { border-top:var(--tf-border-hairline) solid var(--tf-line); }
.tf-metric--solid { border:none; padding:26px; color:#fff; }
.tf-metric--solid .tf-metric__label, .tf-metric--solid .tf-metric__value,
.tf-metric--solid .tf-metric__foot, .tf-metric--solid .tf-metric__unit { color:#fff; }
.tf-metric--solid-yellow { background:var(--tf-yellow); }
.tf-metric--solid-yellow .tf-metric__label, .tf-metric--solid-yellow .tf-metric__value,
.tf-metric--solid-yellow .tf-metric__foot, .tf-metric--solid-yellow .tf-metric__unit { color:var(--tf-ink); }
.tf-card__cap { height:var(--tf-border-accent); background:var(--tf-red); }
.tf-chip { font-family:var(--tf-font-label); font-weight:700; font-size:var(--tf-size-label);
  letter-spacing:var(--tf-track-service); background:var(--tf-canvas); color:var(--tf-ink-60);
  padding:6px 12px; }
.tf-avatar { border-radius:var(--tf-radius-round); border:var(--tf-border-ring) solid var(--tf-ink);
  box-sizing:border-box; flex:none; }
.tf-text-action { font-family:var(--tf-font-label); font-weight:700; font-size:var(--tf-size-helper);
  letter-spacing:var(--tf-track-service); color:var(--tf-red); text-decoration:none; }

/* ------------------------------------------------------------------ 10 · TABLE */
.tf-table { background:var(--tf-paper); border:var(--tf-border-hairline) solid var(--tf-line); }
.tf-table__head { background:var(--tf-ink); color:#fff; font-family:var(--tf-font-label);
  font-weight:700; font-size:var(--tf-size-label); letter-spacing:var(--tf-track-label);
  padding:14px 20px; }
.tf-table__row { font-size:var(--tf-size-body); padding:16px 20px;
  border-bottom:var(--tf-border-hairline) solid var(--tf-divider); }
.tf-table__row--zebra { background:var(--tf-zebra); }
.tf-table__cell-mono { font-family:var(--tf-font-mono); font-size:var(--tf-size-small); }
.tf-table__foot { padding:16px 20px; border-top:var(--tf-border-hairline) solid var(--tf-line); }
.tf-page-chip { font-family:var(--tf-font-mono); font-size:var(--tf-size-small);
  padding:8px 14px; border:var(--tf-border-control) solid var(--tf-line); cursor:pointer; }
.tf-page-chip--on { background:var(--tf-ink); color:#fff; border-color:var(--tf-ink); }

/* ------------------------------------------------------------------ 11 · NAVIGATION */
.tf-topbar { background:var(--tf-ink); height:76px; padding:0 28px; display:flex;
  align-items:center; justify-content:space-between; }
.tf-topbar__word { font-size:var(--tf-size-wordmark-nav); font-weight:600;
  letter-spacing:var(--tf-track-h1); color:#fff; }
.tf-navlink { font-size:var(--tf-size-body); font-weight:500; color:var(--tf-muted); cursor:pointer; }
.tf-navlink:hover { color:#fff; }
.tf-navlink--on { color:#fff; border-bottom:var(--tf-border-rule) solid var(--tf-red);
  padding-bottom:4px; }
.tf-sitenav { border-bottom:var(--tf-border-hairline) solid var(--tf-ink-line); }
.tf-sidebar { width:260px; background:var(--tf-paper);
  border:var(--tf-border-hairline) solid var(--tf-line); padding:20px 0; }
.tf-sidebar__head { font-family:var(--tf-font-label); font-weight:700;
  font-size:var(--tf-size-label); letter-spacing:var(--tf-track-label);
  color:var(--tf-muted); padding:0 22px 12px; }
.tf-sidebar__item { padding:12px 22px; font-size:var(--tf-size-body); color:var(--tf-ink-60);
  border-left:var(--tf-border-ring) solid transparent; cursor:pointer; }
.tf-sidebar__item:hover { background:var(--tf-zebra); }
.tf-sidebar__item--on { background:var(--tf-canvas); border-left-color:var(--tf-red);
  font-weight:600; color:var(--tf-ink); }
.tf-crumb { font-family:var(--tf-font-label); font-weight:700; font-size:var(--tf-size-label);
  letter-spacing:var(--tf-track-x-12); color:var(--tf-muted); }
.tf-crumb--on { color:var(--tf-ink); }
.tf-tabs { border-bottom:var(--tf-border-control) solid var(--tf-line); display:flex; }
.tf-tab { font-size:var(--tf-size-body); padding:12px 22px; color:var(--tf-ink-60); cursor:pointer; }
.tf-tab--on { font-weight:600; color:var(--tf-ink);
  border-bottom:var(--tf-border-rule) solid var(--tf-ink); margin-bottom:-2px; }
.tf-dropdown { border:var(--tf-border-control) solid var(--tf-ink); background:var(--tf-paper);
  width:240px; }
.tf-dropdown__trigger { padding:11px 16px; font-size:var(--tf-size-body); display:flex;
  justify-content:space-between; align-items:center; cursor:pointer; }
.tf-dropdown__list { border-top:var(--tf-border-control) solid var(--tf-ink); }
.tf-dropdown__item { padding:10px 16px; font-size:var(--tf-size-body); cursor:pointer; }
.tf-dropdown__item:hover { background:var(--tf-canvas); }
.tf-dropdown__item--on { background:var(--tf-canvas); }
.tf-dropdown__item--danger { color:var(--tf-red); }
.tf-dropdown__item--danger:hover { background:var(--tf-red-tint); }

/* ------------------------------------------------------------------ 12 · OVERLAYS */
.tf-scrim { background:var(--tf-ink-60); padding:44px; display:flex; align-items:center;
  justify-content:center; }
.tf-dialog { background:var(--tf-paper); max-width:520px;
  border:var(--tf-border-rule) solid var(--tf-ink); box-sizing:border-box; }
.tf-dialog__head { padding:28px 32px 0; display:flex; flex-direction:column; gap:12px; }
.tf-dialog__title { font-size:var(--tf-size-wordmark-nav); font-weight:600;
  letter-spacing:var(--tf-track-h1); }
.tf-dialog__foot { display:flex; justify-content:flex-end; gap:12px; padding:26px 32px 28px; }
.tf-progress { height:8px; background:var(--tf-line); }
.tf-progress__fill { height:100%; background:var(--tf-red); }
.tf-spinner { width:28px; height:28px; border:var(--tf-border-rule) solid var(--tf-line);
  border-top-color:var(--tf-red); border-radius:var(--tf-radius-round);
  animation:tf-spin 0.8s linear infinite; }
.tf-skeleton { height:14px; background:linear-gradient(90deg,#EEEBE5 0%,#F7F5F1 50%,#EEEBE5 100%);
  background-size:320px 100%; animation:tf-shimmer 1.4s linear infinite; }
.tf-empty { padding:36px 28px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.tf-empty .tf-mark { opacity:0.25; }

/* ------------------------------------------------------------------ 13 · TERMINAL & CODE */
.tf-terminal { background:var(--tf-ink); }
.tf-terminal__head { padding:14px 20px; display:flex; align-items:center; gap:12px;
  border-bottom:var(--tf-border-hairline) solid var(--tf-ink-line); }
.tf-terminal__title { font-family:var(--tf-font-label); font-weight:700;
  font-size:var(--tf-size-label); letter-spacing:var(--tf-track-x-12); color:var(--tf-muted); }
.tf-terminal__body { padding:22px 24px; font-family:var(--tf-font-mono);
  font-size:var(--tf-size-small); line-height:var(--tf-lead-terminal); color:#fff; }
.tf-terminal__prompt { color:var(--tf-yellow); }
.tf-terminal__arrow { color:var(--tf-muted); }
.tf-terminal__ok { color:var(--tf-success); }
.tf-terminal__fail { color:var(--tf-red); }
.tf-code { background:var(--tf-ink-sunken); border:var(--tf-border-control) solid var(--tf-ink-line);
  padding:22px 24px; overflow-x:auto; font-family:var(--tf-font-mono); font-size:12.5px;
  line-height:var(--tf-lead-body-long); color:var(--tf-code-rev); white-space:pre; }
.tf-tooltip { background:var(--tf-ink); color:#fff; font-size:var(--tf-size-helper);
  padding:8px 12px; }

/* ------------------------------------------------------------------ 14 · INPUT MODULES */
.tf-search { display:flex; border:var(--tf-border-control) solid var(--tf-ink);
  background:var(--tf-paper); }
.tf-search__prefix { font-family:var(--tf-font-mono); font-size:var(--tf-size-body);
  color:var(--tf-muted); padding:11px 14px;
  border-right:var(--tf-border-control) solid var(--tf-ink); }
.tf-search__btn { background:var(--tf-ink); color:#fff; padding:0 20px; border:none; cursor:pointer; }
.tf-search__btn:hover { background:var(--tf-red); }
.tf-filter-chip { background:var(--tf-ink); color:#fff; padding:8px 14px; display:inline-flex;
  align-items:center; gap:9px; font-size:var(--tf-size-small); }
.tf-filter-chip__x { color:var(--tf-yellow); cursor:pointer; }
.tf-filter-add { border:var(--tf-border-control) solid var(--tf-line); padding:6px 14px;
  font-size:var(--tf-size-small); cursor:pointer; }
.tf-segmented { display:inline-flex; border:var(--tf-border-control) solid var(--tf-ink); }
.tf-segmented__item { padding:10px 20px; font-size:var(--tf-size-small); cursor:pointer;
  border-left:var(--tf-border-control) solid var(--tf-ink); }
.tf-segmented__item:first-child { border-left:none; }
.tf-segmented__item--on { background:var(--tf-ink); color:#fff; }
.tf-upload { border:var(--tf-border-control) dashed var(--tf-line); padding:28px; text-align:center; }
.tf-upload:hover { border-color:var(--tf-red); background:var(--tf-red-tint); }
.tf-datepicker { border:var(--tf-border-control) solid var(--tf-ink); padding:18px;
  background:var(--tf-paper); }
.tf-datepicker__weekdays { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px;
  font-family:var(--tf-font-label); font-weight:700; font-size:var(--tf-size-label-s);
  letter-spacing:var(--tf-track-x-08); color:var(--tf-muted); }
.tf-datepicker__days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px;
  font-family:var(--tf-font-mono); font-size:var(--tf-size-helper); }
.tf-day { padding:7px 0; text-align:center; cursor:pointer; }
.tf-day--outside { color:var(--tf-disabled); }
.tf-day--range { background:var(--tf-yellow-tint); }
.tf-day--on { background:var(--tf-red); color:#fff; }
.tf-keycap { font-family:var(--tf-font-mono); font-size:var(--tf-size-helper);
  border:var(--tf-border-control) solid var(--tf-ink); border-bottom-width:var(--tf-border-ring);
  padding:3px 9px; }

/* ------------------------------------------------------------------ 15 · DISCLOSURE & STEPS */
.tf-accordion__head { padding:18px 24px; font-size:var(--tf-size-body-l); font-weight:600;
  display:flex; justify-content:space-between; align-items:center; cursor:pointer;
  border-bottom:var(--tf-border-hairline) solid var(--tf-divider); }
.tf-accordion__head--open { border-bottom:var(--tf-border-control) solid var(--tf-ink); }
.tf-accordion__head--open .tf-accordion__sign { color:var(--tf-red); }
.tf-accordion__panel { padding:18px 24px; font-size:var(--tf-size-body);
  line-height:var(--tf-lead-body); }
.tf-step { width:34px; height:34px; font-family:var(--tf-font-mono);
  font-size:var(--tf-size-small); display:flex; align-items:center; justify-content:center; flex:none; }
.tf-step--done { background:var(--tf-ink); color:#fff; }
.tf-step--current { background:var(--tf-red); color:#fff; }
.tf-step--future { border:var(--tf-border-control) solid var(--tf-line); color:var(--tf-muted); }
.tf-step__line { height:2px; background:var(--tf-line); margin-bottom:22px; flex:1; }
.tf-timeline__dot { width:12px; height:12px; border-radius:var(--tf-radius-round); flex:none; }
.tf-timeline__rail { width:2px; background:var(--tf-line); flex:1; }
.tf-timeline__meta { font-family:var(--tf-font-mono); font-size:var(--tf-size-label);
  color:var(--tf-muted); }
.tf-activity { display:flex; gap:20px; align-items:center; padding:18px 24px;
  border-bottom:var(--tf-border-hairline) solid var(--tf-divider); }

/* ------------------------------------------------------------------ 16 · PALETTE & DRAWER */
.tf-palette { background:var(--tf-paper); max-width:520px;
  border:var(--tf-border-rule) solid var(--tf-ink); box-sizing:border-box; }
.tf-palette__input { padding:16px 20px; display:flex; align-items:center; gap:12px;
  border-bottom:var(--tf-border-control) solid var(--tf-ink); }
.tf-palette__caret { color:var(--tf-red); font-family:var(--tf-font-mono); }
.tf-palette__esc { font-family:var(--tf-font-mono); font-size:var(--tf-size-label-s);
  border:var(--tf-border-control) solid var(--tf-line); padding:2px 7px; }
.tf-palette__group { font-family:var(--tf-font-label); font-weight:700;
  font-size:var(--tf-size-label-s); letter-spacing:var(--tf-track-label);
  color:var(--tf-muted); padding:14px 20px 8px; }
.tf-palette__row { padding:10px 20px; font-size:var(--tf-size-body); cursor:pointer;
  border-left:var(--tf-border-ring) solid transparent; }
.tf-palette__row--on { background:var(--tf-canvas); border-left-color:var(--tf-red); }
.tf-palette__row--danger { color:var(--tf-red); }
.tf-palette__row--danger:hover { background:var(--tf-red-tint); }
.tf-drawer { width:340px; background:var(--tf-paper);
  border-left:var(--tf-border-rule) solid var(--tf-ink); display:flex; flex-direction:column; }
.tf-drawer__head { padding:20px 24px; font-size:var(--tf-size-lead); font-weight:600;
  display:flex; justify-content:space-between; align-items:center; }
.tf-drawer__body { padding:20px 24px; display:flex; flex-direction:column; gap:16px; flex:1; }
.tf-drawer__foot { padding:20px 24px; display:flex; gap:12px;
  border-top:var(--tf-border-hairline) solid var(--tf-divider); }

/* ------------------------------------------------------------------ 17 · MARKETING */
.tf-hero { background:var(--tf-ink); padding:72px 64px; display:flex; gap:64px;
  align-items:center; }
.tf-hero__eyebrow { font-family:var(--tf-font-label); font-weight:700;
  font-size:var(--tf-size-helper); letter-spacing:var(--tf-track-section); color:var(--tf-yellow); }
.tf-hero__head { font-size:var(--tf-size-display); font-weight:600;
  letter-spacing:var(--tf-track-metric); line-height:var(--tf-lead-display);
  color:#fff; max-width:600px; }
.tf-hero__lead { font-size:var(--tf-size-lead); line-height:var(--tf-lead-lead);
  color:var(--tf-muted-rev); max-width:520px; }
.tf-hero__portrait { width:280px; height:280px; border-radius:var(--tf-radius-round);
  border:14px solid #fff; box-sizing:border-box; flex:none; }
.tf-price { background:var(--tf-paper); border:var(--tf-border-hairline) solid var(--tf-line);
  padding:32px; display:flex; flex-direction:column; }
.tf-price--featured { border:var(--tf-border-rule) solid var(--tf-red); padding:30px 30px 32px;
  position:relative; }
.tf-price__tag { position:absolute; top:-14px; left:32px; background:var(--tf-red); color:#fff;
  font-family:var(--tf-font-label); font-weight:700; font-size:var(--tf-size-label-s);
  letter-spacing:var(--tf-track-label); padding:4px 12px; }
.tf-price__figure { font-size:var(--tf-size-metric-l); font-weight:600;
  letter-spacing:var(--tf-track-metric); line-height:var(--tf-lead-numeral); }
.tf-price__unit { font-size:var(--tf-size-lead); color:var(--tf-muted); }
.tf-closing { background:var(--tf-yellow); padding:44px 48px; }
.tf-closing__head { font-size:var(--tf-size-wordmark-footer); font-weight:600;
  letter-spacing:var(--tf-track-h1); color:var(--tf-ink); }
.tf-closing__sub { font-size:var(--tf-size-body-l); color:var(--tf-yellow-deep); }
.tf-closing .tf-btn { background:var(--tf-ink); color:#fff; border-color:var(--tf-ink); }
.tf-closing .tf-btn:hover { background:var(--tf-red); border-color:var(--tf-red); }
.tf-footer { background:var(--tf-ink); padding:48px 44px; color:#fff; }
.tf-footer__head { font-family:var(--tf-font-label); font-weight:700;
  font-size:var(--tf-size-label); letter-spacing:var(--tf-track-label); color:var(--tf-muted); }
.tf-footer a { color:#fff; text-decoration:none; }
.tf-footer a:hover { color:var(--tf-yellow); }

/* ------------------------------------------------------------------ 18 · SITE MODULES */
.tf-mega { background:var(--tf-ink-sunken); padding:32px 28px; display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; }
.tf-mega__head { font-family:var(--tf-font-label); font-weight:700;
  font-size:var(--tf-size-label); letter-spacing:var(--tf-track-label); color:var(--tf-muted); }
.tf-mega__feature { background:var(--tf-ink); border-left:var(--tf-border-ring) solid var(--tf-red);
  padding:20px 22px; }
.tf-logowall { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:20px; }
.tf-logowall__tile { height:44px; border:var(--tf-border-hairline) dashed var(--tf-line);
  display:flex; align-items:center; justify-content:center; font-family:var(--tf-font-label);
  font-weight:700; font-size:var(--tf-size-label); letter-spacing:var(--tf-track-x-10);
  color:var(--tf-pipe-light); }
.tf-quote { background:var(--tf-paper); border-top:var(--tf-border-accent) solid var(--tf-red);
  padding:36px 40px; }
.tf-quote__text { font-size:var(--tf-size-wordmark-nav); font-weight:600;
  letter-spacing:var(--tf-track-h1); line-height:var(--tf-lead-quote); }
.tf-quote__role { font-family:var(--tf-font-label); font-weight:700;
  font-size:var(--tf-size-label); letter-spacing:var(--tf-track-x-12); color:var(--tf-muted); }
.tf-statband { background:var(--tf-ink); padding:36px 40px; color:#fff; }
.tf-statband__figure { font-size:var(--tf-size-h1); font-weight:600;
  letter-spacing:var(--tf-track-metric); line-height:var(--tf-lead-numeral); }
.tf-statband__label { font-family:var(--tf-font-label); font-weight:700;
  font-size:var(--tf-size-label); letter-spacing:var(--tf-track-label); color:var(--tf-muted); }
.tf-article { background:var(--tf-paper); border:var(--tf-border-hairline) solid var(--tf-line);
  display:flex; flex-direction:column; }
.tf-article__media { height:150px; display:flex; align-items:center; justify-content:center; }
.tf-article__body { padding:26px; display:flex; flex-direction:column; gap:12px; }
.tf-article__kicker { font-family:var(--tf-font-label); font-weight:700;
  font-size:var(--tf-size-label-s); letter-spacing:var(--tf-track-x-12); color:var(--tf-muted); }
.tf-article__kicker em { font-style:normal; color:var(--tf-red); }
.tf-article__title { font-size:var(--tf-size-card-title); font-weight:600;
  letter-spacing:var(--tf-track-h3); line-height:var(--tf-lead-h3); }
.tf-changelog__date { font-family:var(--tf-font-mono); font-size:var(--tf-size-helper);
  width:82px; flex:none; color:var(--tf-muted); }
.tf-newsletter { display:flex; }
.tf-newsletter .tf-input { border-right:none; }
.tf-cookiebar { background:var(--tf-ink); padding:20px 24px; color:#fff; display:flex;
  align-items:center; gap:20px; }
.tf-404 { background:var(--tf-ink); padding:56px 44px; color:#fff; }
.tf-404__code { font-family:var(--tf-font-mono); font-size:var(--tf-size-numeral-xl);
  font-weight:700; line-height:var(--tf-lead-numeral); color:var(--tf-red); }
.tf-404__head { font-size:var(--tf-size-head-404); font-weight:600;
  letter-spacing:var(--tf-track-h1); }
.tf-404__body { font-size:var(--tf-size-body); line-height:var(--tf-lead-body);
  color:var(--tf-muted-rev); max-width:420px; }

/* ------------------------------------------------------------------ 19 · CONSUMER NAMES
 * Twelve class names that the 1.0.0 stylesheet published and that live pages still carry:
 * pra.toolforge.ai and the six bored.toolforge.ai pages. They are re-declared here from the
 * 1.1.0 tokens so replacing the stylesheet does not silently unstyle those pages.
 * They are aliases, not new components. Prefer the section 3-18 names in new work.
 */
/* Fifteen custom property names that 1.0.0 published and that live pages still reference
 * from their own stylesheets. 1.1.0 renamed the spacing scale from --tf-sN to --tf-space-N
 * and the families from --tf-sans/mono/label to --tf-font*. A renamed variable does not
 * fall back — it resolves to nothing — so every gap, padding and margin on the six
 * bored.toolforge.ai pages collapsed to zero the moment the stylesheet was swapped.
 *
 * Each alias below points at the 1.1.0 token holding the IDENTICAL value. Nothing new is
 * declared here and no colour is added. Check 20 asserts that every variable a consumer
 * page references is defined, which is the check that should have caught this.
 */
:root {
  --tf-s2:var(--tf-space-2);    /* 8px  */
  --tf-s3:var(--tf-space-3);    /* 12px */
  --tf-s4:var(--tf-space-4);    /* 16px */
  --tf-s5:var(--tf-space-6);    /* 24px */
  --tf-s6:var(--tf-space-8);    /* 32px */
  --tf-s7:var(--tf-space-12);   /* 48px */
  --tf-s8:var(--tf-space-16);   /* 64px */
  --tf-sans:var(--tf-font);
  --tf-mono:var(--tf-font-mono);
  --tf-label:var(--tf-font-label);
  --tf-on-ink-body:var(--tf-muted-rev);      /* #B8B4AE */
  --tf-on-yellow-body:var(--tf-yellow-deep); /* #4A3F00 */
  --tf-row-zebra:var(--tf-zebra);            /* #FAF9F6 */
  --tf-hairline-soft:var(--tf-divider);      /* #EEEBE5 */
  --tf-day-outside:var(--tf-disabled);       /* #C6C2BA — pra.css calendar */
}
.tf, body.tf { margin:0; background:var(--tf-canvas); color:var(--tf-ink);
  font-family:var(--tf-font); -webkit-font-smoothing:antialiased; }
.tf a { color:var(--tf-red); text-decoration:underline; text-underline-offset:2px; }
.tf a:hover { color:var(--tf-red-press); }
.tf-page { max-width:var(--tf-frame-max); margin:0 auto; padding:var(--tf-frame-pad);
  display:flex; flex-direction:column; gap:var(--tf-frame-gap); }
.tf-section { display:flex; flex-direction:column; gap:var(--tf-space-6); }
.tf-eyebrow { font-family:var(--tf-font-label); font-weight:700; font-size:var(--tf-size-helper);
  letter-spacing:var(--tf-track-section); text-transform:uppercase; }
.tf-label--muted { color:var(--tf-muted); }
.tf-menu { border:var(--tf-border-control) solid var(--tf-ink); background:var(--tf-paper); }
.tf-btn--ink { color:#fff; background:var(--tf-ink); border-color:var(--tf-ink); }
.tf-btn--ink:hover { background:var(--tf-red); border-color:var(--tf-red); }
.tf-alert__body { font-size:var(--tf-size-small); color:var(--tf-ink-60); }
.tf-band { background:var(--tf-yellow); padding:44px 48px; display:flex; align-items:center;
  justify-content:space-between; gap:var(--tf-space-10); flex-wrap:wrap; }
.tf-band__sub { font-size:var(--tf-size-body-l); color:var(--tf-yellow-deep); }
.tf-band .tf-btn { background:var(--tf-ink); color:#fff; border-color:var(--tf-ink); }
.tf-band .tf-btn:hover { background:var(--tf-red); border-color:var(--tf-red); }
/* RULE 3 — the service line. Four words, this order, pipes only. */
.tf-pillars { display:flex; gap:var(--tf-space-3); font-family:var(--tf-font-label);
  font-weight:700; font-size:var(--tf-size-helper); letter-spacing:var(--tf-track-service);
  text-transform:uppercase; }
.tf-pillars__pipe { color:var(--tf-pipe-light); }
.tf-footer .tf-pillars__pipe { color:var(--tf-pipe-dark); }
/* Never published by 1.0.0 either, so these pages have always shipped it unstyled. */
.tf-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ================================================================== 20 · MOBILE
 * From ToolForge ds mobile1.dc.html. The scale does not change — the mobile layer
 * picks different steps from the same ladder and enlarges every touch target.
 * Breakpoint 640px: the specification frame is 390px, and 640 is the widest viewport
 * at which the single-column frame is still the correct reading.
 */
@media (max-width:640px) {
  .tf-frame, .tf-page { padding:24px 20px 60px; gap:36px; }

  /* Type step-downs */
  .tf-display, .tf-hero__head { font-size:var(--tf-size-m-display); }
  .tf-h1 { font-size:var(--tf-size-h2); }
  .tf-h2 { font-size:var(--tf-size-panel-title); }
  .tf-h3 { font-size:var(--tf-size-button-l); }
  .tf-metric__value, .tf-price__figure { font-size:var(--tf-size-m-metric); }
  .tf-404__head { font-size:var(--tf-size-m-head-404); }
  .tf-topbar__word { font-size:var(--tf-size-card-title); }
  .tf-dialog__title { font-size:var(--tf-size-card-title); }

  /* Touch targets. Every control clears 44px. */
  .tf-btn { min-height:var(--tf-touch-m); padding:0 26px; }
  .tf-btn--l { min-height:var(--tf-touch-l); padding:0 34px; }
  .tf-btn--mark { min-height:var(--tf-touch-s); padding:0 22px; }
  .tf-input, .tf-textarea, .tf-select { min-height:var(--tf-touch-m); padding:0 14px; }
  .tf-textarea { padding:14px; }
  .tf-tab, .tf-segmented__item { min-height:var(--tf-touch-s); padding:0 22px;
    display:flex; align-items:center; }
  .tf-sidebar__item, .tf-dropdown__item, .tf-palette__row { min-height:var(--tf-touch-min);
    display:flex; align-items:center; }

  /* Frame and blocks collapse to one column */
  .tf-grid, .tf-mega, .tf-logowall { grid-template-columns:minmax(0,1fr); }
  .tf-hero { flex-direction:column; padding:32px 20px; gap:28px; align-items:flex-start; }
  .tf-hero__portrait { width:150px; height:150px; border-width:9px; }
  .tf-hero__head, .tf-hero__lead { max-width:100%; }
  .tf-footer { padding:32px 20px; }
  .tf-closing, .tf-band { padding:28px 20px; }
  .tf-404 { padding:32px 20px; }
  .tf-quote { padding:24px 20px; }
  .tf-statband { padding:24px 20px; }
  .tf-scrim { padding:22px; }
  .tf-dialog, .tf-palette { max-width:100%; width:100%; }
  .tf-sidebar, .tf-drawer { width:100%; border-left:none; }
  .tf-topbar { height:auto; flex-direction:column; align-items:flex-start;
    gap:14px; padding:16px; }
  .tf-logowall__tile { height:44px; }

  /* The data table becomes a stack of record cards. A five-column grid cannot
     survive 390px, so the mobile specification does not try. */
  .tf-table--stacked .tf-table__head { display:none; }
  .tf-table--stacked .tf-table__row { display:flex; flex-direction:column; gap:12px;
    padding:16px 18px; }
  .tf-record__top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .tf-record__name { font-family:var(--tf-font-mono); font-size:var(--tf-size-small);
    font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tf-record__meta { display:flex; flex-wrap:wrap; gap:14px 22px; }
  .tf-record__key { font-family:var(--tf-font-label); font-weight:700;
    font-size:var(--tf-size-m-meta-label); letter-spacing:var(--tf-track-x-12);
    color:var(--tf-muted); }
  .tf-record__val { font-size:var(--tf-size-helper); color:var(--tf-ink-60); }
}