/* ============================================================================
   ToloCourt — Brand Kit · US Edition v1.1
   Single source of truth for color, type, and core UI components.
   Reused across landing, player app, and owner console.

   Rules (from the kit):
     - Court Green #0A6B54 = brand & action (Reserve button, links, the icon)
     - Volt        #C2F23B = one spark only — a word, a "live court" tag, an AI
                              cue, one accent button on a dark band. Never on light.
     - Ink         #0E1513 = premium dark surfaces (conversion bands)
     - Chalk       #F7F8F5 = light base / page background (breathing room)
     - Slate       #586460 = neutral body text on light
   Type: Bricolage Grotesque (display) · Inter (body) · JetBrains Mono (numbers)
   Voice: confident, never loud · benefit-first · American-plain · effortless
   ========================================================================== */

:root {
  /* ---- US Edition tokens ---- */
  --ink:#0E1513;        /* premium dark + text on light */
  --green:#0A6B54;      /* Court Green — primary brand & action */
  --green-700:#085943;  /* hover on light */
  --volt:#C2F23B;       /* Volt — accent spark, sparing, on dark only */
  --volt-ink:#243B05;   /* text on Volt */
  --chalk:#F7F8F5;      /* light base / page background */
  --white:#FFFFFF;      /* cards & app surfaces */
  --slate:#586460;      /* body text on light */
  --muted-dark:#93A8A1; /* body text on dark */
  --line:#E5E8E2;       /* hairlines on light */
  --line-dark:rgba(247,248,245,.14);
  --mist:#E4F0E9;       /* green tint · live court, chips */
  --danger:#B23B2E;     /* destructive UI only (not a brand color) */

  /* ---- Back-compat aliases (older pages) ---- */
  --cal:var(--chalk);
  --paper:var(--white);
  --muted-light:var(--slate);
  --optic:var(--volt);
  --optic-ink:var(--volt-ink);
  --clay:var(--danger);

  /* ---- Type ---- */
  --font-display: "Bricolage Grotesque", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Radius / shadow (kit: btn 12 · card 10-14 · band 18-28) ---- */
  --r-btn: 12px; --r-card: 12px; --r-band: 24px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(14,21,19,.05);
  --shadow:    0 26px 64px -36px rgba(14,21,19,.42);

  --maxw: 1140px;
}

* { box-sizing: border-box; }
/* Guard against any stray wide element shifting the page sideways on mobile.
   `clip` (not `hidden`) so it never creates a scroll container that would break
   position:sticky headers. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  max-width: 100%;
  overflow-x: clip;
  overflow-wrap: break-word;     /* long unbroken strings wrap instead of overflowing */
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--chalk);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Layout ---- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.section   { padding: clamp(54px, 8vw, 100px) 0; }

/* ---- Type ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.04; margin: 0; color: var(--ink);
}
.display {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(36px, 5.8vw, 58px); line-height: 1.0; letter-spacing: -.03em;
}
.h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3.3vw, 36px); letter-spacing: -.022em; }
.lede { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.55; color: var(--slate); max-width: 54ch; }

/* eyebrow / label — Inter 600 · 11px · UPPERCASE · +10% */
.eyebrow {
  font-family: var(--font-body); font-weight: 600; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--green); margin: 0;
}
.mono { font-family: var(--font-mono); font-weight: 500; }
.figure { font-family: var(--font-mono); font-weight: 500; letter-spacing: -.01em; }

/* ---- Buttons (radius 12 · padding 12×20 · weight 600) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--r-btn);
  font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .12s ease, background .15s ease, border-color .15s ease, filter .15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-green { background: var(--green); color: #fff; }                  /* on light */
.btn-green:hover { background: var(--green-700); }
.btn-volt, .btn-optic { background: var(--volt); color: var(--volt-ink); }  /* on dark, sparing */
.btn-volt:hover, .btn-optic:hover { filter: brightness(1.05); }
.btn-outline { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-outline:hover { border-color: var(--green); color: var(--green); }
.btn-outline-dark { border-color: var(--line-dark); color: var(--chalk); background: transparent; }
.btn-outline-dark:hover { border-color: var(--volt); color: #fff; }
.btn-ink { background: var(--ink); color: var(--chalk); }
.btn-ink:hover { filter: brightness(1.25); }
.btn-lg { padding: 15px 26px; font-size: 16px; }
.btn-sm { padding: 10px 15px; font-size: 14px; }

/* ---- Cards / slots (radius 12 · 1px line) ---- */
.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 24px; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #d9ddd5; }

/* ---- Dark band (Ink) — conversion punctuation ---- */
.band-dark {
  background:
    radial-gradient(900px 420px at 86% -20%, rgba(194,242,59,.10), transparent 60%),
    var(--ink);
  color: var(--chalk); border-radius: var(--r-band);
}
.band-dark .eyebrow { color: var(--volt); }
.band-dark .lede, .band-dark .muted { color: var(--muted-dark); }
.band-dark h1, .band-dark h2, .band-dark h3 { color: var(--chalk); }

/* ---- Pills / chips ---- */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--r-pill);
  font-family: var(--font-body); font-weight: 600; font-size: 12px;
  border: 1px solid var(--line); background: var(--white); color: var(--slate);
}
.pill-soft { background: var(--mist); border-color: rgba(10,107,84,.18); color: var(--green); }

/* live / active signal — Court Green on light, Volt on dark */
.dot-live {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none;
  display: inline-block; box-shadow: 0 0 0 0 rgba(10,107,84,.5); animation: pulse 2.1s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(10,107,84,.45); }
  70% { box-shadow: 0 0 0 8px rgba(10,107,84,0); }
  100% { box-shadow: 0 0 0 0 rgba(10,107,84,0); }
}
.band-dark .dot-live, .on-dark .dot-live { background: var(--volt); animation: pulse-volt 2.1s infinite; }
@keyframes pulse-volt {
  0% { box-shadow: 0 0 0 0 rgba(194,242,59,.45); }
  70% { box-shadow: 0 0 0 8px rgba(194,242,59,0); }
  100% { box-shadow: 0 0 0 0 rgba(194,242,59,0); }
}

/* ---- Brand lockup ---- */
.lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.lockup .mark { width: 36px; height: 36px; display: block; }
.lockup .wordmark { font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -.02em; color: var(--ink); }
.lockup .wordmark b { color: var(--green); font-weight: 800; }
.on-dark .lockup .wordmark, .band-dark .lockup .wordmark { color: var(--chalk); }
.on-dark .lockup .wordmark b, .band-dark .lockup .wordmark b { color: var(--volt); }

/* ---- Utilities ---- */
.hr { height: 1px; background: var(--line); border: 0; margin: 0; }
a { color: var(--green); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }
.band-dark a, .on-dark a { color: var(--volt); }
/* ...but solid buttons keep their own label color (the volt-link rule above
   would otherwise paint a Volt button's text Volt — invisible on Volt). */
.band-dark .btn-volt, .on-dark .btn-volt, .band-dark .btn-optic, .on-dark .btn-optic { color: var(--volt-ink); }
.band-dark .btn-green, .on-dark .btn-green { color: #fff; }
.band-dark .btn-ink, .on-dark .btn-ink { color: var(--chalk); }

/* ============================================================================
   v1.2 — Data-viz + motion layer (additive). Mobile-first, reduced-motion safe.
   ========================================================================== */
:root {
  --ease-out: cubic-bezier(.22,1,.36,1);     /* smooth settle: counts, draws, bars */
  --ease-spring: cubic-bezier(.34,1.56,.64,1); /* gentle overshoot: pops, taps */
  --dur-fast: 120ms; --dur: 420ms; --dur-slow: 900ms;

  --viz-track: #EEF1EC;                 /* empty bar/ring track on light */
  --viz-grid: rgba(14,21,19,.06);       /* hairline gridlines */

  /* Revenue ramp — ONE green family, no rainbow. */
  --sport-1: #0A6B54;  /* Court Green */
  --sport-2: #3F9B82;  /* green tint up */
  --sport-3: #7FB3A4;  /* green tint up x2 */
  --sport-4: #586460;  /* Slate — neutral "other" */
}

/* tabular figures so animated numbers never jitter width */
.figure, .stat b, .kpi-num, .donut-total b, .chart-total { font-variant-numeric: tabular-nums; }

/* reveal-on-scroll primitive (IntersectionObserver toggles .in) */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* horizontal meter (utilization / capacity) */
.meter { height: 6px; border-radius: var(--r-pill); background: var(--viz-track); overflow: hidden; }
.meter > i { display: block; height: 100%; width: 0; border-radius: var(--r-pill); background: var(--green); transition: width var(--dur-slow) var(--ease-out); }
.meter.is-full > i { background: var(--danger); }
.meter.is-warm > i { background: #C98A2B; }

/* donut arcs */
.arc { stroke-dasharray: 0 999; transition: stroke-dasharray var(--dur-slow) var(--ease-out); }

/* skeleton shimmer */
.skel { background: linear-gradient(90deg,var(--viz-track) 25%,#f3f5f1 37%,var(--viz-track) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 8px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* branded empty state */
.empty { text-align: center; padding: 28px 18px; color: var(--slate); }
.empty svg { width: 46px; height: 46px; color: var(--green); opacity: .9; margin-bottom: 10px; }
.empty h4 { font-family: var(--font-display); font-weight: 700; color: var(--ink); margin: 0 0 4px; font-size: 16px; }
.empty p { margin: 0 0 14px; font-size: 14px; }

/* inline retry error (replaces alert()) */
.err-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; background: rgba(178,59,46,.06); border: 1px solid rgba(178,59,46,.22); color: var(--danger); border-radius: 12px; padding: 10px 14px; font-size: 13px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop-in { 0% { transform: scale(.96); opacity: 0; } 60% { transform: scale(1.02); } 100% { transform: scale(1); opacity: 1; } }
@keyframes stamp { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
@keyframes conf-fall { to { transform: translate(var(--dx),46px) rotate(var(--r)); opacity: 0; } }

/* button busy spinner — set aria-busy="true" */
.btn[aria-busy="true"] { color: transparent !important; position: relative; pointer-events: none; }
.btn[aria-busy="true"]::after { content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%; border: 2px solid #fff; border-right-color: transparent; animation: spin .7s linear infinite; }
.btn.ghost[aria-busy="true"]::after, .btn.danger[aria-busy="true"]::after, .btn.btn-outline[aria-busy="true"]::after { border-color: var(--green); border-right-color: transparent; }

@media (max-width: 560px) { .btn { min-height: 44px; } }

/* GLOBAL reduced-motion guard — every animated element also has a defined end state */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .skel { animation: none; background: var(--viz-track); }
  .reveal { opacity: 1; transform: none; }
  /* a frozen spinner looks broken — hide it and let the label show instead */
  .btn[aria-busy="true"] { color: inherit !important; }
  .btn[aria-busy="true"]::after { display: none; }
}

/* ---- Light/dark toggle button ---- */
.theme-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; padding: 0; transition: border-color .15s ease, color .15s ease; }
.theme-btn:hover { border-color: var(--green); color: var(--green); }
.theme-btn svg { width: 18px; height: 18px; }

/* ============================================================================
   Dark theme — only when html[data-theme="dark"] is set (app pages). Surfaces
   and text remap through tokens; Court Green stays the action color, but green
   TEXT and thin green marks are lightened for contrast on dark.
   ========================================================================== */
html[data-theme="dark"] {
  --chalk: #0F1714;        /* page background */
  --white: #18221E;        /* cards / surfaces */
  --ink: #ECF1EC;          /* primary text */
  --slate: #9DB0A9;        /* body text */
  --muted-dark: #9DB0A9;
  --line: rgba(255,255,255,.10);
  --line-dark: rgba(255,255,255,.14);
  --mist: #15271F;         /* green-tint chips on dark */
  --viz-track: rgba(255,255,255,.07);
  --viz-grid: rgba(255,255,255,.08);
  --green-700: #0d8a69;    /* button hover, a touch brighter on dark */
  --sport-1: #23A083; --sport-2: #4FB89E; --sport-3: #84C9B8; --sport-4: #6E7D78;
  --shadow: 0 24px 60px -34px rgba(0,0,0,.7);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  color-scheme: dark;
}
/* green-as-text → lighter green for readable contrast on dark */
html[data-theme="dark"] :is(.eyebrow, a, .switch, .booked, .paid, .paid-amt, .ok, .pill, .pill-soft, .ai-tag, .wait-tag, .left-pill, .live-badge, .banner b, .bars-x .is-today, .lockup .wordmark b, .logo .wordmark b) { color: #54C2A4; }
html[data-theme="dark"] .btn.ghost:hover, html[data-theme="dark"] .btn-outline:hover, html[data-theme="dark"] .slot.open:hover, html[data-theme="dark"] .slot.mine .p { color: #54C2A4; }
html[data-theme="dark"] .btn.ghost:hover, html[data-theme="dark"] .btn-outline:hover, html[data-theme="dark"] .slot.open:hover { border-color: #54C2A4; }
/* thin green marks need lifting too */
html[data-theme="dark"] .dot-live, html[data-theme="dark"] .ai-tag .dot { background: #54C2A4; }
html[data-theme="dark"] .meter:not(.is-warm):not(.is-full) > i { background: #2FA98B; }
html[data-theme="dark"] .bar7 { background: #3E5C52; }
html[data-theme="dark"] .bar7.today { background: #54C2A4; }
html[data-theme="dark"] .pill, html[data-theme="dark"] .ai-tag, html[data-theme="dark"] .wait-tag, html[data-theme="dark"] .left-pill { border-color: rgba(84,194,164,.30); }
/* hardcoded-light fixes */
html[data-theme="dark"] input, html[data-theme="dark"] select { background: #101A16; color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .skel { background: linear-gradient(90deg, var(--viz-track) 25%, rgba(255,255,255,.08) 37%, var(--viz-track) 63%); background-size: 400% 100%; }
html[data-theme="dark"] .session:hover { border-color: rgba(255,255,255,.18); }
html[data-theme="dark"] .card:hover { border-color: rgba(255,255,255,.20); }
html[data-theme="dark"] #toast { background: #06140F; border: 1px solid rgba(255,255,255,.12); }
/* The Ink bands are ALWAYS a dark surface — pin them so they don't invert when
   --ink/--chalk flip in dark mode, and give a hairline against the dark page. */
html[data-theme="dark"] .band-dark {
  background: radial-gradient(900px 420px at 86% -20%, rgba(194,242,59,.10), transparent 60%), #0A130F;
  color: #DCE6E1;
  border: 1px solid rgba(255,255,255,.07);
}
html[data-theme="dark"] .band-dark h1, html[data-theme="dark"] .band-dark h2, html[data-theme="dark"] .band-dark h3 { color: #F2F6F3; }