/* Now on: the live festival map (api/static/ds/now-on.js). Phone: bar, map, then the list under it.
   Wide: the list on the left, the map filling the rest. Dots take the colour of what's on; tokens from tokens.css. */
.now{--c:#888;--on-c:#fff;display:flex;flex-direction:column;min-height:0;color:var(--ink);font:400 14px/1.45 var(--sans)}
.now button{font:inherit;color:inherit}
.now .btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:9px 12px;min-height:38px;
  border:1px solid var(--ink);background:var(--ink);color:var(--paper);font:600 12px/1 var(--mono)}
.now .btn.ghost{background:transparent;color:var(--ink)}
.now .btn svg{width:13px;height:13px;fill:currentColor}
.now .btn:focus-visible,.now button:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

.now-bar{display:flex;flex-direction:column;gap:9px;padding:10px 0 10px}
.now-row{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
/* the moment, unboxed: a status light, the time in the dot face, and Change. Tap it to pick another time */
.now-when{all:unset;cursor:pointer;box-sizing:border-box;display:inline-flex;align-items:center;gap:9px;padding:6px 2px;color:var(--ink)}
.now-led{width:8px;height:8px;border-radius:50%;background:var(--mute);flex:none}
.now.live .now-led{background:#e5383b;box-shadow:0 0 0 3px rgba(229,56,59,.2)}
@media (prefers-reduced-motion:no-preference){.now.live .now-led{animation:now-blink 1.6s steps(2) infinite}}
@keyframes now-blink{50%{opacity:.25}}
.now-label{font:800 17px/1 var(--dot);letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.now-when small{display:inline-flex;align-items:center;gap:4px;font:600 11px/1 var(--mono);color:var(--mute);text-decoration:underline;text-underline-offset:3px}
.now-when small svg{width:12px;height:12px}
.now-when:hover small{color:var(--ink)}
.now-when:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
/* Now on / Starting soon: the system's square segmented switch (the plan page's .map-pick) */
.now-modes{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;margin-left:auto;border:1px solid var(--ink)}
.now-thumb{display:none}
.now-modes button{all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 14px;
  font:600 12px/1 var(--mono);white-space:nowrap;color:var(--ink)}
.now-modes button+button{border-left:1px solid var(--ink)}
.now-modes button[aria-checked=true]{background:var(--ink);color:var(--paper)}
.now-modes button:focus-visible{outline:2px solid var(--signal);outline-offset:1px}
.now-modes em{font:500 11px/1 var(--mono);font-style:normal;opacity:.7}
.now-row{align-items:center}
@media (max-width:560px){.now-modes:not(.now-scope){flex:1 1 100%;margin-left:0}}
/* pick another moment: the system's square fields and buttons */
.now-picker{display:flex;flex-wrap:wrap;align-items:end;gap:8px;padding:12px;border:1px solid var(--ink);background:var(--card)}
.now-picker[hidden]{display:none}
.now-picker label{display:flex;flex-direction:column;gap:5px;font:600 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.now-picker select,.now-span select{appearance:none;-webkit-appearance:none;box-sizing:border-box;min-height:38px;padding:8px 30px 8px 10px;border:1px solid var(--ink);
  border-radius:0;background:var(--paper) no-repeat right 10px center/10px 6px;color:var(--ink);font:600 14px/1 var(--mono);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E")}
.now-picker select:focus-visible,.now-span select:focus-visible{outline:2px solid var(--signal);outline-offset:1px}
/* Starting soon's clock: how many hours ahead, 1 to 12 */
.now-span{display:flex;align-items:center;gap:8px;font:600 12px/1 var(--mono);color:var(--mute)}
.now-span[hidden]{display:none}
.now-span>svg{width:14px;height:14px;color:var(--ink)}
.now-span select{min-height:34px;padding:6px 28px 6px 10px;font-size:13px}

.now-search[hidden]{display:none}
.now-search{display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid var(--ink);background:var(--card)}
.now-search svg{width:15px;height:15px;flex:none;color:var(--mute)}
.now-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:500 16px/1 var(--sans);padding:11px 0;outline:0}
.now-search input::-webkit-search-cancel-button{display:none}
.now-search:focus-within{outline:2px solid var(--signal);outline-offset:1px}
.now-clear{all:unset;cursor:pointer;font:22px/1 sans-serif;color:var(--mute);padding:0 4px}

.now-cats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -2px;padding:0 2px}
.now-tags{display:flex;flex-wrap:wrap;gap:6px}
.now-cats::-webkit-scrollbar{display:none}
.now-cats button{all:unset;cursor:pointer;flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid var(--line);
  font:600 12px/1 var(--mono)}
.now-cats button i{display:inline-flex;width:14px;height:14px;color:var(--c)}
.now-cats button i:empty{width:9px;height:9px;margin:2px;border-radius:50%;background:var(--c)}
.now-cats button[aria-pressed=false]{opacity:.45}
.now .gl{flex:none;width:14px;height:14px;fill:currentColor}
.now-tags[hidden]{display:none}
/* phones: one sideways row, like the kinds above, so the map starts higher */
@media (max-width:560px){.now-tags{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
  .now-tags::-webkit-scrollbar{display:none}
  .now-tags .now-more{order:-1}  /* first, so it is seen without swiping along the row */
  .now-tags.open{flex-wrap:wrap;overflow:visible;margin:0;padding:0}}  /* "+N tags" opens every tag downward */
.now-tags button{all:unset;cursor:pointer;flex:none;display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border:1px dashed var(--line);font:500 11px/1 var(--mono);color:var(--mute)}
.now-tags .gl{width:12px;height:12px;color:var(--ink)}
.now-tags button[aria-pressed=true] .gl{color:var(--paper)}
.now-tags button em{font-style:normal;margin-left:5px;opacity:.7}
.now-tags .now-more{border-style:solid;color:var(--ink);font-weight:700}
.now-tags button[aria-pressed=true]{border-style:solid;border-color:var(--ink);background:var(--ink);color:var(--paper)}

.now-body{display:flex;flex-direction:column;min-height:0}
.now-mapwrap{position:relative;height:58vh;height:58dvh;min-height:320px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.now-map{position:absolute;inset:0;background:var(--paper)}
.now-locate{all:unset;cursor:pointer;position:absolute;right:10px;bottom:34px;z-index:2;display:grid;place-items:center;width:42px;height:42px;
  border-radius:50%;background:var(--card);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.now-locate svg{width:20px;height:20px}
.now-locate[aria-pressed=true]{color:#1d7fa8}
.now-key{position:absolute;left:8px;top:8px;z-index:2;display:flex;flex-wrap:wrap;gap:4px 10px;max-width:calc(100% - 70px);padding:5px 8px;
  background:color-mix(in srgb,var(--card) 88%,transparent);font:500 10px/1.2 var(--mono);color:var(--mute);pointer-events:none}
.now-key span{display:inline-flex;align-items:center;gap:4px}
.now-key i{width:9px;height:9px;border-radius:50%;background:var(--ink)}
.now-key .k-maybe{background:transparent;box-shadow:inset 0 0 0 2px var(--ink)}
.now-key .k-end{opacity:.35}
.now-key .k-mine{display:inline-grid;place-items:center;width:12px;height:12px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--ink);color:var(--paper)}
.now-key .k-mine svg{width:7px;height:7px;transform:rotate(45deg)}

/* markers */
/* no all:unset or position here: MapLibre positions the marker element absolutely */
.nm{border:0;margin:0;padding:0;background:none;color:inherit;font:inherit;cursor:pointer;display:flex;align-items:center;gap:5px}
.nm-dot{box-sizing:border-box;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--c);
  border:2px solid var(--paper);box-shadow:0 0 0 1px rgba(0,0,0,.28);transition:width var(--sp-motion),height var(--sp-motion)}
.nm.maybe .nm-dot{background:var(--paper);border:2.5px solid var(--c);box-shadow:0 0 0 1px var(--paper)}
.nm.ending{opacity:.42}
.now[data-zoom=icon] .nm-dot,.now[data-zoom=label] .nm-dot{width:18px;height:18px}
/* a venue holding something in your plan: a pin in the event's colour with a star, drawn above the dots */
.nm.saved{z-index:2}
.nm-pin{position:relative;display:grid;place-items:center;width:26px;height:26px;margin-top:-22px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--c);border:2px solid var(--paper);box-shadow:0 1px 4px rgba(0,0,0,.4)}
.nm-pin svg{width:13px;height:13px;transform:rotate(45deg);color:var(--on-c)}
.nm.saved .nm-name{display:block;margin-top:-22px}
.now[data-zoom=dot] .nm.saved .nm-name{display:none}
.nm-name{position:absolute;left:calc(100% + 3px);top:50%;transform:translateY(-50%);display:none;white-space:nowrap;max-width:150px;overflow:hidden;
  text-overflow:ellipsis;padding:3px 6px;background:var(--card);color:var(--ink);font:600 11px/1.2 var(--sans);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.nm-name b{font:700 10px/1 var(--mono)}
.now[data-zoom=label] .nm-name,.nm:hover .nm-name,.nm:focus-visible .nm-name,.nm.sel .nm-name,.nm.saved .nm-name{display:block}
.nm.clash:not(:hover):not(:focus-visible):not(.sel) .nm-name{display:none}
.nm:hover,.nm:focus-visible,.nm.sel{z-index:3}
.nm.sel .nm-dot{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--c)}
.nm.sel .nm-pin{box-shadow:0 0 0 3px var(--c)}
.nm.sel{opacity:1}
.nc{border:0;margin:0;padding:0;color:inherit;font:inherit;cursor:pointer;box-sizing:border-box;display:grid;place-items:center;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.nc span{display:grid;place-items:center;width:calc(100% - 9px);height:calc(100% - 9px);border-radius:50%;background:var(--card);color:var(--ink);
  font:700 12px/1 var(--mono)}
.nc:hover span{background:var(--paper)}
.now-place{display:grid;place-items:center;width:26px;height:26px;border-radius:6px;background:var(--paper);color:var(--ink);
  border:2px solid var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.35)}
.now-place svg{width:15px;height:15px}
/* you are here: a blue arrow in a white disc with a soft halo */
.now-here{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff;color:#1a73e8;
  box-shadow:0 0 0 6px rgba(26,115,232,.22),0 1px 4px rgba(0,0,0,.35)}
.now-here svg{width:15px;height:15px}

/* the home's compact map: the kinds, one line and the map, no clock; a tap on a place opens it beside the map (under it
   on a phone), the way the plan page's map does */
.now-mini{display:none}
.now-scope{display:none}
/* the home map's title is its switch: two words in the dot face, the one showing dark and underlined, no box */
.now.compact .now-scope{display:flex;gap:22px;align-self:flex-start;margin:0;border:0}
.now.compact .now-scope button{padding:0 0 5px;border:0;border-bottom:2px solid transparent;background:none;color:var(--mute);
  font:800 19px/1.1 var(--dot)}
.now.compact .now-scope button+button{border-left:0}
.now.compact .now-scope button[aria-checked=true]{background:none;color:var(--ink);border-bottom-color:currentColor}
.now.compact .now-scope button:hover{color:var(--ink)}
.now.compact .now-scope em{font:800 13px/1 var(--dot);opacity:1}
.ev-time .rel.day{margin:0 4px 0 0;font-weight:600;color:var(--ink)}
.now.compact .now-mini{display:block;margin:0;font:600 12px/1.4 var(--mono);color:var(--mute)}
.now-mini b{color:var(--ink)}
.now-mini button{all:unset;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.now.compact :is(.now-span,.now-picker,.now-list,.now-key,.now-when){display:none}
/* the home keeps the plan page's On now / Starting soon switch and the genre tags; the clock stays on the map page */
.now.compact .now-row{display:flex}
.now.compact .now-modes:not(.now-scope){margin-left:0}
.now.compact.mine :is(.now-tags,.now-cats){display:none}  /* a plan's handful of stars needs no kinds or tags; the switch stays */
.now.compact:not(.picked) .now-side{display:none}
.now.compact .now-bar{padding:6px 0 10px;gap:8px}
.now.compact .now-mapwrap{height:min(56vh,380px);min-height:260px}

/* the list and the venue sheet */
.now-side{padding:12px 0 24px}
.now-count{margin:0 0 8px;font:500 12px/1.5 var(--mono);color:var(--mute)}
.now-count b{color:var(--ink)}
.now-all{all:unset;cursor:pointer;text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
.now-sort{display:block}
.now-empty{margin:12px 0;color:var(--mute)}
.now-list ul,.now-venue ul{list-style:none;margin:0;padding:0}
.now-list li+li{border-top:1px solid var(--line)}
.now-list li button{all:unset;cursor:pointer;box-sizing:border-box;width:100%;display:flex;gap:11px;align-items:flex-start;padding:11px 2px}
.now-list li button:hover{background:var(--card)}
.now-list .dot,.now-venue .dot{flex:none;width:11px;height:11px;margin-top:5px;border-radius:50%;background:var(--c)}
.now-list .maybe .dot{background:transparent;box-shadow:inset 0 0 0 2px var(--c)}
.now-list .ending{opacity:.55}
.now-list .tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.now-list .tx b{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font:700 15px/1.25 var(--sans)}
.now-list .tx span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.now-list .tx small{font:500 11px/1.4 var(--mono);color:var(--mute)}
.now .ic{display:inline-flex;width:14px;height:14px;color:var(--k)}
.now .ic svg{width:100%;height:100%;fill:currentColor}
.now .mine{display:inline-flex;align-items:center;gap:3px;font:600 10px/1 var(--mono);color:var(--mute)}
.now .mine svg{width:10px;height:10px}
.now-venue[hidden],.now-list[hidden]{display:none}
.now-back{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:5px;font:600 11px/1 var(--mono);color:var(--mute);padding:4px 0 12px}
.now-back svg{width:13px;height:13px}
.now-back .fold,.now-back .side{display:inline-flex}
.now-back .fold{display:none}
@media (max-width:899px){.now-back .side{display:none}.now-back .fold{display:inline-flex}}
.now.compact.mine .now-cats{display:none}
.now-venue header h3{display:flex;align-items:flex-start;gap:7px;margin:0;font:800 23px/1.15 var(--sans)}
.now-venue .pin{flex:none;display:inline-flex;width:20px;height:20px;margin-top:3px;color:var(--signal)}
.now-venue .pin svg{width:100%;height:100%}
.now-venue .where{margin:5px 0 0 27px;font:400 13px/1.4 var(--sans);color:var(--mute)}
.now-venue .links{display:flex;gap:16px;margin:6px 0 0 27px;font:600 11.5px/1 var(--mono)}
.now-venue .links a,.now-later a{display:inline-flex;align-items:center;gap:4px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.now-venue .links svg{width:11px;height:11px}
/* one event, like an Ask row and a blog pick: square, ruled, the times lit in the dot face in the event's colour, the tags as
   chips with their glyphs, then the blurb and "for fans of" as an Ask row has them */
.now-venue .evs{display:flex;flex-direction:column;margin-top:16px;border-top:1px solid var(--ink)}
.now-venue .ev{display:grid;grid-template-columns:minmax(0,1fr);padding:14px 0;border-bottom:1px solid var(--line)}
.now-venue .ev.ending{opacity:.6}
.ev-main{min-width:0}
.ev-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;font:500 10.5px/1.2 var(--mono);color:var(--mute)}
.ev-cat{display:inline-flex;align-items:center;gap:5px;color:var(--c);font:700 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.ev-cat .gl{width:13px;height:13px}
.ev-pro{padding:3px 5px;border:1px solid currentColor;font-size:9.5px}
.now-venue h4{margin:7px 0 0;font:700 15px/1.3 var(--mono);color:var(--ink);overflow-wrap:anywhere}
.ev-off{display:inline-flex;align-items:center;margin-left:4px;vertical-align:-1px;color:var(--mute);text-decoration:none}
.ev-off svg{width:13px;height:13px}
.ev-off:hover{color:var(--ink)}
.ev-time{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin:9px 0 0}
.ev-time.maybe{font:600 11px/1.3 var(--mono);color:var(--warn)}
.ev-time .led{font:800 20px/.9 var(--dot);font-variant-numeric:tabular-nums;color:var(--ink)}
.ev-time .to{font:800 16px/.9 var(--dot);color:var(--mute)}
.ev-time .rel{margin-left:6px;font:500 11px/1 var(--mono);color:var(--mute)}
.ev-blurb{grid-column:1/-1;margin:10px 0 0;font:400 12px/1.5 var(--mono);color:var(--ink)}
.ev-fans{display:block;margin-top:3px;color:var(--mute)}
.ev-tags{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px;margin:10px 0 0}
.ev-tags button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border:1px solid var(--line);
  font:500 10.5px/1.2 var(--mono);color:var(--ink)}
.ev-tags button:hover{border-color:var(--ink)}
.ev-tags button:focus-visible{outline:2px solid var(--signal);outline-offset:1px}
.ev-tags .gl{width:12px;height:12px;color:var(--c)}
.ev-warn{grid-column:1/-1;margin:8px 0 0;padding:7px 9px;border-left:3px solid var(--warn);background:var(--paper);font-size:13px}
/* the blog posts' plan choice (curations_page .choose): Add to my plan, then Going / Maybe joined, filled in the event's colour */
.ev-act{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.ev-choose{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.ev-choose button,.ev-act .share{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:34px;padding:8px 10px;border:1px solid var(--ink);color:var(--ink);font:600 10.5px/1 var(--mono)}
.ev-choose .seg{display:inline-flex}
.ev-choose .seg[hidden]{display:none}
.ev-choose .seg button+button{margin-left:-1px}
.ev-choose .seg button[aria-pressed=true]{position:relative;background:var(--c);border-color:var(--c);color:var(--on-c)}
.ev-choose button:focus-visible,.ev-act .share:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.ev-act .share{margin-left:auto;padding:8px 14px;border-color:var(--line)}
.ev-act .share:hover{border-color:var(--ink)}
.ev-act .share svg{width:14px;height:14px}
.now-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.now-flash{margin-left:auto;font:600 11px/1 var(--mono);color:var(--mute)}
.now-flash+.share{margin-left:0}
.ev-fold summary,.now-later summary{cursor:pointer;font:600 12px/1 var(--mono);color:var(--ink);padding:6px 0}
.ev-fold .evs{margin-top:10px}
.now-also{margin:20px 0 0;font:700 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
.now-later{margin-top:18px;border-top:1px solid var(--line);padding-top:10px}
.now-later summary em{font-style:normal;color:var(--mute);margin-left:4px}
.now-later ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:7px}
.now-later li{display:grid;grid-template-columns:48px 1fr auto;gap:8px;align-items:baseline;font-size:13.5px}
.now-later li b{font:800 15px/1 var(--dot);font-variant-numeric:tabular-nums;color:var(--c)}
.now-later li svg{width:12px;height:12px}
.now-fine{margin:16px 0 0;font:400 11.5px/1.4 var(--sans);color:var(--mute)}

/* wide: list beside the map, both filling the window */
@media (min-width:900px){
  .now-body{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);grid-template-areas:"side map";gap:0 24px}
  .now-mapwrap{grid-area:map;height:auto;min-height:520px}
  .now-side{grid-area:side;overflow-y:auto;padding-top:4px}
  .now-page .now-body{height:calc(100dvh - var(--now-top, 230px))}
  .now[data-embedded] .now-body{height:calc(100vh - 300px);min-height:480px}
  .now.compact:not(.picked) .now-body{display:block;height:auto}
  .now.compact .now-mapwrap{height:420px;min-height:0}
  .now.compact.picked .now-body{height:520px}
  .now.compact.picked .now-mapwrap{height:auto}
}
/* dark theme: the category colours are light, so text on them turns dark */
:root[data-theme=dark] .now{--on-c:#0d0f14}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .now{--on-c:#0d0f14}}
.ev-acts{margin:6px 0 0;font:500 12px/1.7 var(--sp-mono,ui-monospace,monospace)}.ev-acts a{color:inherit}
.ev-listen{margin:2px 0 0;font:500 12px/1.6 var(--sp-mono,ui-monospace,monospace)}.ev-listen summary{width:max-content;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ev-listen p{display:flex;flex-wrap:wrap;gap:4px 16px;margin:6px 0 0}.ev-listen a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line,currentColor)}

/* the map (this page's and the plan page's picks map): taller on a phone, and the OpenStreetMap credit a small folded (i) instead of a wide bar */
@media(max-width:899px){
  .now-mapwrap{height:72vh;height:72dvh;min-height:380px}
  .now.compact .now-mapwrap{height:min(74vh,620px);height:min(74dvh,620px);min-height:380px}
}
.maplibregl-ctrl-attrib{font:400 9px/1.3 var(--sans);margin:0 4px 4px 0}
.maplibregl-ctrl-attrib-inner{font-size:9px}

/* the home's one switch: On now / Starting soon / In my plan (a star, like the stars on the map) */
.now:not(.compact) .now-planbtn{display:none}
.now.compact .now-scope{display:none}
.now-planbtn svg{width:12px;height:12px;fill:currentColor;flex:none}
@media(max-width:560px){.now.compact .now-modes button{padding:10px 8px;gap:5px;font-size:11.5px}}
/* your plan on the map: a star in the event's colour, and a bigger star with the count where several meet */
.nm-star{display:grid;place-items:center;width:30px;height:30px;filter:drop-shadow(0 0 0 var(--paper)) drop-shadow(0 1px 3px rgba(0,0,0,.45))}
.nm-star svg{width:100%;height:100%;fill:var(--c);stroke:var(--paper);stroke-width:1.6;stroke-linejoin:round;paint-order:stroke}
.nm.saved .nm-name,.nm.saved:not(.sel) .nm-name{margin-top:0}
.nm.sel .nm-star{filter:drop-shadow(0 0 3px var(--c))}
.nm-starc{all:unset;cursor:pointer;position:relative;display:grid;place-items:center;width:46px;height:46px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
.nm-starc svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--signal);stroke:var(--paper);stroke-width:1.4;stroke-linejoin:round;paint-order:stroke}
.nm-starc b{position:relative;margin-top:3px;font:700 12px/1 var(--mono);color:var(--paper)}
/* the OpenStreetMap credit follows the page: quiet, and dark in the dark theme */
.maplibregl-ctrl-attrib{background:color-mix(in srgb,var(--paper) 72%,transparent)!important;color:var(--mute)}
.maplibregl-ctrl-attrib a{color:var(--mute)!important}
:root[data-theme=dark] .maplibregl-ctrl-attrib-button{filter:invert(1) opacity(.55)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .maplibregl-ctrl-attrib-button{filter:invert(1) opacity(.55)}}

/* the home's switch in the dot face, like the tabs it replaced: the one showing dark and underlined, no box */
.now.compact .now-modes:not(.now-scope){display:flex;flex-wrap:nowrap;gap:clamp(12px,4vw,22px);margin:0;border:0;align-self:flex-start}
.now.compact .now-modes:not(.now-scope) button{padding:0 0 5px;border:0;border-bottom:2px solid transparent;background:none;color:var(--mute);
  font:800 clamp(13px,4.3vw,19px)/1.1 var(--dot)}
.now.compact .now-modes:not(.now-scope) button+button{border-left:0}
.now.compact .now-modes:not(.now-scope) button[aria-checked=true]{background:none;color:var(--ink);border-bottom-color:currentColor}
.now.compact .now-modes:not(.now-scope) button:hover{color:var(--ink)}
.now.compact .now-modes:not(.now-scope) em{font:800 .75em/1 var(--dot);opacity:1}
.now.compact .now-modes:not(.now-scope) .now-planbtn svg{width:.8em;height:.8em}
@media(max-width:560px){.now.compact .now-modes:not(.now-scope) button{padding:0 0 5px;font-size:clamp(13px,4.3vw,19px)}}