/* ============================================================
   JSD PETA, the interactive map experience on /map.html.
   Loaded after style.css, so it only adds what the map app needs.
   One component set, two shapes: a bottom sheet on phones and a
   sliding left panel on desktop.
   ============================================================ */

:root {
  --orange: #f04e23;
  --yellow: #ffe95c;
  --peta-panel: 0px;         /* width the left panel is currently taking */
  --peta-top: 112px;         /* first free row under the site header */
  --peta-tools-top: 66px;    /* the row every floating map control sits on */
}

body.peta-page {
  position: fixed;
  inset: 0;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  background: transparent;
  user-select: none;
  -webkit-user-select: none;
}
body.peta-page * { -webkit-tap-highlight-color: transparent; }

/* the quiz and the reveal are full takeovers, so the site header steps
   out of the way for them. The opening choice keeps it: that screen is
   an ordinary page of the site. */
body.peta-modal .site-header { opacity: 0; pointer-events: none; }
body.peta-page .site-header { transition: opacity .35s ease; }

/* the header sits over a pale street map here, so it needs its own
   weight to stay readable */
body.peta-page .header-logo img { filter: drop-shadow(0 2px 12px rgba(0,0,0,.55)); }
body.peta-page .pill-nav,
body.peta-page .header-ticket-btn,
body.peta-page .lang-toggle { box-shadow: 0 8px 26px rgba(0,0,0,.34); }
/* this page does not run the nav script that slides the black pill, so
   the current item carries its own */
body.peta-page .pill-nav li.is-active { background: var(--black); color: var(--white); }

/* ============================================================ screens */
.screen { position: fixed; inset: 0; z-index: 10; display: none; }
.screen.on { display: block; }

/* ---- choice screen: the map page at rest, header and all ---- */
#choice { position: fixed; inset: 0; z-index: 40; pointer-events: none; display: none; }
#choice.on { display: block; }
#choice .choice-wrap {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%);
  width: min(540px, calc(100vw - 36px));
  display: flex; flex-direction: column; gap: 12px; pointer-events: auto;
}
.choice-title {
  font-family: var(--font-display); font-size: clamp(30px, 8vw, 38px); line-height: 1.05;
  text-align: center; margin-bottom: 6px; color: var(--black);
  opacity: 0; transform: translateY(24px);
}
.choice-btn {
  border-radius: var(--radius-lg); padding: 15px 20px; font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left;
  opacity: 0; transform: translateY(30px) scale(.96); cursor: pointer;
  box-shadow: 0 10px 34px rgba(0,0,0,.3);
}
.choice-btn small { display: block; font-weight: 500; font-size: 12px; line-height: 1.4; opacity: .72; margin-top: 3px; }
.choice-btn .arr { font-size: 20px; }
.choice-primary { background: var(--black); color: var(--white); }
.choice-secondary { background: var(--offwhite); color: var(--black); }
/* the header keeps the language toggle on desktop, so this stand-in
   only appears where the header hides it */
.choice-lang { display: none; align-self: center; margin-top: 8px; }
@media (max-width: 719px) { .choice-lang { display: flex; } }
#choice.on .choice-title { animation: riseIn .6s var(--ease-pop) .1s forwards; }
#choice.on .choice-primary { animation: riseIn .6s var(--ease-pop) .22s forwards; }
#choice.on .choice-secondary { animation: riseIn .6s var(--ease-pop) .34s forwards; }
@keyframes riseIn { to { opacity: 1; transform: translateY(0) scale(1); } }

/* ============================================================ map chrome */
#mapScreen { z-index: 20; }

/* map tools live top right, where the page nav sits on the other subpages */
.peta-tools {
  position: absolute; z-index: 30;
  top: calc(76px + env(safe-area-inset-top)); left: 12px; right: 12px;
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  pointer-events: none;
}
.peta-tools > * { pointer-events: auto; }
.pill {
  background: var(--black); color: var(--white); border-radius: 999px; padding: 9px 12px;
  font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: transform .25s var(--ease-pop), background .2s;
}
.pill:active { transform: scale(.94); }
.pill.lite { background: var(--offwhite); color: var(--black); }

/* filter row (explore) */
.filter-row {
  position: absolute; bottom: calc(88px + env(safe-area-inset-bottom)); left: 0; right: 0;
  z-index: 30; display: flex; gap: 8px; justify-content: center;
}
.filter-row .pill { background: rgba(10,10,10,.85); backdrop-filter: blur(8px); font-size: 12.5px; }
.filter-row .pill.sel { background: var(--orange); }

/* bottom action on map */
.map-actions {
  position: absolute; bottom: calc(20px + env(safe-area-inset-bottom)); left: 14px; right: 14px;
  z-index: 30; display: flex; gap: 10px;
}
.map-actions .pill { flex: 1; justify-content: center; padding: 14px 16px; font-size: 14.5px; }

/* route mode hides the explore filters and the explore CTA */
#mapChrome.route-mode .filter-row { display: none; }
#mapChrome.route-mode .map-actions { display: none; }
#routeBtn { display: none; }
#mapChrome.route-mode #routeBtn, #mapChrome.has-route #routeBtn { display: inline-flex; }

/* ============================================================ map (Leaflet) */
.map-viewport { position: absolute; inset: 0; overflow: hidden; background: #e8e6e1; }
/* nothing half-drawn is ever visible: the map only fades in once asked for */
#mapScreen { opacity: 0; pointer-events: none; transition: opacity .35s ease; }
body.map-ready #mapScreen { opacity: 1; pointer-events: auto; }
body.peta-page #festMap {
  position: absolute; top: -120px; bottom: -120px; left: 0; right: 0;
  height: auto; z-index: 1; background: #e8e6e1;
}
.venue-ico, .aff-ico, .stop-ico { background: none; border: none; }
.leaflet-container { font-family: var(--font-sans); }
.leaflet-control-attribution { font-size: 9px; opacity: .75; }
.aff-tip { font-family: var(--font-sans); font-weight: 700; font-size: 11px; border-radius: 8px; }

/* venue cards (inside Leaflet divIcons). Uniform size everywhere;
   the logo card is collapsed until .open. */
.v-wrap {
  position: absolute; transform: translate(-50%, calc(-100% - 20px));
  display: flex; flex-direction: column; align-items: center;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.32)); cursor: pointer; transition: opacity .2s ease;
}
.v-wrap.hidden { opacity: 0; pointer-events: none; }
.v-wrap.pop .venue-tag, .v-wrap.pop .venue-card { animation: popScale .55s var(--ease-pop) backwards; }
.v-wrap.pop .venue-card { animation-delay: .07s; }
@keyframes popScale { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* the stop number rides on the label instead of a separate pin */
.v-num {
  display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 5px;
  border-radius: 50%; background: var(--black); color: var(--yellow);
  font-family: var(--font-display); font-size: 11px; vertical-align: middle;
}
.venue-tag {
  background: var(--yellow); color: var(--black); font-weight: 700; font-size: 12px;
  padding: 6px 11px; border-radius: 7px; white-space: nowrap; position: relative; z-index: 2;
}
.venue-card {
  background: var(--card); border-radius: 11px; margin-top: -4px; padding: 11px 14px 10px;
  display: flex; gap: 11px; align-items: center; justify-content: center;
  transform-origin: top center; transform: scale(0); opacity: 0; max-height: 0;
  padding-top: 0; padding-bottom: 0; overflow: hidden;
  transition: transform .45s var(--ease-pop), opacity .3s ease, max-height .35s var(--ease-out), padding .35s var(--ease-out);
}
.v-wrap.open .venue-card { transform: scale(1); opacity: 1; max-height: 90px; padding: 11px 14px 10px; }
.venue-card img { height: 38px; width: auto; max-width: 116px; object-fit: contain; }
.venue-note { color: var(--offwhite); font-size: 10px; font-weight: 500; max-width: 120px; text-align: center; }

/* mrt landmark marker */
.mrt-mark {
  position: absolute; transform: translate(-50%, 30%); width: 26px; height: 26px; border-radius: 50%;
  background: #0d6efd; display: grid; place-items: center; border: 2px solid var(--white);
  box-shadow: 0 4px 12px rgba(0,0,0,.35); color: var(--white); font-weight: 700; font-size: 11px;
  font-family: var(--font-sans); pointer-events: none;
}

/* affiliate pins */
.aff {
  position: absolute; transform: translate(-50%, -50%); width: 16px; height: 16px; border-radius: 50%;
  background: var(--offwhite); border: 2.5px solid var(--black);
  transition: transform .25s var(--ease-pop), opacity .2s ease;
}
.aff.hidden { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
.aff.pop { animation: affPop .5s var(--ease-pop); }
@keyframes affPop {
  0% { transform: translate(-50%,-50%) scale(0); }
  60% { transform: translate(-50%,-50%) scale(1.35); }
  100% { transform: translate(-50%,-50%) scale(1); }
}
.aff.perk { background: var(--orange); border-color: var(--black); width: 22px; height: 22px; }
.aff.perk::after {
  content: "%"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 10px; font-weight: 700; color: var(--white);
}

/* you are here */
.here-dot {
  position: absolute; transform: translate(-50%, -50%); width: 18px; height: 18px; border-radius: 50%;
  background: #2f7cff; border: 3px solid var(--white); box-shadow: 0 0 0 0 rgba(47,124,255,.5);
  animation: herePulse 1.8s ease-out infinite; pointer-events: none;
}
@keyframes herePulse {
  0% { box-shadow: 0 0 0 0 rgba(47,124,255,.45); }
  70% { box-shadow: 0 0 0 26px rgba(47,124,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,124,255,0); }
}

/* route stop markers */
.stop-num {
  position: absolute; transform: translate(-50%, -50%) scale(0); width: 34px; height: 34px;
  border-radius: 50%; background: var(--black); color: var(--white); display: grid; place-items: center;
  font-family: var(--font-display); font-size: 16px; border: 2.5px solid var(--offwhite);
  box-shadow: 0 6px 16px rgba(0,0,0,.35); pointer-events: none;
}
.stop-num.in { animation: popIn .5s var(--ease-pop) forwards; }
.stop-num.aff-stop { width: 28px; height: 28px; font-size: 13px; background: var(--orange); }
@keyframes popIn { to { transform: translate(-50%, -50%) scale(1); } }

/* start marker */
.start-mark {
  position: absolute; transform: translate(-50%, -175%); pointer-events: none;
  background: var(--offwhite); color: var(--black); font-size: 11.5px; font-weight: 700;
  border-radius: 999px; padding: 5px 10px; box-shadow: 0 5px 14px rgba(0,0,0,.3); white-space: nowrap;
}

/* toast */
#toast {
  position: fixed; top: calc(130px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  background: var(--black); color: var(--white); font-size: 13px; font-weight: 700;
  padding: 10px 16px; border-radius: 999px; z-index: 80; opacity: 0; transition: opacity .3s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

/* ============================================================ quiz */
#quiz { z-index: 60; display: none; }
#quiz.on { display: block; }
.q-card {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: calc(24px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom));
  background: transparent;
}
.q-progress { display: flex; gap: 6px; margin-bottom: 26px; }
.q-progress i { height: 4px; flex: 1; border-radius: 4px; background: rgba(10,10,10,.25); }
.q-progress i.done { background: var(--black); }
.q-head { font-family: var(--font-display); font-size: 40px; line-height: 1.02; color: var(--black); margin-bottom: 6px; }
.q-sub { font-size: 15px; font-weight: 500; color: rgba(10,10,10,.7); margin-bottom: 22px; }
.q-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; flex: 1; overflow-y: auto; }
.q-opts.single { grid-template-columns: 1fr; }
.q-opt {
  background: var(--card); color: var(--white); border-radius: var(--radius-lg);
  padding: 20px 16px; font-size: 16.5px; font-weight: 700; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; min-height: 84px; justify-content: center;
  border: 3px solid transparent; transition: transform .25s var(--ease-pop), border-color .2s, background .2s;
  opacity: 0; transform: translateY(26px) scale(.97);
}
.q-opt small { font-weight: 500; font-size: 12.5px; opacity: .65; }
.q-opt:active { transform: scale(.95); }
.q-opt.sel { border-color: var(--orange); background: var(--orange); color: var(--white); box-shadow: 0 8px 24px rgba(240,78,35,.4); }
.q-opt.sel small { opacity: .85; }
.q-card.in .q-opt { animation: riseIn .55s var(--ease-pop) forwards; }
.q-card.in .q-opt:nth-child(1) { animation-delay: .05s; } .q-card.in .q-opt:nth-child(2) { animation-delay: .1s; }
.q-card.in .q-opt:nth-child(3) { animation-delay: .15s; } .q-card.in .q-opt:nth-child(4) { animation-delay: .2s; }
.q-card.in .q-opt:nth-child(5) { animation-delay: .25s; } .q-card.in .q-opt:nth-child(6) { animation-delay: .3s; }
.q-card.in .q-opt:nth-child(7) { animation-delay: .35s; } .q-card.in .q-opt:nth-child(8) { animation-delay: .4s; }
.q-foot { display: flex; gap: 10px; margin-top: 18px; }
.q-next {
  flex: 1; background: var(--black); color: var(--white); border-radius: 999px; padding: 17px;
  font-size: 16px; font-weight: 700; opacity: .35; pointer-events: none; cursor: pointer; transition: opacity .2s;
}
.q-next.ready { opacity: 1; pointer-events: auto; }
.q-back {
  background: rgba(10,10,10,.12); color: var(--black); border-radius: 999px; padding: 17px 22px;
  font-size: 16px; font-weight: 700; flex: none; cursor: pointer;
}
#qHome { padding: 17px 20px; }

/* ---- reveal ---- */
#reveal { z-index: 65; display: none; align-items: center; justify-content: center; padding: 24px; }
#reveal.on { display: flex; }
.rev-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; max-width: 520px; }
.rev-kicker { font-size: clamp(12px, 3.6vw, 15px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--black); opacity: 0; max-width: 100%; }
.rev-name {
  font-family: var(--font-display); font-size: clamp(34px, 12vw, 62px); line-height: 1; color: var(--black);
  margin: 14px 0 10px; opacity: 0; transform: scale(.8); max-width: 100%; overflow-wrap: break-word; hyphens: auto;
}
.rev-tag { font-size: clamp(15px, 4.4vw, 18px); font-weight: 500; color: rgba(10,10,10,.8); max-width: 300px; opacity: 0; }
#reveal.on .rev-kicker { animation: riseIn .5s var(--ease-out) .1s forwards; }
#reveal.on .rev-name { animation: revPop .7s var(--ease-pop) .3s forwards; }
#reveal.on .rev-tag { animation: riseIn .5s var(--ease-out) .75s forwards; }
@keyframes revPop { to { opacity: 1; transform: scale(1); } }

/* ============================================================ detail panel
   Phone: a bottom sheet you drag between open, peek and mini.
   Desktop: the same content as a sliding panel on the left.
   ============================================================ */
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--offwhite); border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 -14px 50px rgba(0,0,0,.3);
  transform: translateY(105%); transition: transform .55s var(--ease-out);
  max-height: 74dvh; display: flex; flex-direction: column; touch-action: pan-y;
}
.sheet.up { transform: translateY(0); }
.sheet.peek { transform: translateY(calc(100% - 182px)); }
.sheet.dragging { transition: none; }
.sheet.mini { transform: translateY(calc(100% - 96px)); }
.sheet.mini .sheet-head { cursor: pointer; }
.sheet.mini .sheet-body { pointer-events: none; }
.sheet-grab { cursor: grab; touch-action: none; padding: 12px 0 4px; display: grid; place-items: center; flex: none; }
.sheet-grab i { width: 44px; height: 5px; border-radius: 5px; background: rgba(10,10,10,.2); }
.sheet-head { touch-action: none; padding: 4px 20px 12px; flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sheet-title { font-family: var(--font-display); font-size: 26px; color: var(--black); line-height: 1.02; }
.sheet-sub { font-size: 13px; font-weight: 500; color: rgba(10,10,10,.6); }
.sheet-body { overflow-y: auto; padding: 0 14px calc(20px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }

/* the edge toggle and the close button only exist on desktop, where the
   panel cannot simply be dragged out of the way */
#panelToggle { display: none; }
.sheet-close { display: none; }

/* the walk between two stops */
.it-leg { display: flex; align-items: center; gap: 8px; padding: 2px 0 2px 18px; font-size: 12px; font-weight: 700; color: rgba(10,10,10,.5); }
.it-leg .leg-dot { width: 2px; height: 22px; border-radius: 2px; background: repeating-linear-gradient(to bottom, rgba(10,10,10,.3) 0 3px, transparent 3px 6px); }
.it-way { margin: 0 0 8px 30px; border-left: 2px solid rgba(10,10,10,.12); padding: 2px 0 2px 12px; }
.it-way .way-head { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(10,10,10,.42); margin-bottom: 4px; }
.it-way .way-row { font-size: 12.5px; line-height: 1.4; color: rgba(10,10,10,.72); margin-bottom: 3px; }
.it-way .way-row b { font-weight: 700; color: var(--black); }
.it-way .way-row.has-perk b { color: var(--orange); }
.it-way .way-row span { display: block; font-size: 11.5px; color: rgba(10,10,10,.6); }

/* itinerary cards */
.it-card { background: var(--card); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 10px; display: flex; gap: 14px; color: var(--white); cursor: pointer; }
.it-num { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--offwhite); color: var(--black); display: grid; place-items: center; font-family: var(--font-display); font-size: 18px; }
.it-num.orange { background: var(--orange); color: var(--white); }
.it-main { flex: 1; min-width: 0; }
.it-logo { height: 34px; width: auto; max-width: 150px; object-fit: contain; object-position: left; margin-bottom: 8px; }
.it-name { font-weight: 700; font-size: 16px; line-height: 1.2; margin-bottom: 4px; }
.it-why { font-size: 13.5px; line-height: 1.45; opacity: .85; }
.it-note { background: var(--yellow); color: var(--black); border-radius: var(--radius-md); font-size: 12.5px; font-weight: 500; padding: 10px 12px; margin-top: 10px; }

/* zone / affiliate info card (explore) */
.zone-logo-lg { height: 54px; width: auto; max-width: 200px; object-fit: contain; object-position: center; margin: 4px 0 10px; background: var(--card); padding: 10px 14px; border-radius: var(--radius-md); box-sizing: content-box; }
.zc-name { font-weight: 700; font-size: 18px; color: var(--black); line-height: 1.25; margin-bottom: 2px; }
.zc-cat { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange); margin-bottom: 10px; }
.zc-hours { display: inline-flex; gap: 6px; align-items: center; background: var(--black); color: var(--white); font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 7px 12px; margin-bottom: 12px; }
.zc-hours.closed { background: #8a1f1f; }
.zc-para { font-size: 14px; line-height: 1.55; color: rgba(10,10,10,.82); margin-bottom: 10px; }
.zc-perk { background: var(--card); color: var(--white); border-radius: var(--radius-md); padding: 12px 14px; font-size: 13.5px; line-height: 1.45; }
.zc-perk b { color: var(--orange); }
.zc-block { padding-bottom: 18px; }
.zc-sub { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(10,10,10,.45); margin: 16px 0 8px; }
.zc-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; background: var(--black); color: var(--white); text-decoration: none; border-radius: 999px; padding: 12px 18px; font-size: 13.5px; font-weight: 700; }
/* line up strip, same shape as the main site */
.zc-lineup { margin-top: 4px; }
.ln-night { margin-bottom: 14px; }
.ln-day { font-size: 13px; font-weight: 700; color: var(--black); margin-bottom: 8px; }
.ln-day span { font-weight: 500; color: var(--orange); margin-left: 6px; }
.ln-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.ln-act { flex: none; width: 92px; }
.ln-act img { width: 92px; height: 92px; object-fit: cover; border-radius: var(--radius-md); background: #ddd; }
.ln-act span { display: block; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--black); line-height: 1.3; }
.ub-row { margin-bottom: 10px; font-size: 13.5px; line-height: 1.45; color: rgba(10,10,10,.75); }
.ub-row b { display: block; color: var(--black); font-size: 14px; }
/* which ticket opens which door */
.zc-tickets { margin-top: 4px; }
.tk-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45; margin-bottom: 5px; }
.tk-mark { flex: none; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; margin-top: 1px; }
.tk-row.ok { color: var(--black); }
.tk-row.ok .tk-mark { background: #1f7a3d; color: var(--white); }
.tk-row.no { color: rgba(10,10,10,.45); }
.tk-row.no .tk-mark { background: rgba(10,10,10,.15); color: rgba(10,10,10,.55); }
.tk-note { font-size: 12px; line-height: 1.45; color: rgba(10,10,10,.6); margin-top: 8px; padding-left: 25px; }

/* footer credit + bank disclaimers inside the panel */
.credit { font-size: 11px; color: rgba(10,10,10,.5); text-align: center; padding: 14px 20px 4px; line-height: 1.5; }
.disc { font-size: 8.5px; color: rgba(10,10,10,.42); line-height: 1.5; margin-top: 8px; }
.choice-disc { font-size: 8px; color: rgba(10,10,10,.5); text-align: center; line-height: 1.5; margin-top: 4px; }

/* admin route editor */
.wp-dot { position: absolute; transform: translate(-50%, -50%); width: 20px; height: 20px; border-radius: 50%; background: var(--orange); color: var(--white); border: 2px solid var(--white); display: grid; place-items: center; font-size: 10px; font-weight: 700; pointer-events: none; }
#adminBar { position: absolute; left: 10px; right: 10px; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 45; background: var(--black); border: 2px solid var(--orange); border-radius: var(--radius-md); padding: 10px 12px; }
#adminBar .ab-title { font-size: 11px; font-weight: 700; color: var(--yellow); margin-bottom: 6px; line-height: 1.4; }
#adminBar .ab-coords { font: 10px/1.4 monospace; color: rgba(255,255,255,.75); max-height: 54px; overflow-y: auto; margin-bottom: 8px; word-break: break-all; user-select: text; -webkit-user-select: text; }
#adminBar .ab-row { display: flex; gap: 6px; align-items: center; }
#adminBar .ab-row button { flex: 1; background: #222; color: var(--white); border-radius: 8px; padding: 9px 4px; font-size: 12px; font-weight: 700; }
#adminBar .ab-row button:last-child { background: var(--orange); }
#adminExport { position: fixed; inset: 0; z-index: 120; background: rgba(10,10,10,.7); display: grid; place-items: center; padding: 20px; }
#adminExport .ax-box { background: var(--offwhite); border-radius: var(--radius-lg); padding: 16px; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 10px; }
#adminExport .ax-head { font-weight: 700; font-size: 13px; color: var(--black); }
#adminExport textarea { width: 100%; height: 40vh; font: 11px/1.4 monospace; border-radius: 8px; border: 1px solid #999; padding: 8px; color: var(--black); background: var(--white); }
#adminExport button { background: var(--black); color: var(--white); border-radius: 999px; padding: 12px; font-weight: 700; }

/* ============================================================ desktop
   The bottom sheet becomes a Google Maps style panel on the left, the
   opening choice and the quiz become centred cards, and the floating
   map controls step aside for whatever the panel is covering.
   ============================================================ */
@media (min-width: 720px) {
  body.panel-open { --peta-panel: min(420px, 34vw); }

  /* ---- panel ---- */
  .sheet {
    top: var(--peta-top); bottom: 20px; left: 20px; right: auto;
    width: min(420px, 34vw); max-height: none;
    border-radius: var(--radius-xl);
    box-shadow: 0 22px 60px rgba(0,0,0,.32);
    transform: translateX(calc(-100% - 28px));
    transition: transform .55s var(--ease-out);
    touch-action: auto;
  }
  .sheet.up, .sheet.peek { transform: translateX(0); }
  .sheet.mini { transform: translateX(calc(-100% - 28px)); }
  .sheet.mini .sheet-body { pointer-events: auto; }
  .sheet-grab { display: none; }
  .sheet-head { padding: 22px 62px 14px 22px; flex-direction: column; align-items: flex-start; gap: 4px; touch-action: auto; }
  .sheet-title { font-size: 30px; }
  .sheet-body { padding: 0 18px 22px; }

  .sheet-close {
    display: grid; place-items: center; position: absolute; z-index: 3;
    top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 50%;
    background: rgba(10,10,10,.08); color: var(--black); font-size: 14px; line-height: 1;
    cursor: pointer; transition: background .2s, transform .25s var(--ease-pop);
  }
  .sheet-close:hover { background: rgba(10,10,10,.16); }
  .sheet-close:active { transform: scale(.9); }

  #panelToggle {
    display: grid; place-items: center; position: fixed; z-index: 41;
    top: var(--peta-tools-top); left: 20px; width: 40px; height: 40px; border-radius: 50%;
    background: var(--black); color: var(--white); font-size: 20px; line-height: 1;
    box-shadow: 0 8px 24px rgba(0,0,0,.3); cursor: pointer;
    transition: left .55s var(--ease-out), transform .25s var(--ease-pop);
  }
  #panelToggle:active { transform: scale(.92); }
  #panelToggle::before { content: "\203A"; }               /* open it */
  body.panel-open #panelToggle { left: calc(32px + min(420px, 34vw)); }
  body.panel-open #panelToggle::before { content: "\2039"; } /* close it */

  /* ---- map tools take the top right slot the page nav used to hold ---- */
  .peta-tools {
    top: var(--peta-tools-top); left: auto; right: 16px; width: auto; gap: 8px;
  }
  .peta-tools .pill { font-size: 13.5px; padding: 11px 18px; }
  #geoBtn { width: 42px; height: 42px; padding: 0; justify-content: center; font-size: 17px; }

  .filter-row {
    bottom: 26px; left: calc(var(--peta-panel) + 44px); right: auto;
    justify-content: flex-start; transition: left .55s var(--ease-out);
  }
  .map-actions {
    bottom: 26px; left: auto; right: 20px; width: auto;
  }
  .map-actions .pill { flex: none; padding: 14px 26px; }

  #toast { top: calc(var(--peta-top) + 8px); }

  /* ---- opening choice, centred card ---- */
  .choice-title { font-size: 44px; margin-bottom: 10px; }
  .choice-btn { padding: 20px 26px; font-size: 18px; }
  .choice-btn small { font-size: 13px; }

  /* ---- quiz, centred column ---- */
  .q-card { padding: 0; align-items: center; justify-content: center; }
  .q-card > * { width: min(680px, calc(100vw - 48px)); }
  .q-opts { flex: none; max-height: 52vh; }
  .q-head { font-size: 54px; }
  .q-sub { font-size: 16px; }
  .q-opt { min-height: 92px; }

  /* ---- reveal ---- */
  .rev-name { font-size: clamp(48px, 6vw, 80px); }
  .rev-tag { max-width: 420px; }
}

/* the desktop panel keeps its own scroll, so the map never scrolls the page */
@media (min-width: 720px) {
  body.peta-page .site-header { z-index: 55; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .q-card.in .q-opt, #choice.on .choice-title, #choice.on .choice-btn, .stop-num.in,
  #reveal.on .rev-kicker, #reveal.on .rev-name, #reveal.on .rev-tag { animation-duration: .01s; animation-delay: 0s; }
  .sheet { transition-duration: .01s; }
}

/* ------------------------------------------------------------------
   Header fit. The shipped nav had 3 items and sat on one row beside the
   language toggle; the full site nav is 9 items (707px), which runs off
   the right edge below ~1200px. Let the row wrap, and tighten the pills
   on narrow desktops so it stays on one line as long as it reasonably can.
   ------------------------------------------------------------------ */
@media (min-width: 720px) {
  body.peta-page .site-header { gap: 16px; }
  body.peta-page .header-top-row { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
}
@media (min-width: 720px) and (max-width: 1319px) {
  body.peta-page .pill-nav a { padding: 6px 11px; font-size: 13px; }
  body.peta-page .lang-toggle button { padding: 5px 10px; font-size: 12px; }
}
/* the tightest desktop band: shrink once more so the full nav stays on one
   line as long as it reasonably can. The nav wraps rather than overflowing if
   it still runs out of room, so these bands are cosmetic, not load-bearing. */
@media (min-width: 720px) and (max-width: 959px) {
  body.peta-page .pill-nav { padding: 4px 6px; }
  body.peta-page .pill-nav a { padding: 6px 8px; font-size: 12px; }
  body.peta-page .header-logo img { height: 24px; }
}
/* below this the logo is what tips it over, so shrink that too rather than
   letting the nav collapse to an unreadable size */
@media (min-width: 720px) and (max-width: 819px) {
  body.peta-page .pill-nav a { padding: 5px 6px; font-size: 11.5px; }
  body.peta-page .header-logo img { height: 21px; }
}