/* ============================================================
   MOBILE SHELL — slabz.com's phone layout, our brand, our improvements
   (Luke, 21 Aug, from slabz screenshots). Everything here lives under one
   breakpoint; desktop is untouched. mobile.js relocates the existing DOM
   (nav -> tab bar, pack list -> chip scroller, rewards rail -> sheet) so
   every piece of logic keeps running on the same nodes.
   ============================================================ */
/* ── SHARED between the phone shell and the tablet's rewards subset ──────
   These classes only exist when mobile.js has built them, so they need no
   media query of their own: everything below the SHELL LINE (1024, see
   shell.css) wears the phone shell, and that is where these live. The
   761-1023 block below only sizes them up for an iPad-portrait screen —
   a 52px FAB and a full-bleed sheet read as phone-sized on an 834-wide
   tablet. ─────────────────────────────────────────────────────────────── */

/* the crate symbol, floating top-right over the stage (slabz's star).
   mobile.js sets `top` from the live bar's bottom edge in both shells. */
.mcrate{position:fixed;right:14px;z-index:36;width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(18,18,22,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14);border-radius:50%;
  transition:border-color var(--dur-fast) var(--ease-out)}
.mcrate img{width:34px;height:34px;object-fit:contain;display:block}
.mcrate[data-ready="1"]{border-color:rgba(var(--accent-rgb),.65);
  box-shadow:0 0 18px rgba(var(--accent-rgb),.35)}
/* the room clears for a rip, on every shell */
[data-state="rip"] .mcrate,[data-postrip="1"] .mcrate{display:none}

/* bottom sheets (universe picker on the phone, Daily Rewards on both) */
.msheet{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:flex-end;
  background:rgba(6,6,8,.6);opacity:0;pointer-events:none;
  transition:opacity var(--dur-mid) var(--ease-out)}
.msheet[data-open="1"]{opacity:1;pointer-events:auto}
.msheet__panel{width:100%;max-height:78vh;overflow:auto;
  background:rgba(16,16,20,.97);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,.12);border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:var(--s3) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom,0px));
  transform:translateY(24px);transition:transform var(--dur-mid) var(--ease-out)}
.msheet[data-open="1"] .msheet__panel{transform:none}
.msheet [hidden]{display:none!important}
.msheet__grab{width:44px;height:4px;margin:0 auto var(--s3);border-radius:2px;
  background:rgba(255,255,255,.22)}
.msheet__head{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--s3)}
.msheet__title{margin:0;font-family:var(--font-brand);text-transform:uppercase;
  letter-spacing:.12em;font-size:var(--fs-sm);color:var(--text-dim)}
.msheet__close{width:36px;height:36px;cursor:pointer;font-size:19px;color:var(--text-dim);
  background:rgba(255,255,255,.06);border:1px solid var(--hairline);border-radius:50%}
/* the rewards rail, reborn inside its sheet (beats the tablet band's
   display:none on .rail--right by specificity, no !important needed) */
.msheet .rail--right{display:flex;flex-direction:column;gap:var(--s4)}
.msheet .rail__title{display:none}

/* ── iPad PORTRAIT (761-1023): same grammar, tablet proportions ──────── */
@media (min-width:761px) and (max-width:1023px){
  .mcrate{right:20px;width:58px;height:58px}
  .mcrate img{width:38px;height:38px}
  /* the stacked post-rip panel: full-bleed rows put 700px of air between
     "CATEGORY" and its value on an 820-wide screen — the same gap Luke
     called out on the pack rows. Hold it to a readable measure. */
  .postrip__rail{max-width:560px;margin:0 auto}
  /* a full-bleed bottom sheet reads as a wall on a 1024-wide screen; the
     panel keeps the sheet grammar and centres at a readable measure */
  .msheet__panel{max-width:560px;margin:0 auto;border-radius:var(--r-xl) var(--r-xl) 0 0;
    border-left:1px solid rgba(255,255,255,.12);border-right:1px solid rgba(255,255,255,.12);
    padding:var(--s3) var(--s5) var(--s6);max-height:82vh}
}

@media (max-width: 1023px) {

  /* iOS Safari scrolls the document even under overflow:hidden — the
     header slid off the top of Luke's iPhone. Pinning the body is the
     one reliable lock; overscroll-behavior kills the rubber-band. */
  html,body{position:fixed;inset:0;width:100%;height:100%;
    overflow:hidden;overscroll-behavior:none}

  /* ── header: two rows — brand+balances, then the tab bar ── */
  .header{height:auto;min-height:0;flex-wrap:wrap;gap:var(--s2);
    padding:var(--s2) var(--s4) 0}
  .header__brand{flex:0 0 auto}
  .wordmark-img{height:14px}
  .header__right{gap:6px}
  .header__right .btn{padding:0 var(--s2)}
  .hbal{padding:2px 8px}

  /* the tab bar (the nav, reparented by mobile.js) */
  .mtabs{flex:1 0 100%;display:flex;margin:0 calc(-1 * var(--s4));
    border-top:1px solid rgba(255,255,255,.05)}
  .mtabs .navlink{flex:1 1 0;justify-content:center;min-height:40px;
    padding:0;font-size:var(--fs-xs);letter-spacing:.12em;
    border-bottom:2px solid transparent}
  .mtabs .navlink.is-active{border-bottom-color:var(--accent)}

  /* ── live bar: unchanged look, tighter ── */
  .strip{padding:var(--s2) var(--s4) 0}

  /* ── the stage owns the whole column; rails leave the room ── */
  .grid{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr);
    padding:var(--s2) var(--s4)}
  .rail--left,.rail--right{display:none}
  .stage__art{height:min(44vh,420px)}

  /* the desktop pay row folds into the dock (mobile.js moves it) */

  /* ── bottom dock: universe + chips, turbo + what's inside, the CTA ── */
  /* no plate behind the controls (Luke, 21 Aug: "no black background
     behind the buttons, sitting on the normal background") — each button
     carries its own surface, the stage glow runs beneath them */
  .mdock{position:fixed;left:0;right:0;bottom:0;z-index:35;
    display:flex;flex-direction:column;gap:var(--s2);
    padding:var(--s4) var(--s4) calc(var(--s2) + env(safe-area-inset-bottom,0px))}
  .mdock [hidden]{display:none!important}
  [data-state="rip"] .mdock,[data-postrip="1"] .mdock{display:none}

  .mdock__row{display:flex;align-items:center;gap:var(--s2);min-width:0}

  .mdock__uni{flex:0 0 auto;display:flex;align-items:center;gap:6px;cursor:pointer;
    height:44px;padding:0 10px;background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);border-radius:var(--r-pill);color:var(--text-dim)}
  .mdock__uni img{width:24px;height:24px;object-fit:contain;display:block}
  .mdock__uni::after{content:"";width:7px;height:7px;margin:0 2px 2px 0;
    border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
    transform:rotate(45deg) translateY(-2px)}

  /* the EXISTING #packList, restyled into a chip scroller (slides across) */
  .mdock__chips{flex:1 1 auto;min-width:0}
  .mdock__chips .packlist{display:flex;flex-direction:row;gap:var(--s2);
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    padding:2px}
  .mdock__chips .packlist::-webkit-scrollbar{display:none}
  .mdock__chips .pack{flex:0 0 auto;display:flex;align-items:center;gap:8px;
    width:auto;justify-content:flex-start;height:44px;padding:0 var(--s4);
    white-space:nowrap;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
    border-radius:var(--r-pill)}
  .mdock__chips .pack__name{font-size:var(--fs-sm);font-weight:600;color:var(--text-dim)}
  .mdock__chips .pack__price{font-size:var(--fs-xs);color:var(--text-faint);
    font-variant-numeric:tabular-nums}
  .mdock__chips .pack[aria-pressed="true"]{background:var(--accent);border-color:var(--accent)}
  .mdock__chips .pack[aria-pressed="true"] .pack__name,
  .mdock__chips .pack[aria-pressed="true"] .pack__price{color:#0D0D10}

  /* turbo + what's inside */
  .mdock__row--opts{justify-content:space-between;padding:0 2px}
  .mturbo{display:flex;align-items:center;gap:8px;cursor:pointer;background:none;border:0;
    font:600 var(--fs-xs) var(--font-display);color:var(--text-faint);
    text-transform:uppercase;letter-spacing:.08em;padding:6px 0}
  .mturbo__track{width:34px;height:19px;border-radius:10px;position:relative;
    background:rgba(255,255,255,.12);transition:background var(--dur-fast) var(--ease-out)}
  .mturbo__knob{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
    background:var(--gray-300);transition:transform var(--dur-fast) var(--ease-out)}
  .mturbo[aria-checked="true"]{color:var(--accent)}
  .mturbo[aria-checked="true"] .mturbo__track{background:rgba(var(--accent-rgb),.45)}
  .mturbo[aria-checked="true"] .mturbo__knob{transform:translateX(15px);background:var(--accent)}
  .mwhats{display:flex;align-items:center;gap:6px;cursor:pointer;background:none;border:0;
    font:600 var(--fs-xs) var(--font-display);color:var(--text-dim);
    text-transform:uppercase;letter-spacing:.08em;padding:6px 0}
  .mwhats svg{display:block}

  /* the CTA row: the existing rip pill + pay stubs, full width */
  .mdock .stage__actions{display:flex;justify-content:center;padding:0}
  /* the dock has its own turbo switch — the desktop row stands down */
  .turborow{display:none}
  [data-turbo="1"] #ripBtn::before{content:none}
  .mdock .rip{display:block;width:100%}
  .mdock .rip__btn{width:100%;min-height:52px}
  .mdock .pay{display:flex;justify-content:center;gap:var(--s2);margin:0;padding:0}

  /* universe rows */
  .muni{display:flex;align-items:center;gap:var(--s3);width:100%;cursor:pointer;
    padding:var(--s3) var(--s3);margin-bottom:var(--s1);text-align:left;
    background:none;border:1px solid transparent;border-radius:var(--r-md);
    font:600 var(--fs-md) var(--font-display);color:var(--text-dim);
    text-transform:uppercase;letter-spacing:.06em}
  .muni img{width:26px;height:26px;object-fit:contain}
  .muni[aria-selected="true"]{color:var(--accent);
    background:rgba(var(--accent-rgb),.08);border-color:rgba(var(--accent-rgb),.3)}
  .muni__check{margin-left:auto;color:var(--accent);opacity:0;font-size:var(--fs-md)}
  .muni[aria-selected="true"] .muni__check{opacity:1}

  /* overlays that were sized for desktop breathe on a phone */
  .vault__panel,.odds__panel{max-height:82vh}

  /* post-rip (PLAN-24 C6): the desktop right-rail becomes the stacked
     bottom sheet-shape — same nodes, hero first, full-width buttons,
     slide-UP entrance instead of the desktop's slide-from-right */
  .postrip{position:fixed;top:auto;left:0;right:0;bottom:0;width:auto;transform:none;
    align-items:stretch;
    padding:20vh var(--s4) calc(var(--s5) + env(safe-area-inset-bottom,0px));
    /* a rising scrim, not a box: the rail's type crosses the held slab on a
       phone and washed out without it (first mobile render pass) */
    background:linear-gradient(180deg,transparent,rgba(8,8,10,.9) 26%,rgba(8,8,10,.96))}
    /* fixed: #stage measures 0 wide on mobile */
  .postrip__rail{animation-name:postripInM;gap:var(--s2)}
  .postrip__eyebrow{text-align:center}
  .postrip__name{text-align:center;font-size:var(--fs-lg)}
  .postrip__grade{align-self:center}
  .postrip__r{padding:9px 0}
  .postrip__r--big dd{font-size:var(--fs-md)}
  /* THE POST-RIP FOOT ROW (Luke, 21 Aug: "fix the phone one too").
     #prShare and #prInspect are positioned in vh against the viewport,
     which cannot stay clear of a stacked panel whose height moves with the
     card's own copy: measured at 375, 390, 768 and 820, "SHARE ON X"
     landed across YOUR PULL and the card name, and "TAP CARD TO INSPECT"
     was drawn over the slab's top edge. mobile.js relocates both into the
     panel's own rail as one centred row directly under the held card —
     this module's whole pattern — and here they stop being positioned at
     all. It wraps on the narrowest phones: the two labels are 354px side
     by side and an iPhone SE rail is 343. */
  .prfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
    gap:var(--s2) var(--s3);margin-bottom:var(--s2)}
  .prfoot .postrip__share,.prfoot .postrip__inspect{position:static;
    top:auto;bottom:auto;left:auto;transform:none;animation:none;margin:0}
  /* the fallbacks, only reached if that observer never fires */
  .postrip__share{position:fixed;bottom:auto;top:52vh}
  .postrip__row{display:flex;flex-direction:column;width:100%;gap:var(--s2);margin-top:var(--s2)}
  .postrip__hero{order:-1;width:100%;min-height:52px}
  .postrip__side{width:100%;min-height:46px}
  /* the inspect affordance: fixed (its #stage parent measures 0 wide on
     mobile), pinned under the header over the slab */
  .postrip__inspect{position:fixed;bottom:auto;left:50%;transform:translateX(-50%);
    top:calc(env(safe-area-inset-top,0px) + 112px);white-space:nowrap}
  @keyframes postripInM{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  /* mock keeps the same stacked shape on a phone */
  .postrip[data-mock="1"]{top:auto;left:0;right:0;width:auto;transform:none;
    bottom:calc(var(--s5) + env(safe-area-inset-bottom,0px));padding:0 var(--s4)}
  .postrip[data-mock="1"] .postrip__row{flex-direction:column;width:100%}
  .postrip[data-mock="1"] .postrip__row .postrip__hero,
  .postrip[data-mock="1"] .postrip__row .postrip__side{width:100%}

  /* toasts clear the dock instead of covering the CTA (inline style loses
     to !important on purpose — wallet.js positions it for desktop) */
  #walletToast{bottom:240px!important}
  [data-state="rip"] #walletToast{bottom:28px!important}

  /* ── compact dock for short viewports (Luke, 20 Aug: "the buttons don't
     need to be that big" on the SE shot). Every px shaved off the dock goes
     straight to the pack — placeChrome sizes the stage band off the dock's
     measured top edge, so no JS change is needed. 720px catches phones with
     the browser toolbar up (SE 553, iPhone 12 at 664) and leaves full-screen
     states alone. Touch targets stay ≥38px. ── */
  @media (max-height: 720px) {
    .mdock{gap:6px;padding:var(--s2) var(--s4) calc(var(--s1) + env(safe-area-inset-bottom,0px))}
    .mdock__uni{height:38px;padding:0 8px}
    .mdock__uni img{width:20px;height:20px}
    .mdock__chips .pack{height:38px;padding:0 var(--s3)}
    .mturbo,.mwhats{padding:2px 0}
    .mdock .rip__btn{min-height:46px}
    .mdock .pay{padding-bottom:0}
    .mdock .pay__btn{min-height:32px;padding:5px var(--s2)}
    .mcrate{width:44px;height:44px}
    .mcrate img{width:28px;height:28px}
    #walletToast{bottom:200px!important}
    /* the post-rip panel has to give the card back its room on a 667-tall
       screen: the foot row wraps to two lines there and the panel climbed
       80px up the slab. The card wins — the tap affordance survives as the
       card itself, which is the whole hit zone. */
    .prfoot .postrip__inspect{display:none}
    .postrip{padding-top:14vh}
  }
}