/* Thema's overgenomen uit HydrSol VMS (html_base.py): day + night.
   VMS-kleuren gemapt op de bestaande SeaData-tokennamen, zodat alle
   pagina's ongewijzigd blijven werken. Standaard = day. */
/* SCHUIFBALKEN. Stonden op de standaard van de browser en staken daardoor
   wit af tegen de grijze panelen. Via de variabelen, dus nachtmodus volgt
   vanzelf en er is geen tweede plek waar dit bepaald wordt.
   scrollbar-color is de standaard (Firefox); ::-webkit-scrollbar is de
   oudere weg die Chrome, Edge en Safari begrijpen. Allebei nodig. */
*{scrollbar-color:var(--surface-2) var(--surface);scrollbar-width:thin;}
::-webkit-scrollbar{width:12px;height:12px;}
::-webkit-scrollbar-track{background:var(--surface);}
::-webkit-scrollbar-corner{background:var(--surface);}
::-webkit-scrollbar-thumb{background:var(--surface-2);border-radius:6px;
  border:2px solid var(--surface);}
::-webkit-scrollbar-thumb:hover{background:var(--text-mut);}

:root, [data-theme="deme"] {
  --bg:        #141838;
  --surface:   #1e2458;
  --surface-2: #2a3170;
  --topbar:    #1e2458;
  --border:    #16193f;

  --acc:       #00b455;
  --acc-hi:    #14c866;
  --acc-dim:   #009247;

  --text:      #ffffff;
  --text-dim:  #b8c0e0;
  --text-mut:  #8890b8;

  --err:       #ff6b6b;
  --ok:        #37e08a;

  --radius:    12px;
  --radius-sm: 8px;
  --maxw:      420px;
}

[data-theme="night"] {
  --bg:        #070b14;
  --surface:   #04180f;
  --surface-2: #0a3d2a;
  --topbar:    #04180f;
  --border:    #1a2e48;

  --acc:       #00c864;
  --acc-hi:    #2ee68a;
  --acc-dim:   #00a854;

  --text:      #e2e8f0;
  --text-dim:  #5a7a9a;
  --text-mut:  #47607d;

  --err:       #ff6b6b;
  --ok:        #37e08a;

  --radius:    12px;
  --radius-sm: 8px;
  --maxw:      420px;
}

body { transition: background .25s, color .25s; }

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--acc-hi); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Topbalk */
/* Wit DEME-logo. Alleen zichtbaar in de deme-stand; in dark bestaat het
   element wel maar is het display:none, zodat de HTML gelijk blijft. */
.sd-deme-logo { display:none; height:57px; }
.sd-deme-schei { display:none; width:1px; height:40px;
  background: rgba(255,255,255,.25); }
[data-theme="deme"] .sd-deme-logo { display:block; }
[data-theme="deme"] .sd-deme-schei { display:block; }
[data-theme="deme"] .sd-top { padding-top:6px; padding-bottom:6px; }
/* Aptos alleen in de deme-stand. Lokaal font (Office 2023+); wie het niet
   heeft valt terug op de gewone stack. Geen webfont-download. */
[data-theme="deme"] body,
[data-theme="deme"] button,
[data-theme="deme"] input,
[data-theme="deme"] select,
[data-theme="deme"] textarea {
  font-family: "Aptos", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.sd-top {
  background: var(--topbar);
  color: #fff;
  padding: 12px 22px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
}
.sd-brand { display: flex; align-items: center; gap: 12px; }
.sd-brand .name { font-size: 16px; font-weight: 500; letter-spacing: .5px; color: #fff; }
.sd-brand .name b { color: var(--acc-hi); font-weight: 500; }
.sd-brand .sub { font-size: 10px; color: rgba(255,255,255,.45); letter-spacing: 1px; }
.sd-top-right { display: flex; align-items: center; gap: 10px; }

/* Taalknop */
.sd-lang { display: flex; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; overflow: hidden; }
.sd-lang a { padding: 4px 8px; font-size: 11px; color: rgba(255,255,255,.55); }
.sd-lang a.on { background: rgba(255,255,255,.15); color: #fff; }
.sd-lang a:hover { text-decoration: none; }

/* Dag/nacht-knop */
.sd-theme-btn { display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:6px; cursor:pointer;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
  color:#fff; }
.sd-theme-btn:hover { background: rgba(255,255,255,.18); }
.sd-theme-btn .th-day { display:none; }
.sd-theme-btn .th-night { display:inline-flex; }
[data-theme="night"] .sd-theme-btn .th-day { display:inline-flex; }
[data-theme="night"] .sd-theme-btn .th-night { display:none; }

/* Knoppen */
.sd-btn {
  height: 40px; padding: 0 18px;
  background: var(--acc); border: none; border-radius: var(--radius-sm);
  color: #fff; font-size: 14px; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  text-decoration: none;
}
.sd-btn:hover { background: var(--acc-dim); text-decoration: none; }
.sd-btn.full { width: 100%; }
.sd-btn.ghost { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); }
.sd-btn.ghost:hover { background: rgba(255,255,255,.15); }
.sd-btn.sm { height: 32px; padding: 0 14px; font-size: 13px; }

/* Kaart / paneel */
.sd-wrap { min-height: calc(100vh - 120px); display: flex; align-items: center; justify-content: center; padding: 28px 18px; }
.sd-card {
  width: 100%; max-width: var(--maxw);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px 24px;
}
.sd-card h1 { font-size: 19px; font-weight: 500; margin: 0 0 4px; }
.sd-card .lead { font-size: 13px; color: var(--text-dim); margin: 0 0 20px; }

/* Formulier (volgt form-design: 1 kolom, label boven veld) */
.sd-field { margin-bottom: 14px; }
.sd-field label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 5px; }
.sd-field input[type=text],
.sd-field input[type=email],
.sd-field input[type=password] {
  width: 100%; height: 40px; padding: 0 12px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-size: 14px;
}
.sd-field input:focus { outline: none; border-color: var(--acc); }
.sd-help { font-size: 11px; color: var(--text-mut); margin-top: 4px; }

.sd-check { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 16px; }
.sd-check input { margin-top: 3px; }
.sd-check label { font-size: 13px; color: var(--text-dim); }

/* Meldingen */
.sd-msg { padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 16px; }
.sd-msg.err { background: rgba(255,107,107,.12); color: var(--err); border: 1px solid rgba(255,107,107,.3); }
.sd-msg.ok  { background: rgba(55,224,138,.12); color: var(--ok); border: 1px solid rgba(55,224,138,.3); }

.sd-links { display: flex; justify-content: space-between; margin-top: 14px; font-size: 12px; }

/* Footer */
.sd-foot { text-align: center; font-size: 10px; color: var(--text-dim); padding: 18px 0; }

/* Landing-specifiek */
.sd-hero { text-align: center; padding: 34px 20px 6px; }
.sd-hero h1 { font-size: 24px; font-weight: 500; margin: 0 0 10px; }
.sd-hero p { max-width: 440px; margin: 0 auto; color: var(--text-dim); font-size: 14px; }
.sd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; padding: 22px 24px 8px; max-width: 760px; margin: 0 auto; }
.sd-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 8px; text-align: center; }
.sd-tile .t { font-size: 13px; font-weight: 500; margin-top: 6px; }
.sd-tile .s { font-size: 10px; color: var(--text-mut); }
.sd-nav-links { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; padding: 20px 24px; border-top: 1px solid var(--border); margin-top: 18px; }
.sd-nav-links a { font-size: 13px; }

@media (max-width: 480px) {
  .sd-links { flex-direction: column; gap: 6px; }
}

html,body{height:100%;margin:0;}
#map{position:fixed;inset:0;z-index:0;background:#0d2a3d;}
/* Kaartschaal gecentreerd onderaan, boven de bottombar. */
.leaflet-bottom.leaflet-left{left:50%;transform:translateX(-50%);}
.leaflet-control-scale{margin:0 0 64px 0 !important;}
/* LNDHH12: tandwiel in de Platforms-knop + keuzerij recente data. */
.sd-mp-cog{margin-left:auto;display:inline-flex;align-items:center;padding:0 3px;cursor:pointer;opacity:.8}
.sd-mp-cog:hover{opacity:1}
.sd-mp-keuze{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-top:2px}
.sd-mp-keuze .sd-mp-kl{grid-column:1/-1;font-size:10px}
.sd-mp-keuze .sd-vlagtog{justify-content:center;font-size:10px;padding:2px 3px}
.sd-mp-keuze .sd-mp-lblk{grid-column:1/-1}
/* LNDHH13: Hs/wind-label naast het platform, links of rechts van het icoon. */
.sd-mp-lblw{background:none;border:0;pointer-events:none}
.sd-mp-lbl{position:absolute;top:-7px;white-space:nowrap;pointer-events:none;
  font:600 10.5px/14px "IBM Plex Mono",ui-monospace,monospace;color:#000;
  text-shadow:0 0 2px #fff,0 0 3px #fff,0 0 4px #fff;}
.sd-mp-lbl.r{left:13px}
.sd-mp-lbl.l{right:13px}
/* LNDHH11: Hs-getal naast het satellietbolletje (vanaf schaal 20 km). */
.sd-sat-lbl{background:none;border:0;white-space:nowrap;pointer-events:none;
  font:600 10.5px/14px "IBM Plex Mono",ui-monospace,monospace;color:#fff;
  text-shadow:0 0 2px #061419,0 0 3px #061419,0 0 4px #061419;}
.leaflet-control-scale-line{background:rgba(11,31,22,.72);color:#e6f2ea;
  border:1px solid rgba(230,242,234,.7);border-top:none;font-size:11px;
  text-shadow:none;}
/* Waarde op de isobaar-lijn (om de ~300 km). */
.iso-lbl span{font-size:10px;font-weight:600;line-height:1;
  background:rgba(255,255,255,.7);padding:0 2px;border-radius:2px;
  white-space:nowrap;}
/* Permanente modelnaam op een golf-district (hoek van het vak). */
.district-lbl span{display:inline-block;white-space:nowrap;font-size:11px;
  font-weight:600;color:#fff;background:rgba(0,0,0,.5);padding:1px 6px;
  border-radius:3px;border-left:3px solid #888;transform:translate(4px,4px);}
.district-lbl.onder span{transform:translate(4px,calc(-100% - 4px));}
/* LNDHGZR: korte gebiedsnaam in het midden van een ForeCast-gebied (vanaf zoom 6). */
.fc-lbl span{display:inline-block;white-space:nowrap;font-size:11px;font-weight:600;
  color:#fff;background:rgba(0,0,0,.55);padding:1px 6px;border-radius:3px;
  border-left:3px solid #888;transform:translate(-50%,-50%);}
.leaflet-container{background:#0d2a3d;}

/* topbar over de kaart */
/* De vaste kop draagt nu de plaatsing; .sd-top zelf stroomt daarbinnen. */
.sd-kop{position:fixed;top:0;left:0;right:0;z-index:500;}
.sd-top{position:static;}

/* client-datablok in het midden van de topbalk (ingelogd) */
.sd-client{display:flex;align-items:center;gap:16px;flex:1;
  justify-content:center;color:#e6f2ea;}
.sd-cl-item{display:flex;flex-direction:column;line-height:1.1;}
.sd-cl-item .cl-k{font-size:9px;text-transform:uppercase;letter-spacing:.5px;
  color:rgba(230,242,234,.55);}
.sd-cl-item .cl-v{font-size:13px;font-weight:500;font-family:monospace;}
/* De positiecel krijgt een VASTE breedte. Hij springt anders mee met de
   lengte van de coordinaten - en die verandert bij elke positie-update, in
   graden-decimaal anders dan in graden-minuten. Alles rechts ervan
   verschoof daardoor voortdurend een paar pixels. 20 procent ruimer dan de
   langste vorm (graden-minuten met drie cijfers lengtegraad), zodat er ook
   op het zuidelijk halfrond en boven 100 graden oost niets afgekapt wordt. */
.sd-cl-item.pos{width:224px;flex:0 0 224px;}
.sd-cl-item.pos .cl-v{white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;}
.sd-cog-wrap{position:relative;}
.sd-cog{width:30px;height:30px;border-radius:7px;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  color:#e6f2ea;display:inline-flex;align-items:center;justify-content:center;}
.sd-cog:hover{background:rgba(255,255,255,.18);}
.sd-cogmenu{display:none;position:absolute;right:0;top:38px;min-width:200px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:10px;flex-direction:column;gap:4px;box-shadow:0 6px 20px rgba(0,0,0,.25);}
.sd-cogmenu.open{display:flex;}
.sd-cogmenu .cog-lbl{font-size:10px;color:var(--text-mut);margin-top:6px;}
.sd-cogmenu .cog-sel{font-size:12px;padding:5px 6px;border-radius:6px;
  border:1px solid var(--border);background:var(--bg);color:var(--text);
  cursor:pointer;}
.cog-mmsi{display:flex;gap:6px;margin-top:2px;}
.cog-inp{flex:1;min-width:0;padding:5px 8px;border-radius:4px;
  border:1px solid rgba(255,255,255,0.25);background:rgba(0,0,0,0.25);
  color:inherit;font-size:12px;}
.cog-opsl{padding:5px 10px;border-radius:4px;border:none;cursor:pointer;
  background:#2E7D32;color:#fff;font-size:12px;}
.sd-cl-wx{display:flex;align-items:center;gap:16px;}
.cl-hs{text-transform:none !important;}
.cog-chk{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text);
  cursor:pointer;margin-top:2px;}
.cog-chk input{cursor:pointer;}
@media(max-width:820px){.sd-client{display:none;}}

/* zij-tabs links */
.sd-sidetabs{position:fixed;left:12px;top:74px;z-index:500;
  display:flex;flex-direction:column;gap:8px;}
/* .75 en niet .8: de tabs laten de kaart 25 procent door in plaats van
   20 procent.
   De drie groene PANELEN blijven op .8 - die staan vol tekst en
   vlaggen, en die worden onleesbaar als de kaart er verder doorheen
   komt. */
.sd-tab{width:150px;min-height:35px;background:rgba(0,160,80,.75);
  border:1px solid rgba(0,160,80,.55);border-radius:10px;color:#000;
  cursor:pointer;display:flex;align-items:center;gap:9px;
  padding:5px 9px;text-align:left;}
.sd-tab:hover{background:rgba(0,180,90,.8);border-color:var(--acc);}
.sd-tab .ti{color:#000;display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;width:24px;height:24px;background:rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.25);border-radius:4px;}
.sd-tab .tx{display:flex;flex-direction:column;}
.sd-tab .tt{font-size:13px;font-weight:500;color:#000;}
.sd-tab.active{border-color:var(--acc);background:rgba(0,200,100,.8);}
.sd-tab.active .ti{color:#000;}

/* onderbalk */
/* De helpknop staat position:fixed op left:12px en zit dus NIET in deze
   flex-rij. Met justify-content:center werd de muispositie daardoor met de
   rest meegecentreerd en kwam hij midden op het scherm te hangen, ver van
   de knoppen waar hij bij hoort. Nu begint de rij LINKS, met padding-left
   die ruimte laat voor de helpknop, zodat de muispositie er direct naast
   staat en de bullseye erachter. De rechterknoppen (About/Profile/Logout)
   worden met margin-left:auto naar rechts geduwd. */
.sd-bottombar{position:fixed;left:0;right:0;bottom:0;z-index:500;
  max-height:65px;
  background:var(--topbar);display:flex;flex-wrap:wrap;
  justify-content:flex-start;align-items:center;
  gap:6px;padding:8px 10px 8px 52px;}
.sd-bottombar #aboutBtn{margin-left:auto;}
@media(max-width:900px){.sd-bottombar{justify-content:center;
  padding-left:10px;}
  .sd-bottombar #aboutBtn{margin-left:0;}}
/* Consensus in de onderbalk. Absoluut gecentreerd (left:50%), zodat het NIET
   meetelt voor de flex-hoogte van de balk - die blijft door de 36px-knoppen
   op ~52px en de ringen passen binnen de max-height:65px. De twee items
   staan ALTIJD naast elkaar (nowrap); de gedeelde uitklap-timer klapt naar
   BOVEN open (menu bottom:100%), de kaart in. */
.sd-cons{position:absolute;left:50%;transform:translateX(-50%);
  display:flex;flex-wrap:nowrap;align-items:center;gap:14px;
  pointer-events:none;}
.sd-cons-item{display:inline-flex;align-items:center;gap:8px;
  pointer-events:auto;white-space:nowrap;}
.sd-cons-ring{width:34px;height:34px;flex:0 0 34px;}
.sd-cons-baan{fill:none;stroke:rgba(255,255,255,.14);stroke-width:9;}
.sd-cons-boog{fill:none;stroke:rgba(255,255,255,.25);stroke-width:9;
  stroke-linecap:round;stroke-dasharray:226;stroke-dashoffset:226;
  transform:rotate(-90deg);transform-origin:center;
  transition:stroke-dashoffset .25s;}
.sd-cons-pct{fill:#e6f2ea;font-size:24px;font-weight:700;text-anchor:middle;}
.sd-cons-tekst{font-size:11px;line-height:1.35;}
.sd-cons-naam{color:#e6f2ea;}
.sd-cons-uit{color:#7fa091;font-size:10px;}
.sd-cons-tw{position:relative;pointer-events:auto;
  border-left:1px solid rgba(255,255,255,.14);padding-left:12px;}
.sd-cons-tw-btn{display:inline-flex;align-items:center;gap:3px;
  padding:2px 6px;border:1px solid var(--acc,#00c864);
  background:rgba(0,200,100,.25);border-radius:5px;
  font-size:10px;color:#e6f2ea;cursor:pointer;}
.sd-cons-tw-menu{display:none;position:absolute;bottom:calc(100% + 5px);
  left:12px;flex-direction:column;gap:2px;width:42px;
  background:#0a2417;border:1px solid rgba(255,255,255,.18);
  border-radius:6px;padding:3px;box-shadow:0 -3px 10px rgba(0,0,0,.5);
  z-index:20;}
.sd-cons-tw-menu.open{display:flex;}
.sd-cons-tw-opt{padding:2px 6px;border:0;background:none;border-radius:4px;
  font-size:10px;color:#9fbcae;text-align:center;cursor:pointer;}
.sd-cons-tw-opt:hover{background:rgba(0,200,100,.2);color:#e6f2ea;}
.sd-cons-tw-opt.aan{background:rgba(0,200,100,.25);color:#e6f2ea;}
.sd-bbtn{min-height:36px;display:inline-flex;align-items:center;
  padding:0 14px;border-radius:8px;color:#e6f2ea;font-size:13px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);}
.sd-bbtn:hover{background:var(--acc);text-decoration:none;}
/* LNDGIKD: Try it. Dit is de ENIGE uitnodiging die een bezoeker zonder
   account krijgt, dus hij draagt de accentrand in plaats van de grijze
   rustkleur van de andere knoppen. De uitgezette Create account-knop
   (.sd-bbtn-uit) en zijn melding (.sd-reg-meld) zijn hiermee vervallen. */
.sd-bbtn-try{border-color:var(--acc);}
/* LNDGFKA: infotekst in de topbalk (alleen open poort). Op smal scherm
   weg - daar is de topbalk al vol. */
.sd-top-info{align-self:center;margin-left:14px;font-size:12px;
  opacity:.85;color:#e6f2ea;}
.sd-top-info a{color:inherit;text-decoration:underline;}
@media(max-width:900px){.sd-top-info{display:none;}}
/* Het accountsoort in de onderbalk. Zelfde maat en gewicht als
   "SeaData" in de topbalk (.sd-brand .name), en het groen van de
   merknaam - zo leest het als een onderdeel van het merk en niet als
   nog een knop. */
.sd-soort{display:inline-flex;align-items:center;padding:0 10px;
  font-size:16px;font-weight:500;letter-spacing:.5px;
  color:var(--acc-hi);white-space:nowrap;}
.sd-posbtn{min-height:36px;min-width:36px;display:inline-flex;
  align-items:center;justify-content:center;padding:0 8px;border-radius:8px;
  color:#e6f2ea;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);cursor:pointer;}
.sd-posbtn:hover{border-color:#2d7ff9;}
/* v5.67: ACTIEVE ChartPos is GEEL - niet rood, niet groen, en in beide
   thema's hetzelfde. Rood botste met het DEME-groen en viel juist weg;
   geel is de universele let-op-kleur en steekt op beide achtergronden
   af. Knipperen doet alleen de rand, zodat de tekst leesbaar blijft. */
.sd-posbtn.aan{color:#1a1a1a;border-color:#ffd000;
  background:#ffd000;font-weight:600;
  animation:sd-posknipper 1.0s steps(1,end) infinite;}
@keyframes sd-posknipper{
  0%%,49%%  {box-shadow:0 0 10px 3px rgba(255,208,0,.75);
           border-color:#fff3a0;}
  50%%,100%%{box-shadow:0 0 0 0 rgba(255,208,0,0);
           border-color:#ffd000;}}
@media (prefers-reduced-motion:reduce){
  .sd-posbtn.aan{animation:none;}}

/* De ChartPos-waarschuwing. EXACT het patroon van .sd-dummy-warn, dat
   bewezen werkt: position FIXED en het element BUITEN #map. Een absolute
   div binnen de kaartcontainer verdwijnt achter de Leaflet-panes - dat
   was de eerste poging, en die bleef onzichtbaar. Enige verschil: hij
   staat op een derde van de hoogte i.p.v. in het midden, zodat hij de
   dummy-waarschuwing niet overlapt. */
.sd-chartpos-warn{position:fixed;top:33%%;left:50%%;
  transform:translate(-50%%,-50%%);z-index:650;pointer-events:none;
  display:none;text-align:center;color:#ffd000;opacity:0.75;
  font-weight:800;letter-spacing:2px;line-height:1.15;
  text-shadow:0 2px 14px rgba(0,0,0,0.75);
  font-size:clamp(22px,4.5vw,52px);white-space:nowrap;}
.sd-chartpos-warn.aan{display:block;}
.sd-chartpos-warn .dw-sub{display:block;font-size:0.3em;font-weight:600;
  letter-spacing:0.5px;margin-top:8px;white-space:normal;color:#ffe680;}

/* Muispositie. Oorspronkelijke maat (past zich aan de inhoud aan) -
   die was goed. Alleen de mouseout-handler is weg (zie de JS), zodat de
   laatste positie blijft staan en het vak niet inklapt naar een
   kastlijntje terwijl je naar een knop beweegt. */
.sd-muispos{min-height:36px;display:inline-flex;align-items:center;
  padding:0 12px;border-radius:8px;font-size:12px;white-space:nowrap;
  font-variant-numeric:tabular-nums;letter-spacing:.2px;color:#9fb4c4;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);}
.sd-bbtn.subtle{background:transparent;border-color:transparent;
  color:var(--text-mut);}

/* zijpaneel (tab-data / about) */
.sd-tabpanel{position:fixed;left:130px;top:74px;bottom:56px;width:320px;
  max-width:calc(100vw - 150px);z-index:490;background:var(--surface);
  background:color-mix(in srgb, var(--surface) 80%, transparent);
  border:1px solid var(--border);border-radius:12px;display:none;
  flex-direction:column;overflow:hidden;}
.sd-tabpanel.open{display:flex;}
/* About: ZELFDE breedte als de datapanelen (.big, zie hieronder), zodat
   het scherm niet van maat verspringt als je van SeaWind of SeaTidal naar
   About gaat. */
.sd-tabpanel.about{left:50%;transform:translateX(-50%);
  width:min(1310px,calc(100vw - 40px));top:84px;}
/* data-status: gecentreerd op het scherm, hoogte naar de inhoud */
.sd-tabpanel.status{left:50%;transform:translateX(-50%);top:70px;bottom:66px;
  width:min(1507px,calc(100vw - 40px));}
/* groot gecentreerd datascherm (optie B) */
.sd-tabpanel.big{left:50%;transform:translateX(-50%);
  width:min(1310px,calc(100vw - 40px));top:70px;bottom:66px;}
/* Overview is 15%% breder dan een tabpaneel: vier vlakken naast elkaar
   hebben meer ruimte nodig dan een tab met een enkele kolom. */
.sd-tabpanel.big.ov-paneel{width:min(1507px,calc(100vw - 40px));}
/* Oog-knop: zelfde blokmaat als de dag/nacht-knop ernaast. */
.sd-oog{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;border-radius:7px;cursor:pointer;
  border:1px solid #2d7d46;background:#2d7d46;color:#fff;}
.sd-oog:hover{filter:brightness(1.12);}
.sd-oog[aria-pressed="true"]{background:#1f5c33;border-color:#1f5c33;}
.sd-backbtn{background:var(--surface-2);border:1px solid var(--border);
  color:var(--text);border-radius:7px;padding:5px 12px;font-size:12px;
  cursor:pointer;}
.sd-backbtn:hover{border-color:var(--acc);}
/* Transit-routemodus op de kaart (tab_workability v1.53). De balk staat
   onderin BOVEN de kaart, niet in het paneel: tijdens het zetten van
   waypoints is het paneel juist weg. */
.sd-tr-balk{position:fixed;left:50%;transform:translateX(-50%);bottom:26px;
  display:none;align-items:center;gap:10px;flex-wrap:wrap;z-index:1200;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:8px 12px;box-shadow:0 6px 22px rgba(0,0,0,.45);max-width:94vw;
  font-size:12px;color:var(--text);}
.sd-tr-balk.aan{display:flex;}
.sd-tr-uitleg{font-size:10.5px;color:var(--text-dim);}
.sd-tr-hand{display:inline-flex;align-items:center;gap:5px;font-size:11px;
  color:var(--text-dim);cursor:pointer;user-select:none;white-space:nowrap;}
.sd-tr-hand input{margin:0;cursor:pointer;}
.sd-tr-hand.vast{opacity:.6;cursor:default;}
.sd-tr-hand.vast input{cursor:default;}
.sd-tr-routes{display:flex;gap:6px;flex-wrap:wrap;}
.sd-tr-chip{background:var(--surface-2);border:1px solid var(--border);
  border-left:4px solid var(--acc);color:var(--text);border-radius:7px;
  padding:3px 9px;font-size:11px;cursor:pointer;font-family:inherit;}
.sd-tr-chip.act{border-color:var(--acc);background:#1f5c33;}
.sd-tr-chip i{font-style:normal;color:var(--text-dim);font-size:10px;}
.sd-tr-klaar{background:var(--acc);border-color:var(--acc);}
.sd-tr-mk span{display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:#0d1a2a;
  border:2px solid #5ed0ff;color:#fff;font-size:11px;font-weight:600;
  box-shadow:0 1px 4px rgba(0,0,0,.5);}
.sd-tr-mk.klein span{width:16px;height:16px;border-width:1px;font-size:10px;
  opacity:.8;background:#1e2458;}
/* LNDHGCX: het nu-punt - waar het schip OP de route staat. Een schijf, geen
   nummer: het is geen waypoint maar een plek op de lijn. */
.sd-tr-nu span{display:block;width:14px;height:14px;border-radius:50%;
  background:#00b455;border:2px solid #fff;
  box-shadow:0 0 0 3px rgba(0,180,85,.35);}
/* subtabs Grafiek | Tabel */
.sd-subtabs{display:flex;gap:6px;margin-bottom:12px;border-bottom:1px solid var(--border);}
.sd-subtab{background:none;border:none;border-bottom:2px solid transparent;
  color:var(--text-dim);font-size:13px;padding:6px 12px;cursor:pointer;margin-bottom:-1px;}
.sd-subtab.act{color:var(--acc);border-bottom-color:var(--acc);font-weight:500;}
.sd-subtab:hover{color:var(--text);}
.sd-tabpanel-head{display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;border-bottom:1px solid var(--border);font-weight:500;
  position:relative;}
/* Time-window in de paneel-topbalk. Absoluut gecentreerd zodat de titel links
   en de Back-knop rechts in hun hoek blijven, ongeacht hun breedte. Per open
   paneel toont toonScherm() de juiste .tw-set; SeaTidal heeft er maar twee
   (24/48), de rest vier. De knoppen houden hun eigen class (sw-btn/wi-btn/
   scc-btn/sti-btn) en dus hun bestaande styling en delegated zoom-handlers. */
#tabPanelTw{position:absolute;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;}
.tw-set{gap:6px;align-items:center;}
/* Alleen de richting; 'display' blijft van regel 591/595 zodat het paneel
   verborgen blijft tot het de klasse .open krijgt. */
.sd-tabpanel{flex-direction:column;}
.sd-tabpanel-body{flex:1 1 auto;min-height:0;padding:14px;overflow:auto;font-size:14px;color:var(--text-dim);}
.sd-tabpanel-body .waarom{color:var(--text);font-weight:500;margin-top:10px;}
.sd-tabpanel-body .voordelen{margin:8px 0 12px;padding-left:18px;}
/* LNDHH09: handleidingen met QR-code in About. Wit vlak: zwarte blokjes op
   het donkere paneel zijn niet te scannen. */
.about-manuals{margin:6px 0 14px;}
.about-manuals h4{margin:0 0 4px;font-size:13px;}
.about-manuals p{margin:0 0 10px;font-size:12px;opacity:.8;}
.about-man-rij{display:flex;gap:14px;flex-wrap:wrap;}
.about-man{display:flex;gap:12px;align-items:center;padding:10px 12px;
  border:1px solid rgba(143,176,179,.35);border-radius:10px;min-width:250px;flex:1;}
.about-man img{background:#fff;padding:6px;border-radius:6px;flex:0 0 auto;}
.about-man b{display:block;font-size:14px;}
.about-man span{display:block;font-size:11.5px;opacity:.75;margin:2px 0 6px;}
.about-man a{display:inline-block;margin-right:12px;font-size:12.5px;}
.sd-tabpanel-body .voordelen li{margin-bottom:8px;}
.sd-x{background:none;border:none;color:var(--text-dim);font-size:22px;
  cursor:pointer;line-height:1;}
.sd-wait{color:var(--text-mut);font-style:italic;}

/* intro-overlay */
/* Betamelding: klein blokje rechtsonder.
   position:fixed en niet onderaan de body - de pagina is een schermvullende
   kaart (#map op inset:0), dus alles in de gewone stroom valt daarachter.
   Rechtsonder omdat daar niets staat: .sd-sidetabs zit linksboven,
   .sd-mapctl rechtsboven en .sd-tabpanel houdt bottom:56px aan. Het blokje
   is 24px hoog, dus het dekt niets af.
   Geen kruisje om weg te klikken: wie navigatiegegevens leest moet blijven
   zien dat ze onvolledig kunnen zijn. De volledige tekst staat in title=
   en in de welkomstoverlay. */
.sd-beta{padding:3px 10px;border-radius:4px;
  background:#FFB300;color:#3A2200;
  font-weight:700;font-size:11px;letter-spacing:1px;
  box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:help;
  user-select:none;flex:0 0 auto;}
.sd-beta-let{margin:10px 0 4px;padding:9px 11px;border-radius:5px;
  background:rgba(255,179,0,0.11);border-left:3px solid #FFB300;
  font-size:12px;line-height:1.55;text-align:left;}
@media(max-width:600px){.sd-beta{font-size:10px;}}
/* Asia Blue Highway-legenda: verschijnt als de Asia-box aanstaat. */
.asia-legenda{position:absolute;left:12px;bottom:48px;z-index:620;
  padding:8px 10px;border-radius:6px;
  background:var(--surface,rgba(12,30,22,.92));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 1px 5px rgba(0,0,0,.4);
  font-size:11px;line-height:1.5;color:var(--tekst,#e6eee9);
  user-select:none;pointer-events:none;}
.asia-leg-kop{font-weight:700;margin-bottom:5px;letter-spacing:.3px;}
.asia-leg-rij{display:flex;align-items:center;gap:6px;white-space:nowrap;}
.asia-leg-swatch{display:inline-block;width:16px;height:3px;border-radius:2px;
  flex:0 0 auto;}
@media(max-width:600px){.asia-legenda{left:8px;bottom:56px;font-size:10px;}}
.sd-overlay{position:fixed;inset:0;z-index:1000;background:rgba(5,20,12,.92);
  display:flex;align-items:center;justify-content:center;padding:20px;}
.sd-overlay-card{max-width:700px;width:100%;background:var(--surface);
  border:1px solid var(--border);border-radius:14px;padding:28px;
  max-height:88vh;overflow:auto;}
.sd-overlay-logo{display:flex;justify-content:center;margin-bottom:12px;}
.sd-overlay-card h1{font-size:22px;font-weight:500;text-align:center;margin:0 0 12px;}
.sd-overlay-card .intro{color:var(--text-dim);font-size:14px;margin:0 0 16px;}
.sd-overlay-card .waarom{font-weight:500;margin:0 0 8px;}
.sd-overlay-card .voordelen{padding-left:18px;margin:0 0 16px;}
.sd-overlay-card .voordelen li{margin-bottom:8px;color:var(--text-dim);font-size:14px;}
.sd-overlay-card .slot{font-size:14px;margin:0 0 18px;}

/* cookie-banner */
.sd-cookie{position:fixed;left:12px;right:12px;bottom:56px;z-index:1100;
  background:var(--surface-2);border:1px solid var(--border);border-radius:12px;
  padding:14px 16px;display:flex;gap:14px;align-items:center;
  flex-wrap:wrap;justify-content:space-between;}
.sd-cookie-text{font-size:13px;color:var(--text-dim);max-width:640px;}
.sd-cookie-btns{display:flex;gap:8px;}

/* Hydra-scheepje */
.hydra-icon{filter:drop-shadow(0 0 3px rgba(0,0,0,.6));}

/* UTC-badge in de topbalk: alle tijden op het platform zijn UTC */
.sd-utc{display:flex;align-items:center;gap:6px;padding:3px 10px;
  border:1px solid var(--border);border-radius:6px;background:var(--surface-2);
  font-size:11px;cursor:default;}
.sd-getij{display:flex;align-items:center;gap:6px;padding:3px 10px;
  border:1px solid var(--border);border-radius:16px;background:var(--surface-2);
  font-size:11px;white-space:nowrap;}
.sd-getij-pijl{font-size:13px;line-height:1;font-weight:700;}
.sd-getij-op{color:#2EA84F;}
.sd-getij-af{color:#D9342B;}
.sd-getij-kentering{color:#E0A000;}
.sd-getij-tekst{color:var(--text);font-weight:600;}
.sd-getij-vlg{color:var(--text-dim);font-family:monospace;font-size:10px;}
@media(max-width:760px){.sd-getij-vlg{display:none;}}
.sd-utc-lbl{color:var(--acc);font-weight:700;letter-spacing:.5px;}
.sd-utc-tijd{font-family:monospace;font-size:12px;color:var(--text);}
/* Voorbehoud: vast onder het gegevenspaneel en op de kaart */
.sd-disc{display:flex;gap:8px;align-items:flex-start;padding:9px 14px;
  border-top:1px solid var(--border);background:var(--surface-2);
  font-size:11px;line-height:1.5;color:var(--text-dim);flex:0 0 auto;}
.sd-disc strong{color:var(--text);font-weight:600;}
.sd-disc a{color:var(--acc);white-space:nowrap;}
.sd-disc-teken{color:#e0a000;font-size:13px;line-height:1.3;flex:0 0 auto;}
.sd-disc-kort{position:fixed;left:50%;transform:translateX(-50%);
  bottom:54px;z-index:520;display:flex;gap:6px;align-items:center;
  max-width:min(94vw,640px);padding:5px 12px;border-radius:20px;
  background:var(--surface-2);border:1px solid var(--border);
  font-size:11px;color:var(--text-dim);
  box-shadow:0 2px 10px rgba(0,0,0,.28);}
.sd-disc-kort a{color:var(--acc);white-space:nowrap;}
.sd-disc-tekst{flex:1 1 auto;}
.sd-disc-x{flex:0 0 auto;margin-left:2px;width:18px;height:18px;padding:0;
  border:none;background:none;color:var(--text-dim);font-size:16px;
  line-height:1;cursor:pointer;border-radius:4px;}
.sd-disc-x:hover{background:rgba(127,127,127,.18);color:var(--text);}
@media(max-width:640px){
  .sd-disc-kort{font-size:10px;padding:4px 10px;bottom:50px;}
}
/* weerboeien-tooltip */
.buoy-tip{text-align:left;font-size:11px;line-height:1.4;}
.buoy-ic{background:none;border:none;}
/* LNDHEPP: kaartlaag Platforms - rond logo, maat van de landvlaggetjes */
.mp-ic{background:none;border:none;}
.mp-ic svg{display:block;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.35));}
.mp-tip-s{font-size:10px;color:#6b7785;text-transform:uppercase;letter-spacing:.04em;}
/* weerboeien-kaartje (popup) */
.buoy-pop{font-size:12px;min-width:170px;}
.buoy-pop-t{font-weight:600;font-size:13px;margin-bottom:2px;}
.buoy-pop-ts{font-size:10px;color:var(--text-dim);margin-bottom:6px;}
.buoy-pop-g{font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:.03em;color:#0077b6;margin:6px 0 2px;}
.buoy-pop-tb{width:100%;border-collapse:collapse;}
.buoy-pop-tb td{padding:1px 0;vertical-align:top;}
.buoy-pop-tb td:first-child{color:var(--text-dim);padding-right:12px;
  white-space:nowrap;}
.buoy-pop-tb td:last-child{text-align:right;font-family:monospace;
  white-space:nowrap;}
/* Bulletinzinnen (JMA-kust): wel terugloop, links, gewoon lettertype.
   v5.57: table-layout fixed + max-width op de popup, anders rekt de tabel
   mee met de langste zin en loopt de tekst BUITEN het witte kader (de
   maxWidth van Leaflet begrenst alleen de wrapper, niet de tabel). */
.buoy-pop-tb{table-layout:fixed;width:100%%;}
/* v5.59: TWEE KEER ZO BREED (260 -> 520). De JMA-kustbulletins zijn hele
   zinnen; in een kolom van 260 px bleef er niets van over. */
.buoy-pop{max-width:520px;}
.buoy-pop-wrap .leaflet-popup-content{width:520px !important;max-width:92vw;}
/* Lange waarde op een EIGEN RIJ onder het label: het label houdt zijn
   plek, de zin krijgt de volle breedte. Vervangt het wringen in een
   smalle tweede kolom. */
.buoy-pop-tb tr.lang-rij td{padding:0 0 6px 0;white-space:normal;
  text-align:left;font-family:inherit;overflow-wrap:anywhere;
  color:var(--text);}
.buoy-pop-tb td.lang{white-space:normal;text-align:left;
  font-family:inherit;word-break:normal;overflow-wrap:anywhere;}
.buoy-pop-leeg{color:var(--text-dim);font-size:11px;}
.buoy-q{color:#e8a00a;font-weight:700;cursor:help;}
/* AIS-laag */
.ais-canvas{position:absolute;top:0;left:0;pointer-events:none;z-index:400;}
/* Waarschuwing bij een account zonder schip. Groot en midden in beeld,
   want het raakt ALLES wat eromheen staat: zonder AIS-positie gelden
   getij, golven, wind en stroming voor een vaste plek op de Noordzee en
   niet voor de gebruiker.
   pointer-events:none is essentieel - de tekst ligt over de kaart heen en
   mag klikken, slepen en zoomen niet tegenhouden. */
.sd-dummy-warn{position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%);z-index:650;pointer-events:none;
  display:none;text-align:center;color:#ffd400;opacity:0.5;
  font-weight:800;letter-spacing:1px;line-height:1.15;
  text-shadow:0 2px 14px rgba(0,0,0,0.55);
  font-size:clamp(26px,6vw,68px);white-space:nowrap;}
.sd-dummy-warn.aan{display:block;}
.sd-dummy-warn .dw-sub{display:block;font-size:0.34em;font-weight:600;
  letter-spacing:0.5px;margin-top:10px;white-space:normal;}
/* Windveld-laag: kleurvlak onder, deeltjes erboven, beide onder AIS */
.baltic-slider{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  z-index:600;background:var(--card,rgba(20,28,38,0.92));color:var(--text,#e8edf2);
  border:1px solid var(--border,#2a3846);border-radius:8px;padding:7px 12px;
  display:flex;align-items:center;gap:10px;box-shadow:0 2px 10px rgba(0,0,0,0.35);
  font-size:12px;}
.baltic-slider input[type=range]{width:220px;}

/* Weerbericht-popup op een districtvak. Leaflet zet zelf een smalle
   breedte; die moet ruimer, anders wordt een bulletin een kolom van drie
   woorden breed.

   GEEN max-height en GEEN overflow: een bulletin lees je in een keer, en
   een scrollbalk in een popup die na een halve minuut zelf dichtgaat is
   alleen maar in de weg. De popup wordt zo hoog als het bericht is.

   DE BREEDTE MOET HARD. v4.32 zette hier width:auto !important, en dat was
   precies verkeerd: Leaflet MEET de inhoud en zet zelf een inline width
   tussen minWidth en maxWidth. Met auto verviel die meting en kroop de
   popup samen tot de smalste breedte waarop de tekst nog paste - een
   kolom van drie woorden en honderden pixels hoog, terwijl maxWidth:640
   er gewoon stond. Nu een vaste breedte die op een smal scherm meebuigt.
   max-width:none op de wrapper, anders knijpt Leaflets eigen max-width
   hem alsnog terug. */
.vak-pop .leaflet-popup-content{margin:8px 12px;
  width:600px !important;max-width:none;}
.vak-pop .leaflet-popup-content-wrapper{border-radius:7px;max-width:none;}
.vak-pop .wi-syn-kaart{border:0;margin:0;padding:0;}

/* ForeCast-tab: legenda van de weerdiensten. */
.fc-uit{font-size:12.5px;line-height:1.5;margin:6px 0 10px;
  color:var(--text-dim);}
.fc-zoom{margin-top:12px;font-style:italic;}
.fc-legenda{display:flex;flex-direction:column;gap:7px;}
.fc-rij{display:flex;align-items:center;gap:10px;font-size:13px;}
.fc-vlak{display:inline-block;width:26px;height:16px;border-radius:3px;
  border:1.6px dashed;flex:0 0 auto;}
.fc-naam{font-weight:600;min-width:130px;}
.fc-wat{color:var(--text-dim);font-size:12px;}
/* Smal scherm: niet breder dan het venster. */
@media (max-width:760px){
  .vak-pop .leaflet-popup-content{width:78vw !important;}
}
.baltic-tlabel{min-width:150px;font-weight:600;font-variant-numeric:tabular-nums;}
.wv-canvas{position:absolute;top:0;left:0;pointer-events:none;}
.wv-lg{display:inline-flex;align-items:center;gap:2px;margin-right:4px;
  font-size:9px;color:#c2c8d0;}
.wv-lg i{width:8px;height:8px;border-radius:2px;display:inline-block;}
.wv-lg-e{font-size:9px;color:#8a919b;}
.wv-vlak{z-index:350;}
.wv-deeltjes{z-index:360;}
.sd-wv-legenda{display:none;margin-top:2px;font-size:9px;color:#c2c8d0;
  font-family:monospace;line-height:1.2;}
.sd-wmodus{display:flex;gap:4px;margin:4px 0 2px;flex-wrap:wrap;}
.sd-wmb{padding:2px 7px;font-size:10px;line-height:1.4;cursor:pointer;
  border:1px solid #b8c0cc;border-radius:4px;background:#fff;color:#333;}
.sd-wmb.act{background:#1c6fb3;color:#fff;border-color:#1c6fb3;}
.sd-ais-telling{margin-left:5px;font-size:10px;color:var(--text-dim);
  font-family:monospace;}
.sd-ais-zoekwrap{position:relative;margin-top:6px;display:none;}
.sd-ais-zoek{width:100%;box-sizing:border-box;padding:4px 8px;font-size:12px;
  border:1px solid var(--border);border-radius:5px;background:var(--surface-2);
  color:var(--text);}
.sd-ais-zoek:disabled{opacity:.45;cursor:not-allowed;}
.sd-ais-storing{color:#C9541F;font-weight:600;}
.sd-ais-treffers{position:absolute;top:100%;left:0;right:0;z-index:1200;
  background:var(--surface-2);border:1px solid var(--border);border-top:none;
  border-radius:0 0 5px 5px;max-height:210px;overflow-y:auto;display:none;}
.sd-ais-treffer{padding:5px 8px;font-size:12px;cursor:pointer;
  border-bottom:1px solid var(--border);}
.sd-ais-treffer:last-child{border-bottom:none;}
.sd-ais-treffer:hover{background:rgba(127,127,127,0.14);}
.sd-ais-treffer .mmsi{font-size:10px;color:var(--text-dim);
  font-family:monospace;display:block;}
.sd-ais-tip{position:absolute;z-index:1100;pointer-events:none;display:none;
  background:var(--surface-2);border:1px solid var(--border);border-radius:6px;
  padding:5px 9px;font-size:12px;white-space:nowrap;
  box-shadow:0 2px 10px rgba(0,0,0,.35);}
.sd-ais-tip .n{font-weight:600;}
.sd-ais-tip .d{font-size:10px;color:var(--text-dim);font-family:monospace;}
.sd-ais-legenda{display:none;margin-top:7px;padding-top:7px;
  border-top:1px solid var(--border);}
.sd-ais-leg{display:flex;align-items:center;gap:6px;font-size:10px;
  color:#c2c8d0;line-height:1.6;}
.sd-ais-vlek{width:9px;height:9px;border-radius:2px;flex:0 0 9px;
  border:1px solid rgba(0,0,0,.45);}
.sd-ais-leg-voet{margin-top:4px;font-size:10px;color:#c2c8d0;
  opacity:.8;}
/* AIS-overzichtstab: legenda + lichte canvas-kaart */
.sd-aist-kop{font-size:13px;color:var(--text);margin-bottom:8px;}
.sd-aist-tel{font-weight:700;}
.sd-aist-legrij{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:10px;}
.sd-aist-leg{display:flex;align-items:center;gap:5px;font-size:11px;
  color:var(--text-dim);}
.sd-aist-vlek{width:10px;height:10px;border-radius:2px;
  display:inline-block;flex:0 0 auto;}
.sd-aist-embed{width:100%;min-height:520px;border-radius:8px;
  overflow:hidden;background:#0d1b26;}
.sd-aist-bron{font-size:11px;color:var(--text-dim);margin-top:8px;}
/* golfmodel-districten legenda */
.sd-wave-legenda{display:none;margin-top:7px;padding-top:7px;
  border-top:1px solid var(--border);}
/* Legenda-tekst binnen de GROENE panelen zwart. .sd-ais-leg staat op
   #c2c8d0 omdat hij ook in donkere panelen wordt gebruikt; die blijft
   dus staan, en hier wordt hij alleen overschreven waar de achtergrond
   groen is. Zonder deze regel is lichtgrijs op groen niet te lezen. */
.sd-mapctl .sd-ais-leg,.sd-hoek .sd-ais-leg,
.sd-mapctl .sd-ais-leg-voet,.sd-hoek .sd-ais-leg-voet,
.sd-mapctl .sd-radar-t,.sd-hoek .sd-radar-t{color:#0f0f0f;}
/* Satellite-legenda (LNDHGZK) */
.sd-sat-rij{display:flex;align-items:center;gap:5px;font-size:10px;margin-top:5px;cursor:pointer;}
.sd-sat-rij input{margin:0;}
.sd-sat-voet{margin-top:5px;font-size:9.5px;opacity:.85;line-height:1.4;}
.sd-wave-vlek{width:14px;height:0;flex:0 0 14px;
  border-top:2px dashed #888;display:inline-block;}
/* rain radar legenda */
.sd-radar-legenda{display:none;margin-top:4px;padding-top:4px;
  border-top:1px solid var(--border);}
.sd-radar-t{font-size:10px;color:#c2c8d0;margin-bottom:3px;}
.sd-radar-bar{display:flex;height:10px;border-radius:3px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);}
.sd-radar-c{flex:1 1 auto;}
.sd-radar-sc{display:flex;justify-content:space-between;font-size:9px;
  color:#c2c8d0;margin-top:2px;}
/* v5.41: de Waves- en Wind-legenda blijven HORIZONTAAL maar half zo hoog:
   de kleurbalk 5px i.p.v. 10px. Alleen golfLegenda en wvLegenda dragen de
   -half klasse; radar/AIS houden de volle 10px. (De verticale variant uit
   v5.40 is vervallen.) */
.sd-radar-bar-half{height:5px;}
/* dichtheidsschuif onder de legenda van waves en wind */
.sd-areas-lijst{padding:2px 0 0 4px;}
.sd-areas-lijst label{display:flex;align-items:center;gap:5px;
  font-size:10px;line-height:1.5;cursor:pointer;color:#0f0f0f;}
.sd-areas-lijst input{margin:0;width:11px;height:11px;cursor:pointer;}
.sd-areas-lijst .sd-ar-stip{width:8px;height:8px;border-radius:2px;
  flex:0 0 8px;}
.sd-areas-lijst .sd-ar-nm{overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;}
.sd-dens{display:flex;align-items:center;gap:6px;margin-top:5px;}
.sd-dens-r{flex:1 1 auto;min-width:0;height:14px;margin:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;background:transparent;}
.sd-dens-r:focus{outline:none;}
/* track */
.sd-dens-r::-webkit-slider-runnable-track{height:3px;border-radius:2px;
  background:rgba(15,15,15,.22);}
.sd-dens-r::-moz-range-track{height:3px;border-radius:2px;
  background:rgba(15,15,15,.22);}
/* thumb */
.sd-dens-r::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:12px;height:12px;border-radius:50%;background:#33383f;
  border:1px solid rgba(255,255,255,.65);margin-top:-4.5px;
  box-shadow:0 1px 2px rgba(0,0,0,.3);transition:background .15s;}
.sd-dens-r::-moz-range-thumb{width:12px;height:12px;border-radius:50%;
  background:#33383f;border:1px solid rgba(255,255,255,.65);
  box-shadow:0 1px 2px rgba(0,0,0,.3);}
.sd-dens-r:hover::-webkit-slider-thumb{background:#1c2026;}
.sd-dens-r:hover::-moz-range-thumb{background:#1c2026;}
.sd-dens-v{flex:0 0 26px;font-size:9px;color:#c2c8d0;text-align:right;
  font-variant-numeric:tabular-nums;}
.sd-mapctl .sd-dens-v,.sd-hoek .sd-dens-v{color:#0f0f0f;}
/* data-status paneel (klok) */
.stp-g{font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;color:var(--text-dim);padding:12px 0 4px;}
.stp-ring-grid{display:grid;grid-template-columns:repeat(8,1fr);
  gap:10px 6px;padding:6px 0 4px;}
@media(max-width:560px){.stp-ring-grid{grid-template-columns:repeat(4,1fr);}}
.stp-ring-item{display:flex;flex-direction:column;align-items:center;
  gap:2px;min-width:0;}
.stp-ring-naam{font-size:10px;line-height:1.15;text-align:center;
  color:var(--text);max-width:100%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;}
.stp-ring-svg{width:52px;height:52px;flex:0 0 52px;}
.stp-ring-baan{fill:none;stroke:rgba(255,255,255,.14);stroke-width:9;}
.stp-ring-boog{fill:none;stroke-width:9;stroke-linecap:round;
  stroke-dasharray:226;transform:rotate(-90deg);transform-origin:center;
  transition:stroke-dashoffset .25s,stroke .25s;}
.stp-ring-pct{font-size:22px;font-weight:700;text-anchor:middle;}
.stp-ring-int{font-size:9px;line-height:1.15;text-align:center;
  color:var(--text-dim);font-family:ui-monospace,monospace;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.stp-legenda{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;
  padding-top:10px;border-top:1px solid var(--border);
  font-size:10px;color:var(--text-dim);}
.stp-leg{display:flex;align-items:center;gap:4px;}
.stp-v{width:11px;height:11px;border-radius:3px;}
.stp-v.z1{background:#137a3c;}.stp-v.z2{background:#57b65b;}
.stp-v.z3{background:#f0c419;}.stp-v.z4{background:#f28c1c;}
.stp-v.z5{background:#e23b32;}
.stp-voet{margin-top:10px;font-size:11px;color:var(--text-dim);line-height:1.5;}
.stp-leeg{color:var(--text-dim);font-size:12px;padding:10px 0;}
/* haven-tooltip: bewust GEEN eigen kader of achtergrond meer. De boei- en
   stationtooltips en de popups gebruiken de standaardvorm van Leaflet (wit,
   met pijltje); de havenvlag had een eigen donker kader en viel daardoor uit
   de toon. Alleen tekstopmaak blijft, zoals bij .buoy-tip. */
.haven-tip{text-align:left;font-size:11px;line-height:1.4;}
.hv-getij{margin-top:4px;font-size:11px;line-height:1.5;
  border-top:1px solid var(--border);padding-top:4px;}
.hv-hw{display:inline-block;min-width:22px;color:#43a047;font-weight:600;}
.hv-lw{display:inline-block;min-width:22px;color:#E24B4A;font-weight:600;}
.hv-nu{display:inline-block;min-width:22px;color:var(--text-dim);}
.hv-vlak{color:var(--text-dim);font-size:10px;}
.hv-utc{margin-top:3px;font-size:10px;color:var(--text-dim);opacity:.8;}

/* kaartlaag-kiezer (rechtsboven, zoals SeaChart) */
.sd-mapctl{position:fixed;right:12px;top:74px;z-index:500;
  background:rgba(0,160,80,.8);border:1px solid rgba(0,160,80,.55);
  border-radius:10px;
  padding:8px 10px;display:flex;flex-direction:column;gap:4px;
  /* Gelijk aan .sd-hoek-r. web_style zet * {box-sizing:border-box}
     globaal, dus dit is de BUITENmaat - padding en rand horen er NIET
     bij opgeteld te worden. Dat was de fout in v4.56. */
  width:150px;}
.sd-mapctl-lbl{font-size:10px;color:#000;}
/* LNDHGZA - WERELDDELEN. Het opschrift met rechts een tandwiel, en daarachter
   een menu. De knoppen van een uitgezet werelddeel verdwijnen HIER en onder
   Tide stations.
   Dat gebeurt met CSS en niet met JavaScript, met opzet: data-sdregio staat
   al bij de eerste pixel op <html> (app.py zet hem), dus er is geen moment
   waarop een knop die uit hoort te staan toch even in beeld komt - dezelfde
   fout die KPN1I1I moest herstellen. Een nieuwe laag hoeft alleen
   data-regio te dragen; hier hoeft dan niets bij. */
/* Vastgezet op demo/try-it (LNDHGZD): zichtbaar, leesbaar, niet te bedienen.
   Niet weghalen - je moet kunnen zien MET WAT er gerekend is. */
.wk-vast{opacity:.72;cursor:not-allowed;}
.sd-mapctl-kopregel{display:flex;align-items:center;gap:6px;}
.sd-mapctl-kopregel .sd-mapctl-lbl{flex:1;}
/* LNDHGZS: Map layer ingeklapt - alleen de kopregel blijft staan. */
.sd-mapctl.ingeklapt > :not(.sd-mapctl-kopregel){display:none !important;}
.sd-klap-knop{display:inline-grid;place-items:center;width:18px;height:18px;padding:0;
  border:1px solid rgba(0,0,0,.35);border-radius:4px;background:rgba(255,255,255,.35);
  color:#000;cursor:pointer;}
.sd-klap-knop svg{transition:transform .15s;}
.sd-mapctl.ingeklapt .sd-klap-knop svg{transform:rotate(180deg);}
@media (prefers-reduced-motion:reduce){.sd-klap-knop svg{transition:none;}}
.sd-regio-knop{width:18px;height:18px;padding:0;border-radius:4px;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.18);color:#0f0f0f;}
.sd-regio-knop:hover{background:rgba(0,0,0,.14);}
.sd-regio-knop[aria-expanded="true"]{background:rgba(0,0,0,.2);}
.sd-regio-menu{margin:4px 0 6px;padding:7px 8px;border-radius:6px;
  background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.14);}
.sd-regio-menu[hidden]{display:none;}
.sd-regio-t{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#3a3a3a;margin-bottom:4px;}
.sd-regio-menu label{display:flex;align-items:center;gap:6px;font-size:11px;
  color:#0f0f0f;cursor:pointer;padding:1px 0;}
.sd-regio-menu input{cursor:pointer;margin:0;}
.sd-regio-voet{margin-top:5px;font-size:9.5px;line-height:1.35;color:#3a3a3a;}

/* Een uitgezet werelddeel: weg uit beeld. EEN regel per werelddeel dekt
   zowel de kaartlagen als de vlaggen van Tide stations, want beide dragen
   data-regio. */
/* LET OP DE EERSTE VOORWAARDE: html[data-sdregio]. Zonder die eis matcht
   :not([data-sdregio~="asia"]) OOK een pagina waar het attribuut helemaal
   ONTBREEKT, en dan is ineens ALLES verborgen. Dat gebeurt echt: een pagina
   die buiten een verzoek gerenderd wordt (de toetsen doen dat) krijgt het
   attribuut niet. De veilige kant is open: geen attribuut = alles tonen,
   precies de standaard die app.py ook aanhoudt. */
html[data-sdregio]:not([data-sdregio~="eu"]) [data-regio="eu"],
html[data-sdregio]:not([data-sdregio~="asia"]) [data-regio="asia"],
html[data-sdregio]:not([data-sdregio~="africa"]) [data-regio="africa"],
html[data-sdregio]:not([data-sdregio~="america"]) [data-regio="america"]{display:none !important;}
/* LNDHFXS: het lijstje onder de knop Routes. Zwart zoals de rest van het
   kaartlaagblok - var(--text-dim) is grijs en dat leest niet op het groen. */
.sd-rt-lijst{font-size:10px;color:#000;line-height:1.3;margin-top:2px;
  word-break:break-word;}
/* Leeg = niets: anders staat er een streepje ruimte onder de knop. In de
   huisstijl New krijgt hij lichte tekst (kaart_nieuw), want daar is het
   paneel donker. */
.sd-rt-lijst:empty{display:none;}
.sd-mapctl-sel{width:100%;font-size:11px;padding:2px 6px;border-radius:6px;
  line-height:1.3;
  border:1px solid rgba(0,160,80,.55);background:rgb(255,255,255);color:#0f0f0f;
  cursor:pointer;}
.sd-mapctl-chk{font-size:11px;color:#000;display:flex;
  align-items:center;gap:6px;cursor:pointer;}
.sd-mapctl-kop{font-size:11px;font-weight:600;color:#000;display:flex;
  align-items:center;gap:6px;cursor:pointer;user-select:none;padding:1px 0;}
.sd-caret{width:0;height:0;border-left:5px solid currentColor;
  border-top:4px solid transparent;border-bottom:4px solid transparent;
  transition:transform .15s;flex:0 0 5px;}
.sd-mapctl-kop.open .sd-caret{transform:rotate(90deg);}
.sd-mapctl-sub{margin-left:13px;}
.sd-vlagrij{display:flex;flex-direction:column;gap:4px;align-items:stretch;}
/* Alleen Tide stations: de vlaggen in TWEE kolommen, zodat het blok ongeveer
   half zo hoog wordt bij dezelfde breedte. Komt NA .sd-vlagrij, dus grid
   wint van de column-flex. Overlay (rechtsonder) houdt gewoon .sd-vlagrij en
   blijft een kolom. De knopjes worden een tikje kleiner zodat er twee naast
   elkaar passen in de 150px - hogere specificiteit (twee classes), dus dit
   raakt alleen de knoppen binnen de 2-koloms rij, niet die in Overlay. */
.sd-vlagrij-2{display:grid;grid-template-columns:1fr 1fr;gap:3px;}
.sd-vlagrij-2 .sd-vlagtog{font-size:9px;gap:3px;padding:2px 3px;}
.sd-vlagrij-2 .sd-vlagimg{width:13px;height:10px;}
/* LNDGEJL: de pi-glyph van de 50km-knop neemt de plek en breedte van een
   vlagafbeelding in, zodat de knop het ritme van de rij houdt. In de
   50km-modus dimt de rij: alleen de LANDknoppen (data-laag), de 50km-knop
   zelf blijft op volle sterkte - zo is te zien dat de vlaggen even niet
   gelden. */
.sd-50kpi{width:13px;text-align:center;font-size:12px;line-height:10px;
  font-weight:700;flex:0 0 auto;}
.sd-vlagrij-2.sd-50k-dim .sd-vlagtog[data-laag]{opacity:.35;}
/* v5.70: het wereldbol-icoon op de LibreWXR-knop staat op de plek van een
   vlag. Zelfde blokmaat als .sd-vlagimg zodat de knoppen even breed
   blijven; currentColor laat hem meegrijzen in de uit-stand. */
.sd-vlagico{display:inline-flex;align-items:center;justify-content:center;
  width:13px;height:10px;line-height:0;}
.sd-vlagico svg{width:11px;height:11px;display:block;}
.sd-wxr-voet{font-size:9px;opacity:.75;margin-top:3px;}
/* Hoekblokken linksonder (Tide stations) en rechtsonder (Overlay). Zelfde
   groene stijl als .sd-mapctl. De body staat BOVEN de titel, dus uitklappen
   groeit naar boven (bottom blijft vast). */
.sd-hoek{position:fixed;bottom:64px;z-index:500;background:rgba(0,160,80,.8);
  border:1px solid rgba(0,160,80,.55);border-radius:10px;padding:6px 8px;
  display:flex;flex-direction:column;gap:4px;min-width:118px;max-width:200px;}
.sd-hoek-l{left:12px;width:150px;}
/* Vaste breedte: zonder dat verspringt het hele blok zodra een legenda
   verschijnt of een naam langer is. De knoppen zijn allemaal even
   breed en dat hoort het blok ook te zijn. */
.sd-hoek-r{right:12px;width:150px;}
.sd-hoek .sd-mapctl-sub{margin-left:0;}
.sd-hoek .sd-radar-legenda,.sd-hoek .sd-wave-legenda{width:100%;}
.sd-hoek-body{margin-left:0;}
.sd-hoek-titel{font-size:12px;font-weight:700;
  border-top:1px solid rgba(0,0,0,.18);padding-top:4px;margin-top:2px;}
/* Vlaggetje IN PLAATS VAN het pijltje in een kopje van de kaartlaag-
   kiezer. Zelfde maat als de vlaggen bij de radarkeuze, zodat de kiezer
   een geheel blijft.
   Het pijltje draaide 90 graden bij openklappen; dat was de enige
   aanwijzing of een groep open of dicht stond. De vlag neemt die rol over
   met helderheid: gedimd als de groep dicht is, vol als hij open staat.
   Zonder dat verlies je bij het weghalen van het pijltje stilzwijgend een
   stukje uitleg. */
.sd-mapctl-vlag{width:18px;height:13px;border:1px solid rgba(0,0,0,.3);
  border-radius:2px;vertical-align:-1px;margin-right:7px;opacity:.5;
  transition:opacity .15s;}
/* Een kop die SCHAKELT in plaats van uitklapt. De vlag is de knop: vol
   als de laag aan staat, gedimd als hij uit is. Zonder dat verschil is
   er niets te zien aan een knop die niets openklapt. */
.sd-mapctl-schakel{cursor:pointer;}
/* v5.32 EERSTE VOORBEELD compacte kaartlaag-kolom: elke kop-rij krijgt
   hetzelfde witte doosje als de Tide stations-landknoppen (sd-vlagtog),
   en alles een maat kleiner. Scope is .sd-mapctl (de rechterkolom);
   de hoekblokken (Tide stations, Overlay) veranderen NIET mee. */
.sd-mapctl .sd-mapctl-kop{background:rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.25);border-radius:4px;padding:3px 5px;
  font-size:10px;font-weight:600;line-height:1;gap:5px;
  /* v5.40: inactief = grijs, actief = zwart (zie .aan / :not(.uit)
     hieronder). Voorheen was de tekst altijd zwart en zag je aan/uit
     alleen aan de vlag. */
  color:#7a7a7a;}
.sd-mapctl .sd-mapctl-kop.aan,
.sd-mapctl .sd-ioc-kop:not(.uit){color:#000;}
.sd-mapctl .sd-mapctl-kop:hover{background:rgba(255,255,255,.95);}
#grpModels{display:contents;}
.sd-ty-banner{position:fixed;top:52px;left:50%;transform:translateX(-50%);
  z-index:1200;pointer-events:none;display:flex;flex-direction:column;
  align-items:center;}
.sd-ty-banner-top{background:rgba(11,31,22,.88);color:#ff4d38;
  font-size:13px;font-weight:700;letter-spacing:.3px;padding:5px 14px;
  border:1px solid #a33;border-bottom:none;border-radius:6px 6px 0 0;
  white-space:nowrap;}
.sd-ty-leg{background:rgba(11,31,22,.88);border:1px solid #a33;
  border-radius:0 0 6px 6px;padding:5px 12px 6px;display:flex;gap:13px;
  align-items:center;flex-wrap:wrap;justify-content:center;max-width:540px;}
.sd-ty-leg span{display:flex;align-items:center;gap:5px;font-size:11px;
  color:#e6f2ea;}
.sd-ty-l-lijn{width:18px;height:0;display:inline-block;}
.sd-ty-l-vlak{width:14px;height:10px;display:inline-block;
  background:rgba(255,255,85,.35);border:2px solid #ff0000;}
.sd-ty-l-cirkel{width:12px;height:12px;border-radius:50%;
  border:2px solid #ffdddd;display:inline-block;}
.sd-ty-l-bar{display:inline-flex;height:10px;width:68px;border-radius:2px;
  overflow:hidden;}
.sd-ty-l-bar i{flex:1;opacity:.8;}
.sd-mapctl .sd-mapctl-sel{margin-bottom:4px;}
.sd-mapctl .sd-mapctl-kop .sd-mapctl-vlag{width:16px;height:12px;}
.sd-mapctl .sd-mapctl-lbl{margin-bottom:-1px;}
.sd-mapctl-schakel.aan .sd-mapctl-vlag{opacity:1;}
/* v5.40: de aan-kleur is nu zwart voor ALLE schakelkoppen (regel bij
   .sd-mapctl .sd-mapctl-kop.aan hierboven); de acc-hi-kleur en de losse
   #asiaKop/#swanKop/#tyKop-overrides zijn daarmee vervallen. */
.sd-radar-vlag{width:18px;height:13px;border-radius:2px;
  border:1px solid rgba(0,0,0,.3);flex:0 0 auto;}
/* .sd-vlagrij zet ze op elkaar en rekt ze uit (align-items:stretch), dus
   binnen een rij zijn ze allemaal even breed. Dezelfde padding als
   .sd-ico, zodat een vlagknop en een icoonknop even hoog zijn - anders
   staat het rechterblok vol trapjes. */
.sd-vlagtog{display:flex;align-items:center;gap:5px;font-size:10px;
  font-weight:600;color:#000;background:rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.25);border-radius:4px;padding:3px 5px;
  cursor:pointer;line-height:1;}
.sd-vlagimg{width:18px;height:13px;border:1px solid rgba(0,0,0,.3);
  border-radius:2px;display:block;}
.sd-calcbox{width:18px;height:13px;border:1px solid #5a86ab;border-radius:2px;
  background:#2f4a63;display:block;}
.sd-vlagtog.uit{opacity:.5;color:#7a7a7a;}
/* ===== DEME-skin (v5.27). Alles hieronder geldt ALLEEN bij
   [data-theme=deme]; de dark-stand raakt dit niet aan. Kleuren volgens de
   DEME-huisstijl: blue #1e2458, green #00b455, Grass #b4f096,
   Stone #dce1e6. Balken volgen al var(--topbar) uit web_style. ===== */
[data-theme="deme"] .sd-tab{background:#00b455;
  border-color:rgba(0,0,0,.18);}
[data-theme="deme"] .sd-tab .tt{color:#fff;}
[data-theme="deme"] .sd-tab .ti{color:#1e2458;}
[data-theme="deme"] .sd-tab:hover{background:#14c866;border-color:#14c866;}
[data-theme="deme"] .sd-tab.active{background:#00c864;border-color:#fff;}
[data-theme="deme"] .sd-tabpanel{background:var(--surface);}
[data-theme="deme"] .sd-mapctl,
[data-theme="deme"] .sd-hoek{background:#1e2458;
  border-color:rgba(255,255,255,.2);}
[data-theme="deme"] .sd-mapctl-lbl{color:rgba(255,255,255,.7);}
[data-theme="deme"] .sd-mapctl-chk{color:#fff;}
/* v5.42: de DEME-uitzondering op het zwart/grijs-schema is VERVALLEN -
   de kolomknoppen zitten ook in DEME in witte doosjes, dus zwart bij
   actief en grijs bij inactief leest daar net zo goed. Alleen het
   "Map layer"-label zelf blijft wit (regel .sd-mapctl-lbl hierboven):
   dat staat los op het donkerblauwe blok. */
[data-theme="deme"] .sd-hoek-titel{color:#fff;
  border-top-color:rgba(255,255,255,.25);}
[data-theme="deme"] .sd-mapctl-sel{background:#dce1e6;color:#1e2458;
  border-color:rgba(30,36,88,.4);}
[data-theme="deme"] .sd-vlagtog{background:#dce1e6;color:#1e2458;
  border-color:rgba(30,36,88,.4);}
[data-theme="deme"] .sd-vlagtog.uit{color:#5a6478;opacity:.55;}
/* v5.42: de aparte DEME-uitkleur voor de IOC-kop is vervallen; hij volgt
   het algemene grijs (#7a7a7a) van de kolomknoppen. */
[data-theme="deme"] .sd-cons-boog{stroke:#00b455;}
[data-theme="deme"] .sw-btn,
[data-theme="deme"] .wi-btn,
[data-theme="deme"] .scc-btn,
[data-theme="deme"] .sti-btn{background:#b4f096;color:#1e2458;
  border-color:rgba(30,36,88,.35);}
[data-theme="deme"] .sw-btn.act,
[data-theme="deme"] .wi-btn.act,
[data-theme="deme"] .scc-btn.act,
[data-theme="deme"] .sti-btn.act{background:#00b455;color:#fff;
  border-color:#00b455;}
/* DEME ronde 2 (v5.28): losse knoppen en tegels naar DEME green. */
[data-theme="deme"] .sd-vlootbtn{background:#00b455;color:#000;
  border:1px solid rgba(0,0,0,.18);border-radius:8px;padding:0 10px;}
[data-theme="deme"] .sd-cog{background:#00b455;color:#000;
  border-color:rgba(0,0,0,.18);}
[data-theme="deme"] .sd-cog:hover{background:#14c866;}
[data-theme="deme"] .sd-mapctl,
[data-theme="deme"] .sd-hoek{background:#00b455;
  border-color:rgba(0,0,0,.18);}
[data-theme="deme"] .sd-muispos{background:#00b455;color:#000;}
[data-theme="deme"] .sd-posbtn{background:#00b455;color:#d92b2b;
  border-color:rgba(0,0,0,.18);}
[data-theme="deme"] .sd-posbtn:hover{border-color:#fff;}
/* v5.68: DEZE REGEL MOET NA de deme-basisregel hierboven staan. De
   eerste poging stond ~600 regels eerder in hetzelfde stylesheet, en
   [data-theme="deme"] .sd-posbtn overschreef daardoor de achtergrond van
   .sd-posbtn.aan - GEMETEN in de console: de knop bleef groen terwijl de
   gele regel wel geladen was. Bij gelijke specificiteit wint de laatste
   regel, dus staat het geel nu achteraan. !important zou het ook doen,
   maar de volgorde repareren is eerlijker. */
[data-theme="deme"] .sd-posbtn.aan{color:#1a1a1a;background:#ffd000;
  border-color:#ffd000;font-weight:600;
  animation:sd-posknipper 1.0s steps(1,end) infinite;}
/* v5.67: het DEME-thema zette hier eerder een vaste GROENE achtergrond
   die de knipperanimatie overschreef (deze regel staat later in de CSS
   dan de basisregel). Nu volgt DEME gewoon het gele ChartPos-signaal;
   de themaregel hierboven zet alleen de kleuren, de animatie komt uit
   de basisregel. */
[data-theme="deme"] .sd-bbtn{background:#00b455;color:#000;
  border-color:rgba(0,0,0,.18);}
[data-theme="deme"] .sd-bbtn:hover{background:#14c866;color:#000;}
[data-theme="deme"] .sd-top-info{color:#fff;}
[data-theme="deme"] .sw-regiotab{background:#5a7db4;color:#fff;
  border-color:#5a7db4;}
[data-theme="deme"] .sw-regiotab.act{background:#00b455;
  border-color:#00b455;color:#fff;}
/* IOC-knop onder Model: alleen het UNESCO-logo (bevat zelf de tekst), geen
   doosje, links uitgelijnd met de EU-vlag van de Model-kop. Gedimd = uit,
   vol = aan. Hoogte gelijk aan de EU-vlag-rij; breedte volgt het logo. */
.sd-ioc-kop{padding:2px 0;}
.sd-ioc-kop.uit{color:#7a7a7a;}
.sd-ioc-logo{height:14px;width:auto;display:block;opacity:.5;
  transition:opacity .15s;}
.sd-ioc-kop:not(.uit) .sd-ioc-logo{opacity:1;}
/* Icoonknop in de kaartbediening. ERFT BEWUST HET UITERLIJK VAN
   .sd-vlagtog: wit doosje, zwarte inhoud, uit is half doorzichtig en
   grijs. Er komt geen nieuwe kleur bij - openklappen en aanzetten zien er
   hetzelfde uit, want voor de gebruiker is het allebei "dit staat aan". */
.sd-ico{color:#000;display:flex;align-items:center;gap:5px;width:100%;font-size:10px;
  font-weight:600;color:#000;background:rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.25);border-radius:4px;padding:3px 5px;
  cursor:pointer;line-height:1;text-align:left;}
.sd-ico svg{flex:0 0 auto;}
.sd-ico-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sd-ico.uit{opacity:.5;color:#7a7a7a;}
.sd-ico:hover{background:rgba(255,255,255,.95);}
/* Tipkaartje. Midden op de kaart, VAST op maat: geen scrollen, want een
   tip die je moet doorbladeren is geen tip. De tekst is daarom in de
   Python-lijst al op honderd tekens gehouden. */
/* VRAAGBAAK in de handleiding. Oogt als een gesprek, is een zoekvak. */
.hl-ask{border:1px solid var(--acc,#2d7ff9);border-radius:12px;
  padding:14px 15px 12px;margin:0 0 18px;
  background:linear-gradient(180deg,rgba(45,127,249,.10),transparent);}
.hl-ask-kop{font-size:14px;font-weight:600;margin-bottom:2px;}
.hl-ask-sub{font-size:12px;color:var(--text-dim,#8a97a8);margin-bottom:10px;}
.hl-invoer{width:100%;box-sizing:border-box;padding:9px 12px;font-size:13px;
  border-radius:8px;border:1px solid var(--border,#2a3442);
  background:var(--bg,#0d1117);color:var(--text,#e6edf3);}
.hl-invoer:focus{outline:none;border-color:var(--acc,#2d7ff9);}
.hl-vbs,.hl-verder,.hl-groepen{display:flex;flex-wrap:wrap;gap:6px;
  margin-top:10px;}
.hl-vb,.hl-groep,.hl-vervolg{padding:5px 10px;border-radius:14px;
  border:1px solid var(--border,#2a3442);background:transparent;
  color:var(--text-dim,#8a97a8);font-size:11px;cursor:pointer;
  text-align:left;line-height:1.3;}
.hl-vb:hover,.hl-groep:hover,.hl-vervolg:hover{color:var(--text,#e6edf3);
  border-color:var(--acc,#2d7ff9);}
.hl-meer{align-self:center;font-size:11px;color:var(--text-dim,#8a97a8);}
.hl-ai-alsnog{display:block;margin-top:8px;padding:0;border:0;background:none;
  color:var(--acc,#2d7ff9);font-size:12px;cursor:pointer;text-align:left;}
.hl-ai-alsnog:hover{text-decoration:underline;}
.hl-antwoord{margin-top:12px;font-size:13px;line-height:1.6;}
.hl-antwoord b{display:block;font-weight:600;margin-bottom:5px;}
.hl-antwoord .bron{display:block;margin-top:7px;font-size:11px;
  color:var(--text-dim,#8a97a8);}
/* Drie stippen die om beurten oplichten terwijl er gezocht wordt. Puur
   voor het gevoel: het zoeken zelf duurt geen milliseconde. Zonder die
   korte pauze verschijnt het antwoord zo abrupt dat je niet ziet DAT er
   iets gebeurde. */
.hl-denk{display:flex;gap:5px;margin-top:14px;}
.hl-denk span{width:7px;height:7px;border-radius:50%;
  background:var(--acc,#2d7ff9);opacity:.3;animation:hlpuls 1.1s infinite;}
.hl-denk span:nth-child(2){animation-delay:.18s;}
.hl-denk span:nth-child(3){animation-delay:.36s;}
@keyframes hlpuls{0%,60%,100%{opacity:.25}30%{opacity:1}}
.sd-tip{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:1200;width:min(400px,calc(100vw - 40px));
  background:var(--surface,#131a22);border:1px solid var(--acc,#2d7ff9);
  border-radius:12px;padding:16px 18px 12px;
  box-shadow:0 10px 34px rgba(0,0,0,.5);}
.sd-tip-body b{display:block;font-size:14px;font-weight:600;
  margin-bottom:5px;color:var(--text,#e6edf3);}
.sd-tip-body span{display:block;font-size:13px;line-height:1.5;
  color:var(--text-dim,#8a97a8);}
.sd-tip-voet{display:flex;align-items:center;gap:6px;margin-top:14px;}
.sd-tip-nav{width:24px;height:24px;padding:0;border-radius:6px;
  border:1px solid var(--lijn,#2a3442);background:transparent;
  color:var(--text-dim,#8a97a8);cursor:pointer;font-size:10px;}
.sd-tip-nav:hover{color:var(--text,#e6edf3);}
.sd-tip-tel{font-size:11px;color:var(--text-dim,#8a97a8);
  font-variant-numeric:tabular-nums;min-width:34px;text-align:center;}
.sd-tip-rek{flex:1;}
.sd-tip-uit,.sd-tip-sluit{padding:4px 10px;border-radius:6px;
  border:1px solid var(--lijn,#2a3442);background:transparent;
  color:var(--text-dim,#8a97a8);cursor:pointer;font-size:11px;}
.sd-tip-sluit{border-color:var(--acc,#2d7ff9);color:var(--text,#e6edf3);}
.sd-tip-uit:hover,.sd-tip-sluit:hover{color:var(--text,#e6edf3);}
@media(max-width:520px){.sd-tip{padding:13px 14px 10px;}
  .sd-tip-uit,.sd-tip-sluit{padding:4px 8px;font-size:10px;}}
/* Het driehoekje van een inklapknop staat RECHTS en wijst opzij als het
   blok dicht is. Dezelfde vorm als .sd-caret bij de oude koppen, alleen
   met margin-left:auto zodat hij tegen de rechterrand staat. */
.sd-ico-klap .sd-caret{margin-left:auto;flex:0 0 5px;}
.sd-ico-klap.open .sd-caret{transform:rotate(90deg);}
.sd-vlagtog.uit .sd-vlagimg{filter:saturate(.12);}
.sd-vlagtog.uit .sd-calcbox{background:#1a2c3c;border-color:#3f5b73;}

@media (max-width:640px){
  .sd-sidetabs{flex-direction:row;left:8px;right:8px;top:66px;overflow-x:auto;
    padding-bottom:4px;}
  .sd-tab{width:auto;min-width:120px;flex:0 0 auto;}
  .sd-tabpanel{left:8px;right:8px;width:auto;max-width:none;top:150px;}
  .sd-tabpanel.about{left:8px;right:8px;transform:none;width:auto;}
  .sd-tabpanel.help{left:8px;right:8px;transform:none;width:auto;}
}

/* ---- Helppaneel (handleiding) --------------------------------------- */
.sd-helpbtn{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;margin:0 2px;border-radius:50%;
  background:rgba(11,31,22,.55);color:#e6f2ea;
  border:1px solid rgba(230,242,234,.35);cursor:pointer;}
.sd-helpbtn:hover{background:rgba(11,31,22,.8);
  border-color:rgba(230,242,234,.7);}
.sd-tabpanel.help{left:50%;transform:translateX(-50%);width:min(920px,calc(100vw - 40px));top:84px;}
/* Voorwaarden/bronvermelding onderaan About: uit de bottombar gehaald,
   want daar concurreerden ze met de knoppen die je tijdens het varen
   nodig hebt. Hier staan ze waar iemand ze zoekt. */
/* Bottombar-knop met icoon voor het label. */
.sd-bbtn-ic{display:inline-flex;align-items:center;gap:6px;}
.sd-bbtn-ic svg{flex:0 0 auto;}
.about-voet{margin-top:14px;padding-top:10px;font-size:12px;
  border-top:1px solid rgba(230,242,234,.22);}
.about-voet a{color:#7fd4c1;text-decoration:none;}
.about-voet a:hover{text-decoration:underline;}
/* Koptekst van About en de handleiding uitgesproken wit: het is de
   titel van een paneel dat over de kaart heen ligt, dus die moet los
   staan van de gedempte tint van de rest. */
.sd-tabpanel.about .sd-tabpanel-head span,
.sd-tabpanel.help .sd-tabpanel-head span{color:#fff;}
/* Hele tekst van About en de handleiding wit: het zijn leesschermen
   over de kaart heen, dus de gedempte tint van de datavelden past er
   niet bij. Tabelkoppen en de links houden hun eigen kleur. */
.sd-tabpanel.about .sd-tabpanel-body,
.sd-tabpanel.about .sd-tabpanel-body *,
.sd-tabpanel.help .hl-body,
.sd-tabpanel.help .hl-body *{color:#fff;}
.sd-tabpanel.help .hl-body .hl-ga{color:#7fd4c1;}
/* Helpknop op dezelfde manier vastgezet als de beta-badge, maar links:
   los van de bottombar-flow, zodat hij echt in de hoek staat. */
/* Gedempte tekst in de datapanelen (SeaWave, SeaCurrent, SeaWind,
   SeaTidal, SolarNav, SeaHarbour) wit. --text-dim wordt binnen deze
   panelen op ruim 60 plekken gebruikt voor labels, subteksten en
   voetnoten; door de VARIABELE te overschrijven in plaats van elke
   regel apart, gaan zowel dag- als nachtmodus mee en blijft er niets
   achter. Kleuren MET betekenis (HW/LW, de badges gemeten/officieel/
   berekend, de NOAA G/S/R-schalen, rood/groen-indicatoren) staan als
   eigen hex in de tabbladen en blijven dus ongemoeid - die kleur is
   informatie, geen opmaak. */
.sd-tabpanel{--text-dim:#fff;}
.sd-helpbtn{position:fixed;left:12px;bottom:9px;z-index:600;}
@media(max-width:600px){.sd-helpbtn{left:8px;bottom:8px;}}
.hl-body{line-height:1.5;}
.hl-body .hl-h2{font-size:15px;margin:18px 0 6px;padding-top:10px;
  border-top:1px solid rgba(230,242,234,.18);}
.hl-body .hl-h2:first-child{border-top:none;padding-top:0;margin-top:2px;}
.hl-body .hl-h3{font-size:13px;margin:12px 0 4px;opacity:.95;}
.hl-body .hl-p{margin:6px 0;font-size:12.5px;}
.hl-body .hl-ul{margin:6px 0 6px 18px;padding:0;font-size:12.5px;}
.hl-body .hl-ul li{margin:3px 0;}
.hl-let{margin:8px 0;padding:7px 9px;font-size:12.5px;
  border-left:3px solid #7fd4c1;background:rgba(127,212,193,.10);
  border-radius:0 4px 4px 0;}
.hl-tabwrap{overflow-x:auto;margin:7px 0;}
.hl-body .hl-tab{border-collapse:collapse;width:100%;font-size:12px;}
.hl-body .hl-tab th,.hl-body .hl-tab td{text-align:left;padding:4px 7px;
  border-bottom:1px solid rgba(230,242,234,.14);vertical-align:top;}
.hl-body .hl-tab th{font-weight:600;white-space:nowrap;
  border-bottom:1px solid rgba(230,242,234,.3);}
.hl-ga{color:#7fd4c1;text-decoration:none;border-bottom:1px dotted #7fd4c1;
  cursor:pointer;}
.hl-ga:hover{color:#a8e6d8;border-bottom-style:solid;}

.sti-wrap{padding:4px 2px 12px;}
.sti-toolbar{display:flex;justify-content:flex-end;align-items:center;
  gap:8px;margin-bottom:12px;position:sticky;top:0;z-index:5;
  background:var(--surface);padding:8px 0;
  border-bottom:1px solid var(--border);}
.sti-tw-lbl{font-size:12px;color:var(--text-dim);}
.sti-btn{padding:4px 14px;font-size:12px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text-dim);border-radius:5px;
  cursor:pointer;}
.sti-btn.act{background:var(--acc);color:#fff;border-color:var(--acc);}
.sti-graf{margin-bottom:16px;}
.sti-graf-titel{font-weight:600;font-size:13px;margin-bottom:6px;
  display:flex;align-items:center;gap:6px;}
.sti-graf-eenheid{color:var(--text-dim);font-weight:400;font-size:11px;}
.sti-graf-type{display:inline-block;margin-left:auto;padding:1px 8px;
  border-radius:10px;font-size:10px;font-weight:500;color:#fff;
  vertical-align:middle;}
.sti-uitleg{font-size:11px;color:var(--text-dim);line-height:1.5;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:8px;padding:8px 12px;margin-bottom:14px;}
.sti-uitleg b{color:var(--text);font-weight:600;}
.sti-blokken{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px;}
.sti-blok{background:var(--surface-2);border:1px solid var(--border);
  border-radius:8px;padding:8px 12px;flex:1;min-width:90px;}
.sti-blok-lbl{font-size:10px;color:var(--text-dim);margin-bottom:2px;}
.sti-blok-val{font-size:18px;font-weight:600;font-family:monospace;}
.sti-blok-sub{font-size:10px;color:var(--text-dim);margin-top:1px;}
.sti-chart-wrap{position:relative;width:100%;height:180px;}
.sti-chart-groot{height:260px;}
.sti-cijfers{margin-bottom:10px;}
.sti-combi{border:1px solid var(--border);border-radius:10px;padding:12px 14px;
  /* GELIJK AAN DE ACHTERGROND. Deze kaart stond op --surface-2 en werd
     daarmee een donkerder vlak in een lichter paneel. De numerieke vakjes
     (.sti-blok) houden WEL --surface-2, want die moeten zich juist wel
     losmaken - alleen de grafiekkaart gaat mee met het paneel. */
  background:var(--surface);margin-bottom:22px;}
.sti-leg-rij{display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin:2px 0 8px;}
.sti-leg{display:flex;align-items:center;gap:5px;font-size:11px;
  color:var(--text-dim);}
.sti-leg-vlek{width:16px;height:3px;border-radius:2px;flex:0 0 16px;}
.sti-leg-uitleg{font-size:10px;color:var(--text-dim);opacity:.75;
  font-style:italic;}
.sti-tabel-wrap{overflow-x:auto;}
.sti-tabel{width:100%;border-collapse:collapse;font-size:12px;}
.sti-tabel th,.sti-tabel td{padding:5px 10px;text-align:right;
  border-bottom:1px solid var(--border);white-space:nowrap;}
.sti-tabel th:first-child,.sti-tabel td:first-child{text-align:left;}
.sti-tabel th{font-size:11px;font-weight:600;}
.sti-tabel .sti-tijd{color:var(--text-dim);font-family:monospace;}
.sti-tabel tbody tr:hover td{background:var(--surface-2);}
.sti-tabel-leeg{text-align:center;color:var(--text-dim);padding:16px;}

.sw-wrap{padding:4px 2px 12px;}
.dpr-kop{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;margin-bottom:10px;padding-bottom:8px;
  border-bottom:2px solid var(--acc);}
.dpr-titel{font-weight:600;font-size:14px;}
.dpr-sub{font-size:11px;color:var(--text-dim);text-align:right;}
.dpr-eh{color:var(--text-dim);font-weight:400;}
.dpr-voet{font-size:11px;color:var(--text-dim);margin-top:8px;}
.sw-subtabs{display:flex;gap:6px;margin-bottom:14px;}
.sw-regiotabs{display:flex;gap:8px;margin-bottom:14px;
  border-bottom:2px solid var(--border);}
.sw-regiotab{padding:8px 22px;font-size:14px;font-weight:600;
  border:1px solid var(--border);border-bottom:none;border-radius:8px 8px 0 0;
  cursor:pointer;background:var(--surface-2);color:var(--text-dim);
  margin-bottom:-2px;}
.sw-regiotab.act{background:var(--acc);color:#fff;border-color:var(--acc);}
.sw-ovl{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;
  align-items:center;justify-content:center;pointer-events:none;}
.sw-ovl-tekst{display:inline-block;padding:7px 16px;border-radius:6px;
  font-size:13px;font-weight:700;letter-spacing:1.5px;text-align:center;
  white-space:nowrap;}
.sw-ovl-nd .sw-ovl-tekst{background:rgba(200,20,20,0.30);
  border:2px solid #7a0d0d;color:#ffe2e2;
  text-shadow:0 1px 3px rgba(0,0,0,0.75);}
.sw-ovl-deg .sw-ovl-tekst{background:rgba(255,140,0,0.30);
  border:2px solid #a35200;color:#fff0dc;
  text-shadow:0 1px 3px rgba(0,0,0,0.75);}
.sw-ovl-ref .sw-ovl-tekst{background:rgba(30,180,80,0.30);
  border:2px solid #15682f;color:#dcffe7;
  text-shadow:0 1px 3px rgba(0,0,0,0.75);
  pointer-events:auto;cursor:pointer;}
.sw-ovl-ref .sw-ovl-tekst:hover{background:rgba(30,180,80,0.45);}
.sw-online-uitleg{font-size:11px;color:var(--text-dim);margin:0 0 12px;}
.sw-subtab{padding:6px 16px;font-size:13px;border:1px solid var(--border);
  border-radius:6px;cursor:pointer;background:var(--surface-2);color:var(--text-dim);}
.sw-subtab.act{background:var(--acc);color:#fff;border-color:var(--acc);}
.sw-toolbar{display:flex;justify-content:flex-end;align-items:center;
  gap:8px;margin-bottom:12px;position:sticky;top:0;z-index:5;
  background:var(--surface);padding:8px 0;border-bottom:1px solid var(--border);}
.sw-tw-lbl{font-size:12px;color:var(--text-dim);}
.sw-btn{padding:4px 14px;font-size:12px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text-dim);border-radius:5px;cursor:pointer;}
.sw-btn.act{background:var(--acc);color:#fff;border-color:var(--acc);}
.sw-bron{margin-bottom:22px;}
.sw-bron-titel{font-weight:600;font-size:14px;margin:4px 0 8px;}
.swm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:8px;margin-bottom:10px;}
.swm-card{background:var(--surface-2);border:1px solid var(--border);
  border-radius:8px;padding:8px 10px;text-align:center;}
.swm-lbl{font-size:10px;color:var(--text-dim);margin-bottom:2px;}
.swm-val{font-size:20px;font-weight:600;font-family:monospace;}
.swm-sub{font-size:10px;color:var(--text-dim);}
.sw-chart-wrap{position:relative;width:100%;height:220px;}
.sw-tabel-wrap{overflow-x:auto;max-height:520px;overflow-y:auto;}
.sw-tabel{width:100%;border-collapse:collapse;font-size:12px;}
.sw-tabel th,.sw-tabel td{padding:5px 10px;text-align:right;
  border-bottom:1px solid var(--border);white-space:nowrap;}
.sw-tabel th:first-child,.sw-tabel td:first-child{text-align:left;}
.sw-tabel thead{position:sticky;top:0;background:var(--surface);}
.sw-tabel th{font-size:11px;font-weight:600;color:var(--text-dim);}
.sw-tabel-leeg{text-align:center;color:var(--text-dim);padding:16px;}

/* --- S.W.A.N numeriek paneel --- */
.swan-paneel{padding:2px 0;}
.swan-top{display:flex;justify-content:space-between;align-items:flex-start;
  gap:14px;margin-bottom:10px;flex-wrap:wrap;}
.swan-meta{font-size:12px;color:var(--text-dim);line-height:1.5;}
.swan-meta-r span{color:var(--text);}
.swan-knoprij{display:flex;align-items:center;gap:10px;}
.swan-recalc{background:#1e7d3a;color:#fff;border:1px solid #1e7d3a;
  border-radius:8px;padding:7px 14px;font-size:13px;font-weight:600;
  cursor:pointer;}
.swan-recalc:hover{filter:brightness(1.08);}
.swan-recalc:disabled{opacity:.5;cursor:default;}
.swan-timer{font-size:13px;color:var(--text-dim);font-variant-numeric:tabular-nums;
  min-width:60px;}
.swan-status{font-size:12px;color:var(--text-dim);margin-bottom:10px;}
.swan-status.swan-wachtrij{color:#e0a030;font-weight:600;}
.swan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;}
.swan-groep{background:var(--surface);border:1px solid var(--border);
  border-radius:10px;padding:10px 12px;}
.swan-groep-kop{font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-dim);margin-bottom:7px;}
.swan-row{display:flex;justify-content:space-between;align-items:baseline;
  gap:8px;padding:3px 0;font-size:13px;}
.swan-row-l{color:var(--text-dim);}
.swan-row-v{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;
  white-space:nowrap;}
.swan-row-u{color:var(--text-dim);font-weight:400;font-size:11px;}
/* Status-kaart (stoplicht) */
.swan-st-licht{display:flex;align-items:center;gap:8px;padding:4px 0 6px;}
.swan-dot{width:11px;height:11px;border-radius:50%;flex:0 0 11px;
  background:var(--text-dim);border:1px solid rgba(0,0,0,.35);}
.swan-dot.groen{background:#2ea84f;}
.swan-dot.oranje{background:#f5961e;}
.swan-dot.rood{background:#e63c28;}
.swan-st-titel{font-size:12px;font-weight:600;}
.swan-st-tekst{font-size:11px;color:var(--text-dim);padding:2px 0;
  border-top:1px solid var(--border);}
.swan-st-tekst:empty{display:none;}

/* ===== SeaWave, nieuwe weergave (tab_seawave_nieuw) ===== */
.swn{display:none;
  --n-ground:#061419; --n-surface:#0c2129; --n-surface-2:#12303a; --n-line:#1d4350;
  --n-text:#e4efee; --n-dim:#8fb0b3; --n-ok:#2fcf86; --n-near:#f2a64a; --n-over:#d8453f;
  --n-cyan:#5fd0e6; --n-now:#ffb300;
  --n-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --n-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --n-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  gap:16px;padding:14px 16px 18px;background:var(--n-surface);color:var(--n-text);
  font:14px/1.5 var(--n-body);border:1px solid var(--n-line);border-radius:10px;
  box-sizing:border-box;}
.swn *{box-sizing:border-box}
.swn [hidden]{display:none!important}
html[data-sdstijl="nieuw"] .tab-scherm[data-scherm="seawave"] > .sw-wrap{display:none!important}
html[data-sdstijl="nieuw"] .swn{display:grid}
.swn button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.swn :focus-visible{outline:2px solid var(--n-cyan);outline-offset:2px;border-radius:4px}
.swn h2,.swn h3,.swn h4{margin:0}

.swn-kop{display:grid;gap:5px}
.swn-eyebrow{font:500 11px/1 var(--n-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--n-cyan)}
.swn-kop h2{font:600 26px/1.1 var(--n-display);letter-spacing:.01em;color:var(--n-text)}
.swn-kop h2 span{color:var(--n-cyan)}
.swn-sub{color:var(--n-dim);font-size:12.5px}

.swn-tabs{display:flex;gap:4px;border-bottom:1px solid var(--n-line);flex-wrap:wrap;align-items:center}
.swn-tabs [role=tab]{padding:9px 14px 10px;font:600 16px/1 var(--n-display);letter-spacing:.04em;
  text-transform:uppercase;color:var(--n-dim);border-bottom:2px solid transparent;margin-bottom:-1px}
.swn-tabs [role=tab][aria-selected="true"]{color:var(--n-text);border-bottom-color:var(--n-ok)}
.swn-tabs [role=tab]:hover{color:var(--n-text)}
.swn-sep{flex:1}
.swn-seg{display:inline-flex;border:1px solid var(--n-line);border-radius:6px;overflow:hidden;
  background:var(--n-ground);margin-bottom:6px}
.swn-seg button{padding:7px 12px;font:500 12px/1 var(--n-mono);color:var(--n-dim)}
.swn-seg button+button{border-left:1px solid var(--n-line)}
.swn-seg button[aria-pressed="true"]{background:var(--n-surface-2);color:var(--n-text)}
.swn-seg button:hover{color:var(--n-text)}
.swn-pane{display:grid;gap:16px;min-width:0}

.swn-ro{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--n-line);
  border-radius:10px;background:var(--n-ground)}
.swn-ro>div{padding:12px 14px;display:grid;gap:3px;min-width:0}
.swn-ro>div+div{border-left:1px solid var(--n-line)}
.swn-ro .k{font:500 10.5px/1 var(--n-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--n-dim)}
.swn-ro .v{font:500 24px/1.15 var(--n-mono);font-variant-numeric:tabular-nums;color:var(--n-text)}
.swn-ro .v small{font-size:12.5px;color:var(--n-dim);margin-left:3px}
.swn-ro .s{font-size:11.5px;color:var(--n-dim)}
.swn-ro .s b{font-weight:500;color:var(--n-text)}
.swn-pijl{display:inline-block;width:18px;height:18px;vertical-align:-2px;margin-left:6px}

.swn-grid2{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:16px;align-items:start}
/* v1.14: ranked | grafieken | satellieten */
.swn-grid3{grid-template-columns:minmax(0,280px) minmax(0,1fr) minmax(0,340px);grid-template-areas:"rang graf sat"}
.swn-grid3>.swn-card:first-child{grid-area:rang}
.swn-grid3>.swn-card:nth-child(2){grid-area:graf}
.swn-grid3>.swn-sat{grid-area:sat}
@media (max-width:1400px){ .swn-grid3{grid-template-columns:minmax(0,280px) minmax(0,1fr);
  grid-template-areas:"rang graf" "sat graf";grid-template-rows:auto 1fr} }
.swn-card{border:1px solid var(--n-line);border-radius:10px;background:var(--n-ground);min-width:0}
.swn-ch{display:flex;align-items:baseline;gap:10px;padding:11px 14px;border-bottom:1px solid var(--n-line)}
.swn-ch-t{border-top:1px solid var(--n-line)}
.swn-ch h3{font:600 16px/1 var(--n-display);letter-spacing:.03em;text-transform:uppercase;color:var(--n-text)}
.swn-ch span{margin-left:auto;font:11px/1 var(--n-mono);color:var(--n-dim)}
.swn-cf{padding:10px 14px;border-top:1px solid var(--n-line);font-size:11.5px;color:var(--n-dim)}
.swn-tf{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
.swn-tf .swn-btn{margin-left:auto}

.swn-m{display:grid;grid-template-columns:16px 10px minmax(0,1fr) 60px 38px;gap:8px;align-items:center;
  width:100%;padding:8px 14px;text-align:left;border-top:1px solid var(--n-line)}
.swn-m:first-child{border-top:0}
.swn-m.na3{border-top:1px dashed var(--n-dim)}
.swn-m:hover{background:var(--n-surface)}
.swn-m[aria-pressed="true"]{background:var(--n-surface-2)}
.swn-m .n{font:12px/1 var(--n-mono);color:var(--n-dim)}
.swn-m .sw{width:10px;height:10px;border-radius:2px}
.swn-m .nm{display:grid;gap:2px;min-width:0}
.swn-m .nm b{font-weight:500;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.swn-m .nm small{font:11px/1.2 var(--n-mono);color:var(--n-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.swn-m .nm small em{font-style:normal;color:var(--n-near)}
.swn-m svg{width:60px;height:22px}
.swn-m .val{font:500 13.5px/1 var(--n-mono);text-align:right}
.swn-leeg{padding:14px;color:var(--n-dim);font-size:13px}

.swn-score{padding:8px 10px 12px;font-size:12px;color:var(--n-dim)}
/* Smalle kolom: vaste tabelopmaak, de modelnaam krimpt met ... en de
   getallen houden hun plek. */
.swn-score table{width:100%;table-layout:fixed;border-collapse:collapse;font:11px/1.5 var(--n-mono)}
.swn-score th{text-align:right;font-weight:500;color:var(--n-dim);padding:2px 3px;font-size:10px}
.swn-score th:first-child,.swn-score td:first-child{text-align:left;width:auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* v1.13: .swn .swn-score - anders wint .swn th/td (padding 8px 12px) en
   vallen de koppen en getallen in de smalle kolom over elkaar. */
.swn-score col.c{width:40px}
.swn .swn-score th{padding:5px 3px;vertical-align:bottom;letter-spacing:0;font-size:9.5px;text-align:right}
.swn .swn-score td{text-align:right;padding:5px 3px;color:var(--n-text);border-top:1px solid var(--n-line);vertical-align:top;white-space:nowrap}
.swn .swn-score th:first-child,.swn .swn-score td:first-child{text-align:left;padding-left:4px}
/* v1.13: naam met punten + bereik eronder, gemeten wit, te weinig punten oranje */
.swn-score td:first-child b{display:block;font:500 12px/1.3 var(--n-body);overflow:hidden;text-overflow:ellipsis}
.swn-score td:first-child small{display:block;font-size:9.5px;color:var(--n-dim);overflow:hidden;text-overflow:ellipsis}
.swn-score td.me{color:#fff}
.swn-score td.me.weinig{color:var(--n-near)}
.swn-satnu{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;align-items:center;margin:2px 0 8px;
  padding:9px 11px;border:1px solid var(--n-line);border-radius:8px;background:var(--n-surface)}
.swn-satnu .r{grid-row:span 2;width:9px;height:9px;background:#fff;transform:rotate(45deg);margin:0 3px}
.swn-satnu .v{font:500 17px/1.1 var(--n-mono);font-variant-numeric:tabular-nums;color:var(--n-text)}
.swn-satnu .v small{font-size:11px;color:var(--n-dim);margin-left:4px}
.swn-satnu .m{font:10.5px/1.3 var(--n-mono);color:var(--n-dim)}
.swn-satnu.leeg{grid-template-columns:auto minmax(0,1fr)}
.swn-satnu.leeg .r{grid-row:auto;opacity:.3}
.swn-satnu.leeg .v{font:12px/1.35 var(--n-body);color:var(--n-dim)}
@media (max-width:520px){ .swn-score .md{display:none} }
.swn-score .uitleg{margin-top:7px;font-size:11px;line-height:1.45}
.swn-lg{display:flex;flex-wrap:wrap;gap:6px 14px;padding:10px 14px 0;font-size:12px;color:var(--n-dim)}
.swn-lg span{display:inline-flex;align-items:center;gap:6px}
.swn-lg i{width:14px;height:3px;border-radius:2px;display:inline-block}
.swn-lg i.band{height:10px;background:rgba(95,208,230,.16);border:1px solid rgba(95,208,230,.35)}
.swn-lg i.swn-dash{height:0;border-top:1px dashed var(--n-dim)}
.swn-chart{padding:8px 10px 10px;min-height:60px}
.swn-chart svg{display:block}
.swn-chart text{font-family:var(--n-mono);font-size:10.5px;fill:var(--n-dim)}

.swn-tw{overflow:auto;max-height:520px}
.swn table{border-collapse:collapse;width:100%;font:13px/1 var(--n-mono);font-variant-numeric:tabular-nums;color:var(--n-text)}
.swn th,.swn td{padding:8px 12px;text-align:right;white-space:nowrap;border:0}
.swn th:first-child,.swn td:first-child{text-align:left}
.swn thead th{position:sticky;top:0;background:var(--n-surface-2);font:500 11px/1.2 var(--n-mono);
  color:var(--n-dim);letter-spacing:.06em;text-transform:uppercase;z-index:1}
.swn thead th i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px}
.swn tbody tr{border-top:1px solid var(--n-line)}
.swn tbody tr.past{color:var(--n-dim);opacity:.6}
.swn tbody tr.nu{background:rgba(255,179,0,.08);box-shadow:inset 3px 0 0 var(--n-now)}
.swn tbody tr.dag td{background:var(--n-surface);color:var(--n-cyan);font:600 13px/1 var(--n-display);
  letter-spacing:.08em;text-transform:uppercase;text-align:left;padding-block:7px}
.swn td.c{position:relative}
.swn td.c i{position:absolute;top:4px;bottom:4px;right:4px;border-radius:3px}
.swn td.c span{position:relative}
.swn td.na{color:var(--n-dim)}
.swn td.mx{font-weight:500;color:#fff}
.swn-scale{display:inline-flex;align-items:center;gap:6px}
.swn-scale i{display:inline-block;width:90px;height:8px;border-radius:2px;
  background:linear-gradient(90deg,rgba(95,208,230,.05),rgba(95,208,230,.55))}

.swn-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:6px;
  font:600 13.5px/1 var(--n-body)!important;border:1px solid transparent!important}
.swn-btn.swn-prim{background:var(--n-ok)!important;color:#03281a!important}
.swn-btn.swn-prim:hover{background:#45e39a!important}
.swn-btn.swn-ghost{border-color:var(--n-line)!important;color:var(--n-text)}
.swn-btn.swn-ghost:hover{background:var(--n-surface-2)!important}
.swn-btn[disabled]{opacity:.5;cursor:default}

.swn-online{display:grid;gap:12px;justify-items:start;padding:20px;border:1px dashed var(--n-line);
  border-radius:10px;background:var(--n-ground)}
.swn-online h3{font:600 20px/1 var(--n-display);letter-spacing:.03em;color:var(--n-text)}
.swn-online p{margin:0;color:var(--n-dim);max-width:62ch}
.swn-online.vol{border-style:solid;justify-items:stretch;padding:0;gap:0}

.swn-st{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;padding:12px 14px;
  border:1px solid var(--n-line);border-radius:10px;background:var(--n-ground);margin-bottom:12px}
.swn-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;
  font:500 12px/1 var(--n-mono);border:1px solid}
.swn-pill i{width:8px;height:8px;border-radius:50%;background:currentColor}
.swn-pill.groen{color:var(--n-ok);background:rgba(47,207,134,.12);border-color:rgba(47,207,134,.35)}
.swn-pill.oranje{color:var(--n-near);background:rgba(242,166,74,.12);border-color:rgba(242,166,74,.35)}
.swn-pill.rood{color:var(--n-over);background:rgba(216,69,63,.12);border-color:rgba(216,69,63,.4)}
.swn-pill.grijs{color:var(--n-dim);background:transparent;border-color:var(--n-line)}
.swn-meta{display:flex;flex-wrap:wrap;gap:4px 20px;font:12px/1.4 var(--n-mono);color:var(--n-dim)}
.swn-meta b{color:var(--n-text);font-weight:500}
.swn-st .swn-btn{margin-left:auto}
.swn-reden{font-size:12.5px;color:var(--n-dim);width:100%}
.swn-cmp{padding:11px 14px;border-left:3px solid var(--n-cyan);background:rgba(95,208,230,.07);
  border-radius:0 6px 6px 0;font-size:13px;margin-bottom:12px}
.swn-cmp b{font:500 13px var(--n-mono)}
.swn-groepen{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.swn-g{border:1px solid var(--n-line);border-radius:10px;background:var(--n-ground);padding:11px 14px;
  display:grid;gap:0;align-content:start}
.swn-g h4{margin:0 0 6px;font:600 15px/1 var(--n-display);letter-spacing:.08em;text-transform:uppercase;color:var(--n-cyan)}
.swn-kv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:6px 0;
  border-top:1px solid rgba(29,67,80,.6);font-size:13px}
.swn-kv:first-of-type{border-top:0}
.swn-kv span{color:var(--n-dim)}
.swn-kv b{font:500 13.5px/1.3 var(--n-mono);font-variant-numeric:tabular-nums}
.swn-kv b small{color:var(--n-dim);font-weight:400;margin-left:3px}

/* De paneelkop (titel, 6/12/24/48, Back) in dezelfde stijl zodra New aan
   staat - sinds tab_huid_nieuw hebben alle tabs de nieuwe stijl. */
html[data-sdstijl="nieuw"] #tabPanel{background:#061419;border-color:#1d4350}
html[data-sdstijl="nieuw"] #tabPanel .sd-tabpanel-head{border-bottom-color:#1d4350}
html[data-sdstijl="nieuw"] #tabPanel #tabPanelTitle{font:600 20px/1 "Barlow Condensed","Arial Narrow",Arial,sans-serif;
  letter-spacing:.05em;text-transform:uppercase;color:#e4efee}
html[data-sdstijl="nieuw"] .tw-set:is([data-tw="sw"],[data-tw="scc"],[data-tw="wi"],[data-tw="sti"]){gap:0;border:1px solid #1d4350;border-radius:6px;
  overflow:hidden;background:#0c2129}
html[data-sdstijl="nieuw"] .tw-set:is([data-tw="sw"],[data-tw="scc"],[data-tw="wi"],[data-tw="sti"]) :is(.sw-btn,.scc-btn,.wi-btn,.sti-btn){border:0;border-radius:0;background:transparent;
  color:#8fb0b3;font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;padding:8px 14px;margin:0}
html[data-sdstijl="nieuw"] .tw-set:is([data-tw="sw"],[data-tw="scc"],[data-tw="wi"],[data-tw="sti"]) :is(.sw-btn,.scc-btn,.wi-btn,.sti-btn)+:is(.sw-btn,.scc-btn,.wi-btn,.sti-btn){border-left:1px solid #1d4350}
html[data-sdstijl="nieuw"] .tw-set:is([data-tw="sw"],[data-tw="scc"],[data-tw="wi"],[data-tw="sti"]) :is(.sw-btn,.scc-btn,.wi-btn,.sti-btn):hover{color:#e4efee}
html[data-sdstijl="nieuw"] .tw-set:is([data-tw="sw"],[data-tw="scc"],[data-tw="wi"],[data-tw="sti"]) :is(.sw-btn,.scc-btn,.wi-btn,.sti-btn).act{background:#12303a;color:#e4efee;
  box-shadow:inset 0 -2px 0 #2fcf86}
html[data-sdstijl="nieuw"] #tabPanel .sd-backbtn{background:transparent;border-color:#1d4350;color:#e4efee;
  font:600 13px/1 "IBM Plex Sans",system-ui,sans-serif;padding:8px 12px;border-radius:6px}
html[data-sdstijl="nieuw"] #tabPanel .sd-backbtn:hover{background:#12303a;border-color:#1d4350}

/* De knop in de topbalk: tekst in plaats van een icoon, verder een sd-cog. */
.sd-cog.swn-stijlknop{width:auto;padding:0 10px;vertical-align:top;font:600 12px/1 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.02em}
.sd-cog.swn-stijlknop[aria-pressed="true"]{background:#2fcf86;color:#03281a;border-color:#2fcf86}

@media (max-width:1100px){
  .swn-grid2,.swn-grid3{grid-template-columns:1fr;grid-template-areas:"rang" "graf" "sat";grid-template-rows:none}
  .swn-ro{grid-template-columns:repeat(3,minmax(0,1fr))}
  .swn-ro>div:nth-child(4){border-left:0}
  .swn-ro>div:nth-child(n+4){border-top:1px solid var(--n-line)}
}

/* ===== SeaCurrent, nieuwe weergave (tab_seacurrent_nieuw); erft .swn ===== */
html[data-sdstijl="nieuw"] .tab-scherm[data-scherm="seacurrent"] > .scc-wrap{display:none!important}
.scn-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.scn-roos{display:flex;justify-content:center;padding:10px 10px 0}
.scn-roos svg{display:block;max-width:100%;height:auto}
.scn-roos text{font-family:var(--n-mono);font-size:10.5px;fill:var(--n-dim)}
.scn-roos text.nesw{font:600 14px var(--n-display);fill:var(--n-text);letter-spacing:.04em}
.scn-lg{padding:8px 14px 12px}
.scn-lg i.dash{height:0;background:none!important;border-top:2px dashed}
.scn-schip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--n-line)}
.scn-schip>div{padding:10px 14px;display:grid;gap:3px}
.scn-schip>div+div{border-left:1px solid var(--n-line)}
.scn-schip .k{font:500 10.5px/1 var(--n-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--n-dim)}
.scn-schip .v{font:500 16px/1.2 var(--n-mono);font-variant-numeric:tabular-nums}
.scn .swn-ro .s em{font-style:normal;color:var(--n-near)}
.scn td.g{border-left:1px solid var(--n-line)}
.scn th.g{border-left:1px solid var(--n-line)}
.scn .swn-pijl{width:15px;height:15px;margin-left:5px;vertical-align:-3px}
@media (max-width:1100px){ .scn-grid{grid-template-columns:1fr} }

/* ===== SeaWind, nieuwe weergave (tab_seawind_nieuw); erft .swn ===== */
html[data-sdstijl="nieuw"] .tab-scherm[data-scherm="seawind"] > .wi-wrap{display:none!important}
.wdn-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start;
  grid-template-areas:"rang roos sat" "rang syn sat";grid-template-rows:auto 1fr}
/* v1.9: vaste plekken; het eerste kind is Models, ranked */
.wdn-grid>.swn-card:first-child{grid-area:rang}
.wdn-grid>.wdn-roos{grid-area:roos}
.wdn-grid>.wdn-sat{grid-area:sat}
.wdn-grid>.wdn-syn{grid-area:syn}
.wdn .swn-m .val{width:auto}
.wdn .swn-m{grid-template-columns:16px 10px minmax(0,1fr) 60px 58px}
.wdn .swn-m .val small{display:block;font-size:10.5px;color:var(--n-dim);margin-top:3px}
.wdn-kies{display:flex;flex-wrap:wrap;gap:6px}
.wdn-kies button{padding:7px 11px;border:1px solid var(--n-line);border-radius:6px;background:var(--n-ground);
  font:500 12px/1 var(--n-mono);color:var(--n-dim)}
.wdn-kies button small{margin-left:6px;opacity:.7}
.wdn-kies button[aria-pressed="true"]{background:var(--n-surface-2);color:var(--n-text);box-shadow:inset 0 -2px 0 var(--n-ok)}
.wdn-kies button:hover{color:var(--n-text)}
.wdn td.bft{color:var(--n-dim)}
/* Geleende oude blokken (scheepvaartbericht, typhoon) in de nieuwe stijl */
.wdn .wdn-syn,.wdn .wdn-leen{padding:14px 16px}
.wdn .wi-synopsis{all:unset;display:block}
.wdn .wi-syn-kop{font:500 10.5px/1 var(--n-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--n-cyan);margin-bottom:8px}
.wdn .wi-syn-district{font:600 20px/1.15 var(--n-display);letter-spacing:.02em;color:var(--n-text);margin-bottom:10px}
.wdn .wi-syn-tekst{font-size:13.5px;line-height:1.6;color:var(--n-text)}
.wdn .wi-syn-tekst .r{margin-bottom:6px}
.wdn .wi-syn-tekst .r b{font-weight:600;color:var(--n-cyan)}
.wdn .wi-syn-voet{margin-top:12px;padding-top:10px;border-top:1px solid var(--n-line);font:11.5px/1.5 var(--n-mono);color:var(--n-dim)}
.wdn .wi-tabblad{display:block!important}
.wdn .wi-syn-uitleg{font-size:12.5px;line-height:1.6;color:var(--n-dim);margin-bottom:12px}
.wdn .wi-syn-alle{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.wdn .wi-syn-kaart{border:1px solid var(--n-line);border-radius:10px;background:var(--n-ground);padding:12px 14px}
.wdn .wi-syn-kaart h4{margin:0 0 4px;font:600 16px/1.1 var(--n-display);letter-spacing:.03em;color:var(--n-text)}
.wdn .wi-syn-kaart .dom{font:11px/1.4 var(--n-mono);color:var(--n-dim);margin-bottom:8px}
.wdn .wi-syn-kaart .r,.wdn .wi-syn-kaart .rij{font-size:13px;line-height:1.55;margin-bottom:4px;color:var(--n-text)}
.wdn .wi-syn-kaart b{color:var(--n-cyan);font-weight:600}
/* v1.5: tabs per leverancier in Forecast */
.wdn .wi-syn-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.wdn .wi-syn-tab{font:500 11px/1 var(--n-mono);letter-spacing:.08em;text-transform:uppercase;padding:7px 11px;border-radius:6px;cursor:pointer;border:1px solid var(--n-line);background:var(--n-ground);color:var(--n-dim)}
.wdn .wi-syn-tab.act{border-color:var(--n-cyan);color:var(--n-cyan)}
.wdn .wi-syn-groep{font:500 10.5px/1 var(--n-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--n-cyan);margin:16px 0 8px;grid-column:1/-1}
.wdn .wi-syn-waarsch{color:#ff6b5e;font-weight:600;margin-bottom:6px;font-size:13px}
.wdn .wi-ty-warn{padding:10px 14px;border-radius:8px;margin-bottom:12px;border:1px solid var(--n-line);font-size:13px}
.wdn .wi-ty-warn.actief{background:rgba(216,69,63,.14);border-color:rgba(216,69,63,.5);color:var(--n-text)}
.wdn .wi-ty-warn.rustig{background:var(--n-ground);color:var(--n-dim)}
.wdn .wi-ty-kaart{background:var(--n-ground);border:1px solid var(--n-line);border-radius:10px;padding:12px 14px;margin-bottom:12px}
.wdn .wi-ty-kop{font:600 16px/1.1 var(--n-display);letter-spacing:.03em;color:var(--n-text)}
.wdn .wi-ty-sub,.wdn .wi-ty-leeg{font-size:12px;color:var(--n-dim)}
.wdn .wi-ty-kaart table{font:12.5px/1 var(--n-mono)}
@media (max-width:1250px){ .wdn-grid{grid-template-columns:minmax(0,300px) minmax(0,1fr);
  grid-template-areas:"rang roos" "rang syn" "sat syn";grid-template-rows:auto auto 1fr} }
@media (max-width:900px){ .wdn-grid{grid-template-columns:1fr;grid-template-areas:"rang" "roos" "sat" "syn";grid-template-rows:none} }

/* ===== SeaTide, nieuwe weergave (tab_seatidal_nieuw); erft .swn ===== */
html[data-sdstijl="nieuw"] .tab-scherm[data-scherm="seatidal"] > :not(.swn):not(link){display:none!important}
.tdn .hw{color:var(--n-cyan)} .tdn .lw{color:#b59cf5}
.tdn td.bron{white-space:nowrap}
.tdn td.bron i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:8px}
.tdn th.g,.tdn td.g{border-left:1px solid var(--n-line)}
.tdn .swn-ro .v em{font-style:normal;font-size:13px;color:var(--n-dim);margin-left:6px}

/* ===== Huisstijl over SolarNav, SeaHarbour, Workability (tab_huid_nieuw) ===== */
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]){--surface:#0c2129;--surface-2:#061419;--border:#1d4350;--text:#e4efee;--text-dim:#8fb0b3;
  --acc:#2fcf86;--bg:#0c2129;
  background:#0c2129;color:#e4efee;border:1px solid #1d4350;border-radius:10px;padding:14px 16px;
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) :is(h1,h2,h3,h4){font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;letter-spacing:.02em}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) a{color:#5fd0e6}
/* subtabs als onderstreepte tabs */
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) :is(.sn-subtabs,.sh-subtabs){gap:4px;border-bottom:1px solid #1d4350;margin-bottom:16px}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) :is(.sn-subtab,.sh-subtab){background:none;border:0;border-bottom:2px solid transparent;border-radius:0;
  padding:9px 14px 10px;margin-bottom:-1px;font:600 16px/1 "Barlow Condensed","Arial Narrow",Arial,sans-serif;
  letter-spacing:.04em;text-transform:uppercase;color:#8fb0b3}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) :is(.sn-subtab,.sh-subtab).act{background:none;color:#e4efee;border-bottom-color:#2fcf86}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) :is(.sn-subtab,.sh-subtab):hover{color:#e4efee}
/* kaarten en koppen */
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) :is(.sn-kaart,.sh-kaart,.sn-metr){background:#061419;border-color:#1d4350;border-radius:10px}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) :is(.sn-kaart-titel){font:600 17px/1.1 "Barlow Condensed","Arial Narrow",Arial,sans-serif;letter-spacing:.03em;
  text-transform:uppercase;border-bottom:1px solid #1d4350;padding-bottom:10px}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) :is(.sn-metr-lbl,.pi-sectie-titel,.wk-blokkop){font:500 10.5px/1.2 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.12em;text-transform:uppercase;color:#8fb0b3}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .pi-sectie-titel{color:#5fd0e6}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) :is(.sn-metr-val,.sn-rij-v,.pi-maten span:last-child){font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums;font-weight:500}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .sn-metr-val{font-size:24px}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .pi-naam{font:600 24px/1.1 "Barlow Condensed","Arial Narrow",Arial,sans-serif;letter-spacing:.02em}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .pi-kop{border-bottom:1px solid #1d4350}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .pi-badge,html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .pi-jn span{border-color:#1d4350;background:#061419;color:#e4efee}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .pi-melding{background:rgba(95,208,230,.07);border-left-color:#5fd0e6;color:#e4efee}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .pi-melding.fout{background:rgba(216,69,63,.1);border-left-color:#d8453f}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .sn-zon-wrap{border-color:#1d4350}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .sn-voet,html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .sh-voet{color:#8fb0b3}
/* tabellen */
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) :is(.sh-tabel,.sn-tabel,.wk-tab){font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) :is(.sh-tabel,.sn-tabel,.wk-tab) th{background:#12303a;color:#8fb0b3;font:500 11px/1.2 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.06em;text-transform:uppercase}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) :is(.sh-tabel,.sn-tabel,.wk-tab) :is(th,td){border-color:#1d4350}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) :is(.sh-tabel td.sh-l){font-family:"IBM Plex Sans",system-ui,sans-serif}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .sh-tabel tbody tr:hover{background:#12303a}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .pi-tabel-wrap tr.act{background:#12303a!important;box-shadow:inset 3px 0 0 #2fcf86}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .sh-lijst,html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .pi-lijst{border-radius:10px}
/* invoer en knoppen */
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) :is(input[type=text],input[type=number],input:not([type]),select,textarea,.sh-zoek,.sh-kiezer,.wk-in){
  background:#061419;border:1px solid #1d4350;border-radius:6px;color:#e4efee}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) :is(input,select,textarea):focus{outline:2px solid #5fd0e6;outline-offset:1px}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .wk-knop{background:#061419;border-color:#1d4350;color:#e4efee;border-radius:6px}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .wk-knop:hover{background:#12303a}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .wk-doe{background:#2fcf86;border-color:#2fcf86;color:#03281a;font-weight:600}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .wk-doe:hover{background:#45e39a}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .wk-kaart{background:#061419;border-color:#1d4350;border-radius:10px}
/* Workability: de bovenste tabs (sd-subtab) zoals de subtabs van de nieuwe tabs */
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .sd-subtabs{gap:4px;border-bottom:1px solid #1d4350}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .sd-subtab{font:600 16px/1 "Barlow Condensed","Arial Narrow",Arial,sans-serif;letter-spacing:.04em;
  text-transform:uppercase;color:#8fb0b3;padding:9px 14px 10px}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .sd-subtab.act{color:#e4efee;border-bottom-color:#2fcf86;font-weight:600}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .sd-subtab:hover{color:#e4efee}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .wk-subschip .wk-blbl{font:500 10.5px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;color:#5fd0e6}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .wk-subschip select{background:#12303a;border:1px solid #2a6070;border-radius:6px;color:#e4efee;
  font:600 13px/1.2 "IBM Plex Sans",system-ui,sans-serif;padding:6px 10px}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .wk-tab td:first-child{font-family:"IBM Plex Sans",system-ui,sans-serif}
/* Contract en de bolletjes: dezelfde betekenis, de tinten van de huisstijl
   (werkbaar #2fcf86, marge #f2a64a, over #d8453f - zoals de voorpagina).
   Het polair (canvas) houdt zijn eigen kleuren. */
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .wk-ct-v.ok,html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .wk-bol.goed{background:#2fcf86}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .wk-ct-v.marge,html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .wk-bol.matig{background:#f2a64a}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .wk-ct-v.netover{background:#c46a2b}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .wk-ct-v.slecht,html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .wk-bol.slecht{background:#d8453f}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .wk-ct-v.kort{background:repeating-linear-gradient(45deg,#f2a64a 0 3px,#5a4410 3px 6px)}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .wk-ct-v.open{background:repeating-linear-gradient(45deg,#2fcf86 0 3px,#0b4a31 3px 6px)}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .wk-samen-regel.goed{border-left-color:#2fcf86} html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .wk-samen-regel.matig{border-left-color:#f2a64a}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .wk-samen-regel.slecht{border-left-color:#d8453f}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .wk-ct-pil.ok{background:rgba(47,207,134,.14);color:#2fcf86}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .wk-ct-pil.slecht{background:rgba(216,69,63,.16);color:#f08a85}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .wk-ct-voorbeeld{background:rgba(242,166,74,.08);border-color:rgba(242,166,74,.5)}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .wk-ct-voorbeeld b{color:#f2a64a}
/* De Contract-tijdlijn is SVG met de kleur als fill-attribuut (KLEUR in
   tab_workability); een CSS-fill gaat voor het attribuut. */
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) svg [fill="#0ca30c"]{fill:#2fcf86} html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) svg [fill="#0a4d0a"]{fill:#0b4a31}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) svg [fill="#f5a54a"]{fill:#f2a64a} html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) svg [fill="#fab219"]{fill:#f2a64a}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) svg [fill="#c75d0a"]{fill:#c46a2b} html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) svg [fill="#d03b3b"]{fill:#d8453f}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .wk-bintab{font:600 14px/1 "Barlow Condensed","Arial Narrow",Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;
  border-radius:0;border-bottom:2px solid transparent;color:#8fb0b3}
html[data-sdstijl="nieuw"] .tab-scherm:is([data-scherm="solarnav"],[data-scherm="seaharbour"],[data-scherm="workability"]) .wk-bintab.act{background:none;color:#e4efee;border-bottom-color:#2fcf86}

/* ===== Kaartpagina in de huisstijl (kaart_nieuw) ===== */
.kpn-groep,.kpn-basis{display:none}

/* --- topbalk --- */
html[data-sdstijl="nieuw"] .sd-kop{background:#061419;border-bottom:1px solid #1d4350}
/* v1.6: de kop even hoog als de onderbalk (~51 px). De hoogte zat in twee
   dingen: 12 px lucht boven en onder, en het merkblok (naam 22 px + de
   regel seadata.online = 48 px, hoger dan het logo van 38). Nu draagt het
   logo de hoogte en past de rest daarbinnen. Er gaat NIETS uit de balk. */
html[data-sdstijl="nieuw"] .sd-top{background:transparent;padding-top:6px;padding-bottom:6px}
/* GEEN harde eenrij-regel. Geprobeerd (flex-wrap:nowrap + overflow op het
   middenblok) en GEMETEN dat de balk dan wel 51 px blijft, maar dat bij
   1500 px breed de VLOOTKIEZER en de Focus-knop links wegvielen - en een
   lage balk waar je bediening uit verdwijnt is geen winst. Past het niet,
   dan breekt de balk zoals altijd af naar een tweede rij; op een breed
   scherm blijft hij op een rij van 51 px. */
html[data-sdstijl="nieuw"] #vlootNaam{display:inline-block;max-width:130px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
html[data-sdstijl="nieuw"] .sd-brand .name{font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;font-size:18px;line-height:1.15;letter-spacing:.02em}
html[data-sdstijl="nieuw"] .sd-brand .sub{font-family:"IBM Plex Mono",ui-monospace,monospace;color:#8fb0b3;line-height:1.15}
html[data-sdstijl="nieuw"] .sd-client{gap:0;color:#e4efee}
/* v1.6: de SCHEEPSNAAM valt niet meer over twee regels. Die cel werd 49 px
   zodra er een naam in stond, en dan groeide de hele balk mee - precies
   wat we hier weghalen. Alleen deze cel: nowrap op ALLE waarden maakte de
   rij breder dan het scherm, en dan brak de balk juist in tweeen (95 px,
   gemeten). Een lange naam wordt afgekapt met een punt; hij staat voluit
   in de vlootkiezer ernaast. */
html[data-sdstijl="nieuw"] #clNaam{display:block;max-width:150px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
html[data-sdstijl="nieuw"] .sd-cl-item{padding:4px 11px;border-left:1px solid #1d4350;min-height:34px;justify-content:center}
html[data-sdstijl="nieuw"] .sd-cl-item .cl-k{font:500 9.5px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.12em;color:#8fb0b3;margin-bottom:3px}
html[data-sdstijl="nieuw"] .sd-cl-item .cl-v{font:500 13px/1.1 "IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
html[data-sdstijl="nieuw"] .sd-cl-wx{gap:0;margin:0 10px;border:1px solid #1d4350;border-radius:8px;background:#0c2129}
html[data-sdstijl="nieuw"] .sd-cl-wx .sd-cl-item:first-child{border-left:0}
html[data-sdstijl="nieuw"] .sd-focusbtn,html[data-sdstijl="nieuw"] .sd-cog{width:30px;height:30px;border-radius:8px;background:#0c2129;border:1px solid #1d4350;color:#8fb0b3}
html[data-sdstijl="nieuw"] .sd-focusbtn:hover,html[data-sdstijl="nieuw"] .sd-cog:hover{background:#12303a;color:#e4efee}
html[data-sdstijl="nieuw"] .sd-cog-wrap{display:flex;gap:6px;margin-left:10px}
html[data-sdstijl="nieuw"] .sd-cog.swn-stijlknop{height:30px}
html[data-sdstijl="nieuw"] .sd-getij,html[data-sdstijl="nieuw"] .sd-utc{height:34px;border-radius:8px;background:#0c2129;border:1px solid #1d4350;
  font-family:"IBM Plex Mono",ui-monospace,monospace}
html[data-sdstijl="nieuw"] .sd-getij-tekst{color:#5fd0e6;font-weight:500}
html[data-sdstijl="nieuw"] .sd-getij-vlg{color:#8fb0b3;font-size:11.5px}
html[data-sdstijl="nieuw"] .sd-utc-lbl{color:#8fb0b3;font-weight:500}
html[data-sdstijl="nieuw"] .sd-utc-tijd{color:#e4efee;font-size:13px}
html[data-sdstijl="nieuw"] .sd-oog{width:34px;height:34px;border-radius:8px;background:#12303a;border-color:#1d4350;color:#2fcf86}
html[data-sdstijl="nieuw"] .sd-cogmenu{background:#0c2129;border-color:#1d4350}

/* --- zwevende panelen: een glas-ondergrond --- */
html[data-sdstijl="nieuw"] :is(#sideTabs,.sd-mapctl,.sd-hoek){background:rgba(6,20,25,.88);border:1px solid #1d4350;border-radius:12px;
  box-shadow:0 14px 40px -18px rgba(0,0,0,.7);backdrop-filter:blur(6px);color:#e4efee}

/* --- tabknoppen --- */
html[data-sdstijl="nieuw"] #sideTabs{width:184px;padding:6px;gap:2px}
html[data-sdstijl="nieuw"] .kpn-groep{display:block;padding:10px 8px 6px;font:500 9.5px/1 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.14em;text-transform:uppercase;color:#8fb0b3}
html[data-sdstijl="nieuw"] .kpn-groep.g1{order:-1}
html[data-sdstijl="nieuw"] .kpn-groep.g2{order:3}
/* v1.13 OPTIE A (Dennis 2026-09-23: "kunnen wij de tabs screen maken zoals
   windy.com dat heeft een rondje met icon en daar de naam achter", "we gaan
   voor optie a"). Een rond knopje met het icoon en de naam in een pilletje
   ernaast; geen donker blok en geen kopje "Screens" meer - de knoppen staan
   los op de kaart. Actief = groen rondje met een donker icoon. */
html[data-sdstijl="nieuw"] #sideTabs{background:transparent;border:0;box-shadow:none;backdrop-filter:none;width:auto;padding:0;gap:8px}
html[data-sdstijl="nieuw"] #sideTabs .kpn-groep.g1{display:none}
html[data-sdstijl="nieuw"] #sideTabs .sd-tab{width:auto;min-height:40px;padding:0;gap:9px;background:transparent;border:0;border-radius:0;box-shadow:none}
html[data-sdstijl="nieuw"] #sideTabs .sd-tab:hover{background:transparent}
html[data-sdstijl="nieuw"] #sideTabs .sd-tab .ti{width:40px;height:40px;flex:0 0 40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(12,33,41,.88);border:1px solid #1d4350;color:#e4efee;box-shadow:0 2px 8px rgba(0,0,0,.3);
  transition:background .15s,color .15s}
html[data-sdstijl="nieuw"] #sideTabs .sd-tab .tt{padding:5px 11px;border-radius:999px;background:rgba(12,33,41,.88);border:1px solid #1d4350;
  color:#e4efee;font:500 13.5px/1.1 "IBM Plex Sans",system-ui,sans-serif;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.25)}
html[data-sdstijl="nieuw"] #sideTabs .sd-tab:hover .ti{background:#17414f;color:#e4efee}
html[data-sdstijl="nieuw"] #sideTabs .sd-tab:hover .tt{color:#fff}
html[data-sdstijl="nieuw"] #sideTabs .sd-tab.active{background:transparent;box-shadow:none}
html[data-sdstijl="nieuw"] #sideTabs .sd-tab.active .ti{background:#2fcf86;border-color:#2fcf86;color:#0c2129}
html[data-sdstijl="nieuw"] #sideTabs .sd-tab.active .tt{border-color:#2fcf86;color:#fff;font-weight:600}
html[data-sdstijl="nieuw"] #sideTabs .sd-tab:focus-visible{outline:none}
html[data-sdstijl="nieuw"] #sideTabs .sd-tab:focus-visible .ti{outline:2px solid #2fcf86;outline-offset:2px}
@media (prefers-reduced-motion:reduce){html[data-sdstijl="nieuw"] #sideTabs .sd-tab .ti{transition:none}}
/* v1.14 VARIANT A (Dennis 2026-09-23: "maak A en kijk goed naar seacurrent
   zorg dat alle lijnen in icoon meekleuren"). Elk scherm een vaste kleur in
   het icoon; het rondje blijft donker. Actief: een ring in die kleur en het
   pilletje met dezelfde rand. Rood en hard oranje blijven voor waarschuwingen. */
html[data-sdstijl="nieuw"] #sideTabs .sd-tab[data-tab=seawave]{--k:#29b6f6}
html[data-sdstijl="nieuw"] #sideTabs .sd-tab[data-tab=seacurrent]{--k:#26c6a6}
html[data-sdstijl="nieuw"] #sideTabs .sd-tab[data-tab=seawind]{--k:#a594ff}
html[data-sdstijl="nieuw"] #sideTabs .sd-tab[data-tab=seatidal]{--k:#4f7cff}
html[data-sdstijl="nieuw"] #sideTabs .sd-tab[data-tab=solarnav]{--k:#ffb300}
html[data-sdstijl="nieuw"] #sideTabs .sd-tab[data-tab=seaharbour]{--k:#f06292}
html[data-sdstijl="nieuw"] #sideTabs .sd-tab[data-tab=workability]{--k:#2fcf86}
html[data-sdstijl="nieuw"] #sideTabs .sd-tab .ti{box-sizing:border-box;color:var(--k,#e4efee)}
html[data-sdstijl="nieuw"] #sideTabs .sd-tab:hover .ti{color:var(--k,#e4efee)}
html[data-sdstijl="nieuw"] #sideTabs .sd-tab.active .ti{background:rgba(12,33,41,.92);border:2px solid var(--k,#2fcf86);color:var(--k,#2fcf86);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--k,#2fcf86) 25%,transparent),0 2px 8px rgba(0,0,0,.3)}
html[data-sdstijl="nieuw"] #sideTabs .sd-tab.active .tt{border-color:var(--k,#2fcf86)}
/* Alle LIJNEN op volle sterkte: SeaCurrent had drie lijnen op 0.5 en
   Workability een cirkel op 0.55 - die bleven grauw in plaats van mee te
   kleuren. Vlakken (het taartpunt van Workability) houden hun tint. */
html[data-sdstijl="nieuw"] #sideTabs .sd-tab .ti svg [stroke][opacity]{opacity:1}
/* v1.15: SeaCurrent een slag dikker (Dennis 2026-09-23: "kan jij de lijnen
   van seacurrent 1 slag dikker maken") - elke lijn +0,5: golf 2 -> 2,5,
   pijlpunt 1,8 -> 2,3, streepjes 1,5 -> 2. */
html[data-sdstijl="nieuw"] #sideTabs .sd-tab[data-tab=seacurrent] .ti svg [stroke-width="2"]{stroke-width:2.5}
html[data-sdstijl="nieuw"] #sideTabs .sd-tab[data-tab=seacurrent] .ti svg [stroke-width="1.8"]{stroke-width:2.3}
html[data-sdstijl="nieuw"] #sideTabs .sd-tab[data-tab=seacurrent] .ti svg [stroke-width="1.5"]{stroke-width:2}
/* v1.13: inklapknop in de kop van Map layer, in de tinten van dit paneel */
html[data-sdstijl="nieuw"] .sd-klap-knop{background:#12303a;border:1px solid #1d4350;color:#8fb0b3;width:20px;height:20px;border-radius:5px}
html[data-sdstijl="nieuw"] .sd-klap-knop:hover{background:#17414f;color:#e4efee}
html[data-sdstijl="nieuw"] #sideTabs .sd-tab:is([data-tab=ais],[data-tab=forecast],[data-tab=searain]){order:4}
html[data-sdstijl="nieuw"] .sd-tab{width:100%;min-height:36px;background:transparent;border:0;border-radius:8px;padding:0 10px;gap:10px}
html[data-sdstijl="nieuw"] .sd-tab:hover{background:#0c2129;border:0}
html[data-sdstijl="nieuw"] .sd-tab .ti{background:none;border:0;width:20px;height:20px;color:#8fb0b3}
html[data-sdstijl="nieuw"] .sd-tab .ti svg{max-width:20px;max-height:20px}
/* SeaTide-icoon: paden zonder eigen kleur worden standaard zwart; in Classic
   stonden ze in een wit vakje, hier op de donkere ondergrond (Dennis: "icoon
   seatide is donker"). Alleen dit icoon en alleen paden zonder klasse: andere
   iconen (Workability) krijgen fill:none van een bovenliggend element. */
html[data-sdstijl="nieuw"] .sd-tab[data-tab=seatidal] .ti svg path:not([class]):not([fill]){fill:currentColor}
html[data-sdstijl="nieuw"] .sd-tab .tt{color:#8fb0b3;font:400 13.5px/1 "IBM Plex Sans",system-ui,sans-serif}
html[data-sdstijl="nieuw"] .sd-tab:hover .tt,html[data-sdstijl="nieuw"] .sd-tab:hover .ti{color:#e4efee}
html[data-sdstijl="nieuw"] .sd-tab.active{background:#12303a;box-shadow:inset 3px 0 0 #2fcf86}
html[data-sdstijl="nieuw"] .sd-tab.active .tt,html[data-sdstijl="nieuw"] .sd-tab.active .ti{color:#e4efee}
/* de lagen-tabs: geen groene streep maar een schakelaar */
html[data-sdstijl="nieuw"] .sd-tab:is([data-tab=ais],[data-tab=forecast],[data-tab=searain]).active{background:transparent;box-shadow:none}
html[data-sdstijl="nieuw"] .sr-cog{margin-left:auto;color:#8fb0b3}

/* --- schakelaar (gedeeld): uit = grijs knopje links, aan = groen rechts --- */
html[data-sdstijl="nieuw"] :is(.sd-tab:is([data-tab=ais],[data-tab=forecast],[data-tab=searain]),.sd-mapctl .sd-mapctl-kop,#platIco,#areasIco,#routeIco,#waveIco,#windIco,#satIco,#wolkIco){position:relative;padding-right:44px!important}
html[data-sdstijl="nieuw"] :is(.sd-tab:is([data-tab=ais],[data-tab=forecast],[data-tab=searain]),.sd-mapctl .sd-mapctl-kop,#platIco,#areasIco,#routeIco,#waveIco,#windIco,#satIco,#wolkIco)::after{content:"";position:absolute;right:10px;top:50%;width:28px;height:16px;margin-top:-8px;border-radius:999px;
  background:#1d4350 radial-gradient(circle at 8px 8px,#8fb0b3 5.5px,transparent 6px) no-repeat;transition:background .15s}
html[data-sdstijl="nieuw"] :is(.sd-tab.active,.sd-mapctl .sd-mapctl-kop.aan,.sd-mapctl .sd-ioc-kop:not(.uit),#platIco:not(.uit),#areasIco:not(.uit),#routeIco:not(.uit),#waveIco:not(.uit),#windIco:not(.uit),#satIco:not(.uit),#wolkIco:not(.uit))::after{
  background:rgba(47,207,134,.35) radial-gradient(circle at 20px 8px,#2fcf86 5.5px,transparent 6px) no-repeat}
html[data-sdstijl="nieuw"] .sd-tab:not([data-tab=ais]):not([data-tab=forecast]):not([data-tab=searain])::after{display:none}
html[data-sdstijl="nieuw"] .sd-tab[data-tab=searain] .sr-cog{margin-right:6px}

/* v1.12: het SeaRain-menu (tandwiel) in de tinten van het kaartlagenpaneel;
   de basisstijl uit tab_searain is licht (Dennis: "in classic stijl"). */
html[data-sdstijl="nieuw"] .sr-pop{background:#0c2129;border:1px solid #1d4350;color:#e4efee;
  box-shadow:0 8px 24px rgba(0,0,0,.45)}
html[data-sdstijl="nieuw"] .sr-pop .sr-pop-kop{color:#e4efee;font:600 14px/1 "Barlow Condensed","Arial Narrow",Arial,sans-serif;
  letter-spacing:.1em;text-transform:uppercase}
html[data-sdstijl="nieuw"] .sr-pop .sr-lbl{color:#8fb0b3;font:500 9.5px/1.3 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.1em;text-transform:uppercase}
html[data-sdstijl="nieuw"] .sr-pop .sr-keus{background:#12303a;border-color:#1d4350;color:#8fb0b3}
html[data-sdstijl="nieuw"] .sr-pop .sr-keus:hover{background:#17414f;color:#e4efee}
html[data-sdstijl="nieuw"] .sr-pop .sr-keus.act{background:#17414f;border-color:#2fcf86;color:#2fcf86}
html[data-sdstijl="nieuw"] .sr-pop .sr-schuif{color:#e4efee}
html[data-sdstijl="nieuw"] .sr-pop .sr-schuif-b{background:#1d4350}
html[data-sdstijl="nieuw"] .sr-pop .sr-schuif-b::after{background:#8fb0b3}
html[data-sdstijl="nieuw"] .sr-pop .sr-schuif input:checked + .sr-schuif-b{background:#2fcf86}
html[data-sdstijl="nieuw"] .sr-pop .sr-voet{border-top-color:#1d4350;color:#8fb0b3}

/* --- kaartlagen rechtsboven --- */
html[data-sdstijl="nieuw"] .sd-mapctl{width:216px;padding:8px 0 6px;gap:0}
html[data-sdstijl="nieuw"] .sd-mapctl-lbl{padding:4px 12px 8px;font:600 14px/1 "Barlow Condensed","Arial Narrow",Arial,sans-serif;letter-spacing:.1em;
  text-transform:uppercase;color:#8fb0b3}
html[data-sdstijl="nieuw"] .sd-mapctl-sel{display:none}
/* WERELDDELEN (v1.9). Het tandwiel en het menu staan in de basisstijl op
   ZWART - dat leest op het groene Classic-paneel. Dit paneel is donker, dus
   daar is zwart op donkergrijs (Dennis 2026-09-22: "kleur is zwart op donker
   grijs van config icoon en de tekst"). Zelfde tinten als de rest van dit
   paneel: gedempt #8fb0b3, actief #e4efee, randen #1d4350. */
html[data-sdstijl="nieuw"] .sd-mapctl-kopregel{padding-right:10px}
html[data-sdstijl="nieuw"] .sd-mapctl-kopregel .sd-mapctl-lbl{padding-right:0}
html[data-sdstijl="nieuw"] .sd-regio-knop{background:#12303a;border:1px solid #1d4350;color:#8fb0b3;
  width:20px;height:20px;border-radius:5px}
html[data-sdstijl="nieuw"] .sd-regio-knop:hover{background:#17414f;color:#e4efee}
html[data-sdstijl="nieuw"] .sd-regio-knop[aria-expanded="true"]{background:#17414f;color:#2fcf86}
html[data-sdstijl="nieuw"] .sd-regio-menu{margin:0 10px 8px;padding:8px 9px;border:1px solid #1d4350;
  border-radius:6px;background:#0c2129}
html[data-sdstijl="nieuw"] .sd-regio-t{color:#8fb0b3;font:500 9.5px/1 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.1em;text-transform:uppercase}
html[data-sdstijl="nieuw"] .sd-regio-menu label{color:#e4efee;font:400 12px/1.4 "IBM Plex Sans",system-ui,sans-serif}
html[data-sdstijl="nieuw"] .sd-regio-menu input{accent-color:#2fcf86}
/* v1.10: legendatekst in het kaartlagenpaneel (EU model wind/wave, AIS).
   De basisstijl zet .sd-mapctl .sd-ais-leg op #0f0f0f voor het groene
   Classic-paneel; op dit donkere paneel viel dat weg. */
html[data-sdstijl="nieuw"] .sd-mapctl .sd-ais-leg{color:#e4efee}
html[data-sdstijl="nieuw"] .sd-mapctl .sd-ais-leg-voet{color:#8fb0b3}
html[data-sdstijl="nieuw"] .sd-regio-voet{color:#8fb0b3;font:400 10px/1.4 "IBM Plex Sans",system-ui,sans-serif}
html[data-sdstijl="nieuw"] .kpn-basis{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:0 10px 10px}
html[data-sdstijl="nieuw"] .kpn-basis button{height:28px;border:1px solid #1d4350;border-radius:6px;background:#061419;color:#8fb0b3;
  font:500 11.5px/1 "IBM Plex Mono",ui-monospace,monospace;cursor:pointer}
html[data-sdstijl="nieuw"] .kpn-basis button[aria-pressed="true"]{background:#12303a;color:#e4efee;box-shadow:inset 0 -2px 0 #2fcf86}
html[data-sdstijl="nieuw"] .kpn-basis button:hover{color:#e4efee}
html[data-sdstijl="nieuw"] .kpn-basis button:only-child{grid-column:1/-1}
html[data-sdstijl="nieuw"] .sd-mapctl .sd-mapctl-kop,html[data-sdstijl="nieuw"] .sd-mapctl .sd-ico{width:100%;min-height:32px;margin:0;border:0;border-top:1px solid rgba(29,67,80,.55);
  border-radius:0;background:transparent;padding:0 12px;font:400 13px/1 "IBM Plex Sans",system-ui,sans-serif;color:#e4efee;opacity:1}
html[data-sdstijl="nieuw"] .sd-mapctl .sd-mapctl-kop:hover,html[data-sdstijl="nieuw"] .sd-mapctl .sd-ico:hover{background:rgba(18,48,58,.6)}
html[data-sdstijl="nieuw"] .sd-mapctl .sd-mapctl-kop:not(.aan):not(.sd-ioc-kop),html[data-sdstijl="nieuw"] .sd-mapctl .sd-ioc-kop.uit,html[data-sdstijl="nieuw"] .sd-mapctl .sd-ico.uit{color:#8fb0b3}
html[data-sdstijl="nieuw"] .sd-mapctl .sd-mapctl-vlag{opacity:1;border-color:rgba(255,255,255,.15)}
html[data-sdstijl="nieuw"] .sd-mapctl .sd-ico .sd-ico-lbl{font:inherit}
html[data-sdstijl="nieuw"] .sd-mapctl .sd-ico svg{color:#8fb0b3}
html[data-sdstijl="nieuw"] #aisTelling{display:block;margin:0;padding:0 12px 6px 38px;font:10.5px/1.4 "IBM Plex Mono",ui-monospace,monospace;color:#8fb0b3}
html[data-sdstijl="nieuw"] #aisTelling:empty{display:none}
/* Het routelijstje onder de knop Routes: zelfde vorm als #aisTelling. De
   basisstijl zet hem op zwart (dat leest op het groen van Classic); op dit
   donkere paneel moet hij licht zijn. */
html[data-sdstijl="nieuw"] #rtTelling{display:block;margin:0;padding:0 12px 6px 38px;font:10.5px/1.4 "IBM Plex Mono",ui-monospace,monospace;color:#8fb0b3}
html[data-sdstijl="nieuw"] #rtTelling:empty{display:none}
html[data-sdstijl="nieuw"] #wolkKeuze{grid-template-columns:repeat(3,1fr);gap:4px;padding:0 12px 4px 38px}
html[data-sdstijl="nieuw"] #wolkKeuze .sd-vlagtog{justify-content:center;font-size:10.5px;padding:2px 4px}
html[data-sdstijl="nieuw"] #wolkTijd{display:block;margin:0;padding:0 12px 6px 38px;font:10.5px/1.4 "IBM Plex Mono",ui-monospace,monospace;color:#8fb0b3}
html[data-sdstijl="nieuw"] #wolkTijd:empty{display:none}
html[data-sdstijl="nieuw"] #mpKeuze{display:grid;grid-template-columns:repeat(4,1fr);padding:2px 12px 4px 38px;gap:4px}
html[data-sdstijl="nieuw"] #mpKeuze .sd-mp-kl{color:#8fb0b3;font:10.5px/1.4 "IBM Plex Mono",ui-monospace,monospace}
html[data-sdstijl="nieuw"] #mpTelling{display:block;margin:0;padding:0 12px 6px 38px;font:10.5px/1.4 "IBM Plex Mono",ui-monospace,monospace;color:#8fb0b3}
html[data-sdstijl="nieuw"] #mpTelling:empty{display:none}
html[data-sdstijl="nieuw"] #platIco .sd-mp-cog{color:#8fb0b3;margin-right:6px}
html[data-sdstijl="nieuw"] #aisTelling.sd-ais-storing{color:#f2a64a}

/* GEEN FLITS BIJ HET VERVERSEN (v1.8). Dennis 2026-09-22: "ik zie soms bij
   verversen in screens schakelaars staan uit map layer. het is maar heel kort".
   AIS, ForeCast en SeaRain staan in de HTML gewoon in de linkerkolom; KPN_JS
   verhuist ze bij New pas naar het kaartlagenpaneel, en dat script draait
   onderaan de pagina. De browser tekent daarvoor al een keer, en dan staan ze
   een fractie van een seconde onder Screens.
   data-sdstijl staat al bij de eerste pixel op <html> (app.py zet hem), dus
   CSS kan dit wel op tijd: onzichtbaar ZOLANG ze in #sideTabs staan, zichtbaar
   zodra ze in .sd-mapctl hangen. De verhuizing zelf verandert niet, en het
   schakelen tussen Classic en New ook niet - bij Classic geldt deze regel
   helemaal niet en blijven ze gewoon links staan. */
html[data-sdstijl="nieuw"] #sideTabs .sd-tab[data-tab="ais"],
html[data-sdstijl="nieuw"] #sideTabs .sd-tab[data-tab="forecast"],
html[data-sdstijl="nieuw"] #sideTabs .sd-tab[data-tab="searain"]{display:none}

/* AIS/ForeCast/SeaRain in het kaartlagenpaneel (verplaatst door KPN_JS) */
html[data-sdstijl="nieuw"] .sd-mapctl .kpn-groep{display:none}
html[data-sdstijl="nieuw"] .sd-mapctl .sd-tab{min-height:32px;border-radius:0;border-top:1px solid rgba(29,67,80,.55);padding:0 12px}
html[data-sdstijl="nieuw"] .sd-mapctl .sd-tab .tt{font-size:13px;color:#e4efee}
html[data-sdstijl="nieuw"] .sd-mapctl .sd-tab:not(.active) .tt{color:#8fb0b3}
html[data-sdstijl="nieuw"] .sd-mapctl .sd-tab .ti{width:16px;height:16px}
html[data-sdstijl="nieuw"] .sd-mapctl .sd-tab .ti svg{max-width:16px;max-height:16px}
/* IOC als knop bij Tide stations, zelfde vorm als de landknoppen */
html[data-sdstijl="nieuw"] #hoekTide #iocKop{grid-column:1/-1;display:flex;align-items:center;gap:6px;margin:0;padding:4px 6px;min-height:0;
  background:#061419;border:1px solid #1d4350;border-radius:5px;color:#8fb0b3;cursor:pointer;
  font:500 10.5px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.02em}
html[data-sdstijl="nieuw"] #hoekTide #iocKop:not(.uit){background:#12303a;border-color:#2a6070;color:#e4efee;box-shadow:inset 0 -2px 0 #5fd0e6}
html[data-sdstijl="nieuw"] #hoekTide #iocKop .sd-ioc-logo{width:14px;height:14px;opacity:1}

/* --- hoeken: getijstations links, veldlagen rechts --- */
html[data-sdstijl="nieuw"] .sd-hoek{padding:8px 10px;gap:6px}
html[data-sdstijl="nieuw"] .sd-hoek-l{width:184px;max-width:none}
html[data-sdstijl="nieuw"] .sd-hoek-r{width:216px;max-width:none}   /* even breed als het Map-paneel (Classic: max 200) */
html[data-sdstijl="nieuw"] .sd-hoek .sd-ico-klap{background:transparent;border:0;padding:4px 2px;opacity:1;color:#8fb0b3;
  font:600 14px/1 "Barlow Condensed","Arial Narrow",Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase}
html[data-sdstijl="nieuw"] .sd-hoek .sd-ico-klap .sd-ico-lbl{font:inherit}
html[data-sdstijl="nieuw"] .sd-hoek .sd-ico-klap:hover{color:#e4efee;background:transparent}
html[data-sdstijl="nieuw"] .sd-hoek .sd-ico-klap svg{display:none}
html[data-sdstijl="nieuw"] .sd-vlagtog{background:#061419;border:1px solid #1d4350;border-radius:5px;color:#e4efee;
  font:500 10.5px/1 "IBM Plex Mono",ui-monospace,monospace;padding:4px 5px;opacity:1}
html[data-sdstijl="nieuw"] .sd-vlagtog:not(.uit){background:#12303a;border-color:#2a6070;box-shadow:inset 0 -2px 0 #5fd0e6}
html[data-sdstijl="nieuw"] .sd-vlagtog.uit{color:#8fb0b3;opacity:1}
/* Het landvlaggetje blijft altijd in kleur (Dennis: "bij de tidestation in
   het knopje wel het landvlaggetje terug zien"); aan/uit zie je aan de knop.
   De oude stijl zette een uitgeschakeld land op grijs (saturate .12). */
html[data-sdstijl="nieuw"] .sd-vlagtog .sd-vlagimg{width:16px;height:11px;filter:none;opacity:1}
html[data-sdstijl="nieuw"] .sd-vlagtog.uit .sd-vlagimg{filter:none;opacity:1}
/* 50 km-stand: de landknoppen gelden dan niet; zachter gedimd dan in Classic
   (.35), zodat de vlaggen herkenbaar blijven. */
html[data-sdstijl="nieuw"] .sd-vlagrij-2.sd-50k-dim .sd-vlagtog[data-laag]{opacity:.6}
html[data-sdstijl="nieuw"] .sd-vlagtog:hover{color:#e4efee}
html[data-sdstijl="nieuw"] .sd-vlagimg{border-color:rgba(255,255,255,.15)}
html[data-sdstijl="nieuw"] .sd-hoek-r .sd-ico:not(.sd-ico-klap){background:transparent;border:0;border-top:1px solid rgba(29,67,80,.55);border-radius:0;
  padding:0 2px;min-height:30px;opacity:1;color:#e4efee;font:500 13px/1 "IBM Plex Sans",system-ui,sans-serif}
html[data-sdstijl="nieuw"] .sd-hoek-r .sd-ico:not(.sd-ico-klap):first-of-type{border-top:0}
html[data-sdstijl="nieuw"] .sd-hoek-r .sd-ico.uit{color:#8fb0b3}
html[data-sdstijl="nieuw"] .sd-hoek-r .sd-ico svg{color:#8fb0b3}
html[data-sdstijl="nieuw"] .sd-hoek-r .sd-ico .sd-ico-lbl{font:inherit}
html[data-sdstijl="nieuw"] .sd-hoek-r .sd-ico:not(.sd-ico-klap)::after{right:2px}
html[data-sdstijl="nieuw"] .sd-hoek .sd-radar-t{color:#8fb0b3;font:500 10px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.06em}
html[data-sdstijl="nieuw"] .sd-hoek .sd-radar-bar{border-radius:2px}
html[data-sdstijl="nieuw"] .sd-hoek .sd-radar-bar-half{height:7px}
html[data-sdstijl="nieuw"] .sd-hoek .sd-sat-rij{color:#e4efee;font:400 11px/1.3 "IBM Plex Sans",system-ui,sans-serif}
html[data-sdstijl="nieuw"] .sd-hoek .sd-sat-rij input{accent-color:#2fcf86}
html[data-sdstijl="nieuw"] .sd-hoek .sd-sat-voet{color:#8fb0b3;font:10px/1.4 "IBM Plex Mono",ui-monospace,monospace}
html[data-sdstijl="nieuw"] .sd-hoek .sd-radar-sc{color:#8fb0b3;font:10px/1.4 "IBM Plex Mono",ui-monospace,monospace}
html[data-sdstijl="nieuw"] .sd-hoek .sd-dens-v{color:#8fb0b3;font:10px/1 "IBM Plex Mono",ui-monospace,monospace}
html[data-sdstijl="nieuw"] .sd-dens-r{accent-color:#2fcf86}
html[data-sdstijl="nieuw"] .sd-dens-r::-webkit-slider-runnable-track{background:#1d4350}
html[data-sdstijl="nieuw"] .sd-dens-r::-webkit-slider-thumb{background:#2fcf86;border-color:#2fcf86}
html[data-sdstijl="nieuw"] .sd-dens-r::-moz-range-track{background:#1d4350}
html[data-sdstijl="nieuw"] .sd-dens-r::-moz-range-thumb{background:#2fcf86;border-color:#2fcf86}

/* --- zoomknoppen en schaal (Leaflet) --- */
/* v1.7: de +/- knop weg uit de linkerbovenhoek. De opmaak eronder blijft
   staan voor het geval hij terugkomt - een regel terugzetten is minder werk
   dan hem opnieuw vormgeven. */
html[data-sdstijl="nieuw"] .leaflet-control-zoom{display:none!important}
html[data-sdstijl="nieuw"] .leaflet-control-zoom{border:1px solid #1d4350!important;border-radius:10px!important;overflow:hidden;box-shadow:0 10px 30px -14px rgba(0,0,0,.7)!important}
html[data-sdstijl="nieuw"] .leaflet-control-zoom a{background:rgba(6,20,25,.9)!important;color:#8fb0b3!important;border-color:#1d4350!important;
  width:32px!important;height:32px!important;line-height:32px!important;font:500 18px/32px "IBM Plex Mono",ui-monospace,monospace!important}
html[data-sdstijl="nieuw"] .leaflet-control-zoom a:hover{background:#12303a!important;color:#e4efee!important}
html[data-sdstijl="nieuw"] .leaflet-control-scale-line{background:rgba(6,20,25,.85);color:#e4efee;border-color:#e4efee;font:10.5px "IBM Plex Mono",ui-monospace,monospace}

/* --- onderbalk --- */
html[data-sdstijl="nieuw"] .sd-bottombar{background:#061419;border-top:1px solid #1d4350}
html[data-sdstijl="nieuw"] .sd-bbtn,html[data-sdstijl="nieuw"] .sd-posbtn,html[data-sdstijl="nieuw"] .sd-muispos{background:#0c2129;border:1px solid #1d4350;border-radius:8px;color:#e4efee;min-height:34px}
html[data-sdstijl="nieuw"] .sd-bbtn:hover,html[data-sdstijl="nieuw"] .sd-posbtn:hover{background:#12303a;border-color:#1d4350;text-decoration:none}
html[data-sdstijl="nieuw"] .sd-bbtn span{font:inherit}
html[data-sdstijl="nieuw"] .sd-muispos{font:12px/1 "IBM Plex Mono",ui-monospace,monospace;color:#8fb0b3}
html[data-sdstijl="nieuw"] .sd-soort{font:500 10.5px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#2fcf86;
  padding:7px 9px;border:1px solid rgba(47,207,134,.35);border-radius:6px;background:rgba(47,207,134,.08)}
html[data-sdstijl="nieuw"] .sd-cons-naam{font:600 12.5px/1.1 "Barlow Condensed","Arial Narrow",Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#e4efee}
html[data-sdstijl="nieuw"] .sd-cons-uit{font:10.5px/1.3 "IBM Plex Mono",ui-monospace,monospace;color:#8fb0b3}
html[data-sdstijl="nieuw"] .sd-cons-baan{stroke:#1d4350}
html[data-sdstijl="nieuw"] .sd-cons-tw-btn{height:30px;padding:0 10px;border:1px solid #1d4350;border-radius:8px;background:#0c2129;color:#ffb300;
  font:12px/1 "IBM Plex Mono",ui-monospace,monospace}
html[data-sdstijl="nieuw"] .sd-cons-tw-menu{background:#0c2129;border-color:#1d4350}
html[data-sdstijl="nieuw"] .sd-beta{background:#f2a64a;color:#1b1300;font:600 10.5px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.12em;padding:6px 8px}

/* --- panelen: plaats (tussen Screens en Map layer) en huisstijl --- */
/* v1.4: elk paneel opent TUSSEN de linkerkolom (Screens, Tide stations:
   12 + 184 px) en de rechterkolom (Map layer, Overlay: 216 + 12 px), met
   10 px ruimte; kaartlagen blijven zo zichtbaar en bruikbaar. */
html[data-sdstijl="nieuw"] #sideTabs{z-index:520}
html[data-sdstijl="nieuw"] .sd-tabpanel{z-index:505}
html[data-sdstijl="nieuw"] .sd-tabpanel,html[data-sdstijl="nieuw"] .sd-tabpanel.big,html[data-sdstijl="nieuw"] .sd-tabpanel.big.ov-paneel,html[data-sdstijl="nieuw"] .sd-tabpanel.about,html[data-sdstijl="nieuw"] .sd-tabpanel.help,html[data-sdstijl="nieuw"] .sd-tabpanel.status{
  left:206px;right:238px;width:auto;max-width:none;transform:none}
@media (max-width:900px){
  html[data-sdstijl="nieuw"] .sd-tabpanel,html[data-sdstijl="nieuw"] .sd-tabpanel.big,html[data-sdstijl="nieuw"] .sd-tabpanel.big.ov-paneel,html[data-sdstijl="nieuw"] .sd-tabpanel.about,html[data-sdstijl="nieuw"] .sd-tabpanel.help,html[data-sdstijl="nieuw"] .sd-tabpanel.status{right:12px}
}
/* Areas-lijst: de Classic-tekst is #0f0f0f (voor een licht paneel). */
html[data-sdstijl="nieuw"] .sd-areas-lijst{padding:2px 12px 8px}
html[data-sdstijl="nieuw"] .sd-areas-lijst label{color:#e4efee;font:12px/1.9 "IBM Plex Sans",system-ui,sans-serif;gap:8px}
html[data-sdstijl="nieuw"] .sd-areas-lijst input{accent-color:#2fcf86}
html[data-sdstijl="nieuw"] .sd-areas-lijst .sd-ar-stip{box-shadow:0 0 0 1px rgba(228,239,238,.5)}
html[data-sdstijl="nieuw"] :is(#ovPaneel,#statusPanel,#helpPanel,#aboutPanel){--surface:#0c2129;--surface-2:#061419;--border:#1d4350;--text:#e4efee;
  --text-dim:#8fb0b3;--text-mut:#8fb0b3;--acc:#2fcf86;--acc-hi:#2fcf86;--bg:#061419;
  background:#061419;border:1px solid #1d4350;border-radius:12px;color:#e4efee;
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
html[data-sdstijl="nieuw"] :is(#ovPaneel,#statusPanel,#helpPanel,#aboutPanel) :is(h1,h2,h3,h4){font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;letter-spacing:.02em}
html[data-sdstijl="nieuw"] :is(#ovPaneel,#statusPanel,#helpPanel,#aboutPanel) a{color:#5fd0e6}
html[data-sdstijl="nieuw"] :is(#ovPaneel,#statusPanel,#helpPanel,#aboutPanel) .sd-tabpanel-head{border-bottom-color:#1d4350}
html[data-sdstijl="nieuw"] :is(#ovPaneel,#statusPanel,#helpPanel,#aboutPanel) .sd-tabpanel-head > span:first-child{font:600 20px/1 "Barlow Condensed","Arial Narrow",Arial,sans-serif;
  letter-spacing:.05em;text-transform:uppercase;color:#e4efee}
html[data-sdstijl="nieuw"] :is(#ovPaneel,#statusPanel,#helpPanel,#aboutPanel) .sd-backbtn{background:transparent;border:1px solid #1d4350;color:#e4efee;
  font:600 13px/1 "IBM Plex Sans",system-ui,sans-serif;padding:8px 12px;border-radius:6px}
html[data-sdstijl="nieuw"] :is(#ovPaneel,#statusPanel,#helpPanel,#aboutPanel) .sd-backbtn:hover{background:#12303a}
/* Overzicht */
html[data-sdstijl="nieuw"] .ov-vlak{background:#0c2129;border-color:#1d4350;border-radius:10px;padding:10px 12px}
html[data-sdstijl="nieuw"] .ov-titel{font:600 15px/1 "Barlow Condensed","Arial Narrow",Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#e4efee}
html[data-sdstijl="nieuw"] .ov-bron{color:#5fd0e6;border-color:rgba(95,208,230,.45);font:500 10px/1.4 "IBM Plex Mono",ui-monospace,monospace}
html[data-sdstijl="nieuw"] .ov-blok{background:#061419;border:1px solid #1d4350;border-radius:8px;padding:6px 4px}
html[data-sdstijl="nieuw"] .ov-blok-lbl{font:500 9px/1.2 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:#8fb0b3}
html[data-sdstijl="nieuw"] .ov-blok-val{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-variant-numeric:tabular-nums}
html[data-sdstijl="nieuw"] .ov-blok-eh{font:10px/1.3 "IBM Plex Mono",ui-monospace,monospace;color:#8fb0b3;opacity:1}
html[data-sdstijl="nieuw"] .ov-pol-g{font-family:"IBM Plex Mono",ui-monospace,monospace;fill:#8fb0b3;opacity:1}
html[data-sdstijl="nieuw"] .ov-rel{font-family:"IBM Plex Mono",ui-monospace,monospace}
/* About in de opbouw van de voorpagina: openingszin, de vijf punten als
   kaarten, de slotzin als oproep, de links als voetregel. */
html[data-sdstijl="nieuw"] #aboutPanel .sd-tabpanel-body{padding:28px clamp(20px,3vw,40px) 24px;display:grid;gap:18px;align-content:start;color:#8fb0b3}
html[data-sdstijl="nieuw"] #aboutPanel .sd-tabpanel-body > p:first-child{margin:0;max-width:72ch;font:400 clamp(17px,1.5vw,20px)/1.55 "IBM Plex Sans",system-ui,sans-serif;color:#e4efee}
html[data-sdstijl="nieuw"] #aboutPanel .waorm,html[data-sdstijl="nieuw"] #aboutPanel .waarom{margin:6px 0 0;font:700 clamp(28px,3vw,40px)/1 "Barlow Condensed","Arial Narrow",Arial,sans-serif;
  text-transform:uppercase;letter-spacing:.01em;color:#e4efee}
html[data-sdstijl="nieuw"] #aboutPanel .voordelen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
html[data-sdstijl="nieuw"] #aboutPanel .voordelen li{margin:0;padding:16px 18px;border:1px solid #1d4350;border-radius:10px;
  background:linear-gradient(180deg,#0c2129,rgba(12,33,41,.4));font-size:14px;line-height:1.55;color:#8fb0b3}
html[data-sdstijl="nieuw"] #aboutPanel .voordelen li::first-line{color:#e4efee;font-weight:500}
html[data-sdstijl="nieuw"] #aboutPanel .voordelen li:nth-child(1){box-shadow:inset 0 2px 0 #2fcf86}
html[data-sdstijl="nieuw"] #aboutPanel .voordelen li:nth-child(n+2){box-shadow:inset 0 2px 0 #5fd0e6}
html[data-sdstijl="nieuw"] #aboutPanel .sd-tabpanel-body > p:nth-last-of-type(2){margin:0;padding:14px 18px;border-left:3px solid #2fcf86;border-radius:0 8px 8px 0;
  background:rgba(47,207,134,.08);font:500 15px/1.5 "IBM Plex Sans",system-ui,sans-serif;color:#e4efee}
html[data-sdstijl="nieuw"] #aboutPanel .about-voet{margin:0;padding-top:14px;border-top:1px solid #1d4350;font:12px/1.4 "IBM Plex Mono",ui-monospace,monospace;color:#8fb0b3}

html[data-sdstijl="nieuw"].kpn-rustig .sd-kop{background:transparent;border:0;box-shadow:none;pointer-events:none;
  top:12px;left:12px;right:12px}
html[data-sdstijl="nieuw"].kpn-rustig .sd-top{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:0;flex-wrap:nowrap;min-height:0;background:transparent}
html[data-sdstijl="nieuw"].kpn-rustig .sd-client,html[data-sdstijl="nieuw"].kpn-rustig .sd-top-right{display:none}
html[data-sdstijl="nieuw"].kpn-rustig .kpn-box{pointer-events:auto;display:flex;align-items:center;gap:12px;box-sizing:border-box;
  min-height:46px;padding:0 12px;margin:0;background:rgba(6,20,25,.9);border:1px solid #1d4350;
  border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.28);white-space:nowrap;min-width:0;
  flex:0 1 auto;overflow:hidden;color:#e4efee}
html[data-sdstijl="nieuw"].kpn-rustig .sd-top > .kpn-oog{flex:0 0 auto;overflow:visible;padding:0 6px}
html[data-sdstijl="nieuw"].kpn-rustig .kpn-box.kpn-cog{overflow:visible;gap:8px;padding:0 8px}
html[data-sdstijl="nieuw"].kpn-rustig .kpn-box .sd-cl-item{border-left:0;padding:0;min-height:0;min-width:0}
html[data-sdstijl="nieuw"].kpn-rustig .kpn-box .sd-cl-item + .sd-cl-item{border-left:1px solid #1d4350;padding-left:12px}
html[data-sdstijl="nieuw"].kpn-rustig .kpn-box .cl-v{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* De positie had een vaste 224 px zodat hij niet verspringt; het lettertype
   heeft gelijke cijferbreedtes, dus zo breed als de tekst is ook stabiel. */
html[data-sdstijl="nieuw"].kpn-rustig .kpn-box .sd-cl-item.pos{width:auto;flex:0 1 auto}
html[data-sdstijl="nieuw"].kpn-rustig .kpn-box.sd-cl-wx{margin:0}
html[data-sdstijl="nieuw"].kpn-rustig .kpn-box .sd-cog-wrap{margin:0}
html[data-sdstijl="nieuw"].kpn-rustig .kpn-box :is(.sd-getij,.sd-utc){border:0;background:transparent;height:auto;padding:0}
html[data-sdstijl="nieuw"].kpn-rustig .kpn-box.sd-brand{padding:0 12px}
html[data-sdstijl="nieuw"].kpn-rustig .kpn-box.sd-top-info{margin:0;white-space:normal;max-width:520px;font-size:12px;line-height:1.35}
/* v1.19: demoscherm - de infozin 1 cm onder de balk */
html[data-sdstijl="nieuw"].kpn-rustig .kpn-box.kpn-info-onder{position:absolute;top:calc(100% + 1cm);left:0;min-height:34px;padding:6px 12px}
html[data-sdstijl="nieuw"].kpn-rustig .sd-bottombar{background:transparent;border:0;box-shadow:none;pointer-events:none;
  left:12px;right:12px;bottom:12px;height:auto;min-height:0;padding:0;
  display:flex;align-items:center;gap:8px}
html[data-sdstijl="nieuw"].kpn-rustig .sd-bottombar .kpn-vrij{flex:1 1 0;min-width:0}
html[data-sdstijl="nieuw"].kpn-rustig .sd-bottombar .kpn-box{overflow:visible}
html[data-sdstijl="nieuw"].kpn-rustig .sd-cons{position:static;transform:none;left:auto}
html[data-sdstijl="nieuw"].kpn-rustig .kpn-box .sd-muispos{min-height:0;padding:0;font:500 13px/1 "IBM Plex Mono",ui-monospace,monospace}
html[data-sdstijl="nieuw"].kpn-rustig .kpn-box .sd-bbtn,html[data-sdstijl="nieuw"].kpn-rustig .kpn-box .sd-soort{min-height:0}
/* In een box zijn de knoppen van de oude balk PLAT: de box is de rand. */
html[data-sdstijl="nieuw"].kpn-rustig .kpn-box :is(.sd-bbtn,.sd-posbtn,.sd-muispos){background:transparent;border:0;padding:0 4px;min-height:30px}
html[data-sdstijl="nieuw"].kpn-rustig .kpn-box :is(.sd-bbtn,.sd-posbtn):hover{background:#12303a}
html[data-sdstijl="nieuw"].kpn-rustig .sd-bottombar{flex-wrap:nowrap}
html[data-sdstijl="nieuw"].kpn-rustig .kpn-acc{gap:10px}
html[data-sdstijl="nieuw"].kpn-rustig .sd-bottombar > .kpn-box{flex:0 0 auto}
html[data-sdstijl="nieuw"].kpn-rustig .kpn-schip{cursor:pointer;position:relative;flex:0 0 auto}
html[data-sdstijl="nieuw"].kpn-rustig .kpn-schip .sd-vloot{position:static}
html[data-sdstijl="nieuw"].kpn-rustig .kpn-schip #vlootNaam{display:none}
html[data-sdstijl="nieuw"].kpn-rustig .kpn-schip .sd-vlootbtn .pijl{display:inline-block;transform:rotate(180deg)}
html[data-sdstijl="nieuw"].kpn-rustig .kpn-schip .sd-vlootbtn[aria-expanded="true"] .pijl{transform:none}
html[data-sdstijl="nieuw"].kpn-rustig .kpn-schip #clNaam{max-width:220px}
/* De schiplijst opent in DEZELFDE vrije zone als de panelen (rechts van
   Screens/Tide stations, links van Map layer/Overlay, boven de onderste rij).
   Er staat maar een paneel tegelijk open, dus hij valt nergens overheen -
   omhoog vanaf de box zelf lag hij over Tide stations (gemeten op 1280 px). */
html[data-sdstijl="nieuw"].kpn-rustig .kpn-schip .sd-vlootmenu{position:fixed;top:auto;left:206px;bottom:118px;right:auto;
  width:min(460px,calc(100vw - 444px));max-height:calc(100vh - 200px);overflow:auto;z-index:505}
html[data-sdstijl="nieuw"].kpn-rustig .sd-tabpanel{bottom:118px}
/* Smaller dan 1700 px: eerst ruimte winnen zonder iets weg te laten wat je
   nodig hebt - het logo zonder naam, de getijregel zonder "(2u39)", krappere
   binnenkant. Pas daarna korten de waarden in. */
@media (max-width:1699px){
  html[data-sdstijl="nieuw"].kpn-rustig .kpn-box{padding:0 9px;gap:9px}
  html[data-sdstijl="nieuw"].kpn-rustig .kpn-box .sd-cl-item + .sd-cl-item{padding-left:9px}
  html[data-sdstijl="nieuw"].kpn-rustig .kpn-box.sd-brand .name,html[data-sdstijl="nieuw"].kpn-rustig .kpn-box.sd-brand .sub{display:none}
  html[data-sdstijl="nieuw"].kpn-rustig .kpn-box .sd-getij-vlg{display:none}
  html[data-sdstijl="nieuw"].kpn-rustig .sd-top{gap:6px}
  /* onder: de tweede regel bij de consensusringen (de waarde) wijkt; het
     percentage staat in de ring zelf */
  html[data-sdstijl="nieuw"].kpn-rustig .kpn-box .sd-cons-uit{display:none}
}
@media (max-width:1199px){
  html[data-sdstijl="nieuw"].kpn-rustig .kpn-box .sd-muispos{display:none}
}
/* Tablet: bij de consensus alleen de drie ringen (met hun percentage). */
@media (max-width:1099px){
  html[data-sdstijl="nieuw"].kpn-rustig .kpn-box .sd-cons-tekst{display:none}
}
/* Smaller dan 1440 px past de bovenrij niet meer zonder waarden af te
   kappen (gemeten op 1366 en 1280). Dan liever TWEE rijen dan halve
   getallen: de boxen breken af, overview blijft rechts (margin-left:auto),
   en Screens, Map layer en de panelen schuiven een rij omlaag. */
@media (max-width:1439px){
  html[data-sdstijl="nieuw"].kpn-rustig .sd-top{flex-wrap:wrap;row-gap:8px;justify-content:flex-start}
  html[data-sdstijl="nieuw"].kpn-rustig .sd-top > .kpn-box{flex:0 0 auto}
  html[data-sdstijl="nieuw"].kpn-rustig .sd-top > .kpn-oog{margin-left:auto}
  html[data-sdstijl="nieuw"].kpn-rustig .sd-sidetabs,html[data-sdstijl="nieuw"].kpn-rustig .sd-mapctl{top:128px}
  html[data-sdstijl="nieuw"].kpn-rustig .sd-tabpanel:not(.status){top:128px}
  /* onder: het accounttype (staat ook in Profile) wijkt, zodat now en BETA
     niet over elkaar of van het scherm schuiven (gemeten op 1366) */
  html[data-sdstijl="nieuw"].kpn-rustig .kpn-acc .sd-soort{display:none}
}
@media (max-width:1349px){
  html[data-sdstijl="nieuw"].kpn-rustig .kpn-box .sd-utc-lbl{display:none}
  html[data-sdstijl="nieuw"].kpn-rustig .kpn-box{padding:0 7px;gap:7px}
  html[data-sdstijl="nieuw"].kpn-rustig .kpn-box.kpn-cog{gap:3px;padding:0 5px}
  html[data-sdstijl="nieuw"].kpn-rustig .kpn-box :is(.sd-getij,.sd-utc){gap:4px;font-size:10.5px}
  html[data-sdstijl="nieuw"].kpn-rustig .kpn-box .sd-utc-tijd{font-size:12px}
  html[data-sdstijl="nieuw"].kpn-rustig .sd-top{gap:5px}
}
html[data-sdstijl="nieuw"].kpn-rustig .sd-cookie{bottom:70px}

/* ===== Wind & waves widget (widget_motion) ===== */
.mot-w{position:fixed;right:16px;top:132px;width:280px;max-width:calc(100vw - 16px);z-index:490;
  background:rgba(8,24,30,.92);border:1px solid #1d4350;border-radius:12px;padding:6px;
  color:#e4efee;backdrop-filter:blur(6px);box-shadow:0 14px 40px -18px rgba(0,0,0,.7);
  touch-action:none;user-select:none;cursor:grab}
.mot-w.mot-sleep{cursor:grabbing;border-color:#4fd1c5;box-shadow:0 20px 50px -12px rgba(0,0,0,.9)}
.mot-w svg{display:block;width:100%;height:auto}
.mot-w text{font-family:"IBM Plex Mono",ui-monospace,monospace}
.mot-w .mot-g{font-family:"Barlow Condensed","Arial Narrow",sans-serif}
.mot-geen{display:none;position:absolute;inset:0;border-radius:12px;background:rgba(6,20,25,.72);align-items:center;
  justify-content:center;flex-direction:column;gap:4px;text-align:center;font:500 13px "IBM Plex Mono",monospace;color:#f2c14e;z-index:2;pointer-events:none}
.mot-geen small{color:#8fb0b3;font-weight:400;font-size:11px}
.mot-w.mot-dood .mot-geen{display:flex}
.mot-w.mot-telefoon,.mot-w.mot-tel{left:50%;right:auto;top:auto;bottom:70px;width:240px;transform:translateX(-50%);cursor:default;touch-action:auto}
@media (max-width:700px){ .mot-w{left:50%;right:auto;top:auto;bottom:70px;width:240px;transform:translateX(-50%);cursor:default;touch-action:auto} }

/* ===== Overzicht, nieuwe weergave (tab_overview_nieuw) ===== */
.ovn{display:none;
  --n-ground:#061419; --n-surface:#0c2129; --n-surface-2:#12303a; --n-line:#1d4350;
  --n-text:#e4efee; --n-dim:#8fb0b3; --n-cyan:#5fd0e6; --n-lav:#b59cf5; --n-now:#ffb300;
  --n-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --n-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --n-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  flex:1 1 auto;min-height:0;overflow:auto;padding:14px 16px 16px;gap:12px;
  grid-template-rows:auto minmax(0,1fr);background:var(--n-ground);color:var(--n-text);
  font:14px/1.5 var(--n-body);box-sizing:border-box}
.ovn *{box-sizing:border-box}
html[data-sdstijl="nieuw"] #ovPaneel > .ov-wrap{display:none!important}
html[data-sdstijl="nieuw"] .ovn{display:grid}
.ovn button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.ovn :focus-visible{outline:2px solid var(--n-cyan);outline-offset:2px;border-radius:4px}
.ovn-kop{display:flex;align-items:flex-start;gap:14px}
.ovn-antw{display:grid;gap:4px;flex:1;min-width:0}
.ovn-eyebrow{font:500 11px/1 var(--n-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--n-cyan)}
.ovn-antw h3{margin:0;font:600 clamp(19px,1.9vw,24px)/1.15 var(--n-display);letter-spacing:.01em;color:var(--n-text)}
.ovn-antw h3 span{color:var(--n-cyan)}
.ovn-antw small{color:var(--n-dim);font-size:12px}
.ovn-back{height:34px;padding:0 12px!important;border:1px solid var(--n-line)!important;border-radius:6px;
  font:600 13px/1 var(--n-body)!important;white-space:nowrap}
.ovn-back:hover{background:var(--n-surface-2)!important}

.ovn-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:minmax(0,1fr) minmax(0,1.15fr);
  gap:12px;min-height:0}
.ovn-vlak{grid-column:span 3;background:var(--n-surface);border:1px solid var(--n-line);border-radius:10px;
  display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.ovn-vlak.k{grid-column:span 2}
.ovn-vkop{display:flex;align-items:baseline;gap:10px;padding:9px 14px 7px}
.ovn-vkop h4{margin:0;font:600 16px/1 var(--n-display);letter-spacing:.1em;text-transform:uppercase;color:var(--n-text)}
.ovn-bron{margin-left:auto;font:500 10.5px/1 var(--n-mono);color:var(--n-dim);padding:4px 8px;border:1px solid var(--n-line);
  border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}
.ovn-bron:empty{display:none}
.ovn-tegels{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border-top:1px solid var(--n-line);
  border-bottom:1px solid var(--n-line);background:var(--n-ground)}
.ovn-tegel{padding:7px 12px;display:grid;gap:2px;min-width:0}
.ovn-tegel+.ovn-tegel{border-left:1px solid var(--n-line)}
.ovn-tegel .k{font:500 9.5px/1 var(--n-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--n-dim);
  display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ovn-tegel .k i{flex:0 0 auto;width:10px;height:3px;border-radius:2px;display:inline-block}
.ovn-tegel .v{font:500 20px/1.1 var(--n-mono);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--n-text)}
.ovn-tegel .v small{font-size:11px;color:var(--n-dim);margin-left:3px}
.ovn-tegel .s{font:10.5px/1.2 var(--n-mono);color:var(--n-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.2em}
.ovn-pijl{display:inline-block;width:15px;height:15px;vertical-align:-2px;margin-left:5px}
.ovn-graf{position:relative;flex:1 1 auto;min-height:110px;margin:6px 10px 4px}
.ovn-graf svg{position:absolute;inset:0;display:block;width:100%;height:100%}
.ovn-graf text{font-family:var(--n-mono);font-size:10px;fill:var(--n-dim)}
.ovn-leeg{position:absolute;inset:0;display:grid;place-items:center;color:var(--n-dim);font-size:13px}
.ovn-lg{display:flex;flex-wrap:wrap;gap:3px 14px;padding:0 14px 8px;font-size:11.5px;color:var(--n-dim)}
.ovn-lg span{display:inline-flex;align-items:center;gap:6px}
.ovn-lg i{width:14px;height:3px;border-radius:2px;display:inline-block}
.ovn-lg i.d{height:0;border-top:2px dashed}
/* OVN1C1C: externe weerberichten - de regels komen tussen de gewone legenda */
.ovn-lg .ovn-ext{display:contents}
.ovn-rel{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 14px 4px}
.ovn-rel div{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:5px 9px;
  border:1px solid var(--n-line);border-radius:6px;background:var(--n-ground);font-size:12px}
.ovn-rel b{font:500 12.5px/1 var(--n-mono);white-space:nowrap}
.ovn-rel span{color:var(--n-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ovn-rel i{width:9px;height:9px;border-radius:2px;display:inline-block}
@media (max-width:1500px){ .ovn-tegel{padding:7px 8px} .ovn-tegel .k{letter-spacing:.06em} .ovn-tegel .v{font-size:18px} }
@media (max-width:1100px){
  .ovn-grid{grid-template-rows:none}
  .ovn-vlak,.ovn-vlak.k{grid-column:span 6}
  .ovn-graf{flex:0 0 auto;height:220px}
}

.scc-wrap{padding:4px 2px 12px;}
.scc-subtabs{display:flex;gap:6px;margin-bottom:14px;}
.scc-nl-bron{font-size:9px;color:var(--text-dim);margin-left:5px;
  font-weight:400;letter-spacing:0.2px;}
.scc-regiotabs{display:flex;gap:8px;margin-bottom:14px;
  border-bottom:2px solid var(--border);}
.scc-regiotab{padding:8px 22px;font-size:14px;font-weight:600;
  border:1px solid var(--border);border-bottom:none;border-radius:8px 8px 0 0;
  cursor:pointer;background:var(--surface-2);color:var(--text-dim);
  margin-bottom:-2px;}
.scc-regiotab.act{background:var(--acc);color:#fff;border-color:var(--acc);}
.scc-nodata{font-size:12px;color:var(--text-dim);text-align:center;
  padding:12px;font-style:italic;}
.scc-subtab{padding:6px 16px;font-size:13px;border:1px solid var(--border);
  border-radius:6px;cursor:pointer;background:var(--surface-2);color:var(--text-dim);}
.scc-subtab.act{background:var(--acc);color:#fff;border-color:var(--acc);}
.scc-toolbar{display:flex;justify-content:flex-end;align-items:center;
  gap:8px;margin-bottom:12px;position:sticky;top:0;z-index:5;
  background:var(--surface);padding:8px 0;border-bottom:1px solid var(--border);}
.scc-tw-lbl{font-size:12px;color:var(--text-dim);}
.scc-btn{padding:4px 14px;font-size:12px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text-dim);border-radius:5px;cursor:pointer;}
.scc-btn.act{background:var(--acc);color:#fff;border-color:var(--acc);}
.scc-roos-wrap{display:flex;justify-content:center;margin:8px 0;}
.scc-roos-wrap canvas{max-width:100%;}
.scc-legenda{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
  font-size:11px;margin-bottom:16px;}
.scc-schaal{color:var(--text-dim);font-size:10px;}
.scc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;margin-bottom:18px;}
.scc-card{background:var(--surface-2);border:1px solid var(--border);
  border-radius:8px;padding:12px 14px;}
.scc-badge{display:inline-block;color:#fff;padding:2px 8px;border-radius:4px;
  font-size:10px;font-weight:500;margin-bottom:8px;}
.scc-row{display:flex;justify-content:space-between;padding:4px 0;
  border-bottom:1px solid var(--border);}
.scc-row-l{font-size:12px;color:var(--text-dim);}
.scc-row-v{font-size:13px;font-weight:500;font-family:monospace;}
.scc-desc{font-size:10px;color:var(--text-dim);margin-top:6px;}
.scc-graf-titel{font-weight:600;font-size:13px;margin:8px 0 6px;}
.scc-chart-wrap{position:relative;width:100%;height:190px;margin-bottom:8px;}
.scc-tabel-wrap{overflow-x:auto;max-height:500px;overflow-y:auto;}
.scc-tabel{width:100%;border-collapse:collapse;font-size:12px;}
.scc-tabel th,.scc-tabel td{padding:5px 10px;text-align:right;
  border-bottom:1px solid var(--border);white-space:nowrap;}
.scc-tabel th:first-child,.scc-tabel td:first-child{text-align:left;}
.scc-tabel thead{position:sticky;top:0;background:var(--surface);}
.scc-tabel th{font-size:11px;font-weight:600;color:var(--text-dim);}
.scc-tabel-leeg{text-align:center;color:var(--text-dim);padding:16px;}
.scc-now3{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch;margin-bottom:8px;}
.scc-now-links{flex:1 1 200px;min-width:190px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:8px;padding:12px 14px;}
.scc-now-midden{flex:0 0 auto;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;}
.scc-now-rechts{flex:1 1 250px;min-width:230px;display:flex;flex-direction:column;
  background:var(--surface-2);border:1px solid var(--border);border-radius:8px;
  padding:10px 12px;}
.scc-nl-groep{font-size:11px;color:var(--text-dim);margin:2px 0 8px;
  text-transform:uppercase;letter-spacing:.4px;}
.scc-nl-rij{display:flex;justify-content:space-between;align-items:center;
  padding:5px 0;font-size:13px;}
.scc-nl-k{color:var(--text-dim);display:flex;align-items:center;gap:6px;}
.scc-nl-k i{width:9px;height:9px;border-radius:2px;display:inline-block;}
.scc-nl-v{font-family:monospace;font-weight:500;}
.scc-nl-scheiding{border-top:1px solid var(--border);margin:9px 0;}
.scc-prof-wrap{position:relative;width:100%;height:300px;flex:1;min-height:260px;}
.scc-prof-nodata{position:absolute;top:0;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:600;letter-spacing:1px;color:var(--text-dim);}

/* ── Customer forecast: stroom/getij van de leverancier (tab_extern_stroomtij) ── */
.exst{margin:14px 0 6px;border:1px solid #2b3c45;border-radius:4px;
  background:#0f181d;padding:10px 12px 8px;color:#cfdde3;}
.exst[hidden]{display:none;}
.exst-kop{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;}
.exst-kop h3{margin:0;font-size:13px;font-weight:600;color:#e8f1f5;}
.exst-merk{display:inline-block;width:10px;height:10px;border-radius:2px;
  background:#e8b24a;margin-right:2px;}
.exst-sub{font-size:11.5px;color:#8ea3ad;}
.exst-tegels{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 6px;}
.exst-tegel{min-width:110px;padding:5px 8px;border:1px solid #23323a;
  border-radius:4px;background:#121e24;}
.exst-tegel b{display:block;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:#8ea3ad;font-weight:500;}
.exst-tegel span{font-size:14px;color:#e8f1f5;font-variant-numeric:tabular-nums;}
.exst-tegel em{display:block;font-style:normal;font-size:11px;color:#8ea3ad;}
.exst svg{width:100%;height:auto;display:block;}
.exst-leg{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:4px;
  font-size:11.5px;color:#8ea3ad;}
.exst-leg span{display:inline-flex;align-items:center;gap:5px;}
.exst-leg i{display:inline-block;width:16px;height:1.5px;}
.exst-voet{margin-top:4px;font-size:11px;color:#8ea3ad;}

.wi-wrap{padding:4px 2px 12px;}
.wi-subtabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
.wi-subtab{padding:6px 16px;font-size:13px;border:1px solid var(--border);
  border-radius:6px;cursor:pointer;background:var(--surface-2);color:var(--text-dim);}
.wi-subtab.act{background:var(--acc);color:#fff;border-color:var(--acc);}
.wi-toolbar{display:flex;justify-content:flex-end;align-items:center;gap:8px;
  margin-bottom:12px;position:sticky;top:0;z-index:5;background:var(--surface);
  padding:8px 0;border-bottom:1px solid var(--border);}
.wi-tw-lbl{font-size:12px;color:var(--text-dim);}
.wi-btn,.wi-mbtn{padding:4px 14px;font-size:12px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text-dim);border-radius:5px;cursor:pointer;}
.wi-btn.act,.wi-mbtn.act{background:var(--acc);color:#fff;border-color:var(--acc);}
/* Roos links, verwachting rechts. Onder 900 px onder elkaar, want een
   tekstblok van 300 px naast een roos van 360 px wordt dan onleesbaar. */
.wi-boven{display:flex;gap:18px;align-items:flex-start;margin:8px 0 14px;
  flex-wrap:wrap;}
.wi-roos-wrap{display:flex;flex-direction:column;align-items:center;
  flex:0 0 auto;}
.wi-roos-wrap canvas{max-width:100%;}
.wi-synopsis{flex:1 1 300px;min-width:280px;padding:12px 14px;
  border:1px solid var(--border);border-radius:6px;
  background:rgba(128,128,128,0.13);}
.wi-syn-kop{font-size:11px;text-transform:uppercase;letter-spacing:0.6px;
  color:var(--text-dim);margin-bottom:6px;}
.wi-syn-district{font-size:15px;font-weight:600;margin-bottom:8px;}
.wi-syn-tekst{font-size:13px;line-height:1.6;}
.wi-syn-tekst .r{margin-bottom:5px;}
.wi-syn-tekst .r b{font-weight:600;}
.wi-syn-voet{margin-top:10px;padding-top:8px;
  border-top:1px solid var(--border);font-size:11px;color:var(--text-dim);}
.wi-syn-uitleg{font-size:12px;line-height:1.6;color:var(--text-dim);
  margin-bottom:14px;padding:10px 12px;border-left:3px solid var(--acc);
  background:rgba(128,128,128,0.05);}
.wi-syn-alle{display:flex;flex-direction:column;gap:12px;}
/* v1.19: tabs per leverancier in Forecast */
.wi-syn-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.wi-syn-tab{font-size:12px;padding:4px 11px;border-radius:5px;cursor:pointer;
  border:1px solid var(--border);background:var(--surface-2);color:var(--text-dim);}
.wi-syn-tab.act{background:var(--acc);border-color:var(--acc);color:#fff;}
.wi-syn-groep{font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.5px;margin:14px 0 6px;color:var(--text-dim);}
.wi-syn-waarsch{color:#e0271c;font-weight:600;margin-bottom:6px;font-size:13px;}
.wi-syn-kaart{border:1px solid var(--border);border-radius:6px;
  padding:11px 13px;}
.wi-syn-kaart h4{margin:0 0 4px;font-size:14px;font-weight:600;}
.wi-syn-kaart .dom{font-size:11px;color:var(--text-dim);margin-bottom:7px;}
.wi-syn-kaart .rij{font-size:13px;line-height:1.55;margin-bottom:4px;}
.wi-syn-kaart .rij b{font-weight:600;display:inline-block;min-width:96px;}
/* Consensus-ring. Gedeeld met SeaWave (tab_seawave importeert het blok). */
.cons-blok{border:1px solid var(--border);border-radius:12px;padding:12px 14px;
  background:var(--surface);min-width:230px;}
.cons-kop{font-size:12px;opacity:.75;margin-bottom:8px;}
.cons-rij{display:flex;align-items:center;gap:12px;}
.cons-ring{width:84px;height:84px;flex:0 0 84px;}
.cons-baan{fill:none;stroke:rgba(255,255,255,.12);stroke-width:8;}
.cons-boog{fill:none;stroke:#00e3a0;stroke-width:8;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:42px 42px;
  stroke-dasharray:226;stroke-dashoffset:226;transition:stroke-dashoffset .3s;}
.cons-pct{fill:var(--text);font-size:19px;font-weight:700;text-anchor:middle;}
.cons-zij{display:flex;flex-direction:column;gap:3px;}
.cons-label{font-size:13px;font-weight:600;}
.cons-tijd{font-size:11px;opacity:.7;}
.cons-uit{font-size:11px;opacity:.6;}
.cons-knoppen{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
.cons-btn{background:transparent;color:var(--text);border:1px solid var(--border);
  border-radius:7px;padding:3px 9px;font-size:11px;cursor:pointer;}
.cons-btn:hover{border-color:#00e3a0;}
.cons-aan{background:#00a878;border-color:#00a878;color:#fff;}

/* De shipping forecast hoort NAAST de roos. Deze omslag stond op 900 px,
   en daaronder schoof het blok onder de roos - ook op een breed scherm, want
   het paneel deelt de breedte met de kaart. Nu pas op 700 px, zodat het
   alleen op echt smalle vensters (telefoon) onder elkaar valt. */
@media(max-width:700px){.wi-boven{flex-direction:column;align-items:stretch;}
  .wi-roos-wrap{align-self:center;}}
.wi-legenda{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  font-size:11px;margin-bottom:16px;}
.wi-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:10px;}
.wi-why{margin-top:7px;padding-top:6px;font-size:10px;line-height:1.35;
  color:var(--text-dim);border-top:1px solid var(--border);min-height:13px;}
.wi-card{background:var(--surface-2);border:1px solid var(--border);
  border-radius:8px;padding:12px 14px;}
.wi-badge{display:inline-block;color:#fff;padding:2px 8px;border-radius:4px;
  font-size:10px;font-weight:500;margin-bottom:8px;}
/* DEGRADED: het schip zit binnen 5 procent van de doosmaat van een rand
   van dit model, dus het wordt daar gestuurd door zijn randvoorwaarden en
   niet door zijn eigen fysica. De DATA BLIJFT STAAN - alleen een label
   erbij. Een model dat de positie HELEMAAL niet dekt wordt verborgen
   (.wi-card.wi-uit), want daar valt niets te tonen. */
.wi-degr{display:inline-block;margin-left:6px;padding:2px 7px;
  border-radius:4px;font-size:9px;font-weight:700;letter-spacing:.8px;
  background:rgba(255,140,0,0.30);border:1px solid #a35200;color:#ffd9a8;}
.wi-card.wi-uit{display:none;}
.wi-row{display:flex;justify-content:space-between;padding:3px 0;
  border-bottom:1px solid var(--border);}
.wi-row:last-child{border-bottom:none;}
.wi-row-l{font-size:12px;color:var(--text-dim);}
.wi-row-v{font-size:13px;font-weight:500;font-family:monospace;}
.wi-graf-titel{font-weight:600;font-size:13px;margin:8px 0 6px;}
.wi-chart-wrap{position:relative;width:100%;height:180px;margin-bottom:10px;}
.wi-mkiezer{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;}
.wi-mtitel{font-weight:600;font-size:13px;margin-bottom:8px;color:var(--text-dim);}
.wi-tabel-wrap{overflow-x:auto;max-height:520px;overflow-y:auto;}
.wi-tabel{width:100%;border-collapse:collapse;font-size:12px;}
.wi-tabel th,.wi-tabel td{padding:5px 10px;text-align:right;
  border-bottom:1px solid var(--border);white-space:nowrap;}
.wi-tabel th:first-child,.wi-tabel td:first-child{text-align:left;}
.wi-tabel thead{position:sticky;top:0;background:var(--surface);}
.wi-tabel th{font-size:11px;font-weight:600;color:var(--text-dim);}
.wi-tabel-leeg{text-align:center;color:var(--text-dim);padding:16px;}
/* Twee numerieke blokken bovenaan de Charts-tab. Onder 640 px onder
   elkaar, zodat twee kolommen van zes regels niet in elkaar drukken. */
.wi-nu{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
@media(max-width:640px){.wi-nu{grid-template-columns:1fr;}}
.wi-nu-blok{background:var(--surface-2);border:1px solid var(--border);
  border-radius:8px;padding:12px 14px;}
.wi-nu-kop{font-size:12px;font-weight:600;margin-bottom:8px;
  padding-bottom:6px;border-bottom:1px solid var(--border);}
.wi-nu-sub{font-size:10px;font-weight:400;color:var(--text-dim);}
.wi-nu-row{display:flex;justify-content:space-between;padding:3px 0;
  border-bottom:1px solid var(--border);}
.wi-nu-row:last-child{border-bottom:none;}
.wi-nu-l{font-size:12px;color:var(--text-dim);}
.wi-nu-v{font-size:13px;font-weight:500;font-family:monospace;}
/* ── Typhoon-tab ── */
.wi-ty-warn{padding:8px 12px;border-radius:6px;margin-bottom:12px;
  font-size:12px;border:1px solid var(--border);}
.wi-ty-warn.actief{background:rgba(230,60,40,.18);border-color:#a33;}
.wi-ty-warn.rustig{background:var(--surface-2);color:var(--text-dim);}
.wi-ty-kaart{background:var(--surface-2);border:1px solid var(--border);
  border-radius:8px;padding:12px 14px;margin-bottom:12px;}
.wi-ty-kop{font-size:14px;font-weight:600;margin-bottom:2px;}
.wi-ty-sub{font-size:11px;color:var(--text-dim);margin-bottom:8px;}
.wi-ty-rij{display:flex;justify-content:space-between;padding:3px 0;
  border-bottom:1px solid var(--border);font-size:12px;}
.wi-ty-rij span:last-child{font-family:monospace;font-weight:500;}
.wi-ty-tbl{width:100%;border-collapse:collapse;margin-top:8px;
  font-size:11px;}
.wi-ty-tbl th{color:var(--text-dim);font-weight:500;text-align:right;
  padding:3px 6px;border-bottom:1px solid var(--border);}
.wi-ty-tbl td{font-family:monospace;text-align:right;padding:3px 6px;
  border-bottom:1px solid var(--border);}
.wi-ty-tbl th:first-child,.wi-ty-tbl td:first-child{text-align:left;}
.wi-ty-leeg{color:var(--text-dim);font-size:12px;padding:12px 0;}

/* SeaRain - eigen prefix sr-, deelt niets met de andere tabs. */
.sd-tab .sr-cog{margin-left:auto;opacity:.7;display:inline-flex;
  align-items:center;padding:2px;border-radius:4px;flex:0 0 auto;}
.sd-tab .sr-cog:hover{opacity:1;background:rgba(128,128,128,0.22);}
.sd-tab.active .sr-cog{opacity:.95;}

/* De popover hangt aan de tabbalk, niet in het paneel: SeaRain opent
   geen paneel en mag er dus ook niet op wachten. */
.sr-pop{position:absolute;z-index:1200;width:214px;padding:11px 12px;
  border:1px solid var(--border);border-radius:9px;
  background:var(--surface);box-shadow:0 6px 22px rgba(0,0,0,0.28);}
.sr-pop-kop{font-size:11px;font-weight:600;margin-bottom:9px;
  letter-spacing:.02em;}
.sr-lbl{font-size:10px;color:var(--text-dim);margin-bottom:3px;}
.sr-rij{display:flex;gap:4px;margin-bottom:9px;}
.sr-keus{flex:1;text-align:center;font-size:10px;padding:3px 0;
  border:1px solid var(--border);border-radius:5px;cursor:pointer;
  background:var(--surface-2);color:var(--text-dim);}
.sr-keus.act{background:var(--acc);color:#fff;border-color:var(--acc);}
.sr-extras{margin-top:2px;}
.sr-schuif{display:flex;align-items:center;gap:7px;font-size:11px;
  margin-bottom:5px;cursor:pointer;}
.sr-schuif input{position:absolute;opacity:0;width:0;height:0;}
.sr-schuif-b{width:26px;height:15px;border-radius:8px;flex:0 0 auto;
  background:var(--border);position:relative;transition:background .15s;}
.sr-schuif-b::after{content:"";position:absolute;left:2px;top:2px;
  width:11px;height:11px;border-radius:50%;background:var(--text-dim);
  transition:left .15s,background .15s;}
.sr-schuif input:checked + .sr-schuif-b{background:var(--acc);}
.sr-schuif input:checked + .sr-schuif-b::after{left:13px;background:#fff;}
.sr-voet{border-top:1px solid var(--border);margin-top:9px;padding-top:8px;
  font-size:9.5px;color:var(--text-dim);line-height:1.5;}
.sr-voet.nodata{color:#e0271c;font-weight:600;letter-spacing:.4px;}

/* Overview - eigen prefix ov-. Vult de hoogte die het paneel krijgt en
   deelt hem in vieren; NIETS mag scrollen, dus de grafieken krimpen mee
   in plaats van het vlak uit te rekken. */
/* Zes kolommen, zodat de bovenste rij in tweeen kan (3+3) en de
   onderste in drieen (2+2+2). Anders past de polar er niet tussen
   zonder de andere vlakken van maat te veranderen. */
.ov-wrap{display:grid;grid-template-columns:repeat(6,1fr);
  grid-template-rows:1fr 1fr;gap:10px;height:100%;min-height:0;
  padding:2px;}
.ov-wrap > .ov-vlak:nth-child(1),
.ov-wrap > .ov-vlak:nth-child(2){grid-column:span 3;}
.ov-wrap > .ov-vlak:nth-child(3),
.ov-wrap > .ov-vlak:nth-child(4),
.ov-wrap > .ov-vlak:nth-child(5){grid-column:span 2;}
.ov-vlak{background:var(--surface-2);border:1px solid var(--border);
  border-radius:10px;padding:9px 11px;display:flex;flex-direction:column;
  min-height:0;overflow:hidden;}
.ov-kop{display:flex;align-items:center;gap:8px;margin-bottom:7px;
  flex:0 0 auto;}
.ov-titel{font-size:11px;font-weight:600;letter-spacing:.04em;}
.ov-bron{margin-left:auto;font-size:9px;color:var(--acc);
  border:1px solid var(--acc);border-radius:9px;padding:1px 8px;
  white-space:nowrap;}
.ov-blokken{display:grid;gap:5px;margin-bottom:8px;flex:0 0 auto;}
.ov-blokken-4{grid-template-columns:repeat(4,1fr);}
.ov-blokken-5{grid-template-columns:repeat(5,1fr);}
.ov-blok{background:var(--surface);border-radius:6px;padding:5px 2px;
  text-align:center;min-width:0;}
/* Labels en eenheden wit, zoals in de tabs - var(--text-dim) is daar
   een grijs dat in dit compacte raster wegvalt. */
.ov-blok-lbl{font-size:8px;color:#fff;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
/* De waarderegel mag krimpen als de inhoud breed is (een tijd is
   breder dan een getal van twee cijfers). Zonder deze clamp loopt
   "15:00" uit het blokje zodra het vlak een derde breed is. */
.ov-blok-val{font-size:clamp(13px,1.35vw,18px);font-weight:600;
  line-height:1.25;font-family:monospace;white-space:nowrap;
  overflow:hidden;text-overflow:clip;}
/* Draagt nu ook waarden (hoogte bij HW/LW, aftellen bij Slack), dus
   iets groter dan een kale eenheid. */
.ov-blok-eh{font-size:9px;color:#fff;opacity:.8;white-space:nowrap;
  line-height:1.3;}
/* De grafiek pakt wat er over is. min-height 0 is nodig, anders duwt
   het canvas het vlak groter en krijg je alsnog een scrollbalk. */
.ov-chart{position:relative;flex:1 1 auto;min-height:0;width:100%;}

/* Polar. De roos houdt zijn verhouding (aspect-ratio 1) en krimpt mee
   met de hoogte die het vlak overhoudt; zo blijft hij rond in plaats
   van uitgerekt. */
.ov-vlak-polar{align-items:stretch;}
.ov-polwrap{flex:1 1 auto;min-height:0;display:flex;
  align-items:center;justify-content:center;}
.ov-pol{height:100%;max-height:100%;aspect-ratio:1;width:auto;}
.ov-pol-g{font-size:9px;fill:#fff;opacity:.7;
  font-family:system-ui,sans-serif;}
/* De relatieve hoeken boven de roos: twee kolommen van twee regels.
   Kleur per regel gelijk aan de pijl, zodat je niet hoeft te zoeken
   welke waarde bij welke pijl hoort. */
.ov-relwrap{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;
  flex:0 0 auto;margin-bottom:7px;}
.ov-relkol{display:flex;flex-direction:column;gap:4px;min-width:0;}
/* VAST raster per regel: label links op een vaste breedte, waarde
   rechts in een eigen kolom. Zonder dat schuift de tekst bij elke
   verversing mee met de lengte van de sectornaam ("bow" tegen
   "stbd beam") en staan Current en Set niet meer onder elkaar.
   Kader in de stijl van de bronbadges bij Tide en Current, maar in de
   kleur van de pijl - currentColor, dus de kleur hoeft maar op een
   plek gezet te worden. */
.ov-rel{display:grid;grid-template-columns:46px 1fr;align-items:baseline;
  gap:6px;font-size:9.5px;line-height:1.3;white-space:nowrap;
  border:1px solid currentColor;border-radius:9px;padding:2px 8px;
  min-width:0;}
.ov-rel-l{opacity:.85;overflow:hidden;text-overflow:ellipsis;}
.ov-rel-v{font-family:monospace;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;}

.sn-wrap{padding:4px 2px 12px;}
.sn-subtabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
.sn-subtab{padding:6px 16px;font-size:13px;border:1px solid var(--border);
  border-radius:6px;cursor:pointer;background:var(--surface-2);color:var(--text-dim);}
.sn-subtab.act{background:var(--acc);color:#fff;border-color:var(--acc);}
.sn-boven{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px;
  align-items:flex-start;}
.sn-zon-wrap{flex:0 0 190px;height:190px;border-radius:10px;overflow:hidden;
  background:radial-gradient(circle at 38% 32%,#3a2a10,#120c04);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);}
.sn-zon{width:100%;height:100%;object-fit:cover;}
.sn-zon-leeg{font-size:64px;opacity:.35;}
.sn-metr-grid{flex:1;min-width:240px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;}
.sn-metr{background:var(--surface-2);border:1px solid var(--border);
  border-radius:8px;padding:8px 10px;}
.sn-metr-lbl{font-size:10px;color:var(--text-dim);margin-bottom:3px;}
.sn-metr-val{font-size:20px;font-weight:600;font-family:monospace;}
.sn-metr-sub{font-size:10px;color:var(--text-dim);}
.sn-kaarten{display:flex;gap:12px;flex-wrap:wrap;}
.sn-kaart{background:var(--surface-2);border:1px solid var(--border);
  border-radius:8px;padding:12px 14px;margin-bottom:12px;}
.sn-kaart-half{flex:1;min-width:220px;}
.sn-kaart-titel{font-weight:600;font-size:14px;margin-bottom:10px;
  padding-bottom:8px;border-bottom:2px solid var(--acc);}
.sn-schaal-rij{display:flex;align-items:center;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--border);}
.sn-schaal-rij:last-child{border-bottom:none;}
.sn-schaal-lbl{flex:0 0 140px;font-size:12px;color:var(--text-dim);}
.sn-badge{display:inline-block;min-width:34px;text-align:center;
  padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;
  background:#2f6b4f;color:#fff;}
.sn-schaal-txt{flex:1;font-size:12px;color:var(--text-dim);}
.sn-rij{display:flex;justify-content:space-between;padding:5px 0;
  border-bottom:1px solid var(--border);}
.sn-rij:last-child{border-bottom:none;}
.sn-rij-l{font-size:12px;color:var(--text-dim);}
.sn-rij-v{font-size:13px;font-weight:500;font-family:monospace;}
.sn-maan-wrap{display:flex;justify-content:center;margin:6px 0 10px;}
.sn-chart-wrap{position:relative;width:100%;height:190px;}
.sn-iframe-wrap{position:relative;width:100%;height:520px;
  border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.sn-iframe-wrap iframe{width:100%;height:100%;border:none;}
.sn-tabel-wrap{overflow-x:auto;}
.sn-tabel{width:100%;border-collapse:collapse;font-size:12px;}
.sn-tabel th,.sn-tabel td{padding:5px 10px;text-align:right;
  border-bottom:1px solid var(--border);white-space:nowrap;}
.sn-tabel th:first-child,.sn-tabel td:first-child{text-align:left;}
.sn-tabel th{font-size:11px;font-weight:600;color:var(--text-dim);}
.sn-tabel-leeg{text-align:center;color:var(--text-dim);padding:16px;}
.sn-voet{font-size:11px;color:var(--text-dim);margin-top:8px;}
.sn-voet a{color:var(--acc);}

.sh-wrap{padding:4px 2px 12px;}
.sh-subtabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
.sh-subtab{padding:6px 16px;font-size:13px;border:1px solid var(--border);
  border-radius:6px;cursor:pointer;background:var(--surface-2);color:var(--text-dim);}
.sh-subtab.act{background:var(--acc);color:#fff;border-color:var(--acc);}
.sh-balk{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  margin-bottom:10px;}
.sh-zoek{flex:1;min-width:180px;max-width:320px;padding:6px 10px;font-size:13px;
  border:1px solid var(--border);border-radius:6px;background:var(--surface-2);
  color:var(--text);}
.sh-kiezer{min-width:240px;padding:6px 10px;font-size:13px;
  border:1px solid var(--border);border-radius:6px;background:var(--surface-2);
  color:var(--text);}
.sh-vink{font-size:12px;color:var(--text-dim);cursor:pointer;
  display:flex;align-items:center;gap:5px;}
.sh-telling{font-size:12px;color:var(--text-dim);margin-left:auto;}
.sh-kaart{background:var(--surface-2);border:1px solid var(--border);
  border-radius:8px;padding:12px 14px;margin-bottom:12px;}
.sh-tabel-wrap{overflow-x:auto;max-height:520px;overflow-y:auto;}
.sh-tabel{width:100%;border-collapse:collapse;font-size:12px;}
.sh-tabel th,.sh-tabel td{padding:5px 10px;border-bottom:1px solid var(--border);
  white-space:nowrap;}
.sh-tabel th{position:sticky;top:0;background:var(--surface-2);z-index:1;
  font-size:11px;font-weight:600;color:var(--text-dim);text-align:right;}
.sh-tabel th.sh-l{text-align:left;}
.sh-tabel td{text-align:right;font-family:monospace;}
.sh-tabel td.sh-l{text-align:left;font-family:inherit;}
.sh-tabel tbody tr{cursor:pointer;}
#sh_tabel tr{cursor:default;}
.sh-tabel tbody tr:hover{background:rgba(127,127,127,0.08);}
.sh-leeg{text-align:center;color:var(--text-dim);padding:16px;
  font-family:inherit !important;}
.sh-badge{display:inline-block;padding:1px 7px;border-radius:4px;
  font-size:10px;font-weight:600;font-family:inherit;}
.sh-gemeten{background:#2f6b4f;color:#fff;}
.sh-model{background:#7a6320;color:#fff;}
.sh-hw{color:#43a047;font-weight:600;}
.sh-lw{color:#E24B4A;font-weight:600;}
.sh-voet{font-size:11px;color:var(--text-dim);margin-top:8px;}

.pi-klein{min-width:0;}
.pi-maat{font-size:12px;color:var(--text-dim);display:flex;align-items:center;
  gap:5px;}
.pi-maat input{width:64px;padding:5px 7px;font-size:13px;
  border:1px solid var(--border);border-radius:6px;background:var(--surface-2);
  color:var(--text);}
.pi-vinken{margin-top:-2px;gap:14px;}
.pi-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:12px;align-items:start;}
@media (max-width:900px){.pi-grid{grid-template-columns:minmax(0,1fr);}}
.pi-lijst{padding:0;overflow:hidden;}
.pi-tabel-wrap{max-height:640px;}
.pi-lijst .sh-tabel th{background:var(--surface-2);}
.pi-tabel-wrap tr.act{background:rgba(127,127,127,0.18) !important;}
.pi-alt{font-size:10px;color:var(--text-dim);}
.pi-detail{min-height:200px;}
.pi-kop{margin-bottom:10px;padding-bottom:10px;border-bottom:2px solid var(--acc);}
.pi-naam{font-size:18px;font-weight:600;}
.pi-sub{font-size:12px;color:var(--text-dim);margin-top:3px;}
.pi-badges{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px;}
.pi-badge{font-size:11px;padding:2px 8px;border-radius:10px;
  border:1px solid var(--border);color:var(--text);}
.pi-melding{font-size:12px;padding:6px 9px;border-radius:6px;margin:8px 0;
  border-left:3px solid var(--acc);background:rgba(127,127,127,0.08);}
.pi-melding.fout{border-left-color:#E24B4A;}
.pi-sectie{margin-top:12px;}
.pi-sectie-titel{font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;color:var(--text-dim);margin-bottom:5px;}
.pi-maten{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:4px 14px;font-size:12px;}
.pi-maten div{display:flex;justify-content:space-between;gap:8px;
  border-bottom:1px dotted var(--border);padding:2px 0;}
.pi-maten span:last-child{font-family:monospace;}
.pi-jn{display:flex;flex-wrap:wrap;gap:4px;}
.pi-jn span{font-size:11px;padding:2px 7px;border-radius:4px;
  border:1px solid var(--border);}
.pi-jn .ja{border-color:#2f6b4f;}
.pi-jn .ja::before{content:"\2713  ";color:#43a047;font-weight:700;}
.pi-jn .nee{color:var(--text-dim);}
.pi-jn .nee::before{content:"\2717  ";color:#E24B4A;}
.pi-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px;font-size:12px;}
.pi-links a{color:var(--acc);}
.pi-te-groot td:nth-child(4),.pi-te-diep td:nth-child(5){color:#E24B4A;}

/* Workability - eigen prefix wk-, deelt niets met de andere tabs. */
/* De dummyband (v1.81): opvallend, niet weg te klikken. Wie dit scherm in
   een verslag plakt moet zien dat het verzonnen is. */
.wk-dummy{display:flex;flex-direction:column;gap:5px;margin:0 0 10px;
  padding:10px 13px;border:1px solid #6a5320;border-left:4px solid #e8b24a;
  border-radius:4px;background:#1a1410;color:#e8d9bb;font-size:12.5px;
  max-width:78ch;}
.wk-dummy strong{color:#e8b24a;letter-spacing:.08em;text-transform:uppercase;
  font-size:11px;}
.wk-wrap{padding:2px 2px 10px;}
/* Vessel (v1.40): scheepskeuze met de binnentabs 2D / Config rechts ervan. */
.wk-schipkeuze .wk-smal{max-width:260px;}
/* v1.52: scheepskeuze in de tabbalk, geheel rechts. */
.wk-subschip{margin-left:auto;align-self:center;display:flex;align-items:center;gap:8px;padding:0 2px 4px;}
/* v1.89: tien subtabs + de scheepskeuze passen niet altijd op een regel. Dan
   een tweede regel in plaats van de keuze rechts buiten beeld, en elke
   tabnaam op een regel. */
[data-scherm="workability"] .sd-subtabs{flex-wrap:wrap;row-gap:2px;}
[data-scherm="workability"] .sd-subtabs .sd-subtab{white-space:nowrap;}
[data-scherm="workability"] .wk-subschip select{max-width:260px;text-overflow:ellipsis;}
.wk-subschip select{font-size:13px;font-weight:600;padding:5px 8px;min-width:180px;max-width:280px;}
.wk-bintabs{display:flex;gap:2px;margin-left:auto;background:var(--surface);
  border:1px solid var(--border);border-radius:7px;padding:2px;}
.wk-bintab{background:none;border:0;border-radius:5px;padding:4px 14px;
  font-size:12px;color:var(--text-dim);cursor:pointer;}
.wk-bintab.act{background:var(--acc);color:#fff;font-weight:600;}
.wk-bintab:hover:not(.act){color:var(--text);}
.wk-bintab:focus-visible{outline:2px solid var(--acc);outline-offset:1px;}
.wk-balk{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:8px 10px;margin-bottom:12px;border:1px solid var(--border);
  border-radius:8px;background:var(--surface-2);}
.wk-balk-stat{margin-top:12px;margin-bottom:0;}
.wk-blbl{font-size:10px;color:var(--text-dim);letter-spacing:.03em;
  text-transform:uppercase;}
.wk-pos{font-size:11.5px;font-weight:600;}
.wk-in{font-size:11.5px;padding:3px 6px;border:1px solid var(--border);
  border-radius:5px;background:var(--surface);color:inherit;min-width:0;}
.wk-in:disabled{opacity:.5;cursor:not-allowed;}
.wk-smal{max-width:170px;}
.wk-getal{width:84px;}
.wk-knop{font-size:11px;padding:4px 11px;border-radius:6px;cursor:pointer;
  border:1px solid var(--border);background:var(--surface);color:inherit;}
.wk-knop:disabled{opacity:.45;cursor:not-allowed;}
.wk-doe{background:var(--acc);color:#fff;border-color:var(--acc);}
.wk-mini{font-size:10.5px;padding:3px 8px;border-radius:5px;
  border:1px dashed var(--border);background:transparent;color:var(--text-dim);}
.wk-klok{font-size:11px;color:var(--text-dim);font-variant-numeric:tabular-nums;}
.wk-swan{margin-left:auto;}
.wk-swan[aria-pressed="true"]{border-color:#2f86d8;}
.wk-swan[aria-pressed="false"] b{color:var(--text-dim);}

/* Trappen: van kaal naar uitgebreid. Elke trap een eigen kader, zodat te
   zien is waar de verplichte velden ophouden en het bijschaven begint. */
.wk-trap{border:1px solid var(--border);border-radius:8px;padding:10px 12px;
  margin-bottom:12px;}
.wk-trapkop{margin:0 0 3px;font-size:12px;font-weight:600;letter-spacing:.02em;}
.wk-trapuit{margin:0 0 10px;font-size:10.5px;color:var(--text-dim);
  line-height:1.55;max-width:70ch;}
.wk-grid{display:grid;gap:9px 16px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));}
.wk-veld{display:flex;flex-direction:column;gap:3px;}
.wk-lbl{font-size:10.5px;font-weight:600;display:flex;gap:5px;
  align-items:baseline;}
.wk-eh{font-size:9.5px;color:var(--text-dim);font-weight:400;}
.wk-hint{font-size:9.5px;color:var(--text-dim);line-height:1.45;}
.wk-vink{display:inline-flex;align-items:center;height:24px;}
/* v1.58: voorkeurschip - vinkje plus tekst in de balk van Vessel. */
.wk-vkeur{gap:6px;font-size:11.5px;color:var(--text);white-space:nowrap;}
.wk-vkeur input{margin:0;}
.wk-vkeur.uit{opacity:.45;}
#wkVoorkeurMeld{max-width:30ch;}
.wk-radio{font-size:11px;display:inline-flex;align-items:center;gap:5px;
  margin-right:14px;}

.wk-tab{width:100%;border-collapse:collapse;font-size:11.5px;}
.wk-tab th{text-align:left;font-size:10px;color:var(--text-dim);
  text-transform:uppercase;letter-spacing:.03em;padding:4px 8px 6px;
  border-bottom:1px solid var(--border);}
.wk-tab td{padding:5px 8px;border-bottom:1px solid var(--border);}
.wk-tab-det td:first-child{color:var(--text-dim);width:52%;}
.wk-nog{color:var(--text-dim);}

/* Plotkaarten. Kleine veelvouden: vier keer dezelfde vorm naast elkaar,
   zodat je ze met je oog kunt vergelijken zonder te hoeven onthouden. */
.wk-plots{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.wk-kaart{border:1px solid var(--border);border-radius:8px;padding:10px 11px;
  background:var(--surface);display:flex;flex-direction:column;gap:8px;}
.wk-kaart.uit{opacity:.55;}
.wk-kkop{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.wk-knaam{font-size:12px;font-weight:600;}
.wk-kuit{font-size:9.5px;color:var(--text-dim);line-height:1.5;margin:0;}
.wk-modus{display:flex;gap:0;margin-left:auto;border:1px solid var(--border);
  border-radius:6px;overflow:hidden;}
.wk-modus button{font-size:10px;padding:3px 9px;border:0;cursor:pointer;
  background:transparent;color:var(--text-dim);}
.wk-modus button.act{background:var(--acc);color:#fff;}

/* Het CHART-VLAK is bewust neutraal en niet --surface-2: op het blauw van
   het platform haalt het statusrood de 3:1-contrasteis niet. Zie de kop. */
.wk-doekwrap{position:relative;background:#141419;border-radius:6px;
  padding:6px;}
.wk-doekwrap canvas{width:100%;height:auto;display:block;cursor:crosshair;}
.wk-samen{font-size:10.5px;color:var(--text-dim);line-height:1.5;margin:0;}
.wk-samen b{color:var(--text);font-variant-numeric:tabular-nums;}
.wk-geen{font-size:10.5px;color:var(--text-dim);line-height:1.6;margin:0;
  padding:18px 4px;text-align:center;}

/* Tooltip. Verrijkt, vervangt nooit: elke waarde staat ook in de
   tabelweergave, en de samenvattingsregel noemt de beste koers. */
.wk-tip{position:absolute;pointer-events:none;z-index:20;display:none;
  background:var(--surface-2);border:1px solid var(--border);border-radius:6px;
  padding:5px 8px;font-size:10.5px;line-height:1.5;white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,0.35);}
.wk-tip b{font-variant-numeric:tabular-nums;}

.wk-tabelwrap{max-height:300px;overflow:auto;}
.wk-tabelwrap table{width:100%;border-collapse:collapse;font-size:10.5px;
  font-variant-numeric:tabular-nums;}
.wk-tabelwrap th{position:sticky;top:0;background:var(--surface);
  text-align:left;font-size:9.5px;color:var(--text-dim);text-transform:uppercase;
  letter-spacing:.03em;padding:4px 6px;border-bottom:1px solid var(--border);}
.wk-tabelwrap td{padding:3px 6px;border-bottom:1px solid var(--border);}
.wk-tabelwrap td.num{text-align:right;}
.wk-st{display:inline-flex;align-items:center;gap:5px;}

.wk-leeg{margin-top:12px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;text-align:center;
  padding:24px 12%;border:1px dashed var(--border);border-radius:8px;}
.wk-leeg strong{font-size:12px;}
/* v1.61: hetzelfde lege vak, maar als het om een POSITIE vraagt. Rood zoals
   het 'No AIS'-blok van Transit, want het is dezelfde boodschap: hier komt
   geen uitkomst tot jij iets doet. */
.wk-leeg.wk-geenpos{border-style:solid;border-color:#d03b3b;
  background:rgba(208,59,59,.08);}
.wk-leeg.wk-geenpos strong{color:#ff9b9b;}
.wk-leeg.wk-geenpos .wk-knop{margin-top:4px;}
.wk-leeg span{font-size:10px;color:var(--text-dim);line-height:1.5;}
.wk-leg{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  margin:10px 0 16px;font-size:10px;color:var(--text-dim);}
.wk-leg span{display:inline-flex;align-items:center;gap:5px;}
.wk-bol{width:9px;height:9px;border-radius:50%;display:inline-block;}
/* Het VASTE statuspalet uit de dataviz-skill. Niet themagebonden en niet
   te vervangen door iets dat mooier staat: deze drie zijn gevalideerd op
   onderlinge afstand (kleurenblindheid dE 11,3 tegen een doel van 8) en op
   contrast tegen het chart-vlak #141419 (3,8 tot 10,0 tegen een eis van 3). */
.wk-bol.goed{background:#0ca30c;}
.wk-bol.matig{background:#fab219;}
.wk-bol.slecht{background:#d03b3b;}
.wk-bol.reso{background:transparent;border:2px solid #fff;}

.wk-kolommen{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.wk-blok{border:1px solid var(--border);border-radius:8px;padding:10px 12px;}
.wk-blokkop{margin:0 0 7px;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;color:var(--text-dim);}
.wk-score{display:flex;flex-direction:column;gap:5px;}
.wk-scoregetal{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;}
.wk-samenpolar{margin-top:12px;padding-top:10px;border-top:1px solid var(--border);}
.wk-samenkop{margin:0 0 6px;font-size:10px;font-weight:600;color:var(--text-dim);
  text-transform:uppercase;letter-spacing:.03em;}
.wk-samenpolar .wk-doekwrap{max-width:340px;margin:0 auto 6px;}

.wk-grenzen{margin-top:14px;border-top:1px solid var(--border);padding-top:10px;}
.wk-grenzen ul{margin:0;padding-left:17px;}
.wk-grenzen li{font-size:10px;color:var(--text-dim);line-height:1.6;
  margin-bottom:3px;}
.wk-thr{display:flex;flex-direction:column;gap:4px;margin-bottom:4px;}
.wk-thr-rij{display:grid;gap:4px;
  grid-template-columns:minmax(0,1fr) var(--wk-getal) var(--wk-getal) var(--wk-getal) var(--wk-getal) 22px;
  align-items:center;}
/* De GESELECTEERDE rij, want een klik op de tekening verplaatst juist die.
   Een rand en niet alleen een kleur: welke rij aan de beurt is mag niet
   van kleurzicht afhangen. */
.wk-thr-rij.act{outline:1px solid var(--acc);outline-offset:2px;border-radius:4px;}
.wk-thr-rij input,.wk-thr-rij select{font-size:10.5px;padding:2px 4px;
  border:1px solid var(--border);border-radius:4px;background:var(--surface);
  color:inherit;min-width:0;}
.wk-thr-weg{font-size:11px;line-height:1;border:1px solid var(--border);
  border-radius:4px;background:transparent;color:var(--text-dim);cursor:pointer;}
.wk-thr-kop{display:grid;gap:4px;
  grid-template-columns:minmax(0,1fr) var(--wk-getal) var(--wk-getal) var(--wk-getal) var(--wk-getal) 22px;
  font-size:9px;color:var(--text-dim);text-transform:uppercase;
  letter-spacing:.03em;}
/* Het benoemde punt: naam plus x, y, z op een regel - dezelfde vorm als een
   thrusterrij, want het is dezelfde soort invoer. */
.wk-punt,.wk-punt-kop{display:grid;gap:4px;
  grid-template-columns:minmax(0,1fr) var(--wk-getal) var(--wk-getal) var(--wk-getal);
  align-items:center;}
.wk-punt-kop{font-size:9px;color:var(--text-dim);text-transform:uppercase;
  letter-spacing:.03em;margin-bottom:2px;}
.wk-punt input{font-size:10.5px;padding:2px 4px;border:1px solid var(--border);
  border-radius:4px;background:var(--surface);color:inherit;min-width:0;}
.wk-drie{display:flex;gap:4px;}
.wk-drie input{width:100%;min-width:0;}
.wk-uitleg{margin:0 0 12px;padding-left:17px;}
.wk-uitleg li{font-size:10px;color:var(--text-dim);line-height:1.6;
  margin-bottom:2px;}
.wk-beste{text-align:center;font-size:13px;font-weight:600;margin:10px 0 0;}
/* De golfbron. Het woord zegt het (SWAN / model + reden); de rand is een
   extra kanaal: accent bij SWAN, gedempt bij de terugval op het model. */
.wk-bron{display:table;margin:6px auto 0;padding:2px 10px;font-size:10.5px;
  line-height:1.5;text-align:center;border-radius:10px;
  border:1px solid var(--border);color:var(--text-dim);}
.wk-bron-swan{border-color:#2f86d8;color:inherit;font-weight:600;}
.wk-bron-model{border-style:dashed;}
.wk-bron[hidden]{display:none;}
/* Alles samen: de zin draagt de uitkomst, de linkerrand de status. */
.wk-samen-regel{margin:8px 0 0;padding:4px 10px;font-size:11px;line-height:1.5;
  border-left:3px solid var(--border);color:inherit;}
.wk-samen-regel.goed{border-left-color:#0ca30c;}
.wk-samen-regel.matig{border-left-color:#fab219;}
.wk-samen-regel.slecht{border-left-color:#d03b3b;}
.wk-samen-regel[hidden]{display:none;}
/* Invoerwaarschuwing: het woord Check draagt de betekenis, de kleur helpt. */
.wk-invoer{margin:6px auto 0;max-width:90ch;padding:4px 10px;font-size:11px;
  line-height:1.5;border:1px solid #d03b3b;border-radius:6px;color:inherit;}
.wk-invoer[hidden],.wk-veldmeld[hidden]{display:none;}
.wk-veldmeld{display:block;}
.wk-verbeter{font-size:10px;color:var(--text-dim);line-height:1.5;}
.wk-waarsch{font-size:10px;color:#d8352a;line-height:1.5;}
.wk-voorb{font-size:9.5px;color:#fab219;line-height:1.5;margin:0;}
/* De schaalknop zegt ALTIJD welke schaal aan staat. Een grafiek die
   stiekem van schaal wisselt liegt; een die het erbij zet niet. */
.wk-schaalknop{align-self:flex-start;font-size:9.5px;padding:2px 8px;
  border:1px solid var(--border);border-radius:5px;background:transparent;
  color:var(--text-dim);cursor:pointer;font-variant-numeric:tabular-nums;}
.wk-schaalknop:hover{color:var(--text);}
.wk-voet{font-size:10px;color:var(--text-dim);line-height:1.6;max-width:70ch;}
/* Uitklapper met de uitleg per veld en per limiet. Standaard DICHT: het
   formulier moet een formulier blijven. De summary is een gewone regel
   tekst met een driehoekje, geen knop - hij mag niet concurreren met de
   invoer ernaast. */
.wk-meer{margin-top:2px;}
.wk-meer summary{font-size:9.5px;color:var(--acc);cursor:pointer;
  list-style:none;display:inline-flex;align-items:center;gap:3px;}
.wk-meer summary::-webkit-details-marker{display:none;}
.wk-meer summary::before{content:"?";display:inline-flex;
  align-items:center;justify-content:center;width:11px;height:11px;
  border:1px solid currentColor;border-radius:50%;font-size:8px;
  line-height:1;}
.wk-meer[open] summary::before{content:"\2212";}
.wk-meer summary:hover{text-decoration:underline;}
.wk-meer p{margin:4px 0 2px;font-size:9.5px;color:var(--text-dim);
  line-height:1.6;max-width:62ch;border-left:2px solid var(--border);
  padding-left:7px;}
.wk-tab .wk-meer p{max-width:68ch;}
/* Een OPEN uitleg pakt de hele breedte van het raster. In een kolom van
   190px worden zes regels tekst er vijfentwintig, en dan duwt een
   uitklapper de rest van het formulier van het scherm. :has() is hier
   progressieve verbetering: kan de browser het niet, dan blijft de tekst
   in zijn eigen kolom staan en is hij nog steeds te lezen. */
.wk-grid .wk-veld:has(.wk-meer[open]){grid-column:1/-1;}
.wk-grid .wk-veld:has(.wk-meer[open]) .wk-meer p{max-width:72ch;}

/* How it works. Een leesscherm, geen formulier: een kolombreedte die
   aangehouden wordt, en koppen die genummerd zijn zodat de
   inhoudsopgave ergens naar verwijst. */
.wk-atoc{margin:0 0 18px;padding-left:22px;max-width:70ch;}
.wk-atoc li{font-size:10.5px;color:var(--text-dim);line-height:1.7;}
.wk-ahfd{margin-bottom:20px;padding-bottom:16px;
  border-bottom:1px solid var(--border);}
.wk-ahfd:last-child{border-bottom:0;}
.wk-akop{margin:0 0 8px;font-size:12px;font-weight:600;display:flex;
  align-items:baseline;gap:8px;}
.wk-anr{font-size:10px;color:var(--text-dim);font-variant-numeric:tabular-nums;
  min-width:14px;}
.wk-ap{margin:0 0 9px;font-size:11px;line-height:1.7;max-width:72ch;
  color:var(--text-dim);}
.wk-aul{margin:0 0 9px;padding-left:18px;max-width:72ch;}
.wk-aul li{font-size:11px;color:var(--text-dim);line-height:1.7;
  margin-bottom:5px;}
/* Formules in vaste breedte, want uitlijning IS de betekenis. Scrollt in
   zijn eigen vakje: de pagina zelf mag nooit horizontaal schuiven. */
.wk-aform{margin:0 0 10px;padding:9px 11px;background:#141419;color:#d7d7de;
  border-radius:6px;font-size:10.5px;line-height:1.65;overflow-x:auto;
  white-space:pre;}
.wk-alet{margin:0 0 10px;padding:8px 11px;font-size:11px;line-height:1.7;
  max-width:72ch;border-left:3px solid #fab219;background:var(--surface-2);
  border-radius:0 6px 6px 0;}
.wk-alet strong{display:block;font-size:9.5px;text-transform:uppercase;
  letter-spacing:.04em;color:#fab219;margin-bottom:3px;}
.wk-awrap{overflow-x:auto;margin-bottom:10px;}
.wk-atab{min-width:420px;}
.wk-atab td{font-size:10.5px;line-height:1.6;vertical-align:top;}
.wk-btab{min-width:520px;}
.wk-btab td{font-size:10.5px;line-height:1.6;vertical-align:top;}
.wk-btab td:first-child{width:38%;}
.wk-bron{display:block;font-weight:600;margin-bottom:2px;}
.wk-bgroep{margin:14px 0 6px;font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;color:var(--text-dim);}
.wk-status{width:22%;color:var(--text-dim);}

/* ===================================================================== */
/* Subtab 2D. Eigen onderprefix wk-tv-.                                  */
/*                                                                       */
/* EEN KOLOM, DOEKEN OVER DE VOLLE BREEDTE. De aanzichten zijn LIGGEND   */
/* (boeg naar rechts) en dan is een doek van vierhonderd pixels in een    */
/* zijkolom weggegooide ruimte. Hier stond een raster van twee kolommen   */
/* met de doeken links en de velden rechts; met drie aanzichten onder     */
/* elkaar liep die rechterkolom leeg en stond het halve scherm blanco.    */
/*                                                                       */
/* Het CHART-VLAK is hetzelfde neutrale #141419 als bij de polairen, en   */
/* om dezelfde reden: op --surface-2 van het platform haalt het           */
/* statusrood de 3:1-contrasteis niet. Wat hier rood of oranje is, is     */
/* ook echt een status (buiten de romp / geen vermogen); de eenheden      */
/* zelf dragen het accent #2f86d8, nagerekend met validate_palette.py.   */
/* ===================================================================== */
.wk-tvblok{margin:0 0 18px;}
.wk-tvkop{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin-bottom:7px;}
.wk-tvkop .wk-blokkop{margin:0;}
.wk-tvknoppen{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin-left:auto;}
.wk-tvdoek{position:relative;background:#141419;border:1px solid var(--border);
  border-radius:6px;padding:6px;}
.wk-tvdoek canvas{width:100%;height:auto;display:block;cursor:crosshair;}
.wk-tvmodus{margin-left:0;}
.wk-tvblok > .wk-hint{margin:6px 0 0;max-width:78ch;line-height:1.55;}
.wk-tvblok > .wk-hint strong{color:var(--text);}

/* De velden in de VOLLE breedte in plaats van in een smalle kolom. Vier
   vakken die zich naar de ruimte schikken; de thrusterlijst mag breder,
   want die heeft zes kolommen per rij. */
.wk-tvvelden{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  align-items:start;}
.wk-tvvak{border:1px solid var(--border);border-radius:8px;padding:9px 11px;}
.wk-tvvak-thr{grid-column:span 2;min-width:0;}
.wk-tvvakkop{margin:0 0 6px;font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;color:var(--text-dim);}
.wk-tvvak .wk-hint{margin-bottom:7px;line-height:1.5;}
.wk-grid-2{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));}

/* Drie losse kopgetallen met drie eenheden (kN, kN, kNm). Dus tegels en
   geen staafdiagram: drie staven op een as die kN en kNm door elkaar
   gebruikt is een dubbele as in vermomming. */
.wk-kpi{display:grid;gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:8px 0 4px;}
.wk-tegel{border:1px solid var(--border);border-radius:7px;padding:8px 11px;
  display:flex;flex-direction:column;gap:1px;}
.wk-tlbl{font-size:9.5px;color:var(--text-dim);text-transform:uppercase;
  letter-spacing:.03em;}
/* Proportionele cijfers: dit is een kopgetal en geen kolom. tabular-nums
   geeft elke 1 de breedte van een 0 en dan staat "121" los. */
.wk-tw{font-size:22px;font-weight:600;line-height:1.15;}
.wk-thint{font-size:9px;color:var(--text-dim);line-height:1.4;}

.wk-tvleg{display:flex;flex-wrap:wrap;gap:7px 18px;margin:0 0 18px;
  padding:9px 11px;border:1px solid var(--border);border-radius:8px;}
.wk-tvleg-i{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;
  color:var(--text-dim);}
.wk-tvleg-i svg{flex:0 0 auto;}
.wk-tvleg-i b{font-size:10px;font-weight:600;color:var(--text);}

.wk-tvtabwrap{overflow-x:auto;border:1px solid var(--border);
  border-radius:6px;margin-top:10px;}
.wk-tvtab{width:100%;border-collapse:collapse;font-size:10.5px;
  font-variant-numeric:tabular-nums;}
.wk-tvtab th{text-align:left;font-size:9px;color:var(--text-dim);
  text-transform:uppercase;letter-spacing:.03em;padding:6px 8px;
  border-bottom:1px solid var(--border);white-space:nowrap;}
.wk-tvtab td{padding:4px 8px;border-bottom:1px solid var(--border);
  white-space:nowrap;}
.wk-tvtab td.num{text-align:right;}
.wk-tvtab td em{font-style:normal;color:var(--text-dim);font-size:9.5px;}
/* Gegroepeerde koppen: twaalf kolommen op een rij is een muur, met een
   groepsregel erboven is het een tabel. De groepen zijn de twee
   assenstelsels naast elkaar - wat je INVULT en waar het model MEE REKENT. */
.wk-tvtab tr.grp th{border-bottom:0;padding-bottom:1px;font-size:9px;
  color:var(--text);}
.wk-tvtab tr.grp th span{font-weight:400;color:var(--text-dim);
  text-transform:none;letter-spacing:0;}
.wk-tvtab th.gl,.wk-tvtab td.gl{border-left:1px solid var(--border);}
/* Het kwadrantmerk, ook in de tabel: dezelfde vorm als op de tekening, zodat
   een regel en een merk bij elkaar te brengen zijn zonder te tellen. */
.wk-kw{display:inline-block;width:10px;height:10px;border-radius:50%;
  margin-right:6px;vertical-align:-1px;
  background:conic-gradient(#141419 0 25%,#f4f3ec 0 50%,
                            #141419 0 75%,#f4f3ec 0);}
.wk-kw-cog{background:conic-gradient(#141419 0 25%,#fab219 0 50%,
                                     #141419 0 75%,#fab219 0);}
.wk-kw-thr{background:#2f86d8;}
.wk-tvtab tr.tot td{font-weight:600;border-bottom:0;}
.wk-tvtab tr.merk td:first-child{color:var(--text-dim);}
.wk-tvmeld{display:flex;flex-direction:column;gap:4px;margin-top:8px;}
/* Een opmerking draagt een WOORD en een randje, niet alleen een kleur. */
.wk-tvm{font-size:9.5px;line-height:1.5;padding:5px 8px;
  border-radius:0 5px 5px 0;border-left:3px solid #fab219;
  background:var(--surface-2);}
.wk-tvm.erg{border-left-color:#d03b3b;}
.wk-tvm b{display:block;font-size:9px;text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:1px;}

@media (max-width:760px){
  .wk-tvvak-thr{grid-column:span 1;}
}

/* Rompmodel en booklet: twee vensters boven het paneel. */
.wk-romp{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.wk-veld:has(#wk_romp_model){grid-column:1/-1;}
.wk-dxfvelden{display:grid;gap:6px 12px;margin:6px 0;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));}
.wk-dxfveld{display:flex;flex-direction:column;gap:2px;font-size:10.5px;
  font-weight:600;}
.wk-dxfveld em{font-weight:400;color:var(--text-dim);font-style:normal;}
.wk-dxfveld input{font-size:10.5px;max-width:100%;}
.wk-rompviews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.wk-rompview{background:#141419;border:1px solid var(--border);border-radius:6px;
  padding:4px;min-width:0;}
.wk-rompview b{font-size:10px;display:block;margin:0 0 2px 2px;}
.wk-rompview svg{width:100%;height:min(26vh,240px);display:block;}
.wk-romp select{flex:0 1 380px;}
.wk-dlg{position:fixed;inset:0;z-index:1200;background:rgba(3,8,20,.72);
  display:flex;align-items:center;justify-content:center;padding:16px;}
.wk-dlg[hidden]{display:none;}
.wk-dlg-kaart{width:min(1180px,100%);max-height:92vh;overflow:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;}
.wk-dlg-smal{width:min(760px,100%);}
.wk-dlg-kop{display:flex;justify-content:space-between;align-items:center;
  font-size:12.5px;margin-bottom:4px;}
.wk-dlg-uit{max-width:95ch;margin:0 0 8px;}
.wk-dlg-rij{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0;}
.wk-dlg-twee{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);
  gap:14px;}
.wk-dlg-links,.wk-dlg-rechts{min-width:0;}
.wk-rompsvg{background:#141419;border:1px solid var(--border);border-radius:6px;}
.wk-rompsvg svg{width:100%;height:min(56vh,520px);display:block;}
.wk-dlg-lijst{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:10.5px;
  margin:6px 0;}
.wk-dlg-lijst label{display:inline-flex;gap:4px;align-items:center;}
.wk-sw{display:inline-block;width:10px;height:3px;border-radius:2px;
  margin-right:4px;vertical-align:middle;}
#wkBookTab td{vertical-align:top;}
#wkBookTab td.bron{color:var(--text-dim);font-size:9.5px;max-width:320px;}
@media (max-width:860px){
  .wk-dlg-twee{grid-template-columns:1fr;}
}
/* GETALVAKKEN (v1.32): EEN vaste maat voor elk getal op deze tab, groot
   genoeg voor -888.8. Eerst was het een mengsel: de gewone velden zo breed
   als de kolom, de thruster- en puntrijen 40-50 px, waar na de pijltjes
   geen -3.1 meer in paste. De pijltjes gaan weg - ze kosten 15 px en een
   stap van 1 is voor geen van deze velden zinvol. Rechts uitgelijnd met
   tabulaire cijfers, zodat getallen onder elkaar netjes op de punt staan. */
.wk-wrap{--wk-getal:74px;}
.wk-wrap input[type=number]{box-sizing:border-box;width:var(--wk-getal);
  min-width:var(--wk-getal);max-width:var(--wk-getal);flex:0 0 auto;
  align-self:flex-start;font-size:11.5px;padding:3px 6px;text-align:right;
  font-variant-numeric:tabular-nums;-moz-appearance:textfield;
  appearance:textfield;}
.wk-wrap input[type=number]::-webkit-inner-spin-button,
.wk-wrap input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;
  margin:0;}
.wk-thr-rij.wk-node-rij,.wk-node-kop{
  grid-template-columns:minmax(0,1fr) var(--wk-getal) var(--wk-getal) var(--wk-getal) 22px;}

/* DEMOSCHERM (v1.33): wat iets bewaart is er niet. */
.wk-demoregel{margin:0 0 10px;padding:7px 10px;font-size:11px;line-height:1.5;
  border:1px solid var(--border);border-left:3px solid var(--acc);
  border-radius:6px;background:var(--surface-2);}
[data-wk-demo] #wkOpslaan,[data-wk-demo] #wkWissen,[data-wk-demo] #wkBookNieuw,
[data-wk-demo] #wkTekWis,[data-wk-demo] .wk-account{display:none !important;}


/* ------------------------------------------------------------------------ */
/* Subtab Contract (v1.36). Eigen onderprefix wk-ct-.                        */
/* ------------------------------------------------------------------------ */
.wk-ct-cfg{margin-left:auto;display:inline-flex;align-items:center;gap:6px;}
.wk-ct-wiel{width:14px;height:14px;fill:currentColor;}
.wk-ct-kop{margin-top:4px;}
.wk-ct-bron{margin:6px 0 0;font-size:10.5px;line-height:1.6;color:var(--text-dim);
  text-align:center;}
.wk-ct-bron b{color:var(--text);font-weight:600;}
.wk-ct-bron .wk-ct-let{color:#fab219;}
.wk-ct-lgd{margin:8px 0 2px;line-height:1.55;}
.wk-ct-blok{margin-top:12px;}
#wkCtLeeg[hidden],#wkCtUit[hidden],.wk-ct-kop[hidden],.wk-ct-bron[hidden]{display:none;}
.wk-ct-voorbeeld{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:8px 0 4px;padding:8px 12px;border-radius:6px;font-size:12px;
  line-height:1.5;background:rgba(250,178,25,.14);border:1px solid #fab219;
  color:var(--text);}
.wk-ct-voorbeeld b{color:#fab219;}
.wk-ct-voorbeeld[hidden]{display:none;}
.wk-ct-dlgvb{margin:0 0 8px;}
.wk-ct-scroll{overflow-x:auto;}
.wk-ct-doek{min-width:760px;}
.wk-ct-doek svg{display:block;width:100%;height:auto;}
.wk-ct-kopregel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:4px;}
.wk-ct-kopregel .wk-blokkop{margin:0;}
.wk-ct-leg{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:10.5px;
  color:var(--text-dim);margin-top:8px;}
.wk-ct-v{display:inline-block;width:14px;height:10px;border-radius:2px;
  margin-right:5px;vertical-align:-1px;}
.wk-ct-v.ok{background:#0ca30c;}
.wk-ct-v.slecht{background:#d03b3b;}
.wk-ct-v.marge{background:#f5a54a;}
.wk-ct-v.netover{background:#c75d0a;}
.wk-ct-v.kort{background:repeating-linear-gradient(45deg,#fab219 0 3px,#5a4410 3px 6px);}
.wk-ct-v.open{background:repeating-linear-gradient(45deg,#0ca30c 0 3px,#0a4d0a 3px 6px);}
.wk-ct-v.geen{background:#4a4d5c;}
.wk-ct-v.kans{background:linear-gradient(90deg,rgba(94,208,255,.12),#5ed0ff);}
.wk-ct-tab{min-width:720px;font-variant-numeric:tabular-nums;}
.wk-ct-tab th.num,.wk-ct-tab td.num{text-align:right;}
.wk-ct-tab td{vertical-align:top;}
.wk-ct-tab tbody tr{cursor:pointer;}
.wk-ct-tab tbody tr:hover td{background:var(--surface-2);}
.wk-ct-tab tr.act td{background:var(--surface-2);}
.wk-ct-sub{display:block;font-size:9.5px;color:var(--text-dim);margin-top:2px;}
.wk-ct-pil{display:inline-flex;align-items:center;gap:5px;font-size:10px;
  padding:1px 8px;border-radius:10px;white-space:nowrap;font-weight:600;}
.wk-ct-pil::before{content:"";width:7px;height:7px;border-radius:50%;
  background:currentColor;}
.wk-ct-pil.ok{background:rgba(12,163,12,.22);color:#7ee07e;}
.wk-ct-pil.slecht{background:rgba(208,59,59,.25);color:#ff9b9b;}
.wk-ct-pil.marge{background:rgba(245,165,74,.22);color:#ffc47f;}
.wk-ct-pil.netover{background:rgba(199,93,10,.3);color:#ff9d52;}
.wk-ct-marge{align-items:center;gap:8px;margin:0 0 8px;flex-wrap:wrap;}
.wk-ct-marge input{width:70px;}
.wk-ct-marge label{font-size:12px;}
.wk-ct-marge input.fout{border-color:#d03b3b;}
.wk-tip .wk-ct-m{color:#ffc47f;}
.wk-ct-pil.geen{background:rgba(120,120,140,.25);color:var(--text-dim);}
.wk-ct-t{fill:var(--text);}
.wk-ct-d{fill:var(--text-dim);}
.wk-ct-rij{cursor:pointer;}
.wk-ct-rij:hover .wk-ct-t{text-decoration:underline;}
.wk-tip .wk-ct-x{color:#ff9b9b;}
.wk-ct-dlg{width:min(1120px,100%);}
/* v1.96: Working limits per activiteit - tabs, velden in vaste kolommen, voorbeeld ernaast. */
.wk-ct-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0;}
.wk-ct-akt{font-size:11.5px;padding:5px 13px;border-radius:999px;cursor:pointer;
  border:1px solid var(--border);background:transparent;color:inherit;}
.wk-ct-akt[aria-pressed="true"]{background:var(--surface-2);border-color:var(--acc);}
.wk-ct-cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:start;}
@media(max-width:900px){.wk-ct-cols{grid-template-columns:minmax(0,1fr);}}
.wk-ct-vak{border:1px solid var(--border);border-radius:8px;padding:10px 12px;min-width:0;}
.wk-ct-vk{margin:0 0 6px;font-size:10px;font-weight:500;color:var(--text-dim);
  letter-spacing:.06em;text-transform:uppercase;}
.wk-ct-pan[hidden]{display:none;}
.wk-ct-r{display:grid;grid-template-columns:150px 54px 84px 44px minmax(0,1fr);gap:0 8px;
  align-items:center;padding:5px 0;border-top:1px solid var(--border);}
.wk-ct-pan>.wk-ct-r:first-child{border-top:none;}
.wk-ct-n{font-weight:500;font-size:11.5px;}
.wk-ct-n small{display:block;font-weight:400;color:var(--text-dim);font-size:10px;}
.wk-ct-op{color:var(--text-dim);text-align:right;font-size:11.5px;}
.wk-ct-u{color:var(--text-dim);font-size:11px;font-family:"IBM Plex Mono",ui-monospace,monospace;}
.wk-ct-x{color:var(--text-dim);font-size:11px;min-width:0;}
.wk-ct-sub .wk-ct-n{color:var(--text-dim);font-weight:400;padding-left:12px;}
.wk-ct-tpb .wk-ct-x{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.wk-ct-pan input{font-size:11.5px;padding:4px 7px;height:26px;border:1px solid var(--border);
  border-radius:5px;background:var(--surface);color:inherit;min-width:0;
  font-variant-numeric:tabular-nums;}
.wk-ct-pan input[type=number]{width:84px;text-align:right;-moz-appearance:textfield;}
.wk-ct-pan input::-webkit-outer-spin-button,
.wk-ct-pan input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.wk-ct-tpb input[type=number]{width:66px;}
.wk-ct-pan input.leeg{border-style:dashed;background:transparent;}
.wk-ct-pan input::placeholder{color:#8890b8;opacity:.8;}
.wk-ct-pan input[readonly]{opacity:.75;}
.wk-ct-pan input.fout{border-color:#d03b3b;}
.wk-ct-pan input:disabled{opacity:.7;}
.wk-ct-nm{grid-column:2/-1;display:flex;gap:8px;align-items:center;}
.wk-ct-nm input{flex:1;width:auto;}
.wk-ct-flk{grid-column:2/4;display:flex;align-items:center;gap:6px;font-size:11.5px;}
.wk-ct-flk input{height:auto;}
.wk-ct-lnk{background:none;border:0;padding:0;color:#5fd0e6;font-size:11px;cursor:pointer;
  text-decoration:underline;}
.wk-ct-vw{display:grid;grid-template-columns:104px 1fr;gap:8px;align-items:center;
  margin-bottom:5px;font-size:11px;color:var(--text-dim);}
.wk-ct-vw .uit{font-style:italic;color:#8890b8;}
.wk-ct-vs{display:grid;gap:1px;height:14px;}
.wk-ct-vs.res{height:22px;}
.wk-ct-c{display:block;background:#4a4d5c;border-radius:1px;}
.wk-ct-c.ok{background:#0ca30c;}
.wk-ct-c.slecht{background:#d03b3b;}
.wk-ct-c.marge{background:#f5a54a;}
.wk-ct-c.netover{background:#c75d0a;}
.wk-ct-c.kort{background:repeating-linear-gradient(45deg,#fab219 0 3px,#5a4410 3px 6px);}
.wk-ct-c.open{background:repeating-linear-gradient(45deg,#0ca30c 0 3px,#0a4d0a 3px 6px);}
.wk-ct-as{display:flex;justify-content:space-between;font-size:10px;color:var(--text-dim);
  font-family:"IBM Plex Mono",ui-monospace,monospace;margin-top:3px;}
.wk-ct-som{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--border);
  color:var(--text-dim);font-size:11.5px;}
.wk-ct-som b{color:var(--text);}
.wk-ct-vwf{color:#ff8a8a;font-size:11.5px;}
.wk-ct-wis{background:none;border:0;color:var(--text-dim);font-size:15px;
  cursor:pointer;padding:0 6px;border-radius:5px;line-height:1.4;}
.wk-ct-wis:hover{color:#ff9b9b;}
.wk-ct-rechts{margin-left:auto;display:flex;gap:8px;}

/* Transit (v1.53) - de routeplanner. Deelt de doek-, tip-, tabel- en
   legendaklassen met Contract; alleen wat nieuw is staat hier. */
.wk-tr-vset{max-width:80px;}
.wk-tr-rechts{margin-left:auto;}
/* v1.62: het vinkje Reverse route, naast de uploadknop in de balk. */
.wk-tr-omkeer{display:inline-flex;align-items:center;gap:5px;font-size:11px;
  color:var(--text-dim);cursor:pointer;user-select:none;}
.wk-tr-omkeer input{margin:0;cursor:pointer;}
.wk-tr-geenais.hand{border-color:var(--acc);background:rgba(0,180,85,.07);}
.wk-tr-geenais.hand b{color:var(--acc);}
#wkTrG2Blok[hidden],#wkTrG2Uit[hidden]{display:none;}
/* Zelfde reden als bij Contract: .wk-leeg zet display:flex, en dat wint van
   de standaardregel voor [hidden]. Zonder deze regel blijft "No route yet"
   staan zodra er wel een uitkomst is. */
#wkTrLeeg[hidden],#wkTrUit[hidden],#wkTrKop[hidden]{display:none;}
.wk-tr-chips{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 2px;}
.wk-tr-chip{display:flex;align-items:center;gap:8px;background:#141419;
  border:1px solid var(--border);border-left:4px solid var(--acc);
  border-radius:8px;padding:5px 11px;cursor:pointer;font-family:inherit;
  color:var(--text);font-size:11.5px;}
.wk-tr-chip:hover{border-color:var(--acc);}
.wk-tr-chip.act{background:var(--surface-2);border-color:var(--acc);}
.wk-tr-chip b{font-weight:600;}
.wk-tr-chip span{color:var(--text-dim);font-size:10px;
  font-variant-numeric:tabular-nums;}
.wk-tr-vlag{font-size:9px;background:var(--acc);color:#fff;border-radius:4px;
  padding:1px 5px;}
/* v1.59: het rode kruisje dat de route wist. */
.wk-tr-x{display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:4px;margin-left:2px;font-size:13px;
  line-height:1;color:#ff6b6b;border:1px solid transparent;cursor:pointer;}
.wk-tr-x:hover{background:#ff6b6b;color:#fff;border-color:#ff6b6b;}
.wk-tr-tegels{display:flex;gap:9px;flex-wrap:wrap;margin:10px 0 2px;}
.wk-tr-tegel{background:#141419;border:1px solid var(--border);
  border-radius:8px;padding:7px 11px;min-width:150px;}
.wk-tr-tegel.let{border-color:#d03b3b;}
.wk-tr-tegel .tl{font-size:9px;color:var(--text-dim);text-transform:uppercase;
  letter-spacing:.04em;}
.wk-tr-tegel .tv{font-size:16px;font-weight:600;margin-top:2px;
  font-variant-numeric:tabular-nums;}
.wk-tr-tegel.let .tv{color:#ff9b9b;}
.wk-tr-tegel .tn{font-size:9.5px;color:var(--text-mut);margin-top:1px;}
.wk-tr-wp{border:1px solid var(--border);border-radius:8px;overflow:hidden;
  margin-top:6px;}
.wk-tr-rij{display:flex;align-items:center;gap:8px;padding:5px 8px;
  font-size:11.5px;border-bottom:1px solid var(--border);
  font-variant-numeric:tabular-nums;}
.wk-tr-rij:last-child{border-bottom:none;}
.wk-tr-rij.schip{background:rgba(0,180,85,.08);}
.wk-tr-rij .nm{width:46px;color:var(--text-dim);}
.wk-tr-rij .pos{flex:1 1 auto;}
.wk-tr-rij .bij{color:var(--text-dim);font-size:10.5px;}
/* v1.64: de route staat stil en het schip schuift erover. Wat achter je ligt
   blijft staan maar dooft; het eerstvolgende waypoint springt eruit; het
   nu-punt is een regel tussen de waypoints in. */
.wk-tr-rij.gehad{opacity:.45;}
.wk-tr-rij.gehad .pos{text-decoration:line-through;}
.wk-tr-rij.volgend{background:rgba(94,208,255,.10);}
.wk-tr-rij.volgend .nm{color:var(--text);font-weight:600;}
.wk-tr-rij.nu{background:rgba(0,180,85,.16);border-top:1px solid #00b455;
  border-bottom:1px solid #00b455;}
.wk-tr-rij.nu .nm{color:#7ef0b4;font-weight:600;}
.wk-tr-rij.nu.buiten{background:rgba(208,59,59,.16);border-color:#d03b3b;}
.wk-tr-rij.nu.buiten .nm{color:#ff9b9b;}
.wk-tr-rij .wk-tr-x{visibility:hidden;}
.wk-tr-rij:hover .wk-tr-x{visibility:visible;}
/* Het advies zodra je te ver van de lijn zit. Geen ingreep: Dennis drukt. */
.wk-tr-off{display:flex;align-items:center;gap:10px;margin-top:8px;padding:7px 10px;
  border:1px solid #d03b3b;border-radius:8px;background:rgba(208,59,59,.12);
  font-size:11.5px;}
.wk-tr-off b{color:#ff9b9b;}
.wk-tr-off .wk-knop{margin-left:auto;}
.wk-tr-klaar{display:flex;align-items:center;gap:10px;margin-top:8px;
  padding:7px 10px;border:1px solid #00b455;border-radius:8px;
  background:rgba(0,180,85,.12);font-size:11.5px;}
/* VESSEL ONLINE (v1.66) - de stroom van boord. Deelt de tegels en de
   tabellen met Transit; alleen de grafieken en het logvenster zijn eigen. */
.wk-vo-mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;
  color:var(--text-dim);}
.wk-vo-doel{border-left:3px solid var(--acc);padding-left:9px;margin:2px 0 10px;
  max-width:96ch;}
.wk-vo-doel b{color:var(--text);font-weight:600;}
.wk-vo-log{background:var(--plot,#141419);border:1px solid var(--border);
  border-radius:6px;padding:8px 10px;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:10.5px;line-height:1.75;color:var(--text-dim);overflow-x:auto;
  white-space:pre;}
.wk-vo-log b{color:var(--text);font-weight:500;}
.wk-vo-stip{display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#00b455;margin-right:6px;}
.wk-vo-stip.uit{background:#d03b3b;}
/* Het ritme-cirkeltje: dezelfde ring als bij de databronnen
   (page_landing .stp-ring-*), maar klein genoeg voor naast een tegel. */
.wk-vo-ring{display:flex;align-items:center;gap:9px;}
.wk-vo-ring svg{width:38px;height:38px;flex:0 0 38px;}
.wk-vo-baan{fill:none;stroke:rgba(255,255,255,.14);stroke-width:9;}
.wk-vo-boog{fill:none;stroke-width:9;stroke-linecap:round;
  stroke-dasharray:226;transform:rotate(-90deg);transform-origin:center;
  transition:stroke-dashoffset .2s linear,stroke .3s;}
.wk-vo-ringtekst{font-size:9.5px;color:var(--text-mut);line-height:1.35;}
.wk-vo-ringtekst b{color:var(--text);font-weight:600;font-size:11px;
  font-variant-numeric:tabular-nums;}
/* De leeftijd van gegevens die via de API binnenkomen: tot 30 s gewoon,
   daarna oranje, boven de minuut rood (Dennis). Een paar seconden ouder is
   geen probleem - dit moet pas opvallen als de stroom echt hapert. */
.wk-vo-oud{font-variant-numeric:tabular-nums;}
.wk-vo-oud.let{color:#ffc47f;}
.wk-vo-oud.erg{color:#ff9b9b;font-weight:600;}
.wk-tr-hind{margin-top:8px;display:flex;flex-direction:column;gap:4px;}
.wk-tr-waarschuw{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;
  color:#ffc47f;background:rgba(245,165,74,.14);border-radius:5px;
  padding:2px 8px;align-self:flex-start;}
.wk-tr-waarschuw.land{color:#ff9b9b;background:rgba(208,59,59,.16);}
.wk-tr-getoetst{font-size:9.5px;color:var(--text-mut);}
.wk-tr-geenais{display:flex;gap:11px;align-items:flex-start;margin-top:12px;
  border:1px solid #d03b3b;border-radius:8px;padding:11px 13px;
  background:rgba(208,59,59,.08);}
.wk-tr-geenais[hidden]{display:none;}
.wk-tr-geenais b{color:#ff9b9b;font-size:12px;}
.wk-tr-uitroep{font-size:18px;line-height:1;}
.wk-tr-advies{list-style:none;margin:0;padding:0;font-size:11.5px;line-height:1.6;}
.wk-tr-advies li{padding:6px 0 6px 20px;position:relative;
  border-bottom:1px solid var(--border);}
.wk-tr-advies li:last-child{border-bottom:none;}
.wk-tr-advies li::before{content:"";position:absolute;left:3px;top:11px;
  width:8px;height:8px;border-radius:2px;background:var(--acc);}
.wk-tr-advies li.let::before{background:#d03b3b;}
.wk-tr-advies li.op::before{background:#fab219;}
.wk-tr-ruimte{height:8px;}
.wk-tr-rt tr[data-r]{cursor:pointer;}
.wk-tr-rt tr.act td{background:rgba(0,180,85,.10);}
.wk-tr-rt .wk-tr-strook{width:32%;min-width:150px;}
.wk-tr-rt svg{display:block;width:100%;height:14px;}
.wk-tr-naam{display:flex;align-items:center;gap:7px;}
.wk-tr-naam i{width:10px;height:10px;border-radius:2px;display:inline-block;}

/* Reporting (v1.0). De schermversie is DONKER; de PDF is de witte versie.
   Dezelfde statuskleuren als Contract, zodat een uur dat daar oranje is hier
   niet ineens rood is. */
.rp-balk{flex-wrap:wrap;}
.rp-schip{font-weight:600;color:#e8f1f5;}
.rp-act{min-width:190px;}
.rp-tijd{min-width:148px;}
/* Een rapport dat NIET voor nu geldt moet je in een oogopslag herkennen,
   anders leest iemand de stand van 06:00 als de stand van nu. */
.rp-peil{display:flex;align-items:center;gap:9px;margin:8px 0 0;padding:8px 11px;
  border:1px solid #2b6b80;border-left:4px solid #6fc0da;border-radius:4px;
  background:#102831;color:#cfe9f2;font-size:12.5px;}
.rp-peil b{color:#eaf6fa;}
.rp-uitgifte{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:8px 0 2px;padding:9px 11px;border:1px solid #23323a;border-radius:4px;
  background:#0f181d;}
.rp-scheiding{width:1px;height:20px;background:#23323a;}
.rp-mail{display:flex;align-items:center;gap:7px;}
.rp-in{min-width:210px;}
.rp-melding{font-size:12px;color:#8ea3ad;}
.rp-melding.ok{color:#3fbf8f;}
.rp-melding.fout{color:#ef5d5d;}
.rp-pdf{background:#1d4d5e;border-color:#2b6b80;color:#eaf6fa;}

.rp-leeg{display:flex;flex-direction:column;gap:6px;padding:16px 18px;
  border:1px dashed #2a3a43;border-radius:4px;color:#8ea3ad;font-size:13px;
  max-width:70ch;}
.rp-leeg strong{color:#e8f1f5;font-size:14px;}
/* v1.9: wegklikken en het ?-venster */
.rp-leeg,.rp-help-pop{position:relative;}
.rp-leeg strong,.rp-help-pop strong{padding-right:26px;}
.rp-weg{position:absolute;top:8px;right:8px;width:24px;height:24px;display:grid;
  place-items:center;padding:0;border:1px solid #2a3a43;border-radius:50%;
  background:#0f181d;color:#8ea3ad;cursor:pointer;}
.rp-weg:hover{color:#e8f1f5;border-color:#3a4c56;}
.rp-weg:focus-visible,.rp-help:focus-visible{outline:2px solid #6fc0da;outline-offset:2px;}
.rp-help{width:26px;height:26px;flex:0 0 26px;border-radius:50%;padding:0;
  border:1px solid #2b6b80;background:#102831;color:#cfe9f2;font-weight:700;
  font-size:13px;line-height:1;cursor:pointer;}
.rp-help[aria-expanded="true"]{background:#1d4d5e;color:#fff;}
.rp-help-pop{display:flex;flex-direction:column;gap:6px;margin:8px 0 2px;
  padding:14px 16px;border:1px solid #2b6b80;border-radius:4px;background:#0f181d;
  color:#8ea3ad;font-size:13px;max-width:70ch;}
.rp-leeg[hidden],.rp-help-pop[hidden]{display:none;}
.rp-help-pop strong{color:#e8f1f5;font-size:14px;}
.rp-leeg.rp-geenpos{border-color:#5a3a3a;}
.rp-leeg.rp-geenpos strong{color:#ef8a4a;}

.rp-blad{margin-top:10px;}
.rp-kop{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;
  border-bottom:2px solid #e7eff3;padding-bottom:8px;margin-bottom:12px;}
.rp-kop h3{margin:0;font-size:19px;color:#e7eff3;letter-spacing:.01em;}
.rp-kop .rp-wie{font-size:11.5px;color:#8ea3ad;margin-top:3px;}
.rp-kop .rp-meta{margin-left:auto;text-align:right;font-size:11px;
  color:#8ea3ad;line-height:1.5;}

/* oordeelstrook */
.rp-oordeel{display:flex;border:1px solid #2b3c45;background:#131e24;
  border-radius:4px;overflow:hidden;flex-wrap:wrap;}
.rp-oordeel>div{padding:9px 13px;border-right:1px solid #2b3c45;flex:1 1 160px;}
.rp-oordeel>div:last-child{border-right:0;}
.rp-oordeel .k{font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:#8ea3ad;}
.rp-oordeel .v{font-size:19px;font-weight:600;color:#e7eff3;margin-top:3px;
  font-variant-numeric:tabular-nums;}
.rp-oordeel .v.go{color:#3fbf8f;}
.rp-oordeel .v.no{color:#ef5d5d;}
.rp-oordeel .s{font-size:11px;color:#8ea3ad;margin-top:2px;}
.rp-oordeel .rp-nogo{background:#2a1618;}
.rp-oordeel .rp-go{background:#12271f;}

/* v1.7 scheepsweerbericht */
.rp-zb{border:1px solid #223038;border-radius:4px;padding:9px 12px;margin-bottom:8px;}
.rp-zb-kop{font-size:13px;color:#e8f1f5;}
.rp-zb-sub{font-size:11.5px;color:#8ea3ad;margin:2px 0 6px;}
.rp-zb-w{color:#ff6b5e;font-weight:600;font-size:12.5px;margin-bottom:6px;}
.rp-zb-r{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:10px;
  font-size:12.5px;line-height:1.5;margin-bottom:3px;color:#cfdde3;}
.rp-zb-r b{color:#7fc4d6;font-weight:600;}
.rp-zb-leeg,.rp-zb-noot{font-size:12px;color:#8ea3ad;}
.rp-zb-tab{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:6px;table-layout:fixed;}
.rp-zb-tab th{text-align:left;color:#7fc4d6;padding:4px 8px;border-bottom:1px solid #2b3c45;}
.rp-zb-tab th:first-child,.rp-zb-tab td.l{width:150px;}
.rp-zb-tab td{padding:4px 8px;border-bottom:1px solid #1d2a31;color:#cfdde3;vertical-align:top;line-height:1.45;}
.rp-zb-tab td.l{color:#8ea3ad;font-weight:600;}
.rp-zb-tab .rp-zb-w{margin:0;}
.rp-zb-noot{margin-top:4px;}
.rp-sec{display:flex;align-items:center;gap:9px;margin:18px 0 7px;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#8ea3ad;}
.rp-sec::after{content:"";flex:1;height:1px;background:#223038;}

/* de statusbalk */
.rp-bandwrap{overflow-x:auto;}
.rp-band{min-width:680px;}
.rp-rij{display:grid;grid-template-columns:92px 1fr 104px;gap:8px;
  align-items:center;margin-bottom:3px;}
.rp-rij .rl{text-align:right;font-size:11.5px;font-weight:600;color:#e7eff3;
  line-height:1.15;}
.rp-rij .rl small{display:block;font-weight:400;font-size:9.5px;color:#8ea3ad;
  font-variant-numeric:tabular-nums;}
.rp-cellen{display:grid;height:20px;border:1px solid #2b3c45;position:relative;}
.rp-cellen.hoog{height:26px;}
.rp-cellen i{display:block;position:relative;}
.rp-cellen i::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:3px;background:currentColor;}
.rp-nu{position:absolute;top:-1px;bottom:-1px;width:1px;background:#6fc0da;}
.rp-rij .rr{font-size:10px;color:#8ea3ad;line-height:1.3;
  font-variant-numeric:tabular-nums;}
.rp-rij .rr b{color:#e7eff3;}
.rp-getallen{display:grid;font-size:9.5px;text-align:center;color:#8ea3ad;
  font-variant-numeric:tabular-nums;margin:1px 0 7px;}
.rp-getallen b{color:#ef5d5d;}
.rp-as{display:grid;font-size:9px;color:#8ea3ad;
  font-variant-numeric:tabular-nums;}
.rp-as span{transform:translateX(-50%);white-space:nowrap;}

/* statuskleuren - gelijk aan Contract */
.rp-ok{color:#3fbf8f;background:#12362b;}
.rp-marge{color:#e8b24a;background:#3a2f12;}
.rp-net_over{color:#ef8a4a;background:#3d2414;}
.rp-slecht{color:#ef5d5d;background:#3f1b1b;}
.rp-kort{color:#c3c39a;background:#2f2f22;}
.rp-open{color:#6fc0da;background:#152c36;}
.rp-geen_data{color:#5a686f;background:#1a2429;}
.rp-buiten{color:#3a4349;background:#141b1f;}

.rp-kansbalk{display:grid;height:22px;border:1px solid #2b3c45;
  align-items:end;position:relative;}
.rp-kansbalk i{display:block;background:#4a8fa8;}

.rp-leg{display:flex;flex-wrap:wrap;gap:5px 14px;margin-top:8px;
  font-size:10.5px;color:#8ea3ad;align-items:center;}
.rp-leg span{display:inline-flex;align-items:center;gap:6px;}
.rp-sw{width:20px;height:11px;border:1px solid #2b3c45;display:inline-block;
  position:relative;}
.rp-sw::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:currentColor;}

/* tabellen */
.rp-tabelwrap{overflow-x:auto;}
table.rp-t{width:100%;border-collapse:collapse;font-size:12px;min-width:620px;}
table.rp-t th{text-align:left;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:#8ea3ad;font-weight:600;
  padding:5px 10px 5px 0;border-bottom:1px solid #2b3c45;}
table.rp-t td{padding:5px 10px 5px 0;border-bottom:1px solid #1d2a31;
  vertical-align:top;color:#cfdde3;}
table.rp-t td.n{font-variant-numeric:tabular-nums;}
table.rp-t tr:last-child td{border-bottom:0;}
.rp-merk{display:inline-block;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:2px 6px;border:1px solid currentColor;
  border-radius:2px;}

/* meteogrammen */
.rp-paneel{display:grid;grid-template-columns:1fr 132px;gap:12px;
  align-items:start;margin-bottom:12px;}
.rp-paneel svg{display:block;width:100%;height:auto;}
.rp-zij{border-left:1px solid #223038;padding-left:10px;}
.rp-zij .k{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#8ea3ad;}
.rp-zij .groot{font-size:13px;font-weight:500;color:#e7eff3;margin:2px 0 1px;
  font-variant-numeric:tabular-nums;}
.rp-zij .sm{font-size:10px;color:#8ea3ad;line-height:1.45;
  font-variant-numeric:tabular-nums;}
.rp-zij .waarsch{color:#ef8a4a;font-weight:600;}
/* Het stipje voor een modelnaam in de tabel Model agreement draagt de kleur
   van diens lijn, zodat tabel en grafiek dezelfde taal spreken. */
.rp-mstip{display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:5px;vertical-align:middle;}
.rp-mleg{display:flex;flex-wrap:wrap;gap:12px;font-size:9.5px;color:#8ea3ad;
  margin-top:2px;}
.rp-mleg span{display:inline-flex;align-items:center;gap:5px;}

/* ladder */
.rp-ladder{min-width:680px;}
.rp-lrij{display:grid;grid-template-columns:76px 1fr 128px 62px;gap:9px;
  align-items:center;height:22px;}
.rp-lrij+.rp-lrij{margin-top:1px;}
.rp-lrij.verleden{opacity:.55;}
.rp-ltijd{font-size:9.5px;color:#8ea3ad;text-align:right;
  font-variant-numeric:tabular-nums;}
.rp-spoor{position:relative;height:20px;background:#131e24;
  border:1px solid #223038;}
.rp-spoor .r100{position:absolute;top:-1px;bottom:-1px;width:1px;
  background:#ef5d5d;left:62.5%;}
.rp-spoor .r95{position:absolute;top:-1px;bottom:-1px;width:1px;
  background:#e8b24a;left:59.375%;}
.rp-staaf{position:absolute;height:3px;}
.rp-lval{font-size:9.5px;color:#8ea3ad;line-height:1.2;
  font-variant-numeric:tabular-nums;}
.rp-lval b{color:#e7eff3;}
.rp-lkans{font-size:10px;color:#6fc0da;text-align:right;font-weight:600;
  font-variant-numeric:tabular-nums;}
.rp-lkop{display:grid;grid-template-columns:76px 1fr 128px 62px;gap:9px;
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#8ea3ad;
  margin-bottom:4px;}
.rp-nulijn{position:relative;height:0;}
.rp-nulijn i{position:absolute;left:0;right:0;top:0;height:1px;
  background:#6fc0da;}
.rp-nulijn b{position:absolute;left:2px;top:-11px;font-size:9px;color:#6fc0da;}

/* matrix */
.rp-mx{min-width:680px;display:grid;grid-template-columns:118px 1fr;gap:8px;
  align-items:center;}
.rp-mxnaam{font-size:10.5px;text-align:right;color:#cfdde3;
  font-variant-numeric:tabular-nums;}
.rp-mxnaam.contract{color:#e7eff3;font-weight:600;}
.rp-mxrij{display:grid;height:18px;border:1px solid #2b3c45;}
.rp-mxrij u{display:flex;align-items:center;justify-content:center;
  text-decoration:none;font-size:9.5px;font-weight:600;
  border-right:1px solid #0c1317;}
.rp-mxrij u:last-child{border-right:0;}
.rp-mxstem{display:grid;font-size:9px;text-align:center;color:#8ea3ad;
  font-variant-numeric:tabular-nums;margin-top:2px;}
.rp-mxstem b{color:#ef5d5d;}

.rp-voet{border-top:1px solid #223038;margin-top:16px;padding-top:7px;
  font-size:10px;color:#6c7d85;line-height:1.5;}

@media (max-width:760px){
  .rp-paneel{grid-template-columns:1fr;}
  .rp-zij{border-left:0;border-top:1px solid #223038;padding:8px 0 0;}
  .rp-in{min-width:150px;}
}

/* External weather (v1.0). Donker, net als de rest van Workability. De
   externe lijnen zijn gekleurd, onze eigen modellen grijs - die scheiding
   loopt door in de legenda en in de lijst. */
.ex-balk{flex-wrap:wrap;}
.ex-schip{font-weight:600;color:#e8f1f5;}
.ex-kies input[type=file]{font-size:12px;color:#cfdde3;max-width:290px;}
.ex-kies input[type=file]::file-selector-button{background:#1d4d5e;
  border:1px solid #2b6b80;color:#eaf6fa;border-radius:3px;padding:3px 9px;
  margin-right:8px;cursor:pointer;font-size:12px;}

/* De dummyband: opvallend en niet weg te klikken. */
.ex-dummy{display:flex;flex-direction:column;gap:5px;margin:8px 0 2px;
  padding:10px 13px;border:1px solid #6a5320;border-left:4px solid #e8b24a;
  border-radius:4px;background:#1a1410;color:#e8d9bb;font-size:12.5px;
  max-width:78ch;}
.ex-dummy strong{color:#e8b24a;letter-spacing:.08em;text-transform:uppercase;
  font-size:11px;}
.ex-leeg{display:flex;flex-direction:column;gap:6px;padding:16px 18px;
  border:1px dashed #2a3a43;border-radius:4px;color:#8ea3ad;font-size:13px;
  max-width:78ch;margin-top:8px;}
.ex-leeg strong{color:#e8f1f5;}

/* v1.6 per mail: afzenders */
.ex-rij{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;}
.ex-rij>.ex-mail,.ex-rij>.ex-leeg{flex:1 1 380px;}
.ex-mail{display:flex;flex-direction:column;gap:7px;margin-top:8px;
  padding:10px 13px;border:1px solid #23323a;border-radius:4px;
  background:#0f181d;max-width:78ch;font-size:12.5px;color:#8ea3ad;}
.ex-mail-kop{display:flex;flex-direction:column;gap:3px;}
.ex-mail-kop strong{color:#e8f1f5;}
.ex-mail-kop b{color:#6fc0da;font-weight:600;user-select:all;}
.ex-afz{display:flex;flex-wrap:wrap;gap:6px;}
.ex-afz span{display:inline-flex;align-items:center;gap:6px;padding:3px 4px 3px 9px;
  border:1px solid #2b3c45;border-radius:11px;color:#cfdde3;}
.ex-afz span.leeg{border-style:dashed;padding-right:9px;color:#8ea3ad;}
.ex-afz button{appearance:none;border:0;background:none;color:#e8b1b1;
  cursor:pointer;font-size:14px;line-height:1;padding:0 4px;}
.ex-afz-nieuw{display:flex;gap:7px;flex-wrap:wrap;}
.ex-afz-nieuw input{flex:1 1 220px;max-width:320px;background:#16232a;
  border:1px solid #2b3c45;color:#e8f1f5;border-radius:3px;padding:4px 8px;font-size:12.5px;}
.ex-mail-regel{font-size:11.5px;}
/* v1.9: Error - rood, zelfde maat als Read this PDF, helemaal rechts */
.ex-balk .wk-knop.ex-fout{margin-left:auto;background:#c0392b!important;
  border-color:#c0392b!important;color:#fff!important;font-weight:600;
  text-decoration:none;}
.ex-balk .wk-knop.ex-fout:hover{background:#d9443a!important;}

/* ── de lijst met gelezen bestanden ───────────────────────────────────── */
.ex-lijst{margin-top:10px;display:flex;flex-direction:column;gap:8px;}
.ex-kaart{border:1px solid #23323a;border-left:4px solid #3a4c56;
  border-radius:4px;background:#0f181d;padding:10px 12px;}
.ex-kaart.ex-aan{border-left-color:#3fbf8f;}
.ex-kaart.ex-weg{border-left-color:#8a5a3a;}
.ex-kaart.ex-stuk{border-left-color:#ef5d5d;}
.ex-kop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.ex-merk{width:11px;height:11px;border-radius:2px;flex:0 0 auto;}
.ex-label{font-weight:500;color:#e8f1f5;font-size:12.5px;}
.ex-plek{color:#cfdde3;font-size:12.5px;}
.ex-knoppen{margin-left:auto;display:flex;gap:7px;align-items:center;}
.ex-merkje{font-size:11px;padding:2px 7px;border-radius:9px;
  border:1px solid #2b3c45;color:#8ea3ad;}
.ex-merkje.aan{border-color:#2f7a5e;color:#3fbf8f;}
/* v1.13 leeftijd van het bericht in gebruik: 8 / 16 / 24 uur */
.ex-merkje.geel{border-color:#7a6a2a;color:#e3c34a;}
.ex-merkje.oranje{border-color:#7a4a22;color:#f08c3a;}
.ex-merkje.rood{border-color:#7a2a28;color:#e0605a;}
.ex-gebruik{background:#1d4d5e;border-color:#2b6b80;color:#eaf6fa;}
.ex-gebruik.uit{background:#16232a;border-color:#2b3c45;color:#cfdde3;}
.ex-wis{background:#231a1a;border-color:#5a3a3a;color:#e8b1b1;}
.ex-feiten{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:7px;
  font-size:12px;color:#8ea3ad;}
.ex-feiten b{color:#cfdde3;font-weight:600;}
.ex-reden{margin-top:7px;padding:6px 9px;border-radius:3px;font-size:12px;
  background:#1a1410;color:#e8b24a;border:1px solid #4a3a20;}
.ex-kaart.ex-stuk .ex-reden{background:#1c1212;color:#ef8a8a;
  border-color:#5a3a3a;}
.ex-waarden{width:100%;border-collapse:collapse;margin-top:8px;font-size:12px;}
.ex-waarden th,.ex-waarden td{border-bottom:1px solid #1d2a31;padding:3px 8px;
  text-align:right;color:#cfdde3;}
.ex-waarden th{color:#8ea3ad;font-weight:600;text-align:right;}
.ex-waarden th:first-child,.ex-waarden td:first-child{text-align:left;}
.ex-waarden td.leeg{color:#5d707a;}
/* v1.4 DPR */
.ex-pdf{text-decoration:none;display:inline-flex;align-items:center;
  background:#16232a;border-color:#2b3c45;color:#cfdde3;}
.ex-leg-let{font-style:normal;color:#e8b24a;}
.ex-dpr-knop{background:#16232a;border-color:#2b3c45;color:#cfdde3;}
.ex-dpr-knop.open{background:#1d4d5e;border-color:#2b6b80;color:#eaf6fa;}
.ex-dpr{margin-top:8px;padding:6px 8px 8px;border:1px solid #2b6b80;
  border-radius:4px;background:#0c1418;}
.ex-dpr .ex-dpr-tabel{margin-top:0;font-size:12.5px;}
.ex-dpr .ex-dpr-tabel td{color:#e8f1f5;font-variant-numeric:tabular-nums;}
.ex-dpr-voet{display:flex;align-items:center;gap:10px;margin-top:7px;
  font-size:11px;color:#8ea3ad;}
.ex-dpr-voet .wk-knop{margin-left:auto;}

/* ── de plots ─────────────────────────────────────────────────────────── */
.ex-plots{margin-top:14px;}
.ex-sec{font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:#8ea3ad;border-bottom:1px solid #23323a;padding-bottom:4px;
  margin:14px 0 6px;}
.ex-paneel{border:1px solid #23323a;border-radius:4px;background:#0f181d;
  padding:8px 10px 6px;}
.ex-paneel svg{width:100%;height:auto;display:block;}
.ex-leg{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:6px;
  font-size:11.5px;color:#8ea3ad;}
.ex-leg span{display:inline-flex;align-items:center;gap:5px;}
.ex-leg svg{width:18px;height:6px;}
.ex-geen{padding:14px 16px;border:1px dashed #2a3a43;border-radius:4px;
  color:#8ea3ad;font-size:12.5px;max-width:78ch;}

/* History (tab_historie v1.0) - prefix hs-, leunt op de wk-klassen. */
.hs-balk .wk-in[type=datetime-local]{min-width:170px;}
.hs-modus{display:inline-flex;gap:2px;background:var(--surface);
  border:1px solid var(--border);border-radius:7px;padding:2px;}
.hs-per,.hs-mom{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;}
/* hidden moet winnen van de display hierboven en hieronder. */
.hs-per[hidden],.hs-mom[hidden],.hs-leeg[hidden],#hsCsv[hidden]{display:none;}
.hs-snel{display:inline-flex;gap:4px;}
.hs-termijn{margin:-6px 0 10px;}
.hs-leeg{display:flex;flex-direction:column;gap:6px;max-width:78ch;
  padding:12px 14px;border:1px dashed var(--border);border-radius:8px;
  font-size:12px;color:var(--text-dim);line-height:1.5;}
.hs-leeg strong{color:var(--text);font-size:12.5px;}
.hs-gkop{margin:12px 0 4px;font-size:10.5px;font-weight:600;
  color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;}
.sw-chart-wrap.hs-laag{height:150px;}
.hs-band{display:flex;flex-direction:column;gap:4px;margin-top:6px;}
.hs-rij{display:flex;align-items:center;gap:8px;}
.hs-rnaam{flex:0 0 150px;font-size:11px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;}
.hs-rpct{flex:0 0 42px;font-size:11px;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--text-dim);}
.hs-cellen{flex:1;display:flex;height:16px;border-radius:3px;overflow:hidden;
  background:#26272f;min-width:0;}
.hs-cel{flex:1 1 0;min-width:0;cursor:pointer;border-right:1px solid rgba(0,0,0,.25);}
.hs-cel:hover{outline:1px solid #fff;outline-offset:-1px;}
.hs-tas{display:flex;justify-content:space-between;margin-left:158px;
  margin-right:50px;font-size:9.5px;color:var(--text-dim);}
.hs-legenda{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;
  font-size:10px;color:var(--text-dim);}
.hs-legenda i{display:inline-block;width:10px;height:10px;border-radius:2px;
  margin-right:4px;vertical-align:-1px;}
.hs-oordeel{display:flex;gap:8px;flex-wrap:wrap;}
.hs-pil{border-radius:6px;padding:6px 10px;font-size:11.5px;
  border:1px solid var(--border);}
.hs-pil b{display:block;font-size:12px;}
.hs-beta{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:3px;
  background:#FFB300;color:#3A2200;font-size:9px;font-weight:700;letter-spacing:1px;
  vertical-align:1px;}
.hs-betabalk{margin:0 0 10px;padding:8px 11px;border-radius:5px;background:rgba(255,179,0,0.11);
  border-left:3px solid #FFB300;font-size:12px;line-height:1.5;}
.hs-bwvink{display:inline-flex;gap:5px;align-items:center;margin-left:auto;}
.hs-bwnu{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;}
.hs-bwlijst{margin:0 0 6px;padding-left:18px;display:flex;flex-direction:column;gap:5px;
  font-size:12.5px;line-height:1.5;max-width:90ch;}
.hs-bwtab{overflow-x:auto;}
.hs-bwt{border-collapse:collapse;font-size:12px;min-width:420px;}
.hs-bwt th,.hs-bwt td{text-align:left;padding:4px 14px 4px 0;border-bottom:1px solid var(--border);
  font-variant-numeric:tabular-nums;}
.hs-bwt th{font-size:10.5px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;}
.hs-voet{margin-top:12px;padding-top:6px;border-top:1px solid var(--border);
  font-size:11px;line-height:1.5;color:var(--text-dim);max-width:100ch;}
.hs-voet p{margin:6px 0 2px;} .hs-voet ol,.hs-voet ul{margin:2px 0 4px;padding-left:20px;}
.hs-bwcel{border:1px solid var(--border);border-radius:6px;padding:8px 10px;
  display:flex;flex-direction:column;gap:5px;}
.hs-bwh{display:flex;justify-content:space-between;font-size:11px;color:var(--text-dim);}
.hs-bwv{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;}
.hs-bwv small{font-size:11px;font-weight:400;color:var(--text-dim);}
.hs-bwm{height:6px;border-radius:3px;background:rgba(120,130,140,.3);position:relative;}
.hs-bwm i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;}
.hs-bwm u{position:absolute;top:-3px;bottom:-3px;width:2px;background:#f5a54a;text-decoration:none;}
#hsBeweging[hidden],#wkBwNu[hidden]{display:none;}
@media (max-width:700px){
  .hs-rnaam{flex-basis:90px;} .hs-tas{margin-left:98px;}
}

/* v1.2: het punt waarvoor gerekend wordt knippert (Vessel of Chosen point) */
@keyframes ltKnipper{0%,100%{opacity:1}50%{opacity:.15}}
.lt-knipper{animation:ltKnipper 1.1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.lt-knipper{animation:none}}
/* Long term (tab_langetermijn v1.0) - prefix lt-, leunt op de wk-klassen. */
.lt-bron{display:inline-flex;gap:2px;background:var(--surface);
  border:1px solid var(--border);border-radius:7px;padding:2px;}
.lt-uitleg{margin:-6px 0 10px;max-width:90ch;}
.lt-boven{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px;
  align-items:stretch;margin-bottom:12px;}
.lt-kaart{min-height:260px;border:1px solid var(--border);border-radius:8px;
  background:#0b1418;cursor:crosshair;}
.lt-outlook{margin:0;}
.lt-tally{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:6px 0 10px;}
.lt-tally div{background:var(--surface);border:1px solid var(--border);border-radius:6px;
  padding:6px 9px;}
.lt-tally b{display:block;font-size:22px;line-height:1.1;font-variant-numeric:tabular-nums;}
.lt-tally span{font-size:10.5px;color:var(--text-dim);}
.lt-tekst{font-size:12px;line-height:1.55;}
.lt-tekst p{margin:0 0 6px;}
.lt-g{color:#2fcf86;} .lt-o{color:#f5a54a;} .lt-r{color:#ef5d5d;}
.lt-strook{overflow-x:auto;}
.lt-dagen{display:grid;grid-template-columns:repeat(12,minmax(70px,1fr));gap:4px;min-width:860px;
  margin-top:6px;}
.lt-dag{background:var(--surface);border:1px solid var(--border);border-top:4px solid #4a4d5c;
  border-radius:6px;padding:6px 7px;display:flex;flex-direction:column;gap:4px;font-size:11px;}
.lt-dag.go{border-top-color:#0ca30c;} .lt-dag.mar{border-top-color:#f5a54a;}
.lt-dag.no{border-top-color:#d03b3b;}
.lt-dag.ver{background:repeating-linear-gradient(135deg,var(--surface) 0 6px,rgba(120,130,140,.10) 6px 12px);}
.lt-dag b.d{font-size:12px;}
.lt-dag .v{font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:10.5px;}
.lt-uren{display:flex;height:7px;border-radius:2px;overflow:hidden;background:#26272f;}
.lt-uren i{display:block;height:100%;}
.lt-dag .n{color:var(--text-dim);font-variant-numeric:tabular-nums;line-height:1.35;}
.lt-dag .n b{color:var(--text);font-weight:600;}
.lt-leden{font-size:10px;color:var(--text-dim);}
.lt-leden i{display:block;height:4px;border-radius:2px;background:#26272f;margin-top:2px;overflow:hidden;}
.lt-leden i s{display:block;height:100%;background:#0ca30c;}
.lt-gkop{margin:12px 0 4px;font-size:10.5px;font-weight:600;color:var(--text-dim);
  text-transform:uppercase;letter-spacing:.04em;}
.lt-tabel{overflow-x:auto;}
.lt-tabel table{border-collapse:collapse;width:100%;min-width:720px;font-size:11.5px;
  font-variant-numeric:tabular-nums;}
.lt-tabel th{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);
  text-align:right;padding:5px 7px;border-bottom:1px solid var(--border);}
.lt-tabel td{padding:5px 7px;text-align:right;border-bottom:1px solid rgba(80,90,100,.35);}
.lt-tabel th:first-child,.lt-tabel td:first-child{text-align:left;}
.lt-pil{display:inline-block;padding:1px 7px;border-radius:999px;font-size:10.5px;}
.lt-pil.hi{background:rgba(12,163,12,.18);color:#5fd35f;}
.lt-pil.me{background:rgba(245,165,74,.16);color:#f5a54a;}
.lt-pil.lo{background:rgba(208,59,59,.18);color:#ef7a74;}
.lt-bronregel{margin-top:8px;}
@media (max-width:900px){ .lt-boven{grid-template-columns:1fr;} .lt-kaart{min-height:220px;} }