/* ── EntryLane Design System — "The Pit Lane", rebuilt ──
   Charcoal + cream + one blue. Sharp 0px corners, 8px modular scale.
   Type: Archivo Black (display: wordmark, page + section headings)
         Archivo (labels, body, controls) · JetBrains Mono (IDs/data) */

@import url('/css/fonts-bebas.css');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&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, #58A0D8);
  outline-offset: 2px;
}

:root {
  /* Surfaces */
  --surface:                 #f9f9fa;
  --surface-bright:          #ffffff;
  --surface-low:             #f3f3f4;
  --surface-mid:             #eeeeef;
  --surface-high:            #e8e8e9;
  --surface-highest:         #e2e2e3;
  --surface-card:            #ffffff;
  --surface-dark:            #1A1A1B;
  --surface-darker:          #09090A;

  /* Foreground */
  --on-surface:              #1a1c1d;
  --on-surface-muted:        #5f5e5f;
  --on-surface-dim:          #8e8e93;
  --on-dark:                 #F3EFE8; /* cream, from the EntryLane wordmark */
  --on-dark-muted:           #a1a1aa;
  --on-dark-dim:             #71717a;

  /* Brand */
  --primary:                 #58A0D8;
  --primary-deep:            #3F86C2;
  --primary-soft:            #D6E8F7;
  /* Accent as TEXT on light surfaces (derived-ink rule): the raw accent is
     only ~2.7:1 on white. Matches the admin console's --accent-ink. */
  --primary-ink:             #1F6BA5;
  /* Text ON the accent fill. The contrast pipeline (bestOn) picks near-black
     for the stock teal: 5.6:1 vs 3.7:1 for white. Same value the admin,
     judge, and participant surfaces use (--on-accent), so a primary button
     reads identically on every page. */
  --on-primary:              #0D0D12;

  /* Semantic */
  --success:                 #10B981;
  --warning:                 #58A0D8;
  --danger:                  #ba1a1a;
  /* Danger on carbon: #ba1a1a only hits ~2.7:1 on dark surfaces (fails AA),
     so dark contexts use a lighter flag red that clears ~4.6:1 on carbon. */
  --danger-on-dark:          #ef4444;

  /* Lines */
  --border:                  #E4E4E7;
  --border-strong:           #d4d4d8;
  --border-dark:             #2a2a2c;

  /* Spacing — 8px modular scale */
  --space-xs:                4px;
  --space-base:              8px;
  --space-sm:                12px;
  --space-md:                24px;
  --space-lg:                48px;
  --space-xl:                80px;
  --gutter:                  24px;
  --margin-page:             32px;

  /* Type */
  --font-headline:           'Archivo Black', 'Archivo', system-ui, sans-serif;
  --font-display:            'Archivo Black', 'Archivo', system-ui, sans-serif;
  --font-body:               'Archivo', system-ui, sans-serif;
  --font-label:              'Archivo', system-ui, sans-serif;
  --font-mono:               'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Motion — exponential ease-out, no bounce; short durations (product flow) */
  --ease-out-quint:          cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:                0.12s;
  --dur-base:                0.2s;

  /* Elevation — stamped, not soft (solid no-blur offsets) */
  --shadow-hairline:         0 1px 0 rgba(0,0,0,0.05);
  --shadow-stamp:            0 6px 0 rgba(0,0,0,0.07);
  --shadow-stamp-accent:     0 6px 0 var(--primary-deep);
  --shadow-stamp-dark:       0 6px 0 #000;
  --glow-focus:              0 0 0 3px rgba(88, 160, 216,0.25);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Sticky kbar offset so anchored sections don't slide under the nav */
section[id], div[id] { scroll-margin-top: 80px; }

/* Reveal-on-scroll utility — fade + slide up when in viewport.
   Sections opt in via class="reveal"; JS sets .is-visible. */
/* Visible by default: without JS (blocked, CSP, an earlier script throwing,
   a headless renderer or a social unfurler) the page must still render its
   content. The hidden start state is scoped to .js, which an inline head
   script sets, so the reveal is an enhancement rather than a gate. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }
/* Stagger children of a revealed container (lists, card rows, stat groups).
   Each child enters slightly after the last once the parent is visible. */
.js .reveal-stagger.is-visible > * {
  animation: kreveal-in 0.5s var(--ease-out-quint) both;
}
.js .reveal-stagger.is-visible > *:nth-child(1) { animation-delay: 0.04s; }
.js .reveal-stagger.is-visible > *:nth-child(2) { animation-delay: 0.10s; }
.js .reveal-stagger.is-visible > *:nth-child(3) { animation-delay: 0.16s; }
.js .reveal-stagger.is-visible > *:nth-child(4) { animation-delay: 0.22s; }
.js .reveal-stagger.is-visible > *:nth-child(5) { animation-delay: 0.28s; }
.js .reveal-stagger.is-visible > *:nth-child(n+6) { animation-delay: 0.34s; }
@keyframes kreveal-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .js .reveal-stagger.is-visible > * { animation: none; }
}
body {
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--primary); color: var(--on-primary); }

/* ── Layout ── */
.container { max-width: 1440px; margin: 0 auto; padding: 0 var(--margin-page); }
.section { padding: var(--space-xl) 0; }
.section-tight { padding: var(--space-lg) 0; }
.section-eyebrow {
  font-family: var(--font-label); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary);
  margin-bottom: 0.6rem;
}
.section-rule {
  height: 4px; width: 96px; background: var(--primary); margin-bottom: 1.4rem;
}

/* ── Typography ── */
.h-xl   { font-family: var(--font-headline); font-weight: 400; font-size: clamp(2.6rem, 6.5vw, 4rem);  line-height: 1.0;  letter-spacing: 0.005em; text-transform: uppercase; }
.h-hero { font-family: var(--font-headline); font-weight: 400; font-size: clamp(2.8rem, 10vw, 6rem);   line-height: 0.92; letter-spacing: 0; text-transform: uppercase; }
.h-lg   { font-family: var(--font-headline); font-weight: 400; font-size: clamp(1.8rem, 3.8vw, 2.6rem);  line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase; }
.h-md   { font-family: var(--font-label); font-weight: 700; font-size: 1.6rem; line-height: 1.1;  letter-spacing: 0.06em; text-transform: uppercase; }
.h-sm   { font-family: var(--font-label); font-weight: 700; font-size: 1.2rem; line-height: 1.15; letter-spacing: 0.08em; text-transform: uppercase; }
.body-lg{ font-family: var(--font-body); font-size: 1.125rem; line-height: 1.6; }
.body   { font-family: var(--font-body); font-size: 1rem;     line-height: 1.55; }
.body-sm{ font-family: var(--font-body); font-size: 0.9rem;   line-height: 1.55; }
.label-bold { font-family: var(--font-label); font-weight: 700; font-size: 0.84rem; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; }
.label-sm   { font-family: var(--font-label); font-weight: 500; font-size: 0.72rem; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; }
.muted   { color: var(--on-surface-muted); }
.muted-2 { color: var(--on-surface-dim); }
.accent  { color: var(--primary); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 1.05rem 2.2rem;
  /* Platform-wide button scheme (quieted Jul 4): Archivo 600 sentence case
     instead of label caps — buttons read as controls, not headlines. */
  font-family: var(--font-body); font-weight: 600; font-size: 0.98rem;
  letter-spacing: 0.01em;
  border-radius: 0;
  transition: filter var(--dur-fast),
              transform var(--dur-fast) var(--ease-out-quint),
              box-shadow var(--dur-fast) var(--ease-out-quint),
              background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  cursor: pointer;
  white-space: nowrap;
}
/* Stamped interaction: lifts on hover revealing the signature solid offset,
   presses flush on click — a hot tag being stamped onto the page. */
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(0.99); }
/* Disabled / busy: clearly non-interactive, no stamped lift, no hover response.
   Covers every async wait (Continue, Launch My Show, redirecting to checkout). */
.btn:disabled, .btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; filter: grayscale(0.15);
}
.btn:disabled:hover, .btn[disabled]:hover, .btn[aria-disabled="true"]:hover,
.btn:disabled:active, .btn[disabled]:active {
  transform: none; box-shadow: none; filter: grayscale(0.15);
}
.btn-sm { padding: 0.6rem 1.2rem; font-size: 0.88rem; }
.btn-lg { padding: 1.3rem 3rem; font-size: 1.05rem; }
.btn-primary  { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover  { filter: brightness(1.06); box-shadow: var(--shadow-stamp-accent); }
.btn-primary:active { box-shadow: 0 2px 0 var(--primary-deep); }
.btn-dark     { background: var(--surface-dark); color: var(--on-dark); }
.btn-dark:hover  { background: #000; box-shadow: var(--shadow-stamp-dark); }
.btn-dark:active { box-shadow: 0 2px 0 #000; }
.btn-on-dark  { border: 2px solid var(--on-dark); color: var(--on-dark); }
.btn-on-dark:hover { background: var(--on-dark); color: var(--surface-dark); }
.btn-on-light { border: 2px solid var(--on-surface); color: var(--on-surface); }
.btn-on-light:hover { background: var(--on-surface); color: var(--surface-card); }
@media (prefers-reduced-motion: reduce) {
  .btn { transition: filter var(--dur-fast), background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
  .btn:hover, .btn:active { transform: none; }
  .btn-primary:hover, .btn-dark:hover, .btn-primary:active, .btn-dark:active { box-shadow: none; }
}

/* ── Cards ── */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-hairline);
  position: relative;
}
/* Opt-in lift for interactive cards (clickable tiles, links). The stamped
   offset reads as a tag pressed onto the page; static dense cards stay flat. */
.card-interactive {
  transition: transform var(--dur-base) var(--ease-out-quint),
              box-shadow var(--dur-base) var(--ease-out-quint),
              border-color var(--dur-base);
  cursor: pointer;
}
.card-interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-stamp);
  border-color: var(--border-strong);
}
@media (prefers-reduced-motion: reduce) {
  .card-interactive { transition: border-color var(--dur-base); }
  .card-interactive:hover { transform: none; box-shadow: var(--shadow-hairline); }
}
.card-pad { padding: var(--space-md); }
.card-strip-orange::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--primary);
}
.card-strip-mid::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--on-surface-muted);
}
.card-dark { background: var(--surface-dark); color: var(--on-dark); border: 0; }
.card-dark .muted { color: var(--on-dark-muted); }

/* ── Industrial grid ── */
.industrial-grid {
  background-image: radial-gradient(rgba(255,255,255,0.18) 1px, transparent 1px);
  background-size: 32px 32px;
}
.industrial-grid-light {
  background-image: radial-gradient(var(--surface-highest) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ── Status chips ── */
.chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.28rem 0.7rem;
  font-family: var(--font-body); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-primary);
}
.chip-primary { background: var(--primary); }
.chip-success { background: var(--success); }
.chip-dark    { background: var(--surface-dark); }
.chip-soft    { background: var(--surface-mid); color: var(--on-surface); }

/* ── Inputs ── */
.kfield      { display: block; margin-bottom: var(--space-md); }
.klabel      {
  display: block; margin-bottom: 0.5rem;
  font-family: var(--font-label); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-surface);
}
.kinput, .kselect, .ktextarea {
  width: 100%; display: block;
  padding: 0.85rem 1rem;
  font-family: var(--font-body); font-size: 1rem; line-height: 1.4;
  background: var(--surface-card); color: var(--on-surface);
  border: 1px solid var(--border); border-radius: 0;
  transition: border 0.12s, box-shadow var(--dur-fast) var(--ease-out-quint);
}
.kinput:focus, .kselect:focus, .ktextarea:focus {
  outline: none; border: 2px solid var(--primary);
  box-shadow: var(--glow-focus);
  padding: calc(0.85rem - 1px) calc(1rem - 1px);
}
.kinput.error { border-color: var(--danger); }
.khint { margin-top: 0.4rem; font-size: 0.82rem; color: var(--on-surface-muted); }
.kerror { margin-top: 0.4rem; font-size: 0.82rem; color: var(--danger); display: none; }
.kerror.visible { display: block; }
/* Legible placeholder — browser default fails the 4.5:1 outdoor-legibility bar. */
.kinput::placeholder, .ktextarea::placeholder { color: var(--on-surface-muted); opacity: 1; }

/* ── Top app bar ── */
.kbar {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: var(--surface-dark); color: var(--on-dark);
  border-bottom: 1px solid var(--border-dark);
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem var(--margin-page);
}
.kbar-logo {
  font-family: var(--font-headline); font-weight: 400;
  font-size: 1.6rem; letter-spacing: 0.01em; color: var(--on-dark);
  text-transform: uppercase;
}
.kbar-logo .kw-entry,
.kfooter-logo .kw-entry { color: var(--on-dark); }
.kbar-logo .kw-lane,
.kfooter-logo .kw-lane  { color: #58A0D8; margin-left: 0.05em; }
.kbar-nav      { display: flex; align-items: center; gap: 0.25rem; }
.kbar-nav a {
  font-family: var(--font-label); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--on-dark-muted); padding: 0.4rem 1rem;
  transition: color 0.12s;
}
.kbar-nav a:hover { color: var(--on-dark); }
.kbar-nav a.active {
  color: var(--primary);
  border-bottom: 2px solid var(--primary);
  padding-bottom: calc(0.4rem - 2px);
}
.kbar-right { display: flex; align-items: center; gap: 0.6rem; }
.kbar-icon  {
  color: var(--on-dark-muted); line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  transition: color 0.12s;
}
.kbar-icon:hover { color: var(--primary); }

/* Wordmark (ENTRY + LANE spans): Archivo Black, cream + blue, on every surface. */
.kw-entry, .kw-lane { font-family: 'Bebas Neue', 'Archivo Black', 'Archivo', sans-serif; font-weight: 400; letter-spacing: 0.01em; }
/* LANE + its period are always brand blue — a literal, not the accent token,
   so a show themed in another color never recolors the wordmark. */
.kw-lane { color: #58A0D8 !important; }
.kw-lane::after { content: "."; color: #58A0D8; }

/* ── Footer ── */
.kfooter {
  background: var(--surface-dark); color: var(--on-dark);
  padding: var(--space-lg) var(--margin-page);
  border-top: 1px solid var(--border-dark);
  display: flex; flex-direction: column; gap: 1.5rem;
}
@media (min-width: 761px) {
  .kfooter { flex-direction: row; justify-content: space-between; align-items: center; }
}
.kfooter-logo {
  font-family: var(--font-headline); font-weight: 400;
  font-size: 1.4rem; letter-spacing: 0.01em; color: var(--on-dark);
  text-transform: uppercase;
}
.kfooter a { color: var(--on-dark); display: inline-flex; align-items: center; min-height: 44px; }
.kfooter a:hover { color: var(--primary); }
/* Scoped away from the marketing rich footer: its tagline/copyright run at
   0.55 white (AA on #15151a, matching site-chrome's footer) and this
   !important was silently forcing them to full white — the one footer text
   that didn't match the guides/tutorials chrome. */
.kfooter:not(.kfooter--rich) p { color: var(--on-dark) !important; }
.kfooter-nav {
  display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: center;
}
.kfooter-nav a {
  font-family: var(--font-label); font-weight: 500; font-size: 0.74rem;
  letter-spacing: 0.14em; text-transform: uppercase;
}

/* ── Material symbol sizing helper ── */
.mi    {
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'opsz' 24;
  vertical-align: middle;
  /* Ligature substitution is keyed to the lowercase icon name, so an
     inherited text-transform or letter-spacing from a tracked-caps parent
     (.mono-label, .tab-bar a, any uppercase label) defeats it and the raw
     name renders as a word. Reset both on the glyph itself. */
  text-transform: none;
  letter-spacing: normal;
  font-feature-settings: 'liga';
}
.mi-sm { font-size: 1.05rem; }
.mi-md { font-size: 1.4rem; }
.mi-lg { font-size: 2rem; }

/* ── Utility ── */
.hidden          { display: none !important; }
.text-center     { text-align: center; }
.flex            { display: flex; }
.flex-col        { flex-direction: column; }
.items-center    { align-items: center; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm          { gap: 0.75rem; }
.gap-md          { gap: 1.4rem; }
.mt-md           { margin-top: 1.4rem; }
.mt-lg           { margin-top: 2.5rem; }
.mb-md           { margin-bottom: 1.4rem; }
.mb-lg           { margin-bottom: 2.5rem; }

/* ── Responsive helpers ── */
@media (max-width: 760px) {
  .container { padding: 0 1.25rem; }
  .section   { padding: var(--space-lg) 0; }
  .kbar-nav  { display: none; }
}

/* Shared compact app footer — same markup as admin/judge so logged-in
   areas (admin-login, registration) match the rest of the product. */
.el-footer {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 0.6rem;
  padding: 0.9rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: #15151a;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.75rem; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55);
}
.el-footer-brand { text-transform: uppercase; }
.el-footer-nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.el-footer-nav a {
  color: rgba(255,255,255,0.7); text-decoration: none;
  text-transform: uppercase; letter-spacing: 0.06em;
  transition: color 0.15s;
}
.el-footer-nav a:hover { color: var(--primary); }