/* CHOCKERS design system: the one implementation. Spec: SPEC/design-system-chockers.md.
   Specimen: /design-system-chockers.html. Quality baseline: QUALITY.md.

   Derived from Tamm's design system (~/.claude/skills/tamms-design-system): the same
   token names, the same controls and states, 2px / 4px / 8px lines, radius 0, no
   shadow, no gradient, focus as a double ring. The CHOCKERS brand sits on top:
   --primary is CHOCKERS red, with its own text colour (--on-primary). A venue
   re-points --primary, --on-primary, --primary-ink, the surfaces and --ink-muted
   from its brand colours (public/shared/venue-theme.js). Nothing else changes.

   Order in this file: 1 palette, 2 type, 3 foundations, 4 brand layer, 5 controls,
   6 CHOCKERS components, 7 states and density.
   Component classes start with ck-. They read tokens; they never hold a hex.
   Light by default. Dark follows prefers-color-scheme, or data-theme="dark" on any
   element; data-theme="light" pins light. */

/* ======================================================================= */
/* 1. Palette (Tamm's palette.css, unchanged)                              */
/* ======================================================================= */
/* Tamm's palette: neon highlighter-pen colours. IN DEVELOPMENT.
   check-palette.py reads this file. Run it after any change: it must exit 0.

   Rules (3 Oct brief):
   - ONE orange, the Tamm logo orange, in every mode. It never changes.
   - Blue is sampled from the inverted Tamm logo. Kept the same in both modes.
   - Every other colour has a light value (a step deeper, so it holds on white)
     and a dark value (a step brighter, so it glows on black).
   - A fill carries BOLD black text (--on-fill): 4.5:1 or more on every fill.
   - --c-<name>-ink is the text-safe twin: 4.5:1 or more on --bg, --surface-1
     and --surface-2 of the current mode. A fill colour is never text.
     The light yellow and cyan twins are dark only: never text on white.
   - --ink-muted is secondary text and labels, never body text: 4.5:1 or more
     on --bg, both surfaces and --zebra. No opacity, ever.
   - Colour-blind rule: the core set (orange, blue, yellow = --chart-1..3) and
     every adjacent pair in the chart order are CIEDE2000 >= 15 under normal,
     protan, deutan and tritan vision, in light and dark. Other pairs: see the
     "never the only difference" list that check-palette.py prints. */

/* Every mode. */
:root {
  --c-orange: #F48031;  /* the Tamm logo SVG fill and tamm.in. Never changes. */
  --c-blue: #55A6FC;    /* sampled from the inverted Tamm logo (~/Pictures) */
  --on-fill: #000;      /* bold black text on any fill */
}

/* Light mode: true white ground. */
:root, [data-theme="light"] {
  --bg: #fff;
  --ink: #000;
  --surface-1: #F5F5F5;
  --surface-2: #EBEBEB;
  --zebra: #EBEBEB;       /* the even row of a zebra table */
  --ink-muted: #595959;   /* secondary text and labels: 7.0:1 on white */

  --c-yellow: #F8F900;
  --c-green: #00C04C;
  --c-cyan: #00D2E8;
  --c-purple: #A74BFF;
  --c-pink: #FF4BAE;
  --c-red: #FA002A;

  --c-orange-ink: #B14800;
  --c-blue-ink: #1956FF;
  --c-yellow-ink: #6C6C00;
  --c-green-ink: #00772E;
  --c-cyan-ink: #007386;
  --c-purple-ink: #9B00FD;
  --c-pink-ink: #C90081;
  --c-red-ink: #D30022;
}

/* Dark mode: true black ground. Same values in both blocks below. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000;
    --ink: #fff;
    --surface-1: #0F0F0F;
    --surface-2: #1C1C1C;
    --zebra: #2B2B2B;       /* --surface-2 is 1.2:1 on black: too faint for a stripe */
    --ink-muted: #A6A6A6;   /* 8.6:1 on black */

    --c-yellow: #FDFE00;
    --c-green: #00C04C;
    --c-cyan: #4EEAFF;
    --c-purple: #AF65FF;
    --c-pink: #FF6AB7;
    --c-red: #FF2C38;

    --c-orange-ink: var(--c-orange);
    --c-blue-ink: var(--c-blue);
    --c-yellow-ink: var(--c-yellow);
    --c-green-ink: var(--c-green);
    --c-cyan-ink: var(--c-cyan);
    --c-purple-ink: var(--c-purple);
    --c-pink-ink: var(--c-pink);
    --c-red-ink: var(--c-red);
  }
}

[data-theme="dark"] {
  --bg: #000;
  --ink: #fff;
  --surface-1: #0F0F0F;
  --surface-2: #1C1C1C;
  --zebra: #2B2B2B;
  --ink-muted: #A6A6A6;

  --c-yellow: #FDFE00;
  --c-green: #00C04C;
  --c-cyan: #4EEAFF;
  --c-purple: #AF65FF;
  --c-pink: #FF6AB7;
  --c-red: #FF2C38;

  --c-orange-ink: var(--c-orange);
  --c-blue-ink: var(--c-blue);
  --c-yellow-ink: var(--c-yellow);
  --c-green-ink: var(--c-green);
  --c-cyan-ink: var(--c-cyan);
  --c-purple-ink: var(--c-purple);
  --c-pink-ink: var(--c-pink);
  --c-red-ink: var(--c-red);
}

/* Semantic names and chart order. Declared on every themed element, so a
   data-theme pane resolves them from its own colours. */
:root, [data-theme] {
  --primary: var(--c-orange);
  --secondary: var(--c-blue);
  --info: var(--c-blue);
  --success: var(--c-green);
  --warning: var(--c-yellow);
  --danger: var(--c-red);
  --focus: var(--ink);  /* a double ring outside the control, so it sits on the ground, never on a fill */

  /* Chart order: every adjacent pair passes the colour-blind floor.
     1..3 are the core set: a chart of three series is safe by colour alone.
     A 4-series chart safe by colour alone uses --chart4-1..4, never --chart-1..4. */
  --chart-1: var(--c-orange);
  --chart-2: var(--c-blue);
  --chart-3: var(--c-yellow);
  --chart-4: var(--c-pink);
  --chart-5: var(--c-green);
  --chart-6: var(--c-purple);
  --chart-7: var(--c-red);
  --chart-8: var(--c-cyan);

  /* The 4-set: every pair passes in every view, light and dark (check-palette.py). */
  --chart4-1: var(--c-orange);
  --chart4-2: var(--c-yellow);
  --chart4-3: var(--c-purple);
  --chart4-4: var(--c-cyan);
}

/* ======================================================================= */
/* 2. Type (Tamm's type.css; sans only, no web font fetch: privacy)        */
/* ======================================================================= */
/* Tamm's type tokens. IN DEVELOPMENT: each Tamm correction changes this file.
   Two modes. Device-agnostic (--font-sans) is PRIMARY: the default on every page and
   every device. Device-native (--font-native) is SECONDARY: only for UI that should
   blend into the OS, such as an app window, a menu or a settings panel.
   Web fonts load with display=block: no swap, no flash. The web fonts are OFL, with
   real italics. Publico Text is named by family only: never @font-face it or ship
   the file. Other devices get EB Garamond.
   Never Inter, Roboto, Geist, Poppins, Montserrat, DM Sans or Space Grotesk. */

@font-face {
  font-family: 'Figtree';
  src: url('/shared/fonts/figtree.woff2') format('woff2');
  font-weight: 300 900; font-style: normal; font-display: block;
}

:root {
  /* Faces. Figtree is the pick (3 Oct 11:13): its 6 and 9 never read as each other turned
     round. Albert Sans is the fallback. Hanken Grotesk and Public Sans are out. */
  --font-sans: "Figtree", "Albert Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-native: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "MonaspiceXe Nerd Font Mono", "MesloLGS Nerd Font Mono", ui-monospace, monospace;

  /* Weights: three only. */
  --weight-body: 300;
  --weight-strong: 600;
  --weight-loud: 900;

  /* Scale. Body 19px; every other size is a multiple of it. Headings use
     --weight-loud and track -0.06em to -0.09em: the bigger, the tighter. */
  --text-body: 19px;     --lh-body: 1.563;    --track-body: 0;
  --text-display: calc(var(--text-body) * 4.5); --lh-display: 1;   --track-display: -0.09em;
  --text-h1: calc(var(--text-body) * 3);        --lh-h1: 1.05;     --track-h1: -0.09em;
  --text-h2: calc(var(--text-body) * 2.25);     --lh-h2: 1.1;      --track-h2: -0.085em;
  --text-h3: calc(var(--text-body) * 1.6);      --lh-h3: 1.1;      --track-h3: -0.075em;
  --text-h4: calc(var(--text-body) * 1.3);      --lh-h4: 1.2;      --track-h4: -0.07em;
  --text-h5: calc(var(--text-body) * 1.1);      --lh-h5: 1.25;     --track-h5: -0.06em;
  --text-h6: var(--text-body);                  --lh-h6: 1.3;      --track-h6: -0.06em;
                                                --lh-small: 1.5;                          /* the 16px floor and compact text */
  --text-label: calc(var(--text-body) * 0.74);  --lh-label: 1.4;   --track-label: 0.06em;  /* --weight-strong, ALL CAPS */
  --text-code: 0.875em;                         --lh-code: 1.5;    --track-code: 0;        /* em: matches the text around it */
  --lh-control: 1;            /* a control label: the control's height sets the room */
  --track-num: -0.02em;       /* a large figure: heading tracking makes 1 and commas touch */

  /* Running text never runs past 72 characters, on any device. ch is the width
     of "0", and Figtree's zero is wide (0.64em), so 72 characters is 48ch. */
  --measure: 48ch;
}

/* ======================================================================= */
/* 3. Foundations (Tamm's tokens.css: lines, space, base, focus)           */
/* ======================================================================= */
/* Tamm's design system. IN DEVELOPMENT: each Tamm correction changes this file.
   This is the one file a page links. It imports the four parts, then adds the
   foundations they share (lines, space, layout, focus) and a base for plain HTML.

     palette.css   colour: --c-*, --c-*-ink, grounds, muted ink, semantic roles, chart order
     type.css      faces, three weights, the size scale, --measure
     controls.css  buttons, fields, links, tabs, badges, tags, status, alert, toast,
                   skip link, progress
     content.css   callout, quote, code, table, lists, details, kbd, hr, hash,
                   stat, bars, timeline, waterfall, chat

   Light by default. Dark follows prefers-color-scheme, or data-theme="dark" on any
   element; data-theme="light" pins light. No toggle. Run check-palette.py after
   any colour change. See SKILL.md for the rules. */

/* ---- Lines. Never 1px. A line has a job. ---- */
:root {
  --line-2: 2px;                                   /* small edge: field, kbd, link underline */
  --line-4: 4px;                                   /* rule: button edge, hr, kbd base */
  --line-8: 8px;                                   /* heavy edge: callout, selected tab */
  --line-double: calc(var(--line-2) * 3) double;   /* width + style: quote. 2px, 2px gap, 2px */
}

/* ---- Space and layout. One 8px step; a half and a quarter step for tight pads. ---- */
:root {
  --space-quarter: 2px;
  --space-half: 4px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;

  --gutter: var(--space-2);         /* page side space; 16px at phone width */
  --section-gap: var(--space-6);    /* between page sections */
  /* Content rhythm is in em, so it scales with the text it sits in (19 Sep
     density). It is the one place a component tier holds a raw value. */
  --heading-above: 0.5em;
  --heading-below: 0.4em;
  --heading-chip-gap: var(--space-1);   /* a badge, status or tag inside a heading */

  /* The size floor. No text goes under 16px, except an all-caps tracked
     eyebrow (--text-label). 16px is not "small": a compact table, help text
     and an S button sit on it. */
  --text-min: 16px;
}
/* One breakpoint, 860px. Under it, columns stack and the gutter stays 16px. */
@media (min-width: 860px) {
  :root { --gutter: var(--space-4); }
}

/* ---- Native parts (select menus, scrollbars) follow the ground. ---- */
:root, [data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
[data-theme="dark"] { color-scheme: dark; }

/* ---- Base: plain HTML looks right with no class. ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;                        /* nothing is clipped: a wide table or code block scrolls inside itself */
  background: var(--bg);
  color: var(--ink);
  overflow-wrap: break-word;        /* long unbroken text (a URL) wraps instead of widening the page */
  font: var(--weight-body) var(--text-body)/var(--lh-body) var(--font-sans);
}
h1, h2, h3, h4, h5, h6 { margin: var(--heading-above) 0 var(--heading-below); font-weight: var(--weight-loud); }
h1 { font-size: var(--text-h1); line-height: var(--lh-h1); letter-spacing: var(--track-h1); }
h2 { font-size: var(--text-h2); line-height: var(--lh-h2); letter-spacing: var(--track-h2); }
h3 { font-size: var(--text-h3); line-height: var(--lh-h3); letter-spacing: var(--track-h3); }
h4 { font-size: var(--text-h4); line-height: var(--lh-h4); letter-spacing: var(--track-h4); }
h5 { font-size: var(--text-h5); line-height: var(--lh-h5); letter-spacing: var(--track-h5); }
h6 { font-size: var(--text-h6); line-height: var(--lh-h6); letter-spacing: var(--track-h6); }
/* A chip in a heading sits one step after the words, at body size. */
:is(h1, h2, h3, h4, h5, h6) > :is(.ck-badge, .ck-status, .ck-tag) { margin-inline-start: var(--heading-chip-gap); vertical-align: middle; }
:is(h1, h2, h3, h4, h5, h6) > .ck-status { font-size: var(--text-body); letter-spacing: 0; }
p { margin: 0 0 var(--content-gap); max-width: var(--measure); }
b, strong { font-weight: var(--weight-strong); }
img { max-width: 100%; height: auto; }

/* Text structure, on every page: eyebrow, headline (h1), lede, body.
   An eyebrow is ALWAYS caps and tracked: a section label, a credit, a short
   annotation. It is the one small text; nothing else is small. */
.ck-eyebrow {
  margin: 0 0 var(--space-1);
  font: var(--weight-strong) var(--text-label)/var(--lh-label) var(--font-sans);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.ck-lede { font-size: var(--text-h4); line-height: var(--lh-h4); font-weight: var(--weight-strong); }

/* Selection inverts the ground. Selected text keeps its weight, so a neon fill
   would put thin text on colour. */
::selection { background: var(--ink); color: var(--bg); }

/* Focus: anything focusable gets the one ring. Zero specificity, so a
   component rule (the link highlighter) still wins. Never outline: none. */
:where(:focus-visible) { outline: var(--focus-ring-w) var(--focus-ring-style) var(--focus); outline-offset: var(--focus-ring-gap); }

/* ======================================================================= */
/* 4. Brand layer. CHOCKERS red is the default --primary.                   */
/*    A venue replaces these four roles (see venue-theme.js).               */
/*    --primary      fill: primary button, selected bar, checked box        */
/*    --on-primary   text on --primary                                      */
/*    --primary-ink  primary as text, link underline or line on --bg        */
/* ======================================================================= */
:root, [data-theme="light"] {
  --primary: #9B271E;        /* wordmark red: 7.8:1 on white */
  --on-primary: #FFFFFF;
  --primary-ink: #9B271E;
  --logo-ink: #9B271E;       /* the CHOCKERS wordmark: a venue never changes it */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #FF8A78;      /* 9.2:1 on black, with black text */
    --on-primary: #000000;
    --primary-ink: #FF8A78;
    --logo-ink: #FF8A78;     /* the red wordmark is 2.5:1 on black: dark mode lifts it */
  }
}
[data-theme="dark"] {
  --primary: #FF8A78;
  --on-primary: #000000;
  --primary-ink: #FF8A78;
  --logo-ink: #FF8A78;
}

/* ======================================================================= */
/* 5. Controls (Tamm's controls.css with ck- classes)                       */
/* ======================================================================= */
/* CHOCKERS controls, derived from Tamm's controls.css. IN DEVELOPMENT: each Tamm correction changes this file.
   tokens.css imports it, after palette.css and type.css. It reads the line and
   space scales from tokens.css; it holds no primitive of its own.

   Rules (3 Oct brief):
   - Lines are 2px, 4px or 8px. Radius 0. No shadow, gradient, opacity or motion.
   - Text on a neon fill is bold black (--on-fill).
   - Every state is a token: --<component>[-<variant>]-<property>[-<state>].
     Property words: bg, ink, line (colour), line-w (width), pad, gap.
     State words: hover, pressed, selected, checked, indeterminate, current,
     readonly, disabled, error, focus.
   - A real pseudo-class and its forced class look the same:
       :hover          .is-hover
       :focus-visible  .is-focus
       :active         .is-active   [aria-pressed="true"]
       :disabled       .is-disabled [aria-disabled="true"]
       [readonly]      .is-readonly
       [aria-busy]     .is-loading
     Error is aria-invalid="true". Filled is a real value or :checked.
   - State model: hover on a fill adds an ink edge; hover on no fill (outline,
     quiet, tab) is a yellow highlighter; hover on a field or a box adds an ink
     edge outside. Pressed turns black with a fill-colour edge. Focus is a double
     ink ring outside, a shape no other state uses. Disabled is grey, struck
     through, and dashed on buttons and fields. Loading shows three blocks.
   - One height per size: a button beside a field is the same height.

   Component classes start with t-. They never set a colour or a size directly:
   each reads a token below. */

/* ---- Component tokens. Declared on every themed element, so a data-theme
   pane resolves --ink, --bg and the fills from its own mode. ---- */
:root, [data-theme], [data-venue] {
  /* Focus: one ring for every control. A double ink ring (4px, 4px gap, 4px) on
     the ground, outside the control, so no fill can hide it and no hover edge
     looks like it. A dark ground (toast) points it at --bg. */
  --focus-ring-style: double;
  --focus-ring-w: calc(var(--line-4) * 3);
  --focus-ring-gap: var(--line-4);

  /* One height per size, shared by buttons, text inputs and selects. */
  --control-h-s: var(--space-4);                   /* 32px */
  --control-h-m: var(--space-6);                   /* 48px */
  --control-h-l: calc(var(--space-4) * 2);         /* 64px */

  /* Shared parts */
  --control-gap: var(--space-3);             /* room for the focus ring between box and word */
  --control-strike-w: var(--line-2);          /* disabled text is struck through */
  --control-line-style-disabled: dashed;      /* disabled edge is dashed: buttons and fields */
  --control-mark-size: 0.75em;                /* error and status blocks */

  /* ---- Buttons ---- */
  --btn-font: var(--font-sans);
  --btn-weight: var(--weight-loud);
  --btn-line-w: var(--line-4);
  --btn-gap: var(--space-1);
  --btn-icon-size: 1em;
  --btn-text-s: var(--text-min);    --btn-h-s: var(--control-h-s);  --btn-pad-x-s: var(--space-2);  --btn-icon-line-w-s: var(--line-2);
  --btn-text-m: var(--text-body);   --btn-h-m: var(--control-h-m);  --btn-pad-x-m: var(--space-3);  --btn-icon-line-w-m: var(--line-4);
  --btn-text-l: var(--text-h4);     --btn-h-l: var(--control-h-l);  --btn-pad-x-l: var(--space-4);  --btn-icon-line-w-l: var(--line-4);
  --btn-loading-block: var(--line-8);         /* loading: three 8px square blocks, no motion */

  --btn-primary-bg: var(--primary);           --btn-primary-ink: var(--on-fill);           --btn-primary-line: var(--primary);
  --btn-primary-bg-hover: var(--primary);     --btn-primary-ink-hover: var(--on-fill);     --btn-primary-line-hover: var(--ink);
  --btn-primary-bg-pressed: var(--on-fill);   --btn-primary-ink-pressed: var(--primary);   --btn-primary-line-pressed: var(--primary);


  --btn-destructive-bg: var(--danger);          --btn-destructive-ink: var(--on-fill);       --btn-destructive-line: var(--danger);
  --btn-destructive-bg-hover: var(--danger);    --btn-destructive-ink-hover: var(--on-fill); --btn-destructive-line-hover: var(--ink);
  --btn-destructive-bg-pressed: var(--on-fill); --btn-destructive-ink-pressed: var(--danger); --btn-destructive-line-pressed: var(--danger);

  --btn-outline-bg: transparent;              --btn-outline-ink: var(--ink);               --btn-outline-line: var(--ink);
  --btn-outline-bg-hover: var(--c-yellow);    --btn-outline-ink-hover: var(--on-fill);     --btn-outline-line-hover: var(--ink);
  --btn-outline-bg-pressed: var(--ink);       --btn-outline-ink-pressed: var(--bg);        --btn-outline-line-pressed: var(--ink);

  --btn-quiet-bg: transparent;                --btn-quiet-ink: var(--ink);                 --btn-quiet-line: transparent;
  --btn-quiet-bg-hover: var(--c-yellow);      --btn-quiet-ink-hover: var(--on-fill);       --btn-quiet-line-hover: var(--c-yellow);
  --btn-quiet-bg-pressed: var(--ink);         --btn-quiet-ink-pressed: var(--bg);          --btn-quiet-line-pressed: var(--ink);

  --btn-bg-disabled: var(--surface-2);        --btn-ink-disabled: var(--ink);              --btn-line-disabled: var(--ink);

  /* ---- Fields: text input, textarea, select ---- */
  --field-font: var(--font-sans);
  --field-text: var(--text-body);
  --field-min-w: 18ch;
  --field-pad-y: var(--space-1);
  --field-ring-room: var(--space-1);          /* added above a control: with the 8px gap, room for the 16px focus ring */
  --field-pad-x: var(--space-2);
  --field-bg: var(--bg);                      --field-ink: var(--ink);
  --field-line: var(--ink);                   --field-line-w: var(--line-2);
  --field-line-hover: var(--ink);             --field-line-w-hover: var(--line-2);      /* drawn outside: 4px of ink with the edge */
  --field-bg-readonly: var(--surface-2);      --field-line-readonly: transparent;       /* the value as plain text; still focusable */
  --field-weight-placeholder: var(--weight-body);   --field-style-placeholder: italic;   /* empty: light italic */
  --field-weight-filled: var(--weight-strong);                                         /* filled: upright 600 */
  --field-line-error: var(--danger);          --field-line-w-error: var(--line-4);
  --field-bar-error: var(--danger);           --field-bar-w-error: var(--line-4);       /* bar left of the whole field */
  --field-bg-disabled: var(--surface-2);      --field-line-disabled: var(--ink);
  --field-text-s: var(--text-min);
  --field-text-l: var(--text-h4);
  --textarea-min-h: 6em;                      /* grows with its text: field-sizing */
  --select-arrow-w: 0.75em;                   --select-arrow-ink: var(--ink);

  --label-text: var(--text-body);             --label-weight: var(--weight-strong);
  --help-text: var(--text-min);               --help-weight: var(--weight-body);
  --error-text: var(--text-body);             --error-weight: var(--weight-strong);     --error-mark: var(--danger);   /* an error must be read: body size */

  /* ---- Checkbox, radio, switch ---- */
  --check-size: max(var(--space-3), 1.25em);  /* never under 24px: the WCAG 2.5.8 target */
  --check-bg: var(--bg);                      --check-line: var(--ink);                    --check-line-w: var(--line-2);
  --check-line-hover: var(--ink);             --check-line-w-hover: var(--line-2);      /* drawn outside, like a field */
  --check-bg-checked: var(--primary);         --check-mark: var(--on-fill);                --check-mark-w: var(--line-4);
  --check-mark-top: 42%;                      --check-mark-w-box: 30%;                     --check-mark-h-box: 60%;   /* the tick, as parts of the box */
  --check-bar-w: 60%;                         /* indeterminate: one --line-4 bar */
  --radio-dot-inset: 25%;
  --check-line-error: var(--danger);          --check-line-w-error: var(--line-4);
  --check-bg-disabled: var(--surface-2);      --check-line-disabled: var(--ink);           --check-line-style-disabled: solid;   /* dashes break up on a small box */
  --option-weight: var(--weight-body);        --option-weight-checked: var(--weight-strong);
  --radio-size: calc(var(--check-size) * 0.75);   /* turned 45deg: a diamond, never a circle */
  --switch-w: calc(var(--check-size) * 2);    --switch-h: var(--check-size);
  --switch-inset: var(--line-2);
  --switch-thumb: var(--ink);                 --switch-bg-checked: var(--primary);         --switch-thumb-checked: var(--on-fill);
  --switch-text-off: "Off";                   --switch-text-on: "On";                      /* the word says it too */

  /* ---- Links: text colour, accent only on the underline ---- */
  --link-ink: var(--ink);                     --link-weight: inherit;
  --link-line: var(--primary);                --link-line-w: var(--line-2);                --link-offset: var(--line-4);
  --link-line-hover: var(--ink);              --link-line-w-hover: var(--line-4);
  --link-line-visited: var(--c-purple);
  --link-bg-focus: var(--c-yellow);           --link-ink-focus: var(--on-fill);            /* focus is a highlighter */
  --link-line-focus: var(--on-fill);          --link-line-w-focus: var(--line-4);          --link-weight-focus: var(--weight-strong);   /* text on a fill is bold */
  --link-line-current: var(--ink);            --link-line-w-current: var(--line-4);        --link-weight-current: var(--weight-strong);  /* aria-current: you are here */

  /* ---- Tabs ---- */
  --tab-pad-y: var(--space-1);                --tab-pad-x: var(--space-2);                 --tab-gap: var(--space-3);   /* room for the focus ring */
  --tab-ink: var(--ink);                      --tab-weight: var(--weight-strong);
  --tablist-line: var(--ink);                 --tablist-line-w: var(--line-2);
  --tab-bar: transparent;                     --tab-bar-w: var(--line-8);
  --tab-bg-hover: var(--c-yellow);            --tab-ink-hover: var(--on-fill);
  --tab-bar-hover: var(--ink);                --tab-bar-w-hover: var(--line-4);
  --tab-bar-selected: var(--primary);         --tab-bar-w-selected: var(--line-8);         --tab-weight-selected: var(--weight-loud);

  /* ---- Badges and tags ---- */
  --badge-bg: var(--primary);                 --badge-ink: var(--on-fill);
  --badge-text: var(--text-label);            --badge-track: var(--track-label);           --badge-weight: var(--weight-loud);
  --badge-pad-y: var(--space-quarter);        --badge-pad-x: var(--space-1);
  --badge-neutral-bg: var(--ink);             --badge-neutral-ink: var(--bg);
  --badge-outline-line: var(--ink);           --badge-outline-line-w: var(--line-2);

  --tag-bg: var(--bg);                        --tag-ink: var(--ink);
  --tag-line: var(--ink);                     --tag-line-w: var(--line-2);
  --tag-text: var(--text-label);              --tag-weight: var(--weight-strong);          --tag-track: var(--track-label);   /* eyebrow style: caps, tracked */
  --tag-pad-y: var(--space-half);             --tag-pad-x: var(--space-1);                 --tag-gap: var(--space-3);   /* room for the remove button's focus ring */

  /* ---- Status: a palette fill, a shape and a word. Never a dot alone. ---- */
  --status-icon-size: 1em;
  --status-icon-line: var(--ink);             --status-icon-line-w: var(--line-2);
  --status-weight: var(--weight-strong);      --status-gap: var(--space-1);
  --status-solid-ink: var(--on-fill);         --status-solid-weight: var(--weight-loud);
  --status-solid-pad-y: var(--space-half);   --status-solid-pad-x: var(--space-1);
  --status-done: var(--success);              /* check */
  --status-running: var(--c-cyan);            /* play */
  --status-paused: var(--c-purple);           /* two bars */
  --status-queued: transparent;               /* hollow square */
  --status-warning: var(--warning);           /* triangle */
  --status-failed: var(--danger);             /* cross */
  --status-info: var(--info);                 /* diamond */

  /* ---- Inline alert ---- */
  --alert-line: var(--ink);                   --alert-line-w: var(--line-2);
  --alert-pad-y: var(--space-half);           --alert-pad-x: var(--space-2);
  --alert-weight: var(--weight-strong);

  /* ---- Toast: the inverse ground ---- */
  --toast-bg: var(--ink);                     --toast-ink: var(--bg);
  --toast-pad: var(--space-2);                --toast-gap: var(--space-2);
  --toast-max-w: var(--measure);              --toast-weight: var(--weight-strong);
  --toast-focus: var(--bg);
  --toast-edge: var(--space-3);               /* gap from the window edge */

  /* ---- Skip link: hidden until a keyboard user tabs to it ---- */
  --skip-bg: var(--c-yellow);                 --skip-ink: var(--on-fill);
  --skip-weight: var(--weight-strong);        --skip-pad: var(--space-1) var(--space-2);
  --skip-edge: var(--space-2);                /* gap from the top left of the window */

  /* ---- Progress: a bar that fills. No motion; a word says the value. ---- */
  --progress-h: var(--space-2);
  --progress-bg: var(--bg);                   --progress-fill: var(--primary);
  --progress-line: var(--ink);                --progress-line-w: var(--line-2);
}

/* =================================================================== */
/* Focus: one ring, every control. */
:is(.ck-btn, .ck-input, .ck-check, .ck-radio, .ck-switch, .ck-tab, .ck-skip):is(:focus-visible, .is-focus),
.ck-option:has(> :is(.ck-check, .ck-radio, .ck-switch):is(:focus-visible, .is-focus)) {
  outline: var(--focus-ring-w) var(--focus-ring-style) var(--focus);
  outline-offset: var(--focus-ring-gap);
}
/* A box in an option: the ring goes round the box and its word, so a turned
   radio never throws its ring across the label. Transparent, not none: forced
   colours still draw it. */
.ck-option > :is(.ck-check, .ck-radio, .ck-switch):is(:focus-visible, .is-focus) { outline-color: transparent; }

/* =================================================================== */
/* Buttons. The variant picks tokens; the state rules use them. */
.ck-btn {
  --b-bg: var(--btn-primary-bg);                  --b-ink: var(--btn-primary-ink);                  --b-line: var(--btn-primary-line);
  --b-bg-hover: var(--btn-primary-bg-hover);      --b-ink-hover: var(--btn-primary-ink-hover);      --b-line-hover: var(--btn-primary-line-hover);
  --b-bg-pressed: var(--btn-primary-bg-pressed);  --b-ink-pressed: var(--btn-primary-ink-pressed);  --b-line-pressed: var(--btn-primary-line-pressed);
  --b-text: var(--btn-text-m);  --b-h: var(--btn-h-m);  --b-pad-x: var(--btn-pad-x-m);  --b-icon-line-w: var(--btn-icon-line-w-m);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  block-size: var(--b-h);
  margin: 0;
  padding: 0 var(--b-pad-x);
  font: var(--btn-weight) var(--b-text)/var(--lh-control) var(--btn-font);
  letter-spacing: var(--track-body);
  white-space: nowrap;
  text-decoration: none;
  background: var(--b-bg);
  color: var(--b-ink);
  border: var(--btn-line-w) solid var(--b-line);
  border-radius: 0;
  cursor: pointer;
  appearance: none;
}
.ck-btn--secondary {
  --b-bg: var(--btn-outline-bg);                  --b-ink: var(--btn-outline-ink);                  --b-line: var(--btn-outline-line);
  --b-bg-hover: var(--btn-outline-bg-hover);      --b-ink-hover: var(--btn-outline-ink-hover);      --b-line-hover: var(--btn-outline-line-hover);
  --b-bg-pressed: var(--btn-outline-bg-pressed);  --b-ink-pressed: var(--btn-outline-ink-pressed);  --b-line-pressed: var(--btn-outline-line-pressed);
}
.ck-btn--quiet {
  --b-bg: var(--btn-quiet-bg);                  --b-ink: var(--btn-quiet-ink);                  --b-line: var(--btn-quiet-line);
  --b-bg-hover: var(--btn-quiet-bg-hover);      --b-ink-hover: var(--btn-quiet-ink-hover);      --b-line-hover: var(--btn-quiet-line-hover);
  --b-bg-pressed: var(--btn-quiet-bg-pressed);  --b-ink-pressed: var(--btn-quiet-ink-pressed);  --b-line-pressed: var(--btn-quiet-line-pressed);
}
.ck-btn--danger {
  --b-bg: var(--btn-destructive-bg);                  --b-ink: var(--btn-destructive-ink);                  --b-line: var(--btn-destructive-line);
  --b-bg-hover: var(--btn-destructive-bg-hover);      --b-ink-hover: var(--btn-destructive-ink-hover);      --b-line-hover: var(--btn-destructive-line-hover);
  --b-bg-pressed: var(--btn-destructive-bg-pressed);  --b-ink-pressed: var(--btn-destructive-ink-pressed);  --b-line-pressed: var(--btn-destructive-line-pressed);
}
.ck-btn--s { --b-text: var(--btn-text-s); --b-h: var(--btn-h-s); --b-pad-x: var(--btn-pad-x-s); --b-icon-line-w: var(--btn-icon-line-w-s); }
.ck-btn--l { --b-text: var(--btn-text-l); --b-h: var(--btn-h-l); --b-pad-x: var(--btn-pad-x-l); --b-icon-line-w: var(--btn-icon-line-w-l); }
.ck-btn--icon { inline-size: var(--b-h); padding: 0; }   /* square, at the same height */
.ck-btn svg { flex: none; width: var(--btn-icon-size); height: var(--btn-icon-size); fill: none; stroke: currentColor; stroke-width: var(--b-icon-line-w); stroke-linecap: square; stroke-linejoin: miter; }

.ck-btn:hover:not(:disabled, .is-disabled, [aria-disabled="true"], .is-loading, [aria-busy="true"]),
.ck-btn.is-hover {
  background: var(--b-bg-hover);
  color: var(--b-ink-hover);
  border-color: var(--b-line-hover);
}
.ck-btn:active:not(:disabled, .is-disabled, [aria-disabled="true"], .is-loading, [aria-busy="true"]),
.ck-btn.is-active,
.ck-btn[aria-pressed="true"] {
  background: var(--b-bg-pressed);
  color: var(--b-ink-pressed);
  border-color: var(--b-line-pressed);
}
.ck-btn:disabled, .ck-btn.is-disabled, .ck-btn[aria-disabled="true"] {
  background: var(--btn-bg-disabled);
  color: var(--btn-ink-disabled);
  border-color: var(--btn-line-disabled);
  border-style: var(--control-line-style-disabled);
  text-decoration: line-through var(--control-strike-w);
  cursor: not-allowed;
}
.ck-btn.is-loading, .ck-btn[aria-busy="true"] { cursor: progress; }
/* Three square blocks from one box: a left edge, a centre and a right edge. */
.ck-btn.is-loading::before, .ck-btn[aria-busy="true"]::before {
  content: "";
  box-sizing: content-box;
  width: var(--btn-loading-block);
  height: var(--btn-loading-block);
  padding: 0 var(--btn-loading-block);
  border: 0 solid currentColor;
  border-inline-width: var(--btn-loading-block);
  background: currentColor;
  background-clip: content-box;
}

/* =================================================================== */
/* Field parts */
.ck-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; margin: 0; padding: 0; border: 0; }
.ck-field > :is(.ck-input, .ck-select, .ck-option, progress):not(:first-child) { margin-top: var(--field-ring-room); }   /* the focus ring clears the help text */
.ck-option { align-self: flex-start; padding-inline-end: var(--space-half); }   /* the ring hugs the box and word */
.ck-label { display: block; font: var(--label-weight) var(--label-text)/var(--lh-small) var(--field-font); }
legend.ck-label { float: left; width: 100%; padding: 0; }   /* a floated legend joins the flex column */
.ck-help { margin: 0; font: var(--help-weight) var(--help-text)/var(--lh-small) var(--field-font); }
.ck-error { margin: 0; display: flex; align-items: baseline; gap: var(--space-1); font: var(--error-weight) var(--error-text)/var(--lh-small) var(--field-font); color: var(--ink); }
.ck-error::before { content: ""; flex: none; width: var(--control-mark-size); height: var(--control-mark-size); background: var(--error-mark); }
.ck-field:has([aria-invalid="true"]) {
  padding-left: var(--space-2);
  border-left: var(--field-bar-w-error) solid var(--field-bar-error);
}

/* Text input, textarea, select */
.ck-input {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: var(--field-pad-y) var(--field-pad-x);
  font: var(--field-weight-filled) var(--field-text)/var(--lh-body) var(--field-font);
  background: var(--field-bg);
  color: var(--field-ink);
  border: var(--field-line-w) solid var(--field-line);
  border-radius: 0;
  appearance: none;
}
.ck-input::placeholder { color: var(--field-ink); opacity: 1; font-style: var(--field-style-placeholder); font-weight: var(--field-weight-placeholder); }
.ck-input:has(option[value=""]:checked) { font-style: var(--field-style-placeholder); font-weight: var(--field-weight-placeholder); }
/* One line: the shared control height. The UA centres the text in it. */
:is(input, select).ck-input { --i-h: var(--control-h-m); block-size: var(--i-h); padding-block: 0; }
:is(input, select).ck-input--s { --i-h: var(--control-h-s); font-size: var(--field-text-s); }
:is(input, select).ck-input--l { --i-h: var(--control-h-l); font-size: var(--field-text-l); }
textarea.ck-input { min-height: var(--textarea-min-h); field-sizing: content; resize: none; }   /* no grip: its lines are 1px */
.ck-input:hover:not(:disabled, .is-disabled, :focus, .is-focus, [readonly], .is-readonly), .ck-input.is-hover {
  outline: var(--field-line-w-hover) solid var(--field-line-hover);   /* outside the edge: nothing moves */
}
.ck-input[aria-invalid="true"] { border-color: var(--field-line-error); border-width: var(--field-line-w-error); }
.ck-input:is([readonly], .is-readonly) { background: var(--field-bg-readonly); border-color: var(--field-line-readonly); cursor: default; }
.ck-input:disabled, .ck-input.is-disabled {
  background: var(--field-bg-disabled);
  border-color: var(--field-line-disabled);
  border-style: var(--control-line-style-disabled);
  text-decoration: line-through var(--control-strike-w);
  opacity: 1;        /* Chrome dims a disabled select; the dashed edge says it instead */
  cursor: not-allowed;
}
.ck-input:is(:disabled, .is-disabled)::placeholder { text-decoration: line-through var(--control-strike-w); }
.ck-select { position: relative; display: block; }
/* The open list: square, no shadow, the system face gone (Chrome 135+). Other
   browsers keep their own menu. */
@supports (appearance: base-select) {
  .ck-select > select, .ck-select > select::picker(select) { appearance: base-select; }
  .ck-select > select::picker-icon { display: none; }       /* .ck-select draws the arrow */
  .ck-select > select { display: flex; align-items: center; white-space: nowrap; }   /* the value stays on one line; the row wraps instead */
  .ck-select > select::picker(select) {
    border: var(--field-line-w) solid var(--field-line);
    border-radius: 0;
    box-shadow: none;
    background: var(--field-bg);
    color: var(--field-ink);
    font: var(--field-weight-filled) var(--field-text)/var(--lh-body) var(--field-font);
  }
  .ck-select option { padding: var(--space-half) var(--field-pad-x); }
  .ck-select option:is(:hover, :focus-visible) { background: var(--c-yellow); color: var(--on-fill); }
  .ck-select option:focus-visible { outline: var(--line-2) solid var(--on-fill); outline-offset: calc(var(--line-2) * -1); }   /* inside the row: the list clips a ring outside */
  .ck-select option:checked { font-weight: var(--weight-loud); }
}
.ck-select > .ck-input { padding-right: calc(var(--field-pad-x) * 2 + var(--select-arrow-w)); cursor: pointer; }
.ck-select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--field-pad-x);
  width: var(--select-arrow-w);
  height: calc(var(--select-arrow-w) / 2);
  translate: 0 -50%;
  background: var(--select-arrow-ink);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
}

/* Checkbox, radio, switch: the box is the input itself. */
.ck-option { display: inline-flex; align-items: center; gap: var(--control-gap); font-weight: var(--option-weight); cursor: pointer; }
.ck-option:has(:checked) { font-weight: var(--option-weight-checked); }
.ck-option:has(:disabled, .is-disabled) { text-decoration: line-through var(--control-strike-w); cursor: not-allowed; }
.ck-check, .ck-radio, .ck-switch {
  position: relative;
  flex: none;
  width: var(--check-size);
  height: var(--check-size);
  margin: 0;
  background: var(--check-bg);
  border: var(--check-line-w) solid var(--check-line);
  border-radius: 0;
  font: inherit;     /* --check-size is in em of the text beside it */
  appearance: none;
  cursor: pointer;
}
:is(.ck-check, .ck-radio, .ck-switch):hover:not(:disabled, .is-disabled, :focus-visible, .is-focus), :is(.ck-check, .ck-radio, .ck-switch).is-hover {
  outline: var(--check-line-w-hover) solid var(--check-line-hover);
}
:is(.ck-check, .ck-radio):checked, .ck-check:indeterminate { background: var(--check-bg-checked); }
:is(.ck-check, .ck-radio, .ck-switch)[aria-invalid="true"] { border-color: var(--check-line-error); border-width: var(--check-line-w-error); }
:is(.ck-check, .ck-radio, .ck-switch):is(:disabled, .is-disabled) {
  background: var(--check-bg-disabled);
  border-color: var(--check-line-disabled);
  border-style: var(--check-line-style-disabled);
  cursor: not-allowed;
}
/* ponytail: ::after on an input draws in Chrome and Safari, not Firefox. Wrap the input if Firefox matters. */
.ck-check:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: var(--check-mark-top);
  width: var(--check-mark-w-box);
  height: var(--check-mark-h-box);
  border: solid var(--check-mark);
  border-width: 0 var(--check-mark-w) var(--check-mark-w) 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
.ck-check:indeterminate::after {     /* some, not all: one bar. Set it in script: el.indeterminate = true */
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--check-bar-w);
  height: var(--check-mark-w);
  translate: -50% -50%;
  background: var(--check-mark);
}
.ck-radio {
  width: var(--radio-size);
  height: var(--radio-size);
  margin: calc((var(--check-size) - var(--radio-size)) / 2);
  rotate: 45deg;
}
.ck-radio:checked::after { content: ""; position: absolute; inset: var(--radio-dot-inset); background: var(--check-mark); }
.ck-switch { width: var(--switch-w); height: var(--switch-h); }
.ck-switch::after {
  content: "";
  position: absolute;
  top: var(--switch-inset);
  bottom: var(--switch-inset);
  left: var(--switch-inset);
  aspect-ratio: 1;
  background: var(--switch-thumb);
}
.ck-switch:checked { background: var(--switch-bg-checked); }
.ck-switch:checked::after { left: auto; right: var(--switch-inset); background: var(--switch-thumb-checked); }
.ck-switch + .ck-switch-state::before { content: var(--switch-text-off); }
.ck-switch:checked + .ck-switch-state::before { content: var(--switch-text-on); }

/* =================================================================== */
/* Links. A plain <a> gets the look too. */
:where(a:not([class])), .ck-link {
  color: var(--link-ink);
  font-weight: var(--link-weight);
  text-decoration-line: underline;
  text-decoration-color: var(--link-line);
  text-decoration-thickness: var(--link-line-w);
  text-underline-offset: var(--link-offset);
}
:where(a:not([class])):visited, .ck-link:visited, .ck-link.is-visited { text-decoration-color: var(--link-line-visited); }
:where(a:not([class])):hover, .ck-link:hover, .ck-link.is-hover {
  text-decoration-color: var(--link-line-hover);
  text-decoration-thickness: var(--link-line-w-hover);
}
:where(a:not([class]))[aria-current], .ck-link[aria-current] {
  font-weight: var(--link-weight-current);
  text-decoration-color: var(--link-line-current);
  text-decoration-thickness: var(--link-line-w-current);
}
:where(a:not([class])):focus-visible, .ck-link:focus-visible, .ck-link.is-focus {
  outline: var(--focus-ring-w) solid transparent;   /* shows in forced-colours mode */
  background: var(--link-bg-focus);
  color: var(--link-ink-focus);
  font-weight: var(--link-weight-focus);
  text-decoration-color: var(--link-line-focus);
  text-decoration-thickness: var(--link-line-w-focus);
}

/* =================================================================== */
/* Tabs: a bar under the tab marks it. Selected is thick and orange. */
.ck-tabs { display: flex; flex-wrap: wrap; gap: var(--tab-gap); margin: 0; padding: 0; border-bottom: var(--tablist-line-w) solid var(--tablist-line); }
.ck-tab {
  --ck-bar: var(--tab-bar);
  --ck-bar-w: var(--tab-bar-w);
  position: relative;
  margin: 0;
  padding: var(--tab-pad-y) var(--tab-pad-x);
  font: var(--tab-weight) var(--text-body)/var(--lh-small) var(--font-sans);
  color: var(--tab-ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  appearance: none;
  cursor: pointer;
}
.ck-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--tablist-line-w) * -1);
  height: var(--ck-bar-w);
  background: var(--ck-bar);
}
.ck-tab:hover:not(:disabled, .is-disabled, [aria-selected="true"]), .ck-tab.is-hover {
  background: var(--tab-bg-hover);
  color: var(--tab-ink-hover);
  --ck-bar: var(--tab-bar-hover);
  --ck-bar-w: var(--tab-bar-w-hover);
}
.ck-tab[aria-selected="true"] { font-weight: var(--tab-weight-selected); --ck-bar: var(--tab-bar-selected); --ck-bar-w: var(--tab-bar-w-selected); }
.ck-tab:is(:disabled, .is-disabled) { text-decoration: line-through var(--control-strike-w); cursor: not-allowed; }

/* =================================================================== */
/* Badges (a fill with a bold black word) and tags (a framed keyword). */
.ck-badge {
  display: inline-block;
  padding: var(--badge-pad-y) var(--badge-pad-x);
  font: var(--badge-weight) var(--badge-text)/var(--lh-label) var(--font-sans);
  letter-spacing: var(--badge-track);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: var(--badge-bg);
  color: var(--badge-ink);
}
.ck-badge--neutral { background: var(--badge-neutral-bg); color: var(--badge-neutral-ink); }
.ck-badge--outline {
  padding: calc(var(--badge-pad-y) - var(--badge-outline-line-w)) calc(var(--badge-pad-x) - var(--badge-outline-line-w));
  background: transparent;
  color: var(--ink);
  border: var(--badge-outline-line-w) solid var(--badge-outline-line);
}
.ck-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--tag-gap);
  padding: var(--tag-pad-y) var(--tag-pad-x);
  font: var(--tag-weight) var(--tag-text)/var(--lh-label) var(--font-sans);
  letter-spacing: var(--tag-track);
  text-transform: uppercase;
  background: var(--tag-bg);
  color: var(--tag-ink);
  border: var(--tag-line-w) solid var(--tag-line);
}
.ck-tag > .ck-btn { margin: calc(var(--tag-pad-y) * -1) calc(var(--tag-pad-x) * -1) calc(var(--tag-pad-y) * -1) 0; }

/* =================================================================== */
/* Status: shape + word. Solid form: the fill carries a black shape and word. */
.ck-status {
  --s-fill: var(--status-info);
  --s-solid-bg: var(--s-fill);
  --s-solid-ink: var(--status-solid-ink);
  display: inline-flex;
  align-items: center;
  gap: var(--status-gap);
  font-weight: var(--status-weight);
  color: var(--ink);
}
.ck-status > svg {
  flex: none;
  width: var(--status-icon-size);
  height: var(--status-icon-size);
  fill: var(--s-fill);
  stroke: var(--status-icon-line);
  stroke-width: var(--status-icon-line-w);
  stroke-linejoin: miter;
}
.ck-status--done { --s-fill: var(--status-done); }
.ck-status--running { --s-fill: var(--status-running); }
.ck-status--paused { --s-fill: var(--status-paused); }
.ck-status--queued { --s-fill: var(--status-queued); --s-solid-bg: var(--surface-2); --s-solid-ink: var(--ink); }
.ck-status--warning { --s-fill: var(--status-warning); }
.ck-status--failed { --s-fill: var(--status-failed); }
.ck-status--info { --s-fill: var(--status-info); }
.ck-status--solid {
  padding: var(--status-solid-pad-y) var(--status-solid-pad-x);
  background: var(--s-solid-bg);
  color: var(--s-solid-ink);
  font-weight: var(--status-solid-weight);
}
.ck-status--solid > svg { fill: var(--s-solid-ink); stroke: none; }
.ck-status--solid.ck-status--queued > svg { fill: none; stroke: var(--s-solid-ink); }

/* =================================================================== */
/* Inline alert: a solid status block, then the message, in one frame. */
.ck-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  max-width: var(--measure);
  border: var(--alert-line-w) solid var(--alert-line);
}
.ck-alert > .ck-status--solid { flex: none; }
.ck-alert > p { flex: 1 1 0; align-self: center; min-width: 0; margin: 0; padding: var(--alert-pad-y) var(--alert-pad-x); font-weight: var(--alert-weight); }

/* =================================================================== */
/* Toast: the inverse ground. Controls inside re-point to it. */
.ck-toast {
  --focus: var(--toast-focus);
  --btn-quiet-ink: var(--toast-ink);
  --btn-quiet-bg-hover: var(--toast-ink);       --btn-quiet-ink-hover: var(--toast-bg);         --btn-quiet-line-hover: var(--toast-ink);
  --btn-quiet-bg-pressed: var(--primary);       --btn-quiet-ink-pressed: var(--on-fill);        --btn-quiet-line-pressed: var(--primary);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--toast-gap);
  max-width: var(--toast-max-w);
  padding: var(--toast-pad);
  font-weight: var(--toast-weight);
  background: var(--toast-bg);
  color: var(--toast-ink);
}
.ck-toast > p { flex: 1 1 calc(var(--measure) / 4); min-width: 0; margin: 0; }   /* too narrow for the words? the buttons wrap below */
.ck-toast-region { position: fixed; right: var(--toast-edge); bottom: var(--toast-edge); left: var(--toast-edge); display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); pointer-events: none; }
.ck-toast-region > .ck-toast { pointer-events: auto; }

/* =================================================================== */
/* Skip link: the first thing on the page. Off screen until it has focus. */
.ck-skip {
  position: absolute;
  top: var(--skip-edge);
  left: var(--skip-edge);
  z-index: 1;
  padding: var(--skip-pad);
  font-weight: var(--skip-weight);
  background: var(--skip-bg);
  color: var(--skip-ink);
  text-decoration: none;
  translate: 0 -200vh;
}
.ck-skip:is(:focus-visible, .is-focus) { translate: 0; }

/* =================================================================== */
/* Progress: native <progress>. A word beside it says the value. */
progress {
  display: block;
  inline-size: 100%;
  block-size: var(--progress-h);
  border: var(--progress-line-w) solid var(--progress-line);
  border-radius: 0;
  background: var(--progress-bg);
  color: var(--progress-fill);
  appearance: none;
}
progress::-webkit-progress-bar { background: var(--progress-bg); }
progress::-webkit-progress-value { background: var(--progress-fill); }
progress::-moz-progress-bar { background: var(--progress-fill); }

/* ======================================================================= */
/* 6. CHOCKERS tokens: what changes from Tamm's controls, and new measures. */
/* ======================================================================= */
:root, [data-theme], [data-venue] {
  --target: 44px;                       /* the smallest touch target */
  --page-max: 80rem;                    /* 1280px: cards use the width at 1440 */
  --sheet-max: 40rem;
  --rule: var(--ink-muted);             /* a divider inside a list or table */
  --scrim: color-mix(in srgb, var(--ink) 60%, transparent);   /* behind a sheet: the one blend */
  --hl: var(--c-yellow);                /* the hover highlighter, as in Tamm's system */
  --hl-ink: var(--on-fill);

  /* Touch: the small control is 44px, not 32px. */
  --control-h-s: var(--target);

  /* Primary takes its own text colour, so a venue can use any brand colour. */
  --btn-primary-ink: var(--on-primary);
  --btn-primary-ink-hover: var(--on-primary);
  --btn-primary-bg-pressed: var(--ink);       --btn-primary-ink-pressed: var(--bg);        --btn-primary-line-pressed: var(--primary);
  --check-mark: var(--on-primary);
  --switch-thumb-checked: var(--on-primary);
  --badge-ink: var(--on-primary);
  --link-line: var(--primary-ink);
  --tab-bar-selected: var(--primary);
  --btn-quiet-bg-pressed: var(--ink);
  --btn-outline-bg-hover: var(--hl);          --btn-outline-ink-hover: var(--hl-ink);
  --btn-quiet-bg-hover: var(--hl);            --btn-quiet-ink-hover: var(--hl-ink);        --btn-quiet-line-hover: var(--hl);
  --tab-bg-hover: var(--hl);                  --tab-ink-hover: var(--hl-ink);
  --link-bg-focus: var(--hl);                 --link-ink-focus: var(--hl-ink);

  /* Card */
  --card-bg: var(--surface-1);                --card-line: var(--ink);                     --card-line-w: var(--line-2);
  --card-pad: var(--space-2);                 --card-gap: var(--space-1);
  --card-bg-pressed: var(--surface-2);        --card-bar-selected: var(--primary);         --card-bar-w: var(--line-8);
  --card-line-error: var(--danger);           --card-line-w-error: var(--line-4);
  --card-bg-disabled: var(--surface-2);

  /* List row and table */
  --row-h: var(--space-6);                    --row-pad-x: var(--space-2);
  --row-bg-hover: var(--surface-1);           --row-bg-pressed: var(--surface-2);
  --table-head-line: var(--ink);              --table-head-line-w: var(--line-4);
  --table-line: var(--rule);                  --table-line-w: var(--line-2);
  --table-pad-y: var(--space-1);              --table-pad-x: var(--space-2);

  /* Chip: a toggle filter, like a category */
  --chip-pad-x: var(--space-2);

  /* Sheet and dialog */
  --sheet-bg: var(--bg);                      --sheet-ink: var(--ink);
  --sheet-line: var(--ink);                   --sheet-line-w: var(--line-4);
  --sheet-pad: var(--space-2);
  --handle-h: var(--target);                  --handle-bar-w: var(--space-6);              --handle-bar-h: var(--line-4);

  /* Header and nav */
  --nav-h: var(--space-6);
  --nav-bg: var(--bg);                        --nav-line: var(--ink);                      --nav-line-w: var(--line-2);

  /* Joystick: a vertical handle that springs to the centre */
  --joy-track-w: calc(var(--space-6) * 2);        --joy-track-h: 240px;
  --joy-knob: var(--control-h-m);             --joy-travel: 80px;
  --joy-track-bg: var(--surface-1);           --joy-track-line: var(--ink);                --joy-track-line-w: var(--line-2);
  --joy-mark: var(--ink);                     --joy-mark-w: var(--line-4);

  /* Progress line: thin, one segment per step */
  --steps-line-w: var(--line-4);              --steps-done: var(--primary);                --steps-todo: var(--surface-2);

  /* Empty state */
  --empty-mark: var(--space-5);               --empty-line: var(--ink-muted);
}

/* ======================================================================= */
/* 7. CHOCKERS components. Each reads tokens only.                          */
/* ======================================================================= */
[hidden] { display: none !important; }
.ck-page { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.ck-stack { display: flex; flex-direction: column; gap: var(--space-2); }
.ck-row-flex { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ck-grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.ck-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ck-num { font-variant-numeric: tabular-nums; }

/* Tabs and chips and links at touch size */
.ck-tab { display: inline-flex; align-items: center; min-block-size: var(--target); text-decoration: none; }
.ck-btn { min-inline-size: var(--target); }
a.ck-btn { text-decoration: none; }

/* ---- Header and nav: logo, tabs as nav, view switch ---- */
.ck-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2);
  min-block-size: var(--nav-h); padding: var(--space-half) var(--gutter);
  background: var(--nav-bg); color: var(--ink);
  border-bottom: var(--nav-line-w) solid var(--nav-line);
}
/* The wordmark is the SVG, drawn as a mask so it takes the mode's red. Use <span class="ck-logo" role="img" aria-label="CHOCKERS">. */
.ck-logo, .ck-footer .chockers-logo::before { display: block; flex: none; block-size: var(--space-3); aspect-ratio: 10158 / 1460; background: var(--logo-ink); -webkit-mask: url("/shared/chockers-logo.svg") center / contain no-repeat; mask: url("/shared/chockers-logo.svg") center / contain no-repeat; }
.ck-header > .ck-spacer, .ck-spacer { flex: 1 1 auto; }

/* The venue wordmark in a header link keeps its own colours (logos are never filtered). */
.ck-wordmark { display: block; block-size: var(--space-3); inline-size: auto; }
.ck-tab:has(.ck-wordmark) { gap: var(--space-1); }

/* Reading and form width: one measure, never the whole page column. */
.ck-measure { max-width: var(--measure); }

/* ---- Venue footer (shared/venue-footer.js): the same footer the legacy mf-* sheet styles ---- */
.ck-footer {
  background: var(--nav-bg); color: var(--ink); border-top: var(--nav-line-w) solid var(--nav-line);
  margin-top: var(--space-6); padding-block: var(--space-6); font-size: var(--text-min); line-height: var(--lh-small);
}
.ck-footer-grid, .ck-footer-base { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.ck-footer-grid { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-6); }
.ck-footer-grid > * { flex: 1 1 calc(var(--measure) / 4); }
.ck-footer-grid > :is(.ck-footer-brand, .ck-footer-open) { flex: 0 0 auto; }
.ck-footer-grid > .ck-footer-menu { flex: 2 1 calc(var(--measure) / 2); }
.ck-footer-brand { display: flex; flex-direction: column; gap: var(--space-2); }
.ck-footer-name { margin: 0; font-weight: var(--weight-strong); }
.ck-footer-col h2 { margin: 0 0 var(--space-2); font: var(--weight-strong) var(--text-label)/var(--lh-label) var(--font-sans); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-muted); }
.ck-footer-col ul { list-style: none; margin: 0; padding: 0; }
.ck-footer a:not(.chockers-logo) { display: inline-flex; align-items: flex-start; min-block-size: var(--target); }
.ck-footer .mf-wordmark { display: block; inline-size: calc(var(--space-5) * 4); block-size: auto; }
.ck-footer .ck-footer-name, .ck-footer .ck-footer-logo { align-items: center; }
.ck-footer-logo { min-inline-size: var(--target); }
.ck-footer-hours { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); margin: 0; font-variant-numeric: tabular-nums; }
.ck-footer-hours :is(dt, dd) { margin: 0; color: var(--ink-muted); white-space: nowrap; }
.ck-footer-hours .today { color: var(--ink); font-weight: var(--weight-strong); }
.ck-footer-hours .ck-footer-today { font-weight: var(--weight-body); }
.ck-footer-hours :is(dt, dd) { font-size: inherit; line-height: inherit; }
.ck-footer-hours dd { text-align: right; }
.ck-footer-hours .mf-hours-range { display: grid; grid-template-columns: 2.8em .6em 2.8em; justify-content: end; font-variant-numeric: tabular-nums; }
.ck-footer-hours .mf-hours-range > :nth-child(2) { text-align: center; }
.ck-footer-col h2 { font-size: var(--text-body); }
.ck-footer-menu ul { columns: 2; column-gap: var(--space-5); }
.ck-footer-menu li { break-inside: avoid; }
@media (min-width: 860px) { .ck-footer-menu ul { columns: 3; } }
.ck-footer .venue-qr { margin: var(--space-2) 0 0; color: var(--ink-muted); }
.ck-footer-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-5); margin-top: var(--space-5); color: var(--ink-muted); }
.ck-footer-base p { margin: 0; }
.ck-footer .chockers-foot { display: flex; align-items: center; gap: var(--space-2); }
.ck-footer a.chockers-logo { display: inline-flex; align-items: center; min-block-size: var(--target); min-inline-size: var(--target); font-size: 0; color: transparent; text-decoration: none; }
.ck-footer .chockers-logo::before { content: ""; }
.ck-nav { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; border: 0; }   /* tabs as links: .ck-tab[aria-current] */
.ck-nav .ck-tab { padding-inline: var(--space-1); }

/* The view switch: a plain labelled menu. No dot, no arrow glyph beyond the select's own. */
.ck-viewswitch { display: inline-flex; align-items: center; gap: var(--space-1); }
.ck-viewswitch > .ck-eyebrow { margin: 0; }
.ck-viewswitch .ck-select { min-inline-size: 12ch; }

/* ---- Card ---- */
.ck-card {
  position: relative; display: flex; flex-direction: column; gap: var(--card-gap);
  min-inline-size: 0; margin: 0; padding: var(--card-pad);
  background: var(--card-bg); color: var(--ink);
  border: var(--card-line-w) solid var(--card-line); border-radius: 0;
  font: inherit; text-align: start; text-decoration: none;
}
.ck-card > :is(h1, h2, h3, h4, h5, h6, p) { margin: 0; }
:is(a, button).ck-card, .ck-card--action { cursor: pointer; }
.ck-card--action:hover:not(.is-disabled, [aria-disabled="true"]), .ck-card.is-hover:not(.is-disabled) { outline: var(--line-2) solid var(--ink); }
.ck-card--action:active:not(.is-disabled, [aria-disabled="true"]), .ck-card.is-active { background: var(--card-bg-pressed); outline: var(--line-2) solid var(--ink); }
.ck-card:is([aria-selected="true"], [aria-current], .is-selected)::before {
  content: ""; position: absolute; inset-block: calc(var(--card-line-w) * -1); inset-inline-start: calc(var(--card-line-w) * -1);
  inline-size: var(--card-bar-w); background: var(--card-bar-selected);
}
.ck-card:is([aria-selected="true"], [aria-current], .is-selected) { padding-inline-start: calc(var(--card-pad) + var(--card-bar-w) - var(--card-line-w)); }
.ck-card[aria-invalid="true"] { border-color: var(--card-line-error); border-width: var(--card-line-w-error); padding: calc(var(--card-pad) - var(--card-line-w-error) + var(--card-line-w)); }
.ck-card:is(.is-disabled, [aria-disabled="true"]) { background: var(--card-bg-disabled); border-style: var(--control-line-style-disabled); cursor: not-allowed; }
.ck-card:is(.is-disabled, [aria-disabled="true"]) :is(h1, h2, h3, h4, h5, h6, .ck-strike) { text-decoration: line-through var(--control-strike-w); }
.ck-card:is(:focus-visible, .is-focus) { outline: var(--focus-ring-w) var(--focus-ring-style) var(--focus); outline-offset: var(--focus-ring-gap); }
.ck-card-media { margin: calc(var(--card-pad) * -1); margin-block-end: 0; aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; }
.ck-card-media > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.ck-card > :is(.ck-badge, .ck-tag, .ck-status) { align-self: flex-start; }
.ck-price { font-weight: var(--weight-loud); font-variant-numeric: tabular-nums; }
.ck-meta { margin: 0; color: var(--ink-muted); font-size: var(--text-min); line-height: var(--lh-small); }

/* ---- Chip: a toggle (category, filter, order type) ---- */
.ck-chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-block-size: var(--target); margin: 0; padding: 0 var(--chip-pad-x);
  font: var(--weight-strong) var(--text-min)/var(--lh-control) var(--font-sans);
  white-space: nowrap; text-decoration: none; cursor: pointer; appearance: none;
  background: transparent; color: var(--ink);
  border: var(--line-2) solid var(--ink); border-radius: 0;
}
.ck-chip:hover:not(:disabled, .is-disabled, [aria-pressed="true"]), .ck-chip.is-hover { background: var(--hl); color: var(--hl-ink); }
.ck-chip:active:not(:disabled, .is-disabled), .ck-chip.is-active { background: var(--ink); color: var(--bg); }
.ck-chip[aria-pressed="true"], .ck-chip[aria-selected="true"], .ck-chip.is-selected { background: var(--primary); color: var(--on-primary); border-color: var(--primary); font-weight: var(--weight-loud); }
.ck-chip[aria-pressed="true"]:hover { border-color: var(--ink); }
.ck-chip:is(:disabled, .is-disabled, [aria-disabled="true"]) { background: var(--btn-bg-disabled); border-style: var(--control-line-style-disabled); text-decoration: line-through var(--control-strike-w); cursor: not-allowed; }
.ck-chip:is(:focus-visible, .is-focus) { outline: var(--focus-ring-w) var(--focus-ring-style) var(--focus); outline-offset: var(--focus-ring-gap); }
.ck-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

/* ---- Stepper: quantity ---- */
.ck-stepper { display: inline-flex; align-items: center; border: var(--line-2) solid var(--ink); }
.ck-stepper > output { min-inline-size: var(--target); text-align: center; font-weight: var(--weight-loud); font-variant-numeric: tabular-nums; }
.ck-stepper > .ck-btn { border-width: 0; }

/* ---- List row and table ---- */
.ck-list { margin: 0; padding: 0; list-style: none; }
.ck-row {
  display: flex; align-items: center; gap: var(--space-2);
  min-block-size: var(--row-h); padding: var(--space-1) var(--row-pad-x);
  color: var(--ink); text-decoration: none; font: inherit; text-align: start;
  background: transparent; border: 0; border-bottom: var(--table-line-w) solid var(--table-line); border-radius: 0;
}
.ck-row > .ck-grow { flex: 1 1 auto; min-inline-size: 0; }
:is(a, button).ck-row, .ck-row--action { cursor: pointer; inline-size: 100%; }
.ck-row--action:hover:not(.is-disabled, [aria-disabled="true"]), .ck-row.is-hover { background: var(--row-bg-hover); outline: var(--line-2) solid var(--ink); outline-offset: calc(var(--line-2) * -1); }
.ck-row--action:active:not(.is-disabled, [aria-disabled="true"]), .ck-row.is-active { background: var(--row-bg-pressed); outline: var(--line-2) solid var(--ink); outline-offset: calc(var(--line-2) * -1); }
.ck-row:is([aria-selected="true"], [aria-current], .is-selected) { box-shadow: inset var(--card-bar-w) 0 0 var(--primary); padding-inline-start: calc(var(--row-pad-x) + var(--card-bar-w)); font-weight: var(--weight-strong); }
.ck-row[aria-invalid="true"] { box-shadow: inset var(--line-8) 0 0 var(--danger); padding-inline-start: calc(var(--row-pad-x) + var(--line-8)); }
.ck-row:is(.is-disabled, [aria-disabled="true"]) { background: var(--surface-2); text-decoration: line-through var(--control-strike-w); cursor: not-allowed; }
.ck-row:is(:focus-visible, .is-focus) { outline: var(--focus-ring-w) var(--focus-ring-style) var(--focus); outline-offset: calc(var(--focus-ring-w) * -1); }

.ck-table-wrap { overflow-x: auto; }
.ck-table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-min); line-height: var(--lh-small); }
.ck-table :is(th, td) { padding: var(--table-pad-y) var(--table-pad-x); text-align: start; vertical-align: top; border-bottom: var(--table-line-w) solid var(--table-line); }
.ck-table th { font: var(--weight-strong) var(--text-label)/var(--lh-label) var(--font-sans); letter-spacing: var(--track-label); text-transform: uppercase; border-bottom: var(--table-head-line-w) solid var(--table-head-line); }
.ck-table :is(.num, td[align="right"]) { text-align: end; font-variant-numeric: tabular-nums; }
.ck-table--zebra tbody tr:nth-child(even) { background: var(--zebra); }
.ck-table tbody tr:hover { background: var(--row-bg-hover); }

/* ---- Sheet and dialog: bottom sheet at phone width, centred dialog from 860px ---- */
.ck-sheet {
  box-sizing: border-box; inline-size: 100%; max-inline-size: var(--sheet-max); max-block-size: 92dvh; overflow: auto;
  margin: auto auto 0; padding: 0 var(--sheet-pad) var(--sheet-pad);
  background: var(--sheet-bg); color: var(--sheet-ink);
  border: var(--sheet-line-w) solid var(--sheet-line); border-bottom-width: 0; border-radius: 0;
}
.ck-sheet::backdrop { background: var(--scrim); }
@media (min-width: 860px) { .ck-sheet { margin: auto; border-bottom-width: var(--sheet-line-w); } }
.ck-sheet--inline { position: static; margin: 0; max-inline-size: none; border-bottom-width: var(--sheet-line-w); }   /* the specimen */
.ck-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ck-sheet-head > h2, .ck-sheet-head > h3 { margin: 0; }
/* The drag handle: a 44px strip. Drag starts here and nowhere else. */
.ck-handle { position: relative; display: block; inline-size: 100%; block-size: var(--handle-h); margin: 0; padding: 0; border: 0; background: transparent; cursor: grab; touch-action: none; }
.ck-handle::before { content: ""; position: absolute; top: 50%; left: 50%; inline-size: var(--handle-bar-w); block-size: var(--handle-bar-h); translate: -50% -50%; background: var(--ink); }
.ck-handle:hover:not(:disabled), .ck-handle.is-hover { background: var(--hl); }
.ck-handle:hover:not(:disabled)::before, .ck-handle.is-hover::before { background: var(--hl-ink); }
.ck-handle:active, .ck-handle.is-active { background: var(--ink); cursor: grabbing; }
.ck-handle:active::before, .ck-handle.is-active::before { background: var(--bg); }
.ck-handle:disabled, .ck-handle.is-disabled { cursor: not-allowed; }
.ck-handle:disabled::before, .ck-handle.is-disabled::before { background: var(--ink-muted); }
.ck-handle:is(:focus-visible, .is-focus) { outline: var(--focus-ring-w) var(--focus-ring-style) var(--focus); outline-offset: calc(var(--focus-ring-w) * -1); }

/* ---- Joystick: a vertical bar, the knob springs to the centre. --joy runs -1 (down) to 1 (up). ---- */
.ck-joy { --joy: 0; display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.ck-joy-track {
  position: relative; inline-size: var(--joy-track-w); block-size: var(--joy-track-h);
  background: var(--joy-track-bg); border: var(--joy-track-line-w) solid var(--joy-track-line);
}
.ck-joy-track::before { content: ""; position: absolute; inset-inline: 0; top: 50%; block-size: var(--joy-mark-w); translate: 0 -50%; background: var(--joy-mark); }
.ck-joy-knob { position: absolute; left: 50%; top: 50%; inline-size: var(--joy-knob); block-size: var(--joy-knob); padding: 0; translate: -50% calc(-50% - var(--joy) * var(--joy-travel)); touch-action: none; cursor: grab; }
.ck-joy-knob:active, .ck-joy-knob.is-active { cursor: grabbing; }
.ck-joy-value { font-weight: var(--weight-loud); font-variant-numeric: tabular-nums; text-align: center; }
.ck-joy[aria-disabled="true"] .ck-joy-track, .ck-joy.is-disabled .ck-joy-track { border-style: var(--control-line-style-disabled); background: var(--surface-2); }

/* ---- Progress line: thin, one segment per step; the current word is bold ---- */
.ck-steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-half); margin: 0; padding: 0; list-style: none; }
.ck-steps > li { padding-top: var(--space-1); border-top: var(--steps-line-w) solid var(--steps-todo); font-size: var(--text-min); line-height: var(--lh-small); color: var(--ink-muted); }
.ck-steps > li.is-done { border-top-color: var(--steps-done); color: var(--ink); }
.ck-steps > li[aria-current="step"] { border-top-color: var(--steps-done); color: var(--ink); font-weight: var(--weight-loud); }

/* ---- Empty state ---- */
.ck-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-4) var(--gutter); text-align: center; border: var(--line-2) dashed var(--empty-line); }
.ck-empty > .ck-empty-mark { inline-size: var(--empty-mark); block-size: var(--empty-mark); border: var(--line-4) solid var(--ink); }
.ck-empty > :is(h2, h3, h4, p) { margin: 0; }

/* ---- Venue strip: a chip of venue colours, for the specimen and the admin theme preview ---- */
.ck-swatch { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--space-6); block-size: var(--space-4); border: var(--line-2) solid var(--ink); font: var(--weight-strong) var(--text-min)/1 var(--font-sans); }

/* ======================================================================= */
/* 8. Forced states, for the specimen and for tests: .is-hover .is-focus    */
/*    .is-active .is-disabled behave as the real pseudo-class.              */
/* ======================================================================= */
.is-focus.ck-link, .ck-tab.is-focus, .ck-btn.is-focus { outline: var(--focus-ring-w) var(--focus-ring-style) var(--focus); outline-offset: var(--focus-ring-gap); }

/* ======================================================================= */
/* 9. Density. Staff pages use compact: body 16px (the floor). The whole    */
/*    scale is a multiple of --text-body, so every size follows.            */
/* ======================================================================= */
[data-density="compact"] { --text-body: var(--text-min); --lh-body: 1.5; --gutter: var(--space-1); --section-gap: var(--space-3); }
@media (min-width: 860px) { [data-density="compact"] { --gutter: var(--space-2); } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* Virtual printer: printed images retain paper colours in either page theme. */
.ck-virtual-printer { margin: 0; padding: var(--space-2); }
.ck-virtual-printer-head { max-width: 576px; margin: 0 auto var(--space-2); }
.ck-virtual-printer-head h1 { font-size: var(--text-h4); letter-spacing: var(--track-h4); }
.ck-virtual-printer [hidden] { display: none; }
.ck-virtual-printer-head > :is(.ck-alert, .ck-btn) { margin-block: var(--space-1); }
.ck-receipt-chain { max-width: 576px; margin: 0 auto; padding-bottom: 100vh; } /* room to feed the newest receipt's top to the window top */
.ck-receipt-chain figure { margin: 0; padding: 0; border-bottom: 2px dashed var(--ink-muted); }
.ck-receipt-chain img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.ck-receipt-chain figcaption { padding: var(--space-1) 0; color: var(--ink-muted); }