/* ══════════════════════════════════════════════════════════════════════════
   Events — the buyer's pages and the door
   ══════════════════════════════════════════════════════════════════════════

   /events, /event, /tickets, /ticket and /checkin (owner, 2026-10-10: events
   sold "the tix way", in Biiggle's own look). Everything here is built from
   ui.css's tokens — its greys, its violet, its three status colours, its
   scales — so the dark design comes with them. The one gradient is the
   violet panel's (.hero2 — ui.css, the directory's own rules), and the
   drawn banners are cover.php's own.

   Owner, 15 Oct 2026, of a screenshot of the event page: "the most standard
   and professional ui feel … compact, modern carded like a highend native
   app". So these pages are made of the app layer's parts (ui.css, the
   `app-` block; platform/_app.php; docs/ui.md) — the back row, a card of
   rows, the tonal buttons, the pills, the bar at the foot, the one sheet —
   and what is here is only what is these pages' own: the cover, the ticket
   rows and their steppers, the cards of the list, the buyer's tickets, the
   ticket itself, the door. Where a part needed a little more (a fact row
   that may take two lines), it is said beside the rule.

   Prefixes: .ev- the list and the event, .tk- the buyer's tickets, .dr- the
   door. Linked with platformAsset(), so a change reaches every phone.
   ══════════════════════════════════════════════════════════════════════════ */

.ev-i { width: 18px; height: 18px; flex: 0 0 auto; display: block; }

/* ══ the violet panel: ui.css's .hero2; what /events changes in it ════════ */

/* "Find conferences" has to fit a 360px phone on one line. */
.ev-hero .hero2__h{font-size:clamp(30px,7.6vw,54px)}
/* The search box (.ev-seek) is ui.css's since 24 Oct 2026 — one box for the
   three lanes, written once. */

/* ── under the box: Nearby | Everywhere, then My tickets ─────────────────
   One row from the box's start to its end (owner, 22 Oct 2026: My tickets
   "well positioned and styled" — not floating at the far end; 24 Oct 2026:
   "flatter and professionally styled and organized"): the lanes' scope
   control (ui.css .scope, platformScope()) and right beside it My tickets,
   a second button of the same make — the page's own surface, flat, the
   brand's ink on it — and of the same height: a 44px box (the whole tap)
   with the 40px button drawn in it. On a phone the two together are the
   search box's width, the control taking what My tickets leaves — one line
   from 360px (under 375px the button gives up its ticket drawing to stay
   on it); where even that will not fit (a 320px phone, a reader's largest
   text) My tickets is the next line, as wide as the box: two rows on
   purpose, never one button adrift. From 600px both are as wide as their
   words. Under them, one line for what the phone said. */
.ev-at{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-1) var(--s-2);margin:calc(var(--s-3) - 2px) 0 0}
.ev-at .scope{flex:999 1 auto;width:auto;margin:0}
.ev-mytk{position:relative;flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 var(--s-3);
  border:0;border-block:2px solid transparent;border-radius:var(--r-pill);background:var(--surface);background-clip:padding-box;
  color:var(--brand-ink);font-size:var(--t-13);font-weight:650;line-height:1;white-space:nowrap;text-decoration:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color var(--fast) var(--ease)}
.ev-mytk .ev-i{width:16px;height:16px}
.ev-mytk:hover,.ev-mytk[aria-expanded="true"]{background-color:var(--brand-wash);color:var(--brand-ink);text-decoration:none}
.ev-mytk:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:var(--r-pill)}
.ev-at__say{flex:1 1 100%;margin-top:var(--s-1);font-size:var(--t-13);font-weight:500;line-height:1.4;color:rgba(255,255,255,.85)}
.ev-at__say:empty{display:none}
@media (max-width:374px){ .ev-mytk .ev-i{display:none} }
@media (min-width:600px){ .ev-at .scope,.ev-mytk{flex:0 0 auto} }
@media (prefers-reduced-motion:reduce){ .ev-mytk{transition:none} }

/* ── the lit lane's card: the nearest events (ui.css .nb__card) ─────────────
   The day an event starts, in the square where a place has its picture. */
.ev-day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  width:36px;height:36px;flex:0 0 36px;border-radius:10px;
  color:var(--brand-ink);background:var(--brand-wash);line-height:1}
.ev-day b{font-size:var(--t-14);font-weight:750}
.ev-day i{font-style:normal;font-size:var(--t-11);font-weight:700;letter-spacing:.04em;text-transform:uppercase}

/* ══ the list ══════════════════════════════════════════════════════════════ */

.ev-list{padding-bottom:var(--s-12)}
/* The chips are ui.css's `.chip` on its scrolling `.rail`, a thumb tall. The
   rail snaps its first chip to the gutter, not to the screen's edge; its
   focus rings are drawn inside, where the scrolling row cannot cut them. */
.ev-chips{margin-bottom:var(--s-4);scroll-padding-inline:var(--gutter)}
.ev-chips .chip{height:var(--h)}
.ev-chips>:focus-visible{outline-offset:-2px}
/* When, Free | the kinds: two groups, a hairline between them. */
.ev-chips__sep{flex:0 0 1px;align-self:stretch;margin:var(--s-2) var(--s-1);background:var(--line)}

.ev-said{display:flex;align-items:center;flex-wrap:wrap;gap:0 var(--s-1);margin:0 0 var(--s-3);font-size:var(--t-13);color:var(--mute)}
.ev-said strong{color:var(--ink)}
.ev-said a{display:inline-flex;align-items:center;min-height:var(--h);padding-inline:var(--s-2);font-weight:650}

/* ── the cards: the directory's anatomy (home.php `.ad`) ────────────────────
   Tightened (owner, 15 Oct 2026): one radius for the card and its picture's
   corners, the date on a small solid chip, the price, the distance and how
   many are left in one family of pills. */
.ev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:var(--s-4);margin:0 0 var(--s-5)}
.ev-card{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;color:inherit;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  -webkit-tap-highlight-color:transparent;
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.ev-card:hover{border-color:color-mix(in srgb,var(--brand) 30%,var(--line));box-shadow:var(--lift);text-decoration:none}
.ev-card:focus-visible{border-radius:var(--r-lg)}
.ev-card__cover{position:relative;display:block;aspect-ratio:5/2;overflow:hidden;background:var(--surface-2)}
.ev-card__cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease)}
.ev-card:hover .ev-card__cover>img{transform:scale(1.035)}
/* The date, top left, on a chip of the card's own paper: reads on a pale
   picture, a dark one and the drawn banner alike, in both designs. */
.ev-card__date{position:absolute;top:var(--s-2);left:var(--s-2);z-index:2;display:inline-flex;align-items:center;
  height:22px;padding:0 var(--s-2);border-radius:var(--r-pill);font-size:var(--t-11);font-weight:750;letter-spacing:.04em;line-height:1;
  color:var(--ink);background:var(--surface);box-shadow:0 1px 3px rgba(11,16,32,.2)}
/* The organizer's logo, half on the banner, lifted by a ring in the card's colour. */
.ev-card__top{position:relative;z-index:1;display:block;width:max-content;height:40px;margin:-20px 0 0 var(--s-3)}
.ev-card__top:empty{height:var(--s-2);margin:0}
.ev-card__host{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r);overflow:hidden;background:#fff;
  box-shadow:0 0 0 2.5px var(--surface),0 4px 12px -6px rgba(17,10,46,.45);
  font-size:var(--t-14);font-weight:760;letter-spacing:-.02em;color:var(--brand-ink)}
.ev-card__host img{width:100%;height:100%;object-fit:contain;padding:4px;display:block}
.ev-card__host--photo img{object-fit:cover;padding:0}
.ev-card__host--dark{background:#211247}
.ev-card__host--mono{background:var(--brand-wash)}
.ev-card__host--pro{border-radius:50%}
.ev-card__tick{position:absolute;right:-7px;bottom:-3px;display:grid;place-items:center;border-radius:50%;
  background:var(--surface);padding:1px}
.ev-card__tick .vtick{margin:0}
.ev-card__body{display:flex;flex-direction:column;gap:2px;padding:var(--s-2) var(--s-4) var(--s-4)}
.ev-card__t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:var(--t-15);line-height:1.3;font-weight:700;letter-spacing:-.006em;color:var(--ink);overflow-wrap:anywhere}
.ev-card__at{display:block;font-size:var(--t-13);line-height:1.4;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-card__pills{display:flex;flex-wrap:wrap;gap:var(--s-1);margin-top:var(--s-2)}
/* One family: the price quiet, the distance in the brand's tint, how many
   are left in the status colours — all the same height. */
.ev-pill{display:inline-flex;align-items:center;height:22px;padding:0 var(--s-2);border-radius:var(--r-pill);white-space:nowrap;
  font-size:var(--t-11);font-weight:700;line-height:1;color:var(--ink-2);background:var(--surface-2)}
.ev-pill--km{color:var(--brand-ink);background:var(--brand-wash)}
.ev-pill--warn{color:var(--warn);background:var(--warn-wash)}
.ev-pill--bad{color:var(--bad);background:var(--bad-wash)}
@media (max-width:599px){
  /* Two to a row on a phone, as the directory is. */
  .ev-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
  .ev-card__top{height:34px;margin:-17px 0 0 var(--s-2)}
  .ev-card__host{width:34px;height:34px;border-radius:var(--r-sm);font-size:var(--t-12)}
  .ev-card__body{padding:var(--s-2) var(--s-3) var(--s-3)}
  .ev-card__t{font-size:var(--t-14)}
  .ev-card__at{font-size:var(--t-12)}
  .ev-card__date{top:6px;left:6px;height:20px;padding:0 7px}
}
@media (prefers-reduced-motion:reduce){ .ev-card,.ev-card__cover>img{transition:none} .ev-card:hover .ev-card__cover>img{transform:none} }

.ev-more{display:flex;justify-content:center;margin:0 0 var(--s-6)}
.ev-more .app-btn{min-width:160px}

/* Nothing to show — or not yet: the app layer's empty card (.app-empty), a
   heading for its line, and its one or two ways on. */
.ev-empty{margin:var(--s-4) auto var(--s-8);max-width:520px}
.ev-empty .app-empty__t{margin:0;font-size:var(--t-18);line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.ev-empty .app-empty__i{width:56px;height:56px;border-radius:50%;color:var(--brand-ink);background:var(--brand-wash)}
.ev-empty .app-empty__i svg{width:28px;height:28px}
.ev-empty__do{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2)}

/* ══ one event ═════════════════════════════════════════════════════════════ */

.ev-show{padding-block:0 var(--s-10)}
/* Test keys on the gateway: said, so nobody thinks they paid. */
.ev-test{display:inline-flex;align-items:center;height:24px;margin:var(--s-1) 0 var(--s-2);padding:0 10px;border-radius:var(--r-pill);
  font-size:var(--t-12);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--warn);background:var(--warn-wash)}

/* The cover: a real picture edge to edge on a phone at 5:2, rounded in the
   page from 760px. None: a slim drawn strip (cover.php's banner), never a
   placeholder half a screen high. */
.ev-cover{position:relative;aspect-ratio:5/2;overflow:hidden;margin:var(--s-1) calc(var(--gutter) * -1) 0;background:var(--surface-2)}
.ev-cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ev-cover--drawn{aspect-ratio:auto;height:120px}
@media (min-width:760px){ .ev-cover{margin-inline:0;border-radius:var(--r-lg)} }

.ev-cols{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "side" "body";gap:var(--s-6)}
.ev-head{grid-area:head;min-width:0}
.ev-side{grid-area:side;min-width:0}
.ev-body{grid-area:body;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:var(--s-6)}
@media (min-width:900px){
  .ev-cols{grid-template-columns:minmax(0,1fr) 360px;grid-template-rows:auto 1fr;grid-template-areas:"head side" "body side";
    column-gap:var(--s-8);row-gap:var(--s-8)}
  .ev-side{align-self:start;position:sticky;top:76px}
}

.ev-title{margin-top:var(--s-4)}
.ev-h1{font-size:var(--t-24);line-height:1.2;letter-spacing:-.022em;overflow-wrap:anywhere}
@media (min-width:760px){ .ev-h1{font-size:var(--t-30);line-height:1.15} }
.ev-lede{margin-top:var(--s-1);max-width:62ch;font-size:var(--t-15);line-height:1.5;color:var(--mute);overflow-wrap:anywhere}
/* The page's own headings: Tickets, About. */
.ev-h2{margin:0 0 var(--s-3);font-size:var(--t-18);line-height:1.3;letter-spacing:-.012em}

/* The facts: the app layer's card of rows (.app-group). A fact is read
   whole — a long venue or date takes a second line instead of being cut,
   the one thing these rows do that a settings row does not. */
.ev-facts{margin-top:var(--s-4)}
.ev-facts .app-row__t,.ev-facts .app-row__s{white-space:normal;overflow-wrap:anywhere}
.ev-facts .app-row__t{font-weight:600}
.ev-facts .app-row__t .vtick{vertical-align:-3px}
/* The venue's way there, in the brand's ink: the row's own action, said. */
.ev-facts .app-row__v{flex:none;max-width:none;color:var(--brand-ink);font-weight:650}
/* The organizer's picture in the row's tile: their logo on white (as it was
   drawn), a dark one on its plate, a photo filling it, or their initials. */
.ev-host__pic{overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--line);
  font-size:var(--t-13);font-weight:750;letter-spacing:-.01em;color:var(--brand-ink)}
.ev-host__pic img{width:100%;height:100%;object-fit:contain;padding:3px;display:block}
.ev-host__pic--photo img{object-fit:cover;padding:0}
.ev-host__pic--dark{background:#211247;box-shadow:none}
.ev-host__pic--mono{background:var(--brand-wash);box-shadow:none}
.ev-host__pic--pro{border-radius:50%}

/* Add to calendar · Share: two tonal buttons in one row, sharing a phone's
   width; their own width from 600px. */
.ev-acts{display:flex;gap:var(--s-2);margin-top:var(--s-3)}
.ev-acts>.app-btn{flex:1 1 0}
@media (min-width:600px){ .ev-acts>.app-btn{flex:0 0 auto} }

/* ── the tickets: a card, a row a type, its stepper at the end ──────────── */
.ev-tk{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.ev-type{position:relative;display:flex;align-items:center;gap:var(--s-3);min-height:64px;padding:var(--s-3) var(--s-3) var(--s-3) var(--s-4)}
.ev-type+.ev-type::before{content:"";position:absolute;top:0;left:var(--s-4);right:0;height:1px;background:var(--line-2)}
.ev-type__b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.ev-type__n{font-size:var(--t-15);line-height:1.35;font-weight:650;color:var(--ink);overflow-wrap:anywhere}
.ev-type__m{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-2)}
.ev-type__p{font-size:var(--t-14);line-height:1.4;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ev-type__m .app-pill{height:22px;padding:0 var(--s-2);font-size:var(--t-11)}
.ev-type.is-out .ev-type__n,.ev-type.is-out .ev-type__p{color:var(--mute)}
/* − n +: two round 40px buttons, the one that adds tickets tinted. */
.ev-step{flex:none;display:flex;align-items:center;gap:2px}
.ev-step__b{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:50%;
  background:var(--surface);color:var(--ink);cursor:pointer;
  transition:background-color var(--fast) var(--ease),border-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.ev-step__b:hover{border-color:var(--faint)}
.ev-step__b--up{background:var(--brand-wash);color:var(--brand-ink);border-color:transparent}
.ev-step__b--up:hover{background:color-mix(in srgb,var(--brand) 16%,var(--surface));border-color:transparent}
.ev-step__b:disabled{background:var(--surface-2);color:var(--faint);border-color:transparent;cursor:not-allowed}
.ev-step__b svg{width:18px;height:18px}
.ev-step__b:focus-visible{border-radius:50%}
.ev-step__n{width:40px;min-height:40px;height:40px;padding:0;border:0;border-radius:var(--r-sm);background:none;
  text-align:center;font-size:var(--t-16);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;appearance:textfield}
.ev-step__n::-webkit-inner-spin-button,.ev-step__n::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.ev-step__n:focus{box-shadow:0 0 0 2px var(--brand)}
.ev-step__n:disabled{color:var(--faint);background:none}
/* A quick second tap on + is a second ticket, never a zoom. */
.ev-step__b,.ev-step__n,.dr-cam,.dr-man .app-btn,.dr-exit .app-btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* The total and the button, in the card itself where there is a column
   for it (900px and wider); below that the bar at the foot has them. */
.ev-tk__foot{padding:var(--s-4);border-top:1px solid var(--line)}
.ev-total{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);margin:0 0 var(--s-3);
  font-size:var(--t-14);color:var(--mute)}
.ev-total b{font-size:var(--t-20);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.ev-total[hidden]{display:none}
.ev-tk__foot .app-btn{width:100%}
@media (max-width:899px){ .ev-tk__foot{display:none} }
/* Live, ended, cancelled, sold out: said once, as a pill. */
.ev-state{display:inline-flex;align-items:center;gap:6px;height:28px;margin:0;padding:0 var(--s-3);border-radius:var(--r-pill);
  font-size:var(--t-13);font-weight:700;line-height:1;color:var(--ink-2);background:var(--surface-2)}
.ev-state svg{width:16px;height:16px}
.ev-state--bad{color:var(--bad);background:var(--bad-wash)}
.ev-tk--off{padding:var(--s-4)}
.ev-tk__out{margin:var(--s-3) var(--s-4) var(--s-4)}
/* "Choose tickets" pressed: the steppers brought into view, and the card
   says where they are with one breath of the brand's colour. */
@media (prefers-reduced-motion:no-preference){ .ev-tk.is-nudge{animation:evnudge .9s var(--ease)} }
@keyframes evnudge{35%{border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 22%,transparent)}}

/* ── the rest: About, the organizer, Report ─────────────────────────────── */
.ev-text{max-width:68ch;color:var(--ink-2);font-size:var(--t-15);line-height:1.65;overflow-wrap:anywhere}

/* The organizer's card (4A, tix's): the picture, the name and tick, where,
   their Events; a few lines about them; their links. */
.ev-org{display:flex;flex-direction:column;padding:var(--s-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.ev-org__top{display:flex;align-items:center;gap:var(--s-3)}
.ev-org__pic{width:48px;height:48px;flex:0 0 48px;border-radius:var(--r);overflow:hidden;display:grid;place-items:center;
  font-size:var(--t-18);font-weight:760;color:var(--brand-ink);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.ev-org__pic img{width:100%;height:100%;object-fit:contain;padding:4px;display:block}
.ev-org__pic--photo img{object-fit:cover;padding:0}
.ev-org__pic--dark{background:#211247}
.ev-org__pic--mono{background:var(--brand-wash);box-shadow:none}
.ev-org__pic--pro{border-radius:50%}
.ev-org__b{flex:1;min-width:0;display:flex;flex-direction:column}
.ev-org__b b{display:flex;align-items:center;font-size:var(--t-15);font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.ev-org__b small{font-size:var(--t-13);color:var(--mute)}
.ev-org__about{margin:var(--s-3) 0 0;color:var(--ink-2);font-size:var(--t-14);line-height:1.55;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ev-org__soc{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-3) 0 0;padding:0;list-style:none}
.ev-org__soc a{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:var(--r-pill);
  color:var(--ink-2);background:var(--surface);transition:border-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.ev-org__soc a:hover{border-color:var(--faint);color:var(--ink);text-decoration:none}
.ev-org__soc svg{width:18px;height:18px}

.ev-report{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:var(--h);margin:calc(var(--s-2) * -1) 0 0 calc(var(--s-2) * -1);
  padding:0 var(--s-2);border:0;border-radius:var(--r);background:none;font:inherit;font-size:var(--t-13);font-weight:650;color:var(--mute);
  cursor:pointer;transition:color var(--fast) var(--ease),background-color var(--fast) var(--ease)}
.ev-report:hover{color:var(--bad);background:var(--surface-2)}
.ev-report svg{width:16px;height:16px}

/* ── the bar at the foot (ui.css .app-cta), the event's own touches ───────
   The muted "Choose tickets" is never dead: it brings the steppers into
   view (ev.js), so the hand that reaches for it is not refused. From 900px
   the tickets card has the total and the button. */
/* At rest the look of the app layer's disabled button (a muted fill, the
   words still read: 4.8:1 light, 6:1 dark) — but a live one, so its hover
   darkens the words, never the fill under them. */
.ev-get.is-rest{background:var(--surface-2);color:var(--mute);border-color:transparent}
.ev-get.is-rest:hover{background:var(--surface-2);color:var(--ink-2)}
@media (min-width:900px){ .ev-cta,.ev-cta .app-cta__bar{display:none} }

/* ── the sheets' insides: the buyer's details, and Report ─────────────────
   The sheet itself is the platform's one (ui.css .app-sheet, a <dialog>);
   this is what it holds. Its boxes and its button stand on the same edges
   as the sheet's Cancel under them (16 px in, as .app-sheet__do's), so the
   two buttons are one width. */
.ev-pay{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  margin:0;padding:var(--s-1) var(--s-2) var(--s-1)}
.ev-pay .ev-test{margin-top:0}
.ev-pay__go{width:100%}
.ev-sum{list-style:none;margin:0 0 var(--s-4);padding:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--r)}
.ev-sum:empty{display:none}
.ev-sum li{display:flex;justify-content:space-between;gap:var(--s-3);padding:var(--s-2) var(--s-3);font-size:var(--t-14);color:var(--ink-2)}
.ev-sum li+li{border-top:1px solid var(--line-2)}
.ev-sum li.ev-sum__t{font-weight:700;color:var(--ink);background:var(--surface-2)}
.ev-fault{margin:0 0 var(--s-4);padding:var(--s-3) var(--s-4);border-radius:var(--r);font-size:var(--t-14);
  color:var(--bad);background:var(--bad-wash);border:1px solid color-mix(in srgb,var(--bad) 22%,transparent)}
.ev-agree{margin:0 0 var(--s-3);text-align:center;font-size:var(--t-12);line-height:1.5;color:var(--mute)}
.ev-why{margin:0 0 var(--s-4);padding:0;border:0}
.ev-why label{min-height:var(--h)}
.ev-say{margin:0 0 var(--s-3);font-size:var(--t-14);font-weight:650;color:var(--ink-2)}
.ev-say:empty{display:none}
.ev-say.is-ok{color:var(--good)}
.ev-say.is-bad{color:var(--bad)}
/* Without a script, the details are simply the end of the page. */
html:not(.ev-js) #evDetails{display:block;position:static;overflow:visible}
html:not(.ev-js) #evDetails .app-sheet__veil,html:not(.ev-js) #evDetails .app-sheet__grab,
html:not(.ev-js) #evDetails .app-sheet__x{display:none}
html:not(.ev-js) #evDetails .app-sheet__box{position:static;transform:none;width:auto;max-width:520px;max-height:none;
  margin:0 auto var(--s-10);padding:var(--s-4) var(--s-2) var(--s-3);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:none}

/* ══ the buyer's tickets ═════════════════════════════════════════════════
   /tickets: an order as one card, the orders an email link opens, Find my
   tickets. */

.tk-wrap{max-width:640px;padding-block:0 var(--s-10)}
.tk-h{margin:var(--s-3) 0 var(--s-4);font-size:var(--t-24);line-height:1.2;letter-spacing:-.022em}
/* A heading over a card, as the app layer's groups have (.app-group__h). */
.tk-h2{margin:var(--s-6) 0 var(--s-2) var(--s-4);font-size:var(--t-13);line-height:1.4;font-weight:600;letter-spacing:0;color:var(--mute)}
.tk-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-4)}
.tk-list.tk-card{padding:0;overflow:hidden}
/* The line between two rows starts under the words, as the app layer's do
   (ui.css .app-group__box): after a row's 36 px tile, or its 48 px picture. */
.tk-list>*+*{position:relative}
.tk-list>*+*::before{content:"";position:absolute;z-index:1;top:0;right:0;height:1px;left:calc(var(--s-4) + 36px + var(--s-3));
  background:var(--line-2);pointer-events:none}
.tk-list>*+*:has(.tk-thumb)::before{left:calc(var(--s-4) + 48px + var(--s-3))}
.tk-row{display:flex;align-items:center;gap:var(--s-3);min-height:64px;padding:var(--s-3) var(--s-4);
  color:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background var(--fast) var(--ease)}
.tk-row:hover{background:var(--surface-2);text-decoration:none}
.tk-row:focus-visible{outline-offset:-3px;border-radius:var(--r-sm)}
.tk-row .tag{flex:0 0 auto;height:22px;padding:0 var(--s-2);font-size:var(--t-11);line-height:22px}
.tk-thumb{position:relative;display:block;width:48px;height:48px;flex:0 0 48px;border-radius:var(--r);overflow:hidden;background:var(--surface-2)}
.tk-thumb>img{width:100%;height:100%;object-fit:cover;display:block}
.tk-row__i{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border-radius:var(--r-sm);
  color:var(--brand-ink);background:var(--brand-wash)}
.tk-row__i .ev-i,.tk-row__i svg{width:20px;height:20px}
.tk-row__b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.tk-row__b b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:var(--t-15);line-height:1.3;font-weight:650;color:var(--ink);overflow-wrap:anywhere}
.tk-row__b small{font-size:var(--t-13);color:var(--mute);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:anywhere}
.tk-row__c{flex:0 0 18px;color:var(--faint);transition:transform var(--fast) var(--ease)}
.tk-row__c .ev-i,.tk-row__c svg{width:18px;height:18px}
.tk-order>summary{list-style:none}
.tk-order>summary::-webkit-details-marker{display:none}
.tk-order[open]>summary .tk-row__c{transform:rotate(90deg)}
.tk-subs{background:var(--bg);border-top:1px solid var(--line-2)}
.tk-subs .tk-row+.tk-row{border-top:1px solid var(--line-2)}
.tk-row--sub{padding-left:var(--s-6)}
.tk-code{font-variant-numeric:tabular-nums;letter-spacing:.08em}
/* An order, as one card: its event, how it stands, its tickets. */
.tk-ret{padding:0;overflow:hidden}
.tk-ret__ev{display:flex;align-items:center;gap:var(--s-3);min-height:72px;padding:var(--s-3) var(--s-4);color:inherit;text-decoration:none;
  -webkit-tap-highlight-color:transparent;transition:background var(--fast) var(--ease)}
.tk-ret__ev:hover{background:var(--surface-2);text-decoration:none}
.tk-ret__ev:focus-visible{outline-offset:-3px;border-radius:var(--r-sm)}
.tk-ret__st{padding:var(--s-4);border-top:1px solid var(--line-2)}
.tk-ret>.tk-list{border-top:1px solid var(--line-2)}
/* An order's own tickets are the card's rows, on its 16 px edge (the
   indent is for the tickets folded under an order in a list). */
.tk-ret .tk-row--sub{padding-left:var(--s-4)}
.tk-state{display:flex;align-items:center;gap:var(--s-2);margin:0;font-size:var(--t-20);line-height:1.25;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.tk-state .ev-i,.tk-state svg{width:24px;height:24px}
.tk-state--good{color:var(--good)}
.tk-state--bad{color:var(--bad)}
.tk-state--warn{color:var(--warn)}
.tk-sub{display:flex;align-items:center;gap:6px;margin:var(--s-1) 0 0;font-size:var(--t-14);color:var(--mute);overflow-wrap:anywhere}
.tk-sub .ev-i,.tk-sub svg{width:16px;height:16px;flex:none}
.tk-spin{width:22px;height:22px;flex:0 0 22px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--brand);
  animation:tkspin .8s linear infinite}
@keyframes tkspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .tk-spin{animation-duration:2.4s} .tk-row,.tk-row__c{transition:none} }
.tk-again{margin:var(--s-4) 0 0}
.tk-again[hidden]{display:none}
.tk-more{display:flex;justify-content:center;margin:var(--s-4) 0 0}
/* Find my tickets: the box and the button in one card. */
.tk-find form{margin:0}
.tk-done,.tk-fault{display:flex;align-items:center;gap:var(--s-2);margin:0 0 var(--s-4);padding:var(--s-3) var(--s-4);
  border-radius:var(--r);font-size:var(--t-14);font-weight:650}
.tk-done{color:var(--good);background:var(--good-wash);border:1px solid color-mix(in srgb,var(--good) 22%,transparent)}
.tk-fault{color:var(--bad);background:var(--bad-wash);border:1px solid color-mix(in srgb,var(--bad) 22%,transparent)}
.tk-done .ev-i,.tk-done svg{width:18px;height:18px;flex:none}
.tk-who{display:flex;align-items:center;gap:6px;margin:calc(var(--s-2) * -1) 0 var(--s-4);font-size:var(--t-14);
  color:var(--mute);overflow-wrap:anywhere}
.tk-who .ev-i,.tk-who svg{width:16px;height:16px;flex:none}
.tk-mine{margin-top:var(--s-6)}
.tk-empty{margin:0;color:var(--mute);font-size:var(--t-14)}

/* ── one ticket: a card cut across, the QR on a white plate ──────────────── */
.tk-one{max-width:440px;padding-block:0 var(--s-10)}
.tk-ticket{position:relative;overflow:hidden;margin-top:var(--s-2);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--lift)}
.tk-ticket__strip{position:relative;display:block;aspect-ratio:16/5;overflow:hidden;background:var(--surface-2)}
.tk-ticket__strip>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* No picture: a slim drawn strip. */
.tk-ticket__strip--drawn{aspect-ratio:auto;height:72px}
.tk-ticket__top{padding:var(--s-4) var(--s-5) var(--s-4)}
.tk-ticket__t{font-size:var(--t-20);line-height:1.25;letter-spacing:-.015em;overflow-wrap:anywhere}
.tk-ticket__who{margin:var(--s-1) 0 0;font-size:var(--t-15);font-weight:700;color:var(--brand-ink)}
.tk-ticket__facts{list-style:none;display:grid;gap:var(--s-2);margin:var(--s-3) 0 0;padding:0}
.tk-ticket__facts li{display:flex;align-items:flex-start;gap:var(--s-2);font-size:var(--t-14);line-height:1.45;color:var(--ink-2)}
.tk-ticket__facts li>span{min-width:0;overflow-wrap:anywhere}
.tk-ticket__facts .ev-i,.tk-ticket__facts svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--brand)}
/* The cut: a dashed line, and a bite out of each edge in the page's colour. */
.tk-cut{position:relative;height:0;margin:0 var(--s-5);border-top:2px dashed var(--line)}
.tk-cut::before,.tk-cut::after{content:"";position:absolute;top:-13px;width:24px;height:24px;border-radius:50%;
  background:var(--bg);border:1px solid var(--line)}
.tk-cut::before{left:calc(var(--s-5) * -1 - 13px)}
.tk-cut::after{right:calc(var(--s-5) * -1 - 13px)}
.tk-ticket__qr{display:flex;flex-direction:column;align-items:center;padding:var(--s-5) var(--s-5) var(--s-6)}
/* White in both designs: a code is read dark on light. */
.tk-plate{padding:12px;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.tk-qr{display:block;width:216px;height:216px;max-width:100%;image-rendering:pixelated}
.tk-ticket__code{margin:var(--s-3) 0 0;font-size:var(--t-24);font-weight:760;letter-spacing:.18em;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.tk-flag{margin:var(--s-3) 0 0;padding:6px var(--s-4);border-radius:var(--r-pill);font-size:var(--t-15);font-weight:760}
.tk-flag--warn{color:var(--warn);background:var(--warn-wash)}
.tk-flag--bad{color:var(--bad);background:var(--bad-wash)}
.tk-ticket.is-warn .tk-plate,.tk-ticket.is-bad .tk-plate{opacity:.3}
/* Save image · Add to calendar · Directions: three tonal tiles, the icon
   over its word. */
.tk-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2);margin:var(--s-4) 0 0}
.tk-acts .app-btn{flex-direction:column;gap:6px;min-height:72px;padding:var(--s-2);white-space:normal;
  font-size:var(--t-13);line-height:1.2}
.tk-acts .app-btn>span{overflow:visible}
.tk-acts .app-btn svg{width:22px;height:22px}
/* Save image is put away where the browser cannot make a picture (ev.js). */
.tk-acts [hidden]{display:none}
.tk-ev{margin-top:var(--s-4)}

/* ══ the door ════════════════════════════════════════════════════════════ */

/* Step 1: the code, one card in the middle (ui.css `.pane`). */
.dr-pane .wrap{max-width:420px}
/* The mark over it leads home: a 40 px target the width of its words. */
.dr-pane a.mark{width:max-content;min-height:var(--h);align-items:center;margin-left:auto;margin-right:auto;padding:0 var(--s-2);
  border-radius:var(--r);color:var(--ink);text-decoration:none;transition:background-color var(--fast) var(--ease)}
.dr-pane a.mark:hover{background:var(--surface-2);text-decoration:none}
.dr-pane .card{text-align:center}
.dr-pane form,.dr-pane .fault{text-align:left}
.dr-code__i{display:grid;place-items:center;width:56px;height:56px;margin:0 auto var(--s-3);border-radius:50%;
  color:var(--brand-ink);background:var(--brand-wash)}
.dr-code__i svg{width:28px;height:28px}
.dr-codein{text-align:center;text-transform:uppercase;letter-spacing:.2em;font-size:var(--t-20);font-weight:720}
.dr-codein::placeholder{letter-spacing:normal}

/* Step 2: the whole screen — no tab bar; the app layer's bar along the top
   (.app-bar): the event, the count, Exit. */
body.dr{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.dr-bar .app-bar__title:first-child{padding-left:var(--s-2)}
/* On a wide screen the bar is as wide as the door's column under it. */
.dr-bar .app-bar__in{max-width:560px}
.dr-top__n{font-variant-numeric:tabular-nums}
.dr-exit{margin:0;flex:0 0 auto}
.dr-main{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--s-3);width:100%;max-width:560px;margin:0 auto;
  padding:var(--s-4) var(--gutter) calc(var(--s-5) + env(safe-area-inset-bottom,0px))}
.dr-res{flex:1 1 auto;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2);
  padding:var(--s-6) var(--s-4);border-radius:var(--r-xl);text-align:center;background:var(--surface);border:1px solid var(--line);
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.dr-res__i{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;color:var(--mute);background:var(--surface-2)}
.dr-res__svg{width:34px;height:34px}
.dr-res__w{font-size:clamp(30px,9vw,48px);line-height:1.05;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.dr-res__s{min-height:1.4em;font-size:var(--t-18);font-weight:650;color:var(--ink-2);overflow-wrap:anywhere}
.dr-res--good{background:var(--good-wash);border-color:color-mix(in srgb,var(--good) 32%,transparent)}
.dr-res--good .dr-res__w,.dr-res--good .dr-res__i{color:var(--good)}
.dr-res--warn{background:var(--warn-wash);border-color:color-mix(in srgb,var(--warn) 32%,transparent)}
.dr-res--warn .dr-res__w,.dr-res--warn .dr-res__i{color:var(--warn)}
.dr-res--bad{background:var(--bad-wash);border-color:color-mix(in srgb,var(--bad) 32%,transparent)}
.dr-res--bad .dr-res__w,.dr-res--bad .dr-res__i{color:var(--bad)}
.dr-res--good .dr-res__i,.dr-res--warn .dr-res__i,.dr-res--bad .dr-res__i{background:var(--surface)}
.dr-res.is-busy{opacity:.7}
.dr-cam{width:100%}
.dr-cam svg{width:22px;height:22px}
.dr-cam[hidden]{display:none}
.dr-man{display:flex;gap:var(--s-2);margin:0}
.dr-man input{flex:1 1 auto;min-width:0;font-size:var(--t-16);text-transform:uppercase;letter-spacing:.08em;font-weight:650}
.dr-man input::placeholder{text-transform:none;letter-spacing:normal;font-weight:500}
.dr-man .app-btn{flex:0 0 auto}
@media (prefers-reduced-motion:reduce){ .dr-res{transition:none} .ev-tk{transition:none} }

/* ══ one organizer's page (/events?by=) ═══════════════════════════════════
   4A, and the app layer (owner, 15 Oct 2026): the page opens on who it is —
   the back row, then the organizer's card as the page's heading (the picture
   at the app layer's media size, 64 px and 72 from 600 px; the name and
   tick; "Organizer · where"; a few lines about it; its links), then "Events"
   with how many, then the cards. */
.ev-list--by{padding-top:0}
.ev-by--o{display:block;margin:var(--s-2) 0 0;padding:var(--s-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.ev-by__top{display:flex;align-items:center;gap:var(--s-4)}
.ev-by__pic{width:64px;height:64px;flex:0 0 64px;border-radius:var(--r-lg);overflow:hidden;display:grid;place-items:center;
  background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
/* Their logo on white as it was drawn, a photo filling the square, a dark logo on its plate (the event page's own rule). */
.ev-by__pic img{width:100%;height:100%;object-fit:contain;padding:6px;display:block}
.ev-by__pic--photo img{object-fit:cover;padding:0}
.ev-by__pic--dark{background:#211247;box-shadow:none}
/* No logo: the initials on the brand's tint (.app-media__pic--ini's). */
.ev-by__pic--mono{background:var(--brand-wash);color:var(--brand-ink);font-size:var(--t-20);font-weight:750;letter-spacing:.02em;box-shadow:none}
.ev-by__b{flex:1 1 auto;min-width:0}
/* The name is the page's heading; the tick sits after its last word, at the house's own distance (.vtick's 5px). */
.ev-by__name{margin:0;font-size:var(--t-20);line-height:1.25;font-weight:700;letter-spacing:-.015em;color:var(--ink);overflow-wrap:anywhere}
.ev-by__name .vtick{vertical-align:-3px}
.ev-by__at{margin:2px 0 0;font-size:var(--t-13);line-height:1.4;color:var(--mute);overflow-wrap:anywhere}
@media (min-width:600px){
  .ev-by__pic{width:72px;height:72px;flex-basis:72px}
  .ev-by__name{font-size:var(--t-24);line-height:1.2}
}
/* "Events  3": the part's heading, its count a quiet pill (ui.css .app-h). */
.ev-by__h{margin:var(--s-6) 0 var(--s-3)}
.ev-list--by .ev-said{margin-top:var(--s-4)}
.ev-list--by .ev-empty{margin-top:var(--s-6)}
.ev-by__about{margin:var(--s-3) 0 0;max-width:68ch;color:var(--ink-2);font-size:var(--t-14);line-height:1.55;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ev-by__soc{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-3) 0 0;padding:0;list-style:none}
.ev-by__soc a{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:var(--r-pill);
  color:var(--ink-2);background:var(--surface);transition:border-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.ev-by__soc a:hover{border-color:var(--faint);color:var(--ink);text-decoration:none}
.ev-by__soc svg{width:18px;height:18px}