/* Components. Semantic tokens only (var(--color-…) etc.); no colour values here.
 * Mobile-first single column, centred at --page-max on wide screens. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading);
  overflow-wrap: break-word;
  overflow-x: clip; /* the full-bleed pay bar uses 100vw, which can exceed the client width */
}
h1, h2, h3, p, ul, dl, dd, fieldset { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ul[role='list'] { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-link); text-underline-offset: 0.15em; }
button, input { font: inherit; color: inherit; }

/* Visible focus everywhere. */
:focus-visible {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
main:focus { outline: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: absolute; left: var(--gutter); top: calc(-1 * var(--nav-height));
  z-index: 20; padding: var(--space-2) var(--space-4);
  background: var(--color-surface); color: var(--color-text);
  border-radius: var(--radius-sm);
}
.skip-link:focus { top: var(--space-2); }

/* ---------- Nav bar ---------- */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: var(--color-surface);
  box-shadow: var(--shadow-bar);
}
.nav__inner {
  display: flex; align-items: center; gap: var(--space-4);
  max-width: var(--page-max); margin: 0 auto;
  height: var(--nav-height); padding: 0 var(--gutter);
}
.nav__logo { flex: none; display: block; border-radius: 50%; }
.nav__logo img { width: var(--logo-size); height: var(--logo-size); }
.nav__title {
  flex: 1; min-width: 0;
  font-size: var(--text-2xl); font-weight: var(--weight-medium); line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav__title-menu { display: none; }
.nav:has(.menu[open]) .nav__title-page {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
.nav:has(.menu[open]) .nav__title-menu { display: inline; }

/* ---------- Menu (details/summary, works without JS) ---------- */
.menu { flex: none; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__panel {
  position: fixed; left: 0; right: 0; top: var(--nav-height); bottom: 0;
  overflow-y: auto;
  background: var(--color-bg);
  box-shadow: var(--shadow-bar-inset);
  padding: var(--space-4) var(--gutter);
}
.menu__list {
  display: grid; gap: var(--space-3);
  max-width: calc(var(--page-max) - 2 * var(--gutter)); margin: 0 auto;
}
.menu__row {
  display: flex; align-items: center; justify-content: space-between;
  min-height: calc(var(--tap) + var(--space-4));
  color: var(--color-text); text-decoration: none;
  font-size: var(--text-xl); font-weight: var(--weight-medium);
  -webkit-tap-highlight-color: transparent;
}
.menu__row .icon { width: 20px; height: 20px; }
@media (hover: hover) {
  .menu__row:hover { border-color: var(--color-text); }
}

/* Rows slide in when the panel opens; the delay staggers them down the list. */
@keyframes menu-row-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.menu[open] .menu__row { animation: menu-row-in 160ms ease-out both; }
.menu[open] .menu__list li:nth-child(2) .menu__row { animation-delay: 40ms; }
.menu[open] .menu__list li:nth-child(3) .menu__row { animation-delay: 80ms; }
@media (prefers-reduced-motion: reduce) {
  .menu[open] .menu__row { animation: none; }
}

/* Hamburger, after "Spring" from Hamburgers by Jonathan Suh (MIT,
 * https://jonsuh.com/hamburgers/): the bars spring together into an X.
 * Driven by details[open] instead of an .is-active class, so no JS is needed. */
.hamburger {
  display: grid; place-items: center;
  width: var(--tap); height: var(--tap);
  margin-right: 0;
  cursor: pointer; border-radius: var(--radius-sm);
}
.hamburger__box { position: relative; display: block; width: 32px; height: 22px; }
.hamburger__inner,
.hamburger__inner::before,
.hamburger__inner::after {
  position: absolute; left: 0;
  display: block; width: 32px; height: 2.5px;
  border-radius: 2px;
  background-color: var(--color-text);
}
.hamburger__inner::before, .hamburger__inner::after { content: ''; }
.hamburger__inner { top: 0; transition: background-color 0s 0.08s linear; }
.hamburger__inner::before {
  top: 9.5px;
  transition: top 0.06s 0.12s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
              transform 0.08s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger__inner::after {
  top: 19px;
  transition: top 0.12s 0.12s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
              transform 0.08s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.menu[open] .hamburger__inner { transition-delay: 0.13s; background-color: transparent; }
.menu[open] .hamburger__inner::before {
  top: 0;
  transform: translate3d(0, 9.5px, 0) rotate(45deg);
  transition: top 0.06s 0.09s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
              transform 0.08s 0.13s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menu[open] .hamburger__inner::after {
  top: 0;
  transform: translate3d(0, 9.5px, 0) rotate(-45deg);
  transition: top 0.12s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
              transform 0.08s 0.13s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (prefers-reduced-motion: reduce) {
  .hamburger__inner, .hamburger__inner::before, .hamburger__inner::after { transition: none !important; }
}

/* ---------- Page ---------- */
.page {
  display: flex; flex-direction: column; gap: var(--space-3);
  max-width: var(--page-max); margin: 0 auto;
  padding: var(--space-4) var(--gutter) var(--space-8);
}
.page-title {
  text-align: center; font-size: var(--text-xl); font-weight: var(--weight-medium);
  margin: var(--space-4) 0 var(--space-1);
}
.section-heading {
  text-align: center; font-size: var(--text-xl); font-weight: var(--weight-medium);
  margin: var(--space-4) 0 var(--space-1);
}
.event-group { display: flex; flex-direction: column; gap: var(--space-2); }
.event-group + .event-group { margin-top: var(--space-4); }
.section-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: var(--space-4) 0 var(--space-2); }
.field-label { display: block; font-size: var(--text-lg); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--text-sm); }
.note { color: var(--color-text-muted); font-size: var(--text-sm); }
.stack-xs { display: flex; flex-direction: column; gap: var(--space-1); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-3); }
.stack-md { display: flex; flex-direction: column; gap: var(--space-4); }
.strike { text-decoration: line-through; color: var(--color-text-muted); }
.divider { border: 0; border-top: var(--line-hairline) solid var(--color-border); margin: var(--space-3) 0; }

.icon { flex: none; }

/* ---------- Cards, pills, banners ---------- */
.card {
  background: var(--color-surface);
  border: var(--line-hairline) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}
.card--roomy { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-5); }
.card--warning { border: var(--line-strong) solid var(--color-warning); }
.card__title { font-size: var(--text-lg); font-weight: var(--weight-medium); line-height: 1.25; }
.card__title--lg { font-size: var(--text-xl); }
.summary__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }

.pill {
  display: inline-flex; align-items: center; align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-md); white-space: nowrap;
}
.pill--accent { background: var(--color-accent-tint); color: var(--color-text); }
.pill--warning { background: var(--color-warning); color: var(--color-surface); }

.banner {
  display: flex; gap: var(--space-3); align-items: flex-start;
  background: var(--color-surface);
  border: var(--line-strong) solid var(--color-warning);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.banner > .icon { color: var(--color-warning); margin-top: 1px; }
.banner__body { display: flex; flex-direction: column; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--text-sm); }
.banner__body > p:only-child { color: var(--color-text); font-size: var(--text-md); }
.banner__title { color: var(--color-text); font-size: var(--text-md); font-weight: var(--weight-medium); }
.banner__link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 32px; }
.banner:focus-visible { outline-offset: 3px; }

.notice {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-muted);
  border-radius: var(--radius-md);
  font-weight: var(--weight-medium);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap); padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  border: var(--line-strong) solid var(--color-text);
  font-size: var(--text-md); text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn--primary { background: var(--color-text); color: var(--color-accent); font-weight: var(--weight-bold); }
.btn--secondary { background: var(--color-surface); color: var(--color-text); }
.btn--block { display: flex; width: 100%; }
@media (hover: hover) {
  .btn--primary:hover { box-shadow: 0 0 0 var(--line-strong) var(--color-text); }
  .btn--secondary:hover { background: var(--color-accent); }
}

/* Dark flash under the finger: overlay appears instantly on :active and fades on release. */
.btn, .menu__row, .event-link, .slot-chip, .stepper__btn { position: relative; overflow: hidden; }
.btn::after, .menu__row::after, .event-link::after, .slot-chip::after, .stepper__btn::after {
  content: ''; position: absolute; inset: 0;
  background: var(--color-press);
  opacity: 0; transition: opacity 120ms; pointer-events: none;
}
.btn:not(:disabled):active::after, .menu__row:active::after, .event-link:active::after,
.slot-chip:not(.slot-chip--full):active::after,
.stepper__btn:not(:disabled):active::after { opacity: 1; transition-duration: 0s; }
.btn--primary::after { background: var(--color-press-on-dark); }
.back-link {
  display: inline-flex; align-items: center; gap: var(--space-1); align-self: flex-start;
  min-height: var(--tap); margin-top: var(--space-2);
}

/* ---------- Events list ---------- */
.event-link {
  display: flex; align-items: center; gap: var(--space-5);
  min-height: 82px; padding: var(--space-3) var(--space-5);
  color: var(--color-text); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .event-link:hover { border-color: var(--color-text); }
}
.event-link__thumb { width: var(--thumb-size); height: var(--thumb-size); object-fit: contain; }
.event-link__text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.event-link__title { font-size: var(--text-lg); font-weight: var(--weight-medium); }
.event-link__date { font-size: var(--text-md); }

/* ---------- Tickets page ---------- */
.event-hero { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.event-hero__img { width: 100%; object-fit: contain; }
.event-hero__text { display: flex; flex-direction: column; gap: var(--space-3); }
.event-hero__intro { font-size: var(--text-lg); line-height: 1.25; }
.meta-list { display: flex; flex-direction: column; gap: var(--space-2); }
.meta-list li { display: flex; gap: var(--space-2); align-items: flex-start; }
.meta-list .icon { width: 16px; height: 16px; stroke-width: 1.75; margin-top: 2px; }
@media (max-width: 359px) {
  .event-hero { grid-template-columns: 1fr; }
  .event-hero__img { max-width: 160px; margin: 0 auto; }
}

.ticket-form { display: flex; flex-direction: column; gap: var(--space-4); }
.slot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.slot-chip {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: var(--tap); padding: var(--space-1);
  background: var(--color-surface);
  border: var(--line-strong) solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center; line-height: 1.2; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* The radio stays in the accessibility tree and keyboard order; the chip is its label. */
.slot-chip__input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; z-index: 1; }
.slot-chip__time { font-size: var(--text-md); }
.slot-chip__left { font-size: var(--text-md); color: var(--color-text-muted); }
@media (hover: hover) {
  .slot-chip:hover { border-color: var(--color-text-muted); }
}
/* Selection only changes colours: the border stays 2px, so chips never resize. */
.slot-chip:has(.slot-chip__input:checked) {
  background: var(--color-accent-tint);
  border-color: var(--color-text);
}
.slot-chip:has(.slot-chip__input:focus-visible) { outline: var(--focus-ring) solid var(--color-focus); outline-offset: 2px; }
.slot-chip--low .slot-chip__left { color: var(--color-warning); }
.slot-chip--started .slot-chip__time { color: var(--color-text-muted); font-size: var(--text-sm); }
.slot-chip--full { background: var(--color-surface-muted); border-color: var(--color-surface-muted); cursor: not-allowed; }
.slot-chip--full .slot-chip__time { text-decoration: line-through; color: var(--color-text-muted); }
@media (max-width: 340px) { .slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tickets-heading { margin-bottom: 0; }
.tier-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
.tier-row__name { display: block; font-size: var(--text-md); }
.tier-row__price { font-size: var(--text-sm); color: var(--color-text-muted); }
/* One Continue for all tiers; the summary above it is shown by app.js. */
.order-summary { font-size: var(--text-md); font-weight: var(--weight-medium); text-align: center; }
.btn:disabled { opacity: 0.45; cursor: default; }

.stepper {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--tap);
  background: var(--color-surface);
  border: var(--line-strong) solid var(--color-text);
  border-radius: var(--radius-md);
}
.stepper__btn {
  display: none; /* shown once app.js runs; without JS the number input works on its own */
  place-items: center; width: 34px; height: 100%;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.js .stepper__btn { display: grid; }
.stepper__btn:disabled { color: var(--color-text-muted); opacity: 0.5; cursor: default; }
.stepper__input {
  width: 3.25rem; height: 100%;
  border: 0; background: none; text-align: center;
  font-size: var(--text-input); border-radius: var(--radius-sm);
}
.js .stepper__input { width: 2rem; -moz-appearance: textfield; appearance: textfield; }
.js .stepper__input::-webkit-outer-spin-button,
.js .stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }


.description { display: flex; flex-direction: column; gap: var(--space-3); }
.description .field-label { margin-bottom: 0; }
/* Hairline between the Tickets card's sections: slots, tickets, description. */
.ticket-form .tickets-heading,
.description { border-top: var(--line-hairline) solid var(--color-border); padding-top: var(--space-5); }

/* ---------- Checkout ---------- */
.price-list { display: flex; flex-direction: column; gap: var(--space-2); }
.price-row { display: flex; justify-content: space-between; gap: var(--space-3); }
.price-row--muted { color: var(--color-text-muted); font-size: var(--text-sm); }
.price-row--total { font-size: var(--text-xl); font-weight: var(--weight-medium); }
.checkout-form { display: flex; flex-direction: column; gap: var(--space-3); }
.field { display: flex; flex-direction: column; }
.field .field-label { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.input {
  width: 100%; font-size: var(--text-input); min-height: calc(var(--tap) + var(--space-1));
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border: var(--line-strong) solid var(--color-text);
  border-radius: var(--radius-md);
}
.input::placeholder { color: var(--color-text-muted); opacity: 1; }
.input[aria-invalid='true'] { border-color: var(--color-warning); }
.field-error { color: var(--color-warning); font-size: var(--text-sm); margin-top: var(--space-1); }
.turnstile { min-height: 65px; margin-top: var(--space-2); }
.pay-bar {
  position: sticky; bottom: var(--kb-inset, 0px);
  display: flex; flex-direction: column; gap: var(--space-3);
  margin: var(--space-2) 0 calc(-1 * var(--space-8));
  /* Full-bleed background: span the window, keep the content on the page column. */
  margin-inline: calc(50% - 50vw);
  padding: var(--space-3) 0 var(--space-4);
  padding-inline: max(var(--gutter), calc(50vw - var(--page-max) / 2 + var(--gutter)));
  background: var(--color-surface);
  border-top: var(--line-hairline) solid var(--color-border);
}
.pay-bar__note { display: flex; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---------- Booked / Your tickets ---------- */
.success { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-5) var(--space-4); }
.success__tick {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-text); color: var(--color-accent);
}
.ident-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
.ident { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ident__label { font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--color-text-muted); }
.ident__ref { font-size: var(--text-3xl); letter-spacing: 0.12em; font-weight: var(--weight-medium); line-height: 1.1; }
.ident__ref--sm { font-size: var(--text-xl); }
.ident__user { font-size: var(--text-3xl); font-weight: var(--weight-medium); line-height: 1.1; overflow-wrap: anywhere; }
.ident__user--email { font-size: var(--text-xl); }
.ident-grid .ident__user--email { font-size: var(--text-md); }
.total-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.total-row__amount { text-align: right; }
.total-row__price { font-size: var(--text-xl); font-weight: var(--weight-medium); }
.holders { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.holders__row { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-md); }
.holders__row .muted { font-size: var(--text-sm); }

/* ---------- Admin (committee, door phone) ---------- */
.admin-slot {
  display: flex; flex-direction: column; gap: var(--space-2);
  min-height: var(--tap);
  color: var(--color-text); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .admin-slot:hover { border-color: var(--color-text); }
}
.admin-slot__time {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--text-lg); font-weight: var(--weight-medium);
}
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.stats div { display: flex; flex-direction: column; }
.stats dt { font-size: var(--text-xs); color: var(--color-text-muted); }
.stats dd { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-medium); }
.admin-count { font-size: var(--text-xl); font-weight: var(--weight-medium); }
.admin-search { display: flex; gap: var(--space-2); }
.admin-search .input { flex: 1; min-width: 0; }
.door-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.door-row--void { background: var(--color-surface-muted); }
.door-row__who { display: flex; flex-direction: column; min-width: 0; }
.door-row__name { font-size: var(--text-lg); font-weight: var(--weight-medium); }
.door-row__user { font-size: var(--text-md); overflow-wrap: anywhere; }
.door-row__ref { display: inline-flex; align-items: center; min-height: var(--tap); letter-spacing: 0.08em; }
.door-row__action { flex: none; display: flex; align-items: center; gap: var(--space-2); }
.door-row__action .pill { font-size: var(--text-sm); }

@media (min-width: 520px) {
  .page { padding-top: var(--space-6); }
}