/* Racevo glass for the app surfaces: the portal first, then the director, stewards, live timing, commentator, team
 * page, agent panel, signup, hold and admin (docs/design/GLASS-APP.md is the guide). The values are the public site's
 * own (static/css/site.css keeps its own copy; tests/test_glass.py keeps the two the same). Not for the on-air graphics
 * (static/overlay, anything OBS shows) or the Visor cards in the game (static/visor): those keep their own look.
 *
 * Two levels.
 *   Glass on the frame: the top bar, the navigation, menus, dialogs, cards and panels. Only what floats over the page
 *   (the bar, a menu, a dialog, a sticky bar) blurs; a card on the page is a translucent plate with a hairline edge and
 *   a soft shadow, never a blur.
 *   Flat for dense content: tables, timing rows, lists and anything that updates many times a second sit on a solid
 *   surface inside the card, so the words read and no blur is ever drawn behind content that changes.
 * Without backdrop-filter, or for those who asked for less transparency, every glass layer is solid; for those who asked
 * for less motion nothing moves.
 */
:root {
  /* the palette: near-black graphite, cool white, volt as the accent, red only for LIVE and recording */
  --bg: #0a0b0d; --surface: #15171b; --line: #23262c; --line-2: #3a3e46;
  --text: #f4f5f2; --soft: #c9ccd1; --muted: #9ba0a8; --dim: #8a8f98;
  --volt: #d4ff00; --on-volt: #0a0b0d; --live: #d42a1e;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --mono: "JetBrains Mono", Consolas, monospace;
  /* the shapes */
  --r-xl: 28px; --r-lg: 22px; --r-md: 16px; --r-sm: 12px; --r-xs: 8px; --pill: 999px;
  --fl: clamp(10px, 1.6vw, 24px);                  /* the bar's float off the edges of the window */
  /* the glass (as the site's): the bar, then the menus and sheets (darker, for the words on them) */
  --glass: rgba(18, 20, 24, 0.72);
  --glass-2: rgba(16, 18, 22, 0.84);
  --glass-blur: blur(24px) saturate(1.8);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.28);
  --soft-shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.8);
  --fill: rgba(255, 255, 255, 0.07); --fill-2: rgba(255, 255, 255, 0.12);
  --plate: rgba(255, 255, 255, 0.03); --plate-edge: rgba(255, 255, 255, 0.08);
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  /* the app's own: the solid surface for dense content, and the edge of a plate drawn as a shadow (no layout change) */
  --flat: #0e0f12; --flat-2: #15171b;
  --plate-ring: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 0 1px var(--plate-edge);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: #15171b; --glass-2: #15171b; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: #15171b; --glass-2: #15171b; --glass-blur: none; --plate: #111215; --fill: #1c1f24; --fill-2: #24272d; }
}

/* ── glass on the frame ── */
/* the top bar: a capsule floating over the top of the page, sticky; the one blur most pages need */
.g-bar { position: sticky; top: 0; z-index: 20; border-radius: var(--pill); background: var(--glass-2);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow); }
/* a menu, a dialog, a sheet, a sticky bar at the foot: floats, so it blurs */
.g-pop { border-radius: var(--r-lg); background: var(--glass-2); color: var(--text);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow); }
/* a card or a panel on the page: a translucent plate, a hairline of light, a soft shadow; no blur */
.g-panel { border-radius: var(--r-lg); background: var(--plate); box-shadow: var(--plate-ring), var(--soft-shadow); }

/* the language menu, the site's own (static/css/site.css .lang): a round control in the bar, the code of the language in
   it; the list is a .g-pop. Plain links, so it works without script; SIMCUP_UI.langMenu marks the language and closes it.
   The codes are --soft, not the site's --dim: on a blurred layer only --text and --soft reach AA */
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); padding: 8px 14px; border-radius: var(--pill); background: var(--fill); }
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: translateY(-2px) rotate(45deg); }
.lang[open] summary::after { transform: translateY(1px) rotate(225deg); }
.lang summary:hover, .lang[open] summary { background: var(--fill-2); }
.lang ul { position: absolute; right: 0; top: calc(100% + 12px); z-index: 30; min-width: 210px; margin: 0; padding: 6px; list-style: none;
  transform-origin: 100% 0; }
.lang li { margin: 0; max-width: none; }
.lang li a { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 9px 16px; border-radius: var(--r-sm); color: var(--soft);
  text-decoration: none; font-size: 15px; font-weight: 400; white-space: nowrap; }
.lang li a:hover { color: var(--text); background: var(--fill-2); }
.lang li a b { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); }
.lang li a[aria-current="true"] { color: var(--text); background: var(--fill); }
.lang li a[aria-current="true"] b { color: var(--volt); }
@media (prefers-reduced-motion: no-preference) {
  .lang[open] ul { animation: g-pop-in 0.42s var(--ease) both; }
  .lang summary::after { transition: transform 0.25s var(--ease); }
}
@keyframes g-pop-in { from { opacity: 0; transform: translateY(-6px) scale(0.96); } }

/* ── flat for dense content ── */
/* tables, timing rows, lists, logs: solid, inside a panel; never under a blur, never translucent */
.g-flat { border-radius: var(--r-md); background: var(--flat); box-shadow: inset 0 0 0 1px var(--line); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    scroll-behavior: auto !important; }
}