/* SCOPED TO DESKTOP BY THE LEAD.
   This sheet originally applied its glass unscoped, which would have changed
   phone rendering and, worse, put a backdrop-filter on the sticky #tabbar so it
   re-blurred on every scroll frame on a phone GPU. The whole sheet is wrapped in
   a desktop media query; the nested min-width blocks simply AND with it. */
@media (min-width: 900px) {
/* =============================================================================
   glass/usernames.css — the glass + desktop-layout layer for THE PRINCE OF
   PROXY roster (/users, usernames.html).

   PURELY ADDITIVE. Every rule here overrides a declaration that already exists
   in usernames.css / theme.css; nothing in those files was edited. Load order
   must be:  theme.css  →  glass.css  →  usernames.css  →  glass/usernames.css

   WHAT IT DOES
     1. Puts the shared gifts.wtf glass material (glass.css tokens) on this
        page's chrome so /users stops looking like a different product from the
        main SPA: the tab bar, the back strip, the stat panels, the filter rail,
        the modals and the toast.
     2. Gives everything that REPEATS the blur-free tile treatment instead —
        listing cards, filter chips, vouch rows, the A–Z list. See the
        performance rule at the top of glass.css: backdrop-filter on a few
        hundred grid children re-blurs on every scroll frame.
     3. Retires the hardcoded #F06AAE / #E0392B literals scattered through the
        Big Rack by pointing them at --p300 / --p400, so the dark theme gets the
        legible end of the ramp instead of the light-theme hex.
     4. Improves the layout: one shared gutter for the tab bar and back strip,
        a hero column that lines up with the sections under it, a sticky tab
        bar, goat headers as real storefront cards, a grouped filter rail, a
        right-grouped rack foot, and a capped Big Rack so it stops sprawling on
        ultrawide displays.

   MOBILE IS UNTOUCHED. The whole sheet sits inside the desktop media query at
   the top of the file, so below 900px nothing here matches and the phone gets
   usernames.css exactly as it shipped. The nested min-width blocks below AND
   with that wrapper; §7's 1000px block is the breakpoint usernames.css already
   uses for the Big Rack sidebar, so its overrides land on the same rules.

   TOKEN FALLBACKS: each var() below carries the glass.css value as its
   fallback, so if glass.css has not been linked into usernames.html yet the
   page still renders readable surfaces instead of transparent ones. The
   fallbacks never override glass.css — they only fire when it is absent.
   ========================================================================== */

/* =============================================================================
   1 · CHROME — real glass. These are single-instance surfaces that sit over
   scrolling content, which is exactly what backdrop-filter is worth paying for.
   ========================================================================== */

#tabbar,
#backstrip {
  background: var(--glass-fill-strong, color-mix(in srgb, var(--panel) 84%, transparent));
  border-bottom-color: var(--glass-edge, var(--hairline-2));
}

/* #hero-stats already carried a 4px backdrop-filter, so promoting it to the
   shared token adds no new compositing layer, only the right radius. It does
   sit over the drifting .hero-grid, which repaints anyway; two panels is the
   whole budget here, which is why nothing below gets a blur. */
#hero-stats,
.um-stats {
  background: var(--glass-fill, color-mix(in srgb, var(--panel) 62%, transparent));
  border-color: var(--glass-edge, var(--hairline-2));
  box-shadow: var(--glass-shadow, 0 10px 34px -14px rgba(0, 0, 0, .5));
}

/* the toast keeps its accent ring on purpose: it is a transient notice that has
   to read instantly, so only its fill becomes glass. */
.toast {
  background: var(--glass-fill-strong, color-mix(in srgb, var(--panel) 84%, transparent));
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  #tabbar,
  #backstrip,
  #hero-stats,
  .um-stats,
  .toast {
    -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(var(--glass-sat, 165%));
    backdrop-filter: blur(var(--glass-blur, 16px)) saturate(var(--glass-sat, 165%));
  }
}

/* No backdrop-filter support: fall back to an opaque panel so the sticky tab
   bar never lets body copy scroll through it illegibly. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #tabbar,
  #backstrip,
  #hero-stats,
  .um-stats,
  .toast {
    background: var(--panel);
  }
}

/* the active section reads as a lit pane of the bar, not just an underline */
.tab[aria-selected="true"] {
  background: color-mix(in srgb, var(--p400) 10%, transparent);
}

/* top light-catch on the tab bar, same gradient glass.css uses for .gw-glass-sheen */
#tabbar {
  box-shadow: inset 0 1px 0 var(--glass-sheen, color-mix(in srgb, #fff 12%, transparent));
}

/* =============================================================================
   2 · MODALS + SCRIMS — heavier glass, matching glass.css's .agg-modal family.
   Three dialogs on this page (proxy preview, vouches, ALL A–Z) each rolled
   their own surface; they are one material now.
   ========================================================================== */

.bm-card,
.vch-card,
.brall-card {
  background: var(--glass-fill-strong, color-mix(in srgb, var(--panel) 90%, transparent));
  border-color: var(--glass-edge, var(--hairline-2));
  box-shadow: var(--glass-shadow, 0 30px 80px rgba(0, 0, 0, .6));
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .bm-card,
  .vch-card,
  .brall-card {
    -webkit-backdrop-filter: blur(22px) saturate(var(--glass-sat, 165%));
    backdrop-filter: blur(22px) saturate(var(--glass-sat, 165%));
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bm-card,
  .vch-card,
  .brall-card { background: var(--panel); }
}

/* one scrim depth across all three, instead of 3px / 3px / 8px */
.bm-backdrop,
.vch-back,
.brall-back {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* the segmented vouch switch is a well, not a panel */
.vch-seg {
  background: color-mix(in srgb, var(--well) 70%, transparent);
  border-color: var(--glass-edge, var(--hairline-2));
}

/* =============================================================================
   3 · TILES — everything that repeats. Translucent fill, lit edge, NO blur.
   These are the .gw-glass-tile values, applied by selector because the markup
   is generated and cannot take the utility class from here.
   ========================================================================== */

.um-card,
.brall-item,
.vch-item,
.vch-bub,
.vs-card,
.cat-chip,
.um-tab,
.gb,
.br-arrow {
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  border-color: var(--glass-edge, var(--hairline-2));
}

/* border-color above is a four-sided shorthand-killer, so the vouch row's green
   left rule has to be put back or every vouch loses its accent bar. */
.vch-item { border-left-color: var(--gain); }

/* .vs-card keeps its royal corner wash, layered over the tile fill */
.vs-card {
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--royal) 12%, transparent), transparent 60%),
    color-mix(in srgb, var(--panel) 78%, transparent);
}

.um-card:hover,
.brall-item:hover,
.cat-chip:hover,
.um-tab:hover {
  border-color: color-mix(in srgb, var(--p300) 55%, transparent);
}

.brall-item:hover {
  background: color-mix(in srgb, var(--p300) 8%, color-mix(in srgb, var(--panel) 78%, transparent));
}

/* selected chips keep their accent, just on the shared surface */
.cat-chip.is-on,
.um-tab.is-on {
  background: color-mix(in srgb, var(--hover) 82%, transparent);
  border-color: var(--p300);
}

/* =============================================================================
   4 · SECONDARY BUTTONS + INPUTS — the .gw-glass-btn / .gw-glass-input feel,
   without changing any control's box size.
   ========================================================================== */

.um-more,
.br-all,
.bm-cancel,
.um-offer,
.um-view {
  background: color-mix(in srgb, var(--panel) 55%, transparent);
  border-color: var(--glass-edge, var(--hairline-2));
}
.um-more:hover,
.br-all:hover,
.bm-cancel:hover,
.um-offer:hover,
.um-view:hover {
  background: color-mix(in srgb, var(--hover) 75%, transparent);
  border-color: var(--p300);
}

.um-search,
.um-sort,
.br-search {
  background: color-mix(in srgb, var(--well) 70%, transparent);
  border-color: var(--glass-edge, var(--hairline-2));
}
.um-search:focus,
.um-sort:focus {
  border-color: var(--p300);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p300) 22%, transparent);
}

/* =============================================================================
   5 · PALETTE REPAIR — the Big Rack shipped with the WTF-theme hexes baked in,
   so dark mode got light-theme pink/red. Same colour in WTF (--p300 IS
   #F06AAE), the legible end of the ramp in dark.
   ========================================================================== */

.br-search:focus { outline-color: var(--p300); }
.br-all:hover { color: var(--p400); }
.br-side-n,
.brall-n { background: var(--p300); color: var(--on-accent); }
.br-arrow:hover { background: var(--p300); color: var(--on-accent); border-color: var(--p300); }
.br-fchip {
  border-color: var(--p300);
  background: color-mix(in srgb, var(--p300) 12%, transparent);
}
.br-fchip .br-x { color: var(--p400); }
.br-fchip.br-reset {
  border-color: var(--glass-edge, var(--hairline-2));
  background: color-mix(in srgb, var(--well) 70%, transparent);
}
/* BIN prices in the A–Z list were a fixed brown that vanishes on dark */
.brall-p.is-bin { color: var(--sweep); }

/* =============================================================================
   6 · LAYOUT. Kept in its own min-width block so the geometry stays separable
   from the material above it even though the whole sheet is desktop-scoped.
   ========================================================================== */
@media (min-width: 900px) {

  /* --- 6a · ONE GUTTER FOR THE CHROME. The brand bar sat at clamp(14px,3vw,40px),
     the tab bar at 12px and the back strip at 16px, so the top of the page
     stair-stepped three times before the content even started. All three now
     share the brand bar's gutter, which is also the gutter the main SPA's
     header uses, so /users stops reading as a different product. ----------- */
  #tabbar,
  #backstrip {
    padding-inline: clamp(14px, 3vw, 40px);
  }

  /* the hero column was capped at 1120 with no padding while every section
     below is 1120 minus a 20px inset, so the headline never lined up with the
     goat names under it. 1080 puts them on the same left edge at every width. */
  .hero-inner { max-width: 1080px; }

  /* --- 6b · STICKY TAB BAR, matching the main SPA's #tabbar. The section nav
     is the one control you want while scrolling a 1,100-handle book. -------- */
  #tabbar {
    position: sticky;
    top: 0;
    z-index: 30;
  }
  .pop-sect { scroll-margin-top: 58px; }

  /* --- 6c · SPACING SCALE. 40 / 20 / 14 instead of 34 / 20 / 10 + 6 + 16. --- */
  #hero { padding-block: 48px 44px; }
  .hero-inner { gap: 44px; }
  .pop-sect { padding-block: 40px 20px; }

  /* --- 6d · GOAT HEADER as a storefront card. Five of these, so tile fill and
     no blur. Aligns the avatar, the name block and the CTA on one baseline
     instead of letting them float in the section's dead space. ------------- */
  .goat-head {
    align-items: flex-start;
    gap: 18px;
    padding: 18px 20px;
    margin-bottom: 14px;
    border: 1px solid var(--glass-edge, var(--hairline-2));
    border-radius: 16px;
    background: color-mix(in srgb, var(--panel) 78%, transparent);
  }
  .goat-tag { max-width: 62ch; }

  /* --- 6e · @usernism FILTER RAIL. Search + type tabs + sort were three loose
     controls floating on the page background; grouped into one rail they read
     as the marketplace's chrome. One instance on the page, so it earns the
     blur. ------------------------------------------------------------------ */
  .um-controls {
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--glass-edge, var(--hairline-2));
    border-radius: 14px;
    background: var(--glass-fill, color-mix(in srgb, var(--panel) 62%, transparent));
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .um-controls {
      -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(var(--glass-sat, 165%));
      backdrop-filter: blur(var(--glass-blur, 16px)) saturate(var(--glass-sat, 165%));
    }
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .um-controls { background: var(--panel); }
  }
  .um-searchwrap { max-width: 320px; }

  /* --- 6f · LISTING GRID. Slightly wider minimum and a matched 14px gutter so
     the columns line up with the 14px rhythm above; align-content:start stops
     a short result set from stretching its rows. --------------------------- */
  .um-grid {
    grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
    gap: 14px;
    align-content: start;
  }
  .um-card { padding: 16px; gap: 10px; }
  /* reserve the chip row so every handle in a row starts on the same line */
  .um-card-top { min-height: 20px; }

  /* --- 6g · RACK FOOT. Hint left, controls grouped right, and the controls
     look like controls: the BIN/Browse/Vouches buttons were bare text links
     next to a pill-shaped active state. ------------------------------------ */
  .rack-foot:not(.br-foot) {
    justify-content: flex-end;
    margin-top: 12px;
  }
  .rack-foot:not(.br-foot) .rack-hint { margin-right: auto; }
  .rack-more {
    padding: 7px 13px;
    border: 1px solid var(--glass-edge, var(--hairline-2));
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel) 55%, transparent);
  }
  .rack-more:hover {
    text-decoration: none;
    background: color-mix(in srgb, var(--hover) 75%, transparent);
    border-color: var(--p300);
  }

  /* --- 6h · BIG RACK HEAD. The title block gets to shrink so the two buttons
     never wrap onto their own row, and the heading joins the page's display
     face instead of falling back to the UI font. --------------------------- */
  .br-title-wrap { flex: 1 1 340px; min-width: 0; }
  .br-title {
    font-family: var(--font-bubble, "Fredoka", "Baloo 2", system-ui, sans-serif);
    letter-spacing: .01em;
  }
  .br-sub { max-width: 58ch; }
  .br-all { padding: 10px 16px; }

  /* --- 6i · TIGHTEN. The vouch and A–Z lists were on a different gutter from
     everything else. ------------------------------------------------------- */
  .brall-list { gap: 9px; }
  .vch-list { gap: 9px; }
}

/* =============================================================================
   7 · BIG RACK DESKTOP (>= 1000px) — the breakpoint where usernames.css turns
   #bigrack into a sidebar grid. Overrides stay on that same breakpoint.
   ========================================================================== */
@media (min-width: 1000px) {

  /* It broke the 1120px cap on purpose to fit the rail plus three reels, but
     with no cap at all it sprawls to the full width of an ultrawide monitor
     while every other section stays at 1120. 1560 fits rail + reels and stops. */
  #bigrack {
    max-width: 1560px;
    column-gap: 28px;
  }

  /* the rail is the page's one sticky panel over scrolling content: real glass,
     re-seated under the now-sticky tab bar. */
  #brRows {
    top: 58px;
    max-height: calc(100vh - 78px);
    background: var(--glass-fill, color-mix(in srgb, var(--panel) 62%, transparent));
    border-color: var(--glass-edge, var(--hairline-2));
    box-shadow: var(--glass-shadow, 0 10px 34px -14px rgba(0, 0, 0, .5));
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    #brRows {
      -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(var(--glass-sat, 165%));
      backdrop-filter: blur(var(--glass-blur, 16px)) saturate(var(--glass-sat, 165%));
    }
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #brRows { background: var(--panel); }
  }
  .br-side-head { border-bottom-color: var(--glass-edge, var(--hairline-2)); }
  .br-side-tog {
    border-color: var(--glass-edge, var(--hairline-2));
    background: color-mix(in srgb, var(--panel) 55%, transparent);
  }
  .br-side-tog:hover {
    background: color-mix(in srgb, var(--hover) 75%, transparent);
    border-color: var(--p300);
  }
  .br-lab { border-bottom-color: var(--glass-edge, var(--hairline-2)); }

  /* the search bar sat at 15px/13px padding, a size larger than every other
     control on the page. */
  .br-search {
    padding: 11px 15px;
    font-size: 14px;
  }

  /* the reels were pinned at 560px whatever the display; on a tall screen that
     left a band of empty page under them. renderReels() re-reads clientHeight
     and rebuilds its slot count, so a taller reel just shows more handles. */
  .br-reels { height: clamp(560px, calc(100vh - 250px), 736px); }
}

/* =============================================================================
   8 · REDUCED TRANSPARENCY — mirrors glass.css. Anyone who has asked their OS
   for solid surfaces gets them; the tile fills stay, only the blurs go.
   ========================================================================== */
@media (prefers-reduced-transparency: reduce) {
  #tabbar,
  #backstrip,
  #hero-stats,
  .um-stats,
  .toast,
  .bm-card,
  .vch-card,
  .brall-card,
  .um-controls,
  #brRows {
    background: var(--panel) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .bm-backdrop,
  .vch-back,
  .brall-back {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

}