/* ── Cableway — Theme ────────────────── */

:root {
    --bg:        #1e2127;
    --panel:     #282c34;
    --border:    #3e4451;
    --text:      #abb2bf;
    --text-dim:  #8b94a3;
    --accent:    #61afef;
    --green:     #98c379;
    --orange:    #d19a66;
    --red:       #e06c75;
    --yellow:    #e5c07b;
    --white:     #ffffff;
    --grid:      #2c313a;
    --input-bg:  #31353f;
}

/* Light-theme override — applied when <html data-theme="light">.
   Accent/green/orange/red/yellow keep high saturation so plot
   highlights remain visible; --white stays #fff because it is the
   foreground colour used on top of saturated button backgrounds. */
:root[data-theme="light"] {
    --bg:        #ffffff;
    --panel:     #f3f5f8;
    --border:    #d0d7de;
    --text:      #1f2328;
    --text-dim:  #656d76;
    --accent:    #0969da;
    --green:     #1a7f37;
    --orange:    #bc4c00;
    --red:       #cf222e;
    --yellow:    #9a6700;
    --white:     #ffffff;
    --grid:      #e6e8eb;
    --input-bg:  #ffffff;
}

:root[data-theme="light"] .tb-btn { background: #e8ecf1; color: var(--text); }
:root[data-theme="light"] .tb-btn:hover { background: var(--accent); color: #ffffff; }
:root[data-theme="light"] .tb-accent:hover { background: #045fc4; color: #ffffff; }
:root[data-theme="light"] .tb-red:hover { background: #a40e19; }

/* Every field that uses `background: var(--input-bg); color: var(--white)`
   is invisible in light theme (white-on-white), because `--white` is kept
   literally white (it's also the foreground on saturated button
   backgrounds like .tb-red). Re-point those text colours to `--text` and
   add a light border so the fields read as inputs against the white
   panel background. */
:root[data-theme="light"] .tb-input,
:root[data-theme="light"] .ax-input,
:root[data-theme="light"] .insp-input,
:root[data-theme="light"] .form-input,
:root[data-theme="light"] .form-select,
:root[data-theme="light"] .att-editor input,
:root[data-theme="light"] .att-editor select,
:root[data-theme="light"] .set-row input,
:root[data-theme="light"] td select,
:root[data-theme="light"] td[contenteditable="true"]:focus {
    color: var(--text);
    border: 1px solid var(--border);
}
:root[data-theme="light"] .att-editor input,
:root[data-theme="light"] .att-editor select,
:root[data-theme="light"] td select {
    /* keep the compact table feel — just a subtle border */
    border: 1px solid var(--border);
}
:root[data-theme="light"] .att-editor th {
    background: var(--panel);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Toolbar ────────────────────────────────────────────────────────── */

#toolbar {
    background: var(--panel);
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
}

.tb-label {
    color: var(--text-dim);
    font-size: 12px;
    padding: 0 2px;
}

/* ── AutoSave toggle (Office-style pill switch) ─────────────────────
   ON  = accent track, thumb right, "On".
   OFF = grey track,   thumb left,  "Off" (muted).                     */
.as-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    margin: 0 4px 0 2px;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
    color: var(--text-dim);
    transition: background 0.12s;
}
.as-toggle:hover  { background: var(--border); }
.as-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.as-toggle .as-cap { font-weight: 600; letter-spacing: 0.2px; }
.as-toggle .as-track {
    position: relative;
    width: 30px;
    height: 16px;
    border-radius: 8px;
    background: var(--accent);
    transition: background 0.15s;
    flex-shrink: 0;
}
.as-toggle .as-thumb {
    position: absolute;
    top: 2px;
    left: 16px;               /* ON → thumb on the right */
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    transition: left 0.15s;
}
.as-toggle .as-state {
    min-width: 18px;
    font-weight: 700;
    color: var(--accent);
}
.as-toggle.off .as-track { background: var(--border); }
.as-toggle.off .as-thumb { left: 2px; }          /* OFF → thumb on the left */
.as-toggle.off .as-state { color: var(--text-dim); }
.as-toggle.off .as-cap   { color: var(--text-dim); }

.tb-btn {
    background: var(--border);
    color: var(--text);
    border: none;
    padding: 5px 12px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    transition: background 0.15s;
}
.tb-btn:hover { background: var(--accent); color: var(--bg); }

.tb-accent { background: var(--accent); color: var(--bg); font-weight: 600; }
.tb-accent:hover { filter: brightness(1.12); }

.tb-green { background: var(--green); color: var(--bg); }
.tb-green:hover { background: #a9d18a; }

.tb-red { background: var(--red); color: var(--white); font-weight: 600; }
.tb-red:hover { background: #b84850; }

.tb-input {
    background: var(--input-bg);
    color: var(--white);
    border: none;
    padding: 4px 8px;
    border-radius: 3px;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace;
    font-size: 12px;
    outline: none;
}
.tb-input:focus { box-shadow: 0 0 0 1px var(--accent); }

.tb-sep {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 4px;
}

/* ── Main layout ────────────────────────────────────────────────────── */

#main {
    flex: 1;
    display: flex;
    overflow: hidden;
}

#content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Tab bar ────────────────────────────────────────────────────────── */

#tab-bar {
    display: flex;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.tab {
    background: transparent;
    color: var(--text-dim);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 20px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}
.tab:hover { color: var(--text); }
.tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ── Tab panes ──────────────────────────────────────────────────────── */

.tab-pane {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
}
.tab-pane.active { display: flex; }

/* The Sheet's pages pane and its millimetre rulers (sheet port ShP): the
   pane (#printout-container) is inset by the bands — 20 px top, 28 px left,
   none when the rulers are hidden — and the ruler canvas lies over the whole
   host, clicks passing through it; only the 'mm' corner takes clicks. */
#printout-host { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#printout-host > #printout-container { position: absolute; left: 28px; top: 20px; right: 0; bottom: 0; }
#printout-host.rulers-off > #printout-container { left: 0; top: 0; }
#printout-ruler { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
#printout-arrange { position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:auto; touch-action:none; }
#printout-arrange-actions { position:absolute; top:23px; right:10px; z-index:5; display:flex; gap:5px; }
#printout-host.rulers-off > #printout-ruler,
#printout-host.rulers-off > #printout-ruler-corner,
#printout-host.rulers-off > #printout-ruler-menu { display: none; }
#printout-ruler-corner {
    position: absolute; left: 0; top: 0; width: 28px; height: 20px; padding: 0; margin: 0;
    border: none; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
    background: var(--panel); color: var(--text-dim); font: 10px system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    cursor: pointer; z-index: 2;
}
#printout-ruler-corner:hover { color: var(--accent); }
#printout-ruler-menu {
    display: none; position: absolute; left: 0; top: 20px; z-index: 40; min-width: 180px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
#printout-ruler-menu.show { display: block; }
/* The pointer readout changes on every pointer move: a slot of its own,
   fixed in size, so its text can never re-wrap the (flex-wrap) toolbar and
   move the pages under the pointer between a move and a click (MEASURED at
   ShP: a readout sized by its text wrapped the 1,280 px toolbar, and even a
   fixed-WIDTH one grew its line 13 px taller when its text appeared — the
   pages moved down under the pointer and a click aimed at a cable landed on
   a tower). Fixed width AND height; the info line gives way instead. */
#printout-info { flex: 1 1 60px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#printout-readout {
    flex: 0 0 auto; width: 38ch; height: 14px; line-height: 14px; overflow: hidden; text-overflow: ellipsis; text-align: right;
    font: 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text-dim); white-space: nowrap;
}

#plot2d, #plot3d, #plotplan {
    flex: 1;
    min-height: 0;
}

#route-mode-btn.active,
#place-tower-mode-btn.active {
    background: var(--yellow);
    color: var(--bg);
    font-weight: 600;
}

/* Pan/Zoom nav-mode segmented toggle — highlight the selected gesture. */
.nav-mode-btn.active {
    background: var(--yellow);
    color: var(--bg);
    font-weight: 600;
}

/* TG7: compact outline glyph, full name in tooltip/aria-label; state keeps its width. */
#toggle-silhouette-btn-plan,
#toggle-silhouette-btn-elev { transition: none; }
#toggle-silhouette-btn-plan.active,
#toggle-silhouette-btn-elev.active {
    background: var(--yellow);
    color: var(--bg);
}

/* ── Stringing panel ─────────────────────────────────────────────── */

#stringing-panel {
    background: var(--panel);
    border-top: 1px solid var(--border);
    padding: 6px 12px;
    flex-shrink: 0;
}

.stringing-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

#section-form {
    margin-top: 6px;
    padding: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.section-form-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.section-form-row label {
    color: var(--text-dim);
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
}

#stringing-status {
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace;
    font-size: 11px;
    color: var(--yellow);
}

#route-table-wrap { padding: 8px; }

/* ── Route pick floating panel ──────────────────────────────────────── */

.route-pick-panel {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 60px;
    right: 310px;
    width: 480px;
    max-height: 80vh;
    background: var(--panel);
    border: 1px solid var(--accent);
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    z-index: 90;
}

.route-pick-panel-header {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 13px;
    color: var(--accent);
}

.route-pick-panel-body {
    padding: 10px 12px;
    flex: 1;
    overflow-y: auto;
}

.route-pick-panel-footer {
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

/* ── Route pick list ────────────────────────────────────────────────── */

.route-picklist {
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--bg);
    max-height: 200px;
    overflow-y: auto;
}

.route-pick-item {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    border-bottom: 1px solid var(--grid);
    font-size: 12px;
}
.route-pick-item:last-child { border-bottom: none; }

.route-pick-num {
    width: 24px;
    flex-shrink: 0;
    color: var(--accent);
    font-weight: 600;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace;
}

.route-pick-label {
    flex: 1;
    color: var(--text);
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace;
}

.route-pick-action {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 13px;
    padding: 0 3px;
    flex-shrink: 0;
}
.route-pick-action:hover { color: var(--accent); }

.route-pick-remove {
    background: none;
    border: none;
    color: var(--red);
    cursor: pointer;
    font-size: 16px;
    padding: 0 4px;
    flex-shrink: 0;
}
.route-pick-remove:hover { color: var(--yellow); }

.route-pick-item.route-pick-insert-active {
    background: rgba(97, 175, 239, 0.12);
    border-left: 2px solid var(--accent);
}

#tower-preview {
    border: 1px solid var(--border);
    border-radius: 3px;
    margin-bottom: 10px;
    height: 220px;
}

/* ── Axis bar ───────────────────────────────────────────────────────── */

.axis-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.ax-label {
    color: var(--accent);
    font-size: 11px;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace;
    margin-left: 6px;
}
.ax-input {
    background: var(--input-bg);
    color: var(--white);
    border: none;
    padding: 3px 6px;
    border-radius: 3px;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace;
    font-size: 11px;
    width: 70px;
    outline: none;
}
.ax-input:focus { box-shadow: 0 0 0 1px var(--accent); }
.ax-dash { color: var(--text-dim); font-size: 11px; }

/* ── Inspector ──────────────────────────────────────────────────────── */

#inspector {
    width: 300px;
    min-width: 300px;
    background: var(--panel);
    border-left: 1px solid var(--border);
    overflow-y: auto;
    flex-shrink: 0;
}

#inspector-content { padding: 0; }

.insp-empty {
    text-align: center;
    padding: 40px 16px;
}
.insp-empty-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dim);
    margin-bottom: 8px;
}
.insp-empty-hint {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.5;
}

.insp-section {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    border-bottom: 1px solid var(--border);
    margin-top: 4px;
}

.insp-row {
    display: flex;
    align-items: center;
    padding: 3px 12px;
    font-size: 12px;
}
.insp-label {
    width: 140px;
    flex-shrink: 0;
    color: var(--text-dim);
}
.insp-value {
    color: var(--green);
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace;
    font-size: 11px;
}
.insp-value.orange { color: var(--orange); }
.insp-value.red    { color: var(--red); }
.insp-value.yellow { color: var(--yellow); }

.insp-input {
    background: var(--input-bg);
    color: var(--white);
    border: none;
    padding: 3px 6px;
    border-radius: 3px;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace;
    font-size: 11px;
    width: 120px;
    outline: none;
}
.insp-input:focus { box-shadow: 0 0 0 1px var(--accent); }

.insp-unit {
    color: var(--text-dim);
    font-size: 10px;
    margin-left: 4px;
}

.insp-apply-btn {
    display: block;
    width: calc(100% - 24px);
    margin: 10px 12px;
    padding: 8px;
    background: var(--accent);
    color: var(--bg);
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.insp-apply-btn:hover { background: var(--yellow); }

/* ── Data Tables ────────────────────────────────────────────────────── */

.table-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

#table-sub-tabs {
    display: flex;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.sub-tab {
    background: transparent;
    color: var(--text-dim);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 6px 16px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}
.sub-tab:hover { color: var(--text); }
.sub-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.sub-pane {
    display: none;
    flex: 1;
    overflow: auto;
}
.sub-pane.active { display: block; }

#nodes-table-wrap, #cables-table-wrap {
    padding: 8px;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace;
}

thead th {
    background: var(--panel);
    color: var(--accent);
    font-weight: 600;
    padding: 6px 8px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: 11px;
}

tbody td {
    padding: 4px 8px;
    text-align: center;
    border-bottom: 1px solid var(--grid);
    color: var(--text);
}

tbody tr:hover { background: rgba(97, 175, 239, 0.06); }
tbody tr.selected { background: var(--border); }

td[contenteditable="true"] {
    cursor: text;
    outline: none;
}
td[contenteditable="true"]:focus {
    background: var(--input-bg);
    color: var(--white);
    box-shadow: inset 0 0 0 1px var(--accent);
}

td select {
    background: var(--input-bg);
    color: var(--white);
    border: none;
    padding: 2px 4px;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace;
    font-size: 12px;
    outline: none;
}

td input[type="checkbox"] {
    accent-color: var(--accent);
}

/* ── Status bar ─────────────────────────────────────────────────────── */

#statusbar {
    background: var(--panel);
    padding: 4px 12px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

#status-text {
    color: var(--text-dim);
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace;
    font-size: 11px;
}

/* ── Activity overlay (issue #46: solve/render spinner) ─────────────── */

#activity-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    z-index: 10500;                 /* above modals, below onboarding */
    display: none;
    align-items: center;
    justify-content: center;
}
#activity-overlay.show { display: flex; }

.activity-card {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 26px 34px;
    max-width: 440px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.activity-spinner {
    width: 44px; height: 44px;
    margin: 0 auto;
    border: 4px solid rgba(229,192,123,0.25);
    border-top-color: var(--accent, #e5c07b);
    border-radius: 50%;
    animation: activity-spin 0.9s linear infinite;
}
@keyframes activity-spin { to { transform: rotate(360deg); } }
.activity-msg { margin-top: 16px; font-size: 14px; font-weight: 600; }
.activity-sub { margin-top: 6px; font-size: 12px; color: var(--text-dim); }
@media (prefers-reduced-motion: reduce) {
    .activity-spinner { animation-duration: 2.2s; }
}

/* ── Modal overlay & dialog ─────────────────────────────────────────── */

.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 100;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 5vh;
}
.modal-overlay.show { display: flex; }

/* Non-blocking modal: transparent, click-through backdrop so the app behind
   stays visible AND usable. The dialog itself re-enables pointer events and
   gets a stronger shadow so it reads as a floating panel. Drag it by the
   header to move it out of the way. */
.modal-overlay.modal-nonblocking {
    background: transparent;
    pointer-events: none;
}
.modal-overlay.modal-nonblocking .modal {
    pointer-events: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.55);
}

.modal {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    width: 700px;
    max-width: 95vw;
    max-height: 85vh;
    min-width: 420px;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    /* User-resizable via mouse drag on bottom-right corner. Overflow hidden
       is required by CSS to show the resize handle; inner .modal-body owns
       the scrolling. */
    resize: both;
    overflow: hidden;
}

/* Wide variant — used for dense forms (e.g. Tower Type with 12-col attachment table) */
.modal.wide { width: 1180px; }
/* Sized to its content by the dialog itself (Modals.show opts.fit): up to
   the whole window, below the overlay's 5vh top padding. */
.modal.fit { max-width: calc(100vw - 16px); max-height: calc(95vh - 8px); }

/* The floating second window (#122): the Report-an-issue form opened from a
   dialog's title bar, beside that dialog — above the pop-up's backdrop,
   never in the dock. modals.js places it and drags it by its header. */
.modal.modal-float {
    display: none; position: fixed; z-index: 101;
    width: 460px; min-width: 360px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.55);
}
.modal.modal-float.show { display: flex; }
/* The dialog was clicked: it comes to the front (a click on the form, or on
   the pop-up's backdrop over it, brings the form back). */
.modal.modal-float.modal-float-under { z-index: 99; }
/* The report button comes last in the markup (Tab order), first on screen. */
.modal-hbtns .modal-report { order: -1; }

.modal-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 14px;
    color: var(--accent);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-close {
    background: none; border: none; color: var(--text-dim);
    font-size: 18px; cursor: pointer; padding: 0 4px;
}
.modal-close:hover { color: var(--red); }

.modal-body {
    padding: 16px;
    flex: 1;
    overflow-y: auto;
}

.modal-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Title-bar buttons: ⧉ pop out of the dock, ⇥ back to the dock, × close */
.modal-header #modal-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.modal-hbtns { display: flex; align-items: center; gap: 2px; flex-shrink: 0; margin-left: 8px; }
.modal-hbtn {
    background: none; border: none; color: var(--text-dim);
    font-size: 15px; line-height: 1; cursor: pointer; padding: 2px 5px; border-radius: 3px;
}
.modal-hbtn:hover { color: var(--accent); background: rgba(127,127,127,0.12); }

/* In-panel bar: unsaved-changes question (yellow), refusals (red), notices */
.modal-guard {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    padding: 7px 12px;
    border-bottom: 1px solid #b07000;
    background: rgba(229,192,123,0.22);
    color: var(--text);
    font-size: 12px; line-height: 1.4;
}
.modal-guard[hidden] { display: none; }
.modal-guard.info { background: rgba(97,175,239,0.14); border-bottom-color: var(--accent); }
.modal-guard.err  { background: rgba(224,108,117,0.18); border-bottom-color: var(--red); }
.modal-guard-msg  { flex: 1 1 200px; min-width: 0; }
.modal-guard-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.modal-guard .tb-btn { padding: 3px 10px; font-size: 12px; }
.modal.dock-attn { animation: dock-attn 0.6s ease-out 1; }
@keyframes dock-attn {
    0%, 60% { box-shadow: inset 0 0 0 2px var(--yellow), 0 8px 32px rgba(0,0,0,0.4); }
    100%    { box-shadow: inset 0 0 0 0 transparent, 0 8px 32px rgba(0,0,0,0.4); }
}

/* ── Docked dialog panel (Settings > Interface > Dialogs = Docked) ──────
   dialog_dock.js toggles body.dlg-dock and sets --dock-w / --dock-eff.
   The column stays reserved whether or not a dialog is open, so opening,
   closing or switching dialogs never resizes the views. No z-index: the
   toolbar dropdowns (z 50) open over it. */
:root { --dock-w: 480px; --dock-eff: 0px; }
#dialog-dock { display: none; }
body.dlg-dock #dialog-dock {
    display: flex;
    flex: 0 0 var(--dock-eff);
    width: var(--dock-eff);
    max-width: var(--dock-eff);
    min-width: 0;
    position: relative;
    overflow: hidden;
    border-left: 1px solid var(--border);
    background: var(--panel);
}
#dock-splitter {
    position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
    cursor: col-resize; z-index: 2;
}
#dock-splitter:hover, #dock-splitter:focus-visible { background: rgba(97,175,239,0.35); outline: none; }
body.dlg-collapsed #dock-splitter { display: none; }
.dock-drag-capture { position: fixed; inset: 0; z-index: 10600; cursor: col-resize; background: transparent; }
.dock-drag-guide {
    position: fixed; top: 0; bottom: 0; width: 2px; z-index: 10601;
    background: var(--accent); pointer-events: none;
}
body.dock-resizing { user-select: none; cursor: col-resize; }

#dialog-dock > #modal-overlay {
    position: static; inset: auto; z-index: auto;
    background: none; padding: 0;
    flex: 1 1 auto; min-width: 0; overflow: hidden;
    pointer-events: auto; backdrop-filter: none;
}
#dialog-dock > #modal-overlay.show { display: flex; align-items: stretch; }
#dialog-dock > #modal-overlay.show ~ #dock-empty { display: none; }
body.dlg-collapsed #dialog-dock > #modal-overlay.show { display: none; }
body.dlg-collapsed #dialog-dock > #modal-overlay.show ~ #dock-empty { display: flex; }
#dialog-dock .modal {
    width: 100% !important; max-width: none; min-width: 0;
    height: 100%; max-height: none; min-height: 0;
    border: 0; border-radius: 0; box-shadow: none; resize: none;
}
#dialog-dock .modal.dock-attn { animation: dock-attn-flat 0.6s ease-out 1; }
@keyframes dock-attn-flat {
    0%, 60% { box-shadow: inset 0 0 0 2px var(--yellow); }
    100%    { box-shadow: inset 0 0 0 0 transparent; }
}
#dialog-dock .modal-header { cursor: default !important; padding-left: 14px; }
.modal:focus { outline: none; }      /* focused on open from a menu (keyboard lands in it) */
#dialog-dock .modal-body { overflow: auto; }
#dialog-dock .modal-footer { flex-wrap: wrap; }

#dock-empty {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column;
    color: var(--text-dim); font-size: 12px;
}
.dock-empty-bar { display: flex; justify-content: flex-end; padding: 6px 8px; }
.dock-empty-text { padding: 18px 22px; line-height: 1.6; text-align: center; margin-top: 18vh; }
.dock-rail-btn {
    background: none; border: 1px solid var(--border); border-radius: 3px;
    color: var(--text-dim); cursor: pointer; font-size: 14px; line-height: 1;
    padding: 3px 7px;
}
.dock-rail-btn:hover { color: var(--accent); border-color: var(--accent); }
body.dlg-collapsed #dock-empty { align-items: center; padding-top: 8px; }
body.dlg-collapsed .dock-rail-btn { padding: 3px 5px; }

/* Floating chrome sits LEFT of the panel instead of on top of it. */
body.dlg-dock .route-pick-panel { right: calc(var(--dock-eff) + 10px); }
/* (a legend the user dragged somewhere has right:auto inline — leave it) */
body.dlg-dock #weather-grid-legend:not([style*="right: auto"]),
body.dlg-dock #icing-map-legend:not([style*="right: auto"]) { right: calc(var(--dock-eff) + 14px) !important; }
body.dlg-dock #lidar-actionbar { left: calc((100vw - var(--dock-eff)) / 2) !important; }
/* The solve spinner covers the views and toolbar, not the panel. */
body.dlg-dock #activity-overlay { right: var(--dock-eff); }

/* ── Form elements ─────────────────────────────────────────────────── */

.form-group { margin-bottom: 12px; }

.form-label {
    display: block;
    color: var(--text-dim);
    font-size: 11px;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-input, .form-select {
    width: 100%;
    background: var(--input-bg);
    color: var(--white);
    border: none;
    padding: 6px 8px;
    border-radius: 3px;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace;
    font-size: 12px;
    outline: none;
}
.form-input:focus, .form-select:focus { box-shadow: 0 0 0 1px var(--accent); }

.form-row {
    display: flex;
    gap: 10px;
}
.form-row .form-group { flex: 1; }

.form-hint {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 2px;
}

.form-computed {
    font-size: 11px;
    color: var(--green);
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace;
    padding: 4px 0;
}

/* ── Inline attachment editor table ────────────────────────────────── */

.att-editor { margin-top: 8px; overflow-x: auto; }

.att-editor table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    table-layout: auto;
}
.att-editor th {
    background: var(--bg);
    color: var(--accent);
    font-weight: 600;
    padding: 4px 4px;
    text-align: center;
    font-size: 10px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.att-editor td {
    padding: 3px 3px;
    text-align: center;
    border-bottom: 1px solid var(--grid);
}
.att-editor input {
    width: 100%;
    min-width: 48px;
    box-sizing: border-box;
    background: var(--input-bg);
    color: var(--white);
    border: none;
    padding: 3px 4px;
    border-radius: 2px;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace;
    font-size: 11px;
    text-align: center;
}
.att-editor select {
    width: 100%;
    min-width: 72px;
    box-sizing: border-box;
    background: var(--input-bg);
    color: var(--white);
    border: none;
    padding: 3px 4px;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace;
    font-size: 11px;
}
/* Text-style inputs (custom fields) should be a bit more generous */
.att-editor input[type="text"] {
    text-align: left;
    min-width: 80px;
}
.att-editor .att-remove {
    background: none; border: none; color: var(--red);
    cursor: pointer; font-size: 14px; padding: 0 4px;
}

/* ── Excel-style cell selection in attachment table ───────────────── */
.att-editor td.att-cell-sel {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    background: rgba(97, 175, 239, 0.10);
}
.att-editor td.att-cell-anchor {
    outline-color: var(--yellow);
    background: rgba(229, 192, 123, 0.14);
}
.att-editor tr.att-row-active > td:first-child {
    box-shadow: inset 3px 0 0 var(--accent);
}

/* ── Excel-style cell selection in the section batch editor ──────── */
#batch-tbody td.batch-cell-sel,
#pl-tbody td.pl-cell-sel {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    background: rgba(97, 175, 239, 0.10);
}
#batch-tbody td.batch-cell-anchor,
#pl-tbody td.pl-cell-anchor {
    outline-color: var(--yellow);
    background: rgba(229, 192, 123, 0.14);
}

/* ── Sets editor ───────────────────────────────────────────────────── */

.sets-editor { margin-top: 8px; }
.set-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.set-row input {
    flex: 1;
    background: var(--input-bg);
    color: var(--white);
    border: none;
    padding: 4px 8px;
    border-radius: 3px;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace;
    font-size: 12px;
}
.set-remove {
    background: none; border: none; color: var(--red);
    cursor: pointer; font-size: 14px;
}

/* ── List modal table ──────────────────────────────────────────────── */

.list-table { width: 100%; border-collapse: collapse; }
.list-table th {
    background: var(--bg);
    color: var(--accent);
    font-weight: 600;
    padding: 6px 8px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
}
.list-table td {
    padding: 5px 8px;
    text-align: center;
    border-bottom: 1px solid var(--grid);
    color: var(--text);
    font-size: 12px;
}
.list-table tr:hover { background: rgba(97, 175, 239, 0.06); }

.action-btn {
    background: var(--border);
    color: var(--text);
    border: none;
    padding: 6px 14px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    margin: 2px 3px;
    min-width: 56px;
    transition: background 0.1s ease;
}
.action-btn:hover { background: var(--accent); color: var(--bg); }
.action-btn.del:hover { background: var(--red); color: var(--bg); }

/* Actions column in list tables: tighter, whitespace-nowrap so all buttons
   stay on one line and are evenly spaced via action-btn margins. */
.list-table td:last-child {
    white-space: nowrap;
    padding: 4px 6px;
    text-align: center;
}

/* Edit All Sections (modals.js _batchFit): a compact table — section, set
   and header text wrap — and, narrower than that, one card per section of
   fields captioned by their column (td data-label). */
.batch-grid th, .batch-grid td { padding: 4px 3px; }
.batch-grid th { white-space: normal; }
.batch-grid td:nth-child(-n+3) { white-space: normal; min-width: 56px; }
.batch-grid td:nth-child(2) { min-width: 24px; }
/* Too narrow for the dropdowns' full width but wide enough for a table
   (modals.js _batchFit): narrower dropdowns, tighter cells. */
.batch-grid.batch-compact th, .batch-grid.batch-compact td { padding: 4px 2px; }
.batch-grid.batch-compact select { max-width: 90px !important; }
.batch-grid.batch-cards, .batch-grid.batch-cards tbody { display: block; }
.batch-grid.batch-cards thead { display: none; }
.batch-grid.batch-cards tr {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px;
    padding: 8px 2px; border-bottom: 1px solid var(--border);
}
.batch-grid.batch-cards td { display: block; padding: 0; border: 0; text-align: left; }
.batch-grid.batch-cards td::before {
    content: attr(data-label); display: block; margin-bottom: 1px;
    font-size: 10px; color: var(--text-dim);
}
.batch-grid.batch-cards td:first-child {
    flex: 1 0 100%; white-space: normal; font-weight: 600; color: var(--accent);
}
.batch-grid.batch-cards td:first-child::before { content: none; }
/* "+N span" / "no map data" under a field (modals.js _batchMarks). */
.batch-grid .batch-mark { display: block; font-size: 9px; line-height: 1.2; color: var(--yellow); cursor: help; }
.batch-grid .batch-mark:empty { display: none; }
/* Sort by: only for the card layout, which has no header row. */
.batch-sortbar { display: none; gap: 4px; align-items: center; margin: 0 0 4px; font-size: 11px; color: var(--text-dim); }
.batch-cards-on > .batch-sortbar { display: flex; }

/* ── Toolbar dropdowns ─────────────────────────────────────────────── */

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 3px;
    min-width: 180px;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.dropdown-content.show { display: block; }

.dropdown-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text);
    transition: background 0.15s;
}
.dropdown-item:hover {
    background: var(--accent);
    color: var(--bg);
}

/* ── Tower context menu (right-click / click on tower in plot) ────── */

.tower-ctx-menu {
    position: fixed;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 4px;
    min-width: 180px;
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0,0,0,0.45);
    padding: 4px 0;
    font-size: 12px;
}
.tower-ctx-menu .ctx-header {
    padding: 6px 12px;
    font-weight: bold;
    color: var(--orange);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    white-space: nowrap;
}
.tower-ctx-menu .ctx-item {
    padding: 7px 12px;
    cursor: pointer;
    color: var(--text);
    transition: background 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tower-ctx-menu .ctx-item:hover {
    background: var(--accent);
    color: var(--bg);
}
.tower-ctx-menu .ctx-item .ctx-icon {
    width: 16px;
    text-align: center;
    font-size: 13px;
}
.tower-ctx-sep {
    height: 1px;
    background: var(--border);
    margin: 3px 0;
}

/* ── CSV import preview table ──────────────────────────────────────── */

.csv-preview-table-wrap {
    max-height: 200px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 3px;
    margin-bottom: 10px;
}
.csv-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace;
}
.csv-preview-table th {
    background: var(--bg);
    color: var(--accent);
    font-weight: 600;
    padding: 4px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    font-size: 10px;
}
.csv-preview-table td {
    padding: 3px 8px;
    border-bottom: 1px solid var(--grid);
    color: var(--text);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.csv-preview-table tr:hover { background: rgba(97, 175, 239, 0.06); }

/* ── Fullscreen mode ───────────────────────────────────────────────── */

body.fullscreen #toolbar     { display: none; }
body.fullscreen #statusbar   { display: none; }
body.fullscreen #tab-bar     { display: none; }
body.fullscreen #content-area { flex: 1; }
body.fullscreen #main        { flex: 1; }

/* Show a compact exit-fullscreen bar at the top */
#fullscreen-exit-bar {
    display: none;
    background: var(--panel);
    padding: 4px 8px;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
body.fullscreen #fullscreen-exit-bar { display: flex; }

/* In fullscreen, force the active tab pane to show */
body.fullscreen .tab-pane         { display: none !important; }
body.fullscreen .tab-pane.active  { display: flex !important; }

/* ── Results tab ───────────────────────────────────────────────────── */

.res-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0 12px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}
.res-title { font-size: 15px; font-weight: 700; color: var(--accent); }
.res-meta { font-size: 11px; color: var(--text-dim); font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace; }

.res-section-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 12px 0 6px 0;
}

.res-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 8px;
}
.res-card-header {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}
.res-card-header:hover { background: rgba(97,175,239,0.06); }
.res-card-body { display: none; padding: 0 12px 12px 12px; }
.res-card.open > .res-card-body { display: block; }
.res-card.open > .res-card-header .res-arrow { transform: rotate(90deg); }

.res-arrow {
    font-size: 10px;
    color: var(--accent);
    transition: transform 0.15s;
    display: inline-block;
}

.res-badge {
    margin-left: auto;
    font-size: 10px;
    background: var(--border);
    color: var(--text-dim);
    padding: 2px 6px;
    border-radius: 3px;
}

.res-sub-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 10px 0 4px 0;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--grid);
}

.res-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace;
    margin-bottom: 4px;
}
.res-table th {
    background: var(--bg);
    color: var(--accent);
    font-weight: 600;
    padding: 3px 6px;
    text-align: center;
    font-size: 10px;
    border-bottom: 1px solid var(--border);
}
.res-table td {
    padding: 3px 6px;
    border-bottom: 1px solid var(--grid);
    color: var(--text);
    text-align: center;
}
.res-table td:first-child { text-align: left; color: var(--text-dim); }
.res-table tr:hover { background: rgba(97,175,239,0.04); }

.res-tower-card {
    background: var(--bg);
    border: 1px solid var(--grid);
    border-radius: 3px;
    margin: 4px 0;
}
.res-tower-header {
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}
.res-tower-header:hover { background: rgba(97,175,239,0.04); }
.res-tower-body { display: none; padding: 4px 10px 10px 10px; }
.res-tower-card.open > .res-tower-body { display: block; }
.res-tower-card.open > .res-tower-header .res-arrow { transform: rotate(90deg); }

/* ── Sheet view ────────────────────────────────────────────────────── */

#sheet-container {
    flex: 1;
    overflow: auto;
    background: var(--border);
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.sheet-page {
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    background: #fff;
    border-radius: 2px;
    transition: transform 0.15s ease;
    transform-origin: top center;
}

.sheet-svg {
    display: block;
    max-width: 100%;
    height: auto;
}

@media print {
    body * { display: none !important; }
    .sheet-page { display: block !important; box-shadow: none; transform: none !important; }
    .sheet-svg { width: 100% !important; }
}
/* The Sheet's screen-only chrome (sheet port ShP, Amendment 1 D17 guarantee
   6): the millimetre rulers (#printout-ruler, which also carries the page
   captions), the rulers' corner and its menu, the pointer readout and the
   calibration hint never reach the BROWSER's own print of the app page
   (Ctrl / Cmd + P) — the sheet's Print / PDF, DXF and PNG never see them
   anyway (they are outside #printout-container and every page record). A
   rule of its own: while the rule above stands it is redundant; Sh11
   replaces the rule above and keeps this one. ShL's Arrange overlay and
   Sh5's #sheetruler carry .sheet-screen-only too.
   tests/e2e/rendersheet-paper.spec.js PRINT MEDIA deletes the rule above
   through the CSSOM before it looks, so it cannot pass because of it. */
@media print {
    #printout-ruler, #printout-ruler-corner, #printout-ruler-menu, #printout-readout, #printout-calib-hint,
    .sheet-screen-only { display: none !important; }
}

/* ── Scrollbar ──────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* ── UX batch 1: disabled state, keyboard focus, status severity ──────── */
.tb-btn:disabled, .action-btn:disabled { opacity: .4; cursor: not-allowed; }
.tb-btn:disabled:hover { background: var(--panel); color: var(--text); filter: none; }
.tb-btn:focus-visible, .tab:focus-visible, .dropdown-item:focus-visible,
.action-btn:focus-visible, .modal-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* D1: a menu command reached by the keyboard looks like the hovered one, its
   ring drawn inside (the menu's neighbours would cover an outside one). */
.dropdown-item:focus-visible { outline-offset: -2px; background: var(--accent); color: var(--bg); }
.dropdown-item[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.dropdown-item[aria-disabled="true"]:hover { background: none; color: var(--text); }
#status-text.sev-error { color: var(--red); font-weight: 600; }
#status-text.sev-warn  { color: var(--yellow); }
#status-text.sev-ok    { color: var(--green); }
#status-text.sev-info  { color: var(--text-dim); }
/* Compile & Solve button rings amber when the model changed since the last solve. */
.tb-green.solve-stale { box-shadow: 0 0 0 2px var(--yellow); }

/* ── Read-only view links (view_links.js) ─────────────────────────────── */
#view-link-banner { display: none; }
body.view-mode #view-link-banner {
    display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
    font-size: 12.5px; padding: 2px 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
body.view-mode #view-link-banner .vl-badge {
    background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.5px; padding: 2px 8px; border-radius: 10px;
}
/* Only the banner stays in the main toolbar (the Fullscreen button was removed 2 Oct 2026). */
body.view-mode #toolbar > *:not(#view-link-banner) { display: none !important; }
/* Results and Sheet need a live solve / are exports: not part of a view. */
body.view-mode .tab[data-tab="tab-results"],
body.view-mode .tab[data-tab="tab-printout"],
body.view-mode #fullscreen-exit-bar .tb-green { display: none !important; }
/* Editing tools inside the views. */
body.view-mode [onclick*="startStringing"], body.view-mode [onclick*="applySection"],
body.view-mode [onclick*="finishStringing"], body.view-mode [onclick*="showCRSModal"],
body.view-mode [onclick*="deleteSelectedPoints"], body.view-mode [onclick*="toggleAddPointMode"],
body.view-mode [onclick*="togglePlaceTowerMode"], body.view-mode [onclick*="togglePolygonDeleteMode"],
body.view-mode [onclick*="toggleRouteMode"], body.view-mode [onclick*="toggleSelectMode"],
body.view-mode [onclick*="Route.clear"], body.view-mode #plan-select-shape-btn,
body.view-mode #elev-select-shape-btn { display: none !important; }
#view-link-error {
    position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center;
    background: var(--bg, #fff);
}
#view-link-error > div { max-width: 420px; padding: 24px; text-align: center; }