/* ── Kinetic Industrial — Per-tenant public pages override layer ──
   Loaded AFTER style.css (and per-page CSS like results.css, peopleschoice.css).
   Flips the legacy cyber/race-day palette to Kinetic Industrial without
   rewriting any markup. Targets the variable names style.css uses:
   --primary, --bg, --bg-card, --accent, --text-primary, --text-secondary,
   --error, --success — plus a few catch-all overrides for fonts and corners.
   Type stack: Bebas Neue (display) · Titillium Web (body) · Saira (labels) · JetBrains Mono (code) */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Titillium+Web:wght@300;400;600;700&family=Saira:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Keyboard focus — branded orange ring across interactive elements.
   :focus-visible so only keyboard navigation shows it; inputs keep their
   own border-color focus treatment. Platform-wide for consistency. ── */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible {
  outline: 2px solid var(--primary, #FD7524) !important;
  outline-offset: 2px;
}

:root {
  --primary:        #FD7524;
  --primary-dim:    rgba(253,117,36,0.10);
  --primary-border: rgba(253,117,36,0.25);
  --bg:             #f9f9fa;
  --bg-card:        #ffffff;
  --text-primary:   #1a1c1d;
  --text-secondary: #5f5e5f;
  --accent:         #FD7524;
  --error:          #ba1a1a;
  --success:        #10B981;
}

/* ── Body baseline ── */
body {
  font-family: 'Titillium Web', system-ui, -apple-system, sans-serif !important;
  background: var(--bg) !important;
  color: var(--text-primary) !important;
}

/* ── Industrial grid replaces the cyber grid ── */
.grid-bg {
  background-image:
    radial-gradient(rgba(0,0,0,0.06) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
}
.glow-orb { display: none !important; }

/* ── Force sharp 0px corners ── */
body, body *:not(.avatar):not(.spinner):not(.qr-spinner):not([class*="circle"]):not([class*="round"]) {
  border-radius: 0 !important;
}

/* ── Headlines: Bebas Neue ── */
h1, h2, h3, h4,
.site-logo-text, .event-title,
.section-title, .hero-headline, .footer-cta-headline,
[class$="-title"], [class$="-headline"], [class$="-name"] {
  font-family: 'Saira', system-ui, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase;
}

/* ── Labels / eyebrows: Saira ── */
.section-eyebrow, .countdown-label, .stat-label,
[class$="-label"]:not(label):not([class*="-labels"]),
[class$="-eyebrow"], [class$="-pill"], [class$="-badge"] {
  font-family: 'Saira', system-ui, sans-serif !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
}

/* ── Code / mono ── */
code, pre, .mono, [class*="-mono"] {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important;
}

/* ── Cards / panels ── */
[class*="card"], [class*="panel"], [class*="block"] {
  background: var(--bg-card) !important;
  border-color: #E4E4E7 !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

/* ── Selection ── */
::selection { background: var(--primary); color: #fff; }

/* ── Inputs ── */
input, textarea, select {
  background: #ffffff !important;
  color: #1a1c1d !important;
  border: 1px solid #E4E4E7 !important;
  border-radius: 0 !important;
  font-family: 'Titillium Web', system-ui, sans-serif !important;
}
input:focus, textarea:focus, select:focus {
  border: 2px solid var(--primary) !important;
  outline: none !important;
}

/* ── Anchors / buttons: Saira, uppercase, wide-tracked ── */
button, [class*="btn"]:not(input) {
  font-family: 'Saira', system-ui, sans-serif !important;
  border-radius: 0 !important;
  letter-spacing: 0.08em !important;
  font-weight: 700;
  text-transform: uppercase;
}

/* ── Kinetic interaction parity with kinetic.css ──
   Brings the stamped button lift and orange input focus glow to the legacy
   per-tenant pages (vote, results, top-picks, survey, scan). Square + one
   orange + solid no-blur offset, same as the native system. */
[class*="btn"]:not(input) {
  transition: transform 0.12s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.12s cubic-bezier(0.22,1,0.36,1),
              filter 0.12s, background 0.12s, color 0.12s, border-color 0.12s !important;
}
[class*="btn"]:not(input):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(0,0,0,0.18) !important;
}
[class*="btn"]:not(input):active {
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 2px 0 rgba(0,0,0,0.18) !important;
}
input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 3px rgba(253,117,36,0.25) !important;
}
@media (prefers-reduced-motion: reduce) {
  [class*="btn"]:not(input):hover,
  [class*="btn"]:not(input):active {
    transform: none;
    box-shadow: none !important;
  }
}

/* ── Registration form field states (kiosk speed) ──
   This layer governs input appearance on the public pages (it sets the white
   fill + hairline border with !important), so the field states have to live
   here to take effect. Bigger touch targets for thumbs at the gate, a real red
   error state (the base hairline border would otherwise mask it), and a quiet
   green check confirming a field passed. */
input, textarea, select { min-height: 48px !important; }
.radio-option { min-height: 48px !important; }

input.invalid, select.invalid, textarea.invalid {
  border: 1px solid #ba1a1a !important;
  box-shadow: 0 0 0 3px rgba(186,26,26,0.16) !important;
}
input.valid, select.valid {
  border-color: rgba(16,185,129,0.6) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.85rem center !important;
  padding-right: 2.6rem !important;
}