/* =====================================================================
   JMC Charities Golf — "MIDNIGHT LINKS"
   Cinematic, dark-first, futuristic. Electric fairway-neon + luxe gold on
   near-black, kinetic display type, glassmorphism w/ gradient-glow borders,
   film grain, marquee, scroll-reveal motion. (Legacy var names kept stable.)
   ===================================================================== */
:root {
  /* Legacy brand names — remapped so per-view scoped styles inherit the new system. */
  --green-900: #06120c;
  --green-700: #1f6b46;
  --green-500: #46f0a0;

  /* Core surfaces (dark-first) */
  --bg: #050807;
  --bg-2: #07120d;
  --surface: #0c1712;
  --surface-2: #11201a;
  --text: #e9f6ee;
  --muted: #8ba79a;
  --border: rgba(255, 255, 255, 0.09);

  /* Electric accents */
  --neon: #46f0a0;
  --neon-2: #28d889;
  --gold: #f3ce6a;
  --gold-2: #ffe6a0;
  --sand: #ffe7a6;
  --cream: #eef7f0;

  --accent: var(--neon);
  --accent-2: var(--gold);
  --accent-contrast: #04140c;

  /* glow + glass */
  --glow-neon: 0 0 0 1px rgba(70, 240, 160, 0.22), 0 12px 50px rgba(70, 240, 160, 0.22);
  --glow-gold: 0 0 0 1px rgba(243, 206, 106, 0.22), 0 12px 50px rgba(243, 206, 106, 0.2);
  --glass-bg: rgba(10, 22, 17, 0.55);
  --glass-border: rgba(255, 255, 255, 0.10);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 40px 90px rgba(0, 0, 0, 0.6);
  --ring: 0 0 0 3px rgba(70, 240, 160, 0.45);

  --grad-text: linear-gradient(100deg, #ffffff 0%, var(--neon) 45%, var(--gold) 100%);
  --grad-line: linear-gradient(120deg, rgba(70, 240, 160, 0.6), rgba(243, 206, 106, 0.5));

  --radius: 18px;
  --radius-sm: 12px;
  --maxw: 1180px;

  --font-display: "Syne", "Space Grotesk", system-ui, sans-serif;
  --font-sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Make the browser canvas (and the blank frame during navigation) match the theme,
     so swapping pages in dark mode never flashes white. */
  color-scheme: dark;
}
/* Refined LIGHT alternative (still premium; dark is the showcase) */
[data-theme="light"] {
  /* Warm, low-glare paper tones; deeper green accent; restrained glow — easier on the eyes. */
  --bg: #f1ede2;
  --bg-2: #e9e3d4;
  --surface: #fbf9f2;
  --surface-2: #f0ebdd;
  --text: #16271c;
  --muted: #5a6b60;
  --border: rgba(22, 39, 28, 0.12);
  --neon: #1b8a57;
  --neon-2: #137a4a;
  --gold: #a07d1f;
  --accent: #1b7a4f;
  --accent-2: #a07d1f;
  --accent-contrast: #ffffff;
  --glow-neon: 0 0 0 1px rgba(27, 138, 87, 0.14), 0 10px 28px rgba(27, 138, 87, 0.10);
  --glow-gold: 0 0 0 1px rgba(160, 125, 31, 0.14), 0 10px 28px rgba(160, 125, 31, 0.10);
  --glass-bg: rgba(251, 249, 242, 0.8);
  --glass-border: rgba(22, 39, 28, 0.08);
  --shadow-sm: 0 1px 3px rgba(20, 50, 32, 0.07);
  --shadow: 0 14px 36px rgba(20, 50, 32, 0.10);
  --shadow-lg: 0 28px 64px rgba(20, 50, 32, 0.14);
  --grad-text: linear-gradient(100deg, #16271c 0%, #1b8a57 55%, #a07d1f 100%);
  --grad-line: linear-gradient(120deg, rgba(27, 138, 87, 0.28), rgba(160, 125, 31, 0.22));
  color-scheme: light;
}
/* Calmer ambient + grain in light mode. */
[data-theme="light"] body::before { opacity: 0.5; }
[data-theme="light"] .grain { opacity: 0.025; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background-color: var(--bg); }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* Ambient aurora backdrop */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(50vw 50vh at 8% -6%, rgba(70, 240, 160, 0.16), transparent 60%),
    radial-gradient(46vw 46vh at 102% 4%, rgba(243, 206, 106, 0.12), transparent 58%),
    radial-gradient(60vw 60vh at 50% 120%, rgba(40, 216, 137, 0.10), transparent 60%);
}
/* Film grain overlay */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: none; opacity: 0.92; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.04; }
:focus-visible { box-shadow: var(--ring); border-radius: 10px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--neon); outline-offset: 2px;
}
.grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.72rem; font-weight: 600; color: var(--neon); }

/* ---------- Skip link (a11y) ---------- */
/* First focusable element; visually hidden off-screen until focused, then pinned
   top-left ABOVE the sticky header (which sits at z-index: 50). */
.skip-link {
  position: fixed; top: 0; left: 0; z-index: 1000;
  transform: translateY(-200%); transition: transform 0.18s ease;
  padding: 0.7rem 1.1rem;
  /* iOS safe-area (TYT-286): keep the focused skip link clear of the notch in landscape. */
  margin: 0.5rem max(0.5rem, env(safe-area-inset-left)) 0.5rem max(0.5rem, env(safe-area-inset-left));
  background: var(--neon); color: var(--accent-contrast);
  font-family: var(--font-sans); font-weight: 700; border-radius: var(--radius-sm);
  box-shadow: var(--glow-neon);
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--neon); outline-offset: 2px; }

/* Visually-hidden content for screen readers (a11y live regions, etc.). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 1rem;
  /* iOS safe-area (TYT-286): clear the notch/dynamic island in landscape via left/right insets.
     max(value, env(...)) is a no-op (env resolves 0px) on non-notched/desktop — zero regression. */
  padding: 0.7rem max(clamp(1rem, 4vw, 2.5rem), env(safe-area-inset-right)) 0.7rem max(clamp(1rem, 4vw, 2.5rem), env(safe-area-inset-left));
  background: var(--glass-bg); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--glass-border); flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 0.55rem; font-weight: 800; color: var(--text); font-size: 1.12rem; }
.brand-mark { font-size: 1.4rem; filter: drop-shadow(0 0 10px rgba(70,240,160,0.6)); }
.brand-text { font-family: var(--font-display); letter-spacing: -0.02em; }
.brand-text em { color: var(--neon); font-style: normal; }
.site-nav { display: flex; gap: 0.15rem; margin-left: auto; flex-wrap: wrap; }
.nav-link { padding: 0.42rem 0.8rem; border-radius: 999px; color: var(--text); font-weight: 500; font-size: 0.93rem; transition: background 0.18s, color 0.18s, box-shadow 0.18s; }
.nav-link:hover { background: color-mix(in srgb, var(--neon) 14%, transparent); }
.nav-link.active { color: var(--accent-contrast); background: var(--neon); box-shadow: var(--glow-neon); }
.nav-actions { display: flex; align-items: center; gap: 0.5rem; }
/* Theme toggle + auth controls live inside .site-nav (so they collapse into the
   hamburger on mobile); on desktop they sit inline after the primary links. */
.nav-menu-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: 0.35rem; }
.inline-form { display: inline; margin: 0; }

/* Hamburger toggle — hidden on desktop, shown below ~720px via the media query. */
.nav-toggle {
  display: none; margin-left: auto; width: 40px; height: 40px; flex: 0 0 auto;
  background: color-mix(in srgb, var(--text) 8%, transparent); border: 1px solid var(--border);
  border-radius: 999px; cursor: pointer; color: var(--text);
  align-items: center; justify-content: center; transition: background 0.18s, box-shadow 0.18s;
}
.nav-toggle:hover { background: color-mix(in srgb, var(--neon) 16%, transparent); box-shadow: var(--glow-neon); }
.nav-toggle-bars { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; }
.nav-toggle-bars span { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 720px) {
  .site-header { flex-wrap: nowrap; }
  .nav-toggle { display: inline-flex; }
  /* Order on the bar: brand | toggle (pushed right) | actions. */
  .nav-toggle { order: 2; }
  .nav-actions { order: 3; margin-left: 0.5rem; }
  /* Collapse the primary links into an absolutely-positioned dropdown so opening
     never pushes page content (no layout shift). */
  .site-nav {
    order: 4; display: none; position: absolute; top: 100%; right: clamp(1rem, 4vw, 2.5rem);
    flex-direction: column; gap: 0.25rem; min-width: 12rem;
    margin-left: 0; padding: 0.5rem; flex-wrap: nowrap;
    background: var(--glass-bg); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: 0 18px 50px rgba(0,0,0,0.35);
    z-index: 49;
  }
  /* Open state is driven purely by the toggle's aria-expanded, so the panel is
     correctly collapsed on first paint (no JS-dependent flash) yet has no inline
     style to undo. */
  .nav-toggle[aria-expanded="true"] ~ .site-nav { display: flex; }
  /* ≥44px touch targets (Apple HIG / Material) for every item in the open menu. */
  .site-nav .nav-link { display: flex; align-items: center; min-height: 44px; }
  /* The theme toggle + auth controls stack full-width below the links, divided off. */
  .nav-menu-actions {
    flex-direction: column; align-items: stretch; gap: 0.4rem; width: 100%;
    margin: 0.4rem 0 0; padding-top: 0.55rem; border-top: 1px solid var(--glass-border);
  }
  .nav-menu-actions .inline-form { display: block; width: 100%; }
  .nav-menu-actions .btn { width: 100%; min-height: 44px; }
  .nav-menu-actions .theme-toggle { width: 100%; height: 44px; border-radius: var(--radius); }
}

/* ---------- Buttons (magnetic-ready, glow) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.6rem 1.2rem; border-radius: 999px; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em;
  border: 1px solid transparent; cursor: pointer; line-height: 1.1; position: relative;
  transition: transform 0.12s ease, box-shadow 0.22s ease, background 0.22s, border-color 0.22s, color 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-lg { padding: 0.92rem 1.9rem; font-size: 1.05rem; }
.btn-primary { background: linear-gradient(120deg, var(--neon), var(--neon-2)); color: var(--accent-contrast); box-shadow: var(--glow-neon); }
.btn-primary:hover { box-shadow: 0 0 0 1px rgba(70,240,160,0.4), 0 18px 60px rgba(70,240,160,0.4); }
.btn-outline { background: transparent; border-color: color-mix(in srgb, var(--neon) 55%, transparent); color: var(--text); }
.btn-outline:hover { border-color: var(--neon); box-shadow: var(--glow-neon); }
.btn-ghost { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
.btn-ghost:hover { background: color-mix(in srgb, var(--text) 12%, transparent); }
.theme-toggle, .notif-bell {
  background: color-mix(in srgb, var(--text) 8%, transparent); border: 1px solid var(--border); border-radius: 999px;
  width: 40px; height: 40px; cursor: pointer; font-size: 1rem; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; transition: background 0.18s, box-shadow 0.18s;
}
.theme-toggle:hover, .notif-bell:hover { background: color-mix(in srgb, var(--neon) 16%, transparent); box-shadow: var(--glow-neon); }

/* ---------- Layout primitives ---------- */
.site-main { min-height: 62vh; position: relative; z-index: 1; }
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(2.5rem, 5vw, 4.25rem) clamp(1rem, 4vw, 2rem); }
.prose-section { max-width: 760px; }
.section-title { font-size: clamp(1.5rem, 3vw, 2.25rem); margin: 0 0 1rem; }
.page-title { font-size: clamp(1.9rem, 4.5vw, 2.9rem); margin: 0 0 1rem; }
.prose { color: var(--muted); max-width: 66ch; font-size: 1.04rem; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- HERO (full-WIDTH 3D band + content below — edge to edge, transparent, no box) ---------- */
.hero {
  position: relative; overflow: hidden; text-align: center; color: #fff;
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
  background: radial-gradient(120% 80% at 50% 0%, #0c3a25 0%, #061b12 56%, #03100a 100%);
  --mx: 50%; --my: 26%;
}
.hero::after { /* cursor-follow spotlight */
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(40vw 40vw at var(--mx) var(--my), rgba(70,240,160,0.12), transparent 62%); transition: background 0.2s;
}
.hero-grid { position: absolute; inset: 0; z-index: 0; opacity: 0.4; pointer-events: none;
  background-image: linear-gradient(rgba(70,240,160,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(70,240,160,0.07) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(120% 90% at 50% 6%, #000 35%, transparent 80%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 6%, #000 35%, transparent 80%);
}
.hero-stage { position: relative; z-index: 1; width: 100%; height: clamp(230px, 34vh, 360px); }
#hero-3d { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.6s ease; }
.hero-stage.ready #hero-3d { opacity: 1; }
/* fade the band's bottom into the hero so it blends seamlessly into the content below */
.hero-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent, #051a11 94%); }
.hero-3d-fallback {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: clamp(150px, 30vh, 240px); height: clamp(150px, 30vh, 240px); border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffffff 0%, #eef0eb 42%, #b9c0b7 100%),
    repeating-radial-gradient(circle at 50% 50%, rgba(0,0,0,0.06) 0 3px, transparent 3px 9px);
  background-blend-mode: multiply;
  box-shadow: inset -16px -18px 40px rgba(0,0,0,0.25), inset 12px 14px 26px rgba(255,255,255,0.7),
    0 30px 60px rgba(0,0,0,0.5), 0 0 90px rgba(70,240,160,0.4);
  animation: floaty 6s ease-in-out infinite;
  /* Hidden by default — shown only if the WebGL scene fails to boot or is slow (hero3d.js
     adds .fallback). Prevents the white-orb flash before the 3D ball renders. */
  opacity: 0; transition: opacity 0.5s ease;
}
.hero-stage.fallback .hero-3d-fallback { opacity: 1; }
@keyframes floaty { 0%,100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 12px)); } }
.hero-inner { position: relative; z-index: 3; width: 100%; max-width: 880px; margin: clamp(-7rem, -9vh, -2.5rem) auto 0; padding: 0 1.3rem; }

.badge {
  display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(70,240,160,0.35); color: var(--sand); font-weight: 600; padding: 0.4rem 1rem;
  border-radius: 999px; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; backdrop-filter: blur(6px);
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 10px var(--neon); animation: pulse 1.8s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1);} 50% { opacity: 0.4; transform: scale(0.7);} }
.hero-title { font-size: clamp(1.8rem, 4vw, 3.3rem); margin: 1rem 0 0.5rem; color: #fff; letter-spacing: -0.01em; overflow-wrap: break-word; }
.hero-tag { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.34em; font-style: normal; margin-top: 0.6rem; letter-spacing: 0; }
.hero-sub { color: rgba(233,246,238,0.82); font-size: clamp(1rem, 2vw, 1.22rem); font-weight: 400; }
.hero-cta { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem; }
.hero-benefit { margin-top: 1.3rem; color: var(--sand); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78rem; }

/* Countdown */
.countdown { display: flex; gap: clamp(0.5rem, 2.5vw, 1.1rem); justify-content: center; margin: 1.8rem 0; }
.cd-unit { position: relative; background: rgba(255,255,255,0.05); border: 1px solid rgba(70,240,160,0.18); border-radius: var(--radius); padding: 0.9rem 1.05rem; min-width: 78px; backdrop-filter: blur(8px); }
.cd-num { display: block; font-family: var(--font-display); font-size: clamp(1.7rem, 5.5vw, 2.7rem); font-weight: 800; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 18px rgba(70,240,160,0.35); }
.cd-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--neon); }

/* Marquee ticker */
.marquee { position: relative; z-index: 4; overflow: hidden; border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); background: rgba(70,240,160,0.05); }
.marquee-track { display: inline-flex; gap: 2.5rem; white-space: nowrap; padding: 0.7rem 0; animation: scroll-x 24s linear infinite; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-size: 0.9rem; }
.marquee-track span { display: inline-flex; align-items: center; gap: 2.5rem; }
.marquee-track span::after { content: "⛳"; color: var(--neon); }
@keyframes scroll-x { from { transform: translateX(0);} to { transform: translateX(-50%);} }

/* ---------- Facts strip ---------- */
.facts { max-width: var(--maxw); margin: 0 auto; padding: clamp(2rem,5vw,3.5rem) clamp(1rem,4vw,2rem) 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; position: relative; z-index: 3; }
.fact-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.3rem; box-shadow: var(--shadow-sm); transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
.fact-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--neon) 40%, var(--border)); box-shadow: var(--glow-neon); }
.fact-k { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--neon); margin-bottom: 0.25rem; }
.fact-v { font-weight: 700; font-family: var(--font-display); }

/* ---------- Cards / bento (gradient-glow borders) ---------- */
.grid-cards, .detail-grid, .tier-grid, .sponsor-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.info-card, .tier-card, .sponsor-card {
  position: relative; border-radius: var(--radius); padding: 1.5rem;
  border: 1px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-line) border-box;
  box-shadow: var(--shadow-sm); transition: transform 0.18s ease, box-shadow 0.22s ease;
}
.info-card:hover, .tier-card:hover, .sponsor-card:hover { transform: translateY(-5px); box-shadow: var(--glow-neon); }
.info-card h3, .tier-card h3 { margin: 0 0 0.4rem; color: var(--text); font-size: 1.2rem; }
.tier-card { text-align: center; }
.tier-price { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; margin: 0.3rem 0 0.8rem; }
.sponsor-card { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; background: var(--surface); border: 1px solid var(--border); }
.sponsor-tier { font-size: 0.8rem; color: var(--neon); }
.beneficiary { text-align: center; }

/* ---------- Tables / lists ---------- */
.price-table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1.5rem; }
.price-table td { padding: 0.85rem 0.6rem; border-bottom: 1px solid var(--border); }
.price-table td:last-child { text-align: right; font-weight: 800; font-family: var(--font-display); color: var(--neon); }
.check-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.55rem; }
.check-list li { padding-left: 1.6rem; position: relative; }
.check-list li::before { content: "▸"; position: absolute; left: 0; color: var(--neon); font-weight: 800; }

/* ---------- Day-of schedule timeline (/event, TYT-279) ----------
   CSS-only timeline: a vertical connector line runs down the left gutter with an
   accent dot marking each entry. Two-column grid (time | label+note) collapses to a
   single column at <=520px so it never overflows a 360px viewport. Colors are theme
   tokens (light+dark AA) — no hardcoded values. */
.schedule { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.schedule li {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem;
  padding: 1rem 0 1rem 1.25rem; position: relative;
  border-left: 2px solid var(--border);
}
/* Accent dot sits centered on the connector line at each entry. */
.schedule li::before {
  content: ""; position: absolute; left: -5px; top: 1.4rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px var(--surface);
}
.sched-time { font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.sched-label { font-weight: 700; }
.sched-note { color: var(--muted); font-size: 0.92rem; }
@media (max-width: 520px) {
  .schedule li { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* ---------- Responsive tables (mobile overflow guard, TYT-226) ----------
   Multi-column admin/account tables have no per-page overflow wrapper, so on a
   360–414px phone they would push the document wider than the viewport (true
   horizontal overflow, not just the body's overflow-x:hidden mask). Turning the
   table itself into a horizontally-scrollable block contains the scroll to the
   table — the page no longer overflows. Applied to the shared .admin-table and
   .account-table classes so every admin/account table benefits without editing
   each view. (The leaderboard already wraps in .lb-table-wrap.) */
.admin-table, .account-table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Scrollable table wrappers must be the containing block for any absolutely-
   positioned descendants (e.g. visually-hidden .sr-only / .lb-sr-only spans in
   cells). Without position:relative those escape the overflow:auto clip and,
   inside a min-width table, push the document wider than the viewport — true
   horizontal overflow on phones. Making the scroll container positioned keeps
   them clipped to the scroll area. (.lb-table-wrap is the leaderboard's wrapper.) */
.lb-table-wrap, .admin-table, .account-table { position: relative; }
/* Long unbroken strings (lot titles, donor/org names, emails) must wrap rather
   than force a wide line. Defensive break on text-heavy headings/cells. */
.lot-title, .lot-info h1, .page-title, .section-title, .admin-table td, .account-table td {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ---------- Forms ---------- */
.stack-form { display: grid; gap: 0.95rem; max-width: 440px; }
/* min-width:0 lets grid items shrink below their min-content (a long <select>
   option or placeholder otherwise forces the track wider than the viewport on
   phones — horizontal overflow). width:100% + max-width:100% keep every control
   inside its column. */
.stack-form label { display: grid; gap: 0.3rem; font-weight: 600; min-width: 0; }
.stack-form input, .stack-form textarea, .stack-form select {
  padding: 0.75rem 0.85rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit; transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%; max-width: 100%; box-sizing: border-box;
}
.stack-form input:focus, .stack-form textarea:focus, .stack-form select:focus { border-color: var(--neon); box-shadow: var(--ring); }

/* ---------- Footer ---------- */
.site-footer { background: linear-gradient(180deg, transparent, rgba(70,240,160,0.04)), var(--bg-2); color: var(--text); margin-top: 4rem; border-top: 1px solid var(--border); }
.site-footer p { color: var(--muted); }
.footer-cols { max-width: var(--maxw); margin: 0 auto; padding: 3rem 1.5rem 1rem; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.footer-cols strong { font-family: var(--font-display); font-size: 1.05rem; color: var(--text); }
.site-footer a { color: var(--neon); }
.footer-cause { display: flex; gap: 0.75rem; align-items: flex-start; }
.footer-cause-mark { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 999px; }
.footer-causes { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.5rem; }
.footer-causes a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.4rem 0; overflow-wrap: break-word; }
.footer-copy { text-align: center; padding: 1rem; color: var(--muted); font-size: 0.85rem; }

/* ---------- Notifications ---------- */
.notif-wrap { position: relative; display: inline-flex; }
.notif-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; background: #ff5470; color: #fff; border-radius: 999px; font-size: 0.7rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 0 12px rgba(255,84,112,0.6); }
.notif-panel { position: absolute; top: calc(100% + 10px); right: 0; width: min(340px, 86vw); max-height: 60vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 60; padding: 0.4rem; }
.notif-empty { padding: 1rem; color: var(--muted); text-align: center; }
.notif-item { display: block; padding: 0.6rem 0.7rem; border-radius: var(--radius-sm); color: var(--text); }
.notif-item:hover { background: var(--surface-2); }
.notif-item.unread { background: color-mix(in srgb, var(--neon) 12%, transparent); }
.notif-item strong { display: block; font-size: 0.92rem; }
.notif-item span { display: block; font-size: 0.82rem; color: var(--muted); }
/* Per-item row: the link grows, the dismiss (×) sits to its right with a 44px touch target. */
.notif-item-row { display: flex; align-items: center; border-radius: var(--radius-sm); }
.notif-item-row .notif-item { flex: 1 1 auto; min-width: 0; }
.notif-dismiss { flex: 0 0 auto; width: 34px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--muted); font-size: 1.15rem; line-height: 1; cursor: pointer; border-radius: var(--radius-sm); }
.notif-dismiss:hover { color: var(--text); background: var(--surface-2); }

/* Desktop-alert opt-in toggle — a persistent header inside the dropdown panel. */
.notif-controls { padding: 0.2rem 0.2rem 0.5rem; border-bottom: 1px solid var(--border); margin-bottom: 0.4rem; }
.notif-desktop-toggle { display: block; width: 100%; min-height: 44px; padding: 0.5rem 0.7rem; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 600; cursor: pointer; text-align: left; }
.notif-desktop-toggle[aria-pressed="true"] { border-color: var(--neon); color: var(--neon); box-shadow: 0 0 12px color-mix(in srgb, var(--neon) 35%, transparent); }
.notif-desktop-toggle:focus-visible { outline: none; box-shadow: var(--ring); }

/* iOS safe-area (TYT-286): bottom/right insets so toasts clear the home indicator + notch (landscape). */
.toast-container { position: fixed; bottom: max(1rem, env(safe-area-inset-bottom)); right: max(1rem, env(safe-area-inset-right)); z-index: 100; display: flex; flex-direction: column-reverse; gap: 0.6rem; max-width: min(360px, 90vw); }
.toast { display: block; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 3px solid var(--neon); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 0.85rem 1rem; transform: translateX(120%); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }
.toast.show { transform: translateX(0); opacity: 1; }
.toast strong { display: block; font-size: 0.95rem; }
.toast span { display: block; font-size: 0.83rem; color: var(--muted); }
.toast-outbid { border-left-color: #ff5470; }
.toast-won { border-left-color: var(--gold); }
.toast-ended { border-left-color: var(--muted); }

/* ---------- Scroll progress + directional reveals + dividers ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--neon), var(--gold)); z-index: 200; box-shadow: 0 0 14px var(--neon); will-change: transform;
}
.reveal-left, .reveal-right, .reveal-scale { opacity: 0; transition: opacity 0.75s cubic-bezier(.2,.7,.2,1), transform 0.75s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.reveal-left { transform: translateX(-34px); }
.reveal-right { transform: translateX(34px); }
.reveal-scale { transform: scale(0.94); }
.reveal-left.in, .reveal-right.in, .reveal-scale.in { opacity: 1; transform: none; }

.section-divider {
  position: relative; max-width: var(--maxw); height: 1px; margin: 0 auto;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--neon) 55%, transparent), transparent);
}
.section-divider::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 9px; height: 9px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 18px var(--neon);
}

/* ---------- Custom golf cursor (fine pointers; injected by motion.js) ---------- */
/* The exact pointer point is a golf ball; a golf club trails behind and swings on hover. */
.cursor-ball, .cursor-club { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 300; transition: opacity 0.2s; will-change: transform; }
.cursor-ball { z-index: 301; }
.cursor-ball i {
  display: block; position: relative; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%;
  background:
    radial-gradient(4px 4px at 4px 3px, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle at 36% 30%, #ffffff, #dfe4ea 55%, #a9b1bb 100%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45), inset -1px -1px 2px rgba(0, 0, 0, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/* faint dimple texture */
.cursor-ball i::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0.45;
  background-image:
    radial-gradient(1px 1px at 4px 5px, rgba(0, 0, 0, 0.22) 99%, transparent),
    radial-gradient(1px 1px at 8px 4px, rgba(0, 0, 0, 0.22) 99%, transparent),
    radial-gradient(1px 1px at 6px 8px, rgba(0, 0, 0, 0.22) 99%, transparent),
    radial-gradient(1px 1px at 9px 9px, rgba(0, 0, 0, 0.22) 99%, transparent),
    radial-gradient(1px 1px at 3px 9px, rgba(0, 0, 0, 0.22) 99%, transparent);
}
.cursor-ball.hover i { transform: scale(1.28); box-shadow: 0 0 11px color-mix(in srgb, var(--gold) 75%, transparent), 0 1px 4px rgba(0, 0, 0, 0.45); }
/* club head face sits at the hotspot; shaft angles up-right */
.cursor-club { margin: -40px 0 0 -5px; }
.cursor-club svg { display: block; transform: rotate(7deg); transform-origin: 86% 12%; transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.5, 1); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4)); }
.cursor-club.hover svg { transform: rotate(-24deg); } /* backswing when over interactive targets */
body.has-cursor, body.has-cursor a, body.has-cursor button, body.has-cursor .btn,
body.has-cursor input, body.has-cursor select, body.has-cursor textarea, body.has-cursor [role="button"] { cursor: none; }

/* ---------- Auth pages: sign in / register (centered card; controls share one width) ---------- */
.auth-wrap { max-width: 460px; margin: clamp(1.5rem, 5vw, 3.5rem) auto; padding: 0 1rem; }
.auth-card { background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.4rem); box-shadow: var(--shadow); }
.auth-card .page-title { margin: 0 0 0.3rem; text-align: center; }
.auth-sub { text-align: center; color: var(--muted); margin: 0 0 1.6rem; font-size: 0.95rem; }
.auth-form { display: flex; flex-direction: column; gap: 1rem; }
.auth-form label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text); text-transform: uppercase; }
.auth-form input { width: 100%; box-sizing: border-box; padding: 0.72rem 0.85rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: rgba(255, 255, 255, 0.04); color: var(--text); font: inherit; font-weight: 400; text-transform: none; letter-spacing: 0; transition: border-color 0.15s, box-shadow 0.15s; }
.auth-form input::placeholder { color: var(--muted); }
.auth-form input:focus { border-color: var(--neon); box-shadow: var(--ring); }
.auth-form .btn { width: 100%; margin-top: 0.25rem; }
.auth-form .form-row { display: flex; gap: 1rem; }
.auth-form .form-row label { flex: 1; }
/* Show/hide password toggle (TYT-328): the button is absolutely positioned inside
   the relative .pw-field wrapper; the input reserves right padding so its value
   never sits under the control. >=44px tap target, visible focus ring. */
.pw-field { position: relative; display: block; }
.pw-field input { padding-right: 4rem; }
.pw-toggle { position: absolute; top: 50%; right: 0.35rem; transform: translateY(-50%); min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 0.6rem; border: none; background: transparent; color: var(--accent); font: inherit; font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; border-radius: var(--radius-sm); }
.pw-toggle:hover { color: var(--neon); }
.pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
.auth-or { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0; color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.btn-google { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem; background: #ffffff; color: #1f1f1f; border: 1px solid #dadce0; border-radius: var(--radius-sm); padding: 0.72rem 1rem; font-weight: 600; }
.btn-google:hover { background: #f5f6f7; border-color: #c9ccd1; box-shadow: var(--shadow-sm); transform: none; }
.btn-google svg { width: 18px; height: 18px; flex: none; }
.auth-switch { text-align: center; margin: 1.4rem 0 0; color: var(--muted); }
.auth-switch a { color: var(--neon); }
.auth-error { background: rgba(220, 60, 60, 0.13); border: 1px solid rgba(220, 60, 60, 0.42); color: #ff9d90; padding: 0.6rem 0.85rem; border-radius: var(--radius-sm); margin: 0 0 1.1rem; font-size: 0.9rem; }
[data-theme="light"] .auth-error { color: #b42318; }
@media (max-width: 520px) { .auth-form .form-row { flex-direction: column; gap: 1rem; } }

/* Global reduced-motion guard: near-zero all animations/transitions (the
   standard *,::before,::after snippet) so no element keeps moving, then keep the
   app-specific overrides below. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1; transform: none; }
  .cursor-ball, .cursor-club { display: none; }
  body.has-cursor { cursor: auto; }
}
@media (pointer: coarse) {
  .cursor-ball, .cursor-club { display: none; }
  /* >=44px tap targets on touch devices (WCAG 2.5.5 / Apple HIG). The round
     icon buttons are 40px; bump them, and ensure .btn clears 44px tall. */
  .nav-toggle, .theme-toggle, .notif-bell { width: 44px; height: 44px; }
  .btn { min-height: 44px; }
  /* Scorecard / admin score-entry per-hole number inputs are ~38px tall by
     default — bump the touch height so each stroke cell is comfortably tappable.
     (Selectors mirror the scoped .sc-cell / .score-cell rules in the route views;
     a global coarse-pointer override keeps those files untouched.) */
  .sc-cell input, .score-cell input { min-height: 44px; }
}

/* =====================================================================
   TYT-239 — Score-to-par color coding (shared by /scorecard + /account)
   Each filled hole is keyed by strokes-minus-par into five buckets. Color
   alone is never the sole signal: a SHAPE cue follows golf convention —
   circle (single/double ring) for UNDER par, square (single/double box)
   for OVER par, no shape for PAR. Accessible labels are attached in the
   views (visually-hidden suffix / aria) so screen readers announce the
   result. Colors clear WCAG AA (>=4.5:1) on both the dark and light --bg.
   ===================================================================== */
:root {
  --sc-eagle: #ffd34d;   /* gold — under par by 2+ */
  --sc-birdie: #46f0a0;  /* fairway neon — 1 under */
  --sc-par: var(--text); /* even — neutral */
  --sc-bogey: #ff9d5c;   /* warm amber — 1 over */
  --sc-dbogey: #ff6b6b;  /* red — 2+ over */
}
[data-theme="light"] {
  /* Darker on the warm paper bg to keep >=4.5:1 contrast. */
  --sc-eagle: #8a6400;
  --sc-birdie: #137a4a;
  --sc-bogey: #b5530a;
  --sc-dbogey: #b42318;
}

/* The "pin" wraps the stroke value and carries both color and shape. */
.sc-pin {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.7em; min-height: 1.7em; padding: 0.05em 0.15em;
  box-sizing: border-box; line-height: 1; font-variant-numeric: tabular-nums;
}
.sc-eagle  { color: var(--sc-eagle); }
.sc-birdie { color: var(--sc-birdie); }
.sc-par    { color: var(--sc-par); }
.sc-bogey  { color: var(--sc-bogey); }
.sc-dbogey { color: var(--sc-dbogey); }
/* Shape cues (not color-only): rings for under par, boxes for over par. */
.sc-pin.sc-birdie { border: 2px solid currentColor; border-radius: 999px; }
.sc-pin.sc-eagle  { border: 2px solid currentColor; border-radius: 999px;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px currentColor; }
.sc-pin.sc-bogey  { border: 2px solid currentColor; border-radius: 3px; }
.sc-pin.sc-dbogey { border: 2px solid currentColor; border-radius: 3px;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px currentColor; }
.sc-pin.sc-par    { border: 2px solid transparent; }

/* Editable card: the value lives in <input>, so tint the input border + use the
   shape via border-radius (ring = round, box = square). Subtle bg so it reads as
   a state without fighting the neon focus outline. */
.sc-cell.is-eagle input,
.sc-cell.is-birdie input { border-color: currentColor; border-radius: 999px; }
.sc-cell.is-bogey input,
.sc-cell.is-dbogey input { border-color: currentColor; border-radius: 3px; }
.sc-cell.is-eagle  { color: var(--sc-eagle); }
.sc-cell.is-birdie { color: var(--sc-birdie); }
.sc-cell.is-bogey  { color: var(--sc-bogey); }
.sc-cell.is-dbogey { color: var(--sc-dbogey); }
.sc-cell.is-eagle input,
.sc-cell.is-birdie input,
.sc-cell.is-bogey input,
.sc-cell.is-dbogey input { border-width: 2px; color: var(--fg, var(--text)); font-weight: 700; }
/* Double-ring/box accent for eagle / double-bogey-plus on the editable input. */
.sc-cell.is-eagle input  { box-shadow: 0 0 0 1px var(--bg), 0 0 0 3px currentColor; }
.sc-cell.is-dbogey input { box-shadow: 0 0 0 1px var(--bg), 0 0 0 3px currentColor; }

/* Per-card legend (Eagle / Birdie / Par / Bogey / Double+). */
.sc-legend {
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; align-items: center;
  margin: 0.6rem 0 0.2rem; padding: 0.5rem 0.65rem;
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 0.78rem; color: var(--muted);
}
.sc-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.sc-legend .sc-pin { font-size: 0.7rem; min-width: 1.5em; min-height: 1.5em; }

/* =====================================================================
   TYT-272 — Printable registration receipt (/account/receipt).
   Screen rendering of the receipt card + actions; the @media print block
   below flattens .receipt-card to ink-friendly black-on-white. Mobile-first:
   the card is fluid (no fixed width) so there is zero horizontal overflow at
   360px, and the Print button uses .btn (>=44px tall) for a thumb-friendly tap.
   ===================================================================== */
.receipt-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(1rem, 4vw, 2rem) 1rem 3rem;
}
.receipt-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.25rem, 5vw, 2.25rem);
}
.receipt-head { border-bottom: 1px solid var(--border); padding-bottom: 1rem; margin-bottom: 1rem; }
.receipt-org {
  font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 0.72rem; font-weight: 700; color: var(--neon); margin: 0 0 0.35rem;
}
.receipt-title { font-family: var(--font-display); font-size: clamp(1.3rem, 5vw, 1.7rem); line-height: 1.2; margin: 0 0 0.4rem; }
.receipt-cause { color: var(--muted); font-size: 0.9rem; margin: 0 0 0.6rem; }
.receipt-doc-label {
  display: inline-block; font-family: var(--font-sans); text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.7rem; font-weight: 600; color: var(--muted); margin: 0;
}
.receipt-body { margin: 0; display: grid; gap: 0.1rem; }
.receipt-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--border);
}
.receipt-row:last-child { border-bottom: 0; }
.receipt-row-label { margin: 0; color: var(--muted); font-size: 0.85rem; }
.receipt-row-value { margin: 0; font-weight: 600; text-align: right; word-break: break-word; }
.receipt-status {
  display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px;
  background: color-mix(in srgb, var(--neon) 18%, transparent);
  color: var(--neon); font-size: 0.8rem; font-weight: 700;
}
.receipt-ref { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.85rem; }
.receipt-foot { margin-top: 1.25rem; }
.receipt-thanks { color: var(--muted); font-size: 0.85rem; margin: 0; }
.receipt-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.receipt-screen-actions { margin-top: 1.5rem; }
.receipt-empty { text-align: center; }
.receipt-empty .receipt-title { margin-bottom: 0.75rem; }
.receipt-empty-msg { color: var(--muted); margin: 0 0 1.5rem; }
.receipt-empty .receipt-actions { justify-content: center; }

/* =====================================================================
   TYT-170 — Print stylesheet (ink-friendly results print-out)
   Optimized for the public /leaderboard but safe site-wide: forces a white
   page with dark, legible text and visible table borders; strips all
   decorative chrome (nav, hero/3D band, theme toggle/bell, footer, grain,
   toasts, action buttons) so no neon glow or gradient bleeds onto paper.
   Home & /auction keep printing their MAIN content — only the decorative
   hero band and buttons are removed. Leaderboard rows avoid splitting
   across page breaks. Single @media print block, no other file touched.
   ===================================================================== */
@media print {
  html, body {
    background: #fff !important;
    color: #000 !important;
  }
  /* Kill all ambient/decorative overlays + their neon/gradient bleed. */
  body::before { display: none !important; }

  /* Hide non-content chrome: header/nav, hero + 3D band, theme/bell toggles,
     grain, footer, toasts, skip link, and every action button. */
  .site-header, .site-nav, .nav-toggle, .nav-actions, .nav-menu-actions,
  .theme-toggle, .notif-bell, .notif-wrap, .notif-panel,
  .hero, .hero-stage, #hero-3d, .hero-3d-fallback, .hero-grid, .marquee,
  .grain, .site-footer, .toast-container, #toast-container, .skip-link,
  .scroll-progress, .cursor-ball, .cursor-club, .btn {
    display: none !important;
  }

  /* Main content prints flat and full-width with no glow/shadow. */
  .site-main { min-height: 0 !important; }
  a { color: #000 !important; text-decoration: none !important; }

  /* Leaderboard legibility: white cells, dark text, visible 1px borders. */
  .lb-table-wrap {
    overflow: visible !important;
    border: 0 !important;
    background: #fff !important;
    margin-top: 0.5rem !important;
  }
  .lb-table { min-width: 0 !important; }
  .lb-table, .lb-table th, .lb-table td {
    border: 1px solid #000 !important;
    color: #000 !important;
    background: #fff !important;
  }
  .lb-table thead th { color: #000 !important; }
  .lb-table tbody tr.lb-leader { background: #eee !important; }
  /* Keep each result row intact across page breaks. */
  .lb-table tbody tr { break-inside: avoid; page-break-inside: avoid; }
  /* Neutralize the neon/grey to-par tints to plain black ink. */
  .lb-topar, .lb-topar.under, .lb-topar.over { color: #000 !important; }
  /* Contest winner cards print as bordered, ink-friendly blocks. */
  .lb-contest {
    border: 1px solid #000 !important;
    background: #fff !important;
    color: #000 !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  /* TYT-264: the public /teams roster prints as ink-friendly bordered cards that
     never split across a page break. The search form is a .btn-bearing control row
     already hidden by the chrome rule above (the <input> stays but is harmless on
     paper). Card accents flatten to plain black. */
  .tm-card {
    border: 1px solid #000 !important;
    background: #fff !important;
    color: #000 !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  .tm-card h2, .tm-captain, .tm-name, .tm-empty-roster { color: #000 !important; }
  .tm-badge { color: #000 !important; background: #fff !important; border: 1px solid #000 !important; }

  /* TYT-272: the /account/receipt card prints as an ink-friendly bordered block that
     never splits across a page break. The Print button + screen actions carry .btn and
     are already hidden by the chrome rule above. Flatten all accents to plain black. */
  .receipt-card {
    border: 1px solid #000 !important;
    background: #fff !important;
    color: #000 !important;
    break-inside: avoid; page-break-inside: avoid;
    max-width: none !important;
    box-shadow: none !important;
  }
  .receipt-org, .receipt-title, .receipt-cause, .receipt-doc-label,
  .receipt-row-label, .receipt-row-value, .receipt-status, .receipt-ref,
  .receipt-thanks { color: #000 !important; }
}

/* =========================================================================
   Leaderboard kiosk / TV display mode (TYT-257): /leaderboard?display=tv.
   The route stamps .lb-tv on the leaderboard <section>; this block hides the
   site chrome (nav, footer, grain, toasts) via :has() on the ancestor, then
   scales the standings table + contest cards up to a high-contrast, far-read
   size for a clubhouse screen. ALL of this is gated behind .lb-tv so the plain
   /leaderboard page is untouched. The live poller (public/js/leaderboard.js) is
   mode-agnostic and keeps patching #lb-tbody, since ids/data-attrs are unchanged.
   ========================================================================= */

/* Chrome-light: hide the site header/footer + ambient overlays so the board
   fills the screen. :has() lets a descendant flag (.lb-tv) hide its ancestors
   (well supported in evergreen TV browsers / Chromium kiosks). */
body:has(.lb-tv) .site-header,
body:has(.lb-tv) .site-footer,
body:has(.lb-tv) .grain,
body:has(.lb-tv) .skip-link,
body:has(.lb-tv) #toast-container,
body:has(.lb-tv) .toast-container { display: none !important; }
/* The ambient radial glow lives on body::before — kill it too in kiosk mode. */
body:has(.lb-tv)::before { display: none !important; }
body:has(.lb-tv) .site-main { min-height: 100vh; }

/* Oversized, high-contrast standings. Everything scales off clamp()ed sizes so
   it reads at across-the-room distance on 1080p/4K panels yet still fits. */
.lb-tv { max-width: 1600px; padding: clamp(1.5rem, 3vw, 3rem); }
.lb-tv .lb-eyebrow { font-size: clamp(1rem, 2vw, 1.6rem); letter-spacing: 0.14em; }
.lb-tv .page-title { font-size: clamp(2.4rem, 6vw, 5rem); margin: 0.2rem 0 0.4rem; }
.lb-tv .lb-sub { font-size: clamp(1rem, 1.8vw, 1.5rem); }
.lb-tv .lb-updated { font-size: clamp(0.9rem, 1.4vw, 1.2rem); }
.lb-tv .lb-table-wrap { border-width: 2px; margin-top: clamp(1rem, 2.5vw, 2rem); }
.lb-tv .lb-table { min-width: 0; }
.lb-tv .lb-table th,
.lb-tv .lb-table td { padding: clamp(0.7rem, 1.6vw, 1.4rem) clamp(0.8rem, 1.6vw, 1.6rem); border-bottom-width: 2px; }
.lb-tv .lb-table thead th { font-size: clamp(0.9rem, 1.4vw, 1.4rem); color: var(--text); }
.lb-tv .lb-table tbody td { font-size: clamp(1.3rem, 2.6vw, 2.4rem); }
.lb-tv .lb-rank { font-size: clamp(1.6rem, 3vw, 2.8rem); width: auto; }
.lb-tv .lb-rank .lb-medal { font-size: clamp(1.8rem, 3.4vw, 3rem); }
.lb-tv .lb-team { font-weight: 800; }
/* Higher-contrast leader highlight + to-par cues for a far-read board. */
.lb-tv .lb-table tbody tr.lb-leader { background: color-mix(in srgb, var(--neon) 22%, transparent); }
.lb-tv .lb-topar.under { color: var(--green-500); }
.lb-tv .lb-thru { color: var(--text); }
/* Contest winner cards + course-par card scale up to match. */
.lb-tv .lb-contests { gap: clamp(1rem, 2vw, 1.8rem); margin-top: clamp(1.5rem, 3vw, 2.6rem); }
.lb-tv .lb-contest { padding: clamp(1.2rem, 2vw, 2rem); }
.lb-tv .lb-contest .lb-contest-name { font-size: clamp(0.9rem, 1.4vw, 1.3rem); }
.lb-tv .lb-contest .lb-contest-team { font-size: clamp(1.5rem, 2.6vw, 2.4rem); }
.lb-tv .lb-contest .lb-contest-detail { font-size: clamp(1rem, 1.6vw, 1.4rem); }
.lb-tv .lb-empty { font-size: clamp(1.2rem, 2vw, 1.8rem); }
.lb-tv .lb-pending h2 { font-size: clamp(1rem, 1.6vw, 1.4rem); }
.lb-tv .lb-pending li { font-size: clamp(1rem, 1.6vw, 1.4rem); padding: 0.4rem 1rem; }

/* Auto-cycle long team names. In TV mode the team cell is capped, so a long name
   would otherwise be ellipsised. public/js/leaderboard.js measures each name and
   adds .lb-cycle ONLY to those that actually overflow their cell (so short names
   never move). The motion itself is pure CSS (a gentle ping-pong that reveals the
   hidden tail then returns), so the global prefers-reduced-motion guard above
   near-zeros it — reduced-motion viewers get a static ellipsised name. The
   --lb-shift custom property is the exact overflow distance the JS measured. */
.lb-tv .lb-team { max-width: clamp(14rem, 32vw, 30rem); }
.lb-tv .lb-team-name {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
/* An overflowing name (flagged .lb-cycle by the JS measurer) drops the ellipsis
   clip and slides by exactly its measured overflow so the full name is revealed,
   then returns. alternate + ease-in-out gives a readable ping-pong with a pause
   at each end. */
.lb-tv .lb-team-name.lb-cycle {
  text-overflow: clip;
  animation: lb-tv-marquee 12s ease-in-out infinite alternate;
}
@keyframes lb-tv-marquee {
  0%, 16% { transform: translateX(0); }
  84%, 100% { transform: translateX(calc(-1 * var(--lb-shift, 0px))); }
}

/* TYT-269: per-sponsor tier badge on the sponsor wall. A compact pill under the
   logo/name; sits inside .sponsor-card (not the contents-collapsed <a>). Uses
   --accent text on --surface-2 for AA contrast in both light and dark themes,
   and wraps/shrinks so it never overflows the single-column grid at 360px. */
.sponsor-tier-badge {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--accent);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
  overflow-wrap: anywhere;
}

/* PWA install hint (TYT-287): a one-time, dismissible "Add to Home Screen" banner on /auction +
   /scorecard. Anchored bottom-LEFT so it clears the bottom-right toast container (.toast-container,
   z-index 100); this sits just below at z-index 90. Token-driven so it works in light + dark. The
   transition is opacity-only and inert under prefers-reduced-motion (no transform animation). */
.pwa-hint {
  position: fixed;
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: max(1rem, env(safe-area-inset-left));
  z-index: 90;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.85rem;
  max-width: min(360px, calc(100vw - 2rem));
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.85rem 1rem;
}
.pwa-hint-text {
  margin: 0;
  flex: 1 1 100%;
  font-size: 0.9rem;
  line-height: 1.35;
}
.pwa-hint-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-left: auto;
}
.pwa-hint-install,
.pwa-hint-dismiss {
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  border: 1px solid var(--border);
}
.pwa-hint-install {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: transparent;
  font-weight: 600;
}
.pwa-hint-dismiss {
  background: transparent;
  color: var(--muted);
}
.pwa-hint-install:focus-visible,
.pwa-hint-dismiss:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}