/* =============================================================================
   Better Yet — shared design system (the single source of truth).
   Link this FIRST in every page: <link rel="stylesheet" href="/styles.css" />.
   Pages may add page-specific rules in their own <style> AFTER this (those win).
   To change the look everywhere, edit HERE — do not redefine :root per page.
   ============================================================================= */

:root {
  /* Surfaces */
  --bg: #14161A;
  --panel: #1C1F26;
  --panel2: #242830;
  --line: #31363F;  /* divider/hairline ONLY (1.22–1.49, below 3:1) — a control's boundary is --control-outline, never this (E1, 2026-09-06) */
  /* Ink */
  --ink: #ECEAE3;
  --muted: #868D97;
  --muted2: #5D636C;
  /* Brand accent — Better Yet violet (brightened from #6B4EFF, Emeric 2026-08-06). Interactive CHROME
     only (links, buttons, active tab, focus, eyebrow). NEVER a training-status color. WCAG AA adopted
     2026-09-04 (knowledge/design-identity.md, supersedes the earlier not-strict-AA note): white-on-accent
     is 4.35 (fails AA), so label-bearing violet FILLS use --accent-dim (6.81), and small violet TEXT uses
     --accent-text (clears AA on bg/panel/panel2). The page CSS still converges onto these — see the
     design-identity convergence PR; the tokens are bound here now. */
  --accent: #7C5CFF;
  --accent-dim: #5A42CC;
  --on-accent: #FFFFFF;
  --accent-text: #9880F8;
  /* A11y control chrome (E1, 2026-09-06 — knowledge/design-identity.md accessibility contract).
     --control-outline is the boundary of every UNSELECTED control (secondary/ghost buttons, unselected
     selectables, inputs, chips, heatmap cells) — clears 3:1 on every surface (4.45/4.06/3.63), which
     --line (1.2:1) does not. --focus-ring is drawn 2px at 2px offset on :focus-visible only (clears 3:1
     on every surface and on --accent-dim, 6.81) and is never removed without a replacement ring.
     The page CSS converges onto these in a separate restyle PR; the tokens are bound here now. */
  --control-outline: #6F7F98;
  --focus-ring: #FFFFFF;
  /* Status semantics — amber = PARTIAL / caution, green = done, red = miss. Kept distinct from the
     brand accent so a WOD "partial" never turns violet. */
  --amber: #F5A524;
  --amber-dim: #8a6320;
  --green: #3DD68C;
  --red: #FF5A3C;
  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 14px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Accessibility base (E1, 2026-09-06 — knowledge/design-identity.md accessibility contract). ONE visible
   focus ring on keyboard focus, drawn as a 2px --focus-ring at 2px offset (a surface gap between the
   control and the ring); it clears 3:1 on every surface and on --accent-dim fills, and is NEVER removed
   without a replacement (a bare `outline: none` is banned). And the reduced-motion branch (Codex #13):
   non-essential animation/transition becomes immediate; an indeterminate spinner falls to a static state. */
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--ink);
  font-family: var(--font); font-variant-numeric: tabular-nums;
}
.wrap { max-width: 600px; margin: 0 auto; padding: 22px 14px 72px; }

/* Header atoms */
.eyebrow { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); font-weight: 800; }
h1 { margin: 6px 0 2px; font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.sub { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 0 6px; }

/* Card / panel */
.box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 14px 0; }
.box h2 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; font-weight: 800; }

/* Primary button */
.btn { background: var(--accent); border: none; color: var(--on-accent); border-radius: 11px; padding: 12px 20px;
  font-size: 14px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.btn:active { transform: scale(.99); }

/* Shared CTAs (account, event, and any page beyond Today). A page that styled a button with a class
   defined only in index.html's inline <style> — .addwork, .cta-solid — rendered it as a grey browser
   default on every other page (account + event, 2026-08-28). These live here so every page that links
   styles.css paints them identically: .primary = solid accent, .secondary = panel outline. */
.cta { display: inline-block; text-align: center; text-decoration: none; font-family: inherit;
  border: 1px solid transparent; border-radius: 11px; padding: 11px 16px;
  font-size: 14px; font-weight: 700; letter-spacing: .02em; cursor: pointer; }
.cta:active { transform: scale(.99); }
.cta.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cta.secondary { background: var(--panel2); border-color: var(--line); color: var(--ink); }

/* Text input */
.field { width: 100%; background: var(--panel2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 9px; padding: 11px 12px; font-size: 16px; font-family: inherit; }
.field:focus { border-color: var(--accent); }   /* affordance; the visible focus ring is the global :focus-visible rule above */
/* SELECT ARROW (crit A). The native OS caret renders black-on-graphite on the dark field — invisible.
   Draw our own in --muted (#868D97), and reserve room for it. `background-image` only, so it composes
   with `.field`'s `background` shorthand (which sets the color) instead of being wiped by it. */
select.field { -webkit-appearance: none; appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23868D97' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 8px; }

.msg { margin: 12px 0 0; font-size: 12px; color: var(--green); min-height: 1.1em; letter-spacing: .02em; }

/* -------- Primary navigation (Today / Progress / Coach / History) -------- */
.nav { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 6px;
  position: sticky; top: 0; z-index: 50; background: var(--bg); padding: 10px 0 8px; }
.nav a {
  flex: 0 0 auto; text-decoration: none;
  background: var(--panel2); border: 1px solid var(--line); color: #d7dce6;
  border-radius: 10px; padding: 9px 15px; font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.nav a.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.nav a:active { transform: scale(.98); }
/* "More ▾" overflow (nav.js folds secondary destinations here). Matches the .nav pill style. */
.navmore { flex: 0 0 auto; background: var(--panel2); border: 1px solid var(--line); color: #d7dce6;
  border-radius: 10px; padding: 9px 15px; font-size: 13px; font-weight: 700; letter-spacing: .02em;
  cursor: pointer; font-family: inherit; }
.navmore.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.navmenu { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.navmenu[hidden] { display: none; }
.navmenu a { flex: 0 0 auto; text-decoration: none; background: var(--panel2); border: 1px solid var(--line);
  color: #d7dce6; border-radius: 10px; padding: 9px 15px; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.navmenu a.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }