/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/JetBrainsMono-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/JetBrainsMono-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/JetBrainsMono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/JetBrainsMono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Onest-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Onest-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Onest-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Onest-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/Onest-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/Onest-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/Onest-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/Onest-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/Onest-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/Onest-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/Onest-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/Onest-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/Unbounded-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/Unbounded-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/Unbounded-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/Unbounded-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.leaflet-image-layer,.leaflet-layer,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-pane,.leaflet-pane>canvas,.leaflet-pane>svg,.leaflet-tile,.leaflet-tile-container,.leaflet-zoom-box{position:absolute;left:0;top:0}.leaflet-container{overflow:hidden}.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.leaflet-tile::selection{background:0 0}.leaflet-safari .leaflet-tile{image-rendering:-webkit-optimize-contrast}.leaflet-safari .leaflet-tile-container{width:1600px;height:1600px;-webkit-transform-origin:0 0}.leaflet-marker-icon,.leaflet-marker-shadow{display:block}.leaflet-container .leaflet-overlay-pane svg{max-width:none!important;max-height:none!important}.leaflet-container .leaflet-marker-pane img,.leaflet-container .leaflet-shadow-pane img,.leaflet-container .leaflet-tile,.leaflet-container .leaflet-tile-pane img,.leaflet-container img.leaflet-image-layer{max-width:none!important;max-height:none!important;width:auto;padding:0}.leaflet-container img.leaflet-tile{mix-blend-mode:plus-lighter}.leaflet-container.leaflet-touch-zoom{-ms-touch-action:pan-x pan-y;touch-action:pan-x pan-y}.leaflet-container.leaflet-touch-drag{-ms-touch-action:pinch-zoom;touch-action:none;touch-action:pinch-zoom}.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom{-ms-touch-action:none;touch-action:none}.leaflet-container{-webkit-tap-highlight-color:transparent}.leaflet-container a{-webkit-tap-highlight-color:rgba(51,181,229,.4)}.leaflet-tile{filter:inherit;visibility:hidden}.leaflet-tile-loaded{visibility:inherit}.leaflet-zoom-box{width:0;height:0;-moz-box-sizing:border-box;box-sizing:border-box;z-index:800}.leaflet-overlay-pane svg{-moz-user-select:none}.leaflet-pane{z-index:400}.leaflet-tile-pane{z-index:200}.leaflet-overlay-pane{z-index:400}.leaflet-shadow-pane{z-index:500}.leaflet-marker-pane{z-index:600}.leaflet-tooltip-pane{z-index:650}.leaflet-popup-pane{z-index:700}.leaflet-map-pane canvas{z-index:100}.leaflet-map-pane svg{z-index:200}.leaflet-vml-shape{width:1px;height:1px}.lvml{behavior:url(#default#VML);display:inline-block;position:absolute}.leaflet-control{position:relative;z-index:800;pointer-events:visiblePainted;pointer-events:auto}.leaflet-bottom,.leaflet-top{position:absolute;z-index:1000;pointer-events:none}.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}.leaflet-control{float:left;clear:both}.leaflet-right .leaflet-control{float:right}.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{margin-right:10px}.leaflet-fade-anim .leaflet-popup{opacity:0;-webkit-transition:opacity .2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear}.leaflet-fade-anim .leaflet-map-pane .leaflet-popup{opacity:1}.leaflet-zoom-animated{-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}svg.leaflet-zoom-animated{will-change:transform}.leaflet-zoom-anim .leaflet-zoom-animated{-webkit-transition:-webkit-transform .25s cubic-bezier(0,0,.25,1);-moz-transition:-moz-transform .25s cubic-bezier(0,0,.25,1);transition:transform .25s cubic-bezier(0,0,.25,1)}.leaflet-pan-anim .leaflet-tile,.leaflet-zoom-anim .leaflet-tile{-webkit-transition:none;-moz-transition:none;transition:none}.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}.leaflet-interactive{cursor:pointer}.leaflet-grab{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.leaflet-crosshair,.leaflet-crosshair .leaflet-interactive{cursor:crosshair}.leaflet-control,.leaflet-popup-pane{cursor:auto}.leaflet-dragging .leaflet-grab,.leaflet-dragging .leaflet-grab .leaflet-interactive,.leaflet-dragging .leaflet-marker-draggable{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.leaflet-image-layer,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-pane>svg path,.leaflet-tile-container{pointer-events:none}.leaflet-image-layer.leaflet-interactive,.leaflet-marker-icon.leaflet-interactive,.leaflet-pane>svg path.leaflet-interactive,svg.leaflet-image-layer.leaflet-interactive path{pointer-events:visiblePainted;pointer-events:auto}.leaflet-container{background:#ddd;outline-offset:1px}.leaflet-container a{color:#0078a8}.leaflet-zoom-box{border:2px dotted #38f;background:rgba(255,255,255,.5)}.leaflet-container{font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;font-size:12px;font-size:.75rem;line-height:1.5}.leaflet-bar{box-shadow:0 1px 5px rgba(0,0,0,.65);border-radius:4px}.leaflet-bar a{background-color:#fff;border-bottom:1px solid #ccc;width:26px;height:26px;line-height:26px;display:block;text-align:center;text-decoration:none;color:#000}.leaflet-bar a,.leaflet-control-layers-toggle{background-position:50% 50%;background-repeat:no-repeat;display:block}.leaflet-bar a:focus,.leaflet-bar a:hover{background-color:#f4f4f4}.leaflet-bar a:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.leaflet-bar a:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:none}.leaflet-bar a.leaflet-disabled{cursor:default;background-color:#f4f4f4;color:#bbb}.leaflet-touch .leaflet-bar a{width:30px;height:30px;line-height:30px}.leaflet-touch .leaflet-bar a:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.leaflet-touch .leaflet-bar a:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.leaflet-control-zoom-in,.leaflet-control-zoom-out{font:bold 18px 'Lucida Console',Monaco,monospace;text-indent:1px}.leaflet-touch .leaflet-control-zoom-in,.leaflet-touch .leaflet-control-zoom-out{font-size:22px}.leaflet-control-layers{box-shadow:0 1px 5px rgba(0,0,0,.4);background:#fff;border-radius:5px}.leaflet-control-layers-toggle{background-image:url(images/layers.png);width:36px;height:36px}.leaflet-retina .leaflet-control-layers-toggle{background-image:url(images/layers-2x.png);background-size:26px 26px}.leaflet-touch .leaflet-control-layers-toggle{width:44px;height:44px}.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none}.leaflet-control-layers-expanded .leaflet-control-layers-list{display:block;position:relative}.leaflet-control-layers-expanded{padding:6px 10px 6px 6px;color:#333;background:#fff}.leaflet-control-layers-scrollbar{overflow-y:scroll;overflow-x:hidden;padding-right:5px}.leaflet-control-layers-selector{margin-top:2px;position:relative;top:1px}.leaflet-control-layers label{display:block;font-size:13px;font-size:1.08333em}.leaflet-control-layers-separator{height:0;border-top:1px solid #ddd;margin:5px -10px 5px -6px}.leaflet-default-icon-path{background-image:url(images/marker-icon.png)}.leaflet-container .leaflet-control-attribution{background:#fff;background:rgba(255,255,255,.8);margin:0}.leaflet-control-attribution,.leaflet-control-scale-line{padding:0 5px;color:#333;line-height:1.4}.leaflet-control-attribution a{text-decoration:none}.leaflet-control-attribution a:focus,.leaflet-control-attribution a:hover{text-decoration:underline}.leaflet-attribution-flag{display:inline!important;vertical-align:baseline!important;width:1em;height:.6669em}.leaflet-left .leaflet-control-scale{margin-left:5px}.leaflet-bottom .leaflet-control-scale{margin-bottom:5px}.leaflet-control-scale-line{border:2px solid #777;border-top:none;line-height:1.1;padding:2px 5px 1px;white-space:nowrap;-moz-box-sizing:border-box;box-sizing:border-box;background:rgba(255,255,255,.8);text-shadow:1px 1px #fff}.leaflet-control-scale-line:not(:first-child){border-top:2px solid #777;border-bottom:none;margin-top:-2px}.leaflet-control-scale-line:not(:first-child):not(:last-child){border-bottom:2px solid #777}.leaflet-touch .leaflet-bar,.leaflet-touch .leaflet-control-attribution,.leaflet-touch .leaflet-control-layers{box-shadow:none}.leaflet-touch .leaflet-bar,.leaflet-touch .leaflet-control-layers{border:2px solid rgba(0,0,0,.2);background-clip:padding-box}.leaflet-popup{position:absolute;text-align:center;margin-bottom:20px}.leaflet-popup-content-wrapper{padding:1px;text-align:left;border-radius:12px}.leaflet-popup-content{margin:13px 24px 13px 20px;line-height:1.3;font-size:13px;font-size:1.08333em;min-height:1px}.leaflet-popup-content p{margin:17px 0;margin:1.3em 0}.leaflet-popup-tip-container{width:40px;height:20px;position:absolute;left:50%;margin-top:-1px;margin-left:-20px;overflow:hidden;pointer-events:none}.leaflet-popup-tip{width:17px;height:17px;padding:1px;margin:-10px auto 0;pointer-events:auto;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#fff;color:#333;box-shadow:0 3px 14px rgba(0,0,0,.4)}.leaflet-container a.leaflet-popup-close-button{position:absolute;top:0;right:0;border:none;text-align:center;width:24px;height:24px;font:16px/24px Tahoma,Verdana,sans-serif;color:#757575;text-decoration:none;background:0 0}.leaflet-container a.leaflet-popup-close-button:focus,.leaflet-container a.leaflet-popup-close-button:hover{color:#585858}.leaflet-popup-scrolled{overflow:auto}.leaflet-oldie .leaflet-popup-content-wrapper{-ms-zoom:1}.leaflet-oldie .leaflet-popup-tip{width:24px;margin:0 auto}.leaflet-oldie .leaflet-control-layers,.leaflet-oldie .leaflet-control-zoom,.leaflet-oldie .leaflet-popup-content-wrapper,.leaflet-oldie .leaflet-popup-tip{border:1px solid #999}.leaflet-div-icon{background:#fff;border:1px solid #666}.leaflet-tooltip{position:absolute;padding:6px;background-color:#fff;border:1px solid #fff;border-radius:3px;color:#222;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,.4)}.leaflet-tooltip.leaflet-interactive{cursor:pointer;pointer-events:auto}.leaflet-tooltip-bottom:before,.leaflet-tooltip-left:before,.leaflet-tooltip-right:before,.leaflet-tooltip-top:before{position:absolute;pointer-events:none;border:6px solid transparent;background:0 0;content:""}.leaflet-tooltip-bottom{margin-top:6px}.leaflet-tooltip-top{margin-top:-6px}.leaflet-tooltip-bottom:before,.leaflet-tooltip-top:before{left:50%;margin-left:-6px}.leaflet-tooltip-top:before{bottom:0;margin-bottom:-12px;border-top-color:#fff}.leaflet-tooltip-bottom:before{top:0;margin-top:-12px;margin-left:-6px;border-bottom-color:#fff}.leaflet-tooltip-left{margin-left:-6px}.leaflet-tooltip-right{margin-left:6px}.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{top:50%;margin-top:-6px}.leaflet-tooltip-left:before{right:0;margin-right:-12px;border-left-color:#fff}.leaflet-tooltip-right:before{left:0;margin-left:-12px;border-right-color:#fff}@media print{.leaflet-control{-webkit-print-color-adjust:exact;print-color-adjust:exact}}


/* Layout: one-screen tool — dark vector map fills the screen, a side sheet (bottom sheet on phones) holds search, filters and the nearest legal fire pits. Dark only, by choice. */
:root {
  --ground: #141917;
  --panel: #1b211e;
  --raise: #222a26;
  --ink: #e6ebe7;
  --muted: #9aa69f;
  --line: #2f3833;
  --forest: #27432f;
  --water: #24465f;
  --road: #4a534e;
  --ban: #e3584d;
  --ember: #ff7b3a;
  --ember-ink: #1a0f08;
  --off: #66706a;
  --venue: #f1efe8;
  --f-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --f-body: "Onest", "Segoe UI", system-ui, sans-serif;
  --f-data: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --sheet: 0px;
  color-scheme: dark;
}
html, body { height: 100%; overflow: hidden; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--f-body); font-size: 14px; line-height: 1.45; }
[hidden] { display: none !important; }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box; }
svg.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.app { display: grid; grid-template-columns: minmax(0, 1fr) var(--side-w, 380px); height: 100%; position: relative; }
body.side-collapsed .app { grid-template-columns: minmax(0, 1fr) 0; }
body.side-collapsed aside { display: none; }
aside { position: relative; }
.side-tools { position: absolute; top: 10px; right: var(--side-w, 380px); z-index: 950; display: flex; flex-direction: column; gap: 6px; }
body.side-collapsed .side-tools, body.side-collapsed .side-resize { display: none; }
.head-acts { display: flex; align-items: center; gap: 6px; flex: none; }
/* header tools: a language dropdown and a joined group of icon buttons, all 32px tall */
.tool-btn { height: 32px; min-width: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 9px; border: 0; background: none; color: var(--muted); cursor: pointer; font: 600 12px/1 var(--f-body); letter-spacing: 0.04em; }
.tool-btn svg.i { width: 16px; height: 16px; }
.tool-btn:hover { color: var(--ink); background: var(--raise); }
.tool-group { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.tool-group .tool-btn + .tool-btn { border-left: 1px solid var(--line); }
.head-btn.on { color: var(--ember); }
.head-btn.on svg.i { fill: currentColor; }
.lang-dd { position: relative; }
.lang-btn { border: 1px solid var(--line); border-radius: 10px; color: var(--ink); }
.lang-btn .chev { width: 13px; height: 13px; color: var(--muted); transition: transform 0.2s; }
.lang-btn[aria-expanded="true"] { border-color: var(--ember); }
.lang-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.lang-menu.langs { position: fixed; z-index: 1600; min-width: 170px; padding: 5px; display: grid; grid-auto-flow: row; gap: 2px; border-radius: 12px; border: 1px solid var(--line); background: var(--raise); box-shadow: 0 12px 30px rgb(0 0 0 / 0.45); }
.lang-menu.langs button { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 500 13.5px/1 var(--f-body); letter-spacing: 0; cursor: pointer; text-align: left; }
.lang-menu.langs button:hover { background: color-mix(in srgb, var(--ember) 14%, transparent); }
.lang-menu.langs button[aria-pressed="true"] { background: none; border: 0; color: var(--ember); font-weight: 600; }
.lang-menu.langs button[aria-pressed="true"]::after { content: "✓"; }
@media (max-width: 760px) { .head-hide { display: none; } .tool-group .head-btn { border-left: 0; } }
.side-btn { width: 30px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-right: 0; border-radius: 8px 0 0 8px; background: var(--panel); color: var(--muted); cursor: pointer; padding: 0; }
.side-btn:hover { color: var(--ember-ink); background: var(--ember); border-color: var(--ember); }
.side-btn svg.i { width: 16px; height: 16px; }
.side-resize { position: absolute; top: 0; bottom: 0; right: calc(var(--side-w, 380px) - 4px); width: 8px; cursor: col-resize; z-index: 950; }
.side-resize::after { content: ""; position: absolute; top: 50%; left: 3px; width: 2px; height: 44px; margin-top: -22px; border-radius: 2px; background: var(--line); opacity: 0; transition: opacity 0.15s; }
.side-resize:hover::after, body.side-dragging .side-resize::after { opacity: 1; background: var(--ember); }
body.side-dragging { cursor: col-resize; user-select: none; }
.side-open { position: absolute; top: 12px; right: 12px; z-index: 900; display: none; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: 500 13px/1 var(--f-body); cursor: pointer; box-shadow: 0 6px 20px rgb(0 0 0 / 0.4); }
.side-open svg.i { color: var(--ember); }
body.side-collapsed .side-open { display: inline-flex; }
@media (max-width: 760px) { .side-tools, .side-resize, .side-open { display: none !important; } }
#map { background: var(--ground); min-height: 0; }
aside {
  --side-bg: #161c19;
  background: var(--side-bg); border-left: 1px solid var(--line); overflow-y: auto; min-width: 0; gap: 10px;
  padding-block: 8px 24px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex; flex-direction: column;
}
/* sidebar: a stack of cards; secondary ones are accordions */
.blk, details.acc { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 14px; }
.blk.head { border: 0; background: none; padding: 8px 2px 4px; }
/* controls on top, the title below at full width: four language buttons leave no room beside it */
.head-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.head-top h1 { order: 2; flex-basis: 100%; }
.blk-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.blk-head h2 { margin: 0; }
.count { font-size: 12px; color: var(--muted); text-align: right; }
details.acc { padding-block: 0; transition: border-color 0.2s; }
details.acc[open] { border-color: color-mix(in srgb, var(--ink) 14%, var(--line)); }
details.acc > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding-block: 13px; cursor: pointer; font-size: 13.5px; font-weight: 600; }
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary > span:first-child { flex: 1; }
details.acc > summary .chev { width: 16px; height: 16px; color: var(--muted); transition: transform 0.2s; }
details.acc[open] > summary .chev { transform: rotate(180deg); }
details.acc > summary:hover .chev { color: var(--ink); }
.acc-body { padding-bottom: 14px; }
.badge { min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--ember); color: var(--ember-ink); font-size: 11.5px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.badge.soft { background: var(--raise); color: var(--muted); font-weight: 600; }
.btn.reset { justify-self: start; background: none; color: var(--muted); }
.btn.reset:hover { color: var(--ember); border-color: var(--ember); }
/* Debbie, the Rottweiler guide: avatar on the left, a chat bubble on the right */
.deb { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: start; }
.deb-ava { width: 40px; height: 40px; border-radius: 50%; display: block; object-fit: cover; }
.bubble { position: relative; background: var(--raise); border-radius: 4px 14px 14px 14px; padding: 9px 12px 10px; font-size: 13px; line-height: 1.45; min-width: 0; }
.bubble .who { display: block; font-size: 11.5px; font-weight: 600; color: var(--ember); margin-bottom: 2px; }
.bubble .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bubble .acts .btn { padding: 6px 10px; font-size: 12.5px; }
.typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: typing 1.1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .typing i { animation: none; } }
.dlg-title { display: flex; align-items: center; gap: 12px; }
.dlg-title .deb-ava { width: 48px; height: 48px; flex: none; }
.sheet-bar { display: none; }
.head { display: grid; gap: 10px; }
.head .langs { flex: none; }
.langs { display: flex; gap: 4px; justify-self: start; }
.langs button { font: 600 11px/1 var(--f-body); letter-spacing: 0.08em; padding: 6px 9px; border-radius: 6px; border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; }
.langs button[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--ember); outline-offset: 1px; }
h1 { font-family: var(--f-display); font-weight: 600; font-size: 19px; line-height: 1.2; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
.status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--muted); font-size: 13px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; color: var(--ink); }
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--ban); }
#updated.warn { color: var(--ban); font-weight: 600; }

/* where distances are measured from */
.origin { display: grid; gap: 8px; }
.origin { position: relative; }
.suggest { position: absolute; left: 0; right: 0; top: 58px; z-index: 5; margin: 0; padding: 6px; list-style: none; background: var(--raise); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgb(0 0 0 / 0.45); max-height: min(360px, 55dvh); overflow-y: auto; scrollbar-width: thin; }
.suggest .sec { padding: 8px 8px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.suggest .opt { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 8px; border-radius: 7px; cursor: pointer; }
.suggest .opt svg.i { color: var(--muted); }
.suggest .opt b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest .opt b mark { background: none; color: var(--ember); }
.suggest .opt small { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest .opt[aria-selected="true"], .suggest .opt:hover { background: color-mix(in srgb, var(--ember) 14%, transparent); }
.suggest .opt[aria-selected="true"] svg.i { color: var(--ember); }
.suggest .note { padding: 8px; color: var(--muted); font-size: 12.5px; }
.origin-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.search { display: flex; align-items: center; gap: 8px; background: var(--raise); border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; color: var(--muted); min-width: 0; }
.search input { flex: 1; min-width: 0; background: none; border: 0; color: var(--ink); font: inherit; padding: 9px 0; outline: none; }
.search:focus-within { border-color: var(--ember); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 500 13px/1 var(--f-body); padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--raise); color: var(--ink); cursor: pointer; white-space: nowrap; text-decoration: none; }
.btn:hover { border-color: var(--muted); }
.btn.on { border-color: var(--ember); color: var(--ember); }
.origin-now { font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.origin-now b { color: var(--ink); font-weight: 500; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--ember); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* the legend sits under the search, always open, in two columns */
.legend-blk h2 { margin-bottom: 10px; }
.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 12px; font-size: 12.5px; }
.legend div { display: flex; align-items: center; gap: 9px; cursor: help; }
.sw { width: 18px; height: 12px; flex: none; border-radius: 2px; }
.sw.ban { background: color-mix(in srgb, var(--ban) 22%, transparent); border: 1.5px solid var(--ban); }
.sw.forest { background: var(--forest); }
.sw.pit { width: 12px; height: 12px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--ember); margin-inline: 3px; }
.sw.off { width: 8px; height: 8px; border-radius: 50%; background: var(--off); margin-inline: 5px; }
.venue-ico { width: 22px; height: 22px; border-radius: 6px; background: var(--venue); display: grid; place-items: center; box-shadow: 0 0 0 2px var(--panel); flex: none; }
.venue-ico svg { width: 14px; height: 14px; fill: var(--ember); }
.legend .venue-ico { width: 18px; height: 18px; }
.legend .venue-ico svg { width: 11px; height: 11px; }

.filters { display: grid; gap: 12px; padding-top: 2px; }
/* the three ranges as compact dropdowns */
.fsels { display: grid; gap: 8px; }
.fsel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.fsel select { appearance: none; -webkit-appearance: none; min-width: 118px; padding: 7px 30px 7px 11px; border-radius: 10px; border: 1px solid var(--line); color: var(--ink); font: 500 13px/1.2 var(--f-body); cursor: pointer;
  background: var(--ground) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa69f' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 9px center / 14px no-repeat; }
.fsel select:focus-visible { outline: 2px solid var(--ember); outline-offset: 1px; }
/* chip groups fold away; the number shows how many are on */
.fgrp-d { border-top: 1px solid var(--line); padding-top: 10px; }
.fgrp-d > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px; }
.fgrp-d > summary::-webkit-details-marker { display: none; }
.fgrp-d > summary .chev { width: 14px; height: 14px; margin-left: auto; color: var(--muted); transition: transform 0.2s; }
.fgrp-d[open] > summary .chev { transform: rotate(180deg); }
.fgrp-d > .chips, .fgrp-d > .toggles { margin-top: 10px; }
.fcount { min-width: 18px; padding: 1px 6px; border-radius: 999px; background: var(--ember); color: var(--ember-ink); font-size: 11px; font-weight: 700; text-align: center; }
.fcount:empty { display: none; }
/* the two searches */
.fld-lbl { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.fld-lbl svg.i { width: 14px; height: 14px; color: var(--ember); }
.near-box { position: relative; }
.near-suggest { top: 44px; }
/* links to the rules and the about text, above the credits */
.side-links { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 2px 4px; font-size: 12.5px; }
.side-links .linkbtn, .side-links a { color: var(--muted); text-decoration: none; }
.side-links .linkbtn:hover, .side-links a:hover { color: var(--ember); }
.fgrp { display: grid; gap: 9px; min-width: 0; }
.fh { display: flex; align-items: center; gap: 7px; margin: 0; padding: 0; font-size: 12.5px; font-weight: 600; color: var(--ink); letter-spacing: 0; text-transform: none; }
.fh svg.i { width: 15px; height: 15px; color: var(--ember); }
.fh-note { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--muted); }
.seg { border: 0; margin: 0; padding: 0; min-width: 0; }
legend.fh { margin-bottom: 9px; }
.seg-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 3px; background: var(--ground); border: 1px solid var(--line); border-radius: 11px; }
.seg-row input { position: absolute; opacity: 0; pointer-events: none; }
.seg-row label { text-align: center; padding: 7px 4px; border-radius: 8px; font-size: 12.5px; color: var(--muted); cursor: pointer; font-variant-numeric: tabular-nums; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.seg-row label:hover { color: var(--ink); }
.seg-row input:checked + label { background: var(--ember); color: var(--ember-ink); font-weight: 600; box-shadow: 0 2px 10px rgb(255 123 58 / 0.25); }
.seg-row input:focus-visible + label { box-shadow: inset 0 0 0 2px var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 10px; border: 1px solid transparent; background: var(--raise); font-size: 12.5px; cursor: pointer; color: var(--ink); transition: background 0.15s, border-color 0.15s, opacity 0.15s; }
.chips label:hover { border-color: var(--line); }
.chips label svg.i { width: 15px; height: 15px; color: var(--muted); }
.chips label small { min-width: 18px; padding: 1px 5px; border-radius: 6px; background: rgb(0 0 0 / 0.25); color: var(--muted); font-size: 10.5px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.chips label.zero { opacity: 0.4; }
.chips input:checked + label { background: color-mix(in srgb, var(--ember) 16%, var(--panel)); border-color: color-mix(in srgb, var(--ember) 65%, transparent); }
.chips input:checked + label svg.i { color: var(--ember); }
.chips input:checked + label small { background: var(--ember); color: var(--ember-ink); }
.chips input:focus-visible + label { outline: 2px solid var(--ember); outline-offset: 1px; }
.toggles { display: grid; gap: 2px; font-size: 13px; }
.toggles label { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 6px 0; cursor: pointer; }
.toggles input { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 36px; height: 21px; margin: 0; border-radius: 999px; background: var(--line); cursor: pointer; transition: background 0.2s; }
.toggles input::before { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--muted); transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s; }
.toggles input:checked { background: var(--ember); }
.toggles input:checked::before { transform: translateX(15px); background: var(--ember-ink); }
@media (prefers-reduced-motion: reduce) { .toggles input, .toggles input::before, .seg-row label, .chips label { transition: none; } }
h2 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 8px; }
ol.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
ol.list button {
  width: 100%; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: baseline; text-align: left;
  background: none; border: 0; border-radius: 6px; padding: 7px 8px; color: inherit; font: inherit; cursor: pointer;
}
ol.list.venues button { grid-template-columns: 22px minmax(0, 1fr); align-items: center; }
ol.list li.list-more button { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 4px; padding: 8px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 12.5px; font-weight: 500; }
ol.list li.list-more button:hover { color: var(--ink); border-color: var(--muted); }
ol.list li.list-more .chev { width: 14px; height: 14px; transition: transform 0.2s; }
ol.list li.list-more button[aria-expanded="true"] .chev { transform: rotate(180deg); }
ol.list button:hover, ol.list button:focus-visible { background: color-mix(in srgb, var(--ember) 12%, transparent); outline: none; }
ol.list button:focus-visible { box-shadow: inset 0 0 0 2px var(--ember); }
.km { font-family: var(--f-data); font-size: 12px; color: var(--ember); font-variant-numeric: tabular-nums; text-align: right; }
.nm { font-weight: 500; overflow-wrap: anywhere; }
.sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; color: var(--muted); font-size: 12px; }
.sub .ams { display: inline-flex; gap: 4px; }
.sub .ams svg.i { width: 13px; height: 13px; }
.about { display: grid; gap: 10px; font-size: 12.5px; color: var(--muted); }
.about p { margin: 0; }
.about b { color: var(--ink); font-weight: 600; }
.about ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.about a { color: var(--ember); }
.about .btn { justify-self: start; }
.credits { margin-top: 0; padding: 0 4px; font-size: 11.5px; color: var(--muted); display: grid; gap: 3px; }
.credits b { color: var(--ink); font-weight: 600; }
.seo { display: grid; gap: 8px; font-size: 12.5px; color: var(--muted); }
.seo h2 { margin: 0; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.seo p { margin: 0; }
.seo a { color: var(--ember); }
.seo ul { margin: 0; padding-left: 18px; columns: 2; column-gap: 18px; }
.seo details summary { cursor: pointer; color: var(--ember); font-weight: 500; }
.seo details[open] summary { margin-bottom: 8px; }
.rules { font-size: 12.5px; color: var(--muted); display: grid; gap: 8px; }
.rules p { margin: 0; }
.rules a, .pop a { color: var(--ember); }
.empty { color: var(--muted); font-size: 13px; }

dialog#disclaimer { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); padding: 0; width: min(460px, calc(100vw - 32px)); box-shadow: 0 18px 50px rgb(0 0 0 / 0.45); }
dialog#disclaimer { scrollbar-width: none; }
dialog#disclaimer::-webkit-scrollbar { display: none; }
dialog#deb-ask { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--ink); padding: 0; width: min(340px, calc(100vw - 32px)); box-shadow: 0 18px 50px rgb(0 0 0 / 0.45); }
dialog#deb-ask::backdrop { background: rgb(6 9 8 / 0.55); }
.dlg.ask { gap: 14px; }
.dlg.ask .deb-ava { width: 48px; height: 48px; }
.dlg.ask .deb { grid-template-columns: 48px minmax(0, 1fr); }
.dlg.ask .bubble { font-size: 16px; }
.ask-acts { display: flex; justify-content: flex-end; gap: 8px; }
dialog#disclaimer::backdrop { background: rgb(6 9 8 / 0.65); }
.dlg { display: grid; gap: 12px; padding: 20px; font-size: 14px; }
.dlg h2 { font-family: var(--f-display); font-size: 18px; font-weight: 600; text-transform: none; letter-spacing: -0.01em; color: var(--ink); margin: 4px 0 0; }
.dlg p { margin: 0; color: var(--ink); }
.dlg p + p { color: var(--muted); }
.dlg a { color: var(--ember); }
.dlg-ok { justify-self: end; font: 600 14px/1 var(--f-body); padding: 11px 18px; border-radius: 8px; border: 0; background: var(--ember); color: var(--ember-ink); cursor: pointer; }

/* map furniture */
.leaflet-container { font-family: var(--f-body); background: var(--ground); }
.leaflet-control-zoom a { background: var(--panel); color: var(--ink); border-color: var(--line) !important; }
.leaflet-control-attribution { background: color-mix(in srgb, var(--panel) 85%, transparent) !important; color: var(--muted); }
.leaflet-control-attribution a { color: var(--muted); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel); color: var(--ink); box-shadow: 0 6px 24px rgb(0 0 0 / 0.5); }
.leaflet-popup-content-wrapper { border-radius: 12px; }
.leaflet-popup-content { margin: 16px 16px 14px; max-height: calc(100dvh - var(--sheet) - 110px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; }
.leaflet-popup-content::-webkit-scrollbar { display: none; }
/* tall cards scroll without a visible bar: a fade and a bobbing arrow say there is more below */
.leaflet-popup-content-wrapper { position: relative; }
.leaflet-popup-content-wrapper::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; border-radius: 0 0 12px 12px; background: linear-gradient(transparent, var(--panel) 85%); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.scroll-hint { position: absolute; left: 50%; bottom: 8px; z-index: 1; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; border: 1px solid var(--line); background: var(--raise); color: var(--ink); display: grid; place-items: center; padding: 0; cursor: pointer; box-shadow: 0 4px 12px rgb(0 0 0 / 0.4); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.scroll-hint svg.i { width: 16px; height: 16px; }
.can-scroll::after { opacity: 1; }
.can-scroll .scroll-hint { opacity: 1; pointer-events: auto; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .can-scroll .scroll-hint { animation: none; } }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); }
.town { font-size: 11px; font-weight: 500; color: var(--ink); white-space: nowrap; text-shadow: 0 0 3px var(--ground), 0 0 3px var(--ground), 0 0 2px var(--ground); pointer-events: none; transform: translate(-50%, -50%); width: max-content; }
.town.city { font-size: 13px; font-weight: 600; }
.town.bp { font-family: var(--f-display); font-size: 14px; }
.vmark { transform: translate(-50%, -50%); }
/* "you are here": a pale map pin with a little tent and an ember door, glowing softly at its foot */
/* route from the origin to the open spot: glow, a line drawn in, then a soft flow along it */
.rt-glow { stroke: var(--ember); stroke-opacity: 0.22; filter: blur(3px); }
.rt-ride-glow { stroke: #ffc56b; }
.rt-walk-glow { stroke-opacity: 0.08; }
.rt-line.rt-drive { stroke: var(--ember); }
.rt-line.rt-ride { stroke: #ffc56b; }
.rt-line.rt-bike { stroke: #7fd18b; }
.rt-bike-glow { stroke: #7fd18b; }
.rt-line.rt-walk { stroke: var(--ink); stroke-dasharray: 0.5 8; }
.rt-flow { stroke: #fff3e3; stroke-opacity: 0.85; stroke-dasharray: 1.5 18; animation: rt-flow 1.4s linear infinite; }
@keyframes rt-flow { to { stroke-dashoffset: -19.5; } }
.rt-start { stroke: var(--ember); fill: var(--ground); fill-opacity: 1; animation: rt-pulse 2s ease-out infinite; }
@keyframes rt-pulse { 50% { stroke-width: 9; stroke-opacity: 0.45; } }
.rt-out { opacity: 0; transition: opacity 0.25s; }
/* "marbie" easter egg */
.love .rt-glow { stroke: #ff6fae; stroke-opacity: 0.3; }
.love .rt-line.rt-drive { stroke: #ff6fae; }
.love .rt-flow { stroke: #ffe3f0; }
.love .rt-start { stroke: #ff6fae; }
.love-pin { font-size: 30px; line-height: 1; transform: translate(-50%, -100%); filter: drop-shadow(0 3px 6px rgb(0 0 0 / 0.5)); animation: love-beat 1.2s ease-in-out infinite; }
@keyframes love-beat { 0%, 100% { scale: 1; } 15% { scale: 1.18; } 30% { scale: 1; } 45% { scale: 1.12; } }
.love-pop { display: grid; justify-items: center; gap: 6px; width: 190px; padding: 2px 0 0; text-align: center; }
.love-pop img { width: 140px; height: 120px; filter: drop-shadow(0 4px 10px rgb(255 111 174 / 0.25)); }
.love-pop p { margin: 0; font-family: var(--f-display); font-size: 15px; line-height: 1.25; color: #ff8cc0; text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .love-pin { animation: none; } }
.route-chip { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 800; display: flex; align-items: center; gap: 2px; max-width: calc(100% - 120px); padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--line); box-shadow: 0 6px 20px rgb(0 0 0 / 0.45); backdrop-filter: blur(6px); }
.route-chip button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; color: var(--ink); font: 500 13px/1 var(--f-body); padding: 7px 10px; border-radius: 999px; cursor: pointer; min-width: 0; }
.route-chip .rc-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-chip .rc-main b { font-weight: 600; font-variant-numeric: tabular-nums; }
.route-chip .rc-main svg.i { color: var(--ember); }
.route-chip button:hover { background: var(--raise); }
.route-chip .rc-x { padding: 7px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .rt-flow, .rt-start { animation: none; } }
.me-pin { position: relative; width: 34px; height: 42px; transform: translate(-50%, -100%); filter: drop-shadow(0 3px 6px rgb(0 0 0 / 0.55)); }
.me-pin svg { display: block; width: 34px; height: 42px; position: relative; }
.me-pin::before { content: ""; position: absolute; left: 50%; bottom: -5px; width: 26px; height: 10px; margin-left: -13px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--ember) 70%, transparent), transparent); animation: me-glow 2.4s ease-in-out infinite; }
@keyframes me-glow { 50% { transform: scale(1.5); opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .me-pin::before { animation: none; } }

/* place card: header, travel tabs, one-line weather, nearby icons, actions; details open on demand */
.pop { display: grid; gap: 12px; width: var(--pop-w, min(392px, 82vw)); min-width: 260px; font-size: 13px; }
.pop .meta { color: var(--muted); }
.pop-head { display: grid; gap: 6px; padding-right: 18px; }
.pop-head.drag { cursor: grab; touch-action: none; }
.sel-flame { width: 34px; height: 40px; transform: translate(-50%, -88%); display: grid; place-items: center; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 70%, rgb(255 123 58 / 0.35), transparent 70%); pointer-events: none; }
.sel-flame svg { width: 30px; height: 30px; fill: #ff7b3a; filter: drop-shadow(0 0 6px rgb(255 123 58 / 0.9)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.6)); animation: sel-pop 0.35s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes sel-pop { from { transform: scale(0.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sel-flame svg { animation: none; } }
.start-box { position: relative; }
.start-box .suggest, .near-box .suggest { top: calc(100% + 6px); }
.sort-sel { margin: 0 0 10px; }
.pop-head.drag:active { cursor: grabbing; }
.leaflet-popup.moved .leaflet-popup-tip-container { display: none; }
.pop-head b { font-size: 16px; line-height: 1.25; font-weight: 600; }
.pop-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--muted); font-size: 12.5px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.ok { color: var(--ember); background: color-mix(in srgb, var(--ember) 14%, transparent); }
.pill.no { color: var(--ban); background: color-mix(in srgb, var(--ban) 16%, transparent); }
.pill.price { color: var(--ink); background: var(--raise); font-weight: 500; }
.pill.price::before { display: none; }
.trv { display: grid; gap: 6px; }
.trv-cap { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--muted); }
.trv-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.trv-tab { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 6px; border-radius: 10px; border: 1px solid var(--line); background: var(--raise); color: var(--ink); font: 600 13px/1.1 var(--f-body); cursor: pointer; font-variant-numeric: tabular-nums; min-width: 0; }
.trv-tab svg.i { width: 18px; height: 18px; color: var(--ember); }
.trv-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trv-tab[aria-expanded="true"] { border-color: var(--ember); background: color-mix(in srgb, var(--ember) 14%, var(--raise)); }
.trv-tab.wait span { color: var(--muted); animation: wait 1.2s ease-in-out infinite; }
.trv-tab.none span { color: var(--muted); font-weight: 500; }
@keyframes wait { 50% { opacity: 0.35; } }
.trv-detail { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 5px; }
.trv-detail b { font-size: 14px; font-variant-numeric: tabular-nums; }
.trv-detail p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.trv-detail .go { display: inline-flex; align-items: center; gap: 5px; color: var(--ember); font-weight: 500; text-decoration: none; }
.trv-detail .go svg.i { width: 14px; height: 14px; }
.leg { display: inline-block; padding: 0 5px; border-radius: 4px; background: var(--raise); color: var(--ink); font-weight: 500; font-size: 11.5px; }
.src { font-size: 10.5px; color: var(--muted); }
.src a { color: var(--muted) !important; }
.wx { display: grid; gap: 6px; }
.wx-sum { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--raise); color: var(--ink); font: inherit; cursor: pointer; text-align: left; }
.wx-sum > svg.i:first-child { width: 24px; height: 24px; color: var(--ember); stroke-width: 1.6; }
.wx-sum .t { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wx-sum .bits { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--muted); font-size: 12px; flex: 1; min-width: 0; }
.wx-sum .bits span { display: inline-flex; align-items: center; gap: 3px; }
.wx-sum .bits svg.i { width: 13px; height: 13px; }
.wx-sum .chev { width: 14px; height: 14px; color: var(--muted); transition: transform 0.2s; }
.wx-sum[aria-expanded="true"] .chev { transform: rotate(180deg); }
.wx-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.wx-day { display: grid; justify-items: center; gap: 2px; font-size: 11.5px; color: var(--muted); padding: 7px 2px; border-radius: 8px; background: var(--raise); text-align: center; }
.wx-day b { color: var(--ink); font-weight: 500; text-transform: capitalize; }
.wx-day svg.i { width: 20px; height: 20px; color: var(--ink); }
.wx-day .t { color: var(--ink); font-variant-numeric: tabular-nums; }
.wx-day span { display: inline-flex; align-items: center; gap: 3px; }
.wx-day span svg.i { width: 12px; height: 12px; color: var(--muted); }
.wx-warn { display: flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 500; color: var(--ban); }
.wx-warn svg.i { width: 14px; height: 14px; }
.wx-warn.soft { color: #e8b04a; }
.near { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.near > .meta { font-size: 12px; margin-right: 2px; }
.nb { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 999px; background: var(--raise); font-size: 11.5px; font-family: var(--f-data); color: var(--muted); }
.nb svg.i { width: 15px; height: 15px; color: var(--ember); }
.pop .actions { display: flex; gap: 6px; }
.pop .actions .btn { padding: 9px 12px; font-size: 13px; color: var(--ink); }
.pop .actions .btn.primary { flex: 1; background: var(--ember); border-color: var(--ember); color: var(--ember-ink) !important; font-weight: 600; }
.pop .actions .btn.icon-only { padding: 9px 11px; }
.pop .foot { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }
.pop .foot a { color: var(--muted); }
.pop .foot .stale { color: #e8b04a; }
.toast { position: fixed; left: 50%; bottom: calc(24px + var(--sheet) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--panel); padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; z-index: 2000; }

/* touch: no double-tap zoom on controls, no grey tap flash, 16 px text fields so iOS does not zoom on focus */
html, body { overscroll-behavior: none; }
aside, dialog, .leaflet-popup, .route-chip, .leaflet-control { touch-action: manipulation; }
button, label, a, .opt, summary { -webkit-tap-highlight-color: transparent; }
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
  .rt-glow { filter: none; stroke-opacity: 0.16; }
  .rt-flow { display: none; }
  .rt-start { animation: none; }
  .route-chip { backdrop-filter: none; background: var(--panel); }
  .suggest { max-height: 40dvh; }
}
.mcard { display: none; }
@media (max-width: 760px) {
  .mcard { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; max-height: 62dvh; background: var(--panel); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 34px rgb(0 0 0 / 0.5); padding-bottom: env(safe-area-inset-bottom, 0px); transform: translate3d(0, 105%, 0); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform; }
  .mcard[hidden] { display: none; }
  body.card-open .mcard { transform: translate3d(0, 0, 0); }
  body.card-open aside { transform: translate3d(0, 100%, 0); }
  .mcard-grip { height: 26px; touch-action: none; cursor: grab; }
  .mcard-grip::before { content: ""; position: absolute; top: 9px; left: 50%; width: 42px; height: 4px; margin-left: -21px; border-radius: 2px; background: var(--line); }
  .mcard-x { position: absolute; top: 6px; right: 8px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--raise); color: var(--muted); }
  .mcard .leaflet-popup-content-wrapper { background: none; box-shadow: none; border-radius: 0; }
  .mcard .leaflet-popup-content { margin: 0 16px 14px; max-height: calc(62dvh - 40px); }
  .mcard .pop { width: auto; min-width: 0; }
  .mcard .pop-head b { padding-right: 44px; }
  /* compact buttons that still have a finger-sized hit area: an invisible margin around each one */
  .btn, .trv-tab, .vbtns button, .chips label { position: relative; white-space: nowrap; }
  .btn::after, .vbtns button::after { content: ""; position: absolute; inset: -4px -2px; }
  .btn { min-height: 38px; padding: 0 12px; font-size: 13px; }
  .trv-tab { min-height: 40px; }
  .vbtns button { min-height: 34px; padding: 0 11px; }
  .chips label { min-height: 36px; }
  .pop .actions { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; }
  .pop .actions + .actions { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
  .pop .actions .btn { min-height: 36px; padding: 0 12px; font-size: 13px; }
  .pop .actions .btn.icon-only { width: 36px; padding: 0; }
  .pop .actions .btn svg.i { width: 15px; height: 15px; }
  :root { --sheet: 136px; }
  .app { display: block; height: 100%; }
  #map { position: fixed; inset: 0; }
  aside {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; height: 82dvh;
    border-left: 0; border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgb(0 0 0 / 0.45);
    padding-top: 0; overscroll-behavior: contain;
    transform: translate3d(0, calc(100% - var(--sheet) - env(safe-area-inset-bottom, 0px)), 0);
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform;
  }
  body.sheet-open aside { transform: translate3d(0, 0, 0); }
  body:not(.sheet-open) aside { overflow: hidden; }
  .sheet-bar { touch-action: none; cursor: grab; }
  .blk.head { padding-top: 6px; }
  .sheet-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; position: sticky; top: 0; z-index: 2; background: var(--side-bg); padding-block: 8px 6px; }
  .sheet-bar::before { content: ""; grid-column: 1 / -1; justify-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin-bottom: 4px; }
  .sheet-count { font-size: 13px; color: var(--muted); }
  .sheet-count b { color: var(--ink); }
  .sheet-bar { order: -2; }
  .origin { order: -1; }
  /* search sits right under the handle so it shows in the collapsed sheet */
  .blk.origin { border: 0; background: none; padding: 0 0 4px; }
  aside { gap: 8px; }
  .leaflet-bottom { bottom: var(--sheet); }
}
@media (prefers-reduced-motion: reduce) { .leaflet-zoom-anim .leaflet-zoom-animated { transition: none !important; } aside { transition: none; } }
/* detail page: covers the map (desktop) or the whole screen (phone); blocks in a two-column grid */
#detail { container: detail / inline-size; position: absolute; inset: 0 var(--side-w, 380px) 0 0; z-index: 1100; overflow-y: auto; background: var(--ground); overscroll-behavior: contain; scrollbar-width: thin; animation: dt-in 0.25s ease-out; }
body.side-collapsed #detail { right: 0; }
@keyframes dt-in { from { opacity: 0; transform: translateY(12px); } }
.dt-wrap { max-width: 1040px; margin: 0 auto; padding: 18px 24px 40px; display: grid; gap: 18px; }
.dt-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 2; padding-block: 8px; background: color-mix(in srgb, var(--ground) 92%, transparent); }
.dt-close svg.i { transform: rotate(180deg); }
.dt-top-acts { display: flex; gap: 6px; }
.dt-top .btn.primary, .dt-links .btn.primary { background: var(--ember); border-color: var(--ember); color: var(--ember-ink); font-weight: 600; }
.dt-hero { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.dt-art { aspect-ratio: 800 / 320; max-height: 340px; width: 100%; background: #18211c; }
.dt-scene { width: 100%; height: 100%; display: block; }
.dt-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: dt-flicker 1.6s ease-in-out infinite; }
@keyframes dt-flicker { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(0.96, 1.08); } 60% { transform: scale(1.04, 0.95); } }
.dt-head { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 22px 18px; background: linear-gradient(transparent, rgb(12 16 14 / 0.88)); display: grid; gap: 6px; justify-items: start; }
.dt-head h2 { margin: 0; font-family: var(--f-display); font-size: clamp(20px, 3vw, 30px); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; text-transform: none; color: var(--ink); text-wrap: balance; }
.dt-head p { margin: 0; color: var(--muted); font-size: 13.5px; }
.dt-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.dt-stat { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.dt-stat svg.i { width: 18px; height: 18px; color: var(--ember); margin-bottom: 4px; }
.dt-stat b { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-stat small { color: var(--muted); font-size: 12px; }
/* two independent columns, so a short card never leaves a hole next to a tall one */
.dt-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.dt-col { display: grid; gap: 16px; align-content: start; min-width: 0; }
/* a narrow detail view (big sidebar, small window): header buttons drop their labels so they fit */
@container detail (max-width: 560px) {
  .dt-top .dt-close span, .dt-top .stamp-btn span { display: none; }
  .dt-top .dt-close, .dt-top .stamp-btn { width: 36px; padding: 0; }
  .dt-top-acts { min-width: 0; }
}
@container detail (max-width: 760px) {
  .dt-grid { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .dt-col { display: contents; }
  .dt-grid .o2 { order: 2; } .dt-grid .o3 { order: 3; } .dt-grid .o4 { order: 4; } .dt-grid .o5 { order: 5; }
  .dt-grid .o6 { order: 6; } .dt-grid .o7 { order: 7; } .dt-grid .o8 { order: 8; } .dt-grid .o9 { order: 9; }
}
.dt-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; min-width: 0; }
.dt-card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.dt-card h3 svg.i { color: var(--ember); }
.dt-card h4 { margin: 14px 0 8px; font-size: 12px; color: var(--muted); font-weight: 600; }
.dt-deb .bubble { font-size: 14px; }
.dt-empty { margin: 0; color: var(--muted); font-size: 13px; }
.dt-note { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: 13px; color: var(--ink); }
.dt-note svg.i { color: var(--ember); margin-top: 2px; }
.dt-note.small { font-size: 11.5px; color: var(--muted); }
.dt-sunarc, .dt-gauge { width: 100%; max-width: 240px; display: block; margin: 0 auto; }
.dt-kv3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; margin-top: 4px; }
.dt-kv3 small { display: block; color: var(--muted); font-size: 11.5px; }
.dt-kv3 b { font-size: 16px; font-variant-numeric: tabular-nums; }
.dt-risk-lvl { text-align: center; font-family: var(--f-display); font-size: 18px; font-weight: 600; margin-top: -4px; text-transform: capitalize; }
.dt-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.dt-chips span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: var(--raise); font-size: 12px; }
.dt-chips svg.i { width: 13px; height: 13px; color: var(--muted); }
.dt-chart-wrap { overflow-x: auto; }
.dt-chart { width: 100%; min-width: 440px; display: block; }
.dt-chart text { fill: var(--muted); font-size: 11px; font-family: var(--f-body); }
.dt-chart .dt-hi { fill: var(--ink); font-weight: 600; }
.dt-legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-top: 6px; }
.dt-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.dt-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.dt-day { display: grid; justify-items: center; gap: 3px; padding: 8px 2px; border-radius: 10px; background: var(--raise); font-size: 12px; color: var(--muted); text-align: center; }
.dt-day b { color: var(--ink); font-weight: 500; text-transform: capitalize; }
.dt-day svg.i { width: 22px; height: 22px; color: var(--ink); }
.dt-day .t { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.dt-day .t small { color: var(--muted); font-weight: 400; }
.dt-day span { display: inline-flex; align-items: center; gap: 3px; }
.dt-day span svg.i { width: 12px; height: 12px; color: var(--muted); }
.dt-trow { display: grid; grid-template-columns: 22px minmax(0, 1fr) 20px; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.dt-trow:last-of-type { border-bottom: 0; }
.dt-trow > svg.i { width: 20px; height: 20px; color: var(--ember); margin-top: 2px; }
.dt-trow small { display: block; color: var(--muted); font-size: 11.5px; }
.dt-trow b { font-size: 15px; font-variant-numeric: tabular-nums; }
.dt-trow p { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.dt-ext { color: var(--muted); }
.dt-ext svg.i { width: 15px; height: 15px; }
.dt-legs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.dt-leg { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 6px; background: var(--raise); color: var(--ink); font-size: 12px; }
.dt-leg svg.i { width: 12px; height: 12px; color: var(--ember); }
.dt-leg.walk { background: none; color: var(--muted); padding-inline: 2px; }
.dt-leg.walk svg.i { color: var(--muted); }
.dt-arr { color: var(--muted); font-size: 11px; }
.dt-showmap { margin-top: 10px; }
.dt-shops { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dt-shops li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.dt-shops li:last-child { border-bottom: 0; }
.dt-shops svg.i { color: var(--ember); }
.dt-shops b { display: block; font-weight: 500; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-shops small { display: block; color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-shop-d { display: grid; justify-items: end; font-family: var(--f-data); font-size: 12px; color: var(--muted); }
.dt-shop-d em { font-style: normal; font-family: var(--f-body); color: var(--ember); font-size: 11px; font-weight: 600; }
.dt-near { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.dt-near div { display: grid; gap: 3px; padding: 10px; border-radius: 10px; background: var(--raise); }
.dt-near svg.i { width: 20px; height: 20px; color: var(--ember); }
.dt-near b { font-size: 13px; font-weight: 500; }
.dt-near small { color: var(--muted); font-family: var(--f-data); font-size: 11.5px; }
.dt-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dt-check label { display: flex; gap: 10px; align-items: center; padding: 6px 0; cursor: pointer; font-size: 13.5px; }
.dt-check input { accent-color: var(--ember); width: 18px; height: 18px; margin: 0; flex: none; }
.dt-check input:checked + span { color: var(--muted); text-decoration: line-through; }
.dt-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 18px; }
.dt-info small { display: block; color: var(--muted); font-size: 11.5px; }
.dt-info span { font-size: 13.5px; overflow-wrap: anywhere; }
.dt-coords { display: inline-flex; flex-wrap: wrap; gap: 8px; font-family: var(--f-data); font-size: 12.5px !important; }
.dt-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
body.detail-open .route-chip, body.detail-open .side-open { visibility: hidden; }
@media (max-width: 760px) {
  #detail { position: fixed; inset: 0; z-index: 1500; }
  .dt-wrap { padding: 8px 14px 32px; gap: 14px; }
  .dt-desktop { display: none; }
  /* compact tiles: icon beside the value, label underneath */
  #detail .dt-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #detail .dt-stat { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 6px; row-gap: 0; padding: 7px 9px; border-radius: 10px; }
  #detail .dt-stat svg.i { grid-row: span 2; width: 15px; height: 15px; margin: 0; }
  #detail .dt-stat b { font-size: 13.5px; line-height: 1.25; }
  #detail .dt-stat small { font-size: 10.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #detail .dt-stats .dt-rate { grid-column: 1 / -1; grid-template-columns: auto auto minmax(0, 1fr); column-gap: 8px; padding: 8px 12px; }
  #detail .dt-rate svg.i { grid-row: auto; width: 17px; height: 17px; }
  #detail .dt-rate b { font-size: 17px; }
  #detail .dt-rate small { font-size: 12px; }
  .dt-art { aspect-ratio: 800 / 320; }
  .dt-top { padding-block: 6px; }
  .dt-top-acts { align-items: center; gap: 5px; }
  #detail .dt-top .btn { box-sizing: border-box; height: 34px; min-height: 34px; padding: 0 10px; font-size: 13px; line-height: 1; border-radius: 10px; }
  #detail .dt-top .btn.icon-only, #detail .dt-top .dt-close, .dt-top-acts .btn { width: 34px; padding: 0; justify-content: center; }
  #detail .dt-top .btn svg.i { width: 16px; height: 16px; }
  #detail .dt-top-acts .btn.primary { width: auto; padding: 0 12px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { #detail { animation: none; } .dt-flame { animation: none; } }

/* Debbie's rating badge */
.rate { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 5px; border-radius: 999px; background: color-mix(in srgb, var(--rc) 16%, transparent); color: var(--rc); font: 600 11.5px/1.5 var(--f-data); font-variant-numeric: tabular-nums; }
.rate svg { width: 11px; height: 11px; fill: currentColor; }
.pop-sub .rate { font-size: 12px; padding-block: 2px; }
.dt-stats { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
.dt-rate { background: color-mix(in srgb, var(--rc) 12%, var(--panel)); border-color: color-mix(in srgb, var(--rc) 45%, var(--line)); }
.dt-rate svg.i { fill: var(--rc); stroke: none; }
.dt-rate b { color: var(--rc); font-size: 20px; }
.dt-rate b i { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 500; }

/* "is it still there?" votes */
.votes { display: grid; gap: 6px; }
.votes .vq { font-size: 12px; color: var(--muted); }
.vbtns { display: flex; flex-wrap: wrap; gap: 5px; }
.vbtns button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--raise); color: var(--ink); font: 500 12px/1 var(--f-body); cursor: pointer; }
.vbtns button svg.i { width: 13px; height: 13px; color: var(--muted); }
.vbtns button b { font-family: var(--f-data); font-weight: 500; color: var(--muted); }
.vbtns button.on { border-color: var(--ember); background: color-mix(in srgb, var(--ember) 16%, var(--raise)); }
.vbtns button.on svg.i { color: var(--ember); }
.pop .votes .vbtns span { display: none; }
.votes.big .vq { display: none; }
.votes.big .vbtns button { padding: 8px 12px; font-size: 13px; }
.vmeta { color: var(--muted); font-size: 11.5px; }
.vmeta:empty { display: none; }

/* passport stamp button and sparks */
.stamp-btn.on { border-color: var(--ember); color: var(--ember); }
.pop .actions .stamp-btn { flex: 1; }
.spark { position: fixed; z-index: 3000; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #ffb36b; box-shadow: 0 0 6px #ff7b3a; pointer-events: none; }
.install-btn { justify-self: start; }
.install-btn[hidden], .seo[hidden] { display: none; }

/* floating passport button on the map */
.pass-fab { position: absolute; left: 0; top: 0; z-index: 650; width: 56px; height: 56px; border-radius: 50%; border: 2px solid #e8c48a; padding: 0; display: grid; place-items: center; cursor: grab; touch-action: none; color: #e8c48a;
  background: radial-gradient(circle at 35% 30%, #4a3424, #2a1d14 70%); box-shadow: 0 6px 18px rgb(0 0 0 / 0.5), inset 0 0 0 3px #2a1d14, inset 0 0 0 4px rgb(232 196 138 / 0.45);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s; will-change: transform; }
.pass-fab svg.i { width: 24px; height: 24px; stroke-width: 1.7; }
.pass-fab span { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--ember); color: var(--ember-ink); font: 700 11px/20px var(--f-body); text-align: center; box-shadow: 0 0 0 2px var(--ground); }
.pass-fab.dragging { cursor: grabbing; box-shadow: 0 14px 30px rgb(0 0 0 / 0.6), inset 0 0 0 3px #2a1d14, inset 0 0 0 4px rgb(232 196 138 / 0.45); }
.pass-fab:focus-visible { outline: 3px solid var(--ember); outline-offset: 3px; }
body.detail-open .pass-fab, body.card-open .pass-fab { visibility: hidden; }

/* passport: leather cover with stitching and gold, a guilloche page, hatched county map, rubber stamps, medals */
dialog#passport, dialog#game { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); color: var(--ink); padding: 0; width: min(580px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); box-shadow: 0 18px 50px rgb(0 0 0 / 0.55); scrollbar-width: none; }
dialog#passport { background: #19201c; }
dialog#passport::backdrop, dialog#game::backdrop { background: rgb(6 9 8 / 0.65); }
.pass-cover { position: relative; display: flex; align-items: center; gap: 14px; padding: 22px 20px; color: #e8c48a;
  background: radial-gradient(120% 140% at 20% 0%, #4a3424 0%, #2c1f16 55%, #1f1610 100%); }
.pass-cover::before { content: ""; position: absolute; inset: 8px; border: 1.5px dashed rgb(232 196 138 / 0.4); border-radius: 12px; pointer-events: none; }
.pc-emblem { flex: none; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: #1a120c; box-shadow: 0 0 0 2px #e8c48a, 0 0 0 6px #2c1f16, 0 0 0 7px rgb(232 196 138 / 0.5); }
.pc-text { display: grid; gap: 4px; min-width: 0; padding-right: 36px; }
.pc-text small { font: 600 10px/1.2 var(--f-body); letter-spacing: 0.16em; opacity: 0.8; }
.pc-text h2 { margin: 0; font-family: var(--f-display); font-size: 21px; font-weight: 600; line-height: 1.15; letter-spacing: 0.01em; text-transform: none; color: #f0d29c; text-shadow: 0 1px 0 #000; }
.pc-no { font-family: var(--f-body) !important; font-variant-numeric: tabular-nums; letter-spacing: 0.12em !important; }
.pc-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; padding: 0; border: 1px solid rgb(232 196 138 / 0.4); background: rgb(0 0 0 / 0.25); color: #e8c48a; cursor: pointer; }
.pass-page { display: grid; gap: 14px; padding: 18px 18px 22px; background-color: #19201c;
  background-image: repeating-radial-gradient(circle at 50% -20%, transparent 0 14px, rgb(232 196 138 / 0.035) 14px 15px); }
.pass-page h3 { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; font: 600 11px/1 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; color: #c9b08a; }
.pass-page h3::before, .pass-page h3::after { content: ""; flex: 1; border-top: 1px dashed rgb(201 176 138 / 0.35); }
.pass-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pass-stats div { padding: 10px 6px; border-radius: 12px; text-align: center; border: 1px solid rgb(232 196 138 / 0.18); background: rgb(0 0 0 / 0.18); }
.pass-stats b { display: block; font-family: var(--f-display); font-size: 24px; font-weight: 600; color: #f0d29c; }
.pass-stats b i { font-style: normal; font-size: 13px; color: var(--muted); }
.pass-stats small { color: var(--muted); font-size: 11.5px; }
.pass-map { border-radius: 12px; padding: 10px; border: 1px solid rgb(232 196 138 / 0.15); background: rgb(0 0 0 / 0.2); }
.pm { width: 100%; height: auto; display: block; }
.pm path.pm-off { fill: url(#pmh); stroke: #4a564f; stroke-width: 0.8; }
.pm path.pm-on { fill: rgb(255 123 58 / 0.35); stroke: #ff7b3a; stroke-width: 1.2; }
.pm .pm-route { fill: none; stroke: #f0d29c; stroke-width: 1.8; stroke-dasharray: 4 4; stroke-linecap: round; }
.pm .pm-dot { fill: #f0d29c; stroke: #19201c; stroke-width: 1.5; }
.stamps { list-style: none; margin: 0; padding: 4px; display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 14px 10px; }
.stamp { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-content: center; justify-items: center; gap: 2px; padding: 12px; border: 0; background: none; cursor: pointer; font: inherit; text-align: center; transform: rotate(var(--rot)); transition: transform 0.2s; }
.stamp::before { content: ""; position: absolute; inset: 0; border: 3px solid var(--ink); opacity: 0.85; }
.stamp::after { content: ""; position: absolute; inset: 6px; border: 1.2px solid var(--ink); opacity: 0.7; }
.stamp.round::before, .stamp.round::after { border-radius: 50%; }
.stamp.rect::before, .stamp.rect::after { border-radius: 10px; }
.stamp:hover { transform: rotate(0deg) scale(1.04); }
.stamp > * { color: var(--ink); position: relative; }
.st-top { font: 700 8.5px/1.1 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-flame { width: 20px; height: 20px; fill: var(--ink); }
.stamp b { font: 700 10.5px/1.15 var(--f-display); max-width: 94px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.st-date { font: 600 9.5px/1 var(--f-data); letter-spacing: 0.04em; opacity: 0.9; }
.pass-empty { margin: 0; padding: 18px; text-align: center; color: var(--muted); font-size: 13px; border: 1.5px dashed rgb(201 176 138 / 0.3); border-radius: 12px; }
.medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.medal { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 10px 6px; border-radius: 12px; opacity: 0.45; filter: grayscale(1); }
.medal .md-disc { position: relative; z-index: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #2c1f16;
  background: radial-gradient(circle at 35% 30%, #fbe3b4, #d7a75a 55%, #8f6427); box-shadow: inset 0 0 0 3px rgb(255 255 255 / 0.25), 0 3px 8px rgb(0 0 0 / 0.4); }
.medal .md-disc::after { content: ""; position: absolute; bottom: -10px; left: 50%; width: 18px; height: 14px; margin-left: -9px; background: linear-gradient(90deg, #e3584d 0 50%, #ff7b3a 50%); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%); z-index: -1; }
.medal .md-disc svg.i { width: 22px; height: 22px; stroke-width: 2; }
.medal b { font-size: 12px; font-weight: 600; margin-top: 8px; }
.medal small { font-size: 10.5px; color: var(--muted); line-height: 1.3; }
.medal.ok { opacity: 1; filter: none; }
.game { display: grid; gap: 14px; padding: 18px; }
.game header { display: flex; align-items: center; gap: 12px; }
.game header h2 { flex: 1; margin: 0; font-family: var(--f-display); font-size: 19px; font-weight: 600; text-transform: none; letter-spacing: -0.01em; color: var(--ink); }

/* Debbie's avatar invites a tap */
img.deb-ava { cursor: pointer; transition: transform 0.15s; }
img.deb-ava:hover { transform: rotate(-6deg) scale(1.05); }
img.deb-ava:active { transform: scale(0.94); }

/* mini-game */
.dt-hero { position: relative; }
.dt-play { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ember) 60%, transparent); background: rgb(12 16 14 / 0.75); color: var(--ink); font: 600 13px/1 var(--f-body); cursor: pointer; }
.dt-play svg.i { color: var(--ember); }
.dt-play:hover { background: var(--ember); color: var(--ember-ink); }
.dt-play:hover svg.i { color: var(--ember-ink); }
.g-stage { position: relative; border-radius: 12px; overflow: hidden; background: linear-gradient(#0e151b, #1b2833 70%); aspect-ratio: 8 / 5; touch-action: manipulation; user-select: none; }
.g-stage canvas { width: 100%; height: 100%; display: block; cursor: pointer; }
.g-meter { position: absolute; left: 12px; top: 12px; bottom: 12px; width: 12px; border-radius: 6px; background: rgb(255 255 255 / 0.08); overflow: hidden; }
.g-zone { position: absolute; left: 0; right: 0; bottom: 45%; height: 40%; background: rgb(127 176 105 / 0.28); }
.g-heat { position: absolute; left: 2px; right: 2px; bottom: 0; border-radius: 4px; transition: height 0.1s linear; }
.g-hud { position: absolute; top: 10px; right: 12px; left: 36px; display: flex; justify-content: flex-end; gap: 12px; font: 600 13px/1 var(--f-data); color: var(--ink); text-shadow: 0 1px 4px #000; }
.g-time { margin-right: auto; font-size: 18px; color: var(--ember); }
.g-wind { color: var(--muted); }
.g-msg { position: absolute; left: 0; right: 0; top: 38%; text-align: center; font-family: var(--f-display); font-size: 22px; color: #ffd59a; text-shadow: 0 2px 10px #000; pointer-events: none; }
.g-over { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 20px; text-align: center; background: rgb(10 14 12 / 0.78); }
.g-over p { margin: 0; max-width: 380px; font-size: 14px; line-height: 1.45; }
.g-over b { font-family: var(--f-display); font-size: 20px; }
.g-best { color: var(--muted); }
.g-stars { font-size: 34px; color: #ffb36b; letter-spacing: 4px; }
.g-stars span { color: rgb(255 255 255 / 0.15); }
.g-ctrl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.g-ctrl .btn { position: relative; overflow: hidden; padding: 12px; font-size: 14px; }
.g-cd { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--ember); transform-origin: left; transform: scaleX(0); }
.btn.primary { background: var(--ember); border-color: var(--ember); color: var(--ember-ink); font-weight: 600; }
.dt-wrap { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) {
  .dt-top .dt-close span, .dt-top .stamp-btn span { display: none; }
  .dt-top-acts { min-width: 0; }
  .dt-stats .dt-rate { grid-column: 1 / -1; }
  .dt-play span { display: none; }
}
@media (prefers-reduced-motion: reduce) { img.deb-ava { transition: none; } }

/* favourites: a star that fills in when the spot is saved */
.fav-btn.on { border-color: #f5c451; color: #f5c451; }
.fav-btn.on svg.i { fill: currentColor; }
#fav-list .empty { padding: 4px 8px 2px; color: var(--muted); font-size: 12.5px; }
#fav-list .pill { font-size: 10.5px; padding: 1px 7px; }

/* photos near the spot: a swipeable strip, each with its author and licence */
.ph-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 46%); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -2px; padding: 2px; }
.ph-strip::-webkit-scrollbar { display: none; }
.ph { display: grid; gap: 6px; scroll-snap-align: start; color: var(--muted); text-decoration: none; font-size: 11px; line-height: 1.3; min-width: 0; }
.ph img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--raise); display: block; transition: transform 0.2s; }
.ph:hover img { transform: scale(1.02); }
.ph span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; border-radius: 10px; }
@media (max-width: 760px) { .ph-strip { grid-auto-columns: 72%; } }

/* fire ban alerts */
dialog#push-dlg { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--ink); padding: 0; width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); box-shadow: 0 18px 50px rgb(0 0 0 / 0.55); scrollbar-width: none; }
dialog#push-dlg::backdrop { background: rgb(6 9 8 / 0.65); }
.dlg.push h2 { margin: 0; }
.dlg.push p { color: var(--muted); font-size: 13.5px; }
.push-counties { gap: 6px; }
.push-counties label { font-size: 12.5px; }
.push-counties .dot, .push-hint .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.push-counties .dot.ok, .push-hint .dot.ok { background: #6fbf73; }
.push-hint { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.push-hint svg.i { width: 14px; height: 14px; color: #f5c451; fill: currentColor; }
.push-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--raise); color: var(--ink) !important; }

/* 112: a red button that never looks like decoration */
.em-btn { color: #ff8a80; border-color: rgb(227 88 77 / 0.5); font-weight: 700; letter-spacing: 0.02em; }
.em-btn:hover { background: rgb(227 88 77 / 0.12); border-color: var(--ban); color: #ffb0a8; }
.pop .actions .btn.em-btn.icon-only { width: auto; padding: 0 10px; }
dialog#em-dlg { border: 1px solid rgb(227 88 77 / 0.5); border-radius: 16px; background: var(--panel); color: var(--ink); padding: 0; width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); box-shadow: 0 18px 50px rgb(0 0 0 / 0.55); scrollbar-width: none; }
dialog#em-dlg::backdrop { background: rgb(20 4 4 / 0.7); }
.dlg.em h2 { margin: 0; }
.dlg.em p { color: var(--muted); font-size: 13.5px; }
.em-call { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; border-radius: 12px; background: var(--ban); color: #fff; font: 700 20px/1 var(--f-display); text-decoration: none; letter-spacing: 0.02em; }
.em-call svg.i { width: 22px; height: 22px; }
.em-box { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--raise); }
.em-box small, .em-ll small { color: var(--muted); font-size: 11.5px; }
.em-box b { font-size: 14px; font-weight: 600; }
.em-ll { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.em-ll > div { display: grid; gap: 4px; align-content: start; font-family: var(--f-data); font-size: 12.5px; }
.em-ll .btn { justify-self: start; font-family: var(--f-body); }
.em-ll .linkbtn { justify-self: start; font-family: var(--f-body); font-size: 12px; }
.em-tips { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; color: var(--ink); }

/* official danger level under our own estimate */
.dt-effis { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.dt-effis i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dt-effis b { color: var(--ink); font-weight: 600; }

/* 30 days of the ban as a strip of squares */
.dt-hist { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; }
.dt-hist i { aspect-ratio: 1; border-radius: 3px; background: var(--raise); }
.dt-hist i.hb { background: var(--ban); }
.dt-hist i.ho { background: #4f9a63; }

/* region shortcuts under the search */
.regions { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--raise); color: var(--ink); font: 500 12.5px/1 var(--f-body); cursor: pointer; }
.chip-btn:hover { border-color: var(--ember); }
.chip-btn svg.i { width: 14px; height: 14px; color: #6f9ab8; }

/* QR poster: a light A4 sheet on screen, the only thing on paper */
#poster { position: fixed; inset: 0; z-index: 3000; overflow: auto; background: rgb(6 9 8 / 0.85); padding: 16px; }
.poster-bar { max-width: 210mm; margin: 0 auto 12px; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.poster-bar span { flex: 1; }
.poster { width: min(210mm, 100%); min-height: 280mm; margin: 0 auto; box-sizing: border-box; padding: 18mm 16mm; background: #fffdf8; color: #141917; display: flex; flex-direction: column; align-items: center; gap: 8mm; text-align: center; font-family: var(--f-body); border-radius: 6px; }
.poster header { display: flex; align-items: center; gap: 6mm; text-align: left; }
.poster header img { width: 30mm; height: 30mm; border-radius: 50%; }
.poster h1 { margin: 0; font: 600 13mm/1.1 var(--f-display); color: #141917; letter-spacing: -0.01em; }
.poster header p { margin: 2mm 0 0; font-size: 6mm; color: #4a554f; }
.poster-qr { width: 110mm; height: 110mm; }
.poster-scan { margin: 0; font-size: 7mm; font-weight: 600; max-width: 160mm; }
.poster-scan2 { margin: -4mm 0 0; font-size: 5.5mm; color: #4a554f; max-width: 160mm; }
.poster-name { margin: 0; padding: 3mm 6mm; border-radius: 3mm; background: #ff7b3a; color: #1a0f08; font-weight: 700; font-size: 6mm; }
.poster footer { margin-top: auto; display: grid; gap: 1mm; font-size: 5mm; color: #4a554f; }
.poster footer b { color: #d9531c; font-family: var(--f-display); font-weight: 600; }
body.poster-open { overflow: hidden; }
@media print {
  @page { size: A4; margin: 0; }
  body.poster-open > *:not(#poster) { display: none !important; }
  body.poster-open #poster { position: static; padding: 0; background: none; overflow: visible; }
  .poster-bar { display: none; }
  .poster { border-radius: 0; min-height: 297mm; }
}

/* trips with friends */
dialog#trip-dlg { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--ink); padding: 0; width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); box-shadow: 0 18px 50px rgb(0 0 0 / 0.55); scrollbar-width: none; }
dialog#trip-dlg::backdrop { background: rgb(6 9 8 / 0.65); }
.trip-new h2 { margin: 0; }
.fld { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; font-size: 13px; }
.fld > span, .fld legend { color: var(--muted); font-size: 12px; font-weight: 600; padding: 0; margin-bottom: 6px; }
.fld input:not([type=checkbox]) { background: var(--raise); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; color: var(--ink); font: inherit; font-size: 16px; min-width: 0; color-scheme: dark; }
.fld input:focus { outline: none; border-color: var(--ember); }
.pick { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; cursor: pointer; }
.pick input { accent-color: var(--ember); width: 17px; height: 17px; margin: 1px 0 0; flex: none; }
.days { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.trip-start { margin-top: 8px; width: 100%; }
#trip { position: fixed; inset: 0; z-index: 2500; overflow: auto; background: rgb(6 9 8 / 0.8); padding: 16px; }
body.trip-open { overflow: hidden; }
.trip-card { max-width: 560px; margin: 0 auto; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: grid; gap: 14px; }
.trip-card header { display: flex; align-items: center; gap: 12px; }
.trip-card header img { border-radius: 50%; }
.trip-card header div { flex: 1; min-width: 0; }
.trip-card header small { color: var(--ember); font-weight: 600; font-size: 12px; }
.trip-card h2 { margin: 2px 0 0; font: 600 20px/1.2 var(--f-display); color: var(--ink); text-transform: none; letter-spacing: -0.01em; }
.trip-card h3 { margin: 4px 0 0; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.trip-fresh { margin: 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--ember) 14%, transparent); font-size: 13px; }
.trip-link { display: flex; align-items: center; gap: 8px; }
.trip-link code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12.5px var(--f-data); color: var(--muted); }
.trip-vote { display: grid; gap: 8px; }
.trip-vote ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.trip-vote li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: start; padding: 8px 10px; border-radius: 10px; background: var(--raise); border: 1px solid transparent; }
.trip-vote li.lead { border-color: color-mix(in srgb, var(--ember) 60%, transparent); }
.trip-vote li .pick { padding: 0; }
.trip-vote li .pick b { display: block; font-weight: 600; font-size: 13.5px; }
.trip-vote li .pick small { color: var(--muted); font-size: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 3px; }
.trip-vote .votes { display: flex; align-items: center; gap: 6px; }
.trip-vote .votes em { font-style: normal; font-size: 11px; color: var(--ember); font-weight: 600; }
.trip-vote .votes i { font-style: normal; min-width: 24px; padding: 2px 7px; border-radius: 8px; background: var(--ground); text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.trip-vote li > small { grid-column: 1 / -1; color: var(--muted); font-size: 11.5px; padding-left: 25px; }
.trip-me { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; margin-top: 4px; }

/* hearts and the fire pit of the month */
/* the fire pit of the month vote: a chip like the others in the row, in the gold of the sidebar card */
.vbtns .vlove { border-color: rgb(245 196 81 / 0.4); background: rgb(245 196 81 / 0.07); color: #f5c451; }
.vbtns .vlove svg.i { color: #f5c451; }
.vbtns .vlove em { font-style: normal; }
.vbtns .vlove b { color: #f5c451; }
.vbtns .vlove:hover { border-color: #f5c451; }
.vbtns .vlove.on { background: #f5c451; border-color: #f5c451; color: #1a0f08; cursor: default; }
.vbtns .vlove.on svg.i, .vbtns .vlove.on b { color: #1a0f08; }
.vbtns .vlove.on svg.i { fill: currentColor; }
.votes { display: grid; }
.month h2 { display: flex; align-items: center; gap: 6px; }
.month h2 svg.i { width: 15px; height: 15px; color: #f5c451; }
.month .empty { margin: 0; color: var(--muted); font-size: 12.5px; }
.month-list .km { color: #f5c451; }
.month-last { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.month-last svg.i { width: 14px; height: 14px; color: #f5c451; flex: none; }
.pill.crown { display: inline-flex; align-items: center; gap: 4px; background: rgb(245 196 81 / 0.16); color: #f5c451; }
.pill.crown svg.i { width: 12px; height: 12px; }

/* suggesting a new fire pit: a cross over the map and a small form */
.suggest-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; text-decoration: none; }
.suggest-btn svg.i { width: 14px; height: 14px; }
.sug-cross { position: fixed; left: calc((100% - var(--side-w, 380px)) / 2); top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; z-index: 900; pointer-events: none; border-radius: 50%;
  background: linear-gradient(var(--ember), var(--ember)) center / 2px 100% no-repeat, linear-gradient(var(--ember), var(--ember)) center / 100% 2px no-repeat;
  box-shadow: 0 0 0 2px rgb(20 25 23 / 0.8), inset 0 0 0 2px var(--ember); }
body.side-collapsed .sug-cross { left: 50%; }
#suggest { position: fixed; right: calc(var(--side-w, 380px) + 12px); bottom: 12px; z-index: 1300; width: min(360px, calc(100vw - 24px)); }
.sug-card { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 12px 30px rgb(0 0 0 / 0.5); font-size: 13px; }
.sug-hint, .sug-public { margin: 0; color: var(--muted); font-size: 12px; }
.sug-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border-radius: 10px; background: var(--ground); border: 1px solid var(--line); }
.sug-kind input { position: absolute; opacity: 0; }
.sug-kind span { display: block; text-align: center; padding: 7px; border-radius: 7px; cursor: pointer; color: var(--muted); }
.sug-kind input:checked + span { background: var(--ember); color: var(--ember-ink); font-weight: 600; }
/* where the map is narrow the form goes to the bottom and the cross moves up out of its way */
@media (min-width: 761px) and (max-width: 1240px) {
  #suggest { left: 12px; right: calc(var(--side-w, 380px) + 12px); width: auto; max-height: 55dvh; overflow: auto; }
  .sug-cross { top: 22%; }
}
@media (max-width: 760px) {
  .sug-cross { left: 50%; top: 22%; }
  #suggest { left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 58dvh; overflow: auto; }
}

/* 3D fly-around in the detail hero, desktop only */
.dt-3d { position: absolute; top: 12px; left: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.18);
  background: rgb(12 16 14 / 0.6); color: var(--ink); font: 600 12.5px/1 var(--f-body); cursor: pointer; backdrop-filter: blur(6px); }
.dt-3d:hover, .dt-3d[aria-pressed="true"] { border-color: var(--ember); color: var(--ember); }
.dt-3d svg.i { width: 15px; height: 15px; }
.dt-art.fly { position: relative; }
.dt-art.fly + .dt-play, .dt-hero:has(.dt-art.fly) .dt-head { pointer-events: none; }
.dt-hero:has(.dt-art.fly) .dt-head { background: linear-gradient(transparent, rgb(12 16 14 / 0.75)); }
.fly-pin svg { width: 34px; height: 34px; fill: var(--ember); filter: drop-shadow(0 0 6px rgb(255 123 58 / 0.8)); }
@media (max-width: 760px) { .dt-3d { display: none; } }

/* Debbie's tour: a spotlight with a soft dim around it and her bubble beside it */
#tour { position: fixed; inset: 0; z-index: 4000; }
.tour-hole { position: fixed; pointer-events: none; border-radius: 14px; box-shadow: 0 0 0 200vmax rgb(6 9 8 / 0.72), 0 0 0 2px var(--ember), 0 0 24px 4px rgb(255 123 58 / 0.35);
  transition: left 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-radius 0.35s; }
.tour-card { position: fixed; box-sizing: border-box; display: grid; gap: 12px; padding: 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 18px 50px rgb(0 0 0 / 0.55);
  transition: left 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tour-card .bubble { font-size: 14px; }
.tour-foot { display: flex; align-items: center; gap: 8px; }
.tour-dots { display: flex; gap: 4px; margin-right: auto; }
.tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.tour-dots i.on { background: var(--ember); width: 16px; border-radius: 3px; }
.tour-foot .linkbtn { color: var(--muted); text-decoration: none; font-size: 12.5px; }
@media (prefers-reduced-motion: reduce) { .tour-hole, .tour-card { transition: none; } }
.month-n { display: inline-flex; align-items: center; gap: 3px; color: #f5c451; font-weight: 600; }
.month-n svg.i { width: 12px; height: 12px; }

/* account: a round initial when signed in, Google's own button style to sign in */
.acct-btn b { font: 700 12px/1 var(--f-body); }
.acct-btn.on { background: var(--ember); border-color: var(--ember); color: var(--ember-ink); }
.g-btn { display: flex; align-items: center; justify-content: center; gap: 12px; height: 44px; border-radius: 22px; background: #fff; color: #1f1f1f; border: 1px solid #747775; font: 500 15px/1 var(--f-body); text-decoration: none; }
.g-btn:hover { background: #f2f2f2; }
/* Google's button keeps its own dark text, not the orange of other links in dialogs */
.dlg .g-btn, .dlg .g-btn:hover { color: #1f1f1f; }
.acct-note { font-size: 12px !important; }
.acct-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.acct-del { justify-self: start; color: #ff8a80; font-size: 12.5px; }

/* the account card in the passport */
.pass-acct { display: grid; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgb(232 196 138 / 0.25); background: rgb(0 0 0 / 0.2); }
.pass-acct.on { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; }
.pass-acct .pa-text { display: grid; gap: 3px; min-width: 0; }
.pass-acct .pa-text b { color: #f0d29c; font-size: 14px; }
.pass-acct .pa-text small, .pass-acct .pa-note { color: var(--muted); font-size: 12px; line-height: 1.4; }
.pa-ava { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #e8c48a; color: #2c1f16; font: 700 17px/1 var(--f-display); }
.pa-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pa-acts .btn { font-size: 12.5px; padding: 8px 12px; }
.pa-acts .btn svg.i { width: 14px; height: 14px; }
.pa-acts .pa-del { color: #ff8a80; border-color: rgb(227 88 77 / 0.45); margin-left: auto; }
.pa-acts .pa-del:hover { background: rgb(227 88 77 / 0.12); border-color: var(--ban); }
.pass-acct .g-btn { color: #1f1f1f; }
.pc-holder { color: #f0d29c; font-size: 11.5px !important; letter-spacing: 0.06em !important; }
.pc-holder:empty { display: none; }

/* 112: the call button stays white on red; the location error sits under its button */
.dlg .em-call, .dlg .em-call:hover { color: #fff; }
.em-err { color: #ff8a80; font-family: var(--f-body); font-size: 11.5px; line-height: 1.35; }
.em-ll > div { min-width: 0; }
.em-ll .btn { max-width: 100%; white-space: normal; text-align: left; }
/* confirm dialog */
dialog#ask-dlg { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--ink); padding: 0; width: min(380px, calc(100vw - 24px)); box-shadow: 0 18px 50px rgb(0 0 0 / 0.55); }
dialog#ask-dlg::backdrop { background: rgb(6 9 8 / 0.65); }
.dlg-ok.danger { background: var(--ban); color: #fff; }
/* passport cover emblem and the label under the floating button */
.pc-emblem svg { width: 40px; height: 40px; fill: #ff7b3a; filter: drop-shadow(0 0 8px rgb(255 123 58 / 0.45)); }
.pass-fab .fab-label { position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); padding: 2px 7px; border-radius: 6px; background: rgb(20 25 23 / 0.85); color: #e8c48a; font: 600 10.5px/1.2 var(--f-body); font-style: normal; letter-spacing: 0.04em; white-space: nowrap; pointer-events: none; }

/* profile button in the header: a letter or the Google picture */
.me-btn b { font: 700 12px/1 var(--f-body); }
.me-btn.on { color: var(--ember); }
.me-btn img { width: 22px; height: 22px; border-radius: 50%; display: block; }
.pa-ava img { width: 40px; height: 40px; border-radius: 50%; display: block; }
/* passport tabs */
.pass-tabs { display: flex; gap: 2px; padding: 8px 12px 0; background: #19201c; border-bottom: 1px solid rgb(232 196 138 / 0.18); overflow-x: auto; scrollbar-width: none; }
.pass-tabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: 600 13px/1 var(--f-body); cursor: pointer; }
.pass-tabs button i { font-style: normal; min-width: 18px; padding: 2px 6px; border-radius: 8px; background: rgb(232 196 138 / 0.12); color: #e8c48a; font-size: 11px; text-align: center; }
.pass-tabs button[aria-selected="true"] { color: #f0d29c; border-bottom-color: #e8c48a; }
.pass-page > section { display: grid; gap: 14px; }
.pass-page > section[hidden] { display: none; }
.medal { border: 0; background: none; color: inherit; font: inherit; cursor: help; }
#fav-list:empty { display: none; }
/* info dialog */
dialog#info-dlg { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--ink); padding: 0; width: min(620px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); box-shadow: 0 18px 50px rgb(0 0 0 / 0.55); scrollbar-width: thin; }
dialog#info-dlg::backdrop { background: rgb(6 9 8 / 0.65); }
.dlg.info { position: relative; gap: 18px; }
.dlg.info h2 { margin: 0 0 8px; font-size: 16px; }
.info-x { position: absolute; top: 12px; right: 12px; border-color: var(--line); color: var(--muted); background: var(--raise); }
/* the tooltip bubble */
.tip { position: fixed; z-index: 5000; max-width: 260px; padding: 8px 11px; border-radius: 10px; background: #0f1311; border: 1px solid rgb(255 123 58 / 0.35); color: #ff9a5c; font: 500 12.5px/1.4 var(--f-body); box-shadow: 0 8px 24px rgb(0 0 0 / 0.55);
  pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 0.15s, transform 0.15s; }
.tip.on { opacity: 1; transform: none; }
.tip::after { content: ""; position: absolute; left: 50%; margin-left: -6px; border: 6px solid transparent; }
.tip[data-side="top"]::after { top: 100%; border-top-color: #0f1311; }
.tip[data-side="bottom"]::after { bottom: 100%; border-bottom-color: #0f1311; }
@media (prefers-reduced-motion: reduce) { .tip { transition: none; } }

/* saved spots: the name with today's state beside it, the county underneath */
.fav-main { display: grid; gap: 3px; min-width: 0; }
.fav-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fav-top .nm { min-width: 0; }
.fav-top .pill { flex: none; font-size: 10.5px; padding: 2px 7px; }
/* dropdowns: a button like the other controls and a dark list */
.dd-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.fsel { position: relative; }
.dd-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 128px; padding: 7px 10px 7px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--ground); color: var(--ink); font: 500 13px/1.2 var(--f-body); cursor: pointer; }
.dd-btn:hover, .dd-btn[aria-expanded="true"] { border-color: var(--ember); }
.dd-btn.set { border-color: color-mix(in srgb, var(--ember) 60%, var(--line)); color: var(--ember); }
.dd-btn .chev { width: 14px; height: 14px; color: var(--muted); transition: transform 0.2s; }
.dd-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.dd-menu { position: fixed; z-index: 1700; margin: 0; padding: 5px; list-style: none; border-radius: 12px; border: 1px solid var(--line); background: var(--raise); box-shadow: 0 12px 30px rgb(0 0 0 / 0.5); }
.dd-menu li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; cursor: pointer; }
.dd-menu li:hover { background: color-mix(in srgb, var(--ember) 14%, transparent); }
.dd-menu li[aria-selected="true"] { color: var(--ember); font-weight: 600; }
.dd-menu li[aria-selected="true"]::after { content: "✓"; }
.sort-sel .dd-btn { min-width: 150px; }