/* Shared mobile chrome — one definition for every fleece.gg page.
 *
 * ≤767px: an iPhone-style fixed bottom tab bar (.mbar, five tabs with icons) owns
 * ALL product navigation; the per-page pill rows hide, the logo shrinks to one
 * consistent size/position, and the theme toggle sits top-right opposite it.
 * Desktop is untouched: the bar is display:none outside the media query and every
 * rule below is scoped to the breakpoint.
 *
 * Colors are literal (not var()) because Home//pro use a different token set than
 * the product pages — this file must render identically on all of them.
 */

.mbar{display:none}
/* Home//pro carry BOTH footers: their rich desktop one (.deskfoot) and the
   shared .sitefoot.m-only that every other page shows. Desktop hides the
   shared copy; the phone block below swaps them. */
.sitefoot.m-only{display:none}
/* Footer helmet: static still for now — operator will supply a revised mp4. */

@media (max-width:767px){

  /* ── Bottom tab bar ─────────────────────────────────────────────── */
  .mbar{
    /* Home//pro now scope their fixed top bar to #nav (2026-08-04), so the bar
       no longer inherits top:0 from a bare `nav` selector. top:auto stays as a
       cheap guard in case a page ever reintroduces bare-element nav styling. */
    position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;z-index:200;
    display:flex;align-items:stretch;justify-content:space-between;
    background:rgba(12,12,14,.94);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-top:1px solid rgba(255,255,255,.10);
    padding:6px max(10px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
  }
  body.light .mbar{background:rgba(244,242,235,.95);border-top-color:rgba(24,21,15,.14)}
  .mtab{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:4px 0 2px;border-radius:10px;text-decoration:none;
    font-family:"Titillium Web",'NM',system-ui,sans-serif;font-size:10px;font-weight:600;letter-spacing:.02em;
    color:rgba(247,246,242,.60);
  }
  body.light .mtab{color:rgba(23,20,14,.60)}
  /* Instant press acknowledgment. Tabs are full page navigations, so the tapped
     tab's active color only paints when the NEXT page loads — without this the
     tap gets zero feedback for a few hundred ms and reads as "sticky". */
  .mtab:active{color:#FF4A1C;transform:scale(.94);transition:transform .06s}
  .mtab.pass:active{opacity:.75;transform:scale(.94)}
  .mtab svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .mtab.on{color:#FF4A1C}
  /* Pass is a CTA, not a section — filled pill with dark text so it can't be read
     as the active-tab orange. */
  .mtab.pass{background:#FF4A1C;color:#0C0C0E;border-radius:14px;margin:2px 0 2px 6px;padding:4px 10px 2px}
  /* The Pro tab is a single filled trophy with PRO + handles knocked out as
     negative space (operator art pro-trophy-knockout.svg, 2026-08-05) — the
     pill's orange shows through the letters. Squarer than the old wide pill:
     tighter horizontal padding + smaller radius (operator: "more square than
     rectangle"). The new art is near-square (475x498), so equal-ish box. */
  .mtab.pass svg.cup{width:27px;height:28px;stroke:none;fill:currentColor;display:block}
  /* flex:1 (inherited from .mtab) stretched the pill to ~86x50 — cap it so the
     box is actually square-ish (47x41 + radius 12), centered in its bar slot. */
  .mtab.pass{flex:0 0 auto;align-self:center;padding:6px 10px 5px;border-radius:12px}
  body.light .mtab.pass{color:#0C0C0E}

  /* Clear the bar: every page gets breathing room at the bottom. */
  body{padding-bottom:76px}

  /* ── Kill the pill navigation rows (the bar replaces them) ──────── */
  .mast-right .navpill,          /* wire / scout / trade */
  .mr-row .navpill,              /* rankings */
  nav#nav .nav-links{display:none}   /* home / pro link row */

  /* ── Header: small locked logo left, theme toggle right ─────────── */
  /* Layout calibration (2026-08-05). Every page's header block must start at
     the SAME y — RANKINGS IS THE REFERENCE. Measured @375px, its contract is:
       .wrap padding-top 20  +  .mast padding-bottom 22  +  .mast margin-bottom 0
     which puts logo top 20, h1 baseline 66, sub baseline 83, search pill 114.
     Each page had drifted its own way: .wrap padding-top was 24 (scout) and 28
     (wire, trade+), and scout ALSO carried .mast{margin-bottom:22px} — so its
     pill sat 30px low (4 padding + 4 mast height + 22 margin). Pinning all three
     here fixes the logo, title, sub-line AND pill in one place; the inner block
     (.brand 20 + 12 gap, h1, .mast-sub +6) already measures 71px on every page,
     so once the outer box matches, everything inside lands together. */
  .wrap{padding-top:20px}
  .mast{flex-direction:row !important;align-items:flex-start;gap:16px;
        padding-bottom:22px;margin-bottom:0}
  .mast .brand{margin-bottom:12px}
  .mast .brand img{height:20px}
  /* Title drops to player-name size; the refresh line under it goes small + quiet. */
  .mast h1{font-size:17px}
  .mast-sub{margin-top:6px;font-size:11px;gap:7px}
  .mast-sub .live-dot{width:5px;height:5px;box-shadow:0 0 0 2px color-mix(in srgb,#3CC873 18%,transparent)}
  .mast-right,.mr-row{align-self:flex-start}
  /* One rule for every page: the theme toggle lives in the upper-right corner,
     opposite the logo, at the same offset everywhere. */
  .wrap{position:relative}
  .theme-toggle{position:absolute;top:26px;right:18px;z-index:80}
  .mast-sub .sep{display:none}   /* separators orphan onto their own line when subs wrap */
  .csv-btn .csv-label{display:none}   /* rankings: icon-only CSV button frees header width */
  nav#nav .nav-logo{height:30px}

  /* ── One footer everywhere: center-justified, helmet loop included.
     Inline styles on the markup lose to !important here. ────────────── */
  .deskfoot{display:none}
  .sitefoot.m-only{display:block}
  .sitefoot>div>div:first-child{flex-direction:column !important;align-items:center !important;gap:26px !important}
  .sitefoot .helm-still{height:132px !important;margin:0 auto}
  .sitefoot>div>div:first-child>div:last-child{justify-content:center !important;text-align:center;gap:48px !important}
  .sitefoot>div>div:last-child{flex-direction:column;align-items:center;text-align:center;gap:8px !important}

  /* Home//pro: nav collapses to one clean row (logo + CTA), no second line. */
  nav#nav{flex-wrap:nowrap;padding:0.7rem 1.25rem}
}