/* QWTF Play site chrome: palette tokens, skip link and the header (wordmark,
   section nav, sign-in menu). Shared by every page, including the record
   page that does not load main.css, so the header is identical everywhere.
   See docs/DESIGN.md. */

:root {
  --bg-0: #15110e; --bg-1: #1c1613; --bg-2: #261e19; --bg-3: #322822;
  --line: #3a2e26; --line-strong: #55443a;
  --text: #f2e9d8; --text-2: #cfc2aa; --muted: #9a8c78;
  --ember: #ff7a1f; --ember-hot: #ffa052; --ember-ink: #1a0f08; --ember-soft: rgba(255, 122, 31, 0.14);
  --brass: #e2b24c; --live: #8fe388;
  --team-blue: #4d8dff; --team-red: #ff4a3d;
  --display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --sans: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Chivo Mono', ui-monospace, 'Cascadia Mono', Menlo, monospace;
  --wrap: 1280px; --gutter: clamp(1rem, 4vw, 3rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --radius: 4px;
  /* Legacy token names: every subpage and inline stylesheet written for the
     teal system keeps working, but renders in this palette. */
  --ink: var(--bg-0); --panel: var(--bg-1); --cyan: var(--ember); --cyan-dim: #c4601a;
  --gold: var(--brass); --teal: #c4601a; --dim: var(--muted);
}
@supports (color: oklch(50% 0.1 50)) {
  :root {
    --bg-0: oklch(14% 0.012 55); --bg-1: oklch(17% 0.014 55); --bg-2: oklch(21% 0.016 55); --bg-3: oklch(26% 0.018 55);
    --line: oklch(31% 0.02 55); --line-strong: oklch(42% 0.025 55);
    --text: oklch(94% 0.02 85); --text-2: oklch(82% 0.025 80); --muted: oklch(66% 0.03 75);
    --ember: oklch(72% 0.2 48); --ember-hot: oklch(80% 0.17 65); --brass: oklch(80% 0.13 85);
  }
}

.skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 100; padding: 0.65rem 0.9rem;
  background: var(--ember); color: var(--ember-ink); border-radius: var(--radius); font: 600 0.85rem var(--mono);
  transform: translateY(calc(-100% - 1rem)); transition: transform 120ms ease; }
.skip-link:focus-visible { transform: translateY(0); }

/* ---- top bar ---------------------------------------------------------- */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1.5rem; padding: 0.7rem var(--gutter);
  background: color-mix(in srgb, var(--bg-0) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; align-items: center; gap: 0.5rem; font: 800 1.35rem var(--display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); white-space: nowrap; }
.wordmark:hover { text-decoration: none; color: var(--text); }
.wordmark-mark { color: var(--brass); font-size: 1.3em; line-height: 1; transform: translateY(-0.04em); }
.nav-links { display: flex; gap: 0.2rem; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.75rem; font: 500 0.82rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); border-radius: var(--radius); white-space: nowrap; }
.nav-links a:hover { color: var(--text); background: var(--bg-2); text-decoration: none; }
.nav-links a[aria-current="true"] { color: var(--ember); }
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ember); transform-origin: left; transform: scaleX(0); }

.auth-slot { position: relative; flex: none; }
.auth-menu summary { list-style: none; display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; padding: 0.35rem 0.9rem 0.35rem 0.5rem;
  border: 1px solid var(--line-strong); border-radius: 999px; font: 600 0.82rem var(--mono); color: var(--text); cursor: pointer; white-space: nowrap; }
.auth-menu summary::-webkit-details-marker { display: none; }
.auth-menu summary:hover { border-color: var(--ember); }
.auth-avatar { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--bg-3); display: grid; place-items: center; overflow: hidden; color: var(--brass); font-size: 0.95rem; }
.auth-avatar img { width: 100%; height: 100%; object-fit: cover; }
.auth-menu[open] summary { border-color: var(--ember); }
.auth-panel { position: absolute; right: 0; top: calc(100% + 0.5rem); width: min(20rem, calc(100vw - 2rem)); padding: 0.9rem; display: grid; gap: 0.5rem;
  background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
.auth-provider { display: flex; align-items: center; gap: 0.7rem; min-height: 2.75rem; padding: 0.5rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); font: 600 0.88rem var(--mono); }
.auth-provider:hover { text-decoration: none; border-color: var(--ember); background: var(--bg-3); color: var(--text); }
.auth-provider::before { content: ''; width: 0.6rem; height: 0.6rem; border-radius: 2px; background: var(--brass); flex: none; }
.auth-discord::before { background: var(--team-blue); }
.auth-provider[hidden] { display: none; }
.auth-note { font-size: 0.78rem; color: var(--muted); line-height: 1.45; }
.auth-identity { display: grid; gap: 0.15rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--line); }
.auth-identity strong { font: 700 0.95rem var(--sans); }
.auth-identity span { font: 400 0.75rem var(--mono); color: var(--muted); }
.auth-logout { width: 100%; }
.topbar p { margin: 0; }
.topbar a, .topbar summary { box-sizing: border-box; }

@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: 0.6rem 1rem; padding: 0.6rem 1rem; }
  /* Six sections in two rows of three: every link visible, nothing cut off. */
  .nav-links { order: 3; flex-basis: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.15rem; margin: 0; overflow: visible; }
  .nav-links a { justify-content: center; min-height: 2.5rem; padding: 0 0.25rem; font-size: 0.74rem; }
  .auth-slot { margin-left: auto; }
  .auth-menu summary { padding: 0.3rem 0.7rem 0.3rem 0.4rem; }
}