/* ALUR shared semantic tokens. Both themes use the same components and layout. */
:root{color-scheme:light;--canvas:#f3f6f5;--surface:#fff;--soft:#f5f8f7;--ink:#1b343b;--muted:#5c7379;--teal:#087f82;--accent:#087f82;--accent-hover:#09686b;--line:#dce6e4;--border:var(--line);--positive:#22694f;--positive-bg:#eaf5ef;--amber:#805912;--amber-bg:#fff5df;--danger:#a23939;--danger-bg:#fcefee;--focus:#139b9c;--ocean:#d5e8e9;--shadow:0 2px 8px #183b3504,0 8px 24px #183b3505;--radius:12px;--radius-sm:7px;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--map-filter:saturate(.65) contrast(.96);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
:root[data-theme=dark]{color-scheme:dark;--canvas:#101b21;--surface:#182830;--soft:#1d3038;--ink:#e4efef;--muted:#adc2c8;--teal:#64d5cb;--accent:#64d5cb;--accent-hover:#8be7dc;--line:#304750;--positive:#9bdec0;--positive-bg:#203e37;--amber:#f0cb80;--amber-bg:#3d3528;--danger:#ffb1a9;--danger-bg:#482e30;--focus:#69d9d0;--ocean:#1e3a45;--shadow:0 4px 18px #0002;--map-filter:invert(.91) hue-rotate(165deg) saturate(.5) brightness(.85)}
html,body{color:var(--ink);background:var(--canvas)}body{font-size:14px}header{height:74px;padding:0 28px;gap:26px;background:var(--surface);box-shadow:0 1px 0 var(--line);border:0}.brand{gap:10px;min-width:280px}.alur-mark{width:51px;height:44px;object-fit:contain}.brand-name{font-size:27px;letter-spacing:4px;font-weight:700;line-height:1.1}.brand-sub{font-size:11px;letter-spacing:.35px;margin-top:5px;font-weight:500}.header-right{gap:18px}.header-right .text-button{font-size:13px;color:var(--muted)}.mode-control,.theme-control{display:flex;gap:3px;background:var(--soft);padding:4px;border:1px solid var(--line);border-radius:8px}.mode-control button,.theme-control button{font-size:13px;font-weight:600;min-height:30px;padding:6px 13px;border:0;border-radius:5px;background:transparent;color:var(--muted)}.mode-control button[aria-pressed=true],.theme-control button[aria-pressed=true]{background:var(--surface);color:var(--teal);box-shadow:0 1px 4px #0001}.header-right .theme-control button{color:var(--muted)}.header-right .theme-control button[aria-pressed=true]{color:var(--teal)}.language-control select{width:149px;min-height:38px;font-size:13px;background:var(--surface);border-color:var(--line)}
main{height:calc(100dvh - 74px);min-height:0;grid-template-columns:clamp(310px,24vw,360px) minmax(0,1fr)}aside{background:var(--surface);padding:26px 24px;border-color:var(--line)}.planner-heading{margin-bottom:24px}.eyebrow{font-size:10px;letter-spacing:1.6px;color:var(--teal)}h1{font-size:23px;letter-spacing:-.6px;margin-top:7px}.workspace{padding:20px;gap:16px}.map-shell{height:clamp(330px,43vh,490px);min-height:330px;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);flex:0 0 auto}#map{background:var(--ocean)}.leaflet-tile-pane{filter:var(--map-filter)}/* Imagery colors retain their original meaning: exclude GEBCO from the map filter through its container. */
.leaflet-tile-pane:has(img[src*="gebco"]){filter:none}.map-title{top:14px;left:14px;background:var(--surface);border-color:var(--line);padding:10px 13px;max-width:calc(100% - 235px);color:var(--ink);font-size:12px;line-height:1.4}.map-fit,.map-key,.map-layer-control{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow)}.map-fit{font-size:12px;bottom:26px;min-height:36px}.map-layer-control{top:14px;right:62px;padding:9px 12px;max-width:260px;border-radius:7px;font-size:12px}.map-layer-control summary{font-size:12px}.map-layer-control label{display:flex;padding:4px 0;gap:10px;min-height:30px}.map-layer-control input[type=checkbox]{appearance:none;position:relative;width:28px;height:17px;flex:0 0 28px;border-radius:20px;background:var(--line);border:1px solid var(--muted);margin:0;cursor:pointer}.map-layer-control input[type=checkbox]:before{content:'';position:absolute;left:2px;top:2px;width:11px;height:11px;background:var(--surface);border-radius:50%}.map-layer-control input:checked{background:var(--teal);border-color:var(--teal)}.map-layer-control input:checked:before{transform:translateX(11px)}.leaflet-bar{border:1px solid var(--line)!important;box-shadow:var(--shadow)}.leaflet-bar a,.leaflet-bar a:hover{background:var(--surface);color:var(--ink);border-color:var(--line)}.leaflet-control-zoom{margin:14px!important}.leaflet-control-attribution{background:var(--surface)!important;color:var(--muted);font-size:9px}.leaflet-container a{color:var(--teal)}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--surface);color:var(--ink)}.port-marker{background:var(--teal);color:var(--surface);border:3px solid var(--surface);box-shadow:0 1px 8px #0004}.via-marker{background:var(--amber)}.map-key{font-size:11px;border-radius:6px}.map-sub{color:var(--muted)}#tileWarning{background:var(--amber-bg);color:var(--amber);border-radius:6px}.depth-legend,.depth-legend a{color:var(--muted)}
.location input[type=text],input,select,textarea,.coords input,.vessel-grid input,.reach-grid input,.reach-grid select{color:var(--ink);background:var(--soft);border:1px solid var(--line);border-radius:var(--radius-sm)}input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}.location input[type=text]{height:43px;font-size:14px}.location>label{font-size:12px;margin-bottom:7px}.location{margin-bottom:16px}.point-label{background:var(--surface);border-color:var(--teal);color:var(--teal);width:21px;height:21px;font-size:11px}.selected-caption{font-size:11px;margin-top:5px}.clear-location{top:31px}.small-actions{gap:12px;margin-bottom:16px}.text-button{font-size:12px;min-height:28px;color:var(--teal)}.catalog-filter{margin:12px 0 12px}.catalog-filter>label{font-size:12px;margin-bottom:6px}.catalog-filter select{font-size:12px;min-height:37px;padding:8px}.vessel-profile{padding-top:16px}.vessel-profile h3{font-size:14px}.vessel-profile label{font-size:12px}.vessel-profile input,.vessel-profile select,.vessel-profile #speed{font-size:13px;min-height:38px;background:var(--soft);color:var(--ink);border-color:var(--line)}.vessel-profile #speed{height:38px}#voyageSpeedField{display:block}.profile-basic{gap:10px}.profile-grid{gap:12px}.primary{color:#fff;background:#087f82;border-radius:7px;padding:13px 16px;box-shadow:0 3px 7px #087f8215}.primary:hover{background:#086b6f}:root[data-theme=dark] .primary{background:#42c1b6;color:#102a2e}:root[data-theme=dark] .primary:hover{background:#69d6cb}button:disabled{opacity:.55}.outline{color:var(--ink);background:var(--surface);border-color:var(--line)}.outline:hover{background:var(--soft)}.suggestions{background:var(--surface);border-color:var(--line);box-shadow:0 10px 26px #0002}.suggestions button{background:var(--surface);border-color:var(--line);color:var(--ink);font-size:13px;min-height:50px}.suggestions button:hover,.suggestions button:focus{background:var(--soft)}.suggestions span{color:var(--muted);font-size:11px}.location input[type=text]:focus{background:var(--surface);border-color:var(--teal)}.helper{font-size:12px;line-height:1.6}.control-group{padding:14px 0;margin-top:10px}.control-group>summary{font-size:13px}.control-group label,.control-group .options p{font-size:12px}.advanced-nav{display:flex;gap:3px 12px;flex-wrap:wrap;margin-top:24px;padding:16px 0 8px;border-top:1px solid var(--line)}.advanced-nav .eyebrow{width:100%;margin:0 0 4px}.advanced-nav button{font-size:11px;font-weight:500;text-align:left}.advanced-nav button:hover{text-decoration:underline}.control-group input:not([type=checkbox]),.control-group select,.control-group textarea{background:var(--soft);color:var(--ink)}
.results{background:transparent;border:0;padding:0!important;border-radius:0;box-shadow:none}#result{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start}.voyage-hero,.depth-card,#empty{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}.voyage-hero{height:100%;min-width:0}.results h2#resultVoyage{font-size:16px;line-height:1.45;font-weight:650;margin:0 0 16px;letter-spacing:-.2px}.results .section-label{font-size:10px;letter-spacing:1px}.big-number{font-size:clamp(44px,3.8vw,64px);line-height:1.2;font-weight:650;color:var(--ink);letter-spacing:-2.5px}.big-number>span:last-child{font-size:17px;letter-spacing:0;color:var(--muted)}.result-actions .outline{font-size:11px;padding:8px 10px;min-height:34px}.result-actions .badge{display:none}.result-top{gap:12px;flex-wrap:wrap}.sailing-estimate{display:grid;grid-template-columns:1fr auto;margin:16px 0 10px;padding:12px 0;gap:4px 12px;border-color:var(--line)}.sailing-estimate .time-label{font-size:12px;color:var(--muted);font-weight:400}.sailing-estimate strong{font-size:19px;font-weight:650;color:var(--teal)}.time-note{font-size:10px;line-height:1.5}.compact-vessel{font-size:12px;margin:10px 0 14px;color:var(--muted)}.status-chips{gap:6px}.status-chip{font-size:10px;border-radius:5px;padding:5px 7px;line-height:1.5;gap:5px;background:var(--soft);color:var(--muted)}.status-chip.success{background:var(--positive-bg);color:var(--positive)}.status-chip.amber{background:var(--amber-bg);color:var(--amber)}.status-chip.danger{background:var(--danger-bg);color:var(--danger)}.status-chip>span{color:inherit;opacity:.85}.operational-warnings,.operational-details,#technicalDetails,#optimizationSummary{grid-column:1/-1;min-width:0}.operational-warnings:empty{display:none}.operational-note{margin:0 0 8px;font-size:12px;padding:11px 14px;border:1px solid color-mix(in srgb,var(--amber) 20%,transparent)}.operational-note:last-child{margin-bottom:0}.operational-details{margin:0;padding:0 4px}.operational-details>summary{font-size:12px}.simple-leg{font-size:12px}.simple-leg small{font-size:11px}.depth-card{margin:0;min-width:0;height:100%;padding:20px}.depth-heading{gap:8px;align-items:flex-start}.depth-heading h3{font-size:14px}.depth-state{font-size:10px;border-radius:5px;padding:4px 7px;max-width:100%;background:var(--soft);color:var(--muted)}.depth-clear{background:var(--positive-bg);color:var(--positive)}.depth-conditional{background:var(--amber-bg);color:var(--amber)}.depth-conflict{background:var(--danger-bg);color:var(--danger)}.depth-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin:16px 0 12px}.depth-metrics dt{font-size:10px;line-height:1.4}.depth-metrics dd{font-size:13px;font-weight:600;line-height:1.5;margin:3px 0 0;overflow-wrap:anywhere}.depth-coverage{background:var(--line)}.indonesia-metrics{border-top:1px solid var(--line);padding-top:12px;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.indonesia-metrics dd{font-size:11px}.depth-card p{font-size:11px;line-height:1.55;margin:9px 0}.depth-details{margin-top:12px}.depth-details>summary{font-size:12px;font-weight:600}.provider-notice{background:var(--soft);color:var(--muted);padding:9px 10px;border-left:2px solid var(--teal);border-radius:3px}.provider-notice span{display:block;margin-top:2px}.depth-caution{color:var(--amber)}#depthDisclaimer{display:none}.depth-card:has(#depthDetails[open]){grid-column:1/-1}.depth-table-wrap th,.depth-table-wrap td{border-color:var(--line);font-size:12px}.depth-table-wrap small{color:var(--muted)}.depth-profile svg{color:var(--muted)}.depth-profile-clear{stroke:var(--positive)}.depth-profile-conditional{stroke:var(--amber)}.depth-profile-conflict{stroke:var(--danger)}.depth-profile-unknown{stroke:var(--muted)}.depth-details h4{margin-top:24px;color:var(--ink)}#empty{padding:28px;position:relative}#empty .eyebrow{color:var(--teal)}#empty h2{font-size:23px}#empty p{font-size:13px;max-width:600px}.alur-data-note{font-size:10px;line-height:1.6;color:var(--muted);margin:0 2px 8px;max-width:980px}.route-loading{border-color:var(--line);color:var(--ink);max-width:330px;font-size:13px;padding:22px}.route-loading:before{content:'';display:block;width:30px;height:25px;background:url('alur-flow.svg') center/contain no-repeat;margin-bottom:10px}.exception-card{border:1px solid var(--danger);background:var(--danger-bg)}.exception-card p{font-size:12px}.exception-card h3{font-size:15px}
/* Secondary details share semantic surfaces, including every legacy advanced control. */
dialog,.feasibility-panel,.reach,.via-row,.access-panel{background:var(--surface);color:var(--ink);border-color:var(--line)}dialog p,.vessel-grid label,.reach-grid label,.reach-review,.source-note{color:var(--muted)}.about-method{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}.about-method summary{cursor:pointer;color:var(--teal);font-size:13px}.assessment-route,.screen-within{background:var(--soft);color:var(--ink)}.screen-exceeded{background:var(--danger-bg);color:var(--danger)}.screen-unknown{background:var(--amber-bg);color:var(--amber)}.reach{background:var(--soft)}.reach-title input{color:var(--ink);border-color:var(--line)}.reach-more summary{color:var(--teal)}.popup-actions button{background:var(--soft);color:var(--teal);border-color:var(--line)}.debug-json,pre{background:var(--soft);color:var(--muted);border-color:var(--line);overflow:auto}#formError,#screenError{color:var(--danger)}.warning,.map-pick-status{background:var(--amber-bg);color:var(--amber)}.badge{background:var(--soft);color:var(--muted)}.workspace-tools{font-size:12px}.feasibility-panel h2{font-size:23px}.profile-field,.profile-grid label,.vessel-profile small{color:var(--muted)}input[type=checkbox]{accent-color:var(--teal)}:focus-visible{outline:3px solid var(--focus)!important;outline-offset:3px!important}button:focus:not(:focus-visible){outline:none}.control-group,.depth-card,.voyage-hero{scroll-margin:20px}
@media(min-width:1600px){.workspace{padding:24px;gap:20px}.map-shell{height:47vh;min-height:420px}.voyage-hero,.depth-card{padding:24px}.results h2#resultVoyage{font-size:19px}.depth-heading h3{font-size:15px}.depth-metrics dd{font-size:15px}.depth-metrics dt{font-size:11px}.depth-card p{font-size:12px}.status-chip{font-size:11px}}
@media(max-height:820px) and (min-width:1000px){aside{padding:20px}.planner-heading{margin-bottom:18px}.planner-heading h1{font-size:22px}.map-shell{height:330px;min-height:330px}.workspace{padding:16px;gap:14px}.location{margin-bottom:12px}.catalog-filter{margin:9px 0}.small-actions{margin-bottom:12px}.vessel-profile{padding-top:12px}.voyage-hero,.depth-card{padding:18px}.big-number{font-size:48px}}
@media(max-width:1200px){header{padding:0 18px;gap:16px}.brand{min-width:230px}.header-right{gap:10px}.brand-sub{font-size:10px}.mode-control button,.theme-control button{padding:6px 9px}#result{grid-template-columns:1fr}.depth-card{grid-column:1}.map-title{max-width:calc(100% - 215px)}}
@media(max-width:900px){header{height:auto;min-height:74px;flex-wrap:wrap;padding:12px 16px}.brand{min-width:180px}.header-right{flex-wrap:wrap}.brand-sub{display:block}main{height:auto;grid-template-columns:minmax(280px,35%) minmax(0,1fr)}.workspace,aside{overflow:visible;height:auto}.mode-control{margin-left:auto}.map-title{max-width:calc(100% - 40px);top:62px}.map-shell{height:420px}.language-control select{width:130px}}
@media(max-width:640px){main{display:block}.header-right{width:100%;justify-content:space-between}.workspace{padding:12px}.brand-name{font-size:24px}aside{padding:22px}.map-shell{height:360px}.alur-data-note{font-size:11px}.map-title{max-width:calc(100% - 28px)}.depth-card:has(#depthDetails[open]){grid-column:1}.mode-control{margin-left:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
body[data-mode=simple] .depth-metrics .metric-unavailable,body[data-mode=simple] [data-depth-metric="Depth coverage"],body[data-mode=simple] .depth-coverage+ .helper{display:none}body[data-mode=simple] .depth-metrics:not(.indonesia-metrics){margin:14px 0 10px}body[data-mode=simple] .indonesia-metrics{margin-top:12px}#voyageHero{order:0}#depthCard{order:1}#operationalWarnings{order:2}#operationalDetails{order:3}#technicalDetails{order:4}#optimizationSummary{order:5}
@media(max-height:820px) and (min-width:1000px){.planner-heading{margin-bottom:14px}.planner-heading h1{font-size:21px}.location{margin-bottom:10px}.location input[type=text]{height:40px}.selected-caption{margin-top:3px}.catalog-filter{margin:6px 0}.catalog-filter select{min-height:34px;padding:7px}.small-actions{margin-bottom:10px}.vessel-profile{padding-top:10px}.vessel-profile h3{margin-bottom:8px}.profile-basic{margin:8px 0}.vessel-profile input,.vessel-profile select,.vessel-profile #speed{min-height:35px;height:35px;padding:7px 9px}#voyageSpeedField{margin-top:6px}#simpleAssumption{margin:5px 0 0;font-size:11px}.planner-action{margin-top:10px}.primary{padding:12px}}
.catalog-filter{background:transparent}.catalog-filter #catalogStatus{color:var(--muted)}:root[data-theme=dark]{--map-filter:invert(.88) hue-rotate(165deg) saturate(.5) brightness(1.1)}
