clone

an offline map explorer where each world, from a game map to a city's open data, ships as one .atlas file

fix: fade a long category title into the only button

Dami committed a346788
The button sits over the count it replaces, which works until the title is
long enough to reach the end of its pill -- then the two overlapped and the
words ran through each other. The title now fades out just before the button
rather than colliding with it, using whatever colour the pill happens to be
so the fade is invisible.

Still overlaid rather than given room of its own: these pills wrap, and a row
that grew on hover would push the one under the cursor out from under it.
commit
a34678807c502484f2afa0c279da16b53e57c1e1
parent
0584c9c3d53c11fab2775c5a448049104a5a1514
author
Dami <dami.etoile@gmail.com>
2 files changed, +20 -3
Massets/app.css2+-
Mfrontend/app.css21+++++++++++++++++++--
M assets/app.css +1 -1
@@ -1 +1 @@
1-:root,:host{--ol-background-color: white;--ol-accent-background-color: #F5F5F5;--ol-subtle-background-color: rgba(128, 128, 128, .25);--ol-partial-background-color: rgba(255, 255, 255, .75);--ol-foreground-color: #333333;--ol-subtle-foreground-color: #666666;--ol-brand-color: #00AAFF}.ol-box{box-sizing:border-box;border-radius:2px;border:1.5px solid var(--ol-background-color);background-color:var(--ol-partial-background-color)}.ol-mouse-position{top:8px;right:8px;position:absolute}.ol-scale-line{background:var(--ol-partial-background-color);border-radius:4px;bottom:8px;left:8px;padding:2px;position:absolute}.ol-scale-line-inner{border:1px solid var(--ol-subtle-foreground-color);border-top:none;color:var(--ol-foreground-color);font-size:10px;text-align:center;margin:1px;will-change:contents,width;transition:all .25s}.ol-scale-bar{position:absolute;bottom:8px;left:8px}.ol-scale-bar-inner{display:flex}.ol-scale-step-marker{width:1px;height:15px;background-color:var(--ol-foreground-color);float:right;z-index:10}.ol-scale-step-text{position:absolute;bottom:-5px;font-size:10px;z-index:11;color:var(--ol-foreground-color);text-shadow:-1.5px 0 var(--ol-partial-background-color),0 1.5px var(--ol-partial-background-color),1.5px 0 var(--ol-partial-background-color),0 -1.5px var(--ol-partial-background-color)}.ol-scale-text{position:absolute;font-size:12px;text-align:center;bottom:25px;color:var(--ol-foreground-color);text-shadow:-1.5px 0 var(--ol-partial-background-color),0 1.5px var(--ol-partial-background-color),1.5px 0 var(--ol-partial-background-color),0 -1.5px var(--ol-partial-background-color)}.ol-scale-singlebar{position:relative;height:10px;z-index:9;box-sizing:border-box;border:1px solid var(--ol-foreground-color)}.ol-scale-singlebar-even{background-color:var(--ol-subtle-foreground-color)}.ol-scale-singlebar-odd{background-color:var(--ol-background-color)}.ol-unsupported{display:none}.ol-viewport,.ol-unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ol-viewport canvas{all:unset;overflow:hidden}.ol-viewport{touch-action:pan-x pan-y}.ol-selectable{-webkit-touch-callout:default;-webkit-user-select:text;-moz-user-select:text;user-select:text}.ol-grabbing{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.ol-grab{cursor:move;cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.ol-control{position:absolute;background-color:var(--ol-subtle-background-color);border-radius:4px}.ol-zoom{top:.5em;left:.5em}.ol-rotate{top:.5em;right:.5em;transition:opacity .25s linear,visibility 0s linear}.ol-rotate.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}.ol-zoom-extent{top:4.643em;left:.5em}.ol-full-screen{right:.5em;top:.5em}.ol-control button{display:block;margin:1px;padding:0;color:var(--ol-subtle-foreground-color);font-weight:700;text-decoration:none;font-size:inherit;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:var(--ol-background-color);border:none;border-radius:2px}.ol-control button::-moz-focus-inner{border:none;padding:0}.ol-zoom-extent button{line-height:1.4em}.ol-compass{display:block;font-weight:400;will-change:transform}.ol-touch .ol-control button{font-size:1.5em}.ol-touch .ol-zoom-extent{top:5.5em}.ol-control button:hover,.ol-control button:focus{text-decoration:none;outline:1px solid var(--ol-subtle-foreground-color);color:var(--ol-foreground-color)}.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em);display:flex;flex-flow:row-reverse;align-items:center}.ol-attribution a{color:var(--ol-subtle-foreground-color);text-decoration:none}.ol-attribution ul{margin:0;padding:1px .5em;color:var(--ol-foreground-color);text-shadow:0 0 2px var(--ol-background-color);font-size:12px}.ol-attribution li{display:inline;list-style:none}.ol-attribution li:not(:last-child):after{content:" "}.ol-attribution img{max-height:2em;max-width:inherit;vertical-align:middle}.ol-attribution button{flex-shrink:0}.ol-attribution.ol-collapsed ul{display:none}.ol-attribution:not(.ol-collapsed){background:var(--ol-partial-background-color)}.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0}.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}.ol-attribution.ol-uncollapsible button{display:none}.ol-zoomslider{top:4.5em;left:.5em;height:200px}.ol-zoomslider button{position:relative;height:10px}.ol-touch .ol-zoomslider{top:5.5em}.ol-overviewmap{left:.5em;bottom:.5em}.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button{display:block}.ol-overviewmap .ol-overviewmap-map{border:1px solid var(--ol-subtle-foreground-color);height:150px;width:150px}.ol-overviewmap:not(.ol-collapsed) button{bottom:0;left:0;position:absolute}.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button{display:none}.ol-overviewmap:not(.ol-collapsed){background:var(--ol-subtle-background-color)}.ol-overviewmap-box{border:1.5px dotted var(--ol-subtle-foreground-color)}.ol-overviewmap .ol-overviewmap-box:hover{cursor:move}.ol-overviewmap .ol-viewport:hover{cursor:pointer}:root{color-scheme:dark;--bg: #111310;--panel: #171a16;--panel-raised: #1e211c;--line: rgba(236, 240, 218, .11);--line-strong: rgba(236, 240, 218, .2);--text: #eef0e4;--muted: #93988b;--accent: #d6f36b;--accent-dark: #202a0e;--topbar: 72px;--sidebar: 330px;--pin-overlay-size: 28px;--text-overlay-size: 14px;--zone-overlay-size: 14px;--icon-outset-color: rgba(255, 255, 255, .96);--icon-outset: drop-shadow(1px 0 0 var(--icon-outset-color)) drop-shadow(-1px 0 0 var(--icon-outset-color)) drop-shadow(0 1px 0 var(--icon-outset-color)) drop-shadow(0 -1px 0 var(--icon-outset-color)) drop-shadow(0 2px 2px rgba(0, 0, 0, .9));font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--text);-webkit-user-select:none;user-select:none}button,input,select{font:inherit}button{color:inherit}input{-webkit-user-select:text;user-select:text}.app-shell{display:grid;grid-template-columns:var(--sidebar) 1fr;grid-template-rows:var(--topbar) minmax(0,1fr);width:100%;height:100%}.topbar{position:relative;z-index:20;grid-column:1 / -1;display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr) auto;align-items:center;border-bottom:1px solid var(--line);background:#131512f5;box-shadow:0 8px 30px #0000002e}.brand{display:flex;align-items:center;gap:12px;height:100%;padding:0 24px;border-right:1px solid var(--line)}.brand-mark{display:grid;width:35px;height:35px;place-items:center;color:var(--accent)}.brand-mark svg{width:100%;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7}.brand strong,.brand small{display:block}.brand strong{font-family:Arial Narrow,Roboto Condensed,sans-serif;font-size:16px;letter-spacing:.2em;line-height:1}.brand small{margin-top:5px;color:var(--muted);font-size:10px;letter-spacing:.08em;text-transform:uppercase}.map-pickers{display:flex;align-items:center;gap:7px;min-width:0;padding:0 18px}.map-pickers label{display:flex;min-width:0;align-items:center;gap:7px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.map-pickers select{max-width:230px;height:37px;padding:0 32px 0 12px;border:1px solid var(--line);border-radius:8px;outline:none;background:var(--panel-raised);color:var(--text);font-size:13px;font-weight:600;letter-spacing:normal;text-transform:none}.map-pickers select:focus{border-color:#d6f36b99}.map-pickers select:disabled{border-color:transparent;background:#ffffff06;color:#9ca193;cursor:default;opacity:1}#variant-field[hidden]{display:none}.icon-button{display:grid;width:40px;height:40px;padding:10px;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--panel-raised)}.icon-button svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1.8}.mobile-legend{display:none;margin-right:16px}.app-shell.sidebar-collapsed{grid-template-columns:0 minmax(0,1fr)}.app-shell.sidebar-collapsed .sidebar{display:none}.app-shell.sidebar-collapsed .topbar{grid-template-columns:auto minmax(0,1fr) auto}.sidebar{position:relative;z-index:10;display:flex;grid-column:1;grid-row:2;min-height:0;flex-direction:column;border-right:1px solid var(--line);background:linear-gradient(180deg,rgba(214,243,107,.025),transparent 22%),var(--panel)}.sidebar-heading{padding:25px 22px 18px}.eyebrow{margin:0 0 8px;color:var(--accent);font-size:9px;font-weight:800;letter-spacing:.2em}.sidebar-heading h1{display:-webkit-box;overflow:hidden;margin:0;font-family:Arial Narrow,Roboto Condensed,sans-serif;font-size:27px;font-weight:700;letter-spacing:-.025em;line-height:1.05;-webkit-box-orient:vertical;-webkit-line-clamp:2}.sidebar-heading .map-name{overflow:hidden;margin:8px 0 0;color:#cdd1c3;font-size:14px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.sidebar-heading #map-meta{margin:5px 0 0;color:var(--muted);font-size:11px}.search-wrap{position:relative;display:flex;align-items:center;margin:0 17px 16px}.search-wrap svg{position:absolute;left:12px;width:16px;fill:none;stroke:var(--muted);stroke-linecap:round;stroke-width:1.7}.search-wrap input{width:100%;height:42px;padding:0 45px 0 37px;border:1px solid var(--line);border-radius:8px;outline:none;background:#11140f;color:var(--text);font-size:13px}.search-wrap input::placeholder{color:#757a6e}.search-wrap input:focus{border-color:#d6f36b80;box-shadow:0 0 0 3px #d6f36b0f}.search-wrap kbd{position:absolute;right:9px;padding:3px 5px;border:1px solid var(--line);border-radius:4px;background:var(--panel-raised);color:var(--muted);font-family:inherit;font-size:9px}.search-results{z-index:5;overflow:auto;max-height:238px;margin:-8px 17px 14px;border:1px solid var(--line);border-radius:8px;background:#11140f;box-shadow:0 15px 35px #00000052}.search-result{display:grid;width:100%;grid-template-columns:22px 1fr;gap:10px;padding:10px 11px;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;cursor:pointer}.search-result:last-child{border-bottom:0}.search-result:hover{background:#ffffff0a}.search-result .result-dot{display:grid;width:20px;height:20px;margin-top:1px;place-items:center;border-radius:50%;background:var(--pin-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--pin-color) 18%,transparent);color:#fff;font-size:7px;font-weight:900}.search-result strong,.search-result small{display:block}.search-result strong{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.search-result small,.search-empty{margin-top:3px;color:var(--muted);font-size:10px}.search-empty{padding:13px}.legend-toolbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.legend-toolbar div{display:flex;gap:5px;align-items:center}.legend-toolbar button{padding:0;border:0;background:none;color:var(--muted);font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}.legend-toolbar button:hover{color:var(--accent)}.layers{overflow-x:hidden;overflow-y:auto;min-height:0;flex:1;padding-bottom:12px;scrollbar-color:#44483e transparent;scrollbar-width:thin}.layer-section{border-bottom:1px solid var(--line)}.layer-section[hidden]{display:none}.legend .layer-section:last-child{border-bottom:0}.layer-header{display:flex;align-items:center;gap:10px;padding:8px 16px 8px 12px}.layer-title{display:flex;min-width:0;flex:1;align-items:center;gap:7px;padding:4px 0;border:0;background:transparent;color:#c8ccbd;font-size:10px;font-weight:800;letter-spacing:.12em;text-align:left;text-transform:uppercase;cursor:pointer}.layer-title:hover{color:var(--text)}.layer-title>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-chevron{display:grid;width:13px;height:13px;flex:none;place-items:center;color:#6b7163;transform:rotate(90deg);transition:transform .14s ease}.layer-section.is-collapsed .layer-chevron{transform:rotate(0)}.layer-chevron svg{width:12px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.4}.layer-count{color:var(--muted);font-size:9px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:0}.only-button{position:absolute;top:50%;right:5px;padding:2px 5px;border:1px solid rgba(214,243,107,.5);border-radius:999px;opacity:0;background:#1d211a;color:var(--accent);font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;transform:translateY(-50%);cursor:pointer;transition:opacity .11s ease}.category-toggle:hover .only-button,.layer-header:hover .only-button,.only-button:focus-visible{opacity:1}.category-toggle:hover .category-count{opacity:0}.only-button:hover{background:#d6f36b29}.only-group{position:static;flex:none;transform:none}.solo-chip{overflow:hidden;max-width:150px;padding:3px 8px;border:1px solid rgba(214,243,107,.5);border-radius:999px;background:#d6f36b1f;color:var(--accent);font-size:9px;font-weight:700;letter-spacing:.04em;text-overflow:ellipsis;text-transform:none;white-space:nowrap;cursor:pointer}.solo-chip[hidden]{display:none}.solo-chip:after{margin-left:5px;content:"\d7";opacity:.75}.solo-chip:hover{background:#d6f36b38}.layer-switch{position:relative;display:block;width:26px;height:15px;flex:none;border:1px solid #3d4239;border-radius:999px;background:#ffffff08;cursor:pointer;transition:background .14s ease,border-color .14s ease}.layer-switch input{position:absolute;width:1px;height:1px;opacity:0}.layer-switch>span{position:absolute;top:2px;left:2px;width:9px;height:9px;border-radius:50%;background:#6b7163;transition:transform .14s ease,background .14s ease}.layer-switch:hover{border-color:#5a6053}.layer-switch:has(input:checked){border-color:#d6f36b80;background:#d6f36b24}.layer-switch:has(input:checked)>span{background:var(--accent);transform:translate(11px)}.layer-switch:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}.layer-section.is-collapsed .category-toggles,.layer-section.is-collapsed .zone-list{display:none}.text-symbol{display:grid;width:22px;height:22px;flex:none;place-items:center;border:1px solid color-mix(in srgb,var(--pin-color) 38%,transparent);border-radius:7px;background:color-mix(in srgb,var(--pin-color) 38%,#151814);color:#f1f4e7;font-family:Arial Narrow,Roboto Condensed,sans-serif;font-size:10px;font-weight:900;letter-spacing:-.04em;text-shadow:0 1px 2px #000}.zone-list{padding:0 10px 11px}.zone-index-item{--zone-depth: 0;display:grid;width:100%;min-height:27px;grid-template-columns:10px minmax(0,1fr);gap:7px;align-items:center;padding:4px 8px 4px calc(8px + var(--zone-depth) * 13px);border:1px solid transparent;border-radius:5px;background:transparent;color:#aeb3a5;font-size:10px;font-weight:600;text-align:left;cursor:pointer}.zone-index-item:hover,.zone-index-item:focus-visible{border-color:color-mix(in srgb,var(--zone-color) 42%,transparent);outline:none;background:#ffffff09;color:var(--text)}.zone-index-item.is-current{background:#ffffff0e;color:#f0f2e8}.zone-index-item.is-highlighted{border-color:color-mix(in srgb,var(--zone-color) 70%,white 18%);background:color-mix(in srgb,var(--zone-color) 15%,transparent);color:#fff}#zone-index.has-highlights .zone-index-item:not(.is-highlighted):not(.is-current){opacity:.58}.zone-index-item>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zone-index-marker{width:8px;height:8px;border:1px solid color-mix(in srgb,var(--zone-color) 78%,white);border-radius:2px;background:color-mix(in srgb,var(--zone-color) 18%,transparent)}.zone-index-item.is-highlighted .zone-index-marker{border-color:#fff;background:var(--zone-color);box-shadow:0 0 7px color-mix(in srgb,var(--zone-color) 65%,transparent)}.category-toggles{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px 12px}.category-toggle{position:relative;display:inline-flex;overflow:hidden;align-items:center;gap:5px;max-width:100%;min-height:30px;padding:3px 8px 3px 4px;border:1px solid #363a32;border-radius:999px;background:#ffffff05;color:#777c70;cursor:pointer;-webkit-user-select:none;user-select:none}.category-toggle:hover{border-color:#5a6053;color:var(--text)}.category-toggle:has(input:checked){border-color:color-mix(in srgb,var(--pin-color) 48%,#454a40);background:color-mix(in srgb,var(--pin-color) 10%,#171a16);color:#d8dccf;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pin-color) 9%,transparent)}.category-toggle input{position:absolute;width:1px;height:1px;opacity:0}.category-icon{display:grid;width:22px;height:22px;flex:none;place-items:center;border:0;background:transparent;color:var(--pin-color);font-size:9px;font-weight:900;text-transform:uppercase}.category-icon.has-source-icon:before,.result-dot.has-source-icon:before,#detail-dot.has-source-icon:before,.pin.has-source-icon:after{display:block;background:var(--pin-icon) center / contain no-repeat;content:"";filter:var(--icon-outset)}.category-icon.has-source-icon:before{width:14px;height:14px;filter:var(--icon-outset)}.result-dot.has-source-icon,#detail-dot.has-source-icon{border-radius:0;background:transparent;box-shadow:none}.result-dot.has-source-icon:before{width:16px;height:16px}.category-name{overflow:hidden;max-width:118px;font-size:10px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.category-count{color:#747a6d;transition:opacity .11s ease;font-size:9px;font-variant-numeric:tabular-nums}.sidebar-footer{display:flex;align-items:center;gap:7px;min-height:44px;padding:0 18px;border-top:1px solid var(--line);color:var(--muted);font-size:9px;letter-spacing:.06em;text-transform:uppercase}.live-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 7px #d6f36b99}.map-panel{position:relative;grid-column:2;grid-row:2;min-width:0;min-height:0;background:#0c0e0c}.map{position:absolute;inset:0;overflow:hidden;outline:none;background:radial-gradient(circle at 50% 50%,rgba(102,111,86,.13),transparent 56%),#0b0d0b;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.map .ol-viewport{position:absolute;inset:0}.map .ol-layer canvas{display:block}.map .ol-viewport.is-dragging{cursor:grabbing}.map:after{position:absolute;z-index:2;inset:0;background:linear-gradient(90deg,rgba(5,7,5,.36),transparent 7%,transparent 93%,rgba(5,7,5,.25)),linear-gradient(180deg,rgba(5,7,5,.2),transparent 10%,transparent 92%,rgba(5,7,5,.35));content:"";pointer-events:none}.map-loading{position:absolute;z-index:10;top:50%;left:50%;display:grid;min-width:235px;padding:24px;place-items:center;border:1px solid var(--line);border-radius:12px;background:#141713eb;box-shadow:0 20px 60px #0006;text-align:center;transform:translate(-50%,-50%);transition:opacity .18s ease}.map-loading[hidden]{display:none}.map-loading strong{margin-top:12px;font-size:13px}.map-loading small{margin-top:5px;color:var(--muted);font-size:10px}.spinner{width:25px;height:25px;border:2px solid rgba(214,243,107,.18);border-top-color:var(--accent);border-radius:50%;animation:spin .75s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.map-corner{position:absolute;z-index:7;right:17px;bottom:17px;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}.map-corner>*{pointer-events:auto}.overview{position:relative;overflow:hidden;border:1px solid var(--line-strong);border-radius:8px;background:#161915e6;box-shadow:0 6px 25px #00000047;cursor:crosshair;line-height:0}.overview[hidden]{display:none}.overview canvas{display:block;opacity:.85}.overview-viewport{position:absolute;border:1px solid var(--accent);border-radius:2px;background:#d6f36b24;pointer-events:none}.zoom-controls{position:absolute;z-index:7;top:17px;right:17px;display:grid;overflow:hidden;width:38px;border:1px solid var(--line-strong);border-radius:8px;background:#161915e6;box-shadow:0 6px 25px #00000038}.zoom-controls button{display:grid;width:38px;height:37px;padding:0;place-items:center;border:0;border-bottom:1px solid var(--line);background:transparent;font-size:20px;cursor:pointer}.zoom-controls button:last-child{border-bottom:0}.zoom-controls button:hover{background:#ffffff0f;color:var(--accent)}.grid-navigator{position:absolute;z-index:8;top:17px;right:67px;display:flex;overflow:hidden;align-items:stretch;border:1px solid var(--line-strong);border-radius:8px;background:#161915f0;box-shadow:0 6px 25px #00000038}.grid-navigator[hidden]{display:none}.grid-navigator button{width:36px;padding:0;border:0;border-right:1px solid var(--line);background:transparent;color:var(--muted);font-size:17px;cursor:pointer}.grid-navigator button:hover{color:var(--accent)}.grid-navigator label{display:flex;height:36px;align-items:center;gap:7px;padding:0 9px;color:var(--muted);font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.grid-navigator input{width:74px;padding:4px 6px;border:1px solid #3c4137;border-radius:4px;outline:none;background:#0e110d;color:var(--accent);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:lowercase;-webkit-user-select:text;user-select:text}.grid-navigator input:focus{border-color:#d6f36bad}.map-hint{position:relative;display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:#0f110ec2;color:#eef0e49e;font-size:9px;letter-spacing:.08em;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.map-hint i{width:2px;height:2px;border-radius:50%;background:currentColor}.pin-detail{position:absolute;z-index:9;right:68px;bottom:17px;width:min(360px,calc(100% - 100px));max-height:min(500px,calc(100% - 40px));overflow:auto;padding:20px;border:1px solid var(--line-strong);border-radius:11px;background:#151814f5;box-shadow:0 18px 55px #00000073;-webkit-user-select:text;user-select:text;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.pin-detail[hidden]{display:none}.detail-close{position:absolute;top:10px;right:11px;width:29px;height:29px;padding:0;border:0;border-radius:6px;background:#ffffff0a;color:var(--muted);font-size:21px;cursor:pointer}.detail-close:hover{color:var(--text)}.detail-category{display:flex;align-items:center;gap:7px;padding-right:30px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.detail-category #detail-dot{display:grid;width:20px;height:20px;flex:0 0 20px;place-items:center;border-radius:50%;background:var(--pin-color);color:#fff;font-size:7px;letter-spacing:0}#detail-dot.has-source-icon:before{width:16px;height:16px}.pin-detail h2{margin:10px 0 11px;font-family:Arial Narrow,Roboto Condensed,sans-serif;font-size:22px;line-height:1.12}.pin-detail>p{margin:0;color:#b9bdb0;font-size:12px;line-height:1.55;white-space:pre-line}.detail-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.detail-links[hidden]{display:none}.detail-link{overflow:hidden;max-width:100%;padding:5px 10px;border:1px solid #3d4239;border-radius:999px;background:#ffffff08;color:#b9bdb0;font-size:11px;font-weight:650;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.detail-link:hover{border-color:#d6f36b80;background:#d6f36b1a;color:var(--text)}.pin-detail dl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:17px 0 0;padding-top:13px;border-top:1px solid var(--line)}.pin-detail dl div{min-width:0}.pin-detail dt{color:#71766a;font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.pin-detail dd{overflow:hidden;margin:4px 0 0;color:#c6cabd;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.fatal-error{position:fixed;z-index:100;inset:50% auto auto 50%;width:min(460px,calc(100% - 40px));padding:24px;border:1px solid #7e3f3f;border-radius:12px;background:#261919;box-shadow:0 25px 80px #00000080;transform:translate(-50%,-50%);-webkit-user-select:text;user-select:text}.fatal-error[hidden]{display:none}.fatal-error p{margin:8px 0 0;color:#c8aaaa;font-size:13px}@media(max-width:980px){:root{--sidebar: 300px}.map-pickers label>span{display:none}.map-pickers select{max-width:190px}}@media(max-width:760px){:root{--topbar: 64px}.app-shell{grid-template-columns:1fr}.topbar{grid-template-columns:auto minmax(0,1fr) auto}.brand{padding:0 15px;border-right:0}.brand small{display:none}.map-pickers{justify-content:center;padding:0 7px}.map-pickers select{max-width:135px;height:35px;padding-left:8px;font-size:11px}.mobile-legend{display:grid}.sidebar{position:fixed;z-index:30;top:var(--topbar);bottom:0;left:0;width:min(330px,calc(100% - 42px));box-shadow:18px 0 50px #00000073;transform:translate(-102%);transition:transform .18s ease}.sidebar.is-open{transform:translate(0)}.map-panel{grid-column:1}.pin-detail{right:14px;bottom:55px;width:calc(100% - 28px)}}1+:root,:host{--ol-background-color: white;--ol-accent-background-color: #F5F5F5;--ol-subtle-background-color: rgba(128, 128, 128, .25);--ol-partial-background-color: rgba(255, 255, 255, .75);--ol-foreground-color: #333333;--ol-subtle-foreground-color: #666666;--ol-brand-color: #00AAFF}.ol-box{box-sizing:border-box;border-radius:2px;border:1.5px solid var(--ol-background-color);background-color:var(--ol-partial-background-color)}.ol-mouse-position{top:8px;right:8px;position:absolute}.ol-scale-line{background:var(--ol-partial-background-color);border-radius:4px;bottom:8px;left:8px;padding:2px;position:absolute}.ol-scale-line-inner{border:1px solid var(--ol-subtle-foreground-color);border-top:none;color:var(--ol-foreground-color);font-size:10px;text-align:center;margin:1px;will-change:contents,width;transition:all .25s}.ol-scale-bar{position:absolute;bottom:8px;left:8px}.ol-scale-bar-inner{display:flex}.ol-scale-step-marker{width:1px;height:15px;background-color:var(--ol-foreground-color);float:right;z-index:10}.ol-scale-step-text{position:absolute;bottom:-5px;font-size:10px;z-index:11;color:var(--ol-foreground-color);text-shadow:-1.5px 0 var(--ol-partial-background-color),0 1.5px var(--ol-partial-background-color),1.5px 0 var(--ol-partial-background-color),0 -1.5px var(--ol-partial-background-color)}.ol-scale-text{position:absolute;font-size:12px;text-align:center;bottom:25px;color:var(--ol-foreground-color);text-shadow:-1.5px 0 var(--ol-partial-background-color),0 1.5px var(--ol-partial-background-color),1.5px 0 var(--ol-partial-background-color),0 -1.5px var(--ol-partial-background-color)}.ol-scale-singlebar{position:relative;height:10px;z-index:9;box-sizing:border-box;border:1px solid var(--ol-foreground-color)}.ol-scale-singlebar-even{background-color:var(--ol-subtle-foreground-color)}.ol-scale-singlebar-odd{background-color:var(--ol-background-color)}.ol-unsupported{display:none}.ol-viewport,.ol-unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ol-viewport canvas{all:unset;overflow:hidden}.ol-viewport{touch-action:pan-x pan-y}.ol-selectable{-webkit-touch-callout:default;-webkit-user-select:text;-moz-user-select:text;user-select:text}.ol-grabbing{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.ol-grab{cursor:move;cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.ol-control{position:absolute;background-color:var(--ol-subtle-background-color);border-radius:4px}.ol-zoom{top:.5em;left:.5em}.ol-rotate{top:.5em;right:.5em;transition:opacity .25s linear,visibility 0s linear}.ol-rotate.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}.ol-zoom-extent{top:4.643em;left:.5em}.ol-full-screen{right:.5em;top:.5em}.ol-control button{display:block;margin:1px;padding:0;color:var(--ol-subtle-foreground-color);font-weight:700;text-decoration:none;font-size:inherit;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:var(--ol-background-color);border:none;border-radius:2px}.ol-control button::-moz-focus-inner{border:none;padding:0}.ol-zoom-extent button{line-height:1.4em}.ol-compass{display:block;font-weight:400;will-change:transform}.ol-touch .ol-control button{font-size:1.5em}.ol-touch .ol-zoom-extent{top:5.5em}.ol-control button:hover,.ol-control button:focus{text-decoration:none;outline:1px solid var(--ol-subtle-foreground-color);color:var(--ol-foreground-color)}.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em);display:flex;flex-flow:row-reverse;align-items:center}.ol-attribution a{color:var(--ol-subtle-foreground-color);text-decoration:none}.ol-attribution ul{margin:0;padding:1px .5em;color:var(--ol-foreground-color);text-shadow:0 0 2px var(--ol-background-color);font-size:12px}.ol-attribution li{display:inline;list-style:none}.ol-attribution li:not(:last-child):after{content:" "}.ol-attribution img{max-height:2em;max-width:inherit;vertical-align:middle}.ol-attribution button{flex-shrink:0}.ol-attribution.ol-collapsed ul{display:none}.ol-attribution:not(.ol-collapsed){background:var(--ol-partial-background-color)}.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0}.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}.ol-attribution.ol-uncollapsible button{display:none}.ol-zoomslider{top:4.5em;left:.5em;height:200px}.ol-zoomslider button{position:relative;height:10px}.ol-touch .ol-zoomslider{top:5.5em}.ol-overviewmap{left:.5em;bottom:.5em}.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button{display:block}.ol-overviewmap .ol-overviewmap-map{border:1px solid var(--ol-subtle-foreground-color);height:150px;width:150px}.ol-overviewmap:not(.ol-collapsed) button{bottom:0;left:0;position:absolute}.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button{display:none}.ol-overviewmap:not(.ol-collapsed){background:var(--ol-subtle-background-color)}.ol-overviewmap-box{border:1.5px dotted var(--ol-subtle-foreground-color)}.ol-overviewmap .ol-overviewmap-box:hover{cursor:move}.ol-overviewmap .ol-viewport:hover{cursor:pointer}:root{color-scheme:dark;--bg: #111310;--panel: #171a16;--panel-raised: #1e211c;--line: rgba(236, 240, 218, .11);--line-strong: rgba(236, 240, 218, .2);--text: #eef0e4;--muted: #93988b;--accent: #d6f36b;--accent-dark: #202a0e;--topbar: 72px;--sidebar: 330px;--pin-overlay-size: 28px;--text-overlay-size: 14px;--zone-overlay-size: 14px;--icon-outset-color: rgba(255, 255, 255, .96);--icon-outset: drop-shadow(1px 0 0 var(--icon-outset-color)) drop-shadow(-1px 0 0 var(--icon-outset-color)) drop-shadow(0 1px 0 var(--icon-outset-color)) drop-shadow(0 -1px 0 var(--icon-outset-color)) drop-shadow(0 2px 2px rgba(0, 0, 0, .9));font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--text);-webkit-user-select:none;user-select:none}button,input,select{font:inherit}button{color:inherit}input{-webkit-user-select:text;user-select:text}.app-shell{display:grid;grid-template-columns:var(--sidebar) 1fr;grid-template-rows:var(--topbar) minmax(0,1fr);width:100%;height:100%}.topbar{position:relative;z-index:20;grid-column:1 / -1;display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr) auto;align-items:center;border-bottom:1px solid var(--line);background:#131512f5;box-shadow:0 8px 30px #0000002e}.brand{display:flex;align-items:center;gap:12px;height:100%;padding:0 24px;border-right:1px solid var(--line)}.brand-mark{display:grid;width:35px;height:35px;place-items:center;color:var(--accent)}.brand-mark svg{width:100%;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7}.brand strong,.brand small{display:block}.brand strong{font-family:Arial Narrow,Roboto Condensed,sans-serif;font-size:16px;letter-spacing:.2em;line-height:1}.brand small{margin-top:5px;color:var(--muted);font-size:10px;letter-spacing:.08em;text-transform:uppercase}.map-pickers{display:flex;align-items:center;gap:7px;min-width:0;padding:0 18px}.map-pickers label{display:flex;min-width:0;align-items:center;gap:7px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.map-pickers select{max-width:230px;height:37px;padding:0 32px 0 12px;border:1px solid var(--line);border-radius:8px;outline:none;background:var(--panel-raised);color:var(--text);font-size:13px;font-weight:600;letter-spacing:normal;text-transform:none}.map-pickers select:focus{border-color:#d6f36b99}.map-pickers select:disabled{border-color:transparent;background:#ffffff06;color:#9ca193;cursor:default;opacity:1}#variant-field[hidden]{display:none}.icon-button{display:grid;width:40px;height:40px;padding:10px;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--panel-raised)}.icon-button svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1.8}.mobile-legend{display:none;margin-right:16px}.app-shell.sidebar-collapsed{grid-template-columns:0 minmax(0,1fr)}.app-shell.sidebar-collapsed .sidebar{display:none}.app-shell.sidebar-collapsed .topbar{grid-template-columns:auto minmax(0,1fr) auto}.sidebar{position:relative;z-index:10;display:flex;grid-column:1;grid-row:2;min-height:0;flex-direction:column;border-right:1px solid var(--line);background:linear-gradient(180deg,rgba(214,243,107,.025),transparent 22%),var(--panel)}.sidebar-heading{padding:25px 22px 18px}.eyebrow{margin:0 0 8px;color:var(--accent);font-size:9px;font-weight:800;letter-spacing:.2em}.sidebar-heading h1{display:-webkit-box;overflow:hidden;margin:0;font-family:Arial Narrow,Roboto Condensed,sans-serif;font-size:27px;font-weight:700;letter-spacing:-.025em;line-height:1.05;-webkit-box-orient:vertical;-webkit-line-clamp:2}.sidebar-heading .map-name{overflow:hidden;margin:8px 0 0;color:#cdd1c3;font-size:14px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.sidebar-heading #map-meta{margin:5px 0 0;color:var(--muted);font-size:11px}.search-wrap{position:relative;display:flex;align-items:center;margin:0 17px 16px}.search-wrap svg{position:absolute;left:12px;width:16px;fill:none;stroke:var(--muted);stroke-linecap:round;stroke-width:1.7}.search-wrap input{width:100%;height:42px;padding:0 45px 0 37px;border:1px solid var(--line);border-radius:8px;outline:none;background:#11140f;color:var(--text);font-size:13px}.search-wrap input::placeholder{color:#757a6e}.search-wrap input:focus{border-color:#d6f36b80;box-shadow:0 0 0 3px #d6f36b0f}.search-wrap kbd{position:absolute;right:9px;padding:3px 5px;border:1px solid var(--line);border-radius:4px;background:var(--panel-raised);color:var(--muted);font-family:inherit;font-size:9px}.search-results{z-index:5;overflow:auto;max-height:238px;margin:-8px 17px 14px;border:1px solid var(--line);border-radius:8px;background:#11140f;box-shadow:0 15px 35px #00000052}.search-result{display:grid;width:100%;grid-template-columns:22px 1fr;gap:10px;padding:10px 11px;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;cursor:pointer}.search-result:last-child{border-bottom:0}.search-result:hover{background:#ffffff0a}.search-result .result-dot{display:grid;width:20px;height:20px;margin-top:1px;place-items:center;border-radius:50%;background:var(--pin-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--pin-color) 18%,transparent);color:#fff;font-size:7px;font-weight:900}.search-result strong,.search-result small{display:block}.search-result strong{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.search-result small,.search-empty{margin-top:3px;color:var(--muted);font-size:10px}.search-empty{padding:13px}.legend-toolbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.legend-toolbar div{display:flex;gap:5px;align-items:center}.legend-toolbar button{padding:0;border:0;background:none;color:var(--muted);font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}.legend-toolbar button:hover{color:var(--accent)}.layers{overflow-x:hidden;overflow-y:auto;min-height:0;flex:1;padding-bottom:12px;scrollbar-color:#44483e transparent;scrollbar-width:thin}.layer-section{border-bottom:1px solid var(--line)}.layer-section[hidden]{display:none}.legend .layer-section:last-child{border-bottom:0}.layer-header{display:flex;align-items:center;gap:10px;padding:8px 16px 8px 12px}.layer-title{display:flex;min-width:0;flex:1;align-items:center;gap:7px;padding:4px 0;border:0;background:transparent;color:#c8ccbd;font-size:10px;font-weight:800;letter-spacing:.12em;text-align:left;text-transform:uppercase;cursor:pointer}.layer-title:hover{color:var(--text)}.layer-title>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-chevron{display:grid;width:13px;height:13px;flex:none;place-items:center;color:#6b7163;transform:rotate(90deg);transition:transform .14s ease}.layer-section.is-collapsed .layer-chevron{transform:rotate(0)}.layer-chevron svg{width:12px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.4}.layer-count{color:var(--muted);font-size:9px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:0}.only-button{position:absolute;top:50%;right:5px;padding:2px 5px;border:1px solid rgba(214,243,107,.5);border-radius:999px;opacity:0;background:#1d211a;color:var(--accent);font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;transform:translateY(-50%);cursor:pointer;transition:opacity .11s ease}.category-toggle:hover .only-button,.layer-header:hover .only-button,.only-button:focus-visible{opacity:1}.category-toggle:hover .category-count{opacity:0}.category-toggle .only-button:before{position:absolute;top:-9px;right:100%;bottom:-9px;width:24px;background:linear-gradient(90deg,transparent,var(--pill-bg) 85%);content:"";pointer-events:none}.only-button:hover{background:#d6f36b29}.only-group{position:static;flex:none;transform:none}.solo-chip{overflow:hidden;max-width:150px;padding:3px 8px;border:1px solid rgba(214,243,107,.5);border-radius:999px;background:#d6f36b1f;color:var(--accent);font-size:9px;font-weight:700;letter-spacing:.04em;text-overflow:ellipsis;text-transform:none;white-space:nowrap;cursor:pointer}.solo-chip[hidden]{display:none}.solo-chip:after{margin-left:5px;content:"\d7";opacity:.75}.solo-chip:hover{background:#d6f36b38}.layer-switch{position:relative;display:block;width:26px;height:15px;flex:none;border:1px solid #3d4239;border-radius:999px;background:#ffffff08;cursor:pointer;transition:background .14s ease,border-color .14s ease}.layer-switch input{position:absolute;width:1px;height:1px;opacity:0}.layer-switch>span{position:absolute;top:2px;left:2px;width:9px;height:9px;border-radius:50%;background:#6b7163;transition:transform .14s ease,background .14s ease}.layer-switch:hover{border-color:#5a6053}.layer-switch:has(input:checked){border-color:#d6f36b80;background:#d6f36b24}.layer-switch:has(input:checked)>span{background:var(--accent);transform:translate(11px)}.layer-switch:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}.layer-section.is-collapsed .category-toggles,.layer-section.is-collapsed .zone-list{display:none}.text-symbol{display:grid;width:22px;height:22px;flex:none;place-items:center;border:1px solid color-mix(in srgb,var(--pin-color) 38%,transparent);border-radius:7px;background:color-mix(in srgb,var(--pin-color) 38%,#151814);color:#f1f4e7;font-family:Arial Narrow,Roboto Condensed,sans-serif;font-size:10px;font-weight:900;letter-spacing:-.04em;text-shadow:0 1px 2px #000}.zone-list{padding:0 10px 11px}.zone-index-item{--zone-depth: 0;display:grid;width:100%;min-height:27px;grid-template-columns:10px minmax(0,1fr);gap:7px;align-items:center;padding:4px 8px 4px calc(8px + var(--zone-depth) * 13px);border:1px solid transparent;border-radius:5px;background:transparent;color:#aeb3a5;font-size:10px;font-weight:600;text-align:left;cursor:pointer}.zone-index-item:hover,.zone-index-item:focus-visible{border-color:color-mix(in srgb,var(--zone-color) 42%,transparent);outline:none;background:#ffffff09;color:var(--text)}.zone-index-item.is-current{background:#ffffff0e;color:#f0f2e8}.zone-index-item.is-highlighted{border-color:color-mix(in srgb,var(--zone-color) 70%,white 18%);background:color-mix(in srgb,var(--zone-color) 15%,transparent);color:#fff}#zone-index.has-highlights .zone-index-item:not(.is-highlighted):not(.is-current){opacity:.58}.zone-index-item>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zone-index-marker{width:8px;height:8px;border:1px solid color-mix(in srgb,var(--zone-color) 78%,white);border-radius:2px;background:color-mix(in srgb,var(--zone-color) 18%,transparent)}.zone-index-item.is-highlighted .zone-index-marker{border-color:#fff;background:var(--zone-color);box-shadow:0 0 7px color-mix(in srgb,var(--zone-color) 65%,transparent)}.category-toggles{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px 12px}.category-toggle{position:relative;display:inline-flex;overflow:hidden;align-items:center;gap:5px;max-width:100%;min-height:30px;padding:3px 8px 3px 4px;border:1px solid #363a32;border-radius:999px;--pill-bg: #1a1c19;background:var(--pill-bg);color:#777c70;cursor:pointer;-webkit-user-select:none;user-select:none}.category-toggle:hover{border-color:#5a6053;color:var(--text)}.category-toggle:has(input:checked){border-color:color-mix(in srgb,var(--pin-color) 48%,#454a40);--pill-bg: color-mix(in srgb, var(--pin-color) 10%, #171a16);color:#d8dccf;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pin-color) 9%,transparent)}.category-toggle input{position:absolute;width:1px;height:1px;opacity:0}.category-icon{display:grid;width:22px;height:22px;flex:none;place-items:center;border:0;background:transparent;color:var(--pin-color);font-size:9px;font-weight:900;text-transform:uppercase}.category-icon.has-source-icon:before,.result-dot.has-source-icon:before,#detail-dot.has-source-icon:before,.pin.has-source-icon:after{display:block;background:var(--pin-icon) center / contain no-repeat;content:"";filter:var(--icon-outset)}.category-icon.has-source-icon:before{width:14px;height:14px;filter:var(--icon-outset)}.result-dot.has-source-icon,#detail-dot.has-source-icon{border-radius:0;background:transparent;box-shadow:none}.result-dot.has-source-icon:before{width:16px;height:16px}.category-name{overflow:hidden;max-width:118px;font-size:10px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.category-count{color:#747a6d;transition:opacity .11s ease;font-size:9px;font-variant-numeric:tabular-nums}.sidebar-footer{display:flex;align-items:center;gap:7px;min-height:44px;padding:0 18px;border-top:1px solid var(--line);color:var(--muted);font-size:9px;letter-spacing:.06em;text-transform:uppercase}.live-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 7px #d6f36b99}.map-panel{position:relative;grid-column:2;grid-row:2;min-width:0;min-height:0;background:#0c0e0c}.map{position:absolute;inset:0;overflow:hidden;outline:none;background:radial-gradient(circle at 50% 50%,rgba(102,111,86,.13),transparent 56%),#0b0d0b;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.map .ol-viewport{position:absolute;inset:0}.map .ol-layer canvas{display:block}.map .ol-viewport.is-dragging{cursor:grabbing}.map:after{position:absolute;z-index:2;inset:0;background:linear-gradient(90deg,rgba(5,7,5,.36),transparent 7%,transparent 93%,rgba(5,7,5,.25)),linear-gradient(180deg,rgba(5,7,5,.2),transparent 10%,transparent 92%,rgba(5,7,5,.35));content:"";pointer-events:none}.map-loading{position:absolute;z-index:10;top:50%;left:50%;display:grid;min-width:235px;padding:24px;place-items:center;border:1px solid var(--line);border-radius:12px;background:#141713eb;box-shadow:0 20px 60px #0006;text-align:center;transform:translate(-50%,-50%);transition:opacity .18s ease}.map-loading[hidden]{display:none}.map-loading strong{margin-top:12px;font-size:13px}.map-loading small{margin-top:5px;color:var(--muted);font-size:10px}.spinner{width:25px;height:25px;border:2px solid rgba(214,243,107,.18);border-top-color:var(--accent);border-radius:50%;animation:spin .75s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.map-corner{position:absolute;z-index:7;right:17px;bottom:17px;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}.map-corner>*{pointer-events:auto}.overview{position:relative;overflow:hidden;border:1px solid var(--line-strong);border-radius:8px;background:#161915e6;box-shadow:0 6px 25px #00000047;cursor:crosshair;line-height:0}.overview[hidden]{display:none}.overview canvas{display:block;opacity:.85}.overview-viewport{position:absolute;border:1px solid var(--accent);border-radius:2px;background:#d6f36b24;pointer-events:none}.zoom-controls{position:absolute;z-index:7;top:17px;right:17px;display:grid;overflow:hidden;width:38px;border:1px solid var(--line-strong);border-radius:8px;background:#161915e6;box-shadow:0 6px 25px #00000038}.zoom-controls button{display:grid;width:38px;height:37px;padding:0;place-items:center;border:0;border-bottom:1px solid var(--line);background:transparent;font-size:20px;cursor:pointer}.zoom-controls button:last-child{border-bottom:0}.zoom-controls button:hover{background:#ffffff0f;color:var(--accent)}.grid-navigator{position:absolute;z-index:8;top:17px;right:67px;display:flex;overflow:hidden;align-items:stretch;border:1px solid var(--line-strong);border-radius:8px;background:#161915f0;box-shadow:0 6px 25px #00000038}.grid-navigator[hidden]{display:none}.grid-navigator button{width:36px;padding:0;border:0;border-right:1px solid var(--line);background:transparent;color:var(--muted);font-size:17px;cursor:pointer}.grid-navigator button:hover{color:var(--accent)}.grid-navigator label{display:flex;height:36px;align-items:center;gap:7px;padding:0 9px;color:var(--muted);font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.grid-navigator input{width:74px;padding:4px 6px;border:1px solid #3c4137;border-radius:4px;outline:none;background:#0e110d;color:var(--accent);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:lowercase;-webkit-user-select:text;user-select:text}.grid-navigator input:focus{border-color:#d6f36bad}.map-hint{position:relative;display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:#0f110ec2;color:#eef0e49e;font-size:9px;letter-spacing:.08em;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.map-hint i{width:2px;height:2px;border-radius:50%;background:currentColor}.pin-detail{position:absolute;z-index:9;right:68px;bottom:17px;width:min(360px,calc(100% - 100px));max-height:min(500px,calc(100% - 40px));overflow:auto;padding:20px;border:1px solid var(--line-strong);border-radius:11px;background:#151814f5;box-shadow:0 18px 55px #00000073;-webkit-user-select:text;user-select:text;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.pin-detail[hidden]{display:none}.detail-close{position:absolute;top:10px;right:11px;width:29px;height:29px;padding:0;border:0;border-radius:6px;background:#ffffff0a;color:var(--muted);font-size:21px;cursor:pointer}.detail-close:hover{color:var(--text)}.detail-category{display:flex;align-items:center;gap:7px;padding-right:30px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.detail-category #detail-dot{display:grid;width:20px;height:20px;flex:0 0 20px;place-items:center;border-radius:50%;background:var(--pin-color);color:#fff;font-size:7px;letter-spacing:0}#detail-dot.has-source-icon:before{width:16px;height:16px}.pin-detail h2{margin:10px 0 11px;font-family:Arial Narrow,Roboto Condensed,sans-serif;font-size:22px;line-height:1.12}.pin-detail>p{margin:0;color:#b9bdb0;font-size:12px;line-height:1.55;white-space:pre-line}.detail-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.detail-links[hidden]{display:none}.detail-link{overflow:hidden;max-width:100%;padding:5px 10px;border:1px solid #3d4239;border-radius:999px;background:#ffffff08;color:#b9bdb0;font-size:11px;font-weight:650;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.detail-link:hover{border-color:#d6f36b80;background:#d6f36b1a;color:var(--text)}.pin-detail dl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:17px 0 0;padding-top:13px;border-top:1px solid var(--line)}.pin-detail dl div{min-width:0}.pin-detail dt{color:#71766a;font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.pin-detail dd{overflow:hidden;margin:4px 0 0;color:#c6cabd;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.fatal-error{position:fixed;z-index:100;inset:50% auto auto 50%;width:min(460px,calc(100% - 40px));padding:24px;border:1px solid #7e3f3f;border-radius:12px;background:#261919;box-shadow:0 25px 80px #00000080;transform:translate(-50%,-50%);-webkit-user-select:text;user-select:text}.fatal-error[hidden]{display:none}.fatal-error p{margin:8px 0 0;color:#c8aaaa;font-size:13px}@media(max-width:980px){:root{--sidebar: 300px}.map-pickers label>span{display:none}.map-pickers select{max-width:190px}}@media(max-width:760px){:root{--topbar: 64px}.app-shell{grid-template-columns:1fr}.topbar{grid-template-columns:auto minmax(0,1fr) auto}.brand{padding:0 15px;border-right:0}.brand small{display:none}.map-pickers{justify-content:center;padding:0 7px}.map-pickers select{max-width:135px;height:35px;padding-left:8px;font-size:11px}.mobile-legend{display:grid}.sidebar{position:fixed;z-index:30;top:var(--topbar);bottom:0;left:0;width:min(330px,calc(100% - 42px));box-shadow:18px 0 50px #00000073;transform:translate(-102%);transition:transform .18s ease}.sidebar.is-open{transform:translate(0)}.map-panel{grid-column:1}.pin-detail{right:14px;bottom:55px;width:calc(100% - 28px)}}
M frontend/app.css +19 -2