/* site.css — project overrides layered AFTER casino.css.
   The chassis contract forbids editing anything below its :root block
   (casino-css-chassis §2) and roll_skin.py's G6 proves that body is
   byte-identical on every re-roll — so the mobile-fold tightening required by
   mobile-toplist-card §Compactness lives here.
   SIZING + SPACING ONLY (no colour tokens) so verify_chassis stays clean.
   Applied in the documented order: hero → H2/lead → card. */

@media (max-width:768px){
  /* 1. hero */
  .ch-hero{padding:14px 0}
  .ch-crumb{margin:0 0 5px;font-size:.76rem}
  .ch-hero h1{font-size:1.42rem;line-height:1.2;margin-bottom:7px}
  .ch-lede{font-size:.94rem;line-height:1.5;margin-bottom:10px}
  .ch-lede-clamp{-webkit-line-clamp:2;line-clamp:2}
  .ch-more{margin-top:.35rem;font-size:.82rem}
  .ch-byline{padding:5px 12px 5px 6px;font-size:.8rem}
  .ch-byline img{width:32px;height:32px}
  .ch-upd{margin-top:.4rem;font-size:.68rem;padding:.2rem .55rem}

  /* 2. toplist H2 + lead */
  #toplist{padding-top:12px}
  #toplist h2{font-size:1.18rem;line-height:1.25;margin:0 0 6px}
  .toplist-lead{font-size:.84rem;line-height:1.45;margin-bottom:10px}

  /* 2b. spoke pages overshoot the fold by 1-24px — shave the lead + card */
  .toplist-lead{margin-bottom:7px}
  #toplist h2{margin-bottom:5px}

  /* 3. card */
  .ch-table tbody tr{padding:.45rem .55rem .55rem;row-gap:3px;margin-bottom:9px}
  .ch-chip{width:92px;height:48px;padding:5px 7px}
  .ch-brand-name{font-size:.92rem}
  .ch-bonus{padding:7px;font-size:.92rem}
  .ch-bonus-val{font-size:1.08rem}
  .ch-bonus-label{font-size:.62rem}
  .ch-features span{font-size:.64rem;padding:2px 5px}
  .ch-cta{min-height:42px;line-height:19px;font-size:.85rem}
  .ch-table tbody tr{padding-bottom:.45rem}
}

/* Grid items default to min-width:auto and refuse to shrink below their content:
   .ch-authorcard measured 471px inside a 264px grid track at 390px, which widened
   the document to 534px and dragged the fixed off-canvas nav panel out with it
   (the panel is translated by 100%, so a wider document pushes it further right
   and widens the document again). min-width:0 breaks that loop. */
.ch-authorcard,.ch-authorcards>*{min-width:0}
.ch-authorcard img{max-width:100%;height:auto}

/* ── imagery (Layer-10 parity) ──────────────────────────────────────────
   Sizing + layout only. Every colour is a var() reference to a chassis
   token — nothing here DEFINES a colour, so casino.css stays byte-identical
   below :root and the skin can still be re-rolled. */
.ch-figure{margin:0}
.ch-figure img{
  display:block;width:100%;height:auto;
  aspect-ratio:3/2;object-fit:cover;      /* model returned 1:1; frame to the
                                             3:2 the prompt asked for */
  border-radius:10px;border:1px solid var(--ch-line);
}
.ch-figure figcaption{
  margin-top:.55rem;font-size:.86rem;line-height:1.6;
  color:var(--ch-muted);text-align:center;
}
.ch-paylegend{
  list-style:none;margin:1rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;
}
.ch-paylegend li{
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  padding:.85rem .4rem;text-align:center;
  background:var(--ch-surface);
  border:1px solid var(--ch-line);border-radius:10px;
}
.ch-paylegend img{width:38px;height:38px}
.ch-pay-name{font-size:.86rem;font-weight:600;color:var(--ch-ink)}
.ch-pay-tier{font-size:.74rem;color:var(--ch-muted)}
@media (max-width:768px){
  .ch-paylegend{grid-template-columns:repeat(2,1fr)}
  .ch-figure img{aspect-ratio:4/3}
  .ch-figure figcaption{font-size:.8rem}
}

/* /reviews/ index cards: the attributes now carry the file's real 150x80
   (declaring 72x72 on a 150x80 file mis-reserves the box and shifts layout as
   it decodes). Display size is CSS's job. */
.ch-authorcards .ch-authorcard>img{width:72px;height:auto;object-fit:contain}

/* Byline over date.
   The chassis makes .ch-byline inline-flex and .ch-upd inline-block, so on a
   wide viewport both fit on one line box and the date pill lands to the LEFT of
   the byline card (RTL) instead of under it — it only stacked on mobile because
   the line happened to wrap. Forcing the pill to its own block, shrink-wrapped
   and centred, makes the stack order the same at every width. */
.ch-hero .ch-upd{
  display:block;
  width:fit-content;
  margin-inline:auto;
}

/* ── mobile optimisation pass (390×844) ────────────────────────────────
   Measured against Layout/mobile-nav + Meta/mobile-screenshot-verify.
   Sizing/spacing only — every colour stays a chassis token. */

/* mobile-nav rule 4: lock the page behind the open panel. The chassis drives
   the panel off a checkbox with no JS, and body is not a sibling of that
   checkbox — so :has() is the only no-JS way to reach it. Without this the
   page scrolls underneath the panel and jumps on close. */
body:has(#ch-nav-toggle:checked){overflow:hidden}

@media (max-width:768px){
  /* Top bar was 73px; the skill's band is 56-64. Also buys 13px of fold. */
  .ch-nav .ch-wrap{min-height:60px}

  /* Panel links were 15.2px; the skill sets a ≥18px floor for panel type. */
  .ch-nav-links>li>a{font-size:1.125rem}
  .ch-nav-links{gap:6px}

  /* Type floor. These sat at 9.9-11.8px: bonus label, the payout/licence
     feature spans (and the <bdi> that isolates their Latin runs) and the
     payment tier caption. Nothing readable ships under 12px.
     Table <th> are deliberately NOT here: the chassis clips both theads to 1x1
     with clip-path on mobile (screen-reader-only, since the columns become
     stacked cards). They read as sub-12px to a naive audit only because
     getBoundingClientRect still reports laid-out size for clipped cells — a
     measurement artifact, not a defect. Styling them would be dead CSS. */
  .ch-bonus-label{font-size:.75rem}
  .ch-features span,.ch-features bdi{font-size:.75rem}
  .ch-pay-tier{font-size:.75rem}

  /* Tap targets. Inline links inside a paragraph are exempt (WCAG 2.5.5), but
     these two are standalone navigation sitting at 18-19px tall: the brand
     name in each toplist row (→ its review) and every footer link. Raised to
     ≥32px, comfortably past the 24px floor in WCAG 2.5.8 without turning the
     three-column footer into a scroll of its own. */
  .ch-brand-name{display:inline-block;padding:7px 0;min-height:32px}
  .ch-foot-cols a{display:inline-block;padding:7px 0;min-height:32px}
}