/* --- v4 additions: sellers, listing form, quote, dashboard sources --- */
.srow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.sellers .srow:last-of-type{border-bottom:0}
.src{font-size:13px;color:var(--muted);margin:6px 0 20px}
.trow{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:8px;margin-bottom:8px;align-items:center}
.brow{display:grid;grid-template-columns:2fr 1fr auto;gap:8px;margin-bottom:8px;align-items:center}
.iconbtn{background:none;border:1px solid var(--border);border-radius:8px;width:36px;height:40px;cursor:pointer;color:var(--text-dim)}
@media (hover:hover){.iconbtn:hover{border-color:var(--error);color:var(--error)}}
.bcard{border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:14px;background:var(--surface)}
.bcalc{font-size:13px;color:var(--text-dim);margin-top:8px}
.bcalc .warnline{color:var(--warn)}
.tagbox{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.chipx{display:inline-flex;align-items:center;gap:6px;background:var(--chip);border:1px solid var(--border);border-radius:999px;padding:3px 4px 3px 10px;font-size:13px;font-weight:600}
.chipx.new{border-color:rgba(255,176,32,.5);color:var(--warn)}
.chipx button{background:none;border:0;cursor:pointer;color:var(--muted);width:20px;height:20px;border-radius:50%;padding:0}
@media (hover:hover){.chipx button:hover{color:var(--error)}}
.tagrow{display:flex;gap:8px}
.mapbox{margin-top:8px;border:1px dashed var(--border);border-radius:12px;height:110px;display:grid;place-items:center;color:var(--muted);font-size:13px;background:linear-gradient(135deg,var(--surface),var(--bg-2))}
.quote{background:var(--panel);border:1px solid var(--brand);border-radius:14px;padding:16px}
.quote h3{font-size:18px;margin-bottom:8px}
.cols{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;align-items:end;height:90px;margin:8px 0 4px}
.cols i{display:block;background:var(--brand);border-radius:3px 3px 0 0;min-height:2px}
.cols.b i{background:var(--info)}
@media (max-width:480px){.trow{grid-template-columns:1fr 1fr auto}.trow input:first-child{grid-column:1/-1}.brow{grid-template-columns:1fr 1fr auto}}

/* --- v5 buyer redesign: flyer-tinted rooms, date block, bottom sheet on mobile --- */
.datebk{display:flex;align-items:center;gap:8px;font-family:var(--display)}
.datebk .d{font-weight:800;font-size:40px;line-height:.8;font-stretch:75%;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.datebk .m{display:grid;line-height:1.15;font-size:13px;color:var(--muted);font-weight:600}
.datebk .m b{color:var(--text);font-weight:600}
.datebk.sm .d{font-size:26px}
.datebk.sm .m{font-size:12px}

.stat{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-dim)}
.stat::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand);flex:none}
.stat.amber::before{background:var(--warn)}
.stat.red::before{background:var(--error)}
.stat.grey::before{background:var(--muted)}

/* position:relative + the script flourish taken out of flow (absolute) means the stub's own
   box starts right at the day number — lines up with the title beside it instead of sitting
   lower because of the script line's height. */
.lowstock{font-size:13px;color:var(--warn);font-weight:600;margin-left:6px}

/* Buy-button colors for non-purchasable states, reusing the site's existing amber/red/grey
   convention (same as .stat dots and the warn/bad banners) so it's one palette, not a new one. */
.cardbuy.amber{background:rgba(255,176,32,.12);border-color:rgba(255,176,32,.4);color:var(--warn)}
@media (hover:hover){.cardbuy.amber:hover{border-color:var(--warn)}}
.cardbuy.red{background:rgba(255,92,108,.12);border-color:rgba(255,92,108,.4);color:var(--error)}
@media (hover:hover){.cardbuy.red:hover{border-color:var(--error)}}
.cardbuy.grey{background:var(--chip);border-color:var(--border);color:var(--muted)}

/* ticket sheet: a normal sticky side panel on desktop (unchanged), a bottom sheet under 820px */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--bg);border-top:1px solid var(--border);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));display:none;justify-content:space-between;align-items:center;gap:12px}
.buybar .pr{font:700 20px var(--display)}
.buybar .pr small{display:block;font:400 12px var(--body);color:var(--muted)}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:35;opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.open{opacity:1;pointer-events:auto}
.sheetgrab{display:none}
@media (max-width:820px){
  .buybar{display:flex}
  .panel.stick.sheet{position:fixed;left:0;right:0;bottom:0;top:auto;border-radius:16px 16px 0 0;max-height:85svh;overflow-y:auto;transform:translateY(105%);transition:transform .3s cubic-bezier(.2,.8,.2,1);z-index:36;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .panel.stick.sheet.open{transform:translateY(0)}
  .sheetgrab{display:block;width:40px;height:4px;border-radius:2px;background:var(--border);margin:0 auto 14px;border:0;background-color:var(--border)}
  /* WCAG 2.4.11: keep a focused control from landing under the fixed buy bar when tabbing */
  html{scroll-padding-bottom:90px}
}

.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}

.ckprogress{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin:0 0 16px;flex-wrap:wrap}
.ckprogress .on{color:var(--text);font-weight:600}
.ckprogress i{font-style:normal;color:var(--border)}

.emailhint{color:var(--warn);font-size:13px;margin:-8px 0 10px}
.emailhint button{background:none;border:0;color:var(--warn);text-decoration:underline;font-weight:600;padding:0;cursor:pointer;font-size:13px}

.mini{display:flex;gap:14px;align-items:center;margin-bottom:8px}
.mini .flyer{width:64px;aspect-ratio:1;padding:6px;flex:none}

.emptyhero{padding:12px 0 8px}
.emptyhero h1{font-size:clamp(28px,5vw,40px);margin-bottom:8px}
.emptyhero p{color:var(--text-dim);margin:0 0 18px;max-width:48ch}
.blankfly{width:170px;max-width:60%;aspect-ratio:4/5;border-radius:8px;border:1px dashed var(--border);background:repeating-linear-gradient(135deg,var(--chip) 0 10px,var(--bg) 10px 20px);display:grid;place-items:center;font:800 18px var(--display);color:var(--muted);margin-top:28px}

.pastrow{margin-top:44px;border-top:1px solid var(--border);padding-top:20px}
.pastrow h2{font-size:20px;margin-bottom:12px}
.paststrip{display:flex;gap:16px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity;scroll-padding-inline:16px}
.pastitem{width:180px;flex:none;text-align:center;background:none;border:0;cursor:pointer;color:inherit;scroll-snap-align:start}
.pastitem .flyer{aspect-ratio:4/5;padding:14px}
.pastitem b{display:block;margin-top:8px;font-size:14px;font-weight:600;color:var(--text)}
.pastitem span{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
.sponsored-banner{display:flex;align-items:center;gap:8px;width:100%;border:0;padding:0;background:none;color:var(--muted);cursor:pointer;font-size:12.5px}
@media (hover:hover){.sponsored-banner:hover{color:var(--text-dim)}}
.sp-tag{text-transform:uppercase;font-size:12px;letter-spacing:.08em;color:var(--muted);flex:none}

.hero{position:relative;height:220px;border-radius:12px;overflow:hidden;margin-top:14px}
.hero-slide{position:absolute;inset:0;border:0;padding:0;margin:0;pointer-events:none;background:repeating-linear-gradient(135deg,var(--chip) 0 14px,var(--bg-2) 14px 28px);opacity:0;transition:opacity 1.4s ease;display:flex;align-items:flex-start;justify-content:flex-end}
.hero-slide.active{opacity:1;z-index:1}
.hero-credit{margin:14px;padding:5px 12px;background:rgba(10,10,10,.55);border-radius:999px;font-size:13px;color:var(--text-dim)}
@media (prefers-reduced-motion:reduce){.hero-slide{transition:none}}

.home-list.overlap{position:relative;margin-top:-56px;background:var(--bg);border-radius:16px 16px 0 0;padding-top:16px}

/* Home's own vertical rhythm — small bottom gap so past events sit close to the footer,
   not the generic section.view padding other screens use. */
.home-view{padding-block:28px 16px}

@media (max-width:820px){
  /* Home felt cramped on phone widths — more air between sections and at the edges (top only; bottom stays tight to the footer) */
  .home-view{padding-inline:20px;padding-block:36px 16px}
  .home-view .sponsored-banner{margin-top:8px}
  .home-view .hero{margin-top:22px;height:240px}
  .home-view .home-list.overlap{margin-top:-44px;padding-top:26px}
  .home-view .grid{gap:28px}
  .home-view .pastrow{margin-top:56px;padding-top:26px}
}

@media (min-width:821px){
  /* Past events get real room on desktop too, not just the compact phone strip. */
  .pastitem{width:260px}
  .pastitem .flyer{padding:20px}
  .pastitem b{font-size:17px}
  .pastitem span{font-size:15px}
}

.filterbar{position:sticky;top:calc(76px + env(safe-area-inset-top,0px));background:var(--bg);z-index:5;padding-bottom:10px}
.viewtoggle{display:flex;gap:4px}
.viewtoggle button{background:none;border:0;color:var(--muted);font-weight:600;padding:6px 10px;min-height:44px;border-bottom:2px solid transparent;cursor:pointer}
.viewtoggle button[aria-pressed="true"]{color:var(--text);border-color:var(--brand)}
.filterrow{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;font-size:13px;color:var(--muted)}

.evrow{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border);width:100%;text-align:left;background:none;border-left:0;border-right:0;border-top:0;cursor:pointer;color:inherit}
.evrow .flyer{aspect-ratio:1;padding:6px}
.evrow h4{font-size:15px;margin:0;font-family:var(--display);font-weight:700}
.evrow .v2{color:var(--muted);font-size:13px}

/* intro deck: phones get the sticky stack below; desktop (>820px) gets the split stage (see the GSAP block at the end), or the plain list if the libraries fail */
.intro-deck{position:relative;timeline-scope:--p2,--p3,--lst}
.intro-poster{position:sticky;top:calc(60px + env(safe-area-inset-top,0px));height:calc(100svh - 60px - env(safe-area-inset-top,0px));min-height:460px;overflow:hidden;background:var(--tone,var(--bg))}
.intro-poster:nth-of-type(2){view-timeline:--p2 block}
.intro-poster:nth-of-type(3){view-timeline:--p3 block}
.intro-inner{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;padding:0 16px calc(20px + env(safe-area-inset-bottom,0px))}
.intro-top{display:flex;justify-content:space-between;align-items:center;height:56px;flex:none}
.intro-top{justify-content:flex-end}
.intro-skip{color:var(--text);background:rgba(14,14,15,.55);border:1px solid rgba(255,255,255,.28);border-radius:999px;font:600 14px var(--body);min-height:44px;padding:0 18px;cursor:pointer;backdrop-filter:blur(6px);transition:transform .1s ease,background-color .15s}
.intro-skip:active{transform:scale(.97)}
.intro-skip:focus-visible,.intro-prog button:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.intro-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:6px 0 16px}
.intro-stage .flyer{height:100%;max-height:48vh;width:auto;max-width:100%;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.intro-info{flex:none;display:grid;gap:8px}
.intro-name{font:800 24px var(--display);letter-spacing:-.02em;color:var(--text)}
.intro-tag{font-size:13px;color:var(--text-dim);border:1px solid rgba(255,255,255,.25);border-radius:4px;padding:2px 6px;margin-left:8px}
.intro-line{color:var(--text-dim);font-size:14px}
.intro-line b{color:var(--text)}
.intro-glow{position:absolute;inset:-15% -25%;background:radial-gradient(60% 45% at 50% 42%,var(--glow,transparent) 0,transparent 70%);opacity:.35;pointer-events:none}
.intro-fade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:3}
.intro-list{position:relative;z-index:5;background:var(--bg)}
/* Progress: sticks with the posters, left of Skip. One segment per poster; --f (0 to 1) is set by app.js as you scroll. */
.intro-prog{position:sticky;top:calc(60px + env(safe-area-inset-top,0px));height:0;z-index:4;pointer-events:none}
.intro-prog-in{position:absolute;left:16px;right:104px;top:6px;display:flex;gap:6px;pointer-events:auto}
.intro-prog button{flex:1;height:44px;background:none;border:0;padding:0;display:grid;align-items:center;cursor:pointer}
.intro-prog i{display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.22);position:relative;overflow:hidden}
.intro-prog i::after{content:"";position:absolute;inset:0;background:var(--text);transform-origin:left;transform:scaleX(var(--f,0))}
@keyframes introDollyIn{from{transform:scale(1.3) translateY(4%);opacity:.2}to{transform:none;opacity:1}}
@keyframes introDollyOut{to{transform:scale(.72) translateY(-5%)}}
@keyframes introFadeOp{to{opacity:.85}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .intro-poster:nth-of-type(1) .intro-stage{animation:introDollyOut linear both;animation-timeline:--p2;animation-range:entry 0% entry 100%}
    .intro-poster:nth-of-type(1) .intro-fade{animation:introFadeOp linear both;animation-timeline:--p2;animation-range:entry 0% entry 100%}
    .intro-poster:nth-of-type(1) .intro-glow{animation:introDollyOut linear both;animation-timeline:--p2;animation-range:entry 0% entry 100%}
    .intro-poster:nth-of-type(2) .intro-stage{animation:introDollyIn linear both,introDollyOut linear both;animation-timeline:--p2,--p3;animation-range:entry 0% entry 95%,entry 0% entry 100%}
    .intro-poster:nth-of-type(2) .intro-fade{animation:introFadeOp linear both;animation-timeline:--p3;animation-range:entry 0% entry 100%}
    .intro-poster:nth-of-type(3) .intro-stage{animation:introDollyIn linear both;animation-timeline:--p3;animation-range:entry 0% entry 95%}
  }
}
@media (max-width:820px){.intro-deck{display:block}}
@media (max-width:820px){.ev-wrap{padding-bottom:90px}}

/* ---------- Date stub refinement: day number top lines up with the title, month in capitals, clear gap to price ---------- */

/* ---------- Checkout delivery choice ---------- */
.deliv{border:0;padding:0;margin:0 0 12px}
.deliv legend{padding:0;margin-bottom:8px;font-size:13px;font-weight:600;color:var(--text-dim)}
.deliv-cards{display:grid;gap:10px}
.dcard{display:block;width:100%;text-align:left;background:var(--chip);border:1px solid var(--border);border-radius:12px;padding:12px 14px;cursor:pointer;min-height:44px}
.dcard b{display:block}
.dcard span{display:block;font-size:13px;color:var(--muted)}
.dcard[aria-checked="true"]{border-color:var(--brand);background:rgba(57,201,132,.08)}
.dcard .inst{margin-top:10px}
.dcard .inst .btn{width:100%}
.deliv-err{font-size:13px;color:var(--warn);margin-top:6px}