/* A big screen (asked 23/10): past the desktop frame (1440 × 800) the page was
   drawn at its 1440 sizes in the middle of a 2560 — everything a coaster, the
   headline alone growing. The head of index.html sets --k, the window over the
   frame on its tighter side (capped at 1.6), and `.is-large` once it is past 1;
   under it this sheet does nothing and every frame stays as drawn.
   What grows: the frame's rungs (margins, pads, the key's height, the icons),
   the type, the sleeve and its credits, the keys, the fader and its ticks. */
@property --headline-max { syntax: "<length>"; inherits: true; initial-value: 100px; }   /* programme.js reads it back as px */

:root.is-large {
  --margin: calc(80px * var(--k));
  --gutter: calc(24px * var(--k));
  --pad-top: calc(40px * var(--k));
  --pad-bottom: calc(40px * var(--k));
  --icon: calc(16px * var(--k));
  --control-height: calc(48px * var(--k));
  --gap-theme: calc(12px * var(--k));
  --cap-ui: calc(10.19px * var(--k));
}
.is-large body { font-size: calc(14px * var(--k)); line-height: calc(16px * var(--k)); }
/* The sheets: the About card and the account's panel are drawn in px from
   end to end — their own rows, chips, popover — so each grows as one block
   (`zoom`) rather than rule by rule. Under it, the frame's words and rungs,
   or the page's --k would be counted twice. The Jam is not there yet. */
.is-large :is(.drawer, .about, .jam) { font-size: 14px; line-height: 16px; --control-height: 48px; --icon: 16px; }
.is-large :is(.about__card, .drawer__panel) { zoom: var(--k); }
.is-large :is(.bar, .now, .actions) .icon { width: var(--icon); height: var(--icon); }

/* The bar */
.is-large .bar { height: calc(24px * var(--k)); }
.is-large :is(.deck, .transport) { gap: calc(16px * var(--k)); }
.is-large .led { width: calc(8px * var(--k)); height: calc(8px * var(--k)); }
.is-large .mode { gap: calc(8px * var(--k)); margin-left: calc(8px * var(--k)); }
.is-large .mode__item { font-size: calc(10px * var(--k)); line-height: calc(16px * var(--k)); gap: calc(4px * var(--k)); }
.is-large .meta { gap: calc(16px * var(--k)); }

/* The schedule */
.is-large .schedule { margin-top: calc(32px * var(--k)); }
.is-large .slot { font-size: calc(10px * var(--k)); line-height: calc(16px * var(--k)); }
.is-large .slot__name { margin-top: calc(12px * var(--k)); }
.is-large .slot__hours { margin-top: calc(8px * var(--k)); }

/* The stage: the mood, the sleeve, its credits and keys */
.is-large .stage { gap: calc(88px * var(--k)); --headline-max: calc(100px * var(--k)); margin-top: clamp(calc(32px * var(--k)), 100dvh - 644px * var(--k), calc(116px * var(--k))); min-height: calc(128px * var(--k)); }
.is-large .page .now { gap: calc(24px * var(--k)); }
.is-large .page .cover { width: calc(128px * var(--k)); height: calc(128px * var(--k)); }
.is-large .page .cover__left { font-size: calc(10px * var(--k)); line-height: calc(16px * var(--k)); }
.is-large .page .track { width: calc(288px * var(--k)); column-gap: calc(8px * var(--k)); }
.is-large .page .track__row { gap: calc(8px * var(--k)); height: calc(24px * var(--k)); font-size: calc(12px * var(--k)); line-height: calc(16px * var(--k)); }
.is-large .page .now .track__row { font-size: calc(14px * var(--k)); line-height: calc(20px * var(--k)); }
.is-large .page .now .track__row:first-child { height: calc(20px * var(--k)); font-size: calc(14px * var(--k)); }
.is-large .page .track__keys { gap: calc(4px * var(--k)); }

/* The keys under the rail */
.is-large .actions { gap: calc(4px * var(--k)); margin-top: calc(36px * var(--k)); }
.is-large .action { row-gap: calc(12px * var(--k)); }
/* The page's keys only: `.btn` alone reached the sheets too (the About's
   send key went 193 wide and squeezed the reason down to "Selec"). */
.is-large .page .btn { gap: calc(4px * var(--k)); font-size: calc(12px * var(--k)); line-height: calc(16px * var(--k)); }
.is-large .actions .btn--primary { width: calc(193px * var(--k)); }
.is-large .actions .btn--secondary { width: calc(85px * var(--k)); }
.is-large .page .track__keys .btn { width: calc(32px * var(--k)); height: calc(32px * var(--k)); padding: 0; }

/* The fader: its figures, the rail and its ticks (deck.js reads the pitch
   back for the meter), the grab and the native thumb under it. */
.is-large .volume { row-gap: calc(20px * var(--k)); margin-top: calc(48px * var(--k)); }
.is-large .scale { height: calc(7px * var(--k)); font-size: calc(10px * var(--k)); line-height: calc(16px * var(--k)); }
.is-large .scale span { left: calc(var(--p) / 100 * (100% - 28px * var(--k)) + 14px * var(--k)); }
.is-large .rail { --tick: calc(3px * var(--k)); --pitch: calc(7px * var(--k)); height: calc(21px * var(--k)); }
.is-large .grab { left: calc(var(--level) / 100 * (100% - 28px * var(--k))); width: calc(28px * var(--k)); height: calc(48px * var(--k)); font-size: calc(12px * var(--k)); }
.is-large #volume { height: calc(48px * var(--k)); margin: calc(-13.5px * var(--k)) 0; }
.is-large #volume::-webkit-slider-runnable-track { height: calc(21px * var(--k)); }
.is-large #volume::-webkit-slider-thumb { width: calc(28px * var(--k)); height: calc(48px * var(--k)); margin-top: calc(-13.5px * var(--k)); }
.is-large #volume::-moz-range-track { height: calc(21px * var(--k)); }
.is-large #volume::-moz-range-thumb { width: calc(28px * var(--k)); height: calc(48px * var(--k)); }

/* What's been on: the column's label and the card's credits. The record
   itself grows on its own (crate.css), the fan with the window (vinyl.js). */
.is-large .more__bar { height: calc(24px * var(--k)); }
.is-large :is(.pick__title, .pick__artist) { height: calc(24px * var(--k)); font-size: calc(12px * var(--k)); line-height: calc(24px * var(--k)); }

/* The right of the bar: the clock, the place, the weather, the bench, the name. */
.is-large .meta { height: calc(16px * var(--k)); }
.is-large :is(#clock, .meta__place, .meta__temp, .me__name, .bench__n) { font-size: calc(12px * var(--k)); line-height: calc(16px * var(--k)); }
.is-large .theme { gap: calc(24px * var(--k)); margin-left: calc(8px * var(--k)); }
.is-large .hit--me { gap: calc(4px * var(--k)); }
.is-large .bench__key { gap: calc(6px * var(--k)); }
.is-large :is(.hit--me, .bench__key) .face { width: var(--icon); height: var(--icon); }