/* Cirday Badda — harbour-board look: deep sea ink, teal water, amber signal flag. */
:root{
  --bg:#EAF0F1; --surface:#F7FAFA; --ink:#0C2430; --muted:#4B6570; --line:#C9D6D9;
  --sea:#0D6E78; --sea-soft:#D3E7E8; --flag:#C9861A; --flag-soft:#F5E6C8; --rough:#B4442C; --rough-soft:#F6DED8;
  --wave:#C9861A; --swell:#E9C98A; --wind:#0D6E78; --arrow:#0C2430;
  --display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --body:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --radius:10px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0A161C; --surface:#10212A; --ink:#E3EEF0; --muted:#8EA7AF; --line:#243A44;
  --sea:#4FB8C1; --sea-soft:#14343B; --flag:#E5AE4A; --flag-soft:#3A2D14; --rough:#E07A60; --rough-soft:#3D1F18;
  --wave:#E5AE4A; --swell:#7A6233; --wind:#4FB8C1; color-scheme:dark}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
[dir=rtl] body{font-family:"IBM Plex Sans Arabic",var(--body)}
a{color:var(--sea);text-underline-offset:3px}
button,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--flag);outline-offset:2px}

/* Top bar (always dark ink, both themes) */
.top{position:sticky;top:0;z-index:1000;background:#0C2430;color:#EAF0F1;box-shadow:0 1px 0 rgba(255,255,255,.06)}
.top-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:20px;padding:10px max(16px,env(safe-area-inset-left))}
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-family:var(--display);font-weight:800;font-size:1.55rem;text-transform:uppercase;letter-spacing:.04em;line-height:1}
.brand b{color:#E5AE4A;font-weight:800}
.mark{width:24px;height:24px;border-radius:50%;background:conic-gradient(#E5AE4A 0 25%,transparent 0 50%,#4FB8C1 0 75%,transparent 0);border:2px solid #EAF0F1}
.nav{display:flex;gap:18px;margin-inline-start:auto}
.nav a{color:inherit;text-decoration:none;font-size:.9rem;opacity:.8}
.nav a:hover{opacity:1}
.langs{display:flex;border:1px solid rgba(234,240,241,.3);border-radius:8px;overflow:hidden}
.langs button{background:none;border:0;padding:6px 11px;cursor:pointer;font-family:var(--mono);font-size:.8rem;color:#EAF0F1}
.langs button[aria-pressed=true]{background:#E5AE4A;color:#0C2430}
@media (max-width:720px){.nav{display:none}.langs{margin-inline-start:auto}.install{margin-inline-start:auto}.install:not([hidden])+.langs{margin-inline-start:0}}

main{max-width:1180px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-left)) 48px;display:grid;grid-template-columns:minmax(0,1fr);gap:48px}

/* Hero + now card */
.hero{padding-top:36px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr);gap:28px;align-items:end}
@media (max-width:820px){.hero{grid-template-columns:minmax(0,1fr)}}
.hero-txt{display:grid;gap:12px}
.eyebrow{font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sea)}
[dir=rtl] .eyebrow{letter-spacing:0;font-family:var(--body);font-weight:600}
h1,h2{font-family:var(--display);font-weight:800;text-transform:uppercase;margin:0;line-height:.95;text-wrap:balance;letter-spacing:.01em}
[dir=rtl] h1,[dir=rtl] h2{font-family:"IBM Plex Sans Arabic",sans-serif;font-weight:600;text-transform:none;line-height:1.3;letter-spacing:0}
h1{font-size:clamp(2.6rem,6.5vw,4.6rem)}
h2{font-size:clamp(1.8rem,3.5vw,2.4rem)}
.h3{font-size:1rem;margin:12px 0 0;font-weight:600}
.lead{max-width:62ch;margin:0;color:var(--muted)}
.stamp{font-family:var(--mono);font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:8px}
.stamp::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sea);box-shadow:0 0 0 4px var(--sea-soft)}
.block{display:grid;gap:14px}

.now{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--sea);border-radius:var(--radius);padding:16px;display:grid;gap:12px}
.now-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.now-head select{padding:6px 8px;font-weight:600}
.now-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.now-grid>div{background:var(--surface);padding:10px 10px 8px;display:grid;gap:2px}
.now-grid .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
[dir=rtl] .now-grid .k{font-family:var(--body);letter-spacing:0}
.now-grid .v{font-family:var(--display);font-weight:600;font-size:2rem;line-height:1;font-variant-numeric:tabular-nums}
.now-grid .v small{font-family:var(--mono);font-size:.7rem;font-weight:400;color:var(--muted);margin-inline-start:3px}
.now-foot{font-size:.84rem;color:var(--muted)}
@media (max-width:420px){.now-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Warnings */
.warnings{display:grid;gap:8px}
.warn{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:2px;padding:12px 16px;border-inline-start:4px solid var(--rough);background:var(--rough-soft);border-radius:0 var(--radius) var(--radius) 0;font-size:.95rem}
[dir=rtl] .warn{border-radius:var(--radius) 0 0 var(--radius)}
.warn:hover{filter:brightness(.98)}
.warn:focus-visible{outline:2px solid var(--flag);outline-offset:2px}
.warn b{color:var(--rough)}
.warn.mod{border-color:var(--flag);background:var(--flag-soft)}
.warn.mod b{color:var(--flag)}

/* Map */
.map-tools{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.layers{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.layers button{border:0;background:none;padding:8px 15px;cursor:pointer;font-size:.9rem;border-inline-end:1px solid var(--line)}
.layers button:last-child{border-inline-end:0}
.layers button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.arrows-tg{font-size:.88rem;color:var(--muted);display:flex;gap:6px;align-items:center;cursor:pointer}
.arrows-tg input{accent-color:var(--sea)}
.map-wrap{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
#map{height:min(70vh,640px);min-height:400px;background:#A9C6CF}
.field{image-rendering:auto}
.scale{position:absolute;bottom:22px;left:10px;z-index:500;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-family:var(--mono);font-size:.7rem;color:var(--muted);display:grid;gap:5px;min-width:210px;box-shadow:0 2px 8px rgba(12,36,48,.12)}
.scale .sc-t{color:var(--ink);font-weight:500}
.scale .bar{height:10px;border-radius:3px}
.scale .lbls{display:flex;justify-content:space-between}
.leaflet-container{font-family:var(--body)}
.leaflet-control-attribution{font-size:10px}
.port-ic{background:var(--surface);border:2px solid var(--ink);border-radius:50%;width:14px;height:14px;box-shadow:0 0 0 2px rgba(247,250,250,.6);transition:transform .15s}
.port-ic.sel{background:var(--flag);border-color:#0C2430;transform:scale(1.25)}
.port-lbl{font-family:var(--mono);font-size:11px;color:#0C2430;background:rgba(247,250,250,.9);padding:2px 6px;border-radius:4px;white-space:nowrap;border:0;box-shadow:0 1px 3px rgba(12,36,48,.18)}
.port-lbl b{font-weight:600}
.port-lbl span{color:#4B6570}
.port-lbl.sel{background:#0C2430;color:#F7FAFA;z-index:700}
.port-lbl.sel span{color:#E5AE4A}
.port-lbl::before{display:none}
.lowzoom .port-lbl.minor:not(.sel){display:none}
.wa{pointer-events:none}
.wa svg{display:block;overflow:visible}
.wa line{stroke:var(--arrow);stroke-width:1.8}
.wa polygon{fill:var(--arrow)}

/* Timeline */
.timeline{display:flex;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px}
.play{width:42px;height:42px;border-radius:50%;border:0;background:var(--ink);color:var(--bg);cursor:pointer;flex:none;font-size:.9rem}
.track{flex:1;min-width:0;display:grid;gap:2px}
#slider{width:100%;margin:0;accent-color:var(--sea)}
.ticks{display:grid;grid-template-columns:repeat(7,1fr);font-family:var(--mono);font-size:.7rem;color:var(--muted)}
.ticks span{border-inline-start:1px solid var(--line);padding-inline-start:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticks span.cur{color:var(--ink);font-weight:500}
.tlabel{font-family:var(--mono);font-size:.88rem;min-width:150px;text-align:end;font-variant-numeric:tabular-nums}
@media (max-width:640px){.ticks{display:none}.tlabel{min-width:auto;font-size:.8rem}}

/* Port panel */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.sub{color:var(--muted);font-size:.9rem;margin-top:6px}
select{padding:8px 10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:6px}
.psum{max-width:75ch;margin:0;font-size:1.02rem}
.mg-box{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:8px}
.mg-box svg{display:block;width:100%;min-width:760px;height:auto}
.mg-box text{font-family:var(--mono);font-size:10.5px;fill:var(--muted)}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.legend>span{display:inline-flex;gap:6px;align-items:center}
.sw{display:inline-block;width:14px;height:10px;border-radius:2px}
.sw.line{height:3px;background:var(--wind)}
.sw.dash{height:0;border-top:2px dashed var(--wind);border-radius:0}
.tbl{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.88rem}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:center;font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:0}
th:first-child,td:first-child{text-align:start}
th{font-family:var(--mono);font-size:.72rem;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
[dir=rtl] th{font-family:var(--body);letter-spacing:0}
th.cur,td.cur{background:var(--sea-soft)}
td.hi{color:var(--rough);font-weight:600}
td.md{color:var(--flag);font-weight:600}
.dg{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font-family:var(--mono);font-size:.78rem;font-weight:500;color:#fff}
.dg0,.dg1,.dg2{background:#2a9d8f}.dg3{background:#8ac926;color:#0C2430}.dg4{background:#e9c46a;color:#0C2430}.dg5{background:#e76f51}.dg6{background:#9d0208}.dg7{background:#6a040f}.dg8{background:#370617}

/* Bulletin */
.days{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.day{border:1px solid var(--line);background:var(--surface);padding:7px 12px;border-radius:8px;cursor:pointer;display:grid;text-align:start;min-width:86px}
.day small{font-family:var(--mono);font-size:.7rem;color:var(--muted)}
.day b{font-family:var(--display);font-size:1.15rem;font-weight:600}
.day[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.day[aria-pressed=true] small{color:var(--bg)}
.bulletin{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:860px){.bulletin{grid-template-columns:1fr}}
.reg{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:grid;gap:8px;align-content:start}
.reg h3{margin:0;font-family:var(--display);font-size:1.35rem;text-transform:uppercase;font-weight:600;line-height:1.1}
[dir=rtl] .reg h3{font-family:inherit;text-transform:none}
.reg p{margin:0;font-size:.93rem}
.pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.78rem;padding:4px 10px;border-radius:999px;width:fit-content;background:var(--sea-soft);color:var(--sea)}
[dir=rtl] .pill{font-family:var(--body)}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.p-calm{background:var(--sea-soft);color:var(--sea)}
.p-mod{background:var(--flag-soft);color:var(--flag)}
.p-rough{background:var(--rough-soft);color:var(--rough)}

/* Seasons */
.seasons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:860px){.seasons{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.seasons{grid-template-columns:1fr}}
.season{border-top:3px solid var(--line);padding-top:10px;display:grid;gap:6px;align-content:start}
.season.on{border-top-color:var(--sea)}
.season h3{margin:0;font-family:var(--display);font-size:1.6rem;text-transform:uppercase;line-height:1}
[dir=rtl] .season h3{font-family:inherit;font-size:1.3rem}
.season .m{font-family:var(--mono);font-size:.74rem;color:var(--muted)}
.season p{margin:0;font-size:.92rem}
.windy{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;aspect-ratio:16/10;max-width:100%}
.windy iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:560px){.windy{aspect-ratio:3/4}}
.foot{max-width:1180px;margin:0 auto;padding:20px max(16px,env(safe-area-inset-left)) 40px;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem;display:grid;gap:6px}
.foot p{margin:0}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.port-ic{transition:none}}

/* Error state, retry button, map fallback */
.stamp .err{color:var(--rough)}
.stamp .retry{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:6px;padding:3px 10px;cursor:pointer;font-family:var(--body);font-size:.8rem}
.map-off{display:grid;place-items:center;height:100%;padding:24px;text-align:center;color:#0C2430;font-family:var(--body)}

/* Install-app button (shown only when the browser offers installation) */
.install{background:#E5AE4A;color:#0C2430;border:0;border-radius:8px;padding:6px 12px;font-weight:600;font-size:.85rem;cursor:pointer;white-space:nowrap}
.install[hidden]{display:none}
@media (display-mode:standalone){.install{display:none}}

/* Map options, numbers on the map, place-name layer, point popup */
.map-opts{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.map-opts select{padding:5px 8px;font-size:.85rem}
.map-hint{margin:-6px 0 0;font-size:.8rem;color:var(--muted)}
.gv{pointer-events:none;text-align:center}
.gv span{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:500;color:#0C2430;background:rgba(247,250,250,.82);padding:0 4px;border-radius:3px;line-height:15px}
.vzoom .gv.odd{display:none}
#map[data-base="sat"] .wa line{stroke:#F7FAFA}#map[data-base="sat"] .wa polygon{fill:#F7FAFA}
.leaflet-container{cursor:crosshair}
.pp .leaflet-popup-content{margin:10px 12px;font-family:var(--body);font-size:.85rem;color:#0C2430;min-width:200px}
.pp-h{display:grid;gap:2px;margin-bottom:6px}
.pp-h b{font-size:.92rem}
.pp-h span,.pp-t{font-family:var(--mono);font-size:.72rem;color:#4B6570}
.pp .pill{margin:6px 0}
.pp table{min-width:0;width:100%;font-size:.84rem}
.pp td{padding:3px 0;border-bottom:1px solid #E1E9EB;text-align:end}
.pp td:first-child{text-align:start;color:#4B6570}
.pp-n{margin:6px 0 0;color:#4B6570;font-size:.78rem}

/* Phone widths: keep the map section inside the screen */
.block{grid-template-columns:minmax(0,1fr)}
.layers{max-width:100%;overflow-x:auto;scrollbar-width:none}
@media (max-width:480px){.layers button{padding:7px 10px;font-size:.84rem;white-space:nowrap}.map-opts{gap:10px}}

/* Colour key in the "Right now" card */
.key{min-width:0;width:100%;font-size:.8rem;border-top:1px solid var(--line)}
.key caption{text-align:start;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 0 6px}
[dir=rtl] .key caption{font-family:var(--body);letter-spacing:0}
.key th{font-weight:600;color:var(--muted);font-size:.72rem;text-align:start;padding:4px 6px 4px 0;border-bottom:1px solid var(--line)}
.key td{padding:6px 6px 6px 0;text-align:start;vertical-align:middle;border-bottom:1px solid var(--line)}
.key tr:last-child td{border-bottom:0}
.key .pill{white-space:nowrap}
.key .lim{font-family:var(--mono);white-space:nowrap;color:var(--muted)}
@media (max-width:420px){.key .lim{white-space:normal}}