/* ============================= */
/* ROOT VARIABLES                */
/* ============================= */

:root {
    /* Maritime wash family aligned with marketing body: rgb(10,44,69) */
    --bg-main: #0a2c45;
    --bg-card: rgba(10, 44, 69, 0.78);
    --bg-input: #0a2c45;
    --bg-hover: #0f3a58;
    --bg-muted: #0d3552;

    --border-main: #2c5c78;
    --border-accent: #7a1818;

    --text-main: #e8ecf4;
    --text-muted: #9aa0b8;
    --text-dim: #8892aa;

    --accent: #b00000;
    --accent-light: #d04040;
    --accent-rgb: 176, 0, 0;
    --accent-soft: rgba(176, 0, 0, 0.14);
    --accent-border: rgba(176, 0, 0, 0.4);
    --accent-fill: rgba(176, 0, 0, 0.18);
    --accent-muted: rgba(176, 0, 0, 0.22);
    --accent-slider: rgb(176, 0, 0);
    --success: #4ecca3;

    --ui-brightness: 1;

    /* Chromium PWA shell — matches manifest theme_color / background_color */
    --ec-chrome-solid: #0a2c45;
    --ec-wco-top-bar-height: 0px;
}

/* ============================= */
/* GLOBAL RESET                  */
/* ============================= */

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

html {
    scrollbar-gutter: stable;
}

body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg-main);
    color: var(--text-main);
    min-height: 100vh;
}

#appRoot {
    position: relative;
}

/* Branding + tabs: stacked by default; single band from 900px (see responsive block after atmospheric panels). */
.app-top-bar {
    display: flex;
    flex-direction: column;
}

/* Chromium desktop PWA: navy shell — keep body transparent so body::before hero stays visible. */
@media (display-mode: standalone) {
    html.ec-pwa-standalone {
        background-color: var(--ec-chrome-solid);
    }

    html.ec-pwa-standalone body {
        background-color: transparent;
    }
}

/* Window Controls Overlay — title region merged with operational top bar */
html.ec-wco-active {
    background-color: var(--ec-chrome-solid);
}

html.ec-wco-active body {
    background-color: var(--ec-chrome-solid);
}

html.ec-wco-active .app-top-bar {
    position: fixed;
    top: 0;
    left: env(titlebar-area-x, 0);
    width: env(titlebar-area-width, 100%);
    max-width: 100vw;
    z-index: 1200;
    background: var(--ec-chrome-solid);
    -webkit-app-region: drag;
    app-region: drag;
    box-sizing: border-box;
    padding-right: calc(
        100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw)
    );
}

html.ec-wco-active .app-top-bar .tab-btn,
html.ec-wco-active .app-top-bar .header-brand-link,
html.ec-wco-active .app-top-bar a,
html.ec-wco-active .app-top-bar button {
    -webkit-app-region: no-drag;
    app-region: no-drag;
}

html.ec-wco-active #appRoot {
    padding-top: var(--ec-wco-top-bar-height, 0px);
}

/* Narrow: DOM is primary tabs, header, About — pull branding above the tab row(s). */
@media (max-width: 899px) {
    .app-top-bar .header {
        order: -1;
    }

    .app-top-bar .tab-nav--primary {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        justify-content: center;
        flex-wrap: wrap;
    }

    .app-top-bar .tab-nav--about {
        justify-content: center;
    }
}

#appRoot::before {
    content: "";
    position: fixed;
    inset: 0;

    pointer-events: none;

    backdrop-filter: brightness(var(--ui-brightness));
    z-index: 0;
}

/* ============================= */
/* HEADER                        */
/* ============================= */

.header {
    background: rgba(10,44,69,0.25);
    padding: 20px 30px;
    border-bottom: 2px solid var(--accent);
    box-shadow: 0 4px 20px rgba(100, 0, 0, 0.18);
    display: flex;
    justify-content: center; /* centers whole block horizontally */
}

.version-badge{
    font-size:.55em;
    color:var(--text-muted);
    margin-left:6px;
    font-weight:400;
    letter-spacing:.5px;
}

#headerVersion{
    font-size:.6em;
    color:var(--text-muted);
    margin-left:6px;
    font-weight:400;
}

.header-inner {
    display: flex;
    align-items: center;      /* vertical alignment */
    gap: 20px;
}

a.header-inner {
    text-decoration: none;
    color: inherit;
}

.header-brand-link:hover {
    filter: brightness(1.04);
}

.header-brand-link:focus {
    outline: none;
}

.header-brand-link:focus-visible {
    outline: 2px solid rgba(176, 48, 56, 0.45);
    outline-offset: 4px;
    border-radius: 6px;
}

#mainLogo {
    max-height: 68px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

.header-text {
    text-align: left;
}

.header-text h1 {
    margin: 0;
    font-size: 1.6em;
    color: #fff;
}

.header-text p {
    margin: 4px 0 0 0;
    color: #b8c0d0;
    font-size: .9em;
}

/* ============================= */
/* TABS                          */
/* ============================= */

.tab-nav {
    display: flex;
    background: rgba(10,44,69,0.75);
    border-bottom: 2px solid var(--accent);
    padding: 0 20px;
}

.tab-nav--primary {
    justify-content: flex-start;
}

.tab-nav--about {
    justify-content: flex-end;
}

/* About: informational — slightly quieter than operational tabs (still readable; active state unchanged). */
.tab-nav--about .tab-btn:not(.active) {
    font-weight: 500;
    color: var(--text-muted);
}

.tab-nav--about .tab-btn:not(.active):hover {
    color: #fff;
}

.tab-btn {
    padding: 14px 24px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: .95em;
    font-weight: 500;
    color: var(--text-dim);
    border-bottom: 3px solid transparent;
    transition: .2s;
}

.tab-btn:hover {
    color: #fff;
    background: var(--accent-soft);
}

.tab-btn.active {
    color: var(--accent-light);
    border-bottom-color: var(--accent);
}

.tab-content {
    display: none;
    padding: 30px;
    max-width: 1000px;
    margin: 0 auto 10px auto;
    margin-bottom: 10px;
}

.tab-content.active {
    display: block;
    position: relative;
    z-index: 1;
}

/* ============================= */
/* CARDS                         */
/* ============================= */

.card {
    background: var(--bg-card);
    border: 1px solid var(--border-main);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
}

.card h3 {
    color: var(--accent-light);
    margin-bottom: 15px;
}

/* ============================= */
/* DROP ZONE                     */
/* ============================= */

.drop-zone {
    border: 2px dashed var(--border-main);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    background: var(--bg-input);
    transition: .2s;
}

.drop-zone:hover {
    border-color: var(--accent);
    background: var(--bg-input);
    box-shadow: 0 0 6px var(--accent-muted);
}

.drop-zone .icon {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.drop-zone p {
    color: var(--text-dim);
    font-size: .9em;
}

.filename {
    color: var(--success);
    font-weight: 600;
    margin-top: 8px;
}

.detected {
    color: #f0a500;
    font-size: .85em;
    margin-top: 4px;
}

table.wp td.wp-name,
table.wp td.wp-lat,
table.wp td.wp-lon{
    cursor:text;
}

table.wp td[contenteditable="true"]{
    background: rgba(240,165,0,.25);
}


/* ===== RDP ROW ===== */
#rdpRow {
    padding: 12px 18px;
}

/* RDP / track simplification control grid (desktop: 2 columns; mobile: single column) */
.rdp-controls-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    column-gap: 12px;
    row-gap: 8px;
    width: 100%;
    box-sizing: border-box;
    align-items: start;
}

.rdp-label-main {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
    min-width: 0;
}

.rdp-target-cluster {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 6px;
    justify-self: end;
    min-width: 0;
}

.rdp-label-target {
    font-size: 0.75em;
    color: var(--text-dim);
    font-weight: normal;
    line-height: 1.25;
    margin-bottom: 0;
    text-align: right;
    white-space: nowrap;
}

.rdp-input-target {
    width: 90px;
    max-width: 100%;
    box-sizing: border-box;
}

.rdp-slider-row {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.rdp-scale-hint {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 0.75em;
    color: var(--text-dim);
    margin-top: 0;
}

/* Output settings: form rows (Converter tab) */
.card.output-settings-card {
    /* iOS Safari: avoid heuristic text inflation on the full-width filename label in landscape
       when viewport width is above the narrow-stack breakpoint—keeps label sizing aligned with
       row labels (same pattern as .about-card). */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.output-settings-field {
    margin-bottom: 10px;
}

.output-settings-field--export-target {
    margin-bottom: 8px;
}

.export-target-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
}

.export-target-row #outNameOverride {
    flex: 1 1 auto;
    min-width: 0;
}

.export-target-format {
    flex: 0 0 auto;
    width: auto;
    min-width: 7.5rem;
    max-width: 38%;
}

.output-settings-row--gmt {
    margin-bottom: 8px;
}

.output-settings-row--gmt[hidden] {
    display: none;
}

.ec-gmt-offset-wrap {
    flex: 1 1 100%;
    min-width: 0;
}

.output-settings-row {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 6px;
    align-items: flex-start;
}

.output-settings-row > div {
    flex: 1;
    min-width: 0;
}

.output-settings-row--loose {
    margin-bottom: 12px;
}

.output-settings-card label {
    text-wrap: balance;
}

@media (max-width: 720px) {
    .output-settings-row {
        flex-direction: column;
        gap: 14px;
        margin-bottom: 10px;
    }

    .output-settings-row--loose {
        margin-bottom: 16px;
    }

    .output-settings-card label {
        line-height: 1.38;
    }

    .output-settings-card .label-short {
        white-space: nowrap;
    }

    .rdp-controls-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .rdp-label-main,
    .rdp-target-cluster,
    .rdp-slider-row,
    .rdp-scale-hint {
        width: 100%;
    }

    .rdp-target-cluster {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px 12px;
        align-self: stretch;
    }

    .rdp-label-target {
        text-align: left;
        white-space: normal;
        flex: 1 1 auto;
        min-width: 0;
    }

    .rdp-input-target {
        width: 112px;
        max-width: min(112px, 42vw);
        flex-shrink: 0;
    }
}

/* ===== RDP SLIDER ===== */

#rdpTol {
    width: 100%;
    height: 30px;
    padding: 0 10px;
    box-sizing: border-box;
    appearance: none;
    background: transparent;
}

#gmtOffset:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dropdown-option:hover{
background:var(--accent);
}

/* Track */
#rdpTol::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 4px;

    background: linear-gradient(
        to right,
        var(--accent-slider) 0%,
        var(--accent-slider) var(--rdp-fill,0%),
        #ffffff var(--rdp-fill,0%),
        #ffffff 100%
    );
}

#rdpTol::-moz-range-track {
    height: 6px;
    border-radius: 4px;

    background: linear-gradient(
        to right,
        var(--accent-slider) 0%,
        var(--accent-slider) var(--rdp-fill,0%),
        #ffffff var(--rdp-fill,0%),
        #ffffff 100%
    );
}

/* Thumb */
#rdpTol::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-slider);
    border: 2px solid var(--accent-slider);   /* ← red border */
    margin-top: -5px;
    cursor: pointer;
}

#rdpTol::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-slider);
    border: 2px solid var(--accent-slider);   /* ← red border */
    cursor: pointer;
}

/* ============================= */
/* FORM ELEMENTS                 */
/* ============================= */

label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: .9em;
}

select,
input[type="number"],
input[type="text"] {
    width: 100%;
    padding: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-main);
    border-radius: 8px;
    color: var(--text-main);
    font-size: .95em;
    margin-bottom: 15px;
    transition: .2s;
}

input[type=range]{
appearance:none;
width:100%;
background:transparent;
}

select,input[type=number]{
cursor:ns-resize;
}

input:disabled,
select:disabled{
opacity:.55;
cursor:not-allowed;
}

/* track */

input[type=range]::-moz-range-track{
height:4px;
background:#ccc;
}

/* thumb */

input[type=range]::-moz-range-thumb{
width:14px;
height:14px;
border-radius:50%;
background:#B00000;
border:none;
outline:none;
}

input[type=range]::-webkit-slider-thumb{
appearance:none;
width:14px;
height:14px;
border-radius:50%;
background:#B00000;
border:none;
}

select:hover,
input:hover,
select:focus,
input:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 6px var(--accent-muted);
}

/* ============================= */
/* BUTTONS                       */
/* ============================= */

.btn-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: .95em;
    font-weight: 600;
    transition: .2s;
}

.map-controls .btn{
    font-weight: normal;
}

#lblBtn{
    width: 110px;
    text-align: left;
}

/* Labels button indicator */

.lbl-on{
    color: var(--success);
    font-weight: 600;
}

.lbl-off{
    color: var(--accent);
    font-weight: 600;
}

.map-controls-undo-redo{
    display: flex;
    flex: 1 1 14rem;
    min-width: min(100%, 11rem);
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
}

#undoBtn,
#redoBtn{
    flex: 1 1 0;
    min-width: 5.5rem;
    max-width: none;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-primary {
    background: linear-gradient(135deg, #b00000, #900000);
    color: #fff;
    box-shadow: 0 2px 8px rgba(176, 0, 0, 0.22);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #c01818, #a00000);
    box-shadow: 0 3px 10px rgba(176, 0, 0, 0.28);
}

.btn-secondary {
    background: #3a3050;
    color: var(--text-main);
}

.btn-secondary:hover {
    background: #4a3d62;
}

.btn-clear {
    background: none;
    color: var(--text-dim);
    border: 1px solid var(--border-main);
}

.btn-clear:hover {
    border-color: var(--accent);
    color: var(--text-main);
}

.btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

#cPrev {
    display: none;
}

/* ============================= */
/* TABLES                        */
/* ============================= */

/* ===== Waypoint Preview Table ===== */

#cPrevB {
    font-variant-numeric: tabular-nums; /* align digits vertically */
}

/* Body column alignment */

#cPrevB td.wp-jump { text-align: center; }
#cPrevB td.wp-name,
#cPrev thead th:nth-child(2) { text-align: left; }
#cPrevB td.wp-lat,
#cPrevB td.wp-lon,
#cPrev thead th:nth-child(3),
#cPrev thead th:nth-child(4) { text-align: left; }
#cPrevB td.wp-op,
#cPrevB td.wp-brg,
#cPrevB td.wp-leg,
#cPrevB td.wp-run,
#cPrevB td.wp-rem,
#cPrevB td.wp-leg-metric,
#cPrev thead th.wp-op-head,
#cPrev thead th.wp-leg-head,
#cPrev thead th:nth-child(n+8):not(:last-child) { text-align: right; }
#cPrev thead th:last-child,
#cPrevB td.wp-actions { text-align: center; }

/* Waypoint table header: wrap multi-word labels; stay vertically centered when wrapped */
table.wp thead th {
    white-space: normal;
    vertical-align: middle;
    line-height: 1.25;
}

/* Optional spacing */

/* Legacy #cPrevB padding superseded by .ec-sticky-table density rules below */

/* ===== WAYPOINT TABLE INTERACTION ===== */

/* clickable waypoint numbers */

.wp-jump{
    cursor: pointer;
}

.wp-jump:hover{
    color:#f0a500;
    font-weight:600;
}

/* highlight row when jumping to waypoint */

.wp-active{
    background: rgba(240,165,0,0.18);
    transition: background 0.4s ease;
}

/* default cursor for waypoint table rows */

table.wp tbody tr td{
    cursor: default;
}

table.wp td.wp-jump{
    cursor: pointer;
}

table.wp td.wp-name,
table.wp td.wp-lat,
table.wp td.wp-lon,
table.wp td.wp-op {
    cursor: text;
}
/* Fixed-width operational NM columns — no layout shift during inline edit */
table.wp td.wp-op {
    font-variant-numeric: tabular-nums;
    width: var(--ec-wp-op-col-w, 5.25rem);
    min-width: var(--ec-wp-op-col-w, 5.25rem);
    max-width: var(--ec-wp-op-col-w, 5.25rem);
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
}
table.wp thead th.wp-op-head {
    width: var(--ec-wp-op-col-w, 5.25rem);
    min-width: var(--ec-wp-op-col-w, 5.25rem);
    max-width: var(--ec-wp-op-col-w, 5.25rem);
    box-sizing: border-box;
}
table.wp td.wp-op:empty::before {
    content: "\00a0";
}
table.wp td.wp-op input.wp-op-input {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0 2px;
    border: 1px solid rgba(240, 165, 0, 0.65);
    border-radius: 2px;
    background: rgba(12, 28, 40, 0.95);
    color: var(--text-main);
    font: inherit;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    outline: none;
    overflow-x: auto;
    overflow-y: hidden;
    text-overflow: clip;
    white-space: nowrap;
}
table.wp td.wp-op input.wp-op-input:focus {
    border-color: #f0a500;
    box-shadow: 0 0 0 1px rgba(240, 165, 0, 0.35);
}
/* Selected cell (not editing): spreadsheet-style focus cue — editing styles take precedence */
table.wp td[data-col].wp-cell-selected:not(.wp-name-editing):not(:has(.wp-op-input)):not([contenteditable="true"]) {
    outline: 1px solid rgba(212, 168, 75, 0.75);
    outline-offset: -1px;
    box-shadow: inset 0 0 0 1px rgba(212, 168, 75, 0.28);
    background-color: rgba(212, 168, 75, 0.07);
}
table.wp td[data-col].wp-cell-selected:not(.wp-name-editing):not(:has(.wp-op-input)):not([contenteditable="true"]):focus {
    outline: 1px solid rgba(212, 168, 75, 0.85);
}
/* Numeric edit: orange cue on input only; suppress selected-cell chrome on parent td */
table.wp td[data-col]:has(.wp-op-input) {
    background: transparent;
    outline: none;
    box-shadow: none;
}
table.wp td.wp-lat,
table.wp td.wp-lon{
    white-space: nowrap;
}
/* Name: compact sticky column; full string in title attribute */
table.wp td.wp-name {
    max-width: var(--ec-wp-sticky-col1-w, 10ch);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
/* Name edit: inner .wp-name-edit-host scrolls; td stays fixed width */
table.wp td.wp-name.wp-name-editing {
    max-width: var(--ec-wp-sticky-col1-w, 10ch);
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
    vertical-align: middle;
}
table.wp td.wp-name.wp-name-editing .wp-name-edit-host {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: inherit;
    line-height: inherit;
}
table.wp td.wp-name.wp-name-editing .wp-name-edit-host::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
/* Operational / numeric columns: single line, stable layout */
table.wp td.wp-jump,
table.wp td.wp-brg,
table.wp td.wp-leg,
table.wp td.wp-run,
table.wp td.wp-rem,
table.wp td.wp-leg-metric {
    white-space: nowrap;
}
/* Waypoint rows: leg metric columns reserved for transition-row alignment */
table.wp tr.wp-row-waypoint td.wp-slot-empty.wp-slot-leg {
    padding: 0 4px;
    background: transparent;
    border-bottom-color: transparent;
}
table.wp tr.wp-row-waypoint td.wp-slot-empty.wp-slot-leg::before {
    content: "";
}
/* Leg-owned metrics on interstitial rows (Phase C) */
table.wp tr.wp-row-transition td.wp-leg-metric {
    font-size: 0.75rem;
    font-weight: 450;
    color: rgba(255, 255, 255, 0.72);
    font-variant-numeric: tabular-nums;
    text-align: right;
    width: var(--ec-wp-leg-col-w, 4.75rem);
    min-width: var(--ec-wp-leg-col-w, 4.75rem);
    max-width: var(--ec-wp-leg-col-w, 4.75rem);
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
}
table.wp tr.wp-row-transition td.wp-op {
    background: rgba(255, 255, 255, 0.02);
}
table.wp td.wp-run {
    font-variant-numeric: tabular-nums;
    text-align: right;
}
table.wp thead th.wp-leg-head {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.78rem;
    width: var(--ec-wp-leg-col-w, 4.75rem);
    min-width: var(--ec-wp-leg-col-w, 4.75rem);
    max-width: var(--ec-wp-leg-col-w, 4.75rem);
    box-sizing: border-box;
}
/* Dist remaining (NM): same numeric band as leg metrics — avoids excess width now the rail edge is tidier */
table.wp.ec-sticky-table thead th.wp-rem-head {
    width: var(--ec-wp-leg-col-w, 4.75rem);
    min-width: var(--ec-wp-leg-col-w, 4.75rem);
    max-width: var(--ec-wp-leg-col-w, 4.75rem);
    box-sizing: border-box;
}
table.wp.ec-sticky-table tbody td.wp-rem {
    width: var(--ec-wp-leg-col-w, 4.75rem);
    min-width: var(--ec-wp-leg-col-w, 4.75rem);
    max-width: var(--ec-wp-leg-col-w, 4.75rem);
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
}
table.wp tr.wp-row-transition td.wp-transition-pad {
    padding: 0;
    background: var(--ec-wp-transition-bg);
}
table.wp tr.wp-row-transition:hover td.wp-transition-pad {
    background: var(--ec-wp-transition-bg-hover);
}
table.wp td.wp-actions{
    white-space: nowrap;
    width: 1%;
}
.wp-row-btn{
    font-size:.78em;
    line-height:1;
    padding:3px 5px;
    margin-left:3px;
    min-width:28px;
    min-height:22px;
    border:1px solid var(--border-main);
    border-radius:4px;
    background:rgba(255,255,255,0.04);
    color:var(--text-main);
    cursor:pointer;
}
.wp-row-btn:first-child{
    margin-left:0;
}
.wp-row-btn:hover{
    border-color:#f0a500;
}
.wp-row-btn:disabled{
    opacity:.45;
    cursor:not-allowed;
}
.wp-row-btn-danger{
    color:#d86b6b;
}
.wp-row-btn-insert{
    min-width:28px;
    font-weight:600;
    letter-spacing:0;
}

/* Interstitial leg / endpoint insertion rows (Phase 1 structure) */
table.wp.ec-sticky-table tr.wp-row-transition,
table.wp.ec-sticky-table tr.wp-row-endpoint-insert {
    --ec-wp-transition-bg: rgba(0, 0, 0, 0.14);
    --ec-wp-transition-bg-hover: rgba(0, 0, 0, 0.22);
    --ec-wp-sticky-actions-rail-bg: var(--ec-wp-transition-bg-opaque);
    --ec-wp-sticky-actions-rail-hover-bg: var(--ec-wp-transition-bg-hover-opaque);
}
table.wp.ec-sticky-table tr.wp-row-transition td:not(.wp-sticky-col--actions),
table.wp.ec-sticky-table tr.wp-row-endpoint-insert td:not(.wp-sticky-col--actions) {
    padding-top: var(--ec-wp-row-pad-y-transition, 1px);
    padding-bottom: var(--ec-wp-row-pad-y-transition, 1px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: var(--ec-wp-transition-bg);
    vertical-align: middle;
}
table.wp.ec-sticky-table tr.wp-row-transition:hover td:not(.wp-sticky-col--actions),
table.wp.ec-sticky-table tr.wp-row-endpoint-insert:hover td:not(.wp-sticky-col--actions) {
    background: var(--ec-wp-transition-bg-hover);
}
table.wp.ec-sticky-table tr.wp-row-transition td.wp-sticky-col--actions,
table.wp.ec-sticky-table tr.wp-row-endpoint-insert td.wp-sticky-col--actions {
    padding-top: var(--ec-wp-row-pad-y-transition, 1px);
    padding-bottom: var(--ec-wp-row-pad-y-transition, 1px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}
table.wp.ec-sticky-table tr.wp-row-transition td.wp-transition-gutter,
table.wp.ec-sticky-table tr.wp-row-endpoint-insert td.wp-transition-gutter {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.72rem;
    text-align: center;
    padding-left: 4px;
    padding-right: 4px;
}
table.wp.ec-sticky-table tr.wp-row-transition td.wp-transition-label,
table.wp.ec-sticky-table tr.wp-row-endpoint-insert td.wp-transition-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.62);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}
table.wp.ec-sticky-table tr.wp-row-transition td.wp-transition-fill,
table.wp.ec-sticky-table tr.wp-row-endpoint-insert td.wp-transition-fill {
    background: var(--ec-wp-transition-bg);
}
table.wp.ec-sticky-table tr.wp-row-transition:hover td.wp-sticky-col:not(.wp-sticky-col--actions),
table.wp.ec-sticky-table tr.wp-row-endpoint-insert:hover td.wp-sticky-col:not(.wp-sticky-col--actions) {
    background-color: var(--ec-wp-transition-bg-hover-opaque);
}
table.wp.ec-sticky-table tr.wp-row-transition td.wp-sticky-col:not(.wp-sticky-col--actions),
table.wp.ec-sticky-table tr.wp-row-endpoint-insert td.wp-sticky-col:not(.wp-sticky-col--actions) {
    background-color: var(--ec-wp-transition-bg-opaque);
}
/* Waypoint rows stay primary; suppress strong hover on interstitial rows */
table.wp.ec-sticky-table tr.wp-row-waypoint:hover td {
    background: rgba(var(--accent-rgb), 0.18);
}
table.wp.ec-sticky-table tr.wp-row-waypoint:hover td.wp-sticky-col:not(.wp-sticky-col--actions) {
    background-color: var(--ec-wp-sticky-body-hover);
}

/* Sticky right Actions rail: minimal model — sticky, right:0, fixed width, opaque, stable stacking. */
table.wp.ec-sticky-table th.wp-sticky-col--actions,
table.wp.ec-sticky-table td.wp-sticky-col--actions {
    position: sticky;
    right: 0;
    left: auto;
    z-index: 4;
    width: var(--ec-wp-sticky-actions-w);
    min-width: var(--ec-wp-sticky-actions-w);
    max-width: var(--ec-wp-sticky-actions-w);
    box-sizing: border-box;
    text-align: center;
    background-color: var(--ec-wp-sticky-actions-rail-bg, var(--ec-wp-sticky-body-bg));
    /* Left edge: separation + narrow opaque feather (no ::before; negative z-index breaks Chromium sticky). */
    box-shadow:
        inset 3px 0 3px -3px var(--ec-wp-sticky-actions-rail-bg, var(--ec-wp-sticky-body-bg)),
        -1px 0 0 rgba(0, 0, 0, 0.34),
        -1px 0 0 rgba(255, 255, 255, 0.09),
        -3px 0 5px -1px rgba(0, 0, 0, 0.35);
}
table.wp.ec-sticky-table thead th.wp-sticky-col--actions {
    background-color: var(--ec-wp-sticky-head-bg);
    --ec-wp-sticky-actions-rail-bg: var(--ec-wp-sticky-head-bg);
    --ec-wp-sticky-actions-rail-hover-bg: var(--ec-wp-sticky-head-bg);
}
table.wp.ec-sticky-table tbody td.wp-sticky-col--actions {
    background-color: var(--ec-wp-sticky-actions-rail-bg, var(--ec-wp-sticky-body-bg));
}
table.wp.ec-sticky-table tr.wp-row-waypoint:hover td.wp-sticky-col--actions,
table.wp.ec-sticky-table tr.wp-hover td.wp-sticky-col--actions,
table.wp.ec-sticky-table tr.wp-active td.wp-sticky-col--actions {
    background-color: var(--ec-wp-sticky-actions-rail-hover-bg, var(--ec-wp-sticky-body-hover));
}
table.wp.ec-sticky-table tr.wp-row-transition:hover td.wp-sticky-col--actions,
table.wp.ec-sticky-table tr.wp-row-endpoint-insert:hover td.wp-sticky-col--actions {
    background-color: var(--ec-wp-sticky-actions-rail-hover-bg, var(--ec-wp-transition-bg-hover-opaque));
}
table.wp.ec-sticky-table td.wp-sticky-col--actions.wp-actions {
    position: sticky;
}
/* Action buttons: opaque fills so metrics never show through */
table.wp.ec-sticky-table td.wp-sticky-col--actions .wp-row-btn {
    background-color: var(--ec-wp-sticky-actions-btn-bg);
    border-color: rgba(255, 255, 255, 0.14);
}
table.wp.ec-sticky-table tr.wp-row-transition td.wp-sticky-col--actions .wp-row-btn,
table.wp.ec-sticky-table tr.wp-row-endpoint-insert td.wp-sticky-col--actions .wp-row-btn {
    background-color: var(--ec-wp-sticky-actions-btn-bg-transition);
}
table.wp.ec-sticky-table td.wp-sticky-col--actions .wp-row-btn:hover:not(:disabled) {
    background-color: var(--ec-wp-sticky-actions-btn-hover-bg);
    border-color: rgba(240, 165, 0, 0.55);
}
table.wp.ec-sticky-table td.wp-sticky-col--actions .wp-row-btn:disabled {
    background-color: var(--ec-wp-sticky-actions-btn-bg);
    opacity: 0.5;
}

table.wp.ec-sticky-table td.wp-sticky-col--actions .wp-row-btn {
    min-width: 26px;
    min-height: 20px;
    padding: 2px 4px;
    font-size: 0.72rem;
}

table.wp{
    width:100%;
    border-collapse:collapse;
    margin-top:15px;
    font-size:.85em;
    background:var(--bg-card);
    border:1px solid var(--border-main);
    border-radius:8px;
    overflow:hidden;
}


table.wp tr.wp-hover td{
    background: rgba(var(--accent-rgb),.25);
}

/* ===== WAYPOINT MARKERS ===== */

.wp-dot div{
    width:10px;
    height:10px;
    border-radius:50%;
    border:2px solid #fff;
}


/* intermediate waypoints */

.wp-mid div{
    background:#f0a500;
}

/* start waypoint */

.wp-start div{
    background:#4ecca3;
}

/* end waypoint */

.wp-end div{
    background:#e94560;
}

/* dragging cursor */

.leaflet-marker-icon.wp-dot{
    cursor: grab;
}

.leaflet-marker-icon.wp-dot:active{
    cursor: grabbing;
}

/* map panning */

.leaflet-container{
    cursor: grab;
}

.leaflet-container:active{
    cursor: grabbing;
}

/* waypoint markers */

.leaflet-marker-icon{
    cursor: pointer;
}

.leaflet-marker-icon:active{
    cursor: grabbing;
}

#undoBtn:disabled{
    opacity:0.5;
    cursor: not-allowed
}

/* route polyline */

.leaflet-interactive{
    cursor: pointer;
}

.wp-dot div{
    transition: transform .12s ease;
}

.wp-dot:hover div{
    transform: scale(2);
}

/* Invisible operational-leg hit stroke (waypoint-to-waypoint only; not fillet/tangent preview). */
.leaflet-overlay-pane svg path.leaflet-interactive.ec-route-leg-hit {
    pointer-events: visibleStroke !important;
    stroke-opacity: 0 !important;
    fill: none !important;
    cursor: pointer;
}

/* Map-wide insert affordance when the pointer is over a valid operational leg. */
.leaflet-container.ec-map-leg-insert-hover {
    cursor: pointer;
}

/* Ensure manoeuvre / construction strokes stay visible (override any stray opacity rules). */
.leaflet-overlay-pane svg path.wp-manoeuvre-path {
    stroke-opacity: 1 !important;
    fill: none !important;
}

.leaflet-overlay-pane svg path.wp-construction-trim {
    stroke-opacity: 1 !important;
    fill: none !important;
}

.wp-manoeuvre-path {
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: none;
}

.wp-construction-trim {
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: none;
}

/* Deterministic route preview: trim point → waypoint guides (informational only). */
.leaflet-overlay-pane svg path.ec-route-preview-construction-trim {
    pointer-events: none !important;
    stroke-opacity: 0.38 !important;
    fill: none !important;
}

.ec-route-preview-construction-trim {
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: none;
}

/* Route preview polyline: deterministic fillet or legacy corner blend (non-interactive; hit remains on ec-route-leg-hit). */
.leaflet-overlay-pane svg path.ec-route-display-smooth {
    stroke-opacity: 0.9 !important;
    fill: none !important;
}

.ec-route-display-smooth {
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: none;
}

.leaflet-overlay-pane svg path.ec-route-corridor-line {
    fill: none !important;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.leaflet-overlay-pane svg path.ec-route-corridor-line--port {
    stroke: #c43838 !important;
}

.leaflet-overlay-pane svg path.ec-route-corridor-line--stbd {
    stroke: #2d8f52 !important;
}

.leaflet-overlay-pane svg path.ec-route-corridor-fill {
    pointer-events: none;
    fill: #4ecf6a !important;
    fill-opacity: 0.13 !important;
    fill-rule: nonzero;
}

/* Deterministic fillet: interactive radius edit handle (hover/drag only). */
.leaflet-marker-icon.ec-radius-edit-handle-wrap {
    background: transparent;
    border: none;
}

.ec-radius-edit-handle {
    width: 11px;
    height: 11px;
    border: 1px solid rgba(139, 64, 64, 0.9);
    background: rgba(255, 255, 255, 0.94);
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45);
    cursor: ew-resize;
    pointer-events: auto;
}

.ec-radius-edit-tooltip {
    position: fixed;
    z-index: 10050;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1.35;
    color: #2a1515;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(139, 64, 64, 0.45);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    pointer-events: none;
    white-space: nowrap;
}

/* extension change highlight */

.ext-flash{
box-shadow:0 0 0 1px var(--accent), 0 0 8px rgba(var(--accent-rgb),.45);
border-color:var(--accent) !important;
}

/* editing state */

table.wp td.wp-name.wp-name-editing,
table.wp td.wp-lat[contenteditable="true"],
table.wp td.wp-lon[contenteditable="true"]{
    background: rgba(240,165,0,.30);
    outline: 1px solid #f0a500;
    padding: 2px 6px;
}

/* ===== WAYPOINT POPUP LAYOUT ===== */

.wp-popup-title{
    margin-bottom:6px;
}

.wp-popup-grid{
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:10px;
    row-gap:2px;
    font-variant-numeric: tabular-nums;
}

.wp-popup-hint {
    margin: 10px 0 0;
    padding: 0;
    font-size: 0.85em;
    line-height: 1.35;
    opacity: 0.88;
}

.wp-label{
    text-align:left;
    opacity:0.8;
}

.wp-coord{
    text-align:right;
}




/* Operational route table: horizontal scroll comes only from column widths — do not add trailing
   padding, margin, or spare columns for slack; they desynchronise sticky right: 0 from the viewport. */
table.wp.ec-sticky-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    /* Override table.wp { overflow: hidden } — Chromium uses the table as sticky
       containing block when overflow is not visible; Firefox is more permissive. */
    overflow: visible;
    margin-top: 0;
    font-size: var(--ec-wp-table-font-size, 0.78rem);
    line-height: var(--ec-wp-table-line-height, 1.28);
    background: transparent;
}

table.wp.ec-sticky-table thead th {
    position: -webkit-sticky;
    position: sticky;
    top: var(--ec-sticky-tier-0);
    z-index: 3;
    background: var(--ec-wp-sticky-head-bg);
    padding: var(--ec-wp-head-pad-y, 3px) var(--ec-wp-cell-pad-x, 5px);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    border-bottom: 2px solid rgba(var(--accent-rgb), 0.4);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    vertical-align: bottom;
}

/* Pinned waypoint identity columns (horizontal scroll) */
table.wp.ec-sticky-table th.wp-sticky-col--0,
table.wp.ec-sticky-table td.wp-sticky-col--0 {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: var(--ec-wp-sticky-col0-w);
    width: var(--ec-wp-sticky-col0-w);
    max-width: var(--ec-wp-sticky-col0-w);
    box-sizing: border-box;
    isolation: isolate;
    background-color: var(--ec-wp-sticky-body-bg);
}

table.wp.ec-sticky-table th.wp-sticky-col--1,
table.wp.ec-sticky-table td.wp-sticky-col--1 {
    position: -webkit-sticky;
    position: sticky;
    left: var(--ec-wp-sticky-col1-left);
    z-index: 3;
    width: var(--ec-wp-sticky-col1-w);
    min-width: var(--ec-wp-sticky-col1-w);
    max-width: var(--ec-wp-sticky-col1-w);
    box-sizing: border-box;
    overflow: clip;
    text-overflow: ellipsis;
    white-space: nowrap;
    isolation: isolate;
    background-color: var(--ec-wp-sticky-body-bg);
    box-shadow:
        2px 0 0 rgba(0, 0, 0, 0.38),
        1px 0 0 rgba(255, 255, 255, 0.11);
}

table.wp.ec-sticky-table tbody td.wp-sticky-col {
    background-color: var(--ec-wp-sticky-body-bg);
}

table.wp.ec-sticky-table thead th.wp-sticky-col {
    z-index: 5;
    background-color: var(--ec-wp-sticky-head-bg);
}

table.wp.ec-sticky-table thead th.wp-sticky-col--0 {
    z-index: 8;
    background-color: var(--ec-wp-sticky-head-bg);
}

table.wp.ec-sticky-table thead th.wp-sticky-col--1 {
    z-index: 9;
    background-color: var(--ec-wp-sticky-head-bg);
}

table.wp.ec-sticky-table thead th.wp-sticky-col--actions {
    z-index: 8;
}

table.wp.ec-sticky-table td {
    padding: var(--ec-wp-row-pad-y-waypoint, 2px) var(--ec-wp-cell-pad-x, 5px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

table.wp.ec-sticky-table tr.wp-row-waypoint td {
    padding-top: var(--ec-wp-row-pad-y-waypoint, 2px);
    padding-bottom: var(--ec-wp-row-pad-y-waypoint, 2px);
}

table.wp.ec-sticky-table tr:hover td:not(.wp-sticky-col--actions) {
    background: rgba(var(--accent-rgb), 0.18);
}

table.wp.ec-sticky-table tr:hover td.wp-sticky-col:not(.wp-sticky-col--actions) {
    background-color: var(--ec-wp-sticky-body-hover);
}

table.wp.ec-sticky-table tr.wp-hover td.wp-sticky-col,
table.wp.ec-sticky-table tr.wp-active td.wp-sticky-col {
    background-color: var(--ec-wp-sticky-body-hover);
}

table.wp.ec-sticky-table td.wp-name.wp-name-editing.wp-sticky-col--1 {
    z-index: 6;
    width: var(--ec-wp-sticky-col1-w);
    min-width: var(--ec-wp-sticky-col1-w);
    max-width: var(--ec-wp-sticky-col1-w);
    overflow: hidden;
}

table.wp th.wp-op-head {
    line-height: 1.2;
}

/* ============================= */
/* STATS                         */
/* ============================= */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
    gap: 12px;
    margin-top: 15px;
}

.stat-item {
    background: var(--bg-muted);
    border: 1px solid var(--border-main);
    border-radius: 8px;
    padding: 12px;
}

.stat-item .lbl {
    font-size: .8em;
    color: var(--text-muted);
}

.stat-item .val {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--success);
}
#cStats {
    margin-top: 20px;
}

/* ============================= */
/* RESPONSIVE                    */
/* ============================= */

@media (max-width:600px) {
    .header { padding:15px; }
    .header h1 { font-size:1.3em; }
    #mainLogo { max-height: 54px; }
    .tab-btn { padding:10px 14px; font-size:.85em; }
    .tab-content { padding:15px; }
    .card { padding:15px; }
    .btn { padding:10px 18px; font-size:.85em; }
}

/* ============================= */
/* MAP WRAPPER                  */
/* ============================= */

#mapWrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Operational instrumentation grid (Lite 6.8) — bridge strip under chart */
/* Isolate strip from global form label/input/button rules (prevents “unstyled” leakage). */
.route-nav-bar .route-nav-instrument-grid label.route-nav-ins-head {
    display: flex;
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    cursor: pointer;
}

.route-nav-bar .route-nav-instrument-grid input.route-nav-ins-val[type="text"] {
    width: 100%;
    max-width: 100%;
    padding: 1px 4px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    background: rgba(8, 20, 32, 0.55);
    color: var(--ec-ins-readout);
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.3;
    transition: border-color 0.12s;
    box-shadow: none;
}

.route-nav-bar .route-nav-instrument-grid input.route-nav-ins-val[type="text"]:hover {
    border-color: rgba(120, 130, 148, 0.45);
    outline: none;
    box-shadow: none;
}

.route-nav-bar .route-nav-instrument-grid input.route-nav-ins-val[type="text"]:focus {
    border-color: #f0a500;
    box-shadow: 0 0 0 1px rgba(240, 165, 0, 0.35);
    outline: none;
}

.route-nav-bar .route-nav-instrument-grid button.route-nav-ins-head-fmt {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    font-family: inherit;
    line-height: 1;
}

.route-nav-instrument-grid {
    --ec-ins-w-cursor: 7.7rem;
    --ec-ins-w-ebl: 5.15rem;
    --ec-ins-w-ruler: 3.65rem;
    --ec-ins-readout: rgba(198, 208, 222, 0.94);
    --ec-ins-readout-dim: rgba(148, 158, 174, 0.62);
    --ec-ins-live: rgba(118, 168, 138, 0.92);
    --ec-ins-live-accent: rgba(88, 138, 108, 0.55);
    --ec-ins-fixed: rgba(196, 142, 108, 0.9);
    --ec-ins-fixed-accent: rgba(168, 98, 72, 0.5);
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        var(--ec-ins-w-cursor)
        var(--ec-ins-w-ebl)
        var(--ec-ins-w-ebl)
        var(--ec-ins-w-ruler);
    gap: 6px 7px;
    align-items: start;
    width: 100%;
    margin-top: 6px;
    padding: 4px 6px 5px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(10, 36, 56, 0.88);
    box-sizing: border-box;
}

.route-nav-ins-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.route-nav-ins-col--nav {
    grid-column: 1;
    align-self: start;
}

.route-nav-ins-col--nav .route-nav-cluster--primary {
    flex-wrap: nowrap;
    align-items: flex-start;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.route-nav-wpt-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    min-width: 0;
}

.route-nav-wpt-band {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 3px;
    flex-shrink: 0;
}

.route-nav-wpt-select-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    flex-shrink: 0;
    min-width: 0;
}

.route-nav-wpt-core {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.route-nav-corridor-secondary {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.route-nav-ins-head--corridor {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(72, 80, 98, 0.9);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(52, 58, 74, 0.95) 0%, rgba(36, 42, 56, 0.98) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.07) inset,
        0 1px 2px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    box-sizing: border-box;
}

.route-nav-ins-head--corridor:hover {
    border-color: rgba(var(--accent-rgb), 0.45);
}

.route-nav-ins-head-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    margin: 0;
    cursor: pointer;
    box-sizing: border-box;
}

.route-nav-ins-head-seg--main {
    flex: 3 1 75%;
    min-width: 0;
}

.route-nav-ins-head-seg--fill {
    flex: 1 0 25%;
    border-left: 1px solid rgba(72, 80, 98, 0.85);
    background: rgba(28, 34, 46, 0.65);
}

.route-nav-ins-head-seg--fill.route-nav-ins-head-seg--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.route-nav-ins-head--corridor .route-nav-ins-head-label,
.route-nav-ins-head--corridor .route-nav-ins-head-fmt-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
}

.route-nav-ins-head-fmt-label {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0 5px;
    color: rgba(200, 208, 220, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
}

.route-nav-ins-head-seg--main .route-nav-ins-head-input:checked + .route-nav-ins-head-label,
.route-nav-ins-head-seg--fill .route-nav-ins-head-input:checked + .route-nav-ins-head-fmt-label {
    color: rgba(210, 218, 232, 0.98);
}

.route-nav-ins-subhead {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 24px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(72, 80, 98, 0.75);
    border-radius: 4px;
    background: rgba(28, 34, 46, 0.92);
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
}

.route-nav-ins-subhead .route-nav-ins-head-label {
    font-size: 9px;
    font-weight: 600;
}

.route-nav-ins-subhead .route-nav-ins-head-input:checked + .route-nav-ins-head-label {
    color: rgba(210, 218, 232, 0.98);
}

.route-nav-ins-subhead:has(.route-nav-ins-head-input:disabled) {
    opacity: 0.45;
    cursor: not-allowed;
}

.route-nav-ins-header {
    width: 100%;
}

.route-nav-ins-head {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 28px;
    margin: 0;
    margin-bottom: 0;
    padding: 0;
    border: 1px solid rgba(72, 80, 98, 0.9);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(52, 58, 74, 0.95) 0%, rgba(36, 42, 56, 0.98) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.07) inset,
        0 1px 2px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
    transition: border-color 0.12s, box-shadow 0.12s;
}

.route-nav-ins-head:hover {
    border-color: rgba(var(--accent-rgb), 0.45);
}

.route-nav-ins-head-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

.route-nav-ins-head-label {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.1;
    color: rgba(200, 208, 220, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
}

/* Tactical readout hierarchy: match route action prominence (Waypoint / Reverse / Focus). */
.route-nav-ins-col--cursor .route-nav-ins-head-label,
.route-nav-ins-col--ebl .route-nav-ins-head-label,
.route-nav-ins-col--ruler .route-nav-ins-head-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.route-nav-ins-head-fmt {
    flex: 0 0 auto;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.35rem;
    padding: 0 5px;
    margin: 0;
    margin-bottom: 0;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    border-left: 1px solid rgba(72, 80, 98, 0.85);
    border-radius: 0;
    background: rgba(28, 34, 46, 0.65);
    color: rgba(168, 178, 194, 0.88);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    box-sizing: border-box;
}

.route-nav-ins-head-fmt:hover {
    background: rgba(38, 44, 58, 0.9);
    color: rgba(210, 218, 230, 0.95);
}

.route-nav-ins-col.ec-ins-state--live .route-nav-ins-head {
    border-color: var(--ec-ins-live-accent);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 0 0 1px rgba(88, 138, 108, 0.22);
}

.route-nav-ins-col.ec-ins-state--live .route-nav-ins-head-label {
    color: var(--ec-ins-live);
}

.route-nav-ins-col.ec-ins-state--fixed .route-nav-ins-head {
    border-color: var(--ec-ins-fixed-accent);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 0 0 1px rgba(168, 98, 72, 0.18);
}

.route-nav-ins-col.ec-ins-state--fixed .route-nav-ins-head-label {
    color: var(--ec-ins-fixed);
}

.route-nav-ins-col.ec-ins-state--inactive .route-nav-ins-head-label {
    color: rgba(148, 156, 172, 0.78);
}

.route-nav-ins-head-input:checked + .route-nav-ins-head-label {
    color: rgba(220, 226, 236, 0.94);
}

.route-nav-ins-col.ec-ins-state--inactive .route-nav-ins-head-input:checked + .route-nav-ins-head-label {
    color: rgba(188, 196, 210, 0.88);
}

.route-nav-ins-readout {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.route-nav-ins-readout-row {
    display: flex;
    align-items: center;
    gap: 3px;
    width: 100%;
    min-width: 0;
}

.route-nav-ins-readout-lbl {
    flex: 0 0 1.35rem;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.34);
    line-height: 1.2;
}

.route-nav-ins-col--cursor .route-nav-ins-val {
    letter-spacing: 0.01em;
}

.route-nav-ins-val {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 1px 4px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    background: rgba(8, 20, 32, 0.55);
    color: var(--ec-ins-readout);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-family: inherit;
    letter-spacing: 0.02em;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

/* Tactical metric inputs: stronger visual hierarchy without layout change. */
.route-nav-ins-col--cursor .route-nav-ins-val {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.route-nav-ins-val--tactical {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.route-nav-ins-col--cursor .route-nav-ins-readout-lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.route-nav-ins-col--ebl .route-nav-ins-readout-lbl,
.route-nav-ins-col--ruler .route-nav-ins-readout-lbl {
    font-size: 10px;
    font-weight: 700;
}

input.route-nav-ins-val[type="text"] {
    cursor: text;
}

input.route-nav-ins-val[type="text"]:focus {
    border-color: #f0a500;
    box-shadow: 0 0 0 1px rgba(240, 165, 0, 0.35);
    outline: none;
}

.route-nav-ins-val--error {
    border-color: rgba(168, 98, 72, 0.65) !important;
}

.route-nav-ins-col.ec-ins-state--live .route-nav-ins-val {
    color: var(--ec-ins-live);
    border-bottom-color: rgba(88, 138, 108, 0.35);
}

.route-nav-ins-col.ec-ins-state--fixed .route-nav-ins-val {
    color: var(--ec-ins-fixed);
    border-bottom-color: rgba(168, 98, 72, 0.32);
}

.route-nav-ins-col.ec-ins-state--inactive .route-nav-ins-val {
    color: var(--ec-ins-readout-dim);
}

.route-nav-bar.route-nav-bar--cursor-off .route-nav-ins-col--cursor .route-nav-ins-head-fmt {
    opacity: 0.45;
    pointer-events: none;
}

@media (max-width: 900px) {
    .route-nav-instrument-grid {
        --ec-ins-w-cursor: 6.75rem;
        --ec-ins-w-ebl: 4.5rem;
        --ec-ins-w-ruler: 3.4rem;
        grid-template-columns: 1fr;
    }

}

/* H-key overlay declutter — transient assistive layers only */
.ec-map-overlay-reduced .ec-cursor-map-tooltip,
.ec-map-overlay-minimal .ec-cursor-map-tooltip,
.ec-map-overlay-reduced .floating-insert-hint,
.ec-map-overlay-minimal .floating-insert-hint,
.ec-map-overlay-reduced .floating-insert-tactical,
.ec-map-overlay-minimal .floating-insert-tactical {
    display: none !important;
    visibility: hidden !important;
}

.ec-cursor-map-tooltip {
    position: absolute;
    z-index: 990;
    pointer-events: none;
    padding: 3px 7px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    line-height: 1.25;
    white-space: nowrap;
    color: rgba(220, 228, 240, 0.92);
    background: rgba(12, 22, 32, 0.82);
    border: 1px solid rgba(90, 120, 150, 0.45);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.ec-cursor-map-tooltip--hidden-slot {
    display: none !important;
}

/* Map-anchored EBL/VRM/ruler metric labels (pan/zoom with geometry) */
.ec-tactical-map-label {
    background: transparent;
    border: none;
}

.ec-tactical-map-label-inner {
    display: inline-block;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    line-height: 1.2;
    white-space: nowrap;
    color: rgba(232, 236, 248, 0.94);
    background: rgba(12, 22, 32, 0.82);
    border: 1px solid rgba(90, 120, 150, 0.45);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
    pointer-events: none;
}

.ec-tactical-map-label--ebl1 .ec-tactical-map-label-inner {
    border-color: rgba(var(--accent-rgb), 0.42);
}

.ec-tactical-map-label--ebl2 .ec-tactical-map-label-inner {
    border-color: rgba(154, 56, 56, 0.42);
}

.ec-tactical-map-label--ruler .ec-tactical-map-label-inner {
    border-color: rgba(106, 122, 140, 0.5);
}

.ec-ebl-overwrite-menu .wp-menu-item[data-action^="overwrite-ebl"] {
    font-weight: 500;
}

.wp-menu-item.wp-menu-item--heading {
    cursor: default;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    pointer-events: none;
}

.wp-menu-item.wp-menu-item--heading:hover {
    background: transparent;
}

/* Operational reference mark — waypoint-consistent grab/hover language */
.leaflet-marker-icon.ec-op-ref-mark-wp {
    cursor: grab;
}

.leaflet-marker-icon.ec-op-ref-mark-wp:active {
    cursor: grabbing;
}

.ec-op-ref-mark-icon {
    background: transparent;
    border: none;
}

/* Operational reference mark — larger thin plotting plus, centre-aligned. */
.ec-op-ref-mark-wp .ec-op-ref-mark-plus {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    pointer-events: none;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.7));
    transition: transform 0.12s ease;
}

.ec-op-ref-mark-wp:hover .ec-op-ref-mark-plus {
    transform: scale(1.12);
}

.wp-menu-item.wp-menu-item--future {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    font-style: italic;
}

.ec-wp-table-resize-handle {
    display: block;
    width: 100%;
    height: 8px;
    min-height: 8px;
    margin: 0;
    padding: 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 4px 4px 0 0;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0.03)
    );
    cursor: ns-resize;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    color: inherit;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.ec-wp-table-resize-handle:hover,
.ec-wp-table-resize-handle.ec-wp-table-resize-handle--active {
    background: linear-gradient(
        to bottom,
        rgba(var(--accent-rgb), 0.35),
        rgba(255, 255, 255, 0.04)
    );
}

.ec-sticky-scroll--wp-table.ec-wp-table-expanded {
    max-height: min(52vh, 32rem);
}

.floating-insert-hint {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 50px;
    z-index: 800;
    pointer-events: none;
    max-width: min(420px, calc(100% - 24px));
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-main);
    background: rgba(40, 45, 64, 0.94);
    border: 1px solid #f0a500;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    text-align: center;
    line-height: 1.35;
}

.floating-insert-tactical {
    position: absolute;
    z-index: 850;
    pointer-events: none;
    transform: translate(-50%, -50%);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    line-height: 1.2;
    white-space: nowrap;
    color: rgba(232, 236, 248, 0.94);
    background: rgba(22, 26, 38, 0.72);
    border: 1px solid rgba(240, 165, 0, 0.45);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Tactical EBL / VRM overlay */
.ec-ebl-vrm-tactical {
    position: absolute;
    z-index: 860;
    pointer-events: none;
    transform: translate(-50%, -50%);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    line-height: 1.2;
    white-space: nowrap;
    color: rgba(232, 236, 248, 0.94);
    background: rgba(22, 26, 38, 0.74);
    border: 1px solid rgba(var(--accent-rgb), 0.42);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
}

.ec-map-tactical-live.leaflet-container,
.ec-map-ebl-vrm-live.leaflet-container {
    cursor: crosshair;
}

.leaflet-pane .ec-ruler-line {
    stroke: rgba(106, 122, 140, 0.9);
}

.ec-ruler-tactical {
    position: absolute;
    z-index: 860;
    pointer-events: none;
    transform: translate(-50%, -50%);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    line-height: 1.2;
    white-space: nowrap;
    color: rgba(232, 236, 248, 0.94);
    background: rgba(22, 26, 38, 0.74);
    border: 1px solid rgba(106, 122, 140, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
}

.ec-ebl-vrm-tactical--slot2 {
    border-color: rgba(154, 56, 56, 0.42);
}

.leaflet-tooltip.ec-op-tooltip {
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.leaflet-tooltip.ec-op-tooltip::before {
    border-top-color: rgba(22, 26, 38, 0.88);
}

.ec-op-tooltip-inner {
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.35;
    color: rgba(232, 236, 248, 0.95);
    background: rgba(22, 26, 38, 0.88);
    border: 1px solid rgba(90, 100, 120, 0.55);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    max-width: 16rem;
}

.ec-op-tooltip-inner--tactical-handle {
    padding: 4px 6px;
    font-size: 10px;
    line-height: 1.25;
    border-color: rgba(88, 98, 118, 0.45);
    background: rgba(20, 24, 34, 0.84);
}

.ec-op-tooltip-title {
    margin-bottom: 4px;
    font-weight: 600;
}

.ec-op-tooltip-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 8px;
    row-gap: 1px;
    font-variant-numeric: tabular-nums;
    margin-bottom: 4px;
}

.ec-op-tooltip-hint {
    margin: 6px 0 0;
    padding: 0;
    font-size: 0.92em;
    line-height: 1.35;
    opacity: 0.9;
}

.ec-op-tooltip-hint--zoom {
    opacity: 0.85;
}

.ec-op-tooltip-context {
    margin: 0;
    line-height: 1.35;
}

.ec-map-chart-tooltip {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
    transform: translate(0, calc(-100% - 12px));
    transition: opacity 0.22s ease;
}

.ec-map-chart-tooltip--hiding {
    opacity: 0;
}

.ec-ui-op-tooltip {
    position: fixed;
    z-index: 10050;
    pointer-events: none;
    max-width: 18rem;
}

.ec-ui-op-tooltip[hidden] {
    display: none !important;
}

.ec-ui-op-tooltip-inner {
    padding: 6px 9px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.35;
    color: rgba(28, 32, 42, 0.92);
    background: rgba(248, 250, 252, 0.97);
    border: 1px solid rgba(120, 130, 150, 0.35);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.ec-ui-op-tooltip-line {
    margin: 0;
}

.ec-ui-op-tooltip-line + .ec-ui-op-tooltip-line {
    margin-top: 4px;
}

.ec-ui-op-tooltip--dark .ec-ui-op-tooltip-inner {
    color: rgba(232, 236, 248, 0.95);
    background: rgba(22, 26, 38, 0.88);
    border-color: rgba(90, 100, 120, 0.55);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.wp-menu-item {
    display: flex;
    align-items: center;
    gap: 7px;
}

.ec-menu-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.78;
    color: rgba(200, 208, 220, 0.95);
}

.ec-menu-glyph svg {
    display: block;
}


.tactical-overlay-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: rgba(160, 168, 184, 0.88);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.tactical-overlay-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

.tactical-overlay-toggle-box {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    border-radius: 2px;
    border: 1px solid rgba(100, 110, 130, 0.65);
    background: rgba(32, 38, 52, 0.55);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
    position: relative;
}

.tactical-overlay-toggle-input:checked + .tactical-overlay-toggle-box {
    border-color: rgba(72, 130, 88, 0.75);
    background: rgba(40, 72, 52, 0.75);
}

.tactical-overlay-toggle-input:checked + .tactical-overlay-toggle-box::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 0px;
    width: 5px;
    height: 7px;
    border: solid rgba(210, 230, 215, 0.95);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

.tactical-overlay-toggle--active {
    color: rgba(200, 220, 208, 0.95);
}

.tactical-overlay-toggle--live {
    color: rgba(232, 210, 210, 0.95);
}

.tactical-overlay-toggle--live .tactical-overlay-toggle-box {
    border-color: rgba(var(--accent-rgb), 0.65);
    background: rgba(72, 24, 24, 0.75);
}

.tactical-overlay-toggle--live .tactical-overlay-toggle-input:checked + .tactical-overlay-toggle-box::after {
    border-color: rgba(248, 220, 220, 0.95);
}

.leaflet-pane .ec-ebl-vrm-line {
    stroke: rgba(var(--accent-rgb), 0.82);
}

.leaflet-pane path.ec-ebl-vrm-vrm {
    fill: none;
    stroke: rgba(var(--accent-rgb), 0.55);
}

/* Tactical handle hits: Leaflet .leaflet-interactive defaults to pointer on the SVG path. */
.leaflet-interactive.ec-tactical-handle-hit {
    cursor: inherit;
}

.ec-eblvrm-dragging,
.ec-eblvrm-drag-active,
.ec-eblvrm-dragging *,
.ec-eblvrm-drag-active * {
    cursor: inherit !important;
}

.leaflet-container.ec-map-cursor-inspecting {
    cursor: default;
}

.ec-tactical-handle-hint {
    z-index: 1005;
    pointer-events: none;
}

#routeMap {
    flex: 1;
    height: 450px;
    border-radius: 10px;
    border: 1px solid var(--border-main);
}

.route-nav-bar {
    --ec-route-nav-accent: #b00000;
    --ec-route-nav-accent-soft: rgba(176, 0, 0, 0.38);
    --ec-route-nav-accent-ring: rgba(176, 0, 0, 0.24);
    display: block;
    box-sizing: border-box;
}

.route-nav-cluster {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-wrap: nowrap;
}

.route-nav-btn,
.route-nav-wpt-shell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 7px;
    border: 1px solid rgba(72, 80, 98, 0.9);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(52, 58, 74, 0.95) 0%, rgba(36, 42, 56, 0.98) 100%);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.07) inset,
        0 1px 2px rgba(0, 0, 0, 0.28);
    transition: border-color 0.12s, background 0.12s, color 0.12s, box-shadow 0.12s;
    box-sizing: border-box;
}

.route-nav-btn {
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.route-nav-btn:focus-visible:not(:disabled) {
    border-color: var(--ec-route-nav-accent);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.07) inset,
        0 1px 2px rgba(0, 0, 0, 0.28),
        0 0 0 1px var(--ec-route-nav-accent-ring);
}

.route-nav-btn:hover:not(:disabled),
.route-nav-wpt-shell:hover:not(:has(.route-nav-wpt-input:disabled)) {
    border-color: var(--ec-route-nav-accent-soft);
    background: linear-gradient(180deg, rgba(62, 68, 86, 0.98) 0%, rgba(44, 50, 66, 1) 100%);
    color: #fff;
}

.route-nav-btn:active:not(:disabled),
.route-nav-wpt-shell:active:not(:has(.route-nav-wpt-input:disabled)) {
    background: rgba(28, 32, 44, 1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
    transform: translateY(0.5px);
}

.route-nav-btn:disabled,
.route-nav-wpt-shell:has(.route-nav-wpt-input:disabled) {
    opacity: 0.38;
    cursor: not-allowed;
    box-shadow: none;
}

.route-nav-wpt-shell:focus-within:not(:has(.route-nav-wpt-input:disabled)) {
    border-color: var(--ec-route-nav-accent);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.07) inset,
        0 1px 2px rgba(0, 0, 0, 0.28),
        0 0 0 1px var(--ec-route-nav-accent-ring);
}

.route-nav-btn.route-nav-go {
    min-width: 34px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.route-nav-group--route-ops {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.route-nav-btn.route-nav-reverse {
    min-width: auto;
    padding: 0 9px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.route-nav-btn.route-nav-focus {
    min-width: auto;
    padding: 0 9px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.route-nav-wpt-shell {
    gap: 4px;
    min-width: auto;
    padding: 0 6px 0 5px;
    margin: 0 1px;
    flex-shrink: 0;
    cursor: text;
    align-items: center;
}

.route-nav-wpt-prefix {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted, #9aa3b8);
    user-select: none;
    line-height: 1;
    flex-shrink: 0;
}

/* Override global input[type="text"] form styles (padding, width, margin). */
.route-nav-wpt-shell input.route-nav-wpt-input[type="text"] {
    width: 3.25ch;
    min-width: 2.5ch;
    max-width: 5.5ch;
    height: auto;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-main);
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    text-align: center;
    line-height: 1;
    box-sizing: border-box;
    flex: 0 0 auto;
    align-self: center;
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: text;
    transition: none;
}

.route-nav-wpt-shell input.route-nav-wpt-input[type="text"]:focus {
    outline: none;
    border: none;
    background: transparent;
}

.route-nav-wpt-shell input.route-nav-wpt-input[type="text"]:disabled {
    cursor: not-allowed;
}

.route-nav-sep {
    width: 1px;
    height: 20px;
    margin: 0 2px;
    background: rgba(90, 100, 120, 0.55);
    flex-shrink: 0;
}

.route-nav-sep--inline {
    margin: 0 4px;
}

.route-nav-btn.route-nav-focus {
    min-width: auto;
    height: 28px;
    padding: 0 11px 0 9px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    opacity: 0.92;
}

.route-nav-focus .focus-route-icon {
    display: inline-block;
    font-size: 0.95em;
    line-height: 1;
    opacity: 0.55;
    transform: translateY(-0.04em);
}

.route-nav-focus:hover:not(:disabled) {
    opacity: 1;
    border-color: var(--ec-route-nav-accent-soft);
}

.route-nav-focus:hover:not(:disabled) .focus-route-icon {
    opacity: 0.75;
}

.route-nav-focus:focus-visible:not(:disabled) {
    border-color: var(--ec-route-nav-accent);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.07) inset,
        0 1px 2px rgba(0, 0, 0, 0.28),
        0 0 0 1px var(--ec-route-nav-accent-ring);
}

/* ============================= */
/* LEAFLET OVERRIDES            */
/* ============================= */

.leaflet-container {
    background: #0c2436;
}

.leaflet-control,
.leaflet-top,
.leaflet-bottom {
    z-index: 500 !important;
}

/* ============================= */
/* WAYPOINT LABELS              */
/* ============================= */

.wp-marker-label {
    background: rgba(10,44,69,.85);
    color: var(--success);
    border: 1px solid var(--success);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* ============================= */
/* MAP CONTROLS                 */
/* ============================= */

.map-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.map-controls button {
    padding: 6px 14px;
    border: 1px solid var(--border-main);
    border-radius: 6px;
    background: var(--bg-muted);
    color: var(--text-main);
    cursor: pointer;
    font-size: .82em;
    transition: .2s;
    font-weight: normal;
}

.map-controls button:hover,
.map-controls button.active {
    border-color: var(--accent);
    background: var(--bg-hover);
    color: #fff;
}

.play-info {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font-family: 'Courier New', monospace;
    font-size: 11.5px;
    color: #aaa;
    white-space: nowrap;
    width: 100%;
    padding-top: 2px;
    flex-wrap: nowrap;
}

.pi-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pi-sep {
    color: #555;
}

.pi-val {
    display: inline-block;
    text-align: right;
    color: #fff;
}

#piLat  { min-width: 13ch; }
#piLon  { min-width: 14ch; }
#piTime { min-width: 17ch; }
#piHdg  { min-width: 4ch; }
#piSpd  { min-width: 8ch; }
#piDist { min-width: 9ch; }


/* ============================= */
/* STICKY SCROLL (shared)        */
/* Reusable shell for compat tab, route tables, docked panels. */
/* ============================= */

:root {
    --ec-sticky-tier-0: 0px;
    --ec-sticky-tier-1: 2.125rem;
    --ec-tab-chrome-offset: 11.5rem;
    /* Each In/Out half-column; a format group (GPX, RTZ, …) spans two halves. */
    --compat-data-col-w: 2.5rem;
    /* Import-only: one width from longest first-line word (Sperry); stacked line 2 ignored */
    --compat-import-only-w: 3.65rem;
    /* Route integrity: single column sized for "Integrity" */
    --compat-fidelity-col-w: 4.5rem;
    /* System / product — widest column in the matrix */
    --compat-system-col-w: 15.5rem;
    --compat-system-min-w: 9.5rem;
}

.ec-sticky-scroll {
    position: relative;
    min-height: 0;
    overflow: auto;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

#tab-compat.tab-content--scroll-panel {
    /* 1024px tab + 40px horizontal padding → 984px matrix frame (table min-width 953.6px + gutter/border budget) */
    max-width: 1024px;
    padding: 1rem 1.25rem;
}

.tab-content--scroll-panel.active {
    display: flex;
    flex-direction: column;
    max-height: max(
        12rem,
        calc(100dvh - var(--ec-tab-chrome-offset, 11.5rem))
    );
    min-height: 0;
    overflow: hidden;
}

/* ============================= */
/* COMPATIBILITY TABLE          */
/* ============================= */

.compat-wrapper {
    max-width: min(100%, 1280px);
    margin: 0 auto;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.compat-intro-panel {
    flex-shrink: 0;
    margin-bottom: 0.55rem;
    padding: 0.65rem 0.85rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(10, 36, 56, 0.92);
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.compat-intro {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: rgba(228, 233, 242, 0.92);
}

.compat-disclaimer p {
    margin: 0 0 0.55rem;
}

.compat-disclaimer p:last-child {
    margin-bottom: 0;
}

/* Disclaimer footer inside the matrix body scroller — blends with table/legend, not a separate card. */
.compat-matrix-body-scroll > .compat-disclaimer {
    margin: 0;
    padding: 0.85rem 0.65rem 0.75rem;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    font-size: 0.75rem;
    line-height: 1.45;
    color: rgba(228, 233, 242, 0.82);
}

/* Compat matrix: fixed header + body scroll region (flex chain must use min-height: 0). */
.ec-sticky-scroll.ec-sticky-scroll--compat {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(10, 44, 69, 0.92);
}

.compat-matrix-mount {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

.compat-matrix-shell {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

.compat-matrix-head-wrap {
    flex: 0 0 auto;
    overflow: hidden;
    border-bottom: 2px solid rgba(var(--accent-rgb), 0.45);
    background: #152f40;
}

.compat-matrix-head-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.compat-matrix-head-scroll::-webkit-scrollbar {
    display: none;
}

.compat-matrix-body-outer {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Sole vertical/horizontal scroll owner for matrix data and legend */
.compat-matrix-body-scroll {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    position: relative;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(228, 233, 242, 0.45) rgba(10, 44, 69, 0.4);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.compat-matrix-body-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.compat-matrix-body-scroll::-webkit-scrollbar-track {
    background: rgba(10, 44, 69, 0.35);
}

.compat-matrix-body-scroll::-webkit-scrollbar-thumb {
    background: rgba(228, 233, 242, 0.38);
    border-radius: 4px;
}

.compat-matrix-body-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(228, 233, 242, 0.58);
}

/* Scroll affordance: peek of next row + restrained bottom fade (hidden at scroll end) */
.compat-matrix-body-scroll.compat-matrix-body-scroll--can-scroll:not(
        .compat-matrix-body-scroll--at-end
    ) {
    box-shadow: inset 0 -14px 12px -11px rgba(0, 0, 0, 0.3);
}

.compat-matrix-body-scroll.compat-matrix-body-scroll--can-scroll:not(
        .compat-matrix-body-scroll--at-end
    )
    .compat-matrix-table--body {
    margin-bottom: -0.5rem;
    padding-bottom: 0.5rem;
}

.compat-matrix-body-outer.compat-matrix-body-outer--can-scroll:not(.compat-matrix-body-outer--at-end)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2rem;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(10, 44, 69, 0),
        rgba(10, 44, 69, 0.78) 55%,
        rgba(10, 44, 69, 0.96)
    );
}

/* Floating scroll cue — no text; hidden after first scroll or at scroll end */
.compat-matrix-scroll-chevron {
    position: absolute;
    bottom: 0.4rem;
    left: 50%;
    z-index: 2;
    width: 1.125rem;
    height: 1.125rem;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    color: rgba(228, 233, 242, 0.82);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
    transform: translateX(-50%);
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.compat-matrix-scroll-chevron::before {
    content: "";
    display: block;
    width: 0.42rem;
    height: 0.42rem;
    margin: 0.15rem auto 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.compat-matrix-shell.compat-matrix-shell--scroll-hint:not(.compat-matrix-shell--scroll-dismissed)
    .compat-matrix-body-outer.compat-matrix-body-outer--can-scroll:not(.compat-matrix-body-outer--at-end)
    .compat-matrix-scroll-chevron {
    opacity: 1;
    visibility: visible;
    animation: ec-compat-chevron-bob 2s ease-in-out infinite;
}

@keyframes ec-compat-chevron-bob {
    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(3px);
    }
}

.compat-matrix-shell.compat-matrix-shell--scroll-hint:not(.compat-matrix-shell--scroll-dismissed)
    .compat-matrix-body-outer.compat-matrix-body-outer--can-scroll:not(.compat-matrix-body-outer--at-end)::after {
    animation: ec-compat-scroll-hint-pulse 2.4s ease-in-out 1;
}

@keyframes ec-compat-scroll-hint-pulse {
    0%,
    100% {
        opacity: 0.85;
    }
    50% {
        opacity: 1;
    }
}

.ec-wp-table-scroll-wrap {
    position: relative;
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
}

.ec-wp-table-scroll-wrap .ec-sticky-scroll--wp-table {
    margin-top: 0;
}

.ec-wp-table-pan-hint {
    margin: 0;
    padding: 0.15rem 0.5rem 0.3rem;
    text-align: center;
    font-size: 0.68rem;
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.42);
    font-variant-numeric: tabular-nums;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    user-select: none;
}

.ec-wp-table-pan-hint.ec-wp-table-pan-hint--visible {
    opacity: 1;
}

.ec-wp-table-pan-hint[hidden] {
    display: none;
}

.ec-sticky-scroll--wp-table {
    /* Pinned left columns: measured at runtime. Actions rail: fixed here only (no trailing scroll hacks). */
    --ec-wp-sticky-col0-w: 2.75rem;
    --ec-wp-sticky-col1-w: 10ch;
    --ec-wp-sticky-col1-left: 2.75rem;
    --ec-wp-sticky-actions-w: 3.25rem;
    --ec-wp-leg-col-w: 4.75rem;
    --ec-wp-op-col-w: 5.25rem;
    --ec-wp-table-font-size: 0.78rem;
    --ec-wp-table-line-height: 1.28;
    --ec-wp-cell-pad-x: 5px;
    --ec-wp-row-pad-y-waypoint: 2px;
    --ec-wp-row-pad-y-transition: 1px;
    --ec-wp-head-pad-y: 3px;
    --ec-wp-sticky-body-bg: #0c2f48;
    --ec-wp-sticky-body-hover: #173a54;
    --ec-wp-sticky-head-bg: #145a72;
    /* Opaque interstitial tones (match rgba overlays on the table body) */
    --ec-wp-transition-bg-opaque: #0a283e;
    --ec-wp-transition-bg-hover-opaque: #0f3048;
    --ec-wp-sticky-actions-rail-bg: var(--ec-wp-sticky-body-bg);
    --ec-wp-sticky-actions-rail-hover-bg: var(--ec-wp-sticky-body-hover);
    --ec-wp-sticky-actions-btn-bg: #143d56;
    --ec-wp-sticky-actions-btn-hover-bg: #1a4d6a;
    --ec-wp-sticky-actions-btn-bg-transition: #0f354c;
    /* ~5 waypoint + interstitial pairs visible (viewport balance; was ~7 at 44vh / 30rem) */
    max-height: min(31vh, 21.5rem);
    margin-top: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(10, 44, 69, 0.55);
    overflow: auto;
    box-sizing: border-box;
    scrollbar-gutter: stable;
}

.ec-sticky-scroll--wp-table.ec-wp-table-pannable:not(.ec-wp-table-panning) {
    cursor: grab;
}

.ec-sticky-scroll--wp-table.ec-wp-table-panning {
    cursor: grabbing;
    user-select: none;
}

.ec-sticky-scroll--wp-table.ec-wp-table-pannable .wp-jump {
    cursor: pointer;
}

.ec-sticky-scroll--wp-table.ec-wp-table-pannable .wp-name,
.ec-sticky-scroll--wp-table.ec-wp-table-pannable .wp-lat,
.ec-sticky-scroll--wp-table.ec-wp-table-pannable .wp-lon,
.ec-sticky-scroll--wp-table.ec-wp-table-pannable .wp-op {
    cursor: text;
}
.ec-sticky-scroll--wp-table.ec-wp-table-pannable .wp-row-btn {
    cursor: pointer;
}

.ec-sticky-scroll--wp-table.ec-wp-table-panning .wp-jump,
.ec-sticky-scroll--wp-table.ec-wp-table-panning .wp-name,
.ec-sticky-scroll--wp-table.ec-wp-table-panning .wp-lat,
.ec-sticky-scroll--wp-table.ec-wp-table-panning .wp-lon,
.ec-sticky-scroll--wp-table.ec-wp-table-panning .wp-op,
.ec-sticky-scroll--wp-table.ec-wp-table-panning .wp-actions,
.ec-sticky-scroll--wp-table.ec-wp-table-panning .wp-transition-fill,
.ec-sticky-scroll--wp-table.ec-wp-table-panning .wp-transition-pad,
.ec-sticky-scroll--wp-table.ec-wp-table-panning .wp-leg-metric {
    cursor: grabbing;
}

.compat.ec-sticky-table {
    width: 100%;
    min-width: calc(
        var(--compat-system-col-w) +
            10 * var(--compat-data-col-w) +
            4 * var(--compat-import-only-w) +
            var(--compat-fidelity-col-w)
    );
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    /* Chromium: table overflow:hidden breaks sticky th; keep visible like waypoint table. */
    overflow: visible;
    font-size: 0.8125rem;
    line-height: 1.35;
    background: transparent;
}

.compat col.compat-col-system {
    width: var(--compat-system-col-w);
}

.compat col.compat-col-io {
    width: var(--compat-data-col-w);
}

/* Import-only columns — identical width (CSV, Olex, NACOS, Sperry) */
.compat col.compat-col-import-only {
    width: var(--compat-import-only-w);
}

.compat col.compat-col-fidelity {
    width: var(--compat-fidelity-col-w);
}

/* Fixed header table (non-scrolling layer) */
.compat-matrix-table--head thead th {
    color: #aab4c4;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    padding: 6px 8px;
    vertical-align: bottom;
    background: #152f40;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.compat-matrix-table--head .compat-head-row--primary > th {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.compat-matrix-table--head .compat-head-row--sub > th {
    border-bottom: none;
    box-shadow: none;
}

.compat th,
.compat td {
    padding: 4px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    text-align: center;
    vertical-align: middle;
}

.compat td:first-child,
.compat th.compat-system {
    text-align: left;
    min-width: var(--compat-system-min-w);
    width: var(--compat-system-col-w);
    overflow: hidden;
    text-overflow: ellipsis;
}

.compat th.compat-format-group {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.compat-matrix-table--head .compat-format-group:not(.compat-head-label--stacked) {
    white-space: nowrap;
}

.compat th.compat-format-boundary,
.compat td.compat-format-boundary {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* Import-only — one centred In slot, uniform width */
.compat th.compat-col-import-only,
.compat td.compat-col-import-only,
.compat-head-row--sub th.compat-io-hdr.compat-col-import-only {
    text-align: center;
    width: var(--compat-import-only-w);
    max-width: var(--compat-import-only-w);
}

.compat-matrix-table--head .compat-format-group.compat-col-import-only:not(.compat-head-label--stacked) {
    white-space: nowrap;
}

.compat-head-row--sub th.compat-io-hdr--single {
    text-align: center;
}

/* Deliberate two-line labels — break only at <br>, never inside words */
.compat th.compat-head-label--stacked {
    white-space: normal;
    line-height: 1.22;
    vertical-align: middle;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
    padding: 5px 4px;
}

.compat-head-line {
    display: inline-block;
    white-space: nowrap;
}

.compat-system {
    white-space: nowrap;
}

/* Section headers — body groups + EC Lite reference band (fixed header) */
.compat-matrix-table--body tbody tr.compat-group td,
.compat-matrix-table--head tbody.compat-head-baseline tr.compat-baseline-band td {
    background: rgba(12, 28, 40, 0.98);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    text-align: left;
    padding: 5px 10px;
    border-top: 1px solid rgba(var(--accent-rgb), 0.45);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: #e4e9f2;
}

/* Expedition Captain Lite reference row — fixed header region */
.compat-matrix-table--head tbody.compat-head-baseline tr.compat-row--baseline td {
    background: rgba(20, 90, 114, 0.42);
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.35);
}

.compat-matrix-table--head tbody.compat-head-baseline tr.compat-row--baseline:hover td {
    background: rgba(var(--accent-rgb), 0.16);
}

.compat tbody tr:not(.compat-group):not(.compat-footnote-row):hover {
    background: rgba(var(--accent-rgb), 0.12);
}

.compat tbody tr:not(.compat-group):not(.compat-footnote-row):hover td {
    background: rgba(var(--accent-rgb), 0.12);
}

.compat-head-row--primary th[rowspan="2"] {
    vertical-align: middle;
}

.compat-head-row--sub th.compat-io-hdr {
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    padding: 2px 4px;
    box-shadow: none;
}

.compat-head-row--sub th.compat-io-hdr--placeholder {
    text-transform: none;
    color: transparent;
    background: #152f40;
}

.compat td.compat-io-slot--empty {
    background: rgba(10, 44, 69, 0.35);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.compat th.compat-fidelity-col {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.compat td.compat-cell {
    text-align: center;
    vertical-align: middle;
}

.compat td.compat-cell[data-ec-tip] {
    cursor: help;
}

.compat td.compat-io-in,
.compat td.compat-io-out {
    width: var(--compat-data-col-w);
    max-width: var(--compat-data-col-w);
    font-size: 0.8rem;
}

.compat th.compat-fidelity-col,
.compat td.compat-fidelity-col {
    width: var(--compat-fidelity-col-w);
    max-width: var(--compat-fidelity-col-w);
    text-align: center;
}

.compat td.compat-fidelity-col {
    font-weight: 600;
}

.compat td.compat-io-in.compat-col-import-only {
    text-align: center;
}

.compat-system[data-ec-tip] {
    cursor: help;
}

/* Symbol cells — compact, aligned */
.compat td.cY,
.compat td.cN,
.compat td.cP,
.compat td.cU,
.compat td.cNA {
    font-size: 0.85rem;
    line-height: 1;
}

.cY { color: #4caf50; font-weight: 600; }
.cN { color: #e57373; font-weight: 600; }
.cP { color: #ffd54f; font-weight: 600; }
.cU { color: rgba(255, 255, 255, 0.55); font-weight: 600; }
.cNA { color: rgba(255, 255, 255, 0.32); font-weight: 500; }

.compat-footnote-row td {
    position: static;
    padding: 10px 10px;
    background: rgba(10, 44, 69, 0.85);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
    overflow: visible;
}

.compat-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.38rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 6px;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.compat-legend-item {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    flex: 0 0 auto;
    max-width: 100%;
}

.compat-legend-sym {
    display: inline-block;
    flex-shrink: 0;
    min-width: 0.75rem;
    margin-right: 0.12rem;
    text-align: center;
}

/* Separators hidden; flex gap provides even rhythm (avoids orphaned dots on wrap) */
.compat-legend-sep {
    display: none;
}

.compat-note-text {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-muted);
}

/* Slightly tighter legend rhythm when the matrix card is narrow */
@media (max-width: 720px) {
    .compat-legend {
        gap: 0.22rem 0.32rem;
        font-size: 0.6875rem;
    }
}

@media (max-width: 600px) {
    .tab-content--scroll-panel.active {
        max-height: calc(100dvh - var(--ec-tab-chrome-offset) - 0.5rem);
    }

    .compat thead th {
        font-size: 0.7rem;
        padding: 5px 4px;
    }

    .compat th,
    .compat td {
        padding: 3px 4px;
    }
}

/* ============================= */
/* ABOUT SECTION                 */
/* ============================= */

.edition-badge{
    font-size:.65em;
    font-weight:600;
    letter-spacing:.8px;

    padding:3px 8px;
    margin-left:8px;

    border-radius:4px;

    background:rgba(var(--accent-rgb),.18);
    color:var(--accent-light);

    border:1px solid var(--accent);
}

.about-card{
    max-width:960px;
    margin:30px auto;
    padding:38px 44px;

    background:var(--bg-card);
    border:1px solid var(--border-main);
    border-radius:12px;

    box-shadow:0 4px 20px rgba(0,0,0,.25);

    /* iOS Safari: suppress heuristic text inflation on long prose blocks (e.g. “Future direction”) so About typography matches authored rem sizes */
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

/* Title */

.about-title{
    font-size:30px;
    letter-spacing:.5px;
    margin:0;
    color:var(--text-main);
}

/* Accent underline */

.about-title::after{
    content:"";
    display:block;
    width:60px;
    height:3px;
    background:var(--accent);
    margin-top:14px;
}

/* Tagline */

.about-tagline{
    color:var(--text-muted);
    margin:18px 0 16px;
    font-size:14px;
    line-height:1.55;
    max-width:42em;
}

/* Version */

.about-version{
    margin:0;
    color:var(--text-dim);
    font-size:13px;
}

.about-version strong{
    font-size:15px;
    color:var(--accent-light);
    margin-left:6px;
    font-weight:600;
}

/* Separator */

.about-card hr,
.about-divider{
    border:none;
    height:1px;

    background:linear-gradient(
        to right,
        transparent,
        var(--accent),
        transparent
    );

    margin:32px 0;
    opacity:.55;
}

.about-divider--footer{
    margin-top:28px;
    margin-bottom:24px;
}

/* Single-column body */

.about-body{
    display:flex;
    flex-direction:column;
    gap:1.75rem;
}

/* Section blocks */

.about-block{
    margin:0;
}

.about-block h3{
    margin:0 0 10px;
    font-size:15px;
    letter-spacing:.4px;
    color:var(--accent-light);
}

/* Feature lists */

.about-block ul{
    margin:0;
    padding-left:18px;
    color:var(--text-muted);
    line-height:1.7;
    font-size:13.5px;
    max-width:52em;
}

/* Hover polish */

.about-block li{
    transition:.15s ease;
}

.about-block li:hover{
    color:var(--text-main);
}

.about-block li + li{
    margin-top:0.35em;
}

.about-prose{
    margin:0;
    color:var(--text-muted);
    font-size:13.5px;
    line-height:1.65;
    max-width:52em;
}

/* Footer */

.about-footer{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-top:10px;
    color:var(--accent-light);
    text-decoration:none;
    font-size:13px;
}

.about-footer a:hover{
    text-decoration:underline;
}

.about-note{
    max-width:350px;
    text-align:right;
    color:var(--text-dim);
}

.about-note-line{
    display:block;
}

.about-note-line + .about-note-line{
    margin-top:5px;
}

.about-doc-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}

.about-doc-btn{
    font-family:inherit;
    font-size:13px;
    font-weight:500;
    padding:8px 16px;
    border-radius:6px;
    border:1px solid rgba(var(--accent-rgb),.45);
    background:rgba(10,44,69,.55);
    color:var(--text-main);
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease;
}

.about-doc-btn:hover{
    background:rgba(var(--accent-rgb),.14);
    border-color:rgba(var(--accent-rgb),.65);
}

.doc-viewer-modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    z-index:10050;
    padding:16px;
}

.ec-shortcut-ref-modal__panel{
    width:min(820px,96vw);
    max-height:min(88vh,920px);
}

.ec-shortcut-ref-modal__body{
    padding:12px 16px 8px;
    overflow:auto;
    scrollbar-gutter: stable;
}

.ec-shortcut-ref-article{
    font-size:13px;
    line-height:1.45;
    color:var(--text-main,#e8ecf2);
}

.ec-shortcut-ref-section{
    margin:0 0 1.1rem;
}

.ec-shortcut-ref-section h4{
    margin:0 0 .45rem;
    font-size:12px;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:rgba(var(--accent-rgb),.95);
}

.ec-shortcut-ref-table{
    width:100%;
    border-collapse:collapse;
    font-size:12.5px;
}

.ec-shortcut-ref-table th,
.ec-shortcut-ref-table td{
    border:1px solid var(--border-main);
    padding:.4rem .55rem;
    vertical-align:top;
    text-align:left;
}

.ec-shortcut-ref-table th{
    background:rgba(255,255,255,.06);
    font-weight:600;
}

.ec-shortcut-ref-table td:first-child{
    white-space:nowrap;
    font-family:ui-monospace,Menlo,Consolas,monospace;
    font-size:11.5px;
}

.ec-shortcut-ref-modal__foot{
    flex-shrink:0;
    margin:0;
    padding:8px 16px 12px;
    border-top:1px solid var(--border-main);
    font-size:11.5px;
    color:var(--text-muted,#9aa3b5);
}

.ec-shortcut-ref-modal__foot kbd{
    font-family:ui-monospace,Menlo,Consolas,monospace;
    font-size:10.5px;
    padding:.1em .35em;
    border-radius:3px;
    border:1px solid var(--border-main);
    background:rgba(255,255,255,.08);
}

@media print{
    .ec-shortcut-ref-modal__backdrop,
    .doc-viewer-modal__head,
    .ec-shortcut-ref-modal__foot{
        display:none !important;
    }
    .ec-shortcut-ref-modal,
    .ec-shortcut-ref-modal__panel{
        position:static !important;
        display:block !important;
        width:100% !important;
        max-height:none !important;
        box-shadow:none !important;
        border:none !important;
        background:#fff !important;
    }
    .ec-shortcut-ref-article,
    .ec-shortcut-ref-table th,
    .ec-shortcut-ref-table td{
        color:#111 !important;
    }
    .ec-shortcut-ref-table th,
    .ec-shortcut-ref-table td{
        border-color:#999 !important;
    }
}

.doc-viewer-modal.rich-warning-modal{
    z-index:10051;
}

.rich-warning-modal__panel{
    max-width:min(520px,96vw);
}

.rich-warning-modal__body{
    font-family:system-ui,-apple-system,Segoe UI,sans-serif;
    font-size:13.5px;
    line-height:1.55;
    color:#d5d9e8;
}

.rich-warning-modal__body .rich-warning-modal__p{
    margin:0 0 10px;
}

.rich-warning-modal__body .rich-warning-modal__p:last-child{
    margin-bottom:0;
}

.rich-warning-modal__actions{
    flex-shrink:0;
    display:flex;
    justify-content:flex-end;
    gap:10px;
    padding:12px 18px 16px;
    border-top:1px solid var(--border-main);
}

.rich-warning-modal__btn{
    font-family:inherit;
    font-size:14px;
    font-weight:500;
    padding:10px 20px;
    border-radius:6px;
    border:1px solid rgba(var(--accent-rgb),.45);
    background:rgba(var(--accent-rgb),.16);
    color:#f0f3fa;
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease;
}

.rich-warning-modal__btn:hover{
    background:rgba(var(--accent-rgb),.26);
    border-color:rgba(var(--accent-rgb),.6);
}

.rich-warning-modal__btn--secondary{
    border-color:var(--border-main);
    background:rgba(255,255,255,.06);
    color:var(--text-main, #e8ecf2);
}

.rich-warning-modal__btn--secondary:hover{
    background:rgba(255,255,255,.1);
    border-color:rgba(255,255,255,.2);
}

.rich-warning-modal__btn--primary{
    border-color:rgba(var(--accent-rgb),.55);
    background:rgba(var(--accent-rgb),.28);
    color:#fff;
}

.rich-warning-modal__btn--primary:hover{
    background:rgba(var(--accent-rgb),.38);
    border-color:rgba(var(--accent-rgb),.72);
}

.doc-viewer-modal__backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.65);
}

.doc-viewer-modal__panel{
    position:relative;
    width:min(720px,96vw);
    max-height:min(82vh,900px);
    display:flex;
    flex-direction:column;
    background:linear-gradient(180deg,rgba(10,44,69,.98),rgba(6,40,62,.98));
    border:1px solid rgba(var(--accent-rgb),.4);
    border-radius:10px;
    box-shadow:0 12px 40px rgba(0,0,0,.55);
    z-index:1;
}

.doc-viewer-modal__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 16px;
    border-bottom:1px solid var(--border-main);
    flex-shrink:0;
}

.doc-viewer-modal__title{
    margin:0;
    font-size:1.05em;
    color:var(--text-main);
    font-weight:600;
    min-width:0;
    flex:1;
}

.doc-viewer-modal__toolbar{
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
}

.doc-viewer-modal__handbook-btn{
    font-family:inherit;
    font-size:12.5px;
    font-weight:600;
    padding:8px 14px;
    border-radius:6px;
    border:1px solid rgba(var(--accent-rgb),.55);
    background:rgba(var(--accent-rgb),.22);
    color:#f5f7fc;
    cursor:pointer;
    white-space:nowrap;
}

.doc-viewer-modal__handbook-btn:hover:not(:disabled){
    background:rgba(var(--accent-rgb),.32);
    border-color:rgba(var(--accent-rgb),.72);
}

.doc-viewer-modal__handbook-btn:disabled{
    opacity:.65;
    cursor:wait;
}

.doc-viewer-modal__close{
    flex-shrink:0;
    width:36px;
    height:36px;
    border:none;
    border-radius:6px;
    background:transparent;
    color:var(--text-muted);
    font-size:22px;
    line-height:1;
    cursor:pointer;
}

.doc-viewer-modal__close:hover{
    color:var(--text-main);
    background:rgba(var(--accent-rgb),.2);
}

.doc-viewer-modal__body{
    margin:0;
    padding:16px 18px;
    overflow:auto;
    scrollbar-gutter: stable;
    flex:1;
    min-height:0;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:12px;
    line-height:1.45;
    color:#d5d9e8;
    word-break:break-word;
}

/* Documentation / licence modal: GitHub-adjacent prose (scoped only to doc viewer body) */
#docViewerBody.doc-viewer-modal__body{
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
    font-size:13px;
    line-height:1.55;
    color:#d8dce8;
}

#docViewerBody .documentation-content{
    max-width:min(72ch,100%);
    margin:0 auto;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

#docViewerBody .documentation-content--fallback pre{
    margin:0;
    font-family:inherit;
    font-size:12px;
    line-height:1.45;
    white-space:pre-wrap;
    word-break:break-word;
}

#docViewerBody .documentation-content :first-child{
    margin-top:0;
}

#docViewerBody .documentation-content :last-child{
    margin-bottom:0;
}

#docViewerBody .documentation-content h1,
#docViewerBody .documentation-content h2,
#docViewerBody .documentation-content h3,
#docViewerBody .documentation-content h4{
    font-weight:600;
    line-height:1.28;
    color:#f2f4fa;
    letter-spacing:.01em;
}

#docViewerBody .documentation-content h1{
    font-size:1.25em;
    margin:1.1em 0 .45em;
    padding-bottom:.35em;
    border-bottom:1px solid rgba(255,255,255,.12);
}

#docViewerBody .documentation-content h2{
    font-size:1.08em;
    margin:1.05em 0 .4em;
}

#docViewerBody .documentation-content h3{
    font-size:1.02em;
    margin:.95em 0 .35em;
    color:#e9ecf4;
}

#docViewerBody .documentation-content h4{
    font-size:.98em;
    margin:.85em 0 .3em;
    color:#dfe3ee;
}

#docViewerBody .documentation-content p{
    margin:0 0 .72em;
}

#docViewerBody .documentation-content ul,
#docViewerBody .documentation-content ol{
    margin:0 0 .85em;
    padding-left:1.35em;
}

#docViewerBody .documentation-content li{
    margin:.28em 0;
}

#docViewerBody .documentation-content li > p{
    margin:0 0 .4em;
}

#docViewerBody .documentation-content blockquote{
    margin:.65em 0 .85em;
    padding:.35em .85em .35em 1em;
    border-left:3px solid rgba(var(--accent-rgb),.45);
    background:rgba(0,0,0,.18);
    color:#ccd1df;
}

#docViewerBody .documentation-content hr{
    border:none;
    border-top:1px solid rgba(255,255,255,.14);
    margin:1em 0;
}

#docViewerBody .documentation-content a{
    color:#c4a574;
    text-decoration:underline;
    text-decoration-color:rgba(196,165,116,.45);
    text-underline-offset:2px;
}

#docViewerBody .documentation-content a:hover{
    color:#dcc598;
    text-decoration-color:rgba(220,197,152,.65);
}

#docViewerBody .documentation-content code{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:.92em;
    padding:.12em .38em;
    border-radius:4px;
    background:rgba(0,0,0,.35);
    border:1px solid rgba(255,255,255,.08);
    color:#e8ecf2;
}

#docViewerBody .documentation-content pre{
    margin:.65em 0 .85em;
    padding:10px 12px;
    overflow:auto;
    max-width:100%;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:11.5px;
    line-height:1.45;
    border-radius:6px;
    background:rgba(0,0,0,.4);
    border:1px solid rgba(255,255,255,.1);
}

#docViewerBody .documentation-content pre code{
    font-size:1em;
    padding:0;
    border:none;
    background:transparent;
}

#docViewerBody .documentation-content table{
    border-collapse:collapse;
    table-layout:auto;
    width:max-content;
    max-width:100%;
    margin:.65em 0 .95em;
    font-size:.97em;
    word-break:normal;
    overflow-wrap:break-word;
}

#docViewerBody .documentation-content th,
#docViewerBody .documentation-content td{
    border:1px solid rgba(255,255,255,.14);
    padding:.45em .65em;
    vertical-align:top;
    text-align:left;
    word-break:normal;
    overflow-wrap:break-word;
}

#docViewerBody .documentation-content th:first-child,
#docViewerBody .documentation-content td:first-child{
    min-width:12.5em;
    box-sizing:border-box;
}

#docViewerBody .documentation-content thead th{
    white-space:nowrap;
}

#docViewerBody .documentation-content tbody td:first-child{
    white-space:nowrap;
}

#docViewerBody .ec-operator-guide-shortcuts {
    margin: 0.5rem 0 1rem;
}

#docViewerBody .ec-operator-guide-shortcuts h4 {
    margin: 0.85rem 0 0.35rem;
    font-size: 0.95em;
    font-weight: 600;
    color: rgba(var(--accent-rgb), 0.95);
}

#docViewerBody .ec-operator-guide-shortcuts-table {
    width: 100%;
    max-width: 100%;
    table-layout: auto;
    font-size: 0.92em;
    margin: 0 0 0.55rem;
}

#docViewerBody .ec-operator-guide-shortcuts-table td:first-child {
    min-width: 9rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88em;
}

#docViewerBody .documentation-content th{
    font-weight:600;
    background:rgba(var(--accent-rgb),.12);
    color:#eef1f8;
}

#docViewerBody .documentation-content tbody tr:nth-child(even){
    background:rgba(255,255,255,.03);
}

.author-label{
    color:var(--text-main);   /* white */
    margin-right:4px;
}

.author-link{
    color:var(--text-muted);  /* same colour as surrounding text */
    text-decoration:none;
    cursor:pointer;
}

.author-link:hover{
    color:var(--text-main);
}

/* ============================= */
/* ABOUT HEADER (logo + title)   */
/* ============================= */

.about-header{
    display:flex;
    align-items:flex-start;
    gap:28px;
    margin-bottom:0;
}

.about-logo{
    height: 140px;
    width:auto;
    flex-shrink:0;
}

.about-header-text{
    display:flex;
    flex-direction:column;
    padding-top:4px;
}

@media (max-width:720px){
    .about-card{
        padding:28px 22px;
    }

    .about-header{
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:18px;
    }

    .about-header-text{
        align-items:center;
        padding-top:0;
    }

    .about-tagline{
        max-width:none;
    }

    .about-title::after{
        margin-left:auto;
        margin-right:auto;
    }
}

/* ============================= */
/* FOOTER                       */
/* ============================= */

.footer {
    text-align: center;
    padding: 12px 10px;
    font-size: 12px;
    color: #888;
    border-top: 1px solid var(--border-main);
    margin-top: 10px;
    margin-left: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.footer-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0;
    row-gap: 4px;
}

.footer-row--primary{
    column-gap:.5em;
    row-gap:6px;
}

.footer-tagline{
    flex:0 1 auto;
}

.footer-sep {
    color: #666;
    user-select: none;
}

.footer-sep--muted{
    display:inline-block;
    margin:0 .2em;
    color:#5c6478;
    font-weight:300;
}

.footer-version{
    display:inline-flex;
    align-items:baseline;
    gap:.35em;
    margin-left:.15em;
    padding:.08em 0 .08em .1em;
    color:#999;
}

.footer-version-label{
    letter-spacing:.02em;
}

.footer-row--secondary{
    margin-top:2px;
    column-gap:.4em;
}

.footer-copy{
    color:#8c93a3;
}

.footer-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.footer-link:hover {
    text-decoration: underline;
}

.footer-link.footer-link--name{
    color:#ad3d46;
    font-weight:500;
    text-decoration:none;
    text-underline-offset:2px;
}

.footer-link.footer-link--name:hover{
    color:#8f2029;
    text-decoration:underline;
    text-decoration-color:rgba(143,32,41,.55);
}

.footer-link.footer-link--name:focus-visible{
    color:#8f2029;
    text-decoration:underline;
    text-decoration-color:rgba(143,32,41,.45);
    outline:1px solid rgba(176,48,56,.5);
    outline-offset:2px;
}

/* ===== Expedition Captain background system ===== */

/* ===== translucent UI panels ===== */

.header,
.tab-nav{
    background: rgba(10, 44, 69, 0.48);
    backdrop-filter: blur(6px);
}

/* Integrated header + tabs on wide viewports (revert: remove wrapper + this block). */
@media (min-width: 900px) {
    .app-top-bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        column-gap: 12px;
        row-gap: 8px;
        border-bottom: 2px solid var(--accent);
        box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.25);
        background: rgba(10, 44, 69, 0.48);
        backdrop-filter: blur(6px);
    }

    html.ec-wco-active .app-top-bar {
        background: var(--ec-chrome-solid);
        backdrop-filter: none;
    }

    /* Operational pair left — narrower cluster reduces medium-width wrap pressure. */
    .app-top-bar .tab-nav--primary {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        align-self: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
        row-gap: 2px;
        padding: 0 8px 0 22px;
        border-bottom: none;
        box-shadow: none;
        background: transparent;
        backdrop-filter: none;
        min-width: 0;
    }

    .app-top-bar .tab-nav--about {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        align-self: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
        row-gap: 2px;
        padding: 0 22px 0 8px;
        border-bottom: none;
        box-shadow: none;
        background: transparent;
        backdrop-filter: none;
        min-width: 0;
    }

    /* Branding centred in the band; symmetric side columns keep the anchor visually primary. */
    .app-top-bar .header {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        align-self: center;
        justify-content: center;
        padding: 14px 20px;
        border-bottom: none;
        box-shadow: none;
        background: transparent;
        backdrop-filter: none;
        min-width: 0;
    }

    .app-top-bar .tab-btn {
        padding: 12px 18px;
    }

    .app-top-bar .header-text {
        text-align: center;
    }
}

:root{
    /* Full-strength atmospheric stack (wash is tuned in gradients, not by crushing opacity). */
    --bg-opacity: 1;
    --bg-darkness: 0.02;
}

body {
    position: relative;
    overflow-x: hidden;
}

body::before {
    content:"";
    position: fixed;
    inset:0;

    /* Same recipe as marketing `body`: maritime teal wash + chart, with polar glow from `.hero::after`. */
    background:
        radial-gradient(
            circle at 32% 36%,
            rgba(255, 255, 255, 0.14) 0%,
            rgba(255, 255, 255, 0.08) 20%,
            rgba(255, 255, 255, 0.04) 40%,
            rgba(255, 255, 255, 0.015) 58%,
            rgba(255, 255, 255, 0) 74%
        ),
        linear-gradient(
            rgba(10, 44, 69, 0.75),
            rgba(10, 44, 69, 0.90)
        ),
        var(--hero-bg-url, url("/img/hero/hero-chart-baffin.webp")) center center / cover no-repeat fixed;

    opacity:var(--bg-opacity);

    pointer-events:none;
    z-index:-1;
}

/* Standalone PWA: fixed attachment + backdrop-filter break hero compositing in Chromium. */
@media (display-mode: standalone), (display-mode: window-controls-overlay) {
    body::before {
        background-attachment: scroll;
        filter: brightness(var(--ui-brightness));
    }

    #appRoot::before {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

@media (display-mode: standalone) {
    html.ec-wco-active body {
        background-color: transparent;
    }
}

body::after {
    content: "";
    position: fixed;
    inset: 0;

    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(130, 200, 220, 0.014) 0px,
            rgba(130, 200, 220, 0.014) 1px,
            transparent 1px,
            transparent 2px
        );

    opacity: 0.2;
    pointer-events: none;
    z-index: -1;
}

/* Coordinate Error in Table */

.coord-error{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

.coord-error-box{
    background:#0a2234;
    border:1px solid var(--accent);
    border-radius:8px;
    padding:24px 28px;
    text-align:center;
    box-shadow:0 0 20px rgba(0,0,0,.6);
    font-family:system-ui;
}

.coord-error-title{
    font-size:18px;
    color:#e94560;
    margin-bottom:10px;
}

.coord-error-msg{
    color:#ddd;
    font-size:14px;
    margin-bottom:16px;
}

.coord-error button{
    background:var(--accent);
    border:none;
    padding:8px 16px;
    color:white;
    border-radius:5px;
    cursor:pointer;
}

/* ============================= */
/* LOADING OVERLAY              */
/* ============================= */

#loadingOverlay {
    position: fixed;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    background: rgba(6, 32, 52, 0.62);

    z-index: 9999999999;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#loadingOverlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/* content (namespaced to avoid layout collisions) */
#loadingOverlay .ld-card {
    width: min(560px, 92vw);
    padding: 20px 22px;
    border: 1px solid rgba(var(--accent-rgb),.45);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(10,44,69,.94), rgba(6,40,62,.94));
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.22), 0 14px 40px rgba(0,0,0,.45);
}

#loadingOverlay .ld-title {
    color: #fff;
    font-weight: 700;
    letter-spacing: .2px;
    margin-bottom: 6px;
}

#loadingOverlay .ld-status {
    color: #d5d9e8;
    margin-bottom: 12px;
}

#loadingOverlay .ld-bar {
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(var(--accent-rgb),.15);
    border: 1px solid rgba(var(--accent-rgb),.35);
    margin-bottom: 10px;
}

#loadingOverlay .ld-bar-fill {
    width: 40%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(var(--accent-rgb),.15), rgba(var(--accent-rgb),.55), rgba(var(--accent-rgb),.15));
    animation: ldSweep 1.2s ease-in-out infinite;
}

@keyframes ldSweep {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(260%); }
}

#loadingOverlay .ld-meta {
    display: flex;
    justify-content: flex-end;
    font-size: .9rem;
    color: #9aa4be;
}

.wp-delete-menu{
    /* Menu icons: tweak here to revert/change style quickly */
    --wp-icon-insert-before: "↖ ";
    --wp-icon-insert-after: "↘ ";
    --wp-icon-delete: "✖ ";

    position: absolute;
    display: none;

    background: #282d40;           /* fully opaque */
    border: 1px solid var(--accent);
    border-left: 3px solid var(--accent);

    border-radius: 6px;

    padding: 4px 0;
    min-width: 210px;
    font-size: 13px;
    cursor: default;

    color: #fff;

    box-shadow: 0 6px 14px rgba(0,0,0,.55);

    z-index: 999999;

    user-select: none;
}

.wp-delete-menu:hover{
    background: #282d40;
}

.wp-delete-menu::before{
    content: "";
}

.wp-delete-menu .wp-menu-item{
    padding: 6px 10px;
    cursor: pointer;
    white-space: nowrap;
}

.wp-delete-menu .wp-menu-item:hover{
    background: #3a415c;
}

.wp-delete-menu .wp-menu-item[data-action="insert-before"]::before{
    content: var(--wp-icon-insert-before);
}

.wp-delete-menu .wp-menu-item[data-action="insert-after"]::before{
    content: var(--wp-icon-insert-after);
}

.wp-delete-menu .wp-menu-item.danger::before{
    content: var(--wp-icon-delete);
}

.wp-op-context-menu{
    position: fixed;
    min-width: 240px;
    z-index: 1000000;
}

.wp-op-context-menu .wp-menu-item[data-action="propagate-end"]::before{
    content: "↓ ";
}

.wp-op-context-menu .wp-menu-item[data-action="propagate-next5"]::before{
    content: "⇣ ";
}

.wp-op-context-menu .wp-menu-item[data-action="propagate-start"]::before{
    content: "↑ ";
}

.wp-op-context-menu .wp-menu-item[data-action="propagate-prev5"]::before{
    content: "⇡ ";
}

.wp-op-context-menu .wp-menu-sep{
    height: 1px;
    margin: 6px 10px;
    background: var(--border-main);
    pointer-events: none;
}

.wp-op-context-menu .wp-menu-group--has-sub{
    position: relative;
}

.wp-op-context-menu .wp-menu-parent{
    cursor: default;
    justify-content: space-between;
}

.wp-op-context-menu .wp-menu-chevron{
    opacity: 0.65;
    font-size: 14px;
    line-height: 1;
    margin-left: 8px;
}

.wp-op-context-menu .wp-menu-sub{
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 240px;
    margin-left: 2px;
    padding: 4px 0;
    background: #282d40;
    border: 1px solid var(--border-main);
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    z-index: 1;
}

.wp-op-context-menu .wp-menu-group--has-sub:hover > .wp-menu-sub,
.wp-op-context-menu .wp-menu-group--has-sub:focus-within > .wp-menu-sub,
.wp-op-context-menu .wp-menu-group--has-sub.wp-menu-group--sub-open > .wp-menu-sub{
    display: block;
}

.wp-op-context-menu .wp-menu-sub .wp-menu-item{
    padding: 6px 10px;
    cursor: pointer;
    white-space: nowrap;
}

.wp-op-context-menu .wp-menu-sub .wp-menu-item:hover{
    background: #3a415c;
}

th.wp-op-head[data-col="portXtd"],
th.wp-op-head[data-col="stbdXtd"],
th.wp-op-head[data-col="radius"]{
    cursor: pointer;
}

/* Corridor drag-selection: same amber cue as wp-cell-selected, not edit-mode styling */
td.wp-op.wp-xtd-corridor-selected:not(:has(.wp-op-input)):not([contenteditable="true"]){
    outline: 1px solid rgba(212, 168, 75, 0.75);
    outline-offset: -1px;
    box-shadow: inset 0 0 0 1px rgba(212, 168, 75, 0.28);
    background-color: rgba(212, 168, 75, 0.07);
}

#cPrevB td.wp-lat.wp-coord-pair-selected,
#cPrevB td.wp-lon.wp-coord-pair-selected{
    background: rgba(var(--accent-rgb), 0.1);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.38);
}

.route-nav-ins-readout--coord-pair-active {
    background: rgba(var(--accent-rgb), 0.08);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.35);
    border-radius: 3px;
}

.route-nav-ins-val--pair-active {
    background: rgba(var(--accent-rgb), 0.06);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.28);
}

.route-nav-ins-val--tactical[readonly] {
    cursor: default;
    opacity: 0.72;
}

.route-nav-ins-col.ec-ins-state--fixed .route-nav-ins-val--tactical[readonly],
.route-nav-ins-col.ec-ins-state--live .route-nav-ins-val--tactical[readonly] {
    cursor: text;
    opacity: 1;
}

#cPrevB td.wp-op.wp-radius.wp-radius-geometry-limited{
    font-variant-numeric: tabular-nums;
}

#cPrevB td.wp-op.wp-radius,
#cPrevB td.wp-op.wp-port-xtd,
#cPrevB td.wp-op.wp-stbd-xtd,
#cPrevB td.wp-op.wp-speed{
    user-select: none;
}

#cPrevB td.wp-op.wp-radius.wp-xtd-corridor-selected,
#cPrevB td.wp-op.wp-port-xtd.wp-xtd-corridor-selected,
#cPrevB td.wp-op.wp-stbd-xtd.wp-xtd-corridor-selected,
#cPrevB td.wp-op.wp-speed.wp-xtd-corridor-selected{
    cursor: cell;
}

#toastContainer {
    position: fixed !important;

    top: 50% !important;
    right: 20px !important;

    transform: translateY(-50%) !important;

    display: flex;
    flex-direction: column;
    gap: 12px;

    z-index: 2147483647;   /* 🔥 max z-index */
    pointer-events: none;
}

.toast{
    background: var(--bg-main);
    color: #e8ecf4;

    border-left: 4px solid #7a8daf;

    padding: 12px 16px;
    border-radius: 7px;

    box-shadow: 0 6px 18px rgba(0,0,0,0.45);

    font-family: inherit;
    font-size: 14px;

    min-width: 260px;
    max-width: 360px;

    opacity: 0;
    transform: translateX(60px);
    transition: all .28s ease;

    position: relative;
}

.toast.toast--info{
    border-left-color: #7a8daf;
}
.toast.toast--info .toast-progress{
    background: #7a8daf;
}

.toast.toast--success{
    border-left-color: #4ecca3;
}
.toast.toast--success .toast-progress{
    background: #4ecca3;
}

.toast.toast--warning{
    border-left-color: #f0a500;
}
.toast.toast--warning .toast-progress{
    background: #f0a500;
}

.toast.toast--error{
    border-left-color: var(--accent);
}
.toast.toast--error .toast-progress{
    background: var(--accent);
}

.toast.show{
    opacity: 1;
    transform: translateX(-18px);
}

.toast-title{
    font-weight: 600;
    margin-bottom: 4px;
}

.toast-list{
    line-height: 1.4;
    color: #c9cfdb;
}

.toast-progress{
    position:absolute;
    left:0;
    bottom:0;
    height:3px;
    width:100%;
    background:#7a8daf;
    transform-origin:left;
    transform:scaleX(1);
    transition:transform linear;
}