/* ─────────────────────────────────────────────────────────────────────────────
   EDMOND NINERS · Spring 2026
   Light + Dark theme · vibrant pills · mobile-first
───────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── Light theme (default) ──────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --page:   #EFF2F7;
  --card:   #FFFFFF;
  --card2:  #F5F7FA;
  --hdr:    #FFFFFF;

  /* Borders */
  --bdr:    rgba(0,0,0,.09);
  --bdr2:   rgba(0,0,0,.06);

  /* Text */
  --tx0: #0D1525;
  --tx1: #2C3A52;
  --tx2: #5A6A82;
  --tx3: #9BAABE;

  /* Vibrant pill colors */
  --c-home:   #2B7FFF;
  --c-away:   #E53030;
  --c-tour:   #D97706;
  --c-prac:   #16A34A;
  --c-neu:    #6B7280;
  --c-powder: #0EA5E9;

  /* Left-border accents */
  --lb-home:  #2B7FFF;
  --lb-away:  #E53030;
  --lb-tour:  #D97706;
  --lb-prac:  rgba(0,0,0,.12);
  --lb-neu:   #9BAABE;

  /* Date column tint */
  --date-bg:  rgba(43,127,255,.07);
  --date-bdr: rgba(43,127,255,.18);

  /* Hero top border */
  --hero-bdr-home: #2B7FFF;
  --hero-bdr-away: #E53030;
  --hero-bdr-tour: #D97706;

  /* Countdown badges */
  --cd-today-bg:  rgba(43,127,255,.12);
  --cd-today-tx:  #1A60D0;
  --cd-soon-bg:   rgba(217,119,6,.15);
  --cd-soon-tx:   #B45309;

  /* Action button tints */
  --act-dir-hover: rgba(229,48,48,.08);
  --act-cal-hover: rgba(43,127,255,.08);

  /* Misc */
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-card: 0 2px 8px rgba(0,0,0,.07);

  --font:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --r8:    6px;
  --r12:   8px;
  --r16:   10px;
  --rpill: 4px;
  --pad:   16px;
  --maxw:  680px;
}

/* ── Dark theme ─────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --page:   #0C1219;
  --card:   #141C28;
  --card2:  #1A2336;
  --hdr:    #080E18;

  --bdr:    rgba(255,255,255,.09);
  --bdr2:   rgba(255,255,255,.05);

  --tx0: #F0F5FF;
  --tx1: #C4CFDF;
  --tx2: #7B8BA6;
  --tx3: #4A5872;

  --c-home:   #2B7FFF;
  --c-away:   #FF4D4D;
  --c-tour:   #F59E0B;
  --c-prac:   #22C55E;
  --c-powder: #7EC8E3;

  --lb-prac:  rgba(255,255,255,.12);
  --lb-neu:   #6B7280;

  --date-bg:  rgba(43,127,255,.12);
  --date-bdr: rgba(43,127,255,.22);

  --cd-today-bg:  rgba(43,127,255,.25);
  --cd-today-tx:  #7BAFFF;
  --cd-soon-bg:   rgba(245,158,11,.2);
  --cd-soon-tx:   #FCD34D;

  --act-dir-hover: rgba(255,77,77,.1);
  --act-cal-hover: rgba(43,127,255,.1);

  --shadow: none;
  --shadow-card: none;
}

/* ── OS-level dark preference → apply dark by default ───────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page:   #0C1219;
    --card:   #141C28;
    --card2:  #1A2336;
    --hdr:    #080E18;
    --bdr:    rgba(255,255,255,.09);
    --bdr2:   rgba(255,255,255,.05);
    --tx0: #F0F5FF;
    --tx1: #C4CFDF;
    --tx2: #7B8BA6;
    --tx3: #4A5872;
    --c-home:   #2B7FFF;
    --c-away:   #FF4D4D;
    --c-tour:   #F59E0B;
    --c-prac:   #22C55E;
    --c-powder: #7EC8E3;
    --lb-prac:  rgba(255,255,255,.12);
    --lb-neu:   #6B7280;
    --date-bg:  rgba(43,127,255,.12);
    --date-bdr: rgba(43,127,255,.22);
    --cd-today-bg:  rgba(43,127,255,.25);
    --cd-today-tx:  #7BAFFF;
    --cd-soon-bg:   rgba(245,158,11,.2);
    --cd-soon-tx:   #FCD34D;
    --act-dir-hover: rgba(255,77,77,.1);
    --act-cal-hover: rgba(43,127,255,.1);
    --shadow: none;
    --shadow-card: none;
  }
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--page);
  color: var(--tx1);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  transition: background .2s, color .2s;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
svg { display: block; flex-shrink: 0; fill: none; stroke: currentColor;
      stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.app-wrapper { max-width: var(--maxw); margin: 0 auto; min-height: 100dvh;
               display: flex; flex-direction: column; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
  background: #1140A8;
  border-bottom: 1px solid rgba(0,0,0,.25);
  padding: 14px var(--pad) 10px;
  position: sticky; top: 0; z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.header-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.brand { display: flex; flex-direction: column; gap: 3px; }
.brand-name { display: flex; flex-direction: column; align-items: stretch; }
.brand-edmond {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  color: #ffffff; white-space: nowrap;
}
.brand-niners {
  font-size: 28px; font-weight: 900; line-height: 1;
  letter-spacing: .04em; text-transform: uppercase; color: #FF3B3B;
}
.brand-season {
  font-size: 8.5px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: #A8D4F0;
}

.header-actions { display: flex; gap: 5px; align-items: center; flex-wrap: nowrap; min-width: 0; overflow: hidden; }

/* Theme toggle button */
.btn-theme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 4px;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.8); cursor: pointer; flex-shrink: 0;
  transition: background .14s, color .14s;
  -webkit-tap-highlight-color: transparent;
}
.btn-theme:hover { background: rgba(255,255,255,.25); color: #fff; }
.btn-theme:active { opacity: .7; }
.btn-theme svg { width: 15px; height: 15px; }
/* Show correct icon per theme */
.icon-moon { display: block; }
.icon-sun  { display: none; }
[data-theme="dark"] .icon-moon { display: none; }
[data-theme="dark"] .icon-sun  { display: block; }

.btn-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font); font-size: 11px; font-weight: 600;
  border-radius: 4px; padding: 6px 10px; min-height: 32px;
  white-space: nowrap; cursor: pointer; flex-shrink: 1; min-width: 0;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: opacity .14s;
}
.btn-pill svg { width: 12px; height: 12px; }
.btn-pill:active { opacity: .7; }
.btn-pill--primary { background: #FF3B3B; color: #fff; }
.btn-pill--primary:hover { opacity: .88; }
.btn-pill--ghost {
  background: rgba(255,255,255,.15); color: #fff;
  border: 1px solid rgba(255,255,255,.25);
}
.btn-pill--ghost:hover { background: rgba(255,255,255,.25); }

/* ── Header filter strip ─────────────────────────────────────────────────── */
.header-filter {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.2);
}
.filter-label {
  font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.6);
}
.toggle-switch {
  position: relative; display: inline-flex; align-items: center;
  width: 38px; height: 22px; border-radius: 4px;
  background: rgba(255,255,255,.2); border: none; cursor: pointer; padding: 0;
  transition: background .2s; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.toggle-switch[aria-pressed="true"] { background: #22C55E; }
.toggle-knob {
  position: absolute; left: 2px;
  width: 18px; height: 18px; border-radius: 3px;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4);
  transition: transform .2s;
}
.toggle-switch[aria-pressed="true"] .toggle-knob { transform: translateX(16px); }

/* ── GameChanger bar ─────────────────────────────────────────────────────── */
.gc-bar {
  background: #0a0a0a;
  border-bottom: 1px solid #1a2e1a;
}
.gc-bar-link {
  display: flex; align-items: center; gap: 7px;
  padding: 8px var(--pad);
  font-size: 11px; font-weight: 600; color: #7ac97a;
  text-decoration: none;
  transition: background .13s, color .13s;
  -webkit-tap-highlight-color: transparent;
}
.gc-bar-link:hover { background: #111; color: #9de09d; }
.gc-bar-link:active { opacity: .7; }
.gc-bar-link svg:first-child { width: 13px; height: 13px; flex-shrink: 0; color: #4CAF50; }
.gc-arrow { width: 12px; height: 12px; flex-shrink: 0; margin-left: auto; opacity: .5; color: #4CAF50; }

/* ── Main ────────────────────────────────────────────────────────────────── */
main { flex: 1; padding: 0 0 56px; display: flex; flex-direction: column; gap: 0; }

/* ── Sticky today hero ───────────────────────────────────────────────────── */
.hero--sticky {
  position: sticky;
  top: 0; /* overridden by JS to account for header + gc-bar height */
  z-index: 8;
  border-radius: 0;
  border-left: none; border-right: none; border-top: none;
  border-bottom: 3px solid var(--bdr);
  margin-bottom: 0;
}

/* Card list sits flush below */
.card-list { padding: 12px var(--pad) 0; display: flex; flex-direction: column; gap: 10px; }

/* ── Card list ───────────────────────────────────────────────────────────── */
.card-list { display: flex; flex-direction: column; gap: 10px; }

/* ── Chips — solid color, sharp corners ──────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center;
  font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  border-radius: 3px; padding: 3px 7px; line-height: 1.5;
  white-space: nowrap; color: #fff; flex-shrink: 0;
}
.chip--home    { background: var(--c-home); }
.chip--away    { background: var(--c-away); }
.chip--neutral { background: var(--c-powder); color: #fff; }
.chip--prac    { background: var(--c-prac); }
.chip--tourney { background: var(--c-tour); color: #fff; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  background: var(--card);
  border-radius: var(--r16);
  border: 1px solid var(--bdr);
  border-top: 4px solid var(--bdr);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.hero--home, .hero--neutral { border-top-color: var(--hero-bdr-home, var(--c-home)); }
.hero--away                 { border-top-color: var(--hero-bdr-away, var(--c-away)); }
.hero--tournament           { border-top-color: var(--hero-bdr-tour, var(--c-tour)); }

.hero-inner { padding: 16px var(--pad) var(--pad); }

.hero-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px;
}
.hero-eyebrow {
  font-size: 9px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
}
.hero--home .hero-eyebrow, .hero--neutral .hero-eyebrow { color: var(--c-home); }
.hero--away .hero-eyebrow  { color: var(--c-away); }
.hero--tournament .hero-eyebrow { color: var(--c-tour); }

.hero-badge {
  font-size: 11px; font-weight: 600; color: var(--tx2);
  background: rgba(128,128,128,.1); border: 1px solid var(--bdr);
  border-radius: 4px; padding: 3px 10px;
}

.hero-vs { font-size: 11px; font-weight: 600; color: var(--tx2); margin-bottom: 4px; }
.hero-title {
  font-size: clamp(30px, 7.5vw, 42px); font-weight: 900;
  color: var(--tx0); letter-spacing: -.04em; line-height: .95; margin-bottom: 18px;
}

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 16px 24px;
  padding: 14px 0;
  border-top: 1px solid var(--bdr2);
  border-bottom: 1px solid var(--bdr2);
  margin-bottom: 14px;
}
.hero-stat { display: flex; flex-direction: column; gap: 3px; }
.hs-label { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; color: var(--tx3); }
.hs-val   { font-size: 16px; font-weight: 800; color: var(--tx0); letter-spacing: -.02em; }

.hero-actions { display: flex; gap: 8px; }
.hero-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--font); font-size: 13px; font-weight: 700;
  border-radius: var(--r8); padding: 13px 16px; min-height: 48px;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: opacity .14s; border: none;
}
.hero-btn svg { width: 15px; height: 15px; }
.hero-btn:active { opacity: .75; }
.hero-btn--dir { background: var(--c-away); color: #fff; }
.hero-btn--dir:hover { opacity: .88; }
.hero-btn--cal {
  background: rgba(128,128,128,.1); color: var(--tx1);
  border: 1px solid var(--bdr);
}
.hero-btn--cal:hover { background: rgba(128,128,128,.18); }

/* ── Event card ──────────────────────────────────────────────────────────── */
.ecard {
  background: var(--card);
  border-radius: var(--r12);
  border: 1px solid var(--bdr);
  border-left: 4px solid var(--lb-prac);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.ecard--home       { border-left-color: var(--lb-home); }
.ecard--away       { border-left-color: var(--lb-away); }
.ecard--neutral    { border-left-color: var(--lb-neu); }
.ecard--tournament { border-left-color: var(--lb-tour); }
.ecard--practice   { border-left-color: var(--lb-prac); }
.ecard--past       { opacity: .38; }
.ecard--past:hover { opacity: .6; transition: opacity .2s; }

/* Card inner: date | body */
.ecard-inner { display: flex; align-items: stretch; min-height: 80px; }

/* Date column */
.ecard-date {
  width: 60px; min-width: 60px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1px; padding: 12px 8px;
  background: var(--date-bg);
  border-right: 1px solid var(--date-bdr);
  transition: background .2s, border-color .2s;
}
.edb-mo { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-home); }
.edb-d  { font-size: 26px; font-weight: 900; color: var(--tx0); line-height: 1; letter-spacing: -.03em; }
.edb-wd { font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tx3); }

/* Body */
.ecard-body {
  flex: 1; min-width: 0;
  padding: 11px 13px 10px;
  display: flex; flex-direction: column; gap: 4px;
}

.ecard-top { display: flex; align-items: center; gap: 7px; }
.ecard-cd {
  margin-left: auto; font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 4px;
  background: rgba(128,128,128,.1); color: var(--tx2); white-space: nowrap; flex-shrink: 0;
}
.ecard-cd--today { background: var(--cd-today-bg); color: var(--cd-today-tx); }
.ecard-cd--soon  { background: var(--cd-soon-bg);  color: var(--cd-soon-tx); }

.ecard-title {
  font-size: 18px; font-weight: 800; color: var(--tx0);
  letter-spacing: -.025em; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ecard--practice .ecard-title { font-size: 13px; font-weight: 600; color: var(--tx2); }

.ecard-sub {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: 13px; font-weight: 600; color: var(--tx1);
}
.ecard-sub .sep    { color: var(--tx3); }
.ecard-sub .arrive { font-size: 12px; font-weight: 500; color: var(--tx3); }

.ecard-loc {
  display: flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 500; color: var(--tx2);
}
.ecard-loc svg { width: 11px; height: 11px; opacity: .5; }

/* Action strip */
.ecard-actions { display: flex; border-top: 1px solid var(--bdr2); }
.eact {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 12px;
  font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: .01em;
  cursor: pointer; border: none; background: none; color: inherit;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background .12s; white-space: nowrap;
}
.eact svg { width: 13px; height: 13px; }
.eact:active { opacity: .65; }
.eact + .eact { border-left: 1px solid var(--bdr2); }
.eact--dir { color: var(--c-away); }
.eact--dir:hover { background: var(--act-dir-hover); }
.eact--cal { color: var(--c-home); }
.eact--cal:hover { background: var(--act-cal-hover); }

/* ── Past toggle ─────────────────────────────────────────────────────────── */
.past-wrap { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding: 0 var(--pad); }
.past-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 12px 16px;
  background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r12);
  font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--tx2);
  cursor: pointer; touch-action: manipulation; transition: background .13s;
  box-shadow: var(--shadow-card);
}
.past-toggle:hover { background: var(--card2); }
.past-chev { display: flex; width: 16px; height: 16px; transition: transform .2s; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--card); border-top: 1px solid var(--bdr);
  padding: 12px var(--pad); text-align: center;
  transition: background .2s, border-color .2s;
}
.site-footer p { font-size: 10px; color: var(--tx3); letter-spacing: .06em; }

/* ── Animation ───────────────────────────────────────────────────────────── */
@keyframes up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim { animation: up .24s cubic-bezier(.22,.68,0,1.1) both; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 400px) {
  :root { --pad: 12px; }
  .ecard-date  { width: 52px; }
  .edb-d       { font-size: 22px; }
  .ecard-title { font-size: 16px; }
  .hero-title  { font-size: 28px; }
  .btn-pill    { font-size: 10px; padding: 5px 8px; gap: 3px; }
  .btn-pill svg { width: 11px; height: 11px; }
}
@media (max-width: 360px) {
  .btn-pill    { font-size: 9.5px; padding: 5px 6px; }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .site-footer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}
:focus-visible { outline: 2px solid var(--c-home); outline-offset: 2px; border-radius: 4px; }