/* tokens.css — the one token set both apps are drawn with (MM-201, research/16 §3.2).
 *
 * Tokens only: no selectors that draw anything. kit.css builds the components from these,
 * child.css and parent.css the screens.
 *
 * Two axes, both settable on any element so kit.html can show every combination at once:
 *   data-theme="light|dark"      colour. Unset follows the system (prefers-color-scheme).
 *   data-variant="child|parent"  type scale, density, elevation. Unset is the child app.
 *
 * Every text colour here must reach 4.5:1 on the backgrounds it is used on, in both themes.
 * scripts/check-contrast.mjs reads this file and fails CI if one does not; its PAIRS list
 * is the contract — add a pair there when you put text on a new background.
 *
 * The light and dark blocks are written twice each (media query and attribute) because CSS
 * cannot share a block between them; test/tokens.test.js checks the copies agree.
 *
 * Provisional: the values follow the §3 direction without the MM-202 mockup sign-off.
 */

/* ── colour: light ─────────────────────────────────────────────────────────── */
:root, [data-theme="light"]{
  color-scheme:light;
  /* paper and surfaces: the brand's warm paper under white cards (research/58 "The look") */
  --paper:#F6F4EF; --card:#FFFFFF; --card-2:#FBFAF6;
  --line:#E3DFD4; --line-soft:#EDEAE1;
  --grid:rgba(20,33,61,.045);
  /* the brand: navy for the top bar, the bands and the footer; mint for the one primary action.
     --navy and --on-bright are the same in both themes: a navy surface stays navy, and the ink that
     sits on any bright fill (mint, a subject's strong tone, a stage) stays navy */
  --navy:#14213D; --navy-2:#22335A; --on-navy:#C9D3EA; --on-navy-hi:#FFFFFF;
  --mint:#8EE0BE; --mint-edge:#4FB58C; --mint-soft:#DDF6EC; --mint-ink:#0F5C45;
  --on-bright:#14213D;
  /* the chunky edge: the 2px border of a secondary button or an answer tile and the 5px solid edge under it */
  --edge:#14213D;
  /* ink: body, secondary, tertiary — all three are text colours and meet 4.5:1 */
  --ink:#14213D; --ink-soft:#45526E; --ink-faint:#5A6684;
  /* her answers and the focus ring are ink (navy); --focus is what a screen on navy re-sets to mint */
  --accent:#14213D; --accent-ink:#FFFFFF; --accent-soft:#E7EAF2; --accent-edge:#B7C0D6;
  --focus:var(--accent);
  /* the gold stamp: --gold fills and edges, --gold-ink is gold you can read */
  --gold:#D99A00; --gold-ink:#86610C; --gold-soft:#FBF1D6;
  --ok:#177350; --ok-soft:#E3F4EC;
  --warn:#955711; --warn-soft:#FBF0DF;
  /* --err is for the grown-ups' destructive actions only; nothing she sees is red */
  --err:#A93A32; --err-soft:#FBE9E7;
  /* a colour for each subject and for the puzzle (research/58): --X is the strong tone (a band, a tab, a
     segment) and --X-on the text that sits on it; --X-soft is the fill of a chip or a group and --X-ink
     the text that reads on it and on a card. Each subject pack's `tone` names one (core/subjects/*) */
  --maths:#FF8A3D; --maths-soft:#FFE3CC; --maths-ink:#8A3300; --maths-on:var(--on-bright);
  --english:#7458F8; --english-soft:#E6E0FF; --english-ink:#4128B8; --english-on:#FFFFFF;
  --verbal:#12B5A6; --verbal-soft:#D3F4EE; --verbal-ink:#0A5F57; --verbal-on:var(--on-bright);
  --nvr:#3E8EF7; --nvr-soft:#DCEBFF; --nvr-ink:#1A4F9C; --nvr-on:var(--on-bright);
  --science:#E255A8; --science-soft:#FBE0F0; --science-ink:#8E1F5F; --science-on:var(--on-bright);
  --puzzle:#FFC83D; --puzzle-soft:#FFF1C7; --puzzle-ink:#6B4E00; --puzzle-on:var(--on-bright);
  /* the stages on the map: not started is an outline (--lv0 is its quiet fill), then learning, getting
     there, secure, mastered; the text that sits on each */
  --lv0:#E2DED3; --lv1:#FFC83D; --lv2:#7FB2F0; --lv3:#2EB88A; --lv4:#D99A00;
  --on-lv0:var(--ink); --on-lv1:var(--on-bright); --on-lv2:var(--on-bright); --on-lv3:var(--on-bright); --on-lv4:var(--on-bright);
  /* the stages as a grown-up reads them (MM-1734): a traffic light, red, amber, green and dark green. Only the grown-ups' pages
     use them; her map, Today and the end of a session keep --lv1 to --lv4. --tl-edge is the outline of every bar and swatch
     (3:1 on the card), so a pale amber still has an edge; the name of the stage is always written beside the colour. Mastered is
     at least 15 L* darker than Needs work, so those two stay apart in greyscale (scripts/check-contrast.mjs STAGE_GAP) */
  --tl1:#D14040; --tl2:#F2B21C; --tl3:#2EB88A; --tl4:#0B5640; --tl-edge:#7A8499;
  --on-tl1:#FFFFFF; --on-tl2:var(--on-bright); --on-tl3:var(--on-bright); --on-tl4:#FFFFFF;
  --pri-core:var(--err); --pri-imp:var(--warn); --pri-sup:var(--ink-soft); --pri-beyond:var(--accent);
  /* elevation: the card's shadow is soft and wide, in both variants; the tab bar is raised */
  --shadow:0 1px 2px rgba(20,33,61,.06), 0 8px 24px -12px rgba(20,33,61,.16);
  --shadow-card:0 14px 32px rgba(20,33,61,.12);
  --shadow-bar:0 -8px 24px rgba(20,33,61,.10);
  --shadow-lift:0 -2px 6px rgba(20,33,61,.05), 0 -18px 48px -20px rgba(20,33,61,.28);
  --shadow-tile:rgba(20,33,61,.18);   /* the hard edge under a Practise tile, the same in both themes */
  --scrim:rgba(20,33,61,.45);
  --glow:rgba(217,154,0,.55);
  /* the settings switch knob stays white on both its off (--line) and on (--accent) track, in both themes;
     --hold is the fill that sweeps across the grown-ups' gate button while it is held (MM-946) */
  --knob:#FFFFFF; --knob-shadow:0 1px 3px rgba(0,0,0,.3); --hold:rgba(255,255,255,.28);
  /* the picture scenes (P2-822, core/scenes.js): fills only, never text; every shape is outlined
     in --ink-soft, so it stands off its background in both themes (scripts/check-contrast.mjs SHAPES).
     --sc-inside is a dark doorway (unknown); --sc-lit is the lit inside of an open cupboard, fridge,
     tin, basket or lunchbox, so open and empty reads as empty, never as dark; --sc-apple, the
     lunchbox's one apple, stands 3:1 off --sc-lit (it read as bare in dark as --sc-leaf) */
  --sc-sky:#DCEBFA; --sc-night:#2E3F66; --sc-moon:#F7EBB5; --sc-sun:#F5C542; --sc-cloud:#FFFFFF; --sc-cloud-grey:#B9C2D0; --sc-snow:#FFFFFF;
  --sc-grass:#CBE6BC; --sc-leaf:#74B06C; --sc-trunk:#9A7048; --sc-path:#E6E2DA; --sc-road:#B4BAC4; --sc-sand:#F4E2B4; --sc-sea:#9ACBEA; --sc-print:#D9C08A;
  --sc-wall:#F4EBDD; --sc-floor:#DCC7A3; --sc-wood:#C0915E; --sc-frame:#FFFFFF; --sc-glass:#C9E0F4; --sc-brick:#E8B49A; --sc-roof:#8C5A4A; --sc-door:#7A9A6A;
  --sc-inside:#3E4658; --sc-lit:#FFF3D1; --sc-apple:#4A9446; --sc-glow:#FBE7A6; --sc-metal:#C3CAD4; --sc-tyre:#3E4658; --sc-board:#FFFFFF; --sc-pen:#2A4FB5; --sc-page:#FFFFFF;
  --sc-bag:#E29A4C; --sc-brolly:#E88AA6; --sc-cream:#F6D2DC; --sc-cone:#D9A45A; --sc-cake:#F3C9D9; --sc-flame:#F59E2B; --sc-castle:#E7C77E;
  --sc-dog:#B07A4A; --sc-duck:#EFE6D2; --sc-trousers:#56637D;
  --sc-top-1:#5B8FD9; --sc-top-2:#5FA88A; --sc-top-3:#F2B84B; --sc-top-4:#9B7BD1;
  /* Progress by year (MM-917): one line colour per subject, never the status colours. Checked with the
     dataviz validator (lightness band, chroma, CVD and normal-vision) on ALL pairs, light and dark —
     all five lines share one plot (MM-917 validation re-stepped science, and non-verbal in dark;
     test/year-chart.test.js) — and 3:1 on --card (npm run contrast). Maths, English, verbal,
     non-verbal, science. */
  --chart-maths:#D9600A; --chart-eng:#6340E8; --chart-vr:#0E8F83; --chart-nvr:#4A90EE; --chart-sci:#E255A8;
  --sc-skin-1:#F6D5BF; --sc-skin-2:#E0AE88; --sc-skin-3:#B57B53; --sc-skin-4:#8C5A3A; --sc-face:#16181F;
  --sc-hair-1:#3B2A20; --sc-hair-2:#1E1E22; --sc-hair-3:#D9B15A; --sc-hair-4:#B5622F;
}

/* ── colour: dark (system preference, unless the page says light) ─────────── */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#0E1420; --card:#18202F; --card-2:#1D2637;
    --line:#2A3446; --line-soft:#222B3B;
    --grid:rgba(123,163,255,.07);
    --navy:#14213D; --navy-2:#22335A; --on-navy:#C9D3EA; --on-navy-hi:#FFFFFF;
    --mint:#8EE0BE; --mint-edge:#4FB58C; --mint-soft:#17322B; --mint-ink:#8EE0BE;
    --on-bright:#14213D;
    --edge:#7F8FB3;
    --ink:#E7ECF6; --ink-soft:#A3B0C6; --ink-faint:#8795AD;
    --accent:#8EE0BE; --accent-ink:#14213D; --accent-soft:#17322B; --accent-edge:#2E6B54;
    --focus:var(--accent);
    --gold:#E3B24F; --gold-ink:#E3B24F; --gold-soft:#2A2314;
    --ok:#4FC08D; --ok-soft:#142A21;
    --warn:#E0A257; --warn-soft:#2A2114;
    --err:#F08579; --err-soft:#2E1917;
    --maths:#FF9B57; --maths-soft:#3A2416; --maths-ink:#FFB98A; --maths-on:var(--on-bright);
    --english:#9C86FF; --english-soft:#272046; --english-ink:#C4B8FF; --english-on:var(--on-bright);
    --verbal:#2FCDBD; --verbal-soft:#0F2E2B; --verbal-ink:#6FE0D3; --verbal-on:var(--on-bright);
    --nvr:#5FA5FA; --nvr-soft:#14294A; --nvr-ink:#9CC7FC; --nvr-on:var(--on-bright);
    --science:#EE6FB9; --science-soft:#3A1730; --science-ink:#F6A3D3; --science-on:var(--on-bright);
    --puzzle:#FFD25E; --puzzle-soft:#33280A; --puzzle-ink:#FFDE8C; --puzzle-on:var(--on-bright);
    --lv0:#2A3446; --lv1:#FFC83D; --lv2:#7FB2F0; --lv3:#2EB88A; --lv4:#E3B24F;
    --on-lv0:var(--ink); --on-lv1:var(--on-bright); --on-lv2:var(--on-bright); --on-lv3:var(--on-bright); --on-lv4:var(--on-bright);
    --tl1:#D14040; --tl2:#F2B21C; --tl3:#2EB88A; --tl4:#0B5640; --tl-edge:#8A94A8;
    --on-tl1:#FFFFFF; --on-tl2:var(--on-bright); --on-tl3:var(--on-bright); --on-tl4:#FFFFFF;
    --pri-core:var(--err); --pri-imp:var(--warn); --pri-sup:var(--ink-soft); --pri-beyond:var(--accent);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.6);
    --shadow-card:0 14px 32px rgba(0,0,0,.45);
    --shadow-bar:0 -8px 24px rgba(0,0,0,.4);
    --shadow-lift:0 -2px 6px rgba(0,0,0,.3), 0 -18px 48px -20px rgba(0,0,0,.7);
    --shadow-tile:rgba(20,33,61,.18);
    --scrim:rgba(0,0,0,.55);
    --glow:rgba(227,178,79,.6);
    --knob:#FFFFFF; --knob-shadow:0 1px 3px rgba(0,0,0,.3); --hold:rgba(255,255,255,.28);
    --sc-sky:#3A5478; --sc-night:#0A1020; --sc-moon:#EDE0A6; --sc-sun:#E3B24F; --sc-cloud:#7D8BA3; --sc-cloud-grey:#4E5970; --sc-snow:#E7ECF6;
    --sc-grass:#24402C; --sc-leaf:#3F7F4A; --sc-trunk:#7A5638; --sc-path:#353B47; --sc-road:#262C37; --sc-sand:#4D4128; --sc-sea:#24506F; --sc-print:#6B5A38;
    --sc-wall:#232836; --sc-floor:#3B3326; --sc-wood:#7C5B3B; --sc-frame:#8E9AB0; --sc-glass:#2B3F5C; --sc-brick:#6A3E31; --sc-roof:#4A3038; --sc-door:#4F6B45;
    --sc-inside:#080B12; --sc-lit:#5C5A50; --sc-apple:#8FD18A; --sc-glow:#6B5A2A; --sc-metal:#6C7688; --sc-tyre:#0E1420; --sc-board:#2C3548; --sc-pen:#7BA3FF; --sc-page:#E7ECF6;
    --sc-bag:#B8722E; --sc-brolly:#B5627E; --sc-cream:#D9A9B8; --sc-cone:#A87B3E; --sc-cake:#9A6A80; --sc-flame:#F2A541; --sc-castle:#9C8448;
    --sc-dog:#9A6A40; --sc-duck:#CFC6B2; --sc-trousers:#4A5670;
    --sc-top-1:#3F6CB0; --sc-top-2:#3F8A6C; --sc-top-3:#C9962F; --sc-top-4:#7C5FB0;
    --chart-maths:#FF9B57; --chart-eng:#7A5CF5; --chart-vr:#3DDCCB; --chart-nvr:#5FA5FA; --chart-sci:#D94A9E;
    --sc-skin-1:#F6D5BF; --sc-skin-2:#E0AE88; --sc-skin-3:#B57B53; --sc-skin-4:#8C5A3A; --sc-face:#16181F;
    --sc-hair-1:#3B2A20; --sc-hair-2:#1E1E22; --sc-hair-3:#C9A14E; --sc-hair-4:#A5582A;
  }
}

/* ── colour: dark (asked for) ─────────────────────────────────────────────── */
[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0E1420; --card:#18202F; --card-2:#1D2637;
  --line:#2A3446; --line-soft:#222B3B;
  --grid:rgba(123,163,255,.07);
  --navy:#14213D; --navy-2:#22335A; --on-navy:#C9D3EA; --on-navy-hi:#FFFFFF;
  --mint:#8EE0BE; --mint-edge:#4FB58C; --mint-soft:#17322B; --mint-ink:#8EE0BE;
  --on-bright:#14213D;
  --edge:#7F8FB3;
  --ink:#E7ECF6; --ink-soft:#A3B0C6; --ink-faint:#8795AD;
  --accent:#8EE0BE; --accent-ink:#14213D; --accent-soft:#17322B; --accent-edge:#2E6B54;
  --focus:var(--accent);
  --gold:#E3B24F; --gold-ink:#E3B24F; --gold-soft:#2A2314;
  --ok:#4FC08D; --ok-soft:#142A21;
  --warn:#E0A257; --warn-soft:#2A2114;
  --err:#F08579; --err-soft:#2E1917;
  --maths:#FF9B57; --maths-soft:#3A2416; --maths-ink:#FFB98A; --maths-on:var(--on-bright);
  --english:#9C86FF; --english-soft:#272046; --english-ink:#C4B8FF; --english-on:var(--on-bright);
  --verbal:#2FCDBD; --verbal-soft:#0F2E2B; --verbal-ink:#6FE0D3; --verbal-on:var(--on-bright);
  --nvr:#5FA5FA; --nvr-soft:#14294A; --nvr-ink:#9CC7FC; --nvr-on:var(--on-bright);
  --science:#EE6FB9; --science-soft:#3A1730; --science-ink:#F6A3D3; --science-on:var(--on-bright);
  --puzzle:#FFD25E; --puzzle-soft:#33280A; --puzzle-ink:#FFDE8C; --puzzle-on:var(--on-bright);
  --lv0:#2A3446; --lv1:#FFC83D; --lv2:#7FB2F0; --lv3:#2EB88A; --lv4:#E3B24F;
  --on-lv0:var(--ink); --on-lv1:var(--on-bright); --on-lv2:var(--on-bright); --on-lv3:var(--on-bright); --on-lv4:var(--on-bright);
  --tl1:#D14040; --tl2:#F2B21C; --tl3:#2EB88A; --tl4:#0B5640; --tl-edge:#8A94A8;
  --on-tl1:#FFFFFF; --on-tl2:var(--on-bright); --on-tl3:var(--on-bright); --on-tl4:#FFFFFF;
  --pri-core:var(--err); --pri-imp:var(--warn); --pri-sup:var(--ink-soft); --pri-beyond:var(--accent);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.6);
  --shadow-card:0 14px 32px rgba(0,0,0,.45);
  --shadow-bar:0 -8px 24px rgba(0,0,0,.4);
  --shadow-lift:0 -2px 6px rgba(0,0,0,.3), 0 -18px 48px -20px rgba(0,0,0,.7);
  --shadow-tile:rgba(20,33,61,.18);
  --scrim:rgba(0,0,0,.55);
  --glow:rgba(227,178,79,.6);
  --knob:#FFFFFF; --knob-shadow:0 1px 3px rgba(0,0,0,.3); --hold:rgba(255,255,255,.28);
  --sc-sky:#3A5478; --sc-night:#0A1020; --sc-moon:#EDE0A6; --sc-sun:#E3B24F; --sc-cloud:#7D8BA3; --sc-cloud-grey:#4E5970; --sc-snow:#E7ECF6;
  --sc-grass:#24402C; --sc-leaf:#3F7F4A; --sc-trunk:#7A5638; --sc-path:#353B47; --sc-road:#262C37; --sc-sand:#4D4128; --sc-sea:#24506F; --sc-print:#6B5A38;
  --sc-wall:#232836; --sc-floor:#3B3326; --sc-wood:#7C5B3B; --sc-frame:#8E9AB0; --sc-glass:#2B3F5C; --sc-brick:#6A3E31; --sc-roof:#4A3038; --sc-door:#4F6B45;
  --sc-inside:#080B12; --sc-lit:#5C5A50; --sc-apple:#8FD18A; --sc-glow:#6B5A2A; --sc-metal:#6C7688; --sc-tyre:#0E1420; --sc-board:#2C3548; --sc-pen:#7BA3FF; --sc-page:#E7ECF6;
  --sc-bag:#B8722E; --sc-brolly:#B5627E; --sc-cream:#D9A9B8; --sc-cone:#A87B3E; --sc-cake:#9A6A80; --sc-flame:#F2A541; --sc-castle:#9C8448;
  --sc-dog:#9A6A40; --sc-duck:#CFC6B2; --sc-trousers:#4A5670;
  --sc-top-1:#3F6CB0; --sc-top-2:#3F8A6C; --sc-top-3:#C9962F; --sc-top-4:#7C5FB0;
  --chart-maths:#FF9B57; --chart-eng:#7A5CF5; --chart-vr:#3DDCCB; --chart-nvr:#5FA5FA; --chart-sci:#D94A9E;
  --sc-skin-1:#F6D5BF; --sc-skin-2:#E0AE88; --sc-skin-3:#B57B53; --sc-skin-4:#8C5A3A; --sc-face:#16181F;
  --sc-hair-1:#3B2A20; --sc-hair-2:#1E1E22; --sc-hair-3:#C9A14E; --sc-hair-4:#A5582A;
}

/* ── everything that is not colour ────────────────────────────────────────── */
:root{
  /* families */
  --f-display:'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  --f-body:'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-num:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* spacing: a 4 px step */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:48px;
  --gutter:16px;

  /* radius */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
  --r:var(--r-md);   /* the pre-kit name, still used by the screens */
  /* a card (both variants): 24px, 20px on a phone; a button or an answer tile: 16px */
  --r-card:24px; --r-btn:16px;

  /* touch: nothing she or a parent taps is smaller than --touch (principle 5) */
  --touch:44px; --touch-btn:48px; --touch-lg:56px;

  /* motion: growth only (principle 4). Everything else is instant, so there is no
     "standard" duration to reach for. */
  --dur-instant:0ms;
  --dur-quick:120ms;     /* press feedback */
  --dur-move:240ms;      /* a level moving on the Done card */
  --dur-grow:600ms;      /* a star brightening */
  --ease-out:cubic-bezier(.2, 0, 0, 1);
  --ease-grow:cubic-bezier(.34, 1.4, .64, 1);   /* a small overshoot: it swells, then settles */

  /* safe areas (standalone iPad and phones with a home indicator) */
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-right:env(safe-area-inset-right, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  --safe-left:env(safe-area-inset-left, 0px);
}
@media (min-width:700px){ :root{ --gutter:24px } }
@media (max-width:519px){ :root{ --r-card:20px } }
/* Standalone (added to the home screen, MM-412): no browser toolbar under the page, so the
   tab bar, the dock and the sheets meet the glass itself. A home-button iPad reports no
   inset there, which leaves them against its rounded corners; keep a small floor. */
@media (display-mode:standalone){ :root{ --safe-bottom:max(env(safe-area-inset-bottom, 0px), var(--sp-2)) } }
@media (prefers-reduced-motion:reduce){
  /* 0.01 ms rather than 0 so animationend/transitionend still fire for code that waits */
  :root{ --dur-quick:.01ms; --dur-move:.01ms; --dur-grow:.01ms }
}

/* ── type scale and density: the child variant (default) ──────────────────── */
:root, [data-variant="child"]{
  --fs-label:14px;                                  /* tags, tab labels, meta */
  --fs-small:16px;                                  /* secondary lines */
  --fs-body:clamp(19px, 17.4px + .4vw, 20px);       /* 19 on a phone, 20 on an iPad */
  --fs-title:clamp(22px, 19px + .8vw, 26px);        /* card and sheet titles */
  --fs-prompt:clamp(24px, 20.8px + .8vw, 28px);     /* the question */
  --fs-display:clamp(34px, 28px + 1.5vw, 40px);      /* screen headings: 34 on a phone, 40 on an iPad */
  --lh-body:1.5; --lh-tight:1.2;
  --card-pad:var(--sp-6); --card-r:var(--r-card); --card-shadow:var(--shadow-card);
  --chip-h:var(--touch-lg); --chip-pad:var(--sp-5); --chip-fs:18px;
  --key-h:var(--touch-lg);
  --star-size:28px;
  --tabbar-h:64px;                                  /* the tab bar's height: the page clears it by this, as the bar is tall */
}

/* ── type scale and density: the parent variant ───────────────────────────── */
[data-variant="parent"]{
  --fs-label:12.5px;
  --fs-small:14.5px;
  --fs-body:17px;
  --fs-title:clamp(19px, 17.4px + .4vw, 21px);
  --fs-prompt:20px;
  --fs-display:clamp(26px, 20px + 1.5vw, 32px);
  --lh-body:1.6; --lh-tight:1.25;
  --card-pad:var(--sp-5); --card-r:var(--r-card); --card-shadow:var(--shadow-card);
  --chip-h:var(--touch); --chip-pad:var(--sp-4); --chip-fs:15px;
  --key-h:var(--touch);
  --star-size:20px;
  --tabbar-h:56px;                                  /* the parents' bar is slimmer */
}