/* Glass, one recipe for all of Runthrough (docs/GLASS-TRIAGE.md).
   Lifted from the editor's Studio palette: a tinted fill, a blur that lets the picture through, a lit
   top edge and a hairline, and a soft lift. Three strengths, thinnest first:
     veil   chrome over pictures: navigation pills, the deck viewer's chrome, chips on covers
     pane   cards and panels over a moving field
     sheet  menus, popovers, drawers (the editor's glass as it was)
   Use a class (.glass-veil, .glass-pane, .glass-sheet) or the tokens directly. Dark is the default;
   html[data-theme="light"] or any [data-glass="light"] ancestor switches to daylight values, and
   [data-glass="dark"] switches back for a dark island inside a light page.
   The veil also dims (or, in daylight, lifts) what is behind it, so white type on a thin veil still
   reads over the brightest frame; the pane and sheet are dense enough not to need it.
   Safari: blur is costly there, so glass goes on small fixed chrome and cards, never on a layer that
   covers a whole scrolling page, and radii stay modest (18 and 24px). */
:root, [data-glass="dark"] {
  --glass-veil: rgba(18,18,20,.38); --glass-veil-blur: blur(18px) saturate(1.6) brightness(.72);
  --glass-pane: rgba(22,22,25,.62); --glass-pane-blur: blur(24px) saturate(1.4);
  --glass-sheet: rgba(24,24,27,.78); --glass-sheet-blur: blur(24px) saturate(1.4);
  --glass-rim: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.06);
  --glass-lift: 0 16px 40px -16px rgba(0,0,0,.6);
  --glass-lift-deep: 0 30px 80px -20px rgba(0,0,0,.8);
  --glass-ink: #f5f5f4; --glass-ink-2: rgba(245,245,244,.66); --glass-hover: rgba(255,255,255,.1);
  --glass-solid: #18181b;
}
html[data-theme="light"], [data-glass="light"] {
  --glass-veil: rgba(255,255,255,.52); --glass-veil-blur: blur(18px) saturate(1.6) brightness(1.1);
  --glass-pane: rgba(255,255,255,.66); --glass-pane-blur: blur(24px) saturate(1.4);
  --glass-sheet: rgba(255,255,255,.82); --glass-sheet-blur: blur(24px) saturate(1.4);
  --glass-rim: inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(0,0,0,.06);
  --glass-lift: 0 16px 40px -16px rgba(0,0,0,.2);
  --glass-lift-deep: 0 24px 60px -20px rgba(0,0,0,.18);
  --glass-ink: #292929; --glass-ink-2: #5d5d5d; --glass-hover: rgba(0,0,0,.06);
  --glass-solid: #ffffff;
}
[data-glass="dark"] { color-scheme: dark; }

.glass-veil, .glass-pane, .glass-sheet { border: 0; box-shadow: var(--glass-rim), var(--glass-lift); }
.glass-veil { background: var(--glass-veil); backdrop-filter: var(--glass-veil-blur); -webkit-backdrop-filter: var(--glass-veil-blur); }
.glass-pane { background: var(--glass-pane); backdrop-filter: var(--glass-pane-blur); -webkit-backdrop-filter: var(--glass-pane-blur); }
.glass-sheet { background: var(--glass-sheet); backdrop-filter: var(--glass-sheet-blur); -webkit-backdrop-filter: var(--glass-sheet-blur); box-shadow: var(--glass-rim), var(--glass-lift-deep); }

/* Without a blur, or when someone asks for less transparency, glass becomes a solid surface */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-veil, .glass-pane, .glass-sheet { background: var(--glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass-veil, .glass-pane, .glass-sheet { background: var(--glass-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
}