/* ============================================================
   Discovery platform — design system.
   Mobile-first: base styles are the phone; ≥760px upgrades to desktop.
   ============================================================ */

/* Outfit (SIL OFL, license in assets/fonts/OFL.txt) — self-hosted because
   the CSP allows font-src 'self' only. Variable weight, latin subset. */
@font-face{
  font-family:"Outfit";
  src:url("fonts/outfit-var.woff2") format("woff2-variations");
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  /* ============================================================
     CANARY NOIR — dark charcoal ground, canary voltage.
     Ported from Miro's token system (design-md-library), inverted to a dark
     canvas. Replaces the previous flame-on-warm-white palette, which was the
     same idea as Eventbrite's (#DE2E0D vs #F05537) and read as a clone.
     Token NAMES are unchanged so no component had to be rewritten.
     ============================================================ */
  --ink:#F5F5F7; --ink-2:#C2C4CC; --ink-3:#A5A8B5;
  --ground:#1C1C1E; --surface:#26262A; --sunk:#161618;
  --line:#33333A; --line-2:#45454E;

  /* Canary is the brand voltage. It is a LIGHT accent, so everything filled
     with it carries DARK text (--on-accent) — white on #FFD02F is 1.47:1 and
     completely illegible. --flame-deep is the lighter yellow used for small
     coloured TEXT on dark tints and for the brighter hover state; on a dark
     UI "brighter on hover" is the correct direction.
     Measured on --ground #1C1C1E: canary text 11.6:1, teal 7.2:1, violet
     6.5:1, amber 8.3:1, ink 15.6:1, ink-2 9.8:1, ink-3 7.2:1. */
  --flame:#FFD02F; --flame-deep:#FFDD6B; --flame-tint:#38300F;
  --violet:#8798FF; --violet-tint:#22254A;
  --teal:#0FBCB0; --teal-tint:#0D3330;
  --amber:#FFB454; --amber-tint:#3A2C14;

  /* Danger got its own token. It previously reused --flame-deep, which was
     fine when the brand was red — but "Cancel event & refund everyone" must
     never render as a friendly canary button. */
  --danger:#FF6B5A; --danger-deep:#FF8778; --danger-tint:#3A1E1A;

  /* Categorical data colors, re-validated for this ground: each clears 3:1
     against --ground (11.6 / 6.5 / 7.2) and every pair holds >=75 RGB
     separation under protanopia, deuteranopia and tritanopia. */
  --d1:#FFD02F; --d2:#8798FF; --d3:#0FBCB0;

  /* Text that sits ON a filled surface rather than on the page ground.
     These exist so a theme flip cannot strand white text on a light fill:
     `background:var(--ink); color:#fff` is correct while --ink is near-black
     and becomes white-on-white the moment it isn't. Both are dark here
     because --ink and --flame are now both light. */
  --on-ink:#1C1C1E;        /* on an --ink fill      */
  --on-accent:#1C1C1E;     /* on --flame/--teal/chart fills */

  --sans:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Shadows do almost nothing on a dark ground, so they are deeper and lean
     on the --line borders to separate surfaces instead. */
  --shadow-1:0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.38);
  --shadow-2:0 2px 6px rgba(0,0,0,.55), 0 16px 40px rgba(0,0,0,.6);
  --tabh:60px;
}
*{box-sizing:border-box; margin:0; padding:0}
/* screen-reader-only content (AODA): visually gone, still announced */
.vh{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:none; text-align:left}
input,select{font:inherit; color:inherit}
:focus-visible{outline:2.5px solid var(--flame); outline-offset:2px; border-radius:6px}
::placeholder{color:var(--ink-3)}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important} }

/* ---------- type primitives ---------- */
.display{font-weight:800; letter-spacing:-.035em; line-height:1.04}
.eyebrow{font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase}
.when{font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--flame-deep)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--flame); color:var(--on-accent); font-weight:700; font-size:15px;
  padding:13px 22px; border-radius:14px; transition:transform .12s, background .15s;
  text-align:center;
}
.btn:active{transform:scale(.975)}
.btn:hover{background:var(--flame-deep)}
.btn.block{width:100%}
.btn.lg{font-size:16.5px; padding:16px 26px; border-radius:16px}
.btn.ghost{background:none; color:var(--ink); border:1.5px solid var(--line-2)}
.btn.ghost:hover{background:var(--sunk); border-color:var(--ink-3)}
.btn.dark{background:var(--ink)} .btn.dark:hover{background:#332C29}
.btn.quiet{background:var(--sunk); color:var(--ink)} .btn.quiet:hover{background:var(--line)}
/* .btn sets display:inline-flex, which beats the UA's [hidden]{display:none} —
   without this the hold-extend control would be visible the whole time. */
.btn[hidden]{display:none}
.holdext{font-size:12px; font-weight:750; padding:6px 10px; border-radius:99px; flex:none}

/* Door-staff event assignments. The chip carries its own remove control so the
   whole relationship (who scans what, and how to end it) reads in one place. */
.evchips{display:flex; flex-wrap:wrap; gap:6px}
.evchip{display:inline-flex; align-items:center; gap:5px; background:var(--sunk);
  border:1px solid var(--line); color:var(--ink-2); font-size:12.5px; font-weight:650;
  padding:3px 4px 3px 11px; border-radius:99px; max-width:100%}
/* 24x24 is the WCAG 2.5.8 (AA) floor for a pointer target. The glyph reads
   smaller than the button so the chip stays compact. */
.evx{display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:24px; height:24px; border-radius:50%; font-size:15px; line-height:1;
  color:var(--ink-3); background:transparent}
.evx:hover{background:var(--danger-tint); color:var(--danger)}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn:disabled:active{transform:none}

/* ---------- app header ---------- */
.topbar{position:sticky; top:0; z-index:40; background:var(--ground); border-bottom:1px solid transparent; transition:border-color .2s}
.topbar.stuck{border-color:var(--line)}
.tbwrap{max-width:1240px; margin:0 auto; padding:12px 16px 10px}
.locrow{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.locpick{display:flex; align-items:center; gap:6px; font-weight:700; font-size:15.5px; padding:5px 10px 5px 4px; border-radius:10px}
.locpick:hover{background:var(--sunk)}
.locpick .pinico{color:var(--flame); display:flex}
.locpick .caret{color:var(--ink-3); font-size:11px}
/* The platform wordmark — big type IS the logo, flame period as the mark. */
/* The wordmark is a real button now — it is the way home from every view.
   Reset the UA button styling so it still reads as the logo, not a control. */
.brandmark{display:flex; align-items:baseline; font-weight:800; letter-spacing:-.045em;
  font-size:34px; line-height:1; padding:4px 0 12px;
  background:none; border:0; color:inherit; font-family:inherit; cursor:pointer; text-align:left}
.brandmark .bdot{color:var(--flame)}
/* Slim bar: every view that is not discover or search. Wordmark + nav only —
   no location picker, headline or search field on top of a ticket. */
.tbwrap.slim{padding-bottom:6px}
.tbwrap.slim .brandmark{font-size:25px; padding:2px 0 6px}
.askline{font-size:26px; font-weight:800; letter-spacing:-.035em; line-height:1.08; margin-bottom:13px; max-width:16ch}

.searchbtn, .searchfield{
  width:100%; display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1.5px solid var(--line-2); border-radius:14px;
  padding:12px 15px; font-size:15px; color:var(--ink-3); box-shadow:var(--shadow-1);
}
.searchbtn:hover{border-color:var(--ink-3)}
.searchfield input{flex:1; border:none; background:none; outline:none; color:var(--ink); min-width:0}
.searchfield:focus-within{border-color:var(--flame); box-shadow:0 0 0 3px var(--flame-tint)}
.searchico{color:var(--ink); flex:none; display:flex}

/* discovery chips */
.chiprail{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:12px 16px 4px; scroll-snap-type:x proximity; scroll-padding-inline:16px}
.chiprail::-webkit-scrollbar{display:none}
.chiprail::after{content:""; flex:none; width:6px}
.chip{
  flex:none; padding:9px 15px; border-radius:999px; border:1.5px solid var(--line-2);
  background:var(--surface); font-size:13.5px; font-weight:650; white-space:nowrap; scroll-snap-align:start;
  transition:all .12s;
}
.chip:hover{border-color:var(--ink-3)}
.chip.on{background:var(--ink); border-color:var(--ink); color:var(--on-ink)}
.chip.hot.on{background:var(--flame); border-color:var(--flame)}

/* ---------- page shell ---------- */
main{max-width:1240px; margin:0 auto; padding-bottom:calc(var(--tabh) + 34px)}
.pad{padding-left:16px; padding-right:16px}

/* ---------- section + rails ---------- */
.sec{margin-top:26px}
.sechead{display:flex; align-items:baseline; gap:10px; padding:0 16px 11px}
.sechead h2{font-size:19px; font-weight:800; letter-spacing:-.03em}
.sechead .sn{font-size:12.5px; color:var(--ink-3); margin-left:auto; white-space:nowrap; font-weight:600}
/* "See all" is a real button, not a label, and shipped 38x19 with no padding —
   under the 24px WCAG 2.5.8 minimum. Grow the HIT AREA without moving it: the
   negative margin gives the padding back to the layout, so the header row looks
   identical. The count spans keep their old styling. */
.sechead button.sn{min-height:24px; display:inline-flex; align-items:center;
  padding:3px 6px; margin-right:-6px}

/* WCAG 2.2.2 control for the clips that start on their own. Deliberately
   quiet: it is an accessibility affordance, not a feature to advertise. */
.motiontog{display:inline-flex; align-items:center; gap:5px; align-self:center; flex:none;
  font-size:12px; font-weight:700; color:var(--ink-2); background:var(--sunk);
  border:1px solid var(--line); padding:5px 10px; border-radius:99px; white-space:nowrap;
  transition:color .15s, border-color .15s}
.motiontog:hover{color:var(--ink); border-color:var(--line-2)}
.motiontog svg{width:10px; height:10px; fill:currentColor; stroke:none; flex:none}
.motionpill{cursor:pointer}
.rail{
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding:2px 16px 6px; scroll-padding-inline:16px;
}
.rail::-webkit-scrollbar{display:none}
.rail::after{content:""; flex:none; width:4px}

/* ---------- event card ---------- */
.ecard{
  position:relative; flex:none; width:255px; scroll-snap-align:start;
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  overflow:hidden; box-shadow:var(--shadow-1); transition:transform .14s, box-shadow .14s;
  display:flex; flex-direction:column;
}
.ecard:hover{transform:translateY(-2px); box-shadow:var(--shadow-2)}
.ecard.wide{width:auto; flex:1 1 auto}
.ehit{display:flex; flex-direction:column; flex:1; min-width:0; width:100%}
.eart{position:relative; aspect-ratio:16/10; overflow:hidden; flex:none}
.eart .glyph{position:absolute; right:10px; bottom:-22px; font-size:96px; font-weight:800; letter-spacing:-.05em; color:rgba(255,255,255,.26); line-height:1; user-select:none}
.eart .vibe{position:absolute; inset:0; display:flex; align-items:flex-end; padding:11px; gap:6px}
.tagpill{
  display:inline-flex; align-items:center; gap:5px; background:rgba(28,28,30,.86); color:var(--ink);
  font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 9px; border-radius:8px; backdrop-filter:blur(6px);
}
.tagpill.flame{color:var(--flame-deep)}
.tagpill.teal{color:var(--teal)}
.tagpill.amber{color:var(--amber)}
.tagpill.solid{background:var(--ink); color:var(--on-ink)}
.tagpill svg{width:9px; height:9px; fill:currentColor; stroke:none; flex:none}
.savebtn{
  position:absolute; top:9px; right:9px; z-index:2; width:34px; height:34px; border-radius:50%;
  background:rgba(28,28,30,.74); display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 6px rgba(20,17,16,.2); backdrop-filter:blur(6px); transition:transform .12s;
}
.savebtn:active{transform:scale(.88)}
.savebtn svg{width:17px; height:17px; stroke:var(--ink); fill:none; stroke-width:2.2}
.savebtn.on svg{fill:var(--flame); stroke:var(--flame)}
.ebody{padding:12px 13px 14px; display:flex; flex-direction:column; gap:4px; flex:1}
.ebody .et{font-size:15.5px; font-weight:750; letter-spacing:-.02em; line-height:1.27;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.eplace{font-size:12.5px; color:var(--ink-3); display:flex; align-items:center; gap:5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.efoot{margin-top:auto; padding-top:9px; display:flex; align-items:center; gap:8px}
.eprice{font-size:14px; font-weight:750}
.eprice.free{color:var(--teal)}
.esocial{margin-left:auto; font-size:11.5px; font-weight:700; color:var(--ink-3); white-space:nowrap}

/* ---------- reel rail (video-first architecture) ---------- */
.reel{
  position:relative; flex:none; width:158px; aspect-ratio:9/16; scroll-snap-align:start;
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow-1); display:block;
  background:var(--ink);
}
/* .reelmedia is the slot a real <video muted loop playsinline> drops into */
.reelmedia{position:absolute; inset:0; animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.02) translate3d(0,0,0)} to{transform:scale(1.16) translate3d(-3%,-2%,0)}}
.reel .scrim{position:absolute; inset:0; background:linear-gradient(to top, rgba(10,8,7,.86) 0%, rgba(10,8,7,.15) 46%, rgba(10,8,7,.3) 100%)}
.reelplay{position:absolute; top:9px; left:9px; width:26px; height:26px; border-radius:50%; background:rgba(28,28,30,.74); display:flex; align-items:center; justify-content:center}
.reelplay svg{width:11px; height:11px; fill:var(--ink); margin-left:1.5px}
.reellen{position:absolute; top:11px; right:9px; color:#fff; font-size:10.5px; font-weight:750; letter-spacing:.04em; text-shadow:0 1px 3px rgba(0,0,0,.5)}
.reelinfo{position:absolute; left:0; right:0; bottom:0; padding:11px 11px 12px; color:#fff}
.reelinfo .rt{font-size:13px; font-weight:750; line-height:1.25; letter-spacing:-.015em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.reelinfo .rd{font-size:10.5px; font-weight:750; letter-spacing:.07em; text-transform:uppercase; opacity:.85; margin-top:3px}
.reelinfo .rp{margin-top:7px; display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:800; background:rgba(255,255,255,.16); backdrop-filter:blur(6px); padding:5px 9px; border-radius:8px}

/* ---------- event detail ---------- */
.detailgrid{padding:0 16px}
.buysub{display:none}
.backbar{position:sticky; top:0; z-index:35; display:flex; align-items:center; gap:8px; padding:10px 16px; background:var(--ground)}
.iconbtn{width:38px; height:38px; border-radius:50%; background:var(--surface); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-1); flex:none}
.iconbtn:active{transform:scale(.92)}
.iconbtn svg{width:18px; height:18px; stroke:var(--ink); fill:none; stroke-width:2.2}
.iconbtn.on svg{fill:var(--flame); stroke:var(--flame)}
.iconbtn.spaced{margin-left:auto}
.dhero{position:relative; margin:0 16px; border-radius:20px; overflow:hidden; aspect-ratio:16/11}
.dhero .glyph{position:absolute; right:14px; bottom:-30px; font-size:170px; font-weight:800; letter-spacing:-.05em; color:rgba(255,255,255,.24); line-height:1}
.dhero .heroplay{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:56px; height:56px; border-radius:50%;
  background:rgba(28,28,30,.74); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-2)}
.dhero .heroplay svg{width:19px; height:19px; fill:var(--ink); margin-left:3px}
.dhero .vibe{position:absolute; left:12px; bottom:12px; display:flex; gap:6px}
.dtitle{font-size:26px; font-weight:800; letter-spacing:-.038em; line-height:1.09; margin:16px 0 12px; text-wrap:balance}
.factlist{display:flex; flex-direction:column; gap:13px; margin-bottom:18px}
.fact{display:flex; gap:11px; align-items:flex-start}
.factico{width:36px; height:36px; border-radius:11px; background:var(--sunk); display:flex; align-items:center; justify-content:center; flex:none}
.factico svg{width:17px; height:17px; fill:none; stroke:var(--ink-2); stroke-width:2}
.fact .f1{font-weight:700; font-size:14.5px}
.fact .f2{color:var(--ink-3); font-size:13px; margin-top:1px}
.fact .f2 b{color:var(--ink-2); font-weight:650}

.dsec{margin:26px 0}
.dsec h2{font-size:18px; font-weight:800; letter-spacing:-.03em; margin-bottom:11px}
.dsec p{color:var(--ink-2); margin-bottom:11px; font-size:14.5px; line-height:1.62}
.clamp{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.readmore{color:var(--flame-deep); font-weight:750; font-size:14px; padding:4px 0}
.expectgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.expect{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:13px 14px}
.expect .en{font-weight:700; font-size:13.5px}
.expect .ed{color:var(--ink-3); font-size:12.5px; margin-top:2px; line-height:1.4}
.mapbox{height:150px; border-radius:16px; border:1px solid var(--line); position:relative; overflow:hidden;
  background:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(150deg, var(--surface), var(--sunk));
  background-size:30px 30px, 30px 30px, cover}
.pin{position:absolute; left:50%; top:50%; transform:translate(-50%,-100%); width:24px; height:24px;
  background:var(--flame); border-radius:50% 50% 50% 0; rotate:-45deg; box-shadow:0 4px 10px rgba(0,0,0,.5)}
.pin::after{content:""; position:absolute; inset:6.5px; background:var(--on-accent); border-radius:50%}
.orgrow{display:flex; align-items:center; gap:13px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px 15px}
.oav{width:46px; height:46px; border-radius:14px; flex:none; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:19px; color:#fff}
.orgrow .on{font-weight:750; font-size:15px}
.orgrow .om{color:var(--ink-3); font-size:12.5px; margin-top:1px}
.orgrow .btn{margin-left:auto; flex:none}

/* sticky purchase bar */
.buybar{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  background:var(--surface); border-top:1px solid var(--line);
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:12px; box-shadow:0 -4px 20px rgba(20,17,16,.09);
}
.buybar .bp{flex:none}
.buybar .bpl{font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.buybar .bpv{font-size:17px; font-weight:800; letter-spacing:-.02em}
.buybar .btn{flex:1}

/* ---------- bottom tab bar ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:rgba(28,28,30,.96); backdrop-filter:blur(14px);
  border-top:1px solid var(--line); display:flex;
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbtn{flex:1; height:var(--tabh); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--ink-3); position:relative}
.tabbtn svg{width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.9}
.tabbtn span{font-size:10px; font-weight:700; letter-spacing:.01em}
.tabbtn.on{color:var(--flame-deep)}
.tabbtn.on svg{stroke-width:2.3}
.tabdot{position:absolute; top:9px; right:calc(50% - 17px); min-width:16px; height:16px; padding:0 4px;
  background:var(--flame); color:var(--on-accent); font-size:10px; font-weight:800; border-radius:999px;
  display:flex; align-items:center; justify-content:center; line-height:1}

/* ---------- generic page pieces ---------- */
.phead{padding:8px 16px 4px}
.phead h1{font-size:27px; font-weight:800; letter-spacing:-.038em}
.phead p{color:var(--ink-3); font-size:14px; margin-top:3px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:14px 16px 0}
.empty{text-align:center; padding:54px 26px; margin:20px 16px; border:1.5px dashed var(--line-2); border-radius:20px}
.empty .eico{margin-bottom:12px; display:flex; justify-content:center}
.empty .eico svg{width:34px; height:34px; fill:none; stroke:var(--ink-3); stroke-width:1.7}
.empty h3{font-size:18px; font-weight:800; letter-spacing:-.02em; margin-bottom:6px}
.empty p{color:var(--ink-3); font-size:14px; margin-bottom:18px; max-width:32ch; margin-left:auto; margin-right:auto}

.suggest{display:flex; flex-direction:column; gap:9px; padding:4px 16px}
.sugg{display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:13px 15px; font-size:14.5px; font-weight:600}
.sugg:hover{border-color:var(--ink-3)}
.sugg .sq{display:flex; color:var(--ink-3)}
.sugg .sarr{margin-left:auto; color:var(--ink-3)}
.filterrow{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:12px 16px 6px}
.filterrow::-webkit-scrollbar{display:none}
.fpill{flex:none; display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border-radius:11px;
  border:1.5px solid var(--line-2); background:var(--surface); font-size:13px; font-weight:650; white-space:nowrap}
.fpill.on{border-color:var(--ink); background:var(--ink); color:var(--on-ink)}
.fpill.soon{opacity:.5}
/* Partner-sourced events: say plainly whose event it is, and link out. */
.sourcedbox, .endedbox{margin:10px 0 0; padding:11px 13px; border-radius:12px; background:var(--sunk);
  font-size:12.5px; line-height:1.5; color:var(--ink-2)}
.sourcedbox b, .endedbox b{color:var(--ink)}
/* the ended note sits under the title, where the cancelled warnbox does */
.endedbox.big{margin:0 0 18px}
.sourcedbox a{color:var(--ink); font-weight:700; text-decoration:underline}

/* The search-view filter pills are real buttons now, so they need the
   pointer affordance their appearance has always implied. */
.filterrow .fpill{cursor:pointer; font:inherit}
.filterrow .fpill:hover{border-color:var(--ink-3)}
.fpill .fc{color:var(--ink-3); font-size:10px}
.fpill.on .fc{color:rgba(255,255,255,.7)}

/* orders / tickets */
.orderrow{display:flex; gap:13px; align-items:center; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:13px 14px; margin:0 16px 12px}
.orderrow .oa{width:60px; height:60px; border-radius:12px; flex:none; position:relative; overflow:hidden}
.orderrow .oi{flex:1; min-width:0}
.orderrow .onm{font-weight:750; font-size:14.5px; line-height:1.3}
.orderrow .omt{color:var(--ink-3); font-size:12.5px; margin-top:2px}
.orderrow .oq{flex:none; color:var(--ink-3)}

/* profile */
.profcard{margin:14px 16px; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:18px; text-align:center}
.profav{width:62px; height:62px; border-radius:50%; background:var(--sunk); display:flex; align-items:center; justify-content:center; margin:0 auto 12px}
.profav svg{width:26px; height:26px; fill:none; stroke:var(--ink-2); stroke-width:1.9}
.profcard h2{font-size:18px; font-weight:800; letter-spacing:-.025em}
.profcard p{color:var(--ink-3); font-size:13.5px; margin:5px 0 15px}
.statrow{display:flex; gap:10px; margin:14px 16px}
.statbox{flex:1; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px; text-align:center}
.statbox .sv{font-size:22px; font-weight:800; letter-spacing:-.03em}
.statbox .sl{font-size:11.5px; color:var(--ink-3); font-weight:650; margin-top:2px}
.listrow{display:flex; align-items:center; gap:12px; padding:15px 16px; border-bottom:1px solid var(--line); font-size:14.5px; font-weight:600; width:100%}
a.listrow{text-decoration:none; color:inherit}
.listrow .larr{margin-left:auto; color:var(--ink-3)}

/* ---------- attendee account (profile) ----------
   Hidden unless the host answers /api/account/me. Sign-in is email + code;
   the code field is one numeric input (autocomplete=one-time-code so phones
   offer the code from the email). Buttons inside .profcard keep the normal
   tokens: the card is --surface, not a white plate. */
.profcard.acct{text-align:left}
.profcard.acct h2{text-align:center}
.profcard.acct > p{text-align:center}
.profcard.acct .profav{margin-bottom:10px}
.acode{font-size:26px !important; letter-spacing:.32em; text-align:center; font-variant-numeric:tabular-nums; padding:12px 8px !important}
.acthelp{font-size:12px; color:var(--ink-3); margin-top:6px}
.acthint{font-size:13.5px; color:var(--ink-3); margin-top:16px}
.acctok{background:var(--teal-tint); color:var(--teal); font-size:13px; font-weight:650; padding:10px 12px; border-radius:11px; margin-bottom:12px; line-height:1.45}
.chkrow{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; line-height:1.45; margin-bottom:12px; color:var(--ink-2)}
.chkrow input{width:24px; height:24px; margin-top:-2px; flex:none; accent-color:var(--flame)}  /* WCAG 2.5.8: 24px target */
.chkrow a{color:var(--ink); font-weight:650}
.actlinks{display:flex; justify-content:space-between; gap:12px; margin-top:12px; font-size:13.5px}
.actlinks .muted{color:var(--ink-3); font-weight:650}
.acctrow{display:flex; gap:14px; align-items:flex-start}
.acctrow .profav{margin:0; flex:none}
.ainit{font-weight:800; font-size:22px; color:var(--ink)}
.acctemail{font-size:13px; color:var(--ink-3); margin-top:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* My tickets: past orders fold away under one control so the passes that
   still matter come first. */
.pasttoggle{display:flex; align-items:center; gap:8px; width:calc(100% - 32px); margin:18px 16px 8px; padding:12px 14px;
  border:1px solid var(--line); border-radius:14px; background:var(--surface); font-size:14px; font-weight:750}
.pasttoggle .cnt{font-size:11.5px; font-weight:800; color:var(--ink-3); background:var(--sunk); padding:2px 8px; border-radius:99px}
.pasttoggle .larr{margin-left:auto; color:var(--ink-3)}
.listrow input[type=checkbox]{width:24px; height:24px; accent-color:var(--flame); flex:none}  /* WCAG 2.5.8 */
.listrow.danger{color:var(--danger)}
.dangerbox{padding:16px; border-top:1px solid var(--line); background:var(--danger-tint)}
.dangerbox b{display:block; margin-bottom:4px}
.dangerbox p{font-size:13.5px; color:var(--ink-2); margin-bottom:12px; line-height:1.5}
.dangerbox .fl-row{margin-top:2px}

/* ---------- checkout sheet ---------- */
.scrim-full{position:fixed; inset:0; z-index:100; background:rgba(20,17,16,.55); display:flex; align-items:flex-end; justify-content:center; animation:fade .2s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{
  background:var(--ground); width:100%; max-width:520px; max-height:94vh;
  border-radius:22px 22px 0 0; display:flex; flex-direction:column; overflow:hidden;
  animation:slideup .26s cubic-bezier(.22,.9,.3,1); box-shadow:var(--shadow-2);
}
@keyframes slideup{from{transform:translateY(100%)}to{transform:none}}
.shead{padding:14px 16px 12px; background:var(--surface); border-bottom:1px solid var(--line); flex:none}
.grabber{width:36px; height:4px; border-radius:99px; background:var(--line-2); margin:0 auto 11px}
.sheadrow{display:flex; align-items:center; gap:12px}
.sheadrow .st{font-weight:750; font-size:14.5px; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden}
.sheadrow .sd{font-size:12px; color:var(--ink-3); margin-top:1px}
.hold{display:flex; align-items:center; gap:5px; background:var(--flame-tint); color:var(--flame-deep);
  font-weight:800; font-size:12px; padding:5px 10px; border-radius:9px; flex:none}
.sbody{overflow-y:auto; flex:1; padding:14px 16px 4px; -webkit-overflow-scrolling:touch}
.sfoot{flex:none; background:var(--surface); border-top:1px solid var(--line);
  padding:13px 16px calc(13px + env(safe-area-inset-bottom))}
.steps{display:flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px}
.steps .sdot{width:6px; height:6px; border-radius:50%; background:var(--line-2)}
.steps .sdot.on{background:var(--flame)}

.tierbox{background:var(--surface); border:1.5px solid var(--line); border-radius:16px; padding:14px 15px; margin-bottom:11px; display:flex; align-items:center; gap:12px}
.tierbox.picked{border-color:var(--flame)}
.tierbox.gone{opacity:.5}
.tierbox .ti{flex:1; min-width:0}
.tierbox .tn{font-weight:750; font-size:14.5px}
.tierbox .td{color:var(--ink-3); font-size:12.5px; margin-top:2px; line-height:1.4}
.tierbox .tp{font-weight:800; font-size:15px; margin-top:7px}
.tierbox .tp .fee{font-weight:600; color:var(--ink-3); font-size:11.5px}
.step{display:flex; align-items:center; gap:1px; flex:none}
.step button{width:33px; height:33px; border-radius:50%; border:1.5px solid var(--flame); color:var(--flame-deep);
  font-size:18px; font-weight:700; display:flex; align-items:center; justify-content:center}
.step button:disabled{border-color:var(--line-2); color:var(--line-2)}
.step .q{width:30px; text-align:center; font-weight:800; font-size:15.5px}
.gonepill{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); border:1px solid var(--line-2); padding:4px 9px; border-radius:8px; flex:none}

.sumline{display:flex; justify-content:space-between; gap:12px; font-size:14px; margin-bottom:8px}
.sumline .sl{color:var(--ink-2)}
.sumline.tot{font-weight:800; font-size:16.5px; border-top:1px solid var(--line); padding-top:11px; margin-top:10px}
.sumline .off{color:var(--teal); font-weight:700}

.walletrow{display:flex; flex-direction:column; gap:9px; margin-bottom:14px}
.wbtn{width:100%; padding:14px; border-radius:14px; background:var(--ink); color:var(--on-ink); font-weight:750; font-size:15px;
  display:flex; align-items:center; justify-content:center; gap:8px}
.wbtn.g{background:var(--surface); color:var(--ink); border:1.5px solid var(--line-2)}
.ordiv{display:flex; align-items:center; gap:12px; color:var(--ink-3); font-size:12px; font-weight:700; margin:2px 0 14px}
.ordiv::before,.ordiv::after{content:""; height:1px; background:var(--line); flex:1}
.field{margin-bottom:12px}
.field label{display:block; font-size:12.5px; font-weight:750; margin-bottom:6px}
.field input{width:100%; border:1.5px solid var(--line-2); border-radius:13px; padding:13px 14px; background:var(--surface); outline:none; font-size:16px}
.field input:focus{border-color:var(--flame); box-shadow:0 0 0 3px var(--flame-tint)}
.field input.bad{border-color:var(--flame); background:#FFF6F4}
.frow{display:flex; gap:10px}
.frow>*{flex:1; min-width:0}
.cardwrap{position:relative}
.cardwrap .cbrand{position:absolute; right:13px; top:41px; font-size:10.5px; font-weight:800; letter-spacing:.05em; color:var(--ink-3)}
.guestnote{display:flex; gap:9px; background:var(--teal-tint); border-radius:13px; padding:11px 13px; font-size:12.5px; color:var(--teal); margin-bottom:14px; line-height:1.45}
.testnote{background:var(--sunk); border-radius:12px; padding:10px 12px; font-size:12px; color:var(--ink-2); margin-top:12px; line-height:1.45}
.promorow{display:flex; gap:8px; margin-top:4px}
.promorow input{flex:1; border:1.5px solid var(--line-2); border-radius:12px; padding:11px 13px; background:var(--surface); outline:none; font-size:15px; min-width:0}
.promorow input:focus{border-color:var(--flame)}
.pmsg{font-size:12.5px; font-weight:700; margin-top:7px}
.pmsg.ok{color:var(--teal)} .pmsg.no{color:var(--flame-deep)}
/* The spinner lives inside buttons, and a button's fill is not fixed: primary
   is canary with DARK text, ghost is surface with light text. A hardcoded
   white head vanished on canary (~1.4:1) exactly during "Paying…". Following
   currentColor makes it correct in every button it is dropped into. The plain
   rgba track is a fallback for engines without color-mix. */
.spin{width:17px; height:17px; border:2.5px solid rgba(128,128,128,.35);
  border:2.5px solid color-mix(in srgb, currentColor 32%, transparent);
  border-top-color:currentColor; border-radius:50%; animation:spin .7s linear infinite; flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- confirmation ---------- */
.confwrap{padding:26px 16px 0; text-align:center}
.tick{width:66px; height:66px; margin:0 auto 18px; border-radius:50%; background:var(--teal); color:var(--on-accent);
  display:flex; align-items:center; justify-content:center; animation:pop .42s cubic-bezier(.3,1.6,.6,1)}
@keyframes pop{from{transform:scale(.4); opacity:0}to{transform:none; opacity:1}}
.confwrap h1{font-size:29px; font-weight:800; letter-spacing:-.04em; margin-bottom:8px}
.confwrap .csub{color:var(--ink-2); font-size:14.5px; max-width:36ch; margin:0 auto 6px; line-height:1.55}
.confwrap .cord{font-size:12.5px; color:var(--ink-3); margin-bottom:22px}
.pass{background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-1);
  text-align:left; overflow:hidden; margin-bottom:14px}
.passtop{padding:16px; display:flex; gap:14px; align-items:center}
.passtop .qr{flex:none; background:#fff; padding:5px; border-radius:9px; border:1px solid var(--line)}
.passtop .pn{font-weight:750; font-size:14.5px; line-height:1.3}
.passtop .pt{color:var(--flame-deep); font-weight:800; font-size:11px; letter-spacing:.07em; text-transform:uppercase; margin:4px 0}
.passtop .pm{color:var(--ink-3); font-size:12.5px}
.rip{border-top:2px dashed var(--line-2); position:relative}
.rip::before,.rip::after{content:""; position:absolute; top:-9px; width:18px; height:18px; border-radius:50%; background:var(--ground)}
.rip::before{left:-9px} .rip::after{right:-9px}
.passbot{padding:11px 16px; display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12px; color:var(--ink-3)}
.passbot .pright{display:flex; align-items:center; gap:12px}
.tlink{color:var(--flame-deep); font-weight:750; font-size:12.5px; padding:3px 8px; border-radius:8px}
.tlink:hover{background:var(--flame-tint)}
.tqrwrap{background:#fff; border:1px solid var(--line); border-radius:14px; padding:9px; width:fit-content; margin:14px auto 10px}
.tqrwrap canvas{display:block; width:172px; height:172px; image-rendering:pixelated}

/* Turnstile widget. Renders nothing while Turnstile is dormant, so these
   rules only ever apply once the Pages variables are set. */
.tswrap{margin:12px 0 4px; min-height:65px; display:flex; justify-content:center}
.tserr{font-size:12.5px; color:var(--flame-deep); font-weight:650; text-align:center; padding:8px 0}

/* door scanner: offline admits waiting to reconcile */
.syncstrip{display:flex; gap:12px; align-items:center; border-radius:13px; padding:12px 14px;
  font-size:13px; line-height:1.45; margin-bottom:14px}
.syncstrip.pending{background:var(--amber-tint); color:var(--ink-2)}
.syncstrip.warn{background:var(--flame-tint); color:var(--ink-2)}
.syncstrip>div{flex:1; min-width:0}
.syncstrip .btn{flex:none}
.acctprompt{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:18px; margin:8px 0 14px; text-align:left; display:flex; gap:13px; align-items:center}
.acctprompt .ai{display:flex; flex:none}
.acctprompt .ai svg{width:22px; height:22px; fill:none; stroke:var(--ink-2); stroke-width:2}
.acctprompt h2{font-size:14.5px; font-weight:750}
.acctprompt p{font-size:12.5px; color:var(--ink-3); margin-top:2px; line-height:1.45}
.confbtns{display:flex; flex-direction:column; gap:9px; margin-bottom:14px}

/* ---------- toast ---------- */
/* Hidden = faded out AND removed from hit-testing. The previous hide was a
   bare translateY(90px) from 78px up — so a 43px toast kept its top 30px on
   screen forever, above the tab bar (z-index 200), and looked "stuck"
   (Krishna, 2026-09-02). Show slides up; hide fades out smoothly. */
.toast{position:fixed; left:50%; bottom:calc(var(--tabh) + 18px);
  transform:translateX(-50%) translateY(14px); opacity:0; visibility:hidden; pointer-events:none;
  background:var(--ink); color:var(--on-ink); padding:12px 20px; border-radius:14px; font-size:14px; font-weight:600;
  box-shadow:var(--shadow-2); z-index:200; max-width:92vw; text-align:center;
  transition:transform .3s cubic-bezier(.22,.9,.3,1), opacity .36s ease, visibility 0s linear .36s}
.toast.show{transform:translateX(-50%) translateY(0); opacity:1; visibility:visible;
  transition:transform .26s cubic-bezier(.22,.9,.3,1), opacity .18s ease, visibility 0s}

/* ============================================================
   DESKTOP  ≥760px
   ============================================================ */
@media (min-width:760px){
  body{font-size:15.5px}
  .tabbar{display:none}
  main{padding-bottom:70px}
  .pad, .sechead, .rail, .chiprail, .phead, .filterrow, .suggest, .grid2{padding-left:32px; padding-right:32px}
  .rail, .chiprail{scroll-padding-inline:32px}
  .orderrow, .empty, .statrow, .profcard{margin-left:32px; margin-right:32px}

  .topbar{position:sticky}
  .tbwrap{padding:14px 32px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:22px; row-gap:14px}
  .locrow{margin:0; order:1}
  .brandmark{order:0; font-size:27px; padding:0}
  .searchbtn,.searchfield{order:2; max-width:none}
  .askline{display:none}
  .desknav{display:flex; align-items:center; gap:4px; order:3}
  .dnav{padding:9px 13px; border-radius:11px; font-size:14px; font-weight:650; color:var(--ink-2); white-space:nowrap; position:relative}
  .dnav:hover{background:var(--sunk); color:var(--ink)}
  .dnav.on{color:var(--flame-deep)}
  .dnav .dpip{display:inline-block; min-width:17px; padding:0 4px; margin-left:5px; background:var(--flame); color:var(--on-accent);
    font-size:10.5px; font-weight:800; line-height:17px; border-radius:999px; text-align:center}

  .sechead h2{font-size:22px}
  .sec{margin-top:34px}
  .ecard{width:288px}
  .reel{width:186px}
  .grid2{grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:20px}

  /* event detail becomes two-column */
  .backbar{padding:14px 32px}
  .dhero{margin:0 32px; aspect-ratio:21/9}
  .dhero .glyph{font-size:230px}
  .detailgrid{display:grid; grid-template-columns:1fr 348px; gap:44px; align-items:start; padding:0 32px}
  .dtitle{font-size:38px; margin-top:22px}
  .buybar{position:sticky; top:88px; bottom:auto; left:auto; right:auto; margin-top:22px;
    flex-direction:column; align-items:stretch; gap:14px; border:1px solid var(--line); border-radius:20px;
    padding:20px; box-shadow:var(--shadow-1)}
  .buybar .bpv{font-size:28px; letter-spacing:-.035em}
  .buybar .btn{width:100%}
  .buysub{display:block; font-size:12.5px; color:var(--ink-3); text-align:center}
  .expectgrid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

  .scrim-full{align-items:center; padding:22px}
  .sheet{border-radius:22px; max-height:88vh}
  .grabber{display:none}
  .confwrap{max-width:600px; margin:0 auto; padding-top:40px}
  .confwrap h1{font-size:38px}
  .confbtns{flex-direction:row; justify-content:center; flex-wrap:wrap}
  .confbtns .btn{flex:none}
  .toast{bottom:26px}
}
@media (max-width:759px){ .desknav{display:none} }

/* ---------- dashboards (separate organizer / platform products) ---------- */
.dashtop{padding:22px 16px 0}
.dashtop h1{font-size:26px; font-weight:800; letter-spacing:-.038em; display:flex; align-items:center; gap:11px; flex-wrap:wrap}
.dashrow{display:flex; align-items:center; gap:11px; flex-wrap:wrap}
.montable .rowlink{padding:0; font-weight:650}
.dashtop .sub{color:var(--ink-3); font-size:13.5px; margin:6px 0 20px; max-width:70ch}
.livechip{display:inline-flex; align-items:center; gap:6px; background:var(--teal-tint); color:var(--teal);
  font-weight:800; font-size:11px; letter-spacing:.08em; padding:5px 11px; border-radius:8px}
.livechip.warn{background:var(--flame-tint); color:var(--flame-deep)}
.pulse{width:7px; height:7px; border-radius:50%; background:currentColor; animation:pulse 1.7s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.tiles{display:grid; grid-template-columns:1fr 1fr; gap:11px; padding:0 16px}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:15px 16px}
.tile.spot{background:var(--ink); border-color:var(--ink); color:var(--on-ink)}
.tile.spot .tl{color:rgba(28,28,30,.68)} .tile.spot .td{color:#8A5A00}  /* pairs with --on-ink, not with white */
.tile .tl{font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.tile .tv{font-size:25px; font-weight:800; letter-spacing:-.04em; margin-top:5px; font-variant-numeric:tabular-nums}
.tile .tv small{font-size:14px; font-weight:700; color:var(--ink-3); letter-spacing:0}
.tile .td{font-size:11.5px; color:var(--teal); font-weight:700; margin-top:3px}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:17px 18px; margin:12px 16px}
.panel h2.ph3, .panel h3{font-size:15px; font-weight:750}
.panel .ps{font-size:12px; color:var(--ink-3); margin:2px 0 14px}
.chart{position:relative}
.chart svg{display:block; width:100%; height:auto}
.ttip{position:absolute; pointer-events:none; background:var(--ink); color:var(--on-ink); font-size:11.5px; padding:6px 10px;
  border-radius:8px; white-space:nowrap; transform:translate(-50%,-125%); opacity:0; transition:opacity .1s; z-index:5; font-variant-numeric:tabular-nums}
.bars{margin-bottom:12px}
.bars .b1{display:flex; justify-content:space-between; gap:10px; font-size:13px; margin-bottom:5px}
.bars .b1 b{font-variant-numeric:tabular-nums}
.track{height:8px; border-radius:5px; background:var(--sunk); overflow:hidden}
.fillbar{height:100%; border-radius:5px; background:var(--d1)}
.fillbar.v{background:var(--d2)} .fillbar.t{background:var(--d3)}
.splitbar{display:flex; gap:2px; height:42px; border-radius:11px; overflow:hidden; margin:2px 0 16px}
.splitbar .seg{display:flex; align-items:center; justify-content:center; color:var(--on-accent); font-size:12px; font-weight:800; min-width:2px}
.legrow{display:flex; align-items:center; gap:10px; font-size:13.5px; margin-bottom:11px}
.legrow .sw{width:11px; height:11px; border-radius:4px; flex:none}
.legrow .ln{flex:1; min-width:0}
.legrow .lsub{color:var(--ink-3); font-size:12px; line-height:1.35}
.legrow b{font-variant-numeric:tabular-nums; white-space:nowrap}
.unitbox{background:var(--sunk); border-radius:14px; padding:14px 15px; margin-top:14px}
.unitbox .uh{font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px}
.uline{display:flex; justify-content:space-between; gap:12px; font-size:13.5px; padding:5px 0; font-variant-numeric:tabular-nums}
.uline.h{font-weight:800; border-bottom:1px solid var(--line-2); padding-bottom:8px}
.uline.k{font-weight:800; color:var(--teal); border-top:1px solid var(--line-2); margin-top:5px; padding-top:9px}
.uline .ul{color:var(--ink-2); font-variant-numeric:normal}
.uline.k .ul{color:var(--teal)}
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; font-size:13px}
th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3);
  font-weight:800; padding:8px 9px; border-bottom:1px solid var(--line); white-space:nowrap}
td{padding:11px 9px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; white-space:nowrap}
td.nm{font-variant-numeric:normal; font-weight:650; white-space:normal; min-width:150px}
tr:last-child td{border-bottom:none}
.num{text-align:right}
.paycard{display:flex; align-items:center; gap:14px; background:var(--ink); color:var(--on-ink); border-radius:16px; padding:17px 18px; margin-top:14px; flex-wrap:wrap}
.paycard .pv{font-size:22px; font-weight:800; letter-spacing:-.035em; font-variant-numeric:tabular-nums}
.paycard .pl{font-size:11.5px; opacity:.7; margin-top:2px}
.paycard .pstripe{margin-left:auto; font-size:11.5px; opacity:.8; text-align:right; max-width:230px; line-height:1.4}
.statpill{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; padding:4px 9px; border-radius:7px; white-space:nowrap}
.statpill::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor}
.statpill.live{background:var(--teal-tint); color:var(--teal)}
.statpill.done{background:var(--sunk); color:var(--ink-3)}
.statpill.soon{background:var(--amber-tint); color:var(--amber)}
.statpill.warn{background:var(--flame-tint); color:var(--flame-deep)}
@media (min-width:760px){
  .dashtop{padding:30px 32px 0}
  .dashtop h1{font-size:34px}
  .tiles{grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:15px; padding:0 32px}
  .panel{margin:15px 32px}
  .prow{display:grid; grid-template-columns:1.55fr 1fr; gap:0}
  .prow.even{grid-template-columns:1fr 1fr}
  .prow .panel{margin:15px 0}
  .prow{padding:0 32px; gap:15px}
  .tile .tv{font-size:29px}
}

/* ============================================================
   Region picker, verification, blogs, refunds, door scanner
   ============================================================ */
.regionsheet{padding:4px 16px 14px; border-top:1px solid var(--line); margin-top:10px; max-height:52vh; overflow-y:auto}
.rsgroup{padding-top:12px}
.rslabel{font-size:10.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px}
.rschips{display:flex; gap:8px; flex-wrap:wrap}
.rschips .chip .cn{color:var(--ink-3); font-weight:700; font-size:11.5px; margin-left:3px}
.rschips .chip.on .cn{color:rgba(255,255,255,.65)}
.secnote{padding:0 16px 10px; font-size:12.5px; color:var(--ink-3); line-height:1.45; max-width:62ch}

/* verification */
.verifyrow{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px}
.vbadge{display:inline-flex; align-items:center; gap:6px; background:var(--teal-tint); color:var(--teal);
  font-size:11.5px; font-weight:800; letter-spacing:.04em; padding:6px 11px; border-radius:9px; white-space:nowrap}
.vbadge.big{font-size:13px; padding:8px 14px}
.vbadge svg{stroke:currentColor}
.vtext{font-size:12.5px; color:var(--ink-3); line-height:1.4}
.verifypanel{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.verifypanel .vpleft{flex:1; min-width:240px}
.verifypanel .btn{flex:none}

.warnbox{background:var(--amber-tint); border-radius:13px; padding:13px 15px; font-size:13.5px;
  color:var(--ink); line-height:1.5; border-left:4px solid var(--amber)}
.warnbox.big{margin-bottom:18px}
.dangerpanel{border-color:var(--danger); background:var(--danger-tint)}
.dangerpanel h2.ph3, .dangerpanel h3{color:var(--danger)}
.btn.danger{background:var(--danger)} .btn.danger:hover{background:var(--danger-deep)}

/* blogs */
.bcard{flex:none; width:255px; scroll-snap-align:start; background:var(--surface); border:1px solid var(--line);
  border-radius:18px; overflow:hidden; box-shadow:var(--shadow-1); display:flex; flex-direction:column;
  transition:transform .14s, box-shadow .14s}
.bcard:hover{transform:translateY(-2px); box-shadow:var(--shadow-2)}
.bart{position:relative; aspect-ratio:16/9; overflow:hidden; flex:none}
.bart .glyph{position:absolute; right:10px; bottom:-20px; font-size:82px; font-weight:800; color:rgba(255,255,255,.26); line-height:1}
.bbody{padding:12px 13px 14px; display:flex; flex-direction:column; gap:5px; flex:1}
.btag{font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--flame-deep)}
.bcard .et{font-size:15px; font-weight:750; letter-spacing:-.02em; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.bmeta{margin-top:auto; padding-top:8px; font-size:12px; color:var(--ink-3)}
.grid2 .bcard{width:auto}

.article{padding:6px 16px 0; max-width:68ch; margin:0 auto}
.atag{font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--flame-deep); margin-bottom:9px}
.article h1{font-size:28px; font-weight:800; letter-spacing:-.038em; line-height:1.12; text-wrap:balance}
.ameta{display:flex; align-items:center; gap:11px; margin:16px 0 18px; font-size:13.5px}
.aav{width:38px; height:38px; border-radius:12px; flex:none; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:16px; color:#fff}
.asub{color:var(--ink-3); font-size:12.5px; margin-top:1px}
.ahero{position:relative; aspect-ratio:16/9; border-radius:18px; overflow:hidden; margin-bottom:20px}
.ahero .glyph{position:absolute; right:16px; bottom:-28px; font-size:140px; font-weight:800; color:rgba(255,255,255,.24); line-height:1}
.alead{font-size:17px; line-height:1.55; font-weight:600; color:var(--ink); margin-bottom:16px}
.article p{font-size:15.5px; line-height:1.72; color:var(--ink-2); margin-bottom:16px}
.acta{display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line);
  border-radius:18px; padding:16px; margin:24px 0 8px; flex-wrap:wrap}
.acta .actat{font-weight:750; font-size:15px; margin-top:3px}
.acta .actam{font-size:12.5px; color:var(--ink-3); margin-top:2px}
.acta .btn{margin-left:auto; flex:none}

/* refunded pass */
.pass.void{opacity:.62; position:relative}
.voidstamp{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-11deg);
  border:3px solid var(--danger); color:var(--danger); font-weight:800; font-size:16px; letter-spacing:.09em;
  text-transform:uppercase; padding:7px 18px; border-radius:10px; background:rgba(28,28,30,.92); white-space:nowrap}
.tick.grey{background:var(--ink-3); font-size:30px; font-weight:700}
.tick.warn{background:var(--amber); font-size:34px; font-weight:800}
.tcode{font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink-2)}
.orderrow .statpill{margin-top:0}

/* organizer timeline */
.timeline{display:flex; flex-direction:column; gap:0}
.tlrow{display:flex; gap:13px; padding-bottom:18px; position:relative}
.tlrow::before{content:""; position:absolute; left:6px; top:15px; bottom:0; width:2px; background:var(--line)}
.tlrow:last-child{padding-bottom:0} .tlrow:last-child::before{display:none}
.tldot{width:14px; height:14px; border-radius:50%; background:var(--surface); border:3px solid var(--line-2);
  flex:none; margin-top:2px; z-index:1}
.tlrow.done .tldot{background:var(--teal); border-color:var(--teal)}
.tlrow.now .tldot{background:var(--flame); border-color:var(--flame); box-shadow:0 0 0 4px var(--flame-tint)}
.tlrow b{font-size:14px; font-weight:750}
.tlm{font-size:12.5px; color:var(--ink-3); margin-top:2px; line-height:1.45}

/* verification queue */
.qhead{display:flex; align-items:flex-start; gap:14px; margin-bottom:14px; flex-wrap:wrap}
.qhead h2.ph3, .qhead h3{margin-bottom:0}
.qcount{margin-left:auto; background:var(--flame-tint); color:var(--flame-deep); font-size:12.5px; font-weight:700;
  padding:7px 13px; border-radius:10px; white-space:nowrap}
.qcount b{font-size:15px}
.qlist{display:flex; flex-direction:column; gap:10px}
.qrow{display:flex; gap:14px; align-items:center; background:var(--ground); border:1px solid var(--line);
  border-radius:14px; padding:14px 15px; flex-wrap:wrap; transition:opacity .2s}
.qrow.resolved{opacity:.55}
.qmain{flex:1; min-width:220px}
.qt{font-weight:750; font-size:14.5px; line-height:1.3}
.qm{font-size:12.5px; color:var(--ink-3); margin-top:3px}
.qflag{font-size:12px; margin-top:7px; font-weight:650; color:var(--teal)}
.qflag.hold{color:var(--flame-deep)} .qflag.dupe{color:var(--amber)}
.qacts{display:flex; gap:8px; flex:none; align-items:center}
.qacts .btn{padding:9px 16px; font-size:13.5px; border-radius:11px}

/* ---------- door check-in ---------- */
.ckwrap{max-width:620px; margin:0 auto; padding:18px 16px 60px}
.ckhead{display:flex; align-items:flex-start; gap:14px; margin-bottom:16px}
.ckhead h1{font-size:23px; font-weight:800; letter-spacing:-.035em; line-height:1.15; margin-top:4px}
.cksub{font-size:12.5px; color:var(--ink-3); margin-top:4px}
.ckcount{flex:none; text-align:right}
.ckcount .ckn{font-size:34px; font-weight:800; letter-spacing:-.04em; font-variant-numeric:tabular-nums; line-height:1}
.ckcount .ckl{font-size:11px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em}
.ckdoorsel{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px}

.scanner{border-radius:22px; overflow:hidden; box-shadow:var(--shadow-1); border:1px solid var(--line); background:var(--surface)}
.viewfinder{position:relative; aspect-ratio:4/3; background:linear-gradient(160deg,#26201E,#141110);
  display:flex; align-items:center; justify-content:center; color:#fff; overflow:hidden}
.corner{position:absolute; width:34px; height:34px; border:3px solid rgba(255,255,255,.5)}
.corner.tl{top:18px; left:18px; border-right:0; border-bottom:0; border-radius:8px 0 0 0}
.corner.tr{top:18px; right:18px; border-left:0; border-bottom:0; border-radius:0 8px 0 0}
.corner.bl{bottom:18px; left:18px; border-right:0; border-top:0; border-radius:0 0 0 8px}
.corner.br{bottom:18px; right:18px; border-left:0; border-top:0; border-radius:0 0 8px 0}
.scanline{position:absolute; left:18px; right:18px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--flame),transparent); animation:sweep 1.1s ease-in-out infinite}
@keyframes sweep{0%{top:22%}50%{top:78%}100%{top:22%}}
.scantext{font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:.8}
.scanidle{text-align:center; opacity:.75; padding:0 30px}
.scanidle .scanico{font-size:44px; margin-bottom:10px; opacity:.6}
.scanidle div{font-size:14px; font-weight:600}
.scanidle .scanhint{font-size:12px; opacity:.6; margin-top:6px; font-weight:500}
.verdict{text-align:center; padding:0 24px}
.vicon{width:64px; height:64px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center;
  justify-content:center; font-size:34px; font-weight:800; animation:pop .34s cubic-bezier(.3,1.6,.6,1)}
.vmsg{font-size:20px; font-weight:800; letter-spacing:-.03em}
.vname{font-size:14px; opacity:.85; margin-top:6px}
.vcode{font-size:12px; opacity:.6; margin-top:8px; font-variant-numeric:tabular-nums; letter-spacing:.05em}
.scanner.ok .viewfinder{background:linear-gradient(160deg,#0A9179,#076B59)}
.scanner.ok .vicon{background:rgba(255,255,255,.22)}
.scanner.dupe .viewfinder{background:linear-gradient(160deg,#E08A00,#B36E00)}
.scanner.dupe .vicon{background:rgba(255,255,255,.22)}
.scanner.wrong .viewfinder{background:linear-gradient(160deg,#6B3FD4,#4A28A0)}
.scanner.wrong .vicon{background:rgba(255,255,255,.22)}
.scanner.invalid .viewfinder,.scanner.void .viewfinder{background:linear-gradient(160deg,#CE2E0F,#96200A)}
.scanner.invalid .vicon,.scanner.void .vicon{background:rgba(255,255,255,.22)}
.verdictbar{padding:13px 16px; font-size:13px; line-height:1.45; background:var(--surface); color:var(--ink-2)}
.verdictbar b{color:var(--ink)}
.ckactions{margin-top:16px}
.manualrow{display:flex; gap:8px; margin-top:10px}
.manualrow input{flex:1; min-width:0; border:1.5px solid var(--line-2); border-radius:13px; padding:12px 14px;
  background:var(--surface); outline:none; font-size:15px}
.manualrow input:focus{border-color:var(--flame); box-shadow:0 0 0 3px var(--flame-tint)}
.ckpanel{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px 17px; margin-top:16px}
.ckpanel h2.ph3, .ckpanel h3{font-size:15px; font-weight:750}
.ckpanel.empty2{text-align:center}
.ckrow{display:flex; align-items:center; gap:12px; width:100%; padding:11px 0; border-bottom:1px solid var(--line); flex-wrap:wrap}
.ckrow:last-child{border-bottom:none}
.ckcode{font-weight:750; font-variant-numeric:tabular-nums; font-size:13.5px; flex:none}
.ckname{font-size:12.5px; color:var(--ink-3); flex:1; min-width:120px}
.ckstate{flex:none}
@media (min-width:760px){
  .ckwrap{padding:34px 32px 70px}
  .ckhead h1{font-size:28px}
}

/* ---------- ticket sales monitor ---------- */
.monitor .qhead{align-items:flex-start}
.livedot{display:inline-flex; align-items:center; gap:5px; background:var(--flame-tint); color:var(--flame-deep);
  font-size:10px; font-weight:800; letter-spacing:.09em; padding:3px 8px; border-radius:6px; vertical-align:middle; margin-left:6px}
.livedot .pulse{background:var(--flame)}
.monstats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:14px}
.mstat{background:var(--surface); padding:12px 10px; text-align:center}
.msv{font-size:19px; font-weight:800; letter-spacing:-.035em; font-variant-numeric:tabular-nums}
.msl{font-size:10.5px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.07em; margin-top:2px}
.monbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px}
.monsearch{flex:1; min-width:200px; border:1.5px solid var(--line-2); border-radius:12px; padding:10px 13px;
  background:var(--surface); outline:none; font-size:14px}
.monsearch:focus{border-color:var(--flame); box-shadow:0 0 0 3px var(--flame-tint)}
.monfilters{display:flex; gap:6px; flex-wrap:wrap}
.monfilters .fpill{cursor:pointer}
.montable tbody tr{cursor:pointer; transition:background .12s}
.montable tbody tr:hover{background:var(--sunk)}
.monrow.fresh{animation:flashin 4s ease-out}
@keyframes flashin{0%{background:var(--flame-tint)}70%{background:var(--flame-tint)}100%{background:transparent}}
.devtag{display:inline-block; margin-left:6px; background:var(--violet-tint); color:var(--violet);
  font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:2px 6px; border-radius:5px;
  vertical-align:middle; white-space:nowrap}
/* buyer detail sheet */
.bsec{margin-bottom:18px}
.bsl{font-size:10.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:9px; padding-bottom:7px; border-bottom:1px solid var(--line)}
.brow{display:flex; justify-content:space-between; gap:14px; align-items:center; padding:7px 0; font-size:13.5px}
.brow span{color:var(--ink-2); flex:none}
.brow b{text-align:right; font-weight:700; min-width:0; overflow-wrap:anywhere}
.brow.tot{border-top:1px solid var(--line); margin-top:5px; padding-top:10px; font-size:15px}
.brow.tot b{font-weight:800}
.brow .mono{font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink)}
.bactions{display:flex; gap:8px; flex-wrap:wrap}
.bactions .btn{flex:1; min-width:130px; padding:12px 14px; font-size:14px}
@media (max-width:520px){ .monstats{grid-template-columns:1fr 1fr} }

/* ---------- vibe videos ---------- */
.reelvid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:transparent}
.herovid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.dhero .vibe{z-index:2} .dhero .glyph{z-index:0}
.reel .scrim,.reel .reelplay,.reel .reellen,.reel .reelinfo{z-index:2}

/* ---------- fullscreen ticket pass ---------- */
.passtop .qr{cursor:pointer; text-align:center; position:relative}
.passtop .qr canvas{width:86px; height:86px; display:block; image-rendering:pixelated}
.qrtap{display:block; font-size:8.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-top:4px}
.passwrap{align-items:center; padding:22px}
.bigpass{background:#fff; border-radius:24px; padding:26px 24px calc(22px + env(safe-area-inset-bottom));
  text-align:center; width:min(380px, 100%); box-shadow:var(--shadow-2); animation:pop .3s cubic-bezier(.3,1.4,.6,1)}
.bp-ev{font-weight:800; font-size:17px; letter-spacing:-.025em; line-height:1.25}
.bp-sub{font-size:12.5px; color:var(--ink-3); margin-top:4px}
#bigqr{width:min(300px, 74vw); height:auto; image-rendering:pixelated; margin:18px auto 12px; display:block}
.bp-code{font-weight:800; font-variant-numeric:tabular-nums; font-size:15px; letter-spacing:.04em}
.bp-hint{font-size:12px; color:var(--ink-3); margin:6px 0 18px}

/* ---------- post-purchase pass flash ----------
   The seconds after paying are the one moment the buyer is certainly
   looking at the screen, so the first pass is shown large and then gets out
   of the way (Krishna, 2026-09-02). It sits over the confirmation view,
   which keeps every pass, so closing loses nothing. The draining bar is
   transform-only and hidden under prefers-reduced-motion; the timer itself
   can be switched off with "Keep open" (WCAG 2.2.1). Buttons inside the
   plate get explicit fills because the plate re-declares --ink dark, which
   would turn the app's dark button tokens into dark-on-dark. */
.bigpass.flash{padding-top:22px}
.fl-head{display:flex; align-items:center; justify-content:center; gap:9px; margin-bottom:10px;
  font-weight:800; font-size:21px; letter-spacing:-.03em}
.fl-tick{width:28px; height:28px; border-radius:50%; background:var(--teal); color:var(--on-accent);
  display:inline-flex; align-items:center; justify-content:center; flex:none}
.fl-tick svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:3}
#flashqr{width:min(280px, 70vw); height:auto; image-rendering:pixelated; margin:16px auto 10px; display:block}
.fl-more{font-size:12.5px; color:var(--ink-3); margin:4px 0 14px}
.fl-bar{height:4px; border-radius:99px; background:#E9E9EC; overflow:hidden; margin:0 0 14px}
.fl-bar i{display:block; height:100%; background:var(--flame); transform-origin:left center;
  animation:fl-drain var(--fl-ms, 8000ms) linear forwards}
@keyframes fl-drain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.fl-row{display:flex; gap:8px}
.fl-row .btn{flex:1}
.bigpass .btn.plain{background:#EFEFF2; color:var(--ink)}
.bigpass .btn.plain:hover{background:#E3E3E8}
@media (prefers-reduced-motion: reduce){ .fl-bar{display:none} }

/* White plates for QR codes. These stay white on purpose: a QR rendered on a
   dark ground is unreliable on cheap venue scanners and on phone cameras in
   low light, and the full-screen pass reads as a physical ticket. Because the
   plate does not follow the theme, it re-declares the ink ramp locally so
   nothing inside it can inherit the app's light --ink onto white paper. */
.bigpass, .passtop .qr, .tqrwrap{
  --ink:#1C1C1E; --ink-2:#45454E; --ink-3:#6B6B75;
  color:var(--ink);
}
/* .btn.dark fills with --ink and relies on .btn's --on-accent (dark) text
   being correct only while --ink is light. Inside the plate --ink is dark,
   so the full-screen pass shipped a "Done" button with #1C1C1E text on a
   #1C1C1E fill (found 2026-09-02 while building the pass flash). */
.bigpass .btn.dark{color:#F5F5F7}

.cnp{font-size:9.5px; font-weight:800; letter-spacing:.08em; opacity:.65; margin-left:2px}

/* ---------- camera scanner ---------- */
.doorsel{width:100%; margin-top:8px; border:1.5px solid var(--line-2); border-radius:13px; padding:12px 13px;
  background:var(--surface); font-size:14.5px; font-weight:650; outline:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size:5px 5px; background-repeat:no-repeat}
.doorsel:focus{border-color:var(--flame)}
.ckdoorsel{display:block}
.viewfinder.camon{background:#0A0807}
.viewfinder video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.viewfinder .corner{z-index:2}
.camhint{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:3;
  background:rgba(10,8,7,.6); color:#fff; font-size:12px; font-weight:700; padding:7px 13px; border-radius:99px;
  backdrop-filter:blur(4px); white-space:nowrap}
.camverdict{position:absolute; left:10px; right:10px; bottom:10px; z-index:3; border-radius:13px;
  padding:11px 14px; color:#fff; display:flex; flex-direction:column; gap:2px;
  animation:pop .25s cubic-bezier(.3,1.4,.6,1); box-shadow:0 4px 18px rgba(0,0,0,.35)}
.camverdict b{font-size:15px; letter-spacing:.02em}
.camverdict span{font-size:12px; opacity:.95; overflow-wrap:anywhere}
.camverdict.ok{background:rgba(10,145,121,.94)}
.camverdict.dupe{background:rgba(224,138,0,.94)}
.camverdict.wrong{background:rgba(107,63,212,.94)}
.camverdict.invalid,.camverdict.void{background:rgba(206,46,15,.94)}

/* ---------- owner auth ---------- */
.authwrap{min-height:88vh; display:flex; align-items:center; justify-content:center; padding:22px}
.authcard{background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:30px 26px;
  width:min(400px,100%); box-shadow:var(--shadow-1)}
.authcard h1{font-size:24px; font-weight:800; letter-spacing:-.035em; text-align:center}
.authsub{font-size:13.5px; color:var(--ink-3); text-align:center; margin:7px 0 20px; line-height:1.5}
.authsub a{color:var(--ink-2); font-weight:700}
.autherr{color:var(--flame-deep); font-size:13px; font-weight:700; min-height:20px; margin:2px 0 8px; text-align:center}
.authreset{display:block; margin:14px auto 0; font-size:12.5px; font-weight:700; color:var(--ink-3); text-decoration:underline}
.authreset:hover{color:var(--ink)}
.authnote{font-size:11.5px; color:var(--ink-3); text-align:center; margin-top:18px; line-height:1.5;
  border-top:1px solid var(--line); padding-top:14px}
.ownerout{margin-left:auto; font-size:13px; padding:8px 15px}

/* ---------- door codes ---------- */
.doorcard{display:flex; align-items:center; gap:12px; background:var(--surface); border:1.5px solid var(--ink);
  border-radius:15px; padding:13px 15px; margin-bottom:10px}
.dcname{font-weight:800; font-size:15px; letter-spacing:-.02em; line-height:1.25}
.dcmeta{font-size:12px; color:var(--ink-3); margin-top:2px}
.doorcode{margin-left:auto; flex:none; background:var(--ink); color:var(--on-ink); font-weight:800; font-size:15px;
  letter-spacing:.12em; padding:8px 13px; border-radius:10px; font-variant-numeric:tabular-nums}
.doorcode.sm{font-size:11px; padding:4px 8px; letter-spacing:.09em; margin-left:0}
.doorsearch{width:100%; border:1.5px solid var(--line-2); border-radius:13px; padding:12px 14px;
  background:var(--surface); outline:none; font-size:16px; font-weight:650; letter-spacing:.02em}
.doorsearch:focus{border-color:var(--flame); box-shadow:0 0 0 3px var(--flame-tint)}
.doorres{display:flex; flex-direction:column; gap:7px; margin-top:8px}
.doorrow{display:flex; align-items:center; gap:11px; width:100%; background:var(--surface);
  border:1px solid var(--line); border-radius:13px; padding:11px 13px; text-align:left}
.doorrow:hover{border-color:var(--ink-3)}
.drname{font-weight:700; font-size:13.5px; line-height:1.3; min-width:0}
.drmeta{display:block; font-weight:600; font-size:11.5px; color:var(--ink-3); margin-top:1px}
.doorempty{font-size:12.5px; color:var(--ink-3); padding:9px 2px}
.doorcodebox{flex:none; text-align:center; background:var(--sunk); border-radius:14px; padding:11px 16px; max-width:220px}
.doorcodebox .dcb-l{font-size:9.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.doorcodebox .doorcode{margin:5px auto 6px; display:inline-block}
.doorcodebox .dcb-h{font-size:10.5px; color:var(--ink-3); line-height:1.4}
/* Unassigned scanner — the card must read as a gap to fill, not as a door.
   Dashed edge and muted code chip, so it is unmistakable at arm's length. */
.doorcard.none{border-style:dashed; border-color:var(--line-2)}
.doorcard.none .dcname{color:var(--ink-3)}
.doorcard.none .doorcode{background:var(--sunk); color:var(--ink-3)}
/* The one-tap correction under a wrong-event verdict. */
.verdictfix{padding:0 16px 16px; background:var(--surface)}

/* ---------- organizer offer form ---------- */
.offergrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.offergrid .field{margin:0}
.offergrid .field.wide{grid-column:1/-1}
.offergrid label{display:block;font-size:12.5px;font-weight:650;margin-bottom:5px}
.offergrid input,.offergrid textarea,.offergrid select{width:100%;border:1.5px solid var(--line-2);border-radius:11px;padding:10px 12px;background:var(--surface);outline:none;font-size:15px;font-family:inherit}
.offergrid input:focus,.offergrid textarea:focus,.offergrid select:focus{border-color:var(--flame);box-shadow:0 0 0 3px var(--flame-tint)}
.offergrid textarea{resize:vertical}
.okmsg{background:var(--teal-tint);color:var(--teal);border-radius:11px;padding:11px 14px;font-size:13.5px;font-weight:600;margin:12px 0;line-height:1.5}
.okmsg b{color:var(--teal)}
.qrow.live{border-color:var(--flame);background:var(--flame-tint)}
@media (max-width:560px){ .offergrid{grid-template-columns:1fr} }

/* ---------- confirmation email ---------- */
.emailwrap{align-items:flex-start;padding:0;overflow-y:auto}
.email{background:var(--surface);width:100%;max-width:560px;margin:0 auto;min-height:100%}
@media (min-width:600px){.email{margin:24px auto;min-height:0;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-2)}}
.email-bar{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--sunk);border-bottom:1px solid var(--line);z-index:2}
.email-app{font-weight:800;font-size:14px;letter-spacing:-.01em;color:var(--ink-2)}
.email-head{padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.email-subj{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.25;margin-bottom:14px}
.email-from{display:flex;gap:11px;align-items:center}
.email-av{width:38px;height:38px;border-radius:50%;background:var(--flame);color:var(--on-accent);font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.ef-name{font-weight:700;font-size:14px}
.ef-addr{font-weight:400;color:var(--ink-3);font-size:12.5px}
.ef-to{font-size:12.5px;color:var(--ink-3);margin-top:1px}
.email-body{padding:20px}
.email-body p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin-bottom:14px}
.email-card{display:flex;gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:16px 0}
.ec-art{width:96px;flex:none;position:relative}
.ec-glyph{position:absolute;right:6px;bottom:-10px;font-size:52px;font-weight:800;color:rgba(255,255,255,.3)}
.ec-body{padding:12px 14px;min-width:0}
.ec-title{font-weight:750;font-size:15px;letter-spacing:-.01em;margin:3px 0}
.ec-meta{font-size:12.5px;color:var(--ink-3)}
.email-qr{display:flex;gap:14px;align-items:center;background:var(--sunk);border-radius:14px;padding:14px;margin:16px 0}
.email-qr canvas{width:96px;height:96px;flex:none;image-rendering:pixelated;background:#fff;border-radius:8px;padding:5px;border:1px solid var(--line)}
.eq-code{font-family:var(--mono,ui-monospace,monospace);font-weight:800;font-size:14px;letter-spacing:.03em}
.eq-hint{font-size:12.5px;color:var(--ink-3);margin-top:3px;line-height:1.4}
.email-order{width:100%;border-collapse:collapse;margin:8px 0 4px;font-size:13.5px}
.email-order td{padding:8px 0;border-bottom:1px solid var(--line);vertical-align:top}
.email-order td:first-child{color:var(--ink-3);width:78px;font-weight:600}
.email-order td:last-child{color:var(--ink);font-weight:600}
.email-fine{font-size:12.5px!important;color:var(--ink-3)!important;margin-top:14px!important}
.email-foot{font-size:11.5px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:14px;margin-top:16px;line-height:1.5}

/* sign-out control on the door scanner */
.cksignout{display:block; margin-top:8px; padding:6px 12px; font-size:12px; border-radius:9px}

/* ---------- persistent demo banner ----------
   Public-facing warning so nobody mistakes the demo for a live ticketing
   service once it sits on the client's real domain. Deliberately not
   dismissible. */
:root{ --bannerh:28px; }
.demobanner{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background:var(--ink); color:var(--on-ink);
  font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  text-align:center; line-height:1; padding:8px 12px;
  height:var(--bannerh); white-space:nowrap; overflow:hidden;
}
.demobanner .bshort{display:none}
body{ padding-top:var(--bannerh); }
.topbar{ top:var(--bannerh); }          /* sticky header sits below the banner */
.backbar{ top:var(--bannerh); }
/* keep it to a single line on narrow phones */
@media (max-width:560px){
  .demobanner{font-size:10px; letter-spacing:.03em}
  .demobanner .bfull{display:none}
  .demobanner .bshort{display:inline}
}

/* ---------- payment-confirmed celebration ----------
   Replaces the old bottom toast for payment confirmations, which sat on top
   of the tab bar (Krishna, 2026-08-31). Non-modal (role=status), dismissed
   with its ✕ or Escape; the check-draw and confetti collapse under the
   global prefers-reduced-motion rule, and the confetti is aria-hidden. */
.celebrate{position:fixed; left:50%; top:16px; transform:translateX(-50%); z-index:70;
  width:min(430px, calc(100vw - 24px)); background:var(--surface);
  border:1px solid var(--line-2); border-radius:18px; box-shadow:var(--shadow-2);
  padding:16px 48px 16px 16px; display:flex; gap:14px; align-items:flex-start;
  overflow:hidden; animation:celeb-in .5s cubic-bezier(.2,.9,.3,1.15) both}
@keyframes celeb-in{from{opacity:0; transform:translateX(-50%) translateY(-18px) scale(.96)}
  to{opacity:1; transform:translateX(-50%) translateY(0) scale(1)}}
.celebrate .cx{position:absolute; top:8px; right:8px; width:34px; height:34px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--ink-3); font-size:15px}
.celebrate .cx:hover{background:var(--sunk); color:var(--ink)}
.celeb-ring{width:46px; height:46px; flex:none; margin-top:2px}
.celeb-ring .ring{stroke-dasharray:126; stroke-dashoffset:126; animation:celeb-ring .55s ease-out .1s forwards}
.celeb-ring .tick{stroke-dasharray:30; stroke-dashoffset:30; animation:celeb-ring .3s ease-out .55s forwards}
@keyframes celeb-ring{to{stroke-dashoffset:0}}
.celeb-t{font-weight:800; font-size:16px; letter-spacing:-.02em; color:var(--ink)}
.celeb-s{font-size:12.5px; color:var(--ink-2); line-height:1.5; margin-top:2px}
.celeb-cta{margin-top:10px; padding:9px 16px; font-size:13.5px}
.celeb-confetti{position:absolute; inset:0 0 auto 0; height:100%; pointer-events:none}
.celeb-confetti i{position:absolute; top:-8px; width:6px; height:11px; border-radius:2px;
  opacity:0; animation:celeb-fall .9s ease-out forwards}
@keyframes celeb-fall{0%{opacity:.95; transform:translateY(0) rotate(0)}
  100%{opacity:0; transform:translateY(88px) rotate(260deg)}}
@media (prefers-reduced-motion: reduce){
  .celebrate{animation:none}
  .celeb-ring .ring, .celeb-ring .tick{animation:none; stroke-dashoffset:0}
  .celeb-confetti{display:none}
}

/* ============================================================
   Post-EARS functional rules kept through the Canary Noir restore
   (2026-09-11). Everything colour-specific from the cream retheme was
   dropped; these are theme-neutral behaviours added after it.
   ============================================================ */
/* an ended event's price is history, not an offer: same weight, quiet ink */
.eprice.past{color:var(--ink-3)}
/* monitor rows: the inline row link must still be a 24px target (WCAG 2.5.8) */
.montable .rowlink{min-height:24px; display:inline-flex; align-items:center}
/* card art is a per-event gradient (api.js _ART); art() sets --glyph and
   --on-art-ink per card so light (canary) art gets dark marks and dark art light ones */
.eart .glyph, .dhero .glyph, .bart .glyph{color:var(--glyph, rgba(255,255,255,.26))}
.oav{color:var(--on-art-ink, #fff)}
.autherr, .pmsg.no{color:var(--danger)}
.field input.bad{border-color:var(--danger); background:var(--danger-tint)}
.btn[disabled]{opacity:.45}

/* ---------- organizer media (photos and video) ---------- */
.gallery{display:flex; gap:8px; overflow-x:auto; padding:12px 16px 0; scroll-snap-type:x mandatory; scrollbar-width:none}
.gallery::-webkit-scrollbar{display:none}
.gallery img{height:150px; width:auto; max-width:80vw; border-radius:8px; scroll-snap-align:start; flex:none; object-fit:cover; background:var(--sunk)}
@media (min-width:760px){ .gallery{padding:14px 0 0} .gallery img{height:200px} }
.filerow{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.filebtn{position:relative; overflow:hidden; cursor:pointer}
.filebtn input{position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer}
.medialist{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
.mediaitem{position:relative; width:96px}
.mediaitem img, .mediaitem .vid{width:96px; height:72px; object-fit:cover; border-radius:4px; border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; background:var(--sunk); font-size:11px; font-weight:700; letter-spacing:.06em}
.mediaitem .rm{position:absolute; top:-8px; right:-8px; width:24px; height:24px; border-radius:50%; background:var(--ink); color:var(--on-ink); font-size:12px; display:flex; align-items:center; justify-content:center}
.qmedia{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; align-items:center}
.qmedia img{width:72px; height:54px; object-fit:cover; border-radius:4px; border:1px solid var(--line-2); display:block}
.qvid{display:inline-flex; align-items:center; height:54px; padding:0 12px; border:1px solid var(--line-2); border-radius:4px; font-size:12px; font-weight:700; color:var(--ink); text-decoration:none}

/* ---------- event lifecycle: past events fold on Discover ---------- */
/* .pasttoggle was sized for My tickets (16px gutters). Inside a .sec it must
   line up with the 32px desktop gutters the rails and section heads use. */
@media (min-width:760px){ .sec .pasttoggle{width:calc(100% - 64px); margin-left:32px; margin-right:32px} }
.sec .pasttoggle{margin-top:0}

/* ---------- organizer page ---------- */
.orghead{display:flex; align-items:center; gap:14px; padding:6px 16px 0}
.orghead .oav.lg{width:60px; height:60px; border-radius:10px; font-size:24px}
.orgid{min-width:0; flex:1}
.orghead h1{font-size:24px; font-weight:800; letter-spacing:-.035em; line-height:1.1; text-wrap:balance}
.orgmeta{color:var(--ink-3); font-size:13px; font-weight:600; margin-top:4px}
.orghead .followbtn{flex:none}
@media (min-width:760px){
  .orghead{padding:10px 32px 0; gap:18px}
  .orghead .oav.lg{width:76px; height:76px; font-size:30px}
  .orghead h1{font-size:32px}
}
/* the organizer card on an event page is the way in: one control, one chevron */
button.orgrow{width:100%; text-align:left; cursor:pointer}
button.orgrow:hover{border-color:var(--ink-3)}
.orgmore{margin-left:auto; flex:none; display:flex; color:var(--ink-3)}

/* ---------- organizers you follow (Saved) ---------- */
.followlist{display:flex; flex-direction:column; gap:10px; padding:0 16px}
.followrow{padding:10px 12px; gap:10px}
.orghit{display:flex; align-items:center; gap:13px; flex:1; min-width:0; text-align:left; padding:4px 0}
.oav.plain{background:var(--ink); color:var(--on-ink)}
.btn.sm{padding:8px 14px; font-size:13px}
@media (min-width:760px){ .followlist{padding:0 32px} }
/* hover states for the two new row controls (web-interface-guidelines review) */
.pasttoggle:hover{border-color:var(--ink-3)}
.orghit:hover .on{color:var(--flame-deep)}

/* ---------- portal: event lifecycle (remove with reason, scopes, create) ---------- */
.lcscopes{display:flex; gap:6px; flex-wrap:wrap; margin-left:auto}
.lcreason{font-size:13px; line-height:1.4; max-width:38ch; white-space:normal}
/* actions stack in their cell and the "On sale …" pill may wrap, so the
   table never grows past its panel (it did by 11px at the portal's width) */
.lcbtns{display:flex; flex-direction:column; gap:6px; align-items:flex-end}
.lcbtns .btn{padding:7px 10px; white-space:nowrap}
#lcpanel .statpill{white-space:normal; text-align:left; line-height:1.3}
.field textarea{width:100%; border:1.5px solid var(--line-2); border-radius:4px; padding:10px 12px; background:var(--surface);
  outline:none; font:inherit; font-size:15px; resize:vertical; min-height:96px}
.field textarea:focus{border-color:var(--ink); box-shadow:0 0 0 3px var(--flame-tint)}
.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}