/* ============================================================
   OFFSEASON V2 — design system, round 2 (2026-07 redesign)
   ------------------------------------------------------------
   Namespaced --os-* / .os-* so it can ship beside the live
   bw-* system during migration. Rationale + rollout plan:
   docs/REDESIGN_2026-07.md.

   Round-2 feedback applied (Calvin):
   - Neutral light background, NOT cream (cream + navy/red read retro).
   - Coral stays the original salmon #F59C9C family, not redder.
   - The original soccer-kit logo, unmodified.
   - Hairline rules everywhere; NO bold navy borders under headers
     or inside components. A defined outer border on artifact cards
     (the market board) is OK.
   - Flatter: no offset "stamp" shadows on buttons/cards.
   - Content pivoted fantasy-league-first (see SEASONS_EVENTS.md,
     SIDE_BETS.md): league HQ + seasons/events + side bets.
   ============================================================ */

:root {
  /* Tell the UA which scheme our surfaces use so native selects, scrollbars,
     and autofill match the page instead of rendering light inside dark. */
  color-scheme: light;

  /* Surfaces (light default, neutral) */
  --os-paper: #FAFAFA;
  --os-sheet: #FFFFFF;
  --os-tint: #F4F4F6;
  --os-tint-2: #E9EAEE;

  /* Ink */
  --os-ink: #1B2D4F;
  --os-ink-2: #4A5876;
  --os-ink-3: #6B7590;            /* muted; darkened from #8E97AB to clear 4.5:1 on --os-paper */
  --os-rule: rgba(27, 45, 79, 0.14);
  --os-rule-soft: rgba(27, 45, 79, 0.07);
  --os-frame: #33456B;            /* artifact-card outer border, the one allowed navy line */

  /* Signal — the original salmon/coral family */
  --os-coral: #F59C9C;
  --os-coral-bright: #FAB5B5;
  --os-coral-deep: #E07676;
  --os-coral-text: #C24848;       /* readable coral for text on light (darkened for AA at body sizes) */
  --os-coral-wash: #FCE9E7;
  --os-coral-faint: #FDF4F2;
  --os-on-coral: #1B2D4F;         /* navy text on salmon buttons, both themes */

  /* Market data only — never chrome */
  --os-aqua: #2FA8C4;
  --os-aqua-deep: #0E7C9B;
  --os-aqua-wash: #DDF0F5;

  /* Status */
  --os-good: #0B8A5C;
  --os-bad: #C4372F;

  /* Type */
  --os-display: 'Inter Tight', -apple-system, sans-serif;
  --os-wordmark: 'Inter Tight', -apple-system, sans-serif;
  --os-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --os-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* Geometry */
  --os-r-sm: 5px;
  --os-r-md: 9px;
  --os-r-pill: 999px;
  --os-container: 1160px;

  /* Motion */
  --os-fast: 0.15s ease;
  --os-base: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  color-scheme: dark;
  --os-paper: #0A0E1A;
  --os-sheet: #121826;
  --os-tint: #1A2234;
  --os-tint-2: #232D44;
  --os-ink: #F2F5FA;
  --os-ink-2: #B4BDD0;
  --os-ink-3: #76819C;
  --os-rule: rgba(242, 245, 250, 0.16);
  --os-rule-soft: rgba(242, 245, 250, 0.08);
  --os-frame: #55688F;
  --os-coral-wash: rgba(245, 156, 156, 0.16);
  --os-coral-faint: rgba(245, 156, 156, 0.07);
  --os-coral-text: #F59C9C;
  --os-aqua-wash: rgba(47, 168, 196, 0.18);
  --os-good: #35B586;
  --os-bad: #E2635B;
}

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */
html:has(> body > .os-page), html:has(> body > .os-page) body { margin: 0; padding: 0; }
.os-page, .os-page * { box-sizing: border-box; margin: 0; padding: 0; }
.os-page {
  font-family: var(--os-body);
  background: var(--os-paper);
  color: var(--os-ink);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background var(--os-base), color var(--os-base);
}
.os-page a { color: inherit; text-decoration: none; }
.os-page ::selection { background: var(--os-coral-wash); }
.os-container { max-width: var(--os-container); margin: 0 auto; padding: 0 1.5rem; }

/* Skip-to-content link: off-screen until focused. */
.os-skip-link {
  position: fixed; top: 0.5rem; left: 0.5rem; z-index: 2000;
  background: var(--os-sheet); color: var(--os-ink);
  border: 1px solid var(--os-frame); border-radius: var(--os-r-md);
  padding: 0.55rem 0.9rem; font-size: 0.9rem; font-weight: 600;
  text-decoration: none; transform: translateY(-160%); transition: transform var(--os-fast);
}
.os-skip-link:focus { transform: translateY(0); outline: 2px solid var(--os-coral); outline-offset: 2px; }

/* Typography helpers */
.os-label {
  font-family: var(--os-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--os-ink-2);
}
.os-label--coral { color: var(--os-coral-text); }
.os-num { font-family: var(--os-mono); font-variant-numeric: tabular-nums; }
.os-display-xl {
  font-family: var(--os-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 6.2vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.os-display-lg {
  font-family: var(--os-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.os-display-md {
  font-family: var(--os-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.15;
}
.os-lede { font-size: 1.0625rem; color: var(--os-ink-2); line-height: 1.65; }

/* Buttons — flat */
.os-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--os-body); font-weight: 600; font-size: 0.9375rem;
  padding: 0.72rem 1.4rem; border-radius: var(--os-r-md);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--os-fast), border-color var(--os-fast), color var(--os-fast);
  white-space: nowrap;
}
.os-btn--primary { background: var(--os-coral); color: var(--os-on-coral); }
.os-btn--primary:hover { background: var(--os-coral-deep); }
[data-theme="dark"] .os-btn--primary { color: #14213D; }
.os-btn--ghost { background: transparent; color: var(--os-ink); border-color: var(--os-rule); }
.os-btn--ghost:hover { border-color: var(--os-ink-2); background: var(--os-tint); }
.os-btn--sm { padding: 0.45rem 0.9rem; font-size: 0.8125rem; border-radius: var(--os-r-sm); }

/* Chips */
.os-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--os-mono); font-size: 0.6875rem; letter-spacing: 0.07em;
  text-transform: uppercase; padding: 0.26rem 0.6rem;
  border: 1px solid var(--os-rule); border-radius: var(--os-r-pill);
  color: var(--os-ink-2); background: transparent;
}
.os-chip--live { color: var(--os-coral-text); border-color: var(--os-coral); background: var(--os-coral-faint); }
.os-chip--fill { background: var(--os-tint); border-color: transparent; }
.os-livedot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--os-coral-deep); animation: os-pulse 1.6s ease-in-out infinite;
}
@keyframes os-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.os-up { color: var(--os-good); }
.os-down { color: var(--os-bad); }

/* ------------------------------------------------------------
   Ticker — light strip, hairline, no navy bar
   ------------------------------------------------------------ */
.os-ticker {
  position: relative;
  background: var(--os-tint);
  color: var(--os-ink-2);
  overflow: hidden; white-space: nowrap;
  font-family: var(--os-mono); font-size: 0.7rem; letter-spacing: 0.05em;
  padding: 0.4rem 0; user-select: none;
  border-bottom: 1px solid var(--os-rule-soft);
}
.os-ticker-track { display: inline-flex; gap: 2.6rem; padding-left: 2.6rem; animation: os-marquee 52s linear infinite; will-change: transform; }
.os-ticker:hover .os-ticker-track { animation-play-state: paused; }
/* WCAG 2.2.2 pause/play — a hairline control at the strip's edge (SPEC_05). */
.os-ticker.is-paused .os-ticker-track { animation-play-state: paused; }
.os-ticker-pause {
  position: absolute; top: 0; right: 0; z-index: 2;
  height: 100%; width: 2rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-left: 1px solid var(--os-rule-soft);
  background: var(--os-tint); color: var(--os-ink-2);
  font-family: var(--os-mono); font-size: 0.7rem; line-height: 1; cursor: pointer;
}
.os-ticker-pause:hover { color: var(--os-coral-text); }
.os-ticker-pause:focus-visible { outline: 2px solid var(--os-coral); outline-offset: -2px; }
.os-ticker-item { display: inline-flex; align-items: center; gap: 0.55rem; }
.os-ticker-item b { font-weight: 700; color: var(--os-coral-text); }
@keyframes os-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .os-ticker-track { animation: none; }
  .os-livedot { animation: none; }
}

/* ------------------------------------------------------------
   Marketing nav — hairline, light
   ------------------------------------------------------------ */
.os-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--os-paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--os-rule);
}
.os-nav-inner {
  max-width: var(--os-container); margin: 0 auto; padding: 0.7rem 1.5rem;
  display: flex; align-items: center; gap: 1.75rem;
}
.os-lockup { display: inline-flex; align-items: center; gap: 0.65rem; }
.os-logo-img { width: 34px; height: 34px; border-radius: 8px; display: block; }
[data-theme="dark"] .os-logo-img { background: #FAFAFA; box-shadow: 0 0 0 3px #FAFAFA; }
.os-wordmark {
  font-family: var(--os-wordmark); font-weight: 900; font-size: 1.02rem;
  letter-spacing: 0.05em; color: var(--os-ink); line-height: 1;
}
.os-wordmark-sub {
  display: block; font-family: var(--os-mono); font-weight: 500;
  font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--os-ink-3); margin-top: 2px; white-space: nowrap;
}
.os-nav-links { display: flex; gap: 1.4rem; margin-left: auto; align-items: center; }
.os-nav-links a {
  font-size: 0.875rem; font-weight: 500; color: var(--os-ink-2);
  padding: 0.25rem 0;
  transition: color var(--os-fast);
}
.os-nav-links a:hover { color: var(--os-coral-text); }
.os-nav-actions { display: flex; align-items: center; gap: 0.6rem; }
.os-theme-btn {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--os-rule); border-radius: var(--os-r-sm);
  color: var(--os-ink-2); cursor: pointer; transition: border-color var(--os-fast), color var(--os-fast);
}
.os-theme-btn:hover { border-color: var(--os-ink-2); color: var(--os-ink); }
.os-hamburger { display: none; }
.os-menu {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--os-paper); border-bottom: 1px solid var(--os-rule);
  display: none; flex-direction: column; padding: 0.5rem 1.5rem 1rem;
}
.os-menu a { padding: 0.7rem 0; border-bottom: 1px solid var(--os-rule-soft); font-weight: 500; }

@media (max-width: 820px) {
  .os-nav-links { display: none; }
  .os-hamburger { display: inline-flex; margin-left: auto; }
  .os-nav-actions { margin-left: 0; }
  .os-menu.open { display: flex; }
}

/* ------------------------------------------------------------
   Sections
   ------------------------------------------------------------ */
.os-section { padding: clamp(3.2rem, 7vw, 5.5rem) 0; }
.os-section--rule { border-top: 1px solid var(--os-rule-soft); }
.os-section--tint { background: var(--os-tint); }
.os-kicker { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
.os-kicker::after { content: ""; flex: 1; height: 1px; background: var(--os-rule-soft); }

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.os-hero { padding: clamp(2.8rem, 6vw, 5rem) 0 clamp(2.6rem, 5vw, 4.2rem); position: relative; overflow: hidden; }
.os-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.os-hero h1 em { font-style: normal; color: var(--os-coral-deep); }
.os-hero h1 .os-underline {
  background-image: linear-gradient(var(--os-coral), var(--os-coral));
  background-repeat: no-repeat; background-size: 100% 0.14em; background-position: 0 94%;
}
.os-hero .os-lede { max-width: 34rem; margin: 1.4rem 0 1.9rem; }
.os-hero-ctas { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; }
.os-hero-trust { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.os-hero-trust span { font-family: var(--os-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--os-ink-3); }
.os-hero-trust b { color: var(--os-ink-2); font-weight: 500; }

/* ------------------------------------------------------------
   Artifact cards (market board etc.)
   Outer border = the one allowed navy line. Inside: hairlines only.
   ------------------------------------------------------------ */
.os-board {
  background: var(--os-sheet);
  border: 1px solid var(--os-frame);
  border-radius: var(--os-r-md);
  overflow: hidden;
}
.os-board-head {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.85rem 1rem 0.7rem;
}
.os-board-head .os-board-title { font-family: var(--os-display); font-weight: 700; font-size: 0.98rem; }
.os-board-head .os-chip { margin-left: auto; flex: 0 0 auto; }
.os-board-sub {
  padding: 0 1rem 0.6rem;
  font-family: var(--os-mono); font-size: 0.66rem; letter-spacing: 0.05em;
  color: var(--os-ink-3); text-transform: uppercase;
  display: flex; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--os-rule-soft);
}
.os-mkt-row { padding: 0.7rem 1rem 0.75rem; border-bottom: 1px solid var(--os-rule-soft); }
.os-mkt-row:last-of-type { border-bottom: none; }
.os-mkt-row-top { display: flex; align-items: baseline; gap: 0.7rem; margin-bottom: 0.45rem; }
.os-mkt-name { font-weight: 600; font-size: 0.9rem; }
.os-mkt-meta { margin-left: auto; display: flex; align-items: baseline; gap: 0.55rem; white-space: nowrap; }
.os-mkt-pct { font-family: var(--os-mono); font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.os-mkt-all { font-family: var(--os-mono); font-size: 0.72rem; color: var(--os-ink-3); font-variant-numeric: tabular-nums; }
.os-mkt-delta { font-family: var(--os-mono); font-size: 0.7rem; font-variant-numeric: tabular-nums; }
.os-mkt-bars { position: relative; height: 8px; border-radius: 4px; background: var(--os-tint-2); overflow: hidden; }
.os-mkt-bar-all {
  position: absolute; inset: 0 auto 0 0; background: var(--os-aqua-wash);
  border-right: 2px solid var(--os-aqua); transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}
.os-mkt-bar-league {
  position: absolute; inset: 0 auto 0 0; background: var(--os-coral);
  border-radius: 4px 0 0 4px; transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}
.os-mkt-row--picked .os-mkt-name::after {
  content: "YOUR CALL"; font-family: var(--os-mono); font-size: 0.56rem;
  letter-spacing: 0.1em; color: var(--os-coral-text); border: 1px solid var(--os-coral);
  border-radius: 3px; padding: 0.1rem 0.32rem; margin-left: 0.55rem; vertical-align: 2px;
}
.os-board-foot {
  padding: 0.6rem 1rem; border-top: 1px solid var(--os-rule-soft);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-family: var(--os-mono); font-size: 0.66rem; color: var(--os-ink-3);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.os-legend { display: inline-flex; align-items: center; gap: 1rem; }
.os-legend i { display: inline-flex; align-items: center; gap: 0.35rem; font-style: normal; }
.os-legend .k { width: 14px; height: 6px; border-radius: 2px; display: inline-block; }
.os-legend .k--league { background: var(--os-coral); }
.os-legend .k--all { background: var(--os-aqua-wash); border-right: 2px solid var(--os-aqua); }

/* ------------------------------------------------------------
   Side bet artifact (the chat-native card)
   ------------------------------------------------------------ */
.os-sbet {
  background: var(--os-sheet); border: 1px solid var(--os-frame);
  border-radius: var(--os-r-md); overflow: hidden;
}
.os-sbet-head {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.7rem 0.9rem 0.15rem;
  font-family: var(--os-mono); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--os-coral-text);
}
.os-sbet-title { font-family: var(--os-display); font-weight: 700; font-size: 1rem; padding: 0 0.9rem 0.55rem; }
.os-sbet-opt {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.9rem; border-top: 1px solid var(--os-rule-soft);
  font-size: 0.85rem;
}
.os-sbet-opt .os-num { margin-left: auto; font-size: 0.72rem; color: var(--os-ink-3); }
.os-sbet-opt--mine { background: var(--os-coral-faint); font-weight: 600; }
.os-sbet-foot {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.9rem; border-top: 1px solid var(--os-rule-soft);
}
.os-sbet-foot .os-label { font-size: 0.62rem; }
.os-sbet-foot .os-btn { margin-left: auto; }

/* ------------------------------------------------------------
   Ledger (how it works) — hairlines
   ------------------------------------------------------------ */
.os-ledger { border-top: 1px solid var(--os-rule); }
.os-ledger-row {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 1.5rem; padding: 1.7rem 0; border-bottom: 1px solid var(--os-rule-soft);
  align-items: baseline;
}
.os-ledger-num {
  font-family: var(--os-mono); font-weight: 700; font-size: 1.9rem;
  color: var(--os-coral); font-variant-numeric: tabular-nums; line-height: 1;
}
.os-ledger-row h3 { font-family: var(--os-display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.01em; }
.os-ledger-row p { color: var(--os-ink-2); font-size: 0.95rem; }
@media (max-width: 720px) {
  .os-ledger-row { grid-template-columns: 3.4rem 1fr; }
  .os-ledger-row p { grid-column: 2; }
}

/* ------------------------------------------------------------
   Seasons strip — the calendar spine
   ------------------------------------------------------------ */
.os-seasons { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--os-rule); }
.os-season {
  padding: 1.4rem 1.2rem 1.5rem; border-bottom: 1px solid var(--os-rule-soft);
  border-right: 1px solid var(--os-rule-soft); position: relative;
}
.os-season:last-child { border-right: none; }
.os-season--now { background: var(--os-coral-faint); }
.os-season--now::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--os-coral);
}
.os-season-q { font-family: var(--os-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--os-ink-3); }
.os-season--now .os-season-q { color: var(--os-coral-text); }
.os-season-name { font-family: var(--os-display); font-weight: 800; font-size: 1.3rem; margin: 0.2rem 0 0.6rem; }
.os-season-events { list-style: none; }
.os-season-events li {
  font-size: 0.82rem; color: var(--os-ink-2); padding: 0.28rem 0;
  border-top: 1px dashed var(--os-rule-soft);
}
.os-season-events li b { font-weight: 600; color: var(--os-ink); }
@media (max-width: 880px) {
  .os-seasons { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .os-seasons { grid-template-columns: 1fr; }
  .os-season { border-right: none; }
}

/* ------------------------------------------------------------
   Fantasy record-book artifacts
   ------------------------------------------------------------ */
.os-fan-card { background: var(--os-sheet); border: 1px solid var(--os-frame); border-radius: var(--os-r-md); overflow: hidden; }
.os-fan-head { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.85rem 1rem 0.6rem; }
.os-fan-name { font-family: var(--os-display); font-weight: 800; font-size: 1.05rem; }
.os-fan-sub { font-family: var(--os-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--os-ink-3); margin-left: auto; }
.os-fan-row {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.55rem 1rem; border-top: 1px solid var(--os-rule-soft); font-size: 0.85rem;
}
.os-fan-row .os-num { margin-left: auto; font-weight: 700; }
.os-place {
  font-family: var(--os-mono); font-size: 0.62rem; letter-spacing: 0.06em;
  border-radius: 4px; padding: 0.14rem 0.4rem; border: 1px solid var(--os-rule);
  color: var(--os-ink-2); white-space: nowrap;
}
.os-place--gold { background: #F6E7B4; border-color: #E3C86A; color: #6B5310; }
.os-place--silver { background: #ECEEF2; border-color: #C9CFDA; color: #4A5568; }
.os-place--bronze { background: #F0DEC9; border-color: #D6B48C; color: #7A5327; }
.os-place--poop { background: #EBDDD1; border-color: #CBB39E; color: #6B4F35; }
[data-theme="dark"] .os-place--gold { background: rgba(246,231,180,0.14); color: #E7CE7E; }
[data-theme="dark"] .os-place--silver { background: rgba(236,238,242,0.1); color: #C9CFDA; }
[data-theme="dark"] .os-place--bronze { background: rgba(240,222,201,0.1); color: #D6B48C; }
[data-theme="dark"] .os-place--poop { background: rgba(235,221,209,0.1); color: #CBB39E; }
.os-grade {
  font-family: var(--os-mono); font-weight: 700; font-size: 1rem;
  color: var(--os-coral-text);
}

/* ------------------------------------------------------------
   Chat mock — flat, hairline
   ------------------------------------------------------------ */
.os-chat-mock {
  background: var(--os-sheet); border: 1px solid var(--os-frame);
  border-radius: var(--os-r-md);
  padding: 1rem 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.6rem;
  max-width: 420px;
}
.os-chat-mock-head { display: flex; align-items: center; gap: 0.55rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--os-rule-soft); }
.os-chat-mock-title { font-family: var(--os-display); font-weight: 700; font-size: 0.92rem; }
.os-bubble {
  max-width: 84%; padding: 0.5rem 0.75rem; border-radius: 11px;
  font-size: 0.85rem; line-height: 1.45;
  background: var(--os-tint); align-self: flex-start;
}
.os-bubble--me { background: var(--os-coral-wash); align-self: flex-end; }
.os-bubble-author { display: block; font-family: var(--os-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--os-ink-3); margin-bottom: 0.15rem; }
.os-bubble--system {
  align-self: center; background: transparent; border: 1px dashed var(--os-rule);
  font-family: var(--os-mono); font-size: 0.68rem; color: var(--os-ink-2); text-align: center;
}
.os-bubble--artifact { max-width: 94%; align-self: stretch; background: transparent; padding: 0; }

/* ------------------------------------------------------------
   Receipt (always paper in both themes — it's a physical artifact)
   ------------------------------------------------------------ */
.os-receipt {
  --paper: #FCFAF5;
  --paper-ink: #23272E;
  width: 330px; max-width: 100%;
  background: var(--paper); color: var(--paper-ink);
  font-family: var(--os-mono); font-size: 0.78rem; line-height: 1.55;
  padding: 1.5rem 1.35rem 1.6rem;
  position: relative;
  filter: drop-shadow(0 3px 8px rgba(27,45,79,0.14));
}
.os-receipt::before, .os-receipt::after {
  content: ""; position: absolute; left: 0; right: 0; height: 9px;
  background: conic-gradient(from 135deg at 50% 76%, var(--paper) 0 90deg, transparent 0) 0 0 / 18px 9px repeat-x;
}
.os-receipt::before { top: -8px; }
.os-receipt::after { bottom: -8px; transform: scaleY(-1); }
.os-receipt-brand { text-align: center; font-family: var(--os-wordmark); font-weight: 900; font-size: 1.05rem; letter-spacing: 0.14em; }
.os-receipt-sub { text-align: center; font-size: 0.62rem; letter-spacing: 0.16em; margin-top: 0.15rem; color: #6b7280; }
.os-receipt-rule { border: none; border-top: 1.5px dashed #d8d3c6; margin: 0.8rem 0; }
.os-receipt-line { display: flex; align-items: baseline; gap: 0.5rem; }
.os-receipt-line .dots { flex: 1; border-bottom: 1.5px dotted #d8d3c6; transform: translateY(-3px); }
.os-receipt-line .val { font-weight: 700; }
.os-receipt-line .val.win { color: #0B8A5C; }
.os-receipt-line .val.loss { color: #C4372F; }
.os-receipt-total { display: flex; justify-content: space-between; font-weight: 700; font-size: 0.9rem; margin-top: 0.3rem; }
.os-receipt-stamp {
  position: absolute; right: 14px; top: 44%;
  transform: rotate(-7deg);
  font-weight: 700; font-size: 0.82rem; letter-spacing: 0.12em;
  color: #C4372F; border: 2.5px solid #C4372F; border-radius: 5px;
  padding: 0.25rem 0.55rem; opacity: 0.8; mix-blend-mode: multiply;
}
.os-receipt-barcode {
  height: 34px; margin-top: 0.9rem;
  background: repeating-linear-gradient(90deg, #23272E 0 2px, transparent 2px 4px, #23272E 4px 5px, transparent 5px 9px, #23272E 9px 12px, transparent 12px 14px);
}
.os-receipt-no { text-align: center; font-size: 0.62rem; letter-spacing: 0.2em; margin-top: 0.4rem; color: #6b7280; }
.os-receipt-tag { text-align: center; font-size: 0.66rem; letter-spacing: 0.14em; margin-top: 0.7rem; }

/* ------------------------------------------------------------
   FAQ accordion — hairlines
   ------------------------------------------------------------ */
.os-faq { border-top: 1px solid var(--os-rule); }
.os-faq details { border-bottom: 1px solid var(--os-rule-soft); }
.os-faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 1rem;
  padding: 1.1rem 0.2rem; font-family: var(--os-display); font-weight: 700; font-size: 1.05rem;
}
.os-faq summary::-webkit-details-marker { display: none; }
.os-faq summary .q { font-family: var(--os-mono); font-size: 0.72rem; color: var(--os-coral-text); font-weight: 700; }
.os-faq summary::after { content: "+"; margin-left: auto; font-family: var(--os-mono); font-size: 1.1rem; color: var(--os-ink-3); }
.os-faq details[open] summary::after { content: "–"; }
.os-faq details p { padding: 0 0.2rem 1.2rem 3.1rem; color: var(--os-ink-2); font-size: 0.95rem; max-width: 46rem; }
@media (max-width: 600px) { .os-faq details p { padding-left: 0.2rem; } }

/* ------------------------------------------------------------
   Footer — hairline
   ------------------------------------------------------------ */
.os-footer { border-top: 1px solid var(--os-rule); background: var(--os-tint); padding: 2.6rem 0 1.6rem; margin-top: clamp(2rem, 6vw, 4rem); }
.os-footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 2rem; }
.os-footer h4, .os-footer h3 { font-family: var(--os-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--os-ink-3); margin-bottom: 0.8rem; }
.os-footer a { display: block; font-size: 0.875rem; color: var(--os-ink-2); padding: 0.22rem 0; }
.os-footer a:hover { color: var(--os-coral-text); }
.os-footer-blurb { font-size: 0.875rem; color: var(--os-ink-2); max-width: 22rem; margin-top: 0.7rem; }
.os-footer-bottom {
  margin-top: 2.2rem; padding-top: 1.1rem; border-top: 1px solid var(--os-rule-soft);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  font-family: var(--os-mono); font-size: 0.68rem; color: var(--os-ink-3); letter-spacing: 0.04em;
}
@media (max-width: 760px) { .os-footer-grid { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   APP SHELL (app2 mockup) — Home · Seasons · Chat · League
   ============================================================ */
.os-app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.os-sidebar {
  position: sticky; top: 0; height: 100vh;
  border-right: 1px solid var(--os-rule-soft);
  background: var(--os-paper);
  display: flex; flex-direction: column;
  padding: 1.1rem 0.9rem;
}
.os-sidebar .os-lockup { padding: 0.2rem 0.6rem 1rem; }
.os-side-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 0.6rem; }
.os-side-item {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.62rem 0.75rem; border-radius: var(--os-r-md);
  font-weight: 500; font-size: 0.9rem; color: var(--os-ink-2);
  transition: background var(--os-fast), color var(--os-fast);
}
.os-side-item svg { flex: 0 0 auto; }
.os-side-item:hover { background: var(--os-tint); color: var(--os-ink); }
.os-side-item.active { background: var(--os-coral-wash); color: var(--os-ink); font-weight: 600; }
.os-badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--os-r-pill); background: var(--os-coral-deep); color: #fff;
  font-family: var(--os-mono); font-size: 0.62rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.os-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 0.5rem; }
.os-league-chip {
  border: 1px solid var(--os-rule); border-radius: var(--os-r-md);
  background: var(--os-sheet); padding: 0.6rem 0.7rem;
  display: flex; align-items: center; gap: 0.6rem; cursor: pointer;
  font-family: var(--os-body); color: var(--os-ink); width: 100%;
  transition: border-color var(--os-fast);
}
.os-league-chip:hover { border-color: var(--os-ink-3); }
.os-league-emoji { font-size: 1.15rem; line-height: 1; }
.os-league-meta { min-width: 0; text-align: left; }
.os-league-label { display: block; font-family: var(--os-mono); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--os-ink-3); }
.os-league-name { display: block; font-weight: 600; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-user-chip {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.7rem;
  border-radius: var(--os-r-md); cursor: pointer;
  border: none; background: transparent; color: var(--os-ink); font-family: var(--os-body); width: 100%;
}
.os-user-chip:hover { background: var(--os-tint); }
.os-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--os-tint-2);
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem;
  flex: 0 0 auto;
}
.os-user-name { font-size: 0.82rem; font-weight: 600; }

.os-main { min-width: 0; }
.os-app-content { max-width: 1080px; padding: 1.6rem 2.2rem 4rem; }

/* Pulse strip (in-app ticker) */
.os-pulse {
  display: flex; align-items: center; gap: 0.8rem;
  border: 1px solid var(--os-rule-soft); border-radius: var(--os-r-md);
  background: var(--os-sheet); padding: 0.45rem 0.8rem; overflow: hidden;
  font-family: var(--os-mono); font-size: 0.7rem; color: var(--os-ink-2);
  margin-bottom: 1.6rem; white-space: nowrap;
}
.os-pulse-scroll { overflow: hidden; flex: 1; }
.os-pulse .os-ticker-track { animation-duration: 40s; padding-left: 0; }

/* App cards */
.os-card {
  background: var(--os-sheet); border: 1px solid var(--os-rule-soft);
  border-radius: var(--os-r-md); overflow: hidden;
}
.os-card--frame { border-color: var(--os-frame); }
.os-card-head {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--os-rule-soft);
}
.os-card-title { font-family: var(--os-display); font-weight: 700; font-size: 0.95rem; }
.os-card-head .os-more { margin-left: auto; font-family: var(--os-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--os-ink-3); }
.os-card-head .os-more:hover { color: var(--os-coral-text); }

.os-home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.4rem; align-items: start; }
@media (max-width: 1060px) { .os-home-grid { grid-template-columns: minmax(0, 1fr); } }
.os-stack { display: flex; flex-direction: column; gap: 1.4rem; }

/* Attention / due rows */
.os-due-row {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.78rem 1rem; border-bottom: 1px solid var(--os-rule-soft);
  cursor: pointer; transition: background var(--os-fast);
}
.os-due-row:hover { background: var(--os-coral-faint); }
.os-due-row:last-child { border-bottom: none; }
.os-due-name { font-weight: 600; font-size: 0.9rem; }
.os-due-sub { font-family: var(--os-mono); font-size: 0.66rem; color: var(--os-ink-3); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 1px; }
.os-due-lock { margin-left: auto; font-family: var(--os-mono); font-size: 0.68rem; color: var(--os-coral-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.os-due-cta { flex: 0 0 auto; }

/* Mini standings table */
.os-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.os-table td { padding: 0.55rem 1rem; border-bottom: 1px solid var(--os-rule-soft); }
.os-table tr:last-child td { border-bottom: none; }
.os-table .rank { font-family: var(--os-mono); font-size: 0.72rem; color: var(--os-ink-3); width: 2rem; font-variant-numeric: tabular-nums; }
.os-table .rank.r1 { color: var(--os-coral-text); font-weight: 700; }
.os-table .pts { text-align: right; font-family: var(--os-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.os-table .who { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; }
.os-you {
  font-family: var(--os-mono); font-size: 0.56rem; letter-spacing: 0.1em;
  color: var(--os-coral-text); border: 1px solid var(--os-coral); border-radius: 3px; padding: 0.06rem 0.3rem;
}

/* Snapshot card */
.os-snap { padding: 1rem; }
.os-snap-league { display: flex; align-items: center; gap: 0.7rem; }
.os-snap-name { font-family: var(--os-display); font-weight: 800; font-size: 1.15rem; }
.os-commish-tag {
  font-family: var(--os-mono); font-size: 0.56rem; letter-spacing: 0.12em;
  background: var(--os-tint-2); color: var(--os-ink-2); border-radius: 3px; padding: 0.14rem 0.4rem;
  text-transform: uppercase;
}
.os-snap-stats { display: flex; gap: 1.3rem; margin: 0.9rem 0 0.9rem; }
.os-snap-stat b { display: block; font-family: var(--os-mono); font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.os-snap-stat span { font-family: var(--os-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--os-ink-3); }
.os-invite {
  display: flex; align-items: center; gap: 0.55rem; width: 100%;
  border: 1.5px dashed var(--os-rule); border-radius: var(--os-r-sm);
  background: transparent; color: var(--os-ink); font-family: var(--os-body);
  padding: 0.5rem 0.7rem; cursor: pointer; transition: border-color var(--os-fast);
}
.os-invite:hover { border-color: var(--os-coral-deep); }
.os-invite code { font-family: var(--os-mono); font-weight: 700; letter-spacing: 0.18em; font-size: 0.85rem; }
.os-invite span { font-family: var(--os-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--os-ink-3); margin-left: auto; }

/* Chat teaser rows */
.os-chatrow { display: flex; gap: 0.7rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--os-rule-soft); align-items: center; cursor: pointer; }
.os-chatrow:hover { background: var(--os-tint); }
.os-chatrow:last-child { border-bottom: none; }
.os-chatrow-name { font-weight: 600; font-size: 0.85rem; }
.os-chatrow-prev { font-size: 0.78rem; color: var(--os-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30ch; }
.os-chatrow-time { margin-left: auto; font-family: var(--os-mono); font-size: 0.64rem; color: var(--os-ink-3); }

/* Season hero (in-app) */
.os-season-hero { padding: 1.1rem 1.2rem 1.2rem; }
.os-season-hero-top { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.os-season-hero-name { font-family: var(--os-display); font-weight: 800; font-size: 1.45rem; letter-spacing: -0.015em; }
.os-season-hero-sub { color: var(--os-ink-2); font-size: 0.9rem; margin-top: 0.2rem; }
.os-event-rail { display: flex; gap: 0.8rem; overflow-x: auto; padding: 0.9rem 0 0.2rem; scrollbar-width: thin; }
.os-event-tile {
  flex: 0 0 190px; border: 1px solid var(--os-rule); border-radius: var(--os-r-md);
  padding: 0.7rem 0.8rem; background: var(--os-paper);
  transition: border-color var(--os-fast);
}
.os-event-tile:hover { border-color: var(--os-ink-3); }
.os-event-tile--live { border-color: var(--os-coral); background: var(--os-coral-faint); }
.os-event-state { font-family: var(--os-mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--os-ink-3); }
.os-event-tile--live .os-event-state { color: var(--os-coral-text); }
.os-event-name { font-family: var(--os-display); font-weight: 700; font-size: 0.92rem; line-height: 1.25; margin-top: 0.2rem; }
.os-event-meta { font-family: var(--os-mono); font-size: 0.62rem; color: var(--os-ink-3); margin-top: 0.45rem; }

/* Bottom nav (mobile) */
.os-bnav { display: none; }
@media (max-width: 880px) {
  .os-app { grid-template-columns: 1fr; }
  .os-sidebar { display: none; }
  .os-app-content { padding: 1.1rem 1rem 5.4rem; }
  .os-bnav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    display: flex; justify-content: space-around;
    background: color-mix(in srgb, var(--os-paper) 92%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--os-rule);
    padding: 0.4rem 0.4rem calc(0.4rem + env(safe-area-inset-bottom));
  }
  .os-bnav-item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-size: 0.62rem; font-weight: 500; color: var(--os-ink-3);
    padding: 0.3rem 0.7rem; border-radius: var(--os-r-sm); position: relative;
  }
  .os-bnav-item.active { color: var(--os-coral-deep); }
  .os-bnav-item .os-badge { position: absolute; top: 0; right: 6px; margin: 0; }
}

/* ------------------------------------------------------------
   League tools grid (SPEC_06 6.4b) — flat hairline cards.
   Used on index.html + how-it-works.html.
   ------------------------------------------------------------ */
.os-tools-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px; background: var(--os-rule-soft);
  border: 1px solid var(--os-rule-soft); border-radius: 12px; overflow: hidden;
}
.os-tool { background: var(--os-paper); padding: 1.4rem 1.35rem; }
.os-tool h3 { font-size: 1rem; margin: 0 0 0.4rem; color: var(--os-coral-text); }
.os-tool p { margin: 0; color: var(--os-ink-2); font-size: 0.9rem; line-height: 1.5; }