/* =============================================================================
   glass/numbers.css — glass + desktop layout for ANON RENTALS (/888).

   Covers the whole /888 surface: the shared tab strip and back strip, the
   Fragment hero and its inventory summary, the two flip-phone racks, the rent
   modal, and the "list your number" modal that fragchat.css ships for this
   page only.

   PURELY ADDITIVE. Nothing in numbers.css or fragchat.css is rewritten. Every
   declaration here is a later-loading override, so this file MUST be linked
   AFTER numbers.css and fragchat.css in numbers.html. No !important outside
   the two accessibility blocks at the bottom, which have to beat everything by
   design.

   MOBILE IS UNTOUCHED. Every rule lives inside @media (min-width: 900px).
   Below 900px this file contributes zero declarations, so phone and small
   tablet rendering is byte-for-byte what it was, touch targets included.

   THE PERFORMANCE RULE. backdrop-filter forces its own compositing layer and
   re-blurs on every scroll frame, so real glass goes on CHROME ONLY: the tab
   strip, the back strip, the inventory summary, the four carousel arrows and
   the two modals. Anything that repeats gets the blur-free .gw-glass-tile
   recipe (translucent fill, lit edge, no blur): the number slots, which run to
   38 today and are meant to grow, and the two rack sections that hold them.
   Blurring 38 horizontally scrolling cards would cost far more than the effect
   is worth, and the racks are dragged, so every frame counts.

   RECIPES, NOT CLASSES. The glass classes (.gw-glass, .gw-glass-tile,
   .gw-glass-btn, .gw-glass-input, .gw-glass-sheen) live in glass.css and have
   to be applied in markup. numbers.js and numbers.html belong to other owners,
   so the surfaces here are composed from the same glass TOKENS instead of the
   class names, value for value. If the markup ever gains the classes these
   rules can collapse into them with no visual change.

   The top light-catch is an `inset 0 1px 0 var(--glass-sheen)` rather than the
   .gw-glass-sheen ::before, because #tabbar, #backstrip and #inv-summary are
   flex containers (a generated ::before becomes a flex ITEM and shifts the
   layout) and .fcl-card scrolls (an absolutely positioned sheen would scroll
   away with the content). The inset shadow is the same 1px light edge with
   none of that risk.

   COLOURS come from the shared palette and the glass tokens only, never a
   literal. Glass tokens are read with a palette fallback, e.g.
   var(--glass-fill-strong, var(--panel)), so if glass.css ever fails to load
   these surfaces degrade to solid panels rather than to transparent,
   unreadable ones. --tint-weak and --shadow-card are defined in market.css,
   which /888 does NOT load, so they are only ever read WITH a fallback.

   ONE THING THIS FILE CANNOT FIX. numbers.js labels the inventory badge
   "LIVE STOCK" on every code path, including the hardcoded seed list, because
   loadInventory() passes the string "LIVE" to its callback even in the fallback
   branches. That is a copy fix in numbers.js and is filed for the lead; CSS can
   only restyle the badge, and replacing its text from a stylesheet would leave
   screen readers still announcing "LIVE STOCK". This file therefore does not
   touch the .is-live / neutral split at all, so whatever numbers.js settles on
   themes correctly either way.
   ========================================================================== */

@media (min-width: 900px) {

  /* One spacing scale for the whole page, so the hero, the store column, the
     rack sections and the modals all step in the same units instead of a dozen
     ad-hoc numbers. --n-col + --n-gutter give the hero and the store the SAME
     content column: today .hero-inner caps at 1120px while #store caps at
     1520px, so the headline and the first phone never line up. */
  :root {
    --n-col: 1400px;
    --n-gutter: clamp(20px, 2.6vw, 36px);
    --n-inset: 46px;   /* rack gutter; clears the 42px arrows sitting at 2px */
    --n-s1: 6px;
    --n-s2: 12px;
    --n-s3: 18px;
    --n-s4: 26px;
    --n-s5: 34px;
    --n-s6: 56px;
  }

  /* =========================================================================
     1 · PAGE CHROME — the tab strip and the back strip. Two instances, they
     sit over the page gradient, they never repeat: legitimate blur surfaces.
     ====================================================================== */
  /* NOTE: the tab strip's own padding and the .tab metrics are deliberately
     left alone. Eight tabs already overflow and scroll at ~900px, so widening
     either would push "Terminal" off the end. Glass only. */
  #tabbar {
    background: var(--glass-fill-strong, var(--panel));
    border-bottom-color: var(--glass-edge, var(--hairline-2));
    box-shadow: inset 0 1px 0 var(--glass-sheen, transparent);
  }
  #backstrip {
    padding: 10px var(--n-gutter);
    background: var(--glass-fill-strong, var(--panel));
    border-bottom-color: var(--glass-edge, var(--hairline-2));
    box-shadow: inset 0 1px 0 var(--glass-sheen, transparent);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    #tabbar,
    #backstrip {
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
      backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    }
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #tabbar,
    #backstrip { background: var(--panel); }
  }

  /* the current tab reads as a lit pane of the same glass, not just a rule */
  .tab[aria-selected="true"] {
    background: color-mix(in srgb, var(--p400) 10%, transparent);
    border-radius: 8px 8px 0 0;
  }

  /* the theme toggle is the one control in the back strip: give it the glass
     button fill so it belongs to the strip instead of floating on it */
  #backstrip #themeToggle {
    background: color-mix(in srgb, var(--panel) 55%, transparent);
    border-color: var(--glass-edge, var(--hairline-2));
  }

  /* =========================================================================
     2 · HERO — same content column as the store, and no forced dead space.
     min-height:46vh reserves 660px of hero on a 1440-tall display whatever the
     content actually needs; the padding scale does that job honestly.
     ====================================================================== */
  #hero {
    min-height: 0;
    padding: var(--n-s5) var(--n-gutter) var(--n-s4);
    border-bottom-color: var(--glass-edge, var(--hairline-2));
  }
  .hero-inner { max-width: var(--n-col); }

  #hero-title {
    margin-bottom: var(--n-s3);
    /* the shipped clamp tops out at 72px, which on a wide monitor pushes the
       inventory card below the fold for no gain. Caps the display size and
       raises the floor so the headline never gets small either. */
    font-size: clamp(52px, 4.6vw, 66px);
  }
  #hero-tag {
    max-width: 56ch;
    margin-bottom: var(--n-s4);
    line-height: 24px;
  }
  /* the plaque scales with the column it sits in. At a fixed 112px it crowds
     the headline on a 1100px laptop and looks undersized on a 1600px one. */
  .frag-sign-img { height: clamp(96px, 9vw, 132px); }

  /* ---- inventory summary: real glass -------------------------------------
     This panel is currently painted with a hardcoded near-black fill, so on
     the WTF (light) theme it puts --ink-hi plum text on a near-black card.
     Moving it onto the glass tokens themes it correctly in both modes and
     joins it to the rest of the chrome. One instance, never repeats. */
  #inv-summary {
    gap: var(--n-s3);
    padding: var(--n-s2) var(--n-s3);
    border-radius: 14px;
    background: var(--glass-fill-strong, var(--panel));
    border-color: var(--glass-edge, var(--hairline-2));
    box-shadow: var(--glass-shadow, 0 10px 34px -14px var(--shadow-card, rgba(0, 0, 0, .45))),
                inset 0 1px 0 var(--glass-sheen, transparent);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    #inv-summary {
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
      backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    }
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #inv-summary { background: var(--panel); }
  }
  .inv-div { background: var(--glass-edge, var(--hairline-2)); }

  /* the source badge, both states, off the palette instead of literal rgba so
     it stays legible on the now-correctly-themed summary card */
  .inv-mode {
    border-color: color-mix(in srgb, var(--sweep) 42%, transparent);
    background: color-mix(in srgb, var(--sweep) 12%, transparent);
  }
  .inv-mode.is-live {
    border-color: color-mix(in srgb, var(--gain) 42%, transparent);
    background: color-mix(in srgb, var(--gain) 12%, transparent);
  }

  /* =========================================================================
     3 · STORE COLUMN — the same content width as .hero-inner, so the section
     headings sit directly under the headline instead of 200px wider than it.
     ====================================================================== */
  #store {
    max-width: calc(var(--n-col) + var(--n-gutter) * 2);
    padding: var(--n-s4) var(--n-gutter) var(--n-s6);
  }

  /* =========================================================================
     4 · RACK SECTIONS — the display case each rack sits in. TILE recipe, NOT
     real glass: there are two of them today, they are large, they scroll with
     the page, and they wrap the repeating slots. A translucent fill and a
     hairline give the same family look for none of the compositing cost.
     ====================================================================== */
  .rack-section {
    margin: 0 0 var(--n-s5);
    padding: var(--n-s3) 0 var(--n-s4);
    border-radius: 18px;
    background: color-mix(in srgb, var(--panel) 42%, transparent);
    border: 1px solid var(--hairline);
    box-shadow: inset 0 1px 0 var(--glass-sheen, transparent);
  }
  .rack-section:last-of-type { margin-bottom: var(--n-s3); }

  /* One inset for everything inside a section — heading, sell-side button,
     phones, hint — so the case has a single left edge rather than four. */
  .store-head {
    margin: 0 var(--n-inset) var(--n-s3);
    gap: var(--n-s2);
  }
  .store-title { font-size: 26px; }
  .store-sub { font-size: 13.5px; }
  .store-count {
    padding: 4px 11px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel) 70%, transparent);
    border: 1px solid var(--glass-edge, var(--hairline-2));
  }

  .rack-section .fc-list-cta-wrap {
    margin: 0 var(--n-inset) var(--n-s3);
    gap: var(--n-s1);
  }
  /* the sell-side button is secondary chrome, so it gets the glass button
     recipe rather than the solid raised fill it inherits */
  .rack-section .fc-list-cta {
    padding: 9px 16px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel) 55%, transparent);
    border-color: var(--glass-edge, var(--hairline-2));
  }
  .rack-section .fc-list-cta:hover {
    background: color-mix(in srgb, var(--hover) 75%, transparent);
    border-color: var(--p300);
  }

  /* the rack itself keeps its 46px arrow clearance; only the gap is left
     alone, because numbers.js stepSize() measures the arrow step against a
     hardcoded 22px gap and would scroll short if this file changed it */
  #rack,
  #rackVip { padding: var(--n-s2) var(--n-inset) var(--n-s4); }
  .rack-hint {
    margin: var(--n-s2) var(--n-inset) 0;
    font-size: 11.5px;
  }
  .rack-wait { padding: var(--n-s6) var(--n-s1); }

  /* ---- carousel arrows: real glass. Four on the page, they float over the
     scrolling rack, they never repeat per item. ---------------------------- */
  .rack-nav {
    background: var(--glass-fill-strong, var(--raised));
    border-color: var(--glass-edge, var(--hairline-2));
    box-shadow: var(--glass-shadow, 0 10px 34px -14px var(--shadow-card, rgba(0, 0, 0, .5)));
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .rack-nav {
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
      backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    }
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .rack-nav { background: var(--raised); }
  }
  .rack-nav:hover {
    background: color-mix(in srgb, var(--hover) 78%, transparent);
    border-color: var(--p300);
  }
  .rack-nav[disabled]:hover {
    background: var(--glass-fill-strong, var(--raised));
    border-color: var(--glass-edge, var(--hairline-2));
  }

  /* =========================================================================
     5 · THE SLOTS — the repeating unit. TILE recipe: translucent fill, lit
     edge, NO backdrop-filter. Each phone gets its own cradle in the case, and
     because #rack is a flex row with the default align-items:stretch the
     cradles come out the same height whatever the phone below them is doing.
     ====================================================================== */
  .slot {
    padding: var(--n-s2) 0 var(--n-s3);
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel) 84%, transparent);
    border: 1px solid var(--glass-edge, var(--hairline-2));
    transition: background .16s ease, border-color .16s ease;
  }
  /* a checked-out line is recessed, an open one is lit, a VIP one is gilt */
  .slot.taken { background: color-mix(in srgb, var(--well) 70%, transparent); }
  .slot.avail { border-color: color-mix(in srgb, var(--gain) 34%, transparent); }
  .slot.vip { border-color: color-mix(in srgb, var(--sweep) 42%, transparent); }
  .slot:hover {
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    border-color: color-mix(in srgb, var(--p300) 55%, transparent);
  }

  /* the caption block: tighter, and the number stays the loudest thing in it */
  .slot-foot { margin-top: 20px; }
  .slot .slot-numline {
    margin-top: 10px;
    font-size: 20px;
  }

  /* the two actions get the SAME footprint so every cradle in the row ends on
     the same line: today a rented slot ends ~20px short of an open one */
  .rent-btn {
    margin-top: var(--n-s2);
    box-shadow: 0 6px 18px -6px var(--shadow-card, rgba(0, 0, 0, .45));
  }
  .rent-btn:hover { box-shadow: 0 10px 24px -8px var(--shadow-card, rgba(0, 0, 0, .5)); }
  .taken-note {
    margin-top: var(--n-s2);
    padding: 12px 22px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    background: color-mix(in srgb, var(--well) 62%, transparent);
    border: 1px solid var(--hairline);
  }

  /* =========================================================================
     6 · MODALS — real glass. One of each, only ever on screen one at a time.
     ====================================================================== */
  .rm-card,
  .fcl-card {
    background: var(--glass-fill-strong, var(--panel));
    box-shadow: 0 28px 70px -22px var(--shadow-card, rgba(0, 0, 0, .55)),
                inset 0 1px 0 var(--glass-sheen, transparent);
  }
  .fcl-card { border-color: var(--glass-edge, var(--hairline-2)); }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .rm-card,
    .fcl-card {
      -webkit-backdrop-filter: blur(22px) saturate(var(--glass-sat));
      backdrop-filter: blur(22px) saturate(var(--glass-sat));
    }
    /* the rent scrim already blurs at 3px; match it on the lister so the two
       modals on this page dim the shop the same way */
    .fcl-backdrop {
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
    }
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .rm-card,
    .fcl-card { background: var(--panel); }
  }

  /* the lister's field and its ghost button, on the glass input/button recipes.
     The focus ring also moves off a literal blue that belongs to no palette on
     this page and onto the brand accent. */
  .fcl-input {
    background: color-mix(in srgb, var(--well) 70%, transparent);
    border-color: var(--glass-edge, var(--hairline-2));
  }
  .fcl-input:focus {
    border-color: var(--p300);
    box-shadow: 0 0 0 3px var(--tint-weak, color-mix(in srgb, var(--p200) 18%, transparent));
  }
  .fcl-ghost {
    background: color-mix(in srgb, var(--panel) 55%, transparent);
    border-color: var(--glass-edge, var(--hairline-2));
  }
  .fcl-ghost:hover {
    background: color-mix(in srgb, var(--hover) 75%, transparent);
    border-color: var(--p300);
  }

  /* =========================================================================
     7 · TOAST — one instance, fixed over everything. Keeps its brand hairline.
     ====================================================================== */
  .toast {
    background: var(--glass-fill-strong, var(--raised));
    box-shadow: var(--glass-shadow, 0 16px 40px -16px var(--shadow-card, rgba(0, 0, 0, .5))),
                inset 0 1px 0 var(--glass-sheen, transparent);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .toast {
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
      backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    }
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .toast { background: var(--raised); }
  }
}

/* =============================================================================
   WIDE DESKTOP — the hero stops being one tall stack. The FRAGZ plaque moves
   into a second column beside the copy, which is where the horizontal room
   actually is, and takes roughly 130px of scroll out of the top of the page.
   ========================================================================== */
@media (min-width: 1100px) {
  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "badge sign"
      "title sign"
      "tag   sign"
      "inv   inv";
    align-items: start;
    column-gap: var(--n-s6);
  }
  .hero-inner > .frag-sign {
    grid-area: sign;
    align-self: center;
    justify-self: end;
    margin: 0;
  }
  .hero-inner > .hero-badge {
    grid-area: badge;
    justify-self: start;
    margin-bottom: var(--n-s3);
  }
  .hero-inner > #hero-title { grid-area: title; }
  .hero-inner > #hero-tag { grid-area: tag; }
  .hero-inner > #inv-summary {
    grid-area: inv;
    justify-self: start;
  }
}

/* =============================================================================
   REDUCED TRANSPARENCY — some people cannot read text sitting over a busy
   backdrop. Give them the solid panel underneath everything this file made
   translucent. !important because it has to beat the rules above.
   ========================================================================== */
@media (min-width: 900px) and (prefers-reduced-transparency: reduce) {
  #tabbar,
  #backstrip,
  #backstrip #themeToggle,
  #inv-summary,
  .rack-section,
  .store-count,
  .rack-nav,
  .slot,
  .taken-note,
  .rack-section .fc-list-cta,
  .rm-card,
  .fcl-card,
  .fcl-input,
  .fcl-ghost,
  .toast {
    background: var(--panel) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .fcl-backdrop {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* =============================================================================
   REDUCED MOTION — the only motion this file adds is the slot hover fade, and
   it is decoration, never data. Strip it.
   ========================================================================== */
@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  .slot { transition: none !important; }
}