:root{color-scheme:dark;--bg:#090f18;--panel:#111c29;--edge:#24364a;--muted:#8b9eb3;--cyan:#6ee7df}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#e6edf6;font:14px system-ui,sans-serif}header{height:74px;border-bottom:1px solid var(--edge);padding:0 30px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:16px;align-items:center;color:var(--cyan);font-size:22px}.brand span{font-size:13px;letter-spacing:3px}.brand b{font-size:14px;color:#e6edf6;border-left:1px solid var(--edge);padding-left:20px;letter-spacing:2px}.pill,.status{font-size:10px;letter-spacing:1.4px;padding:7px 12px;border:1px solid var(--edge);border-radius:5px}.status{color:var(--cyan);margin-left:12px}main{max-width:1700px;margin:auto;padding:26px 30px;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px}small{font-size:10px;letter-spacing:1.4px;color:var(--muted)}h1{font-size:25px;font-weight:500;margin:8px 0 20px}h2{font-size:20px;margin:5px 0}.maphead,.split,.target,.sectiontitle{display:flex;justify-content:space-between;align-items:center}.tabs{display:flex;gap:5px}button{font:inherit;border:1px solid #31475e;background:#192a3c;color:#c4d4e5;border-radius:5px;padding:10px 14px;cursor:pointer}button:hover{border-color:var(--cyan)}button.active,.primary{background:#244947;color:var(--cyan);border-color:#3c7570}button:disabled{opacity:.35;cursor:not-allowed}.map{height:470px;position:relative;background:#091622;border:1px solid var(--edge);border-radius:8px;overflow:hidden}canvas{width:100%;height:100%}.maptag{position:absolute;top:20px;left:20px;display:grid;gap:7px;letter-spacing:2px;font-size:11px}.bearing{position:absolute;top:18px;left:49%;text-align:center;color:var(--cyan)}.mapbottom{position:absolute;bottom:16px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1px;color:var(--muted)}.mapbottom label{display:flex;align-items:center;gap:12px}.mapbottom input{width:120px}.target{padding:20px 0;gap:16px}.target strong{display:block;font-size:21px;font-weight:500;margin-top:6px}.muted{color:var(--muted);font-size:12px}.panel{background:var(--panel);border:1px solid var(--edge);border-radius:8px;padding:20px;margin-bottom:16px}.sectiontitle{font-size:11px;letter-spacing:1.5px;margin-bottom:22px}.sectiontitle span{font-size:9px;color:var(--muted)}.route .tabs{margin-bottom:18px}.fields{display:flex;gap:12px;margin-bottom:16px}.fields label{flex:1;display:grid;gap:8px;font-size:11px;color:var(--muted)}input,select{accent-color:var(--cyan)}input[type=number],select{width:100%;background:#091522;border:1px solid #31475e;border-radius:4px;padding:11px;color:#e6edf6;font:inherit}#routeNote{margin-left:12px}.coursevalue{font-size:54px;font-weight:300;letter-spacing:2px;margin:4px 0 15px}.coursevalue em{font-size:30px;color:var(--cyan)}#steer{width:100%;margin:18px 0}.detail{font-size:11px;margin-bottom:10px}.detail b{color:#d4e4ed}.engines{display:flex;justify-content:space-around;margin-bottom:26px}.engine{display:flex;align-items:center;flex-direction:column;gap:12px}.engine strong{font-size:30px;font-weight:400;font-variant-numeric:tabular-nums}.engine em{font-size:15px;font-style:normal;color:var(--muted)}.vertical{writing-mode:vertical-lr;direction:rtl;width:40px;height:150px}progress{width:100%;height:6px;margin:12px 0 20px;accent-color:var(--cyan)}.actions{display:flex;gap:10px}.actions button{flex:1;padding:10px 6px}p{font-size:11px;line-height:1.6;color:var(--muted);margin-bottom:0}.stop{width:100%;margin:12px 0;color:#ffc398;background:#40291f;border-color:#79513b;letter-spacing:2px}.reverse{display:flex;gap:7px;align-items:center;font-size:12px}.reverse span{margin-left:auto;color:var(--muted);font-size:10px}footer{padding:14px 30px;border-top:1px solid var(--edge);display:flex;justify-content:space-between;color:var(--muted);font-size:10px;letter-spacing:1px}#blank{position:absolute;inset:0;background:#091622;place-content:center;text-align:center;color:#ffbe83;font-size:18px}#blank:not([hidden]){display:grid}[hidden]{display:none!important}@media(max-width:1050px){main{grid-template-columns:1fr}aside{display:grid;grid-template-columns:1fr 1fr;gap:16px}.map{height:430px}}@media(max-width:650px){main{padding:16px}aside{display:block}.maphead,.target{flex-wrap:wrap}header{padding:12px}.brand b,.pill{display:none}.fields{flex-wrap:wrap}footer{gap:12px}.target strong{font-size:16px}}

/* Reviewed three-column helm layout */
main{max-width:1900px;grid-template-columns:250px minmax(420px,1fr) 300px;grid-template-rows:auto auto;align-items:stretch;gap:20px}.workspace{grid-column:2;grid-row:1;min-width:0}.propulsion{grid-column:1;grid-row:1 / 3;margin:0;display:flex;flex-direction:column}.route{grid-column:3;grid-row:1 / 3;margin:0}.under-map{grid-column:2;grid-row:2;display:grid;grid-template-columns:1.15fr 1fr;gap:16px}.under-map .panel{margin:0}.propulsion .engines{flex:1;min-height:320px;align-items:stretch}.propulsion .engine{flex:1}.propulsion .vertical{flex:1;min-height:240px;height:auto}.route .fields{flex-direction:column}.route .tabs{flex-direction:column}.route #manual{width:100%}.route #routeNote{display:block;margin:14px 0;line-height:1.6}.map{height:440px}.target{flex-wrap:wrap}.maphead{gap:12px}.coursevalue{font-size:42px}.under-map .sectiontitle{margin-bottom:16px}.fields .offset-toggle{display:flex;align-items:center;margin:10px 0;color:var(--cyan)}
@media(max-width:1150px){main{grid-template-columns:210px minmax(360px,1fr)}.route{grid-column:1 / 3;grid-row:3}.route .fields{display:grid;grid-template-columns:1fr 1fr}.route .tabs{flex-direction:row}.under-map{grid-template-columns:1fr}.propulsion{grid-row:1 / 3}}@media(max-width:650px){main{display:flex;flex-direction:column}.propulsion{order:2}.workspace{order:1}.under-map{order:3}.route{order:4}.propulsion .engines{min-height:220px}.propulsion .vertical{height:160px;min-height:160px}.route .fields{display:flex;flex-direction:column}}

#centerTurn{display:block;margin:0 auto 16px;padding:8px 16px;color:var(--cyan)}

.bearing{top:5px;left:50%;transform:translateX(-50%)}
#mapHeading{font-size:24px;font-variant-numeric:tabular-nums;line-height:1.15}

.dock-indicators{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0;color:#8b9eb3;font-size:12px}.dock-indicators .engaged{color:#74e794}

.dock-indicators span{font-size:11px}.dock-indicators .engaged{color:#74e794;text-shadow:0 0 5px #74e79444}

.dock-indicators{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center}.dock-indicators span{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;color:#c4d4e5!important;text-shadow:none!important}.dock-indicators span::before{content:'';display:block;width:38px;height:38px;border-radius:50%;background:#df5252;box-shadow:0 0 10px #df525244;border:2px solid #fa8888}.dock-indicators span.engaged::before{background:#55cf83;border-color:#94efb4;box-shadow:0 0 10px #55cf8355}

#dockStatus{display:none}

.dock-connection-row{display:flex;align-items:center;gap:18px}.dock-connection-row #umbilical{flex:0 0 auto}.dock-connection-row .dock-indicators{display:flex;gap:12px;margin:4px 0}.dock-connection-row .dock-indicators span{min-width:42px;font-size:9px;gap:5px}@media(max-width:650px){.dock-connection-row{flex-wrap:wrap}}

#steer{appearance:none;-webkit-appearance:none;height:8px;border-radius:4px;background:linear-gradient(to right,#52606d 0%,#52606d var(--turn-start,50%),#6ee7df var(--turn-start,50%),#6ee7df var(--turn-end,50%),#52606d var(--turn-end,50%),#52606d 100%)}#steer::-webkit-slider-runnable-track{background:transparent;height:8px}#steer::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#6ee7df;margin-top:-4px}#steer::-moz-range-track{background:transparent;height:8px}#steer::-moz-range-progress{background:transparent}#steer::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#6ee7df}

#actualSpeedBar{height:100%;min-height:150px;width:14px;background:#394552;border-radius:8px;position:relative;flex:1;overflow:hidden}#actualSpeedFill{position:absolute;bottom:0;width:100%;height:0;background:#6ee7df}.actual-speed{min-width:54px}.actual-speed strong{font-size:20px}.actual-speed small{font-size:9px;letter-spacing:.5px}

#actualSpeedBar{width:64px;height:auto;min-height:240px;border:1px solid #647385;border-radius:4px}#actualSpeedPercent{visibility:hidden;height:36px}.speed-scale{position:absolute;inset:0;pointer-events:none}.speed-tick{position:absolute;left:0;right:0;height:1px;background:#82939c88}.speed-tick.major{height:2px;background:#c0d6dd}.speed-tick b{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);padding:1px 4px;color:#e6f5fa;background:#172c38;font-size:11px;font-weight:600;white-space:nowrap}.propulsion .engines{gap:6px}.actual-speed small{max-width:70px;text-align:center}.actual-speed .muted{font-size:9px;text-align:center}

#steer{background:transparent}#steer::-webkit-slider-runnable-track{border-radius:4px;background:linear-gradient(to right,#52606d 0%,#52606d var(--turn-start,50%),#6ee7df var(--turn-start,50%),#6ee7df var(--turn-end,50%),#52606d var(--turn-end,50%),#52606d 100%)}#steer::-moz-range-track{border-radius:4px;background:linear-gradient(to right,#52606d 0%,#52606d var(--turn-start,50%),#6ee7df var(--turn-start,50%),#6ee7df var(--turn-end,50%),#52606d var(--turn-end,50%),#52606d 100%)}

#actualSpeedMode,#actualSpeedValue{display:none}.propulsion .engine{display:grid;grid-template-rows:28px 36px minmax(240px,1fr) 18px 18px;justify-items:center;align-items:center;gap:12px}.propulsion .engine>small:first-child{align-self:start;height:28px;text-align:center}.propulsion .vertical,#actualSpeedBar{grid-row:3;align-self:stretch;height:100%;min-height:0;margin:0}.propulsion .engine>strong{grid-row:2;margin:0}.propulsion .engine>.muted{grid-row:4}.propulsion .engine>small:last-child:not(:first-child){grid-row:5}#actualSpeedBar{height:calc(100% - 16px);align-self:center}

.scanner-range-presets{position:absolute;right:12px;top:65px;bottom:46px;display:flex;flex-direction:column;gap:5px;overflow-y:auto;max-width:112px;z-index:3}.scanner-range-presets button{position:relative;flex-shrink:0;min-height:28px;padding:6px 8px 6px 22px;font-size:10px;text-align:center;background:#091522e8}.scanner-range-presets i{position:absolute;left:7px;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:#ff5c68}.scanner-range-presets button[aria-pressed='true'] i{background:#65ff9a}.scanner-range-presets button[aria-pressed='true']{border-color:#65ff9a;color:#6ee7df}

.scanner-range-presets[hidden]{display:none}

#changeHeading{margin-left:auto;font-size:12px}#headingDialog{background:#071014;color:#6ee7df;border:1px solid #327b83;border-radius:10px;width:320px;padding:24px}#headingDialog::backdrop{background:#000a}.heading-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.heading-keypad button{min-height:48px}#headingEntry{width:100%;font-size:28px;color:#6ee7df;background:#000;padding:10px;box-sizing:border-box}
#map{touch-action:none}
#mapSelection{position:absolute;bottom:43px;left:20px;right:20px;text-align:center;pointer-events:none;font-size:11px;color:var(--cyan);background:#091622d9;padding:4px;}

/* Match production Helm destination typography and action controls. */
.target{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.5;}
.target h2{font-size:20px;font-weight:600;letter-spacing:normal;margin:5px 0;}
.target strong{font-variant-numeric:tabular-nums;}
.target .actions{gap:10px;}
.target .actions button{padding:10px 6px;}
@media(max-width:650px){.target strong{font-size:16px;}}

/* Selected Destination widget (shared with Navigation Control) and the helm's own manual course. */
.selected-destination [hidden]{display:none!important}
.selected-destination>[data-sd-field]:first-child{flex:1 1 180px;min-width:0}
.selected-destination [data-sd="note"]{display:block;font-size:11px;margin-top:4px}
.sd-calculating{flex:1;min-width:240px}.sd-calculating progress{display:block;width:100%;margin:12px 0 0}
.manual-result{margin:14px 0 6px;color:var(--cyan);font-variant-numeric:tabular-nums}
#manualProgress{margin:6px 0 10px}#manualProgress[hidden]{display:none}
.route #manualAlign{width:100%}
footer{align-items:center;flex-wrap:wrap}
.nav-status{color:var(--cyan)}.nav-status.offline{color:#ed6371}
.console-link{color:var(--cyan);text-decoration:none}.console-link:hover{text-decoration:underline}
.selected-destination .actions{flex:0 0 auto}.selected-destination .actions button{flex:0 0 auto;white-space:nowrap;padding:10px 14px}