/* Yinzider river prototype. Dev-only; never ships (Firebase ignores mockups/**, Docker excludes ui/**). */
.rv{--paper:#F4F2F0;--ink:#26292C;--muted:#5D6266;--steel:#23557A;--gold:#E1AC36;--gold-deep:#B98A22;--red:#C23A2B;--water:#196CB2;--rim:#F8F8F6;--felt:url(assets/river-felt-flare.webp);
    font-family:Overpass,sans-serif;display:grid;grid-template-columns:minmax(330px,380px) minmax(0,340px);gap:34px;align-items:start;justify-content:center;padding:14px 16px}
@media (max-width:860px){.rv{grid-template-columns:minmax(330px,380px)}.rv .side{display:none}}
/* on a real phone the page is the whole screen */
@media (max-width:600px){.rv .ph{position:fixed;inset:0;max-width:none;height:auto;border-radius:0;box-shadow:none;z-index:1000}}
.ph{position:relative;width:100%;max-width:375px;height:780px;border-radius:26px;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.22);background:var(--paper)}
.scr{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.scr::-webkit-scrollbar,.vdeck::-webkit-scrollbar,.vclips::-webkit-scrollbar,.stalls::-webkit-scrollbar{display:none}
/* the header art; the bridge sticks to the top once it scrolls past */
.dive{position:relative;z-index:1}
.stage{position:sticky;top:0;height:var(--stage-h,780px);overflow:hidden;background:var(--paper)}
.hd{position:absolute;top:0;left:0;width:100%;height:auto;transform-origin:50.275% 100%;will-change:transform,opacity;z-index:2}

/* one bridge: it sits under the header art, then sticks to the top over the feed */
.span{position:sticky;top:0;z-index:5;height:var(--span-h,70px)}
.gantry{position:absolute;left:0;right:0;top:0;--u:0;--k:1;--x:1;transform:translateY(var(--gy,0px))}
.bridge{position:relative;padding:calc(15px + 18px*var(--u)) 8px calc(7px + 4px*var(--u));border-bottom:4px solid var(--gold);box-shadow:0 2px 0 var(--gold-deep);transition:box-shadow .2s}
.rv{--b:9px;--edge:var(--paper)}
.rv.rf{--b:28px;--edge:#4E7E33}
.bridge::before{content:"";position:absolute;inset:0;z-index:0}
.bridge::before{opacity:var(--k);
  background:linear-gradient(90deg,var(--edge) 0 var(--b),var(--rim) var(--b) calc(var(--b) + 3px),transparent calc(var(--b) + 3px) calc(100% - var(--b) - 3px),var(--rim) calc(100% - var(--b) - 3px) calc(100% - var(--b)),var(--edge) calc(100% - var(--b))),var(--felt) center/66px auto,var(--water)}
.bridge .arch,.bridge .lanes{z-index:1}
.span.stuck .bridge{box-shadow:0 2px 0 var(--gold-deep),0 8px 14px -6px rgba(38,41,44,.45)}
.bridge .sg{flex:var(--u) 0 auto;font-size:calc(13px + 2px*var(--u));padding:calc(7px + 9px*var(--u)) 9px calc(5px + 9px*var(--u))}
.bridge .pill,.bridge .chip{font-size:calc(12px + 2px*var(--u));padding:calc(7px + 5px*var(--u)) calc(10px + 2px*var(--u)) calc(5px + 5px*var(--u))}
.bridge .sg small{font-size:calc(10px + 2px*var(--u));margin-top:calc(3px + 3px*var(--u))}
.arch{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* one scrolling row: open options first, folded chips at its far end */
.lanes{position:relative;display:flex;gap:6px;align-items:flex-end;min-height:40px}
.opts{display:flex;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.opts .grp{flex:1 0 auto}
.opts .grp.done{flex:none}
.opts::-webkit-scrollbar{display:none}
.opts.more{-webkit-mask:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.grp{display:flex;gap:6px;flex:none}
.grp.done{margin-left:auto}
.grp.done ~ .grp.done{margin-left:0}
/* signs match the intro gantry: PennDOT green with a white border; the chosen one turns exit-tab yellow */
.rv{--sign-hi:#097240;--sign:#006747;--sign-lo:#005036;--exit:#FFD200}
.sg,.pill{background:linear-gradient(180deg,var(--sign-hi) 0%,var(--sign) 52%,var(--sign-lo) 100%);color:#fff;box-shadow:0 0 0 1.5px var(--sign-lo),inset 0 1px 0 rgba(255,255,255,.3)}
.sg{flex:none;font:inherit;cursor:pointer;border:2.5px solid rgba(255,255,255,.95);border-radius:7px;padding:7px 9px 5px;font-weight:900;font-size:13px;line-height:1;text-align:center;min-width:96px}
.sg small{display:block;font-weight:700;font-size:10px;margin-top:3px;opacity:.9}
.pill,.chip{flex:none;font:inherit;cursor:pointer;border:1.5px solid rgba(255,255,255,.95);border-radius:5px;padding:7px 10px 5px;font-size:12px;line-height:1.1;white-space:nowrap}
.pill{font-weight:800}
.sg.on,.pill.on,.chip{background:var(--exit);color:#111;font-weight:900;box-shadow:0 0 0 1.5px #B89600}
:is(.sg,.pill,.chip,.chair,.playbtn,.vclose,.lotclose,.share,.dibsbar,.tact):focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* the count rides on the water at the top of the feed */
.feedcount{display:none;margin:0 0 12px;text-align:center;color:#fff;font-weight:800;font-size:13px;text-shadow:0 1px 2px rgba(9,40,80,.6)}
.m-down .feedcount{display:block}
/* river feel: tree banks scroll with the page, the water keeps moving, boats ride in lanes */
/* the feed carries its own banks and water so both can fade in from the art above */
.rv.rf .feed{margin:0;padding-left:calc(12px + var(--b));padding-right:calc(12px + var(--b));background:none;box-shadow:none;animation:none}
.rv.rf .feed::before,.rv.rf .feed::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 var(--fade,0px));mask:linear-gradient(180deg,transparent 0,#000 var(--fade,0px))}
.rv.rf .feed::before{left:var(--b);right:var(--b);background:var(--felt) center top/66px auto,var(--water);animation:current 6s linear infinite}
.rv.rf .feed::after{background:url(assets/bank-l.webp) left top/var(--b) auto repeat-y,url(assets/bank-r.webp) right top/var(--b) auto repeat-y}
.m-down .feed{--fade:20px}
/* over the art, the bridge's lower half already carries the wide river and its banks */
.m-down .span:not(.stuck) .bridge::before{-webkit-mask:linear-gradient(180deg,transparent 0 30%,#000 64%);mask:linear-gradient(180deg,transparent 0 30%,#000 64%)}
/* downstream water is sampled from the art itself so the two blues match */
.rv.rf .bridge::before{background:url(assets/bank-l.webp) left top/var(--b) auto repeat-y,url(assets/bank-r.webp) right top/var(--b) auto repeat-y,var(--felt) center/66px auto,var(--water)}
@keyframes current{from{background-position:center 0}to{background-position:center 66px}}
.rv.rf .boat{margin-bottom:34px}
.rv.rf .river{width:92%}.rv.rf .taxi{width:80%}.rv.rf .duck{width:82%}.rv.rf .tiki{width:84%}
.rv.rf .feed>article.boat:nth-of-type(odd){left:-3%}
.rv.rf .feed>article.boat:nth-of-type(even){left:3%}
@media (prefers-reduced-motion:reduce){.rv.rf .feed::before{animation:none}}
/* ---------- event detail: slides in from the right, the river stays visible at the left ---------- */
.toast{z-index:60}
.dsheet{position:absolute;inset:0;z-index:40}
.dsheet[hidden]{display:none}
.dshore{position:absolute;inset:0;border:0;padding:0;cursor:pointer;background:rgba(6,40,80,.38);opacity:0;transition:opacity .28s}
.dsheet.open .dshore{opacity:1}
.dpanel{position:absolute;top:0;bottom:0;right:0;left:22px;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);
  border-radius:16px 0 0 16px;overflow:hidden;box-shadow:-12px 0 28px rgba(0,0,0,.28);transform:translateX(104%);transition:transform .32s cubic-bezier(.2,.8,.2,1);outline:none}
.dsheet.open .dpanel{transform:none}
.dsheet.drag .dpanel{transition:none}
.dtop{display:flex;align-items:center;gap:8px;padding:9px 10px 9px 12px;background:var(--paper);border-bottom:1px solid rgba(38,41,44,.12)}
.dclose{font:inherit;font-weight:800;font-size:14px;border:0;border-radius:999px;padding:8px 12px 6px;cursor:pointer;background:var(--ink);color:#fff}
.dfull{font-weight:800;font-size:13px;color:var(--steel);white-space:nowrap}
.dbody{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.dpad{padding:16px 18px 4px}
.dpanel h2{margin:0;font-weight:900;font-size:28px;line-height:1.08;letter-spacing:-.01em}
.dwhen{margin:6px 0 0;font-weight:800;font-size:16px}
.dvenue{display:flex;align-items:center;gap:8px;margin-top:10px;font-weight:700;font-size:15px}
.dvenue .vlogo{height:28px;min-width:28px}
.dpanel .tags{margin-top:10px}
.dsec{padding:18px 18px 4px}
.dsec h3{margin:0 0 8px;font-weight:900;font-size:17px}
.dsec p{margin:0 0 10px;font-size:16px;line-height:1.55;max-width:62ch}
.dsec ul{margin:0;padding:0;list-style:none}
.dmore li{padding:10px 0;border-top:1px solid rgba(38,41,44,.12)}
.dmore li:first-child{border-top:0;padding-top:2px}
.dmore a{font-weight:800;color:var(--ink)}
.dmore span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.dwhy li{position:relative;padding-left:16px;margin:0 0 6px;font-size:15px}
.dwhy li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.dlinks{display:flex;flex-wrap:wrap;gap:8px 16px;font-weight:800;font-size:15px}
.dlinks a{color:var(--steel)}
.dprice{font-weight:900;font-size:22px;margin:0 0 4px}
.dclips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.dclips::-webkit-scrollbar{display:none}
.dclip{flex:none;width:150px;font:inherit;text-align:left;border:0;padding:0;background:none;cursor:pointer;color:var(--ink)}
.dclip i{position:relative;display:block;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#111}
.dclip i img{width:100%;height:100%;object-fit:cover;display:block}
.dclip i::after{content:"";position:absolute;right:6px;bottom:6px;width:26px;height:26px;border-radius:50%;background:var(--red) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 5l8 5-8 5z' fill='white'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:0 0 0 2px #fff}
.dclip b{display:block;font-size:13px;margin-top:5px;line-height:1.25}
.dclip:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:8px}
.dcount{font-weight:700;font-size:13px;color:var(--muted);margin-left:4px}
.dclip small{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.dsong i{display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,#1C2B3C,#0D1620)}
.dsong .disc{width:58px;height:58px;border-radius:50%;background:radial-gradient(circle,var(--gold) 0 9px,#111 9.5px 13px,#2A2A2A 13.5px 15px,#151515 15.5px 22px,#262626 22.5px 24px,#111 24.5px)}
.dsong[aria-pressed="true"] .disc{animation:spin 2.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.dsong .dprog{position:absolute;left:8px;right:8px;bottom:8px;height:4px;border-radius:2px;background:rgba(255,255,255,.2)}
.dsong .dprog span{display:block;height:100%;width:0;border-radius:2px;background:var(--gold)}
.dsong i::after{background-color:var(--steel)}
.dsong[aria-pressed="true"] i::after{background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 5h3v10H6zM11 5h3v10h-3z' fill='white'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){.dsong[aria-pressed="true"] .disc{animation:none}}
.dplayer{aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000;margin-bottom:10px}
.dplayer{position:relative}
.dplayer iframe{width:100%;height:100%;border:0;display:block}
.dytlink{position:absolute;left:8px;bottom:8px;padding:5px 9px 3px;border-radius:6px;font-weight:800;font-size:12px;color:#fff;background:rgba(0,0,0,.72);text-decoration:none}
.dytlink:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.dplayer[hidden]{display:none}
.dbar{display:flex;align-items:center;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid rgba(38,41,44,.14)}
.dbar .chair{margin:0}
.dbar .dshare{font:inherit;font-weight:800;font-size:14px;border:0;border-radius:10px;padding:12px 12px 10px;cursor:pointer;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(38,41,44,.25)}
.dbar .dgo{flex:1;display:block;text-align:center;font-weight:900;font-size:15px;text-decoration:none;border-radius:10px;padding:13px 10px 11px;background:var(--ink);color:#fff}
:is(.dclose,.dlooks button,.dshare,.dgo,.dfull):focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* look 3, ticket: one continuous admission ticket, perforated between sections, on the river */
.look-ticket .dbody{background:var(--felt) center/66px auto,var(--water);--tk:#FBF7EC}
.look-ticket .dstrip{position:relative;margin:22px 14px 26px;background:var(--tk);border-radius:4px;filter:drop-shadow(0 7px 0 rgba(4,40,80,.35))}
/* torn edges top and bottom */
.look-ticket .dstrip::before,.look-ticket .dstrip::after{content:"";position:absolute;left:0;right:0;height:9px;
  background:linear-gradient(-45deg,var(--tk) 6px,transparent 0),linear-gradient(45deg,var(--tk) 6px,transparent 0);background-size:12px 12px}
.look-ticket .dstrip::before{top:-8px;background-position:left bottom;transform:scaleY(-1)}
.look-ticket .dstrip::after{bottom:-8px;background-position:left top}
.look-ticket .dhero{padding:14px 14px 0}
.look-ticket .dart img{display:block;width:100%;max-height:40vh;object-fit:contain;border-radius:3px;background:#111}
.look-ticket .dart.logo img{background:#fff;max-height:110px}
.look-ticket .dstub{padding:14px 4px 16px}
.look-ticket .tserial{margin:0 0 4px;font-weight:800;font-size:12px;color:var(--red);letter-spacing:.04em}
.look-ticket h2{font-size:28px}
.look-ticket .trow{display:flex;align-items:stretch;gap:12px;margin-top:12px}
.look-ticket .tdate{display:flex;align-items:center;gap:8px;padding:6px 12px 4px 10px;border-radius:8px;background:var(--ink);color:#fff}
.look-ticket .tdate b{font-size:38px;font-weight:900;line-height:1}
.look-ticket .tdate span{font-weight:800;font-size:13px;line-height:1.2}
.look-ticket .tdate.trun{padding:8px 12px}
.look-ticket .tfacts{display:flex;gap:16px;margin:0;align-items:center}
.look-ticket .tfacts dt{font-size:12px;font-weight:800;color:var(--muted)}
.look-ticket .tfacts dd{margin:1px 0 0;font-weight:900;font-size:18px}
.look-ticket .tvenue{display:flex;align-items:center;gap:8px;margin-top:12px;font-weight:800;font-size:15px}
.look-ticket .tvenue .vlogo{height:28px;min-width:28px}
/* each section is a stub along the same ticket, torn off along a perforation */
.look-ticket .dsec{position:relative;padding:22px 18px 12px}
.look-ticket .dsec::before{content:"";position:absolute;left:16px;right:16px;top:0;border-top:2.5px dashed rgba(38,41,44,.28)}
.look-ticket .dsec::after{content:"";position:absolute;left:-11px;right:-11px;top:-11px;height:22px;pointer-events:none;
  background:radial-gradient(circle at 11px 11px,var(--water) 10px,transparent 10.5px) left/22px 22px no-repeat,radial-gradient(circle at 11px 11px,var(--water) 10px,transparent 10.5px) right/22px 22px no-repeat}
.look-ticket .dfare .frow{background:var(--tk)}
.look-ticket .dfare .fdeal{background:#FFEFB0}
.look-ticket .dfare .fboard{box-shadow:inset 0 0 0 1.5px rgba(38,41,44,.22)}
.look-ticket .dbar .dgo{background:var(--red)}
/* tickets: venue first, resale only when it undercuts */
.fboard{margin:0 0 6px;padding:0;list-style:none;border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 1.5px rgba(38,41,44,.18)}
.frow{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:11px 12px;background:#fff}
.frow+.frow{border-top:1.5px solid rgba(38,41,44,.12)}
.fwho b{display:block;font-size:15px}
.fwho small{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.fprice{font-weight:900;font-size:20px;text-align:right;line-height:1.1}
.fprice em{display:block;font-style:normal;font-weight:800;font-size:12px;color:#1D6B33}
.fbuy{font-weight:900;font-size:13px;text-decoration:none;padding:8px 11px 6px;border-radius:8px;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(38,41,44,.3)}
.fdeal{background:#FFF6D1}
.fdeal .fbuy{background:var(--ink);color:#fff;box-shadow:none}
.fnote{font-size:13px !important;line-height:1.45 !important;color:var(--muted);margin:6px 0 4px !important}
.fsample{display:inline-block;vertical-align:2px;margin-left:6px;padding:2px 7px 1px;border-radius:999px;font-size:11px;font-weight:900;color:#5A4500;background:#FFE58A}
.fbuy:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.dpanel,.dshore{transition:none}}

/* the tester: pick a layout and river feel */
.feed{position:relative;z-index:3;margin:0 var(--b);padding:14px 12px 96px;overflow:hidden;background:var(--felt) center top/66px auto,var(--water);box-shadow:inset 3px 0 0 var(--rim),inset -3px 0 0 var(--rim)}

/* ---------- boats, seen from above, bows upstream ---------- */
.boat{position:relative;margin:0 auto 44px;color:var(--ink)}
.boat::after{content:"";position:absolute;left:-25%;right:-25%;top:calc(100% - 4px);height:40px;pointer-events:none;
  background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M86 0 C70 14 42 27 8 38 M114 0 C130 14 158 27 192 38' fill='none' stroke='white' stroke-opacity='.5' stroke-width='2' stroke-linecap='round' stroke-dasharray='12 7'/%3E%3Cpath d='M94 2 C87 12 78 21 64 30 M106 2 C113 12 122 21 136 30' fill='none' stroke='white' stroke-opacity='.3' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center top/100% 100% no-repeat}
.hull{position:relative}
.felt{background-image:radial-gradient(rgba(0,0,0,.06) 1px,transparent 1.5px);background-size:4px 4px}
.stitch::before{content:"";position:absolute;inset:6px;border:1.5px dashed rgba(255,255,255,.6);border-radius:inherit;pointer-events:none}
.lift{box-shadow:3px 7px 0 rgba(8,52,110,.38)}
.t{font-weight:900;font-size:16px;line-height:1.12}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px}
.head{display:flex;align-items:flex-start;gap:10px}
.head .t{flex:1;padding-top:3px}
.head .chair{margin-top:-2px}
.px{font-weight:800;font-size:13px;color:var(--steel);line-height:1.15}

/* venue line: logo badge, venue, time */
.venue{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:12px;line-height:1.25;color:var(--muted)}
.vlogo{flex:none;display:grid;place-items:center;height:24px;min-width:24px;max-width:64px;padding:2px;border-radius:5px;background:#fff;box-shadow:inset 0 0 0 1px rgba(38,41,44,.16);overflow:hidden}
.vlogo img{max-height:20px;max-width:60px;object-fit:contain;display:block}
.vlogo.dark{background:var(--ink)}
.vlogo.mono{width:24px;font-weight:900;font-size:10px;letter-spacing:.02em;color:#fff;background:var(--steel);box-shadow:none}
.vlogo.sm{height:18px;min-width:18px;max-width:40px;border-radius:4px}
.vlogo.sm img{max-height:14px;max-width:36px}
.vlogo.sm.mono{width:18px;font-size:8px}

/* event tags */
.tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.tags span{font-size:10.5px;font-weight:700;line-height:1;padding:4px 6px 3px;border-radius:4px;background:rgba(38,41,44,.06);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(38,41,44,.2)}
.tags span.age{background:var(--ink);color:#fff;box-shadow:none}
.tags span.free{background:#2E7D4F;color:#fff;box-shadow:none}

/* dibs is a Pittsburgh parking chair */
.chair{flex:none;margin-left:auto;width:44px;height:44px;border-radius:10px;border:0;cursor:pointer;display:grid;place-items:center;color:#EBD27A;background:#3B3F43;box-shadow:inset 0 0 0 1.5px #26292C}
.chair svg{width:32px;height:32px}
.chair[aria-pressed="true"]{color:var(--ink);background:var(--gold);box-shadow:inset 0 0 0 1.5px var(--gold-deep);--chair-fill:#FBFAF6}
.chair.sm{width:36px;height:36px}.chair.sm svg{width:26px;height:26px}

/* event media: the picture shows first; a play button opens the video deck */
.media{position:relative;width:100%;aspect-ratio:var(--ar,16/9);max-height:230px;border-radius:6px;overflow:hidden;background:#1E2124;box-shadow:0 0 0 3px var(--ink)}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.media .lbl{position:absolute;left:7px;top:7px;z-index:2;font-size:10px;font-weight:900;border-radius:4px;padding:3px 6px 2px;background:rgba(251,250,246,.94);color:var(--ink)}
.playbtn{position:absolute;right:10px;bottom:10px;z-index:2;width:48px;height:48px;border-radius:50%;border:3px solid #fff;background:rgba(194,58,43,.95);cursor:pointer;display:grid;place-items:center;box-shadow:0 3px 0 rgba(0,0,0,.3)}
.playbtn::before{content:"";margin-left:4px;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff}
.playbtn[hidden],.media .lbl[hidden]{display:none}

/* playing on the boat: swipe sideways between the video and the songs */
.media.live{aspect-ratio:16/9;max-height:none}
.pslides{position:absolute;inset:0;z-index:3;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;background:#111}
.pslides::-webkit-scrollbar{display:none}
.pslide{position:relative;flex:0 0 100%;scroll-snap-align:center}
.pslide img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pslide iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.songcard{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;display:grid;gap:1px;padding:7px 10px 8px;border-radius:8px;background:rgba(17,17,17,.84);color:#fff}
.songcard span{font-size:10px;font-weight:800;color:var(--gold)}
.songcard b{font-size:13px;line-height:1.2}
.prog{display:block;height:3px;margin-top:5px;border-radius:2px;overflow:hidden;background:rgba(255,255,255,.25)}
.prog i{display:block;width:0;height:100%;background:var(--gold)}
.pstrip{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:12px;font-weight:800;color:var(--ink)}
.pstrip .ptitle{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdots{display:flex;gap:4px}
.pdots i{width:7px;height:7px;border-radius:50%;background:rgba(38,41,44,.25)}
.pdots i.on{background:var(--red)}
.pnav,.pfull{flex:none;font:inherit;cursor:pointer;border:0;border-radius:7px;background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(38,41,44,.25)}
.pnav{width:30px;height:30px;font-size:18px;line-height:1}
.pfull{height:30px;padding:0 10px;font-size:12px;font-weight:900;background:var(--ink);color:#fff;box-shadow:none}
:is(.pnav,.pfull,.rbtn):focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.river .deck{padding:11px 4px 0}
.taxi .media,.duck .media,.tiki .media{margin-bottom:10px}
.taxi .media{box-shadow:0 0 0 2px var(--steel)}

/* riverboat: touring artist, picture or video on the sun deck, paddle wheel astern */
.river{width:100%}
.river .hull{background-color:#FBFAF6;border:4px solid var(--steel);border-radius:50% 50% 16px 16px/74px 74px 16px 16px;padding:0 12px 12px}
.river .hull::before{content:"";position:absolute;inset:5px;border:2px dashed var(--red);border-radius:50% 50% 11px 11px/68px 68px 11px 11px;pointer-events:none}
.river .bow{position:relative;height:70px}
.river .flag{position:absolute;left:50%;top:8px;width:2px;height:17px;margin-left:-1px;background:var(--ink)}
.river .flag::after{content:"";position:absolute;left:2px;top:0;width:15px;height:9px;background:var(--red);clip-path:polygon(0 0,100% 50%,0 100%)}
.river .pilot{position:absolute;left:50%;top:30px;width:104px;height:28px;margin-left:-52px;border-radius:12px 12px 4px 4px;background:var(--steel);box-shadow:2px 3px 0 rgba(0,0,0,.15)}
.river .pilot::before{content:"";position:absolute;left:6px;right:6px;top:5px;height:8px;border-radius:6px 6px 1px 1px;background:repeating-linear-gradient(90deg,#9CC0E4 0 10px,var(--steel) 10px 13px)}
.wheel{position:relative;width:58%;height:26px;margin:-3px auto 0;border-radius:0 0 9px 9px;background:repeating-linear-gradient(180deg,var(--red) 0 5px,#8E2A1F 5px 8px);box-shadow:3px 7px 0 rgba(8,52,110,.38),inset 0 0 0 3px #8E2A1F}

/* water taxi: everything else with a picture */
.taxi{width:86%}
.taxi .hull{background-color:var(--steel);border-radius:50% 50% 20px 20px/104px 104px 20px 20px;padding:78px 12px 14px}
.taxi .hull::after{content:"";position:absolute;left:50%;top:30px;width:22px;height:22px;margin-left:-11px;border-radius:50%;
  background:radial-gradient(circle,var(--steel) 0 5px,transparent 5.5px),conic-gradient(var(--red) 0 25%,#FBFAF6 0 50%,var(--red) 0 75%,#FBFAF6 0);box-shadow:2px 3px 0 rgba(0,0,0,.2)}
.taxi .cabin{position:relative;border-radius:18px 18px 8px 8px;padding:16px 11px 11px;
  background:linear-gradient(180deg,#9CC0E4 0 9px,transparent 9px),linear-gradient(90deg,#9CC0E4 0 5px,#FBFAF6 5px calc(100% - 5px),#9CC0E4 calc(100% - 5px))}
.motor{width:34px;height:24px;margin:-2px auto 0;border-radius:0 0 9px 9px;background:var(--ink);box-shadow:3px 7px 0 rgba(8,52,110,.38)}

/* duck boat: kids welcome */
.duck{width:88%}
.duck .hull{background-color:#F2C230;border-radius:42% 42% 24px 24px/58px 58px 24px 24px;padding:58px 14px 14px}
.duck .bill{position:absolute;left:50%;top:-13px;width:58px;height:26px;margin-left:-29px;border-radius:50% 50% 45% 45%/70% 70% 30% 30%;background:#E8792B;box-shadow:inset 0 -4px 0 #C9601C}
.duck .eyes{position:absolute;left:50%;top:22px;display:flex;gap:30px;transform:translateX(-50%)}
.duck .eyes i{width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 60% 55%,var(--ink) 0 3px,#FBFAF6 3.5px)}
.duck .wheels{position:absolute;top:66px;bottom:22px;width:12px;border-radius:4px;background:linear-gradient(180deg,var(--ink) 0 22%,transparent 22% 39%,var(--ink) 39% 61%,transparent 61% 78%,var(--ink) 78%)}
.duck .wheels.l{left:-9px}.duck .wheels.r{right:-9px}
.duck .canopy{height:24px;margin:0 0 10px;border-radius:6px;background:repeating-linear-gradient(90deg,var(--red) 0 14px,#FBFAF6 14px 28px);box-shadow:inset 0 0 0 2px rgba(0,0,0,.08)}
.duck .venue{color:#5A4A12}

/* tiki boat: nightlife and drinks, 21+ */
.tiki{width:90%}
.tiki .hull{border-radius:18px;padding:98px 16px 16px;background:repeating-linear-gradient(90deg,#A8743F 0 13px,#93622F 13px 14px);box-shadow:-10px 0 0 -3px #C4CAD0,10px 0 0 -3px #C4CAD0,3px 7px 0 rgba(8,52,110,.38)}
.tiki .roof{position:absolute;left:50%;top:-14px;width:118px;height:118px;margin-left:-59px;border-radius:50%;z-index:1;
  background:radial-gradient(circle,#8A6230 0 7px,transparent 7.5px),repeating-conic-gradient(#D9B26F 0 5deg,#C39550 5deg 10deg);box-shadow:3px 8px 0 8px rgba(8,52,110,.22)}
.tiki .roof::before{content:"";position:absolute;inset:-11px;border-radius:50%;z-index:-1;background:repeating-conic-gradient(#B98A45 0 4deg,transparent 4deg 8deg);
  -webkit-mask:radial-gradient(circle,transparent 57px,#000 58px);mask:radial-gradient(circle,transparent 57px,#000 58px)}
.tiki .torch{position:absolute;top:12px;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle,#FFE08A 0 2px,#F6B21A 3px,#E8792B 6px);box-shadow:0 0 8px 2px rgba(246,178,26,.55)}
.tiki .torch.l{left:12px}.tiki .torch.r{right:12px}
.tiki .board{position:relative;background:#FBF4E4;border-radius:8px;padding:10px 11px;box-shadow:0 2px 0 rgba(0,0,0,.15)}

/* towboat pushing barges: runs several days */
.convoy{width:92%}
.convoy-h{margin:0 0 8px;color:#fff;font-weight:800;font-size:13px;text-shadow:0 1px 2px rgba(9,40,80,.6)}
.barge{position:relative;background-color:#4A3A2E;color:#F4F2F0;border-radius:4px;padding:10px 10px 10px 11px;margin-bottom:5px;
  background-image:radial-gradient(#2E2620 1.2px,transparent 1.7px);background-size:6px 6px;box-shadow:inset 0 0 0 4px #66503F,3px 7px 0 rgba(8,52,110,.38)}
.barge:first-of-type{border-radius:30px 30px 4px 4px/22px 22px 4px 4px;padding-top:15px}
.barge+.barge::before{content:"";position:absolute;left:22%;right:22%;top:-7px;height:9px;background:linear-gradient(90deg,#26292C 0 5px,transparent 5px calc(100% - 5px),#26292C calc(100% - 5px))}
.barge .row{margin-top:0;gap:10px;align-items:flex-start}
.barge .txt{flex:1;min-width:0}
.barge b{display:block;font-size:14px;line-height:1.15}
.barge .venue{color:#E3DCD3;margin-top:4px;font-size:11px}
.barge .tags span{background:rgba(255,255,255,.1);color:#F4F2F0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.barge .hold{flex:none;width:58px;height:58px;border-radius:4px;overflow:hidden;background:#1E2124;box-shadow:0 0 0 2px #2E2620}
.barge .hold img{width:100%;height:100%;object-fit:contain;display:block}
.barge .chair{margin-left:0}
.tug{position:relative;width:46%;margin:0 auto}
.tug .knees{height:10px;margin:0 16%;background:linear-gradient(90deg,var(--ink) 0 9px,transparent 9px calc(100% - 9px),var(--ink) calc(100% - 9px))}
.tug .body{height:78px;border-radius:6px 6px 26px 26px;background:var(--ink);padding:7px;box-shadow:3px 7px 0 rgba(8,52,110,.38)}
.tug .deck2{height:100%;border-radius:4px 4px 20px 20px;background:var(--red);display:grid;place-items:center}
.tug .house{width:52%;height:36px;border-radius:5px;background:#FBFAF6;box-shadow:inset 0 0 0 3px var(--ink),inset 0 0 0 7px #9CC0E4,2px 3px 0 rgba(0,0,0,.25)}

/* kayaks: events with no picture, so the venue logo rides in the cockpit */
.kayaks{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;margin:0 0 44px}
.kayak{position:relative;width:136px;justify-self:center;filter:drop-shadow(3px 7px 0 rgba(8,52,110,.38))}
.kayak:nth-child(2){margin-top:64px}
.kayak .kb{position:relative;padding:74px 14px 70px;text-align:center;background-color:#F28B3C;
  clip-path:polygon(50% 0%,64.7% 5.6%,73.6% 11.1%,80.8% 16.7%,86.7% 22.2%,91.5% 27.8%,95.2% 33.3%,97.9% 38.9%,99.5% 44.4%,100% 50%,99.5% 55.6%,97.9% 61.1%,95.2% 66.7%,91.5% 72.2%,86.7% 77.8%,80.8% 83.3%,73.6% 88.9%,64.7% 94.4%,50% 100%,35.3% 94.4%,26.4% 88.9%,19.2% 83.3%,13.3% 77.8%,8.5% 72.2%,4.8% 66.7%,2.1% 61.1%,0.5% 55.6%,0% 50%,0.5% 44.4%,2.1% 38.9%,4.8% 33.3%,8.5% 27.8%,13.3% 22.2%,19.2% 16.7%,26.4% 11.1%,35.3% 5.6%)}
.kayak:nth-child(2) .kb{background-color:#E9D23A}
.kayak b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:30px;font-size:13px;line-height:1.15}
.kayak .tags{justify-content:center;margin:0 0 6px}
.kayak .tags span{background:rgba(255,255,255,.55)}
.kayak .tags span.age{background:var(--ink);color:#fff;box-shadow:none}
.kayak .cockpit{position:relative;width:104px;height:74px;margin:16px auto 9px;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 0 0 3px #FBFAF6,0 0 0 5px var(--ink);display:grid;place-items:center}
.kayak .cockpit.dark{background:var(--ink)}
.kayak .cockpit img{max-width:84px;max-height:56px;object-fit:contain;display:block}
.kayak .km{font-size:11px;font-weight:700;line-height:1.3}
.kayak .px{margin-top:4px;color:var(--ink)}
.kayak .chair{margin:8px auto 0}
.kayak .paddle{position:absolute;left:-12%;right:-12%;top:111px;height:4px;background:#3A3E43;border-radius:2px;transform:rotate(-5deg);pointer-events:none}
.kayak:nth-child(2) .paddle{transform:rotate(5deg)}
.kayak .paddle::before,.kayak .paddle::after{content:"";position:absolute;top:-6px;width:22px;height:16px;border-radius:50%;background:#FBFAF6;box-shadow:inset 0 0 0 2px #3A3E43}
.kayak .paddle::before{left:-4px}.kayak .paddle::after{right:-4px}

/* dibs bar opens the parking lot */
.dibsbar{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;border:0;font:inherit;cursor:pointer;background:var(--ink);color:#fff;padding:10px 14px;font-weight:800;font-size:15px;text-align:left}
.dibsbar .db-l{display:flex;align-items:center;gap:9px}
.dibsbar svg{width:30px;height:30px;color:#fff;--chair-fill:var(--gold)}
.dibsbar .db-r{background:var(--gold);color:var(--ink);border-radius:6px;padding:6px 10px 5px;font-size:12px}

/* full view: Instagram-style. Swipe up for the next show, sideways for its other clips */
.viewer{position:absolute;inset:0;z-index:20;background:#000;color:#fff}
.viewer[hidden]{display:none}
.vdeck{position:absolute;inset:0;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none}
.vslide{position:relative;height:100%;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always}
.vclips{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.vclip{position:relative;flex:0 0 100%;scroll-snap-align:center;display:flex;flex-direction:column;justify-content:center;padding-bottom:90px;box-sizing:border-box}
.vclip img{width:100%;max-height:62%;object-fit:contain;display:block}
.vclip.live img{visibility:hidden}
.vclip iframe{position:absolute;left:0;top:50%;width:100%;aspect-ratio:16/9;transform:translateY(-62%);border:0}
.vclip .songcard{position:relative;left:auto;right:auto;bottom:auto;margin:14px 16px 0}
.vsegs{position:absolute;top:12px;left:12px;right:60px;z-index:3;display:flex;gap:4px}
.vsegs i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.3)}
.vsegs i.done{background:rgba(255,255,255,.75)}
.vsegs i.on{background:var(--gold)}
.vcap{position:absolute;left:0;right:66px;bottom:0;z-index:3;padding:70px 14px 40px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.8) 42%);pointer-events:none}
.vcap .when{font-weight:800;color:var(--gold);font-size:13px}
.vcap .vt{font-weight:900;font-size:22px;line-height:1.1;margin:2px 0}
.vcap .clipt{font-size:13px;color:#DDD}
.vcap .venue{color:#DDD}
.vcap .tags span,.vrail .tags span{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.vcap .tags span.age{background:#fff;color:#111}
.vrail{position:absolute;right:8px;bottom:44px;z-index:4;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:800}
.vrail span{margin-bottom:10px}
.vrail .chair{margin:0;background:rgba(255,255,255,.16);color:#EBD27A;box-shadow:none}
.vrail .chair[aria-pressed="true"]{background:var(--gold);color:var(--ink)}
.rbtn{width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;font:inherit;font-weight:900;font-size:18px;background:rgba(255,255,255,.16);color:#fff}
.vclose{position:absolute;top:24px;right:10px;z-index:5}
.vclose,.lotclose{width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;font:inherit;font-size:18px;font-weight:900;background:rgba(255,255,255,.16);color:#fff}
.vhint{position:absolute;bottom:12px;left:0;right:0;z-index:4;margin:0;text-align:center;font-size:12px;font-weight:700;color:#CCC;pointer-events:none}

/* the dibs lot: chairs hold each spot at the curb, details stay readable below */
.lot{position:absolute;left:0;right:0;bottom:0;height:82%;z-index:15;display:flex;flex-direction:column;color:#F4F2F0;border-radius:18px 18px 0 0;
  background-color:#3B3E42;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.6px),radial-gradient(rgba(0,0,0,.2) 1px,transparent 1.6px);background-size:7px 7px,5px 5px;
  box-shadow:0 -10px 30px rgba(0,0,0,.35);transform:translateY(103%);transition:transform .3s cubic-bezier(.2,.8,.2,1);visibility:hidden}
.lot.open{transform:none;visibility:visible}
.curb{height:18px;flex:none;border-radius:18px 18px 0 0;background:#C9C3B8;box-shadow:inset 0 -4px 0 #A79F92;display:grid;place-items:center}
.curb i{width:44px;height:5px;border-radius:3px;background:#8E877C}
.lothead{display:flex;justify-content:space-between;align-items:flex-start;padding:12px 16px 4px}
.lothead h3{margin:0;font-size:22px;font-weight:900;color:#fff}
.lothead p{margin:2px 0 0;font-size:13px;color:#C9C3B8}
.stalls{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 12% 8px;scrollbar-width:none}
.stall{flex:0 0 76%;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;padding:0 12px 12px;border-left:4px solid #EBD27A;box-sizing:border-box}
.stall:last-child{border-right:4px solid #EBD27A}
.spotchair{width:64px;height:64px;color:var(--ink);--chair-fill:var(--gold);filter:drop-shadow(2px 4px 0 rgba(0,0,0,.4));margin:2px 0 8px;flex:none}
.ticket{width:100%;background:#FBFAF6;color:var(--ink);border-radius:8px;overflow:hidden;box-shadow:0 4px 0 rgba(0,0,0,.3)}
.ticket .timg{aspect-ratio:16/9;background:#1E2124}
.ticket .timg img{width:100%;height:100%;object-fit:contain;display:block}
.ticket .tb{padding:10px 11px 12px}
.ticket .when{font-size:12px;font-weight:800;color:var(--steel)}
.ticket .t{font-size:15px;margin-top:2px}
.tacts{display:flex;gap:8px;margin-top:10px}
a.tact{display:block;text-align:center;text-decoration:none}
a.rbtn{text-decoration:none;display:grid;place-items:center}
.evlink{color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent)}
.evlink:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:3px}
.vcap .evlink{pointer-events:auto}
.tact{flex:1;font:inherit;font-weight:800;font-size:12px;padding:8px 6px 7px;border-radius:7px;border:0;cursor:pointer;background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(38,41,44,.25)}
.lotfoot{padding:8px 16px 16px;flex:none}
.share{width:100%;font:inherit;font-weight:900;font-size:15px;padding:13px 10px 12px;border:0;border-radius:10px;background:var(--gold);color:var(--ink);cursor:pointer}
.lotempty{margin:30px 24px;text-align:center;color:#C9C3B8;font-size:14px;line-height:1.5}
.toast{position:absolute;left:50%;bottom:92px;z-index:40;transform:translateX(-50%);max-width:85%;background:#111417;color:#fff;padding:9px 14px 8px;border-radius:8px;font-weight:700;font-size:13px;text-align:center}
.toast[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.lot,.span{transition:none}}

/* side panel */
.side h3{margin:0 0 8px}
.legend{display:grid;gap:12px;margin:6px 0 20px}
.lg{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;font-size:14px;line-height:1.4}
.gl{justify-self:center;width:22px;height:36px}
.gl.river{background:#FBFAF6;border:2.5px solid #23557A;border-radius:50% 50% 4px 4px/14px 14px 4px 4px}
.gl.taxi{background:#23557A;border-radius:50% 50% 5px 5px/18px 18px 5px 5px}
.gl.duck{background:#F2C230;border-radius:42% 42% 6px 6px/12px 12px 6px 6px;box-shadow:-4px 0 0 -2px #26292C,4px 0 0 -2px #26292C}
.gl.tiki{width:26px;height:30px;border-radius:5px;background:radial-gradient(circle at 50% 30%,#D9B26F 0 9px,transparent 9.5px),#A8743F}
.gl.convoy{width:20px;height:38px;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,#4A3A2E 0 30%,transparent 30% 34%,#4A3A2E 34% 64%,transparent 64% 70%,#26292C 70%)}
.gl.kayak{width:10px;height:36px;border-radius:50%/24%;background:#F28B3C;box-shadow:16px 4px 0 #E9D23A}

/* ---------- standalone page additions ---------- */
:where(.rv a,.rv button,.rv [tabindex]):focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.rv :is(.dclose,.dshare,.dgo,.dfull,.fbuy,.dclip,.pnav,.pfull):focus-visible{outline-color:var(--gold)}
.ph{height:780px;height:min(780px,calc(100vh - 28px));height:min(780px,calc(100dvh - 28px))}
.ph .scr{overscroll-behavior:contain}
.feedmsg{margin:18px 0;text-align:center;color:#fff;font-weight:800;font-size:15px;line-height:1.4;text-shadow:0 1px 2px rgba(9,40,80,.6)}
.feedmsg button{display:block;margin:12px auto 0;font:inherit;font-weight:900;font-size:15px;min-height:44px;padding:12px 20px 10px;border:0;border-radius:10px;cursor:pointer;background:var(--ink);color:#fff;box-shadow:0 4px 0 #000}
.m-down .stage{position:relative}
.barge .hold.mono{display:grid;place-items:center;font-weight:900;font-size:16px;color:#fff;background:var(--steel)}
.kayak .cockpit.mono{background:var(--steel);color:#fff;font-weight:900;font-size:30px;letter-spacing:.02em}
.crewpanel{flex:none;max-height:30%;overflow:auto;padding:0 16px 8px}
.crewpanel:empty{display:none}
.lotmissing{margin:18px 0 0;font-size:14px;line-height:1.45;color:#C9C3B8}

/* touch targets reach 44px without changing how the controls look */
.pill,.chip,.pnav,.pfull,.dclose,.chair.sm{position:relative}
.pill::after,.chip::after,.pnav::after,.pfull::after,.dclose::after{content:"";position:absolute;inset:-8px -2px}
.chair.sm::after{content:"";position:absolute;inset:-4px}
.vclose,.lotclose{width:44px;height:44px}
a.tact,button.tact{display:grid;place-items:center;min-height:44px}
.dfull{padding:12px 2px}
.fbuy{display:inline-grid;place-items:center;min-height:44px;padding-top:0;padding-bottom:0}
.dclose{min-height:36px}

/* side legend (desktop only) */
.side{color:var(--ink);font-size:14px;line-height:1.5}
.side h3{font-size:17px;font-weight:900}
.side p{margin:0 0 14px;max-width:46ch}
.side code{font-size:13px}

@media (prefers-reduced-motion:reduce){.rv *,.rv *::before,.rv *::after{animation:none !important;transition:none !important}}

html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:#DCD8D2;color:#26292C;font-family:Overpass,sans-serif}
@media (max-width:600px){body{background:#F4F2F0;overflow:hidden}.rv{padding:0}}
.nojs{margin:40px 20px;font-weight:700}

/* ---------- sharing: ui/dibs-share.css and its sheet, in the river's palette ---------- */
/* dibs-share.css takes its tokens from the site stylesheet; the prototype supplies its own. */
:root{--cream:#F4F2F0;--cream-2:#ECE8E2;--ink:#26292C;--ink-soft:#5D6266;--porch-deep:#26292C;--body:Overpass,sans-serif;--display:Overpass,sans-serif;--r-lg:18px;--r-pill:22px}
.ysh-sheet h2{font-weight:900}
.ysh-sheet .btn{display:flex;align-items:center;box-sizing:border-box;text-decoration:none;cursor:pointer;font:800 15px/1 Overpass,sans-serif;padding:14px 16px 12px;border:0;border-radius:10px;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(38,41,44,.25)}
.ysh-sheet .btn.fill{background:#E1AC36;box-shadow:none}
.ysh-sheet .btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.ysh-toast{font-family:Overpass,sans-serif}

/* the Dibs bar says what matched */
.dibsbar .db-l{min-width:0;flex:1}
.dibsbar .db-t{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.dibsbar .db-r{flex:none}
.crewbadge{font-size:12px;font-weight:800;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* a crewmate saved it too */
.crewflag{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:3px 9px 2px 6px;border-radius:999px;font-size:11.5px;font-weight:800;line-height:1.2;background:#FBFAF6;color:var(--steel);box-shadow:inset 0 0 0 1.5px var(--steel)}
.crewflag svg{width:15px;height:15px;flex:none;color:var(--steel);--chair-fill:var(--gold)}

/* the lot has two tabs: the spots, and the crew */
.lottabs{display:flex;gap:8px;padding:6px 16px 0;flex:none}
.lottabs[hidden],.tabdot[hidden]{display:none}
.lottab{flex:1;min-height:44px;font:inherit;font-weight:900;font-size:14px;border:0;border-radius:10px 10px 0 0;cursor:pointer;background:rgba(255,255,255,.1);color:#F4F2F0}
.lottab[aria-selected="true"]{background:var(--gold);color:var(--ink)}
.lottab:focus-visible{outline:3px solid #fff;outline-offset:-3px}
.tabdot{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:6px;padding:0 4px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;vertical-align:1px}
.lot.tab-crew .stalls{display:none}
.lot:not(.tab-crew) .crewpanel{display:none}
.lot.tab-crew .crewpanel{flex:1;min-height:0;max-height:none;padding-top:10px}

/* the crew panel */
.crewpanel{color:#F4F2F0;font-size:14px;line-height:1.45;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#8E877C transparent}
.crewh{margin:4px 0;font-size:18px;font-weight:900;color:#fff}
.crewsub{margin:12px 0 6px;font-size:14px;font-weight:800;color:#EBD27A}
.crewfine{margin:6px 0;font-size:13px;color:#D9D4CA}
.crewmsg{margin:8px 0;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.14);font-weight:700;font-size:14px}
.crewmsg.err{background:#FBE3DE;color:#8E1F12}
.crew-chips{list-style:none;margin:6px 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crew-chip{padding:5px 12px 4px;border-radius:999px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);font-weight:800;font-size:13px;overflow-wrap:anywhere}
.crew-chip.is-me{background:var(--gold);color:var(--ink);box-shadow:none}
.crew-chip small{margin-left:6px;font-size:12px;font-weight:700;color:#D9D4CA}
.crew-chip.is-me small{color:var(--ink)}
.crew-matches{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.crew-match{background:#FBFAF6;color:var(--ink);border-radius:8px;padding:10px 11px;box-shadow:0 3px 0 rgba(0,0,0,.3)}
.crew-match.is-new{box-shadow:0 0 0 3px var(--gold),0 3px 0 rgba(0,0,0,.3)}
.cm-line{font-weight:800;font-size:15px;overflow-wrap:anywhere}
.cm-line a{color:var(--steel)}
.cm-new{display:inline-block;margin-left:4px;padding:2px 6px 1px;border-radius:4px;background:var(--red);color:#fff;font-size:11px;font-weight:800;vertical-align:1px}
.cm-when{margin-top:2px;font-size:12.5px;color:var(--muted)}
.crewform{display:grid;gap:8px;margin:10px 0}
.crewform label,.crew-phones label{font-weight:800;font-size:13px;color:#fff}
.crewpanel input{box-sizing:border-box;width:100%;min-height:44px;padding:8px 12px;border:0;border-radius:8px;font:inherit;font-size:16px;background:#FBFAF6;color:var(--ink)}
.crewpanel input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.cbtn{font:inherit;font-weight:900;font-size:14px;min-height:44px;padding:10px 14px 9px;border:0;border-radius:10px;cursor:pointer;background:#FBFAF6;color:var(--ink);box-shadow:0 3px 0 rgba(0,0,0,.35)}
.cbtn.gold{background:var(--gold)}
.cbtn.quiet{background:transparent;color:#F4F2F0;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.cbtn.sm{margin-top:8px;font-size:13px}
.cbtn:disabled{opacity:.55;cursor:default}
.cbtn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.crew-match .cbtn{background:var(--gold)}
.crew-match .cbtn:focus-visible{outline-color:var(--ink)}
.crewacts{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.crew-phones,.crewmore{margin-top:12px;padding-top:2px;border-top:1.5px dashed rgba(255,255,255,.25)}
.crew-phones summary,.crewmore summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-weight:800}
.crew-phones .cbtn{margin-top:4px}
.crewleave{margin-top:10px;padding-bottom:6px}

/* ---------- Navigation bar for Home and Classic event list ---------- */
.rv-topbar {
  position: absolute;
  top: max(10px, env(safe-area-inset-top, 10px));
  left: 12px;
  right: 12px;
  z-index: 25;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}
.rv-back-btn, .rv-classic-btn {
  pointer-events: auto;
  font-family: Overpass, sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: rgba(38, 41, 44, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 8px 14px 6px;
  border-radius: 999px;
  text-decoration: none;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
  transition: background 0.15s, transform 0.15s;
}
.rv-back-btn:hover, .rv-classic-btn:hover {
  background: rgba(38, 41, 44, 0.95);
  transform: translateY(-1px);
}
.rv-back-btn:focus-visible, .rv-classic-btn:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}