/* =====================================================================
   NDACS design system
   One stylesheet, no framework, no CDN. Custom properties drive both
   colour schemes; every component below is used by at least one screen.
   ===================================================================== */

/* --- Tokens --------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Aura is the system's design language — see AURA_DESIGN_LANGUAGE.md. These
     are its tokens, and they govern the whole application: back office, kiosk,
     door screens and attendee pages alike. An attendee page can opt into the
     Marquee skin instead, which restates every value it changes further down;
     nothing else in the product overrides these. */
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Aura names four semantic families and no saturated primary, because the app
     it came from had no primary button. This one does. The accent is taken from
     the lavender family — the periwinkle of §2.3's tinted controls — rather than
     invented, so the button belongs to the palette instead of sitting on top
     of it. White on it measures 7.60:1. */
  --brand: #5a4b82;
  --brand-strong: #4a3d6e;
  --brand-soft: #e4dcf4;
  --brand-contrast: #ffffff;

  --bg: #f4f5f7;
  --bg-elevated: #ffffff;
  --bg-sunken: #f8f9fa;
  --surface-line: #edeff1;

  --text: #15161a;
  /* Aura recommends #6e747c here. That clears 4.5:1 on a card but only 4.32:1
     on the page background, and this app puts secondary text on both. Three
     steps darker at the same hue and saturation clears 4.5:1 on card,
     background and field alike. */
  --text-muted: #6b7179;
  --text-subtle: #6b7179;
  --text-inverse: #ffffff;

  /* Every tinted surface has a matching ink, and the two are never mixed
     across families. */
  --ok: #5b6b3d;      --ok-soft: #dde8cd;
  --warn: #6b5a2f;    --warn-soft: #f6ecd8;
  --danger: #c0392b;  --danger-soft: #fbeaea;
  --info: #3f5b6b;    --info-soft: #d4e5ed;

  --radius-sm: 8px;    /* pill, chip */
  --radius: 13px;      /* field, small card */
  --radius-lg: 20px;   /* card */
  --radius-xl: 20px;   /* sheet — Aura tops out at 20, so xl is not larger */

  /* Three levels only. Depth comes from radius and tint more than from shadow. */
  --shadow-xs: 0 1px 6px rgb(0 0 0 / .05);
  --shadow-sm: 0 1px 6px rgb(0 0 0 / .05);
  --shadow: 0 4px 16px rgb(20 22 26 / .14), inset 0 1px 0 rgb(255 255 255 / .9);
  --shadow-lg: 0 10px 34px rgb(0 0 0 / .15);

  --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent);

  --sidebar-w: 250px;
  --header-h: 62px;
  /* Aura's house curve: fast out, gentle settle. */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #8098ff;
    --brand-strong: #9aacff;
    --brand-soft: #403873;
    --brand-contrast: #0f1113;

    --bg: #0f1113;
    --bg-elevated: #191c21;
    --bg-sunken: #23272d;
    --surface-line: #2b3037;

    --text: #e9ebee;
    --text-muted: #a3aab2;
    --text-subtle: #a3aab2;

    --ok: #c3e691;      --ok-soft: #2c4a1e;
    --warn: #e6d091;    --warn-soft: #4a3a1e;
    --danger: #ef6f63;  --danger-soft: #3a201e;
    --info: #a6d8ee;    --info-soft: #173d54;

    /* Deepen rather than lighten. */
    --shadow-xs: 0 1px 6px rgb(0 0 0 / .5);
    --shadow-sm: 0 1px 6px rgb(0 0 0 / .5);
    --shadow: 0 8px 28px -6px rgb(0 0 0 / .75);
    --shadow-lg: 0 12px 40px -6px rgb(0 0 0 / .8);
  }
}

[data-theme="dark"] {
  --brand: #8098ff; --brand-strong: #9aacff; --brand-soft: #403873; --brand-contrast: #0f1113;
  --bg: #0f1113; --bg-elevated: #191c21; --bg-sunken: #23272d; --surface-line: #2b3037;
  --text: #e9ebee; --text-muted: #a3aab2; --text-subtle: #a3aab2;
  --ok: #c3e691; --ok-soft: #2c4a1e; --warn: #e6d091; --warn-soft: #4a3a1e;
  --danger: #ef6f63; --danger-soft: #3a201e; --info: #a6d8ee; --info-soft: #173d54;
  --shadow-xs: 0 1px 6px rgb(0 0 0 / .5);
  --shadow-sm: 0 1px 6px rgb(0 0 0 / .5);
  --shadow: 0 8px 28px -6px rgb(0 0 0 / .75);
  --shadow-lg: 0 12px 40px -6px rgb(0 0 0 / .8);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.25; font-weight: 650; letter-spacing: -0.015em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.22rem; }
h3 { font-size: 1.02rem; }
small { font-size: 0.82em; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

::selection { background: color-mix(in srgb, var(--brand) 26%, transparent); }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--surface-line) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--surface-line); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }

/* --- Inline icons ---------------------------------------------------- */
/* Icons carry no intrinsic size, so give every one a sane default and let
   components override it (`.btn svg`, `.nav-item svg`, …). */
.icon { width: 1.15em; height: 1.15em; flex: none; }

/* --- Layout --------------------------------------------------------- */
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
  background: var(--bg-elevated);
  border-right: 1px solid var(--surface-line);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 16px; }
.brand__mark {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
  color: var(--brand-contrast);
  background: linear-gradient(140deg, var(--brand), var(--brand-strong));
  box-shadow: var(--shadow-xs);
}
.brand__name { font-weight: 650; letter-spacing: -0.02em; }
.brand__sub { font-size: 11px; color: var(--text-subtle); letter-spacing: .06em; text-transform: uppercase; }

.nav-label {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-subtle); padding: 14px 10px 6px; font-weight: 600;
}

.nav-item {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--text-muted); font-weight: 500; font-size: 14px;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.nav-item:hover { background: var(--bg-sunken); color: var(--text); text-decoration: none; }
.nav-item[aria-current="page"] { background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; }
.nav-item .icon { width: 17px; height: 17px; opacity: .85; }
.nav-item .count { margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--text-subtle); }

.sidebar__footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--surface-line); }

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  height: var(--header-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 26px;
  border-bottom: 1px solid var(--surface-line);
  background: color-mix(in srgb, var(--bg-elevated) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  position: sticky; top: 0; z-index: 30;
}
.topbar__title { font-weight: 620; letter-spacing: -0.015em; font-size: 15px; }
.topbar__spacer { margin-left: auto; }

.content { padding: 26px; display: flex; flex-direction: column; gap: 20px; max-width: 1400px; width: 100%; }
/* A page that shows a live preview of a full-width site has no business being
   held to a reading width — the cap only buys empty screen on the right. */
.content--wide { max-width: none; }

.page-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.page-head__text { min-width: 0; flex: 1 1 320px; }
.page-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.page-head p { color: var(--text-muted); margin-top: 4px; }

.menu-toggle { display: none; }

@media (max-width: 960px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: 82vw; max-width: 300px; z-index: 60;
    transform: translateX(-102%); transition: transform .28s var(--ease);
    box-shadow: var(--shadow-lg);
  }
  body.nav-open .sidebar { transform: none; }
  body.nav-open::after {
    content: ""; position: fixed; inset: 0; z-index: 50;
    background: rgb(15 23 42 / .45); backdrop-filter: blur(2px);
  }
  .menu-toggle { display: inline-flex; }
  .content { padding: 18px 16px; }
  .topbar { padding: 0 16px; }
}

/* --- Cards & surfaces ----------------------------------------------- */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card__head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 18px; border-bottom: 1px solid var(--surface-line);
}
.card__head h2, .card__head h3 { margin-right: auto; }
.card__body { padding: 18px; }
.card__body--tight { padding: 12px 18px; }
.card__foot {
  padding: 13px 18px; border-top: 1px solid var(--surface-line);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--bg-sunken); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.grid { display: grid; gap: 16px; }
.grid--stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }
.grid--split { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); align-items: start; }
/* Builder on the left, live preview on the right — the preview gets the larger
   share, because it is a real page and needs a realistic width to be worth
   looking at. */
.grid--builder { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); align-items: start; }
@media (max-width: 1080px) { .grid--builder { grid-template-columns: 1fr; } }
.grid--insights { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-items: start; }
@media (max-width: 1080px) { .grid--split { grid-template-columns: 1fr; } }

.stat {
  background: var(--bg-elevated); border: 1px solid var(--surface-line);
  border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column; gap: 4px;
}
.stat__label { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-subtle); }
.stat__value { font-size: 1.85rem; font-weight: 680; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat__meta { font-size: 12.5px; color: var(--text-muted); }
.stat--accent { background: linear-gradient(150deg, var(--brand-soft), var(--bg-elevated) 70%); }

/* --- Buttons -------------------------------------------------------- */
.btn {
  --btn-bg: var(--bg-elevated);
  --btn-fg: var(--text);
  --btn-border: var(--surface-line);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-fg);
  font-size: 14px; font-weight: 560; line-height: 1.2; cursor: pointer;
  transition: transform .12s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease);
  box-shadow: var(--shadow-xs); text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.btn .icon { width: 16px; height: 16px; }

.btn--primary { --btn-bg: var(--brand); --btn-fg: var(--brand-contrast); --btn-border: transparent; }
.btn--primary:hover { --btn-bg: var(--brand-strong); }
.btn--danger { --btn-bg: var(--danger); --btn-fg: #fff; --btn-border: transparent; }
.btn--ghost { --btn-bg: transparent; --btn-border: transparent; box-shadow: none; color: var(--text-muted); }
.btn--ghost:hover { --btn-bg: var(--bg-sunken); color: var(--text); }
.btn--subtle { --btn-bg: var(--bg-sunken); --btn-border: transparent; }
.btn--sm { padding: 5px 10px; font-size: 13px; border-radius: 8px; }
.btn--lg { padding: 12px 22px; font-size: 15.5px; border-radius: 12px; }
.btn--block { width: 100%; }
.btn--icon { padding: 7px; }

.btn-group { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* --- Forms ---------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font-size: 13px; font-weight: 600; color: var(--text); display: flex; gap: 6px; align-items: center; }
.field__hint { font-size: 12.5px; color: var(--text-subtle); }
.field__error { font-size: 12.5px; color: var(--danger); font-weight: 550; }

.input, .select, .textarea {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--surface-line); border-radius: 10px;
  background: var(--bg-elevated); color: var(--text);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
  font-size: 14.5px;
}
.input:hover, .select:hover, .textarea:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--surface-line)); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5' stroke='%2364748b' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 18px;
  padding-right: 32px;
}
.input--color { padding: 4px; height: 40px; cursor: pointer; }

.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.form-grid--wide { grid-template-columns: 1fr; }
.col-span-2 { grid-column: span 2; }
@media (max-width: 640px) { .col-span-2 { grid-column: auto; } }

.checkbox, .radio {
  display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px;
  border: 1px solid var(--surface-line); border-radius: 10px; cursor: pointer;
  background: var(--bg-elevated); transition: border-color .16s var(--ease), background .16s var(--ease);
}
.checkbox:hover, .radio:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--surface-line)); background: var(--brand-soft); }
.checkbox input, .radio input { margin-top: 2px; accent-color: var(--brand); width: 16px; height: 16px; flex: none; }
.checkbox__text { font-size: 14px; }
.checkbox__text small { display: block; color: var(--text-subtle); }
.checkbox--inline { border: 0; padding: 0; background: none; }
.checkbox--inline:hover { background: none; }

.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14px; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch__track {
  width: 38px; height: 22px; border-radius: 99px; background: var(--surface-line);
  position: relative; transition: background .2s var(--ease); flex: none;
}
.switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-xs);
  transition: transform .22s var(--ease);
}
.switch input:checked + .switch__track { background: var(--brand); }
.switch input:checked + .switch__track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch__track { box-shadow: var(--ring); }

.toolbar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
}
.toolbar .field { flex: 1 1 170px; }
.toolbar .field--grow { flex: 3 1 260px; }

/* --- Tables --------------------------------------------------------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.table th {
  text-align: left; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-subtle); font-weight: 650; padding: 10px 14px;
  background: var(--bg-sunken); border-bottom: 1px solid var(--surface-line);
  position: sticky; top: 0; z-index: 1; white-space: nowrap;
}
.table td { padding: 11px 14px; border-bottom: 1px solid var(--surface-line); vertical-align: middle; }
.table tbody tr { transition: background .12s var(--ease); }
.table tbody tr:hover { background: var(--bg-sunken); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .nowrap { white-space: nowrap; }
.table a.row-link { color: inherit; font-weight: 570; }
.table a.row-link:hover { color: var(--brand); }

.person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 12px; font-weight: 640;
  background: var(--brand-soft); color: var(--brand-strong);
}
.person__meta { min-width: 0; }
.person__name { font-weight: 570; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person__sub { font-size: 12.5px; color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Badges, pills, chips ------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 99px;
  font-size: 12px; font-weight: 600; line-height: 1.7;
  background: var(--bg-sunken); color: var(--text-muted); white-space: nowrap;
}
.badge--ok { background: var(--ok-soft); color: var(--ok); }
.badge--warn { background: var(--warn-soft); color: var(--warn); }
.badge--danger { background: var(--danger-soft); color: var(--danger); }
.badge--info { background: var(--info-soft); color: var(--info); }
.badge--brand { background: var(--brand-soft); color: var(--brand-strong); }
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 99px; font-size: 13px; font-weight: 550;
  border: 1px solid var(--surface-line); background: var(--bg-elevated); color: var(--text-muted);
  cursor: pointer; transition: all .15s var(--ease);
}
.chip:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.chip[aria-pressed="true"], .chip--active { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); }

.mono { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: -0.01em; }
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.tabular { font-variant-numeric: tabular-nums; }

/* --- Alerts --------------------------------------------------------- */
.alert {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 15px; border-radius: var(--radius);
  border: 1px solid transparent; font-size: 14px;
}
.alert .icon { width: 18px; height: 18px; margin-top: 1px; }
.alert--success { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 22%, transparent); }
.alert--error   { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
.alert--warning { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 22%, transparent); }
.alert--info    { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 22%, transparent); }
.alert strong { font-weight: 650; }

.flash-stack { position: fixed; top: 14px; right: 14px; z-index: 200; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, 92vw); }
.flash-stack .alert { box-shadow: var(--shadow); background-color: var(--bg-elevated); animation: slide-in .32s var(--ease); }
@keyframes slide-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

/* --- Empty state ---------------------------------------------------- */
.empty { text-align: center; padding: 46px 20px; color: var(--text-muted); }
.empty__icon {
  width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 14px;
  display: grid; place-items: center; background: var(--bg-sunken); color: var(--text-subtle);
}
.empty__icon .icon { width: 22px; height: 22px; }
.empty h3 { color: var(--text); margin-bottom: 5px; }

/* --- Tabs ----------------------------------------------------------- */
.tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--surface-line); overflow-x: auto; }
.tab {
  padding: 9px 14px; font-size: 14px; font-weight: 560; color: var(--text-muted);
  border-bottom: 2px solid transparent; cursor: pointer; background: none; border-top: 0; border-left: 0; border-right: 0;
  white-space: nowrap; transition: color .15s var(--ease), border-color .15s var(--ease);
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }
.tab-panel { display: flex; flex-direction: column; gap: 16px; }
.tab-panel[hidden] { display: none; }

/* --- Pagination ----------------------------------------------------- */
.pagination { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 34px; height: 34px; padding: 0 9px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 550; color: var(--text-muted);
  border: 1px solid var(--surface-line); background: var(--bg-elevated);
}
.pagination a:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.pagination [aria-current="page"] { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); }
.pagination .gap { border: 0; background: none; }

/* --- Progress / meters ---------------------------------------------- */
.meter { height: 7px; border-radius: 99px; background: var(--bg-sunken); overflow: hidden; }
.meter__fill { height: 100%; border-radius: 99px; background: var(--brand); transition: width .5s var(--ease); }
.meter__fill--ok { background: var(--ok); }
.meter__fill--warn { background: var(--warn); }

.sparkline { display: flex; align-items: flex-end; gap: 3px; height: 60px; }
.sparkline__bar { max-width: 42px; }
.sparkline__bar { flex: 1; min-width: 3px; border-radius: 3px 3px 0 0; background: var(--brand); opacity: .82; }
.sparkline__bar:hover { opacity: 1; }

/* --- Modal / drawer -------------------------------------------------- */
dialog {
  border: 0; padding: 0; border-radius: var(--radius-xl);
  background: var(--bg-elevated); color: var(--text);
  box-shadow: var(--shadow-lg); width: min(620px, 94vw); max-height: 90vh;
}
dialog::backdrop { background: rgb(15 23 42 / .5); backdrop-filter: blur(3px); }
dialog[open] { animation: pop .24s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.dialog__head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--surface-line); }
.dialog__head h2 { margin-right: auto; }
.dialog__body { padding: 18px 20px; overflow-y: auto; max-height: 62vh; display: flex; flex-direction: column; gap: 14px; }
.dialog__foot { padding: 14px 20px; border-top: 1px solid var(--surface-line); display: flex; gap: 9px; justify-content: flex-end; background: var(--bg-sunken); }
dialog.dialog--wide { width: min(900px, 96vw); }

/* --- Form builder ---------------------------------------------------- */
.builder-list { display: flex; flex-direction: column; gap: 9px; }
.builder-item {
  border: 1px solid var(--surface-line); border-radius: var(--radius);
  background: var(--bg-elevated); transition: box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.builder-item:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--surface-line)); }
.builder-item.is-dragging { opacity: .45; }
.builder-item.is-over { border-color: var(--brand); box-shadow: var(--ring); }
.builder-item__head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.builder-item__handle { cursor: grab; color: var(--text-subtle); padding: 3px; touch-action: none; display: inline-flex; }
.builder-item__handle .icon { width: 18px; height: 18px; }
.builder-item__handle:active { cursor: grabbing; }
.builder-item__title { font-weight: 570; margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.builder-item__body { padding: 0 12px 12px; display: none; }
.builder-item[data-open="1"] .builder-item__body { display: block; }
.builder-item--disabled .builder-item__title { color: var(--text-subtle); text-decoration: line-through; }

/* --- Public registration -------------------------------------------- */
/* The background is on the page itself, so it runs the full height instead of
   stopping in a line partway down. */
.public-shell {
  min-height: 100vh; display: flex; flex-direction: column;
  background-color: #0f172a;
}
/* A photograph stays put while the page scrolls, which reads as a backdrop
   rather than a banner sliding away. Touch browsers handle fixed attachment
   badly, so they scroll it normally. */
.public-shell--image { background-attachment: fixed; }
@media (hover: none) {
  .public-shell--image { background-attachment: scroll; }
}
/* No decorative overlay of its own: anything painted here is clipped at the
   header's bottom edge and shows up as a line across the page. The soft light
   at the top comes from the shell, which spans the whole document. */
.public-hero {
  position: relative; padding: 54px 20px 92px;
  /* Chosen against the backdrop the organiser picked, not assumed to be white. */
  color: var(--on-backdrop, #fff);
}
.public-shell::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 90% 55% at 18% -10%, rgb(255 255 255 / .12), transparent 60%),
              radial-gradient(ellipse 70% 45% at 92% -14%, rgb(255 255 255 / .08), transparent 60%);
}
.public-hero__inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
/* Capped in both directions: a wide banner-shaped logo used to stretch the
   full width of the header and read as a slab rather than a mark. */
.public-hero__logo {
  max-height: 64px; max-width: min(100%, 420px); width: auto; height: auto;
  object-fit: contain; object-position: left center;
  align-self: flex-start; margin-bottom: 6px; border-radius: 8px;
}
.public-hero h1 { font-size: clamp(1.7rem, 4.2vw, 2.6rem); letter-spacing: -0.03em; }
.public-hero__meta { display: flex; gap: 8px 20px; flex-wrap: wrap; font-size: 14.5px; opacity: .92; }
.public-hero__meta span { display: inline-flex; align-items: center; gap: 7px; }
.public-hero__meta .icon { width: 17px; height: 17px; opacity: .85; }

.public-body { position: relative; z-index: 2; flex: 1; padding: 0 16px 56px; margin-top: -58px; }
.public-card {
  max-width: 820px; margin: 0 auto; background: var(--form-bg, var(--bg-elevated));
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  border: 1px solid var(--surface-line); overflow: hidden;
}
.public-card__body { padding: clamp(20px, 4vw, 34px); display: flex; flex-direction: column; gap: 18px; }
/* Sits over the backdrop now, so it takes its colour from that rather than
   from the page theme. */
.public-foot {
  position: relative; z-index: 2; text-align: center; padding: 24px 20px 28px;
  color: var(--on-backdrop, #fff); opacity: .62; font-size: 13px;
}

.fieldset { border: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.fieldset > legend { font-size: 12px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--text-subtle); padding: 0 0 4px; }
.choice-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.req { color: var(--danger); font-weight: 700; }

.ticket-preview {
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center;
  padding: 20px; border-radius: var(--radius-lg); background: var(--bg-sunken); border: 1px solid var(--surface-line);
}
.ticket-preview svg, .ticket-preview img { width: 156px; height: 156px; border-radius: 10px; background: #fff; padding: 6px; }
@media (max-width: 560px) { .ticket-preview { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

/* --- Kiosk ----------------------------------------------------------- */
.kiosk {
  min-height: 100vh; display: flex; flex-direction: column;
  background: linear-gradient(160deg, #0b1120, #111f38 55%, #0b1120);
  color: #e8edf7; padding: 24px; gap: 20px;
}
.kiosk__top { display: flex; align-items: center; gap: 14px; }
.kiosk__logo { max-height: 46px; max-width: 200px; object-fit: contain; }
/* On the welcome screen the logo is the point, not a footnote. */
.kiosk-card__logo {
  max-height: 96px; max-width: min(320px, 70%); object-fit: contain;
  margin: 0 auto 18px; display: block;
}
.kiosk__event { font-weight: 650; letter-spacing: -0.02em; }
.kiosk__station { margin-left: auto; font-size: 13px; opacity: .72; }
.kiosk__main { flex: 1; display: grid; place-items: center; }
.kiosk__panel {
  width: min(640px, 100%); background: rgb(255 255 255 / .06);
  border: 1px solid rgb(255 255 255 / .12); border-radius: var(--radius-xl);
  padding: clamp(24px, 5vw, 44px); backdrop-filter: blur(14px);
  display: flex; flex-direction: column; gap: 18px; text-align: center;
}
.kiosk__panel h1 { font-size: clamp(1.5rem, 4vw, 2.2rem); }
.kiosk__panel p { opacity: .8; }
.kiosk-actions { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.kiosk-btn {
  padding: 22px 18px; border-radius: var(--radius-lg); border: 1px solid rgb(255 255 255 / .16);
  background: rgb(255 255 255 / .08); color: #fff; font-size: 17px; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer;
  transition: transform .16s var(--ease), background .16s var(--ease);
}
.kiosk-btn:hover { background: rgb(255 255 255 / .16); transform: translateY(-2px); text-decoration: none; }
.kiosk-btn .icon { width: 32px; height: 32px; }
.kiosk__input {
  font-size: 20px; padding: 16px 18px; text-align: center; border-radius: 14px;
  background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .2); color: #fff; width: 100%;
}
.kiosk__input::placeholder { color: rgb(255 255 255 / .45); }
.kiosk__timer { text-align: center; font-size: 13px; opacity: .55; }
.kiosk__result { border-radius: var(--radius-lg); padding: 20px; font-size: 18px; }
.kiosk__result--ok { background: rgb(16 185 129 / .18); border: 1px solid rgb(16 185 129 / .4); }
.kiosk__result--repeat { background: rgb(251 191 36 / .16); border: 1px solid rgb(251 191 36 / .4); }
.kiosk__result--error { background: rgb(244 63 94 / .16); border: 1px solid rgb(244 63 94 / .4); }
#kiosk-video { width: 100%; max-width: 460px; border-radius: var(--radius-lg); background: #000; aspect-ratio: 4/3; object-fit: cover; margin: 0 auto; }
.scan-frame { position: relative; }
.scan-frame::after {
  content: ""; position: absolute; inset: 12%; border-radius: 18px;
  border: 3px solid rgb(255 255 255 / .55); box-shadow: 0 0 0 9999px rgb(0 0 0 / .18);
  pointer-events: none;
}
.suggest-list { display: flex; flex-direction: column; gap: 8px; text-align: left; max-height: 46vh; overflow-y: auto; }
.suggest-item {
  padding: 13px 15px; border-radius: 12px; background: rgb(255 255 255 / .07);
  border: 1px solid rgb(255 255 255 / .12); cursor: pointer; display: flex; gap: 12px; align-items: center;
}
.suggest-item:hover { background: rgb(255 255 255 / .15); }
.suggest-item__name { font-weight: 600; }
.suggest-item__meta { font-size: 13px; opacity: .7; }

/* --- Badge print ----------------------------------------------------- */
.badge-sheet {
  position: relative; overflow: hidden;
  width: var(--badge-w, 70mm); height: var(--badge-h, 60mm);
  /* Literal, not tokens: this is ink on card stock. A badge printed from a
     phone in dark mode must not come out white on black. */
  background: #fff; color: #0f172a; margin: 0 auto;
  box-shadow: var(--shadow); border-radius: 4px;
}
/* Every element is placed by the layout, so the stylesheet only says how each
   one behaves inside the box it was given. */
.badge-el {
  position: absolute; display: flex; align-items: center;
  overflow: hidden; line-height: 1.12;
}
.badge-el > span { display: block; max-width: 100%; overflow-wrap: anywhere; }
/* display:flex above would otherwise beat the browser's own [hidden] rule. */
.badge-el[hidden] { display: none !important; }
.badge-el--name { font-weight: 700; }
.badge-el--role { color: #334155; }
.badge-el--org  { color: #475569; }
.badge-el--ref  { color: #64748b; letter-spacing: .04em; }
.badge-el--strip {
  justify-content: center; color: #fff; font-weight: 700; letter-spacing: .08em;
  font-size: calc(var(--badge-h, 60mm) * .048);
}
.badge-el--qr { justify-content: center; }
.badge-el--qr svg { width: 100%; height: 100%; object-fit: contain; display: block; }

.badge-stage { position: relative; display: grid; place-items: center; padding: 30px 0; }

/* --- Badge settings + layout editor ---------------------------------- */
.badge-settings {
  display: grid; gap: 26px;
  grid-template-columns: minmax(240px, 1fr) minmax(320px, 420px);
  align-items: start;
}
/* minmax(0, 1fr), not 1fr: a bare 1fr floors the track at its content's
   min-content width, and the long labels in here pushed it past a phone
   screen, giving the whole page a sideways scrollbar. */
@media (max-width: 900px) { .badge-settings { grid-template-columns: minmax(0, 1fr); } }

.badge-editor { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 16px; }
.badge-editor__bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.badge-editor__presets { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.badge-editor__stage {
  display: grid; place-items: center; padding: 18px;
  background: var(--bg-sunken); border: 1px dashed var(--surface-line);
  border-radius: var(--radius); overflow: auto;
}
/* Shown larger than life so elements are comfortable to grab. Zoom scales the
   used box as well as the paint, so the editor's fraction maths still works
   from getBoundingClientRect. */
.badge-editor__stage .badge-sheet { zoom: 1.6; }
/* Dotted outlines only while arranging — the badge itself stays clean. */
.badge-el--draggable { cursor: grab; outline: 1px dashed rgb(37 99 235 / .35); outline-offset: 1px; }
/* Elements painted later sit on top, so without this you cannot grab whatever
   is underneath an overlap — which is exactly when you need to. */
.badge-el--draggable:hover, .badge-el--draggable:focus-within { z-index: 5; }
.badge-el--draggable:hover { outline-color: var(--brand); background: rgb(37 99 235 / .06); }
.badge-el--draggable:focus-visible { outline: 2px solid var(--brand); }
.badge-sheet--editing .badge-el--draggable { cursor: grabbing; }
.badge-el__handle {
  /* Inside the box, because .badge-el clips its overflow — a handle hanging
     off the corner is half invisible and half unclickable. */
  position: absolute; right: 1px; bottom: 1px; width: 12px; height: 12px;
  border-radius: 3px; background: var(--brand); border: 2px solid #fff;
  cursor: nwse-resize; opacity: .45; transition: opacity .12s var(--ease);
  z-index: 20;   /* always grabbable, even under another element */
}
/* Always visible, just faint — a handle you have to discover by hovering is a
   handle most people never find. */
.badge-el--draggable:hover .badge-el__handle,
.badge-el--draggable:focus-within .badge-el__handle { opacity: 1; }
@media (max-width: 900px) { .badge-editor { position: static; } }



@page { size: var(--badge-w, 70mm) var(--badge-h, 60mm); margin: 0; }

/* --- Rooms and zone access ------------------------------------------- */
.room {
  border: 1px solid var(--surface-line); border-radius: var(--radius-lg);
  background: var(--bg-elevated); overflow: hidden;
}
.room[open] { border-color: color-mix(in srgb, var(--room, var(--brand)) 45%, var(--surface-line)); }
.room__summary {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  cursor: pointer; list-style: none; user-select: none;
}
.room__summary::-webkit-details-marker { display: none; }
.room__summary:hover { background: var(--bg-sunken); }
.room__swatch {
  width: 10px; height: 34px; border-radius: 999px; flex: none;
  background: var(--room, var(--brand));
}
.room__title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.room__title small { font-size: 11px; letter-spacing: .04em; }
.room__facts { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.room__chevron { flex: none; transition: transform .16s var(--ease); opacity: .5; }
.room[open] .room__chevron { transform: rotate(90deg); }
.room__body {
  border-top: 1px solid var(--surface-line); padding: 18px 16px 16px;
  display: flex; flex-direction: column; gap: 18px;
}
.room__rules { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.room__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.room__actions .spacer { flex: 1; }
.room-grants { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.room-grant {
  display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px;
  padding: 8px 10px; border: 1px solid var(--surface-line); border-radius: 10px; background: var(--bg-sunken);
}
.room-grant:hover { border-color: var(--brand); }
.room-grant__dot { width: 10px; height: 10px; border-radius: 999px; flex: none; }
.room-grant:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.input--colour { padding: 4px; height: 40px; cursor: pointer; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 999px; margin-right: 6px; vertical-align: baseline; }

/* --- Room door screen ------------------------------------------------- */
/* Read at arm's length by someone holding a door open: one colour, one word. */
.door { width: min(760px, 100%); }
.door__head { display: flex; align-items: center; gap: 18px; text-align: left; }
.door__head h1 { margin: 0; }
.door__count {
  margin-left: auto; text-align: center; padding: 10px 18px; border-radius: 14px;
  background: rgb(255 255 255 / .09); border: 1px solid rgb(255 255 255 / .16); flex: none;
}
.door__count--full { background: rgb(244 63 94 / .22); border-color: rgb(244 63 94 / .5); }
.door__count-value { display: block; font-size: 30px; font-weight: 700; line-height: 1; }
.door__count-label { font-size: 12px; opacity: .7; }
.door__direction { display: flex; gap: 8px; justify-content: center; }
.door__dir {
  flex: 1; max-width: 220px; padding: 12px 16px; border-radius: 12px; cursor: pointer;
  background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .16);
  color: #fff; font-size: 16px; font-weight: 600;
}
.door__dir.is-on { background: rgb(96 165 250 / .3); border-color: rgb(96 165 250 / .6); }
.door--out .door__dir.is-on { background: rgb(251 191 36 / .28); border-color: rgb(251 191 36 / .6); }
.scan-frame--door #kiosk-video { max-width: 100%; aspect-ratio: 16/10; }
/* The verdict covers the camera entirely — nobody should have to work out
   which half of the screen answers the question. */
.door__verdict {
  position: absolute; inset: 0; border-radius: var(--radius-lg); z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 20px; text-align: center; color: #fff;
  animation: door-in .18s var(--ease);
}
.door__verdict--ok { background: #047857; }
.door__verdict--no { background: #9f1239; }
.door__mark { font-size: clamp(40px, 9vw, 68px); line-height: 1; font-weight: 700; }
.door__headline { font-size: clamp(20px, 4vw, 30px); letter-spacing: -0.02em; }
.door__who { font-size: clamp(18px, 3.4vw, 26px); font-weight: 650; }
.door__meta { font-size: 15px; opacity: .85; }
.door__reason { font-size: clamp(15px, 2.6vw, 19px); opacity: .95; margin-top: 6px; }
@keyframes door-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.door__log { display: flex; flex-direction: column; gap: 6px; text-align: left; font-size: 13px; }
.door__log-row {
  display: flex; gap: 10px; align-items: baseline; padding: 7px 11px;
  border-radius: 9px; background: rgb(255 255 255 / .06); border-left: 3px solid transparent;
}
.door__log-row--ok { border-left-color: #10b981; }
.door__log-row--no { border-left-color: #f43f5e; }
.door__log-name { font-weight: 600; }
.door__log-meta { margin-left: auto; opacity: .65; }
.door__swatch { width: 14px; height: 14px; border-radius: 999px; display: inline-block; }

/* --- Branding image slots --------------------------------------------- */
.brand-slot {
  display: grid; grid-template-columns: 168px 1fr; gap: 16px; align-items: start;
  padding: 14px; border: 1px solid var(--surface-line); border-radius: var(--radius-lg);
  background: var(--bg-sunken);
}
.brand-slot__preview {
  aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
  display: grid; place-items: center; background: var(--bg-elevated);
  border: 1px solid var(--surface-line);
}
.brand-slot__preview img { width: 100%; height: 100%; object-fit: contain; }
/* A chequerboard, so a transparent logo reads as transparent rather than white. */
.brand-slot__preview--checker {
  background-image:
    linear-gradient(45deg, var(--bg-sunken) 25%, transparent 25%),
    linear-gradient(-45deg, var(--bg-sunken) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--bg-sunken) 75%),
    linear-gradient(-45deg, transparent 75%, var(--bg-sunken) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}
.brand-slot__empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--text-subtle); font-size: 12px;
}
.brand-slot__empty .icon { width: 22px; height: 22px; }
.brand-slot__body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.brand-slot__specs { display: flex; flex-wrap: wrap; gap: 6px; }
.brand-slot__specs .chip { cursor: default; font-size: 11px; padding: 3px 8px; }
.brand-slot__specs .chip:hover { border-color: var(--surface-line); color: inherit; }
.chip--muted { color: var(--text-subtle); }
.brand-slot .icon { vertical-align: -2px; }
@media (max-width: 640px) {
  .brand-slot { grid-template-columns: 1fr; }
  .brand-slot__preview { max-width: 220px; }
}

/* --- Live preview panel ------------------------------------------------ */
/*
 * The preview should use whatever height the screen has left rather than a
 * fixed box — on a tall monitor a fixed height leaves a dead gap beneath it,
 * and on a laptop it runs off the bottom.
 *
 * The card sticks under the header and is exactly as tall as the space below
 * it; the iframe is the flexible row inside, so head and foot keep their own
 * height and everything left over goes to the page being previewed.
 */
.preview-panel {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  height: calc(100dvh - var(--header-h) - 40px);
  /* Below this the preview is too short to tell you anything, so let the page
     scroll instead of squashing it. */
  min-height: 420px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.preview-panel .card__head,
.preview-panel .card__foot { flex: none; }
/* min-height:0 lets a flex child actually shrink — without it the iframe keeps
   its intrinsic height and pushes the footer off the bottom. */
.preview-panel__body { flex: 1 1 auto; min-height: 0; padding: 0; }
.preview-panel__body iframe {
  display: block; width: 100%; height: 100%; border: 0; background: var(--bg);
}

/* Stacked layout: nothing to stick to, and the viewport is the whole column. */
@media (max-width: 1080px) {
  .preview-panel { position: static; height: min(72dvh, 720px); }
}
/* A short window — a laptop with the taskbar and a docked console open — is
   better served by scrolling than by a two-inch preview. */
@media (max-height: 560px) {
  .preview-panel { position: static; height: 460px; }
}

/* --- Ticket price ------------------------------------------------------ */
.price-banner {
  border: 1px solid var(--surface-line); border-radius: var(--radius-lg);
  background: var(--bg-sunken); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.price-banner__label { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); }
.price-banner__amount { font-size: clamp(1.35rem, 3vw, 1.75rem); letter-spacing: -0.02em; }
.pay-summary {
  display: flex; gap: 16px; align-items: flex-start; justify-content: space-between;
  padding: 16px; border: 1px solid var(--surface-line); border-radius: var(--radius-lg);
  background: var(--bg-sunken); flex-wrap: wrap;
}
.pay-summary strong { display: block; font-size: 17px; }
.pay-summary__label { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); }
.pay-summary__price { text-align: right; }
.pay-summary__price strong { font-size: clamp(1.2rem, 2.6vw, 1.5rem); }

/* --- Landing page ------------------------------------------------------ */
/*
 * A full marketing page: dark hero with oversized type, then alternating
 * bands down to the form. Every colour here derives from --brand, the accent
 * the organiser already chose in Appearance, so the page is theirs rather
 * than a second palette bolted on.
 */
.public-shell--bare { --lp-ink: #f8fafc; --lp-ink-soft: rgb(248 250 252 / .72); }
.public-shell--bare .public-foot { color: var(--lp-ink-soft); opacity: 1; }
/* No page-wide scrim: each band owns its own background. */
.public-shell--bare::before { content: none; }

.lp-wrap { width: min(1140px, 100%); margin: 0 auto; padding: 0 22px; }
.lp-wrap--narrow { width: min(760px, 100%); }

.lp-hero {
  position: relative; color: var(--lp-ink);
  padding: clamp(56px, 9vw, 118px) 0 clamp(52px, 8vw, 96px);
  background:
    radial-gradient(ellipse 80% 60% at 12% -20%, color-mix(in srgb, var(--brand) 55%, transparent), transparent 62%),
    linear-gradient(165deg, color-mix(in srgb, var(--brand) 26%, #0b1120), #0b1120 68%);
  overflow: hidden;
}
/* The event's own hero image, if there is one, sits under the gradient. */
.lp-hero--image::after {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .34;
  background-image: var(--lp-hero-image);
  background-size: cover; background-position: center;
  mix-blend-mode: luminosity;
}
.lp-hero__inner { position: relative; z-index: 1; width: min(1140px, 100%); margin: 0 auto; padding: 0 22px; }
.lp-hero__logo { max-height: 58px; max-width: min(100%, 380px); object-fit: contain; margin-bottom: 26px; display: block; }

.lp-eyebrow {
  display: inline-block; margin-bottom: 14px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--brand) 60%, #ffffff);
}
/* The headline is the page. Uppercase, tight, and as large as the viewport
   will carry without wrapping into confetti. */
.lp-hero__headline {
  font-size: clamp(2.3rem, 6.6vw, 4.6rem);
  line-height: .98; letter-spacing: -0.035em; text-transform: uppercase;
  font-weight: 800; max-width: 16ch; margin: 0;
  text-wrap: balance;
}
.lp-hero__lede {
  margin-top: 20px; max-width: 54ch;
  font-size: clamp(1.02rem, 1.7vw, 1.28rem); line-height: 1.5; color: var(--lp-ink-soft);
}
.lp-hero__meta {
  margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-size: 15px; color: var(--lp-ink-soft);
}
.lp-hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.lp-hero__meta .icon { width: 18px; height: 18px; opacity: .8; }

.lp-cta {
  margin-top: 32px; display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 26px; border-radius: 6px; font-size: 16.5px; font-weight: 700;
  letter-spacing: .01em; background: var(--brand); color: var(--brand-contrast, #fff);
  transition: transform .16s var(--ease), filter .16s var(--ease);
}
.lp-cta:hover { text-decoration: none; transform: translateY(-1px); filter: brightness(1.08); }
.lp-cta .icon { width: 18px; height: 18px; }

.lp-hero__video {
  margin-top: 42px; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 16 / 9; background: #000; box-shadow: var(--shadow-lg);
  max-width: 880px;
}
.lp-hero__video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --- Bands ------------------------------------------------------------- */
.lp-section { padding: clamp(48px, 7vw, 86px) 0; background: var(--bg-elevated); color: var(--text); }
.lp-section--muted { background: var(--bg-sunken); }
.lp-section--accent {
  background: var(--brand); color: var(--brand-contrast, #fff);
}
.lp-section--register { background: var(--bg-sunken); }
.lp-section__head { max-width: 62ch; margin: 0 auto clamp(28px, 4vw, 48px); text-align: center; }
.lp-section__head h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.5rem); letter-spacing: -0.03em;
  text-transform: uppercase; font-weight: 800; line-height: 1.05;
  text-wrap: balance;
}
.lp-section__head p { margin-top: 12px; color: var(--text-muted); font-size: 16.5px; line-height: 1.55; }
.lp-section--accent .lp-section__head p { color: inherit; opacity: .85; }

/* --- Numbers ----------------------------------------------------------- */
.lp-stats { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); text-align: center; }
.lp-stat__value {
  display: block; font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800;
  letter-spacing: -0.04em; line-height: 1;
}
.lp-stat__label { display: block; margin-top: 8px; font-size: 14px; opacity: .82; letter-spacing: .03em; }

/* --- Why attend -------------------------------------------------------- */
.lp-cards { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); align-items: stretch; }
.lp-card {
  border: 1px solid var(--surface-line); border-radius: var(--radius-lg);
  background: var(--bg-elevated); overflow: hidden; display: flex; flex-direction: column;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.lp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.lp-card__media { aspect-ratio: 16 / 10; background: var(--bg-sunken); }
.lp-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-card__body { padding: 22px; display: flex; flex-direction: column; gap: 9px; }
.lp-card__body h3 { font-size: 1.15rem; letter-spacing: -0.015em; }
.lp-card__body p { color: var(--text-muted); font-size: 15px; line-height: 1.55; }
/* A four-across row of text-only cards gets a rule in the brand colour so it
   does not read as a plain list. */
.lp-card:not(:has(.lp-card__media)) { border-top: 3px solid var(--brand); }

/* --- Speakers ---------------------------------------------------------- */
.lp-speakers { display: grid; gap: 26px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.lp-speaker { text-align: center; display: flex; flex-direction: column; gap: 6px; }
.lp-speaker__portrait {
  aspect-ratio: 1; border-radius: 999px; overflow: hidden; margin: 0 auto 10px;
  width: min(100%, 168px); background: var(--brand-soft);
  display: grid; place-items: center;
  border: 3px solid color-mix(in srgb, var(--brand) 45%, transparent);
}
.lp-speaker__portrait img { width: 100%; height: 100%; object-fit: cover; }
.lp-speaker__portrait span { font-size: 2rem; font-weight: 700; color: var(--brand); letter-spacing: -0.02em; }
.lp-speaker h3 { font-size: 1.05rem; letter-spacing: -0.015em; }
.lp-speaker__role { font-size: 13.5px; color: var(--brand); font-weight: 600; }
.lp-speaker__bio { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }

/* --- Quotes ------------------------------------------------------------ */
.lp-quotes { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.lp-quote {
  margin: 0; padding: 26px; border-radius: var(--radius-lg);
  background: var(--bg-sunken); border: 1px solid var(--surface-line);
  display: flex; flex-direction: column; gap: 18px;
}
.lp-quote blockquote {
  margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--text);
}
.lp-quote blockquote::before { content: "\201C"; color: var(--brand); font-size: 2.4rem; line-height: 0; vertical-align: -0.35em; margin-right: 2px; }
.lp-quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.lp-quote figcaption img { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; flex: none; }
.lp-quote figcaption strong { display: block; font-size: 14.5px; }
.lp-quote figcaption small { display: block; font-size: 13px; color: var(--text-muted); }

/* --- Questions --------------------------------------------------------- */
.lp-faq { display: flex; flex-direction: column; gap: 10px; }
/* Sets its own colour, not just its own background. Dropped into a layout
   whose column inherits light-on-dark — Split's pitch column does — an item
   that only sets a background renders white text on white. */
.lp-faq__item { border: 1px solid var(--surface-line); border-radius: var(--radius); background: var(--bg-elevated); color: var(--text); }
.lp-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; cursor: pointer; font-weight: 620; list-style: none;
}
.lp-faq__item summary::-webkit-details-marker { display: none; }
.lp-faq__item summary .icon { flex: none; transition: transform .16s var(--ease); opacity: .5; }
.lp-faq__item[open] summary .icon { transform: rotate(90deg); }
.lp-faq__item[open] { border-color: color-mix(in srgb, var(--brand) 45%, var(--surface-line)); }
.lp-faq__answer { padding: 0 18px 17px; color: var(--text-muted); line-height: 1.6; }

/* --- The form at the end ----------------------------------------------- */
.lp-section--register .public-card { max-width: none; }

@media (max-width: 640px) {
  .lp-hero__headline { max-width: none; }
  .lp-speakers { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* --- Landing page editor ----------------------------------------------- */
.layout-choice { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.layout-option {
  display: flex; gap: 11px; padding: 14px; cursor: pointer;
  border: 1px solid var(--surface-line); border-radius: var(--radius-lg); background: var(--bg-sunken);
}
.layout-option:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.layout-option input { margin-top: 3px; flex: none; }
.layout-option__body { display: flex; flex-direction: column; gap: 3px; }
.layout-option__body small { color: var(--text-muted); font-size: 12.5px; line-height: 1.45; }

.section-item {
  display: grid; gap: 12px; align-items: start;
  grid-template-columns: repeat(2, minmax(0, 1fr)) 120px auto;
  padding: 14px; border: 1px solid var(--surface-line); border-radius: var(--radius);
  background: var(--bg-sunken);
}
.section-item .col-span-2 { grid-column: span 2; }
.section-item__image { grid-column: 3; }
.section-item__image img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px;
  margin-bottom: 6px; background: var(--bg-elevated);
}
.section-item__image .input { padding: 6px; font-size: 11px; }
.section-item__remove { grid-column: 4; align-self: center; }
@media (max-width: 860px) {
  .section-item { grid-template-columns: minmax(0, 1fr) auto; }
  .section-item .col-span-2, .section-item__image { grid-column: 1; }
  .section-item__remove { grid-column: 2; align-self: start; }
}

/* --- Per-event Stripe account ------------------------------------------ */
/* Price on the left, which account it lands in on the right. Below 1080px
   they stack, because the webhook URL alone wants ~460px to stay legible. */
.pay-grid {
  display: grid; gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: start;
}
.pay-grid__pane { min-width: 0; }
@media (max-width: 1080px) { .pay-grid { grid-template-columns: 1fr; } }

.stripe-account {
  border: 1px solid var(--surface-line); border-radius: var(--radius-lg);
  background: var(--bg-sunken); padding: 16px; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
  /* A fieldset's default min-width is min-content and it ignores the track
     it was given, so without this it breaks out of the card on a narrow
     column instead of wrapping inside it. */
  min-width: 0;
}
.stripe-account legend { padding: 0 6px; }
.stripe-account code { font-size: 12.5px; overflow-wrap: anywhere; }
.stripe-account__current { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* The endpoint address gets its own row: it is long, it is copied rather than
   read, and threading it through a sentence made both hard to follow. */
.stripe-account__endpoint {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--bg-elevated); border: 1px solid var(--surface-line);
  border-radius: 10px; padding: 8px 10px; margin: 2px 0;
}
.stripe-account__endpoint code { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }

.stripe-account__result { padding: 11px 13px; border-radius: 10px; font-size: 14px; }
.stripe-account__result--ok { background: var(--ok-soft); color: var(--ok); }
.stripe-account__result--error { background: var(--danger-soft); color: var(--danger); }

@media print {
  /* The page is exactly one label. Anything that is not the badge has to leave
     the layout completely — hiding it with `visibility` keeps its box, and a
     box taller than the label pushes the badge onto a second one. */
  html, body {
    width: var(--badge-w, 70mm); height: var(--badge-h, 60mm);
    margin: 0; padding: 0; overflow: hidden; background: #fff;
  }
  body > *:not(.badge-sheet):not(.badge-print-stage) { display: none !important; }
  .badge-print-stage {
    display: contents !important;   /* the wrapper stops generating a box */
  }
  .badge-sheet {
    position: static; margin: 0; box-shadow: none; border-radius: 0;
    width: var(--badge-w, 70mm); height: var(--badge-h, 60mm);
    break-inside: avoid; page-break-inside: avoid;
  }
  .no-print { display: none !important; }
  /* Editor chrome is for arranging, never for the label. */
  .badge-el--draggable { outline: 0 !important; background: none !important; }
  .badge-el__handle { display: none !important; }
}

/* --- Utilities ------------------------------------------------------- */
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack--sm { gap: 8px; }
.stack--lg { gap: 22px; }
fieldset { min-width: 0; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.push { margin-left: auto; }
.hidden { display: none !important; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.divider { height: 1px; background: var(--surface-line); border: 0; }
.text-sm { font-size: 13.5px; }
.text-xs { font-size: 12.5px; }
.fw-600 { font-weight: 620; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ======================================================================
   Type — Aura's scale. Applies everywhere; a Marquee attendee page overrides
   only the display treatment, further down.
   ====================================================================== */

@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../fonts/plus-jakarta-sans-500.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../fonts/plus-jakarta-sans-500-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("../fonts/plus-jakarta-sans-600.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("../fonts/plus-jakarta-sans-600-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("../fonts/plus-jakarta-sans-700.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("../fonts/plus-jakarta-sans-700-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800;
  font-display: swap; src: url("../fonts/plus-jakarta-sans-800.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800;
  font-display: swap; src: url("../fonts/plus-jakarta-sans-800-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


/* ======================================================================
   Skins — the visual style of an attendee page, chosen in Appearance.

     (base)          Aura. The design language of the whole application:
                     back office, kiosk, doors and attendee pages.
     .skin-marquee   Bold and editorial, for an attendee page that wants a
                     campaign look. Restates every value it changes, so it
                     never depends on what the base happens to be.

   .skin-aura needs no rules: it is the base, and a class that exists only to
   re-assert the default is a class that will drift from it.
   ====================================================================== */

.skin-marquee {
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", "Noto Sans", Arial, "Apple Color Emoji", sans-serif;

  --bg: #f6f7fb;
  --bg-elevated: #ffffff;
  --bg-sunken: #eef1f7;
  --surface-line: #e4e8f0;

  --text: #0f172a;
  --text-muted: #5b6577;
  --text-subtle: #8892a4;

  --ok: #047857;      --ok-soft: #ecfdf5;
  --warn: #b45309;    --warn-soft: #fffbeb;
  --danger: #be123c;  --danger-soft: #fff1f2;
  --info: #0369a1;    --info-soft: #f0f9ff;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;

  --shadow-xs: 0 1px 2px rgb(15 23 42 / 0.06);
  --shadow-sm: 0 1px 3px rgb(15 23 42 / 0.08), 0 1px 2px rgb(15 23 42 / 0.04);
  --shadow: 0 10px 24px -12px rgb(15 23 42 / 0.22), 0 2px 6px -2px rgb(15 23 42 / 0.08);
  --shadow-lg: 0 28px 60px -28px rgb(15 23 42 / 0.35);

  font-weight: 400;
  letter-spacing: normal;
}

@media (prefers-color-scheme: dark) {
  .skin-marquee {
    --bg: #0b1120;
    --bg-elevated: #121a2b;
    --bg-sunken: #0e1626;
    --surface-line: #23304a;
    --text: #e8edf7;
    --text-muted: #9aa8c0;
    --text-subtle: #6f7f9a;
    --ok: #34d399;      --ok-soft: #06281f;
    --warn: #fbbf24;    --warn-soft: #2a1f06;
    --danger: #fb7185;  --danger-soft: #2c0f19;
    --info: #38bdf8;    --info-soft: #06202e;
    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.5);
    --shadow: 0 12px 28px -14px rgb(0 0 0 / 0.7);
    --shadow-lg: 0 30px 70px -30px rgb(0 0 0 / 0.8);
  }
}

/* Marquee's own component values, restoring what the Aura base changes. */
.skin-marquee .btn { border-radius: 10px; font-weight: 560; min-height: 0; padding: 8px 14px; }
.skin-marquee .btn--sm { min-height: 0; padding: 5px 10px; border-radius: 8px; }
.skin-marquee .btn--lg { min-height: 0; padding: 12px 22px; border-radius: 12px; }
.skin-marquee .btn--icon { border-radius: 10px; min-width: 0; padding: 7px; }
.skin-marquee .btn--danger { border-radius: 10px; }
.skin-marquee .btn:active { transform: none; }
.skin-marquee .input,
.skin-marquee .select,
.skin-marquee .textarea { padding: 9px 12px; background: var(--bg-elevated); }
.skin-marquee .checkbox,
.skin-marquee .radio { background: var(--bg-elevated); }
.skin-marquee .badge,
.skin-marquee .chip { border-radius: 99px; font-size: 12px; font-weight: 600; }
/* Tabular figures are Aura's; Marquee keeps proportional ones. */
.skin-marquee table,
.skin-marquee .lp-stat__value,
.skin-marquee .sp-stat strong,
.skin-marquee .pr-slot__when { font-variant-numeric: normal; }
.skin-marquee .field__label { font-weight: 600; font-size: 13px; }
.skin-marquee .fieldset > legend { font-size: 12px; font-weight: 650; letter-spacing: .07em; }
/* The uppercase display slab is Marquee's signature. */
.skin-marquee .lp-hero__headline,
.skin-marquee .lp-section__head h2 { text-transform: uppercase; }
.skin-marquee .lp-hero__headline { letter-spacing: -0.035em; }
.skin-marquee .lp-cta { border-radius: 6px; min-height: 0; }
.skin-marquee .lp-eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .16em; }

/* ======================================================================
   Aura's component values — the ones tokens alone cannot express. Global,
   because Aura is the system's design language and not one page's option.
   ====================================================================== */

/* Aura has no 400: 500 is the lightest weight in the system. */
body { font-weight: 500; letter-spacing: -0.005em; }
h1, .public-hero h1, .lp-hero__headline, .lp-section__head h2 { font-weight: 800; }
h2, h3 { font-weight: 700; }
.field__label { font-size: 13px; font-weight: 700; }
.fieldset > legend,
.price-banner__label,
.pay-summary__label,
.stat__label,
.lp-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .05em; }
.badge, .chip { font-size: 11px; font-weight: 600; border-radius: 8px; }
/* A chip is clickable but never the primary action — a row of them at the full
   44px would dominate the screen. 36px is Aura's small-control tier. */
.chip { min-height: 36px; }

/* Dates, prices and counts stop shifting their columns as digits change. */
table,
.stat__value,
.lp-stat__value,
.price-banner__value,
.pay-summary__value,
.sp-stat strong,
.pr-slot__when { font-variant-numeric: tabular-nums; }

/* 44px is the minimum comfortable touch target; anything primary gets it. */
.btn { border-radius: 999px; font-weight: 700; min-height: 44px; padding: 10px 20px; }
.btn--sm { min-height: 36px; padding: 7px 14px; border-radius: 999px; }
.btn--lg { min-height: 48px; padding: 13px 26px; border-radius: 999px; }
.btn--icon { border-radius: 50%; min-width: 44px; padding: 10px; }
.btn--danger { border-radius: 13px; }
.btn:active { transform: scale(.98); }
.btn { transition: transform .11s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease); }

/* Radii come from the tokens, which each skin sets — restating them here would
   override the very values a skin exists to change. Only what a token cannot
   express is stated: the field's roomier padding and its sunken ground. */
.input, .select, .textarea { padding: 12px 14px; background: var(--bg-sunken); }
.checkbox, .radio { background: var(--bg-sunken); }
.lp-cta, .po-cta, .pr-cta { border-radius: 999px; min-height: 44px; }

/* Sentence case: the uppercase slab belongs to Marquee. */
.lp-hero__headline, .lp-section__head h2 { text-transform: none; letter-spacing: -0.03em; }
.lp-eyebrow { letter-spacing: .05em; }

@media (prefers-reduced-motion: reduce) {
  .btn, .lp-card, .lp-cta, .po-cta, .pr-cta { transition: none; }
  .btn:active { transform: none; }
}

/* ======================================================================
   Split — the pitch on the left, the form pinned on the right.
   ====================================================================== */
.sp-shell {
  position: relative; z-index: 2;
  display: grid; gap: clamp(24px, 3vw, 48px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  align-items: start;
  width: min(1240px, 100%); margin: 0 auto;
  padding: clamp(40px, 6vw, 76px) 22px clamp(40px, 6vw, 72px);
}
/* Below this the form has nowhere to pin against and the pitch has no room,
   so it becomes one column with the form last. */
@media (max-width: 960px) { .sp-shell { grid-template-columns: 1fr; } }

.sp-pitch { min-width: 0; color: var(--on-backdrop, #fff); display: flex; flex-direction: column; gap: 18px; }
.sp-logo { max-height: 56px; max-width: min(100%, 340px); object-fit: contain; object-position: left center; align-self: flex-start; }
.sp-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .78; }
.sp-headline { font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.04; letter-spacing: -0.032em; text-wrap: balance; }
.sp-lede { font-size: clamp(1rem, 1.4vw, 1.16rem); line-height: 1.55; opacity: .84; max-width: 56ch; }

.sp-facts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 14.5px; opacity: .86; }
.sp-facts li { display: inline-flex; align-items: center; gap: 8px; }
.sp-facts .icon { width: 17px; height: 17px; opacity: .8; }

.sp-video { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/9; background: #000; box-shadow: var(--shadow-lg); }
.sp-video iframe { width: 100%; height: 100%; border: 0; display: block; }

.sp-stats { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.sp-stat strong { display: block; font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.sp-stat span { display: block; margin-top: 5px; font-size: 13px; opacity: .76; }

.sp-block { display: flex; flex-direction: column; gap: 14px; }
.sp-block__head { font-size: 1.15rem; letter-spacing: -0.02em; opacity: .95; }

.sp-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sp-list li { display: flex; gap: 11px; align-items: flex-start; }
.sp-list .icon { width: 19px; height: 19px; flex: none; margin-top: 2px; opacity: .8; }
.sp-list strong { display: block; font-size: 15px; }
.sp-list small { display: block; margin-top: 2px; font-size: 13.5px; opacity: .74; line-height: 1.5; }

.sp-people { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.sp-person { display: flex; align-items: center; gap: 11px; min-width: 0; }
.sp-person__face {
  width: 42px; height: 42px; flex: none; border-radius: 999px; overflow: hidden;
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
  background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .2);
}
.sp-person__face img { width: 100%; height: 100%; object-fit: cover; }
.sp-person__text { min-width: 0; }
.sp-person__text strong { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-person__text small { display: block; font-size: 12.5px; opacity: .72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sp-quote { margin: 0; padding: 18px 20px; border-radius: var(--radius-lg); background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .16); }
.sp-quote blockquote { margin: 0; font-size: 15px; line-height: 1.6; }
.sp-quote figcaption { margin-top: 10px; font-size: 13px; opacity: .74; }

/* The form column. Sticky only where there is height to scroll against. */
.sp-form { min-width: 0; }
@media (min-width: 961px) {
  .sp-form__inner { position: sticky; top: 24px; }
}
.sp-form .public-card { max-width: none; margin: 0; }

/* ======================================================================
   Poster — one full screen of image, then the detail.
   ====================================================================== */
.po-hero {
  position: relative; z-index: 2;
  /* svh, not vh: on a phone vh is the height with the browser chrome hidden,
     so a 100vh hero is taller than the screen and the scroll cue lands under
     the address bar. */
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: clamp(48px, 8vw, 96px) 22px clamp(80px, 10vw, 120px);
  color: var(--on-backdrop, #fff);
}
.po-hero--image::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--po-image); background-size: cover; background-position: center;
}
/* A scrim, so the words hold against a photograph of any brightness. */
.po-hero--image::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(8 10 18 / .34), rgb(8 10 18 / .62));
}
/* The cap belongs on the headline, not the column: at 22ch the whole block was
   constrained and the date/venue/price line broke onto three rows. */
.po-hero__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: min(100%, 880px); }
.po-logo { max-height: 66px; max-width: min(100%, 320px); object-fit: contain; }
.po-eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .84; }
.po-headline {
  font-size: clamp(2.6rem, 8vw, 5.4rem); line-height: .95; letter-spacing: -0.04em;
  font-weight: 800; text-wrap: balance; max-width: 15ch;
}
.po-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 15px; opacity: .88; }
.po-facts span { display: inline-flex; align-items: center; gap: 8px; }
.po-facts .icon { width: 18px; height: 18px; opacity: .8; }
.po-cta {
  margin-top: 8px; display: inline-flex; align-items: center; min-height: 48px;
  padding: 14px 30px; border-radius: 999px; font-size: 16.5px; font-weight: 700;
  background: var(--brand); color: var(--brand-contrast, #fff); text-decoration: none;
  transition: transform .16s var(--ease), filter .16s var(--ease);
}
.po-cta:hover { transform: translateY(-1px); filter: brightness(1.08); text-decoration: none; }

.po-scroll {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%) rotate(90deg);
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: inherit; opacity: .7; background: rgb(255 255 255 / .12);
  animation: po-nudge 2.4s var(--ease) infinite;
}
.po-scroll:hover { opacity: 1; }
@keyframes po-nudge {
  0%, 100% { transform: translateX(-50%) rotate(90deg) translateX(0); }
  50%      { transform: translateX(-50%) rotate(90deg) translateX(5px); }
}
@media (prefers-reduced-motion: reduce) { .po-scroll { animation: none; } }

.po-wrap { width: min(1140px, 100%); margin: 0 auto; padding: 0 22px; }
.po-wrap--narrow { width: min(760px, 100%); }
.po-band { position: relative; z-index: 2; padding: clamp(44px, 6vw, 80px) 0; background: var(--bg-elevated); color: var(--text); }
.po-band--tint { background: var(--bg-sunken); }
.po-lede { font-size: clamp(1.06rem, 1.7vw, 1.3rem); line-height: 1.6; text-align: center; color: var(--text-muted); }
.po-video { margin-top: 30px; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/9; background: #000; box-shadow: var(--shadow-lg); }
.po-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.po-band .public-card { max-width: none; }

/* ======================================================================
   Programme — the schedule is the argument.
   ====================================================================== */
.pr-wrap { width: min(1080px, 100%); margin: 0 auto; padding: 0 22px; }
.pr-wrap--narrow { width: min(720px, 100%); }

.pr-head { position: relative; z-index: 2; padding: clamp(30px, 4.5vw, 56px) 0; color: var(--on-backdrop, #fff); }
.pr-head__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pr-head__text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pr-logo { max-height: 46px; max-width: min(100%, 260px); object-fit: contain; object-position: left center; align-self: flex-start; }
.pr-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; opacity: .76; }
.pr-headline { font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; }
.pr-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; opacity: .84; }
.pr-facts span { display: inline-flex; align-items: center; gap: 7px; }
.pr-facts .icon { width: 16px; height: 16px; opacity: .8; }
.pr-cta {
  display: inline-flex; align-items: center; min-height: 44px; padding: 12px 24px;
  border-radius: 999px; font-weight: 700; font-size: 15.5px; white-space: nowrap;
  background: var(--brand); color: var(--brand-contrast, #fff); text-decoration: none;
  transition: transform .16s var(--ease), filter .16s var(--ease);
}
.pr-cta:hover { transform: translateY(-1px); filter: brightness(1.08); text-decoration: none; }

.pr-band { position: relative; z-index: 2; padding: clamp(38px, 5.5vw, 72px) 0; background: var(--bg-elevated); color: var(--text); }
.pr-band--tint { background: var(--bg-sunken); }
.pr-band__head { font-size: clamp(1.4rem, 2.6vw, 1.95rem); letter-spacing: -0.028em; margin-bottom: 22px; text-wrap: balance; }
.pr-band__sub { margin: -14px 0 20px; color: var(--text-muted); }
.pr-lede { font-size: clamp(1.04rem, 1.6vw, 1.22rem); line-height: 1.6; color: var(--text-muted); }
.pr-band .public-card { max-width: none; }

/* The timeline. The rule sits behind the markers rather than being drawn per
   row, so a row of any height keeps the line continuous. */
.pr-timeline { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; }
.pr-slot { display: grid; grid-template-columns: minmax(96px, 148px) minmax(0, 1fr); gap: 22px; padding: 20px 0; position: relative; }
.pr-slot + .pr-slot { border-top: 1px solid var(--surface-line); }
.pr-slot__rail { position: relative; padding-left: 22px; }
/* The marker and the line through it. */
.pr-slot__rail::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
.pr-slot__rail::after {
  content: ""; position: absolute; left: 4px; top: 20px; bottom: -20px;
  width: 1px; background: var(--surface-line);
}
.pr-slot:last-child .pr-slot__rail::after { content: none; }
.pr-slot__when { font-size: 13.5px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.pr-slot__body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pr-slot__who { display: flex; align-items: center; gap: 12px; }
.pr-slot__face {
  width: 40px; height: 40px; flex: none; border-radius: 999px; overflow: hidden;
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
  background: var(--brand-soft); color: var(--brand);
}
.pr-slot__face img { width: 100%; height: 100%; object-fit: cover; }
.pr-slot__body h3 { font-size: 1.08rem; letter-spacing: -0.015em; }
.pr-slot__body p { color: var(--text-muted); font-size: 14.5px; line-height: 1.55; }

@media (max-width: 620px) {
  .pr-slot { grid-template-columns: 1fr; gap: 10px; }
  .pr-slot__rail { padding-left: 22px; }
  .pr-slot__rail::after { content: none; }
}