/* Activated by night-shift-desktop.js from the window size alone (no pointer test), and also held inside the same media
   query, so it can never reach a phone. Keep the query in step with the JS and the desktop <source> of the radio <picture>.
   The existing phone CSS, modules, breakpoints and measurements remain independent. */
@media (min-width:1001px) and (min-height:541px) {
/* The 1440x900 reference scene. JS scales this entire reference frame,
   including its gaps and type, to fit the viewport, capped at 1.25x.
   Radio and both side panels share one 430px column width (15% up from 375px). */
.desktop-radio {
  --rw: 430px;
  --rimg: var(--rw);
  --rh: calc(var(--rw) * 1507 / 1044);
  --rt: calc(900px - 12px - var(--rh));
  --side: calc((100% - var(--rw)) / 2);
  --pw: var(--rw);
  --ph: var(--rh);
  --px: calc((var(--side) - var(--pw)) / 2);
  --pt: var(--rt);
}
.desktop-radio .world { --W: 1440px !important; width: 1440px; height: 900px; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--desktop-scale, 1)) !important; transform-origin: center; }
/* No transition on resize; the section zoom button lends it the dash's own zoom transition (.world in night-shift-v3.css). */
.desktop-radio .world:not(.lens-move) { transition: none; }
.desktop-radio .dashband { display: none; }
/* The header logo (polish-r28: level, no tilt; it was the neon script, tilted -6deg) at its earlier on-screen size: 58px and
   16px drawn in the 1600px world scaled to 0.9 at 1440x900. "Radio" sits on the DJ SYSTEM · FM line underneath. */
.desktop-radio .logo { left: 32px; top: 32px; font-size: 52px; }
.desktop-radio .logo-line { display: flex; align-items: center; gap: 14px; }
.desktop-radio .logo small { font-size: 14.5px; margin: 20px 0 0; white-space: nowrap; }
.desktop-radio .price { top: 24px; right: 24px; }
.desktop-radio .cash { font-size: 42px; }
.desktop-radio .stars button { min-width: 44px; }
/* Headline at the size of the earlier desktop (its 1600px world was drawn at 0.9, so 70px type showed at 63px).
   Lifted 12px in all (top 6px, tighter button and note margins) so the sample strip fits above the columns (28 Oct). */
.desktop-radio .hero { top: 6px; left: 280px; width: calc(100% - 560px); }
.desktop-radio h1 { font-size: 63px; }
.desktop-radio .sub { display: none; }
.desktop-radio .cta { margin-top: 8px; padding: 10px 31px 9px; }
.desktop-radio .cta b { font-size: 28px; }
.desktop-radio .cta small { font-size: 10px; }
.desktop-radio .paynote { margin-top: 6px; font-size: 12px; }
/* HOW IT WORKS and ON AIR sit up in the space under the logo, left of the headline and above the request-line column
   (David, 28 Oct); their old row above the columns is the sample creations strip (samples.css). The MY TRACKS pill is
   gone on desktop: the glove box's PUSH TO OPEN · MY TRACKS does the same. */
.desktop-radio .above { display: flex; gap: 10px; left: var(--px); top: 138px; width: auto; height: 44px; align-items: stretch; overflow: visible; }
.desktop-radio .above > * { position: static; width: auto; height: 44px; }
.desktop-radio .above .pill { padding: 0 18px; }
.desktop-radio .onair { display: flex; align-items: center; justify-content: center; white-space: nowrap; font: 700 14px/1 "Chakra Petch", sans-serif; -webkit-text-stroke: 0; padding: 6px 14px; }
.desktop-radio .onair.cold { color: #ffd9d6; border-color: #9f625c; background: #211215; }
.desktop-radio .above .hot2 { display: none; }
.desktop-radio .radio { left: calc(50% - var(--rimg) / 2); top: var(--rt); width: var(--rimg); }
/* "The radio works!" note (inside the picture, 06-night-shift-v3.html) in the plain band under the printed dial
   lettering: above the LCD and the knobs, left of EJECT. It fades once Play is pressed (.gone). */
.desktop-radio .trybadge { left: 26%; top: 11%; }
.desktop-radio .side-unit,
.desktop-radio .monitor.big { top: var(--pt); width: var(--pw); height: var(--ph); }
.desktop-radio .monitor { left: var(--px); }
.desktop-radio .glove,
.desktop-radio #desktop-script { left: auto; right: var(--px); }
/* Keep the portrait, note and both arrows inside the narrower glove-box panel. */
.desktop-radio .stack { left: 4%; width: 44%; }
.desktop-radio .rcol { left: auto; right: 4%; width: 44%; }
.desktop-radio .scrollcue { left: calc(var(--px) + var(--pw) / 2); bottom: auto; top: calc(var(--pt) + var(--ph) + 26px); }
.desktop-radio #desktop-script { display: none; }
.desktop-radio .world:has(.monitor.big) #desktop-script { display: block; }
.desktop-radio .world:has(.monitor.big) .glove { display: none; }
.desktop-radio .world:has(.glove.focus) .glove { display: block; }
.desktop-radio .world:has(.glove.focus) #desktop-script { display: none; }
.desktop-radio .zoomed .unit,
.desktop-radio .zoomed .above,
.desktop-radio .zoomed .hero,
.desktop-radio .zoomed .price,
.desktop-radio .zoomed .logo { opacity: 1; filter: none; pointer-events: auto; }
.desktop-radio .zoomed .dashband { filter: none; }
.desktop-radio .mframe { border-width: 20px 22px; }
.desktop-radio .big .scr { display: flex; }
.desktop-radio #desktop-script .rlside { display: block; height: 100%; width: 100%; border: 0; padding: 16px; }
/* "Your request so far" / "What happens next" in the right-hand screen (also beside a playing preview): read at
   1440x900 (David, 27 Oct). Fixed px in the 1440x900 frame; the panel keeps its size and anything longer scrolls inside. */
.desktop-radio #desktop-script .rlside h3 { font-size: 30px; line-height: 1; margin-bottom: 12px; }
.desktop-radio #desktop-script .rlside .sx-row { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 8px 0 9px; border-bottom-width: 1px; }
.desktop-radio #desktop-script .rlside .sx-row label { font-size: 17px; line-height: 1.15; padding-top: 3px; }
.desktop-radio #desktop-script .rlside .sx-v { font-size: 22px; line-height: 1.15; gap: 6px 8px; }
.desktop-radio #desktop-script .rlside .sx-v .dot { width: 10px; height: 10px; box-shadow: 0 0 6px var(--sc, #fff); }
.desktop-radio #desktop-script .rlside .sx-v .chip { font-size: 19px; padding: 1px 7px; border-radius: 3px; }
.desktop-radio #desktop-script .rlside .tipx { font-size: 17px; line-height: 1.25; margin-top: 12px; }
.desktop-radio #desktop-script .rlside > p:not([class]) { font-size: 20px; line-height: 1.3; color: #d8d4ff; }
.desktop-radio #desktop-script .rlside .nextx { gap: 14px; }
.desktop-radio #desktop-script .rlside .nextx li { font-size: 20px; line-height: 1.3; padding-left: 34px; }
.desktop-radio #desktop-script .rlside .nextx li::before { font-size: 24px; line-height: 1.1; }
.desktop-radio #desktop-script .djs-side { padding: 0; }
.desktop-radio #desktop-script .djs-side h3 { font-size: 25px; }
.desktop-radio #desktop-script .djs-lines p { font-size: 17px; }
.desktop-radio #desktop-script .djs-lines p.tag { font-size: 14px; }
.desktop-radio #desktop-script .djs-sign p { font-size: 22px; }
/* Zoom-in / zoom-out button on each section (night-shift-v3.js lensPlace); its corner keeps clear of keys, LCD and knobs. */
.desktop-radio .mzoom { display: block; width: 44px; height: 44px; font-size: 24px; border-radius: 10px; }
/* The radio's sits inside the radio's own top-right corner (28 Oct; it was above the corner), right of the ROAST-NR badge
   and above EJECT, so the sample strip can run across the top of the columns. */
.desktop-radio .radio .uz { left: auto; right: 8px; top: 8px; }
/* "Back to the dash" sits in the HOW IT WORKS / ON AIR row (night-shift-desktop.js), shown while a section is zoomed.
   Not while the glove box is open (David, 28 Oct): its own CLOSE and corner button are enough, and on this desktop
   nothing else is dimmed or locked while it is open. It still shows for the zoomed request line. */
.desktop-radio .above .back2 { position: static; display: none; transform: none; height: 44px; padding: 0 16px; letter-spacing: .1em; white-space: nowrap; transition: none; }
.desktop-radio .zoomed .above .back2 { display: inline-flex; align-items: center; }
.desktop-radio .world:has(#glove.focus) .above .back2 { display: none; }

/* LCD text sizes for this desktop; its box over the printed display, and every key's click area, come from radio-keys.js. */
/* The LCD is 52% of the picture wide (radio-keys.js, clear of the TUNE/BAL knob's rim; David, 29 Oct, was 54.6%):
   the emblem column (was 20%), the gaps on the top line (were 1.4cqw) and the right padding (was 1.2cqw) give back
   that room, so the longest names (HEARTBREAK HOTLINE, REWIND AND RECORD) and ON AIR still show in full. */
.desktop-radio .lcd { grid-template-columns: 18% minmax(0, 1fr); }
.desktop-radio .lcd .main { padding: .8cqw .6cqw 0 1.4cqw; }
.desktop-radio .lcd .l1 { gap: .8cqw; }
.desktop-radio .lcd .air,
.desktop-radio .lcd .fm { font-size: 12px; }
.desktop-radio .lcd .stn { font-size: 14px; }
/* the scroller reads at a comfortable size; it stays clipped inside the LCD's text column */
.desktop-radio .lcd .tick { font-size: 19px; line-height: 1.1; }
.desktop-radio .lcd .freq { font-size: 25px; }
.desktop-radio .lcd .time { font-size: 12px; }
.desktop-radio .nrbadge { left: 60%; top: 5.5%; font-size: 12px; }
.desktop-radio .knob { background: none; }
.desktop-radio .livebar { display: none; }

/* Unscaled desktop controls retain a real 44px target in every request step. */
.desktop-radio button,
.desktop-radio [role="button"],
.desktop-radio .pill { min-height: 44px !important; }
.desktop-radio input,
.desktop-radio select,
.desktop-radio textarea,
.desktop-radio .swap { min-height: 44px; }
.desktop-radio .pane { overflow-y: auto; }
.desktop-radio .pane > * { flex-shrink: 0; }
.desktop-radio .pane > .list,
.desktop-radio .pane > .scrollx,
.desktop-radio .pane > .sumx { flex-shrink: 1; min-height: 85px; }
.desktop-radio .act { gap: 8px; }
.desktop-radio .act button { font-size: 16px; }
.desktop-radio .pane > .act { margin-top: auto; padding-top: 8px; }
.desktop-radio .act button::after { display: none; }
.desktop-radio .heat { flex-wrap: wrap; }
.desktop-radio .tray { max-height: 96px !important; }
.desktop-radio .tray .chip { height: auto; min-height: 44px; }
.desktop-radio .chip button { min-width: 44px; flex: none; }
.desktop-radio .big .scr.s5 .rlmain { --k: 1; }
.desktop-radio #monitor.big .scr.s5 .pane[data-p="5"].on { display: flex; }
.desktop-radio #monitor.big .scr.s5 .scrollx { display: block; overflow-y: auto; }
.desktop-radio #monitor.big .scr.s5 .intro3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.desktop-radio #monitor.big .scr.s5 .sitems { overflow: visible; }
.desktop-radio .sitem .grip,
.desktop-radio .sitem .tick { min-height: 44px; }
.desktop-radio .djs-call { display: none; }
/* Request-line type on desktop. Its cqw sizes follow the 386px inner column, so 4.66cqw is
   about 18px at 1440x900; the opening heading and its strap grow in the same ratio. */
.desktop-radio .boot-head h2 { font-size: 13cqw; }
.desktop-radio .boot-head p { font-size: 4.66cqw; }
.desktop-radio .boot-note { left: 5%; right: 5%; top: 27%; font-size: 4.66cqw; }
.desktop-radio #monitor .pane .in,
.desktop-radio #monitor .list button { font-size: 4.66cqw; }
}