/* ============================================================================
   SYHF 2026 — Registration flow + organizer dashboard
   Builds on tokens.css / styles.css (header, footer, buttons, colours).
   ========================================================================== */

/* --- Minimal app top bar --------------------------------------------------- */
.app-bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: 0.9rem var(--gutter);
  background: var(--syhs-paper);
  border-bottom: 1px solid var(--syhs-line-on-light);
}
.app-bar--dark { background: var(--syhs-ground); border-bottom-color: rgba(255,255,255,0.1); }
.app-bar__brand { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--syhs-ink); font-weight: 700; letter-spacing: 0.04em; }
.app-bar--dark .app-bar__brand { color: var(--syhs-white); }
.app-bar__brand img { width: 30px; height: 30px; }
.app-bar__back { text-decoration: none; color: var(--syhs-ink-soft); font-size: 0.9rem;
  background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer;
  -webkit-appearance: none; appearance: none; }
.app-bar--dark .app-bar__back { color: rgba(255,255,255,0.7); }
.app-bar__back:hover { color: var(--syhs-signal-alt); }

/* ===========================================================================
   TRACK CHOOSER (register.html)
   ========================================================================= */
.chooser { position: relative; overflow: hidden; background: var(--syhs-ground); color: var(--syhs-white); min-height: 100vh; padding-block: clamp(3rem, 7vw, 6rem); }
.chooser__head, .chooser__grid { position: relative; z-index: 1; }
.chooser__head { text-align: center; max-width: 42rem; margin: 0 auto var(--space-5); padding-inline: var(--gutter); }
.chooser__eyebrow { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--syhs-tint-mint); margin: 0 0 var(--space-2); }
.chooser__title { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); line-height: 1.05; margin: 0 0 var(--space-2); }
.chooser__sub { color: rgba(255,255,255,0.75); font-size: var(--fs-body-lg); margin: 0; }
.chooser__count { color: var(--syhs-tint-mint); font-size: 0.85rem; font-weight: 700; margin: 0.9rem 0 0; }

.chooser__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  max-width: 72rem; margin: 0 auto; padding-inline: var(--gutter);
}
.track-choice {
  display: flex; flex-direction: column; align-items: flex-start;
  text-decoration: none; color: inherit;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--syhs-line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: transform 300ms var(--ease-editorial), background 260ms, border-color 260ms;
}
.track-choice:hover, .track-choice:focus-visible {
  transform: translateY(-6px);
  background: rgba(255,255,255,0.07);
  border-color: var(--syhs-tint-mint);
  outline: none;
}
.track-choice__art { width: 100%; height: 150px; margin-bottom: var(--space-3); }
.track-choice__art svg { width: 100%; height: 100%; }
.track-choice__index { font-family: var(--font-serif); font-style: italic; color: var(--syhs-tint-mint); font-size: 1.2rem; }
.track-choice__name { font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--tracking-tight); margin: 0.2rem 0 0.5rem; }
.track-choice__desc { color: rgba(255,255,255,0.75); margin: 0 0 var(--space-3); flex-grow: 1; font-size: 0.95rem; }
.track-choice__cta { font-weight: 600; color: var(--syhs-tint-mint); }
.track-choice__seats { font-size: 0.78rem; color: rgba(255,255,255,0.5); margin-top: 0.5rem; letter-spacing: 0.03em; }

/* ===========================================================================
   REGISTRATION FORM (apply.html)
   ========================================================================= */
.apply { background: var(--syhs-paper); min-height: 100vh; }
.apply__grid {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  max-width: 74rem; margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) var(--gutter);
  align-items: start;
}
/* Left rail — illustration + what you're registering for */
.apply__aside { position: sticky; top: 5rem; }
.apply__art { background: var(--syhs-ground); border-radius: var(--radius-md); padding: var(--space-4); color: var(--syhs-white); }
.apply__art svg { width: 100%; height: auto; display: block; }
.apply__track-name { font-family: var(--font-serif); font-style: italic; font-size: 1.8rem; margin: var(--space-3) 0 0.3rem; }
.apply__track-tagline { color: rgba(255,255,255,0.75); margin: 0; font-size: 0.95rem; }
.apply__aside-note { margin-top: var(--space-3); font-size: 0.82rem; color: var(--syhs-ink-soft); display: flex; gap: 0.5rem; align-items: flex-start; }

/* Form */
.apply__form-head { margin-bottom: var(--space-4); }
.apply__form-title { font-size: var(--fs-h2); font-weight: 700; letter-spacing: var(--tracking-tight); margin: 0 0 0.4rem; color: var(--syhs-ink); }
.apply__form-sub { color: var(--syhs-ink-soft); margin: 0; }

.field { margin-bottom: var(--space-3); }
.field__label { display: block; font-weight: 600; font-size: 0.9rem; color: var(--syhs-ink); margin-bottom: 0.4rem; }
.field__req { color: var(--syhs-signal); }
.field__hint { font-size: 0.78rem; color: var(--syhs-ink-soft); margin: 0.35rem 0 0; }
.field__control,
.field select,
.field textarea {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 1rem;
  padding: 0.7rem 0.85rem;
  min-height: 46px;
  color: var(--syhs-ink);
  background: var(--syhs-white);
  border: 1px solid var(--syhs-line-on-light);
  border-radius: var(--radius-sm);
  transition: border-color 160ms, box-shadow 160ms;
}
.field__control:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--syhs-signal-alt);
  box-shadow: 0 0 0 3px rgba(60,150,110,0.18);
}
.field textarea { min-height: 120px; resize: vertical; }
.field--invalid .field__control,
.field--invalid select,
.field--invalid textarea { border-color: var(--syhs-signal); box-shadow: 0 0 0 3px rgba(200,60,60,0.14); }
.field__error { display: none; font-size: 0.8rem; color: var(--syhs-signal); margin: 0.35rem 0 0; }

/* ---- Research abstract form: word counters, radios, co-author rows ------- */
.field__wordcount { text-align: right; font-variant-numeric: tabular-nums; }
.field__wordcount--over { color: var(--syhs-signal); font-weight: 700; }
.radio-row { display: flex; flex-wrap: wrap; gap: 0.4rem 0; padding: 0.3rem 0; }
.coauthors__row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.coauthors__remove { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--syhs-line-on-light);
  background: var(--syhs-paper); color: var(--syhs-ink-soft); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.coauthors__remove:hover { background: rgba(200,60,60,0.08); color: var(--syhs-signal); border-color: var(--syhs-signal); }
@media (max-width: 640px) { .coauthors__row { grid-template-columns: 1fr; } }
.field--invalid .field__error { display: block; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

/* Consent */
.consent {
  display: flex; gap: 0.75rem; align-items: flex-start;
  background: rgba(60,150,110,0.06);
  border: 1px solid rgba(60,150,110,0.28);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin: var(--space-3) 0 var(--space-4);
}
.consent input[type="checkbox"] { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--syhs-signal-alt); flex-shrink: 0; }
.consent__text { font-size: 0.88rem; color: var(--syhs-ink); line-height: 1.5; }
.consent__text a { color: var(--syhs-signal-alt); }
.consent.field--invalid { border-color: var(--syhs-signal); }

.apply__submit { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.apply__submit .btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.form-note { font-size: 0.8rem; color: var(--syhs-ink-soft); }

/* Confirmation */
.confirm { max-width: 40rem; margin: 0 auto; padding: clamp(3rem, 7vw, 6rem) var(--gutter); text-align: center; }
.confirm__check { width: 68px; height: 68px; margin: 0 auto var(--space-3); color: var(--syhs-signal-alt); }
.confirm__title { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.8rem); margin: 0 0 0.5rem; color: var(--syhs-ink); }
.confirm__sub { color: var(--syhs-ink-soft); margin: 0 0 var(--space-4); }
.confirm__badge {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.4rem;
  background: var(--syhs-ground); color: var(--syhs-white);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
}
.confirm__badge-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--syhs-tint-mint); }
.confirm__ref { font-family: var(--font-sans); font-weight: 700; font-size: 2rem; letter-spacing: 0.08em; }
.confirm__qr { margin-top: var(--space-3); background: #fff; padding: 12px; border-radius: 12px; display: inline-block; }
.confirm__qr canvas, .confirm__qr img { display: block; }
.confirm__actions { margin-top: var(--space-4); display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* ===========================================================================
   Shared backend motif — a faint DNA double-helix behind dark surfaces
   ========================================================================= */
.helix-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; color: var(--syhs-tint-mint); }
.helix-decor svg { position: absolute; top: -6%; right: -4%; height: 112%; width: auto; opacity: 0.16; }
[dir="rtl"] .helix-decor svg { right: auto; left: -4%; transform: scaleX(-1); }

/* ===========================================================================
   DASHBOARD (dashboard.html)
   ========================================================================= */
.dash { background: var(--syhs-paper); min-height: 100vh; }

/* Login gate — branded, dark, centered card over a helix field */
.gate-screen {
  position: relative; min-height: 100vh; display: grid; place-items: center; padding: var(--gutter);
  background:
    radial-gradient(120% 85% at 82% -5%, rgba(80,49,124,0.55), transparent 58%),
    radial-gradient(120% 85% at 0% 105%, rgba(14,71,106,0.5), transparent 55%),
    var(--syhs-ground);
}
.gate {
  position: relative; z-index: 1; width: min(26rem, 100%); text-align: center; color: var(--syhs-white);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-md);
  padding: clamp(1.8rem, 5vw, 2.8rem);
}
.gate__logo { width: 54px; height: 54px; display: block; margin: 0 auto var(--space-3); }
.gate__title { font-family: var(--font-serif); font-style: italic; font-size: 2rem; margin: 0 0 0.3rem; color: var(--syhs-white); }
.gate__sub { color: rgba(255,255,255,0.7); margin: 0 0 var(--space-4); font-size: 0.92rem; }
.gate__form { display: flex; flex-direction: column; gap: var(--space-3); text-align: start; }
.gate__form .field__label { color: rgba(255,255,255,0.85); }
.gate__error { color: #ff9d9d; font-size: 0.85rem; margin: 0; min-height: 1.2em; }

/* Dashboard hero band */
.dash__hero {
  position: relative; overflow: hidden; color: var(--syhs-white);
  padding: clamp(1.8rem, 4vw, 3rem) 0 5.5rem;
  background:
    radial-gradient(130% 130% at 88% -20%, rgba(80,49,124,0.7), transparent 55%),
    linear-gradient(180deg, var(--syhs-navy) 0%, var(--syhs-ground) 100%);
}
.dash__hero-inner { position: relative; z-index: 1; max-width: 82rem; margin: 0 auto; padding-inline: var(--gutter); }
.dash__eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--syhs-tint-mint); margin: 0 0 0.4rem; }
.dash__title { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.2rem); font-weight: 700; letter-spacing: var(--tracking-tighter); margin: 0; color: var(--syhs-white); }
.dash__mode { display: inline-block; margin-top: var(--space-3); font-size: 0.72rem; padding: 0.25rem 0.7rem; border-radius: 999px; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.14); }

.dash__wrap { max-width: 82rem; margin: 0 auto; padding: 0 var(--gutter) 4rem; }

/* Stat cards float up over the hero band */
/* The stats used to pull themselves up over the hero with a negative margin.
   Once the tab rail was added between the two, that margin dragged the cards
   on top of the tabs. The rail now does the overlapping, as one panel, and
   the stats sit normally beneath it. */
.dash__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3);
  margin-bottom: var(--space-4); }
.stat-card { background: var(--syhs-white); border: 1px solid var(--syhs-line-on-light); border-radius: var(--radius-md); padding: var(--space-3); box-shadow: 0 24px 50px -32px rgba(20,10,40,0.5); }
.stat-card--total { background: var(--syhs-ground); border-color: transparent; }
.stat-card--total .stat-card__num { color: var(--syhs-white); }
.stat-card--total .stat-card__label { color: rgba(255,255,255,0.7); }
.stat-card--surgical { --accent: var(--syhs-tint-violet); }
.stat-card--research { --accent: #4f9fd0; }
.stat-card--stage    { --accent: var(--syhs-signal-alt); }
.stat-card--checked-in { --accent: var(--syhs-tint-mint); }
.stat-card__num { font-family: var(--font-sans); font-weight: 700; font-size: 2.2rem; letter-spacing: var(--tracking-tighter); color: var(--syhs-ink); font-variant-numeric: tabular-nums; line-height: 1; }
.stat-card__label { font-size: 0.78rem; color: var(--syhs-ink-soft); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 0.35rem; }
.stat-card__bar { height: 6px; border-radius: 999px; background: var(--syhs-line-on-light); margin-top: 0.7rem; overflow: hidden; }
.stat-card__bar span { display: block; height: 100%; background: var(--accent, var(--syhs-signal-alt)); border-radius: 999px; transition: width 700ms var(--ease-editorial); }

.dash__toolbar { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-3); }
.dash__search { flex: 1 1 16rem; min-height: 44px; padding: 0.6rem 0.85rem; font: inherit; border: 1px solid var(--syhs-line-on-light); border-radius: var(--radius-sm); background: var(--syhs-white); }
.dash__filter { min-height: 44px; padding: 0.6rem 0.85rem; font: inherit; border: 1px solid var(--syhs-line-on-light); border-radius: var(--radius-sm); background: var(--syhs-white); }

.dash__table-wrap { overflow-x: auto; background: var(--syhs-white); border: 1px solid var(--syhs-line-on-light); border-radius: var(--radius-md); box-shadow: 0 20px 50px -38px rgba(20,10,40,0.4); }
.dash__table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.dash__table th, .dash__table td { text-align: start; padding: 0.8rem 0.95rem; border-bottom: 1px solid var(--syhs-line-on-light); white-space: nowrap; }
.dash__table th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--syhs-ink-soft); background: var(--syhs-paper); position: sticky; top: 0; }
.dash__table tbody tr { transition: background 140ms; }
.dash__table tbody tr:hover { background: var(--syhs-paper); }
.dash__table tbody tr:last-child td { border-bottom: none; }
.pill { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 0.18rem 0.6rem; border-radius: 999px; text-transform: capitalize; }
.pill--surgical { background: rgba(80,49,124,0.14); color: var(--syhs-deep-violet); }
.pill--research { background: rgba(14,71,106,0.14); color: var(--syhs-navy); }
.pill--stage    { background: rgba(60,150,110,0.16); color: #2c7a58; }
.pill--pending   { background: var(--syhs-line-on-light); color: var(--syhs-ink-soft); }
.pill--confirmed { background: rgba(60,150,110,0.16); color: #2c7a58; }
.pill--cancelled { background: rgba(200,60,60,0.12); color: var(--syhs-signal); }
.id-cell { font-variant-numeric: tabular-nums; cursor: pointer; user-select: none; letter-spacing: 0.04em; }
.id-cell:hover { color: var(--syhs-signal-alt); }
.dash__empty { padding: var(--space-5); text-align: center; color: var(--syhs-ink-soft); }

/* --- Registration TYPE chooser cards --------------------------------------- */
.chooser__grid--types { grid-template-columns: repeat(3, 1fr); max-width: 76rem; }
.type-choice { position: relative; overflow: hidden; }
.type-choice__bar { position: absolute; inset: 0 0 auto 0; height: 5px; }
.type-choice__top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; width: 100%; margin-top: 0.4rem; }
.type-choice__tagline { color: rgba(255,255,255,0.82); margin: 0 0 var(--space-3); font-size: 0.95rem; line-height: 1.35; }
.type-choice__guides { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: 0.4rem; flex-grow: 1; }
.type-choice__guides li { position: relative; padding-left: 1.1rem; font-size: 0.85rem; color: rgba(255,255,255,0.7); line-height: 1.35; }
.type-choice__guides li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 999px; background: var(--syhs-tint-mint); }
.pill { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.28rem 0.65rem; border-radius: 999px; white-space: nowrap; }
.pill--free { background: color-mix(in srgb, var(--syhs-tint-mint) 22%, transparent); color: var(--syhs-tint-mint); }
.pill--paid { background: color-mix(in srgb, var(--syhs-tint-violet) 26%, transparent); color: #fff; }
.pill--invite { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.9); }
.chooser__aside { position: relative; z-index: 1; text-align: center; margin: var(--space-5) auto 0; color: rgba(255,255,255,0.72); }
.chooser__aside-link { color: var(--syhs-tint-mint); font-weight: 600; text-decoration: none; }
.chooser__aside-link:hover { text-decoration: underline; }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 960px) {
  .chooser__grid--types { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .chooser__grid { grid-template-columns: 1fr; }
  .chooser__grid--types { grid-template-columns: 1fr; }
  .apply__grid { grid-template-columns: 1fr; }
  .apply__aside { position: static; }
  .dash__stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .field-row { grid-template-columns: 1fr; }
}

/* ===========================================================================
   General-application flow (types) — aside panel, engagement fields, discount,
   T&C dialog. Additive; does not affect the surgical flow.
   ========================================================================== */
.apply__track-name { color: var(--syhs-ink); }
.apply__track-tagline { color: var(--syhs-ink-soft) !important; }
.type-panel { margin: var(--space-3) 0 0; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--syhs-white); border: 1px solid var(--syhs-line-on-light); box-shadow: 0 10px 26px -18px rgba(22,18,31,0.4); }
.type-panel__price { font-size: 1.15rem; font-weight: 800; margin: 0 0 0.4rem; color: var(--syhs-signal); }
.type-panel__aud { font-size: 0.85rem; color: var(--syhs-ink-soft); margin: 0 0 0.6rem; line-height: 1.4; }
.type-panel__guides { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.type-panel__guides li { position: relative; padding-left: 1rem; font-size: 0.82rem; color: var(--syhs-ink); line-height: 1.35; }
.type-panel__guides li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 5px; height: 5px; border-radius: 999px; background: var(--syhs-signal-alt); }
.type-panel__window { margin: 0.7rem 0 0; font-size: 0.78rem; color: var(--syhs-deep-violet); font-weight: 700; line-height: 1.35; }

.field__opt { font-weight: 400; color: var(--syhs-ink-soft); font-size: 0.85em; }
.section-sep { margin: var(--space-4) 0 var(--space-2); padding-bottom: 0.4rem; border-bottom: 1px solid var(--syhs-line-on-light); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--syhs-ink-soft); }

.radio-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.radio-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem; border: 1px solid var(--syhs-line-on-light); border-radius: 999px; cursor: pointer; font-size: 0.9rem; transition: border-color 160ms, background 160ms; }
.radio-chip:has(input:checked) { border-color: var(--syhs-signal); background: color-mix(in srgb, var(--syhs-signal) 10%, transparent); font-weight: 600; }
.radio-chip input { accent-color: var(--syhs-signal); width: 16px; height: 16px; }

.member-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.discount__row { display: flex; gap: 0.5rem; align-items: stretch; }
.discount__row .field__control { flex: 1; }
.btn--compact { padding: 0.5rem 1rem; font-size: 0.9rem; white-space: nowrap; }
.discount__msg { margin: 0.5rem 0 0; font-size: 0.85rem; min-height: 1em; }
.discount__msg.is-good { color: var(--syhs-signal); font-weight: 600; }
.discount__msg.is-bad { color: #b91c1c; }
.price-box { margin-top: var(--space-3); display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.1rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--syhs-ground) 6%, transparent); border: 1px solid var(--syhs-line-on-light); }
.price-box__label { font-weight: 700; color: var(--syhs-ink-soft); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.08em; }
.price-box__amounts { display: inline-flex; align-items: baseline; gap: 0.6rem; }
.price-box__old { color: #b91c1c; text-decoration: line-through; font-weight: 600; font-size: 0.95rem; }
.price-box__new { font-family: var(--font-sans); font-weight: 800; font-size: 1.4rem; color: var(--syhs-ink); }

.confirm__email { max-width: 34rem; margin: 0.6rem auto 0; color: var(--syhs-ink-soft); font-size: 0.92rem; line-height: 1.5; }

.confirm__referral { max-width: 30rem; margin: 1.2rem auto 0; }
.confirm__referral-lede { font-size: 0.82rem; font-weight: 700; color: var(--syhs-ink-soft); margin: 0 0 0.4rem; }
.confirm__referral-row { display: flex; gap: 0.5rem; }
.confirm__referral-link { flex: 1; min-width: 0; font-family: var(--mono, monospace); font-size: 0.78rem;
  padding: 0.5rem 0.7rem; border-radius: 8px; border: 1px solid var(--syhs-line-on-light);
  background: var(--syhs-paper); color: var(--syhs-ink-soft); }

/* T&C dialog */
.terms-dialog { border: none; border-radius: var(--radius-md); padding: 0; max-width: 640px; width: calc(100% - 2rem); box-shadow: 0 40px 90px -30px rgba(10,4,24,0.7); }
.terms-dialog::backdrop { background: rgba(10,4,24,0.6); backdrop-filter: blur(3px); }
.terms-dialog__inner { display: flex; flex-direction: column; max-height: min(80vh, 720px); }
.terms-dialog__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4); border-bottom: 1px solid var(--syhs-line-on-light); }
.terms-dialog__head h2 { margin: 0; font-size: 1.15rem; }
.terms-dialog__close { border: none; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--syhs-ink-soft); }
.terms-dialog__body { overflow-y: auto; padding: var(--space-4); }
.terms-dialog__body h3 { font-size: 0.98rem; margin: var(--space-3) 0 0.3rem; }
.terms-dialog__body p { margin: 0 0 0.6rem; font-size: 0.88rem; line-height: 1.55; color: var(--syhs-ink); }
.terms-dialog__ack { font-style: italic; color: var(--syhs-ink-soft); }
.terms-dialog__foot { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--syhs-line-on-light); text-align: right; }

/* ===========================================================================
   Dashboard v2 — tabs, charts, richer table, discount admin
   ========================================================================== */
.pill--type { background: rgba(80,49,124,0.12); color: var(--syhs-deep-violet); }
.dash-tabs { display: inline-flex; gap: 0.4rem; background: var(--syhs-white);
  border: 1px solid var(--syhs-line-on-light); border-radius: 999px; padding: 0.35rem;
  margin-top: -3.25rem; margin-bottom: var(--space-4);
  position: relative; z-index: 2;
  box-shadow: 0 18px 34px -22px rgba(22,18,31,0.55);
  max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.dash-tabs::-webkit-scrollbar { display: none; }
.dash-tab { white-space: nowrap; }
.dash-tab { border: 0; background: transparent; cursor: pointer; font: inherit; font-weight: 600; font-size: 0.9rem; color: var(--syhs-ink-soft); padding: 0.5rem 1.1rem; border-radius: 999px; transition: background 180ms, color 180ms; }
.dash-tab.is-active { background: var(--syhs-ground); color: var(--syhs-white); }
.dash__count { font-size: 0.82rem; color: var(--syhs-ink-soft); margin-inline: auto; }

/* Charts */
.charts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.chart-card { background: var(--syhs-white); border: 1px solid var(--syhs-line-on-light); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: 0 20px 50px -38px rgba(20,10,40,0.4); }
.chart-card__title { font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--syhs-ink-soft); margin: 0 0 var(--space-3); }
.chart-card__empty { color: var(--syhs-ink-soft); font-size: 0.9rem; margin: 0; }
.bar-row { display: grid; grid-template-columns: 8.5rem 1fr 2.2rem; align-items: center; gap: 0.6rem; margin: 0.4rem 0; }
.bar-row__label { font-size: 0.82rem; color: var(--syhs-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row__track { height: 12px; background: var(--syhs-line-on-light); border-radius: 999px; overflow: hidden; }
.bar-row__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--syhs-signal), var(--syhs-signal-alt)); min-width: 3px; transition: width 700ms var(--ease-editorial); }
.bar-row__val { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; font-size: 0.85rem; color: var(--syhs-ink); }

/* Table extras */
.email-ok { color: #2c7a58; font-weight: 700; font-size: 0.82rem; }
.email-send { border: 1px solid var(--syhs-line-on-light); background: var(--syhs-paper); border-radius: 999px; padding: 0.2rem 0.6rem; font: inherit; font-size: 0.78rem; cursor: pointer; color: var(--syhs-ink-soft); }
.email-send:hover { border-color: var(--syhs-signal-alt); color: var(--syhs-signal-alt); }

/* Discount admin */
.discount-admin { background: var(--syhs-white); border: 1px solid var(--syhs-line-on-light); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: 0 20px 50px -38px rgba(20,10,40,0.4); max-width: 52rem; }
.discount-admin__head h2 { margin: 0 0 0.3rem; font-size: 1.2rem; }
.discount-admin__head p { margin: 0 0 var(--space-4); color: var(--syhs-ink-soft); font-size: 0.9rem; }
.discount-admin__form { display: grid; grid-template-columns: 1fr 0.8fr 0.7fr 1.4fr auto; gap: 0.6rem; margin-bottom: var(--space-4); align-items: stretch; }
.discount-admin__form .field__control { min-height: 42px; }
.discount-admin__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.discount-item { display: grid; grid-template-columns: 8rem 8rem 1fr auto; align-items: center; gap: 0.8rem; padding: 0.7rem 0.9rem; border: 1px solid var(--syhs-line-on-light); border-radius: var(--radius-sm); }
.discount-item--empty { display: block; color: var(--syhs-ink-soft); }
.discount-item__code { font-weight: 800; letter-spacing: 0.04em; font-family: var(--font-sans); }
.discount-item__val { color: var(--syhs-signal); font-weight: 700; font-size: 0.9rem; }
.discount-item__label { color: var(--syhs-ink-soft); font-size: 0.88rem; }
.discount-item__del { border: none; background: none; color: var(--syhs-signal); cursor: pointer; font: inherit; font-size: 0.85rem; }
.discount-item__del:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .discount-admin__form { grid-template-columns: 1fr 1fr; }
  .bar-row { grid-template-columns: 6.5rem 1fr 2rem; }
}

/* Registration gate (dashboard Overview) */
.gate-panel { margin: var(--space-4) 0; }
.gate-panel__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); margin-bottom: 0; }
.gate-panel__switch { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; font-weight: 600; user-select: none; }
.gate-panel__switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gate-panel__switch-track { position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--syhs-line-on-light); transition: background 0.2s ease; flex-shrink: 0; }
.gate-panel__switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--syhs-white); box-shadow: 0 2px 6px rgba(20,10,40,0.3); transition: transform 0.2s ease; }
.gate-panel__switch input:checked + .gate-panel__switch-track { background: var(--syhs-signal); }
.gate-panel__switch input:checked + .gate-panel__switch-track::after { transform: translateX(18px); }
.gate-panel__switch input:focus-visible + .gate-panel__switch-track { box-shadow: 0 0 0 3px rgba(60,150,110,0.35); }
.gate-panel .field { flex: 1; min-width: 16rem; }
.gate-panel__dates {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-3); flex-basis: 100%; width: 100%;
}
.gate-panel__form > .field__hint { flex-basis: 100%; }

/* Closed-registration countdown on register.html and apply.html — the
   hero's version is right-anchored to sit beside the hero copy; here it's
   the page's only content, so it centers under the heading instead. */
#closed-gate .countdown, #apply-gate .countdown { margin-inline: auto; justify-content: center; margin-top: var(--space-4); }
@media (max-width: 640px) {
  #closed-gate .countdown, #apply-gate .countdown { grid-template-columns: repeat(2, 1fr); max-width: 20rem; }
}
/* apply.html has no hero above it (register.html's version sits inside one)
   — .apply-gate needs its own top clearance under the fixed app-bar. */
.apply-gate { padding-top: var(--space-6); text-align: center; }
.apply-gate .chooser__sub { max-width: 42ch; margin-inline: auto; }

/* "Notify me" under the countdown. One field, one button, one promise — on a
   phone the button drops under the field at full width rather than squeezing. */
.notify { max-width: 30rem; margin: var(--space-5) auto 0; text-align: center; }
.notify__lead { margin: 0 0 0.7rem; font-weight: 600; color: #fff; }
.notify__row { display: flex; gap: 0.5rem; }
.notify__input { flex: 1; min-width: 0; min-height: 48px; border-radius: 999px; padding-inline: 1.1rem; }
.notify__btn { min-height: 48px; border-radius: 999px; padding-inline: 1.4rem; white-space: nowrap; }
.notify__msg { min-height: 1.4em; margin: 0.6rem 0 0; font-size: 0.92rem; font-weight: 600; }
.notify__msg.is-good { color: var(--syhs-tint-mint); }
.notify__msg.is-bad { color: #ffb4a8; }
.notify__fine { margin: 0.2rem 0 0; font-size: 0.82rem; color: rgba(255,255,255,0.6); }
.notify.is-done .notify__input { opacity: 0.7; }
@media (max-width: 480px) {
  .notify__row { flex-direction: column; }
  .notify__btn { width: 100%; }
}

/* Every closed gate points at the one pass that never closes. */
.notify-stage {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.4rem 0.9rem;
  max-width: 30rem; margin: var(--space-5) auto 0; padding: 0.9rem 1.1rem;
  border: 1px solid rgba(102,211,161,0.45); border-radius: 18px; background: rgba(102,211,161,0.08);
  color: #fff; text-align: start; text-decoration: none;
  transition: background 180ms, border-color 180ms, transform 180ms;
}
.notify-stage:hover, .notify-stage:focus-visible { background: rgba(102,211,161,0.16); border-color: var(--syhs-tint-mint); transform: translateY(-2px); }
.notify-stage__k { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--syhs-ink); background: var(--syhs-tint-mint); border-radius: 999px; padding: 0.3rem 0.65rem; }
.notify-stage__t { font-weight: 600; line-height: 1.35; }
.notify-stage__go { font-size: 1.2rem; color: var(--syhs-tint-mint); }
[dir="rtl"] .notify-stage__go { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) { .notify-stage { transition: none; } .notify-stage:hover { transform: none; } }

/* ===========================================================================
   APPLY PAGE — alive: colour, motion, progress, interactive fields
   ========================================================================== */
.apply { position: relative; overflow: hidden; }
/* Soft drifting colour behind the form (was a flat white wall) */
.apply__aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; filter: blur(70px); opacity: 0.55; }
.apply__aurora span { position: absolute; border-radius: 50%; }
.apply__aurora span:nth-child(1) { width: 42vw; height: 42vw; left: -8%; top: -6%;
  background: radial-gradient(circle, rgba(150,130,202,0.55), transparent 68%); animation: applyA 30s ease-in-out infinite alternate; }
.apply__aurora span:nth-child(2) { width: 38vw; height: 38vw; right: -6%; top: 22%;
  background: radial-gradient(circle, rgba(102,211,161,0.45), transparent 68%); animation: applyB 36s ease-in-out infinite alternate; }
.apply__aurora span:nth-child(3) { width: 46vw; height: 46vw; left: 24%; bottom: -18%;
  background: radial-gradient(circle, rgba(14,71,106,0.4), transparent 68%); animation: applyA 42s ease-in-out infinite alternate-reverse; }
@keyframes applyA { to { transform: translate3d(12%, 8%, 0) scale(1.2); } }
@keyframes applyB { to { transform: translate3d(-10%, 12%, 0) scale(0.88); } }
.apply__grid { position: relative; z-index: 1; }

/* Top progress bar */
.apply-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 60; background: rgba(80,49,124,0.12); }
#apply-progress-bar { display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--syhs-signal-alt), var(--syhs-tint-mint)); transition: width 400ms var(--ease-editorial); }

/* Progress meter in the aside */
.apply__meter { margin-top: var(--space-3); background: var(--syhs-white); border: 1px solid var(--syhs-line-on-light);
  border-radius: var(--radius-md); padding: var(--space-3); box-shadow: 0 14px 34px -24px rgba(22,18,31,0.45); }
.apply__meter-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.apply__meter-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--syhs-ink-soft); }
.apply__meter-pct { font-size: 1.5rem; font-weight: 800; color: var(--syhs-signal-alt); font-variant-numeric: tabular-nums; }
.apply__meter-bar { height: 10px; border-radius: 999px; background: var(--syhs-line-on-light); overflow: hidden; margin: 0.6rem 0 0.5rem; }
.apply__meter-bar > span { display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--syhs-signal), var(--syhs-tint-mint)); transition: width 450ms var(--ease-editorial); }
.apply__meter-note { margin: 0; font-size: 0.85rem; color: var(--syhs-ink-soft); }
.apply__meter.is-complete { border-color: var(--syhs-signal-alt); box-shadow: 0 0 0 3px rgba(60,150,110,0.16), 0 14px 34px -24px rgba(22,18,31,0.45); }
.apply__meter.is-complete .apply__meter-note { color: var(--syhs-signal-alt); font-weight: 700; }

/* Colourful aside art */
.apply__art { background: linear-gradient(150deg, var(--syhs-ground), var(--syhs-deep-violet) 55%, var(--syhs-navy));
  position: relative; overflow: hidden; }
.apply__art::after { content: ""; position: absolute; inset: -40%;
  background: radial-gradient(40% 40% at 70% 25%, rgba(102,211,161,0.35), transparent 65%);
  animation: applyArt 12s ease-in-out infinite alternate; }
@keyframes applyArt { to { transform: translate3d(-12%, 10%, 0) scale(1.2); } }

/* Fields — interactive */
.field { position: relative; transition: transform 220ms var(--ease-editorial); }
.field.is-focused { transform: translateY(-2px); }
/* The lift above makes a focused field its own layer, which traps an open
   country list inside it and lets the next field (City) paint over the list.
   Whichever field is being used sits above its neighbours. */
.field.is-focused, .field:focus-within { z-index: 30; }
.field.is-focused .field__label { color: var(--syhs-signal-alt); }
.field__label { transition: color 200ms; }
.field__control { background: rgba(255,255,255,0.92); }
.field__control:hover { border-color: var(--syhs-tint-violet); }
.field__control:focus { box-shadow: 0 0 0 4px rgba(60,150,110,0.18), 0 10px 26px -18px rgba(22,18,31,0.5); }
/* green tick once a field has a value */
.field.is-filled::after {
  content: "✓"; position: absolute; top: 0; inset-inline-end: 0;
  width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center;
  font-size: 0.7rem; font-weight: 800; color: #fff; background: var(--syhs-signal-alt);
  animation: tickPop 340ms var(--ease-editorial);
}
@keyframes tickPop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.25); } 100% { transform: scale(1); opacity: 1; } }
.field.is-filled .field__control { border-color: rgba(60,150,110,0.45); }

/* Section separators pop */
.section-sep { color: var(--syhs-ground) !important; border-bottom-color: rgba(80,49,124,0.25) !important; font-size: 0.82rem !important; }
.section-sep::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 0.55rem;
  background: linear-gradient(135deg, var(--syhs-signal-alt), var(--syhs-tint-mint)); vertical-align: -1px; }

/* Submit button — bigger, glowing */
.apply__submit .btn--signal { font-size: 1.1rem; padding: 1rem 2.2rem; border-radius: 999px;
  box-shadow: 0 16px 34px -14px rgba(60,150,110,0.7); transition: transform 200ms, box-shadow 200ms, background 200ms; }
.apply__submit .btn--signal:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 22px 44px -14px rgba(60,150,110,0.85); }

@media (prefers-reduced-motion: reduce) {
  .apply__aurora span, .apply__art::after { animation: none; }
  .field.is-filled::after { animation: none; }
}

/* ===========================================================================
   APPLY v2 — dark, glassy, colourful. Kills the "white wall of inputs".
   Scoped to .apply so the dashboard/chooser are untouched.
   ========================================================================== */
body:has(.apply) { background: #140c24; }
.apply { background: transparent !important; color: var(--syhs-white); }
.apply__aurora { position: fixed; opacity: 1 !important; filter: blur(90px); }
.apply__aurora span:nth-child(1) { background: radial-gradient(circle, rgba(150,130,202,0.85), transparent 68%); }
.apply__aurora span:nth-child(2) { background: radial-gradient(circle, rgba(102,211,161,0.7), transparent 68%); }
.apply__aurora span:nth-child(3) { background: radial-gradient(circle, rgba(14,71,106,0.8), transparent 68%); }
.apply::before { /* subtle grid so it isn't an empty void */
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: 0.22;
  background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 75%);
  mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 75%);
}

/* The form becomes one glass panel */
.apply__form {
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-md);
  padding: clamp(1.4rem, 3.2vw, 2.6rem);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 40px 90px -50px rgba(0,0,0,0.9);
}
.apply__form-title { color: var(--syhs-white) !important; }
.apply__form-sub { color: rgba(255,255,255,0.7) !important; }

/* Fields — glass, light text, mint focus */
.apply .field__label { color: rgba(255,255,255,0.92); font-size: 0.92rem; }
.apply .field__opt { color: rgba(255,255,255,0.5); }
.apply .field__hint { color: rgba(255,255,255,0.55); }
.apply .field__control,
.apply .field select,
.apply .field textarea {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #fff !important;
  border-radius: 12px;
  transition: background 200ms, border-color 200ms, box-shadow 200ms, transform 200ms;
}
.apply .field__control::placeholder, .apply textarea::placeholder { color: rgba(255,255,255,0.4); }
.apply .field__control:hover { background: rgba(255,255,255,0.1) !important; border-color: rgba(150,130,202,0.7) !important; }
.apply .field__control:focus, .apply select:focus, .apply textarea:focus {
  background: rgba(255,255,255,0.13) !important;
  border-color: var(--syhs-tint-mint) !important;
  box-shadow: 0 0 0 4px rgba(102,211,161,0.22), 0 14px 30px -18px rgba(102,211,161,0.7) !important;
}
/* native dropdown options need a dark background */
.apply select option { background: #241640; color: #fff; }
.apply .field.is-filled .field__control { border-color: rgba(102,211,161,0.6) !important; }
.apply .field.is-filled::after { box-shadow: 0 0 0 4px rgba(102,211,161,0.18); }

/* Numbered, colourful step headers */
.apply .section-sep {
  color: #fff !important; border: none !important;
  display: flex; align-items: center; gap: 0.7rem;
  font-size: 1rem !important; letter-spacing: 0.02em !important; text-transform: none !important;
  margin: var(--space-5) 0 var(--space-3) !important; padding: 0 !important;
}
.apply .section-sep::before {
  width: 30px !important; height: 30px !important; border-radius: 10px !important; margin: 0 !important;
  background: linear-gradient(135deg, var(--syhs-tint-mint), var(--syhs-tint-violet)) !important;
  box-shadow: 0 8px 20px -8px rgba(102,211,161,0.8);
}

/* Radio chips on dark */
.apply .radio-chip { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.05); }
.apply .radio-chip:hover { border-color: var(--syhs-tint-mint); }
.apply .radio-chip:has(input:checked) { background: rgba(102,211,161,0.2); border-color: var(--syhs-tint-mint); color: #fff; }

/* Aside cards on dark */
.apply__meter { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); backdrop-filter: blur(14px); }
.apply__meter-label { color: rgba(255,255,255,0.65); }
.apply__meter-pct { color: var(--syhs-tint-mint); }
.apply__meter-bar { background: rgba(255,255,255,0.14); }
.apply__meter-note { color: rgba(255,255,255,0.75); }
.apply__meter.is-complete .apply__meter-note { color: var(--syhs-tint-mint); }
.apply .type-panel { background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.16) !important; backdrop-filter: blur(14px); }
.apply .type-panel__price { color: var(--syhs-tint-mint) !important; }
.apply .type-panel__aud { color: rgba(255,255,255,0.72) !important; }
.apply .type-panel__guides li { color: rgba(255,255,255,0.85) !important; }
.apply .type-panel__window { color: var(--syhs-tint-mint) !important; }
.apply .apply__track-name { color: #fff !important; }
.apply .apply__track-tagline { color: rgba(255,255,255,0.72) !important; }
.apply .apply__aside-note { color: rgba(255,255,255,0.6); }
.apply .price-box { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); }
.apply .price-box__label { color: rgba(255,255,255,0.6); }
.apply .price-box__new { color: #fff; }
.apply .price-box__old { color: #ff9a9a; }
.apply .consent { background: rgba(102,211,161,0.1); border-color: rgba(102,211,161,0.4); }
.apply .consent__text { color: rgba(255,255,255,0.9); }
.apply .consent__text a { color: var(--syhs-tint-mint); }
.apply .form-note { color: rgba(255,255,255,0.6); }
.apply .field__error { color: #ff9a9a; }
.apply .btn--outline { border-color: rgba(255,255,255,0.4); color: #fff; }

/* Celebration burst when the form hits 100% */
.apply__meter.is-complete { animation: meterPop 600ms var(--ease-editorial); }
@keyframes meterPop { 0%,100% { transform: scale(1); } 40% { transform: scale(1.045); } }
.spark { position: fixed; width: 9px; height: 9px; border-radius: 50%; pointer-events: none; z-index: 90; }

/* Confirmation on dark */

@media (max-width: 860px) { .apply__form { padding: var(--space-4); } }

/* Header + progress bar on the dark apply page */
body:has(.apply) .app-bar { background: rgba(20,12,36,0.72); backdrop-filter: blur(14px); border-bottom-color: rgba(255,255,255,0.12); }
body:has(.apply) .app-bar__brand { color: #fff; }
body:has(.apply) .app-bar__back { color: rgba(255,255,255,0.72); }
body:has(.apply) .app-bar__back:hover { color: var(--syhs-tint-mint); }
body:has(.apply) .apply-progress { background: rgba(255,255,255,0.1); }
.pill--tbd { background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.92); }

/* ===========================================================================
   FORM KIT — country combobox, age readout, identity-document chooser
   (assets/js/form-kit.js)

   NOTE ON SURFACE: apply.html is a DARK page — body is near-black violet and
   the form is a translucent glass panel over it, with white inherited text.
   Every colour below is therefore a light-on-dark value, matching the
   existing .field__label / .field__hint conventions, and each was measured
   against the composited panel rather than assumed.
   ========================================================================== */

/* --- Country combobox --------------------------------------------------- */
.cbo { position: relative; }
.cbo__input { width: 100%; padding-inline-start: 2.6rem; }
.cbo:not(.is-chosen) .cbo__input { padding-inline-start: 0.9rem; }
.cbo__selected {
  position: absolute; inset-inline-start: 0.75rem; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; pointer-events: none; line-height: 1; z-index: 1;
}
.cbo__flag { font-size: 1.15rem; line-height: 1; }
/* Windows has no flag glyphs — show the ISO code in a chip instead. */
.cbo__flag--code {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.92); color: var(--syhs-ground);
  padding: 0.16rem 0.3rem; border-radius: 3px; font-family: var(--font-sans);
}
.cbo__list {
  position: absolute; z-index: 40; top: calc(100% + 4px); inset-inline: 0;
  max-height: 17rem; overflow-y: auto; margin: 0; padding: 0.3rem;
  list-style: none; background: var(--syhs-deep-violet);
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-sm);
  box-shadow: 0 28px 60px -20px rgba(0, 0, 0, 0.7);
}
.cbo__opt {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.6rem; border-radius: 6px; cursor: pointer;
  font-size: 0.95rem; color: rgba(255, 255, 255, 0.92); min-height: 44px;
}
.cbo__opt--divide { border-bottom: 1px solid rgba(255, 255, 255, 0.18); margin-bottom: 0.3rem; padding-bottom: 0.7rem; }
.cbo__opt:hover, .cbo__opt.is-active { background: rgba(255, 255, 255, 0.14); color: #fff; }
.cbo__opt.is-active { outline: 2px solid var(--syhs-tint-mint); outline-offset: -2px; }
.cbo__name { flex: 1; }
.cbo__empty { padding: 0.8rem 0.6rem; color: rgba(255, 255, 255, 0.72); font-size: 0.9rem; }

/* --- Age readout -------------------------------------------------------- */
.age-readout { margin: 0.45rem 0 0; font-size: 0.88rem; font-weight: 600; min-height: 1.2em; }
.age-readout.is-ok { color: var(--syhs-tint-mint); }
.age-readout.is-bad { color: var(--syhs-error-on-dark); }
/* Not colour alone — each state carries a glyph too. */
.age-readout.is-ok::before,
.age-readout.is-bad::before { margin-inline-end: 0.4rem; font-weight: 700; }
.age-readout.is-ok::before { content: "\2713"; }
.age-readout.is-bad::before { content: "\0021"; }

/* --- Identity document chooser ------------------------------------------ */
.docseg {
  display: flex; gap: 0.3rem; margin-bottom: 0.6rem; padding: 0.25rem;
  background: rgba(255, 255, 255, 0.08); border-radius: 999px;
  width: fit-content; max-width: 100%; flex-wrap: wrap;
}
.docseg__opt {
  font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  border: 0; background: none; color: rgba(255, 255, 255, 0.75);
  padding: 0.5rem 1rem; min-height: 44px; border-radius: 999px;
  transition: background 180ms, color 180ms;
}
.docseg__opt:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.docseg__opt.is-on { background: rgba(255, 255, 255, 0.95); color: var(--syhs-ground); }
.docseg__opt:focus-visible { outline: 3px solid var(--syhs-tint-mint); outline-offset: 2px; }

/* ===========================================================================
   STEPPED FLOW — assets/js/form-steps.js (same dark surface)
   ========================================================================== */
.steps__rail { display: flex; gap: 0.4rem; list-style: none; margin: 0 0 var(--space-4); padding: 0; flex-wrap: wrap; }
.steps__pip {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
  padding: 0.45rem 0.85rem 0.45rem 0.45rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18); background: transparent;
  color: rgba(255, 255, 255, 0.72); font-size: 0.82rem; font-weight: 600;
  min-height: 44px; transition: background 200ms, color 200ms, border-color 200ms;
}
.steps__num {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.92);
  font-size: 0.78rem; font-weight: 800; flex-shrink: 0;
}
.steps__pip.is-current { border-color: rgba(255, 255, 255, 0.55); color: #fff; background: rgba(255, 255, 255, 0.09); }
.steps__pip.is-current .steps__num { background: #fff; color: var(--syhs-ground); }
.steps__pip.is-done .steps__num { background: var(--syhs-tint-mint); color: var(--syhs-ground); font-size: 0; }
/* Done state carries a tick, not just a colour change. */
.steps__pip.is-done .steps__num::after { content: "\2713"; font-size: 0.8rem; }
.steps__pip:focus-visible { outline: 3px solid var(--syhs-tint-mint); outline-offset: 2px; }

.step-panel { display: none; }
.step-panel.is-active { display: block; }
.step-panel__head { margin-bottom: var(--space-4); }
.step-panel__count { margin: 0 0 0.3rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--syhs-tint-mint); }
.step-panel__title { margin: 0 0 0.3rem; font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--tracking-tight); color: var(--syhs-white); }
.step-panel__title:focus-visible { outline: 3px solid var(--syhs-tint-mint); outline-offset: 4px; }
.step-panel__blurb { margin: 0; color: rgba(255, 255, 255, 0.72); font-size: 0.95rem; }

.steps__nav { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }
.steps__nav #step-next { margin-inline-start: auto; }
.steps__err { margin: 0; flex: 1; min-width: 12ch; font-size: 0.88rem; font-weight: 600; color: var(--syhs-error-on-dark); }

.draft-note {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  margin-bottom: var(--space-4); padding: 0.8rem 1rem; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid color-mix(in srgb, var(--syhs-tint-mint) 45%, transparent);
  font-size: 0.9rem; color: rgba(255, 255, 255, 0.92);
}
.draft-note__btn {
  font: inherit; font-weight: 700; cursor: pointer; min-height: 44px;
  padding: 0.4rem 0.9rem; border-radius: 999px;
  border: 1px solid var(--syhs-tint-mint); background: var(--syhs-tint-mint); color: var(--syhs-ground);
}
.draft-note__btn--quiet { background: transparent; color: rgba(255, 255, 255, 0.8); border-color: rgba(255, 255, 255, 0.3); }
.draft-note__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@media (max-width: 620px) {
  .steps__label { display: none; }
  .steps__pip { padding: 0.45rem; }
  .steps__nav #step-next, .steps__nav #step-back { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .steps__pip, .docseg__opt { transition: none; }
}

/* --- Phone: dial-code chooser + national number -------------------------- */
.tel { display: flex; gap: 0.4rem; position: relative; align-items: stretch; }
.tel__dial {
  display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
  font: inherit; font-size: 0.92rem; font-weight: 600; white-space: nowrap;
  padding: 0 0.75rem; min-height: 44px; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.tel__dial:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.tel__dial:focus-visible { outline: 3px solid var(--syhs-tint-mint); outline-offset: 2px; }
.tel__num { flex: 1; min-width: 0; }
.tel__code { font-variant-numeric: tabular-nums; }
.tel__pop {
  position: absolute; z-index: 40; top: calc(100% + 4px); inset-inline-start: 0;
  width: min(24rem, 100%); padding: 0.4rem; border-radius: var(--radius-sm);
  background: var(--syhs-deep-violet); border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 28px 60px -20px rgba(0, 0, 0, 0.7);
}
.tel__search { width: 100%; margin-bottom: 0.4rem; }
.tel__list { position: static; max-height: 14rem; box-shadow: none; border: 0; background: none; padding: 0; }
.tel__list .cbo__opt { gap: 0.55rem; }
.tel__list .tel__code { margin-inline-start: auto; color: rgba(255, 255, 255, 0.75); font-size: 0.85rem; }

/* --- Step nav: Back is deliberately quiet -------------------------------- */
/* Back was inheriting .apply .btn--outline — white text in a white border,
   which read as a second primary action competing with Continue / Complete
   registration. One primary action per step; Back steps back. */
.steps__nav #step-back {
  flex-direction: row; align-items: center; gap: 0.45rem;
  background: none; border-color: transparent;
  color: rgba(255, 255, 255, 0.7);
  min-height: 44px; padding: 0.6rem 0.9rem;
}
.steps__nav #step-back::before { content: "\2190"; font-size: 1em; line-height: 1; }
[dir="rtl"] .steps__nav #step-back::before { content: "\2192"; }
.steps__nav #step-back:hover {
  background: rgba(255, 255, 255, 0.1); color: #fff;
  border-color: transparent; transform: none;
}
.steps__nav #step-back:focus-visible { outline: 3px solid var(--syhs-tint-mint); outline-offset: 2px; }

/* Submit now lives in the nav row; push it to the far end like Continue. */
.steps__nav .apply__submit { margin-inline-start: auto; }
.steps__nav #step-next { margin-inline-start: auto; }

@media (max-width: 620px) {
  /* Stacked on small screens — keep a real gap between them. */
  .steps__nav { row-gap: var(--space-3); }
  .steps__nav .apply__submit { margin-inline-start: 0; width: 100%; }
  .steps__nav .apply__submit .btn--signal { width: 100%; justify-content: center; align-items: center; }
}

/* Error text sits between Back and the primary action without growing —
   flex:1 made it consume the row and wrap the button onto a second line. */
.steps__nav .steps__err { flex: 0 1 auto; min-width: 0; }
.steps__note { margin: var(--space-3) 0 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); }

/* .btn and .apply__submit both set `display`, and a class beats the browser's
   built-in [hidden] rule — so "hidden" buttons kept reserving space in the
   flex row. That is what pushed Complete registration onto its own cramped
   line under Back. Restore the intent explicitly. */

/* ===========================================================================
   CONFIRMATION SCREEN
   apply.html is a dark surface, but these were using the light-surface ink
   tokens — the heading rendered near-black on near-black and was effectively
   invisible. The dark values previously existed only behind an
   `.apply-confirm-dark` class that nothing ever added, so they never applied.
   Set unconditionally here, measured against the composited background.
   ========================================================================== */
.confirm__check { color: var(--syhs-tint-mint); }
.confirm__title { color: var(--syhs-white); }
.confirm__sub {
  color: rgba(255, 255, 255, 0.82);
  max-width: 34rem; margin-inline: auto;
  font-size: var(--fs-body-lg); line-height: 1.5;
}
.confirm__email { color: rgba(255, 255, 255, 0.62); font-size: 0.88rem; }

/* The reference is the one thing they must keep — give it real presence
   rather than letting it read as just another panel. */
.confirm__badge {
  background: linear-gradient(165deg,
    color-mix(in srgb, var(--syhs-ground) 92%, #fff),
    color-mix(in srgb, var(--syhs-ground) 70%, #000));
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.85);
  margin-block: var(--space-4) var(--space-3);
}
.confirm__badge-label { color: var(--syhs-tint-mint); font-weight: 700; }
.confirm__ref { font-variant-numeric: tabular-nums; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.6rem); }

/* Two equal outline buttons read as no decision at all. Returning home is the
   ordinary next step; registering again is the rarer one. */
.confirm__actions .btn { min-height: 48px; align-items: center; flex-direction: row; }
.confirm__actions .btn--outline {
  border-color: rgba(255, 255, 255, 0.45); color: #fff;
}
.confirm__actions .btn--outline:hover {
  background: rgba(255, 255, 255, 0.12); border-color: #fff;
}
/* Mint with dark text, not white-on-signal-alt: white on that green measures
   3.45:1 and fails AA at this size. */
.confirm__actions .btn--primary {
  background: var(--syhs-tint-mint); color: var(--syhs-ground); border-color: transparent;
}
.confirm__actions .btn--primary:hover {
  background: color-mix(in srgb, var(--syhs-tint-mint) 85%, #fff);
}

/* A class that sets `display` outranks the browser's built-in [hidden] rule
   (equal specificity, author sheet wins). Every element this flow toggles via
   .hidden therefore needs it stated explicitly — without this the completed
   form stayed in the document after submitting, merely scrolled out of view
   above the confirmation. */
.confirm__qr-note { margin: 0.5rem 0 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.65); }

/* ===========================================================================
   LOOKUP — "Find your registration" (lookup.html)
   ========================================================================== */
.lookup { position: relative; z-index: 1; max-width: 42rem; margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) var(--gutter); }
.lookup__title { font-family: var(--font-serif); font-style: italic;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); margin: 0 0 0.6rem; color: var(--syhs-white); }
.lookup__lede { margin: 0 0 var(--space-4); color: rgba(255,255,255,0.8); font-size: var(--fs-body-lg); line-height: 1.5; }
.lookup__form { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.lookup__form .field { width: 100%; }
.lookup__results { margin-top: var(--space-4); display: grid; gap: var(--space-3); }
.lookup__card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-md); padding: var(--space-4); text-align: center; color: rgba(255,255,255,0.9); }
.lookup__card--note { text-align: start; }
.lookup__card-title { margin: 0 0 0.5rem; font-size: var(--fs-h3); color: var(--syhs-white); }
.lookup__card p { margin: 0; line-height: 1.55; }
.lookup__card a { color: var(--syhs-tint-mint); }
.lookup__card-label { margin: 0 0 0.3rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--syhs-tint-mint); }
.lookup__ref { margin: 0 0 var(--space-3); font-weight: 700; letter-spacing: 0.08em;
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.3rem); color: var(--syhs-white); font-variant-numeric: tabular-nums; }
.lookup__qr { display: inline-block; background: #fff; padding: 10px; border-radius: 12px; }
.lookup__qr canvas { display: block; }
.lookup__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4);
  margin: var(--space-3) 0 0; }
.lookup__meta div { text-align: center; }
.lookup__meta dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.6); margin: 0 0 0.2rem; }
.lookup__meta dd { margin: 0; font-weight: 600; color: rgba(255,255,255,0.92); }
.lookup__foot { margin: var(--space-4) 0 0; font-size: 0.88rem; color: rgba(255,255,255,0.62); }

/* ===========================================================================
   REVIEW STEP — read your answers back before submitting
   ========================================================================== */
.review-list { display: grid; gap: var(--space-3); }
.review-group { border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4); background: rgba(255,255,255,0.04); }
.review-group__head { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-bottom: 0.6rem; }
.review-group__head h4 { margin: 0; font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--syhs-tint-mint); }
.review-group__edit { font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer;
  background: none; border: 1px solid rgba(255,255,255,0.28); color: rgba(255,255,255,0.85);
  border-radius: 999px; padding: 0.35rem 0.9rem; min-height: 44px; }
.review-group__edit:hover { background: rgba(255,255,255,0.12); color: #fff; }
.review-group__edit:focus-visible { outline: 3px solid var(--syhs-tint-mint); outline-offset: 2px; }
.review-group dl { margin: 0; display: grid; gap: 0.5rem; }
.review-group dl > div { display: grid; grid-template-columns: minmax(9rem, 34%) 1fr; gap: 0.75rem;
  align-items: baseline; }
.review-group dt { margin: 0; font-size: 0.82rem; color: rgba(255,255,255,0.62); }
.review-group dd { margin: 0; color: rgba(255,255,255,0.94); overflow-wrap: anywhere; }
.review-empty { color: rgba(255,255,255,0.7); }
@media (max-width: 620px) {
  .review-group dl > div { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* --- Dashboard: lifecycle pills, decision actions, toast ------------------ */
.pill--st-pending { background: var(--syhs-line-on-light); color: var(--syhs-ink-soft); }
.pill--st-ok      { background: rgba(60,150,110,0.18); color: #22694c; }
.pill--st-warn    { background: rgba(180,120,20,0.16); color: #8a5a06; }
.pill--st-bad     { background: rgba(179,38,30,0.12); color: #96201a; }
select.pill { border: none; font: inherit; padding: 0.2rem 0.45rem; border-radius: 999px; cursor: pointer; }

.row-actions { white-space: nowrap; }
.act { font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; margin-inline-end: 0.3rem;
  padding: 0.4rem 0.7rem; min-height: 34px; border-radius: 999px; border: 1px solid transparent; }
.act--ok   { background: rgba(60,150,110,0.16); color: #22694c; border-color: rgba(60,150,110,0.4); }
.act--warn { background: rgba(180,120,20,0.14); color: #8a5a06; border-color: rgba(180,120,20,0.4); }
.act--bad  { background: rgba(179,38,30,0.10); color: #96201a; border-color: rgba(179,38,30,0.35); }
/* Neutral, for controls that do not move anyone through the pipeline — resending
   a pass changes nothing about a record, so it must not look like a decision. */
.act--quiet { background: rgba(20,20,40,0.05); color: var(--syhs-ink-soft);
  border-color: rgba(20,20,40,0.18); font-weight: 600; }
.act:hover { filter: brightness(0.94); }
.act:disabled { opacity: 0.5; cursor: progress; }
.act:focus-visible { outline: 3px solid var(--syhs-ground); outline-offset: 2px; }
.act__sent { color: #22694c; font-weight: 700; margin-inline-end: 0.4rem; }
.act__done { font-size: 0.8rem; color: var(--syhs-ink-soft); }

.dash-toast { position: fixed; inset-inline: 50%; bottom: 1.5rem; transform: translate(-50%, 1rem);
  max-width: min(30rem, 90vw); width: max-content; padding: 0.9rem 1.2rem; border-radius: var(--radius-sm);
  background: var(--syhs-ground); color: #fff; font-size: 0.92rem; line-height: 1.45;
  box-shadow: 0 24px 50px -18px rgba(0,0,0,0.55); opacity: 0; pointer-events: none;
  transition: opacity 220ms, transform 220ms; z-index: 1000; }
.dash-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.dash-toast.is-bad { background: #96201a; }
@media (prefers-reduced-motion: reduce) { .dash-toast { transition: none; } }

/* ===========================================================================
   CHECK-IN (checkin.html) — built for a phone held at a door
   ========================================================================== */
.checkin { min-height: 100dvh; background: var(--syhs-ground); color: #fff;
  display: flex; flex-direction: column; }
.checkin__bar { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding: 0.9rem var(--gutter); border-bottom: 1px solid rgba(255,255,255,0.14); }
.checkin__brand { font-weight: 700; letter-spacing: 0.03em; }
.checkin__signout { font: inherit; font-weight: 600; cursor: pointer; background: none;
  border: 1px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.85);
  border-radius: 999px; padding: 0.5rem 1rem; min-height: 44px; }
.checkin__signout:hover { background: rgba(255,255,255,0.12); color: #fff; }
.checkin__stage { flex: 1; width: min(34rem, 100%); margin: 0 auto; padding: var(--space-4) var(--gutter); display: grid; gap: var(--space-4); }
.checkin__scanner { position: relative; border-radius: var(--radius-md); overflow: hidden;
  background: #000; aspect-ratio: 4 / 3; }
.checkin__scanner video { width: 100%; height: 100%; object-fit: cover; display: block; }
.checkin__reticle { position: absolute; inset: 18%; border: 3px solid var(--syhs-tint-mint);
  border-radius: 14px; box-shadow: 0 0 0 100vmax rgba(0,0,0,0.35); }
.checkin__controls { display: grid; gap: var(--space-3); }
.checkin__controls .btn { width: 100%; justify-content: center; align-items: center; min-height: 52px; font-size: 1.05rem; }
.checkin__manual .field__label { color: rgba(255,255,255,0.85); }
.checkin__manual-row { display: flex; gap: 0.5rem; }
.checkin__manual-row .field__control { flex: 1; text-transform: uppercase; letter-spacing: 0.06em; }
.checkin__manual-row .btn { width: auto; white-space: nowrap; }
/* A reference field with SYHF- fixed in front: only the part after it is typed. */
.ref-field { flex: 1; min-width: 0; display: flex; align-items: stretch; border-radius: var(--radius-md, 12px); background: rgba(255,255,255,0.92); border: 1px solid rgba(22,18,31,0.18); }
.ref-field:focus-within { outline: 2px solid var(--syhs-tint-mint); outline-offset: 2px; }
.ref-field__pre { display: flex; align-items: center; padding-inline: 0.9rem 0.1rem; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700; color: #5b5470; user-select: none; }
.checkin__manual-row .ref-field__in { flex: 1; min-width: 0; border: 0; background: transparent; padding-inline-start: 0.1rem; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.checkin__manual-row .ref-field__in:focus { outline: none; }
.checkin__hint { margin: 0; font-size: 0.88rem; color: rgba(255,255,255,0.7); min-height: 1.2em; }

/* The verdict has to be readable at arm's length, in a queue, in bad light. */
.verdict { border-radius: var(--radius-md); padding: var(--space-4); text-align: center;
  border: 2px solid transparent; }
.verdict--ok   { background: rgba(102,211,161,0.16); border-color: var(--syhs-tint-mint); }
.verdict--warn { background: rgba(255,196,84,0.14); border-color: #ffc454; }
.verdict--bad  { background: rgba(255,138,128,0.14); border-color: var(--syhs-error-on-dark); }
.verdict__headline { margin: 0 0 0.6rem; font-size: clamp(1.5rem, 1rem + 2.4vw, 2.1rem);
  font-weight: 800; letter-spacing: var(--tracking-tight); }
.verdict--ok .verdict__headline { color: var(--syhs-tint-mint); }
.verdict--warn .verdict__headline { color: #ffc454; }
.verdict--bad .verdict__headline { color: var(--syhs-error-on-dark); }
.verdict__name { margin: 0 0 0.2rem; font-size: 1.25rem; font-weight: 700; color: #fff; }
.verdict__ref { margin: 0 0 var(--space-3); font-size: 0.9rem; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.7); font-variant-numeric: tabular-nums; }
.verdict__meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem;
  margin: 0 0 var(--space-3); text-align: start; }
.verdict__meta dt { margin: 0 0 0.15rem; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: rgba(255,255,255,0.62); }
.verdict__meta dd { margin: 0; font-weight: 600; color: rgba(255,255,255,0.94); }
.verdict__admit { width: 100%; justify-content: center; align-items: center; min-height: 54px; font-size: 1.05rem; }
.verdict__note { margin: 0; color: rgba(255,255,255,0.8); font-size: 0.9rem; }
.app-bar__back--cta { border: 1px solid rgba(255,255,255,0.35); border-radius: 999px;
  padding: 0.45rem 0.9rem; margin-inline-end: 0.5rem; text-decoration: none;
  color: rgba(255,255,255,0.9); font-weight: 600; }
.app-bar__back--cta:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* ============================================================================
   CHECK-IN — the shift bar
   A volunteer scanning a queue looks at the badge, not the screen. The bar is
   pinned so the session being recorded is impossible to miss: scanning fifty
   people into the wrong session is the expensive mistake here, and it is
   silent unless something says otherwise.
   ========================================================================== */
.shift-bar { position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; padding: 0.7rem clamp(0.9rem, 3vw, 1.5rem);
  background: var(--syhs-deep-violet); color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.16); }
.shift-bar__main { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.shift-bar__session { font-weight: 800; font-size: 1rem; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shift-bar__who { font-size: 0.82rem; color: rgba(255,255,255,0.82); }
.shift-bar__side { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.shift-bar__tally { font-size: 0.85rem; font-weight: 700;
  padding: 0.3rem 0.7rem; border-radius: 999px;
  background: var(--syhs-signal-alt); color: #fff; }
/* .btn carries a light fill for light surfaces; on the deep violet bar that
   renders as a grey slab with grey text. Force it back to an outline. */
.shift-bar .btn--compact { background: none; border: 1px solid rgba(255,255,255,0.5);
  color: #fff; }
.shift-bar .btn--compact:hover { border-color: #fff; background: rgba(255,255,255,0.14); color: #fff; }

.shift-screen { min-height: 100vh; display: grid; place-items: center;
  padding: clamp(1.5rem, 5vw, 3rem); background: var(--syhs-ground); }
/* The gate sits on the deep violet ground, so the hint has to be light —
   --syhs-ink-soft is for light surfaces and vanishes here. */
.shift-screen .field__hint { color: rgba(255,255,255,0.82); }
.shift-screen select.field__control { width: 100%; }

.verdict--done .verdict__detail { font-size: 1.05rem; font-weight: 600; margin: 0.35rem 0 0; }

/* ============================================================================
   DASHBOARD — attendance
   ========================================================================== */
/* 30rem, not 22: session titles here are full sentences ("Building a
   Competitive Healthcare Economy: Investment, Innovation & Saudi's Future"),
   and at 22rem the count column was pushed out of the table entirely. */
.att-cols { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); margin-block: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); }
.att-col { min-width: 0; }
/* Fixed layout, or the session title (a full sentence) takes the whole width
   and pushes the number it exists to show off the edge of the table. The full
   label stays available on hover and in every export. */
.att-col .dash__table { table-layout: fixed; width: 100%; }
.att-col .dash__table th:first-child,
.att-col .dash__table td:first-child { width: auto; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
/* The two tables carry different shapes: sessions end in a count, people end
   in a timestamp, so they cannot share one column template. */
#att-sessions-table th:nth-child(2), #att-sessions-table td:nth-child(2) { width: 34%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#att-sessions-table th:nth-child(3), #att-sessions-table td:nth-child(3) { width: 6rem; }

#att-people-table th:nth-child(2), #att-people-table td:nth-child(2) { width: 6rem; }
#att-people-table th:nth-child(3), #att-people-table td:nth-child(3) { width: 9.5rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-col__title { margin: var(--space-4) 0 var(--space-3); font-size: 1.15rem; font-weight: 800;
  color: var(--syhs-ink); }
.att-col__note { font-weight: 400; color: var(--syhs-ink-soft); font-size: 0.92rem; }

.dash__table td.num { text-align: end; white-space: nowrap; position: relative; }
.dash__table td.muted { color: var(--syhs-ink-soft); font-size: 0.9rem; }

/* A bar behind the count, so the busy sessions are findable without reading
   every number. Sits behind the figure rather than beside it — the column is
   already narrow on a laptop. */
.att-bar { position: absolute; inset: 4px auto 4px 0; display: block;
  width: var(--w, 0%); border-radius: 4px;
  background: color-mix(in srgb, var(--syhs-signal-alt) 22%, transparent); }
.dash__table td.num strong { position: relative; }

/* A query that failed and an event nobody attended both render as zero. This
   is how the dashboard tells them apart. */
.dash__alert { margin: var(--space-4) 0 0; padding: 0.85rem 1.1rem; border-radius: var(--radius-sm);
  background: #fdf2f2; border: 1px solid #e6b8b8; color: #7d2b2b;
  font-size: 0.92rem; line-height: 1.5; }

/* Undo sits under the confirmation, not beside it: the volunteer's next action
   is almost always the next badge, so this must be reachable without being in
   the way of that. */
.verdict__undo { display: inline-block; margin: 0.75rem 0 0; padding: 0.45rem 0.9rem;
  border: 1px solid rgba(255,255,255,0.45); border-radius: 999px;
  background: none; color: inherit; font: inherit; font-size: 0.85rem; font-weight: 600;
  cursor: pointer; -webkit-appearance: none; appearance: none; }
.verdict__undo:hover { background: rgba(255,255,255,0.14); border-color: currentColor; }
.verdict__undo:disabled { opacity: 0.6; cursor: default; }

/* ---- Registration hub: who each option is for ----------------------------
   The cards used to lead with 01 / 02 / 03. Those numbers were the only thing
   in that slot, and they asserted a sequence that does not exist — worse, the
   sequence they implied was General → VVIP, as though the tiers were a ladder
   you climb rather than four doors, three of which are shut to most people.
   Eligibility goes there instead: it is the first thing anyone needs and the
   only thing that actually distinguishes the four. */
.type-choice__who {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--syhs-tint-mint);
}

.type-choice__for {
  font-size: 0.84rem; line-height: 1.5; margin: 0 0 0.9rem;
  color: rgba(255, 255, 255, 0.78);
}
.type-choice__for span {
  display: block; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.2rem;
}

/* ---- Registration hub: 4-day badge row ------------------------------------
   Each Stage pass covers the full 26–29 Nov window, but that was invisible on
   the card itself — a reader had to already know the programme spanned four
   days. Four small day-chips say it at a glance, styled after the same
   gradient chip tracks.css uses for its own day markers, reimplemented here
   since register.html doesn't load tracks.css. */
.type-choice__days { display: flex; gap: 0.3rem; margin: 0.5rem 0 0.8rem; }
.type-choice__day {
  flex: 1; text-align: center; font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.02em; padding: 0.28rem 0; border-radius: 8px;
  background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85);
}

/* Per-day pricing breakdown — shown only once dayPrices stops being null in
   registration-types.js. Kept as its own line rather than crowding the pill,
   since "from 150 SAR/day · 4 days" reads better on its own row. */
.type-choice__day-price {
  font-size: 0.72rem; color: rgba(255,255,255,0.72); margin: -0.4rem 0 0.6rem;
}

/* A pass type paused from the dashboard (closed_types). */
.type-choice.is-closed { opacity: 0.55; cursor: not-allowed; pointer-events: none; filter: saturate(0.6); }
.type-choice.is-closed .track-choice__cta { color: rgba(255, 255, 255, 0.8); }