/* Layout: night-sky header with genre mix bar, sticky filter strip, then a responsive grid of artist cards ordered by billing */
:root{
  --night:#120a2e; --night2:#1d1145; --card:#24165a; --ink:#f6f1ff; --soft:#c9b8ff;
  --pink:#ff4fb4; --amber:#ffb627; --cyan:#3fe0ff; --violet:#a874ff; --lime:#7dff9b; --coral:#ff7a59;
  --gold:#ffcc66; --lav:#cc99ff; --orange:#ff7a3d; --peri:#6677ff; --red:#ff4d6d;
  --display:"Unbounded", "Arial Black", system-ui, sans-serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
a,button,.chip,.seg button,.stg-row button,.vote button,.tabs a{touch-action:manipulation}
.ic{width:1em;height:1em;vertical-align:-.15em;flex:none;display:inline-block}
.ic-lg{width:1.3em;height:1.3em;vertical-align:-.22em}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5;
  padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px));padding-block:0 48px;
  background-image:radial-gradient(circle at 15% -10%, #3a1a7a 0, transparent 45%),radial-gradient(circle at 95% 5%, #5a1150 0, transparent 40%);}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--night)}
.wrap{max-width:1100px;margin:0 auto}
header{padding-block:32px 20px;position:relative}
header::before{content:"";position:absolute;top:-60px;right:-80px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%, rgba(185,255,210,.9), rgba(63,224,255,.55) 35%, rgba(94,58,219,.35) 60%, transparent 72%);
  filter:blur(6px);pointer-events:none;z-index:-1}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);font-weight:700}
h1{font-family:var(--display);font-weight:800;font-size:clamp(28px,6vw,52px);line-height:1.05;margin:8px 0 10px;text-wrap:balance}
h1 span{color:var(--pink)}
.tagline{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--soft)}
.lede{color:var(--soft);max-width:62ch;margin:0}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.fact{background:var(--night2);border:1px solid #3b2a7a;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600}
.fact b{color:var(--cyan)}
.notice{margin-top:16px;background:#2a1650;border-left:4px solid var(--amber);padding:10px 14px;border-radius:6px;font-size:14px;max-width:70ch}
.maplink{display:inline-block;color:var(--cyan);font-weight:700;text-decoration:none;margin-top:4px}
.mix{margin-top:22px}
.stages{margin-top:24px}
.stages h2{font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px;color:var(--soft)}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.stage{background:var(--night2);border-radius:10px;padding:10px 12px;border-left:4px solid var(--s);min-width:0}
.stage b{display:block;font-family:var(--display);font-size:14px;font-weight:700}
.stage span{font-size:13px;color:var(--soft)}
.maplinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.maplinks a{color:var(--night);background:var(--cyan);font-weight:700;font-size:13.5px;text-decoration:none;padding:8px 12px;border-radius:8px}
.mapnote{font-size:13px;color:var(--soft);margin-top:8px}
.mix h2{font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px;color:var(--soft)}
.bar{display:flex;height:22px;border-radius:6px;overflow:hidden}
.bar div{height:100%}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:13px}
.legend span{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.legend i{width:10px;height:10px;border-radius:2px;display:inline-block}
.filters{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--night);padding-block:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-bottom:1px solid #2e1f66}
.chip{font:600 13px var(--body);color:var(--ink);background:var(--night2);border:1.5px solid #4a3594;border-radius:999px;padding:7px 13px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--night);border-color:var(--ink)}
.chip:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
#q{flex:1 1 160px;min-width:0;font:500 14px var(--body);color:var(--ink);background:var(--night2);border:1.5px solid #4a3594;border-radius:999px;padding:7px 14px}
#q::placeholder{color:#9d88e0}
.count{font-size:13px;color:var(--soft);margin:14px 0 10px;font-variant-numeric:tabular-nums}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.card{background:var(--card);border-radius:12px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:8px;border-top:4px solid var(--g);min-width:0}
.top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.name{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.2;text-wrap:balance;min-width:0;overflow-wrap:anywhere}
.rank{font-size:12px;color:var(--soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.tags{display:flex;flex-wrap:wrap;gap:5px}
.tag{font-size:11.5px;font-weight:700;letter-spacing:.03em;padding:3px 8px;border-radius:5px;background:var(--g);color:var(--night)}
.tag.sun{background:var(--amber)}
.tag.gem{background:transparent;color:var(--lime);border:1.5px solid var(--lime)}
.tag.guess{background:transparent;color:var(--soft);border:1.5px dashed var(--soft)}
.vibe{margin:0;color:var(--soft);font-size:14px}
.links{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.yt{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--ink);font-weight:700;font-size:13.5px;background:#ff2d55;padding:8px 12px;border-radius:8px}
.yt:hover{background:#ff5577}
.yt svg{width:15px;height:15px;flex:none}
.empty{color:var(--soft);padding:24px 0}
.vote{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.vote button{font:700 13px var(--body);color:var(--ink);background:var(--night2);border:1.5px solid #4a3594;border-radius:8px;padding:8px 4px;cursor:pointer}
.vote button[aria-pressed="true"][data-v="yes"]{background:var(--lime);border-color:var(--lime);color:var(--night)}
.vote button[aria-pressed="true"][data-v="maybe"]{background:var(--amber);border-color:var(--amber);color:var(--night)}
.vote button[aria-pressed="true"][data-v="no"]{background:var(--red);border-color:var(--red);color:var(--night)}
.card.is-no{filter:saturate(.35)}
.card.is-yes{box-shadow:0 0 0 2px var(--lime)}
.tally{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tally span,.tally button{font:inherit;font-weight:700;font-size:13px;border:1.5px solid transparent;cursor:pointer;min-height:44px;padding:6px 12px;border-radius:999px;font-variant-numeric:tabular-nums;background:var(--night2)}
.tally .y{color:var(--lime)}.tally .m{color:var(--amber)}.tally .n{color:var(--red)}.tally .u{color:var(--soft)}
.tally button[aria-pressed="true"]{border-color:currentColor}
.tally button:hover{filter:brightness(1.15)}
.sync{font-size:12.5px;color:var(--soft);margin-top:8px}
.linkbtn{display:inline-flex;align-items:center;gap:6px;margin-top:10px}
.linkbtn[hidden]{display:none}
.link-p{margin:0 0 14px;font-size:14.5px;color:var(--soft);line-height:1.45}
.link-lbl{display:block;font-weight:700;font-size:13px;margin-bottom:6px}
.link-in{width:100%;box-sizing:border-box;min-height:44px;font:600 16px var(--body);color:var(--ink);background:var(--night2);border:1.5px solid #8a78e6;border-radius:12px;padding:8px 14px}
.link-err{min-height:1.2em;margin:6px 0 8px;font-size:13.5px;color:var(--red)}
#linkForm .btns .btn{flex:1 1 100%;cursor:pointer;font:inherit;font-weight:700}
#linkForm .btns .btn[hidden]{display:none}
.intro{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(8,4,24,calc(.82 * var(--bd,1)));backdrop-filter:blur(6px)}
.intro[hidden]{display:none!important}
.intro-card{max-width:380px;width:100%;max-height:calc(100dvh - 40px);overflow-y:auto;background:linear-gradient(160deg,#2a1a66,#1c1250);border:1.5px solid var(--line);border-radius:20px;padding:24px 22px;box-shadow:0 20px 60px -20px rgba(0,0,0,.9)}
.intro-emoji{font-size:30px;margin-bottom:4px}
.intro-card h2{font-family:var(--display);font-size:22px;margin:0 0 14px}
.intro-row{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.intro-ico{font-size:17px;flex:none;width:36px;text-align:center;letter-spacing:-1px}
.intro-row p{margin:0;font-size:14.5px;color:var(--soft);line-height:1.45}
.intro-row b{color:var(--ink)}
.intro-lead{margin:-4px 0 16px;font-size:15px;line-height:1.45;color:var(--ink)}
/* tip boxes: one short line and two big buttons in the services' own colors, so they read at a glance */
.tipbox{margin:14px 0;padding:14px;border-radius:18px;border:1.5px solid rgba(255,79,180,.6);background:linear-gradient(135deg,rgba(255,79,180,.2),rgba(63,224,255,.1));box-shadow:0 0 30px -12px rgba(255,79,180,.8)}
.tipbox[hidden]{display:none}
.tip-h{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:700 16px/1.2 var(--display);color:var(--ink)}
.tip-h .ic{color:var(--pink);width:20px;height:20px}
.tip-end{max-width:520px;margin:22px auto 4px}
.skip{position:absolute;left:12px;top:-60px;z-index:60;padding:10px 14px;border-radius:10px;background:var(--cyan);color:var(--night);font-weight:800;text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 8px)}
.intro-go{width:100%;margin-top:4px;background:var(--grad);color:var(--night);border:0;font-weight:800}
.intro-help{flex:none;width:34px;min-height:34px;border-radius:50%;border:1.5px solid var(--line);background:rgba(18,10,46,.6);color:var(--soft);font-size:14px;cursor:pointer;align-self:center}
footer{margin-top:28px;font-size:13px;color:var(--soft);max-width:70ch}
footer a{color:var(--cyan)}
.donate-row{display:flex;flex-wrap:wrap;gap:8px}
.donate-row[hidden]{display:none}
.donate-row .donate{flex:1 1 120px;min-height:52px;border-radius:14px;font-size:16px;font-weight:800;background:var(--grad);color:var(--night);box-shadow:none}
.donate-row .donate[data-service="Venmo"]{background:#0074de;color:#fff}
.donate-row .donate[data-service="Cash App"]{background:#00d632;color:#06140b}
footer .tipbox{max-width:420px;margin:0 0 16px}
/* the lineup already ends with a tip box, so the footer one only shows on Getting there and Map */
body[data-view="lineup"] footer .tipbox{display:none}
/* audit: hover feedback on every button style that lacked it */
.btn:hover,.tabs a:hover,.ftoggle:hover,.vtoggle:hover,.xbtn:hover,.intro-help:hover{filter:brightness(1.15)}
/* audit: sticky menu and filter bar must not cover the focused element; modals don't scroll the page */
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 130px)}
.intro{overscroll-behavior:contain}
/* popups are bottom sheets on phones: they spring up from the bottom and drag down to close (motion.js) */
.intro-card{will-change:transform}
@media (max-width:700px){
  .intro{align-items:flex-end;padding:0}
  .intro-card{max-width:none;border-radius:24px 24px 0 0;border-bottom:0;padding:10px 20px calc(20px + env(safe-area-inset-bottom,0px));max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px))}
  .intro-card::before{content:"";display:block;width:40px;height:5px;border-radius:3px;background:#8a78e6;margin:0 auto 14px}
}
/* the Day and Time switches: one highlight pill slides behind the pressed option (app.js segPill) */
.seg{position:relative}
.seg-pill{position:absolute;left:0;top:0;z-index:0;border-radius:12px;background:var(--grad);box-shadow:0 6px 18px -6px rgba(255,79,180,.7);pointer-events:none;will-change:transform}
.seg.has-pill button{position:relative;z-index:1}
.seg.has-pill button[aria-pressed="true"]{background:transparent!important;box-shadow:none!important}
.vote button{will-change:transform}
@media (max-width:420px){.grid{grid-template-columns:1fr}}
body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
.view[hidden]{display:none!important}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(3,1fr);background:#1a0f40;border-top:2px solid var(--pink);padding:6px max(10px, env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(10px, env(safe-area-inset-left,0px))}
.tabs a{display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--soft);font:700 12.5px var(--body);padding:6px 4px;border-radius:10px;min-height:48px;justify-content:center}
.tabs a span{font-size:20px;line-height:1}
.tabs a[aria-current="page"]{color:var(--night);background:var(--ink)}
.vote button{min-height:44px;font-size:14px}
.links a{flex:1 1 0;justify-content:center;min-height:42px}
.sp{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:#06140b;font-weight:700;font-size:13.5px;background:#1ed760;padding:8px 12px;border-radius:8px}
.sp svg{width:15px;height:15px;flex:none}
.sec{padding-block:8px}
.sec h2{font-family:var(--display);font-size:clamp(22px,5vw,30px);font-weight:700;margin:22px 0 6px}
.sec h3{font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:24px 0 8px;color:var(--soft)}
.sec p{margin:0 0 8px;max-width:65ch}
.lines{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px}
.line{background:var(--card);border-radius:12px;padding:14px;border-left:6px solid var(--lc);display:flex;flex-direction:column;gap:6px;min-width:0}
.line.ours{box-shadow:0 0 0 2px var(--lc);background:#22206a}
.line .ln{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:16px}
.line .ln em{font-style:normal;font-family:var(--body);font-size:11.5px;background:var(--lc);color:var(--night);padding:2px 8px;border-radius:5px}
.line .stop{font-weight:700}
.addr{color:var(--soft);font-size:14px;user-select:all}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:700;font-size:14px;color:var(--night);background:var(--cyan);flex:1 1 140px;text-align:center}
.btn.alt{background:var(--night2);color:var(--ink);border:1.5px solid #4a3594}
.btn.uber{background:var(--ink);color:var(--night)}
.btn.lyft{background:var(--pink);color:var(--night)}
details{font-size:14px;color:var(--soft)}
details summary{cursor:pointer;font-weight:600;color:var(--ink);min-height:32px;display:flex;align-items:center}
details ul{margin:4px 0 0;padding-left:18px}
.times{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.time{background:var(--night2);border-radius:10px;padding:10px 12px}
.time b{display:block;color:var(--amber);font-family:var(--display);font-size:15px}

.gmap{margin-top:18px;background:var(--night2);border-radius:14px;padding:12px;border:1.5px solid #3b2a7a}
.gmap h2{font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:0 0 4px;color:var(--soft)}
.gmap .cap{font-size:12.5px;color:var(--soft);margin:0 0 8px}
.gmap .svgwrap svg{display:block;width:100%;height:auto;max-width:760px;margin:0 auto}
.gmap .stg{cursor:pointer}
.gmap .stg:focus-visible circle{stroke:var(--ink);stroke-width:4}
.gmap .stg.on circle.ring{stroke:var(--ink);stroke-width:3.5}
/* lineup top: days, then the map you tap to see a stage's acts, then your picks */
header.lineup-top h1{font-size:clamp(26px,7vw,40px);margin:4px 0 2px}
header.lineup-top .tagline{font-size:12.5px;margin:0 0 12px}
.gmap-top{margin-top:12px;padding:10px 10px 6px}
.maph-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;margin:0 2px 2px}
.maph-row .maph{margin:0}
.maph-clear{font:700 13px var(--body);color:var(--cyan);background:none;border:0;min-height:44px;padding:0 4px;cursor:pointer}
.maph-clear[hidden]{display:none}
.picksrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.picksrow .tally,.picksrow .linkbtn{margin:0}
.sync[hidden]{display:none}
.dayinfo{margin-top:26px}
.dayinfo .mix{margin-top:0}
.ginfo{margin-top:8px;background:var(--card);border-radius:10px;padding:10px 12px;font-size:14px;border-left:5px solid var(--sc,var(--pink));min-height:52px}
.ginfo b{font-family:var(--display);font-size:15px}
.gkey{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:12.5px;color:var(--soft)}
.gkey span{display:inline-flex;align-items:center;gap:5px}
.gkey i{width:11px;height:11px;border-radius:50%;display:inline-block}
.seg{display:grid;gap:6px;margin-top:14px}
.seg.days,.seg.times3{grid-template-columns:repeat(3,1fr)}
.seg button{font:700 14px var(--body);color:var(--ink);background:var(--night2);border:1.5px solid #4a3594;border-radius:12px;padding:10px 6px;min-height:52px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.seg button small{font-weight:600;font-size:11.5px;color:var(--soft)}
.seg button[aria-pressed="true"]{background:var(--pink);border-color:var(--pink);color:var(--night)}
.seg button[aria-pressed="true"] small{color:var(--night)}
.seg.times3 button[aria-pressed="true"]{background:var(--amber);border-color:var(--amber)}
.stg-row{display:flex;gap:6px;margin-top:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.stg-row::-webkit-scrollbar{display:none}
.stg-row button{flex:none;font:700 13px var(--body);color:var(--ink);background:var(--night2);border:1.5px solid #4a3594;border-radius:999px;padding:8px 13px;min-height:42px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.stg-row button i{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--sc)}
.stg-row button[aria-pressed="true"]{background:var(--sc);border-color:var(--sc);color:var(--night)}
.stg-row button[aria-pressed="true"] i{background:var(--night)}
.rowlbl{font:700 11.5px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin:12px 0 0}
.tag.where{background:transparent;color:var(--ink);border:1.5px solid var(--sc)}
.estnote{font-size:12.5px;color:var(--amber);margin:6px 0 0}
.tag.when{background:transparent;color:var(--amber);border:1.5px solid var(--amber)}
.tag.when.real{background:var(--amber);color:var(--night)}
.tip{background:#2a1650;border-left:4px solid var(--lime);padding:10px 14px;border-radius:6px;font-size:14px;margin-top:10px;max-width:70ch}
@media (max-width:600px){
  header{padding-block:20px 12px}
  .lede{font-size:14px}
  .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * max(16px, env(safe-area-inset-left,0px)));padding-inline:max(16px, env(safe-area-inset-left,0px))}
  .filters::-webkit-scrollbar{display:none}
  .chip{flex:none;min-height:40px}
  #q{flex:0 0 170px;min-height:40px}
  .card{padding:16px}
  .name{font-size:18px}
}
@media (prefers-reduced-motion:no-preference){.card{transition:transform .15s}.card:hover{transform:translateY(-2px)}}
/* ===== v2 restyle: electric-sky glass, sharper buttons ===== */
:root{--line:#4a3594;--glass:rgba(36,22,90,.72);--grad:linear-gradient(100deg,#ff4fb4,#a874ff 55%,#3fe0ff)}
body{background-color:var(--night);
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,.9) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 68% 8%, rgba(255,255,255,.75) 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 85% 48%, rgba(255,255,255,.8) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 35% 72%, rgba(255,255,255,.65) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 6% 60%, rgba(255,255,255,.7) 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 94% 85%, rgba(255,255,255,.6) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 52% 38%, rgba(255,255,255,.55) 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 22% 90%, rgba(255,255,255,.7) 50%, transparent 52%),
    radial-gradient(1200px 500px at 10% -10%,#3b1a86 0,transparent 60%),
    radial-gradient(900px 500px at 100% 0,#5c1257 0,transparent 55%),
    radial-gradient(900px 700px at 50% 120%,#0f2a6b 0,transparent 60%),
    radial-gradient(700px 500px at 100% 100%,#0a3a3a 0,transparent 55%),
    radial-gradient(650px 450px at 0% 40%,#3a1a5c 0,transparent 55%);
  background-size:280px 280px,340px 340px,310px 310px,260px 260px,300px 300px,330px 330px,250px 250px,290px 290px,auto,auto,auto,auto,auto;
  background-repeat:repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
  background-attachment:fixed}
h1{letter-spacing:-.01em}
h1 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(168,116,255,.55))}
.eyebrow{color:var(--cyan)}
.brand{display:inline-block;font:800 11.5px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--night);background:var(--grad);padding:5px 11px;border-radius:999px;margin-bottom:10px;box-shadow:0 0 24px -4px rgba(255,79,180,.65)}
.fact{background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(8px)}
.notice,.tip{border-radius:12px;background:var(--glass)}
.rowlbl{display:flex;align-items:center;gap:8px}
.rowlbl::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
/* segmented day + time */
.seg{background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:5px;gap:5px}
.seg button{background:transparent;border:0;border-radius:12px;min-height:54px;transition:background .15s,color .15s}
.seg button:hover{background:rgba(255,255,255,.06)}
.seg button[aria-pressed="true"]{background:var(--grad);color:var(--night);box-shadow:0 6px 18px -6px rgba(255,79,180,.7)}
.seg.times3 button[aria-pressed="true"]{background:linear-gradient(100deg,#ffb627,#ff7a59);box-shadow:0 6px 18px -6px rgba(255,182,39,.6)}
/* chips */
.chip,.stg-row button{background:var(--glass);border:1.5px solid var(--line);border-radius:12px;min-height:40px;padding:8px 14px;transition:border-color .15s,background .15s}
.chip:hover,.stg-row button:hover{border-color:#7d6cd9}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--night);border-color:var(--ink)}
#q{border-radius:12px;background:var(--glass);border-color:var(--line);min-height:40px}
.dd{font:600 13px var(--body);color:var(--ink);background-color:var(--night2);border:1.5px solid var(--line);border-radius:12px;padding:8px 30px 8px 14px;min-height:40px;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%),linear-gradient(135deg,var(--soft) 50%,transparent 50%);background-position:calc(100% - 16px) center,calc(100% - 11px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.dd:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.dd option{background-color:var(--night2);color:var(--ink)}
.filters{background:linear-gradient(var(--night),rgba(18,10,46,.92));backdrop-filter:blur(10px)}
/* cards: gradient edge glass, background tinted and left stripe colored by genre */
.card{border:1.5px solid transparent;border-top:1.5px solid transparent;border-radius:18px;padding:16px;gap:10px;background:linear-gradient(160deg,color-mix(in srgb,var(--g) 22%,#2a1a66),color-mix(in srgb,var(--g) 10%,#1c1250)) padding-box,linear-gradient(140deg,var(--g),rgba(74,53,148,.6) 45%,rgba(74,53,148,.25)) border-box;box-shadow:0 10px 30px -18px rgba(0,0,0,.9),inset 4px 0 0 var(--g)}
.card.is-yes{background:linear-gradient(160deg,color-mix(in srgb,var(--g) 18%,#1f3a4a),#1c1250) padding-box,linear-gradient(140deg,var(--lime),var(--g)) border-box;box-shadow:0 10px 30px -14px rgba(125,255,155,.45)}
.card.is-maybe{background:linear-gradient(160deg,color-mix(in srgb,var(--g) 18%,#2a1a66),#1c1250) padding-box,linear-gradient(140deg,var(--amber),rgba(74,53,148,.5)) border-box}
.card.is-no{filter:saturate(.35)}
.card.is-no .name,.pcard.is-no h3{color:var(--soft)}
.name{font-size:18px}
.rank{background:rgba(255,255,255,.07);border-radius:999px;padding:2px 8px;color:var(--soft)}
.tag{border-radius:999px;padding:3px 9px;font-size:11.5px}
/* vote: joined segmented control, icon-only so it can share a row with the listen links */
.vote{gap:0;background:rgba(18,10,46,.6);border:1.5px solid var(--line);border-radius:12px;overflow:hidden}
.vote button{border:0;border-radius:0;background:transparent;min-height:44px;font-size:13.5px}
.vote button+button{border-left:1.5px solid var(--line)}
.vote button:hover{background:rgba(255,255,255,.06)}
/* listen buttons: icon-only squares */
.links{gap:8px}
.yt,.sp{border-radius:12px;background:transparent;color:var(--ink);border:1.5px solid;transition:background .15s,color .15s}
.yt{border-color:#ff2d55}
.yt:hover{background:#ff2d55}
.sp{border-color:#1ed760}
.sp:hover{background:#1ed760;color:#06140b}
.links a{flex:0 0 44px;width:44px;height:44px;padding:0;justify-content:center;min-height:44px}
/* vote + listen links share one row; the links group wraps below only when it won't fit (B2B cards) */
.actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;align-items:flex-start}
.actions .vote{flex:none;display:flex}
.actions .vote button{width:58px;height:44px;min-height:44px;padding:2px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.actions .vote button .vk-i{font-size:16px;line-height:1}
.actions .vote button .vk-l{font-size:10.5px;font-weight:800;letter-spacing:.01em;line-height:1}
.actions .links{flex:none}
.yt svg,.sp svg{width:20px;height:20px}
/* travel + map */
.btn{border-radius:12px;box-shadow:0 6px 16px -10px rgba(63,224,255,.8)}
.btn.alt{background:var(--glass);box-shadow:none}
.line,.time,.stage{border-radius:16px;background:var(--glass);backdrop-filter:blur(8px)}
.gmap{background:var(--glass);border-radius:20px;border-color:var(--line)}
.ginfo{border-radius:12px;background:rgba(18,10,46,.7);line-height:1.6}
/* bottom nav: glass bar */
.tabs{background:rgba(22,12,58,.86);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.tabs a{border-radius:14px}
.tabs a[aria-current="page"]{background:var(--grad);color:var(--night)}
/* top menu */
body{padding-bottom:48px}
.tabs{position:sticky;top:env(safe-area-inset-top,0px);bottom:auto;left:auto;right:auto;z-index:20;display:flex;justify-content:center;gap:6px;margin-inline:calc(-1 * max(16px, env(safe-area-inset-left,0px)));padding:8px max(16px, env(safe-area-inset-right,0px)) 8px max(16px, env(safe-area-inset-left,0px));border-top:0;border-bottom:1px solid var(--line);background:rgba(18,10,46,.88);backdrop-filter:blur(14px)}
.tabs a{flex:0 1 auto;flex-direction:row;gap:6px;min-height:38px;padding:6px 14px;font-size:13px;border:1.5px solid var(--line)}
.tabs a span{font-size:15px}
.tabs a[aria-current="page"]{border-color:transparent}
.filters{top:calc(env(safe-area-inset-top,0px) + 55px)}
header{padding-block:18px 14px}
.brand{font-size:13px;padding:6px 13px}
h1{font-size:clamp(26px,6.4vw,50px);margin:10px 0 6px}
.seg.times3{grid-template-columns:repeat(4,1fr)}
.seg.times3 button{font-size:13px;padding:8px 2px}
.seg.times3 button[data-t="party"][aria-pressed="true"]{background:linear-gradient(100deg,#a874ff,#3fe0ff);box-shadow:0 6px 18px -6px rgba(63,224,255,.6)}
.pcard{border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:9px;min-width:0;border:1.5px solid transparent;background:linear-gradient(160deg,#241a70,#141045) padding-box,linear-gradient(140deg,var(--pc),rgba(74,53,148,.35)) border-box}
.pcard .pt{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.pcard h3{font-family:var(--display);font-size:17px;margin:0;line-height:1.2;overflow-wrap:anywhere}
.pcard .meta{font-size:14px;color:var(--soft);display:grid;gap:2px}
.pcard .meta b{color:var(--ink)}
.badge{flex:none;font-size:11px;font-weight:800;letter-spacing:.04em;padding:3px 9px;border-radius:999px;background:var(--pc);color:var(--night)}
.badge.unoff{background:transparent;color:var(--soft);border:1.5px dashed var(--soft)}
.lineup{display:flex;flex-wrap:wrap;gap:6px}
.lineup a{font-size:13px;font-weight:700;color:var(--ink);text-decoration:none;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid var(--line)}
.lineup a.main{border-color:var(--pc)}
.pcard.is-yes{background:linear-gradient(160deg,#1f3a4a,#141045) padding-box,linear-gradient(140deg,var(--lime),var(--pc)) border-box}
.pcard.is-no{filter:saturate(.35)}
.pnote{font-size:13px;color:var(--soft);margin:0}
.thu{grid-column:1/-1;font:700 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin-top:6px}
@media (max-width:600px){.tabs a{padding:6px 10px;font-size:12.5px}.seg.times3 button small{font-size:10.5px}}
/* ===== v3: design critique + accessibility pass ===== */
:root{--line:#8a78e6;--line-soft:#3b2a7a}
.rowlbl::after{background:linear-gradient(90deg,var(--line-soft),transparent)}
:focus-visible{outline:3px solid var(--cyan)!important;outline-offset:2px}
.stg:focus{outline:none}
.stg:focus-visible .ring{stroke:#3fe0ff;stroke-width:5}
.tabs{border-bottom-color:var(--line-soft)}
.tabs a{min-height:44px}
.intro-help{width:44px;min-height:44px}
.chip,.stg-row button,#q,.dd{min-height:44px}
.flink{display:inline-flex;align-items:center;min-height:44px;padding-inline:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tally{gap:6px}.tally span,.tally button{padding:5px 10px;font-size:12.5px}
.mix h2{font-size:12.5px}.legend{font-size:12px}
/* sticky control bar */
.ctrl{position:sticky;top:calc(env(safe-area-inset-top,0px) + 61px);z-index:15;margin-inline:calc(-1 * max(16px, env(safe-area-inset-left,0px)));padding:8px max(16px, env(safe-area-inset-right,0px)) 8px max(16px, env(safe-area-inset-left,0px));background:rgba(18,10,46,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft);margin-top:14px}
.ctrl .seg{margin-top:0}
.ctrl .seg button{min-height:46px;padding:6px 2px;font-size:13px}
.ctrl .seg button small{font-size:10.5px}
.ctrlrow{display:flex;gap:6px;margin-top:6px}
.ftoggle,.vtoggle{min-height:44px;border-radius:12px;background:var(--glass);border:1.5px solid var(--line);color:var(--ink);font:700 13.5px var(--body);padding:8px 12px;cursor:pointer;display:flex;align-items:center;gap:6px}
.ftoggle{flex:1;min-width:0;text-align:left}
.ftoggle .fsum{color:var(--amber);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ftoggle .chev{margin-left:auto;color:var(--soft)}
.ftoggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.fpanel:not(.open){display:none}
.fpanel{max-height:55vh;overflow-y:auto;padding-bottom:4px}
.fpanel .filters{position:static;top:auto;background:none;backdrop-filter:none;border:0;padding:6px 0 0;margin:0;flex-wrap:wrap;overflow:visible}
.estnote{margin:10px 0 0}
/* one selected style (stage chips keep their stage colors) */
.seg.times3 button[aria-pressed="true"],.seg.times3 button[data-t="party"][aria-pressed="true"]{background:var(--grad);box-shadow:0 6px 18px -6px rgba(255,79,180,.7)}
.chip[aria-pressed="true"],.vtoggle[aria-pressed="true"]{background:var(--grad);color:var(--night);border-color:transparent}
/* card: time + stage right under the name */
.card .name{margin:0;font-family:var(--display);font-weight:700;font-size:18px;line-height:1.2}
.when2{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-weight:700;font-size:14px;color:var(--amber);font-variant-numeric:tabular-nums}
.when2 .sdot{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.when2 .sdot i{width:10px;height:10px;border-radius:50%;background:var(--sc);display:inline-block}
.xbtn{display:none;min-width:44px;min-height:44px;border-radius:12px;background:transparent;border:1.5px solid var(--line);color:var(--ink);font-size:16px;cursor:pointer}
.top{align-items:center}
/* compact list */
.grid.compact{grid-template-columns:1fr;gap:8px}
.grid.compact .card{padding:10px 12px;gap:8px;border-radius:14px}
.grid.compact .card:not(.open) .tags,.grid.compact .card:not(.open) .vibe,.grid.compact .card:not(.open) .links{display:none}
.grid.compact .rank{display:none}
.grid.compact .xbtn{display:inline-flex;align-items:center;justify-content:center}
.grid.compact .card.open .xbtn{transform:rotate(180deg)}
.grid.compact .name{font-size:16px}
/* contrast */
.yt:hover{background:#d6003b;border-color:#d6003b}
.btn.alt{border-color:var(--line)}
.pcard .sub{font-size:13.5px;font-weight:700;color:var(--soft);margin-top:2px}
.sec h1.vh{font-family:var(--display);font-size:clamp(22px,5vw,30px);font-weight:700;margin:22px 0 6px;line-height:1.2}
.sec h2.hs{font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:24px 0 8px;color:var(--soft)}
details summary{min-height:44px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== day themes (Oct 26): each festival day has its own colors. --grad drives every highlight
   (Day / Time pill, the title's "Rave", selected chips), so switching days re-themes the app.
   Dark text sits on all of these, so every stop stays light enough for AA. ===== */
body[data-day="fri"]{--grad:linear-gradient(100deg,#ff4fb4,#ff7a59 55%,#ffb627);--day-glow:rgba(255,122,89,.6);--day-line:#ff7a59;
  --day-orb:radial-gradient(circle at 32% 28%, rgba(255,214,150,.9), rgba(255,122,89,.55) 35%, rgba(255,79,180,.35) 60%, transparent 72%)}
body[data-day="sat"]{--grad:linear-gradient(100deg,#ff4fb4,#a874ff 55%,#3fe0ff);--day-glow:rgba(168,116,255,.6);--day-line:#a874ff;
  --day-orb:radial-gradient(circle at 32% 28%, rgba(185,255,210,.9), rgba(63,224,255,.55) 35%, rgba(94,58,219,.35) 60%, transparent 72%)}
body[data-day="sun"]{--grad:linear-gradient(100deg,#3fe0ff,#7dff9b 55%,#ffcc66);--day-glow:rgba(63,224,255,.6);--day-line:#3fe0ff;
  --day-orb:radial-gradient(circle at 32% 28%, rgba(255,240,170,.9), rgba(125,255,155,.5) 35%, rgba(63,224,255,.35) 60%, transparent 72%)}
body[data-day] header::before{background:var(--day-orb)}
body[data-day] .seg-pill{box-shadow:0 6px 18px -6px var(--day-glow)}
body[data-day] .gmap-top{border-color:var(--day-line);box-shadow:0 0 34px -16px var(--day-glow)}

/* ===== My Plan (Oct 26): your day in time order ===== */
.planbtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 14px;border-radius:999px;background:var(--grad);color:var(--night);font:800 13px var(--body);text-decoration:none;box-shadow:0 6px 18px -8px var(--day-glow,rgba(255,79,180,.7))}
.plan .seg.days{margin-top:6px}
.plan-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin:12px 0 6px}
.plan-sum{margin:0;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.plan-maybe{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;color:var(--soft);cursor:pointer}
.plan-maybe input{width:20px;height:20px;accent-color:var(--amber)}
.plan-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-width:640px}
.plan-item{display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:start;padding:12px 14px;border-radius:16px;background:var(--glass);border:1.5px solid var(--line-soft);box-shadow:inset 4px 0 0 var(--sc)}
.plan-item.is-maybe{border-style:dashed}
.plan-item.is-now{border-color:var(--lime);box-shadow:inset 4px 0 0 var(--sc),0 0 26px -12px var(--lime)}
.pt-time{font-weight:800;font-size:14px;color:var(--amber);font-variant-numeric:tabular-nums;line-height:1.3}
.pt-body{min-width:0}
.pt-name{margin:0;font-family:var(--display);font-weight:700;font-size:16px;line-height:1.2;overflow-wrap:anywhere}
.pt-stage{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:4px;font-size:13.5px;font-weight:700;color:var(--ink)}
.pt-stage i{width:10px;height:10px;border-radius:50%;background:var(--sc);display:inline-block}
.pt-pick{font-size:12px;font-weight:800;color:var(--soft)}
.is-yes .pt-pick{color:var(--lime)}
.is-maybe .pt-pick{color:var(--amber)}
.pt-flags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pf{font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px}
.pf.now{background:var(--lime);color:var(--night)}
.pf.next{background:var(--cyan);color:var(--night)}
.pf.clash{background:transparent;color:var(--red);border:1.5px solid var(--red)}
.plan-move{font-size:12.5px;font-weight:700;color:var(--soft);padding:0 0 0 104px}
.plan-move::before{content:"\2193  "}
.plan-after{margin-top:10px;font:700 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.plan-empty{padding:16px;border-radius:16px;background:var(--glass);border:1.5px dashed var(--line);color:var(--soft);max-width:640px}
.plan-empty b{color:var(--ink)}
@media (max-width:420px){.plan-item{grid-template-columns:78px 1fr;gap:10px;padding:10px 12px}.plan-move{padding-left:90px}.pt-time{font-size:13px}}
/* five items in the top menu: drop the icons on small phones so everything fits */
@media (max-width:480px){.tabs{gap:4px}.tabs a{padding:6px 9px;font-size:12px}.tabs a span{display:none}}

/* ===== stage logo (Oct 26): sunrise on the LED screen, then day-colored lasers that sweep and cross ===== */
.titlerow{display:flex;align-items:center;gap:12px}
.titletext{min-width:0}
.titlerow h1{margin-top:0}
.brandmark{flex:none;width:clamp(72px,20vw,96px);aspect-ratio:1;padding:0;border:0;border-radius:22%;overflow:hidden;background:#160c3a;cursor:pointer;box-shadow:0 10px 30px -14px var(--day-glow,rgba(168,116,255,.6))}
.brandmark svg{display:block;width:100%;height:100%}
.rp-em{transform-box:view-box}
.rp-l{transform-origin:150px 318px}.rp-c{transform-origin:256px 300px}.rp-r{transform-origin:362px 318px}
.rp-run .rp-screen{animation:rpRise .9s cubic-bezier(.2,.9,.3,1.1) both}
.rp-run .rp-grow{animation:rpGrow .55s cubic-bezier(.34,1.56,.64,1) both}
.rp-run .rp-l .rp-grow{animation-delay:.75s}.rp-run .rp-c .rp-grow{animation-delay:.95s}.rp-run .rp-r .rp-grow{animation-delay:1.15s}
.rp-run .rp-l{animation:rpSwayL 3.2s ease-in-out 1.8s infinite alternate}
.rp-run .rp-r{animation:rpSwayR 3.2s ease-in-out 1.8s infinite alternate}
.rp-run .rp-c{animation:rpSwayC 2.6s ease-in-out 1.8s infinite alternate}
.rp-run .rp-spots{animation:rpFade .6s ease-out .2s both}
.rp-fog1{animation:rpDrift 9s ease-in-out infinite alternate}
.rp-fog2{animation:rpDrift 11s ease-in-out -4s infinite alternate-reverse}
@keyframes rpRise{from{transform:translateY(120px)}to{transform:none}}
@keyframes rpGrow{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes rpFade{from{opacity:0}to{opacity:.07}}
@keyframes rpSwayL{from{transform:rotate(-10deg)}to{transform:rotate(12deg)}}
@keyframes rpSwayR{from{transform:rotate(10deg)}to{transform:rotate(-12deg)}}
@keyframes rpSwayC{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
@keyframes rpDrift{from{transform:translateX(-26px)}to{transform:translateX(26px)}}
@media (prefers-reduced-motion:reduce){.brandmark *{animation:none!important}}
/* the glowing orb behind the header washed out the title and tagline; the stage logo carries the color now */
header::before,body[data-day] header::before{display:none}

/* picks row under the map (Oct 26): My Plan and Link phones side by side, then the four counts in one even row */
.picksrow{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"plan link" "tally tally";gap:8px;margin-top:12px}
.picksrow .planbtn{grid-area:plan;justify-content:center}
.picksrow .linkbtn{grid-area:link;justify-content:center;margin:0;min-height:44px}
.picksrow:has(#linkBtn[hidden]) .planbtn{grid-column:1/-1}
.picksrow .tally{grid-area:tally;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:0;padding:4px;border-radius:16px;background:var(--glass);border:1px solid var(--line-soft)}
.picksrow .tally button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:50px;padding:4px 2px;border-radius:12px;background:transparent;border:1.5px solid transparent}
.picksrow .tally button[aria-pressed="true"]{border-color:currentColor;background:rgba(255,255,255,.05)}
.picksrow .tally .tn{font:800 18px/1.1 var(--display);font-variant-numeric:tabular-nums}
.picksrow .tally .tl{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:700;white-space:nowrap}
.picksrow .tally .tl .ic{width:.95em;height:.95em}
@media (max-width:360px){.picksrow .tally .tl .ic{display:none}}
/* the old tally styled every span as a pill; the number and label inside a count are plain text */
.picksrow .tally button span{min-height:0;padding:0;border:0;border-radius:0;background:none}
/* one line under the map (Oct 26): a compact My Plan button, then the four counts; Link phones (linked phones only) wraps below */
.picksrow{grid-template-columns:auto 1fr;grid-template-areas:"plan tally" "link link";align-items:stretch}
.picksrow:has(#linkBtn[hidden]) .planbtn{grid-column:auto}
.picksrow .planbtn{flex-direction:column;justify-content:center;gap:2px;min-height:58px;padding:6px 12px;border-radius:16px;font-size:12.5px;line-height:1.1;white-space:nowrap}
.picksrow .planbtn .ic{width:1.35em;height:1.35em}
.picksrow .tally{gap:2px;padding:3px}
.picksrow .tally button{min-height:50px;padding:3px 1px}
.picksrow .tally .tl{font-size:11px}
@media (max-width:400px){.picksrow .tally .tl .ic{display:none}.picksrow .tally .tn{font-size:17px}}

/* the day's sound sits right under the day switch (Oct 26), compact so the map stays near the top */
.lineup-top .mix{margin-top:12px}
.lineup-top .mix h2{margin:0 0 6px}
.lineup-top .bar{height:14px;border-radius:999px;background:var(--glass)}
.lineup-top .bar div{min-width:0}
.lineup-top .bar div+div{box-shadow:inset 2px 0 0 #160c3a}
.lineup-top .legend{gap:4px 12px;margin-top:6px;font-size:12px}
.lineup-top .legend i{width:8px;height:8px;border-radius:50%}

/* add to home screen bar (Oct 26): pinned to the bottom on phone browsers, above Safari's toolbar, never in the app */
body.has-a2hs{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.a2hs{position:fixed;z-index:40;left:max(10px, env(safe-area-inset-left,0px));right:max(10px, env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:10px;max-width:520px;margin-inline:auto;padding:8px 8px 8px 12px;border-radius:18px;
  background:rgba(29,17,69,.94);backdrop-filter:blur(14px);border:1.5px solid rgba(63,224,255,.55);box-shadow:0 12px 30px -12px rgba(0,0,0,.9),0 0 24px -10px rgba(63,224,255,.7)}
.a2hs[hidden]{display:none!important}
.a2hs-ico{flex:none;color:var(--cyan);display:flex}
.a2hs p{margin:0;flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.a2hs p b{font-size:14px}
.a2hs p span{font-size:12.5px;color:var(--soft)}
.a2hs .a2hs-how{flex:none;min-width:64px;padding:10px 14px}
.a2hs-x{flex:none;width:44px;height:44px;border-radius:12px;border:0;background:transparent;color:var(--soft);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px}
.a2hs-steps{margin:0 0 14px;padding-left:22px;display:grid;gap:10px;color:var(--soft);font-size:15px;line-height:1.45}
.a2hs-steps b,.a2hs-note b{color:var(--ink)}
.a2hs-steps li::marker{color:var(--cyan);font-weight:800}
.a2hs-note{margin:0 0 14px;font-size:13.5px;color:var(--soft);line-height:1.45}
#introA2hsSteps{display:block;margin-top:4px}

/* one-line confirmation after opening #notrack or #track */
.toast{position:fixed;z-index:60;left:50%;transform:translateX(-50%);top:calc(64px + env(safe-area-inset-top,0px));margin:0;max-width:calc(100% - 32px);width:max-content;
  padding:10px 16px;border-radius:14px;background:rgba(29,17,69,.96);border:1.5px solid rgba(63,224,255,.55);color:var(--ink);font-weight:600;font-size:14px;box-shadow:0 12px 30px -12px rgba(0,0,0,.9)}