@import url("./tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; overflow-x: clip; }
html { background: var(--color-paper); scrollbar-color: var(--color-accent) var(--color-paper-2); }
*::-webkit-scrollbar { width: 0.75rem; }
*::-webkit-scrollbar-track { background: var(--color-paper-2); }
*::-webkit-scrollbar-thumb { background: var(--color-accent); border: 0.2rem solid var(--color-paper-2); border-radius: var(--radius-pill); }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-base);
  pointer-events: none;
  opacity: 0.2;
  background-image: url("./assets/ticket-grain.png");
  background-size: 32rem 32rem;
  mix-blend-mode: soft-light;
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }
a { color: inherit; text-underline-offset: 0.2em; }
::selection { background: var(--color-accent); color: var(--color-accent-ink); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.hidden { display: none !important; }
.tnum { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.shell {
  position: relative;
  z-index: calc(var(--z-base) + 1);
  width: min(100%, 30rem);
  min-height: 100dvh;
  margin-inline: auto;
  padding: max(var(--space-lg), env(safe-area-inset-top)) max(var(--space-md), env(safe-area-inset-right)) max(var(--space-2xl), env(safe-area-inset-bottom)) max(var(--space-md), env(safe-area-inset-left));
}
.shell--wide { width: min(100%, 62rem); }

.mast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: start;
  padding-block-end: var(--space-lg);
}
.mast__title, h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 900;
  line-height: 1.02;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  min-width: 0;
}
.mast__title { font-size: clamp(2.25rem, 10vw, 3.35rem); letter-spacing: -0.02em; }
.mast__meta { margin: var(--space-xs) 0 0; color: var(--color-ink-2); font-size: var(--text-sm); }

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 2.75rem;
  padding-inline: var(--space-sm);
  border: var(--rule) solid var(--color-rule);
  background: var(--color-paper-2);
  color: var(--color-ink-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
}
.status__mark { width: 0.65rem; height: 0.65rem; border: 2px solid currentColor; transform: rotate(45deg); }
.status[data-state="ready"] { color: var(--color-good); }
.status[data-state="pending"] { color: var(--color-accent); }
.status[data-state="offline"], .status[data-state="error"] { color: var(--color-danger); }

.ticket {
  position: relative;
  background: var(--color-paper-2);
  color: var(--color-ink);
  border-block: var(--rule) solid var(--color-rule);
}
.ticket::before, .ticket::after {
  content: "";
  position: absolute;
  inset-block: -1px;
  width: 0.75rem;
  background: radial-gradient(circle, var(--color-paper) 0 42%, transparent 45%) center / 0.75rem 1.35rem repeat-y;
  pointer-events: none;
}
.ticket::before { inset-inline-start: -0.38rem; }
.ticket::after { inset-inline-end: -0.38rem; }

.ticket-id {
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(7.5rem, 0.75fr);
  gap: var(--space-lg);
  background-color: var(--color-ink);
  background-image: url("./assets/ticket-grain.png");
  background-size: 24rem 24rem;
  color: var(--color-paper);
}
.ticket-id__event { font-family: var(--font-display); font-size: clamp(2.15rem, 9vw, 3.25rem); font-weight: 900; line-height: 0.9; text-transform: uppercase; overflow-wrap: anywhere; }
.ticket-id__eyebrow { display: block; margin-block-start: var(--space-sm); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 900; letter-spacing: 0.25em; text-align: center; text-transform: uppercase; }
.ticket-id__guest { border-inline-start: 2px dashed color-mix(in oklch, var(--color-paper), transparent 45%); padding-inline-start: var(--space-md); }
.ticket-id__guest strong { display: block; font-family: var(--font-display); font-size: var(--text-lg); line-height: 1; text-transform: uppercase; }
.ticket-id__guest > span { display: block; color: var(--color-paper-3); font-size: var(--text-sm); margin-block-start: var(--space-xs); }
.ticket-id .status { margin-block-start: var(--space-md); }
.ticket-id .status[data-state="ready"] { color: var(--color-accent-ink); }
.ticket-id .status[data-state="ready"] .status__mark { border-color: var(--color-good); }

.countdown {
  margin-block-end: var(--space-lg);
  padding: var(--space-lg);
  border: 2px dashed var(--color-accent);
  color: var(--color-ink);
  background: var(--color-paper-2);
}
.countdown strong { display: block; color: var(--color-accent); font-family: var(--font-display); font-size: clamp(2.4rem, 11vw, 4rem); line-height: 0.95; text-transform: uppercase; }
.countdown span { display: block; margin-block-start: var(--space-xs); color: var(--color-ink-2); }

.swipe {
  position: relative;
  min-height: 5.25rem;
  overflow: hidden;
  border: var(--rule) solid var(--color-accent-deep);
  border-radius: var(--radius-control);
  background: var(--color-accent);
  background-image: url("./assets/ticket-grain.png");
  background-size: 22rem 22rem;
  color: var(--color-accent-ink);
  touch-action: pan-y;
  user-select: none;
}
.swipe__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--color-accent-deep); pointer-events: none; }
.swipe__label { position: absolute; inset: 0; display: grid; place-items: center; padding-inline: 5rem 4.75rem; font-family: var(--font-display); font-size: clamp(1.35rem, 6vw, 1.8rem); font-weight: 900; letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.swipe__hint { position: absolute; z-index: calc(var(--z-base) + 1); inset: 50% var(--space-sm) auto auto; transform: translateY(-50%); max-width: 4rem; font-family: var(--font-display); font-size: var(--text-xs); font-weight: 900; letter-spacing: 0.08em; line-height: 1.05; text-align: center; text-transform: uppercase; pointer-events: none; }
.swipe__handle {
  position: absolute;
  z-index: calc(var(--z-base) + 1);
  inset: 0.35rem auto 0.35rem 0.35rem;
  width: 4.55rem;
  border: 0;
  border-radius: 50%;
  background: var(--color-paper);
  color: var(--color-accent);
  display: grid;
  place-items: center;
  cursor: grab;
  touch-action: none;
  transition: transform var(--dur-long) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}
.swipe__handle::before, .swipe__handle::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-block-start: 0.3rem solid currentColor;
  border-inline-end: 0.3rem solid currentColor;
  transform: rotate(45deg);
}
.swipe__handle::before { margin-inline-start: -0.65rem; }
.swipe__handle::after { margin-inline-start: 0.2rem; }
.swipe__handle[aria-disabled="true"] { opacity: 0.48; cursor: not-allowed; }
.swipe__handle.is-dragging { cursor: grabbing; transition: none; }
.swipe[data-state="locked"] { background: var(--color-paper-3); border-color: var(--color-rule); color: var(--color-ink-2); }
.swipe[data-state="locked"] .swipe__handle { color: var(--color-muted); }
.swipe[data-state="loading"] .swipe__handle { opacity: 0.7; }

.route { margin-block-start: var(--space-md); }
.stop {
  position: relative;
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
  background: var(--color-paper-2);
  background-image: url("./assets/ticket-grain.png");
  background-size: 28rem 28rem;
  border-block-start: 1px dashed var(--color-muted);
  overflow: clip;
}
.stop:last-child { border-block-end: 1px dashed var(--color-muted); }
.stop__head { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: var(--space-lg); align-items: stretch; }
.stop__index { display: grid; grid-template-rows: auto auto auto; justify-items: center; align-content: start; gap: var(--space-xs); padding-inline-end: var(--space-md); border-inline-end: 2px dashed var(--color-muted); font-family: var(--font-display); font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.stop__index span, .stop__index small { font-size: var(--text-xs); }
.stop__number {
  width: 4.15rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-slot);
  color: var(--color-ink);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 900;
  box-shadow: inset 0 0 0 0.35rem var(--color-paper);
}
.stop__name { font-size: clamp(2rem, 9vw, 3rem); letter-spacing: -0.015em; }
.stop__address, .stop__offer { margin: 0; }
.stop__address { margin-block-start: var(--space-xs); color: var(--color-ink-2); font-size: var(--text-sm); }
.stop__offer { margin-block-start: var(--space-md); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; text-transform: uppercase; }
.stop .swipe { margin-block-start: var(--space-lg); }
.stop__stamp {
  position: absolute;
  z-index: calc(var(--z-base) + 1);
  inset: auto var(--space-lg) var(--space-lg) auto;
  transform: rotate(-7deg) scale(0.75);
  opacity: 0;
  border: 0.28rem double var(--color-stamp);
  color: var(--color-stamp);
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 8vw, 2.65rem);
  font-weight: 900;
  line-height: 0.9;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
}
.stop__stamp small { display: block; font-family: var(--font-body); font-size: var(--text-xs); margin-block-start: var(--space-xs); }
.stop.is-done { color: var(--color-muted); padding-block-end: 7.25rem; }
.stop.is-done .swipe { display: none; }
.stop.is-done .stop__stamp { opacity: 1; transform: rotate(-7deg) scale(1); animation: stamp-in var(--dur-long) var(--ease-out) both; }
.stop.is-closed { color: var(--color-muted); background: var(--color-paper-3); }
.stop.is-closed .swipe { display: none; }
.closed-label { display: none; margin-block-start: var(--space-lg); min-height: 3.5rem; place-items: center; border: 1px dashed var(--color-muted); color: var(--color-ink-2); font-family: var(--font-display); font-size: var(--text-lg); text-transform: uppercase; }
.stop.is-closed .closed-label { display: grid; }
.pending-note { color: var(--color-accent); }

.ticket-action { padding: var(--space-md); background-color: var(--color-paper-2); background-image: url("./assets/ticket-grain.png"); background-size: 26rem 26rem; }
.ticket-action .readiness { padding-inline: var(--space-xs); }
.route-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md); align-items: center; padding: var(--space-lg); border-block-start: 2px dashed var(--color-muted); background-color: var(--color-paper-2); background-image: url("./assets/ticket-grain.png"); background-size: 28rem 28rem; }
.route-footer strong { font-size: var(--text-sm); }
.route-footer__queue { display: block; margin-block-start: var(--space-xs); color: var(--color-accent); font-size: var(--text-xs); text-align: end; }
.route-dots { display: flex; align-items: center; gap: var(--space-sm); margin-block-start: var(--space-sm); }
.route-dots span { width: 1.25rem; aspect-ratio: 1; border: 2px solid var(--color-muted); border-radius: 50%; }
.route-dots span.is-done { border-color: var(--color-accent); background: var(--color-accent); }
.route-dots span.is-closed { opacity: 0.45; }
.status--bare { min-height: 0; padding: 0; border: 0; background: transparent; }
.ticket-id, .swipe, .stop, .ticket-action, .route-footer { background-blend-mode: soft-light; }

.screen-state { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; background: var(--color-paper); padding: var(--space-xl); text-align: center; }
.screen-state h1 { font-size: clamp(2.5rem, 12vw, 4rem); }
.screen-state p { max-width: 34ch; margin: var(--space-md) auto 0; color: var(--color-ink-2); }
.spinner { width: 3.5rem; aspect-ratio: 1; margin-inline: auto; border: 0.35rem solid var(--color-paper-3); border-top-color: var(--color-accent); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes stamp-in {
  0% { opacity: 0; transform: rotate(-12deg) scale(1.35); }
  70% { opacity: 1; transform: rotate(-6deg) scale(0.94); }
  100% { opacity: 1; transform: rotate(-7deg) scale(1); }
}

.button {
  min-height: 3.25rem;
  padding-inline: var(--space-md);
  border: var(--rule) solid var(--color-accent-deep);
  border-radius: var(--radius-control);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.button:active { transform: translateY(1px); }
.button:disabled { opacity: 0.5; cursor: not-allowed; }
.button--quiet { background: var(--color-paper-3); color: var(--color-ink); border-color: var(--color-rule); }
.button--danger { background: var(--color-paper-3); color: var(--color-danger); border-color: var(--color-danger); }
.button--wide { width: 100%; }

.field { display: grid; gap: var(--space-xs); margin-block-end: var(--space-md); }
.field label { color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 700; }
.field input, .field textarea {
  width: 100%;
  min-height: 3.5rem;
  border: var(--rule) solid var(--color-rule);
  border-radius: var(--radius-control);
  outline: 2px solid transparent;
  outline-offset: 1px;
  background: var(--color-slot);
  color: var(--color-ink);
  padding: var(--space-sm) var(--space-md);
  caret-color: var(--color-accent);
}
.field textarea { min-height: 6rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-muted); opacity: 1; }
.field input:focus-visible, .field textarea:focus-visible { outline-color: var(--color-focus); }
.field input[aria-invalid="true"] { border-color: var(--color-danger); }
.field__help { min-height: 1.4em; color: var(--color-muted); font-size: var(--text-xs); }
.field__help.is-error { color: var(--color-danger); }
.field-row { display: grid; gap: var(--space-sm); }

.gate { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; background: var(--color-paper); padding: var(--space-lg); }
.gate__ticket { width: min(100%, 24rem); padding: var(--space-xl) var(--space-lg); background: var(--color-paper-2); border-block: 1px dashed var(--color-muted); }
.gate h1 { font-size: 3.4rem; }
.gate p { color: var(--color-ink-2); margin: var(--space-xs) 0 var(--space-lg); }

.toast { position: fixed; z-index: var(--z-toast); inset: auto var(--space-md) max(var(--space-md), env(safe-area-inset-bottom)); margin-inline: auto; width: fit-content; max-width: calc(100% - 2rem); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-control); background: var(--color-ink); color: var(--color-paper); font-weight: 800; opacity: 0; transform: translateY(0.5rem); pointer-events: none; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.toast.is-showing { opacity: 1; transform: none; }

dialog { position: fixed; inset: 0; margin: auto; width: min(calc(100% - 2rem), 30rem); max-height: min(88dvh, 42rem); overflow-y: auto; padding: var(--space-lg); border: var(--rule) solid var(--color-rule); border-radius: var(--radius-sheet); background: var(--color-paper-2); color: var(--color-ink); }
dialog::backdrop { background: var(--color-scrim); }
dialog h2 { font-size: var(--text-2xl); margin-block-end: var(--space-xs); }
.dialog-copy { margin: 0 0 var(--space-lg); color: var(--color-ink-2); }
.dialog-actions { display: grid; gap: var(--space-sm); margin-block-start: var(--space-lg); }

.toolbar { position: sticky; inset-block-start: 0; z-index: var(--z-sticky); display: grid; grid-template-columns: minmax(0, 1fr) 3.5rem; gap: var(--space-xs); padding-block: var(--space-xs) var(--space-sm); background: var(--color-paper); }
.searchbox { display: flex; align-items: center; min-height: 3.5rem; border: var(--rule) solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-paper-2); }
.searchbox input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--color-ink); padding-inline: var(--space-md); font-size: var(--text-md); }
.icon-button { width: 3.5rem; min-height: 3.5rem; border: var(--rule) solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-accent); color: var(--color-accent-ink); font-size: 1.5rem; cursor: pointer; }

.metric-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block-end: var(--space-lg); border-block: 1px dashed var(--color-muted); }
.metric { padding: var(--space-md) var(--space-sm); }
.metric + .metric { border-inline-start: 1px dashed var(--color-muted); }
.metric strong { display: block; font-family: var(--font-display); color: var(--color-accent); font-size: clamp(2.2rem, 8vw, 3.6rem); line-height: 0.9; }
.metric span { display: block; margin-block-start: var(--space-xs); color: var(--color-ink-2); font-size: var(--text-xs); }

.tabs { display: flex; gap: var(--space-xs); margin-block-end: var(--space-sm); overflow-x: auto; }
.tab { min-height: 2.75rem; padding-inline: var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink-2); font-weight: 800; white-space: nowrap; }
.tab[aria-selected="true"] { background: var(--color-ink); color: var(--color-paper); }

.list { border-block-start: 1px dashed var(--color-muted); }
.list-row { width: 100%; min-height: 4.75rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; padding: var(--space-sm) var(--space-xs); border: 0; border-block-end: 1px dashed var(--color-rule); background: transparent; color: var(--color-ink); text-align: start; cursor: pointer; }
.list-row__name { font-weight: 800; overflow-wrap: anywhere; }
.list-row__meta { display: block; margin-block-start: var(--space-2xs); color: var(--color-ink-2); font-size: var(--text-sm); }
.badge { display: inline-flex; align-items: center; min-height: 2rem; padding-inline: var(--space-xs); border: 1px solid currentColor; border-radius: var(--radius-control); color: var(--color-ink-2); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.badge--good { color: var(--color-good); }
.badge--pending { color: var(--color-accent); }
.badge--danger { color: var(--color-danger); }
.empty { padding: var(--space-xl) var(--space-md); color: var(--color-ink-2); text-align: center; }

.section-title { margin: var(--space-xl) 0 var(--space-sm); font-size: var(--text-2xl); }
.ledger { border-block: 1px dashed var(--color-muted); }
.ledger-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md); align-items: center; padding-block: var(--space-md); border-block-end: 1px dashed var(--color-rule); }
.ledger-row:last-child { border-block-end: 0; }
.ledger-row__name { font-weight: 800; }
.ledger-row__meta { color: var(--color-ink-2); font-size: var(--text-sm); overflow-wrap: anywhere; }
.ledger-row__count { font-family: var(--font-display); color: var(--color-accent); font-size: var(--text-2xl); font-weight: 900; text-align: end; }
.ledger-row__actions { display: flex; align-items: center; gap: var(--space-xs); }
.switch { position: relative; width: 3.75rem; height: 2.75rem; border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper-3); cursor: pointer; }
.switch::after { content: ""; position: absolute; inset: 0.25rem auto 0.25rem 0.25rem; aspect-ratio: 1; border-radius: 50%; background: var(--color-muted); transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.switch[aria-checked="true"] { background: var(--color-accent); }
.switch[aria-checked="true"]::after { background: var(--color-accent-ink); transform: translateX(1rem); }
.switch:disabled { opacity: 0.5; }

.scanner { position: fixed; inset: 0; z-index: var(--z-toast); display: grid; grid-template-rows: auto 1fr auto; background: var(--color-slot); }
.scanner video { width: 100%; height: 100%; object-fit: cover; }
.scanner__bar { display: flex; justify-content: space-between; align-items: center; padding: max(var(--space-md), env(safe-area-inset-top)) var(--space-md) var(--space-sm); background: var(--color-paper); }
.scanner__frame { position: absolute; inset: 50% auto auto 50%; width: min(72vw, 19rem); aspect-ratio: 1; transform: translate(-50%, -50%); border: 0.25rem solid var(--color-accent); box-shadow: 0 0 0 100vmax var(--color-scrim); pointer-events: none; }
.scanner__message { padding: var(--space-lg); background: var(--color-paper); color: var(--color-ink); text-align: center; }

.report-view { position: fixed; inset: 0; z-index: var(--z-modal); overflow-y: auto; background: var(--color-paper); }
.report-view__inner { width: min(100%, 62rem); margin-inline: auto; padding: max(var(--space-lg), env(safe-area-inset-top)) var(--space-md) var(--space-2xl); }
.report-head { display: flex; justify-content: space-between; gap: var(--space-md); align-items: start; }
.journey { padding-block: var(--space-md); border-block-end: 1px dashed var(--color-rule); }
.journey__stops { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block-start: var(--space-xs); }
.journey__stop { padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-control); color: var(--color-ink-2); font-size: var(--text-sm); }
.journey__stop time { color: var(--color-accent); margin-inline-start: var(--space-xs); }

@media (hover: hover) and (pointer: fine) {
  .button:hover, .icon-button:hover { transform: translateY(-1px); }
  .list-row:hover { background: var(--color-paper-2); }
}
@media (min-width: 40rem) {
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 0.8fr); gap: var(--space-xl); align-items: start; }
  .admin-grid .section-title:first-child { margin-block-start: 0; }
}
@media (max-width: 23rem) {
  .mast { grid-template-columns: 1fr; }
  .status { justify-self: start; }
  .ticket-id { grid-template-columns: 1fr; }
  .ticket-id__guest { border-inline-start: 0; border-block-start: 2px dashed var(--color-muted); padding: var(--space-sm) 0 0; }
  .stop { padding-inline: var(--space-md); }
  .stop__head { grid-template-columns: 3.75rem minmax(0, 1fr); }
  .stop__number { width: 3.5rem; }
  .swipe__label { font-size: 1.5rem; }
  .swipe__hint { display: none; }
  .route-footer { grid-template-columns: 1fr; }
  .route-footer__queue { text-align: start; }
  .metric-strip { grid-template-columns: 1fr; }
  .metric + .metric { border-inline-start: 0; border-block-start: 1px dashed var(--color-muted); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 150ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; scroll-behavior: auto !important; }
  .stop__stamp { transform: rotate(-7deg) scale(1); }
}

/* ---- demo view switch (only present when the link carries ?demo=1) ---- */
.vtabs {
  position: fixed;
  z-index: var(--z-toast);
  inset-block-start: max(var(--space-xs), env(safe-area-inset-top));
  inset-inline-end: max(var(--space-xs), env(safe-area-inset-right));
  display: flex;
  width: fit-content;
  max-width: calc(100% - 1rem);
  overflow: hidden;
  border: var(--rule) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
}
.vtabs__tab {
  padding: var(--space-2xs) var(--space-sm);
  color: var(--color-ink-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.vtabs__tab.is-on { background: var(--color-accent); color: var(--color-accent-ink); }
/* Keep the floating bar off the page masthead. */
.has-vtabs .shell { padding-block-start: calc(max(var(--space-lg), env(safe-area-inset-top)) + var(--space-lg)); }

/* ---- attendee ledger on the organizer view ---- */
.section-count { margin-inline-start: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); font-weight: 600; }
.searchbox--flush { margin-block-end: var(--space-sm); }
.pass-state { flex: none; font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; padding: var(--space-2xs) var(--space-xs); border: var(--rule) solid currentColor; white-space: nowrap; }
.pass-state.is-good { color: var(--color-good); }
.pass-state.is-wait { color: var(--color-muted); }
.pass-state.is-void { color: var(--color-danger); }
.button--danger { border-color: var(--color-danger); color: var(--color-danger); background: transparent; }
.button--danger:hover { background: var(--color-danger); color: var(--color-danger-ink); }

/* ---- organizer: keep the action row to four, park the destructive pair ---- */
.night { margin-block-start: var(--space-xl); }
.night__card { padding: var(--space-lg); }
.danger-zone { margin-block-start: var(--space-md); padding-block-start: var(--space-md); border-block-start: 1px dashed var(--color-rule); }
.danger-zone summary { cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-danger); }
.danger-zone summary::marker { color: var(--color-danger); }
.danger-zone > p { margin-block: var(--space-xs) var(--space-sm); }
.danger-zone__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.ledger-row.is-openable { cursor: pointer; }
.ledger-row.is-openable:hover { background: var(--color-paper-2); }
.ledger-row.is-openable:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.button--small { min-height: 2.25rem; padding: var(--space-2xs) var(--space-sm); font-size: var(--text-xs); }
#guest-stops { margin-block: var(--space-md); }