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>
| M | assets/ | 2 | +- |
| M | frontend/ | 21 | +++++++++++++++++++-- |
@@ -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)}}@@ -540,6 +540,20 @@ input {
540540 opacity: 0;541541 }542542 543+/* 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+.category-toggle .only-button::before {547+ position: absolute;548+ top: -9px;549+ right: 100%;550+ bottom: -9px;551+ width: 24px;552+ background: linear-gradient(90deg, transparent, var(--pill-bg) 85%);553+ content: "";554+ pointer-events: none;555+}556+543557 .only-button:hover {544558 background: rgba(214, 243, 107, 0.16);545559 }@@ -737,7 +751,10 @@ input {
737751 padding: 3px 8px 3px 4px;738752 border: 1px solid #363a32;739753 border-radius: 999px;740- background: rgba(255, 255, 255, 0.018);754+ /* Named so the only-button can fade a long title into itself using whatever755+ colour the pill happens to be. */756+ --pill-bg: #1a1c19;757+ background: var(--pill-bg);741758 color: #777c70;742759 cursor: pointer;743760 user-select: none;@@ -750,7 +767,7 @@ input {
750767 751768 .category-toggle:has(input:checked) {752769 border-color: color-mix(in srgb, var(--pin-color) 48%, #454a40);753- background: color-mix(in srgb, var(--pin-color) 10%, #171a16);770+ --pill-bg: color-mix(in srgb, var(--pin-color) 10%, #171a16);754771 color: #d8dccf;755772 box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pin-color) 9%, transparent);756773 }