/* ============================================
   POSTMORTEM CHESS — App Styles (v2)
   Uses design-tokens.css as foundation
   ============================================ */

/* ============================================
   Bootstrap 5 CSS Variable Overrides
   Loaded after bootstrap.min.css so these win.
   Maps --bs-* vars to our tokens so every
   .card, .btn-success, .alert-*, .bg-light, etc.
   inherits the dark palette automatically.
   ============================================ */
:root {
  /* Body */
  --bs-body-bg: var(--bg-void);
  --bs-body-color: var(--text-primary);
  --bs-secondary-bg: var(--bg-card-hover);
  --bs-tertiary-bg: var(--bg-card);

  /* Cards */
  --bs-card-bg: var(--bg-card);
  --bs-card-border-color: var(--border-subtle);
  --bs-card-cap-bg: var(--bg-card-hover);

  /* Borders */
  --bs-border-color: var(--border-subtle);
  --bs-border-color-translucent: rgba(34, 29, 36, 0.18);

  /* Semantic — success=good, danger=bad, warning=neutral */
  --bs-success: var(--status-good);
  --bs-success-rgb: 46, 204, 113;
  --bs-danger: var(--status-bad);
  --bs-danger-rgb: 239, 68, 68;
  --bs-warning: var(--status-neutral);
  --bs-warning-rgb: 250, 204, 21;

  /* Light/dark surfaces */
  --bs-light: var(--bg-card-hover);
  --bs-light-rgb: 23, 19, 26;
  --bs-dark: var(--bg-panel);
  --bs-dark-rgb: 12, 10, 13;

  /* Brand primary = pink */
  --bs-primary: var(--brand-pink);
  --bs-primary-rgb: 226, 30, 99;

  /* Secondary = muted gray */
  --bs-secondary: var(--text-secondary);
  --bs-secondary-rgb: 154, 148, 153;

  /* Links */
  --bs-link-color: var(--brand-pink-bright);
  --bs-link-hover-color: var(--brand-pink);

  /* Table defaults — rows/hover use our surfaces */
  --bs-table-color: var(--text-secondary);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border-subtle);
  --bs-table-striped-color: var(--text-secondary);
  --bs-table-striped-bg: rgba(34, 29, 36, 0.25);
  --bs-table-hover-color: var(--text-primary);
  --bs-table-hover-bg: var(--bg-card-hover);
  --bs-table-active-color: var(--text-primary);
  --bs-table-active-bg: var(--bg-card-hover);

  /* Form controls */
  --bs-form-control-bg: var(--bg-card);
  --bs-form-control-color: var(--text-primary);
}

/* table-light thead is the most common Bootstrap white surface — remap it */
.table-light,
.table > :not(caption) > * > .table-light {
  --bs-table-color: var(--text-secondary);
  --bs-table-bg: var(--bg-card-hover);
  --bs-table-border-color: var(--border-subtle);
  --bs-table-striped-bg: var(--bg-card);
  --bs-table-striped-color: var(--text-secondary);
  --bs-table-active-bg: var(--bg-card-hover);
  --bs-table-active-color: var(--text-primary);
  --bs-table-hover-bg: var(--bg-card-hover);
  --bs-table-hover-color: var(--text-primary);
  color: var(--text-secondary);
  background-color: var(--bg-card-hover);
  border-color: var(--border-subtle);
}

/* Bootstrap navbar-dark on our sidebar */
.navbar-dark .navbar-brand,
.navbar-dark .nav-link {
  color: var(--text-primary);
}

/* ── Reset & Base ────────────────────────────────────────────────────────── */
* {
  box-sizing: border-box;
}

html {
  /* .page below only sets min-height: 100vh, so any page whose content grows
     taller than the viewport scrolls at the document level (html/body), not just
     inside .content. Without this, that scrollbar appearing/disappearing changes
     100vw itself, which the board pages (Explore/Play/Analysis/Puzzles) all use to
     size their squares via a --sq: clamp(..., calc(100dvw - ...), ...) — so any
     sidebar/panel content change that crosses the "needs a scrollbar" threshold
     (e.g. an analysis result appearing, a banner toggling) visibly resizes the
     whole board. Reserving the scrollbar gutter unconditionally keeps 100vw
     constant regardless of whether a scrollbar is actually showing. */
  scrollbar-gutter: stable;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Layout ───────────────────────────────────────────────────────────────── */
.page {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 250px;
  background: var(--bg-panel);
  border-right: 1px solid var(--border-subtle);
  padding: var(--space-6);
  flex-shrink: 0;
  position: relative;
}

.sidebar::after {
  content: '';
  position: absolute;
  top: 0; right: -1px;
  width: 1px; height: 100%;
  background: linear-gradient(to bottom, transparent, var(--border-pink) 30%, var(--border-pink) 70%, transparent);
  pointer-events: none;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-8) var(--space-6);
}

/* ── Page Wrap (max-width content container) ────────────────────────────── */
.page-wrap {
  width: 100%;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1440px) {
  .page-wrap { max-width: 1040px; }
}

@media (max-width: 1100px) {
  .page-wrap { max-width: 100%; }
}

/* ── Typography ───────────────────────────────────────────────────────────── */
h1 {
  font-family: var(--font-ui);
  font-size: var(--fs-h1);
  font-weight: var(--fw-black);
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-6) 0;
}

h2 {
  font-family: var(--font-ui);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-4) 0;
}

h3 {
  font-family: var(--font-ui);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-4) 0;
}

h4, h5, h6 {
  font-family: var(--font-ui);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-4) 0;
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

.eyebrow-brand {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-pink-muted);
  font-weight: 600;
}

/* Wordmark — only place the drip/horror display font lives */
.wordmark {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  color: var(--brand-pink);
  text-shadow: var(--glow-text-pink);
  font-weight: 700;
}

/* Verdict word — horror display font + semantic status color */
.verdict-word {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  font-weight: 700;
}
.verdict-word.victory {
  color: var(--status-good-bright);
  text-shadow: var(--glow-good-sm);
}
.verdict-word.defeat {
  color: var(--status-bad-bright);
  text-shadow: var(--glow-bad-sm);
}

/* ── Links ─────────────────────────────────────────────────────────────────── */
a, .btn-link {
  color: var(--brand-pink-bright);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover, .btn-link:hover {
  color: var(--brand-pink);
}

a:focus, .btn-link:focus {
  outline: 2px solid var(--brand-pink);
  outline-offset: 2px;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 20px;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-button);
  border: none;
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primary button — pink gradient with glow */
.btn-primary, .btn.btn-primary {
  background: linear-gradient(180deg, var(--brand-pink-bright), var(--brand-pink));
  color: var(--text-on-pink);
  box-shadow: var(--glow-pink-md);
}
.btn-primary:hover, .btn.btn-primary:hover {
  background: linear-gradient(180deg, var(--brand-pink), var(--brand-pink-deep));
  box-shadow: var(--glow-pink-md);
}
.btn-primary:active, .btn.btn-primary:active {
  transform: scale(0.98);
}
.btn-primary:focus, .btn.btn-primary:focus {
  outline: 2px solid var(--brand-pink-bright);
  outline-offset: 2px;
}

/* Secondary button — pink outline */
.btn-secondary, .btn.btn-secondary {
  background: transparent;
  color: var(--brand-pink-bright);
  border: 2px solid var(--brand-pink);
}
.btn-secondary:hover, .btn.btn-secondary:hover {
  background: var(--brand-pink-wash);
  color: var(--brand-pink-bright);
}

/* Ghost button — text only, no background */
.btn-ghost, .btn.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  padding: 8px 12px;
}
.btn-ghost:hover, .btn.btn-ghost:hover {
  color: var(--text-primary);
}

/* ── Forms & Inputs ───────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  background: var(--bg-void);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--brand-pink);
  box-shadow: 0 0 0 3px rgba(226, 30, 99, 0.12);
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
textarea::placeholder {
  color: var(--text-ghost);
}

label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  font-size: var(--fs-body);
}

/* Uppercase field label — the design system standard for form fields */
.field-label {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-muted);
  display: block;
  margin-bottom: var(--space-2);
}

.form-group {
  margin-bottom: var(--space-5);
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-pink);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.card-title {
  font-size: var(--fs-card-title);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.card-body {
  margin: 0;
}

.card-footer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ── Tags & Badges ────────────────────────────────────────────────────────── */
.badge, .tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 12px;
  font-size: var(--fs-small);
  font-weight: 600;
  border-radius: var(--radius-pill-sm);
  white-space: nowrap;
}

/* Status tag — Victory (good) */
.tag-victory, .badge-success {
  color: var(--status-good-bright);
  background: var(--status-good-wash);
  border: 1px solid var(--status-good-border);
}

/* Status tag — Defeat (bad) */
.tag-defeat, .badge-danger {
  color: var(--status-bad-bright);
  background: var(--status-bad-wash);
  border: 1px solid var(--status-bad-border);
}

/* Neutral tag */
.tag-neutral, .badge-secondary {
  color: var(--text-secondary);
  background: rgba(221, 214, 221, 0.08);
  border: 1px solid var(--border-subtle);
}

/* Brand tag — for feature labels, etc. */
.tag-brand, .badge-info {
  color: var(--brand-pink-bright);
  background: var(--brand-pink-wash);
  border: 1px solid var(--border-pink);
}

/* ── Source Badges (Lichess, Chess.com, Bot, PGN) ── */
.source-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 0.73rem;
  font-weight: 600;
  text-decoration: none;
  color: white;
  transition: opacity 0.2s ease;
}
.source-badge:hover {
  opacity: 0.85;
  text-decoration: none;
  color: white;
}

.source-lichess {
  background: var(--source-lichess);
}

.source-chesscom {
  background: var(--source-chesscom);
}

.source-bot {
  background: var(--source-bot);
}

.source-pgn {
  background: var(--source-pgn);
}

.source-other {
  background: var(--source-other);
}

/* ── Progress Bars ────────────────────────────────────────────────────────── */
.progress {
  height: 8px;
  background: var(--track-gray);
  border-radius: var(--radius-pill-sm);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: var(--radius-pill-sm);
  transition: width 0.3s ease;
}

.progress-fill.strong {
  background: var(--status-good);
}

.progress-fill.weak {
  background: var(--status-bad);
}

.progress-fill.neutral {
  background: var(--status-neutral);
}

/* ── Tables ───────────────────────────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}

/* Bootstrap's .table sets color:#212529 (a light-theme near-black) directly on the
   table element. Any cell text without its own explicit color class inherits that
   value, which is almost invisible against this app's dark background. */
.table {
  color: var(--text-primary);
}

thead {
  background: var(--bg-card-hover);
}

thead th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--fw-semibold);
  color: var(--brand-pink-muted);
  border-bottom: 1px solid var(--border-pink);
  text-transform: uppercase;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
}

tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

tbody tr:hover {
  background: var(--bg-card-hover);
}

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  border: 1px solid;
  border-left-width: 3px;      /* left-border status signal */
  margin-bottom: var(--space-5);
}

.alert-success {
  background: var(--status-good-wash);
  border-color: var(--status-good-border);
  border-left-color: var(--status-good);
  color: var(--status-good-bright);
}

.alert-danger {
  background: var(--status-bad-wash);
  border-color: var(--status-bad-border);
  border-left-color: var(--status-bad);
  color: var(--status-bad-bright);
}

.alert-info {
  background: var(--brand-pink-wash);
  border-color: var(--border-pink);
  border-left-color: var(--brand-pink);
  color: var(--brand-pink-bright);
}

/* ── Validation ───────────────────────────────────────────────────────────── */
input.invalid,
textarea.invalid,
select.invalid {
  border-color: var(--status-bad);
}

input.valid,
textarea.valid,
select.valid {
  border-color: var(--status-good);
}

.validation-message {
  font-size: var(--fs-small);
  color: var(--status-bad-bright);
  margin-top: var(--space-2);
}

.field-error {
  color: var(--status-bad-bright);
  font-size: var(--fs-small);
  margin-top: var(--space-2);
}

/* ── Error Boundary ───────────────────────────────────────────────────────── */
#blazor-error-ui {
  background: var(--status-bad-wash);
  border: 1px solid var(--status-bad-border);
  color: var(--status-bad-bright);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-4);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-body);
}

#blazor-error-ui.hidden {
  display: none;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  color: var(--status-bad-bright);
  font-weight: bold;
  font-size: 20px;
}

/* ── Focus States (Accessibility) ────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--brand-pink);
  outline-offset: 2px;
}

button:focus-visible {
  outline: 2px solid var(--brand-pink);
  outline-offset: 2px;
}

/* ── Scrollbars (Webkit) ──────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-void);
}

::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .page {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--space-4);
  }

  .content {
    padding: var(--space-4);
  }
}

/* ── Mobile nav: fixed top bar + slide-down menu ─────────────────────────── */
@media (max-width: 640px) {
  .sidebar {
    position: fixed;
    top: 0; left: 0; right: 0;
    width: 100%;
    height: auto;
    padding: 0;
    border-bottom: none;
    z-index: 200;
  }

  .sidebar::after {
    display: none;
  }

  main {
    padding-top: 56px; /* clear fixed top bar */
  }

  /* Backdrop covers content while nav is open; tap it to close */
  .mobile-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 150;
    cursor: pointer;
  }

  /* :has() reaches inside .sidebar to watch the checkbox state */
  .page:has(#nav-toggler:checked) .mobile-nav-backdrop {
    display: block;
  }
}

/* ── Utility Classes ──────────────────────────────────────────────────────── */
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-good { color: var(--status-good-bright); }
.text-bad { color: var(--status-bad-bright); }
.text-brand { color: var(--brand-pink-bright); }

/* Bootstrap compatibility aliases */
.text-success { color: var(--status-good-bright) !important; }
.text-danger  { color: var(--status-bad-bright)  !important; }
.text-warning { color: var(--status-neutral)      !important; }

.bg-void { background: var(--bg-void); }
.bg-panel { background: var(--bg-panel); }
.bg-card { background: var(--bg-card); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.align-center { align-items: center; }

.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* Named layout grids */
.grid-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.grid-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.grid-main-aside { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-6); align-items: start; }

@media (max-width: 1024px) {
  .grid-main-aside { grid-template-columns: 1fr 280px; }
}

@media (max-width: 900px) {
  .grid-kpi { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .grid-kpi, .grid-2col, .grid-main-aside { grid-template-columns: 1fr; }
}

.w-full { width: 100%; }
.h-full { height: 100%; }

.rounded { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-card); }

.cursor-pointer { cursor: pointer; }
.select-none { user-select: none; }
.tabular      { font-variant-numeric: tabular-nums; font-family: var(--font-notation); }
.font-notation { font-family: var(--font-notation); }

/* ── Section Panel ────────────────────────────────────────────────────────── */
.section-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-top: 2px solid var(--border-pink);
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-sm);
}

.section-panel + .section-panel {
  margin-top: var(--space-6);
}

/* ── Filter Bar (replaces .btn-group) ────────────────────────────────────── */
.filter-bar {
  display: inline-flex;
  gap: 2px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-button);
  padding: 3px;
  flex-shrink: 0;
}

.filter-tab {
  padding: 5px 14px;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-button) - 2px);
  cursor: pointer;
  transition: color var(--transition-base), background var(--transition-base), border-color var(--transition-base);
  white-space: nowrap;
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
}

.filter-tab:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.04);
}

.filter-tab.active {
  color: var(--brand-pink-bright);
  background: var(--bg-card-hover);
  border-color: var(--border-pink);
}

/* ── KPI Card ─────────────────────────────────────────────────────────────── */
.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.kpi-card:hover {
  border-color: var(--border-pink);
  box-shadow: var(--shadow-pink);
}

.kpi-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.kpi-value {
  font-family: var(--font-ui);
  font-size: var(--fs-stat-lg);
  font-weight: var(--fw-black);
  color: var(--text-primary);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.kpi-delta {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  margin-top: var(--space-1);
}
.kpi-delta.positive { color: var(--status-good-bright); }
.kpi-delta.negative { color: var(--status-bad-bright); }

/* ── Page Header ──────────────────────────────────────────────────────────── */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.page-title {
  font-family: var(--font-ui);
  font-size: var(--fs-h1);
  font-weight: var(--fw-black);
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 0;
}

.page-subtitle {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

/* ── Panel Header (section title inside a .section-panel) ───────────────── */
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.panel-title {
  font-family: var(--font-ui);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 0;
}

.panel-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--brand-pink-muted);
  margin-bottom: var(--space-4);
  display: block;
}

/* ── Game Row (legacy — border coloring kept for backward compat) ─────────── */
.game-row {
  border-left: 3px solid var(--border-subtle);
  padding-left: var(--space-4) !important;
  transition: border-color var(--transition-base);
}

.game-row.is-victory { border-left-color: var(--status-good-border); }
.game-row.is-defeat  { border-left-color: var(--status-bad-border); }

/* ── Game Card (Home page — premium three-zone layout) ────────────────────── */
.game-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-left: 3px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base),
              border-left-color var(--transition-base);
}

.game-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.game-card.is-victory { border-left-color: var(--status-good-border); }
.game-card.is-victory:hover { border-left-color: var(--status-good-bright); }
.game-card.is-defeat  { border-left-color: var(--status-bad-border); }
.game-card.is-defeat:hover  { border-left-color: var(--status-bad-bright); }

.game-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid var(--border-subtle);
}

.game-card-body {
  padding: var(--space-5) var(--space-5) var(--space-4);
}

.game-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: rgba(0,0,0,0.2);
}

.game-card-progress {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  font-family: monospace;
  font-size: 0.77rem;
  color: var(--text-secondary);
  max-height: 72px;
  overflow-y: auto;
  background: var(--bg-void);
}

/* Result pill */
.result-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-button);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.result-win  { background: var(--status-good-wash); color: var(--status-good-bright); border: 1px solid var(--status-good-border); }
.result-loss { background: var(--status-bad-wash);  color: var(--status-bad-bright);  border: 1px solid var(--status-bad-border); }
.result-draw { background: rgba(250,204,21,0.08); color: var(--status-neutral); border: 1px solid rgba(250,204,21,0.2); }

/* Player matchup */
.matchup {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}

.matchup-player {
  font-family: var(--font-ui);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.matchup-player.is-user .matchup-name {
  color: var(--brand-pink-bright);
  font-weight: var(--fw-bold);
}

.matchup-sep {
  font-size: var(--fs-small);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.matchup-piece {
  font-size: 1.05em;
  line-height: 1;
  opacity: 0.65;
}

.matchup-opening {
  font-size: var(--fs-body);
  color: var(--text-secondary);
}

/* Analysis status in footer */
.game-analysis-status {
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.game-analysis-status.analyzed {
  color: var(--status-good-bright);
}

/* ── Hero Bar (lightened — a quiet page header, not a competing card) ────── */
.hero-bar {
  padding: var(--space-2) 0 var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-8);
}

.hero-greeting {
  font-family: var(--font-ui);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  letter-spacing: -0.01em;
  margin: var(--space-1) 0 var(--space-3) 0;
  line-height: 1.2;
}

.hero-greeting-name { color: var(--text-primary); font-weight: var(--fw-semibold); }

.hero-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ── Primary action card — the one obvious "what do I do next" element ──── */
.primary-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-top: 3px solid var(--brand-pink);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: var(--shadow-md), var(--shadow-pink);
  margin-bottom: var(--space-8);
}

/* Slim, low-weight teaser strip — sits above the primary card without
   competing with it for attention (no card chrome, just a tinted rule). */
.teaser-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  background: var(--brand-pink-wash);
  border-left: 3px solid var(--brand-pink);
  border-radius: var(--radius-sm);
}

/* Section heading used between major page blocks (Recent Games, etc.) */
.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Secondary-features block (PGN upload) — minimal chrome, clearly lower priority */
.secondary-feature {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}

/* 4-column KPI grid for the hero stats row */
.grid-kpi-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

@media (max-width: 900px) {
  .grid-kpi-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 500px) {
  .grid-kpi-4 { grid-template-columns: 1fr; }
}

/* Text-based KPI value (opening names, long strings) */
.kpi-value-text {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* ── Spinner ──────────────────────────────────────────────────────────────── */
.spinner-border {
  border-color: var(--brand-pink-muted);
  border-top-color: var(--brand-pink-bright);
}

/* ── Move Classification Badges ──────────────────────────────────────────── */
.badge-move {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.03em;
  white-space: nowrap;
  font-family: var(--font-ui);
}

.badge-brilliant  { background: rgba(0,212,255,0.12);   color: var(--move-brilliant);  border: 1px solid rgba(0,212,255,0.30); }
.badge-great      { background: rgba(34,197,94,0.10);   color: var(--move-great);      border: 1px solid rgba(34,197,94,0.30); }
.badge-best       { background: rgba(74,222,128,0.08);  color: var(--move-best);       border: 1px solid rgba(74,222,128,0.20); }
.badge-good       { background: rgba(134,239,172,0.06); color: var(--move-good);       border: 1px solid rgba(134,239,172,0.15); }
.badge-inaccuracy { background: rgba(251,146,60,0.10);  color: var(--move-inaccuracy); border: 1px solid rgba(251,146,60,0.30); }
.badge-mistake    { background: rgba(249,115,22,0.10);  color: var(--move-mistake);    border: 1px solid rgba(249,115,22,0.30); }
.badge-blunder    { background: var(--status-bad-wash); color: var(--move-blunder);    border: 1px solid var(--status-bad-border); }

/* ── Eval Bar ─────────────────────────────────────────────────────────────── */
.eval-bar {
  width: 12px;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-void);
  position: relative;
  display: flex;
  flex-direction: column;
}

.eval-bar-white {
  background: var(--text-primary);
  transition: height 400ms cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.eval-bar-black { flex: 1; }

.eval-bar.mate-white .eval-bar-white { background: var(--brand-pink-bright); }
.eval-bar.mate-black .eval-bar-black { background: var(--brand-pink); }

/* ── Eval Score Text ──────────────────────────────────────────────────────── */
.eval-positive {
  color: var(--status-good-bright);
  font-family: var(--font-notation);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-eval-sm);
}
.eval-negative {
  color: var(--status-bad-bright);
  font-family: var(--font-notation);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-eval-sm);
}
.eval-neutral {
  color: var(--text-muted);
  font-family: var(--font-notation);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-eval-sm);
}
.eval-mate {
  color: var(--brand-pink-bright);
  font-family: var(--font-notation);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-eval-sm);
  font-weight: var(--fw-bold);
}

/* ── PGN Notation ─────────────────────────────────────────────────────────── */
.pgn-notation {
  font-family: var(--font-notation);
  font-size: var(--fs-notation);
  line-height: 1.7;
}

.pgn-move-number {
  color: var(--text-ghost);
  font-size: 0.85em;
  font-weight: var(--fw-normal);
  user-select: none;
}

.pgn-san {
  color: var(--text-secondary);
  padding: 1px 4px;
  border-radius: 3px;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.pgn-san:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
}

.pgn-san.current {
  color: var(--brand-pink-bright);
  background: var(--brand-pink-wash);
  font-weight: var(--fw-semibold);
}

.pgn-annotation  { color: var(--move-best); }
.pgn-blunder     { color: var(--move-blunder); }
.pgn-mistake     { color: var(--move-mistake); }
.pgn-inaccuracy  { color: var(--move-inaccuracy); }

/* ── Analysis CTA Button ──────────────────────────────────────────────────── */
.btn-analysis {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: transparent;
  color: var(--brand-pink-bright);
  border: 1px solid rgba(226,30,99,0.35);
  padding: 5px 14px;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.03em;
  border-radius: var(--radius-button);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
  white-space: nowrap;
}

.btn-analysis:hover {
  background: var(--brand-pink-wash);
  border-color: var(--brand-pink);
  color: white;
  text-decoration: none;
}

.btn-analysis::after { content: ' →'; }

/* ── Skeleton Loading ─────────────────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-card) 0%,
    var(--bg-card-hover) 50%,
    var(--bg-card) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
  color: transparent;
  pointer-events: none;
}

.skeleton-text  { height: 14px; margin-bottom: 8px; }
.skeleton-title { height: 20px; width: 60%; margin-bottom: 12px; }
.skeleton-card  { height: 80px; border-radius: var(--radius-card); }

/* ── Animations ───────────────────────────────────────────────────────────── */
@keyframes blunder-pulse {
  0%   { background-color: rgba(239,68,68,0); }
  30%  { background-color: rgba(239,68,68,0.20); }
  100% { background-color: rgba(239,68,68,0); }
}

.blunder-flash {
  animation: blunder-pulse 600ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
  animation: fadeInUp 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ── Light Mode ────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg-void:        #f0edf5;
  --bg-card:        #ffffff;
  --bg-card-hover:  #f5f2fa;
  --bg-card-active: #fce4ef;

  --border-subtle:      #e2dcea;
  --border-card:        #d4cee2;
  --border-pink:        #f2c2d8;
  --border-pink-active: #e89bbf;

  --text-primary:   #1a1520;
  --text-secondary: #4d4757;
  --text-muted:     #706a7a;
  --text-ghost:     #a09aaa;

  --track-gray: #e0dcea;

  /* Semantic status / move-classification colors are tuned to pop against a
     near-black background (--bg-void: #060507 in dark mode). Reused as-is on
     light backgrounds several fall well below WCAG AA contrast — status-neutral
     was as low as 1.5:1 against white. Darkened/desaturated equivalents below
     verified at >=4.5:1 against bg-card, bg-void and bg-card-hover. Wash/tint
     variables (e.g. --status-good-wash) are untouched since those are pale
     background fills, not text. */
  --status-good:        #157a40;
  --status-good-bright: #15803d;
  --status-bad:         #c02418;
  --status-bad-bright:  #c0271b;
  --status-neutral:     #946200;
  --brand-pink-bright:  #c81458;

  --move-brilliant:  #066f8a;
  --move-great:      #126b34;
  --move-best:       #15803d;
  --move-good:       #1a7a3e;
  --move-inaccuracy: #9c4807;
  --move-mistake:    #9a3412;
  --move-blunder:    #c02418;

  --source-lichess: #386b2f;
}

/* Sidebar keeps its dark identity in light mode */
[data-theme="light"] .sidebar {
  --text-primary:   #f5f3f4;
  --text-secondary: #9a9499;
  --text-muted:     #7a7480;
  --text-ghost:     #3d3448;
  --bg-card-hover:  #221c29;
  --bg-card-active: #1f0414;
  --border-subtle:  #2e2733;
}