/* CourtWatch shared design system — used by every page in public/.
   Apple-style: system font, size-specific tracking, light + dark colors,
   frosted sticky header, spring-eased (interruptible) motion, and full
   respect for reduced-motion / reduced-transparency / increased-contrast.
   Page-specific layout stays in each page's own <style> block. */

/* ---------- Color + type tokens ---------- */
:root {
  color-scheme: light dark;

  --bg: #f5f5f7;
  --bg-alt: #ffffff;
  --card: #ffffff;
  --card-raised: #ffffff;
  --field: #ffffff;
  --fill: rgba(118, 118, 128, 0.12);
  --fill-strong: rgba(118, 118, 128, 0.2);
  --text: #1d1d1f;
  --text-secondary: #65656a;      /* was #6e6e73: 4.3:1 on grey fills -> now 4.6:1+ (WCAG 1.4.3) */
  --text-tertiary: #6a6a6e;       /* was #8e8e93: 3.0–3.3:1 -> now 4.6:1+ */
  --separator: rgba(60, 60, 67, 0.16);
  --separator-strong: rgba(60, 60, 67, 0.56); /* field borders: was 0.3 (1.7:1) -> 3.1:1 (WCAG 1.4.11) */

  --accent: #1a7f42;          /* buttons, checked states */
  --accent-hover: #146a36;
  --on-accent: #ffffff;
  --accent-text: #17753c;     /* accent used as text on --bg / --card / tints (was #187a3f: 4.3:1 on tint) */
  --accent-tint: rgba(36, 160, 85, 0.13);
  --notice: #9a5200;          /* amber: weekly / notified / notes */
  --notice-tint: rgba(255, 149, 0, 0.16);
  --danger: #c4000f;
  --danger-tint: rgba(255, 59, 48, 0.1);

  --material: rgba(245, 245, 247, 0.72);   /* frosted header */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 24px rgba(0, 0, 0, 0.06);
  --shadow-pop: 0 2px 8px rgba(0, 0, 0, 0.08), 0 18px 48px rgba(0, 0, 0, 0.16);
  --focus-ring: 0 0 0 4px rgba(26, 127, 66, 0.28);

  --radius-card: 20px;
  --radius-field: 12px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Critically damped spring (damping 1.0, response 0.35s), sampled into
     linear(). Transitions retarget from the element's current value, so
     every motion here can be interrupted and reversed mid-flight. */
  --spring: cubic-bezier(0.25, 1, 0.5, 1);
  --spring-duration: 500ms;
  --press-duration: 100ms;
  --fade-duration: 220ms;

  /* Older names still used by inline styles in the markup. */
  --muted: var(--text-secondary);
  --line: var(--separator);
  --cream: var(--text);
  --amber: var(--notice);
  --go: var(--accent);
}

@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, 0.0751, 0.2266, 0.3895, 0.5357, 0.656, 0.75, 0.821, 0.8734, 0.9113, 0.9383, 0.9574, 0.9707, 0.98, 0.9864, 0.9908, 0.9938, 0.9958, 0.9972, 0.9981, 1);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-alt: #0f0f10;
    --card: #1c1c1e;
    --card-raised: #2c2c2e;
    --field: #2c2c2e;
    --fill: rgba(118, 118, 128, 0.24);
    --fill-strong: rgba(118, 118, 128, 0.36);
    --text: #f5f5f7;
    --text-secondary: #a1a1a6;
    --text-tertiary: #9b9b9e;       /* was #6e6e73: 2.8–4.1:1 -> now 4.6:1+ */
    --separator: rgba(84, 84, 88, 0.6);
    --separator-strong: rgba(160, 160, 166, 0.6); /* field borders: was 2.5:1 -> 3.5:1 */

    --accent: #30d158;
    --accent-hover: #4cdb70;
    --on-accent: #00230e;
    --accent-text: #30d158;
    --accent-tint: rgba(48, 209, 88, 0.18);
    --notice: #ffb340;
    --notice-tint: rgba(255, 159, 10, 0.2);
    --danger: #ff6961;
    --danger-tint: rgba(255, 69, 58, 0.18);

    --material: rgba(22, 22, 23, 0.72);
    --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.06);
    --shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 48px rgba(0, 0, 0, 0.6);
    --focus-ring: 0 0 0 4px rgba(48, 209, 88, 0.35);
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; } /* keeps focused fields clear of the sticky header */

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;          /* 17px, Apple body size */
  line-height: 1.47;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  -webkit-tap-highlight-color: transparent;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; letter-spacing: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Size-specific tracking: big text tighter, small text near zero. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
  text-wrap: balance;
}
h1 { letter-spacing: -0.03em; line-height: 1.06; }
h2 { letter-spacing: -0.025em; line-height: 1.1; }
h3 { letter-spacing: -0.015em; line-height: 1.25; }

.eyebrow {
  font-size: 0.9375rem;           /* 15px */
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--notice);
}

/* Content column. Each page sets its own max-width. */
.wrap {
  margin: 0 auto;
  max-width: 1120px;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}

/* ---------- Accessibility helpers ---------- */
/* "Skip to main content": first thing a keyboard user reaches; visible
   only while focused. */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--fade-duration) ease;
}
.skip-link:focus, .skip-link:focus-visible { transform: none; outline: 2px solid var(--text); outline-offset: 2px; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
main:focus { outline: none; }  /* target of the skip link; no ring on the whole page */

/* ---------- Frosted header ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--material);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--separator);
  view-transition-name: site-nav;   /* stays put while pages cross-fade */
}
.site-nav .wrap {
  max-width: 1120px;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1875rem;          /* 19px */
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}
.wordmark .ball { font-size: 1.25rem; line-height: 1; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav-link {
  font-size: 0.875rem;           /* 14px */
  letter-spacing: -0.005em;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 10px 0;               /* comfortable tap height */
  transition: color var(--fade-duration) ease;
}
@media (hover: hover) { .nav-link:hover { color: var(--text); } }
.site-nav .btn {
  min-height: 34px;
  padding: 6px 15px;
  font-size: 0.875rem;
}

@media (max-width: 420px) {
  .wordmark { font-size: 1.0625rem; gap: 6px; }
  .nav-links { gap: 14px; }
  .site-nav .btn { padding: 6px 12px; }
}

/* Scroll-edge effect: the header starts clear and gains its frosted
   material and hairline as content scrolls under it (where supported). */
@supports (animation-timeline: scroll()) {
  .site-nav {
    animation: nav-edge linear both;
    animation-timeline: scroll(root);
    animation-range: 0 64px;
  }
  @keyframes nav-edge {
    from { background-color: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: none;
  border-radius: 980px;
  padding: 12px 24px;
  min-height: 48px;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  /* Release springs back; press (below) is near-instant. */
  transition:
    transform var(--spring-duration) var(--spring),
    background-color var(--fade-duration) ease,
    opacity var(--fade-duration) ease;
}
@media (hover: hover) { .btn:hover:not(:disabled) { background: var(--accent-hover); } }
.btn:active:not(:disabled) {
  transform: scale(0.97);
  transition-duration: var(--press-duration);
  transition-timing-function: ease-out;
}
.btn:disabled { background: var(--fill-strong); color: var(--text-tertiary); cursor: not-allowed; }

.btn-ghost {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
@media (hover: hover) { .btn-ghost:hover { background: rgba(255, 255, 255, 0.24); } }

@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 0.8;
  animation: spin 0.7s linear infinite;
}

/* ---------- Footer ---------- */
footer {
  border-top: 0.5px solid var(--separator);
  padding: 28px 0 calc(40px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 0.8125rem;          /* 13px */
  letter-spacing: 0;
  color: var(--text-tertiary);
}
footer a {
  display: inline-block;
  color: var(--text-secondary);
  text-decoration: none;
  margin: 0 8px;
  padding: 6px 0;
  transition: color var(--fade-duration) ease;
}
@media (hover: hover) { footer a:hover { color: var(--text); } }

/* ---------- Page transitions ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 240ms; animation-timing-function: ease; }
}

/* ---------- Accessibility preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  /* No movement: keep only quick fades and color changes. */
  *, *::before, *::after {
    scroll-behavior: auto !important;
  }
  .btn, .btn:active:not(:disabled) { transform: none !important; transition: background-color 150ms ease, opacity 150ms ease; }
  .site-nav { animation: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .site-nav {
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    animation: none;
  }
  .btn-ghost { background: #3a3a3c; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  :root {
    --separator: rgba(60, 60, 67, 0.45);
    --separator-strong: rgba(60, 60, 67, 0.7);
    --text-secondary: #3a3a3c;
  }
  .site-nav { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root {
    --separator: rgba(235, 235, 245, 0.45);
    --separator-strong: rgba(235, 235, 245, 0.7);
    --text-secondary: #d1d1d6;
  }
}