Hovering the button turned its background semi-transparent, so the title it was meant to sit over showed straight through it. It now takes the pill's own colour in both states, tinted rather than faded when hovered. The fade ahead of it was also twice as wide as it needed to be, dimming titles that were never in the way. It is now just enough to stop a title ending in a hard vertical cut.
- commit
- 5aae03f6c8282d53619996b41b7fb573e560f443
- parent
- a34678807c502484f2afa0c279da16b53e57c1e1
- author
- Dami <dami.etoile@gmail.com>
| M | assets/ | 2 | +- |
| M | frontend/ | 15 | +++++++++------ |
@@ -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}.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)}}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:var(--pill-bg, #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:12px;background:linear-gradient(90deg,transparent,var(--pill-bg));content:"";pointer-events:none}.only-button:hover{background:color-mix(in srgb,var(--accent) 18%,var(--pill-bg, #1d211a))}.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)}}@@ -519,7 +519,9 @@ input {
519519 border: 1px solid rgba(214, 243, 107, 0.5);520520 border-radius: 999px;521521 opacity: 0;522- background: #1d211a;522+ /* Opaque, and the pill's own colour: whatever is under the button must not523+ show through it, in either state. */524+ background: var(--pill-bg, #1d211a);523525 color: var(--accent);524526 font-size: 8px;525527 font-weight: 800;@@ -541,21 +543,22 @@ input {
541543 }542544 543545 /* A long title runs the full width of its pill, so the button lands on top of544- the last word rather than on the count it replaces. The title fades into the545- button instead of colliding with it. */546+ the last word rather than on the count it replaces. Just enough fade to stop547+ the title ending in a hard vertical cut against the button; any wider and it548+ dims a title that was never in the way. */546549 .category-toggle .only-button::before {547550 position: absolute;548551 top: -9px;549552 right: 100%;550553 bottom: -9px;551- width: 24px;552- background: linear-gradient(90deg, transparent, var(--pill-bg) 85%);554+ width: 12px;555+ background: linear-gradient(90deg, transparent, var(--pill-bg));553556 content: "";554557 pointer-events: none;555558 }556559 557560 .only-button:hover {558- background: rgba(214, 243, 107, 0.16);561+ background: color-mix(in srgb, var(--accent) 18%, var(--pill-bg, #1d211a));559562 }560563 561564 .only-group {