/* ============================================================
   YouthClubReviews — Design tokens
   Aesthetic: "Bolt" — bold, sporty, high-contrast.
   Near-black court · cream text · electric-yellow primary ·
   red spark · condensed all-caps display type · square corners.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* Dark-native form controls, scrollbars, and dropdowns */
  color-scheme: dark;

  /* ---- Type families ---- */
  --font-display: 'Anton', 'Archivo', system-ui, sans-serif;
  --font-ui: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* ---- Brand palette: "Bolt" (default) ---- */
  --paper:      #0A0A0A;   /* near-black page background */
  --paper-2:    #17170F;   /* raised band / inset */
  --surface:    #151510;   /* cards — lifted enough to read as panels */
  --ink:        #FEF6DF;   /* primary text — warm cream */
  --ink-soft:   #CCC5AF;   /* secondary text */
  --ink-faint:  #948F7C;   /* tertiary / meta */
  --line:       #32322A;   /* hairline borders on paper */
  --line-soft:  #2A2A23;
  --line-card:  #383830;   /* borders on card surfaces */

  --accent:        #F0FF3A;   /* electric volt yellow — brand / links / CTAs */
  --accent-deep:   #C9D71B;
  --accent-tint:   #23240E;   /* dark yellow wash */
  --accent-ink:    #F6FF8A;   /* readable yellow text on dark washes */
  --on-accent:     #0A0A0A;   /* text/icons placed on the accent */
  --on-ink:        #0A0A0A;   /* text/icons placed on --ink surfaces */

  /* ---- Energy accent (red) — sparing, for spark & emphasis ---- */
  --energy:       #FF2D1F;
  --energy-deep:  #D91E12;
  --energy-tint:  #2E100C;
  --energy-ink:   #FF6B5E;

  /* ---- Rating + semantic scale ---- */
  --star:        #FFB020;   /* trophy gold — distinct from the volt accent */
  --star-track:  #32322A;

  --pos:   #17A063;   /* good / would-return yes */
  --pos-bg:#10281C;
  --mid:   #E09A12;   /* mixed / maybe */
  --mid-bg:#2B210C;
  --neg:   #E8483A;   /* poor / would-not-return */
  --neg-bg:#2B100D;

  /* ---- Confidence scale (signature motif) ---- */
  --conf-1: #E8483A;  /* very low — red */
  --conf-2: #E09A12;  /* low — amber */
  --conf-3: #4D7CFF;  /* moderate — court blue */
  --conf-4: #17A063;  /* higher — green */

  /* ---- Radii / shadow / spacing ---- */
  --r-xs: 0px;
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --r-pill: 0px;

  --shadow-sm: 0 0 0 1px rgba(254,246,223,.07);
  --shadow-md: 0 0 0 1px rgba(254,246,223,.10), 0 10px 28px rgba(0,0,0,.45);
  --shadow-lg: 0 0 0 1px rgba(254,246,223,.14), 0 24px 60px rgba(0,0,0,.6);

  --maxw: 1200px;
}

/* ---- Brand palette variants (swapped via Tweaks data-palette) ---- */
:root[data-palette="field"] {
  --accent:      #1934FF;   /* court royal blue */
  --accent-deep: #1226C4;
  --accent-tint: #0E1330;
  --accent-ink:  #8FA0FF;
  --on-accent:   #FEF6DF;
  --energy:      #F0FF3A;   /* volt spark */
  --energy-tint: #23240E;
  --energy-ink:  #F6FF8A;
  --star:        #F0FF3A;
}

:root[data-palette="sunset"] {
  --accent:      #FF2D1F;   /* match red */
  --accent-deep: #D91E12;
  --accent-tint: #2E100C;
  --accent-ink:  #FF8A7E;
  --on-accent:   #FEF6DF;
  --energy:      #F0FF3A;   /* volt spark */
  --energy-tint: #23240E;
  --energy-ink:  #F6FF8A;
  --star:        #F0FF3A;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  /* Anton ships one weight; never fake-bold it. */
  font-synthesis: none;
}

button, a, select { touch-action: manipulation; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

::selection { background: var(--accent); color: var(--on-accent); }

/* Bold sporty display: shout the headings */
h1, h2, h3 { text-transform: uppercase; letter-spacing: 0.01em; }

/* Tabular numerals everywhere numbers matter */
.tnum { font-variant-numeric: tabular-nums; }
.dnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Shared compact filter selects */
.cr-filter-row {
  margin: 14px 0 18px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.cr-filter-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--ink-faint);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}

.cr-filter-control__label {
  flex: 0 0 auto;
}

.cr-select-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.cr-filter-select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 154px;
  height: 38px;
  padding: 0 38px 0 14px;
  border: 1px solid var(--line-card);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.cr-filter-select--wide {
  min-width: 190px;
}

.cr-select-shell > svg {
  position: absolute;
  right: 12px;
  pointer-events: none;
  color: var(--ink-soft);
}

.cr-filter-select:hover {
  border-color: color-mix(in srgb, var(--ink-faint) 55%, var(--line-card));
}

.cr-filter-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

@media (max-width: 640px) {
  .cr-filter-row {
    align-items: stretch;
  }

  .cr-filter-control {
    width: 100%;
    justify-content: space-between;
  }

  .cr-select-shell {
    flex: 1 1 auto;
  }

  .cr-filter-select {
    width: 100%;
    min-width: 0;
  }
}

/* Thin scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }