/* ============================================================ NPN TACTICAL — "NIGHTWATCH" theme for the home map page Loads LAST in . Overrides npn-ui.css + add-on skins. Spec: docs/redesign/DESIGN-SPEC.md v1.0 ============================================================ */ /* ---- 1. TOKENS ------------------------------------------------ */ :root { /* surfaces */ --tac-bg: #0C0E0D; --tac-bg-deep: #060707; --tac-surface-1s: #111513; --tac-surface-2: #161B18; --tac-surface-3: #1B221D; --tac-inset: #0B0F0D; /* lines */ --tac-line: #2A322C; --tac-line-strong: #3C4A40; --tac-line-accent: #2EA043; /* ink */ --tac-text: #D7E0D9; --tac-text-bright: #EFF5F0; --tac-muted: #8CA394; --tac-dim: #5C6E62; --tac-ink-on-fill: #06120A; /* status */ --tac-green: #46E06B; --tac-green-dim: #2EA043; --tac-amber: #FFB84D; --tac-orange: #FF8A3D; --tac-red: #FF6B5E; --tac-red-fill: #E5484D; --tac-blue: #6CB2FF; --tac-teal: #4DC9B8; --tac-gray: #9AA7A0; /* classification bar */ --tac-class-bg: #1B7A3D; --tac-class-text: #FFFFFF; /* spacing */ --tac-space-1: 2px; --tac-space-2: 4px; --tac-space-3: 8px; --tac-space-4: 12px; --tac-space-5: 16px; --tac-space-6: 24px; --tac-space-7: 32px; /* shape */ --tac-radius-0: 0; --tac-radius-1: 1px; --tac-radius-2: 2px; --tac-border: 1px solid var(--tac-line); --tac-border-strong: 1px solid var(--tac-line-strong); /* elevation / glow (rationed) */ --tac-shadow-panel: 0 8px 24px rgba(0,0,0,.50); --tac-shadow-float: 0 12px 32px rgba(0,0,0,.60); --tac-glow-green: 0 0 8px rgba(70,224,107,.35); --tac-glow-red: 0 0 8px rgba(229,72,77,.40); --tac-inset-focus: inset 0 0 0 1px rgba(70,224,107,.35); /* z-index */ --tac-z-map: 0; --tac-z-map-frame: 650; --tac-z-rail: 10; --tac-z-strip: 15000; --tac-z-dock: 2147483000; --tac-z-panel: 2147482400; --tac-z-toast: 2147483200; --tac-z-boot: 2147483600; /* type */ --tac-font-display: "Saira Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; --tac-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; /* re-point legacy npn-ui.css vars so anything still reading them inherits the NIGHTWATCH palette on this page */ --bg: var(--tac-bg); --panel: var(--tac-surface-1s); --panel2: var(--tac-surface-2); --panel3: var(--tac-inset); --line: var(--tac-line); --line2: var(--tac-line-strong); --text: var(--tac-text); --muted: var(--tac-muted); --green: var(--tac-green); --cyan: var(--tac-blue); --amber: var(--tac-amber); --red: var(--tac-red); --blue: var(--tac-blue); --shadow: var(--tac-shadow-panel); } /* ---- 2. BASE -------------------------------------------------- */ html, body { background: var(--tac-bg); /* kill legacy radial gradients */ color: var(--tac-text); font-family: var(--tac-font-mono); font-size: 12px; line-height: 1.5; } body::after { content: none; } /* kill legacy full-page grid overlay */ ::selection { background: var(--tac-green-dim); color: var(--tac-ink-on-fill); } code { color: var(--tac-muted); font-family: var(--tac-font-mono); } /* scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--tac-line-strong) var(--tac-bg-deep); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--tac-bg-deep); } ::-webkit-scrollbar-thumb { background: var(--tac-line-strong); border: 1px solid var(--tac-bg-deep); border-radius: 0; } ::-webkit-scrollbar-thumb:hover { background: var(--tac-green-dim); } /* focus */ :focus-visible { outline: 2px solid var(--tac-green); outline-offset: 2px; } /* ---- 3. BUTTONS ------------------------------------------------ */ button, .btn, a.btn { height: 34px; min-height: 34px; padding: 0 14px; background: var(--tac-surface-2); border: 1px solid var(--tac-line-strong); color: var(--tac-text); font-family: var(--tac-font-display); font-size: 12px; font-weight: 600; letter-spacing: .10em; text-transform: uppercase; border-radius: var(--tac-radius-1) !important; cursor: pointer; overflow: visible; isolation: auto; box-shadow: none; transition: background .12s, border-color .12s, color .12s; } button::before, .btn::before, a.btn::before, button::after, .btn::after, a.btn::after { content: none; } /* kill sweep + inner border */ button:hover, .btn:hover, a.btn:hover { background: var(--tac-surface-3); border-color: var(--tac-green-dim); color: var(--tac-text-bright); transform: none; box-shadow: none; } button:active, .btn:active, a.btn:active { background: var(--tac-inset); transform: translateY(1px); } .tac-btn-primary, #btnExport { background: var(--tac-green); border-color: var(--tac-green); color: var(--tac-ink-on-fill); } .tac-btn-primary:hover, #btnExport:hover { background: #5FE982; border-color: #5FE982; color: var(--tac-ink-on-fill); } /* toggle buttons injected by add-ons: selected state */ button.ring-on, button.ops-on, button.radar-on, button.solar-on, button.layers-on { background: #0F1F14; color: var(--tac-green); border-color: var(--tac-green-dim); box-shadow: inset 0 -2px 0 var(--tac-green); } button.solar-storm { color: var(--tac-red); border-color: var(--tac-red-fill); } /* ---- 4. INPUTS / SELECTS / CHECKBOXES -------------------------- */ input, select { height: 34px; min-height: 34px; background: var(--tac-inset); border: 1px solid var(--tac-line); color: var(--tac-text); font-family: var(--tac-font-mono); font-size: 12px; font-weight: 400; padding: 0 10px; border-radius: 0 !important; } input::placeholder { color: var(--tac-dim); } input:focus, select:focus { border-color: var(--tac-green-dim); box-shadow: var(--tac-inset-focus); outline: none; } select { appearance: none; -webkit-appearance: none; padding-right: 26px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='5'%3E%3Cpath d='M0 0l3.5 5L7 0z' fill='%238CA394'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } select option { background: var(--tac-inset); color: var(--tac-text); } input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; min-height: 14px; border: 1px solid var(--tac-line-strong); background: var(--tac-inset); border-radius: 0 !important; display: inline-grid; place-items: center; padding: 0; margin: 0; cursor: pointer; flex: 0 0 auto; } input[type="checkbox"]:checked { background: var(--tac-green); border-color: var(--tac-green); } input[type="checkbox"]:checked::after { content: ""; width: 8px; height: 8px; background: var(--tac-ink-on-fill); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%); } .check-row { gap: 8px; font-size: 12px; font-family: var(--tac-font-mono); color: var(--tac-text); } /* ---- 5. CLASSIFICATION BAR ------------------------------------ */ .tac-class-bar { height: 18px; display: grid; place-items: center; background: var(--tac-class-bg); color: var(--tac-class-text); font: 600 10px var(--tac-font-display); letter-spacing: .22em; text-transform: uppercase; user-select: none; } /* ---- 6. COMMAND STRIP (topbar) --------------------------------- */ .page { min-height: 0; height: calc(100vh - 18px); display: flex; flex-direction: column; } .topbar { flex: 0 0 auto; padding: 0 var(--tac-space-5); gap: 0 var(--tac-space-5); background: var(--tac-surface-1s); border-bottom: 1px solid var(--tac-line-strong); backdrop-filter: none; -webkit-backdrop-filter: none; } .brand { height: 80px; gap: 16px; } .logo { display: grid; place-items: center; width: 72px; height: 72px; background: #060707; border: 1px solid var(--tac-green-dim); color: var(--tac-green); font: 700 14px var(--tac-font-display); letter-spacing: .04em; box-shadow: none; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); overflow: hidden; padding: 0; } .logo img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 4px rgba(70, 224, 107, .35)); } .title { font: 700 22px var(--tac-font-display); letter-spacing: .11em; text-transform: uppercase; color: var(--tac-text-bright); } .subtitle { font: 400 9px var(--tac-font-mono); letter-spacing: .06em; color: var(--tac-muted); margin-top: 2px; text-transform: uppercase; } /* status readouts (right cluster) */ .tac-readouts { margin-left: auto; display: flex; align-items: center; gap: var(--tac-space-5); height: 52px; } .tac-cell { display: grid; gap: 1px; text-align: right; } .tac-cell .cap { font: 500 9px var(--tac-font-display); letter-spacing: .10em; text-transform: uppercase; color: var(--tac-muted); } .tac-cell .val { font: 600 13px var(--tac-font-mono); font-variant-numeric: tabular-nums; color: var(--tac-text); white-space: nowrap; } #tacDataAge.tac-ok { color: var(--tac-green); } #tacDataAge.tac-warn { color: var(--tac-amber); } #tacDataAge.tac-alert { color: var(--tac-red); } /* MESHCON badge */ .tac-meshcon { height: 34px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--tac-gray); color: var(--tac-gray); background: var(--tac-bg-deep); font: 700 13px var(--tac-font-display); letter-spacing: .12em; white-space: nowrap; user-select: none; } .tac-meshcon[data-level="5"] { border-color: var(--tac-green); color: var(--tac-green); box-shadow: var(--tac-glow-green); } .tac-meshcon[data-level="4"] { border-color: var(--tac-green-dim); color: var(--tac-green-dim); } .tac-meshcon[data-level="3"] { border-color: var(--tac-amber); color: var(--tac-amber); } .tac-meshcon[data-level="2"] { border-color: var(--tac-orange); color: var(--tac-orange); } .tac-meshcon[data-level="1"] { border-color: var(--tac-red-fill); background: var(--tac-red-fill); color: #060707; font-weight: 700; box-shadow: var(--tac-glow-red); } .tac-meshcon .tac-led { background: currentColor; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); } .tac-meshcon[data-level="1"] .tac-led { animation: tacBlink 1.2s steps(1) infinite; } /* status LEDs (site convention) */ .tac-led { width: 8px; height: 8px; border-radius: 2px; display: inline-block; background: var(--tac-gray); box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); flex: 0 0 auto; } .tac-led.led-ok { background: var(--tac-green); } .tac-led.led-warn { background: var(--tac-amber); } .tac-led.led-alert { background: var(--tac-red-fill); } .tac-led.led-alert.is-alert { animation: tacBlink 1.2s steps(1) infinite; } /* ops rail (nav.actions, second strip row) */ .topbar > nav.actions { flex: 1 0 100%; display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; height: 40px; padding: 0 0 0 0; border-top: 1px solid var(--tac-line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .topbar > nav.actions::-webkit-scrollbar { display: none; } .topbar > nav.actions > button, .topbar > nav.actions > a.btn { flex: 0 0 auto; height: 30px; min-height: 30px; padding: 0 12px; font-size: 11px; } .topbar > nav.actions.tac-actions-split { display: grid; grid-template-rows: 38px auto; align-items: stretch; gap: 0; height: auto; min-height: 78px; overflow: visible; } .tac-action-primary, .tac-action-overlays { display: flex; align-items: center; gap: 6px; min-width: 0; } .tac-action-primary { border-bottom: 1px solid var(--tac-line); overflow: hidden; } .tac-action-overlays { flex-wrap: wrap; row-gap: 6px; padding: 4px 0; overflow: visible; } .tac-action-overlays::-webkit-scrollbar { display: none; } .topbar > nav.actions.tac-actions-split .tac-action-primary > a.btn, .topbar > nav.actions.tac-actions-split .tac-action-overlays > button { flex: 0 0 auto; height: 30px; min-height: 30px; padding: 0 12px; font-size: 11px; } /* view control segmented group (lives inside nav.actions, forced first) */ .tac-viewgroup { order: -1; display: inline-flex; flex: 0 0 auto; border: 1px solid var(--tac-line-strong); margin-right: 6px; } .tac-viewgroup button { height: 28px; min-height: 28px; padding: 0 12px; font-size: 11px; border: 0; border-left: 1px solid var(--tac-line); border-radius: 0 !important; } .tac-viewgroup button:first-child { border-left: 0; } .tac-viewgroup button:hover { border-color: var(--tac-line); } .tac-quietlinks { display: inline-flex; gap: 6px; margin-left: auto; } .npn-mobile-action { display: none !important; } /* ---- 7. RAILS / PANELS ----------------------------------------- */ .map-layout { flex: 1 1 auto; min-height: 0; height: auto; /* npn-ui.css calc no longer applies */ grid-template-columns: minmax(280px, 320px) minmax(420px, 1fr) minmax(260px, 320px); } .map-layout > #map, .map-layout > .sidebar { min-width: 0; } .sidebar { background: var(--tac-surface-1s); border-right: 1px solid var(--tac-line-strong); padding: var(--tac-space-4); contain: layout paint; z-index: var(--tac-z-rail); min-height: 0; } .sidebar.right { border-right: none; border-left: 1px solid var(--tac-line-strong); } .sidebar.right .panel { height: 100%; min-height: 0; display: flex; flex-direction: column; } .sidebar.right .panel-body { flex: 1 1 auto; min-height: 0; overflow: auto; } .panel { background: var(--tac-surface-1s); border: 1px solid var(--tac-line); box-shadow: none; } .panel-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--tac-surface-2); border-bottom: 1px solid var(--tac-line-strong); font: 600 12px var(--tac-font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--tac-text-bright); } .panel-head .tac-led { margin-left: auto; } .panel-body { padding: var(--tac-space-4); } /* corner brackets — two corners, diagonal, deliberate restraint */ .tac-corners { position: relative; } .tac-corners::before, .tac-corners::after { content: ""; position: absolute; width: 7px; height: 7px; pointer-events: none; } .tac-corners::before { top: -1px; left: -1px; border-top: 1px solid var(--tac-green-dim); border-left: 1px solid var(--tac-green-dim); } .tac-corners::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--tac-green-dim); border-right: 1px solid var(--tac-green-dim); } /* form labels */ .form-row label { color: var(--tac-muted); font: 500 10px var(--tac-font-display); letter-spacing: .10em; text-transform: uppercase; } .tac-panel-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } /* solar center link (harvest contract id preserved) */ .npn-solar-center-home-link { display: inline-flex; align-items: center; justify-content: center; height: 34px; min-height: 34px; padding: 0 12px; border: 1px solid rgba(255,184,77,.5); background: var(--tac-surface-2); color: var(--tac-amber); text-decoration: none; font: 600 12px var(--tac-font-display); letter-spacing: .10em; text-transform: uppercase; white-space: nowrap; } .npn-solar-center-home-link:hover { background: var(--tac-surface-3); border-color: var(--tac-amber); } /* stat wells */ .stat-grid { gap: 8px; } .stat { background: var(--tac-inset); border: 1px solid var(--tac-line); padding: 8px 10px; } .stat .num { color: var(--tac-green); font: 600 22px var(--tac-font-mono); font-variant-numeric: tabular-nums; } #statRecent.tac-warn { color: var(--tac-amber); } #statRecent.tac-alert { color: var(--tac-red); } .stat .txt { color: var(--tac-muted); font: 500 9px var(--tac-font-display); letter-spacing: .10em; text-transform: uppercase; } .small, #dataStatus { color: var(--tac-muted); font: 400 10px var(--tac-font-mono); line-height: 1.6; } .tac-data-status { display: grid; gap: 4px; } .tac-data-summary, .tac-data-row { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 8px; } .tac-data-summary { grid-template-columns: auto minmax(0, 1fr); margin-bottom: 2px; } .tac-data-row span { color: var(--tac-dim); font: 600 9px var(--tac-font-display); letter-spacing: .12em; text-transform: uppercase; } .tac-data-row code, .tac-data-summary code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tac-data-pill { display: inline-flex; align-items: center; min-height: 18px; padding: 0 7px; border: 1px solid var(--tac-line-strong); color: var(--tac-text-bright); background: var(--tac-surface-2); font: 600 9px var(--tac-font-display); letter-spacing: .12em; text-transform: uppercase; } .tac-data-pill.tac-data-ok, .tac-data-row.tac-data-ok code { color: var(--tac-green); } .tac-data-pill.tac-data-load, .tac-data-row.tac-data-load code { color: var(--tac-blue); } .tac-data-pill.tac-data-warn, .tac-data-row.tac-data-warn code { color: var(--tac-amber); } .tac-data-pill.tac-data-fail, .tac-data-row.tac-data-fail code { color: var(--tac-red); } .tac-data-row.tac-data-standby code { color: var(--tac-muted); } #dataStatus::after { content: "\258C"; margin-left: 3px; color: var(--tac-green); animation: tacBlink 1.1s steps(1) infinite; } /* ---- 8. NODE LIST — contact entries ----------------------------- */ .contact-panel-body { box-sizing: border-box; height: 100%; overflow: hidden !important; } .contact-browser { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; height: 100%; min-height: 0; } .contact-letter-rail { display: grid; grid-template-rows: repeat(27, minmax(0, 1fr)); gap: 2px; min-height: 0; } .contact-letter { width: 24px; min-width: 24px; min-height: 0 !important; border: 1px solid rgba(70,224,107,.26); background: rgba(70,224,107,.08); color: var(--tac-green); font: 700 9px var(--tac-font-display); line-height: 1; cursor: pointer; } .contact-letter:hover, .contact-letter:focus-visible { border-color: rgba(70,224,107,.72); background: rgba(70,224,107,.18); outline: none; } .contact-letter.is-disabled { border-color: rgba(91,111,95,.16); background: rgba(91,111,95,.05); color: rgba(141,162,146,.34); cursor: default; } .node-list { display: grid; align-content: start; gap: 8px; min-height: 0; overflow: auto; padding-right: 2px; } .node-item { position: relative; background: var(--tac-inset); border: 1px solid var(--tac-line); border-left: 3px solid var(--led, var(--tac-gray)); padding: 8px 10px 8px 12px; cursor: pointer; } .node-item:hover { background: var(--tac-surface-2); border-color: var(--tac-line-strong); border-left-color: var(--led, var(--tac-gray)); } .node-item.node-item-jump { border-color: rgba(70,224,107,.80); box-shadow: inset 0 0 0 1px rgba(70,224,107,.45), 0 0 18px rgba(70,224,107,.16); } .node-name { font: 600 13px var(--tac-font-display); color: var(--tac-text-bright); letter-spacing: .02em; overflow-wrap: anywhere; } .node-meta { color: var(--tac-muted); font: 400 10px var(--tac-font-mono); margin-top: 3px; overflow-wrap: anywhere; } .node-key { margin-top: 2px; } .node-key code { color: var(--tac-dim); font-size: 9px; word-break: break-all; } /* ---- 9. MAP ------------------------------------------------------ */ #map { background: var(--tac-bg-deep); position: relative; } .leaflet-container { font-family: var(--tac-font-mono); background: var(--tac-bg-deep); } /* graticule frame (instrument bezel, not scanlines) */ .tac-map-frame { position: absolute; inset: 0; z-index: var(--tac-z-map-frame); pointer-events: none; border: 1px solid rgba(70,224,107,.18); background: repeating-linear-gradient(90deg, rgba(70,224,107,.25) 0 1px, transparent 1px 80px) top / 100% 5px no-repeat, repeating-linear-gradient(0deg, rgba(70,224,107,.25) 0 1px, transparent 1px 80px) left / 5px 100% no-repeat; } /* zoom control */ .leaflet-control-zoom a { width: 30px !important; height: 30px !important; line-height: 30px !important; background: var(--tac-surface-2) !important; color: var(--tac-text) !important; border: 1px solid var(--tac-line) !important; border-radius: 0 !important; } .leaflet-control-zoom a:hover { border-color: var(--tac-green-dim) !important; color: var(--tac-text-bright) !important; } .leaflet-bar { border: none !important; box-shadow: var(--tac-shadow-panel) !important; border-radius: 0 !important; } /* attribution */ .leaflet-control-attribution { background: rgba(6,7,7,.85) !important; color: var(--tac-dim) !important; font: 9px var(--tac-font-mono) !important; } .leaflet-control-attribution a { color: var(--tac-muted) !important; } /* AO boundary label */ .tac-ao-label { font: 600 9px var(--tac-font-mono); letter-spacing: .08em; color: rgba(70,224,107,.55); text-shadow: 0 1px 2px #000; white-space: nowrap; background: none; border: none; } /* ---- 9.1 MARKERS — contact symbology ---------------------------- npn-highend-icons.js markup: .npn-leaflet-icon > .npn-map-icon.npn-icon-{kind} > (.npn-map-icon-core svg, .npn-map-icon-label). Core is hidden; the shape is drawn on .npn-map-icon and the glyph via the label element. This file fully replaces npn-highend-icons.css (link dropped in index.html). */ .npn-leaflet-icon { background: transparent !important; border: 0 !important; display: grid; place-items: center; } .npn-map-icon { position: relative; display: grid; place-items: center; width: 22px; height: 22px; } .npn-map-icon-core { display: none; } /* kills legacy SVG + pulse pseudos */ .npn-map-icon-label { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; font-size: 0; /* hide 2-letter JS label; glyph via ::after */ line-height: 1; color: var(--tac-ink-on-fill); } .npn-map-icon-label::after { font: 600 10px var(--tac-font-mono); } /* client — friendly-unit circle */ .npn-icon-client { width: 20px; height: 20px; border-radius: 50%; background: var(--tac-blue); border: 2px solid rgba(216,224,217,.85); box-shadow: 0 0 0 1px #060707, 0 1px 4px rgba(0,0,0,.6); } .npn-icon-client .npn-map-icon-label::after { content: "C"; } /* repeater — infrastructure diamond (rotated square keeps a true border) */ .npn-icon-repeater { width: 26px; height: 26px; } .npn-icon-repeater::before { content: ""; position: absolute; width: 17px; height: 17px; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(45deg); background: var(--tac-green); border: 2px solid rgba(216,224,217,.85); box-shadow: 0 0 0 1px #060707; } .npn-icon-repeater .npn-map-icon-label::after { content: "R"; } /* room — message hub square */ .npn-icon-room { width: 22px; height: 22px; background: var(--tac-amber); border: 2px solid rgba(216,224,217,.85); box-shadow: 0 0 0 1px #060707, 0 1px 4px rgba(0,0,0,.6); } .npn-icon-room .npn-map-icon-label::after { content: "M"; } /* sensor — triangle (nested clips approximate a border) */ .npn-icon-sensor { width: 22px; height: 22px; } .npn-icon-sensor::before { content: ""; position: absolute; inset: 0; background: rgba(216,224,217,.85); clip-path: polygon(50% 0, 100% 100%, 0 100%); } .npn-icon-sensor::after { content: ""; position: absolute; inset: 4px 3px 2px; background: var(--tac-teal); clip-path: polygon(50% 0, 100% 100%, 0 100%); } .npn-icon-sensor .npn-map-icon-label { padding-top: 6px; } .npn-icon-sensor .npn-map-icon-label::after { content: "S"; } /* unknown — hollow dashed contact */ .npn-icon-unknown { width: 18px; height: 18px; border-radius: 50%; background: var(--tac-surface-2); border: 2px dashed var(--tac-gray); } .npn-icon-unknown .npn-map-icon-label { color: var(--tac-gray); } .npn-icon-unknown .npn-map-icon-label::after { content: "?"; } /* anchors NPN / OKI — cut-corner command posts; the ONLY glowing markers */ .npn-icon-anchor { width: 30px; height: 30px; filter: drop-shadow(0 0 6px rgba(70,224,107,.35)); } .npn-icon-anchor::before { content: ""; position: absolute; inset: 0; background: var(--tac-green); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); } .npn-icon-anchor::after { content: ""; position: absolute; inset: 2px; background: #060707; clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); } .npn-icon-anchor .npn-map-icon-label { font-size: 11px; font-family: var(--tac-font-mono); font-weight: 600; color: var(--tac-green); } /* priority nodes keep their type symbology (see BUILD-NOTES) */ .npn-icon-priority { } /* fallback pins (pre-override flash / resilience if highend-icons absent) */ .marker-pin { width: 22px !important; height: 22px !important; display: grid !important; place-items: center !important; font: 600 10px var(--tac-font-mono) !important; color: var(--tac-ink-on-fill) !important; background: var(--tac-gray) !important; border: 2px solid rgba(216,224,217,.85) !important; border-radius: 0 !important; box-shadow: 0 0 0 1px #060707 !important; clip-path: none !important; } .marker-pin::before { content: none !important; } .marker-client { background: var(--tac-blue) !important; border-radius: 50% !important; } .marker-repeater{ background: var(--tac-green) !important; } .marker-room { background: var(--tac-amber) !important; } .marker-anchor { background: #060707 !important; color: var(--tac-green) !important; border-color: var(--tac-green) !important; } .marker-unknown { background: var(--tac-surface-2) !important; color: var(--tac-gray) !important; border: 2px dashed var(--tac-gray) !important; border-radius: 50% !important; } /* ---- 9.2 CLUSTERS ------------------------------------------------ */ .marker-cluster, .marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background: transparent !important; border-radius: 2px !important; } .marker-cluster div { width: 30px !important; height: 30px !important; margin: 5px !important; border-radius: 2px !important; background: rgba(13,18,15,.92) !important; border: 1px solid rgba(70,224,107,.55); display: grid; place-items: center; } .marker-cluster span { font: 600 12px var(--tac-font-mono) !important; font-variant-numeric: tabular-nums; color: var(--tac-green) !important; line-height: 1 !important; } .marker-cluster-medium div { box-shadow: inset 0 0 0 1px rgba(70,224,107,.25); } .marker-cluster-large div { box-shadow: inset 0 0 0 1px rgba(70,224,107,.25); } .marker-cluster-large span { font-size: 14px !important; } /* ---- 9.3 POPUPS — contact card ----------------------------------- */ .leaflet-popup-content-wrapper { background: var(--tac-surface-1s) !important; color: var(--tac-text) !important; border: 1px solid var(--tac-line-strong); border-radius: 0 !important; box-shadow: var(--tac-shadow-float); padding: 0; } .leaflet-popup-tip { background: var(--tac-surface-1s) !important; border: 1px solid var(--tac-line-strong); } .leaflet-popup-content { margin: 0 !important; width: 260px !important; font: 11px/1.5 var(--tac-font-mono); } .leaflet-container a.leaflet-popup-close-button { color: var(--tac-muted) !important; } .leaflet-container a.leaflet-popup-close-button:hover { color: var(--tac-red) !important; } .tac-popup-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: var(--tac-surface-2); border-bottom: 1px solid var(--tac-line); } .tac-popup-name { font: 600 13px var(--tac-font-display); text-transform: uppercase; letter-spacing: .04em; color: var(--tac-text-bright); overflow-wrap: anywhere; } .tac-popup-chip { font: 600 9px var(--tac-font-mono); border: 1px solid var(--tac-gray); color: var(--tac-gray); border-radius: 2px; padding: 1px 5px; flex: 0 0 auto; } .tac-chip-clt { border-color: var(--tac-blue); color: var(--tac-blue); } .tac-chip-rpt { border-color: var(--tac-green); color: var(--tac-green); } .tac-chip-room { border-color: var(--tac-amber); color: var(--tac-amber); } .tac-chip-sns { border-color: var(--tac-teal); color: var(--tac-teal); } .tac-popup-body { display: grid; grid-template-columns: 64px 1fr; gap: 3px 8px; padding: 8px 10px; } .tac-popup-body .k { font: 500 9px var(--tac-font-display); letter-spacing: .10em; text-transform: uppercase; color: var(--tac-muted); align-self: center; } .tac-popup-body .v { font: 400 11px var(--tac-font-mono); color: var(--tac-text); overflow-wrap: anywhere; } .tac-age-ok { color: var(--tac-green) !important; } .tac-age-warn { color: var(--tac-amber) !important; } .tac-age-bad { color: var(--tac-red) !important; } .tac-popup-actions { padding: 8px 10px; border-top: 1px solid var(--tac-line); background: rgba(70, 224, 107, .04); } .tac-popup-action { width: 100%; min-height: 30px; border: 1px solid rgba(70, 224, 107, .45); background: rgba(70, 224, 107, .10); color: var(--tac-green); font: 700 10px var(--tac-font-display); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; } .tac-popup-action:hover { background: rgba(70, 224, 107, .18); border-color: rgba(70, 224, 107, .75); } .tac-popup-foot { padding: 5px 10px; border-top: 1px solid var(--tac-line); background: var(--tac-inset); } .tac-popup-foot code { color: var(--tac-dim); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } /* ---- 10. INJECTED UI RESKINS -------------------------------------- */ /* minimize bar injected by npn-surgical-ui-cleanup (load-bearing shim) */ .npn-panel-minibar { background: var(--tac-surface-2); border-bottom: 1px solid var(--tac-line); } .npn-panel-minibar button { height: 20px; min-height: 20px; padding: 0 7px; font-size: 10px; border: 1px solid var(--tac-line-strong); background: var(--tac-surface-2); color: var(--tac-text); } /* panel dock — reskin only; all v4/v5 geometry !importants preserved */ #npn-panel-dock.npn-panel-dock, .npn-panel-dock { background: rgba(10,12,11,.96) !important; border: 1px solid var(--tac-line-strong) !important; border-radius: 2px !important; box-shadow: var(--tac-shadow-float) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: var(--tac-text) !important; font-family: var(--tac-font-mono) !important; } #npn-panel-dock .npn-panel-dock-head, .npn-panel-dock .npn-panel-dock-head { border-bottom: 1px solid var(--tac-line) !important; } #npn-panel-dock .npn-panel-dock-head span, .npn-panel-dock .npn-panel-dock-head span { color: var(--tac-muted) !important; font-family: var(--tac-font-mono) !important; font-weight: 600 !important; } #npn-panel-dock .npn-panel-dock-head button, .npn-panel-dock .npn-panel-dock-head button, #npn-panel-dock-restore-all { border-radius: 2px !important; border: 1px solid var(--tac-line-strong) !important; background: var(--tac-surface-2) !important; color: var(--tac-text) !important; font-family: var(--tac-font-display) !important; text-transform: uppercase !important; letter-spacing: .06em !important; } #npn-panel-dock .npn-panel-dock-chip, .npn-panel-dock .npn-panel-dock-chip, #npn-home-spacewx-dock-chip, .npn-home-spacewx-dock-chip { border-radius: 2px !important; background: var(--tac-surface-2) !important; border: 1px solid var(--tac-line) !important; color: var(--tac-text) !important; } #npn-panel-dock .npn-panel-dock-chip:hover, .npn-panel-dock .npn-panel-dock-chip:hover { background: var(--tac-surface-3) !important; } #npn-panel-dock .npn-panel-dock-label, .npn-panel-dock .npn-panel-dock-label { font-family: var(--tac-font-mono) !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .04em; } #npn-panel-dock .npn-panel-dock-icon, .npn-panel-dock .npn-panel-dock-icon { color: var(--tac-amber) !important; } /* mobile helpers from npn-mobile-layout: hide injected Close on desktop (npn-ui-v1, which used to hide it, is dropped) */ @media (min-width: 1181px) { .npn-mobile-panel-close { display: none; } } @media (min-width: 901px) and (pointer: fine) { .npn-mobile-panel-close { display: none; } } /* ---- 11. BOOT — system POST ---------------------------------------- */ .npn-boot { background: var(--tac-bg-deep); color: var(--tac-text); font-family: var(--tac-font-mono); z-index: var(--tac-z-boot); /* failsafe: even if every script fails, the splash removes itself */ animation: tacBootFailsafe .5s ease 9s forwards; } .npn-boot::before, .npn-boot::after { content: none; animation: none; } .boot-card { width: min(560px, calc(100vw - 34px)); background: #0A0C0B; border: 1px solid var(--tac-green-dim); box-shadow: none; clip-path: none; padding: 24px; } .boot-sweep { position: absolute; top: 18px; right: 18px; width: 56px; height: 56px; border: 1px solid var(--tac-line-strong); border-radius: 50%; background: conic-gradient(from 0deg, rgba(70,224,107,.45), transparent 70deg); animation: tacSweep 3s linear infinite; pointer-events: none; } .boot-title { font: 700 15px var(--tac-font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--tac-text-bright); text-shadow: none; margin-bottom: 6px; padding-right: 70px; } .boot-title span:last-child { color: var(--tac-muted); font-size: 12px; } .boot-sub { color: var(--tac-muted); font: 400 10px var(--tac-font-mono); letter-spacing: .08em; border-bottom: 1px solid var(--tac-line-strong); padding-bottom: 10px; margin-bottom: 12px; } .boot-lines { color: var(--tac-text); font-size: 11px; line-height: 1.8; margin-bottom: 16px; } .boot-lines > div { opacity: 0; animation: tacBootLine .01s linear forwards; } .boot-lines > div:nth-child(1) { animation-delay: .15s; } .boot-lines > div:nth-child(2) { animation-delay: .30s; } .boot-lines > div:nth-child(3) { animation-delay: .45s; } .boot-lines > div:nth-child(4) { animation-delay: .60s; } .boot-lines > div:nth-child(5) { animation-delay: .75s; } .boot-lines > div:nth-child(6) { animation-delay: .90s; } .boot-lines span { font-weight: 600; } .boot-lines span.ok { color: var(--tac-green); } .boot-lines span.stby { color: var(--tac-amber); } .boot-lines span.err { color: var(--tac-red); } .boot-lines > div:last-child::after { content: "\258C"; margin-left: 3px; color: var(--tac-green); animation: tacBlink 1.1s steps(1) infinite; } .boot-bar { height: 10px; border: 1px solid var(--tac-line-strong); background: var(--tac-bg-deep); } .boot-bar::before { background: repeating-linear-gradient(90deg, var(--tac-green) 0 6px, transparent 6px 9px); animation: loaderBar 1.4s linear infinite; } .boot-footer { color: var(--tac-dim); font-size: 9px; } /* ---- 12. TOAST (component; used for transient ops notices) --------- */ .tac-toast { position: fixed; right: 16px; bottom: 16px; z-index: var(--tac-z-toast); min-width: 240px; max-width: 320px; background: var(--tac-surface-1s); border: 1px solid var(--tac-line-strong); border-left: 3px solid var(--tac-green); padding: 10px 12px; box-shadow: var(--tac-shadow-float); transform: translateY(6px); opacity: 0; transition: transform .16s ease-out, opacity .16s ease-out; pointer-events: none; } .tac-toast.show { transform: translateY(0); opacity: 1; } .tac-toast.warn { border-left-color: var(--tac-amber); } .tac-toast.alert { border-left-color: var(--tac-red-fill); } .tac-toast .t { font: 600 10px var(--tac-font-display); letter-spacing: .10em; text-transform: uppercase; color: var(--tac-text-bright); } .tac-toast .b { font: 400 11px var(--tac-font-mono); color: var(--tac-muted); margin-top: 2px; } /* ---- 13. KEYFRAMES -------------------------------------------------- */ @keyframes tacBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .25; } } @keyframes tacBootLine { to { opacity: 1; } } @keyframes tacSweep { to { transform: rotate(360deg); } } @keyframes tacBootFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } } /* ---- 14. SQUEEZE / MOBILE ------------------------------------------- */ @media (max-width: 1450px) { .map-layout { grid-template-columns: 300px minmax(420px, 1fr) 280px; } .sidebar.right { display: block; } } @media (max-width: 1250px) { .map-layout { grid-template-columns: 280px minmax(360px, 1fr) 240px; } .sidebar { padding: 8px; } .panel-body { padding: 10px; } .sidebar.right { display: block; } } @media (max-width: 1180px) { .map-layout { grid-template-columns: 280px minmax(0, 1fr); } .sidebar.right { display: none; } .subtitle { display: none; } } /* aligned with npn-mobile-layout.css breakpoints; those rules fix the topbar at top:0 — shift everything down 14px to keep the classification bar. */ @media (max-width: 900px), (pointer: coarse) and (max-width: 1180px) { .tac-class-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 15001; height: calc(14px + var(--npn-safe-top, 0px)); padding-top: var(--npn-safe-top, 0px); font-size: 8px; letter-spacing: .14em; } .topbar, header.topbar { top: calc(14px) !important; } .topbar .actions, nav.actions { top: calc(112px + var(--npn-safe-top, 0px)) !important; } #map, .leaflet-container { top: calc(162px + var(--npn-safe-top, 0px)) !important; } .leaflet-top { top: calc(170px + var(--npn-safe-top, 0px)) !important; } .topbar > nav.actions.tac-actions-split { height: auto !important; min-height: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; } .topbar > nav.actions.tac-actions-split > .tac-action-primary, .topbar > nav.actions.tac-actions-split > .tac-action-overlays { display: contents !important; } .topbar > nav.actions.tac-actions-split .tac-quietlinks { margin-left: 0 !important; } .page { height: 100vh; } .tac-map-frame { display: none; } .npn-mobile-action { display: inline-flex !important; order: -2 !important; flex: 0 0 auto !important; align-items: center !important; justify-content: center !important; min-height: 42px !important; height: 42px !important; padding: 0 12px !important; border-color: var(--tac-green-dim) !important; color: var(--tac-green) !important; background: #0F1F14 !important; } #npnMobileFilters { order: -4 !important; } #npnMobileContacts { order: -3 !important; } #npnMobileTools { order: -2 !important; } .npn-mobile-action.active { background: var(--tac-green) !important; border-color: var(--tac-green) !important; color: var(--tac-ink-on-fill) !important; } /* compact strip row 1: logo + designation + ZULU + MESHCON */ .brand { height: 48px; gap: 8px; } .logo { width: 42px; height: 42px; font-size: 11px; } .title { font-size: 15px; letter-spacing: .08em; } .subtitle { display: none; } .tac-readouts { height: 48px; gap: 10px; } .tac-cell-data, .tac-cell-nodes { display: none; } .tac-cell .val { font-size: 11px; } .tac-meshcon { height: 28px; padding: 0 8px; font-size: 11px; } /* touch targets */ .panel-body button, .panel-body input, .panel-body select, .tac-panel-actions button, .tac-panel-actions a { min-height: 40px; } /* npn-mobile-layout.css forces 44px min-height on all sidebar inputs; keep the custom checkboxes square (20px is still a fine touch target because the whole .check-row label is tappable) */ .sidebar input[type="checkbox"] { width: 20px !important; height: 20px !important; min-height: 20px !important; } /* reskin the existing bottom nav shim */ .npn-mobile-bottom-nav { background: rgba(10,12,11,.98); border-top: 1px solid var(--tac-green-dim); box-shadow: none; } .npn-mobile-bottom-nav button { border: 1px solid var(--tac-line); background: var(--tac-surface-2); color: var(--tac-text); font: 600 10px var(--tac-font-display); letter-spacing: .08em; text-transform: uppercase; } .npn-mobile-bottom-nav button.active { color: var(--tac-green); background: #0F1F14; border-color: var(--tac-green-dim); box-shadow: inset 0 2px 0 var(--tac-green); } .npn-mobile-backdrop { background: rgba(0,0,0,.45); } .npn-mobile-toast { background: var(--tac-surface-1s); border: 1px solid var(--tac-line-strong); border-left: 3px solid var(--tac-green); color: var(--tac-text); font: 600 11px var(--tac-font-mono); box-shadow: var(--tac-shadow-float); } .sidebar { background: var(--tac-surface-1s) !important; border-top: 1px solid var(--tac-green-dim) !important; } .sidebar.right { display: block !important; position: fixed !important; left: 0 !important; right: 0 !important; bottom: var(--npn-safe-bottom, 0px) !important; top: auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; max-height: 58vh !important; z-index: 16001 !important; overflow: auto !important; transform: translateY(calc(100% + 76px)) !important; transition: transform .22s ease !important; border-left: 0 !important; border-top: 1px solid var(--tac-green-dim) !important; box-shadow: 0 -18px 48px rgba(0,0,0,.48) !important; -webkit-overflow-scrolling: touch !important; } body.npn-mobile-contacts-open .sidebar.right { transform: translateY(0) !important; } body.npn-mobile-filters-open .sidebar.right { transform: translateY(calc(100% + 76px)) !important; } body.npn-mobile-contacts-open .sidebar:not(.right) { transform: translateY(calc(100% + 76px)) !important; } body.npn-mobile-contacts-open .npn-mobile-backdrop { display: block !important; } #npn-panel-dock.npn-panel-dock { display: none !important; } body.npn-mobile-filters-open #npn-panel-dock.npn-panel-dock, body.npn-mobile-panel-open #npn-panel-dock.npn-panel-dock, body.npn-mobile-contacts-open #npn-panel-dock.npn-panel-dock, body.npn-mobile-tools-open #npn-panel-dock.npn-panel-dock { display: none !important; } .sidebar.right .panel { height: auto; max-height: calc(58vh - 16px); } .sidebar.right .panel-body { overflow: auto; max-height: calc(58vh - 58px); } } @media (max-width: 430px) { #map, .leaflet-container { top: calc(162px + var(--npn-safe-top, 0px)) !important; } .leaflet-top { top: calc(170px + var(--npn-safe-top, 0px)) !important; } } @media (max-height: 520px) and (orientation: landscape) { .topbar, header.topbar { top: 14px !important; } .topbar .actions, nav.actions { top: calc(64px + var(--npn-safe-top, 0px)) !important; } #map, .leaflet-container { top: calc(110px + var(--npn-safe-top, 0px)) !important; } .leaflet-top { top: calc(118px + var(--npn-safe-top, 0px)) !important; } } /* ---- 15. REDUCED MOTION ---------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .boot-lines > div { animation-delay: 0s !important; } .boot-sweep, .boot-bar::before { animation: none !important; } #dataStatus::after, .boot-lines > div:last-child::after, .tac-led.led-alert.is-alert, .tac-meshcon[data-level="1"] .tac-led { animation: none !important; } .tac-toast { transition: none !important; } /* NOTE: .npn-boot tacBootFailsafe animation is FUNCTIONAL (removes the splash if JS dies) and is intentionally NOT disabled here. */ } /* ============================================================ UNIFIED LOWER DOCK — NIGHTWATCH override (flat, green, sharp) Replaces the blue glassmorphism default from npn-unified-lower-dock.css. ============================================================ */ body.npn-unified-lower-dock-active #npn-panel-dock, #npn-unified-lower-dock { border: 1px solid var(--tac-line-strong) !important; border-radius: 2px !important; background: rgba(10, 12, 11, .96) !important; box-shadow: var(--tac-shadow-float) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.npn-unified-lower-dock-active #npn-panel-dock-list > * { border: 1px solid var(--tac-line) !important; border-left-width: 0 !important; border-radius: 0 !important; background: var(--tac-surface-2) !important; color: var(--tac-text) !important; font-family: var(--tac-font-display) !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase; } body.npn-unified-lower-dock-active #npn-panel-dock-list > *:first-child { border-left-width: 1px !important; } body.npn-unified-lower-dock-active #npn-panel-dock-list > *:hover { background: var(--tac-surface-3) !important; border-color: var(--tac-green-dim) !important; } #npn-unified-adsb-group { border: 1px solid var(--tac-line-strong) !important; border-radius: 0 !important; background: var(--tac-bg-deep) !important; } #npn-unified-adsb-group .npn-unified-dock-btn { border-left: 1px solid var(--tac-line) !important; color: var(--tac-text) !important; font-family: var(--tac-font-display) !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase; } #npn-unified-adsb-group .npn-unified-dock-btn:hover { background: var(--tac-surface-3) !important; color: var(--tac-text-bright) !important; } #npn-unified-adsb-count { border-radius: 2px !important; background: var(--tac-inset) !important; color: var(--tac-blue) !important; font-family: var(--tac-font-mono) !important; } #npn-unified-adsb-group.npn-adsb-shown { border-color: var(--tac-green-dim) !important; } #npn-unified-adsb-group.npn-adsb-shown #npn-unified-adsb-toggle { color: var(--tac-green) !important; background: rgba(70,224,107,.10) !important; } /* ============================================================ FIELD TOOLBOX — vertical panel rack, docked top-left of map #npn-panel-dock reskin. Every minimized panel is a full-width chip in one clean column. Click a chip to expand its panel. ============================================================ */ #npn-panel-dock.npn-panel-dock { display: flex !important; flex-direction: column !important; gap: 4px !important; position: fixed !important; left: 336px !important; right: auto !important; top: 150px !important; bottom: auto !important; transform: none !important; width: 176px !important; min-width: 176px !important; max-width: calc(100vw - 352px) !important; max-height: calc(100vh - 174px) !important; overflow-y: auto !important; padding: 7px !important; background: rgba(10, 12, 11, .97) !important; border: 1px solid var(--tac-line-strong) !important; border-radius: 0 !important; box-shadow: var(--tac-shadow-float) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 2147482500 !important; } #npn-panel-dock::before, #npn-panel-dock::after { content: ""; position: absolute; width: 8px; height: 8px; pointer-events: none; } #npn-panel-dock::before { top: -1px; left: -1px; border-top: 1px solid var(--tac-green); border-left: 1px solid var(--tac-green); } #npn-panel-dock::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--tac-green); border-right: 1px solid var(--tac-green); } /* header */ #npn-panel-dock .npn-panel-dock-head { display: flex !important; align-items: center; justify-content: space-between; gap: 5px; margin: 0 0 2px 0 !important; padding: 0 0 5px 0 !important; border-bottom: 1px solid var(--tac-line-strong) !important; } #npn-panel-dock .npn-panel-dock-head::before { content: "\25C8 TOOLBOX"; font: 700 10px var(--tac-font-display); letter-spacing: .13em; text-transform: uppercase; color: var(--tac-green); white-space: nowrap; } #npn-panel-dock .npn-panel-dock-head span { display: none !important; } /* hide "Minimized Panels" label */ #npn-panel-dock-restore-all { height: 19px !important; padding: 0 6px !important; background: var(--tac-surface-2) !important; border: 1px solid var(--tac-line-strong) !important; border-radius: 0 !important; color: var(--tac-muted) !important; font: 600 7px var(--tac-font-display) !important; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } #npn-panel-dock-restore-all:hover { background: var(--tac-surface-3) !important; border-color: var(--tac-green-dim) !important; color: var(--tac-text-bright) !important; } #npn-toolbox-minimize, #npn-toolbox-reset-position { height: 19px !important; padding: 0 6px !important; background: var(--tac-inset) !important; border: 1px solid var(--tac-line) !important; border-radius: 0 !important; color: var(--tac-muted) !important; font: 600 7px var(--tac-font-display) !important; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } #npn-toolbox-minimize:hover, #npn-toolbox-reset-position:hover { background: var(--tac-surface-3) !important; border-color: var(--tac-green-dim) !important; color: var(--tac-text-bright) !important; } #npn-panel-dock.npn-panel-dock.npn-toolbox-minimized { display: none !important; } .npn-toolbox-restore-tab { position: fixed; z-index: 2147482501; height: 27px; min-width: 96px; padding: 0 10px; border: 1px solid var(--tac-line-strong); border-left: 3px solid var(--tac-green); border-radius: 0; background: rgba(10, 12, 11, .97); color: var(--tac-green); box-shadow: var(--tac-shadow-float); font: 700 10px/1 var(--tac-font-display); letter-spacing: .13em; text-align: left; text-transform: uppercase; cursor: pointer; } .npn-toolbox-restore-tab:hover { background: var(--tac-surface-3); color: var(--tac-text-bright); } .npn-toolbox-restore-tab[hidden] { display: none !important; } .npn-toolbox-active-status { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin: 0 0 4px 0; padding: 4px 5px; background: var(--tac-inset); border: 1px solid var(--tac-line); border-left: 3px solid var(--tac-gray); color: var(--tac-muted); } .npn-toolbox-active-status span { font: 600 7px var(--tac-font-display); letter-spacing: .08em; text-transform: uppercase; } .npn-toolbox-active-status b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 8px var(--tac-font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--tac-muted); } .npn-toolbox-active-status.npn-toolbox-active-status-on { border-left-color: var(--tac-green); } .npn-toolbox-active-status.npn-toolbox-active-status-on b { color: var(--tac-green); } /* list holds the 5 Leaflet-panel chips; column, full width, no inner scroll */ #npn-panel-dock.npn-panel-dock .npn-panel-dock-list { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 4px !important; width: 100% !important; margin: 0 !important; max-height: none !important; height: auto !important; overflow: visible !important; } /* unify EVERY chip (list chips + RF/space-weather direct children) */ #npn-panel-dock.npn-panel-dock .npn-panel-dock-chip, #npn-panel-dock.npn-panel-dock > .npn-rf-dock-chip, #npn-panel-dock.npn-panel-dock > .npn-home-spacewx-dock-chip { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 28px !important; min-height: 28px !important; max-height: 28px !important; margin: 0 !important; padding: 0 7px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 6px !important; background: var(--tac-surface-2) !important; border: 1px solid var(--tac-line) !important; border-left: 3px solid var(--tac-green-dim) !important; border-radius: 0 !important; box-shadow: none !important; cursor: pointer !important; overflow: hidden !important; text-align: left !important; } #npn-panel-dock .npn-panel-dock-chip:hover, #npn-panel-dock > .npn-rf-dock-chip:hover, #npn-panel-dock > .npn-home-spacewx-dock-chip:hover { background: var(--tac-surface-3) !important; border-color: var(--tac-line-strong) !important; border-left-color: var(--tac-green) !important; } #npn-panel-dock.npn-panel-dock .npn-panel-dock-icon { color: var(--tac-green) !important; flex: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; min-width: 18px !important; max-width: 18px !important; height: 14px !important; font-size: 8px !important; line-height: 1 !important; text-align: center !important; border: 1px solid rgba(70,224,107,.45) !important; background: rgba(70,224,107,.08) !important; } /* every chip's text — list label span AND the RF/space-weather chips' own text/children — one uniform size, single line, ellipsis, no clip */ #npn-panel-dock.npn-panel-dock .npn-panel-dock-label, #npn-panel-dock.npn-panel-dock > .npn-rf-dock-chip *, #npn-panel-dock.npn-panel-dock > .npn-home-spacewx-dock-chip * { font: 600 9px/1.1 var(--tac-font-display) !important; letter-spacing: .035em !important; text-transform: uppercase !important; color: var(--tac-text-bright) !important; flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; text-align: left !important; } /* RF / Space Weather used to render a checkbox-looking square. Force badge icon then label. */ #npn-panel-dock.npn-panel-dock .npn-rf-chip-icon, #npn-panel-dock.npn-panel-dock .npn-home-spacewx-chip-icon { flex: 0 0 18px !important; color: var(--tac-green) !important; font: 700 7px/1 var(--tac-font-mono) !important; letter-spacing: 0 !important; text-transform: uppercase !important; } #npn-panel-dock.npn-panel-dock .npn-rf-chip-label, #npn-panel-dock.npn-panel-dock .npn-home-spacewx-chip-label { flex: 1 1 auto !important; } #npn-panel-dock.npn-panel-dock .npn-rf-chip-restore, #npn-panel-dock.npn-panel-dock .npn-home-spacewx-chip-restore { display: none !important; } /* keep the RF/space-weather chip icons sized like the rest */ #npn-panel-dock.npn-panel-dock > .npn-rf-dock-chip svg, #npn-panel-dock.npn-panel-dock > .npn-home-spacewx-dock-chip svg, #npn-panel-dock.npn-panel-dock > .npn-rf-dock-chip .npn-default-dock-icon, #npn-panel-dock.npn-panel-dock > .npn-home-spacewx-dock-chip img { flex: none !important; width: 12px !important; height: 12px !important; } #npn-panel-dock.npn-panel-dock .npn-panel-dock-action { flex: none !important; margin-left: auto !important; font: 500 7px var(--tac-font-mono) !important; color: var(--tac-muted) !important; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap !important; } /* draggable: header shows grab affordance */ #npn-panel-dock.npn-panel-dock .npn-panel-dock-head { cursor: grab; } #npn-panel-dock.npn-panel-dock.tac-dragging { cursor: grabbing !important; user-select: none !important; } #npn-panel-dock.npn-panel-dock.tac-dragging .npn-panel-dock-head { cursor: grabbing; } /* narrow screens: dock to left edge, cap height */ @media (max-width: 1100px) { #npn-panel-dock { left: 8px !important; top: auto !important; bottom: 8px !important; max-height: 44vh !important; } #npn-toolbox-minimize, #npn-toolbox-reset-position, #npn-panel-dock-restore-all { padding: 0 5px !important; font-size: 8px !important; } } /* Node Solar Forecast: hide the panel's own floating restore button; npn-toolbox-nodesolar.js gives it a chip in the toolbox instead. */ #npn-node-solar-mini { display: none !important; } /* Final mobile override: toolbox becomes Tools sheet, never floating map panel. */ @media (max-width: 900px), (pointer: coarse) and (max-width: 1180px) { #npn-panel-dock.npn-panel-dock { display: none !important; } }