/* glass.css — the shared glass surface system for gifts.wtf.
 *
 * ONE place that defines what "glass" means here, so every tab reads as the same
 * material instead of ten hand-rolled translucencies. Per-tab sheets layer on top
 * of these tokens and classes; they should not invent their own blur values.
 *
 * PERFORMANCE RULE, read before extending this file:
 *   backdrop-filter forces a separate compositing layer and re-blurs on scroll.
 *   The Gifts grid renders hundreds of cards at once, so glass is applied to
 *   CHROME ONLY: the nav rail, the sticky bars, modals, sheets, filter rails and
 *   panels. Grid cards get a flat translucent fill with NO blur. Putting
 *   backdrop-filter on a 400-card grid drops scrolling to single-digit fps on an
 *   ordinary laptop, which is a worse outcome than the effect is worth.
 *
 * THEME: colours resolve from the existing palette tokens (--panel, --void,
 * --hairline, --ink-*, --p300/--p400), so glass themes itself in both the WTF
 * (light) and dark modes without a second palette.
 *
 * FALLBACK: browsers without backdrop-filter get a solid --panel via @supports,
 * so text never lands on a transparent background and becomes unreadable.
 */

:root {
  /* the material */
  --glass-blur: 16px;
  --glass-sat: 165%;
  --glass-fill: color-mix(in srgb, var(--panel) 62%, transparent);
  --glass-fill-strong: color-mix(in srgb, var(--panel) 84%, transparent);
  --glass-edge: color-mix(in srgb, var(--hairline-2) 78%, transparent);
  --glass-sheen: color-mix(in srgb, #fff 12%, transparent);
  --glass-shadow: 0 10px 34px -14px var(--shadow-card, rgba(0, 0, 0, .5));
}

/* Dark mode wants a slightly heavier fill: a thin translucency over a dark page
   reads as muddy rather than glassy. */
:root[data-theme="dark"] {
  --glass-fill: color-mix(in srgb, var(--panel) 72%, transparent);
  --glass-fill-strong: color-mix(in srgb, var(--panel) 90%, transparent);
  --glass-sheen: color-mix(in srgb, #fff 7%, transparent);
}

/* ---------------------------------------------------------------- surfaces */

.gw-glass,
.gw-glass-strong {
  position: relative;
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
}
.gw-glass-strong { background: var(--glass-fill-strong); }

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .gw-glass,
  .gw-glass-strong {
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  }
}
/* No backdrop-filter: fall back to an opaque panel so nothing is unreadable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gw-glass,
  .gw-glass-strong { background: var(--panel); }
}

/* the top light-catch every real glass panel has */
.gw-glass-sheen::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-sheen) 22%, var(--glass-sheen) 78%, transparent);
  pointer-events: none;
}

/* ------------------------------------------------------------------ chrome */

/* The desktop rail, the sticky topbar and the tab strip are the three surfaces
   that sit over scrolling content, so they are the ones that benefit most. */
@media (min-width: 1100px) {
  #gwSideNav {
    background: var(--glass-fill-strong);
    border-right: 1px solid var(--glass-edge);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    #gwSideNav {
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
      backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    }
  }
  /* the rail's active row reads as lit glass rather than a flat fill */
  #gwSideNav a.gwsn-on {
    background: color-mix(in srgb, var(--p400) 15%, transparent);
    box-shadow: inset 2px 0 0 var(--p400);
  }
}

#topbar {
  background: var(--glass-fill-strong);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  #topbar {
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  }
}

/* -------------------------------------------------------- modals and sheets */

.agg-modal,
.gw-sheet,
.iv-sheet {
  background: var(--glass-fill-strong);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .agg-modal,
  .gw-sheet,
  .iv-sheet {
    -webkit-backdrop-filter: blur(22px) saturate(var(--glass-sat));
    backdrop-filter: blur(22px) saturate(var(--glass-sat));
  }
}

/* ------------------------------------------------------------------ inputs */

.gw-glass-input {
  background: color-mix(in srgb, var(--well) 70%, transparent);
  border: 1px solid var(--glass-edge);
  color: var(--ink-hi);
}
.gw-glass-input:focus {
  outline: none;
  border-color: var(--p300);
  box-shadow: 0 0 0 3px var(--tint-weak);
}

/* ----------------------------------------------------------------- buttons */

.gw-glass-btn {
  background: color-mix(in srgb, var(--panel) 55%, transparent);
  border: 1px solid var(--glass-edge);
  color: var(--ink-hi);
  border-radius: 10px;
  transition: background .15s ease, border-color .15s ease;
}
.gw-glass-btn:hover {
  background: color-mix(in srgb, var(--hover) 75%, transparent);
  border-color: var(--p300);
}

/* ------------------------------------------------------------- grid tiles --
   Deliberately blur-free (see the performance rule at the top): a translucent
   fill and a lit edge give the same family look at a fraction of the cost. */
.gw-glass-tile {
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  border: 1px solid var(--glass-edge);
  border-radius: 12px;
}
.gw-glass-tile:hover {
  border-color: color-mix(in srgb, var(--p300) 55%, transparent);
}

/* ---- FOCUS VISIBILITY (accessibility fix) --------------------------------
   The glass input recipe set `outline:none` and replaced the browser's focus
   ring with border-color + a tinted halo. Measured in the light theme, that
   halo is 1.06:1 against the panel and the border 2.75:1 (3:1 is the floor for
   a non-text indicator), so keyboard users had effectively NO visible focus on
   the Gifts filter rail, the Auctions inputs and the landing search.

   This restores a real ring on every glass-recipe control. !important is
   deliberate: the rules being corrected live in a stylesheet that loads after
   this one, and an invisible focus state is not a style preference to be
   negotiated by source order. */
#gwIntro .gi-input:focus-visible,
.gw-glass-input:focus-visible,
.agg-sel:focus-visible,
.agg-num:focus-visible,
.agg-input:focus-visible,
.agg-toggle:focus-visible,
.gw-glass-btn:focus-visible {
  outline: 2px solid var(--p400) !important;
  outline-offset: 2px !important;
}

/* ---- STILL MASTHEAD ------------------------------------------------------
   The Scared Cat band across the top ran `gwCatDrift 70s linear infinite`,
   animating background-position-x on a full-width repeating image. That is a
   continuous full-width repaint for as long as the tab is open, on every page,
   forever, and it never stops to let the main thread breathe. It is the single
   cheapest frame to buy back, so the band is now still. The artwork is
   unchanged; only the drift is gone. */
.gw-print {
  animation: none !important;
}

/* ---- PORTAL: #GRAMSUPERCYCLE was clipping -------------------------------
   .pg-tag paints a moving gradient through `background-clip:text` on a tight
   inline-block. With no padding the glyph box crops the tall/─wide characters,
   and on small screens .pg-card is overflow:hidden so the overhang is cut.
   The portal injects its stylesheet at runtime, so this needs one extra level
   of specificity (.pg-root .pg-tag) to land after it. */
.pg-root .pg-tag {
  padding: 0.08em 0.16em;
  line-height: 1.32;
  overflow: visible;
}

/* Respect a reduced-transparency preference: some people get motion sick or
   simply cannot read text over a busy backdrop. Give them solid surfaces. */
@media (prefers-reduced-transparency: reduce) {
  .gw-glass,
  .gw-glass-strong,
  .agg-modal,
  .gw-sheet,
  .iv-sheet,
  #topbar,
  #gwSideNav {
    background: var(--panel) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}