/* station map (both flavours) */
.leaflet-container{background:color-mix(in srgb,var(--accent) 6%,var(--bg));font:inherit}
.leaflet-container .leaflet-control-attribution{background:color-mix(in srgb,var(--surface) 85%,transparent);color:var(--muted);font-size:10.5px}
.leaflet-container .leaflet-control-attribution a{color:var(--accent)}
.leaflet-bar a{background:var(--surface);color:var(--text);border-color:var(--border)}
.leaflet-bar a:hover{background:var(--bg)}
.crumb{font:13px var(--mono);color:var(--muted)}.crumb b{color:var(--text)}.crumb a{color:var(--muted)}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}.dot.a{background:var(--accent-2)}.dot.b{background:var(--accent)}
.pin{width:14px;height:14px;border-radius:50%;background:var(--accent-2);border:2.5px solid var(--bg);box-shadow:0 0 0 1px var(--accent-2)}
.pin.main{width:18px;height:18px}
.pin.hot{background:var(--accent);box-shadow:0 0 10px var(--accent)}
.marker-cluster-small,.marker-cluster-medium,.marker-cluster-large{background:color-mix(in srgb,var(--accent-2) 35%,transparent)}
.marker-cluster-small div,.marker-cluster-medium div,.marker-cluster-large div{background:var(--accent-2);color:#04222a;font:700 12px var(--mono)}
.st{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;align-items:start;padding:8px 4px;border-bottom:1px solid var(--border);font-size:12.5px;cursor:default}
.st:last-child{border-bottom:0}
.st.hot{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.st-logo{display:grid;gap:5px;justify-items:start}
.st-info{min-width:0}.st-info>b{display:block;margin:1px 0 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logo-copy{display:block;padding:0;border:0;background:none;border-radius:10px;cursor:copy;line-height:0}
.logo-copy:hover .logo{outline:2px solid var(--accent);outline-offset:1px}
.logo-copy:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* label/value grid: fixed label column so values line up across every row */
.kv{display:grid;grid-template-columns:5.6em minmax(0,1fr);column-gap:8px;row-gap:1px;margin:0;line-height:1.35}
.kv dt{color:var(--muted);font-size:11.5px;white-space:nowrap}
.kv dd{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kv .mono{font:11.5px var(--mono)}
.kv a{color:var(--accent)}
#panel-body>.kv{margin:2px 0 8px;grid-template-columns:6.4em minmax(0,1fr)}
#panel-body>.kv dd{white-space:normal;overflow-wrap:anywhere}
.toast{position:absolute;left:50%;bottom:56px;transform:translate(-50%,8px);z-index:1200;max-width:min(90%,460px);padding:7px 12px;border-radius:8px;background:var(--text);color:var(--bg);font:12px var(--mono);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}
.offscreen{position:fixed;left:-9999px;top:0}
.svc h4{margin:14px 0 8px;font-size:13px}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.svc-grid figure{margin:0;text-align:center;font-size:11px;color:var(--muted)}
.svc-grid .logo{width:100%;height:128px;border-radius:10px}
.svc-grid figcaption{margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.region-label{font:700 12px var(--mono);color:var(--text);text-shadow:0 0 3px var(--bg),0 0 3px var(--bg);white-space:nowrap;pointer-events:none}
.map-attrib{display:none}
.flavour-web .map-attrib{display:block}
#panel-body .themes{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:6px 0 10px}
#panel-body .themes figure{margin:0;text-align:center;font-size:11px;color:var(--muted)}
#panel-body .themes .logo{width:100%;height:auto;aspect-ratio:1}
#panel-body .themes figcaption{margin-top:3px}
#panel-body h4{margin:12px 0 4px;font-size:13px}
/* no click/tap flash: Chrome painted a focus ring around the bounding box of the clicked SVG province path
   (and the container/markers get focus on click); keyboard users still get a subtle orange ring */
.leaflet-container,.leaflet-container *,.leaflet-marker-icon,.marker-cluster,.leaflet-interactive{-webkit-tap-highlight-color:transparent}
.leaflet-container,.leaflet-container:focus,.leaflet-interactive,.leaflet-interactive:focus,.leaflet-marker-icon:focus,.marker-cluster:focus{outline:none}
.leaflet-container.kbd-focus:focus{outline:2px solid color-mix(in srgb,var(--accent) 70%,transparent);outline-offset:-2px}
.leaflet-marker-icon:focus-visible,.marker-cluster:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:50%}
path.leaflet-interactive:focus-visible{stroke:var(--accent);stroke-width:3px;stroke-opacity:1}
/* US stations context layer: canvas in its own pane, never takes pointer events (no click, no focus ring) */
.leaflet-us-pane{z-index:450;pointer-events:none}
.leaflet-us-pane canvas{pointer-events:none}
.leaflet-uscl-pane{z-index:590}
.marker-cluster.us-cluster{background:color-mix(in srgb,var(--accent) 32%,transparent)}
.marker-cluster.us-cluster div{background:var(--accent);color:#fff;font:700 11.5px var(--mono)}
.marker-cluster.us-cluster.marker-cluster-small div{margin:4px;width:22px;height:22px;border-radius:11px}
.marker-cluster.us-cluster.marker-cluster-small span{line-height:22px}
.marker-cluster.us-cluster.marker-cluster-large div{margin:6px;width:30px;height:30px;border-radius:15px}
.marker-cluster.us-cluster.marker-cluster-large span{line-height:30px}
#map-legend .lg-cl{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:color-mix(in srgb,var(--accent) 32%,transparent)}
#map-legend .lg-cl::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--accent)}
.leaflet-tooltip.us-tip{background:var(--surface);color:var(--text);border:1px solid var(--accent);border-radius:8px;padding:7px 9px;
  box-shadow:0 8px 22px rgba(0,0,0,.35);font:12px/1.35 system-ui,sans-serif;white-space:normal;width:max-content;max-width:280px;pointer-events:none}
.leaflet-tooltip-top.us-tip::before{border-top-color:var(--accent)}
.us-tip-b b{font-size:13.5px;color:var(--accent);margin-right:6px}
.us-tip-b .us-svc{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.us-tip-b dl{display:grid;grid-template-columns:auto 1fr;gap:1px 8px;margin:5px 0 0}
.us-tip-b dt{color:var(--muted)}.us-tip-b dd{margin:0}
#map-legend .dot.us{background:var(--accent);opacity:.75;width:7px;height:7px}
/* explorer mascot: bottom left, just right of the zoom buttons, both views preloaded in one box (no layout shift) */
.map-mascot{position:absolute;left:54px;bottom:6px;z-index:480;width:133px;height:180px;line-height:0;pointer-events:none;background:none;border:0;opacity:1;transition:opacity .35s ease}
/* stand below the country, about 30% from the left (his gaze goes up/right at Canada / the USA in the default view) */
.flavour-app .map-mascot{left:max(54px,calc(30% - 66px))}
.map-mascot.mm-off{opacity:0}
.map-mascot[hidden]{display:none}
.map-mascot picture{position:absolute;left:0;bottom:0;visibility:hidden}
.map-mascot img{display:block;width:auto;height:180px;max-width:none;background:none}
.map-mascot[data-view=CA] .mm-ca,.map-mascot[data-view=US] .mm-us{visibility:visible}
@media (max-width:1100px),(max-height:700px){.map-mascot{width:89px;height:120px}.map-mascot img{height:120px}.flavour-app .map-mascot{left:max(54px,calc(27% - 44px))}}
@media (prefers-reduced-motion:reduce){.map-mascot{transition:none}}
@media (max-width:900px){.map-mascot{display:none}}
/* show/hide panels: third button in the zoom bar (same Leaflet bar look); focus ring for keyboard users only */
.leaflet-bar a.leaflet-control-panels{display:flex;align-items:center;justify-content:center}
.leaflet-bar a.leaflet-control-panels svg{display:block}
.leaflet-bar a.leaflet-control-panels[aria-pressed=false]{color:var(--accent)}
.leaflet-bar a:focus{outline:none}
.leaflet-bar.kbd a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mapwrap.panels-off #map-controls,.mapwrap.panels-off #map-panel{display:none}
/* movable cards: drag by the grip strip at the top (app view, wider than 900 px); double-click or Home resets */
.mf-grip{display:none}
.flavour-app .mf-grip{display:flex;align-items:center;justify-content:center;flex:none;width:calc(100% + 8px);height:12px;margin:-8px -4px 0;padding:0;border:0;border-radius:6px;background:none;color:var(--muted);cursor:grab;touch-action:none}
.flavour-app .mf-grip span{display:block;width:36px;height:4px;border-radius:2px;background:currentColor;opacity:.45}
.flavour-app .mf-grip:hover span{opacity:.9;background:var(--accent)}
.flavour-app .mf-grip:focus{outline:none}
.flavour-app .mf-grip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.flavour-app #map-panel .mf-grip{margin:-4px -4px 4px}
.map-float.dragging{opacity:.94;box-shadow:0 18px 40px rgba(0,0,0,.5);user-select:none}
.map-float.dragging .mf-grip{cursor:grabbing}
@media (max-width:900px){.flavour-app .mf-grip{display:none}}