/* Opt-in phone dashboard. No selector applies to the desktop or the other concept pages. */
html.phone-panels .stage { width: 100%; height: auto; min-height: 100svh; overflow: clip; }
html.phone-panels .world { position: relative; width: 100%; height: auto; padding: 0; transform: none !important; }
html.phone-panels .world > .tophud,
html.phone-panels .world > .hero,
html.phone-panels .world > .above,
html.phone-panels .dashband,
html.phone-panels .scrollcue,
html.phone-panels .back2 { display: none; }
/* Each panel's zoom-in / zoom-out button (night-shift-v3.js; fitZoom hides it where it would cover a key, the LCD or a knob). */
html.phone-panels .mzoom { display: block; width: 44px; height: 44px; font-size: 24px; border-radius: 10px; border-width: 1px; }
html.lens .phone-viewport { overflow-x: hidden; }
html.phone-panels .bg { height: 100%; }
/* Portrait: the desktop headline and preview button, the radio, swipe dots and the glove-box entry share the first viewport. */
.phone-panels .phone-dashboard > .hero { display: none; }
.phone-panels .phone-dots { display: none; }
@media (max-width:600px) and (orientation:portrait) {
  /* Same headline, green button and note as desktop (night-shift-desktop.css), scaled to the phone width. */
  html.phone-panels .phone-dashboard > .hero { display: block; position: relative; inset: auto; width: auto; margin: 0; padding: 8px 12px 6px; text-align: center; opacity: 1; filter: none; pointer-events: auto; }
  html.phone-panels .phone-dashboard > .hero h1 { font-size: 34px; }
  html.phone-panels .phone-dashboard > .hero h1 i { display: inline; }
  html.phone-panels .phone-dashboard > .hero .sub { display: none; }
  html.phone-panels .phone-dashboard > .hero .cta { display: inline-flex; width: auto; margin-top: 8px; padding: 8px 18px 7px; }
  html.phone-panels .phone-dashboard > .hero .cta b { font-size: 26px; }
  html.phone-panels .phone-dashboard > .hero .cta small { letter-spacing: .03em; white-space: nowrap; }
  html.phone-panels .phone-dashboard > .hero .paynote { margin-top: 6px; font-size: 12px; }
  html.phone-panels .bg { height: 100svh; }
  html.phone-panels .bg::after { background: linear-gradient(180deg, rgba(7,4,13,.15), rgba(7,4,13,.25) 35%, #07040d); }
  html.phone-panels .phone-viewport { height: max(360px, calc(100svh - var(--phone-intro-height, 200px) - 52px)); min-height: 0; }
  /* The radio photo is 360px wide and centred (E2 mock-up), bezel included; it only shrinks on screens too short for it. */
  html.phone-panels .phone-viewport > .phone-panel:has(.radio) { padding: 0; overflow: clip; }
  html.phone-panels .phone-panel .radio { justify-content: center; align-items: center; background: transparent; }
  html.phone-panels .phone-panel .photo { width: min(360px, calc(max(350px, 100svh - var(--phone-intro-height, 200px) - 52px) * 1044 / 1507)); max-width: none; }
  html.phone-panels .phone-dots { display: flex; justify-content: center; align-items: center; gap: 10px; height: 14px; background: #07040d; }
  html.phone-panels .phone-dots i { width: 7px; height: 7px; border-radius: 50%; background: #776b81; }
  html.phone-panels .phone-dots i.on { background: var(--cy); box-shadow: 0 0 8px var(--cy); }
  /* the 52px under the dots is the sample creations strip (samples.css), which replaced the section buttons (28 Oct) */
  html.phone-panels .livebar { display: none; }
  /* The radio's zoom button sits in the top-right corner of its panel, clear of the printed logo at the picture's top-left. */
  html.phone-panels .radio .uz { left: auto; right: 0; top: 0; }
}
.phone-panels .phone-viewport { display: flex; height: calc(100svh - 112px); min-height: 480px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.phone-panels .phone-viewport::-webkit-scrollbar { display: none; }
.phone-panels .phone-viewport.dragging { scroll-snap-type: none; }
.phone-panels .phone-panel { flex: 0 0 100%; width: 100%; height: 100%; min-width: 0; padding: 8px 10px 14px; scroll-snap-align: start; scroll-snap-stop: always; }
html.phone-panels .phone-panel .unit { position: relative; inset: auto; width: 100%; height: 100%; margin: 0; opacity: 1; filter: none; pointer-events: auto; }
html.phone-panels .phone-panel:has(.radio) { padding: 4px 0 6px; }
html.phone-panels .radio { display: flex; flex-direction: column; justify-content: center; background: #0d0b0f; box-shadow: none; }
html.phone-panels .photo { width: min(100%, calc((100svh - 122px) * 1044 / 1507)); align-self: center; flex: none; }
/* "The radio works!" note, inside the picture: in the plain band above the LCD and knobs and left of EJECT
   (portrait); between the dial lettering and the LCD on the wide picture (landscape). Fades once Play is pressed. */
html.phone-panels .trybadge { left: 13%; top: 10%; animation: none; }
html.phone-panels .mframe { border-width: 18px 17px; }
html.phone-panels .pane { overflow-y: auto; overscroll-behavior-y: contain; }
html.phone-panels .pane > * { flex-shrink: 0; }
html.phone-panels .pane > .list,
html.phone-panels .pane > .sumx,
html.phone-panels .pane > .scrollx { flex-shrink: 1; min-height: 90px; }
html.phone-panels .pane > .act { margin-top: auto; padding-top: 10px; flex: none; }
html.phone-panels .act { display: flex; gap: 8px; }
html.phone-panels .act button { flex: 1 1 0 !important; min-height: 44px; font-size: 16px; line-height: 1.15; padding: 8px; }
html.phone-panels .act button::after { display: none; }
html.phone-panels button,
html.phone-panels [role="button"],
html.phone-panels .pill,
html.phone-panels .legal a,
html.phone-panels summary { min-width: 44px !important; min-height: 44px !important; }
html.phone-panels input,
html.phone-panels textarea,
html.phone-panels select { min-height: 44px; font-size: 16px !important; }
html.phone-panels .heat { display: flex; flex-wrap: wrap; }
html.phone-panels .heat button { flex: 1; }
html.phone-panels .tray .chip { height: auto; min-height: 44px; }
html.phone-panels .tray { max-height: 96px !important; }
html.phone-panels .sitem { grid-template-columns: 44px 44px minmax(0, 1fr) 54px; }
html.phone-panels .sitem .grip,
html.phone-panels .sitem .tick { min-width: 44px; min-height: 44px; }
html.phone-panels .rlhead { grid-template-columns: 1fr auto; gap: 4px; }
html.phone-panels .rlhead .tag { display: none; }
html.phone-panels .meter { flex-wrap: wrap; }
html.phone-panels .meter b { min-width: 0; }
html.phone-panels .boot-note { font-size: 16px; line-height: 1.35; }
html.phone-panels .boot-go { min-height: 58px; font-size: 20px; }
html.phone-panels .boot-go small { font-size: 12px; }
html.phone-panels .gbox { height: 100%; }
/* NOW HOSTING note: the same 12px floor as readableText() below, built in so fitCard() (night-shift-v3.js) measures the
   real sizes; anything still too long for the note scrolls inside it rather than being cut off */
html.phone-panels .card { overflow-y: auto; }
html.phone-panels .card small { font-size: max(12px, 6.4cqw); }
html.phone-panels .card .dj { font-size: max(12px, calc(13.5cqw * var(--cz, 1))); }
html.phone-panels .card .st,
html.phone-panels .card .mu,
html.phone-panels .card p { font-size: max(var(--cf, 12px), calc(8.2cqw * var(--cz, 1))); }
/* glovenote-r30: the four-line note (name, station, music, blurb) can need more than the narrow note holds at 12px, so
   fitCard() lowers --cf (the floor above) a half pixel at a time once --cz alone can't make it fit */
html.phone-panels .side .btns { gap: 10px; }
html.phone-panels .side .btns button { width: 48px; height: 48px; }
html.phone-panels .djs-view { overflow-y: auto; }
html.phone-panels .djs-call button { min-height: 58px; font-size: 16px; }
html.phone-panels .djs-call button small { font-size: 12px; }
html.phone-panels .djs-call .djs-bar { height: 8px; margin: 5px 8px 2px; border-width: 1px; border-radius: 3px; }
html.phone-panels .djs-call .djs-bar i { background: repeating-linear-gradient(90deg, #9fe8ff 0 6px, transparent 6px 8px); }
/* Enter in a one-line field hands focus to the request line's screen (night-shift-v3.js); no ring is drawn round it */
#scr:focus { outline: none; }
html.phone-panels .pr-top { flex-wrap: wrap; }
html.phone-panels .pr-status { flex-wrap: wrap; }
html.phone-panels .pr-ready .pr-row { display: flex; flex-wrap: wrap; }
html.phone-panels .pr-ready button { flex: 1; }
html.phone-panels .more { position: relative; }
html.phone-panels .more .steps { padding-top: 32px; }
html.phone-panels .more .legal a { display: inline-flex; align-items: center; }
.phone-panels .phone-radio-image { display: contents; }

/* Section zoom (night-shift-v3.js lensPlace): the zoomed section fills the whole screen, inside the safe area, with its
   44px close button top right (top left on the wide radio, where the right-hand corner is the EJECT key). The request
   line reflows to the screen and scrolls inside; the glove box picture is cover-mapped by layoutGlove (edges crop,
   nothing stretches); the radio picture keeps its aspect ratio at the largest size that keeps every printed key. */
html.phone-panels.lens,
html.phone-panels.lens body { overflow: hidden; }
html.phone-panels.lens .phone-panel .unit.lens-on { position: fixed; inset: 0; z-index: 41; width: auto; height: auto; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); border-radius: 0; box-shadow: none; background: #07040d; }
html.phone-panels.lens .unit.lens-on > .mzoom { display: block !important; left: auto; right: calc(env(safe-area-inset-right) + 6px); top: calc(env(safe-area-inset-top) + 6px); width: 48px; height: 48px; font-size: 26px; border: 2px solid #fff; background: rgba(10,7,14,.92); z-index: 6; }
html.phone-panels.lens .phone-panel .radio.lens-on { justify-content: center; align-items: center; overflow: hidden; }
/* glove box: as tall as the screen allows while its three tapes (23.4% of the open picture's width, cover-mapped by
   layoutGlove) still fit across the screen; any band left over sits above and below it */
html.phone-panels.lens .phone-panel .glove.lens-on { display: flex; flex-direction: column; justify-content: center; }
html.phone-panels.lens .glove.lens-on .gbox { flex: none; height: min(100%, calc((100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px) * 484 / 996 / .234)); border-radius: 0; }
/* portrait: the tall picture is as wide as the screen (its keys run edge to edge, so nothing may crop), with 60px kept
   above and below for the close button */
html.phone-panels.lens .phone-panel .radio.lens-on .photo { width: min(100%, calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 120px) * 1044 / 1507)); }
@media (max-width:1000px) and (orientation:landscape) {
  /* the wide picture fills the screen height; up to 3.5% of its height may crop at the top and the bottom, above the
     EJECT key (5.1%) and below the bottom preset row (95%) */
  html.phone-landscape.lens .phone-panel .radio.lens-on .photo { width: 100%; height: 100%; }
  html.phone-landscape.lens .radio.lens-on .phone-radio-image { --face-w: min(100%, calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 1774 / 887 / .93)); }
  html.phone-landscape.lens .radio.lens-on > .mzoom { right: auto; left: calc(env(safe-area-inset-left) + 6px); }
}

/* Landscape uses the same swipe track as portrait, with one full-height panel. */
@media (max-width:1000px) and (orientation:landscape) {
html.phone-landscape .phone-heading,
html.phone-landscape .phone-tabs { display: none; }
html.phone-landscape .phone-viewport { height: 100svh; min-height: 0; }
html.phone-landscape .phone-panel,
html.phone-landscape .phone-panel:has(.radio) { position: relative; width: 100%; min-height: 0; padding: 22px 4px 4px; }
.phone-landscape .phone-panel::before { content: attr(data-title); position: absolute; inset: 3px 0 auto; text-align: center; font: 700 12px/16px "Chakra Petch", sans-serif; color: var(--cy); }
html.phone-landscape .radio { justify-content: flex-start; }
html.phone-landscape .photo { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
/* Dots beside the section label show which of the three panels is open. */
html.phone-landscape .phone-dashboard { position: relative; }
html.phone-landscape .phone-dots { display: flex; position: absolute; top: 7px; right: 12px; gap: 8px; z-index: 5; pointer-events: none; }
html.phone-landscape .phone-dots i { width: 7px; height: 7px; border-radius: 50%; background: #776b81; }
html.phone-landscape .phone-dots i.on { background: var(--cy); box-shadow: 0 0 8px var(--cy); }
/* The whole wide picture is the radio: its printed presets, transport row and EJECT are the buttons (click areas from
   radio-keys.js). Reserve 22px for the section label and 4px below; the picture scales with screen height. */
.phone-landscape .phone-radio-image { --face-w: min(100%, calc((100svh - 26px) * 1774 / 887)); display: block; position: relative; width: var(--face-w); aspect-ratio: 1774 / 887; flex: none; container-type: inline-size; }
/* The photo already contains its branding; keep the extra badge above its screen. */
html.phone-landscape .nrbadge { left: auto; right: 2%; top: 0; z-index: 1; font-size: 10px; padding: 1px 3px; background: #171615; }
/* The LCD covers the lettering printed into the wide picture; its box comes from radio-keys.js. */
html.phone-landscape .trybadge { left: 39%; top: 8%; }
html.phone-landscape .lcd { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 1px 3px; }
html.phone-landscape .lcd .emb { display: none; }
html.phone-landscape .lcd .time { font-size: 12px; line-height: 14px; padding: 0; }
html.phone-landscape .lcd .main { gap: 0; }
html.phone-landscape .lcd .l1 { height: 14px; gap: 3px; line-height: 14px; }
html.phone-landscape .lcd .freq { font-size: 14px; }
html.phone-landscape .lcd .stn,
html.phone-landscape .lcd .fm { font-size: 12px; line-height: 14px; }
html.phone-landscape .lcd .tick { font-size: 17px; line-height: 19px; margin-top: 2px; }
html.phone-landscape .mframe { border-width: 8px; }
html.phone-landscape .boot-head { position: static; margin: 14px 0 8px; }
html.phone-landscape .boot-head h2 { font-size: 27px; }
html.phone-landscape .boot-head p { font-size: 12px; }
html.phone-landscape .boot-note { position: static; margin: 0 10px 12px; font-size: 14px; }
html.phone-landscape .boot-go { position: static; transform: none; margin: 0 4px; white-space: normal; font-size: 18px; }
html.phone-landscape .boot-check { position: static; margin: 12px 0; font-size: 14px; }
html.phone-landscape .pane { padding: 6px; }
html.phone-landscape .rlhead h2 { font-size: 18px; }
html.phone-landscape .q { font-size: 16px; }
html.phone-landscape .act { position: sticky; bottom: 0; background: #101029; padding-bottom: 4px; z-index: 3; }
html.phone-landscape .opentag { z-index: 1; }
/* PUSH TO OPEN wraps onto two short lines under the latch, so the Polaroids and the sticky note fit either side of it */
html.phone-landscape .opentag b { font-size: 12px; padding: 5px 12px; white-space: normal; max-width: 150px; text-align: center; line-height: 1.25; }
html.phone-landscape .stack::after { font-size: 12px; }
/* Glove box, closed (David, 25 Oct): the Polaroids run nearly the full height on the left, beside the latch; the sticky
   note, the DJ count and the photo arrows share the right-hand column, below the corner zoom button. */
html.phone-landscape .lid .stack { left: 4%; top: 3%; width: auto; height: 93%; aspect-ratio: 721 / 1088; }
html.phone-landscape .lid .rcol { left: auto; right: 4%; top: 60px; bottom: 4%; width: min(32%, 250px); }
/* Glove box (David, 26 Oct): the box takes the panel's full height for larger Polaroids, so its section label gives way
   (as on the radio) and the dots move to the top centre, clear of the zoom button and above the latch. */
html.phone-landscape .phone-panel:has(#glove) { padding: 4px; }
html.phone-landscape .phone-panel:has(#glove)::before { content: none; }
html.phone-landscape[data-phone-panel="2"] .phone-dots { right: auto; left: 50%; transform: translateX(-50%); }
html.phone-landscape.phone-panels .stack .pol:nth-child(1) { transform: translate(2%, 1.5%) rotate(2deg); }
html.phone-landscape.phone-panels .stack .pol:nth-child(2) { transform: translate(-1.5%, 1%) rotate(-2deg); }
html.phone-landscape .lid .card { flex: 1 1 0; padding: 10px 8px; aspect-ratio: auto; height: auto; min-height: 0; overflow-y: auto; }
html.phone-landscape.phone-panels .lid .rcol .side { flex-wrap: nowrap; justify-content: space-between; }

/* Radio (David, 25 Oct): always full screen in landscape, with no zoom button. The wide picture fills the screen height
   (as the old zoomed view did: up to 3.5% may crop at the top and bottom, clear of EJECT and the bottom preset row), and
   a sideways swipe on it changes section as on the other panels. The section label gives way to the picture; the dots
   move to the top-left corner, off the EJECT key. */
html.phone-landscape .phone-panel:has(.radio) { padding: 0; }
html.phone-landscape .phone-panel:has(.radio)::before { content: none; }
html.phone-landscape .phone-panel .radio { justify-content: center; align-items: center; overflow: hidden; }
html.phone-landscape .phone-panel .radio > .mzoom { display: none !important; }
html.phone-landscape .phone-panel .radio .phone-radio-image { --face-w: min(100%, calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 1774 / 887 / .93)); }
html.phone-landscape[data-phone-panel="0"] .phone-dots { right: auto; left: calc(env(safe-area-inset-left) + 12px); }

/* Request line (David, 25 Oct): a centred screen 60% of the width and the full height, with no zoom button; its header
   is one slim line, so the questions get the height. While a text field has focus, night-shift-phone.js pins the screen
   to the part of the page the on-screen keyboard leaves visible (--vv-top, --vv-h) and keeps the field in view. */
html.phone-landscape .phone-panel:has(#monitor) { display: flex; justify-content: center; }
html.phone-landscape .phone-panel #monitor { width: 60%; flex: none; }
html.phone-landscape #monitor > .mzoom { display: none !important; }
html.phone-landscape.lens .phone-panel #monitor.lens-on { left: 20%; right: 20%; }
html.phone-landscape #monitor .scr:not(.boot) .rlbar { display: flex; align-items: center; gap: 10px; padding: 6px 10px 0; }
html.phone-landscape #monitor .rlhead { display: flex; flex: none; align-items: baseline; gap: 8px; font-size: 12px; }
html.phone-landscape #monitor .rlhead h2 { font-size: 17px; }
html.phone-landscape #monitor .meter { flex: 1; min-width: 0; flex-wrap: nowrap; gap: 6px; margin-top: 0; font-size: 12px; }
html.phone-landscape #monitor .meter > span:first-child { display: none; }
html.phone-landscape #monitor .meter .segs { height: 8px; min-width: 40px; }
html.phone-landscape #monitor .meter b { min-width: 0; white-space: nowrap; }
html.phone-landscape.rl-typing .phone-panel #monitor { position: fixed; top: var(--vv-top, 0px); left: 20%; width: 60%; height: var(--vv-h, 100svh); z-index: 60; }
html.phone-landscape.rl-typing #monitor .mframe { border-width: 4px; }
html.phone-landscape.rl-typing #monitor .rlbar { display: none; }
html.phone-landscape.rl-typing #monitor .act { position: static; }
}

/* Glove box, closed, both orientations (David, 25 Oct): larger Polaroids. The stack fans out less, so the photos can be
   bigger beside the sticky note; the DJ count and photo arrows sit under the sticky note in the right-hand column
   (night-shift-phone.js leaves them there), clear of the Polaroids. --tag-b is the bottom of PUSH TO OPEN (layoutGlove). */
html.phone-panels .stack .pol:nth-child(1) { transform: translate(5%, 4%) rotate(4deg); }
html.phone-panels .stack .pol:nth-child(2) { transform: translate(-3%, 2%) rotate(-3.5deg); }
html.phone-panels .lid .rcol { display: flex; flex-direction: column; gap: 8px; }
html.phone-panels .lid .rcol .side { position: static; inset: auto; flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 10px; }
html.phone-panels .lid .rcol .side > span { font-size: 12px; }
html.phone-panels .lid .rcol .side .cnt { font-size: 26px; }
html.phone-panels .lid .rcol .side .btns { margin-left: 0; flex-direction: row; gap: 10px; }
@media (max-width:600px) and (orientation:portrait) {
  html.phone-panels .lid .stack { left: 4.5%; top: calc(var(--tag-b, 32%) + 20px); width: auto; height: min(calc(100% - var(--tag-b, 32%) - 44px), 80cqw); aspect-ratio: 721 / 1088; }
  html.phone-panels .lid .rcol { left: auto; right: 2%; top: calc(var(--tag-b, 32%) + 14px); bottom: 4%; width: 33%; }
  /* the narrow sticky note grows down the column to fit its text (fitCard only shrinks the text once the column is full) */
  html.phone-panels .lid .card { aspect-ratio: auto; flex: 0 1 auto; min-height: 44cqw; }
}

/* Portrait compact header (David, 26 Oct, option 1; round 3; round 4): the small Hustle MM logo top left; top right, the
   line "INTRO PRICE £4.99" above the desktop's row of five stars (the roast-level picker). No price card and no logo
   banner: the desktop price, its notes and the star label stay hidden. The header keeps the height of the earlier
   stacked version (10px padding + 30px logo + 4px + 15.6px price line + 44px stars = 103.6px), so the headline and the
   radio below it stay exactly where they were. Landscape panels fill the screen, so the header stays hidden there. */
.phone-panels .phone-dashboard > .tophud { display: none; }
@media (max-width:600px) and (orientation:portrait) {
  html.phone-panels .phone-dashboard > .tophud { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; height: 103.6px; padding: 10px 12px 0; position: relative; inset: auto; }
  html.phone-panels .tophud .logo { position: static; font-size: 30px; line-height: 1; margin: 4px 0 0 2px; }
  html.phone-panels .tophud .price { position: static; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
  html.phone-panels .tophud .cash,
  html.phone-panels .tophud .cashnote,
  html.phone-panels .tophud .starlab { display: none; }
  html.phone-panels .tophud .price-line { margin: 0 6px 0 0; font: 600 13px/1.2 "Chakra Petch", sans-serif; letter-spacing: .02em; color: #e8e1f5; text-shadow: 0 1px 0 #000; white-space: nowrap; }
  html.phone-panels .tophud .stars { margin-top: 0; gap: 0; }
  html.phone-panels .tophud .stars button { min-width: 34px !important; font-size: 22px; padding: 0; }
  /* Round 4 (David, 27 Oct): the desktop's line under the logo, the same elements and style as the desktop: "Radio" in
     the logo's script beside the small "DJ SYSTEM · FM" (Big Shoulders Display, cyan glow; polish-r28: the logo
     and this line both sit level, no tilt), scaled to the 30px phone logo (desktop 52px: gap 14px, small 20px down) with the small text at the 12px
     phone floor and .25em letter spacing (desktop .38em), so it ends clear of the stars. It sits in the header's
     spare left-hand space, so the header height (103.6px) and the radio below do not move. */
  html.phone-panels .tophud .logo-line { display: flex; align-items: center; gap: 6px; }
  html.phone-panels .tophud .logo small { font-size: 12px; letter-spacing: .25em; margin: 11px 0 0; white-space: nowrap; }
  html.phone-panels .phone-dashboard > .hero { padding-top: 0; }
  html.phone-panels .phone-dashboard > .hero h1 { font-size: 30px; }
  html.phone-panels .phone-dashboard > .hero .cta { margin-top: 6px; }
  html.phone-panels .phone-dashboard > .hero .paynote { margin-top: 4px; }
}

/* Request line, portrait only (David, 26 Oct): in landscape its panel shows "Turn your phone upright" and a button back
   to the radio instead of the request line (night-shift-phone.js); the request line itself is hidden, so none of its
   fields can take focus. */
.phone-panels .rl-upright { display: none; }
@media (max-width:1000px) and (orientation:landscape) {
  html.phone-landscape .phone-panel #monitor { visibility: hidden; }
  html.phone-landscape .rl-upright { display: flex; position: absolute; inset: 22px 0 0; z-index: 4; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 16px; text-align: center; background: #07040d; }
  html.phone-landscape.lens:has(#monitor.lens-on) .rl-upright { position: fixed; inset: 0; z-index: 42; }
  html.phone-landscape .rl-upright p { max-width: 420px; margin: 0; font: 700 24px/1.25 "Chakra Petch", sans-serif; color: #fff; text-shadow: 0 0 12px var(--cy); }
  html.phone-landscape .rl-upright .pill { width: auto; padding: 0 22px; }
  /* Round 5 (David, 27 Oct): once a track is playing on the request-line screen, that screen is the play screen in
     landscape too: the monitor shows (same 60% width, full height) with the player over the request line. */
  html.phone-landscape.pl-on .phone-panel #monitor { visibility: visible; }
  html.phone-landscape.pl-on .rl-upright { display: none; }
  /* (David, 28 Oct) the making screen is the loading screen, with nothing to type: it shows in landscape as well, the
     same 60% wide, full-height screen, so the song can be watched coming together with the phone either way up. */
  html.phone-landscape.rl-making .phone-panel #monitor { visibility: visible; }
  html.phone-landscape.rl-making .rl-upright { display: none; }
  /* the status line's bar gets its own full-width row there (beside the text it was squeezed to a few pixels) */
  html.phone-landscape.rl-making .pr-pbar { flex: 1 1 100%; height: 8px; }
  /* once it is ready, the screen is too short for the lyrics, PLAY, BUY and NEW REQUEST together: the finished screen
     takes its full height and the request line scrolls (its pane already does), the lyrics keep a short box of their own */
  html.phone-landscape.rl-making .pr[data-phase="done"] { flex: none; }
  html.phone-landscape.rl-making .pr[data-phase="done"] .pr-main { flex: none; height: 120px; }
}

/* Glove box, closed, portrait (David, 26 Oct): larger Polaroids. PUSH TO OPEN sits above the latch, pointing down at
   it, so the Polaroids start right under the latch (--latch-t, --latch-b from layoutGlove) and fan out only slightly;
   the sticky note column beside them is narrower. */
.phone-panels .opentag .tag-dn { display: none; }
@media (max-width:600px) and (orientation:portrait) {
  html.phone-panels .phone-panel:has(#glove) { padding: 4px 8px; }
  html.phone-panels .lid .opentag { top: auto !important; bottom: min(calc(100% - var(--latch-t, 60px) + 4px), calc(100% - 40px)); }
  html.phone-panels .lid .opentag b { font-size: 12px; padding: 3px 12px; white-space: normal; max-width: 170px; text-align: center; line-height: 1.25; }
  html.phone-panels .opentag .tag-up { display: none; }
  html.phone-panels .opentag .tag-dn { display: inline; }
  html.phone-panels .lid .stack { left: 2.5%; top: calc(var(--latch-b, 32%) + 6px); height: min(calc(100% - var(--latch-b, 32%) - 18px), 92cqw); }
  html.phone-panels .stack .pol:nth-child(1) { transform: translate(2%, 1.5%) rotate(2deg); }
  html.phone-panels .stack .pol:nth-child(2) { transform: translate(-1.5%, 1%) rotate(-2deg); }
  html.phone-panels .lid .rcol { right: 2%; top: calc(var(--latch-b, 32%) + 6px); bottom: 2.5%; width: 30%; }
}

/* Neon background (David, 26 Oct, round 3): the portrait page's neon-coast picture (.bg, night-shift-v3.css: same image
   and framing, with the light tint from the top of the portrait page) also shows behind the zoomed portrait sections,
   which cover the whole screen, and around the full-screen landscape radio, whose own dark fill is removed. */
@media (max-width:600px) and (orientation:portrait) {
  html.phone-panels.lens .phone-panel .unit.lens-on { background: linear-gradient(180deg, rgba(7,4,13,.15), rgba(7,4,13,.25)), url(../../neon-coast.webp) 50% 30% / cover, #07040d; }
  /* a sideways swipe on a zoomed section slides the next one in from that side (night-shift-phone.js, David, 28 Oct) */
  html.phone-panels.lens .phone-panel .unit.lens-on.lens-in-r { animation: lens-in-r .28s cubic-bezier(.2,.7,.2,1); }
  html.phone-panels.lens .phone-panel .unit.lens-on.lens-in-l { animation: lens-in-l .28s cubic-bezier(.2,.7,.2,1); }
  /* the finished screen (David, 29 Oct): zoomed out, its PLAY / BUY / NEW REQUEST block was taller than the space left
     above the DJ script bar, so NEW REQUEST ran 15px under the bar at 390x844 (and much further on shorter phones). The
     screen now keeps its full height and the bar follows it; when the two do not fit, the request line's pane scrolls
     (it already does). The lyrics box takes only the room left over, as before. */
  html.phone-panels .pane.press .pr[data-phase="done"] { flex: 1 0 auto; }
  html.phone-panels .pane.press .pr[data-phase="done"] .pr-main { flex: 1 1 0; height: 0; min-height: 0; }
}
@keyframes lens-in-r { from { transform: translateX(30%); opacity: .35; } }
@keyframes lens-in-l { from { transform: translateX(-30%); opacity: .35; } }
@media (max-width:1000px) and (orientation:landscape) {
  html.phone-landscape .bg::after { background: linear-gradient(180deg, rgba(7,4,13,.15), rgba(7,4,13,.25)); }
  html.phone-landscape .phone-panel .radio { background: transparent; }
}

/* Radio screen and tuning knob, portrait picture on phones (David, 26 Oct, round 3): the live LCD (radio-keys.js) ran
   0.8% of the picture's width past the printed display onto the tuning knob's outer rim (which starts at 77.8%). It now
   ends at 76.2%, mirroring its inset from the display frame on the left, so the knob is fully clear. */
html.phone-panels #radio[data-keys="portrait"] .lcd { width: 52% !important; }

/* Glove box open, phones (David, 27 Oct, round 4): MY TRACKS is a solid panel over the whole glove box (8px in from its
   edges), so the picture never shows through behind the text, and everything is laid out at fixed phone sizes (12px
   floor, 44px buttons) with no inner scrolling at 390x844 or 844x390. layoutGlove (night-shift-v3.js) leaves the panel's
   position to this CSS on phones. CLOSE sits in the panel's header row, left of the glove box's zoom button (top right).
   Landscape: two columns, MY TRACKS, the tabs and CLOSE on the left, the list on the right in two columns. */
html.phone-panels .gbox.open .trk { inset: 6px; max-height: none; z-index: 2; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 6px 10px 8px; overflow: hidden; container-type: normal; background: #0b0910; border: 1px solid #3a2f44; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.6); font: 600 13px/1.35 "Chakra Petch", sans-serif; letter-spacing: .04em; }
html.phone-panels .gbox.open .gx { z-index: 3; top: 13px; right: 60px; bottom: auto; left: auto; background: #1b1622; border-color: #5a4a62; font-size: 12px; }
html.phone-panels .trk h3 { flex: none; display: flex; align-items: center; min-height: 44px; margin: 0; padding-right: 160px; font: 700 14px/1.2 "Chakra Petch", sans-serif; letter-spacing: .18em; }
html.phone-panels .trk-tabs { flex: none; gap: 6px; margin: 0; }
html.phone-panels .trk-tabs button { padding: 3px 6px; font-size: 18px; line-height: 1; border-width: 1px; border-radius: 6px; }
html.phone-panels .trk-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
html.phone-panels .trk-note { margin: 0 0 6px; font-size: 18px; line-height: 1.2; }
html.phone-panels .trk-note b { font-size: 17px; line-height: 1; }
html.phone-panels .trk .btns { gap: 6px; }
html.phone-panels .trk .btns button { padding: 0 10px; font-size: 12px; border-radius: 6px; }
html.phone-panels .trk .sl-h { margin: 0 0 4px; font-size: 12px; line-height: 1.2; letter-spacing: .1em; }
html.phone-panels .trk .sl-row { gap: 8px; padding: 0; border-bottom: 0; box-shadow: inset 0 -1px 0 #3a4682; }
html.phone-panels .trk .sl-n { min-width: 14px; font-size: 18px; }
html.phone-panels .trk .sl-t { font-size: 19px; }
html.phone-panels .trk .sl-buy { padding: 0 10px; font-size: 12px; border-radius: 6px; }
html.phone-panels .trk .sl-none { margin: 6px 0; font-size: 20px; }
html.phone-panels .trk .sl-note { margin-top: 2px; font-size: 16px; line-height: 1.1; }
@media (max-width:1000px) and (orientation:landscape) {
  html.phone-landscape .gbox.open .trk { display: grid; grid-template-columns: 172px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 16px; row-gap: 8px; }
  html.phone-landscape .trk h3 { grid-area: 1 / 1; padding-right: 0; }
  html.phone-landscape .trk-tabs { grid-area: 2 / 1; flex-direction: column; }
  html.phone-landscape .trk-tabs button { flex: none; }
  /* the list starts level with MY TRACKS and stays left of the zoom button in the top-right corner */
  html.phone-landscape .trk-body { grid-area: 1 / 2 / 4 / 3; padding-right: 40px; }
  html.phone-landscape .gbox.open .gx { top: auto; right: auto; left: 17px; bottom: 15px; width: 172px; }
  html.phone-landscape .trk .sl-list { columns: 2; column-gap: 18px; }
  html.phone-landscape .trk .sl-row { break-inside: avoid; }
}
/* Glove box fill, phones (David, 27 Oct): the contents fill the MY TRACKS panel down to its bottom edge instead of
   stopping part-way with empty panel below (worst in the zoomed glove box, where the panel is the whole screen). The
   set list takes the panel's full height: its rows scroll inside it and the price / basket line (VIEW BASKET & PAY)
   sits at the bottom of the panel. (Round 5: the previews and saved full tracks are tape cards, night-shift-v3.css.)
   If the panel is ever too short for even two rows plus the footer, the whole list scrolls instead of clipping. */
html.phone-panels .gbox.open .trk-body { display: flex; flex-direction: column; overscroll-behavior-y: contain; }
html.phone-panels .trk-body > * { flex: none; }
html.phone-panels .trk-body > .sl { flex: 1 1 0; display: flex; flex-direction: column; }
html.phone-panels .trk .sl-list { flex: 1 1 0; min-height: 88px; overflow-y: auto; overscroll-behavior-y: contain; }
html.phone-panels .trk .sl-note { flex: none; margin-top: auto; padding-top: 6px; border-top: 1px solid #3a4682; }
@media (max-width:1000px) and (orientation:landscape) {
  /* the two-column list keeps its own height (a height-capped multi-column list would spill sideways); the price /
     basket line still sits at the bottom of the right-hand column */
  html.phone-landscape .trk .sl-list { flex: none; min-height: 0; overflow: visible; }
}

/* Glove box picture: the printed tape labels are painted over for every layout, desktop included (night-shift-v3.css). */

/* The request-line player and My tracks on phones: tracks.css (tracks-r18). */