/* PLUSA 2.0 shared look: blue on black, liquid glass, Gridtop-style cursor spotlight. */
:root {
  --bg: #02050b;
  --ink: #eaf1ff;
  --muted: #8ea3c4;
  --label: #b9c8e6;
  --blue: #2f7bff;
  --blue-hi: #6aa8ff;
  --line: rgba(96, 150, 255, .26);
  --green: #22d37f;
  --red: #ff3d57;
  /* Autocomputing cursors (24px, from autocomputing.ai/sprites). Arrow-style ones point from the
     top-left corner; the I-beam, crosshair, move and resize ones from their center. */
  --cur-default: url('/assets/cursors/cursor_default.ico'), default;
  --cur-point: url('/assets/cursors/cursor_point.ico'), pointer;
  --cur-input: url('/assets/cursors/cursor_input.ico') 12 12, text;
  --cur-help: url('/assets/cursors/cursor_help.ico'), help;
  --cur-key: url('/assets/cursors/cursor_key.ico'), pointer;
  --cur-phone: url('/assets/cursors/cursor_phone.ico'), pointer;
  --cur-move: url('/assets/cursors/cursor_move.ico') 12 12, move;
  --cur-cross: url('/assets/cursors/cursor_cross.ico') 12 12, crosshair;
  --cur-ew: url('/assets/cursors/cursor_ew.ico') 12 12, ew-resize;
  --cur-ns: url('/assets/cursors/cursor_ns.ico') 12 12, ns-resize;
  --cur-off: url('/assets/cursors/cursor_default.ico'), not-allowed;
}

/* Cursors everywhere. :where() keeps these at zero specificity, so any component's own cursor wins. */
html { cursor: var(--cur-default); }
/* The browser's own stylesheet gives these a plain system arrow instead of inheriting. */
:where(label, option, optgroup) { cursor: var(--cur-default); }
:where(a[href], button, [role="button"], [role="tab"], summary, select, label:has(> input[type="checkbox"], > input[type="radio"]),
  input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"], input[type="range"], input[type="color"], input[type="file"],
  [data-close]) { cursor: var(--cur-point); }
:where(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"],
  input[type="url"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], textarea, [contenteditable="true"]) { cursor: var(--cur-input); }
:where(a[href^="tel:"]) { cursor: var(--cur-phone); }
:where(a[href$="login.html"], [data-reveal]) { cursor: var(--cur-key); }
:where(abbr[title], [data-help]) { cursor: var(--cur-help); }
:where(:disabled, [aria-disabled="true"]) { cursor: var(--cur-off); }
/* Built-in parts of date, number and search fields (calendar button, spinner, clear button). */
::-webkit-calendar-picker-indicator, ::-webkit-inner-spin-button, ::-webkit-outer-spin-button, ::-webkit-search-cancel-button { cursor: var(--cur-point); }

/* Spotlight strength, animatable so the light fades in and out instead of popping. */
@property --spot {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(900px 620px at 8% 92%, rgba(20, 90, 255, .30), transparent 62%),
    radial-gradient(700px 520px at 92% 6%, rgba(40, 120, 255, .18), transparent 60%),
    radial-gradient(1300px 800px at 50% 125%, rgba(10, 40, 140, .38), transparent 70%),
    var(--bg);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(80, 130, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 130, 255, .035) 1px, transparent 1px);
  background-size: 56px 56px;
}

a { color: var(--blue-hi); text-decoration: none; }
a:hover { color: #fff; }

/* Light behind the glass, so the blur has something to bend. */
/* Static on purpose: animated, blurred light behind the cards forced a full redraw every frame. */
.l-orb {
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  opacity: .35;
}
.l-orb-a { width: 520px; height: 520px; right: 10%; top: 12%; background: radial-gradient(circle, #1f63ff, transparent 68%); }
.l-orb-b { width: 380px; height: 380px; right: 32%; bottom: 2%; background: radial-gradient(circle, #0a8cff, transparent 68%); }

/* Header */
.l-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(20px, 4vw, 56px);
  border-bottom: 1px solid rgba(96, 150, 255, .12);
  background: rgba(2, 5, 11, .94);
}
.l-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: 1.75rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.l-brand img { width: 46px; height: 46px; object-fit: contain; }
.l-brand b { color: var(--blue); }
.l-header nav { display: flex; gap: 12px; align-items: center; }
.l-header nav a {
  font: 600 1rem/1 "Barlow Condensed", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--label);
}
.l-header .l-pill {
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #fff;
  background: rgba(47, 123, 255, .12);
  font: 600 1rem/1 "Barlow Condensed", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: var(--cur-point);
}

/* Glass */
.glass {
  --spot: 0;
  position: relative;
  isolation: isolate;
  border-radius: 22px;
  border: 1px solid var(--line);
  /* No backdrop-filter: live-blurring what's behind every card was the main source of lag. */
  background: linear-gradient(160deg, rgba(45, 100, 230, .22), rgba(8, 16, 34, .86) 45%, rgba(5, 10, 22, .94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    0 0 0 1px rgba(10, 40, 120, .35),
    0 14px 32px rgba(0, 0, 0, .5),
    0 0 22px rgba(30, 110, 255, .14);
  transition: --spot .6s ease;
}
.glass.is-lit { --spot: 1; transition-duration: .35s; }
/* Rim light that follows the cursor, plus a fixed top highlight. */
.glass::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(260px circle at var(--mouse-x, 50%) var(--mouse-y, 0), rgb(150 200 255 / calc(.95 * var(--spot))), transparent 70%),
    linear-gradient(180deg, rgba(150, 200, 255, .5), rgba(150, 200, 255, 0) 32%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
/* Spotlight inside the glass, plus specular sheen. */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(420px circle at var(--mouse-x, 50%) var(--mouse-y, 0), rgb(80 150 255 / calc(.17 * var(--spot))), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 24%);
}
.glass > * { position: relative; z-index: 2; }

/* Auth layout */
.l-auth {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(32px, 6vh, 72px) 0;
}
.l-solo { grid-column: 1 / -1; width: min(640px, 100%); margin: 0 auto; }
.l-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 600 1rem/1 "Barlow Condensed", sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue-hi);
}
.l-kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 12px var(--blue);
}
.l-title {
  margin: .35em 0 .4em;
  font-family: Anton, Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(3rem, 6.4vw, 5.8rem);
  line-height: .92;
  text-transform: uppercase;
  color: #fff;
}
.l-title em {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: 1.08em;
  color: var(--blue);
  text-shadow: 0 0 30px rgba(47, 123, 255, .6);
}
.l-lede { max-width: 520px; margin: 0; font-size: 1.08rem; line-height: 1.65; color: #c5d3ec; }

.l-perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 34px; }
.l-perk { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; }
.l-perk svg { flex: none; width: 28px; height: 28px; color: var(--blue); filter: drop-shadow(0 0 8px rgba(47, 123, 255, .6)); }
.l-perk strong {
  display: block;
  margin-bottom: 3px;
  font: 700 1.1rem/1.1 "Barlow Condensed", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.l-perk small { color: var(--muted); font-size: .86rem; line-height: 1.45; }

/* Chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font: 700 .85rem/1 "Barlow Condensed", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.chip-in { color: #d8ffea; background: rgba(34, 211, 127, .16); border: 1px solid rgba(34, 211, 127, .55); box-shadow: 0 0 14px rgba(34, 211, 127, .3); }
.chip-open { color: #ffe1e5; background: rgba(255, 61, 87, .16); border: 1px solid rgba(255, 61, 87, .6); box-shadow: 0 0 14px rgba(255, 61, 87, .3); }
.chip-full { color: #aab6cc; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); }
button.chip { cursor: var(--cur-point); transition: background .15s; }
button.chip-open:hover { background: rgba(255, 61, 87, .32); }

/* Card + form */
.l-card { padding: clamp(22px, 2.4vw, 32px); }
.l-card h2 {
  margin: 0 0 4px;
  font: 700 1.8rem/1 "Barlow Condensed", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.l-sub { margin: 4px 0 16px; color: var(--muted); font-size: .95rem; }

.l-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 16px;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(96, 150, 255, .18);
  background: rgba(0, 0, 0, .35);
}
.l-tabs button {
  padding: 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: 700 .95rem/1 "Barlow Condensed", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: var(--cur-point);
}
.l-tabs button[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(180deg, rgba(61, 134, 255, .95), rgba(21, 82, 214, .95));
  box-shadow: 0 0 18px rgba(47, 123, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.l-field { display: block; margin-bottom: 10px; }
.l-label {
  display: block;
  margin-bottom: 6px;
  font: 600 .74rem/1 Inter, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--label);
}
.l-field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(96, 150, 255, .22);
  border-radius: 12px;
  background: rgba(3, 8, 20, .62);
  color: #fff;
  font: 500 1rem Inter, sans-serif;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.l-field input::placeholder { color: #5d6f8f; }
.l-field input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47, 123, 255, .25), 0 0 22px rgba(47, 123, 255, .22); }
.l-input { position: relative; }
.l-input input { padding-right: 70px; }
.l-reveal {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: rgba(47, 123, 255, .15);
  color: var(--blue-hi);
  font: 600 .78rem Inter, sans-serif;
  cursor: var(--cur-key);
}
.l-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.l-row-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
/* Grid cells may shrink below a wide input (date/time pickers), so a row never spills out of its box. */
.l-row > *, .l-row-3 > * { min-width: 0; }
.o-shift-pay { grid-template-columns: 1fr 1.2fr .8fr; }

.l-plans { margin: 0 0 12px; padding: 0; border: 0; }
.l-plans legend { padding: 0; }
.l-plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.l-plan { position: relative; display: block; cursor: var(--cur-point); }
.l-plan input { position: absolute; opacity: 0; }
.l-plan span { display: block; height: 100%; padding: 9px 12px; border: 1px solid rgba(96, 150, 255, .22); border-radius: 12px; background: rgba(3, 8, 20, .5); }
.l-plan strong { display: block; font: 700 1.05rem/1.2 "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.l-plan small { color: var(--muted); font-size: .8rem; }
.l-plan input:checked + span { border-color: var(--blue); background: rgba(20, 60, 160, .25); box-shadow: inset 0 0 0 1px var(--blue), 0 0 20px rgba(47, 123, 255, .3); }
.l-plan input:focus-visible + span { outline: 2px solid var(--blue-hi); outline-offset: 2px; }
/* Apply to host: the same card, but it's a price list, not a choice. */
.l-plan-flat { cursor: var(--cur-default); }
.l-plan-flat .v-price { display: block; margin: 2px 0 3px; color: var(--blue-hi); font: 700 1.15rem/1.1 "Barlow Condensed", sans-serif; letter-spacing: .04em; }
#venuePricing .l-plan-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.l-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 2px 0 14px; font-size: .88rem; color: var(--muted); }
.l-check { display: flex; align-items: center; gap: 8px; }
.l-check input { accent-color: var(--blue); }

.l-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #3d86ff, #1552d6);
  color: #fff;
  font: 700 1.2rem/1 "Barlow Condensed", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: var(--cur-point);
  box-shadow: inset 0 0 0 1px rgba(140, 190, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 30px rgba(24, 90, 255, .45);
  transition: filter .15s, transform .15s;
}
.l-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.l-btn:disabled { opacity: .5; cursor: var(--cur-off); filter: none; transform: none; }
.l-btn svg { width: 18px; height: 18px; }

.l-note { min-height: 1.2em; margin: 12px 0 0; font-size: .88rem; color: #ff9aa8; }
.l-fine { margin: 2px 0 12px; font-size: .82rem; color: var(--muted); }
.l-switch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(96, 150, 255, .14);
  font-size: .92rem;
  color: var(--muted);
}
.l-switch a { font: 700 1.05rem/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; }

/* Patron dashboard */
.d-main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 36px 0 80px; }
.d-team { font: 700 1.05rem/1 "Barlow Condensed", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.d-cart, .d-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(47, 123, 255, .12);
  color: #fff;
  cursor: var(--cur-point);
}
.d-cart svg, .d-icon svg { width: 22px; height: 22px; }
.d-cart span {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--red);
  font: 700 .75rem/20px Inter, sans-serif;
  box-shadow: 0 0 10px rgba(255, 61, 87, .6);
}
.d-cart span[data-empty] { display: none; }

.d-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: end; margin-bottom: 46px; }
.d-title { font-size: clamp(2.6rem, 5vw, 4.4rem); margin: .3em 0 .25em; }
.d-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.d-stat { padding: 18px 20px; border-radius: 18px; }
.d-stat-label { display: block; margin-bottom: 10px; font: 600 .72rem/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--label); }
.d-stat strong { display: block; font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 2.6rem; line-height: 1; color: #fff; text-shadow: 0 0 20px rgba(47, 123, 255, .45); }
.d-next strong { font-size: 1.5rem; line-height: 1.1; }
.d-stat small { display: block; margin-top: 6px; color: var(--muted); font-size: .8rem; }

.d-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin: 0 0 16px; }
.d-h2 { margin: 0; font: 700 2rem/1 "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.d-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.d-venues { display: grid; gap: 22px; margin-bottom: 52px; }
.d-venue { padding: 22px clamp(18px, 2.4vw, 30px); }
.d-venue-head { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(96, 150, 255, .14); }
.d-venue-head h3 { margin: 0; font: 700 1.6rem/1.05 "Barlow Condensed", sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.d-venue-head p { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }
.d-logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: linear-gradient(160deg, #2f7bff, #0b2f8f);
  font-family: Anton, Impact, sans-serif;
  font-size: 1.3rem;
  color: #fff;
  box-shadow: 0 0 18px rgba(47, 123, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.d-count { margin-left: auto; font: 600 .9rem/1 "Barlow Condensed", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--label); }
.d-events { margin: 0; padding: 0; list-style: none; }
.d-event { display: grid; grid-template-columns: 64px 1fr auto; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(96, 150, 255, .1); }
.d-event:last-child { border-bottom: 0; padding-bottom: 0; }
.d-date {
  display: grid;
  justify-items: center;
  padding: 8px 0;
  border: 1px solid rgba(96, 150, 255, .22);
  border-radius: 12px;
  background: rgba(3, 8, 20, .5);
  font: 600 .72rem/1.15 "Barlow Condensed", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--label);
}
.d-date strong { font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 1.7rem; line-height: 1.05; letter-spacing: 0; color: #fff; }
.d-info strong { display: block; font: 700 1.2rem/1.15 "Barlow Condensed", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.d-info small { color: var(--muted); font-size: .85rem; }
.d-bar { max-width: 320px; height: 6px; margin: 8px 0 4px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.d-bar i { display: block; height: 100%; border-radius: inherit; background: repeating-linear-gradient(-45deg, #2f7bff 0 8px, #1a5ae0 8px 16px); box-shadow: 0 0 10px rgba(47, 123, 255, .6); }
.d-spots { display: block; font-size: .78rem !important; }
.d-action { display: flex; align-items: center; gap: 8px; }
.d-add {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(47, 123, 255, .1);
  color: #fff;
  font: 700 1.1rem/1 Inter, sans-serif;
  cursor: var(--cur-point);
}
.d-add.is-on { border-color: var(--blue); background: rgba(47, 123, 255, .35); box-shadow: 0 0 12px rgba(47, 123, 255, .5); }
.d-empty { padding: 16px 0; color: var(--muted); }
.d-join-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.d-join { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.d-join .d-venue-head { padding: 0; border: 0; }
.d-join-meta { margin: 0; color: var(--muted); font-size: .9rem; }
.d-join .l-btn { margin-top: auto; padding: 12px; font-size: 1.05rem; }

/* Overlays */
.d-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(0, 3, 10, .75); }
.d-modal {
  position: fixed;
  z-index: 50;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, calc(100% - 32px));
  max-height: calc(100vh - 24px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 24px 26px;
}
/* Keep the rim light inside the scroll box so it can't cause a sideways scrollbar. */
.d-modal::before, .d-drawer::before { inset: 0; }

/* Scrollbars for boxes that scroll inside the page (the page's own scrollbar is left alone).
   Chrome, Edge and Safari take the ::-webkit-scrollbar styling; Firefox gets the thin standard one. */
:root { --sb-track: rgba(96, 150, 255, .08); --sb-thumb: rgba(47, 123, 255, .55); --sb-thumb-hi: #6aa8ff; }
:is(.d-modal, .d-drawer .d-lines, .l-table-wrap, .v-table-wrap, .a-console-out, .o-bracket)::-webkit-scrollbar { width: 10px; height: 10px; }
:is(.d-modal, .d-drawer .d-lines, .l-table-wrap, .v-table-wrap, .a-console-out, .o-bracket)::-webkit-scrollbar-track {
  margin: 6px;
  border-radius: 999px;
  background: var(--sb-track);
}
:is(.d-modal, .d-drawer .d-lines, .l-table-wrap, .v-table-wrap, .a-console-out, .o-bracket)::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--sb-thumb) padding-box;
}
:is(.d-modal, .d-drawer .d-lines, .l-table-wrap, .v-table-wrap, .a-console-out, .o-bracket)::-webkit-scrollbar-thumb:hover,
:is(.d-modal, .d-drawer .d-lines, .l-table-wrap, .v-table-wrap, .a-console-out, .o-bracket)::-webkit-scrollbar-thumb:active { background-color: var(--sb-thumb-hi); }
:is(.d-modal, .d-drawer .d-lines, .l-table-wrap, .v-table-wrap, .a-console-out, .o-bracket)::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  .d-modal, .d-drawer .d-lines, .l-table-wrap, .v-table-wrap, .a-console-out, .o-bracket { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) var(--sb-track); }
}
.d-drawer {
  position: fixed;
  z-index: 50;
  top: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100% - 24px));
  padding: 26px;
}
.d-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, .3);
  color: #fff;
  font-size: 1.3rem;
  cursor: var(--cur-point);
}
.d-modal-title { margin: .3em 0 16px; font: 700 1.9rem/1 "Barlow Condensed", sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.d-lines { margin: 0 0 12px; padding: 0; list-style: none; }
.d-drawer .d-lines { flex: 1; overflow: auto; }
.d-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(96, 150, 255, .12); }
.d-lines small { display: block; color: var(--muted); font-size: .8rem; }
.d-lines b { font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 1.3rem; }
.d-remove { margin-top: 4px; padding: 0; border: 0; background: none; color: var(--muted); font-size: .8rem; text-decoration: underline; cursor: var(--cur-point); }
.d-total { display: flex; justify-content: space-between; align-items: center; margin: 6px 0 14px; font: 700 1.1rem/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.d-total b { font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 1.8rem; color: #fff; text-shadow: 0 0 16px rgba(47, 123, 255, .5); }
.d-test { margin: 0 0 14px; padding: 10px 12px; border: 1px dashed rgba(106, 168, 255, .4); border-radius: 10px; color: var(--blue-hi); font-size: .85rem; }
.d-toast {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  padding: 12px 18px;
  border: 1px solid rgba(34, 211, 127, .6);
  border-radius: 12px;
  background: rgba(10, 40, 20, .88);
  color: #d8ffea;
  font-weight: 600;
  box-shadow: 0 0 20px rgba(34, 211, 127, .35);
}

/* Header extras: language menu and the settings menu.
   The language button matches the header pill (Venue Portal / Team login): same corners, tint,
   font and height, which is the pill's text line plus its padding and border. Its fixed width fits
   the longest name (KREYÒL AYISYEN), so picking a language never moves the header. Below 1200px it
   shrinks to the globe alone. */
.l-lang-wrap { position: relative; flex: none; }
.l-lang {
  --pad-y: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 194px;
  height: calc(1em + 2 * var(--pad-y) + 2px);
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(47, 123, 255, .12);
  color: #fff;
  font: 600 1rem/1 "Barlow Condensed", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: left;
  cursor: var(--cur-point);
}
.l-lang:hover, .l-lang[aria-expanded="true"] { background: rgba(47, 123, 255, .24); }
.l-lang[aria-expanded="true"] { border-color: var(--blue); }
.l-lang img { flex: none; width: 20px; height: 18px; }
.l-lang-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.l-lang-caret { flex: none; width: 10px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--label); }
.l-lang[aria-expanded="true"] .l-lang-caret { transform: rotate(180deg); }
.l-lang-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 46;
  width: 194px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #07101f;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .6);
}
.l-lang-list button {
  display: block;
  width: 100%;
  padding: 10px 11px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--label);
  font: 600 1rem/1 "Barlow Condensed", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: left;
  cursor: var(--cur-point);
}
.l-lang-list button:hover, .l-lang-list button:focus-visible { border-left-color: var(--blue-hi); background: rgba(47, 123, 255, .2); color: #fff; outline: none; }
.l-lang-list button[aria-checked="true"] { border-left-color: var(--blue); background: rgba(47, 123, 255, .12); color: #fff; }
@media (max-width: 1200px) {
  .l-lang { width: 46px; padding: 0; justify-content: center; }
  .l-lang-name, .l-lang-caret { display: none; }
}
/* Phones: the header pill gets a smaller font and more padding; the language button follows, and
   the accessibility button shrinks to a square of the same height. */
@media (max-width: 640px) {
  .l-lang { --pad-y: 11px; font-size: .92rem; letter-spacing: .08em; }
  .l-header .l-access { width: calc(.92rem + 24px); height: calc(.92rem + 24px); min-height: 0; }
  .l-header .l-access svg { width: 20px; height: 20px; }
}

/* Cookie notice: small, in the bottom-left corner, above the page but under dialogs. */
.l-cookie {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(440px, calc(100% - 32px));
  padding: 10px 10px 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(6, 12, 26, .96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  color: var(--label);
  font: 400 .8rem/1.45 Inter, sans-serif;
}
.l-cookie p { margin: 0; }
.l-cookie a { color: var(--blue-hi); text-decoration: underline; }
.l-cookie-ok {
  flex: none;
  padding: 9px 14px;
  border: 1px solid rgba(106, 168, 255, .5);
  border-radius: 999px;
  background: rgba(47, 123, 255, .22);
  color: #fff;
  font: 600 .82rem/1 Inter, sans-serif;
  cursor: var(--cur-point);
}
.l-cookie-ok:hover { background: rgba(47, 123, 255, .38); }
@media (max-width: 640px) { .l-cookie { left: 12px; right: 12px; bottom: 12px; max-width: none; } }
@media print { .l-cookie { display: none; } }
.d-settings { position: relative; }
.d-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 45; min-width: 220px; padding: 8px; border-radius: 14px; }
.d-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: 600 .92rem Inter, sans-serif;
  text-align: left;
  cursor: var(--cur-point);
}
.d-menu button:hover, .d-menu button:focus-visible { background: rgba(47, 123, 255, .18); outline: none; }
.d-menu svg { width: 18px; height: 18px; color: var(--blue-hi); }

/* Sections ported from the classic site, on the sign-in pages. */
.l-section { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 40px 0; }
.l-section-head { margin-bottom: 24px; }
.l-split { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.l-h2 { margin: .3em 0 0; font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: clamp(2.2rem, 4.5vw, 3.8rem); line-height: .95; text-transform: uppercase; color: #fff; }
.l-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 22px; }
.l-step { padding: 26px; }
.l-step-num { font-family: Anton, Impact, sans-serif; font-size: 2.6rem; line-height: 1; color: var(--blue); text-shadow: 0 0 18px rgba(47, 123, 255, .55); }
.l-step h3 { margin: 12px 0 8px; font: 700 1.35rem/1.1 "Barlow Condensed", sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.l-step p, .l-copy { margin: 0; color: var(--muted); line-height: 1.65; }
.l-band { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 32px; }
.l-band .l-copy { font-size: 1.05rem; color: #c5d3ec; }
.l-table-wrap { overflow-x: auto; padding: 6px 8px; }
/* A glass card that is also the scroll box: keep the rim light inside it, or it adds scrollbars. */
.glass.l-table-wrap::before { inset: 0; }
.l-table { width: 100%; min-width: 520px; border-collapse: collapse; }
.l-table th { padding: 14px 18px; border-bottom: 1px solid rgba(96, 150, 255, .2); text-align: left; font: 700 .9rem "Barlow Condensed", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.l-table td { padding: 15px 18px; border-bottom: 1px solid rgba(96, 150, 255, .1); }
.l-table tr:last-child td { border-bottom: 0; }
.l-table td:first-child { font-family: Anton, Impact, sans-serif; color: var(--blue-hi); }
.l-table td:nth-child(2) { font: 700 1.1rem "Barlow Condensed", sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.l-faq { padding: 6px 28px; }
.l-faq details { padding: 18px 0; border-bottom: 1px solid rgba(96, 150, 255, .14); }
.l-faq details:last-child { border-bottom: 0; }
.l-faq summary { display: flex; justify-content: space-between; gap: 16px; list-style: none; cursor: var(--cur-point); font: 700 1.25rem "Barlow Condensed", sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.l-faq summary::-webkit-details-marker { display: none; }
.l-faq summary::after { content: "+"; color: var(--blue-hi); }
.l-faq details[open] summary::after { content: "\2013"; }
.l-faq p { margin: 10px 0 0; color: var(--muted); line-height: 1.65; }
.l-host { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 38px; }
.l-host .l-copy { max-width: 700px; margin-top: 12px; }
.l-btn-inline { width: auto; padding: 14px 26px; white-space: nowrap; }
.l-footer { padding: 28px 20px; border-top: 1px solid rgba(96, 150, 255, .12); text-align: center; color: var(--muted); font-size: .88rem; scroll-snap-align: end; }
.l-footer p { margin: 4px 0; }

/* Scroll stops, like the classic site and autocomputing.host: each section fills the screen
   below the header and the browser eases between them. */
html:has(body.l-snap-page) {
  scroll-snap-type: y mandatory;
  scroll-padding-top: 76px;
  scroll-behavior: smooth;
}
.l-snap {
  min-height: calc(100vh - 76px);
  min-height: calc(100dvh - 76px);
  display: grid;
  align-content: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.l-auth.l-snap { padding: 24px 0; }

/* Payment step: same flow as the original site (method chips, then card fields). */
.p-link { display: block; width: 100%; margin-top: 10px; padding: 8px; border: 0; background: none; color: var(--blue-hi); font: 600 .9rem Inter, sans-serif; text-decoration: underline; cursor: var(--cur-point); }
.p-charge { color: #fff; font-weight: 600; }
.p-actions { margin-bottom: 14px; }
.p-back { margin: 0 0 12px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(0, 0, 0, .3); color: var(--label); font: 600 .85rem Inter, sans-serif; cursor: var(--cur-point); }
.p-summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 0 16px; padding: 14px 16px; border: 1px solid rgba(96, 150, 255, .2); border-radius: 12px; background: rgba(3, 8, 20, .55); }
.p-summary span { font: 700 1.1rem/1.2 "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.p-summary small { display: block; color: var(--muted); font: 400 .8rem Inter, sans-serif; letter-spacing: 0; text-transform: none; }
.p-summary b { font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 1.8rem; }
.p-methods { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.p-chip { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid rgba(96, 150, 255, .22); border-radius: 999px; background: rgba(3, 8, 20, .55); color: var(--ink); font: 600 .82rem Inter, sans-serif; cursor: var(--cur-point); }
.p-chip.is-active { border-color: var(--blue); background: rgba(47, 123, 255, .22); box-shadow: 0 0 12px rgba(47, 123, 255, .4); }
.p-mark { flex: none; width: 18px; height: 12px; border-radius: 3px; }
.p-card { background: linear-gradient(135deg, #3d4663, #1a1f36); }
.p-applepay { background: linear-gradient(135deg, #555, #000); border: 1px solid #666; }
.p-cashapp { background: #00d54b; }
.p-venmo { background: #008cff; }
.p-zelle { background: #6d1ed4; }
.p-cash { background: #1e8f4e; }
.p-card-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; }
.p-card-fields .p-full { grid-column: 1 / -1; }
.p-card-fields .l-label { display: flex; justify-content: space-between; }
.p-card-fields em { font-style: normal; color: var(--blue-hi); letter-spacing: .04em; }
.p-notice { margin: 0 0 16px; padding: 14px 16px; border: 1px solid rgba(96, 150, 255, .2); border-radius: 12px; background: rgba(3, 8, 20, .55); color: var(--label); font-size: .88rem; line-height: 1.5; }
@media (max-width: 560px) { .p-card-fields { grid-template-columns: 1fr 1fr; } }

/* Venue dashboard */
.chip-blue { color: #dbe8ff; background: rgba(47, 123, 255, .18); border: 1px solid rgba(106, 168, 255, .6); box-shadow: 0 0 14px rgba(47, 123, 255, .3); }
.v-hero { align-items: center; }
.v-hero-side { display: grid; gap: 14px; }
.v-plan { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 18px; }
.v-plan strong { display: block; margin-top: 8px; font: 700 1.3rem/1.1 "Barlow Condensed", sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.v-plan small { display: block; margin-top: 3px; color: var(--muted); font-size: .85rem; }
.v-btn {
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(47, 123, 255, .1);
  color: #fff;
  font: 600 .85rem Inter, sans-serif;
  white-space: nowrap;
  cursor: var(--cur-point);
}
.v-btn:hover { background: rgba(47, 123, 255, .25); }
.v-btn[aria-expanded="true"] { border-color: var(--blue); background: rgba(47, 123, 255, .3); }
.v-danger { border-color: rgba(255, 61, 87, .45); background: rgba(255, 61, 87, .08); }
.v-danger:hover { background: rgba(255, 61, 87, .22); }
.l-btn.v-danger-btn { background: linear-gradient(180deg, #ff5a6f, #d6283f); box-shadow: inset 0 0 0 1px rgba(255, 170, 180, .35), 0 10px 26px rgba(214, 40, 63, .4); }
.v-banner { margin-bottom: 22px; padding: 16px 20px; border-color: rgba(255, 196, 61, .5); color: #ffe7b3; }
.v-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 14px; }
.v-kpi strong { font-size: 2.2rem; }
.v-kpi .d-stat-label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.v-kpi .v-kpi-chip { padding: 3px 7px; font-size: .62rem; letter-spacing: .1em; }
.v-foot { margin: 10px 0 26px; color: var(--muted); font-size: .8rem; }
.v-chart-card { margin-bottom: 44px; padding: 22px 26px 18px; }
.v-h3 { font-size: 1.5rem; }
.v-sub { margin: 6px 0 16px; color: var(--muted); font-size: .88rem; }
.v-chart { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding-left: 34px; }
.v-grid { position: absolute; top: 0; left: 34px; right: 0; height: 180px; pointer-events: none; }
.v-grid span { position: absolute; left: 0; right: 0; border-top: 1px solid rgba(96, 150, 255, .12); }
.v-grid b { position: absolute; left: -34px; top: -.6em; width: 26px; color: var(--muted); font: 500 .7rem/1.2 Inter, sans-serif; text-align: right; }
.v-col { display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: var(--cur-default); }
.v-col:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 2px; border-radius: 6px; }
.v-plot { position: relative; display: block; height: 180px; }
.v-track, .v-bar { position: absolute; bottom: 0; left: 22%; right: 22%; border-radius: 4px 4px 0 0; }
.v-track { background: rgba(150, 190, 255, .08); }
.v-bar { background: #2f7bff; box-shadow: 0 0 12px rgba(47, 123, 255, .45); }
.v-col:hover .v-bar, .v-col:focus-visible .v-bar { background: #5b97ff; }
.v-col-label { color: var(--muted); font-size: .72rem; text-align: center; white-space: nowrap; }
.v-tip {
  position: absolute;
  z-index: 5;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #081226;
  color: var(--ink);
  font-size: .82rem;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -100%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
}
.v-tabs { width: min(460px, 100%); margin: 0; grid-template-columns: repeat(3, 1fr); }
.v-events { display: grid; gap: 14px; }
.v-event { padding: 16px 20px; border-radius: 18px; }
.v-event-main { display: grid; grid-template-columns: 64px minmax(200px, 1.6fr) repeat(4, minmax(70px, .55fr)) auto; gap: 18px; align-items: center; }
.v-event-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.v-event-title strong { font: 700 1.25rem/1.15 "Barlow Condensed", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.v-event-title .chip { padding: 4px 9px; font-size: .72rem; }
.v-event-info small { color: var(--muted); font-size: .85rem; }
.v-metric > span { display: block; margin-bottom: 4px; color: var(--label); font: 600 .66rem/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.v-metric b { font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 1.35rem; color: #fff; }
.v-metric b small { color: var(--muted); font-size: .8em; }
.v-metric .d-bar { margin: 6px 0 0; }
.v-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.v-roster { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(96, 150, 255, .14); }
.v-roster-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.v-roster-head p { margin: 0; color: var(--label); font-size: .9rem; }
.v-table-wrap { overflow-x: auto; }
.v-table { min-width: 760px; }
.v-table th { padding: 10px 14px; }
.v-table td { padding: 11px 14px; vertical-align: top; }
.v-table small { color: var(--muted); }
.v-table a { color: var(--ink); }
.v-check { padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--label); font: 600 .8rem Inter, sans-serif; white-space: nowrap; cursor: var(--cur-point); }
.v-check.is-on { border-color: rgba(34, 211, 127, .6); background: rgba(34, 211, 127, .14); color: #d8ffea; }
.v-empty { padding: 28px; color: var(--muted); text-align: center; }
.v-empty p { margin: 0; }
.v-empty .l-btn { width: auto; margin: 16px auto 0; padding: 12px 22px; }
.v-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.v-kinds .l-plan span { padding: 10px; text-align: center; }
.v-hint { display: block; margin-top: 6px; color: var(--muted); font-size: .78rem; }
.v-preview { margin: 4px 0 14px; }
.v-preview .d-event { margin-top: 8px; padding: 12px 14px; border: 1px dashed rgba(96, 150, 255, .3); border-radius: 12px; }
.d-modal.v-wide { width: min(580px, calc(100% - 32px)); }

/* Header controls keep a fixed size, so switching language never moves or resizes them. */
.l-header nav > a:not(.l-pill) { width: 230px; text-align: right; }
.l-header nav > a, .l-header .l-pill, .d-team { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.l-header .l-pill { width: 200px; padding: 10px 8px; text-align: center; }
.l-header .l-pill[data-signout] { width: 160px; }
.d-team { width: 240px; text-align: right; }

/* League admin */
.a-card { width: min(520px, 100%); }
.a-steps { margin: 0 0 14px; padding-left: 20px; color: var(--label); font-size: .92rem; line-height: 1.6; }
.a-secret { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 14px; border: 1px dashed rgba(106, 168, 255, .45); border-radius: 12px; background: rgba(3, 8, 20, .6); }
.a-secret code { color: #fff; font: 600 1.05rem/1.4 ui-monospace, Consolas, monospace; letter-spacing: .08em; word-break: break-all; }
.l-field input.a-code-input { font: 600 1.3rem ui-monospace, Consolas, monospace; letter-spacing: .3em; text-align: center; }
.a-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; margin: 0 0 12px; padding-left: 26px; color: var(--muted); }
.a-codes code { color: #fff; font: 600 1rem ui-monospace, Consolas, monospace; letter-spacing: .1em; }
.a-actions { margin: 0 0 12px; }
.a-saved { margin-bottom: 14px; }
.l-header .a-badge { padding: 7px 10px; font-size: .74rem; }
.l-header .l-pill.a-signout { width: 160px; }
.a-tabs { width: min(1000px, 100%); margin: 30px 0 16px; grid-template-columns: repeat(6, 1fr); }
/* Flat on purpose (no .glass spotlight): repainting the light across big tables lagged. */
.a-panel {
  padding: 14px 16px 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(6, 12, 26, .92);
}
.a-panel .chip, .d-modal .a-table .chip { box-shadow: none; }
.a-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.a-input {
  padding: 9px 12px;
  border: 1px solid rgba(96, 150, 255, .22);
  border-radius: 10px;
  background: rgba(3, 8, 20, .7);
  color: #fff;
  font: 500 .92rem Inter, sans-serif;
  color-scheme: dark;
}
.a-input:focus { border-color: var(--blue); outline: none; }
.a-search { flex: 1 1 260px; }
.a-block { display: block; width: 100%; }
.v-btn.a-primary { margin-left: auto; border-color: rgba(106, 168, 255, .6); background: rgba(47, 123, 255, .3); }
.a-foot { margin: 8px 4px 4px; }
.a-more { display: flex; justify-content: center; padding: 10px 0; }
.a-actions-cell .v-btn { padding: 7px 10px; font-size: .8rem; }
.d-modal.a-xwide { width: min(940px, calc(100% - 32px)); }
.d-modal .a-table { min-width: 720px; }
.a-addrow { display: flex; gap: 10px; margin: 14px 0 6px; }
.a-addrow select { flex: 1; min-width: 0; }
.a-addrow .v-btn.a-primary { margin-left: 0; }
.a-check { margin: 0 0 14px; color: var(--label); font-size: .9rem; }
.a-gap { margin: 0 0 12px; }
.a-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.a-section { padding: 10px 6px 14px; }
#adminsSection { border-top: 1px solid rgba(96, 150, 255, .12); }
.a-form-block + .a-form-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(96, 150, 255, .14); }
.a-form-block .d-join-meta { margin: 0 0 10px; }
.a-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.a-section-head .v-btn { margin-top: 4px; }
.l-btn.a-btn { width: auto; padding: 11px 22px; font-size: 1rem; }
.a-email { text-transform: none; letter-spacing: .01em; }
.a-qr { display: flex; justify-content: center; margin: 0 0 14px; }
.a-qr canvas, .a-qr img { padding: 10px; border-radius: 12px; background: #fff; }
@media (max-width: 920px) { .a-settings { grid-template-columns: 1fr; } }
.a-empty { padding: 20px 8px; }
.a-table { min-width: 980px; }
.a-table td { vertical-align: middle; }
.l-table.a-table td:first-child, .l-table.a-table td:nth-child(2) { color: inherit; font: inherit; letter-spacing: normal; text-transform: none; }
.a-table small { display: block; margin-top: 2px; color: var(--muted); font-size: .8rem; }
.a-name { color: #fff; font: 700 1.1rem/1.2 "Barlow Condensed", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.a-actions-cell { display: flex; justify-content: flex-end; gap: 6px; }
.a-muted { color: var(--muted); font-size: .85rem; }

/* Sign-up forms fit one screen. */
.l-row-wide { grid-template-columns: 1fr 1.6fr; }
@media (min-width: 921px) and (max-height: 900px) {
  .l-title { font-size: clamp(2.6rem, 5vw, 4.6rem); }
  .l-lede { font-size: 1rem; }
  .l-perks { gap: 10px; margin-top: 22px; }
  .l-perk { padding: 12px 14px; }
}
@media (max-width: 560px) {
  .l-row-wide { grid-template-columns: 1fr; }
}
.d-modal input { color-scheme: dark; }
@media (max-width: 1100px) {
  .v-event-main { grid-template-columns: 64px 1fr repeat(2, auto); }
  .v-optional { display: none; }
  .v-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

[hidden] { display: none !important; }

@media (max-width: 920px) {
  .l-auth, .d-hero, .l-steps, .l-band { grid-template-columns: 1fr; }
  .l-host { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .l-brand { font-size: 1.35rem; }
  .l-brand img { width: 38px; height: 38px; }
  .l-header nav a:not(.l-pill), .d-team, .d-count { display: none; }
  .l-perks, .l-row, .l-row-3, .l-plan-grid { grid-template-columns: 1fr; }
  .d-stats { grid-template-columns: 1fr 1fr; }
  .d-event { grid-template-columns: 56px 1fr; }
  .d-action { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .glass { transition: none; }
  html:has(body.l-snap-page) { scroll-behavior: auto; }
}

/* ---- Legal Stuff, Venues, standings, results, console (2026-09-14) ------------------------ */
.l-header nav > a.l-nav-venues { width: 96px; }
.l-hero-link { display: inline-block; margin-top: 16px; font: 700 1.1rem/1.2 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.l-consent { align-items: flex-start; margin: 4px 0 8px; color: var(--label); font-size: .9rem; line-height: 1.45; }
.l-consent input { flex: none; margin-top: 3px; }
.l-consent a { text-decoration: underline; }

.l-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 10px 0; }
.l-footer-links a { font: 600 .95rem/1.6 "Barlow Condensed", sans-serif; letter-spacing: .12em; text-transform: uppercase; }

.l-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(47, 123, 255, .1);
  color: var(--ink);
  font: 600 .9rem Inter, sans-serif;
  cursor: var(--cur-point);
}
.l-back:hover { background: rgba(47, 123, 255, .22); }

/* Legal Stuff: one readable column in the page language (EN, ES, FR, HT, PT, TL, VI). English shows until the language is set. */
[data-lang-block]:not([data-lang-block="en"]) { display: none; }
html[lang="es"] [data-lang-block="es"], html[lang="fr"] [data-lang-block="fr"], html[lang="ht"] [data-lang-block="ht"],
html[lang="pt"] [data-lang-block="pt"], html[lang="tl"] [data-lang-block="tl"], html[lang="vi"] [data-lang-block="vi"] { display: block; }
html:is([lang="es"], [lang="fr"], [lang="ht"], [lang="pt"], [lang="tl"], [lang="vi"]) [data-lang-block="en"] { display: none; }
/* Vietnamese stacks tone marks above capitals (Ậ, Ố); the tight headline spacing would let a
   wrapped line's marks touch the line above. */
html[lang="vi"] :is(.l-title, .l-h2) { line-height: 1.14; }
.l-page { width: min(860px, calc(100% - 40px)); margin: 0 auto; padding: 32px 0 64px; }
.l-page > .l-h2 { margin-bottom: 10px; }
.lg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 22px; color: var(--muted); font-size: .9rem; }
.lg-doc { padding: clamp(20px, 3vw, 36px); border: 1px solid var(--line); border-radius: 18px; background: rgba(6, 12, 26, .92); color: #c5d3ec; line-height: 1.7; }
.lg-doc h2 { scroll-margin-top: 90px; margin: 34px 0 8px; color: #fff; font: 700 1.6rem/1.1 "Barlow Condensed", sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.lg-doc h3 { margin: 18px 0 4px; color: var(--label); font: 700 1.1rem/1.2 "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.lg-doc p, .lg-doc ul { margin: 0 0 12px; }
.lg-doc ul { padding-left: 22px; }
.lg-doc li { margin-bottom: 6px; }
.lg-doc strong { color: #fff; }
.lg-doc a { text-decoration: underline; }
.lg-toc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; margin: 0 0 22px; padding: 0 0 18px; border-bottom: 1px solid rgba(96, 150, 255, .14); }
.lg-toc a { font: 600 1rem/1.5 "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }

/* Venues page */
.pv-join { align-self: stretch; display: grid; align-content: center; gap: 4px; }
.pv-join .l-btn { margin-top: 8px; }
.pv-filter { display: grid; gap: 4px; min-width: 200px; }
.pv-filter .l-label { margin: 0; }
.pv-venue-join { margin-left: auto; }
.pv-more { margin: 12px 0 0; }
.pv-signin { text-align: center; }
.pv-standings { margin-top: 30px; }

/* Standings and results */
.s-section { margin: 0 0 46px; }
.s-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
.s-card { padding: 16px 18px; }
.s-card .l-table-wrap { padding: 0; }
.s-h3 { margin: 4px 0 10px; font: 700 1.3rem/1 "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.s-table { min-width: 0; }
.s-table th, .s-table td { padding: 11px 12px; }
.s-table tr.is-me td { background: rgba(47, 123, 255, .16); }
.r-list { margin: 0; padding: 0; list-style: none; }
.r-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(96, 150, 255, .1); }
.r-list li:last-child { border-bottom: 0; }
.r-list li > span:nth-child(2) { flex: 1; min-width: 0; }
.r-list strong { display: block; font: 700 1.1rem/1.2 "Barlow Condensed", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.r-list small { color: var(--muted); font-size: .82rem; }
.r-list .chip { min-width: 62px; justify-content: center; }
.r-list li.is-void strong { text-decoration: line-through; color: var(--muted); }
.r-panel { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(96, 150, 255, .14); }
.r-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1.4fr)) minmax(0, 1.2fr) minmax(0, .7fr) auto; gap: 10px; align-items: end; margin: 6px 0 4px; }
.r-form .l-field { margin: 0; }
.r-form .v-btn { height: 40px; }
.v-id-note { margin: 0 0 8px; color: #ffe7b3; font-size: .85rem; }
.a-results-title { margin: 22px 0 8px; }

/* League console: a Gridtop-style terminal */
.a-console { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #01040a; }
.a-console-out { height: 280px; margin: 0; padding: 12px 14px; overflow: auto; color: #b9f5d0; font: 500 .85rem/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.a-console-in { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-top: 1px solid rgba(96, 150, 255, .2); }
.a-console-in label { flex: none; color: var(--blue-hi); font: 600 .85rem ui-monospace, Consolas, monospace; }
.a-console-in input { flex: 1; min-width: 0; padding: 6px 0; border: 0; outline: none; background: transparent; color: #fff; font: 500 .9rem ui-monospace, Consolas, monospace; }

/* ---- Rules page ------------------------------------------------------------------------------ */
.r-rules { margin: 0; padding-left: 26px; }
.r-rules li { margin: 0 0 12px; padding-left: 4px; color: #dfe8f8; font-size: 1.05rem; line-height: 1.55; }
.r-rules li::marker { color: var(--blue-hi); font: 700 1.05rem "Barlow Condensed", sans-serif; }

/* ---- Officials portal ---------------------------------------------------------------------- */
.o-gate { width: min(480px, 100%); margin: 20px auto; }
.o-shifts { display: grid; gap: 14px; }
.o-shift { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 20px; border-radius: 18px; }
.o-shift-info { display: grid; gap: 3px; }
.o-shift-info small { color: var(--muted); font-size: .86rem; }
.o-shift-info .o-pay { color: var(--label); font-weight: 600; }
.o-shift-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.o-shift-actions .l-btn { width: auto; padding: 10px 18px; font-size: 1rem; }
.o-event-head { margin: 0 0 18px; }
.o-event-head .l-h2 { margin: .15em 0 .2em; }
.o-tabs { width: min(460px, 100%); margin-bottom: 18px; grid-template-columns: repeat(3, 1fr); }
.o-build { max-width: 560px; }
.o-build-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.o-build-form .l-field { margin: 0; }
.o-build-form .l-btn { width: auto; padding: 12px 22px; }
.o-champion { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 16px; padding: 16px 20px; border-color: rgba(34, 211, 127, .55); }
.o-champion strong { font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 2rem; }
.o-bracket { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 12px; }
.o-bracket-flat { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); overflow: visible; }
.o-round { display: grid; align-content: start; gap: 10px; }
.o-round-title { margin: 0 0 2px; color: var(--label); font: 700 1rem/1.2 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.o-game { display: grid; gap: 6px; width: 100%; padding: 10px 12px; border-radius: 14px; color: var(--ink); font: inherit; text-align: left; cursor: var(--cur-point); }
.o-game.is-bye { opacity: .55; cursor: var(--cur-default); }
.o-game-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); font-size: .76rem; }
.o-game-top .chip { padding: 4px 8px; font-size: .68rem; }
.o-side { display: flex; justify-content: space-between; gap: 10px; font: 700 1.05rem/1.2 "Barlow Condensed", sans-serif; letter-spacing: .03em; text-transform: uppercase; }
.o-side b { font-family: Anton, Impact, sans-serif; font-weight: 400; }
.o-side.is-won { color: #b9f5d0; }
.o-side em { color: var(--muted); font: italic 500 .82rem Inter, sans-serif; letter-spacing: 0; text-transform: none; }
.o-extra { margin-top: 18px; }

/* Start game, pairings, stats */
.o-start-now { display: grid; gap: 12px; margin: -12px 0 30px; }
.o-start { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 22px; border-color: rgba(255, 61, 87, .55); }
.o-start > div { display: grid; gap: 4px; }
.o-start strong { font: 700 1.6rem/1.1 "Barlow Condensed", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.o-start small { color: var(--muted); }
.o-start .chip { justify-self: start; }
.o-start-btn { width: auto; padding: 16px 30px; font-size: 1.35rem; }
.o-opens { color: var(--blue-hi) !important; }
.o-next { margin: 14px 0 4px; }
.o-pairing { margin-bottom: 18px; }
.o-pair-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.o-pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.o-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 10px; border: 1px solid rgba(96, 150, 255, .18); border-radius: 14px; }
.o-pair-label { grid-column: 1 / -1; color: var(--muted); font: 600 .72rem/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.o-slot { min-height: 48px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(47, 123, 255, .1); color: var(--ink); font: 700 1rem/1.15 "Barlow Condensed", sans-serif; letter-spacing: .03em; text-transform: uppercase; cursor: var(--cur-point); }
.o-slot.is-picked { border-color: var(--blue-hi); background: rgba(47, 123, 255, .38); box-shadow: 0 0 0 2px var(--blue-hi); }
.o-slot.is-bye { color: var(--muted); font-style: italic; background: transparent; border-style: dashed; }
.o-vs { color: var(--muted); font-size: .8rem; }
.o-stats { margin-top: 18px; }
.o-deposit-note { margin-top: 14px; }

/* Scorecard */
.d-modal.o-score-modal { width: min(860px, calc(100% - 32px)); }
.o-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.o-team { display: grid; gap: 10px; align-content: start; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(3, 8, 20, .55); }
.o-team-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.o-team-name strong { font: 700 1.3rem/1.1 "Barlow Condensed", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.o-team-name .chip { padding: 4px 8px; font-size: .68rem; }
.o-cups { display: flex; align-items: baseline; gap: 10px; }
.o-cups strong { font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 4.2rem; line-height: 1; color: #fff; }
.o-cups small { color: var(--muted); font-size: .85rem; }
.o-hints { min-height: 26px; }
.o-shoots { margin: 0; color: var(--label); font: 600 .72rem/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.o-moves { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.o-moves .o-cup { grid-column: 1 / -1; padding: 16px; font-size: 1.35rem; }
.o-moves .v-btn { padding: 12px 8px; white-space: normal; }
.o-banner { display: grid; gap: 10px; margin: 0 0 14px; padding: 14px; border: 1px solid rgba(255, 196, 61, .55); border-radius: 14px; background: rgba(60, 40, 0, .35); color: #ffe7b3; }
.o-ot { margin: 0 0 10px; color: var(--blue-hi); font: 700 1.1rem "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.o-help { margin: 12px 0; color: var(--muted); font-size: .82rem; }
.o-bar, .o-forfeits { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.o-forfeits .l-label { flex-basis: 100%; margin: 6px 0 0; }
.o-final { display: grid; gap: 4px; margin: 0 0 14px; padding: 16px; border: 1px solid rgba(34, 211, 127, .55); border-radius: 14px; }
.o-final strong { font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 2.2rem; }
.o-final small { color: var(--muted); }
.o-log { margin: 12px 0; padding: 0; list-style: none; font-size: .88rem; }
.o-log li { display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(96, 150, 255, .1); }
.o-log li.is-undone { color: var(--muted); text-decoration: line-through; }

/* Control panel: officials */
.a-subtabs { width: min(900px, 100%); margin: 4px 0 14px; grid-template-columns: repeat(6, 1fr); }
.a-app-text { white-space: pre-wrap; }
.a-week { margin-left: auto; font: 700 1.1rem "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.a-week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.a-day { display: grid; align-content: start; gap: 8px; min-height: 120px; padding: 8px; border: 1px solid rgba(96, 150, 255, .16); border-radius: 12px; }
.a-day.is-today { border-color: var(--blue); }
.a-day-title { margin: 0; color: var(--label); font: 700 .95rem "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.a-sched-event { display: grid; gap: 4px; padding: 8px; border-radius: 10px; background: rgba(47, 123, 255, .08); font-size: .82rem; }
.a-sched-event.is-cancelled { opacity: .6; }
.a-sched-event strong { font: 700 1rem/1.15 "Barlow Condensed", sans-serif; letter-spacing: .03em; text-transform: uppercase; }
.a-shift-chips { display: grid; gap: 4px; }
.a-shift-chip { display: grid; padding: 6px 8px; border: 1px solid; border-radius: 10px; font: 600 .8rem/1.25 Inter, sans-serif; text-align: left; cursor: var(--cur-point); }
.a-shift-chip small { font-weight: 500; opacity: .85; }
.a-assign { justify-self: start; padding: 6px 10px; font-size: .78rem; }
.a-form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.a-rules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 14px; }

@media (max-width: 1100px) {
  .a-week-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

@media (max-width: 920px) {
  .s-grid { grid-template-columns: minmax(0, 1fr); }
  .o-shift { grid-template-columns: 56px minmax(0, 1fr); }
  .o-shift-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .r-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r-form .v-btn { grid-column: 1 / -1; }
}

/* ---- Mobile ------------------------------------------------------------------------------ */
/* Desktop is untouched above 920px. Wrappers that only group things for phones stay out of the
   desktop grid (display: contents). */
.l-short { display: none; }
.d-menu .d-menu-signout, .d-menu .d-menu-access { display: none; }
.v-event-head, .v-metrics { display: contents; }

/* No hover on touch: no sticky hover lift. */
@media (hover: none) {
  .l-btn:hover { filter: none; transform: none; }
}

/* Touch: every control at least 44px tall. */
@media (pointer: coarse) {
  .v-btn, .v-check, .p-chip, .p-back, .p-link, button.chip, .d-cart, .d-icon, .l-reveal, .l-cookie-ok { min-height: 44px; }
  .l-lang-list button { min-height: 44px; }
  .d-add, .d-close { width: 44px; height: 44px; }
  .l-field input, .a-input { min-height: 48px; }
  .l-input input { min-height: 52px; }
  .l-reveal { min-width: 56px; }
  .l-check { min-height: 44px; }
  .l-check input { width: 20px; height: 20px; }
  .l-meta a { padding: 12px 0; }
  .d-menu button { min-height: 48px; }
  .d-remove { padding: 12px 0; }
  .a-actions-cell .v-btn { padding: 9px 12px; }
}

/* Phones and tablets: normal scrolling instead of scroll stops, and on the sign-in pages the
   card comes straight after the headline, with the perks below it. */
@media (max-width: 920px), (hover: none) {
  html:has(body.l-snap-page) { scroll-snap-type: none; }
}
@media (max-width: 920px) {
  .l-snap, .l-auth.l-snap { min-height: 0; }
  .l-auth { gap: 0; }
  .l-auth > section:not(.l-card) { display: contents; }
  .l-auth > .l-card { order: 1; margin-top: 24px; }
  .l-auth .l-perks { order: 2; margin-top: 24px; }
}

@media (max-width: 640px) {
  /* Header: one compact bar. Long labels switch to short ones, the team or venue name is
     hidden, and sign out moves into the settings menu. The accessibility button stays in the
     header on every page, at the same square size as the others. */
  .l-header { gap: 10px; padding: 10px 16px; }
  .l-brand { gap: 8px; min-width: 0; font-size: 1rem; white-space: nowrap; }
  .l-brand img { width: 34px; height: 34px; }
  .l-header nav { flex: none; gap: 8px; }
  .l-header nav a:not(.l-pill), .d-team, .l-header .l-pill[data-signout], .l-full, .l-header .a-badge { display: none; }
  .l-short { display: inline; }
  .l-header .l-pill, .l-header .l-pill.a-signout { width: auto; padding: 11px 12px; font-size: .92rem; letter-spacing: .08em; }
  .d-menu .d-menu-signout { display: flex; margin-top: 4px; border-top: 1px solid rgba(96, 150, 255, .14); border-radius: 0 0 10px 10px; }

  /* Page frame */
  .d-main { width: calc(100% - 32px); padding: 22px 0 56px; }
  .l-auth, .l-section { width: calc(100% - 32px); }
  .l-auth, .l-auth.l-snap { padding: 26px 0 36px; }
  .l-section { padding: 28px 0; }
  .l-title { overflow-wrap: anywhere; }
  .l-lede { font-size: 1rem; }
  .l-card { padding: 22px 18px; }
  .l-card h2 { font-size: 1.6rem; }
  .l-meta, .l-switch, .l-split, .d-head, .v-roster-head, .a-section-head { flex-wrap: wrap; }
  .l-step { padding: 20px; }
  .l-band { gap: 16px; padding: 22px 20px; }
  .l-faq { padding: 4px 18px; }
  .l-faq summary { font-size: 1.1rem; }
  .l-host { padding: 24px 20px; }
  .l-host .l-btn-inline { width: 100%; }
  .l-table { min-width: 0; }
  .l-table th, .l-table td { padding: 12px 8px; }

  /* Team dashboard */
  .d-hero { gap: 18px; margin-bottom: 30px; }
  .d-stats { gap: 10px; }
  .d-stat { padding: 14px 16px; }
  .d-stat strong { font-size: 2.1rem; }
  .d-next { grid-column: 1 / -1; }
  .d-next strong { font-size: 1.35rem; }
  .d-h2 { font-size: 1.6rem; }
  .d-venues { gap: 16px; margin-bottom: 40px; }
  .d-venue { padding: 18px 16px; }
  .d-venue-head { gap: 12px; }
  .d-venue-head h3 { font-size: 1.35rem; }
  .d-logo { width: 46px; height: 46px; font-size: 1.1rem; }
  .d-event { grid-template-columns: 52px minmax(0, 1fr); gap: 10px 14px; }
  .d-action { grid-column: 2; }
  .d-action .chip-open { flex: 1; justify-content: center; }
  .d-join-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }

  /* Overlays: modals and the cart become sheets from the bottom of the screen. */
  .d-modal, .d-modal.v-wide, .d-modal.a-xwide, .d-drawer {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: none;
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }
  .d-modal { max-height: 94vh; max-height: calc(100dvh - 20px); }
  .d-drawer { max-height: 85vh; max-height: 85dvh; }
  .d-modal > .l-kicker, .d-drawer > .l-kicker { padding-right: 50px; }
  .d-modal-title { font-size: 1.6rem; }
  .d-toast { width: max-content; max-width: calc(100% - 32px); text-align: center; }
  .a-input { font-size: 16px; }
  .v-kinds .l-plan strong { font-size: .95rem; letter-spacing: .03em; }

  /* Venue dashboard */
  .v-plan { flex-wrap: wrap; padding: 16px; }
  .v-plan .v-btn { flex: 1 1 100%; }
  .v-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .v-kpi strong { font-size: 1.8rem; }
  .v-chart-card { margin-bottom: 36px; padding: 18px 14px 14px; }
  .v-col-label { font-size: .64rem; line-height: 1.15; white-space: normal; }
  .v-tip { width: max-content; max-width: calc(100% - 16px); white-space: normal; }
  .v-tabs { width: 100%; }
  .v-tabs button { padding: 12px 4px; font-size: .85rem; letter-spacing: .05em; }
  .v-event { padding: 14px; }
  .v-event-main { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .v-event-head { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; }
  .v-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-top: 12px; border-top: 1px solid rgba(96, 150, 255, .1); }
  .v-metrics .v-optional { display: block; }
  .v-metric > span { font-size: .58rem; letter-spacing: .05em; line-height: 1.2; }
  .v-metric b { font-size: 1.15rem; }
  .v-actions { grid-column: auto; }
  .v-actions .v-btn { flex: 1 1 0; }

  /* Tables become stacked cards: each cell shows its column name (data-label, set by league.js). */
  .v-table-wrap { overflow: visible; }
  .l-table.v-table { min-width: 0; }
  .v-table thead { display: none; }
  .v-table, .v-table tbody, .v-table tr { display: block; }
  .v-table tr { margin-bottom: 10px; padding: 6px 14px; border: 1px solid rgba(96, 150, 255, .18); border-radius: 14px; background: rgba(3, 8, 20, .55); }
  .v-table tr:last-child { margin-bottom: 0; }
  .v-table td, .v-table tr:last-child td {
    position: relative;
    display: block;
    min-height: 2.4em;
    padding: 9px 0 9px 36%;
    border-bottom: 1px solid rgba(96, 150, 255, .08);
    overflow-wrap: anywhere;
  }
  .v-table td:last-child { border-bottom: 0; }
  .v-table td:empty { display: none; }
  .v-table td::before {
    content: attr(data-label);
    position: absolute;
    top: 12px;
    left: 0;
    width: calc(36% - 12px);
    color: var(--label);
    font: 600 .66rem/1.3 Inter, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .v-table td:not([data-label]) { padding-left: 0; }
  .v-table td:not([data-label])::before { display: none; }
  .a-actions-cell { flex-wrap: wrap; justify-content: flex-start; }

  /* Control panel */
  .a-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 22px 0 12px; }
  .a-tabs button { grid-column: span 2; padding: 12px 4px; font-size: .85rem; letter-spacing: .05em; }
  .l-page { width: calc(100% - 32px); padding: 22px 0 48px; }
  .lg-toc { grid-template-columns: minmax(0, 1fr); }
  .lg-doc h2 { font-size: 1.35rem; }
  .pv-filter { min-width: 0; width: 100%; }
  .s-card { padding: 12px; }
  .s-table th, .s-table td { padding: 10px 6px; font-size: .92rem; }
  .r-form { grid-template-columns: minmax(0, 1fr); }
  .a-console-out { height: 240px; font-size: .78rem; }
  .a-tabs button:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .a-subtabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .a-subtabs button { padding: 10px 4px; font-size: .82rem; letter-spacing: .04em; }
  .o-tabs { width: 100%; }
  .o-start { padding: 16px; }
  .o-start-btn { width: 100%; }
  .o-pairs { grid-template-columns: minmax(0, 1fr); }
  .o-build-form { grid-template-columns: minmax(0, 1fr); }
  .o-build-form .l-btn { width: 100%; }
  .o-bracket { grid-auto-columns: minmax(78%, 1fr); scroll-snap-type: x proximity; }
  .o-round { scroll-snap-align: start; }
  .o-teams { gap: 10px; }
  .o-team { padding: 10px; }
  .o-cups strong { font-size: 3.2rem; }
  .o-moves { grid-template-columns: minmax(0, 1fr); }
  .o-moves .o-cup { padding: 14px 6px; font-size: 1.15rem; }
  .o-moves .v-btn { padding: 10px 4px; font-size: .78rem; }
  .a-panel { padding: 12px 10px 8px; }
  .a-toolbar .a-input { flex: 1 1 140px; min-width: 0; }
  .a-toolbar .a-search { flex-basis: 100%; }
  .a-toolbar .v-btn.a-primary { flex: 1 1 100%; margin-left: 0; }
  .a-addrow { flex-wrap: wrap; }
  .a-addrow select { flex-basis: 100%; }
  .a-secret { flex-wrap: wrap; }
}

/* Narrow phones (360px class): a little more room in the header. */
@media (max-width: 380px) {
  .l-header { gap: 8px; padding-inline: 12px; }
  .l-header nav { gap: 6px; }
  .l-brand img { width: 30px; height: 30px; }
}

/* ---- Officials onboarding (2026-09-15) --------------------------------------------------------
   Steps along the top, one card per step. Signatures and documents sit on white "paper" so the ink
   reads the same as on the printed copy. */
.ob-view { width: min(900px, 100%); margin: 0 auto; }
.ob-head { margin: 6px 0 18px; }
.ob-head .l-lede { max-width: 640px; }
.ob-progress { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.ob-progress button {
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 8px 4px;
  border: 1px solid var(--line); border-radius: 10px; background: rgba(3, 8, 20, .55); color: var(--muted);
  font: 600 .78rem/1.15 Inter, sans-serif; text-align: center; cursor: var(--cur-point);
}
.ob-progress button:disabled { opacity: .5; cursor: var(--cur-off); }
.ob-progress .ob-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); color: var(--label); font-weight: 700; }
.ob-progress .is-done .ob-num { border-color: var(--green); background: rgba(34, 211, 127, .18); color: var(--green); }
.ob-progress .is-current { border-color: var(--blue); background: rgba(47, 123, 255, .2); color: #fff; }
.ob-progress .is-current .ob-num { border-color: var(--blue-hi); background: var(--blue); color: #fff; }
.ob-card { margin-bottom: 40px; }
.ob-stepof { margin: 0; color: var(--muted); font-size: .85rem; }
.ob-h3 { margin: 22px 0 10px; font: 700 1.15rem/1 "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--label); }
.ob-hint { margin: -2px 0 12px; }
.ob-check { align-items: flex-start; margin: 10px 0; color: var(--label); font-size: .92rem; line-height: 1.45; }
.ob-check input { flex: none; margin-top: 3px; }
.ob-fieldset { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 12px; padding: 0; border: 0; }
.ob-fieldset legend { width: 100%; margin-bottom: 6px; }
.ob-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; }
.ob-nav .l-btn { width: auto; min-width: 220px; }
.ob-details { margin: 6px 0 4px; color: var(--muted); font-size: .85rem; }
.ob-details summary { color: var(--blue-hi); cursor: var(--cur-point); }
.ob-details p { margin: 6px 0; }

/* Signature */
.ob-tabs { margin: 8px 0 14px; grid-template-columns: repeat(3, 1fr); }
.ob-paper { display: grid; place-items: center; min-height: 110px; border: 1px solid #c8d3e6; border-radius: 10px; background: #fff; overflow: hidden; }
.ob-paper img { max-width: 100%; max-height: 120px; }
.ob-paper canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: var(--cur-cross); }
.ob-styles { display: grid; gap: 10px; }
.ob-style { display: grid; grid-template-columns: 5fr 2fr; align-items: center; gap: 8px; padding: 8px; border: 2px solid transparent; border-radius: 12px; background: #fff; cursor: var(--cur-point); }
.ob-style.is-on { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47, 123, 255, .35); }
.ob-typed { width: 100%; height: auto; }
.ob-typed-ini { border-left: 1px solid #e2e8f0; }
.ob-draw-row { display: grid; grid-template-columns: 5fr 2fr; gap: 12px; }
.ob-draw { display: grid; gap: 6px; }
.ob-upload input { font-size: .85rem; color: var(--label); }
.ob-adopted { display: grid; grid-template-columns: 100%; gap: 6px; margin: 0 0 8px; }
.ob-paper-small { min-height: 70px; }
.ob-paper-initials { width: 120px; min-height: 60px; }

/* Documents being signed */
.ob-doc { margin: 8px 0 12px; padding: clamp(16px, 3vw, 28px); border-radius: 10px; background: #fff; color: #0f172a; font-size: .92rem; line-height: 1.55; }
.ob-doc h3 { margin: 0 0 8px; font: 700 1.15rem/1.3 Inter, sans-serif; }
.ob-doc h4 { margin: 16px 0 4px; font: 700 .98rem/1.3 Inter, sans-serif; }
.ob-doc p { margin: 6px 0; }
.ob-doc a { color: #0b57d0; }
.ob-doc-scroll { max-height: min(62vh, 640px); overflow-y: auto; }
.ob-doc-version { color: #475569; font-size: .8rem; }
.ob-doc-table { width: 100%; margin: 0 0 12px; border-collapse: collapse; }
.ob-doc-table th, .ob-doc-table td { padding: 7px 9px; border: 1px solid #cbd5e1; text-align: left; vertical-align: top; }
.ob-doc-table th { width: 40%; background: #f1f5f9; font-weight: 600; }
.ob-struck { text-decoration: line-through; color: #64748b; }
.ob-doc-section.needs-initials { padding-bottom: 6px; border-bottom: 1px dashed #cbd5e1; }
.ob-initial-line { display: flex; justify-content: flex-end; }
.ob-sign-line { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 22px; }
.ob-sign-caption { padding-top: 4px; border-top: 1px solid #0f172a; min-width: 260px; color: #334155; font-size: .85rem; }
.ob-slot {
  display: inline-grid; place-items: center; min-width: 120px; min-height: 48px; padding: 6px 14px;
  border: 2px dashed #f59e0b; border-radius: 8px; background: #fff7e0; color: #7c4a03; font: 700 .9rem Inter, sans-serif; cursor: var(--cur-point);
}
.ob-slot-signature { min-width: 260px; min-height: 70px; }
.ob-slot.is-signed { border: 0; background: transparent; cursor: default; }
.ob-slot.is-signed img { max-height: 64px; }
.ob-slot-initials.is-signed img { max-height: 40px; }
.ob-signed { margin: 0 0 12px; color: var(--green); font-weight: 600; }
.ob-signed a { color: var(--blue-hi); }

/* Review */
.ob-summary { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(3, 8, 20, .5); color: var(--label); }
.ob-summary p { margin: 4px 0; }
.ob-review { margin: 14px 0; padding: 0; list-style: none; }
.ob-review li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 8px 2px; border-bottom: 1px solid rgba(96, 150, 255, .12); color: var(--label); }
.ob-review li.is-done span { color: #fff; }
.ob-review small { color: var(--muted); }
.ob-review .p-link { width: auto; margin: 0; padding: 4px 8px; }
.ob-doclist { margin: 0; padding: 0; list-style: none; }
.ob-doclist li { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid rgba(96, 150, 255, .12); }
.ob-doclist a { color: var(--blue-hi); font-weight: 600; }
.ob-doclist small { color: var(--muted); }

/* Control panel: an official's onboarding record */
.a-ob-steps { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; padding: 0; list-style: none; color: var(--muted); font-size: .88rem; }
.a-ob-steps .is-done { color: var(--green); }
.a-ob-h { margin: 18px 0 6px; font: 700 1.05rem/1 "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--label); }
.l-table.a-ob-table { min-width: 0; }
.a-ob-table th { width: 34%; padding: 8px 10px; font-size: .78rem; }
.a-ob-table td { padding: 8px 10px; }
.a-ob-table small { display: block; margin-top: 4px; color: var(--muted); font-size: .78rem; }
.a-ob-docs { margin: 0; padding-left: 18px; }
.a-ob-docs li { margin: 4px 0; }
.a-ob-docs small { display: block; color: var(--muted); }
.a-tin-shown { padding: 2px 6px; border-radius: 6px; background: rgba(245, 158, 11, .2); color: #ffd27a; font: 600 1rem ui-monospace, Consolas, monospace; letter-spacing: .08em; }

@media (max-width: 760px) {
  .ob-progress { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .ob-progress .ob-label { display: none; }
  .ob-progress button { padding: 6px 2px; }
  .ob-draw-row, .ob-style { grid-template-columns: 1fr; }
  .ob-paper-initials, .ob-draw-ini .ob-paper { max-width: 220px; }
  .ob-nav { flex-direction: column-reverse; align-items: stretch; }
  .ob-nav .l-btn { min-width: 0; width: 100%; }
  .ob-review li { grid-template-columns: 1fr auto; }
  .ob-review small { display: none; }
}
@media (pointer: coarse) {
  .ob-slot { min-height: 52px; }
  .ob-progress button { min-height: 44px; }
}

/* ---- Apply to officiate (/official/apply.html) ------------------------------------------------ */
.ap-lede { max-width: 640px; margin-bottom: 18px; }
.ap-card { width: min(760px, 100%); margin-bottom: 40px; }
.ap-group { margin: 6px 0 14px; padding: 0; border: 0; }
.ap-group legend { margin-bottom: 8px; }
.ap-choices { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--label); }
.ap-other { margin-top: 10px; }
.ap-textarea { min-height: 120px; resize: vertical; font: 500 1rem/1.5 Inter, sans-serif; }
.ap-file { width: 100%; padding: 8px 0; color: var(--label); font-size: .9rem; cursor: var(--cur-point); }
.ap-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Officials are hired by Autocomputing until the league employs its own. */
.ap-parent { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
.ap-parent a { color: var(--blue-hi); }
@media (pointer: coarse) { .ap-choices .l-check { min-height: 44px; } }

/* ---- Venue packages (2026-09-15) --------------------------------------------------------------
   The picker in the venue portal, and the price table in the control panel. */
.v-pkgs { display: grid; gap: 10px; margin: 10px 0 14px; }
.v-pkg { display: grid; gap: 4px; padding: 14px 16px; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: rgba(3, 8, 20, .55); color: var(--label); cursor: var(--cur-point); }
.v-pkg strong { color: #fff; font: 700 1.25rem/1.1 "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.v-pkg small { color: var(--muted); font-size: .85rem; }
.v-pkg-price { font: 400 1.9rem/1 Anton, Impact, sans-serif; color: #fff; }
.v-pkg.is-on { border-color: var(--blue); background: rgba(47, 123, 255, .16); box-shadow: 0 0 0 3px rgba(47, 123, 255, .28); }
.v-pkg .chip { justify-self: start; margin-top: 4px; }
.a-pkg-table { min-width: 640px; }
.a-pkg-table td { padding: 8px 10px; vertical-align: middle; }
.a-pkg-table .a-input { width: 100%; }
.a-pkg-table .a-num { max-width: 110px; }
@media (max-width: 560px) { .v-pkg { padding: 12px; } }

/* ---- Two players, split payments (2026-09-18) ---------------------------------------------- */
.p-split { margin: 0 0 14px; padding: 12px 14px; border: 1px solid rgba(96, 150, 255, .2); border-radius: 12px; background: rgba(3, 8, 20, .55); color: var(--label); font-size: .92rem; align-items: flex-start; }
.p-split input { flex: none; margin-top: 3px; }
.p-split small { display: block; margin-top: 2px; color: var(--muted); font-size: .8rem; line-height: 1.4; }
.d-total-mine { margin-top: -6px; color: var(--blue-hi); }
.d-total-mine b { font-size: 1.4rem; text-shadow: none; }
.d-owed { margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid rgba(96, 150, 255, .2); }
.d-owed .l-kicker { margin-bottom: 4px; }
.d-owed .l-btn { margin-top: 10px; }
.d-half { display: block; margin-top: 4px; color: var(--blue-hi); font-size: .78rem; text-align: right; }

/* ---- Pre-launch gate (2026-09-18): html[data-gate="open"] once a dev email unlocked this browser ---- */
html:not([data-gate="open"]) .gate-open { display: none !important; }
html[data-gate="open"] .gate-closed { display: none !important; }