/* ============================================================ mobile-decks.css — phone layout fixes for six slot designs: Vinyl, Analog, Terminal, Patchbay, Open Field, Player. TO ACTIVATE: add this to index.html immediately after the designs.css line (cascade order is intentional): HOW IT WORKS ───────────────────────────────────────────────────────────── • @container (max-width: 640px) throughout — NOT @media — because .stage has container-type: inline-size and is often narrower than the viewport (editor preview pane, phone frame in the gallery). Viewport media queries would fire too late or not at all in those contexts. • "Page" named-container queries in tpl-*.css use @container page (…). Unnamed @container (…) matches the same .stage element (it has both container-type and container-name: page). Rules in this file load after designs.css so they win at equal specificity. • Colours: tokens only — --bg / --ink / --accent / --surface. Never hardcoded hex. • data-slot, data-slot-path, data-derived attributes are not touched. No new visible text is introduced. • One unconditional section (§0) for an outright layout bug (Patchbay zero-size image). Everything else is inside the 640px container query. ============================================================ */ /* ═══════════════════════════════════════════════════════════════ §0. PATCHBAY — zero-size image (UNCONDITIONAL outright bug fix) ROOT CAUSE: patchbay.js renders two cover-art figures inside the console section:
← arts[0] — first gallery image
← arts[1] — second gallery image No existing stylesheet defines ANY CSS for .p-art or .p-art img. There is no tpl-patchbay.css; designs.css only styles .p-zone, .p-queue, .p-foot and the shared dz-* bands. The inside .p-art gets only the global ".pg img { max-width: 100%; display: block; }" from templates.css. That is enough when the src is a real URL. But: arts[1] = s.gallery[1]. When the gallery has exactly one image whose caption is non-empty (console renders because queue.length > 0) but s.gallery[1] is absent or has an empty src, the browser produces which it renders at 0 × 0 — the element exists in the DOM but occupies no area. FIX: giving .p-art img an explicit width + aspect-ratio means the element always occupies space regardless of src state. The background: var(--surface) provides a visible placeholder when the image fails to load, matching the rest of the design's surface colour. Applied unconditionally (not inside a container query) because a 0-size rendered image is wrong at every viewport width. ══════════════════════════════════════════════════════════════ */ .pg-patch .p-art { display: block; /* Ensure the figure participates in block layout. Without this, a flex or grid ancestor could give it a zero-size track if the layout were ever added later. */ } .pg-patch .p-art img { width: 100%; aspect-ratio: 1; /* square sleeve — record cover proportion */ object-fit: cover; display: block; background: var(--surface); /* visible placeholder when src is empty/broken */ } /* ═══════════════════════════════════════════════════════════════ EVERYTHING BELOW IS INSIDE @container (max-width: 640px) ══════════════════════════════════════════════════════════════ */ @container (max-width: 640px) { /* ───────────────────────────────────────────────────────────── §1. SHARED — tap targets and sub-11px text common to all six WHY SHARED: templates.css sets three text sizes that appear in every design's track rows and social links. Fixing once at .pg level avoids duplication across all six design sections. TAP TARGET RULE: .dz-links .dz-link has padding-bottom: 1px, giving a tappable height of roughly 18–20px. WCAG 2.5.8 recommends 24px minimum; good practice is 40px. Adding padding-block: 10px brings the touch area to ≥ 40px for normal body text without shifting the visual baseline. ────────────────────────────────────────────────────────────── */ /* Track number: templates.css sets .pg .tr-num to 9px */ .pg .tr-num { font-size: 11px; } /* Track play/link chips: templates.css sets these to 8–9px */ .pg .tr-links a, .pg .tr-links .tr-play { font-size: 11px; } /* Social links: templates.css .pg .soc is 10px */ .pg .soc { font-size: 11px; } /* Contact band links — enlarge tap target to ≥ 40px */ .dz-links .dz-link { padding-block: 10px; display: inline-flex; align-items: center; min-height: 40px; } /* ───────────────────────────────────────────────────────────── §2. VINYL PROBLEM 1 — STRUCTURAL (worst issue): tpl-vinyl.css @container page (max-width: 620px) sets: .pg-vinyl .v-works { grid-template-columns: 1fr; max-width: 430px; margin: 0 auto; } This stacks all 12 sleeves in a single column at ~360 × 360px each → page height ≈ 8,200px. A crate of records must read as a crate — at least 2 across. FIX: override to 2 columns. At 390px with 18px side padding, each sleeve is ≈ (354px − 20px gap) / 2 = 167px. That is a compact but readable record wall — clearly a crate, not a monolithic stack. PROBLEM 2 — TEXT (65 elements below 11px): The Vinyl design uses Space Mono micro-labels throughout: catalogue numbers, runout groove text, hype sticker labels, disc label spans, kickers, ticker text, colophon, etc. Most are aria-hidden decorative elements, but "nothing under 11px" is a hard requirement. Clamp values resolve below 11px at 390px because the cqw portion shrinks faster than the rem minimum, and the rem minimums themselves are below 11px. PROBLEM 3 — SHELF OVERFLOW: .v-shelf-row already has overflow-x: auto so it scrolls internally rather than widening the page. Adding overflow-y: hidden prevents any edge-case reflow caused by the scrollbar's presence. The pg-vinyl root has overflow-x: hidden as a final safety net, which we preserve. ────────────────────────────────────────────────────────────── */ /* VINYL §2a — 2-column crate: overrides tpl-vinyl.css 1-column collapse */ .pg-vinyl .v-works { grid-template-columns: repeat(2, 1fr); max-width: none; /* undo tpl-vinyl.css max-width: 430px */ margin: 0; /* undo tpl-vinyl.css margin: 0 auto */ } /* VINYL §2b — shelf row clips internally, never pushes page wide */ .pg-vinyl .v-shelf-row { overflow-y: hidden; /* overflow-x: auto is already set in tpl-vinyl.css; confirmed here */ max-width: 100%; } /* VINYL §2c — catalogue numbers on sleeve face and disc label (9.5px) */ .pg-vinyl .v-cat { font-size: 11px; } .pg-vinyl .v-disc-label span { font-size: 11px; } /* VINYL — runout groove text (8.5px base, 7.5px at ≤420px in tpl-vinyl) */ .pg-vinyl .v-runout { font-size: 11px; } /* VINYL — eyebrow kicker above hero sleeve (10.5px) */ .pg-vinyl .v-kicker { font-size: 11px; } /* VINYL — hype sticker label (clamp 8–10px) */ .pg-vinyl .v-hype-lab { font-size: 11px; } /* VINYL — stats strip label (10px) */ .pg-vinyl .v-stat-lab { font-size: 11px; } /* VINYL — typographic sleeve sub-label (9.5px) */ .pg-vinyl .v-tsub { font-size: 11px; } /* VINYL — divider card mono text "…and N more in the stacks" (9.5px) */ .pg-vinyl .v-div-mono { font-size: 11px; } /* VINYL — deck ticker strip along the top edge (9px) */ .pg-vinyl .v-ticker { font-size: 11px; } /* VINYL — liner list items (11px exactly, add 1px safety margin) */ .pg-vinyl .v-llist li { font-size: 11px; } /* VINYL — barcode caption at foot of sleeve back (9px) */ .pg-vinyl .v-barcode small { font-size: 11px; } /* VINYL — footer colophon (9.5px) */ .pg-vinyl .colophon { font-size: 11px; } /* VINYL — track number inside the deck spinning section (10px); §1 sets .pg .tr-num → 11px but the vinyl-specific font shorthand has higher specificity from tpl-vinyl.css, so override explicitly */ .pg-vinyl .tr-num { font-size: 11px; } /* VINYL — crate-side caption "Catalogue nº …" (10.5px Space Mono) */ .pg-vinyl .v-crate-side { font-size: 11px; } /* VINYL — shelf "more" tile label (11px — already at limit, explicit) */ .pg-vinyl .v-shelf-more { font-size: 11px; } /* ───────────────────────────────────────────────────────────── §3. OPEN FIELD PROBLEM 1 — STRUCTURAL: designs.css sets two multi-column rules with no mobile breakpoint: .pg-openfield .of-bio-col .dz-prose { columns: 2 22ch; } .pg-openfield .of-heads-col { columns: 2 16ch; } At 390px these produce ≈ 160px newspaper columns — completely unreadable on a phone. The existing tpl-openfield.css fix (column-count: 1 at 620px) targets .of-bio (old template class) not .dz-prose or .of-heads-col (slot classes). PROBLEM 2 — TEXT (35 elements below 11px): The broadsheet design uses genuine newspaper micro-type: datelines, cutlines, classified headers, kickers, index numbers. These sit at 0.4375–0.625rem (7–10px). On a phone all must reach 11px minimum. NOTE on .of-stat-lbl: designs.css sets it to .64em. Inside .of-ticker (which inherits 9px from .of-mast-topbar), .64em resolves to 5.76px — the most critical sub-11 item in the whole codebase across all six designs. Fixed below. ────────────────────────────────────────────────────────────── */ /* OPEN FIELD §3a — collapse multi-column bio text to single column */ .pg-openfield .of-bio-col .dz-prose { columns: 1; /* ::first-letter drop cap still works in single-column layout */ } /* OPEN FIELD §3b — collapse multi-column headline stack to single column */ .pg-openfield .of-heads-col { columns: 1; } /* OPEN FIELD — slot band section header (clamp .66rem = 10.56px) */ .pg-openfield .dz-h { font-size: 11px; } /* OPEN FIELD — masthead topbar (0.5625rem = 9px base for all topbar text) */ .pg-openfield .of-mast-topbar { font-size: 11px; } /* OPEN FIELD — dateline strip (0.625rem = 10px) */ .pg-openfield .of-dateline { font-size: 11px; } /* OPEN FIELD — cutlines under photos (0.5rem = 8px) */ .pg-openfield .of-cutline { font-size: 11px; } /* OPEN FIELD — bio kicker (0.5rem = 8px, old template class) */ .pg-openfield .of-bio-kicker { font-size: 11px; } /* OPEN FIELD — headlines label (0.5rem = 8px) */ .pg-openfield .of-heads-label { font-size: 11px; } /* OPEN FIELD — headline number (0.5rem = 8px) */ .pg-openfield .of-hl-num { font-size: 11px; } /* OPEN FIELD — stats ticker label (5.76px — most critical in all six designs) */ .pg-openfield .of-stat-lbl { font-size: 11px; } /* OPEN FIELD — insets section label (0.5rem = 8px) */ .pg-openfield .of-insets-label { font-size: 11px; } /* OPEN FIELD — photo captions in inset row (0.4375rem = 7px) */ .pg-openfield .of-inset figcaption { font-size: 11px; } /* OPEN FIELD — "+N more" under insets (0.5rem = 8px) */ .pg-openfield .of-insets-more { font-size: 11px; } /* OPEN FIELD — full index head (0.5rem = 8px) */ .pg-openfield .of-idx-head { font-size: 11px; } /* OPEN FIELD — index item numbers (0.5rem = 8px) */ .pg-openfield .of-idx-num { font-size: 11px; } /* OPEN FIELD — classifieds banner (0.5625rem = 9px) */ .pg-openfield .of-clas-banner { font-size: 11px; } /* OPEN FIELD — classified section head (0.4375rem = 7px) */ .pg-openfield .of-clas-head { font-size: 11px; } /* OPEN FIELD — classified territory number (0.4375rem = 7px) */ .pg-openfield .of-clas-num { font-size: 11px; } /* OPEN FIELD — "+N more" in classified block (0.4375rem = 7px) */ .pg-openfield .of-clas-more { font-size: 11px; } /* OPEN FIELD — showreel section kicker (0.5rem = 8px) */ .pg-openfield .of-reel-kicker { font-size: 11px; } /* OPEN FIELD — footer social links inside inverted contact slab (9px) */ .pg-openfield .of-contact .soc { font-size: 11px; } /* OPEN FIELD — colophon at bottom of inverted contact footer (0.4375rem = 7px) */ .pg-openfield .colophon { font-size: 11px; } /* ───────────────────────────────────────────────────────────── §4. PATCHBAY (mobile-specific additions) The zero-size image fix is in §0 (unconditional, any width). The console's .p-deck has no layout CSS in any stylesheet, so images there stacked as full-width block elements — that is the fallback and it works at 390px with the §0 fix applied. PROBLEM — TEXT (49 elements below 11px): • .dz-h: clamp(.68rem, 1.1cqw, .8rem) → at 390px: 1.1cqw = 4.29px, clamped at .68rem = 10.88px. Below 11px. • .dz-shot figcaption: designs.css sets "font: 500 .68em/1.45 'DM Mono'". The .68em is relative to the inherited root (16px), giving 10.88px. Below 11px. • Shared track meta (tr-num, tr-links) covered by §1. The .dz-grid giving 3 columns of ~115px squares at 390px is acceptable — no structural change needed per the brief. ────────────────────────────────────────────────────────────── */ /* PATCHBAY — slot band section header (clamp resolves to .68rem = 10.88px) */ .pg-patch .dz-h { font-size: 11px; } /* PATCHBAY — gallery photo captions (.68em relative to 16px = 10.88px) */ .pg-patch .dz-shot figcaption { font-size: 11px; } /* ───────────────────────────────────────────────────────────── §5. ANALOG PROBLEM — TEXT (36 elements below 11px): • .al-label (.68rem = 10.88px) — tape reel labels, section labels throughout the design • .al-top-reel (.68rem = 10.88px) — "REEL Nº 01" in top bar • .al-cell span (.6rem = 9.6px) — spec strip sublabels in the tapebox (the most critical sub-11 item in this design) • .al-cue-foot (.68rem = 10.88px) — footer note under cue sheet • .al-photo figcaption (.62rem = 9.92px) — session photo labels • .colophon (.64rem = 10.24px) — bottom credits note • .dz-h override: clamp(.68rem…) = 10.88px The hero grid stacks photo + tapebox vertically at ≤ 880px via the existing tpl-analog.css breakpoint. The session photograph orders first (order: -1) so it appears above the tapebox on phone — correct reading order. No structural fix needed. .al-frames-row gives 2 columns ≈ 175 × 131px at 390px. Acceptable per brief. ────────────────────────────────────────────────────────────── */ /* ANALOG — slot band section header (clamp to .68rem = 10.88px) */ .pg-analog .dz-h { font-size: 11px; } /* ANALOG — tape-reel label text throughout (.68rem = 10.88px) */ .pg-analog .al-label { font-size: 11px; } /* ANALOG — top-bar reel counter (.68rem = 10.88px) */ .pg-analog .al-top-reel { font-size: 11px; } /* ANALOG — spec strip sub-labels in tapebox (.6rem = 9.6px — most critical) */ .pg-analog .al-cell span { font-size: 11px; } /* ANALOG — cue sheet footer note (.68rem = 10.88px) */ .pg-analog .al-cue-foot { font-size: 11px; } /* ANALOG — session photo captions (.62rem = 9.92px) */ .pg-analog .al-photo figcaption { font-size: 11px; } /* ANALOG — footer colophon (.64rem = 10.24px) */ .pg-analog .colophon { font-size: 11px; } /* ───────────────────────────────────────────────────────────── §6. TERMINAL PROBLEM — TEXT (16 elements below 11px): • .tm-path (10px) — session path line "~/projects/…" • .tm-stat span (9px) — stat labels below the accent numbers • .tm-num (9px) — tree-list line numbers in the productions • .tm-more (10px) — "+N more" continuation line • .tm-frame figcaption (8px) — gallery image captions Other terminal text is at or above 11px: • .tm-prompt, .tm-contact: 12px ✓ • .tm-session-label: 11px ✓ • .tm-out-head: 11px ✓ • .tm-line (tree rows): 12px ✓ • .tm-col-head: 11px ✓ • .pg-terminal .dz-h: clamp(.72rem, 1.1cqw, .84rem) = 11.52px ✓ MONOSPACE LINE-LENGTH: .tm-output p has max-width: 72ch and uses Space Mono at clamp(.82rem,…) ≈ 13px. At 390px, ~13ch spacing per char → ~27 chars per line. Well within 72ch limit. No horizontal overflow from body text. EXISTING RESPONSIVE RULES (tpl-terminal.css) already handle: • ≤620px: .tm-img-grid → 3 columns (acceptable) • ≤390px: .tm-img-grid → 2 columns; .tm-stat-row → stacked No structural changes needed. ────────────────────────────────────────────────────────────── */ /* TERMINAL — session path line under the prompt (10px) */ .pg-terminal .tm-path { font-size: 11px; } /* TERMINAL — stat bar sub-labels below the accent numbers (9px) */ .pg-terminal .tm-stat span { font-size: 11px; } /* TERMINAL — productions tree line numbers, left column (9px) */ .pg-terminal .tm-num { font-size: 11px; } /* TERMINAL — "+N more" continuation line after tree list (10px) */ .pg-terminal .tm-more { font-size: 11px; } /* TERMINAL — gallery image captions (8px — most critical in this design) */ .pg-terminal .tm-frame figcaption { font-size: 11px; } /* ───────────────────────────────────────────────────────────── §7. PLAYER Least structurally broken of the six. No layout collapse is needed. The lead media (embed or still image) is already full-width. The .dz-grid auto-fill gives 2 columns ≈ 168px at 390px, which is acceptable. The 16 elements below 11px reported for Player are all in the shared track row (tr-num at 9px, tr-links at 8px) and social links (soc at 10px). All are covered by §1 above. Player-specific text sizes: • .pl-eyebrow: .72rem = 11.52px ✓ • .pl-sub: clamp(.9rem,…) = 14.4px ✓ • .pl-lead--still figcaption: .74rem = 11.84px ✓ • .dz-h: clamp(.72rem, 1.6cqw, .82rem) = 11.52px ✓ • .dz-closing: .72rem = 11.52px ✓ • .dz-shot figcaption: .7rem = 11.2px ✓ No player-specific rules needed beyond §1. ────────────────────────────────────────────────────────────── */ /* Player has no design-specific text below 11px. All sub-11px items fixed by §1 (shared track and social text). */ } /* end @container (max-width: 640px) */