TITLE. The NeXT look: a raised tab sitting on a bevelled body, the title centred in the tab, a squarish close widget on the right, and the 1px light/dark bevel pair that reads as moulded plastic. */ html.theme-next #wall-titlebar, html.theme-next #theme-titlebar, html.theme-next #skin-titlebar, html.theme-next #chat-titlebar, html.theme-next #nmtv-titlebar, html.theme-next #readme-titlebar, html.theme-next #stations-titlebar { display: flex; align-items: center; gap: 8px; box-sizing: border-box; /* all six compute the same 30px */ height: 30px; min-height: 30px; padding: 3px 4px 3px 10px; background: linear-gradient(180deg, var(--panel) 0%, var(--panel2) 100%); border: 1px solid var(--border); border-bottom: 0; font: 11px/1.2 var(--font); letter-spacing: 0.04em; cursor: move; /* the whole tab is the drag handle */ } html.theme-next #wall-titlebar > span, html.theme-next #theme-titlebar > span, html.theme-next #skin-titlebar > span, html.theme-next #chat-titlebar > span, html.theme-next #nmtv-titlebar > span, html.theme-next #readme-titlebar > span, html.theme-next #stations-titlebar > span { flex: 1 1 auto; text-align: center; /* NeXT centred the title in the tab */ color: var(--fg); padding: 1px 8px 2px; background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--border); border-top-color: var(--bevel-up); border-left-color: var(--bevel-up); border-bottom-color: var(--border); border-right-color: var(--border); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.06); } html.theme-next #wall-titlebar > button, html.theme-next #theme-titlebar > button, html.theme-next #skin-titlebar > button, html.theme-next #chat-titlebar > button, html.theme-next #nmtv-titlebar > button, html.theme-next #readme-titlebar > button, html.theme-next #stations-titlebar > button { appearance: none; flex: 0 0 auto; width: 18px; height: 18px; padding: 0; margin: 0; font: 12px/16px var(--font); color: var(--fg); background: linear-gradient(135deg, var(--panel2), var(--panel)); border: 1px solid var(--border); border-top-color: var(--bevel-up); border-left-color: var(--bevel-up); cursor: pointer; } html.theme-next #wall-titlebar > button:active, html.theme-next #theme-titlebar > button:active, html.theme-next #skin-titlebar > button:active, html.theme-next #chat-titlebar > button:active, html.theme-next #nmtv-titlebar > button:active, html.theme-next #readme-titlebar > button:active, html.theme-next #stations-titlebar > button:active { border-top-color: var(--border); border-left-color: var(--border); border-bottom-color: var(--bevel-up); border-right-color: var(--bevel-up); } /* the body sits under the tab: pull it up so the tab reads as sitting ON it */ html.theme-next #wall-chooser, html.theme-next #theme-chooser, html.theme-next #skin-chooser, html.theme-next #chat-chooser, html.theme-next #nmtv-chooser, html.theme-next #readme-window { border-top: 0; } /* ===== P0 floors (2026-09-24): phone now-playing strip + full-player sheet From docs/research/mobile-ui-retro-report-2026-09-24.md §6 P0-1/P0-2 — a mini strip docked on the taskbar that expands into a fixed-anatomy full player. Skins may restyle these surfaces (same vars as the chrome); the slot and geometry are ours. Phone-only: html.tb-touch, the same one-gate discipline as pl-touch. --msh is the measured strip height (index.html syncTbh); the fallback keeps geometry sane if the JS measure never runs. */ html { --msh: 0px; } html.tb-touch { --msh: 56px; } #ministrip { display: none; } html.tb-touch #ministrip { display: flex; align-items: center; gap: 6px; position: fixed; left: 0; right: 0; bottom: var(--tbh, 92px); z-index: 18; height: var(--msh, 56px); box-sizing: border-box; /* safe-area (2026-09-26, audit §3c): viewport-fit=cover is on, so in landscape the notch clips the strip's left edge. max() keeps the inset even where env() reports 0 (iOS 26.1 re-opened bug 301994 pins the inset to 0) — the strip already clears --tbh, which carries the bottom inset, so only the horizontal pair is applied here. */ padding: 0 max(6px, env(safe-area-inset-right, 0px)) 0 max(6px, env(safe-area-inset-left, 0px)); background: var(--titlebar); color: var(--titlebar-fg); border-top: var(--bw) var(--bs) var(--border); box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.3); } /* left region: art + title/artist; one tap opens the sheet */ #ms-open { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 4px; background: transparent; border: 0; color: inherit; font: var(--font); text-align: left; cursor: pointer; } #ms-art { width: 40px; height: 40px; flex: 0 0 auto; object-fit: cover; background: var(--panel2); border: var(--bw) var(--bs) var(--border); } #ms-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; } #ms-title { font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ms-artist { font-size: 12px; line-height: 1.2; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ms-play, #ms-next, #ms-viz { flex: 0 0 auto; width: 44px; height: 44px; /* WCAG 2.5.5 / HIG 44px */ background: var(--panel2); color: var(--fg); border: var(--bw) var(--bs) var(--border); border-radius: var(--radius); font-size: 15px; line-height: 1; cursor: pointer; } #ms-prog { position: absolute; left: 0; top: 0; height: 2px; width: 0%; background: var(--accent); } /* the visualizer glyph (2026-09-26): a fourth 44px target in the strip, so it must be IN the selector above, not a rule of its own — added standalone it inherited the 21px default button height and failed the 44px floor (measured: 21px, caught by PHASE=viz). It costs a 44px slot in a 56px bar, so the strip's left region shrinks rather than the bar growing; --msh re-measures either way. */ #ms-viz { color: var(--accent); } /* full-player sheet: expands above strip + taskbar; fixed anatomy */ #npsheet { display: none; } body.np-sheet #npsheet { display: flex; flex-direction: column; align-items: center; position: fixed; left: 0; right: 0; top: 0; bottom: calc(var(--tbh, 92px) + var(--msh, 56px)); z-index: 19; box-sizing: border-box; /* safe-area (2026-09-26, audit §3c): the sheet is edge-to-edge under viewport-fit=cover, so the horizontal insets protect the art and the scrubber. The bottom inset is NOT applied — the sheet already stops at --tbh - --msh, and --tbh carries the taskbar's bottom inset, so adding it here would double-pad. Left inset on the landscape panel instead. */ padding: 0 max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); background: var(--panel); color: var(--fg); border-bottom: var(--bw) var(--bs) var(--border); overscroll-behavior: contain; touch-action: none; -webkit-user-select: none; user-select: none; animation: np-rise 180ms ease-out; } @keyframes np-rise { from { transform: translateY(24px); opacity: 0.35; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { body.np-sheet #npsheet { animation: none; } } .nps-grab { width: 100%; display: flex; justify-content: flex-end; } #nps-close { width: 44px; height: 44px; background: transparent; border: 0; color: var(--fg); font-size: 22px; line-height: 1; cursor: pointer; } /* The art is the only elastic part of the column: it carries flex-shrink with min-height:0 so a short viewport (a landscape phone leaves 390 - 47 - 56 = 287px of sheet) shrinks the art instead of pushing the transport row out of the sheet's own box. Measured 2026-09-26 at 844x390: the column wanted 388px, the box was 287px, and #nps-play landed at y 440 — 50px below the viewport with overflow-y:visible, so no scroll could reach it. See docs/mobile-ux-audit-2026-09-26.md §1. */ #nps-art { width: min(78vw, 46vh, 320px); aspect-ratio: 1; object-fit: cover; flex: 0 1 auto; min-height: 0; /* the sheet's height budget lives here */ margin: 2px 0; background: var(--panel2); border: var(--bw) var(--bs) var(--border); } .nps-meta { width: 100%; text-align: center; margin: 8px 0 0; } #nps-title { font-size: 16px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #nps-artist { font-size: 13px; opacity: 0.85; margin-top: 2px; } .nps-scrub { width: min(92vw, 420px); margin-top: 8px; } #nps-seek { width: 100%; height: 44px; margin: 0; background: transparent; accent-color: var(--accent); } .nps-times { display: flex; justify-content: space-between; font-size: 12px; opacity: 0.85; margin-top: -4px; } .nps-transport { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 8px; } #nps-prev, #nps-next { width: 48px; height: 48px; font-size: 18px; } #nps-play { width: 68px; height: 68px; font-size: 22px; } #nps-prev, #nps-next, #nps-play { background: var(--panel2); color: var(--fg); border: var(--bw) var(--bs) var(--border); border-radius: var(--radius); line-height: 1; cursor: pointer; } /* pressed = sunken bevel, the same trick the classic chrome uses */ #ministrip button:active, #npsheet button:active { border-top-color: var(--bevel-down); border-left-color: var(--bevel-down); border-bottom-color: var(--bevel-up); border-right-color: var(--bevel-up); } /* the sheet's visualizer entry: a full-width row under the transport, so it reads as "a mode of this player" and not as a fifth transport button */ .nps-viz { margin-top: 10px; min-height: 44px; width: 100%; background: var(--panel2); color: var(--accent); border: var(--bw) var(--bs) var(--border); border-radius: var(--radius); font: 12px/1 var(--font); letter-spacing: 1px; cursor: pointer; } /* focus is never invisible on these surfaces (WCAG 2.4.7 / 2.4.11) */ #ministrip button:focus-visible, #npsheet button:focus-visible, #npsheet input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ===== Landscape sheet: a right-side panel, not a bottom sheet ===== docs/mobile-ux-audit-2026-09-26.md §1 + the retro dossier's P1-9 ("landscape sheet -> right-side panel"). A bottom sheet in landscape eats the height that makes landscape worth having: at 844x390 the sheet box is only 390 - 47 - 56 = 287px, and the portrait column wants 388px, so the transport row left the box entirely (measured: #nps-play bottom 440 in a 390px viewport, elementFromPoint at its centre null, no scroll path). Gate: a SHORT viewport, not "coarse pointer" — the sheet is phone-only (html.tb-touch, set by index.html's isPhone()), and a short window can be reached with a mouse too (a desktop window narrowed under 480px wide). 560px keeps every portrait phone in the column layout: the shortest one we support is 320x568, and 375x667 / 390x844 are well clear. Those portrait sheets keep the elastic-art rule above as their safety net. Geometry: a panel pinned to the right edge, full height above the strip. Column 1 is the art (a square sized off BOTH axes so it can never crowd out the controls); column 2 stacks close / title / scrub / transport, with the scrub row as the 1fr so the transport pins to the bottom edge. */ @media (max-height: 560px) { body.np-sheet #npsheet { left: auto; right: 0; top: 0; bottom: calc(var(--tbh, 92px) + var(--msh, 56px)); width: min(72vw, 460px); display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 0 12px 10px; border-bottom: 0; border-left: var(--bw) var(--bs) var(--border); animation-name: np-slide; /* entering from the side it lives on */ } @keyframes np-slide { from { transform: translateX(28px); opacity: 0.35; } to { transform: none; opacity: 1; } } .nps-grab { grid-column: 2; grid-row: 1; width: auto; align-self: start; } #nps-art { grid-column: 1; grid-row: 1 / 5; align-self: center; width: min(30vw, 34vh); height: auto; min-height: 0; margin: 0; } .nps-meta { grid-column: 2; grid-row: 2; text-align: left; margin: 0; align-self: end; } .nps-scrub { grid-column: 2; grid-row: 3; width: 100%; margin-top: 4px; align-self: start; } .nps-transport { grid-column: 2; grid-row: 4; margin-top: 0; align-self: end; flex-wrap: wrap; /* a narrow panel wraps instead of clipping */ gap: 12px 14px; } } /* ===== MILKDROP fullscreen surface (2026-09-26, visualizer.js) ========== Spec: docs/research/mobile-ui-retro-report-2-2026-09-24.md §1.1 + the retro dossier's P0-3/P0-4. Three rules drive everything below: 1. It is a CSS full-viewport surface, not an element-fullscreen one. iOS has no element fullscreen for non-video content, so on an iPhone this IS the mechanism; the fork still calls requestFullscreen() behind document.fullscreenEnabled, which makes it a true fullscreen on Android/iPad. `100dvh` not `100vh` — there is no dvh anywhere else in this codebase and the sheet drifts against a collapsing URL bar without it (audit §3h). The inset pair keeps the notch off the rows. 2. It holds NO canvas. The fork's own visualizer canvas goes into its FULLSCREEN display mode underneath; this layer is chrome over it, so nothing here can desync the renderer from its own React tree. 3. The chrome is transient, never modal. Shown on entry and on tap, auto-hidden after 3s WHILE PLAYING, never auto-hidden while paused (a paused visualizer has no auto-hide affordance problem, but the x is the only exit — hiding it would trap you), and instant — no fade — under prefers-reduced-motion. The 24px corner badge stays as a reveal target and a permanent reminder the mode has an exit. */ html.tb-touch.tb-vis #taskbar, html.tb-touch.tb-vis #ministrip, html.tb-touch.tb-vis #toggles, html.tb-touch.tb-vis #start-menu, html.tb-touch.tb-vis #pl-menu, html.tb-touch.tb-vis #ctx-menu, html.tb-touch.tb-vis #npsheet, html.tb-touch.tb-vis body.np-sheet #npsheet { display: none !important; } #tbvis { display: none; } html.tb-touch.tb-vis #tbvis { display: block; position: fixed; inset: 0; width: 100%; height: 100dvh; z-index: 60; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; color: var(--fg); } /* the two static retro layers: a 1px scanline tile at <=8% and a vignette. pointer-events:none, no rAF-driven overlay — the visualizer is the only thing allowed to animate here. */ #tbvis .tbvis-scan, #tbvis .tbvis-vig { position: absolute; inset: 0; pointer-events: none; } #tbvis .tbvis-scan { background: repeating-linear-gradient(to bottom, rgba(0,0,0,.55) 0 1px, rgba(0,0,0,0) 1px 3px); opacity: .08; } #tbvis .tbvis-vig { background: radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%); } /* the corner badge: the reveal target when the chrome is hidden, and the only permanent sign of the mode. A sunken well rather than a text-shadow, because a shadow blooms into unreadability on a bright visualizer. */ #tbvis::after { content: ""; position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; pointer-events: auto; background: var(--panel); opacity: .7; border-top: var(--bw) var(--bs) var(--border); border-left: var(--bw) var(--bs) var(--border); transition: opacity 200ms ease; } #tbvis.tbvis-hide::after { opacity: 0; } #tbvis.tbvis-hide::after:hover { opacity: 1; } #tbvis .tbvis-row { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: 6px max(10px, env(safe-area-inset-right, 0px)) 6px max(10px, env(safe-area-inset-left, 0px)); background: var(--panel); transition: opacity 220ms ease, transform 220ms ease; } #tbvis .tbvis-top { top: 0; padding-top: max(6px, env(safe-area-inset-top, 0px)); border-bottom: var(--bw) var(--bs) var(--border); } #tbvis .tbvis-bottom { bottom: 0; padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)); border-top: var(--bw) var(--bs) var(--border); flex-wrap: wrap; } #tbvis button { min-width: 44px; min-height: 44px; /* the floor, not a target */ background: var(--panel2); color: var(--fg); border: var(--bw) var(--bs) var(--border); border-radius: var(--radius); font: 14px/1 var(--font); cursor: pointer; } #tbvis button:active { border-top-color: var(--bevel-down); border-left-color: var(--bevel-down); border-bottom-color: var(--bevel-up); border-right-color: var(--bevel-up); } #tbvis button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } #tbvis-exit { font-size: 18px; } #tbvis .tbvis-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } #tbvis-preset { font: 12px/1.2 monospace; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #tbvis-track { font: 13px/1.2 var(--font); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #tbvis .tbvis-badge { font: 10px/1 monospace; letter-spacing: 1px; color: var(--accent-fg); background: var(--accent); padding: 4px 6px; border-radius: var(--radius); } #tbvis .tbvis-gap { flex: 1 1 auto; min-width: 0; } #tbvis .tbvis-big { min-width: 68px; min-height: 68px; font-size: 22px; } /* the transient state: chrome out, badge out, one tap brings it back */ #tbvis.tbvis-hide .tbvis-row { opacity: 0; pointer-events: none; } #tbvis.tbvis-hide .tbvis-top { transform: translateY(-8px); } #tbvis.tbvis-hide .tbvis-bottom { transform: translateY(8px); } #tbvis .tbvis-toast { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 13px/1 monospace; color: var(--accent); background: var(--panel); padding: 8px 12px; border-radius: var(--radius); border: var(--bw) var(--bs) var(--border); opacity: 0; pointer-events: none; transition: opacity 160ms ease; } #tbvis .tbvis-toast.tbvis-toast-on { opacity: 1; } @media (prefers-reduced-motion: reduce) { #tbvis .tbvis-row, #tbvis::after, #tbvis .tbvis-toast { transition: none; } #tbvis.tbvis-hide .tbvis-row { transform: none; } } /* landscape: one bar, not two — the visualizer's height is the whole point of rotating, and a top+bottom pair eats 100px of a 390px screen */ @media (max-height: 560px) { #tbvis .tbvis-top { display: none; } #tbvis .tbvis-bottom { flex-wrap: nowrap; } #tbvis .tbvis-big { min-width: 56px; min-height: 56px; } }