:root{--bg:#f2f6f8;--surface:#ffffff;--ink:#142b3c;--muted:#647887;--line:#dce6eb;--navy:#0b2033;--navy2:#153c50;--teal:#0f8a88;--teal-light:#e3f6f2;--amber:#b97519;--warn-bg:#fff7e7;--danger:#a33b40;--shadow:0 4px 22px rgba(13,44,61,.055)}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}a{color:#087a83;text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,p{margin-top:0}h2{font-size:18px;margin-bottom:12px}h3{font-size:15px}.topbar{background:var(--navy);color:white;display:flex;align-items:center;justify-content:space-between;padding:13px max(18px,calc((100vw - 1320px)/2));gap:12px}.brand{display:flex;align-items:center;gap:11px}.brand-mark{font-size:31px;color:#5ae5cb;transform:rotate(-15deg)}.brand strong{display:block;font-size:16px;letter-spacing:1.3px}.brand small{display:block;color:#aec3ce;font-size:11px}.top-actions{display:flex;align-items:center;gap:8px}.pill{border-radius:20px;background:#213f51;padding:8px 11px;font-size:11px;color:#d4e4eb;white-space:nowrap}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#efb857;margin-right:6px}.dot.ready{background:#67deab}.mini-button{border:1px solid #49899a;border-radius:8px;background:transparent;color:white;padding:7px 10px;font-size:12px}.workspace{max-width:1320px;margin:0 auto;padding:24px 20px}.hero{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:21px}.eyebrow,.map-tools-title{font-size:11px;font-weight:800;letter-spacing:1.8px;color:var(--teal)}h1{font-size:clamp(27px,4vw,37px);font-weight:750;line-height:1.15;margin:5px 0 7px}.subtle{font-size:13px;color:var(--muted)}.hero-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.signal-tag{font-size:12px;border-radius:8px;padding:8px 11px;background:#fbeecb;color:#815d21;font-weight:700}.signal-tag.ok{background:var(--teal-light);color:#156d66}.signal-tag.stale{background:#ffe6e7;color:#a93e42}.action-button,.secondary,.primary{border-radius:10px;border:1px solid var(--line);padding:10px 15px;font-weight:700;font-size:13px;transition:filter .15s}.action-button{background:#eaf3f6;color:var(--navy2)}.secondary{background:#fff;color:var(--navy2)}.primary{background:var(--teal);color:#fff;border-color:var(--teal)}.primary:hover,.secondary:hover,.action-button:hover{filter:brightness(.96)}.full{width:100%;margin-top:15px}.tabbar{display:flex;gap:7px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto;scrollbar-width:thin}.tab{white-space:nowrap;border:0;background:transparent;color:#627786;padding:12px 14px;font-weight:700;font-size:13px;border-bottom:3px solid transparent}.tab.active{color:#087c7b;border-color:#1aaba3}.tab-panel{display:none}.tab-panel.active{display:block}.map-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px}.map-card,.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}.map-card{display:flex;flex-direction:column}.map-tools{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:15px}.map-tools small{display:block;color:var(--muted);margin-top:5px;font-size:12px}.map-tools select{min-width:120px}select,input{width:100%;border:1px solid #cddce2;background:white;border-radius:9px;padding:11px 12px;color:var(--ink);outline-color:var(--teal)}#map{position:relative;min-height:500px;flex:1;background:radial-gradient(circle at 45% 30%,#7fcbd4,#38798b 75%)}#map-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#fff;text-align:center;font-size:20px;z-index:0;padding:30px}#map-fallback small{font-size:13px}.map-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:10px 15px;background:#f8fbfc;font-size:11px;color:var(--muted)}.map-foot b{color:var(--ink)}.sidebar{display:flex;flex-direction:column;gap:16px}.sidebar .panel{padding:18px}.panel{padding:20px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.panel-head h2{margin:0 0 15px}.micro-chip{font-size:10px;letter-spacing:.4px;border:1px solid #dbe4e9;color:#70828e;padding:4px 7px;border-radius:6px;white-space:nowrap}.coord-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:17px 0}.coord-row>div{padding:12px;background:#f3f8f9;border-radius:9px;min-width:0}.coord-row label,.mini-weather label,.metric span,label{display:block;color:var(--muted);font-size:12px}.coord-row label{font-size:10px;font-weight:800;letter-spacing:.6px;margin-bottom:6px}.coord-row strong{font-size:16px;overflow-wrap:anywhere}.detail-line{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #edf2f5;padding:11px 0;font-size:12px}.detail-line span{color:var(--muted);max-width:44%}.detail-line b{text-align:right;font-weight:650;overflow-wrap:anywhere}.note,.source-line{color:var(--muted);font-size:12px;line-height:1.55;margin:10px 0 0}.text-button{border:none;background:none;color:var(--teal);font-weight:700;font-size:12px;padding:0}.mini-weather{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.mini-weather label{font-size:10px}.mini-weather strong{font-size:16px;display:block;margin-top:5px}.history-panel{margin-top:16px}.history-list{display:grid;gap:8px;margin-top:12px}.history-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font-size:12px}.history-item b{font-size:13px;display:block}.history-item span{color:var(--muted);display:block;margin-top:3px}.empty{color:var(--muted);font-size:13px;text-align:center;padding:20px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:20px 0}.section-heading h2{font-size:22px;margin:0 0 7px}.section-heading p{color:var(--muted);font-size:13px;line-height:1.5;margin:0}.info-banner{background:#e7f3f5;color:#3d7181;padding:15px;border:1px solid #c9e3ea;border-radius:10px;font-size:13px;margin-bottom:14px;line-height:1.5}.metrics-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-bottom:14px}.metric{border-radius:13px;border:1px solid var(--line);background:white;padding:19px;display:flex;flex-direction:column;gap:10px}.metric span{font-size:12px;font-weight:700}.metric strong{font-size:clamp(22px,3vw,30px);font-weight:750}.metric small{color:var(--muted);font-size:12px}.days-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:13px}.day{background:#f5f9fa;border-radius:11px;padding:14px 11px;min-width:0}.day h3{font-size:13px}.day strong{font-size:22px;display:block;margin:11px 0}.day small{display:block;color:var(--muted);font-size:11px;line-height:1.6}.warning-box{background:var(--warn-bg);border:1px solid #f2d9a3;border-radius:11px;padding:17px;color:#825a21;font-size:13px;margin-bottom:15px}.warning-box p{margin:8px 0 0;line-height:1.55}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:15px}.external-list{display:flex;flex-direction:column;gap:11px;font-size:13px;margin-top:18px}.external-list a{padding:10px 0;border-bottom:1px solid var(--line)}.cyclone-list{display:grid;gap:8px;margin:15px 0}.cyclone{border:1px solid var(--line);border-radius:10px;padding:12px;font-size:12px}.cyclone strong{display:block;font-size:14px;margin-bottom:6px}.cyclone p{margin:3px 0;color:var(--muted)}label{margin-top:13px;margin-bottom:6px;font-weight:650}.climate-row{padding:10px 0;border-bottom:1px solid var(--line)}.climate-row p{font-size:13px;color:var(--muted);line-height:1.5;margin:7px 0}.info-text{background:#eef6f8;color:#2c6875;padding:13px;border-radius:9px;font-size:13px;line-height:1.55;margin:15px 0}.divider{height:1px;background:var(--line);margin:20px 0}.file-label{display:block;text-align:center;padding:11px 15px;border:1px dashed #8bb4bb;border-radius:10px;color:#1d6676;font-size:13px;font-weight:700;cursor:pointer}.danger{border:1px solid #f0bcbc;border-radius:9px;color:var(--danger);background:white;padding:9px 13px;font-size:12px}.maplibregl-popup-content{border-radius:10px!important;color:var(--ink);font-size:12px}.vessel-pin{width:38px;height:38px;background:#0c8988;border:3px solid white;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:23px;box-shadow:0 2px 14px #0005;cursor:pointer}.storm-pin{width:28px;height:28px;border-radius:50%;background:#a33b40;color:white;border:2px solid white;box-shadow:0 2px 8px #0005;display:grid;place-items:center;font-size:17px}footer{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;padding:22px 0;color:#86949d;font-size:11px}dialog{max-width:540px;width:calc(100% - 28px);border:none;border-radius:17px;box-shadow:0 25px 80px #051b2d77;padding:0;max-height:90vh}dialog::backdrop{background:#071b30a6}.dialog-inner{padding:22px;overflow-y:auto;max-height:90vh}.dialog-inner h2{margin-bottom:0}.dialog-inner input,.dialog-inner select{margin-bottom:3px}.icon-button{border:0;background:none;font-size:20px;color:var(--muted)}.two-input{display:grid;grid-template-columns:1fr 1fr;gap:12px}.input-hint{display:block;color:var(--muted);font-size:11px;margin-top:3px}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:19px}.form-error{color:var(--danger);font-size:12px}.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#142b3c;color:#fff;padding:12px 18px;border-radius:9px;font-size:13px;box-shadow:0 8px 30px #0003;opacity:0;pointer-events:none;transition:opacity .25s;max-width:92vw;z-index:9999}.toast.show{opacity:1}.hidden{display:none!important}@media(max-width:950px){.map-layout{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:1fr 1fr}.map-card #map{min-height:470px}.two-col{grid-template-columns:1fr}}@media(max-width:620px){.topbar{padding:10px 13px}.brand strong{font-size:13px}.brand small{font-size:10px}.pill{font-size:10px;max-width:135px;overflow:hidden;text-overflow:ellipsis}.workspace{padding:17px 11px}.hero{align-items:flex-start;flex-direction:column;gap:12px}.hero-right{width:100%;justify-content:space-between}.tabbar{margin:0 -11px 16px;padding:0 7px}.tab{padding:12px 10px;font-size:12px}.map-card #map{min-height:390px}.sidebar{display:flex}.panel{padding:15px}.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.metric{padding:14px}.metric strong{font-size:23px}.days-grid{grid-template-columns:repeat(2,1fr)}.section-heading{flex-direction:column;align-items:flex-start}.section-heading .secondary{width:100%}.map-tools{padding:11px}.history-item{align-items:flex-start}.two-input{gap:7px}.top-actions .mini-button{display:none}.map-foot{font-size:10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}


/* Vessel Tracker 1.2 -- MAP-FIRST FULL-VIEW INTERFACE */
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{--bg:#edf3f6;--surface:#fff;--ink:#162c3b;--muted:#647989;--line:#d8e3e9;--navy:#0d2638;--navy2:#163e50;--teal:#087e80;--teal-light:#d9f3ef;--warn-bg:#fff7e7;--shadow:0 12px 42px rgba(7,33,50,.12);background:var(--surface)}
body[data-theme="dark"]{--bg:#0a1420;--surface:#122433;--ink:#e9f3f8;--muted:#9db6c4;--line:#325064;--navy:#071423;--navy2:#214455;--teal:#55c8bb;--teal-light:#203e40;--warn-bg:#3b2f21;--danger:#ff898c;--shadow:0 12px 42px rgba(0,0,0,.32);color-scheme:dark}
.viewport-app{position:relative;width:100vw;height:100vh;height:100dvh;overflow:hidden;background:#cddfe5}
#map{position:absolute;inset:0;width:100%;height:100%;min-height:0;z-index:1;background:#91b5bb}
#map-fallback{z-index:0}
.float-header{position:absolute;z-index:5;top:max(env(safe-area-inset-top),12px);left:12px;right:12px;max-width:680px;display:flex;align-items:center;gap:9px;border-radius:19px;background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow);padding:7px 10px}
.round-button{display:grid;place-items:center;flex:0 0 auto;width:39px;height:39px;border-radius:13px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:21px;padding:0}
.ship-name-block{flex:1;min-width:0}.ship-name-block strong{display:block;font-size:14px;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ship-name-block small{display:block;font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.float-rail{position:absolute;z-index:5;top:50%;right:12px;transform:translateY(-50%);display:flex;flex-direction:column;gap:5px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:6px}
.rail-button{height:43px;width:43px;display:grid;place-items:center;background:transparent;border:0;border-radius:13px;color:var(--ink);font-size:23px;line-height:1;padding:0}
.rail-button.active{background:var(--teal-light);color:var(--teal)}.rail-button:hover{background:var(--teal-light)}.rail-primary{background:#0d8985;color:white}.rail-primary:hover{background:#0f7775}
.map-style-wrap{position:absolute;z-index:4;top:calc(max(env(safe-area-inset-top),12px) + 67px);left:12px;display:flex;align-items:center;gap:7px;border-radius:12px;padding:7px 9px;background:var(--surface);box-shadow:var(--shadow);color:var(--ink);border:1px solid var(--line)}
.map-style-wrap label{margin:0;font-size:10px;font-weight:800}.map-style-wrap select{width:112px;font-size:12px;padding:4px 5px;background:var(--surface);color:var(--ink);border:0}
.status-strip{position:absolute;z-index:4;bottom:calc(max(env(safe-area-inset-bottom),6px) + 26px);left:12px;right:12px;display:flex;align-items:center;gap:8px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);border:1px solid var(--line);border-radius:14px;padding:8px 10px;font-size:11px;max-width:max-content}
.status-strip #header-status{font-weight:700}.status-strip .signal-tag{margin:0;padding:4px 7px;font-size:10px;max-width:170px}
.map-credit{position:absolute;z-index:4;bottom:max(env(safe-area-inset-bottom),6px);left:12px;font-size:9px;color:#425868;background:#ffffffc9;border-radius:6px;padding:2px 5px}.map-credit a{color:inherit}
.panel-backdrop{position:absolute;inset:0;z-index:8;background:rgba(5,18,30,.32)}.panel-backdrop[hidden]{display:none}
.content-sheet{position:absolute;z-index:9;bottom:0;right:0;left:0;background:var(--bg);color:var(--ink);height:min(78dvh,820px);transform:translateY(105%);transition:transform .25s ease;box-shadow:0 -16px 48px rgba(4,28,47,.23);border-radius:22px 22px 0 0;display:flex;flex-direction:column;visibility:hidden}
.content-sheet.open{transform:translateY(0);visibility:visible}.sheet-head{position:relative;display:flex;justify-content:space-between;align-items:center;padding:17px 16px 11px;border-bottom:1px solid var(--line);flex:none;min-height:57px}.sheet-head strong{font-size:16px;padding-left:8px}.sheet-handle{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:43px;height:4px;background:var(--line);border-radius:20px}.close-sheet{height:34px;width:34px;font-size:18px}.sheet-scroll{overflow-y:auto;overscroll-behavior:contain;padding:14px 15px max(env(safe-area-inset-bottom),17px);flex:1}
.tab-panel{display:none}.tab-panel.active{display:block}#tab-position .sidebar{display:grid;grid-template-columns:1fr 1fr;gap:12px}#tab-position .sidebar .panel{padding:15px}#tab-history .history-panel{margin-top:0}
/* semantic panel elements respect dark theme */
body[data-theme="dark"] .panel,body[data-theme="dark"] .map-card,body[data-theme="dark"] .metric,body[data-theme="dark"] .round-button,body[data-theme="dark"] .secondary,body[data-theme="dark"] .danger{background:var(--surface);color:var(--ink);border-color:var(--line)}
body[data-theme="dark"] select,body[data-theme="dark"] input{background:#152e40;color:var(--ink);border-color:var(--line)}
body[data-theme="dark"] .coord-row>div,body[data-theme="dark"] .day,body[data-theme="dark"] .map-foot,body[data-theme="dark"] .info-banner,body[data-theme="dark"] .info-text{background:#1d3849;color:var(--ink)}
body[data-theme="dark"] .detail-line,body[data-theme="dark"] .history-item,body[data-theme="dark"] .cyclone,body[data-theme="dark"] .micro-chip{border-color:var(--line)}
body[data-theme="dark"] .warning-box{background:#42321b;color:#f2d6a7;border-color:#7b6138}body[data-theme="dark"] a{color:#77d9d1}
body[data-theme="dark"] dialog{background:var(--surface);color:var(--ink)}
body[data-theme="dark"] .file-label{color:#8ce2d6}
body[data-theme="dark"] .map-credit{background:#101d2bcc;color:#d7e5eb}
body[data-theme="dark"] .rail-button{color:var(--ink)}body[data-theme="dark"] .rail-button.active{color:#8de0d6}body[data-theme="dark"] .rail-primary{background:#0e847f;color:#fff}
body[data-theme="dark"] .signal-tag{background:#534427;color:#ffe3a8}body[data-theme="dark"] .signal-tag.ok{background:#225148;color:#bcf3e4}body[data-theme="dark"] .signal-tag.stale{background:#512d32;color:#ffb2bb}
body[data-theme="dark"] .form-error{color:#f6a2a5}body[data-theme="dark"] .maplibregl-popup-content{color:#122c3d}
@media(max-width:950px){#tab-position .sidebar{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.float-header{top:max(env(safe-area-inset-top),8px);left:7px;right:7px;padding:5px 7px;max-width:none}.ship-name-block strong{font-size:13px}.ship-name-block small{font-size:10px}.round-button{height:36px;width:36px;font-size:19px}.float-rail{right:8px;gap:1px;padding:4px;border-radius:17px}.rail-button{width:38px;height:39px;font-size:21px}.map-style-wrap{top:calc(max(env(safe-area-inset-top),8px) + 58px);left:8px}.status-strip{left:8px;right:8px;bottom:calc(max(env(safe-area-inset-bottom),6px) + 23px);font-size:10px;max-width:calc(100vw - 20px);gap:5px}.status-strip .signal-tag{font-size:9px}.sheet-scroll{padding:10px 10px 20px}#tab-position .sidebar{display:flex;flex-direction:column;gap:10px}.panel{padding:13px}.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.two-col{grid-template-columns:1fr}.section-heading{margin:8px 0 15px}.section-heading h2{font-size:18px}.sheet-head{padding:16px 10px 8px}}
@media(min-width:940px){.content-sheet{left:auto;right:0;top:0;bottom:0;width:min(490px,45vw);height:100%;transform:translateX(105%);border-radius:18px 0 0 18px;box-shadow:-12px 0 40px #0015}.content-sheet.open{transform:translateX(0)}.sheet-scroll{padding:20px}}
@media(prefers-reduced-motion:reduce){.content-sheet{transition:none}}

/* 1.3 readable map, vessel summary, errors */
.map-style-wrap{max-width:calc(100vw - 115px);min-width:0}.map-style-wrap select{width:clamp(125px,31vw,205px)}
.map-feedback{position:absolute;z-index:7;left:10px;right:72px;top:139px;max-width:385px;background:var(--surface);color:var(--ink);border:1px solid #d99635;border-radius:12px;padding:9px 12px;box-shadow:var(--shadow);font-size:12px;line-height:1.45}
.map-feedback[hidden],.ship-summary[hidden]{display:none!important}
.ship-summary{position:absolute;left:10px;bottom:87px;z-index:5;background:var(--surface);color:var(--ink);border-radius:13px;box-shadow:var(--shadow);border:1px solid var(--line);padding:10px;display:flex;align-items:center;gap:9px;max-width:min(300px,calc(100vw - 80px))}
.ship-summary-icon{font-size:21px;color:#087e80}.ship-summary strong{font-size:12px;display:block}.ship-summary small{font-size:10px;color:var(--muted);display:block;margin-top:3px}.ship-summary button{margin-left:5px;flex-shrink:0;background:var(--teal-light);border:0;border-radius:7px;font-size:20px;color:var(--teal);padding:7px}
.vessel-pin{width:47px;height:47px;background:#087c82;border:4px solid #fff;box-shadow:0 0 0 4px #edb64e,0 4px 21px #092737ba;font-size:25px;z-index:1000!important}
.vessel-pin-caption{background:#fff;color:#123543;border:2px solid #087c82;padding:3px 9px;border-radius:8px;font-weight:800;font-size:12px;white-space:nowrap;text-align:center;box-shadow:0 4px 11px #0003}
.weather-actions{margin:-4px 0 15px;font-size:11px}.weather-actions small{display:block;color:var(--muted);margin-top:5px}
@media(max-width:620px){.map-style-wrap{top:calc(max(env(safe-area-inset-top),8px) + 60px)}.map-feedback{top:116px}.ship-summary{bottom:87px}.float-rail{top:52%}}

/* Vessel Tracker 1.4 — scale-sensitive vessel pointer; discrete sample-based wave overlay */
.vessel-pin{width:22px;height:22px;border-radius:0;border:0;background:transparent;box-shadow:none;display:grid;place-items:center;z-index:auto!important;cursor:pointer;transition:width .1s,height .1s}
.vessel-pin .vessel-arrow{display:block;width:100%;height:100%;filter:drop-shadow(0 1px 2px #001a2e);transform-origin:50% 50%}
.vessel-pin .vessel-arrow svg{display:block;width:100%;height:100%;overflow:visible}
.overlay-toolbar{position:absolute;z-index:5;left:8px;top:calc(max(env(safe-area-inset-top),8px) + 113px);display:flex;flex-wrap:wrap;gap:5px;max-width:calc(100vw - 75px)}
.overlay-button{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow);padding:8px 9px;border-radius:11px;font-size:12px;font-weight:700}
.overlay-button[aria-pressed="true"]{background:#076c7b;color:white;border-color:#076c7b}
.overlay-legend{position:absolute;z-index:5;left:8px;top:calc(max(env(safe-area-inset-top),8px) + 156px);background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:10px 12px;border-radius:12px;max-width:234px;box-shadow:var(--shadow);font-size:12px}
.overlay-legend[hidden],.overlay-notice[hidden]{display:none}
.overlay-legend>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:8px}.overlay-legend button{border:0;background:none;font-size:17px;color:var(--ink);padding:2px}
.legend-ramp{height:10px;background:linear-gradient(to right,#7bd9db,#77c76c,#e8cf59,#ed7f3f,#c63136);border-radius:4px;margin-top:7px}
.legend-values{display:flex;justify-content:space-between;font-size:10px;margin:3px 0 5px}
.overlay-legend small{color:var(--muted);font-size:10px;line-height:1.3;display:block}
.overlay-notice{position:absolute;z-index:5;left:8px;top:calc(max(env(safe-area-inset-top),8px) + 150px);background:var(--surface);color:var(--ink);box-shadow:var(--shadow);padding:8px 11px;border-radius:10px;font-size:11px;max-width:235px;border:1px solid var(--line)}
.overlay-legend:not([hidden])~.overlay-notice{top:calc(max(env(safe-area-inset-top),8px) + 277px)}
@media(min-width:621px){.overlay-toolbar{left:12px;top:calc(max(env(safe-area-inset-top),12px) + 119px)}.overlay-legend{left:12px;top:calc(max(env(safe-area-inset-top),12px) + 162px)}.overlay-notice{left:12px;top:calc(max(env(safe-area-inset-top),12px) + 162px)}}

.wave-mode-label{display:block;margin:5px 0 3px;font-size:10px!important;color:var(--muted);font-weight:650}#wave-mode{width:100%;min-width:0;padding:6px 8px;border-radius:7px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:11px} .overlay-legend{max-width:min(270px,calc(100vw - 90px))!important} .overlay-legend:has(#wave-mode)~.overlay-notice{top:calc(max(env(safe-area-inset-top),8px) + 321px)}

.focus-pacific{font-size:11px!important;width:100%;border:1px solid var(--line)!important;border-radius:7px;background:var(--surface)!important;padding:6px 5px!important;margin-top:5px;color:var(--ink)!important;font-weight:700}

/* Vessel Tracker 1.6 — map-first wave legend, explicit cyclone source status */
.overlay-legend{width:min(220px,calc(100vw - 105px));max-width:min(220px,calc(100vw - 105px))!important;padding:7px 9px;top:calc(max(env(safe-area-inset-top),8px) + 163px);max-height:min(50dvh,380px);overflow-y:auto}
.overlay-legend .wave-mini{display:block}
.wave-options-button{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;font-size:12px;font-weight:800;border:0;background:none;color:var(--ink);padding:1px 0 3px;cursor:pointer}
.wave-options-button #wave-mini-count{font-size:10px;font-weight:500;white-space:nowrap;margin-left:5px}
.overlay-legend .legend-ramp{height:7px;margin-top:3px}
.overlay-legend .legend-values{font-size:9px;margin:2px 0 0}
.wave-options{margin-top:9px;border-top:1px solid var(--line);padding-top:8px}
.wave-options[hidden]{display:none}
.wave-options-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin-bottom:6px}
.wave-options-head button{font-size:15px;border:0;background:none;color:var(--ink);padding:1px 5px}
.overlay-legend:not(.compact){width:min(260px,calc(100vw - 98px));max-width:min(260px,calc(100vw - 98px))!important}
.overlay-notice{top:calc(max(env(safe-area-inset-top),8px) + 255px);display:flex;flex-direction:column;gap:5px;max-width:min(240px,calc(100vw - 95px))}
.overlay-notice a{color:var(--teal);font-weight:750;text-decoration:underline}
.overlay-legend:not([hidden])~.overlay-notice{top:calc(max(env(safe-area-inset-top),8px) + 244px)}
.overlay-legend:not([hidden]):not(.compact)~.overlay-notice{top:calc(max(env(safe-area-inset-top),8px) + 535px)}
.geojson-upload{display:inline-block;border-radius:8px;padding:9px 12px;background:var(--teal-light);color:var(--teal);font-weight:750;cursor:pointer;border:1px solid var(--line);margin:9px 0}
.cyclone-source-tools{display:flex;flex-direction:column;align-items:flex-start;margin:8px 0;gap:6px;font-size:12px}
.cyclone-source-tools a{color:var(--teal)}
@media(max-width:620px){.overlay-legend{top:calc(max(env(safe-area-inset-top),8px) + 141px)}.overlay-notice{top:calc(max(env(safe-area-inset-top),8px) + 231px)}.overlay-legend:not([hidden])~.overlay-notice{top:calc(max(env(safe-area-inset-top),8px) + 230px)}.overlay-legend:not([hidden]):not(.compact)~.overlay-notice{top:calc(max(env(safe-area-inset-top),8px) + 515px)}}
/* Override inherited generic first-child flex styling in the new compact legend. */
.overlay-legend > div.wave-mini:first-child{display:block!important;width:100%}
.overlay-legend .wave-mini .legend-ramp{display:block;width:100%}
.overlay-legend .wave-mini .legend-values{display:flex;justify-content:space-between;gap:6px;width:100%}
.overlay-legend.compact:has(#wave-mode)~.overlay-notice{top:calc(max(env(safe-area-inset-top),8px) + 250px)}
.overlay-legend:not(.compact):has(#wave-mode)~.overlay-notice{top:calc(max(env(safe-area-inset-top),8px) + 530px)}
@media(max-width:620px){.overlay-legend.compact:has(#wave-mode)~.overlay-notice{top:calc(max(env(safe-area-inset-top),8px) + 221px)}.overlay-legend:not(.compact):has(#wave-mode)~.overlay-notice{top:calc(max(env(safe-area-inset-top),8px) + 485px)}}

/* v1.7: actual on-map wave cells, drawn above raster map, below vessel markers. */
.wave-render-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;display:block}
.maplibregl-marker{z-index:4}
.wave-view-status{display:block;margin-top:4px;color:var(--muted);font-size:10px;max-width:215px;line-height:1.35}

/* 1.8 smooth model wave field: transparent gradient canvas above map. */
.wave-render-canvas{z-index:2!important;pointer-events:none}
#wave-opacity{display:block;height:20px;margin:5px 0 9px}

/* v2.0: actual provider weather map embedded in its permitted form, not interpolated strips. */
.windy-layer[hidden]{display:none!important}
.windy-layer{position:absolute;inset:0;z-index:2;background:#8fb6c6;overflow:hidden}
.windy-layer iframe{border:0;display:block;width:100%;height:100%;background:#c7dbe6}
.windy-modes{position:absolute;z-index:3;top:calc(max(env(safe-area-inset-top),8px) + 168px);left:8px;right:86px;display:flex;gap:5px;align-items:center;flex-wrap:wrap;pointer-events:none}
.windy-modes button,.windy-modes a{pointer-events:auto;min-height:33px;border:1px solid #a4bbc6;background:rgba(13,34,49,.92);color:#fff;border-radius:9px;padding:6px 9px;font-size:12px;white-space:nowrap;box-shadow:0 3px 10px #0002}
.windy-modes button[aria-pressed="true"]{background:#087e80;border-color:#2baca7}
.windy-credit{position:absolute;bottom:66px;left:8px;z-index:3;max-width:calc(100vw - 115px);padding:5px 8px;border-radius:7px;background:rgba(11,31,46,.85);color:white;font-size:10px}
body[data-waves-embed="true"] #wave-legend{display:none!important}
body[data-waves-embed="true"] .map-style-wrap{display:none!important}
body[data-waves-embed="true"] .map-credit{display:none!important}
@media (max-width:390px){.windy-modes{right:72px}.windy-modes button,.windy-modes a{font-size:11px;padding:5px 7px}}

/* 2.1: weather actions are compact buttons on the existing right-side rail. */
.float-rail .rail-toggle{font-size:23px;line-height:1;flex-shrink:0}
.float-rail .rail-toggle[aria-pressed="true"]{background:#0a8989;color:#fff}
body[data-theme="dark"] .float-rail .rail-toggle[aria-pressed="true"]{background:#0a8989;color:#fff}
.float-rail .rail-toggle:focus-visible{outline:3px solid #65e7dc;outline-offset:1px}
/* Retain the open weather map as the main canvas without floating controls over it. */
.windy-layer{pointer-events:auto}
@media(max-width:620px){
 .float-rail{max-height:calc(100dvh - 128px);overflow-y:auto;scrollbar-width:none}
 .float-rail::-webkit-scrollbar{display:none}
 .float-rail .rail-toggle{font-size:21px}
}

/* 2.2: weather provider owns vessel position marker; do not fake CSS-fixed ship icon over panning iframe. */