/* ==========================================================================
   S4U — Design System
   Tokens + reusable primitives. Distilled from docs/design/DESIGN-SYSTEM.md.
   Tokens live in :root (global). Every COMPONENT style is scoped under .s4u
   so the redesign and the legacy global CSS never bleed into each other.
   ========================================================================== */

:root{
  /* surfaces */
  --ink:        #0a0a0c;
  --ink-2:      #14141a;
  --paper:      #f6f3ee;

  /* accents (use VERY sparingly — see DESIGN-SYSTEM.md accent rule) */
  --accent:     oklch(0.74 0.14 70); /* champagne */
  --accent-ink: #1a1408;
  --live:       #e54a3a;

  /* text on dark */
  --t-primary:   #ffffff;
  --t-secondary: rgba(255,255,255,0.6);
  --t-tertiary:  rgba(255,255,255,0.42);
  --t-muted:     rgba(255,255,255,0.35);

  /* borders / dividers on dark */
  --hairline: rgba(255,255,255,0.08);
  --strong:   rgba(255,255,255,0.18);

  /* type stacks */
  --font-display: "Fraunces", "Times New Roman", serif;
  --font-ui:      "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Full-page dark body for redesigned (.s4u) layouts. */
.s4u-body{ margin:0; min-height:100vh; background:var(--ink); }

/* --------------------------------------------------------------------------
   Scoped reset — keeps legacy globals out of .s4u and vice-versa.
   -------------------------------------------------------------------------- */
.s4u, .s4u *, .s4u *::before, .s4u *::after{ box-sizing:border-box; }
.s4u{
  font-family:var(--font-ui);
  color:var(--t-primary);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.s4u h1, .s4u h2, .s4u h3, .s4u p{ margin:0; }
.s4u a{ color:inherit; text-decoration:none; }
.s4u button{ font-family:inherit; }
.s4u input{ font-family:inherit; }
.s4u img{ display:block; max-width:100%; }

/* --------------------------------------------------------------------------
   Type primitives
   -------------------------------------------------------------------------- */
.s4u .display-serif{
  font-family:var(--font-display);
  font-optical-sizing:auto;
  letter-spacing:-0.02em;
}
.s4u .mono{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:0.22em;
  font-size:10px;
  font-weight:500;
}
/* tabular-nums on EVERY scoreboard number (prevents jitter on live updates) */
.s4u .score-num{ font-variant-numeric:tabular-nums; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.s4u .btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; height:52px;
  border:none; border-radius:2px;
  background:var(--accent); color:var(--accent-ink);
  font-family:var(--font-ui); font-size:14px; font-weight:600;
  letter-spacing:0.04em; text-transform:uppercase;
  cursor:pointer; transition:filter .15s ease;
}
.s4u .btn-primary:hover{ filter:brightness(1.08); }
.s4u .btn-primary:active{ filter:brightness(0.96); }
.s4u .btn-primary:disabled{ opacity:0.55; cursor:default; filter:none; }

.s4u .btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 16px;
  border-radius:2px;
  background:rgba(255,255,255,0.06); color:var(--t-primary);
  border:1px solid rgba(255,255,255,0.12);
  font-family:var(--font-ui); font-size:13px; font-weight:500;
  cursor:pointer; transition:background .15s ease, border-color .15s ease;
}
.s4u .btn-ghost:hover{ background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.5); }

/* --------------------------------------------------------------------------
   Underline field — mono label + input share a champagne focus state.
   Pure CSS via :focus-within (no JS needed).
   -------------------------------------------------------------------------- */
.s4u .field label.mono{ color:var(--t-secondary); transition:color .2s ease; }
.s4u .field .field-line{ border-bottom:1px solid var(--strong); transition:border-color .2s ease; }
.s4u .field:focus-within label.mono{ color:var(--accent); }
.s4u .field:focus-within .field-line{ border-bottom-color:var(--accent); }
.s4u .field input,
.s4u .field textarea{
  width:100%; padding:0 0 6px;
  background:transparent; border:none; outline:none;
  color:var(--t-primary); font-size:15px; font-family:inherit;
}
.s4u .field input{ height:38px; }
.s4u .field textarea{ min-height:40px; padding:6px 0; line-height:1.5; resize:vertical; }
.s4u .field input::placeholder,
.s4u .field textarea::placeholder{ color:var(--t-muted); }

/* Neutralize the WebKit yellow autofill (mandatory — without it the premium feel breaks). */
.s4u input:-webkit-autofill,
.s4u input:-webkit-autofill:hover,
.s4u input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px transparent inset;
  -webkit-text-fill-color:#fff;
  caret-color:#fff;
  transition:background-color 9999s ease-in-out 0s;
}

/* --------------------------------------------------------------------------
   Validation — restyle ASP.NET MVC unobtrusive output (kept, never removed).
   -------------------------------------------------------------------------- */
.s4u .text-danger{ color:#ff8a7a; }
.s4u .field-validation-error{ display:block; margin-top:8px; color:#ff8a7a; font-size:12px; line-height:1.4; }
.s4u .validation-summary-errors{ color:#ff8a7a; font-size:12.5px; line-height:1.5; }
.s4u .validation-summary-errors ul{ margin:0; padding-left:16px; }
.s4u .field-validation-valid,
.s4u .validation-summary-valid{ display:none; }