/* Design tokens (docs/design.md "Tokens"), reset, base type.
   One material system, two finishes: a matte graphite instrument (dark) and a warm off-white one (light).
   Three depths, told apart by lightness first and by a short top-lit shadow second:
   shell (--bg) < panel (--surface) < raised key (--key); recessed windows (--well) sit below the shell.
   :root holds the DARK palette as plain values: that is what browsers without light-dark() get (Safari < 17.5,
   Chrome < 123). Where light-dark() works, the @supports block below redeclares the colours as light-dark(light, dark):
   the page stays dark unless <html data-theme="light"> (set by src/ui/theme.js and the inline script in index.html)
   switches it; those scripts pick light from a saved choice or, failing that, prefers-color-scheme. Any element can pin a scheme with color-scheme: .program does,
   so the Program screen stays dark in both themes. */
:root {
  color-scheme: dark;
  --bg: #20211f;
  --surface: #272825;
  --surface-2: #2d2e2b;
  --line: #3a3b37;
  --text: #e8e6de;
  --muted: #a4a197;
  /* Raised key: face, hover face, edge, the 1 px highlight on its top edge and its short drop shadow. */
  --key: #30312e;
  --key-hover: #373834;
  --key-edge: #454641;
  --key-hi: rgb(255 255 255 / 0.07);
  --drop-1: rgb(0 0 0 / 0.55);
  --drop-2: rgb(0 0 0 / 0.25);
  --key-drop: 0 1px 0 var(--drop-1), 0 2px 3px var(--drop-2);
  /* Recessed window: photo frames, number windows, switch tracks, inactive areas. */
  --well: #151613;
  --well-edge: #0c0d0b;
  --well-shade: inset 0 1px 2px rgb(0 0 0 / 0.55);
  /* Amber is a FILL (Program, the switch's active zone, small state marks, the check on a picked level). */
  --accent: #eba43b;
  --on-accent: #1a1205;
  /* The amber key's darker lower edge. */
  --accent-edge: #a8701f;
  /* Amber used as text, border or focus ring on the page: darker on light so it stays readable. */
  --accent-strong: #eba43b;
  --accent-glow: rgb(235 164 59 / 0.4);
  --danger: #ff6b6b;
  /* Ink on a --danger fill (the "!" badge). */
  --on-danger: #1a0606;
  --ok: #5bd68a;
  /* Text drawn over the (dark) beam photos and on the solid plates laid over them stays light in both themes. */
  --photo-text: #e8e6de;
  --photo-muted: #b4b1a8;
  --photo-bg: #151613;
  --plate: rgb(21 22 19 / 0.86);
  /* aliases used by the shared controls */
  --raised: var(--key);
  --border: var(--key-edge);
  --accent-ink: var(--on-accent);
  --scrim: rgb(0 0 0 / 0.65);
  --shadow: rgb(0 0 0 / 0.5);

  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  /* Radius by function: panels and cards 12, windows and keys 8, keys inside a cluster 6, printed plates 4. */
  --radius: 12px;
  --radius-s: 8px;
  --radius-xs: 6px;
  --radius-plate: 4px;
  --tap: 44px;
  --gutter: 16px;
  /* Press: a key sinks at most 1 px. */
  --press: 0.1s;
  --font: "Plum Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Plum Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* type scale (docs/design.md "Typography"): size / line height */
  --fs-caption: 12px;  --lh-caption: 16px;
  --fs-small: 13px;    --lh-small: 18px;
  --fs-body: 15px;     --lh-body: 22px;
  --fs-title: 18px;    --lh-title: 24px;
  --fs-display: 24px;  --lh-display: 28px;
  --tile-number: 32px;
  /* height of the sticky bottom bar below 1200 px; toasts and page padding are derived from it */
  --bar-h: 64px;
}
@supports (color: light-dark(red, red)) {
  :root {
    color-scheme: dark;
    --bg: light-dark(#e6e3dc, #20211f);
    --surface: light-dark(#efede7, #272825);
    --surface-2: light-dark(#e8e5de, #2d2e2b);
    --line: light-dark(#cdc9bf, #3a3b37);
    --text: light-dark(#1d1c19, #e8e6de);
    --muted: light-dark(#5c5850, #a4a197);
    --key: light-dark(#f9f8f4, #30312e);
    --key-hover: light-dark(#ffffff, #373834);
    --key-edge: light-dark(#c4bfb4, #454641);
    --key-hi: light-dark(rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.07));
    --drop-1: light-dark(rgb(70 60 45 / 0.22), rgb(0 0 0 / 0.55));
    --drop-2: light-dark(rgb(70 60 45 / 0.12), rgb(0 0 0 / 0.25));
    --well: light-dark(#d9d5cc, #151613);
    --well-edge: light-dark(#bdb8ad, #0c0d0b);
    --well-shade: inset 0 1px 2px light-dark(rgb(70 60 45 / 0.22), rgb(0 0 0 / 0.55));
    --accent-edge: light-dark(#b07a28, #a8701f);
    --accent-strong: light-dark(#844b00, #eba43b);
    --accent-glow: light-dark(rgb(132 75 0 / 0.3), rgb(235 164 59 / 0.4));
    --danger: light-dark(#c0272d, #ff6b6b);
    --on-danger: light-dark(#ffffff, #1a0606);
    --ok: light-dark(#17703d, #5bd68a);
    --scrim: light-dark(rgb(29 28 25 / 0.45), rgb(0 0 0 / 0.65));
    --shadow: light-dark(rgb(29 28 25 / 0.18), rgb(0 0 0 / 0.5));
  }
  html[data-theme="light"] { color-scheme: light; }
}
@media (min-width: 768px) { :root { --gutter: 24px; --tile-number: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--fs-body)/var(--lh-body) var(--font); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, dl, dd, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-weight: 600; }
h2 { font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-body); line-height: var(--lh-body); }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.icon { display: inline-flex; flex: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Japanese and Chinese use installed system fonts (no webfont download). Plum Sans / Plum Mono stay first,
   so Latin letters, digits and units keep the page's look; CJK characters fall through to the system font. */
html:lang(ja) {
  --font: "Plum Sans", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  --mono: "Plum Mono", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", ui-monospace, monospace;
}
html:lang(zh-Hans) {
  --font: "Plum Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --mono: "Plum Mono", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", ui-monospace, monospace;
}

/* Line breaking for longer translated text. Japanese breaks between phrases, not inside a word (auto-phrase,
   ignored by browsers that lack it); both CJK languages keep closing punctuation off the start of a line. */
html:lang(ja), html:lang(zh-Hans) { line-break: strict; }
html:lang(ja) { word-break: auto-phrase; }
/* German compounds in the small uppercase option labels hyphenate instead of breaking mid-word. */
html:lang(de) .option-label { hyphens: auto; }