/*
 * IBM Plex Sans (IBM, SIL OFL 1.1; licence in ./fonts, THIRD_PARTY_NOTICES): the text face of the teacher app and the
 * operator console (DS-020 §4.3). One variable file serves 400 and 600; italic is 400 (a bold italic is synthesized).
 * Latin loads first, the extended subset only when a page uses its characters. `Aurum Fallback` is metric-matched to
 * Arial, Arimo and Liberation Sans so a late swap moves no text (§4.12 CLS).
 */
/*
 * IBM Plex Mono (IBM, SIL OFL 1.1; licence in ./fonts, THIRD_PARTY_NOTICES) for code, timers, counts and numbers in every
 * app (DS-020 §4.3). 400, 400 italic (code comments) and 600; Latin first, the extended subset on use (unicode-range).
 * Never preloaded. The fallback is metric-matched to Courier New, Liberation Mono and Cousine (all 600/1000 wide).
 */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/r/7c66df599aee9aee2aec3c7f5203a6b964379112/assets/fonts/plex-mono-italic-latin-ext.1b07eee6df.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/r/7c66df599aee9aee2aec3c7f5203a6b964379112/assets/fonts/plex-mono-italic-latin.0840095faa.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/r/7c66df599aee9aee2aec3c7f5203a6b964379112/assets/fonts/plex-mono-latin-ext.6bc0f226a5.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/r/7c66df599aee9aee2aec3c7f5203a6b964379112/assets/fonts/plex-mono-latin.08949f728d.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/r/7c66df599aee9aee2aec3c7f5203a6b964379112/assets/fonts/plex-mono-600-latin-ext.32057cf50d.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/r/7c66df599aee9aee2aec3c7f5203a6b964379112/assets/fonts/plex-mono-600-latin.0d1f0b8d07.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: 'Aurum Mono Fallback';
  src: local('Courier New'), local('Cousine'), local('Liberation Mono');
  size-adjust: 100%;
  ascent-override: 102.5%;
  descent-override: 27.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/r/7c66df599aee9aee2aec3c7f5203a6b964379112/assets/fonts/plex-sans-italic-latin-ext.c5c00e8a32.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/r/7c66df599aee9aee2aec3c7f5203a6b964379112/assets/fonts/plex-sans-italic-latin.6de912e531.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('/r/7c66df599aee9aee2aec3c7f5203a6b964379112/assets/fonts/plex-sans-latin-ext.d160e20920.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('/r/7c66df599aee9aee2aec3c7f5203a6b964379112/assets/fonts/plex-sans-latin.e2291e842c.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: 'Aurum Fallback';
  src: local('Arial'), local('Arimo'), local('Liberation Sans');
  size-adjust: 101.8%;
  ascent-override: 100.7%;
  descent-override: 27%;
  line-gap-override: 0%;
}

/*
 * DS-020 design tokens: the only file allowed to hold raw colors or px sizes (`pnpm lint`, scripts/check-tokens.mjs).
 * Revision 3 "Signal" (DS-020 §4.2 to §4.4, step 3.121); the shipped Ink names map to these in §4.16.
 * Colors: the light theme under :root, then the dark theme "Midnight" twice (identical blocks), because the device
 * decides unless the teacher app sets <html data-theme="light|dark"> (DS-020 §4.2), then the high-contrast theme
 * (§4.7, a student accommodation: black on white, 7:1 for text). The contrast test (tokens.test.ts) recomputes every
 * §4.2 pair from here and checks the two dark blocks match. The Ink colour blocks keep their Ink values until step
 * 3.136 deletes ColorBlock. Fonts: files arrive in step 3.137; the family names below are unchanged until then.
 */
:root {
  color-scheme: light;

  /* Color (DS-020 §4.2) */
  --color-bg: #f4f2ee; /* page ground; unselected choice key; tag chip fill */
  --color-surface: #ffffff; /* panels, cards, table, fields, menus, dialogs */
  --color-sunken: #f0efec; /* code blocks, table header row, hover fill */
  --color-well: #e4e0d8; /* PDF viewport of a reference sheet; splitter handle ground */
  --color-border: #dedad2; /* decorative hairlines only, never a control's only edge */
  --color-border-strong: #8c877d; /* control edges, unselected choice and strip edges */
  --color-text: #1b1b1b;
  --color-text-muted: #57534e;
  --color-primary: #13315c; /* links, selected edge, check glyphs */
  --color-primary-soft: #e6ecf5; /* selected choice, selected or current row, pressed toggle */
  --color-answered-edge: #13315c; /* 2 px edge of an answered strip square */
  --color-answered-fill: #13315c; /* fill of an answered strip square (a tint in dark) */
  --color-on-answered: #ffffff;
  --color-key-selected: #13315c; /* letter key of the chosen answer */
  --color-on-key-selected: #ffffff;
  --color-header: #13315c; /* app and student header band */
  --color-on-header: #ffffff;
  --color-header-edge: #8fa2bf; /* timer pill border and outlined controls on the header */
  --color-header-divider: #5c7396; /* decorative divider after the mark */
  --color-nav-current-bg: #ffffff; /* the account button fill only */
  --color-on-nav-current: #13315c;
  --color-attention: #7a4b00; /* "needs attention" tag; never orange */
  --color-attention-soft: #fcf0d6;
  --color-operator-header: #2e3338; /* operator console header band (graphite) in both themes */
  --color-action: #b5470f; /* the one filled primary button per screen */
  --color-action-hover: #9a3c0b;
  --color-on-action: #ffffff;
  --color-focus: #b5470f; /* :focus-visible ring only */
  --color-focus-on-header: #ffffff; /* the ring on the header band */
  --color-danger: #b3261e;
  --color-danger-soft: #fcebe9;
  --color-warning: #7a4b00;
  --color-warning-soft: #fcf0d6;
  --color-success: #2d6a2e;
  --color-brand: #a8781f; /* the Aurum mark only, never text */
  --color-code-keyword: #13315c;
  --color-code-string: #2d6a2e;
  --color-code-number: #7a3e00;
  --color-code-comment: #57534e;
  --color-code-gutter: #6b665e;
  --color-flag: #1b1b1b; /* corner flag on a strip square */
  /* Ink colour blocks: unchanged until step 3.136 deletes ColorBlock. */
  --color-block-deep: #0e3b43;
  --color-on-block-deep: #ffffff;
  --color-on-block-deep-muted: #cfe6ea;
  --color-block-deep-edge: #8fb0b6;
  --color-block-calm: #e4ebdd;
  --color-on-block-calm: #14232b;
  --color-on-block-calm-muted: #44524a;
  --color-block-calm-edge: #66767e;
  --color-indicator: var(--color-primary); /* alias: the mark of the current or open thing, always with a shape cue */

  /* Elevation (DS-020 §4.2, §4.4): only a menu, tooltip or dialog floats; light uses a shadow, dark has none, and a
     floating surface always has a 1 px --color-border-strong edge. */
  --shadow-menu: 0 2px 8px rgb(0 0 0 / 16%);
  --scrim: rgb(20 20 20 / 50%); /* behind a modal dialog, the only scrim */

  /* Type (DS-020 §4.3): rem so zoom scales everything; line heights are ratios. */
  --font-sans:
    'IBM Plex Sans', 'Aurum Fallback', system-ui, 'Segoe UI', Roboto, Arial, sans-serif; /* teacher, operator */
  --font-mono: 'IBM Plex Mono', 'Aurum Mono Fallback', ui-monospace, Menlo, Consolas, monospace;
  --text-sm: 0.875rem; /* teacher floor */
  --line-sm: 1.45;
  --text-base: 0.9375rem;
  --line-base: 1.45;
  --text-md: 1rem;
  --line-md: 1.45;
  --text-title: 1.0625rem;
  --line-title: 1.45;
  --text-lg: 1.125rem; /* student floor */
  --line-lg: 1.45;
  --text-choice: 1.25rem;
  --line-choice: 1.4;
  --text-xl: 1.375rem;
  --line-xl: 1.5;
  --text-2xl: 1.75rem;
  --line-2xl: 1.2;
  --text-display: clamp(2rem, 4vw, 2.75rem);
  --line-display: 1.15;
  --leading-code: 1.6;
  --leading-math: 1.8;

  /* Space, shape, sizes (DS-020 §4.4) */
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-4-5: 1.25rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --radius-tag: 3px; /* kbd, tag chips, checkbox box, legend swatches */
  --radius-control: 4px; /* every control, card, panel, row, tab top corners */
  --radius-round: 50%; /* radio dots, switch track, the dashed "add" circle */
  --border-width: 1px;
  --selection-width: 2px;
  --indicator-width: 3px; /* current tab bar, current place bar */
  --indicator-width: 3px;
  --focus-width: 3px;
  --focus-offset: 2px;
  --control-height: 2.25rem; /* teacher; min-height, never height */
  --touch-target: 2.75rem; /* 44 px: teacher on a touch width, pay. (DS-024 §4.7) */
  --control-height-xl: 3rem;
  --student-control: 3rem; /* every student button and control */
  --student-control-xl: 3.5rem; /* full-screen panels */
  --student-choice-min: 4rem;
  --student-key: 2.5rem;
  --student-timer-height: 2.5rem;
  --header-height-teacher: 3.25rem;
  --header-height-student: 3.5rem;
  --footer-height-student: 4.75rem;
  --icon-size-inline: 1.125rem;
  --page-max-app: 87.5rem;
  --page-max-pay: 65rem;
  --page-max-site: 75rem;
  --panel-base: 1.125rem; /* the em model of a student panel (DS-020 §4.14.6) */
  --panel-zoom: 1;
  --sticky-top: 0px; /* set from the measured height of the sticky bars */
  --sticky-bottom: 0px;

  /* Motion (DS-020 §4.4, §4.12.1): feedback only; 0 under reduced motion. */
  --motion-fast: 120ms;
  --motion-medium: 200ms;
  --motion-submit: 300ms; /* the one named exception: the submit moment */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* The student app's text face (DS-020 §4.3); its index.html sets data-face on <html>. */
:root[data-face='atkinson'] {
  --font-sans: 'Atkinson Hyperlegible Next', 'Aurum Fallback', system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Dark theme (Midnight): the device asks for it and the teacher did not choose Light ... */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --color-bg: #0e141b;
    --color-surface: #151d27;
    --color-sunken: #1c2633;
    --color-well: #202b38;
    --color-border: #283544;
    --color-border-strong: #71839a;
    --color-text: #e3eaf2;
    --color-text-muted: #a5b3c2;
    --color-primary: #8cb4ea;
    --color-primary-soft: #1c3150;
    --color-answered-edge: #8cb4ea;
    --color-answered-fill: #1c3150;
    --color-on-answered: #e3eaf2;
    --color-key-selected: #8cb4ea;
    --color-on-key-selected: #0e141b;
    --color-header: #0a1726;
    --color-on-header: #e3eaf2;
    --color-header-edge: #a9b8d0;
    --color-header-divider: #5c7396;
    --color-nav-current-bg: #e3eaf2;
    --color-on-nav-current: #0a1726;
    --color-attention: #f2c46b;
    --color-attention-soft: #2e2610;
    --color-operator-header: #2e3338;
    --color-action: #f0935a;
    --color-action-hover: #f6ae7e;
    --color-on-action: #1b1b1b;
    --color-focus: #f6ae7e;
    --color-focus-on-header: #e3eaf2;
    --color-danger: #ff8f85;
    --color-danger-soft: #3d1f1c;
    --color-warning: #f0b44c;
    --color-warning-soft: #3a2e15;
    --color-success: #93d19b;
    --color-brand: #e0b25a;
    --color-code-keyword: #8cb4ea;
    --color-code-string: #93d19b;
    --color-code-number: #e8b57e;
    --color-code-comment: #a5b3c2;
    --color-code-gutter: #8c9aab;
    --color-flag: #e3eaf2;
    /* Ink colour blocks: unchanged until step 3.136 deletes ColorBlock. */
    --color-block-deep: #0f4550;
    --color-on-block-deep: #ffffff;
    --color-on-block-deep-muted: #c4dfe5;
    --color-block-deep-edge: #86a8ae;
    --color-block-calm: #1d2a22;
    --color-on-block-calm: #dce8d8;
    --color-on-block-calm-muted: #b5c4b3;
    --color-block-calm-edge: #86a8ae;
    --shadow-menu: none;
  }
}

/* ... or the teacher chose Dark. */
:root[data-theme='dark'] {
  color-scheme: dark;
  --color-bg: #0e141b;
  --color-surface: #151d27;
  --color-sunken: #1c2633;
  --color-well: #202b38;
  --color-border: #283544;
  --color-border-strong: #71839a;
  --color-text: #e3eaf2;
  --color-text-muted: #a5b3c2;
  --color-primary: #8cb4ea;
  --color-primary-soft: #1c3150;
  --color-answered-edge: #8cb4ea;
  --color-answered-fill: #1c3150;
  --color-on-answered: #e3eaf2;
  --color-key-selected: #8cb4ea;
  --color-on-key-selected: #0e141b;
  --color-header: #0a1726;
  --color-on-header: #e3eaf2;
  --color-header-edge: #a9b8d0;
  --color-header-divider: #5c7396;
  --color-nav-current-bg: #e3eaf2;
  --color-on-nav-current: #0a1726;
  --color-attention: #f2c46b;
  --color-attention-soft: #2e2610;
  --color-operator-header: #2e3338;
  --color-action: #f0935a;
  --color-action-hover: #f6ae7e;
  --color-on-action: #1b1b1b;
  --color-focus: #f6ae7e;
  --color-focus-on-header: #e3eaf2;
  --color-danger: #ff8f85;
  --color-danger-soft: #3d1f1c;
  --color-warning: #f0b44c;
  --color-warning-soft: #3a2e15;
  --color-success: #93d19b;
  --color-brand: #e0b25a;
  --color-code-keyword: #8cb4ea;
  --color-code-string: #93d19b;
  --color-code-number: #e8b57e;
  --color-code-comment: #a5b3c2;
  --color-code-gutter: #8c9aab;
  --color-flag: #e3eaf2;
  /* Ink colour blocks: unchanged until step 3.136 deletes ColorBlock. */
  --color-block-deep: #0f4550;
  --color-on-block-deep: #ffffff;
  --color-on-block-deep-muted: #c4dfe5;
  --color-block-deep-edge: #86a8ae;
  --color-block-calm: #1d2a22;
  --color-on-block-calm: #dce8d8;
  --color-on-block-calm-muted: #b5c4b3;
  --color-block-calm-edge: #86a8ae;
  --shadow-menu: none;
}

/* Order matters: this block has the same specificity as the dark block above and wins by coming after it. Keep it last
   of the three themes.

   High contrast (DS-020 §4.7, step 3.14): black on white, every text pair at 7:1, black borders; the student app sets
   <html data-theme="high-contrast"> for an attempt whose accommodations ask for it and takes it off afterwards. The
   focus ring stays 3 px (--focus-width, unchanged above). Colour blocks are plain bordered panels here. */
:root[data-theme='high-contrast'] {
  color-scheme: light;
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-sunken: #f2f2f2;
  --color-well: #e6e6e6;
  --color-border: #000000;
  --color-border-strong: #000000;
  --color-text: #000000;
  --color-text-muted: #333333;
  --color-primary: #00305a;
  --color-primary-soft: #e8f1fa;
  --color-answered-edge: #00305a;
  --color-answered-fill: #00305a;
  --color-on-answered: #ffffff;
  --color-key-selected: #00305a;
  --color-on-key-selected: #ffffff;
  --color-header: #00305a;
  --color-on-header: #ffffff;
  --color-header-edge: #c9d6e6;
  --color-header-divider: #7f98bd;
  --color-nav-current-bg: #ffffff;
  --color-on-nav-current: #00305a;
  --color-attention: #5a3700;
  --color-attention-soft: #fdf0d0;
  --color-operator-header: #000000;
  --color-action: #000000;
  --color-action-hover: #333333;
  --color-on-action: #ffffff;
  --color-focus: #000000;
  --color-focus-on-header: #ffffff;
  --color-danger: #8a0000;
  --color-danger-soft: #fde8e8;
  --color-warning: #5a3700;
  --color-warning-soft: #fdf0d0;
  --color-success: #0b4a00;
  --color-brand: #a8781f;
  --color-code-keyword: #00305a;
  --color-code-string: #0b4a00;
  --color-code-number: #5a3700;
  --color-code-comment: #333333;
  --color-code-gutter: #4d4d4d;
  --color-flag: #000000;
  /* Ink colour blocks: unchanged until step 3.136 deletes ColorBlock. */
  --color-block-deep: #ffffff;
  --color-on-block-deep: #000000;
  --color-on-block-deep-muted: #333333;
  --color-block-deep-edge: #000000;
  --color-block-calm: #f2f2f2;
  --color-on-block-calm: #000000;
  --color-on-block-calm-muted: #333333;
  --color-block-calm-edge: #000000;
  --shadow-menu: 0 2px 8px rgb(0 0 0 / 30%);
}

/* Forced colors (DS-020 §4.2): the system palette wins whatever theme the teacher chose (hence the selector's
   specificity). */
@media (forced-colors: active) {
  :root,
  :root:not([data-theme='light']),
  :root[data-theme] {
    --color-bg: Canvas;
    --color-surface: Canvas;
    --color-sunken: Canvas;
    --color-well: Canvas;
    --color-text: CanvasText;
    --color-text-muted: CanvasText;
    --color-border: CanvasText;
    --color-border-strong: CanvasText;
    --color-primary: LinkText;
    --color-primary-soft: Canvas;
    --color-answered-edge: CanvasText;
    --color-answered-fill: Canvas;
    --color-on-answered: CanvasText;
    --color-key-selected: Canvas;
    --color-on-key-selected: CanvasText;
    --color-header: Canvas;
    --color-on-header: CanvasText;
    --color-header-edge: CanvasText;
    --color-header-divider: CanvasText;
    --color-nav-current-bg: Highlight;
    --color-on-nav-current: HighlightText;
    --color-attention: CanvasText;
    --color-attention-soft: Canvas;
    --color-operator-header: Canvas;
    --color-action: ButtonText;
    --color-action-hover: ButtonText;
    --color-on-action: ButtonFace;
    --color-focus: Highlight;
    --color-focus-on-header: Highlight;
    --color-danger: CanvasText;
    --color-danger-soft: Canvas;
    --color-warning: CanvasText;
    --color-warning-soft: Canvas;
    --color-success: CanvasText;
    --color-brand: CanvasText;
    --color-code-keyword: CanvasText;
    --color-code-string: CanvasText;
    --color-code-number: CanvasText;
    --color-code-comment: CanvasText;
    --color-code-gutter: CanvasText;
    --color-flag: CanvasText;
    --color-block-deep: Canvas;
    --color-on-block-deep: CanvasText;
    --color-on-block-deep-muted: CanvasText;
    --color-block-deep-edge: CanvasText;
    --color-block-calm: Canvas;
    --color-on-block-calm: CanvasText;
    --color-on-block-calm-muted: CanvasText;
    --color-block-calm-edge: CanvasText;
  }
}

/* A touch width (DS-024 §4.7, step 3.80): every control that sizes itself from the token (buttons, fields, tabs, menu
   items, disclosure summaries, choice rows) is 44 px, so no screen needs its own phone rule for its targets. */
@media (max-width: 39.99rem) {
  :root {
    --control-height: var(--touch-target);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-medium: 0ms;
    --motion-submit: 0ms;
  }
}

/* Paper (DS-031 §4.3, §9): a printed booklet is black ink on white in every theme, so these two have no dark values and
   sit outside the themes' token sets. The code cards of step 6.10 print the same way. */
.pk,
.xp-print {
  --color-print-ink: #000000;
  --color-print-paper: #ffffff;
}

/* DS-020 base: a small reset, focus, reduced motion and forced colors. Tokens only (scripts/check-tokens.mjs). */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-sans);
  font-size: calc(100% * var(--student-zoom, 1)); /* DS-020 §4.7: the M3 zoom accommodation is this one variable */
  line-height: var(--line-md);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Focus is never hidden under a sticky bar (2.4.11): the shells measure their bars into these. */
  scroll-padding-top: calc(var(--sticky-top, 0px) + var(--space-2));
  scroll-padding-bottom: calc(var(--sticky-bottom, 0px) + var(--space-2));
}

/* Reflow at 320 CSS px (WCAG 1.4.10): a fieldset otherwise never shrinks below its content, nor a control below its
   intrinsic width. */
fieldset {
  min-inline-size: 0;
}

input,
select,
textarea {
  max-inline-size: 100%;
}

body {
  margin: 0;
  font-size: var(--text-md);
  background: var(--color-bg);
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-3);
  font-weight: 600;
}

/* Four steps you can tell apart at a glance on a phone: size and weight fall together, and h4 is a small muted label. */
h1 {
  font-size: var(--text-2xl);
  line-height: var(--line-2xl);
  font-weight: 700;
}

h2 {
  font-size: var(--text-xl);
  line-height: var(--line-xl);
}

h3 {
  font-size: var(--text-lg);
  line-height: var(--line-lg);
}

h4 {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--line-sm);
}

p {
  margin: 0 0 var(--space-3);
  max-width: 70ch;
}

a {
  color: var(--color-primary);
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration-thickness: 3px; /* DS-020 §4.2: a link's colour does not change on hover */
}

code,
kbd,
pre,
samp {
  font-family: var(--font-mono);
}

button,
input,
select,
textarea {
  font: inherit;
}

/* Native fields take the text color; native buttons keep the platform's own pair, which passes in both schemes. */
input,
select,
textarea {
  color: inherit;
}

:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.au-visually-hidden:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Reduced motion: transforms are removed, not shortened (DS-020 §4.12). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  :focus-visible {
    outline-color: Highlight;
  }
}

/* The public site (DS-022, DS-020 Signal): tokens only (scripts/check-tokens.mjs). Light only, no dark theme. */
:root {
  color-scheme: only light;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-size: var(--text-lg);
  line-height: 1.55;
}

.st-skip:focus {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 1;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border: var(--selection-width) solid var(--color-primary);
}

.st-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-2) max(var(--space-5), calc((100% - var(--page-max-site)) / 2 + var(--space-5)));
  background: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-border);
}

.st-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  color: var(--color-text);
  font-size: var(--text-xl);
  font-weight: 700;
  text-decoration: none;
}

.st-mark-icon {
  color: var(--color-brand);
}

.st-button {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  padding: var(--space-1) var(--space-4);
  border: var(--selection-width) solid var(--color-primary);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.st-button[aria-current='page'] {
  background: var(--color-primary-soft);
}

.st-button--primary {
  border-color: var(--color-action);
  background: var(--color-action);
  color: var(--color-on-action);
}

.st-button--large {
  min-height: 3rem;
  padding: var(--space-1) var(--space-5);
}

.st-button--primary:hover {
  border-color: var(--color-action-hover);
  background: var(--color-action-hover);
}

.st-main {
  flex: 1;
  background: var(--color-surface);
}

.st-wrap {
  width: 100%;
  max-width: var(--page-max-site);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
  box-sizing: border-box;
}

.st-narrow {
  max-width: 45rem;
}

.st-hero h1 {
  font-size: var(--text-display);
  line-height: var(--line-display);
}

.st-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: var(--space-7);
  align-items: center;
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}

.st-hero h1,
.st-hero p {
  margin: 0;
}

.st-hero figure {
  margin: 0;
}

.st-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.st-stack > * {
  margin: 0;
}

.st-stack--loose {
  gap: var(--space-6);
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}

.st-muted {
  color: var(--color-text-muted);
}

.st-band {
  background: var(--color-bg);
  border-top: var(--border-width) solid var(--color-border);
  border-bottom: var(--border-width) solid var(--color-border);
}

.st-split,
.st-districts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: var(--space-6);
  align-items: start;
}

.st-districts {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}

.st-shot {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  padding: var(--space-4);
  box-sizing: border-box;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-md);
  text-align: center;
}

.st-hero .st-shot {
  background: var(--color-bg);
}

.st-band h3 {
  margin: 0 0 var(--space-3);
}

.st-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: 0 var(--space-6);
  margin: 0;
}

.st-facts--list {
  grid-template-columns: minmax(0, 1fr);
}

.st-lead {
  font-size: var(--text-xl);
  line-height: var(--line-xl);
}

.st-facts div {
  padding: var(--space-3) 0;
  border-top: var(--border-width) solid var(--color-border);
}

.st-facts dt {
  font-weight: 600;
}

.st-facts dd {
  margin: 0;
}

.st-chooser {
  margin: var(--space-5) 0;
  padding: 0;
  list-style: none;
}

.st-chooser li + li {
  margin-top: var(--space-3);
}

.st-chooser a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 5.5rem;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
}

.st-chooser a:hover {
  background: var(--color-primary-soft);
}

.st-choice-title {
  display: block;
  color: var(--color-primary);
  font-size: var(--text-choice);
  font-weight: 600;
}

.st-choice-help {
  display: block;
  color: var(--color-text-muted);
}

.st-chevron {
  flex: none;
  color: var(--color-primary);
}

.st-placeholder {
  padding: var(--space-3) var(--space-4);
  border: var(--selection-width) solid var(--color-attention);
  border-radius: var(--radius-control);
  background: var(--color-attention-soft);
  color: var(--color-text);
}

.st-footer {
  background: var(--color-bg);
  border-top: var(--border-width) solid var(--color-border);
}

.st-footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-8);
  font-size: var(--text-md);
}

.st-footer-label {
  font-weight: 600;
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

.st-footer ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
}

.st-footer-inner > p {
  align-self: flex-end;
  margin: 0 0 0 auto;
  color: var(--color-text-muted);
}

.st-band h2,
.st-districts h2 {
  font-size: var(--text-2xl);
  line-height: 1.25;
}

.st-band h3 {
  font-size: var(--text-xl);
  line-height: 1.3;
}

.st-footer li a {
  min-height: 2rem;
}

@media (pointer: coarse) {
  .st-footer li a {
    min-height: var(--touch-target);
  }
}

.st-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Header navigation (W0): the Sign in button only (owner, 2026-11-11); the page's filled primary is never in the header. */
.st-nav {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-5);
}

.st-nav .st-button {
  margin-left: auto;
}

.st-nav a:not(.st-button) {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.st-nav a:not(.st-button):hover {
  text-decoration: underline;
}

.st-nav a:not(.st-button)[aria-current='page'] {
  border-bottom: var(--indicator-width) solid var(--color-indicator);
}

.st-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.st-priced {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
}

.st-priced h2,
.st-priced p {
  margin: 0;
}

/* The CTA band (slot Z): one per page, full width navy, with the inverse primary button. */
.st-cta {
  background: var(--color-header);
  color: var(--color-on-header);
}

.st-cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}

.st-cta h2,
.st-cta p {
  margin: 0;
}

.st-cta a:focus-visible {
  outline-color: var(--color-focus-on-header);
}

.st-button--inverse {
  border-color: var(--color-on-header);
  background: var(--color-on-header);
  color: var(--color-header);
}

.st-button--inverse:hover {
  text-decoration: underline;
}

/* Footer contact block */
.st-footer address {
  font-style: normal;
}

/* Pricing (WP) */
.st-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-5);
}

.st-plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--indicator-width) solid var(--color-indicator);
}

.st-plan .st-button {
  margin-top: auto;
}

.st-plan h3,
.st-plan dl,
.st-plan dd {
  margin: 0;
}

.st-plan dt {
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

.st-plan dd + dt {
  margin-top: var(--space-3);
}

.st-price,
.st-later {
  display: block;
}

.st-later {
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

.st-calc fieldset {
  margin: 0 0 var(--space-3);
  padding: 0;
  border: 0;
}

.st-calc legend {
  font-weight: 600;
}

.st-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  margin-right: var(--space-5);
}

.st-calc label[for='seats'] {
  display: block;
  font-weight: 600;
}

.st-calc input[type='number'] {
  width: 10rem;
}

.st-sums {
  border-collapse: collapse;
  font-family: var(--font-mono);
}

.st-sums td {
  padding: var(--space-1) var(--space-5) var(--space-1) 0;
}

.st-total {
  font-family: var(--font-mono);
  font-weight: 600;
}

details {
  border-top: var(--border-width) solid var(--color-border);
}

summary {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  cursor: pointer;
  font-weight: 600;
}

/* Request a demo (WF) */
.st-form-page {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: var(--space-7);
  align-items: start;
}

.st-form-page h1,
.st-form-page h2 {
  margin: 0;
}

.st-form > p {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
}

.st-form label {
  font-weight: 600;
}

.st-form input:not([type='checkbox']),
.st-form select,
.st-form textarea,
.st-calc input[type='number'] {
  min-height: var(--touch-target);
  padding: var(--space-1) var(--space-3);
  box-sizing: border-box;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}

.st-form [aria-invalid='true'] {
  border-color: var(--color-danger);
  border-width: var(--selection-width);
}

.st-form .st-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-1) var(--space-3);
}

.st-form .st-consent label {
  font-weight: 400;
}

.st-form .st-consent a {
  grid-column: 2;
}

.st-form .st-button {
  align-self: flex-start;
  cursor: pointer;
}

.st-errors {
  padding: var(--space-3) var(--space-4);
  border: var(--selection-width) solid var(--color-danger);
  border-radius: var(--radius-control);
  background: var(--color-danger-soft);
}

.st-errors h2 {
  color: var(--color-danger);
  font-size: var(--text-xl);
}

.st-aside {
  padding-top: var(--space-3);
  border-top: var(--indicator-width) solid var(--color-indicator);
}

/* Headings of the pages that are not the home page (it scopes its own). */
.st-main h1 {
  font-size: var(--text-display);
  line-height: var(--line-display);
}

.st-main h2 {
  font-size: var(--text-2xl);
  line-height: 1.25;
}

.st-main h3 {
  font-size: var(--text-xl);
  line-height: 1.3;
}

/* Start here (DS-040 §4.19, step 5.131): one card per audience page, the whole card is the link. */
.st-start {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-6);
}

.st-start h2 {
  margin: 0;
  font-size: var(--text-xl);
}

.st-start ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-start li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.st-start li:hover {
  border-color: var(--color-primary);
}

.st-start a {
  color: var(--color-primary);
  font-size: var(--text-lg);
  font-weight: 600;
  text-decoration: none;
}

.st-start a:focus-visible {
  outline: none;
}

.st-start li:focus-within {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.st-start a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.st-start .st-start-all {
  margin: 0;
}

.st-start .st-start-all a {
  font-size: var(--text-base);
}

.st-start .st-start-all a::after {
  content: none;
}

/* The cards show the ring on the li (focus-within); this plain link is not in a card, so it carries its own. */
.st-start .st-start-all a:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.st-start span {
  color: var(--color-text-muted);
}

/* Panels, scenes and the Animations switch (DS-040 §4.17 and §4.18). Tokens only (scripts/check-tokens.mjs). Every
   scene's resting style is its finished state; animation only plays towards it, so "Animations Off" shows a full scene. */

/* The Animations switch: a checkbox that is the first element after the skip link, so rules are sibling selectors. */
.st-anim {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
}

.st-anim-track {
  position: relative;
  width: 3.25rem;
  height: 1.75rem;
  box-sizing: border-box;
  border: var(--selection-width) solid var(--color-primary);
  border-radius: 1rem;
  background: var(--color-primary);
}

.st-anim-track::after {
  content: '';
  position: absolute;
  top: var(--selection-width);
  left: calc(100% - 1.25rem - var(--selection-width));
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-round);
  background: var(--color-surface);
}

.st-anim-state::before {
  content: 'On';
  display: inline-block;
  min-width: 1.75rem;
}

/* Hidden always, focused or not: au-visually-hidden reveals itself on focus (right for the skip link), which showed this
   checkbox at the top of the page. Still focusable and operable; the focus ring is drawn on the visible switch below. */
.st-anim-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  opacity: 0;
  clip-path: inset(50%);
}

.st-anim-input:focus-visible ~ .st-header .st-anim {
  outline: var(--selection-width) solid var(--color-focus);
  outline-offset: var(--space-1);
}

.st-anim-input:not(:checked) ~ .st-header .st-anim-track {
  background: var(--color-surface);
}

.st-anim-input:not(:checked) ~ .st-header .st-anim-track::after {
  left: var(--selection-width);
  background: var(--color-primary);
}

.st-anim-input:not(:checked) ~ .st-header .st-anim-state::before {
  content: 'Off';
}

.st-anim-input:not(:checked) ~ main *,
.st-anim-input:not(:checked) ~ main *::before,
.st-anim-input:not(:checked) ~ main *::after {
  animation: none !important;
  transition: none !important;
}

.st-anim-off {
  display: none;
  color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .st-anim,
  .st-anim-input {
    display: none;
  }

  .st-anim-off {
    display: inline;
  }

  .sc-scene *,
  .sc-scene *::before,
  .sc-scene *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Narrow screens: the header stays one row. The long "Animations" word is hidden (it stays in the accessible name). */
@media (max-width: 40rem) {
  .st-header {
    gap: var(--space-2) var(--space-3);
  }

  .st-anim {
    gap: 0;
    font-size: 0;
  }

  /* The short On/Off word stays as the visible cue; the long label is hidden (font-size 0) but still names the switch. */
  .st-anim-state::before {
    min-width: 0;
    margin-left: var(--space-2);
    font-size: var(--text-sm);
  }
}

/* Group heading and panels */
.sc-group {
  padding-top: var(--space-4);
  padding-bottom: 0;
}

.sc-group-title {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-6) 0 var(--space-4);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sc-group-title::after {
  content: '';
  flex: 1;
  border-top: var(--selection-width) solid var(--color-primary);
}

.sc-panel {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: var(--space-7);
  align-items: start;
  margin-bottom: var(--space-5);
  padding: var(--space-6) var(--space-5);
  border: var(--selection-width) solid var(--color-primary);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.sc-panel--highlight {
  border-width: var(--indicator-width);
  background: var(--color-primary-soft);
}

.sc-panel--flip .sc-copy {
  order: 2;
}

.sc-copy h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-2xl);
  line-height: var(--line-2xl);
}

.sc-copy p {
  max-width: 26rem;
  margin: 0;
  color: var(--color-text-muted);
}

.sc-copy a {
  display: inline-block;
  margin-top: var(--space-4);
  font-weight: 600;
}

.sc-scene {
  padding: var(--space-4-5);
  border: var(--selection-width) solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-bg);
}

.sc-scene-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sc-scene-head span {
  white-space: nowrap;
}

/* Bar chart: y labels, plot and x labels share one grid, so bars and labels cannot drift. */
.sc-chart {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  grid-template-rows: 9rem auto;
  column-gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.sc-chart-y {
  position: relative;
}

.sc-chart-y span {
  position: absolute;
  right: 0;
  transform: translateY(50%);
}

.sc-y100 {
  bottom: 100%;
}

.sc-y50 {
  bottom: 50%;
}

.sc-y0 {
  bottom: 0;
}

.sc-chart-plot {
  display: block;
  overflow: visible;
}

.sc-grid {
  stroke: var(--color-border);
  stroke-dasharray: 4 4;
}

.sc-axis {
  stroke: var(--color-border-strong);
  stroke-width: var(--selection-width);
}

.sc-bar {
  fill: var(--color-primary);
  transform-box: fill-box;
  transform-origin: bottom;
  animation: sc-grow 1.2s var(--ease-out) both;
}

/* Time-based stagger, only where scroll timelines are missing: a delay outranks the reset below and would hold the bar hidden */
@supports not (animation-timeline: view()) {
  .sc-bar:nth-of-type(2) {
    animation-delay: 0.08s;
  }

  .sc-bar:nth-of-type(3) {
    animation-delay: 0.16s;
  }

  .sc-bar:nth-of-type(4) {
    animation-delay: 0.24s;
  }

  .sc-bar:nth-of-type(5) {
    animation-delay: 0.32s;
  }

  .sc-bar:nth-of-type(6) {
    animation-delay: 0.4s;
  }
}

.sc-chart-x {
  grid-column: 2;
  display: flex;
  padding-top: var(--space-1);
}

.sc-chart-x span {
  flex: 1;
  text-align: center;
}

@keyframes sc-grow {
  from {
    transform: scaleY(0);
  }
}

/* Day lanes */
.sc-lanes {
  display: grid;
  gap: var(--space-2);
}

.sc-lane-row {
  display: grid;
  grid-template-columns: 6rem 1fr;
  align-items: center;
  gap: var(--space-3);
  height: 2.25rem;
}

/* Auto height: the label's own line (a fixed 1.25rem clipped the tick marks' bottoms by a pixel). */
.sc-lane-row--ticks {
  height: auto;
}

.sc-lane-label {
  font-weight: 600;
}

.sc-lane {
  display: block;
  border: var(--selection-width) solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  box-sizing: border-box;
}

.sc-lane-ticks {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.sc-lane-ticks span {
  padding-left: var(--space-1);
  border-left: var(--selection-width) dashed var(--color-border-strong);
}

.sc-test {
  fill: var(--color-primary);
  transform-box: fill-box;
  transform-origin: left;
  animation: sc-wipe 1.2s var(--ease-out) both;
}

/* Same stagger for the lane tests */
@supports not (animation-timeline: view()) {
  .sc-lane-row:nth-child(3) .sc-test {
    animation-delay: 0.25s;
  }

  .sc-lane-row:nth-child(4) .sc-test {
    animation-delay: 0.5s;
  }
}

@keyframes sc-wipe {
  from {
    transform: scaleX(0);
  }
}

/* Table */
.sc-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.sc-table th,
.sc-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
  text-align: left;
}

.sc-table thead th {
  background: transparent;
  border-bottom: var(--selection-width) solid var(--color-border-strong);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sc-table tbody th {
  font-weight: 400;
}

.sc-table th:last-child,
.sc-table td:last-child {
  text-align: right;
}

/* Release switch: loops three times and rests on Released. */
.sc-release {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-weight: 600;
}

.sc-release-text {
  display: grid;
}

.sc-release-text > span {
  grid-area: 1 / 1;
}

.sc-release-off {
  opacity: 0;
  animation: sc-release-off 8s 3 forwards;
}

.sc-release-on {
  color: var(--color-success);
  animation: sc-release-on 8s 3 forwards;
}

.sc-release-switch {
  position: relative;
  flex: none;
  width: 3.2rem;
  height: 1.8rem;
  box-sizing: border-box;
  border: var(--selection-width) solid var(--color-border-strong);
  border-radius: 1rem;
  background: var(--color-sunken);
}

/* The Released look sits over the Not released look and fades in: only opacity and transform animate. */
.sc-release-switch::before {
  content: '';
  position: absolute;
  inset: calc(var(--selection-width) * -1);
  border-radius: 1rem;
  background: var(--color-success);
  animation: sc-release-on 8s 3 forwards;
}

.sc-release-switch::after {
  content: '';
  position: absolute;
  top: var(--space-0-5);
  left: var(--space-0-5);
  width: 1.2rem;
  height: 1.2rem;
  border-radius: var(--radius-round);
  background: var(--color-surface);
  transform: translateX(1.4rem);
  animation: sc-switch-knob 8s 3 forwards;
}

@keyframes sc-switch-knob {
  0%,
  60% {
    transform: none;
  }
}

@keyframes sc-release-off {
  0%,
  62% {
    opacity: 1;
  }
}

@keyframes sc-release-on {
  0%,
  62% {
    opacity: 0;
  }
}

/* Hero scene: Saving… swaps to Saved (never both), three times, resting on Saved. */
.sc-saved {
  display: grid;
  gap: var(--space-4);
}

.sc-saved p {
  margin: 0;
}

.sc-saved-q {
  font-size: var(--text-xl);
  font-weight: 600;
}

.sc-choices {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: var(--selection-width) solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.sc-choice-letter {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--radius-control);
  background: var(--color-bg);
  font-family: var(--font-mono);
}

/* The picked choice: a navy frame and a mark fade in over the plain look, so only opacity animates. */
.sc-choice--pick::before {
  content: '';
  position: absolute;
  inset: calc(var(--selection-width) * -1);
  border: var(--selection-width) solid var(--color-primary);
  border-radius: var(--radius-control);
  background: var(--color-primary-soft);
  opacity: 1;
  z-index: 0;
  animation: sc-pick 6s 3 forwards;
}

.sc-choice--pick > * {
  position: relative;
  z-index: 1;
}

.sc-choice--pick::after {
  content: '✓' / '';
  position: absolute;
  right: var(--space-3);
  color: var(--color-primary);
  font-weight: 700;
  animation: sc-pick 6s 3 forwards;
}

@keyframes sc-pick {
  0%,
  15% {
    opacity: 0;
  }
}

.sc-saved-status {
  display: grid;
  font-weight: 600;
}

.sc-saved-status > span {
  grid-area: 1 / 1;
}

.sc-saving {
  color: var(--color-text-muted);
  opacity: 0;
  animation: sc-saving 6s 3 forwards;
}

.sc-saved-ok {
  color: var(--color-success);
  animation: sc-saved-ok 6s 3 forwards;
}

/* One label at a time: a hard swap at 40% of the 6 s cycle (2.4 s of "Saving…"), no cross-fade. */
@keyframes sc-saving {
  0%,
  39.9% {
    opacity: 1;
  }
  40%,
  100% {
    opacity: 0;
  }
}

@keyframes sc-saved-ok {
  0%,
  39.9% {
    opacity: 0;
  }
  40%,
  100% {
    opacity: 1;
  }
}

/* Scroll-driven reveal (progressive enhancement, no script). Where the browser supports view timelines, a scene below the
   fold plays as it scrolls into view instead of on page load, when nobody can see it. Elsewhere the rules above stay:
   a 1.2 s play on load. The resting style is still the finished scene, so "Animations Off" and reduced motion are
   unchanged (both set `animation: none`). Only transform and opacity move. */
@supports (animation-timeline: view()) {
  .sc-bar,
  .sc-test {
    animation-duration: 1ms; /* any non-zero value: the scroll position drives progress */
    animation-delay: 0s;
    animation-timing-function: var(--ease-out);
    animation-timeline: view();
    animation-range: entry 5% entry 80%;
  }

  .sc-bar:nth-of-type(n + 2),
  .sc-lane-row:nth-child(n + 3) .sc-test {
    animation-range: entry 10% entry 85%;
  }

  .sc-bar:nth-of-type(n + 4),
  .sc-lane-row:nth-child(n + 4) .sc-test {
    animation-range: entry 15% entry 90%;
  }

  .sc-release-off,
  .sc-release-on,
  .sc-release-switch::before,
  .sc-release-switch::after {
    animation-duration: 1ms;
    animation-iteration-count: 1;
    animation-timeline: view();
    animation-range: entry 20% cover 45%;
  }
}

/* Reference-sheet scene: the question and its sheet side by side, stacked on narrow screens. */
.sc-ref {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--space-3);
}

.sc-ref p,
.sc-ref ul {
  margin: 0;
}

.sc-ref-question,
.sc-ref-sheet {
  padding: var(--space-3) var(--space-4);
  border: var(--selection-width) solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.sc-ref-sheet {
  border-color: var(--color-primary);
}

.sc-ref ul {
  padding-left: var(--space-4);
}

.sc-ref-title {
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* One line under a panel group: the saved rule, the Chromebooks line and the events uses. */
.sc-line {
  margin: 0 0 var(--space-5);
  max-width: 40rem;
}

.sc-line--small {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

@media (max-width: 52rem) {
  .sc-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .sc-panel--flip .sc-copy {
    order: 0;
  }

  .sc-lane-row {
    grid-template-columns: 4.5rem 1fr;
  }

  .sc-panel {
    padding-right: var(--space-4);
    padding-left: var(--space-4);
  }

  .sc-scene {
    padding: var(--space-3);
  }

  .sc-table {
    font-size: var(--text-sm);
  }

  .sc-table th,
  .sc-table td {
    padding-right: var(--space-2);
    padding-left: var(--space-2);
  }

  .sc-table .sc-whole {
    white-space: nowrap;
  }

  .sc-table thead th {
    letter-spacing: 0;
  }
}

/* Very small phones (320 px): there is no room to keep values whole, so they wrap rather than leave the frame. */
@media (max-width: 22rem) {
  .sc-table .sc-whole {
    white-space: normal;
  }
}