/* Radiomorrow. The page is a home-computer screen: a coloured border around a flat field.
   Each station swaps the palette, the way each old machine had its own colours. */
:root {
  --frame: #8a96ff; --screen: #2a3bbf; --shade: #1b277f; --ink: #f3f1ff; --dim: #c9ceff;
  --hi: #ffd23f; --hi-ink: #1b1b3a; --n2: #ff8fb3; --n3: #7df0c8; --n4: #c9d0ff;
  --seg-off: .13; --seg-glow: 0 0 .3em;
  --px: 3px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
}
body[data-station="keep"] {
  --frame: #9a5a8c; --screen: #3b1846; --shade: #24092c; --ink: #f8e9f2; --dim: #dcbfd6;
  --hi: #ff9a62; --hi-ink: #2a0d1e; --n2: #e77fd9; --n3: #8fd0ff; --n4: #d9bfd5;
}
body[data-station="star"] {
  --frame: #3a8f9c; --screen: #0f2c40; --shade: #071a28; --ink: #e4fbff; --dim: #a8cbd6;
  --hi: #8dffb5; --hi-ink: #062018; --n2: #ffcf5c; --n3: #6fc3ff; --n4: #b7d3dc;
}
body[data-station="pocket"] {
  --frame: #7f9363; --screen: #c9d8a2; --shade: #a9bd84; --ink: #1f2b16; --dim: #3a4a2a;
  --hi: #2f4420; --hi-ink: #e6f0c8; --n2: #3a5224; --n3: #4f2f59; --n4: #46532f;
  /* a reflective display: dark segments cast a faint shadow instead of glowing */
  --seg-off: .1; --seg-glow: .05em .06em 0;
}
body[data-station="fm"] {
  --frame: #e2457c; --screen: #1f1c33; --shade: #100e1f; --ink: #f3f0ff; --dim: #bdb8dd;
  --hi: #3fd8ff; --hi-ink: #06202b; --n2: #ff7fae; --n3: #ffd76a; --n4: #b9b4d9;
}
body[data-station="classics"] {
  --frame: #c8a45c; --screen: #5a1a2a; --shade: #3a0c18; --ink: #fcefd9; --dim: #e6cdb4;
  --hi: #ffd98a; --hi-ink: #3a0c18; --n2: #ffab91; --n3: #9fe0c2; --n4: #e0c7a8;
}

/* Machine stations: each in its own machine's screen colours. */
body[data-station="zx48"] {
  --frame: #0000d7; --screen: #d7d7d7; --shade: #b4b4b4; --ink: #000000; --dim: #2a2a2a;
  --hi: #d70000; --hi-ink: #ffffff; --n2: #0000d7; --n3: #00a000; --n4: #5a5a5a;
}
body[data-station="zx128"] {
  --frame: #00d7d7; --screen: #000000; --shade: #1c1c1c; --ink: #ffffff; --dim: #d7d7d7;
  --hi: #ffff00; --hi-ink: #000000; --n2: #ff00ff; --n3: #00ff00; --n4: #d7d7d7;
}
body[data-station="pentagon"] {
  --frame: #0000ff; --screen: #000000; --shade: #16162a; --ink: #e8e8ff; --dim: #b8b8e8;
  --hi: #ff00ff; --hi-ink: #000000; --n2: #00ffff; --n3: #ffff00; --n4: #b8b8e8;
}
body[data-station="msx"] {
  --frame: #3d3ad0; --screen: #5955e0; --shade: #423ec4; --ink: #ffffff; --dim: #e8e8ff;
  --hi: #fffe77; --hi-ink: #20206a; --n2: #ff897d; --n3: #66db6d; --n4: #e0e0ff;
}
body[data-station="atari"] {
  --frame: #000000; --screen: #123c8c; --shade: #0a2a66; --ink: #a8c8ff; --dim: #8db4f5;
  --hi: #ffd25c; --hi-ink: #0a2a66; --n2: #ff8a6a; --n3: #7cf0a0; --n4: #a8c8ff;
}
body[data-station="c64"] {
  --frame: #7869c4; --screen: #40318d; --shade: #2e2370; --ink: #c8c0ff; --dim: #b3a9f5;
  --hi: #bfce72; --hi-ink: #2e2370; --n2: #9f4e44; --n3: #6abfc6; --n4: #c8c0ff;
}
body[data-station="nes"] {
  --frame: #7c7c7c; --screen: #000000; --shade: #202020; --ink: #fcfcfc; --dim: #bcbcbc;
  --hi: #f83800; --hi-ink: #000000; --n2: #00b800; --n3: #3cbcfc; --n4: #bcbcbc;
}
body[data-station="gb"] {
  --frame: #bfbfbf; --screen: #9bbc0f; --shade: #8bac0f; --ink: #0f380f; --dim: #203f12;
  --hi: #306230; --hi-ink: #e0f8d0; --n2: #0f380f; --n3: #306230; --n4: #203f12;
}
body[data-station="sms"] {
  --frame: #0055aa; --screen: #000000; --shade: #15151f; --ink: #ffffff; --dim: #aaaaff;
  --hi: #ffaa00; --hi-ink: #000000; --n2: #ff5555; --n3: #55ffaa; --n4: #aaaaff;
}
body[data-station="md"] {
  --frame: #222222; --screen: #0c0c26; --shade: #05051a; --ink: #eeeeee; --dim: #c0c0d8;
  --hi: #e8b400; --hi-ink: #0c0c26; --n2: #e04060; --n3: #40a0ff; --n4: #c0c0d8;
}
body[data-station="amiga"] {
  --frame: #000022; --screen: #0055aa; --shade: #003f80; --ink: #ffffff; --dim: #e6eeff;
  --hi: #ff8800; --hi-ink: #000022; --n2: #ffffff; --n3: #ffcc66; --n4: #cfe0ff;
}
body[data-station="lcd"] {
  --frame: #c2412f; --screen: #b8c4a8; --shade: #a2ae92; --ink: #22261e; --dim: #363d2e;
  --hi: #22261e; --hi-ink: #b8c4a8; --n2: #3a4232; --n3: #4a3a2a; --n4: #3d4535;
  --seg-off: .1; --seg-glow: .05em .06em 0;
}
body[data-station="watch"] {
  --frame: #2b2b2b; --screen: #c8ccb8; --shade: #b2b6a2; --ink: #1a1a1a; --dim: #2f302a;
  --hi: #1a1a1a; --hi-ink: #c8ccb8; --n2: #333333; --n3: #4a4a40; --n4: #3a3a33;
  --seg-off: .1; --seg-glow: .05em .06em 0;
}
body[data-station="pc"] {
  --frame: #555555; --screen: #000000; --shade: #1a1a1a; --ink: #aaaaaa; --dim: #9a9a9a;
  --hi: #55ffff; --hi-ink: #000000; --n2: #ff55ff; --n3: #55ff55; --n4: #aaaaaa;
}

/* Segment displays: DSEG by keshikan, SIL Open Font License 1.1 (fonts/DSEG-LICENSE.txt). */
@font-face { font-family: "DSEG7 Classic"; src: url("fonts/DSEG7Classic-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "DSEG14 Classic"; src: url("fonts/DSEG14Classic-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
/* Our own pixel fonts, one for each machine, in the spirit of its screen letters (tools/make-fonts.js, SIL OFL). */
@font-face { font-family: "Radiomorrow Rubber"; src: url("fonts/rm-zx48.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Radiomorrow Heatsink"; src: url("fonts/rm-zx128.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Radiomorrow Scene"; src: url("fonts/rm-pentagon.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Radiomorrow Six"; src: url("fonts/rm-msx.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Radiomorrow Hatch"; src: url("fonts/rm-atari.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Radiomorrow Breadbin"; src: url("fonts/rm-c64.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Radiomorrow Hires"; src: url("fonts/rm-amiga.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Radiomorrow Chunky"; src: url("fonts/rm-nes.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Radiomorrow Handheld"; src: url("fonts/rm-gb.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Radiomorrow Card"; src: url("fonts/rm-sms.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Radiomorrow Slab"; src: url("fonts/rm-md.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Radiomorrow Tall"; src: url("fonts/rm-pc.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Radiomorrow Dots"; src: url("fonts/rm-watch.woff") format("woff"); font-display: swap; }
/* A letter pixel is 2 CSS pixels high: 18px for the nine-row letters, 20px for the ten-row chunky ones. */
[data-station="zx48"] { --scr-font: "Radiomorrow Rubber"; --scr-w: 400; --scr-size: 18px; --scr-case: none; }
[data-station="zx128"] { --scr-font: "Radiomorrow Heatsink"; --scr-w: 400; --scr-size: 18px; --scr-case: none; }
[data-station="pentagon"] { --scr-font: "Radiomorrow Scene"; --scr-w: 400; --scr-size: 18px; --scr-case: none; }
[data-station="msx"] { --scr-font: "Radiomorrow Six"; --scr-w: 400; --scr-size: 18px; --scr-case: none; }
[data-station="atari"] { --scr-font: "Radiomorrow Hatch"; --scr-w: 400; --scr-size: 18px; --scr-case: none; }
[data-station="c64"] { --scr-font: "Radiomorrow Breadbin"; --scr-w: 400; --scr-size: 18px; --scr-case: uppercase; }
[data-station="amiga"] { --scr-font: "Radiomorrow Hires"; --scr-w: 400; --scr-size: 18px; --scr-case: none; }
[data-station="nes"] { --scr-font: "Radiomorrow Chunky"; --scr-w: 400; --scr-size: 20px; --scr-case: uppercase; }
[data-station="gb"] { --scr-font: "Radiomorrow Handheld"; --scr-w: 400; --scr-size: 20px; --scr-case: none; }
[data-station="sms"] { --scr-font: "Radiomorrow Card"; --scr-w: 400; --scr-size: 18px; --scr-case: none; }
[data-station="md"] { --scr-font: "Radiomorrow Slab"; --scr-w: 400; --scr-size: 20px; --scr-case: none; }
[data-station="pc"] { --scr-font: "Radiomorrow Tall"; --scr-w: 400; --scr-size: 18px; --scr-case: none; }
[data-station="watch"] { --scr-font: "Radiomorrow Dots"; --scr-w: 400; --scr-size: 18px; --scr-case: none; }
[data-station="lcd"] { --scr-font: "DSEG14 Classic"; --scr-w: 700; --scr-size: 16px; --scr-case: uppercase; }   /* segment letters read best as capitals */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--frame); color: var(--ink);
  font: 16px/1.5 var(--mono);
}
.screen {
  max-width: 940px; margin: clamp(10px, 3.5vw, 40px) auto; padding: clamp(16px, 4vw, 40px);
  background: var(--screen);
}
@media (max-width: 960px) { .screen { margin-left: clamp(10px, 3.5vw, 40px); margin-right: clamp(10px, 3.5vw, 40px); } }

.top { margin-bottom: 28px; }
.logo { margin: 0 0 14px; font-size: clamp(1.6rem, 6vw, 2.6rem); line-height: 1; letter-spacing: .04em; }
.logo svg { display: block; width: min(100%, 800px); height: auto; overflow: visible; }
.logo .back { fill: var(--shade); }
.logo .front { fill: var(--ink); }
.logo .mark-r { fill: var(--hi); }
.lede { margin: 0; max-width: 56ch; color: var(--dim); }

a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--hi); }
h2 { margin: 36px 0 14px; font-size: 1rem; font-weight: 700; }
/* On a machine station the headings and the tune's name take that machine's screen letters. */
body[data-station] h2, body[data-station] .now-title { font-family: var(--scr-font, var(--mono)); }
body[data-station] h2 { font-size: var(--scr-size, 1rem); font-weight: var(--scr-w, 700); font-synthesis: none; text-transform: var(--scr-case, none); }
body[data-station] .now-title { font-weight: var(--scr-w, 700); font-synthesis: none; text-transform: var(--scr-case, none); }
.machines .name { font-family: var(--scr-font); font-size: var(--scr-size); font-weight: var(--scr-w); font-synthesis: none; line-height: 1.3; margin: 2px 0 4px; text-transform: var(--scr-case, none); }
h2::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; background: var(--hi); }

/* player */
.deck { border: var(--px) solid var(--ink); background: var(--shade); }
.viz { display: block; width: 100%; height: clamp(150px, 26vw, 232px); image-rendering: pixelated; image-rendering: crisp-edges; background: var(--shade); }
.transport { display: flex; align-items: center; gap: 18px; padding: 14px; background: var(--screen); }
.now { flex: 1; min-width: 0; }
.now p { margin: 0; }
.now-title { font-weight: 700; font-size: 1.125rem; line-height: 1.3; overflow-wrap: anywhere; }
.now-meta { color: var(--dim); font-size: .875rem; }

/* Segment readouts. Every glyph of DSEG is 0.816em wide and 1em tall; the colon and the space are 0.2em.
   The boxes are sized from those numbers, so nothing moves when the font arrives or fails to. */
.panel { container-type: inline-size; padding: 14px 16px 16px; border-top: var(--px) solid var(--screen); background: var(--shade); overflow: hidden; }
.readouts { display: grid; grid-template-columns: auto 1fr; gap: 14px 24px; align-items: end; }
.r-st { grid-row: 1 / span 2; }
.stats { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; }
.readout { min-width: 0; }
.cap { display: block; margin-bottom: 6px; color: var(--dim); font-size: .75rem; line-height: 1.2; white-space: nowrap; }
.lcd { position: relative; display: block; height: 1em; line-height: 1; font-size: 28px; font-weight: 700; color: var(--hi); white-space: pre; }
.lcd7 { font-family: "DSEG7 Classic", var(--mono); }
.lcd14 { font-family: "DSEG14 Classic", var(--mono); word-spacing: .616em; }
.lcd .off, .lcd .on { position: absolute; top: 0; left: 0; right: 0; }
.lcd .off { opacity: var(--seg-off); visibility: hidden; }
.segs .lcd .off { visibility: visible; }
.lcd .on { text-shadow: var(--seg-glow) color-mix(in srgb, var(--hi) 45%, transparent); }
.lcd.num .on { text-align: right; }
.c1 { width: .816em; } .c3 { width: 2.448em; } .c12 { width: 9.792em; } .c20 { width: 16.32em; }
.clock { width: 3.464em; }
.r-st .lcd { font-size: clamp(56px, 10vw, 92px); font-size: min(11.4cqw, 96px); }
.r-title .lcd { font-size: clamp(20px, 4.2vw, 40px); font-size: min(5cqw, 42px); }
#lcd-seed { font-size: 22px; }
.key { display: flex; align-items: stretch; gap: 6px; }
.ann { display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; line-height: 1; font-weight: 700; color: var(--hi); }
.ann span { opacity: var(--seg-off); }
.ann .lit { opacity: 1; text-shadow: var(--seg-glow) color-mix(in srgb, var(--hi) 45%, transparent); }
.window { justify-self: start; padding: 6px 8px; background: var(--shade); }
.window .lcd { font-size: 22px; }
/* Border colors: a panel switch. Lit and to the right when on, dark and to the left when off. */
.toggle { position: relative; display: block; width: 4.4em; height: 28px; padding: 0; border: var(--px) solid var(--dim); background: var(--screen); cursor: pointer; font-size: .75rem; font-weight: 700; line-height: 1; }
.toggle .knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: var(--dim); transition: left .12s steps(3); }
.toggle .t-on, .toggle .t-off { position: absolute; top: 50%; transform: translateY(-50%); }
.toggle .t-on { left: 7px; color: var(--hi); visibility: hidden; text-shadow: var(--seg-glow) color-mix(in srgb, var(--hi) 45%, transparent); }
.toggle .t-off { right: 6px; color: var(--dim); }
.toggle[aria-checked="true"] { border-color: var(--hi); }
.toggle[aria-checked="true"] .knob { left: calc(100% - 19px); background: var(--hi); }
.toggle[aria-checked="true"] .t-on { visibility: visible; }
.toggle[aria-checked="true"] .t-off { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .toggle .knob { transition: none; } }
/* The loading stripes, behind the screen, filling the frame around it (border.js). */
.tape { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; image-rendering: pixelated; image-rendering: crisp-edges; }

.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

button, input { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn, .play, .stations button, .seg button, .presets button {
  border: var(--px) solid var(--ink); background: var(--screen); color: var(--ink);
  box-shadow: 4px 4px 0 var(--shade); min-height: 44px; padding: 8px 14px;
}
.btn:active, .play:active, .stations button:active, .seg button:active, .presets button:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--shade); }
:focus-visible { outline: var(--px) solid var(--hi); outline-offset: 3px; }

.play {
  display: inline-flex; align-items: center; gap: 12px; flex: none;
  background: var(--hi); color: var(--hi-ink); border-color: var(--hi-ink);
  font-weight: 700; font-size: 1.125rem; padding: 10px 22px 10px 16px; min-height: 56px; min-width: 132px;
}
.ico { width: 28px; height: 28px; fill: currentColor; }
.ico-stop, .play[aria-pressed="true"] .ico-play { display: none; }
.play[aria-pressed="true"] .ico-stop { display: block; }

/* stations */
.stations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stations button { text-align: left; padding: 12px 14px; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; }
.stations .num { grid-row: span 2; font-weight: 700; font-size: 1.75rem; line-height: 1; align-self: center; color: var(--hi); }
.stations .name { font-weight: 700; }
.stations .tag { font-size: .8125rem; color: var(--dim); line-height: 1.35; }
.stations button[aria-checked="true"] { background: var(--ink); color: var(--screen); }
.stations button[aria-checked="true"] .num, .stations button[aria-checked="true"] .tag { color: var(--screen); }
/* Machine pictures (art.js): whole pixels only, 3 per drawn pixel on the cards, 2 beside the station readout. */
.art { display: block; image-rendering: pixelated; }
.stations .art { grid-column: 1 / -1; width: 102px; height: 54px; margin: 0 0 10px -3px; }
.st-art { display: block; margin-top: 12px; }
.st-art .art { width: 68px; height: 36px; color: var(--ink); }
.st-art[hidden] { display: none; }
@container (max-width: 520px) { .st-art { display: none; } }   /* a phone's panel has no room: the card shows it */

/* The console under the player: transport, the dials and the timer. It stays at the top of the window while the
   stations scroll under it. Where there is room it shows everything; on a phone or a low window the dials fold
   behind the Shape button and open over the page. */
/* Below the console, whatever takes the focus or is jumped to stops under it (--console-h comes from app.js). */
.screen > :not(.console) :is(a, button, input, select, textarea, summary, [tabindex], h2, h3) { scroll-margin-top: var(--console-h, 0px); }
.console { position: sticky; top: 0; z-index: 5; margin-top: calc(-1 * var(--px)); border: var(--px) solid var(--ink); background: var(--screen); }
.shape { padding: 12px 14px 14px; border-top: var(--px) solid var(--ink); background: var(--screen); }
.shape h2 { margin: 0 0 12px; }
.skip, .shape-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ico-next, .ico-dials { width: 18px; height: 18px; }
.shape-btn { display: none; }
.shape-btn[aria-expanded="true"] { background: var(--ink); color: var(--screen); }
/* The bar keeps one height while it stays on screen: the name and the line under it never wrap. */
.console .now-title, .console .now-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1000px) { .console .now { order: 3; flex-basis: 100%; } .transport { flex-wrap: wrap; } .console .play { margin-right: auto; } }
@media (min-width: 721px) {
  .shape .dials { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; }
  .shape .dial { display: flex; align-items: center; gap: 0 10px; }
  /* three rows: the four sliders, then the switches, then the timer and the seed */
  .shape .dial.sl { order: 1; flex: 1 1 170px; display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .shape .dial.sg { order: 2; }
  .shape .dial-timer, .shape .dial-seed { order: 3; }
  .shape .dial.sl input { grid-column: 1 / -1; grid-row: 2; height: 30px; }
  .shape .dial.sl output { grid-column: 2; grid-row: 1; justify-self: end; max-width: 100%; font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .shape .dial-seed { flex: 1 1 300px; }
  .shape .dial-seed .seed-row { flex: 1; }
  .shape .dial-seed .hint { display: none; }
  .shape .seg { flex-wrap: nowrap; gap: 6px; }
  .shape .seg button, .shape .btn, .shape input[type="text"] { min-height: 36px; padding: 4px 10px; font-size: .875rem; }
  .shape .seg button, .shape .btn { box-shadow: 3px 3px 0 var(--shade); }
  .shape .timer-out { white-space: nowrap; }
}
@media (max-width: 720px), (max-height: 759px) {
  .shape-btn { display: inline-flex; }
  .console:not(.open) .shape { display: none; }
  /* Open, the dials lie over the page under the bar instead of pushing it down: the page keeps its height, so
     nothing under the reader's eyes moves, also in browsers that do not hold the scroll place themselves. */
  .console.open .shape {
    position: absolute; top: 100%; left: calc(-1 * var(--px)); right: calc(-1 * var(--px));
    border: var(--px) solid var(--ink); border-top-width: 0; box-shadow: 0 6px 0 var(--shade);
    max-height: calc(100vh - var(--bar-h, 150px) - 12px); max-height: calc(100dvh - var(--bar-h, 150px) - 12px); overflow-y: auto; overscroll-behavior: contain;
  }
}

/* dials */
.dials { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 36px; }
.dial { display: grid; grid-template-columns: 5.5rem 1fr; align-items: center; column-gap: 12px; row-gap: 2px; }
.dial label, .dial-label { font-weight: 700; }
.dial output { grid-column: 2; color: var(--dim); font-size: .875rem; }
.dial .hint { grid-column: 2; margin: 4px 0 0; color: var(--dim); font-size: .8125rem; }
.seg { display: flex; flex-wrap: wrap; gap: 10px; }
.seg button { padding: 6px 12px; }
.seg button[aria-checked="true"] { background: var(--ink); color: var(--screen); }
.air { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.section-note { margin: -4px 0 14px; max-width: 76ch; color: var(--dim); font-size: .875rem; }
.air-out { margin: 12px 0 0; max-width: 76ch; color: var(--dim); font-size: .875rem; }
button:disabled, input:disabled { opacity: .45; cursor: not-allowed; }
button:disabled:active { transform: none; }
.timer { display: grid; gap: 10px; }
.timer-out { margin: 0; color: var(--dim); font-size: .875rem; font-variant-numeric: tabular-nums; }
.seed-row { display: flex; gap: 12px; min-width: 0; }
input[type="text"] {
  flex: 1; min-width: 0; min-height: 44px; padding: 8px 10px;
  background: var(--shade); color: var(--ink); border: var(--px) solid var(--ink); border-radius: 0;
}
.seed-row .btn { flex: none; }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 10px; background: var(--shade); border: var(--px) solid var(--ink); box-sizing: content-box; }
input[type="range"]::-moz-range-track { height: 10px; background: var(--shade); border: var(--px) solid var(--ink); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 30px; margin-top: -10px; background: var(--hi); border: var(--px) solid var(--hi-ink); border-radius: 0; }
input[type="range"]::-moz-range-thumb { width: 12px; height: 24px; background: var(--hi); border: var(--px) solid var(--hi-ink); border-radius: 0; }

/* share */
.share { position: relative; flex: none; }
.share-menu {
  position: absolute; z-index: 2; top: calc(100% + 10px); right: 0; min-width: 11rem; padding: 6px;
  display: grid; gap: 2px; background: var(--screen); border: var(--px) solid var(--ink); box-shadow: 4px 4px 0 var(--shade);
}
.share-menu[hidden] { display: none; }
.share-menu a, .share-menu button {
  display: flex; align-items: center; min-height: 44px; padding: 8px 12px; text-align: left;
  border: 0; background: transparent; color: var(--ink); text-decoration: none;
}
.share-menu a:hover, .share-menu button:hover, .share-menu a:focus-visible, .share-menu button:focus-visible { background: var(--ink); color: var(--screen); }

/* presets */
.preset-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.status { color: var(--dim); font-size: .875rem; }
.presets { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.presets li { display: flex; gap: 10px; }
.presets .load { flex: 1; min-width: 0; text-align: left; overflow-wrap: anywhere; }
.presets .del { flex: none; min-width: 44px; }
.presets .empty { color: var(--dim); }

/* favourites and history */
.fav { display: inline-flex; align-items: center; gap: 8px; }
.heart { width: 14px; height: 12px; fill: none; stroke: currentColor; stroke-width: .7; }
.fav[aria-pressed="true"] { background: var(--ink); color: var(--screen); }
.fav[aria-pressed="true"] .heart { fill: var(--hi); stroke: none; }
.tunes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; }
.tunes h3 { margin: 0 0 10px; font-size: 1rem; }
.tunes h3:focus { outline: none; }
.tunes h3:focus-visible { outline: var(--px) solid var(--hi); outline-offset: 3px; }
.tune-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.tune-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.tune-list .t-name { font-weight: 700; overflow-wrap: anywhere; }
.tune-list .t-meta { grid-row: 2; color: var(--dim); font-size: .8125rem; }
.tune-list .t-act { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: 8px; }
.tune-list .btn { min-width: 44px; padding: 6px 10px; box-shadow: 3px 3px 0 var(--shade); }
.tune-list .empty { display: block; color: var(--dim); }
.tunes-note { margin: 16px 0 0; color: var(--dim); font-size: .8125rem; }
.tunes .clear { margin-top: 16px; padding: 6px 12px; box-shadow: 3px 3px 0 var(--shade); }
.tunes .clear.armed { background: var(--ink); color: var(--screen); }
@media (max-width: 720px) {
  .tunes { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 420px) {
  .tune-list li { grid-template-columns: 1fr; row-gap: 2px; }
  .tune-list .t-act { grid-row: 3; grid-column: 1; margin-top: 8px; }
}

/* reading text: about, questions, station pages */
.prose p, .prose li { max-width: 68ch; }
.prose p { margin: 0 0 12px; }
.prose h3 { margin: 22px 0 6px; font-size: 1rem; font-weight: 700; }
.prose ul { margin: 0; padding-left: 1.2em; }
.prose li { margin-bottom: 6px; }
.prose .hint { color: var(--dim); font-size: .875rem; }
.page h1 { margin: 0 0 10px; font-size: clamp(1.8rem, 7vw, 3rem); line-height: 1.1; }
.crumb { margin: 0 0 22px; color: var(--dim); font-size: .875rem; }
.crumb .home { white-space: nowrap; }
.crumb .mark { width: 3.6em; height: 2.1em; margin-right: .5em; vertical-align: baseline; }   /* the mark's bottom row sits on the text's baseline */
.mark .mark-r { fill: var(--hi); }
.mark .mark-w { fill: var(--ink); }
.cta { display: inline-flex; align-items: center; margin: 10px 0 6px; background: var(--hi); color: var(--hi-ink); border-color: var(--hi-ink); font-weight: 700; text-decoration: none; }
.cta:hover { color: var(--hi-ink); }

.foot { margin-top: 40px; padding-top: 18px; border-top: var(--px) dashed var(--dim); color: var(--dim); font-size: .875rem; }
.foot p { margin: 0 0 10px; max-width: 76ch; }
.keys { margin: 28px 0 0; max-width: 76ch; color: var(--dim); font-size: .875rem; line-height: 2; }
kbd { font: inherit; color: var(--ink); border: 2px solid var(--dim); padding: 0 5px; }

@media (max-width: 720px) {
  .stations { grid-template-columns: repeat(2, 1fr); }
  .dials { grid-template-columns: 1fr; }
  .transport { flex-wrap: wrap; }
  .readouts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
  .stats { display: contents; }
  .r-title { order: -1; flex-basis: 100%; }
  .r-title .lcd { font-size: 4.4vw; font-size: 6.127cqw; }
  .lcd, .r-st .lcd { font-size: 24px; }
  #lcd-seed { font-size: 18px; }
  .ann { font-size: 11px; }
  .transport { gap: 10px; padding: 10px; }
  .now { order: 3; flex-basis: 100%; }
  .now-title { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* the title display scrolls away on a phone, so the bar keeps the tune's name in one line */
  .now-title.sr { position: static; width: auto; height: auto; margin: 0; clip: auto; clip-path: none; }
  .now-meta { display: none; }   /* the readouts above say the same */
  .play { flex: 1 1 0; justify-content: center; min-width: 0; min-height: 48px; padding: 8px 12px; }
  .skip, .fav, .shape-btn { flex: none; width: 48px; min-height: 48px; padding: 0; justify-content: center; }
  .skip .lbl, .fav .lbl, .shape-btn .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .fav .heart { width: 21px; height: 18px; }
  .console:not(.open) .share, .console:not(.open) #install { display: none; }
  #install, .share { order: 4; flex: 1; }
  .share .btn { width: 100%; }
}
@media (max-width: 420px) {
  body { font-size: 15px; }
  .stations { gap: 12px; }
  .stations button { grid-template-columns: 1fr; padding: 10px; }
  .stations .num { grid-row: auto; font-size: 1.25rem; }
  .dial { grid-template-columns: 4.5rem 1fr; }
}
/* Machine names in pixel letters are wide: on a phone each machine gets a whole row, picture on the left. */
@media (max-width: 560px) {
  .machines { grid-template-columns: minmax(0, 1fr); }
  .machines button { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .machines .art { grid-column: 1; grid-row: 1 / span 3; margin: 2px 0 0 -3px; }
  /* every line in its own place: left to the automatic order, the number spanning two rows (wider phones,
     421-560) pushed the description under the picture and the name out of the card */
  .machines .num { grid-column: 2; grid-row: 1; }
  .machines .name { grid-column: 2; grid-row: 2; }
  .machines .tag { grid-column: 2; grid-row: 3; }
}
@media (hover: none) { .keys { display: none; } }   /* phones and tablets have no keyboard */