/* ══════════════════════════════════════════════════════════════════════════
   /tiers · THE MOBILE LAYER

   A SIXTH, ADDITIVE stylesheet, and it has to be: src/test/tiersRoute.test.ts
   byte-compares t-base, t-card, t-row, t-fx and t-arrive against the ratified
   handoff under an enumerated transform list, so a single character added to any
   of them fails the suite. This file is the only place mobile rules can live.

   THE DISCIPLINE THAT MAKES THAT SAFE: every rule below is provably inert at
   ≥901px — it is either inside a max-width query, or a max() floor whose
   threshold sits below the value the handoff computes at its design width. So
   desktop is byte-identical in behaviour, and that is checkable rather than
   asserted. A guard in tiersRoute.test.ts pins it: no @media(min-width in here.

   Loaded LAST (template.html, after the inline chrome <style>) so "last sheet
   wins" is uniform against both the frozen t-*.css and the inline .ghead rules.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── chrome tokens ───────────────────────────────────────────────────────────
   Two latent bugs come from the header and the rail changing height at DIFFERENT
   breakpoints: .ghead shrinks at 860 while .rail re-tops at 900, so between 861
   and 900 the rail sat at top:66px under an 86px header. And the sticky matrix
   header was offset 146px at ≤1079 where the real chrome is 153px — 7px short.
   One token block, re-resolved per width, closes both. */
:root{
  --c36-sat:env(safe-area-inset-top,0px);
  --c36-head:86px;                                   /* ghead.css                     */
  --c36-rail:0px;                                    /* fixed at ≥1080 — costs no y   */
  --c36-chrome:calc(var(--c36-head) + var(--c36-rail));
}
@media (max-width:1079px){ :root{ --c36-rail:73px } }
@media (max-width:860px) { :root{ --c36-head:calc(66px + var(--c36-sat)) } }

@media (max-width:1079px){
  html{ scroll-padding-top:calc(var(--c36-chrome) + 8px) }
  .row{ scroll-margin-top:calc(var(--c36-chrome) + 8px) }
  .rail{ top:var(--c36-head) }                       /* closes the 861-900 band       */
  .mxt thead th{ top:calc(var(--c36-chrome) + 4px) } /* closes the 7px tablet tuck    */
  /* The pill is anchored at 162px on the belief that the rail docks under the
     header — but the rail comes AFTER the hero in DOM order and only reaches the
     header once you scroll. At 375px the h1 occupies 137-212px and the pill has
     z-index 21 and a background, so it painted over the headline. */
  /* NOT .lang-top — see the bounded query below. This block is ≤1079, but the shared
     chrome sheet (club36/chrome-mobile.css:38-65) already puts the pill IN the header
     at ≤820 and at ≤1024 with a coarse pointer, and it loads FIRST (tiers template
     line 54 vs 55). A blanket rule here at equal specificity silently un-did it on
     every phone — which is exactly what happened: the pill measured y=78 on the live
     page instead of the y=21 that sheet intends. */
  .rchip{ min-height:38px }
}

/* ── the comparison matrix ───────────────────────────────────────────────────
   THE BREAK: .mx{overflow-x:auto} makes .mx a scroll container on BOTH axes
   (overflow-y:visible is coerced to auto when the other axis is not visible), so
   .mxt thead th{position:sticky} resolves against .mx — which has no height cap,
   so its scrollTop is permanently 0 and the header can never engage. The member
   panned a 760px grid of 15px ticks with NO tier labels visible, at 2.12x on a
   375px screen and 2.80x at 320.

   THE FIX is not to patch sticky — it is to delete the scroll container that
   broke it. table-layout:fixed lets 8 columns share the real width, sticky
   resolves against the viewport again exactly as on desktop, and the horizontal
   pan disappears entirely. At 375px: label 156px, tier columns 26.1px, cell box
   20.1px — and the tick is 15px, inline-styled in the generator, so it fits. */
/* ── the gutter ──
   Every other public surface uses clamp(20px,5vw,56px) — .ghead, .barFull and
   .footWrap all carry it verbatim and the last one says so in a comment. /tiers
   alone used clamp(18px,4vw,52px), which is 18px against everyone else's 20px on
   a 375px phone: small, but it is exactly the incoherence you see when you move
   between pages. Aligned here, inside the query, so desktop keeps the handoff's
   own value (36px vs 45px at 901px — they genuinely differ up there). */
@media (max-width:900px){
  .wrap{ padding-left:clamp(20px,5vw,56px); padding-right:clamp(20px,5vw,56px) }
}

@media (max-width:900px){
  .mx{ overflow-x:visible }
  .mxt{ min-width:0; width:100%; table-layout:fixed }
  .mxt thead th:first-child{ width:46% }             /* 7 tier cols share 54%         */
  .mxt th,.mxt td{ padding:10px 3px }
  .mxt tbody th{ padding-left:0; font-size:12.5px; line-height:1.35 }
  /* 182 drop-shadow passes on 15px marks — imperceptible at this size, and each
     one forces its own raster layer. */
  .mxt .gk{ filter:none }
  /* 5,493 elements live in this section — 61% of the document. Skip their style,
     layout and paint until they approach the viewport. This saves RENDERING; it
     does not reduce parse, DOM count or hydration, which CSS cannot. */
  .mx{ content-visibility:auto; contain-intrinsic-size:auto 1600px }
}

/* 561-900: the tier NAME survives, rotated. */
@media (max-width:900px) and (min-width:561px){
  .mxt thead th .mn{ writing-mode:vertical-rl; transform:rotate(180deg); font-size:12px; letter-spacing:.02em }
}

/* ≤560: a 26px column cannot hold "Prestige", so the ROMAN NUMERAL carries the
   column and the name steps back. The numeral is not invented — it is this page's
   own tier vocabulary, already the label on .rchip .rn and .row-idx .rn — and the
   sticky rail keeps numeral AND name together on screen through the matrix,
   which is exactly why the thead is offset below it. */
@media (max-width:560px){
  .mxt thead th .mn{ display:none }
  .mxt thead th .mr{ display:block; margin-bottom:0; font-size:10.5px; letter-spacing:.02em; color:var(--gold-hi) }
  .mxt thead th:first-child{ width:44% }
  .mxt tbody th{ font-size:12px }
}
@media (max-width:480px){
  .mxt thead th:first-child{ width:42% }
  .mxt th,.mxt td{ padding:9px 2px }
}
/* landscape: a vertical name band plus chrome eats two thirds of a 375px height. */
@media (max-height:480px){
  .mxt thead th .mn{ display:none }
  .mxt thead th .mr{ display:block; margin-bottom:0 }
}

/* ── the scroll story ────────────────────────────────────────────────────────
   min-height:100vh is already inert on a phone — one-column content runs ~1000px
   against a ~660px viewport, so it never binds. The damage is
   scroll-snap-align:center on an element 1.5-2x the scrollport: neither end can
   be reached at rest, and with proximity + smooth you get the tug. Deliberately
   NOT dvh: on a snap section dvh re-resolves as the URL bar moves and shifts the
   snap position mid-gesture. auto is the honest answer here. */
@media (max-width:900px){
  html{ scroll-snap-type:none }
  .row{ min-height:auto; scroll-snap-align:none }
}

/* ── the card ────────────────────────────────────────────────────────────────
   .mc is width:min(520px,100%) with container-type:inline-size, so it only
   shrinks below ~590px of viewport — which means a max() floor is inert on
   desktop WITHOUT a media query, by construction. Every value below is the
   handoff's own cqw with a floor added; at the 520px design width each floor is
   far under the computed size, so desktop never sees it.
   Left unfloored on purpose: .mc-name, .mc-wd b, .mc-bal, .mc-balrow .entg —
   display weights, legible unfloored, and flooring them would break the card's
   proportional credit-card feel, which is the whole point of the cqw system. */
.mc-clbl{ font-size:max(9px,2.25cqw) }
.mc-lbl{ font-size:max(10px,2.55cqw) }
.mc-tap{ font-size:max(10px,2.7cqw) }
.mc-no{ font-size:max(10.5px,3.05cqw) }
.mc-wd small{ font-size:max(10px,3.1cqw) }
.mc-cval.nd{ font-size:max(11px,3.5cqw) }
.mc-credit .entg{ font-size:max(10px,3.5cqw) }
.mc-tier{ font-size:max(12px,3.85cqw) }
.mc-cval{ font-size:max(12px,4.2cqw) }

/* ── ambience the phone does not need ────────────────────────────────────────
   14 perpetually-animating layers running conic-gradient + blur + hue-rotate,
   and a grain worklet that re-runs on every URL-bar resize. Invisible at 339px,
   expensive on a phone compositor. */
@media (max-width:560px){
  .mc-fire,.mc-flash{ animation:none }
  .mc-grain{ background-image:none }
}

/* t-base.css sets scroll-behavior:smooth with no reduced-motion guard. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
}

/* ── the pill's BELOW-header fallback, only where the shared chrome does not act ──
   club36/chrome-mobile.css puts .lang-top in the header for
     (max-width:820px), (max-width:1024px) and (pointer:coarse)
   Outside that — a fine-pointer window between 821 and 1079, or any pointer between
   1025 and 1079 — the header keeps its desktop composition (the crest and eyebrow are
   still visible, so the left column is NOT empty) and the pill must stay below it
   rather than land on the wordmark. This is the exact complement of the query above,
   which is the only way the two sheets can disagree about one element without one of
   them quietly winning. */
@media (min-width:821px) and (max-width:1079px) and (pointer:fine),
       (min-width:1025px) and (max-width:1079px){
  .lang-top{ top:calc(var(--c36-head) + 12px) }
}