/* ---------- Header menu on phones: a hamburger drops a panel under the header (Get the app, Events, For promoters, Help). Sign in stays in the header. ---------- */
.menu-btn,.menu-pop{display:none}
@media (max-width:820px){
  .menu-btn{display:grid;place-items:center;width:44px;height:44px;margin-right:-8px;border:0;border-radius:10px;background:none;color:var(--text);cursor:pointer}
  @media (hover:hover){.menu-btn:hover{background:var(--chip)}}
  .menu-pop:not([hidden]){display:block;position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--border);padding:8px 16px 14px;box-shadow:0 18px 30px rgba(0,0,0,.45)}
  .menu-pop nav{display:grid;gap:2px;max-width:560px}
  .menu-pop button{display:block;width:100%;min-height:48px;padding:0 12px;text-align:left;background:none;border:0;border-radius:10px;color:var(--text);font:600 17px var(--body);cursor:pointer}
  @media (hover:hover){.menu-pop button:hover,.menu-pop button:focus-visible{background:var(--chip)}}
  .menu-pop .menu-app{background:var(--brand);color:var(--on-brand);margin-bottom:6px}
  @media (hover:hover){.menu-pop .menu-app:hover,.menu-pop .menu-app:focus-visible{background:var(--brand);filter:brightness(1.08)}}
}
@media (prefers-reduced-motion:no-preference){
  @media (max-width:820px){.menu-pop:not([hidden]){animation:menuIn .18s cubic-bezier(.2,.7,.2,1)}}
  @keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
}
/* A light dim over the page behind the open menu (tap it to close). */
@media (max-width:820px){
  .menu-pop:not([hidden])::after{content:"";position:absolute;left:0;right:0;top:100%;height:100vh;background:rgba(0,0,0,.5)}
}
@media (prefers-reduced-motion:no-preference){
  @media (max-width:820px){.menu-pop:not([hidden])::after{animation:dimIn .2s ease-out}}
  @keyframes dimIn{from{opacity:0}to{opacity:1}}
}

/* Home top spacing: the sponsored line is gone when empty, so the first thing under the header (the app banner) sits close to it. */
.home-view{padding-block:16px 16px}
@media (max-width:820px){.home-view{padding-block:14px 16px}}
.home-view>.appad:first-child{margin-top:0}
/* The app banner spans the full width of the event grid under it. */
.home-view .appad{max-width:none;width:100%}

/* Fan app status line: the pulsing dot's halo is kept small so it does not hang out to the left of the text column, and "You're going" sits on the same baseline as the status. */
.app-view .stat:not([class*="st-"])::before{animation-name:dotping;margin-left:4px}
@keyframes dotping{0%{box-shadow:0 0 0 0 rgba(57,201,132,.55)}70%,100%{box-shadow:0 0 0 4px rgba(57,201,132,0)}}
.app-poster .app-pd-t>span:last-of-type,.app-ev-t>span:last-child{display:flex;align-items:center;flex-wrap:wrap;gap:0 4px}
.app-poster .app-going{line-height:inherit}

/* "Back to Dispatch" strip: shown on website screens reached from the fan app, pinned above the header. */
.backstrip{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;height:36px;background:var(--panel);border-bottom:1px solid var(--border)}
.backstrip .wrap{height:100%;display:flex;align-items:center}
.backstrip button{display:inline-flex;align-items:center;height:36px;padding:0 4px;margin-left:-4px;background:none;border:0;color:var(--brand);font:600 14px var(--body);cursor:pointer}
@media (hover:hover){.backstrip button:hover{color:var(--text)}}
body.fromapp{--sx:36px}
@media (max-width:820px){.backstrip button{min-height:36px}}

/* Event write-up (Description box): paragraphs kept, long ones fold with Read more. */
.writeup p{margin:0 0 12px;color:var(--text-dim);max-width:62ch;line-height:1.55;overflow-wrap:anywhere}
.writeup.clamp{max-height:9.5em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
.readmore{display:block;margin:2px 0 6px;min-height:44px;text-align:left}
.ig-link{font-size:13px;color:var(--text-dim)}
@media (hover:hover){.ig-link:hover{color:var(--brand)}}
.app-ig{display:block;padding:0 0 8px 2px}

/* Ticket type: the "extra, not an entry ticket" choice is a clear boxed option that turns amber when ticked. */
.exbox{margin:2px 0 16px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--panel)}
.exbox .check span{display:grid;gap:3px}
.exbox .check b{color:var(--text);font-size:15px}
.exbox .check small{color:var(--muted);font-size:13px;line-height:1.4}
.exbox:has(input:checked){border-color:rgba(255,176,32,.55);background:rgba(255,176,32,.08)}
.exbox:has(input:checked) .check b{color:var(--warn)}
/* Footer owner entrance: quiet, last in the row. */
footer .links .foot-owner{opacity:.7}
@media (hover:hover){footer .links .foot-owner:hover{opacity:1}}

/* Polish from the quality sweep: the Instagram link on event pages gets a proper tap area, and the buy bar's small print meets the 13px floor. */
.ig-link{display:inline-flex;align-items:center;min-height:44px}
.buybar .pr small{font-size:13px}

/* Edit a live event (promoter) and the Change request card (admin). */
.ped-t{display:grid;grid-template-columns:1fr 110px 110px;gap:10px;align-items:end;margin:0 0 12px}
.ped-n{display:grid;gap:2px;padding-bottom:10px}
.ped-t .fld-sm{width:auto}
.ped-date{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--panel)}
@media (max-width:560px){.ped-t{grid-template-columns:1fr 1fr}.ped-n{grid-column:1/-1;padding-bottom:0}}
.chglist{display:grid;gap:6px;margin:8px 0}
.chgrow{display:grid;grid-template-columns:minmax(0,1.2fr) auto auto auto;gap:10px;align-items:center;font-size:14px}

/* Admin idle warning bar. */
.idlebar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:90;display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;max-width:min(560px,calc(100% - 24px));background:var(--panel);border:1px solid rgba(255,176,32,.55);border-radius:14px;padding:12px 16px;box-shadow:0 14px 30px rgba(0,0,0,.5)}
/* Polish from the full sweep: poster bookmark gets a 44px target; admin group labels meet the 13px floor. */
.app-poster .app-save{width:44px;height:44px}
.adm-gl{font-size:13px}
/* A sideways swipe must not trigger the browser's own back/forward navigation (it was leaving the page when swiping between tabs). */
html,body{overscroll-behavior-x:none}

/* Get the app page: identity row, preview of the app. */
.gp-id{display:flex;align-items:center;gap:14px;margin:6px 0 14px}.gp-id .app-logo{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line)}
.gp-h{font-size:15px;margin:22px 0 10px;color:var(--mut,#9aa);font-weight:600}
.gp{display:flex;gap:14px;justify-content:center;margin:0 0 14px}
.gp-ph{flex:0 1 170px;aspect-ratio:9/17;border:1px solid var(--line);border-radius:22px;background:var(--panel);padding:10px;display:flex;flex-direction:column;gap:8px;overflow:hidden;font-size:10px}
.gp-bar{display:flex;align-items:center;gap:6px;font-size:11px}.gp-bar i{width:14px;height:14px;border-radius:4px;background:var(--accent,#e8b04a)}
.gp-poster{flex:1;border-radius:12px;background:linear-gradient(160deg,#4a2f6b,#c4553a);padding:10px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff}.gp-poster b{font-size:15px}
.gp-row{display:flex;gap:6px}.gp-row div{flex:1;height:34px;border-radius:8px;background:rgba(255,255,255,.07)}
.gp-tabs{display:flex;gap:6px}.gp-tabs u{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.12)}.gp-tabs u.on{background:var(--accent,#e8b04a)}
.gp-tk{flex:1;border-radius:12px;background:rgba(255,255,255,.07);padding:10px;display:flex;flex-direction:column;gap:4px;justify-content:center}.gp-tk b{font-size:14px}.gp-tk em{font-style:normal;margin-top:8px;background:var(--accent,#e8b04a);color:#111;border-radius:8px;padding:6px;text-align:center;font-weight:600}
.gp-share{vertical-align:-3px}

/* Sign-in number on the Get the app page, and its entry field in the app. */
.pairbox{margin:16px 0 0;border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:14px 16px;text-align:center}
.pairlbl{font-size:13px;color:var(--mut,#9aa);margin-bottom:6px}
.pairnum{font-size:40px;font-weight:700;letter-spacing:.35em;padding-left:.35em;margin:2px 0 8px}
.pairinp{font-size:28px;text-align:center;letter-spacing:.35em}

/* Phone event page: Share and Add to calendar as a pair of large buttons. */
.actpair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 6px}
.actbtn{display:flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 12px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));color:var(--text);font:inherit;font-weight:600;font-size:15px;cursor:pointer}
.actbtn:active{transform:scale(.98)}
.actbtn svg{flex:none;color:var(--accent,#e8b04a)}

.actbtn span{text-shadow:0 1px 3px rgba(0,0,0,.65),0 0 10px rgba(0,0,0,.4)}

/* Event page flyer keeps the tall poster shape (4:5) at every width; it never grows taller than 72% of the screen. */
.ev .flyer{aspect-ratio:4/5;width:min(100%,calc(72svh*.8));max-height:none;margin-inline:auto;margin-bottom:18px}