/* ==========================================================================
   FIRST BELL — app surfaces: checkout, ticket, admin, scanner.
   Loaded on top of site.css. Same tokens, denser layout.
   ========================================================================== */

/* The `hidden` attribute must always win: `.field-grid { display: grid }`
   otherwise shows a hidden field grid (Denis, 2026-10-16). */
[hidden] { display: none !important; }

/* ── Event hero ───────────────────────────────────────────────────────────── */
.ev-hero {
  position: relative;
  padding: calc(74px + clamp(3rem, 7vw, 5.5rem)) 0 clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.ev-hero__media { position: absolute; inset: 0; z-index: 0; }
.ev-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.6) brightness(0.32);
}
.ev-hero__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, #000 8%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.35));
}
.ev-hero__inner { position: relative; z-index: 2; }
.ev-hero__sub { color: var(--muted); margin-top: 0.75rem; font-size: 1.05rem; }
.ev-hero__venue { margin-top: 1rem; color: var(--text); }
.ev-hero__venue strong { color: #fff; }

.backlink {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.5rem;
  transition: color 0.2s;
}
.backlink:hover { color: var(--white); }

/* ── Event page grid ──────────────────────────────────────────────────────── */
.ev-grid {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 360px);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 940px) {
  .ev-grid { grid-template-columns: 1fr; }
  .ev-aside { order: -1; }
}

.ev-aside { position: sticky; top: 100px; }
@media (max-width: 940px) { .ev-aside { position: static; } }

.ev-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}
.ev-card img { width: 100%; }
.ev-card .poster-tba { aspect-ratio: 4 / 5; }

.ev-facts { margin-top: 1.5rem; border-top: 1px solid var(--line); }
.ev-fact {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.86rem;
}
.ev-fact span { color: var(--faint); }
.ev-fact strong { color: var(--text); font-weight: 600; text-align: right; }

/* ── Checkout ─────────────────────────────────────────────────────────────── */
.checkout { display: flex; flex-direction: column; gap: 2.5rem; }
.checkout__step { border-top: 1px solid var(--line); padding-top: 1.75rem; }
.checkout__step:first-child { border-top: 0; padding-top: 0; }

.checkout__legend {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--display);
  /* Anton has one weight; an h2 default bold makes the browser fake one. */
  font-weight: 400;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.5rem;
}
.checkout__legend span {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 700;
  flex: none;
}

/* Ticket types */
.tt-list { display: flex; flex-direction: column; gap: 0.75rem; }
.tt {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1.15rem 1.25rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.tt:hover { border-color: var(--line-2); }
.tt.is-selected { border-color: var(--red); background: var(--panel-2); }
.tt--out { opacity: 0.45; }

/* Price ladder: every step, its rule and dates, the close of online sales */
.ladder { margin-top: 1.25rem; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: 12px; }
.ladder__title { font-family: var(--display); font-size: 1rem; text-transform: uppercase; color: var(--white); }
.ladder__note { font-size: 0.82rem; margin-top: 0.35rem; }
.ladder__list { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.ladder__row {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr auto;
  gap: 0.25rem 1rem;
  align-items: baseline;
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
}
.ladder__row:first-child { border-top: 0; }
.ladder__name { font-weight: 700; color: var(--white); }
.ladder__when { color: var(--muted); }
.ladder__price { color: var(--white); white-space: nowrap; }
.ladder__row.is-now .ladder__price { color: var(--red); }
.ladder__now, .ladder__done {
  display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.4rem; border-radius: 4px;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; vertical-align: 1px;
}
.ladder__now { background: var(--red); color: #fff; }
.ladder__done { border: 1px solid var(--line-2); color: var(--muted); }
.ladder__close { margin-top: 0.75rem; font-size: 0.85rem; color: var(--white); font-weight: 600; }
@media (max-width: 520px) {
  .ladder__row { grid-template-columns: 1fr auto; }
  .ladder__when { grid-column: 1 / -1; grid-row: 2; }
}

.tt__name {
  font-family: var(--display);
  font-size: 1.15rem;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.1;
}
.tt__desc { font-size: 0.84rem; color: var(--muted); margin-top: 0.25rem; }
.tt__stock { font-size: 0.75rem; margin-top: 0.4rem; }
.tt__stock--low { color: var(--amber); }
.tt__stock--out { color: var(--red-text); }
.tt__price {
  font-family: var(--display);
  font-size: 1.3rem;
  color: var(--white);
  white-space: nowrap;
}

.tt__qty { display: flex; align-items: center; gap: 0.4rem; }
.qty__btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--panel-3);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  color: var(--white);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.qty__btn:hover:not(:disabled) { background: var(--red); border-color: var(--red); }
.qty__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.qty__val {
  min-width: 30px;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}

@media (max-width: 560px) {
  .tt { grid-template-columns: 1fr auto; }
  .tt__qty { grid-column: 2; }
  .tt__price { grid-column: 1; grid-row: 2; justify-self: start; font-size: 1.1rem; }
}

/* One name per ticket (checkout.js renders the fields from the steppers) */
.holders { margin-top: 1.25rem; }
.holders__title {
  font-family: var(--display);
  font-size: 1.05rem;
  text-transform: uppercase;
  color: var(--white);
}
.holders__note { font-size: 0.84rem; margin: 0.3rem 0 0.9rem; }
.holders__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 1rem; }
@media (max-width: 560px) { .holders__list { grid-template-columns: 1fr; } }

/* Fields */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field:first-child { grid-column: 1 / -1; }
.field > span {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input, .field select, .field textarea {
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  color: var(--white);
  font-size: 0.95rem;
  transition: border-color 0.2s, background-color 0.2s;
  width: 100%;
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--red);
  background: var(--panel-2);
}
.field input[aria-invalid='true'] { border-color: var(--red); }
.field textarea { min-height: 120px; resize: vertical; }
@media (max-width: 620px) { .field-grid { grid-template-columns: 1fr; } }

.check {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-top: 0.9rem;
  font-size: 0.86rem;
  color: var(--muted);
  cursor: pointer;
}
.check input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 19px; height: 19px;
  margin-top: 1px;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  background: var(--panel);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 0.2s, border-color 0.2s;
}
.check input:checked { background: var(--red); border-color: var(--red); }
.check input:checked::after {
  content: '';
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}
.check a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }

/* Summary */
.summary {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.15rem 1.25rem;
  margin-bottom: 1rem;
}
.summary__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  font-size: 0.9rem;
}
.summary__row span { color: var(--muted); }
.summary__row strong { color: var(--text); font-weight: 600; }
.summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 0.75rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}
.summary__total span {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.summary__total strong { font-family: var(--display); font-size: 1.8rem; color: var(--white); }
.summary__empty { font-size: 0.9rem; }

.checkout__error {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border-radius: 10px;
  background: var(--red-dim);
  border: 1px solid rgba(193,18,31,0.4);
  color: #ffb4bc;
  font-size: 0.88rem;
}
.checkout__secure {
  margin-top: 0.9rem;
  font-size: 0.78rem;
  color: var(--faint);
  text-align: center;
}
.checkout__secure strong { color: var(--muted); }

.notice {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}
.notice h3 {
  font-family: var(--display);
  /* Anton ships one weight; the h3 default bold made the browser fake a
     heavier one and the letters ran into each other. */
  font-weight: 400;
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 0.6rem;
}
.notice p { margin-bottom: 1.25rem; }
.notice__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ── Result pages (success / failure) ─────────────────────────────────────── */
.result {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 3rem var(--gutter);
  text-align: center;
}
.result__inner { max-width: 560px; }
.result__mark {
  width: 76px; height: 76px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin: 0 auto 1.75rem;
  border: 2px solid;
}
.result__mark--ok { border-color: var(--green); color: var(--green); }
.result__mark--bad { border-color: var(--red); color: var(--red); }
.result__mark svg { width: 34px; height: 34px; }

/* ── Ticket page ──────────────────────────────────────────────────────────── */
.ticket-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 2rem var(--gutter);
  background: var(--black);
}
.ticket {
  width: 100%;
  max-width: 420px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  overflow: hidden;
}
.ticket__head {
  padding: 1.6rem 1.5rem 1.35rem;
  text-align: center;
  border-bottom: 1px dashed var(--line-2);
  position: relative;
}
.ticket__brand {
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: 0.22em;
  color: var(--white);
  text-transform: uppercase;
}
.ticket__event {
  font-family: var(--display);
  font-size: 1.7rem;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1;
  margin-top: 0.9rem;
}
.ticket__meta { font-size: 0.85rem; color: var(--muted); margin-top: 0.6rem; }

/* Perforation notches */
.ticket__head::before, .ticket__head::after {
  content: '';
  position: absolute;
  bottom: -11px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--black);
}
.ticket__head::before { left: -11px; }
.ticket__head::after { right: -11px; }

.ticket__body { padding: 1.75rem 1.5rem; text-align: center; }
.ticket__qr {
  width: min(250px, 72vw);
  margin: 0 auto 1.25rem;
  background: #fff;
  padding: 12px;
  border-radius: 12px;
}
.ticket__qr svg { width: 100%; height: auto; display: block; }
.ticket__code {
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: 0.24em;
  color: var(--white);
}
.ticket__holder {
  margin-top: 0.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--white);
  overflow-wrap: anywhere;
}
.ticket__type {
  display: inline-block;
  margin-top: 0.9rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ticket__status {
  margin-top: 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 600;
}
.ticket__status--valid { background: rgba(18,185,129,0.12); border: 1px solid rgba(18,185,129,0.35); color: #6ee7b7; }
.ticket__status--used  { background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.35); color: #fcd34d; }
.ticket__status--void  { background: var(--red-dim); border: 1px solid rgba(193,18,31,0.4); color: #ffb4bc; }
.ticket__hint { font-size: 0.78rem; color: var(--faint); margin-top: 1.25rem; line-height: 1.6; }

/* ── Admin ────────────────────────────────────────────────────────────────── */
.admin { padding: 1.5rem var(--gutter) 4rem; max-width: 1400px; margin-inline: auto; }
.admin__top {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.25rem 1.75rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2rem;
}
.admin__title {
  font-family: var(--display);
  font-size: 1.6rem;
  text-transform: uppercase;
  color: var(--white);
  letter-spacing: 0.04em;
}
.admin__tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.admin__tab {
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}
.admin__tab:hover { color: var(--white); border-color: var(--white); }
.admin__tab.is-active { background: var(--red); border-color: var(--red); color: #fff; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.25rem 1.35rem;
}
.stat__label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.stat__value {
  font-family: var(--display);
  font-size: 2.1rem;
  color: var(--white);
  line-height: 1.1;
  margin-top: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.stat__sub { font-size: 0.78rem; color: var(--muted); margin-top: 0.25rem; }
.stat--accent { border-color: rgba(193,18,31,0.35); }
/* Phones: two small tiles per row, so the tabs and the ticket search are
   reachable without scrolling past five full-width cards. */
@media (max-width: 620px) {
  .stats { grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1.25rem; }
  .stat { padding: 0.8rem 0.9rem; }
  .stat__value { font-size: 1.5rem; margin-top: 0.3rem; }
  .stat__sub { font-size: 0.7rem; }
  .stat--accent { grid-column: 1 / -1; }
}
.stat--accent .stat__value { color: var(--red-hot); }

.table-wrap {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow-x: auto;
  background: var(--panel);
}
table.data { width: 100%; border-collapse: collapse; font-size: 0.86rem; min-width: 720px; }
/* Ticket list: 3 columns that fit a phone, so the door admin sees the name,
   the status and the Check-in button without scrolling sideways. */
table.data--compact { min-width: 0; table-layout: fixed; }
table.data--compact th:nth-child(2) { width: 5.2rem; }
table.data--compact th:nth-child(3) { width: 7rem; }
table.data--compact .tk__name, table.data--compact .tk__meta { overflow-wrap: anywhere; }
table.data--compact th, table.data--compact td { padding: 0.75rem 0.6rem; vertical-align: middle; }
table.data--compact th:first-child, table.data--compact td:first-child { padding-left: 0.9rem; }
table.data--compact td:last-child { padding-right: 0.7rem; text-align: right; }
table.data--compact .btn { white-space: nowrap; }
.tk__name { color: var(--white); font-weight: 600; }
.tk__meta { font-size: 0.76rem; color: var(--faint); margin-top: 0.2rem; }
.tk__when { display: block; font-size: 0.72rem; color: var(--faint); margin-top: 0.25rem; white-space: nowrap; }
table.data th {
  text-align: left;
  padding: 0.85rem 1rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--panel);
}
table.data td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data tr:last-child td { border-bottom: 0; }
table.data tr:hover td { background: rgba(255,255,255,0.02); }
table.data .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; }

.pill {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pill--paid    { background: rgba(18,185,129,0.15); color: #6ee7b7; }
.pill--pending { background: rgba(245,158,11,0.15); color: #fcd34d; }
.pill--failed, .pill--cancelled { background: var(--red-dim); color: #ffb4bc; }
.pill--refunded, .pill--chargeback { background: rgba(255,255,255,0.08); color: var(--muted); }
.pill--valid   { background: rgba(18,185,129,0.15); color: #6ee7b7; }
.pill--used    { background: rgba(255,255,255,0.08); color: var(--muted); }
.pill--void    { background: var(--red-dim); color: #ffb4bc; }

.empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--faint);
  font-size: 0.9rem;
}

.toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; align-items: center; }
.toolbar input[type='search'], .toolbar select {
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  color: var(--white);
  font-size: 0.88rem;
}
.toolbar input[type='search'] { min-width: 240px; flex: 1; max-width: 340px; }

/* ── Login ────────────────────────────────────────────────────────────────── */
.login {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 2rem var(--gutter);
}
.login__box {
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
}
.login__box h1 {
  font-family: var(--display);
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--white);
  text-align: center;
  margin-bottom: 0.4rem;
}
.login__box p { text-align: center; font-size: 0.85rem; color: var(--muted); margin-bottom: 1.75rem; }

/* ── Scanner ──────────────────────────────────────────────────────────────── */
/* The camera is a fixed-size box (.scan__stage) with the manual code field
   right under it, so the whole scanner sits in the top part of the screen,
   clear of Safari's bottom address bar on iPhone. */
.scan {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: #000;
}
.scan__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  position: relative;
  z-index: 3;
}
.scan__brand {
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
}
.scan__counts { font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.scan__counts b { color: var(--white); }

.scan__net {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line-2);
}
.scan__net--on  { color: #6ee7b7; border-color: rgba(18,185,129,0.4); }
.scan__net--off { color: #fcd34d; border-color: rgba(245,158,11,0.4); }
.scan__list {
  padding: .45rem 1rem;
  font-size: .74rem;
  color: var(--faint);
  border-bottom: 1px solid var(--line);
}
.scan__list--warn { color: #fcd34d; }

.scan__stage {
  position: relative;
  flex: none;
  height: min(50svh, 100vw, 460px);
  background: #000;
  overflow: hidden;
}
#scan-video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.scan__reticle {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.scan__box {
  width: min(66vw, 290px);
  aspect-ratio: 1;
  border-radius: 20px;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,0.55);
  position: relative;
}
.scan__box::before, .scan__box::after,
.scan__box > i::before, .scan__box > i::after {
  content: '';
  position: absolute;
  width: 30px; height: 30px;
  border: 3px solid var(--white);
}
.scan__box::before { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 20px 0 0 0; }
.scan__box::after { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 20px 0 0; }
.scan__box > i::before { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 20px; }
.scan__box > i::after { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 20px 0; }

/* Verdict: a panel in the gap under the manual code field, as wide as that
   row. Hidden with visibility (not display) so the space stays reserved and
   nothing jumps when it appears. Tap to dismiss early (scanner.js). */
.scan__result {
  margin: 0.9rem 1rem 0;
  padding: 1rem 1.1rem 1.1rem;
  border-radius: 12px;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.12s ease, visibility 0s linear 0.12s;
  cursor: pointer;
}
.scan__result.is-shown { visibility: visible; opacity: 1; transition: opacity 0.12s ease; }
.scan__result--ok   { background: #0b7a58; }
.scan__result--warn { background: #a16207; }
.scan__result--bad  { background: #a4121f; }

.scan__verdict {
  font-family: var(--display);
  font-size: clamp(1.7rem, 8vw, 2.4rem);
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
}
.scan__holder {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 0.5rem;
  overflow-wrap: anywhere;
}
.scan__holder:empty { display: none; }
.scan__detail { color: rgba(255,255,255,0.95); font-size: 0.95rem; margin-top: 0.45rem; }
.scan__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.85);
  font-size: 0.85rem;
  margin-top: 0.3rem;
}

.scan__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 0.78rem;
  cursor: pointer;
}
.scan__foot {
  padding: 0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--panel);
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 3;
}
.scan__manual {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 0.5rem;
}
.scan__manual .btn { flex: none; }
.scan__manual input {
  flex: 1;
  min-width: 0;
  background: var(--panel-3);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  color: var(--white);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.9rem;
}
.scan__manual input:focus { outline: none; border-color: var(--red); }

.scan__msg {
  padding: 1.25rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}
.scan__msg .btn { margin-top: 1rem; }

/* ── Contact page ─────────────────────────────────────────────────────────── */
.contact__legend { margin-bottom: 1.25rem; }
.contact-topics { display: grid; gap: 1rem; }
.contact-topic {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: clamp(1.35rem, 2.5vw, 1.75rem);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #171717, #0e0e0e);
  box-shadow: inset 0 1px 0 var(--edge);
}
.contact-topic h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--white);
}
.contact-topic p { color: var(--muted); max-width: 56ch; }
.contact-topic .btn { margin-top: 0.6rem; }

.contact-channels { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.contact-channel {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding: 0.95rem 1.1rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: border-color 0.25s, background-color 0.25s;
}
a.contact-channel:hover { border-color: var(--line-2); background: var(--panel-2); }
.contact-channel__icon {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  color: var(--white);
}
.contact-channel__icon svg { width: 18px; height: 18px; }
.contact-channel__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.contact-channel__label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.contact-channel__value {
  font-weight: 600;
  color: var(--white);
  overflow-wrap: anywhere;
}
.contact-channel .btn__arrow { background: var(--white); }
.contact-channel .btn__arrow svg { color: #000; }
/* WhatsApp is where the organiser actually answers: it leads the list. */
.contact-channel--primary { background: var(--red); border-color: var(--red); }
a.contact-channel--primary:hover { background: var(--red-hot); border-color: var(--red-hot); }
.contact-channel--primary .contact-channel__icon { border-color: rgba(255, 255, 255, 0.5); }
.contact-channel--primary .contact-channel__label { color: rgba(255, 255, 255, 0.8); }
.contact-channel--static { background: transparent; }

/* Anton ships a single weight. Any heading set in it must say so, or the
   browser synthesises a bold and the letters run into each other. */
.tt__name, .tt__price, .summary__total span, .ticket__brand, .ticket__event,
.ticket__code, .admin__title, .stat__value, .login__box h1 { font-weight: 400; }

/* Processing fee note under each ticket price, and the summary sub-rows. */
.tt__fee { display: block; font-family: var(--body, inherit); font-size: .7rem; font-weight: 400;
           letter-spacing: 0; color: var(--faint); margin-top: .2rem; text-transform: none; }
.summary__row--sub span, .summary__row--sub strong { font-size: .86rem; }

.stat--warn { border-color: rgba(245,158,11,0.5); }
.stat--warn .stat__value { color: #fcd34d; }