/* ═══════════════════════════════════════════════════════════════════════
   mobile-floor.css — the last word on phone legibility.

   WHY THIS EXISTS, HONESTLY
   Three agents fixed the per-design phone layouts and did it well, but I had
   told them not to touch designs.css — and designs.css is where a good deal
   of the too-small type actually lived. So the tail that survived their work
   was mostly my own rules, plus a few places where an old stylesheet's
   specificity beat a newer rule. This file is loaded LAST and sets a floor
   under everything, so no design can put unreadable type on a phone no
   matter which stylesheet declared it.

   THE FLOOR: nothing below 11px. Where a size is already comfortable,
   max() leaves it alone — these rules only ever push type UP.

   Everything is inside a container query, so desktop is untouched.
   ══════════════════════════════════════════════════════════════════════ */

@container (max-width: 640px) {

  /* ── the shared bands ────────────────────────────────────────────────
     .dz-h is declared per design in designs.css with clamps that resolve to
     10.2–10.6px at 390px. The class is repeated (.pg.pg.pg) purely to raise
     specificity above per-design rules like `.pg-creditscrawl .cc-card
     .dz-h`, which would otherwise win. Ugly, deliberate, confined here. */
  .pg.pg.pg .dz-h { font-size: max(11px, .72rem); }
  .pg.pg.pg .dz-prose { font-size: max(15px, 1rem); }
  /* Picture captions are CREDITS — the name of the production. designs.css
     sets them `nowrap` with an ellipsis, which on a phone truncated them in
     eight designs: "Britpop: The Music Tha…", "Mary Berry's Simple Co…".
     A caption that cannot be read is not a caption. Let them wrap. */
  .pg.pg.pg .dz-shot figcaption,
  .pg.pg.pg figure > figcaption {
    font-size: max(11px, .7rem);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.35;
  }
  /* the same truncation in Patchbay's production queue */
  .pg.pg.pg .p-track strong {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  /* Terminal types the name with a caret after it; on a phone the fixed
     character width cut the name off mid-way */
  .pg.pg.pg .tm-name {
    white-space: normal;
    overflow: visible;
    max-width: 100%;
  }
  .pg.pg.pg .dz-link { font-size: max(11px, .8rem); }
  .pg.pg.pg .dz-closing { font-size: max(11px, .72rem); }

  /* the stragglers the sweep above does not reach by class */
  .pg.pg.pg .v-shelf-head { font-size: max(11px, .72rem); }
  .pg.pg.pg .aw-archive-note { font-size: max(11px, .72rem); }
  .pg.pg.pg .p-head p,
  .pg.pg.pg .p-copy p,
  .pg.pg.pg .p-colophon { font-size: max(11px, .74rem); }
  .pg.pg.pg .rg-colo,
  .pg.pg.pg .of-colophon,
  .pg.pg.pg .inv-stamp,
  .pg.pg.pg .al-cr,
  .pg.pg.pg .tm-exit,
  .pg.pg.pg .cc-end-title { font-size: max(11px, .74rem); }

  /* Terminal sets its prose in Space Mono at 13px, which is small even for a
     terminal. Mono needs a touch more size than sans for the same legibility,
     not less. */
  .pg-terminal.pg .dz-prose { font-size: max(15px, .95rem); }

  /* ── track rows ──────────────────────────────────────────────────────
     The publisher sits in its own span so that editing it writes only the
     publisher and not the "your recording" badge beside it. That span was
     unclassed and inherited .tr-pub's 8px in EVERY design — 128 of the
     failures were this one element. It has a class now. */
  .pg .tr-pub,
  .pg .tr-pub-name,
  .pg .tr-num,
  .pg .tr-own,
  .pg .tr-links a { font-size: max(11px, .72rem); }

  /* ── per design: where an older stylesheet out-specifies the newer one ── */

  /* Inventory: tpl-inventory.css hardcodes 7px on the holdings block, at a
     specificity designs.css never beat — so the big holdings NUMBER was
     rendering at 7px, smaller than its own label. */
  .pg .inv-holdings .inv-holdings-line { font-size: clamp(1.5rem, 6cqw, 2.2rem); line-height: 1.05; }
  .pg .inv-holdings .inv-holdings-label { font-size: max(11px, .68rem); }
  .pg .inv-name-block .inv-kicker { font-size: max(11px, .72rem); }
  .pg .inv-section-head h2 { font-size: max(11px, .72rem); }
  .pg .inv-specimen figcaption,
  .pg .inv-specimen figcaption span { font-size: max(11px, .68rem); }
  .pg .inv-row .inv-row-num,
  .pg .inv-row .inv-row-ref { font-size: max(11px, .72rem); }

  /* Inventory's ledger: tpl-inventory.css hides .inv-row-num on a phone, and
     a display:none grid item is removed from flow — so every row shifted one
     track left, handing the TITLE the 66px number column and the reference
     code the 224px one. Titles read "Animal…", "Britpo…" while MP-0004 sat in
     comfort. The row is redefined for the two children that actually show,
     and the title wraps instead of truncating: the credit is the content. */
  .pg.pg.pg .inv-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: .4em .8em;
  }
  .pg.pg.pg .inv-row .inv-row-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  /* Analog: the cue-sheet index was .74em of an already small parent */
  .pg .al-cue .al-idx { font-size: max(11px, .72rem); }
  .pg .al-media figcaption,
  .pg .al-frame figcaption { font-size: max(11px, .7rem); }

  /* Patchbay: templates.css sets 8px on the console's stat and art labels */
  .pg .p-stat span,
  .pg .p-art span,
  .pg .p-track span { font-size: max(11px, .72rem); }

  /* Vinyl: the shop-wall note in the top bar */
  .pg .v-bar .v-bar-note { font-size: max(11px, .7rem); }
  .pg .v-crate-head h2 { font-size: max(11px, .78rem); }

  /* Register / Open Field / Archive Wall / Credits Crawl mono furniture */
  .pg .rg-frow .rg-c-nr,
  .pg .rg-frow .rg-c-fol,
  .pg .of-hl .of-hl-num,
  .pg .aw-row .aw-num,
  .pg .cc-reelmark { font-size: max(11px, .72rem); }

  /* Credits Crawl's poster cluster: designs.css sets `grid-auto-flow: column`,
     so a 3-column template still flowed all six posters into six implicit
     tracks — 27px each. The flow direction is the actual bug, not the count. */
  .pg.pg.pg .cc-cluster {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
    justify-content: stretch;
  }

  /* Vinyl's sleeve titles are set at a 24px minimum with `overflow-wrap:
     anywhere`. In a 167px sleeve — which is what a two-across crate gives on
     a phone — that snapped ANTIDISTURBIOS into ANTIDIS / TURBIOS and
     CASUALTY into CASUAL / TY. Smaller type, and only break a word when it
     genuinely cannot fit. */
  .pg.pg.pg .v-st { font-size: clamp(13px, 4.2cqw, 17px); overflow-wrap: break-word; }
  .pg.pg.pg .v-st--md { font-size: clamp(12px, 3.8cqw, 15px); }
  .pg.pg.pg .v-st--sm { font-size: clamp(11px, 3.2cqw, 13px); }
  .pg.pg.pg .v-tt { font-size: clamp(13px, 4.4cqw, 18px); overflow-wrap: break-word; }

  /* ── tap targets ─────────────────────────────────────────────────────
     A link you cannot reliably hit is a link that does not work. */
  .pg .dz-links { gap: .35rem 1rem; }
  .pg .dz-link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   THE TRACK ROW ON A PHONE

   templates.css collapses the row to TWO columns under 560px, but a row has
   FOUR children — number, title, publisher, and the span the audio system
   injects the play button into. With two columns those four wrap onto two
   rows, which is why the play button appeared stranded on its own line
   underneath the title with an empty cell beside it.

   Three columns, explicitly placed: number and title and play button on one
   line, publisher tucked underneath the title where it belongs.
   ══════════════════════════════════════════════════════════════════════ */
@container (max-width: 640px) {
  .pg.pg.pg .track-row {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 1px;
    align-items: center;
    padding: 9px 0;
    min-height: 0;
  }
  .pg.pg.pg .track-row .tr-num { grid-column: 1; grid-row: 1; align-self: center; }
  .pg.pg.pg .track-row strong { grid-column: 2; grid-row: 1; }
  .pg.pg.pg .track-row .tr-pub { grid-column: 2; grid-row: 2; }
  /* the play button spans both lines and sits at the end — a proper tap target */
  .pg.pg.pg .track-row .tr-links {
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-self: end;
    align-self: center;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .pg.pg.pg .tr-links .tr-play { min-width: 40px; min-height: 40px; }
}