/* ═══════════════════════════════════════════════════════════════════════════
   showcase-mobile.css — phone/tablet corrections for the 16 showcase pages.

   Linked LAST, immediately after ../site-mobile.css, on every showcase page.

   WHY THIS FILE EXISTS, and how it differs from ../site-mobile.css:

     ../site-mobile.css is the SITE-WIDE foundation (all 23 pages, ui/ included).
     It stops at 860px, and every rule in it is !important.

     This file is showcase-only and does two things that file cannot:

       1. It covers the 861-1024px band — iPad LANDSCAPE. The shared sheet's
          label floor and tap-target expansion do not reach that width, so a
          tablet held sideways still rendered 8.5-10px uppercase-mono labels and
          30-34px tabs. Every selector below is declared in the showcase pages'
          own inline <style>, so raising it here is this family's own business.
          Nothing is !important, so at <=860px the shared sheet still wins and
          the two can never fight. If the shared sheet's breakpoint is ever
          raised to 1024, this block simply stops mattering.

       2. It carries the layout corrections specific to these pages — the hero,
          the scrub port, the cascade gates, the tracklet plot, the object-page
          figure rows — which have no place in a site-wide sheet.

   Design language is unchanged: same tokens, same uppercase-mono label idiom,
   same amber/cyan accents, correct in both the night and plate themes. Nothing
   here alters copy, figures or the honesty panels; the .truth / .disc /
   #disclosure / #orientation blocks are only ever made MORE legible — never
   collapsed, truncated or hidden.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═════════════════ 1 · LABEL FLOOR, 861-1024px (iPad landscape) ═══════════ */
/* Deliberately NOT scoped with a min-width: a plain max-width query means these
   values also apply on a phone, where the shared sheet's !important floor
   simply overrides them. One rule, no second breakpoint seam to keep in sync. */
@media (max-width:1024px){

  /* Page-body labels — the uppercase-mono idiom used for every eyebrow, key,
     badge, caption and stat label across the family. */
  .tag, .num, .skip, .bdg, .badge,
  .ahero-meta dt, .hero-stats dt, .readout dt, .spec dt, .kv dt,
  .step .kv dt, .step .k b, .sitestat dt,
  .ntl-kv dt, .ntl-m, .ntl-tag, .ntl-htag span, .ntl-legend span,
  .ntl-footline span, .who, .cols .col h3 b, .seqnav-side b,
  .tgroup-lbl, .rmeta, .rcard .rn, .gate .gid, .gate .gn small,
  .srow .scoord, .srow .sv, .stream-h b, .stream-h span, .legend,
  .cta-alt, .disc-links a, .port-lbl, .port-foot, .pre-meta, .pre-log,
  .cue span,
  .shead .num, .dcard .who, .rcard .rmeta, .ocard .rmeta,
  .foot-grid h5, .foot-bot span, #footClock,
  .fg-card .tag, #fgCopy, #fgClose, #fgAnyway{
    font-size:11.5px;
    letter-spacing:.1em;
  }
  /* Footer headings carry the widest tracking on the site (.24em); at the
     larger size that alone pushes a two-word heading onto two lines. */
  .foot-grid h5{ letter-spacing:.14em; }

  /* Header chrome. The tab labels grow, so tracking and padding come in to
     match — seven tabs still have to clear .ctrl at 1024px. */
  .brand-txt{ font-size:13px; letter-spacing:.2em; }
  .brand-txt small{ font-size:11px; letter-spacing:.1em; }
  .nav-links a, .tab-group>summary{
    font-size:11px; letter-spacing:.12em; padding:7px 8px;
  }
  .tab-menu a{ letter-spacing:.1em; }

  /* ── tap targets in the same band ──────────────────────────────────────
     The shared sheet grows these below 860px; above it a tab draws 30px and a
     dropdown row 34px, both under the 44px a finger needs. Grown for real
     rather than with an invisible overlay: stacked nav rows would otherwise
     overlap each other's hit areas. */
  .nav-links a, .tab-group>summary{
    min-height:44px; display:inline-flex; align-items:center;
  }
  .tab-menu a{ min-height:44px; display:flex; align-items:center; }
  .btn-i{ width:40px; height:40px; min-width:40px; }
  .brand{ position:relative; min-height:40px; }
  .brand::after{
    content:""; position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%);
    width:max(100%,44px); height:max(100%,44px); background:transparent;
  }
  .foot-grid li{ margin-bottom:12px; }
  .foot-grid li a{ display:inline-block; padding-block:5px; }

  /* The file:// guard is the one dialog a reader may meet before anything
     else on the page; its controls were 9.5-10px labels in ~30px boxes. */
  #fgCopy, #fgClose, #fgAnyway{
    min-height:44px; display:inline-flex; align-items:center;
    justify-content:center;
  }
}


/* ═════════════════ 2 · READING RHYTHM ON A PHONE ═════════════════════════ */
@media (max-width:700px){
  /* Section padding is clamped against vh, which on a tall phone yields most
     of a screen of empty space between sections. Tighten it so the reader
     meets the next idea sooner without losing the sectional beat. */
  .pad{ padding-block:clamp(52px,7.5vh,92px); }
}


/* ═════════════════ 3 · OBJECT-PAGE STAMP FIGURES ═════════════════════════ */
/* The three stamp panels are authored auto-fit at minmax(296px,1fr) and so
   already stack at 390px — but the caption row is a baseline flex whose two
   labels were squeezed together. Let it wrap, and tighten the row gap so the
   three panels still read as one figure rather than three loose cards. */
@media (max-width:700px){
  .figs{ grid-template-columns:1fr; gap:16px; }
  .fig-h{ flex-wrap:wrap; row-gap:4px; }
}


/* ═════════════════ 4 · index.html — HERO ═════════════════════════════════ */
/* The display face is clamped at a 52px minimum sized for a desktop viewport:
   at 390px "NOCTIS OBJECT" needs ~372px of advance width inside a 358px
   column, so .ln's reveal mask (overflow:hidden) silently cut the line to
   "NOCTIS O". Below 860px the size is driven by the viewport instead, with the
   minimum only low enough to hold the longest line on the narrowest phone.
   The wording is untouched. */
@media (max-width:860px){
  .hero-h{ font-size:clamp(30px,8.6vw,72px); letter-spacing:-.035em; }
  /* .ln is the reveal MASK (overflow:hidden). Its children are inline-block,
     so each character contributes its full ~1.28em glyph box regardless of the
     tightened line-height -- measured 43px of content inside a 33px mask, which
     cropped the bottom of every letter. Give the mask the height the glyph
     boxes actually need; the display face stays tight because line-height is
     what sets the visual rhythm, and padding only grows the mask. */
  .hero-h .ln{ line-height:.95; padding-bottom:.30em; }

  /* A full 100svh of starfield before the first word is a screen the reader
     has to pay for. Keep the hero tall enough to read as an opening frame,
     not tall enough to be a gate. */
  .hero{
    min-height:auto;
    padding-top:calc(var(--nav-h,67px) + 20vh);
    padding-bottom:clamp(30px,6vh,56px);
  }

  /* Three stat columns at 390px give each ~105px, so every label wraps to two
     lines and the values fall off each other's baseline. One per row, label
     and value on one line, reads as a table and stays aligned. */
  .hero-stats{ grid-template-columns:1fr; gap:0; }
  .hero-stats>div{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:14px; padding:9px 0; border-bottom:1px solid var(--line-2);
  }
  .hero-stats>div:last-child{ border-bottom:0; }
  .hero-stats dt{ margin-bottom:0; min-height:0; }
  .hero-stats dd{ font-size:clamp(20px,5.6vw,26px); }
}


/* ═════════════════ 5 · index.html — SCRUB PORT ═══════════════════════════ */
/* .port-lbl and .port-foot are absolutely positioned OUTSIDE the frame, so
   they occupy no layout space. On one column they wrap to two or three lines
   and print straight over the step copy underneath. Reserve the room. */
@media (max-width:960px){
  .port-lbl, .port-foot{ flex-wrap:wrap; row-gap:2px; line-height:1.5; }
  .port-foot{ justify-content:flex-start; column-gap:16px; }
  .port-src{ margin-right:0; flex:1 1 100%; }
  .port{ margin-top:46px; margin-bottom:56px; }
  .scrub-inner{ gap:16px; }
}
/* The reticle labels live in a 400x300 viewBox stretched to the frame, so at
   390px a 7px label renders at ~5.7px. Sized up to land near 11px without
   letting the longest label ("CAND · P 0.98 · SHORT") reach the frame edge,
   where the port's overflow:hidden would clip it. */
@media (max-width:1024px){
  .ret text{ font-size:13px; }
  /* 701-1024px the chart already draws at >=1:1, so the labels only need the
     same 11.5px floor the rest of the page uses. */
  .plot-lbl{ font-size:11.5px; }
}


/* ═════════════════ 6 · index.html — CASCADE GATES ════════════════════════ */
/* auto | 1fr | auto at 390px leaves the count column ~90px, so its caption
   ("short-streak candidates") printed across the gate's own description.
   Two rows instead: identifier + title + prose, then the count on its own
   line, which also gives the number somewhere to be emphatic. */
@media (max-width:640px){
  .gate{ grid-template-columns:auto 1fr; gap:6px 14px; }
  .gate .gn{
    grid-column:1 / -1; text-align:left; white-space:normal;
    display:flex; align-items:baseline; gap:10px;
    padding-top:9px; margin-top:3px; border-top:1px solid var(--line-2);
  }
  .gate .gn small{ display:inline; margin-top:0; }
}


/* ═════════════════ 7 · index.html — TRACKLET PLOT ════════════════════════ */
/* A 640x380 chart drawn into a ~330px column scales its 8px axis labels down
   to ~4px — unreadable, and no single font size can fix it while the scale
   factor moves with the viewport. Floor the drawing width instead and let the
   chart scroll inside its own frame: the scale is then pinned at >=0.81, so
   the labels below hold a steady ~11.5px whatever the phone. */
@media (max-width:700px){
  .plot-wrap{ overflow-x:auto; overscroll-behavior-x:contain; }
  #plot{ min-width:520px; }
  .plot-lbl{ font-size:14px; }
  .legend{ position:sticky; left:0; }
}