/* Mokum Radar - gedeeld ontwerpsysteem (1-op-1 met de v1-pagina's zoals rederijen.html).
 * Licht thema met aurora-gradient + frosted .glass-kaarten, mono-cijfers, en VOLLEDIGE
 * dark-mode via body.dark (de appbar-thema-toggle zet die class). Tint-tokens volgen de
 * CLAUDE.md kleurregel. Pagina's linken dit + /appbar.js en gebruiken de klassen hieronder. */
:root{
  --navy:#091C35; --blue:#3366FF; --cyan:#69FEFF; --cyan-ink:#0E7AA3; --red:#FF503C; --amber:#B45309; --green:#0F8A4F;
  --off-white:#F3F6F9; --ink:#091C35; --ink-muted:rgba(9,28,53,0.62); --ink-faint:rgba(9,28,53,0.42);
  --hair:rgba(9,28,53,0.10); --hair-soft:rgba(9,28,53,0.06);
  --card-fill:rgba(9,28,53,0.035); --card-fill-hover:rgba(9,28,53,0.06); --cyan-tint:rgba(105,254,255,0.16);
  --ease:cubic-bezier(.2,.7,.3,1); --spring:cubic-bezier(.2,.7,.3,1.4);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-card:20px; --r-card-sm:16px; --r-chip:999px; --r-inset:13px; --page:#EEF2F7;
  --t-bb-bg:#E5EBFF; --t-bb-ink:#091C35; --t-bb-acc:#3366FF;
  --t-keep-bg:#E8F5EE; --t-keep-ink:#0F5132; --t-keep-acc:#0F5132;
  --t-leg-bg:#FFE8E4; --t-leg-ink:#8A1C0F; --t-leg-acc:#FF503C;
  --t-warn-bg:#FFF4D6; --t-warn-ink:#5C3A00; --t-warn-acc:#B45309;
  --t-pur-bg:#EDE7F6; --t-pur-ink:#3E2A6E; --t-pur-acc:#5E35B1;
  --t-inf-bg:#F3F6F9; --t-inf-ink:#091C35; --t-inf-acc:rgba(9,28,53,0.18);
}
body.dark{
  --ink:rgba(243,246,249,0.94); --ink-muted:rgba(243,246,249,0.60); --ink-faint:rgba(243,246,249,0.40);
  --cyan-ink:#69FEFF; --red:#FF7A6B; --amber:#E0A44F; --green:#5fd99a;
  --hair:rgba(255,255,255,0.12); --hair-soft:rgba(255,255,255,0.07);
  --card-fill:rgba(255,255,255,0.05); --card-fill-hover:rgba(255,255,255,0.09); --cyan-tint:rgba(105,254,255,0.14);
  --page:#061223;
  --t-bb-bg:rgba(51,102,255,0.14); --t-bb-ink:#cdd9ff;
  --t-keep-bg:rgba(15,138,79,0.16); --t-keep-ink:#8fe7b8;
  --t-leg-bg:rgba(255,80,60,0.14); --t-leg-ink:#ffb0a4;
  --t-warn-bg:rgba(180,83,9,0.18); --t-warn-ink:#f0c177;
  --t-pur-bg:rgba(94,53,177,0.22); --t-pur-ink:#cdb8f2;
  --t-inf-bg:rgba(255,255,255,0.05); --t-inf-ink:var(--ink); --t-inf-acc:rgba(255,255,255,0.18);
}
*{box-sizing:border-box} html,body{margin:0}
body{font-family:'Libre Franklin',system-ui,sans-serif;color:var(--ink);font-size:13px;line-height:1.5;
  -webkit-font-smoothing:antialiased;padding-top:80px;padding-bottom:64px;min-height:100vh;
  background:
    radial-gradient(120% 90% at 12% 4%, rgba(105,254,255,0.20) 0%, transparent 46%),
    radial-gradient(120% 110% at 92% 8%, rgba(51,102,255,0.22) 0%, transparent 50%),
    radial-gradient(140% 120% at 70% 100%, rgba(9,28,53,0.10) 0%, transparent 55%),
    linear-gradient(160deg,#EEF3FB 0%,#E3EBFB 44%,#EAF6FA 100%);
  background-attachment:fixed; transition:color .25s,background .25s;}
body.dark{
  background:
    radial-gradient(120% 90% at 10% 0%, rgba(51,102,255,0.26) 0%, transparent 46%),
    radial-gradient(120% 110% at 94% 6%, rgba(105,254,255,0.14) 0%, transparent 48%),
    radial-gradient(150% 130% at 76% 100%, rgba(51,102,255,0.16) 0%, transparent 55%),
    linear-gradient(160deg,#040912 0%,#071528 50%,#04101F 100%);
  background-attachment:fixed;}
.wrap{max-width:1180px;margin:0 auto;padding:26px 20px}
/* PUBLIEKE globals (bewust voor alle SPA-views): .glass .wrap .eyebrow .seclabel
   .num .codechip/code .pill. De rest (.k, .foot, .card, .stat, .row, .lede, ...)
   is scoped-per-view bedoeld - style ze via .<view>-view <klasse>, niet globaal. */
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
a{color:var(--cyan-ink);text-decoration:none} a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--ink)}

/* frosted glass-kaart */
.glass{background:rgba(255,255,255,0.62);
  -webkit-backdrop-filter:blur(30px) saturate(165%); backdrop-filter:blur(30px) saturate(165%);
  border:1px solid rgba(255,255,255,0.55); border-radius:24px;
  box-shadow:0 18px 50px rgba(9,28,53,0.16), inset 0 1px 0 rgba(255,255,255,0.70);}
body.dark .glass{background:rgba(11,30,56,0.62); border:1px solid rgba(105,254,255,0.20);
  box-shadow:0 20px 54px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07);}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .glass{background:rgba(244,247,251,0.97);} body.dark .glass{background:rgba(8,22,42,0.97);}
}

/* hero */
.hero{padding:26px 26px 22px;margin-bottom:18px}
.hero h1{margin:6px 0 8px;font-size:26px;font-weight:700;letter-spacing:-.02em}
.hero p{margin:0;color:var(--ink-muted);font-size:13.5px}
.hero .lede{color:var(--ink);font-size:14px;margin-bottom:6px;max-width:880px}
.hero .live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:7px;vertical-align:middle}

/* stat-strip (mono cijfers, scheidingslijntjes) */
.stats{display:flex;flex-wrap:wrap;gap:0;padding:16px 8px;margin:16px 0 0}
.stat{flex:1;min-width:120px;text-align:center;padding:4px 12px;position:relative}
.stat + .stat::before{content:'';position:absolute;left:0;top:14%;bottom:14%;width:0.5px;background:var(--hair)}
.stat .n{font-family:var(--mono);font-weight:600;font-size:32px;line-height:1;letter-spacing:-.02em}
.stat .n.blue{color:var(--blue)} .stat .n.green{color:var(--green)}
.stat .l{margin-top:6px;font-size:11px;color:var(--ink-muted)}
.stat .s{margin-top:2px;font-size:10px;color:var(--ink-faint)}

/* tint-callouts (quick answers) */
.qa{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin:18px 0 6px}
.qcard{padding:15px 17px;border-radius:var(--r-card-sm);background:var(--t-inf-bg);color:var(--t-inf-ink);border:0.5px solid var(--hair)}
.qcard.bb{background:var(--t-bb-bg);color:var(--t-bb-ink)} .qcard.keep{background:var(--t-keep-bg);color:var(--t-keep-ink)}
.qcard.warn{background:var(--t-warn-bg);color:var(--t-warn-ink)} .qcard.pur{background:var(--t-pur-bg);color:var(--t-pur-ink)}
.qcard.svc,.qcard.leg{background:var(--t-leg-bg);color:var(--t-leg-ink)}
.qcard h4{margin:0 0 5px;font-size:14px;font-weight:700;color:inherit}
.qcard p{margin:0;font-size:12.5px;opacity:.9;color:inherit}

/* sectie-koppen */
.seclabel{display:flex;align-items:baseline;gap:11px;margin:30px 4px 6px}
.seclabel h2{font-size:18px;font-weight:700;margin:0;letter-spacing:-.01em}
.seclabel .meta{font-size:12px;color:var(--ink-muted)}
.secsub{margin:0 4px 14px;color:var(--ink-muted);font-size:12.5px;max-width:860px}

/* generieke content-kaart (glass) + grid-helpers */
.card{padding:18px 20px;margin-bottom:14px}
.grid{display:grid;gap:14px} .g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:1fr 1fr 1fr} .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* tabel */
table{width:100%;border-collapse:collapse;font-size:12.5px}
th,td{text-align:left;padding:9px 12px;border-bottom:0.5px solid var(--hair);vertical-align:top}
th{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);font-weight:700}
td.r,th.r{text-align:right;font-family:var(--mono)}

/* code/JSON. De chip-look zit op <code> + de .codechip-klasse (fase G9). .k was
   hier vroeger ook aan gekoppeld, maar 6 views gebruiken .k als GEWOON key-label
   (per-view getypeerd, zie de .*-view .k-regels) - die krijgen nu geen mono-box
   meer. Echte inline-chips: gebruik <code> of class="codechip". */
code,.codechip{font-family:var(--mono);font-size:12px;background:var(--card-fill);border:0.5px solid var(--hair);border-radius:5px;padding:1px 6px}
pre{font-family:var(--mono);font-size:12px;line-height:1.7;border-radius:14px;padding:16px 18px;overflow:auto;margin:0;
  background:rgba(9,28,53,0.92);color:#e8eef6;border:1px solid rgba(9,28,53,0.2)}
pre .key{color:#9db8ff} pre .str{color:#69FEFF} pre .num{color:#ffd479} pre .cm{color:#8190a6} pre .hi{background:rgba(105,254,255,0.16);border-radius:3px;padding:0 2px}

/* badges/pills (zekerheid + methode) */
.pill{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.02em;padding:1px 8px;border-radius:var(--r-chip)}
.pill.bb{background:var(--t-bb-bg);color:var(--t-bb-ink)} .pill.keep{background:var(--t-keep-bg);color:var(--t-keep-ink)}
.pill.warn{background:var(--t-warn-bg);color:var(--t-warn-ink)} .pill.leg{background:var(--t-leg-bg);color:var(--t-leg-ink)}

/* figuur (SVG-diagram) in een glass-kaart */
.fig{padding:14px;margin-bottom:10px}
.fig svg{display:block;width:100%;height:auto}
.figcap{font-size:12px;color:var(--ink-muted);padding:6px 6px 2px}
.svg-ink{fill:var(--ink)} .svg-muted{fill:var(--ink-muted)} .svg-faint{fill:var(--ink-faint)}

ul.clean{margin:6px 0 0;padding-left:18px} ul.clean li{margin:5px 0}
.foot{margin-top:40px;padding-top:18px;border-top:0.5px solid var(--hair);color:var(--ink-muted);font-size:12px}
.docs a{display:inline-block;margin:0 14px 8px 0;font-weight:600;color:var(--cyan-ink)}

/* ══ SPA-view: todo (fase D2) - page-locale styles uit todo.html, scoped ══ */
.todo-view{--sys-warn:#B45309}
body.dark .todo-view{--sys-warn:#E0A44F}
.todo-view .meta{font-size:12px;color:var(--ink-muted)}
/* systeemstatus */
.todo-view .sysbox{padding:10px 12px;margin-bottom:14px}
/* pijplijn-kop systeem-view: bron-kaarten -> merge-balk -> gezamenlijke tegels */
.todo-view .srcpipe{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 8px}
@media (max-width:560px){.todo-view .srcpipe{grid-template-columns:1fr}}
.todo-view .srccard{background:var(--card-fill);border:0.5px solid var(--hair);border-radius:12px;padding:10px 12px}
.todo-view .srccard .sh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px}
.todo-view .srccard .sn{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-muted)}
.todo-view .srccard .ssub{font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink-faint)}
.todo-view .srccard .st{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600}
.todo-view .srccard .st .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.todo-view .srccard .st.ok{color:var(--green)} .todo-view .srccard .st.warn{color:var(--sys-warn)} .todo-view .srccard .st.bad{color:var(--red)}
.todo-view .mergebar{display:flex;align-items:center;justify-content:space-between;gap:10px;border-radius:9px;padding:8px 13px;margin:0 0 14px;font-size:12px;font-weight:600}
.todo-view .mergebar .mv{font-family:var(--mono);font-weight:600}
.todo-view .syscols{column-width:236px;column-gap:14px}
.todo-view .syscol{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;min-width:0;margin:0 0 14px;display:block}
.todo-view .sysgroup{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 4px}
.todo-view .sysgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px}
.todo-view .sysitem{background:var(--card-fill);border:0.5px solid var(--hair);border-radius:9px;padding:6px 9px}
.todo-view .sysitem .v{font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:-.01em;color:var(--ink)}
.todo-view .sysitem .k{font-size:9px;color:var(--ink-muted);margin-top:2px;text-transform:uppercase;letter-spacing:.03em;line-height:1.2}
.todo-view .sysbar{height:4px;border-radius:2px;background:var(--card-fill);border:0.5px solid var(--hair);overflow:hidden;margin-top:5px}
.todo-view .sysbar > i{display:block;height:100%;border-radius:3px}
.todo-view .sysitem .v.ok{color:var(--green)} .todo-view .sysitem .v.warn{color:var(--sys-warn)} .todo-view .sysitem .v.bad{color:var(--red)}
.todo-view .sysitem .sub{font-size:9px;color:var(--ink-faint);margin-top:3px;line-height:1.3;text-transform:none;letter-spacing:0}
.todo-view .syshealth{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:3px 0}
.todo-view .syshealth.ok{color:var(--green)} .todo-view .syshealth.warn{color:var(--sys-warn)} .todo-view .syshealth.bad{color:var(--red)}
.todo-view .syshealth .dot{width:8px;height:8px;border-radius:50%;background:currentColor}
/* changelog: tijdlijn met dag-kaarten (per maand gegroepeerd, daarbinnen per dag) */
.todo-view .clog{padding:8px 8px 14px;position:relative;background:transparent;border:0;box-shadow:none}
.todo-view .clog-month-h{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin:22px 0 12px 38px}
.todo-view .clog-month:first-child .clog-month-h{margin-top:2px}
.todo-view .clog-day{position:relative;padding-left:38px;margin-bottom:14px}
.todo-view .clog-day::before{content:'';position:absolute;left:9px;top:6px;bottom:-14px;width:2px;background:var(--hair)}
.todo-view .clog-month:last-child .clog-day:last-child::before{display:none}
.todo-view .clog-day::after{content:'';position:absolute;left:4px;top:18px;width:12px;height:12px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px var(--page)}
.todo-view .day-card{border-radius:16px;border:0.5px solid var(--hair);background:var(--card-fill);box-shadow:0 6px 22px rgba(9,28,53,0.06);padding:13px 18px 6px}
.todo-view .dch{display:flex;align-items:center;gap:9px;margin-bottom:2px}
.todo-view .dch .dd{font-size:15px;font-weight:700;color:var(--ink)}
.todo-view .dch .cnt{font-size:11px;font-weight:600;color:var(--ink-muted);background:var(--card-fill-hover);border:0.5px solid var(--hair);border-radius:999px;padding:1px 9px}
.todo-view .cl-entry{padding:11px 0;border-top:0.5px solid var(--hair-soft)}
.todo-view .cl-entry:first-of-type{border-top:0;padding-top:9px}
.todo-view .cl-pill{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--blue);background:rgba(51,102,255,0.10);border:0.5px solid rgba(51,102,255,0.22);border-radius:999px;padding:2px 9px;margin-bottom:7px}
.todo-view .cl-entry.now .cl-pill{color:var(--cyan-ink);background:var(--cyan-tint);border-color:rgba(14,122,163,0.30)}
.todo-view .cl-entry ul{margin:0;padding:0;list-style:none}
.todo-view .cl-entry li{font-size:12.5px;color:var(--ink-muted);padding:2px 0;display:flex;gap:9px;align-items:flex-start}
.todo-view .cl-entry li::before{content:'';flex:none;width:5px;height:5px;border-radius:50%;background:var(--blue);opacity:.45;margin-top:7px}
.todo-view .foot{text-align:center;color:var(--ink-faint);font-size:11px;margin-top:30px;font-family:var(--mono);border-top:0;padding-top:0}

/* ══ SPA-view: research (fase D8) - onderzoek-bibliotheek, scoped ══ */
/* ── research-view (D8): onderzoek-bibliotheek ────────────────────────────────
   Bron: de page-locale CSS uit routes/pages.mjs (researchIndexHtml: .rgrid/
   .rcard/h2.sec; researchShell: .crumb/article). Alles gescoped onder
   .research-view; tokens (--ink/--hair/--card-fill/--cyan-ink/--mono/...)
   komen uit mokum.css. Het rapport zelf (v-html) style't zichzelf via de
   meegeleverde .rembed-CSS uit het embed-endpoint. */
.research-view .rtitle{font-size:23px;letter-spacing:-.02em;line-height:1.25;margin:6px 0 8px}
.research-view .rsub{color:var(--ink-muted);margin:0;font-size:13px}
.research-view .rmeta{font-size:12px;color:var(--ink-muted);margin:14px 0}
.research-view .rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:13px;margin:18px 0}
.research-view .rcard{display:block;background:rgba(255,255,255,.72);border:.5px solid var(--hair);border-radius:16px;
  padding:15px 17px;text-decoration:none;color:var(--ink);box-shadow:0 4px 16px rgba(9,28,53,.07);transition:transform .12s}
body.dark .research-view .rcard{background:rgba(9,28,53,.55);border-color:rgba(255,255,255,.10)}
.research-view .rcard:hover{transform:translateY(-2px);text-decoration:none}
.research-view .rcard b{display:block;font-size:13.5px;letter-spacing:-.005em;margin-bottom:4px}
.research-view .rcard span{display:block;font-size:12px;color:var(--ink-muted);line-height:1.45}
.research-view .rcard i{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);margin-top:7px}
.research-view h2.sec{font-size:15px;margin:26px 4px 2px}
/* rapport: leesbreedte 880px zoals de losse server-pagina */
.research-view .crumb{font-size:12px;margin:0 auto 10px;max-width:880px}
.research-view .crumb a{color:var(--cyan-ink);text-decoration:none}
.research-view article.rpt{max-width:880px;margin:0 auto;background:rgba(255,255,255,.72);border:.5px solid var(--hair);
  border-radius:20px;padding:30px 34px;box-shadow:0 8px 30px rgba(9,28,53,.10)}
body.dark .research-view article.rpt{background:rgba(9,28,53,.55);border-color:rgba(255,255,255,.10)}

/* ══ SPA-view: rederijen (fase D4) - scoped ══ */
/* ══ SPA-view: rederijen (fase D4) - page-locale styles uit rederijen.html, scoped ══
 * Alleen selectors die mokum.css nog niet heeft (of die daar afwijken: .pill, .foot).
 * Tokens, body-achtergrond, .glass, .wrap, .hero, .stats, .seclabel, .secsub en de
 * tint-tokens komen uit mokum.css en zijn hier bewust NIET gedupliceerd. */

/* zekerheidslabels */
.rederijen-view .conf{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:var(--r-chip);border:0.5px solid transparent;white-space:nowrap}
.rederijen-view .conf.h{background:rgba(15,138,79,0.13);border-color:rgba(15,138,79,0.4);color:var(--green)}
.rederijen-view .conf.m{background:rgba(180,83,9,0.13);border-color:rgba(180,83,9,0.38);color:var(--amber)}
.rederijen-view .conf.l{background:rgba(255,80,60,0.12);border-color:rgba(255,80,60,0.4);color:#cc3a28}
body.dark .rederijen-view .conf.l{color:#ff9d90}

/* operator-lijst (compact, geen losse cards) */
.rederijen-view .olist{padding:0;overflow:hidden}
.rederijen-view .orow{display:grid;grid-template-columns:96px 1fr auto;gap:14px;align-items:start;padding:11px 16px;border-top:0.5px solid var(--hair-soft)}
.rederijen-view .orow:first-child{border-top:0}
.rederijen-view .orow:hover{background:var(--card-fill)}
.rederijen-view .orow .ologo{width:96px;height:60px;flex:0 0 96px;border-radius:9px;background:#fff;border:0.5px solid var(--hair);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:6px;margin-top:1px}
.rederijen-view .orow .ologo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.rederijen-view .omain{min-width:0}
.rederijen-view .ohead{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 9px}
.rederijen-view .oname{font-weight:700;font-size:14px;letter-spacing:-.005em}
.rederijen-view .otype{font-size:11px;font-weight:600;color:var(--ink-muted)}
.rederijen-view .ometa{font-size:11.5px;color:var(--ink-muted);margin-top:3px;display:flex;flex-wrap:wrap;align-items:center;gap:3px 14px;line-height:1.4}
.rederijen-view .ometa.pillrow{gap:5px}
.rederijen-view .ometa .ok{font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);margin-right:3px}
.rederijen-view .oboats{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);margin-top:3px;line-height:1.5}
.rederijen-view .onote{font-size:11px;color:var(--ink-muted);margin-top:4px}
.rederijen-view .ocnt{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap;text-align:right;line-height:1.05}
.rederijen-view .ocnt small{display:block;font-size:9px;color:var(--ink-faint);font-weight:400;letter-spacing:.03em}
.rederijen-view .orow.has-fleet .ocnt{cursor:pointer;user-select:none;border-radius:9px;padding:3px 7px;margin:-3px -7px;transition:background .15s var(--ease)}
.rederijen-view .orow.has-fleet .ocnt:hover{background:var(--card-fill-hover)}
.rederijen-view .orow.has-fleet .ocnt:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.rederijen-view .ocnt .ftoggle{display:block;margin-top:4px;font-family:'Libre Franklin',system-ui,sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--blue)}
body.dark .rederijen-view .ocnt .ftoggle{color:var(--cyan-ink)}
.rederijen-view .orow.has-fleet .ocnt::after{content:'\25B8';display:inline-block;margin-left:5px;font-size:10px;color:var(--ink-faint);transition:transform .18s var(--ease);transform:translateY(-1px)}
.rederijen-view .orow.has-fleet.open .ocnt::after{transform:translateY(-1px) rotate(90deg)}

/* vloot-sectie - standaard ingeklapt */
.rederijen-view .ofleet{display:none;grid-column:1/-1;margin-top:10px}
.rederijen-view .orow.open .ofleet{display:block}
.rederijen-view .vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.rederijen-view .vcard{display:flex;flex-direction:column;background:var(--card-fill);border:0.5px solid var(--hair-soft);border-radius:11px;overflow:hidden}
.rederijen-view .vphoto{display:block;width:100%;height:78px;background:var(--card-fill-hover);overflow:hidden}
.rederijen-view .vphoto img{width:100%;height:100%;object-fit:cover;display:block}
.rederijen-view .vbody{padding:6px 9px 8px;min-width:0}
.rederijen-view .vname{display:block;font-size:11.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rederijen-view .vmeta{display:block;margin-top:2px;font-family:var(--mono);font-size:9.5px;color:var(--ink-faint);letter-spacing:.02em}
.rederijen-view .vvf{display:inline-block;margin-top:4px;font-size:9.5px;color:var(--cyan-ink);text-decoration:none}
.rederijen-view .vvf:hover{text-decoration:underline}
/* zoekbalk (rederijen + schepen), client-side filter - bovenaan, mobiel sticky */
.rederijen-view .red-searchbar{margin:0 0 18px}
.rederijen-view .red-search{width:100%;padding:12px 15px;border-radius:12px;border:0.5px solid var(--hair);
  background:var(--card-fill);color:var(--ink);font:inherit;font-size:14px;outline:none;
  transition:border-color .16s var(--ease),background .16s var(--ease)}
.rederijen-view .red-search::placeholder{color:var(--ink-faint)}
.rederijen-view .red-search:focus{border-color:rgba(51,102,255,0.45);background:var(--card-fill-hover)}
.rederijen-view .red-noresults{margin:16px 2px;color:var(--ink-muted);font-size:14px}

/* merk-pills (wijkt af van de generieke .pill in mokum.css) */
.rederijen-view .pill{display:inline-block;font-size:11px;font-weight:600;letter-spacing:0;padding:3px 9px;border-radius:var(--r-chip);background:var(--card-fill);border:0.5px solid var(--hair);color:var(--ink-muted)}
.rederijen-view .pill.brand{background:var(--t-bb-bg);border-color:transparent;color:var(--t-bb-ink)}

/* kruisverbanden (visuele lineage) */
.rederijen-view .xlist{display:flex;flex-direction:column}
.rederijen-view .xitem{padding:11px 0;border-top:0.5px solid var(--hair-soft)}
.rederijen-view .xitem:first-child{border-top:0}
.rederijen-view .xline{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap}
.rederijen-view .xparent{font-size:12.5px;font-weight:700;color:var(--ink);background:var(--card-fill);border:0.5px solid var(--hair);border-radius:9px;padding:5px 11px;line-height:1.2}
.rederijen-view .xparent small{display:block;font-family:var(--mono);font-size:9px;color:var(--ink-faint);font-weight:400}
.rederijen-view .xarr{color:var(--ink-faint);font-weight:700}
.rederijen-view .xkid{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--t-bb-bg);color:var(--t-bb-ink);border:0.5px solid transparent}
.rederijen-view .xkid.hist{background:var(--card-fill);color:var(--ink-faint);text-decoration:line-through}
.rederijen-view .xnote{font-size:11.5px;color:var(--ink-muted);margin-top:5px;display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.rederijen-view .xnote .conf{flex:0 0 auto}

/* bron-citaties + voetnoot (voet wijkt af van de generieke .foot in mokum.css) */
.rederijen-view .src{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint)}
.rederijen-view .foot{margin-top:26px;text-align:center;color:var(--ink-faint);font-size:11px;font-family:var(--mono);border-top:0;padding-top:0}

/* ══ SPA-view: rapport (fase D5) - scoped ══ */
/* rapport-view (fase D5) - page-locale styles uit rapport.html, gescoped.
 * Gedeeld met mokum.css (NIET gedupliceerd): tokens, body, .glass, .wrap,
 * .eyebrow, .num, a-kleuren, .stats/.stat-basis, .grid-basis. Hieronder alleen
 * de afwijkingen/aanvullingen van de oude pagina. */
.rapport-view{font-size:13.5px}
.rapport-view.wrap{max-width:1080px;padding:24px 20px}
.rapport-view h1{font-size:24px;letter-spacing:-.02em;margin:4px 0 4px}
.rapport-view .lede{color:var(--ink-muted);max-width:720px}
.rapport-view .stats{padding:18px 8px;margin:18px 0 26px}
.rapport-view .stat{padding:4px 10px;min-width:0}
.rapport-view .stat .n{font-size:34px;line-height:1.05;color:var(--blue)}
.rapport-view .stat.g .n{color:var(--green)}
.rapport-view .stat.c .n{color:var(--cyan-ink)}
.rapport-view .stat .l{margin-top:7px}
.rapport-view h2{font-size:16px;margin:26px 4px 12px;letter-spacing:-.01em;display:flex;align-items:baseline;gap:10px}
.rapport-view h2 .ref{font-family:var(--mono);font-size:11px;color:var(--ink-faint);font-weight:500}
.rapport-view .grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.rapport-view .card{padding:17px 18px 15px;margin-bottom:0}
.rapport-view .card h3{margin:0 0 7px;font-size:13.5px;font-weight:700;display:flex;gap:8px;align-items:center}
.rapport-view .card p{margin:0 0 6px;font-size:12.5px;color:var(--ink-muted)}
.rapport-view .card .big{font-family:var(--mono);font-size:22px;font-weight:600;color:var(--ink);display:block;margin:4px 0 2px}
.rapport-view .tag{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:.5px solid transparent;white-space:nowrap}
.rapport-view .t-done{background:rgba(15,138,79,.13);border-color:rgba(15,138,79,.4);color:var(--green)}
.rapport-view .t-part{background:rgba(180,83,9,.13);border-color:rgba(180,83,9,.38);color:var(--amber)}
.rapport-view .bar{height:7px;border-radius:99px;background:var(--card-fill);overflow:hidden;margin:7px 0 3px}
.rapport-view .bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#3366FF,#69FEFF)}
.rapport-view .bar.g i{background:linear-gradient(90deg,#0F8A4F,#5fd99a)}
.rapport-view .mini{font-size:11px;color:var(--ink-faint)}
.rapport-view .links{padding:16px 18px}
.rapport-view .links a{display:inline-block;margin:3px 10px 3px 0;font-size:12.5px}
.rapport-view .foot{margin-top:26px;font-size:12px;color:var(--ink-faint);border-top:0;padding-top:0}
.rapport-view code{font-size:11.5px;border:0;padding:1px 6px}

/* ══ SPA-view: rederij-research (fase D5) - scoped ══ */
/* rederij-research-view (fase D5) - page-locale styles uit
 * rederij-research-rapport.html, gescoped. De oude pagina heeft GEEN dark
 * mode en een eigen licht kleurstelsel; dat is bewust behouden: de view
 * krijgt zijn eigen lichte achtergrond en hardcoded kleuren (de oude
 * :root-vars --bg/--hair/--mut zijn inline gezet om de mokum-tokens niet te
 * raken). Resets t.o.v. mokum.css: .stats/.stat (hier donkere header-pills,
 * geen gecentreerde dashboard-stats), .card (hier witte foto-kaart zonder
 * padding), .wrap-padding en de link-kleur (blauw i.p.v. cyan-ink). */
.rederij-research-view{background:#F3F6F9;font:15px/1.5 -apple-system,system-ui,'Libre Franklin',sans-serif;color:#091C35}
.rederij-research-view .hd{background:#091C35;color:#fff;padding:26px 22px}
.rederij-research-view .hd h1{margin:0 0 4px;font-size:22px;color:#fff}
.rederij-research-view .hd p{margin:0;opacity:.85;font-size:14px;max-width:780px}
.rederij-research-view .stats{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 0;padding:0}
.rederij-research-view .stat{flex:0 1 auto;min-width:0;text-align:left;position:static;background:rgba(255,255,255,.08);border-radius:10px;padding:9px 14px}
.rederij-research-view .stat + .stat::before{content:none}
.rederij-research-view .stat b{display:block;font-size:20px;color:#69FEFF}
.rederij-research-view .stat span{font-size:12px;opacity:.8}
.rederij-research-view .wrap{max-width:1180px;margin:0 auto;padding:22px}
.rederij-research-view h2{font-size:17px;margin:30px 0 4px;color:#091C35}
.rederij-research-view .sub{color:#5b6877;font-size:13px;margin:0 0 14px}
.rederij-research-view .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.rederij-research-view .card{background:#fff;border:1px solid #dfe5ec;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;padding:0;margin-bottom:0}
.rederij-research-view .ph{height:150px;background:#e7ecf2;position:relative;display:flex;align-items:center;justify-content:center}
.rederij-research-view .ph img{width:100%;height:100%;object-fit:cover;display:block}
.rederij-research-view .phfall{display:none;color:#9aa7b4;font-size:12px}
.rederij-research-view .ph.noimg .phfall{display:block}
.rederij-research-view .body{padding:11px 12px 12px}
.rederij-research-view .nm{font-weight:700;font-size:15px}
.rederij-research-view .meta{color:#5b6877;font-size:12px;margin:2px 0 9px}
.rederij-research-view .meta a{color:#5b6877}
.rederij-research-view .verdict{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px}
.rederij-research-view .op{font-weight:700;font-size:13px;padding:3px 9px;border-radius:8px}
.rederij-research-view .op.ok{background:#E8F5EE;color:#0F5132}
.rederij-research-view .op.svc{background:#EDE7F6;color:#3E2A6E}
.rederij-research-view .op.rent{background:#FFF4D6;color:#5C3A00}
.rederij-research-view .op.mut{background:#eef2f6;color:#5b6877}
.rederij-research-view .was{font-size:11.5px;color:#8A1C0F}
.rederij-research-view .chip{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px}
.rederij-research-view .chip.ok{background:#E8F5EE;color:#0F5132}
.rederij-research-view .chip.warn{background:#FFF4D6;color:#5C3A00}
.rederij-research-view .chip.mut{background:#eef2f6;color:#5b6877}
.rederij-research-view .vis{font-size:11.5px;color:#3E4A5b;background:#f6f8fb;border-radius:7px;padding:5px 7px;margin-bottom:6px}
.rederij-research-view .src{font-size:12px}
.rederij-research-view .src a{color:#3366FF;text-decoration:none}
.rederij-research-view .srcnote{color:#5b6877;font-style:italic}
.rederij-research-view a{color:#3366FF}

/* ══ SPA-view: foto-route (v0.280.0) - split-deck dashboard, scoped ══ */
/* Zelfde ontwerptaal als .dashboard-view (D12): links een frosted data-deck
 * (kop + statistieken + vlootlijst), rechts de kaart. Tokens zijn een lokale
 * kopie omdat de dashboard-tokens onder .dashboard-view gescoped zijn. De
 * InfoWindow-DOM leeft binnen de map-div, dus descendant-scoping dekt .iw. */
.foto-route-view{
  --navy:#091C35; --blue:#3366FF; --cyan-ink:#0E7AA3; --amber:#B45309; --green:#0F5132; --red:#FF503C;
  --ink:#091C35; --ink-muted:rgba(9,28,53,0.62); --ink-faint:rgba(9,28,53,0.42);
  --hair:rgba(9,28,53,0.10); --card-fill:rgba(9,28,53,0.035); --card-fill-hover:rgba(9,28,53,0.06);
  --cyan-tint:rgba(105,254,255,0.16); --ease:cubic-bezier(.2,.7,.3,1);
  --r-card:20px; --r-pill:12px; --r-inset:13px;
  font-family:"Libre Franklin", system-ui, -apple-system, sans-serif;
  font-size:13px; line-height:1.4; color:var(--ink); -webkit-font-smoothing:antialiased;
}
.foto-route-view *{box-sizing:border-box}
.foto-route-view .eyebrow{font-size:9.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-faint)}
.foto-route-view .glass{
  background:linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(243,246,249,0.55) 60%), rgba(243,246,249,0.78);
  -webkit-backdrop-filter:blur(28px) saturate(160%); backdrop-filter:blur(28px) saturate(160%);
  border:0.5px solid var(--hair); border-radius:var(--r-pill);
  box-shadow:0 8px 30px rgba(9,28,53,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
}
/* full-bleed kaart + zwevende glass-deck, zelfde geometrie als het hoofddashboard
 * (C command-dock: kaart is de held, deck zweeft links boven de kaart). */
.foto-route-view .split{position:fixed;inset:0}
/* ---- deck (zwevende card links) ---- */
.foto-route-view .deck{
  position:absolute; left:16px; top:82px; bottom:16px; width:380px; z-index:5;
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:22px; border:0.5px solid rgba(255,255,255,0.55);
  background:linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(243,246,249,0.62) 34%), rgba(243,246,249,0.78);
  -webkit-backdrop-filter:blur(30px) saturate(160%); backdrop-filter:blur(30px) saturate(160%);
  box-shadow:0 18px 50px rgba(9,28,53,0.20), inset 0 1px 0 rgba(255,255,255,0.6);
}
@supports not (backdrop-filter: blur(1px)){ .foto-route-view .deck{background:rgba(248,250,252,0.98)} }
.foto-route-view .deck-head{flex:0 0 auto;padding:16px 18px 14px;border-bottom:0.5px solid var(--hair);
  background:linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0))}
.foto-route-view .deck-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.foto-route-view .deck-title{font-size:15px;font-weight:600;letter-spacing:-0.01em}
.foto-route-view .deck-title .eyebrow{display:block;margin-bottom:3px}
.foto-route-view .status-pill{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 10px;border-radius:999px;
  background:rgba(9,28,53,0.04);border:0.5px solid var(--hair);transition:all 240ms var(--ease)}
.foto-route-view .status-pill.live{background:var(--cyan-tint);border-color:rgba(14,122,163,0.32)}
.foto-route-view .status-pill .live-dot{width:9px;height:9px;border-radius:50%;background:var(--ink-faint);position:relative;flex-shrink:0}
.foto-route-view .status-pill.live .live-dot{background:var(--cyan-ink);box-shadow:0 0 8px rgba(14,122,163,0.55)}
.foto-route-view .status-pill.live .live-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid var(--cyan-ink);opacity:0.6;animation:frv-ping 1.8s var(--ease) infinite}
@keyframes frv-ping{0%{transform:scale(0.7);opacity:0.7}70%,100%{transform:scale(2.2);opacity:0}}
.foto-route-view .status-pill .label{font-size:10.5px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-muted);white-space:nowrap}
.foto-route-view .status-pill.live .label{color:var(--cyan-ink)}
.foto-route-view .stat-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:13px}
.foto-route-view .stat{padding:10px 11px;border-radius:var(--r-inset);background:var(--card-fill);border:0.5px solid var(--hair);
  min-width:0;flex:none;text-align:left}
.foto-route-view .stat + .stat::before{content:none}
.foto-route-view .stat .eyebrow{font-size:9px}
.foto-route-view .stat .big{font-size:21px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-0.02em;margin-top:4px;line-height:1;color:var(--ink)}
.foto-route-view .stat .sub{font-size:9.5px;margin-top:4px;color:var(--ink-faint)}
.foto-route-view .stat .sub.up{color:var(--cyan-ink)}
/* ---- vlootlijst ---- */
.foto-route-view .deck-body{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:14px 18px 20px}
.foto-route-view .deck-body::-webkit-scrollbar{width:7px}
.foto-route-view .deck-body::-webkit-scrollbar-thumb{background:rgba(9,28,53,0.16);border-radius:4px}
.foto-route-view .block-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.foto-route-view .block-head h2{font-size:13px;font-weight:600;letter-spacing:-0.01em;margin:0;color:var(--ink)}
.foto-route-view .frv-search{width:100%;padding:8px 11px;margin-bottom:9px;font:inherit;color:var(--ink);
  background:var(--card-fill);border:0.5px solid var(--hair);border-radius:10px;outline:none}
.foto-route-view .frv-search:focus{border-color:rgba(51,102,255,0.45);background:#fff}
.foto-route-view .frv-err{color:var(--red);font-size:12px}
.foto-route-view .boat-row{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:11px;cursor:pointer;
  border:0.5px solid transparent;transition:background 120ms var(--ease)}
.foto-route-view .boat-row:hover{background:var(--card-fill-hover)}
.foto-route-view .boat-row.sel{background:var(--cyan-tint);border-color:rgba(14,122,163,0.30)}
.foto-route-view .br-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--ink-faint)}
.foto-route-view .br-dot.sail{background:var(--cyan-ink);box-shadow:0 0 7px rgba(14,122,163,0.6)}
.foto-route-view .br-dot.berth{background:var(--green)}
.foto-route-view .br-dot.moor{background:var(--amber)}
.foto-route-view .br-main{flex:1 1 auto;min-width:0}
.foto-route-view .br-name{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.foto-route-view .br-op{font-weight:500;color:var(--blue);margin-left:6px;font-size:11px}
.foto-route-view .br-meta{font-size:10.5px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.foto-route-view .br-chip{flex:none;font-size:9.5px;font-weight:700;letter-spacing:0.03em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;background:rgba(9,28,53,0.05);color:var(--ink-faint);white-space:nowrap}
.foto-route-view .br-chip.sail{background:var(--cyan-tint);color:var(--cyan-ink)}
.foto-route-view .br-chip.berth{background:#E8F5EE;color:var(--green)}
.foto-route-view .br-chip.moor{background:#FFF4D6;color:#5C3A00}
/* ---- kaart (full-bleed, achter de deck) ---- */
.foto-route-view .map-col{position:absolute;inset:0}
.foto-route-view .map{position:absolute;inset:0;background:#e7e7e3}
.foto-route-view .frv-locate{position:absolute;right:16px;top:82px;z-index:3;width:38px;height:38px;
  display:grid;place-items:center;cursor:pointer;color:var(--ink-muted);font:inherit}
.foto-route-view .frv-locate:hover{color:var(--blue)}
.foto-route-view .frv-legend{position:absolute;right:16px;bottom:22px;z-index:3;padding:10px 13px 11px;min-width:170px}
.foto-route-view .frv-legend .fl-eyebrow{font-size:9.5px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--cyan-ink);margin-bottom:7px}
.foto-route-view .frv-legend .fl-row{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;color:var(--ink)}
.foto-route-view .frv-legend .fl-row + .fl-row{margin-top:5px}
.foto-route-view .frv-legend .fl-sw{width:11px;height:11px;border-radius:50%;border:2px solid #fff;flex:none;box-shadow:0 0 3px rgba(9,28,53,0.35)}
.foto-route-view .frv-legend .fl-pulse{background:var(--cyan-ink);box-shadow:0 0 7px rgba(14,122,163,0.7)}
/* live-marker + eigen-locatie-marker (DOM binnen de map-div) */
.foto-route-view .frv-live{position:relative;display:flex;align-items:center;gap:5px}
.foto-route-view .frv-live .frv-pulse{width:12px;height:12px;border-radius:50%;background:var(--cyan-ink);
  border:2px solid #fff;box-shadow:0 0 8px rgba(14,122,163,0.7);position:relative;flex:none}
.foto-route-view .frv-live.moving .frv-pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:2px solid var(--cyan-ink);opacity:0.6;animation:frv-ping 1.6s var(--ease) infinite}
.foto-route-view .frv-live .frv-lbl{font:600 10.5px "Libre Franklin", system-ui;color:var(--navy);background:rgba(255,255,255,0.88);
  padding:1.5px 6px;border-radius:7px;box-shadow:0 1px 4px rgba(9,28,53,0.25);white-space:nowrap}
.foto-route-view .frv-me{width:14px;height:14px;border-radius:50%;background:var(--blue);border:2.5px solid #fff;
  box-shadow:0 0 10px rgba(51,102,255,0.75)}
.foto-route-view .nokey{position:fixed;left:0;right:0;bottom:0;top:52px;z-index:9;display:grid;place-items:center;
  margin:0;background:#F3F6F9;font:16px system-ui}
/* infowindow-inhoud (ongewijzigd t.o.v. D5) */
.foto-route-view .iw{font:13px system-ui;max-width:280px}
.foto-route-view .iw b{color:#091C35}
.foto-route-view .iw .op{color:#3366FF}
.foto-route-view .iw .meta{color:#5C3A00;font-size:11px}
.foto-route-view .iw .gs{color:#B45309}
.foto-route-view .iw a{color:#3366FF}
.foto-route-view .iw .it{padding:4px 0;border-top:1px solid #eee}
.foto-route-view .iw .it:first-of-type{border-top:0}
/* smal scherm: deck onderin als halfhoge sheet, kaart erboven zichtbaar */
@media (max-width: 760px){
  .foto-route-view .deck{left:10px;right:10px;width:auto;top:auto;bottom:10px;height:46%}
  .foto-route-view .frv-legend{display:none}
}

/* ══ SPA-view: accuratesse (fase D6) - scoped ══ */
/* ══ SPA-view: accuratesse (fase D6) - page-locale styles uit accuratesse.html, scoped ══
 * Basis-tokens, body-achtergrond, .glass, .eyebrow, .num en a komen uit mokum.css en zijn
 * hier bewust NIET gedupliceerd. De accuratesse-pagina had een smallere rapport-kolom
 * (860px), een iets groter lettertype en eigen tint-tokens (good/warn/note); die staan
 * als custom properties op de view-root. @keyframes pulse is hernoemd naar acc-pulse om
 * naamsbotsingen in de gedeelde mokum.css te voorkomen. */
.accuratesse-view{
  --good-bg:#E8F5EE; --good-ink:#0F5132; --good-acc:#0F8A4F;
  --warn-bg:#FFF4D6; --warn-ink:#5C3A00; --warn-acc:#B45309;
  --note-bg:#E5EBFF; --note-ink:#091C35; --note-acc:#3366FF;
  font-size:14px;line-height:1.55;
}
body.dark .accuratesse-view{
  --good-bg:rgba(15,138,79,0.14); --good-ink:#7fe0a8; --good-acc:#5fd99a;
  --warn-bg:rgba(180,83,9,0.16); --warn-ink:#e8c07a; --warn-acc:#E0A44F;
  --note-bg:rgba(51,102,255,0.16); --note-ink:#bcd0ff; --note-acc:#6f96ff;
}

/* rapport-kolom: smaller dan de mokum-standaard */
.accuratesse-view.wrap{max-width:860px}

/* ---- inner frosted cards (C glass, 18px) ---- */
.accuratesse-view .step,.accuratesse-view .track,.accuratesse-view .mstat,.accuratesse-view .swatch,.accuratesse-view .tbl-wrap{
  background:rgba(255,255,255,0.55);
  -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,0.50); border-radius:18px;
  box-shadow:0 8px 24px rgba(9,28,53,0.10), inset 0 1px 0 rgba(255,255,255,0.60);}
body.dark .accuratesse-view .step,body.dark .accuratesse-view .track,body.dark .accuratesse-view .mstat,body.dark .accuratesse-view .swatch,body.dark .accuratesse-view .tbl-wrap{
  background:rgba(11,30,56,0.55); border:1px solid rgba(105,254,255,0.18);
  box-shadow:0 10px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);}
@supports not (backdrop-filter:blur(1px)){
  .accuratesse-view .step,.accuratesse-view .track,.accuratesse-view .mstat,.accuratesse-view .swatch,.accuratesse-view .tbl-wrap{background:rgba(248,250,252,0.96)}
  body.dark .accuratesse-view .step,body.dark .accuratesse-view .track,body.dark .accuratesse-view .mstat,body.dark .accuratesse-view .swatch,body.dark .accuratesse-view .tbl-wrap{background:rgba(9,28,53,0.95)} }

/* ---- hero (overrides op de mokum-hero) ---- */
.accuratesse-view .hero{padding:30px 30px 26px;margin-bottom:22px}
.accuratesse-view .hero .eyebrow{margin-bottom:10px}
.accuratesse-view .hero h1{margin:0 0 10px;font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.12}
.accuratesse-view .hero p{margin:0;font-size:15px;color:var(--ink-muted);max-width:62ch}
.accuratesse-view .hero .ledes{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.accuratesse-view .hero .lede{display:inline-flex;align-items:baseline;gap:7px;background:var(--card-fill);border:0.5px solid var(--hair);
  border-radius:var(--r-chip);padding:7px 14px;margin-bottom:0;max-width:none}
.accuratesse-view .lede .v{font-family:var(--mono);font-weight:600;font-size:14px;color:var(--blue)}
body.dark .accuratesse-view .lede .v{color:var(--cyan)}
.accuratesse-view .lede .k{font-size:11.5px;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600}

/* ---- section ---- */
.accuratesse-view section{margin-bottom:22px}
.accuratesse-view .sec{padding:24px 28px 26px}
.accuratesse-view .sec h2{margin:0 0 4px;font-size:19px;font-weight:700;letter-spacing:-.01em}
.accuratesse-view .sec .sub{font-size:13px;color:var(--ink-muted);margin:0 0 18px}
.accuratesse-view .sec p{margin:0 0 12px;color:var(--ink-muted)}
.accuratesse-view .sec p strong{color:var(--ink);font-weight:600}
.accuratesse-view .secnum{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--cyan-ink);background:var(--cyan-tint);
  border:0.5px solid rgba(14,122,163,0.30);border-radius:8px;padding:3px 9px;margin-right:10px;vertical-align:2px}
body.dark .accuratesse-view .secnum{border-color:rgba(105,254,255,0.30)}

/* ---- 3-step flow ---- */
.accuratesse-view .flow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin:6px 0 20px}
@media(max-width:680px){ .accuratesse-view .flow{grid-template-columns:1fr} }
.accuratesse-view .step{padding:16px 16px 18px;position:relative}
.accuratesse-view .step .n{font-family:var(--mono);font-weight:600;font-size:12px;color:var(--blue);
  width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:var(--note-bg);margin-bottom:12px}
body.dark .accuratesse-view .step .n{color:var(--cyan)}
.accuratesse-view .step h4{margin:0 0 6px;font-size:14px;font-weight:600}
.accuratesse-view .step p{margin:0;font-size:12.5px;color:var(--ink-muted);line-height:1.5}
.accuratesse-view .step svg{display:block;width:100%;height:78px;margin-bottom:12px}

/* ---- track split (live vs backtest) ---- */
.accuratesse-view .tracks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
@media(max-width:680px){ .accuratesse-view .tracks{grid-template-columns:1fr} }
.accuratesse-view .track{padding:15px 16px}
.accuratesse-view .track .tk{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.accuratesse-view .track.live .tk{color:var(--green)} .accuratesse-view .track.bt .tk{color:var(--blue)}
body.dark .accuratesse-view .track.bt .tk{color:var(--cyan)}
.accuratesse-view .track h4{margin:0 0 5px;font-size:14px;font-weight:600}
.accuratesse-view .track p{margin:0;font-size:12.5px;color:var(--ink-muted)}

/* ---- callouts (tint set) ---- */
.accuratesse-view .call{border-radius:var(--r-card-sm);padding:16px 18px;margin:4px 0 0;border:0.5px solid var(--hair)}
.accuratesse-view .call h4{margin:0 0 8px;font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.accuratesse-view .call ul{margin:0;padding-left:18px}
.accuratesse-view .call li{margin:5px 0;font-size:13px}
.accuratesse-view .call.good{background:var(--good-bg);color:var(--good-ink)} .accuratesse-view .call.good h4{color:var(--good-ink)}
.accuratesse-view .call.warn{background:var(--warn-bg);color:var(--warn-ink)} .accuratesse-view .call.warn h4{color:var(--warn-ink)}
.accuratesse-view .call.note{background:var(--note-bg);color:var(--note-ink)} .accuratesse-view .call.note h4{color:var(--note-ink)}
.accuratesse-view .call .dot{width:9px;height:9px;border-radius:50%;flex:none}
.accuratesse-view .call.good .dot{background:var(--good-acc)} .accuratesse-view .call.warn .dot{background:var(--warn-acc)} .accuratesse-view .call.note .dot{background:var(--note-acc)}

/* ---- model stat tiles ---- */
.accuratesse-view .mstats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:6px 0 16px}
@media(max-width:680px){ .accuratesse-view .mstats{grid-template-columns:1fr 1fr} }
.accuratesse-view .mstat{padding:14px 14px}
.accuratesse-view .mstat .v{font-family:var(--mono);font-weight:600;font-size:24px;letter-spacing:-.02em;line-height:1.05;color:var(--blue)}
body.dark .accuratesse-view .mstat .v{color:var(--cyan)}
.accuratesse-view .mstat .k{font-size:11px;color:var(--ink-muted);margin-top:6px;line-height:1.35}

/* ---- tables (eigen maat; overschrijft de mokum-tabelbasis binnen deze view) ---- */
.accuratesse-view .tbl-wrap{overflow-x:auto;margin:4px 0 0}
.accuratesse-view table{border-collapse:collapse;width:100%;font-size:13px;min-width:520px}
.accuratesse-view thead th{text-align:left;font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-faint);padding:12px 14px;background:var(--card-fill);border-bottom:0.5px solid var(--hair)}
.accuratesse-view thead th.r,.accuratesse-view tbody td.r{text-align:right}
/* de mokum-basis zet td.r/th.r op mono; deze pagina regelt mono per cel (.num/.win/.cell-*) */
.accuratesse-view td.r,.accuratesse-view th.r{font-family:inherit}
.accuratesse-view tbody td{padding:11px 14px;border-bottom:0.5px solid var(--hair-soft)}
.accuratesse-view tbody tr:last-child td{border-bottom:0}
.accuratesse-view tbody td.lbl{font-weight:600}
.accuratesse-view .cell-data{font-family:var(--mono);font-weight:600;color:var(--good-ink)}
.accuratesse-view .cell-geo{font-family:var(--mono);color:var(--ink-muted)}
.accuratesse-view .win{display:inline-block;background:var(--good-bg);color:var(--good-ink);border-radius:6px;padding:2px 7px;
  font-family:var(--mono);font-size:11.5px;font-weight:600}

/* ---- live bars ---- */
.accuratesse-view .bars{display:grid;gap:11px;margin:6px 0 0}
.accuratesse-view .bar-row{display:grid;grid-template-columns:96px 1fr 56px;align-items:center;gap:12px}
.accuratesse-view .bar-row .bl{font-family:var(--mono);font-size:12px;color:var(--ink-muted)}
.accuratesse-view .bar-track{height:14px;border-radius:7px;background:var(--card-fill);border:0.5px solid var(--hair);overflow:hidden;position:relative}
.accuratesse-view .bar-fill{height:100%;border-radius:7px;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .6s var(--ease)}
body.dark .accuratesse-view .bar-fill{background:linear-gradient(90deg,var(--blue),var(--cyan))}
.accuratesse-view .bar-row .bv{font-family:var(--mono);font-size:12.5px;font-weight:600;text-align:right}
.accuratesse-view .live-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.accuratesse-view .live-meta{font-size:12px;color:var(--ink-muted)}
.accuratesse-view .pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:7px;
  box-shadow:0 0 0 0 rgba(15,138,79,.5);animation:acc-pulse 2s infinite}
body.dark .accuratesse-view .pulse{box-shadow:0 0 0 0 rgba(95,217,154,.5)}
@keyframes acc-pulse{0%{box-shadow:0 0 0 0 rgba(15,138,79,.45)}70%{box-shadow:0 0 0 7px rgba(15,138,79,0)}100%{box-shadow:0 0 0 0 rgba(15,138,79,0)}}

/* ---- error distribution mini-bars ---- */
.accuratesse-view .dist{display:flex;align-items:flex-end;gap:8px;height:120px;margin:8px 0 6px;padding:0 2px}
.accuratesse-view .dist .col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:7px}
.accuratesse-view .dist .colbar{width:100%;max-width:46px;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,var(--blue),#6f96ff)}
body.dark .accuratesse-view .dist .colbar{background:linear-gradient(180deg,var(--cyan),var(--blue))}
.accuratesse-view .dist .cl{font-family:var(--mono);font-size:11px;color:var(--ink-muted);white-space:nowrap}
.accuratesse-view .dist-cap{font-size:11.5px;color:var(--ink-faint);text-align:center;margin-top:2px}

/* ---- sub-heading inside a section ---- */
.accuratesse-view .subhead{display:flex;align-items:center;gap:8px;margin:22px 0 10px;font-size:11px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
.accuratesse-view .subhead::after{content:"";flex:1;height:0.5px;background:var(--hair)}

/* ---- map source swatches ---- */
.accuratesse-view .swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 0}
@media(max-width:680px){ .accuratesse-view .swatches{grid-template-columns:1fr} }
.accuratesse-view .swatch{padding:14px 15px}
.accuratesse-view .swatch .sw{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.accuratesse-view .swatch .chip{width:24px;height:8px;border-radius:4px;flex:none}
.accuratesse-view .swatch .sl{font-size:13px;font-weight:600}
.accuratesse-view .swatch p{margin:0;font-size:12px;color:var(--ink-muted);line-height:1.45}

.accuratesse-view .hr{height:0.5px;background:var(--hair);border:0;margin:18px 0}
.accuratesse-view .foot{text-align:center;color:var(--ink-faint);font-size:11px;margin-top:30px;font-family:var(--mono);border-top:0;padding-top:0}
.accuratesse-view .miss{color:var(--ink-faint);font-style:italic}

/* ══ SPA-view: hoe-werkt-het (fase D7) - scoped ══ */
/* ── hoe-werkt-het-view (fase D7) - page-locale styles uit public/hoe-werkt-het.html,
   gescoped onder .hoe-werkt-het-view. Tokens/glass/tabellen komen uit mokum.css. ── */
.hoe-werkt-het-view .fig{color:var(--ink)}

/* mobiel: secties als inklapbare <details>-kaarten (JS bouwt ze, zie groupIntoDetails).
   Bestaan alleen op <=760px, dus geen media-gate nodig - desktop houdt platte .seclabel's. */
.hoe-werkt-het-view details.hw-sec{margin:0}
.hoe-werkt-het-view details.hw-sec > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  margin:16px 0 0;padding:13px 15px;border-radius:14px;
  background:var(--card-fill);border:0.5px solid var(--hair)}
.hoe-werkt-het-view details.hw-sec > summary::-webkit-details-marker{display:none}
.hoe-werkt-het-view details.hw-sec > summary h2{margin:0;font-size:15px;line-height:1.25}
.hoe-werkt-het-view details.hw-sec > summary .meta{font-size:11px;color:var(--ink-faint)}
.hoe-werkt-het-view details.hw-sec > summary::after{content:"";flex:0 0 auto;margin-left:auto;width:9px;height:9px;
  border-right:2px solid var(--ink-faint);border-bottom:2px solid var(--ink-faint);
  transform:rotate(-45deg);transition:transform .2s var(--ease)}
.hoe-werkt-het-view details.hw-sec[open] > summary::after{transform:rotate(45deg)}
.hoe-werkt-het-view details.hw-sec[open] > summary{background:var(--cyan-tint);border-color:rgba(14,122,163,0.22)}

/* cascade-ladder */
.hoe-werkt-het-view .ladder{display:grid;gap:8px}
.hoe-werkt-het-view .rung{display:grid;grid-template-columns:130px 1fr 64px;align-items:center;gap:12px;
  background:var(--card-fill);border:0.5px solid var(--hair);border-radius:11px;padding:9px 12px}
.hoe-werkt-het-view .rung .nm{font-weight:700;font-size:13px}
.hoe-werkt-het-view .rung .when{font-size:11.5px;color:var(--ink-muted);margin-top:2px}
.hoe-werkt-het-view .rung .bar{height:9px;border-radius:5px;background:var(--hair);overflow:hidden}
.hoe-werkt-het-view .rung .bar i{display:block;height:100%;border-radius:5px}
.hoe-werkt-het-view .rung .cf{font-size:12px;color:var(--ink-muted);text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
@media(max-width:780px){.hoe-werkt-het-view .rung{grid-template-columns:110px 1fr 56px}}

/* worked-example mini-stats */
.hoe-werkt-het-view .ex{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:4px 0 2px}
@media(max-width:780px){.hoe-werkt-het-view .ex{grid-template-columns:1fr 1fr}}
.hoe-werkt-het-view .ex .b{background:var(--card-fill);border:0.5px solid var(--hair);border-radius:11px;padding:10px 12px}
.hoe-werkt-het-view .ex .b .v{font-size:18px;font-weight:700;line-height:1.05}
.hoe-werkt-het-view .ex .b .l{font-size:11px;color:var(--ink-muted);margin-top:3px}

/* AIS-voorbeeld (verplaatst vanuit de rederijen-pagina) */
.hoe-werkt-het-view .aisbox{margin:4px 0 0}
.hoe-werkt-het-view .aisbox .lbl{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:9px;display:block}
.hoe-werkt-het-view .aisbox .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:680px){ .hoe-werkt-het-view .aisbox .two{grid-template-columns:1fr} }
.hoe-werkt-het-view .aismsg{background:var(--card-fill);border:0.5px solid var(--hair);border-radius:12px;padding:11px 13px;min-width:0}
.hoe-werkt-het-view .aismsg .mt{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--cyan-ink,#0E7AA3);margin-bottom:7px}
.hoe-werkt-het-view .aismsg pre{margin:0;font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--ink-muted);white-space:pre-wrap;word-break:break-word}
.hoe-werkt-het-view .aismsg pre b{color:var(--ink);font-weight:700}
.hoe-werkt-het-view .aisbox .cap{font-size:12.5px;color:var(--ink-muted);margin-top:11px}
.hoe-werkt-het-view .aisgloss{margin-top:11px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:6px 24px}
.hoe-werkt-het-view .aisgloss div{font-size:12px;color:var(--ink-muted)}
.hoe-werkt-het-view .aisgloss b{font-family:var(--mono);font-size:11px;color:var(--cyan-ink,#0E7AA3);font-weight:600}
.hoe-werkt-het-view .aisfreq{font-size:12.5px;color:var(--ink-muted);margin-top:11px}
.hoe-werkt-het-view .aisfreq b{color:var(--ink)}
.hoe-werkt-het-view .aisdim{margin-top:13px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;background:var(--card-fill);border:0.5px solid var(--hair);border-radius:12px;padding:14px 16px}
.hoe-werkt-het-view .aisdim svg{width:154px;height:auto;flex:0 0 auto}
.hoe-werkt-het-view .aisdim .dl{font-size:12.5px;color:var(--ink-muted);min-width:240px;flex:1}
.hoe-werkt-het-view .aisdim .dl .t{font-weight:700;color:var(--ink);margin-bottom:6px;display:block}
.hoe-werkt-het-view .aisdim .dl b{font-family:var(--mono);font-size:11px;color:var(--cyan-ink,#0E7AA3)}

/* venster-knoppen live-tabel */
.hoe-werkt-het-view .winbtn{ font:inherit; font-size:13px; padding:6px 12px; border-radius:8px; cursor:pointer;
  background:var(--card-fill,rgba(9,28,53,0.04)); color:var(--ink); border:1px solid var(--glass-line,rgba(9,28,53,0.12)); }
.hoe-werkt-het-view .winbtn.active{ background:var(--blue,#3366FF); color:#fff; border-color:var(--blue,#3366FF); }

/* ══ SPA-view: kaart (fase D9) - scoped ══ */
/* kaart-view (fase D9) - page-locale styles uit public/index.html, gescoped
 * onder .kaart-view. Bewuste afwijkingen t.o.v. de oude pagina:
 * - .stats/.stat hernoemd naar .kstats/.kstat (mokum.css heeft globale
 *   .stats/.stat met ander uiterlijk die anders doorlekken);
 * - @keyframes pulse hernoemd naar kaart-pulse (keyframes zijn niet te scopen);
 * - .panel top 84px i.p.v. 16px zodat het paneel onder de vaste appbar van de
 *   SPA-shell valt (appbar: top 14px + hoogte 56px + 14px marge);
 * - #map werd .kaart-view .map-el (ref-element); html/body-overflow-regels
 *   vervallen (de view zelf is position:fixed full-bleed);
 * - de donkere tokens (--ink/--muted/--faint/--glass/--glass-line) staan op
 *   .kaart-view zelf zodat ze de lichte mokum-tokens binnen de view overriden. */
.kaart-view{
  --navy:#091C35; --blue:#3366FF; --cyan:#69FEFF; --red:#FF503C;
  --ink:#E8EEF6; --muted:rgba(232,238,246,0.62); --faint:rgba(232,238,246,0.30);
  --glass:rgba(9,28,53,0.72); --glass-line:rgba(255,255,255,0.10);
  position:fixed; inset:0; overflow:hidden; background:#0b1726;
  font-family:'Libre Franklin',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
}
.kaart-view .map-el{position:absolute;inset:0;background:#0b1726}
/* Leaflet chrome tuned to the dark theme */
.kaart-view .leaflet-container{background:#0b1726}
.kaart-view .leaflet-control-zoom a{background:var(--glass);color:var(--ink);border-color:var(--glass-line)}
.kaart-view .leaflet-control-zoom a:hover{background:rgba(9,28,53,0.92)}
.kaart-view .leaflet-control-attribution{background:rgba(9,28,53,0.6)!important;color:var(--muted)!important}
.kaart-view .leaflet-control-attribution a{color:var(--cyan)!important}
.kaart-view .boat-icon{background:none;border:0}
.kaart-view .boat-icon > div{transform-origin:50% 50%;will-change:transform;line-height:0}

.kaart-view .panel{
  position:absolute;top:84px;left:16px;z-index:500;width:248px;
  background:var(--glass);backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--glass-line);border-radius:16px;
  box-shadow:0 10px 40px rgba(0,0,0,0.45);padding:14px 16px;color:var(--ink);
}
.kaart-view .panel h1{font-size:13px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;
  color:var(--ink);margin:0 0 2px;display:flex;align-items:center;gap:8px;}
.kaart-view .panel .sub{font-size:11px;color:var(--muted);margin:0 0 12px}
.kaart-view .dot{width:9px;height:9px;border-radius:50%;background:var(--faint);flex:0 0 auto}
.kaart-view .dot.live{background:var(--cyan);animation:kaart-pulse 1.8s infinite}
.kaart-view .dot.connecting{background:#FFC857;animation:kaart-pulse 1.2s infinite}
.kaart-view .dot.down{background:var(--red)}
@keyframes kaart-pulse{0%{box-shadow:0 0 0 0 rgba(105,254,255,0.5)}70%{box-shadow:0 0 0 7px rgba(105,254,255,0)}100%{box-shadow:0 0 0 0 rgba(105,254,255,0)}}
.kaart-view .kstats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kaart-view .kstat{background:rgba(255,255,255,0.04);border:1px solid var(--glass-line);border-radius:10px;padding:8px 10px;}
.kaart-view .kstat .v{font-size:18px;font-weight:700;line-height:1}
.kaart-view .kstat .l{font-size:10px;color:var(--muted);margin-top:3px;letter-spacing:0.02em}
.kaart-view .kstat.full{grid-column:1 / -1}
.kaart-view .kstat .v.blue{color:var(--cyan)}
.kaart-view .legend{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px 12px;font-size:10.5px;color:var(--muted)}
.kaart-view .legend span{display:inline-flex;align-items:center;gap:5px}
.kaart-view .swatch{width:10px;height:10px;border-radius:2px;display:inline-block}

.kaart-view .vcard{
  position:absolute;z-index:600;width:236px;
  background:var(--glass);backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--glass-line);border-radius:14px;
  box-shadow:0 12px 44px rgba(0,0,0,0.5);padding:12px 14px;color:var(--ink);
  transform:translate(-50%,calc(-100% - 18px));pointer-events:auto;display:none;
}
.kaart-view .vcard.show{display:block}
.kaart-view .vcard .x{position:absolute;top:8px;right:10px;cursor:pointer;color:var(--muted);
  font-size:16px;line-height:1;border:0;background:none;padding:2px}
.kaart-view .vcard .nm{font-size:14px;font-weight:700;margin:0 24px 1px 0;line-height:1.2}
.kaart-view .vcard .op{font-size:11px;color:var(--muted);margin:0 0 9px}
.kaart-view .vcard .row{display:flex;justify-content:space-between;font-size:11.5px;padding:3px 0;
  border-top:1px solid rgba(255,255,255,0.06)}
.kaart-view .vcard .row .k{color:var(--muted)}
.kaart-view .vcard .row .vv{font-weight:600}
.kaart-view .vcard .photo{width:100%;height:84px;object-fit:cover;border-radius:9px;margin:8px 0 2px;
  border:1px solid var(--glass-line)}
.kaart-view .vcard .mref{margin-top:9px;font-size:10px;color:var(--muted);word-break:break-all}
.kaart-view .vcard .mref a{color:var(--cyan);text-decoration:none}
.kaart-view .pill{display:inline-block;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:0.02em}
.kaart-view .pill.route-lock{background:rgba(51,102,255,0.22);color:#9db8ff}
.kaart-view .pill.collective{background:rgba(232,238,246,0.14);color:var(--ink)}
.kaart-view .pill.geometric{background:rgba(232,238,246,0.08);color:var(--muted)}
.kaart-view .pill.hold{background:rgba(255,80,60,0.18);color:#ffb3a8}
.kaart-view .err{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:700;
  background:rgba(255,80,60,0.16);border:1px solid rgba(255,80,60,0.4);
  color:#ffd6cf;font-size:12px;padding:8px 14px;border-radius:10px;display:none;}
.kaart-view .err.show{display:block}

/* approach-mode knop + resultaten */
.kaart-view .apbtn{margin-top:12px;width:100%;border:1px solid var(--glass-line);border-radius:10px;
  background:rgba(255,255,255,0.05);color:var(--ink);font:600 12px/1 'Libre Franklin',sans-serif;
  padding:9px;cursor:pointer;letter-spacing:0.02em}
.kaart-view .apbtn.on{background:var(--blue);border-color:var(--blue);color:#fff}
.kaart-view .aphint{font-size:10.5px;color:var(--muted);margin-top:6px;display:none}
.kaart-view .aphint.show{display:block}
.kaart-view .appanel{position:absolute;bottom:16px;left:16px;z-index:500;width:248px;
  background:var(--glass);backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--glass-line);border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,0.45);
  padding:12px 14px;color:var(--ink);display:none;max-height:46vh;overflow-y:auto}
.kaart-view .appanel.show{display:block}
.kaart-view .appanel h2{font-size:12px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink);margin:0 0 8px}
.kaart-view .aprow{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:6px 0;border-top:1px solid rgba(255,255,255,0.06);font-size:12px}
.kaart-view .aprow:first-of-type{border-top:0}
.kaart-view .aprow .anm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kaart-view .aprow .aeta{color:var(--cyan);font-weight:700;flex:0 0 auto}
.kaart-view .aprow .ameta{color:var(--muted);font-size:10.5px}
.kaart-view .apnone{font-size:11.5px;color:var(--muted)}

/* ══ SPA-view: kaart-gmaps (fase D10) - scoped ══ */
/* kaart-gmaps view (fase D10) - page-locale styles uit public/index-gmaps.html,
   gescoped onder .kaart-gmaps-view. Door de hoofd-thread te mergen in mokum.css.
   De oude pagina was een standalone donkere pagina met eigen :root-tokens; die
   tokens staan hier als --kg-* custom properties op de view-root zodat ze de
   mokum.css-tokens niet raken. Het thema van deze view is bewust altijd donker
   (navy glas), net als de oude pagina, ongeacht body.dark.
   Afwijking: .panel top is 82px (onder de zwevende appbar), was 16px. */

.kaart-gmaps-view{
  position:fixed;inset:0;overflow:hidden;
  background:#091C35;
  color:#E8EEF6;
  --kg-ink:#E8EEF6;
  --kg-muted:rgba(232,238,246,0.62);
  --kg-faint:rgba(232,238,246,0.30);
  --kg-glass:rgba(9,28,53,0.72);
  --kg-glass-line:rgba(255,255,255,0.10);
}
.kaart-gmaps-view .kg-map{position:absolute;inset:0;background:#0b1726}

/* ---- status panel (glass, onder de appbar) ---- */
.kaart-gmaps-view .panel{
  position:absolute;top:82px;left:16px;z-index:5;
  width:248px;
  background:var(--kg-glass);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--kg-glass-line);
  border-radius:16px;
  box-shadow:0 10px 40px rgba(0,0,0,0.45);
  padding:14px 16px;
  color:var(--kg-ink);
}
.kaart-gmaps-view .panel h1{
  font-size:13px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;
  margin:0 0 2px;display:flex;align-items:center;gap:8px;color:var(--kg-ink);
}
.kaart-gmaps-view .panel .sub{font-size:11px;color:var(--kg-muted);margin:0 0 12px}
.kaart-gmaps-view .dot{width:9px;height:9px;border-radius:50%;background:var(--kg-faint);flex:0 0 auto;
     box-shadow:0 0 0 0 rgba(105,254,255,0.0)}
.kaart-gmaps-view .dot.live{background:#69FEFF;animation:kg-pulse 1.8s infinite}
.kaart-gmaps-view .dot.connecting{background:#FFC857;animation:kg-pulse 1.2s infinite}
.kaart-gmaps-view .dot.down{background:#FF503C}
@keyframes kg-pulse{0%{box-shadow:0 0 0 0 rgba(105,254,255,0.5)}70%{box-shadow:0 0 0 7px rgba(105,254,255,0)}100%{box-shadow:0 0 0 0 rgba(105,254,255,0)}}

/* .stats/.stat bestaan ook globaal in mokum.css (flex-statregel); hier volledig
   overschreven naar het grid van de oude pagina, incl. neutralisatie van de
   globale padding/margin/divider. */
.kaart-gmaps-view .stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0;margin:0}
.kaart-gmaps-view .stat{
  background:rgba(255,255,255,0.04);
  border:1px solid var(--kg-glass-line);
  border-radius:10px;padding:8px 10px;
  flex:none;min-width:0;text-align:left;
}
.kaart-gmaps-view .stat + .stat::before{content:none}
.kaart-gmaps-view .stat .v{font-size:18px;font-weight:700;line-height:1;color:var(--kg-ink)}
.kaart-gmaps-view .stat .l{font-size:10px;color:var(--kg-muted);margin-top:3px;letter-spacing:0.02em}
.kaart-gmaps-view .stat.full{grid-column:1 / -1}
.kaart-gmaps-view .stat .v.blue{color:#69FEFF}
.kaart-gmaps-view .stat .v.conn{font-size:13px}

.kaart-gmaps-view .legend{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px 12px;font-size:10.5px;color:var(--kg-muted)}
.kaart-gmaps-view .legend span{display:inline-flex;align-items:center;gap:5px}
.kaart-gmaps-view .swatch{width:10px;height:10px;border-radius:2px;display:inline-block}

/* ---- info popup (vessel card) ---- */
.kaart-gmaps-view .vcard{
  position:absolute;z-index:6;
  width:236px;
  background:var(--kg-glass);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--kg-glass-line);
  border-radius:14px;
  box-shadow:0 12px 44px rgba(0,0,0,0.5);
  padding:12px 14px;color:var(--kg-ink);
  transform:translate(-50%,calc(-100% - 18px));
  pointer-events:auto;display:none;
}
.kaart-gmaps-view .vcard.show{display:block}
.kaart-gmaps-view .vcard .x{position:absolute;top:8px;right:10px;cursor:pointer;color:var(--kg-muted);
          font-size:16px;line-height:1;border:0;background:none;padding:2px}
.kaart-gmaps-view .vcard .nm{font-size:14px;font-weight:700;margin:0 24px 1px 0;line-height:1.2}
.kaart-gmaps-view .vcard .op{font-size:11px;color:var(--kg-muted);margin:0 0 9px}
.kaart-gmaps-view .vcard .row{display:flex;justify-content:space-between;font-size:11.5px;padding:3px 0;
            border-top:1px solid rgba(255,255,255,0.06)}
.kaart-gmaps-view .vcard .row .k{color:var(--kg-muted)}
.kaart-gmaps-view .vcard .row .vv{font-weight:600}
.kaart-gmaps-view .vcard .photo{width:100%;height:84px;object-fit:cover;border-radius:9px;margin:8px 0 2px;
              border:1px solid var(--kg-glass-line);display:none}
.kaart-gmaps-view .vcard .mref{margin-top:9px;font-size:10px;color:var(--kg-muted);word-break:break-all}
.kaart-gmaps-view .vcard .mref a{color:#69FEFF;text-decoration:none}

/* .pill bestaat ook globaal in mokum.css; hier volledig overschreven. */
.kaart-gmaps-view .pill{display:inline-block;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:700;
      letter-spacing:0.02em}
.kaart-gmaps-view .pill.route-lock{background:rgba(51,102,255,0.22);color:#9db8ff}
.kaart-gmaps-view .pill.collective{background:rgba(232,238,246,0.14);color:var(--kg-ink)}
.kaart-gmaps-view .pill.geometric{background:rgba(232,238,246,0.08);color:var(--kg-muted)}
.kaart-gmaps-view .pill.hold{background:rgba(255,80,60,0.18);color:#ffb3a8}

.kaart-gmaps-view .err{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:7;
  background:rgba(255,80,60,0.16);border:1px solid rgba(255,80,60,0.4);
  color:#ffd6cf;font-size:12px;padding:8px 14px;border-radius:10px;display:none;
}
.kaart-gmaps-view .err.show{display:block}

/* ══ SPA-view: db (fase D11) - database-inspector, scoped ══ */
/* ══ SPA-view: db (fase D11) - page-locale styles uit tools/dbstatus.html, scoped.
 * De oude losse pagina was donker; als view volgen de kleuren de mokum-tokens
 * (cyan-ink flipt naar #69FEFF in dark mode, zoals de oude look). ══ */
.db-view.wrap{max-width:1040px}
.db-view h1{font-weight:700;letter-spacing:-.02em;margin:0 0 4px;font-size:28px}
.db-view .sub{color:var(--ink-muted);font-size:14px;margin:0 0 26px}
.db-view .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.db-view .tile{padding:16px 18px}
.db-view .tile .v{font-family:var(--mono);font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.05;color:var(--ink)}
.db-view .tile .k{font-size:11px;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.06em;margin-top:6px}
.db-view .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.db-view .card h2{font-size:15px;font-weight:600;margin:0 0 4px}
.db-view .csub{color:var(--ink-muted);font-size:12px;margin:0 0 12px}
.db-view table{font-size:12.5px;font-family:var(--mono)}
.db-view th{text-align:left;color:var(--ink-muted);font-weight:500;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;padding:4px 8px;border-bottom:.5px solid var(--hair)}
.db-view td{padding:5px 8px;border-bottom:.5px solid var(--hair-soft);color:var(--cyan-ink)}
.db-view .pill{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:6px;background:rgba(38,188,113,.16);color:#1f9d5b;margin-left:8px;vertical-align:middle}
body.dark .db-view .pill{color:#5fe0a0}
.db-view .bar{height:6px;background:linear-gradient(90deg,var(--cyan),var(--blue));border-radius:3px;display:inline-block;vertical-align:middle}
@media(max-width:820px){.db-view .tiles{grid-template-columns:1fr 1fr}.db-view .grid2{grid-template-columns:1fr}}

/* ══ SPA-view: route-explorer (fase D11) - per-boot routes, scoped ══ */
/* ══ SPA-view: route-explorer (fase D11) - page-locale styles uit
 * tools/route-explorer.html, gescoped onder .route-explorer-view.
 * Weggelaten t.o.v. de oude pagina: :root/body-tokens en -achtergrond
 * (mokum.css levert die), .top/.segnav/.btn (de appbar is nu de chrome).
 * De oude inline style-attributen (shead-rij, toggles, trip-filter, durSel)
 * staan hier als klassen (.toggles, .tgl, .trip-filter, .mergelbl). ══ */
.route-explorer-view{--red:#E03131} /* pagina-lokaal rood (mokum --red is #FF503C) */
.route-explorer-view .src{font-size:10px;font-weight:700;padding:3px 9px;border-radius:6px;background:rgba(47,179,107,.16);color:#1f9d5b}
body.dark .route-explorer-view .src{color:#5fe0a0}
/* dashboard-stijl: de kaart is full-bleed (vult het hele venster) en de panelen zweven erboven */
.route-explorer-view .layout{position:fixed;inset:0;display:block;margin:0}
.route-explorer-view .side{position:fixed;left:16px;top:82px;bottom:16px;width:330px;z-index:6;display:flex;flex-direction:column;min-height:0;overflow:hidden;
  margin:0;border-radius:20px;
  background:rgba(255,255,255,0.62);
  -webkit-backdrop-filter:blur(30px) saturate(165%);backdrop-filter:blur(30px) saturate(165%);
  border:1px solid rgba(255,255,255,0.55);
  box-shadow:0 18px 50px rgba(9,28,53,0.16), inset 0 1px 0 rgba(255,255,255,0.70)}
body.dark .route-explorer-view .side{
  background:rgba(6,16,33,0.92);
  -webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
  border:1px solid rgba(105,254,255,0.20);
  box-shadow:0 20px 54px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07)}
.route-explorer-view .side .shead{padding:14px 18px 6px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.route-explorer-view .side .shead .k{font-size:11px;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.06em}
.route-explorer-view .toggles{display:flex;gap:10px}
.route-explorer-view .tgl{font-size:11px;color:var(--ink-muted);display:flex;align-items:center;gap:5px;cursor:pointer;text-transform:none;letter-spacing:0}
.route-explorer-view .search{margin:8px 18px 10px;display:block;width:calc(100% - 36px);padding:8px 11px;border-radius:10px;border:.5px solid var(--hair);
 background:var(--card-fill);color:var(--ink);font-family:inherit;font-size:13px;outline:none}
.route-explorer-view .search:focus{border-color:rgba(51,102,255,.45)}
.route-explorer-view .boot-list{flex:1;overflow:auto;padding:0 10px 16px}
.route-explorer-view .boot-row{padding:9px 12px;border-radius:10px;cursor:pointer;margin-bottom:2px;border:0.5px solid transparent}
.route-explorer-view .boot-row:hover{background:var(--card-fill-hover)}
.route-explorer-view .boot-row.sel{background:var(--cyan-tint);border-color:rgba(14,122,163,0.22)}
.route-explorer-view .boot-row .bt{float:right;font-size:11px;font-weight:700;color:var(--cyan-ink);font-family:var(--mono,monospace)}
.route-explorer-view .boot-row .bn{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:30px}
.route-explorer-view .boot-row .bo{font-size:11px;color:var(--ink-muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* het zwevende onderpaneel (rechts naast de zijbalk): boot-header + trip-tabel */
.route-explorer-view .main{position:fixed;left:362px;right:16px;bottom:16px;z-index:5;max-height:26vh;display:flex;flex-direction:column;min-height:0;overflow:hidden;border-radius:18px;
  background:rgba(255,255,255,0.62);
  -webkit-backdrop-filter:blur(30px) saturate(165%);backdrop-filter:blur(30px) saturate(165%);
  border:1px solid rgba(255,255,255,0.55);
  box-shadow:0 18px 50px rgba(9,28,53,0.16), inset 0 1px 0 rgba(255,255,255,0.70)}
body.dark .route-explorer-view .main{
  background:rgba(6,16,33,0.92);
  -webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
  border:1px solid rgba(105,254,255,0.20);
  box-shadow:0 20px 54px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07)}
/* de kaart als full-bleed achtergrond */
.route-explorer-view .mapwrap{position:fixed;inset:0;z-index:0}
.route-explorer-view .mapwrap #map{position:absolute;inset:0}
.route-explorer-view #map{background:#F3F6F9}
.route-explorer-view .mapdbg{position:absolute;top:10px;right:10px;z-index:5;display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,0.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:0.5px solid var(--hair);border-radius:9px;padding:6px 10px;font-size:11.5px;font-weight:600;
  color:var(--ink-muted);cursor:pointer;box-shadow:0 2px 10px rgba(9,28,53,0.14);user-select:none}
body.dark .route-explorer-view .mapdbg{background:rgba(11,32,56,0.92)}
.route-explorer-view .mapdbg-stack{position:fixed;top:82px;right:16px;z-index:5;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.route-explorer-view .mapdbg-stack .mapdbg{position:static}
.route-explorer-view .mapdbg .cnt{font-family:var(--mono,monospace);font-weight:500;color:var(--ink-faint)}
/* boot-info als zwevende kop-balk boven de kaart (rechts naast de zijbalk) */
.route-explorer-view .binfo{position:fixed;top:82px;left:362px;right:16px;z-index:6;padding:11px 18px;border-radius:14px;font-size:14px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  background:rgba(255,255,255,0.62);
  -webkit-backdrop-filter:blur(30px) saturate(165%);backdrop-filter:blur(30px) saturate(165%);
  border:1px solid rgba(255,255,255,0.55);
  box-shadow:0 18px 50px rgba(9,28,53,0.16), inset 0 1px 0 rgba(255,255,255,0.70)}
body.dark .route-explorer-view .binfo{
  background:rgba(6,16,33,0.92);
  -webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
  border:1px solid rgba(105,254,255,0.20);
  box-shadow:0 20px 54px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07)}
.route-explorer-view .binfo .meta{font-size:12px;font-weight:500;color:var(--ink-muted)}
.route-explorer-view .chip{font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--card-fill);border:.5px solid var(--hair);color:var(--ink-muted)}
.route-explorer-view .chip.gap{color:var(--cyan-ink);background:var(--cyan-tint);border-color:rgba(14,122,163,.2)}
.route-explorer-view .chip.cls{color:var(--blue);background:rgba(51,102,255,.12);border-color:rgba(51,102,255,.25)}
.route-explorer-view .chip.berth{color:var(--cyan-ink);background:var(--cyan-tint);border-color:rgba(14,122,163,.2)}
.route-explorer-view .chip.opchip{display:inline-flex;align-items:center;gap:6px;padding-left:4px}
.route-explorer-view .opchip-logo{height:18px;width:auto;max-width:46px;object-fit:contain;border-radius:4px;background:#fff;padding:1px 2px;flex:0 0 auto}
.route-explorer-view .mapnote{flex:1;display:none;align-items:center;justify-content:center;padding:30px;text-align:center;color:var(--ink-muted);font-size:13px}
.route-explorer-view .mapnote.show{display:flex}
.route-explorer-view .mpcap{padding:9px 22px;font-size:12px;color:var(--ink-muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.route-explorer-view .mpcap b{color:var(--ink)}
.route-explorer-view .mleg{display:inline-flex;align-items:center;gap:4px;margin-left:6px;color:var(--ink-faint);font-size:11px}
.route-explorer-view .mleg i{width:9px;height:9px;border-radius:50%;display:inline-block;border:1px solid #fff;margin-left:8px;box-shadow:0 0 0 .5px var(--hair)}
.route-explorer-view .mleg .d1{background:#3366FF;width:6px;height:6px}
.route-explorer-view .mleg .d2{background:#3366FF;width:9px;height:9px}
.route-explorer-view .mleg .d3{background:#3366FF;width:12px;height:12px}
.route-explorer-view .mleg .lst{background:#1F9D5B}
.route-explorer-view .mleg .lfn{border-radius:2px;background:conic-gradient(#091C35 90deg,#fff 0 180deg,#091C35 0 270deg,#fff 0)}
.route-explorer-view .mleg .ln{width:16px;height:0;border-top:2px solid var(--red);margin-left:10px}
.route-explorer-view .mleg .lnr{width:16px;height:0;border-top:1.5px dashed var(--ink-faint);margin-left:10px}
/* trips vult het zwevende onderpaneel (.main levert de glass-look) */
.route-explorer-view .trips{flex:1;min-height:0;overflow:auto;margin:0;background:transparent;border:0;box-shadow:none;border-radius:0}
.route-explorer-view table{width:100%;border-collapse:collapse;font-size:12.5px;font-family:var(--mono,monospace)}
.route-explorer-view thead th{position:sticky;top:0;background:rgba(255,255,255,0.55);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);text-align:left;color:var(--ink-muted);font-weight:500;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;padding:7px 14px;border-bottom:.5px solid var(--hair)}
body.dark .route-explorer-view thead th{background:rgba(11,30,56,0.55)}
.route-explorer-view .trip-filter{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:8px;padding:6px 14px;border-bottom:.5px solid var(--hair);font-size:11px;color:var(--ink-muted);
  background:rgba(255,255,255,0.55);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%)}
body.dark .route-explorer-view .trip-filter{background:rgba(11,30,56,0.55)}
.route-explorer-view .trip-filter select{font:inherit;background:var(--card-fill);color:var(--ink);border:.5px solid var(--hair);border-radius:6px;padding:2px 6px}
.route-explorer-view .trip-filter .mergelbl{display:flex;align-items:center;gap:4px;cursor:pointer}
.route-explorer-view td{padding:6px 14px;border-bottom:.5px solid var(--hair-soft);color:var(--ink)}
.route-explorer-view .hasfix{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3366FF;margin-right:6px;vertical-align:middle;box-shadow:0 0 0 .5px var(--hair)}
.route-explorer-view .trow{cursor:pointer}
.route-explorer-view .trow:hover td{background:var(--card-fill-hover)}
.route-explorer-view .trow.sel td{background:var(--cyan-tint)}
.route-explorer-view .empty{padding:22px;color:var(--ink-muted);font-size:13px}
/* rederijen-lijst (boven in de zijbalk) */
.route-explorer-view .op-list{overflow:auto;max-height:32vh;padding:0 10px 8px}
.route-explorer-view .op-row{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:10px;cursor:pointer;margin-bottom:2px;border:.5px solid transparent}
.route-explorer-view .op-row:hover{background:var(--card-fill-hover)}
.route-explorer-view .op-row.sel{background:var(--cyan-tint);border-color:rgba(14,122,163,.22)}
/* logo-layout A (tegel): logo in een witte tegel; geen logo = gekleurde tegel */
.route-explorer-view .op-swatch{width:40px;height:30px;border-radius:8px;flex:none;border:.5px solid var(--hair);box-shadow:0 1px 3px rgba(9,28,53,.10)}
.route-explorer-view .op-logo{width:40px;height:30px;object-fit:contain;flex:none;border-radius:8px;background:#fff;padding:3px;border:.5px solid var(--hair);box-shadow:0 1px 3px rgba(9,28,53,.10)}
.route-explorer-view .op-row .on{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.route-explorer-view .op-row .oc{font-size:11px;font-weight:700;color:var(--cyan-ink);font-family:var(--mono,monospace)}
.route-explorer-view .op-clear{font-size:12px;font-weight:600;color:var(--cyan-ink);cursor:pointer;padding:5px 18px 9px;display:none}
.route-explorer-view .op-clear.show{display:block}
.route-explorer-view .side-div{border-top:.5px solid var(--hair)}
/* boot-foto-thumbnail in de detailbalk */
.route-explorer-view .bphoto{width:90px;height:60px;border-radius:8px;background-size:cover;background-position:center;border:.5px solid var(--hair);flex:none;display:none;cursor:zoom-in}
.route-explorer-view .bphoto.show{display:block}
/* foto-lightbox */
.route-explorer-view .lightbox{position:fixed;inset:0;background:rgba(9,28,53,.82);display:none;align-items:center;justify-content:center;z-index:1000;cursor:zoom-out;padding:24px}
.route-explorer-view .lightbox.show{display:flex}
.route-explorer-view .lightbox img{max-width:92vw;max-height:92vh;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.route-explorer-view .binfo-text{min-width:0;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
/* per-boot route-legenda (rederij-weergave) */
.route-explorer-view .fleetleg{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.route-explorer-view .fleetleg span{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-muted)}
.route-explorer-view .fleetleg i{width:13px;height:3px;border-radius:1px;display:inline-block}
/* fallback voor browsers zonder backdrop-filter: bijna-dekkende vlakken */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .route-explorer-view .side,.route-explorer-view .main{background:rgba(248,250,253,0.97)}
  body.dark .route-explorer-view .side,body.dark .route-explorer-view .main{background:rgba(8,22,42,0.97)}
  .route-explorer-view thead th,.route-explorer-view .trip-filter{background:rgba(248,250,253,0.98)}
  body.dark .route-explorer-view thead th,body.dark .route-explorer-view .trip-filter{background:rgba(8,22,42,0.98)}
}
/* mobiele drill-down back-bar (mobLevel in route-explorer.mjs) - desktop verborgen */
.route-explorer-view .mob-nav{display:none;position:fixed;top:82px;left:8px;right:8px;z-index:8;
  align-items:center;gap:10px;padding:6px 10px;border-radius:14px}
.route-explorer-view .mob-back{display:inline-flex;align-items:center;gap:5px;padding:6px 13px 6px 9px;border:0;border-radius:999px;cursor:pointer;
  font:600 12.5px/1 "Libre Franklin",system-ui,sans-serif;letter-spacing:-0.01em;color:#fff;
  background:linear-gradient(180deg,rgba(105,254,255,0.20),rgba(105,254,255,0.10)),rgba(105,254,255,0.10);
  box-shadow:inset 0 0 12px rgba(105,254,255,0.30),inset 0 0 0 1px rgba(255,255,255,0.06)}
.route-explorer-view .mob-back svg{stroke:currentColor}
.route-explorer-view .mob-nav-title{min-width:0;flex:1;font-size:13.5px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* smalle schermen: 3 kolommen -> drill-down-stack (niveau volgt mobLevel).
   Kaart blijft de full-bleed achtergrond; per niveau zweeft één paneel erover. */
@media(max-width:760px){
  .route-explorer-view .side,
  .route-explorer-view .binfo,
  .route-explorer-view .main{left:8px;right:8px;width:auto}
  /* drill-down (niveau 2/3): verberg de globale topbar zodat er maar ÉÉN nav-bar is
     (de back-bar). De back-bar schuift naar de topbar-positie; de kaart vult de rest.
     Niveau 1 houdt de topbar (met taal/thema); daar is geen back-bar. */
  body:has(.route-explorer-view.mob-lv2) .ab,
  body:has(.route-explorer-view.mob-lv3) .ab{display:none}
  .route-explorer-view.mob-lv2 .mob-nav,
  .route-explorer-view.mob-lv3 .mob-nav{top:12px}
  /* niveau 1 - Boten: rederij-filter + zoek + IJ/dienst-toggles + botenlijst vullen het scherm */
  .route-explorer-view.mob-lv1 .side{top:82px;bottom:calc(86px + env(safe-area-inset-bottom,0px));max-height:none}
  .route-explorer-view.mob-lv1 .op-list{max-height:34vh}
  .route-explorer-view.mob-lv1 .binfo,
  .route-explorer-view.mob-lv1 .main,
  .route-explorer-view.mob-lv1 .mapdbg-stack{display:none}
  /* niveau 2 - Eén boot: back-bar + foto/chips (horizontale scroll-rij) + trips-tabel */
  .route-explorer-view.mob-lv2 .mob-nav{display:flex}
  .route-explorer-view.mob-lv2 .side{display:none}
  .route-explorer-view.mob-lv2 .binfo{top:66px;flex-wrap:nowrap;overflow-x:auto}
  .route-explorer-view.mob-lv2 .binfo-text{flex-wrap:nowrap}
  /* trips = compacte scroll-sheet ONDERAAN uitgelijnd (boven de bottom-nav): toont ~5
     trips en scrollt binnen de kaart. De route-kaart is erboven zichtbaar (tussen de
     binfo en de sheet), zodat je de gevaren routes ziet terwijl je een trip kiest. De
     "klik een trip"-caption is op dit niveau overbodig (klikken springt naar de kaart),
     dus verborgen om de sheet compact te houden. */
  .route-explorer-view.mob-lv2 .mpcap{display:none}
  .route-explorer-view.mob-lv2 .main{top:auto;bottom:calc(86px + env(safe-area-inset-bottom,0px));
    height:auto;max-height:248px}
  .route-explorer-view.mob-lv2 .mapdbg-stack{display:none}
  /* niveau 3 - Trip op de kaart: kaart + toggles (toon voorspelling / OSM-punten) onderin */
  .route-explorer-view.mob-lv3 .mob-nav{display:flex}
  .route-explorer-view.mob-lv3 .side,
  .route-explorer-view.mob-lv3 .binfo,
  .route-explorer-view.mob-lv3 .main{display:none}
  .route-explorer-view.mob-lv3 .mapdbg-stack{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;
    top:auto;left:12px;right:12px;bottom:calc(86px + env(safe-area-inset-bottom,0px))}
}
/* zeer smalle telefoons: de 6-koloms tripstabel liet de datum over 2 regels breken.
   Verberg de 2 minst-essentiele kolommen (lengte + gem. gat) en verklein de mono-tekst,
   zodat start/duur/punten/route op 1 regel passen. */
@media(max-width:400px){
  .route-explorer-view #trips{font-size:11px}
  .route-explorer-view #trips thead th,
  .route-explorer-view #trips td{padding:6px 9px}
  .route-explorer-view #trips th:nth-child(3),.route-explorer-view #trips td:nth-child(3),
  .route-explorer-view #trips th:nth-child(5),.route-explorer-view #trips td:nth-child(5){display:none}
  .route-explorer-view #trips tbody td:first-child{white-space:nowrap}
}

/* ══ SPA-view: dashboard (fase D12) - nautical Split-Deck, scoped ══ */
/* ============================================================
   DASHBOARD-VIEW (fase D12) - page-locale styles van het hoofddashboard,
   1-op-1 uit prototype-boats-nautical.html, gescoped onder .dashboard-view.
   De hoofd-thread merge't dit in mokum.css bij de commit.
   Bewuste afwijkingen t.o.v. de oude pagina:
   - html/body-regels (height:100%, overflow:hidden, body-achtergrond) zijn NIET
     geport: de SPA-shell/mokum.css bezit de body. De typografie-basis van de
     oude body staat nu op .dashboard-view zelf (regel hieronder).
   - :root-tokens van de pagina staan op .dashboard-view (winnen zo van de
     mokum.css body.dark-tokens; het deck heeft zijn eigen dark-variant).
   - @keyframes hernoemd (niet te scopen): ping -> dash-ping, raPulse ->
     dash-ra-pulse, fixflash -> dash-fixflash (huisconventie, zie kaart-pulse).
   ============================================================ */
.dashboard-view{
  font-family:"Libre Franklin", system-ui, -apple-system, sans-serif;
  color:var(--ink);
  font-size:13px;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* L5: token-definities samengevoegd in dit ene .dashboard-view-blok (was een
     tweede, direct opeenvolgend blok met dezelfde selector). */
    --navy:#091C35;
    --blue:#3366FF;
    --cyan:#69FEFF;
    --cyan-ink:#0E7AA3;       /* darker cyan that reads on a light surface */
    --red:#FF503C;
    --amber:#B45309;
    --light-blue:#E5EBFF;
    --off-white:#F3F6F9;
    /* LIGHT ink tokens - dark navy text on a light deck */
    --ink:#091C35;
    --ink-muted:rgba(9,28,53,0.62);
    --ink-faint:rgba(9,28,53,0.42);
    /* legacy aliases (kept so existing selectors resolve to navy ink) */
    --fg:var(--ink);
    --fg-muted:var(--ink-muted);
    --fg-faint:var(--ink-faint);
    --hair:rgba(9,28,53,0.10);     /* hairline border on light */
    --hair-soft:rgba(9,28,53,0.06);
    --card-fill:rgba(9,28,53,0.035);  /* faint navy tint = light card fill */
    --card-fill-hover:rgba(9,28,53,0.06);
    --cyan-tint:rgba(105,254,255,0.16);   /* pale cyan selection tint */
    --ease:cubic-bezier(.2,.7,.3,1);
    --spring:cubic-bezier(.2,.7,.3,1.4);
    --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --r-card:20px;
    --r-card-sm:16px;
    --r-pill:12px;
    --r-chip:999px;
    --r-inset:13px;
  }

  .dashboard-view *{ box-sizing:border-box; margin:0; padding:0; }

  /* ---------- GLASS RECIPE (light frosted glass) ---------- */
  .dashboard-view .glass{
    background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(243,246,249,0.55) 60%), rgba(243,246,249,0.78);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    backdrop-filter: blur(28px) saturate(160%);
    border:0.5px solid var(--hair);
    border-radius:var(--r-card);
    box-shadow:0 8px 30px rgba(9,28,53,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
  }
  .dashboard-view .glass-active{
    background: linear-gradient(180deg, rgba(105,254,255,0.22), rgba(105,254,255,0.10)), rgba(255,255,255,0.7);
    border:0.5px solid rgba(14,122,163,0.30);
    box-shadow: inset 0 0 16px rgba(105,254,255,0.30);
    color:var(--ink);
  }
  @supports not (backdrop-filter: blur(1px)){
    .dashboard-view .glass{ background: rgba(248,250,252,0.97); }
  }

  /* ---------- TYPOGRAPHY HELPERS ---------- */
  .dashboard-view .eyebrow{
    font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--ink-faint);
  }
  .dashboard-view .num{ font-weight:600; font-variant-numeric:tabular-nums; }
  .dashboard-view h1, .dashboard-view h2, .dashboard-view h3, .dashboard-view h4{ font-weight:600; color:var(--ink); }

  /* ============================================================
     SPLIT-DECK FRAME: left data deck (~42%) | right map (~58%)
     ============================================================ */
  .dashboard-view .split{ position:fixed; inset:52px 0 0 0; display:flex; }

  /* ---------- RIGHT: MEASUREMENT MAP ---------- */
  .dashboard-view .map-col{ position:relative; flex:1 1 auto; min-width:0; }
  .dashboard-view #map{ position:absolute; inset:0; }
  /* soft light vignette so the deck edge reads as a seam, not a cut */
  .dashboard-view .map-vignette{
    position:absolute; inset:0; pointer-events:none; z-index:1;
    background:
      radial-gradient(120% 90% at 58% 42%, rgba(243,246,249,0) 45%, rgba(9,28,53,0.06) 100%),
      linear-gradient(270deg, rgba(9,28,53,0) 72%, rgba(9,28,53,0.07) 100%);
  }
  /* floating brand chip - the ONLY thing over the map, everything else is in the deck */
  .dashboard-view .map-brand{
    position:absolute; top:18px; left:18px; z-index:3;
    display:flex; align-items:center; gap:11px; padding:9px 15px 9px 11px;
  }
  .dashboard-view .brand-mark{
    width:30px; height:30px; flex-shrink:0;
    display:grid; place-items:center; color:var(--ink);
  }
  .dashboard-view .brand-mark svg{ width:28px; height:28px; display:block; }
  .dashboard-view .brand-name{ font-weight:600; font-size:14px; letter-spacing:-0.01em; white-space:nowrap; color:var(--ink); }
  .dashboard-view .brand-sub{ font-size:11px; color:var(--ink-faint); white-space:nowrap; margin-top:-1px; }

  /* "boten varen" (dead-reckoning) toggle - zit nu in de deck (kaart-instelling, geen zwevende chip) */
  .dashboard-view .sail-toggle{
    display:flex; align-items:center; gap:11px; cursor:pointer; user-select:none;
    padding:11px 13px; border-radius:14px;
    background:var(--card-fill); border:0.5px solid var(--hair);
    transition:background 160ms var(--ease);
  }
  .dashboard-view .sail-toggle:hover{ background:var(--card-fill-hover); }
  .dashboard-view .sail-toggle .toggle-track{
    width:30px; height:17px; border-radius:999px; background:rgba(9,28,53,0.12);
    border:0.5px solid var(--hair); position:relative; flex-shrink:0; transition:background 140ms var(--ease), border-color 140ms var(--ease);
  }
  .dashboard-view .sail-toggle .toggle-track::after{
    content:""; position:absolute; top:1.5px; left:1.5px; width:12px; height:12px; border-radius:50%;
    background:#fff; box-shadow:0 1px 2px rgba(9,28,53,0.3); transition:transform 160ms var(--spring), background 140ms var(--ease);
  }
  .dashboard-view .sail-toggle.on .toggle-track{ background:rgba(105,254,255,0.30); border-color:rgba(14,122,163,0.4); }
  .dashboard-view .sail-toggle.on .toggle-track::after{ transform:translateX(13px); background:var(--cyan-ink); }
  .dashboard-view .sail-toggle .st-label{ font-size:11px; font-weight:600; color:var(--ink); white-space:nowrap; }
  .dashboard-view .sail-toggle .st-sub{ font-size:9.5px; color:var(--ink-faint); white-space:nowrap; margin-top:-1px; }

  /* live projection-accuracy panel - top-right of the map (soft tints, no ribbon) */
  .dashboard-view .acc-panel{
    position:absolute; right:18px; top:18px; z-index:3;
    padding:11px 14px 12px; min-width:188px; display:none;
  }
  .dashboard-view .acc-panel.show{ display:none; }  /* Live-accuratesse-paneel uit op het dashboard (vervangen door het rechter boot-paneel) */
  .dashboard-view .acc-panel .acc-eyebrow{ font-size:9.5px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--cyan-ink); margin-bottom:8px; }
  .dashboard-view .acc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:7px 12px; }
  .dashboard-view .acc-cell{ background:#E5EBFF; border-radius:10px; padding:7px 9px; }
  .dashboard-view .acc-cell .acc-v{ font-size:16px; font-weight:600; color:#091C35; font-variant-numeric:tabular-nums; line-height:1.1; }
  .dashboard-view .acc-cell .acc-l{ font-size:9px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:rgba(9,28,53,0.55); margin-top:2px; }
  .dashboard-view .acc-foot{ font-size:9.5px; color:var(--ink-faint); margin-top:8px; line-height:1.3; }
  .dashboard-view .deck.dark ~ .map-col .acc-cell, .dashboard-view .acc-cell{}  /* map stays light; cells keep navy-on-tint regardless */
  /* per-boot voorspelling-legende - bottom-right of the map (vrije hoek). Soft tints, geen ribbon. */
  .dashboard-view .proj-legend{
    position:absolute; right:18px; bottom:18px; z-index:3;
    padding:10px 13px 11px; min-width:160px; display:none;
  }
  .dashboard-view .proj-legend.show{ display:block; }
  .dashboard-view .proj-legend .pl-eyebrow{ font-size:9.5px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--cyan-ink); margin-bottom:8px; }
  .dashboard-view .proj-legend .pl-row{ display:flex; align-items:center; gap:8px; font-size:11px; font-weight:600; color:var(--ink); }
  .dashboard-view .proj-legend .pl-row + .pl-row{ margin-top:6px; }
  .dashboard-view .proj-legend .pl-sw{ width:18px; height:3px; border-radius:2px; flex:none; }
  /* selected-boot source badge in the vcard */
  .dashboard-view .vc-srcbadge{ display:none; align-items:center; gap:4px; margin-top:6px;
    font-size:10px; font-weight:700; letter-spacing:0.02em;
    padding:2px 8px 2px 7px; border-radius:999px;
    background:var(--cyan-tint); color:var(--cyan-ink); border:0.5px solid rgba(14,122,163,0.25); }
  .dashboard-view .vc-srcbadge.show{ display:inline-flex; }
  .dashboard-view .vc-srcbadge svg{ flex:none; }

  /* ---------- LEFT: DATA DECK ---------- */
  .dashboard-view .deck{
    flex:0 0 clamp(400px, 34%, 520px); min-width:400px;
    border-radius:0; border-right:0.5px solid var(--hair);
    display:flex; flex-direction:column; overflow:hidden;
    /* light frosted glass - this is a wall, not a floating card */
    background: linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(243,246,249,0.62) 34%), rgba(243,246,249,0.78);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    backdrop-filter: blur(30px) saturate(160%);
    box-shadow:18px 0 50px rgba(9,28,53,0.12);
  }
  @supports not (backdrop-filter: blur(1px)){
    .dashboard-view .deck{ background:rgba(248,250,252,0.98); }
  }

  /* ---------- DARK DECK VARIANT (toggle; map stays light) ----------
     Overrides only the ink/surface tokens ON the deck element, so the cascade
     re-themes every deck child while the map column (a sibling) is untouched. */
  .dashboard-view .deck.dark{
    --ink:rgba(243,246,249,0.94);
    --ink-muted:rgba(243,246,249,0.60);
    --ink-faint:rgba(243,246,249,0.40);
    --hair:rgba(255,255,255,0.12);
    --hair-soft:rgba(255,255,255,0.07);
    --card-fill:rgba(255,255,255,0.05);
    --card-fill-hover:rgba(255,255,255,0.09);
    --cyan-ink:#69FEFF;
    --cyan-tint:rgba(105,254,255,0.14);
    color:var(--ink);
    border-right:0.5px solid rgba(255,255,255,0.10);
    background:rgba(6,16,33,0.92);
    -webkit-backdrop-filter: blur(26px) saturate(170%);
    backdrop-filter: blur(26px) saturate(170%);
    box-shadow:18px 0 50px rgba(0,0,0,0.35);
  }
  /* kill the white overlay gradients on deck children so dark mode is truly solid */
  .dashboard-view .deck.dark .deck-head{ background:transparent; }
  .dashboard-view .deck.dark .fixlog-wrap{ background:rgba(9,28,53,0.55); border-color:rgba(255,255,255,0.10); }
  .dashboard-view .deck.dark .fixlog-bar{ background:rgba(255,255,255,0.04); }
  .dashboard-view .deck.dark .fixlog{ background:rgba(255,255,255,0.02); }
  .dashboard-view .deck.dark .fixlog::after{ background:linear-gradient(180deg, rgba(9,28,53,0) 0%, rgba(9,28,53,0.85) 100%); }
  .dashboard-view .deck.dark .glass{
    background:rgba(9,28,53,0.55);
    border:0.5px solid rgba(255,255,255,0.10);
    box-shadow:0 8px 30px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.10);
  }
  .dashboard-view .deck.dark .dur-btn.active{ color:#8FB0FF; }

  /* zwevende kaart-overlays (acc-panel, voorspelling-legende) volgen nu dark mode:
     donker glas + lichte tekst-tokens, net als het deck/de header. de kaart zelf blijft licht,
     dus dit zijn donkere chips op een lichte kaart. */
  .dashboard-view .deck.dark ~ .map-col .glass{
    --ink:rgba(243,246,249,0.94); --ink-muted:rgba(243,246,249,0.62); --ink-faint:rgba(243,246,249,0.45);
    --hair:rgba(255,255,255,0.12); --cyan-ink:#69FEFF;
    background:rgba(6,16,33,0.92);
    -webkit-backdrop-filter:blur(26px) saturate(170%); backdrop-filter:blur(26px) saturate(170%);
    border:0.5px solid rgba(105,254,255,0.20);
    box-shadow:0 8px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
  }

  /* theme toggle button (adapts via the same ink/surface tokens) */
  .dashboard-view .theme-toggle{
    width:32px; height:32px; flex:0 0 32px; border-radius:10px; cursor:pointer;
    display:grid; place-items:center; color:var(--ink-muted);
    background:var(--card-fill); border:0.5px solid var(--hair);
    transition:background 140ms var(--ease), color 140ms var(--ease), transform 140ms var(--spring);
  }
  .dashboard-view .theme-toggle:hover{ background:var(--card-fill-hover); color:var(--ink); transform:translateY(-1px); }
  .dashboard-view .theme-toggle svg{ width:16px; height:16px; }
  .dashboard-view .deck-head-right{ display:flex; align-items:center; gap:9px; }
  .dashboard-view .head-btn{ display:flex; align-items:center; gap:6px; padding:6px 11px; border-radius:10px; cursor:pointer;
    font-size:12px; font-weight:600; color:var(--ink); text-decoration:none;
    background:var(--card-fill); border:0.5px solid var(--hair); transition:background 120ms var(--ease); }
  .dashboard-view .head-btn:hover{ background:var(--card-fill-hover); }
  .dashboard-view .head-btn svg{ width:15px; height:15px; }
  /* segmented top-nav (consistent across dashboard / route-explorer / todo) */
  .dashboard-view .segnav{ display:flex; gap:3px; margin:13px 0 2px; padding:3px;
    background:var(--card-fill); border:0.5px solid var(--hair); border-radius:var(--r-pill); }
  .dashboard-view .segnav a{ flex:1; text-align:center; font-size:12px; font-weight:600; color:var(--ink-muted);
    padding:7px 10px; border-radius:9px; text-decoration:none; transition:background 120ms var(--ease), color 120ms var(--ease); }
  .dashboard-view .segnav a:hover{ color:var(--ink); background:var(--card-fill-hover); }
  .dashboard-view .segnav a.on{ background:var(--blue); color:#fff; }

  /* deck run-control header (sticky) */
  .dashboard-view .deck-head{
    flex:0 0 auto; padding:18px 20px 16px;
    border-bottom:0.5px solid var(--hair);
    background:linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
  }
  .dashboard-view .deck-title-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .dashboard-view .deck-title{ font-size:15px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); }
  .dashboard-view .deck-title .eyebrow{ display:block; margin-bottom:3px; }

  .dashboard-view .status-pill{
    display:flex; align-items:center; gap:9px;
    padding:7px 13px 7px 11px; border-radius:var(--r-chip);
    background:rgba(9,28,53,0.04); border:0.5px solid var(--hair);
    transition:all 240ms var(--ease);
  }
  .dashboard-view .status-pill.live{ background:var(--cyan-tint); border-color:rgba(14,122,163,0.32); }
  .dashboard-view .live-dot{ width:9px; height:9px; border-radius:50%; background:var(--ink-faint); position:relative; flex-shrink:0; }
  .dashboard-view .status-pill.live .live-dot{ background:var(--cyan-ink); box-shadow:0 0 8px rgba(14,122,163,0.55); }
  .dashboard-view .status-pill.live .live-dot::after{
    content:""; position:absolute; inset:-4px; border-radius:50%;
    border:1.5px solid var(--cyan-ink); opacity:0.6; animation:dash-ping 1.8s var(--ease) infinite;
  }
  @keyframes dash-ping{ 0%{ transform:scale(0.7); opacity:0.7;} 70%,100%{ transform:scale(2.2); opacity:0;} }
  .dashboard-view .status-pill .label{ font-size:11px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink-muted); }
  .dashboard-view .status-pill.live .label{ color:var(--cyan-ink); }

  /* run controls */
  .dashboard-view .run-row{ display:flex; align-items:stretch; gap:11px; margin-top:14px; }
  .dashboard-view .run-btns{ flex:1; display:flex; flex-direction:column; gap:8px; }
  .dashboard-view .run-dur-row{ display:flex; flex-wrap:wrap; gap:7px; }
  .dashboard-view .dur-btn{
    flex:1; padding:8px 6px; border-radius:10px; cursor:pointer; text-align:center;
    font-size:12px; font-weight:600; letter-spacing:0.01em;
    background:var(--card-fill); border:0.5px solid var(--hair); color:var(--ink-muted);
    transition:transform 120ms var(--spring), background 120ms var(--ease), color 120ms var(--ease);
  }
  .dashboard-view .dur-btn:hover{ background:var(--card-fill-hover); color:var(--ink); }
  .dashboard-view .dur-btn.active{ background:rgba(51,102,255,0.12); border-color:rgba(51,102,255,0.45); color:var(--blue); }
  .dashboard-view .run-btn{
    display:flex; align-items:center; justify-content:center; gap:9px;
    padding:11px 16px; border-radius:14px; cursor:pointer; border:0.5px solid rgba(51,102,255,0.55);
    background:linear-gradient(180deg, #4477FF, var(--blue));
    color:#fff; box-shadow:0 6px 18px rgba(51,102,255,0.30), inset 0 1px 0 rgba(255,255,255,0.3);
    font-size:13px; font-weight:600; letter-spacing:0.01em; transition:transform 160ms var(--spring), opacity 160ms var(--ease);
  }
  .dashboard-view .run-btn:hover{ transform:translateY(-1px); }
  .dashboard-view .run-btn svg{ width:16px; height:16px; }
  .dashboard-view .run-btn.running{
    background:rgba(255,80,60,0.08); border-color:rgba(255,80,60,0.45); color:var(--red);
    box-shadow:none;
  }
  .dashboard-view .run-meter{
    flex:0 0 132px; padding:9px 13px; border-radius:14px;
    background:var(--card-fill); border:0.5px solid var(--hair);
    display:flex; flex-direction:column; justify-content:center;
  }
  .dashboard-view .run-meter .eyebrow{ font-size:9px; }
  .dashboard-view .run-countdown{ font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-0.01em; line-height:1.05; margin-top:2px; color:var(--ink); }
  .dashboard-view .run-progress{ height:3px; border-radius:2px; margin-top:7px; background:rgba(9,28,53,0.10); overflow:hidden; }
  .dashboard-view .run-progress > i{ display:block; height:100%; width:0%; border-radius:2px;
    background:linear-gradient(90deg, var(--cyan), var(--blue)); box-shadow:0 0 8px rgba(105,254,255,0.5); transition:width 1s linear; }

  /* read-only status shown while a run is active (no start/stop control) */
  .dashboard-view .run-active{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:9px;
    padding:10px 14px; border-radius:14px; background:var(--card-fill); border:0.5px solid var(--hair); }
  .dashboard-view .ra-head{ display:flex; align-items:center; gap:10px; }
  .dashboard-view .ra-dot{ width:9px; height:9px; border-radius:50%; flex:none; background:var(--blue);
    box-shadow:0 0 0 0 rgba(51,102,255,0.55); animation:dash-ra-pulse 1.9s var(--ease) infinite; }
  @keyframes dash-ra-pulse{ 0%{ box-shadow:0 0 0 0 rgba(51,102,255,0.5);} 70%,100%{ box-shadow:0 0 0 7px rgba(51,102,255,0);} }
  .dashboard-view .ra-title{ font-size:13px; font-weight:600; color:var(--ink); letter-spacing:0.01em; }
  .dashboard-view .ra-sub{ font-size:11px; color:var(--ink-muted); margin-top:1px; }
  .dashboard-view .run-elapsed{ font-size:18px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-0.01em; line-height:1.05; margin-top:1px; color:var(--ink); }
  /* stop button inside the active panel - subtle, with a red confirm guard on click */
  .dashboard-view .ra-stop{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:4px;
    padding:8px 12px; border-radius:11px; cursor:pointer; font-size:12px; font-weight:600;
    color:var(--red); background:rgba(255,80,60,0.08); border:0.5px solid rgba(255,80,60,0.40);
    transition:background 140ms var(--ease); }
  .dashboard-view .ra-stop:hover{ background:rgba(255,80,60,0.15); }
  .dashboard-view .ra-stop svg{ width:13px; height:13px; }
  /* the [hidden] attr must win over the display:flex above, else both states show at once */
  .dashboard-view .run-btns[hidden], .dashboard-view .run-active[hidden]{ display:none; }

  /* deck body scroll */
  .dashboard-view .deck-body{ flex:1 1 auto; overflow-y:auto; overflow-x:hidden; padding:16px 20px 22px; }
  .dashboard-view .deck-body::-webkit-scrollbar{ width:7px; }
  .dashboard-view .deck-body::-webkit-scrollbar-thumb{ background:rgba(9,28,53,0.16); border-radius:4px; }
  .dashboard-view .deck-body::-webkit-scrollbar-track{ background:transparent; }

  .dashboard-view .block{ margin-top:20px; }
  .dashboard-view .block:first-child{ margin-top:4px; }
  .dashboard-view .block-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
  .dashboard-view .rederijen-head{ cursor:pointer; border-radius:8px; transition:background 160ms var(--ease); }
  .dashboard-view .rederijen-head:hover{ background:var(--card-fill); }
  .dashboard-view .rederijen-head h2::after{ content:"\203A"; margin-left:7px; color:var(--ink-faint); font-weight:400; }
  .dashboard-view .block-head h2{ font-size:13px; letter-spacing:-0.01em; }

  /* ---------- STAT CARDS ---------- */
  .dashboard-view .stat-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; }
  .dashboard-view .stat{
    padding:12px; border-radius:var(--r-inset);
    background:var(--card-fill); border:0.5px solid var(--hair);
    transition:transform 240ms var(--ease), background 240ms var(--ease);
    /* neutraliseer de globale mokum-.stat (stat-strip): die zet min-width:120px
       (3 kolommen passen dan niet in het deck -> derde kolom afgekapt),
       text-align:center en flex:1. De oude pagina had die regels niet. */
    min-width:0; flex:none; text-align:left;
  }
  .dashboard-view .stat + .stat::before{ content:none; } /* geen stat-strip-divider in het grid */
  .dashboard-view .stat:hover{ transform:translateY(-2px); background:var(--card-fill-hover); }
  .dashboard-view .stat .eyebrow{ font-size:9px; }
  .dashboard-view .stat .big{ font-size:23px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; margin-top:5px; line-height:1; min-height:23px; color:var(--ink); }
  .dashboard-view .stat .unit{ font-size:11px; color:var(--ink-faint); font-weight:500; margin-left:3px; }
  .dashboard-view .stat .sub{ font-size:10px; margin-top:5px; color:var(--ink-faint); }
  .dashboard-view .stat .sub.up{ color:var(--cyan-ink); } .dashboard-view .stat .sub.warn{ color:var(--amber); } .dashboard-view .stat .sub.bad{ color:var(--red); }
  .dashboard-view .stat.span2{ grid-column:span 2; }
  .dashboard-view .stat .splitline{ display:flex; gap:14px; margin-top:5px; }
  .dashboard-view .stat .splitline .big{ margin-top:0; }
  .dashboard-view .stat .ab-tag{ font-size:9px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.06em; }

  .dashboard-view .feed-stat{ display:flex; align-items:center; gap:9px; }
  .dashboard-view .feed-led{ width:10px; height:10px; border-radius:50%; background:var(--cyan-ink); box-shadow:0 0 8px rgba(14,122,163,0.5); flex-shrink:0; }
  .dashboard-view .feed-stat.dead .feed-led{ background:var(--red); box-shadow:0 0 8px rgba(255,80,60,0.6); }

  /* ---------- RECEPTION-GAP HISTOGRAM ---------- */
  .dashboard-view .hist{ display:flex; flex-direction:column; gap:8px; }
  .dashboard-view .hist-row{ display:flex; align-items:center; gap:10px; }
  .dashboard-view .hist-row .hl{ width:62px; font-size:11px; color:var(--ink-muted); text-align:right; flex-shrink:0; white-space:nowrap; font-variant-numeric:tabular-nums; }
  .dashboard-view .hist-track{ flex:1; height:10px; border-radius:5px; background:rgba(9,28,53,0.08); overflow:hidden; display:flex; }
  .dashboard-view .hist-fill{ height:100%; border-radius:5px; transform-origin:left; transform:scaleX(0); transition:transform 800ms var(--ease); }
  /* stacked reception-gap bar: Class A (cyan/blue) + Class B (amber) */
  .dashboard-view .hist-track > i{ height:100%; display:block; transition:width 600ms var(--ease); }
  .dashboard-view .hist-a{ background:linear-gradient(90deg, var(--cyan), var(--blue)); }
  .dashboard-view .hist-b{ background:linear-gradient(90deg, #FFCC66, var(--amber)); }
  .dashboard-view .hist-row .hv{ width:64px; font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; color:var(--ink); flex-shrink:0; line-height:1.15; }
  .dashboard-view .hist-row .hv .hv-ab{ display:block; font-size:9px; font-weight:500; color:var(--ink-faint); }
  /* A/B legend + class toggle above the gap histogram */
  .dashboard-view .gap-controls{ display:flex; align-items:center; justify-content:space-between; margin:0 0 9px 0; }
  .dashboard-view .gap-toggle{ display:flex; border:0.5px solid var(--hair); border-radius:8px; overflow:hidden; }
  .dashboard-view .gap-toggle button{ font-size:10px; font-weight:600; padding:4px 10px; border:none; background:transparent; color:var(--ink-muted); cursor:pointer; transition:background 120ms var(--ease); }
  .dashboard-view .gap-toggle button:not(:last-child){ border-right:0.5px solid var(--hair); }
  .dashboard-view .gap-toggle button.on{ background:rgba(51,102,255,0.14); color:var(--blue); }
  .dashboard-view .gap-legend{ display:flex; gap:14px; margin:0 0 0 72px; font-size:10px; color:var(--ink-muted); }
  .dashboard-view .gap-legend span{ display:inline-flex; align-items:center; gap:5px; }
  .dashboard-view .gap-legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; }
  .dashboard-view .gap-legend .la{ background:linear-gradient(90deg, var(--cyan), var(--blue)); }
  .dashboard-view .gap-legend .lb{ background:linear-gradient(90deg, #FFCC66, var(--amber)); }
  .dashboard-view .hist-foot{ display:flex; gap:9px; margin-top:13px; }
  .dashboard-view .hist-foot .stat{ flex:1; }

  /* ---------- LIVE FIX LOG (centerpiece) ---------- */
  .dashboard-view .fixlog-wrap{
    border-radius:var(--r-card-sm); overflow:hidden;
    border:0.5px solid rgba(14,122,163,0.22);
    background:linear-gradient(180deg, rgba(105,254,255,0.08), rgba(255,255,255,0.5));
  }
  .dashboard-view .fixlog-bar{
    display:flex; align-items:center; gap:9px; padding:8px 13px;
    border-bottom:0.5px solid var(--hair);
    background:rgba(255,255,255,0.6);
  }
  .dashboard-view .fixlog-bar .eyebrow{ font-size:9.5px; color:var(--cyan-ink); }
  .dashboard-view .fixlog-bar .rate{ margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--ink-muted); }
  .dashboard-view .fixlog-bar .rate b{ color:var(--cyan-ink); font-weight:600; }
  .dashboard-view .fixlog-cols{
    display:grid; grid-template-columns:62px 1fr 118px 70px; gap:8px;
    padding:6px 13px; font-family:var(--mono); font-size:9px; letter-spacing:0.04em;
    text-transform:uppercase; color:var(--ink-faint);
    border-bottom:0.5px solid var(--hair-soft);
  }
  .dashboard-view .fixlog{
    height:236px; overflow:hidden; position:relative;
    font-family:var(--mono); font-size:11px; font-variant-numeric:tabular-nums;
    background:rgba(255,255,255,0.4);
  }
  .dashboard-view .fix-row{
    display:grid; grid-template-columns:62px 1fr 118px 70px; gap:8px; align-items:center;
    padding:5px 13px; border-bottom:0.5px solid var(--hair-soft);
    white-space:nowrap;
  }
  .dashboard-view .fix-row .ft{ color:var(--ink-faint); }
  .dashboard-view .fix-row .fv{ color:var(--ink); font-weight:500; overflow:hidden; text-overflow:ellipsis; }
  .dashboard-view .fix-row .fll{ color:var(--cyan-ink); font-size:10px; opacity:0.95; }
  .dashboard-view .fix-row .fsc{ color:var(--ink-muted); font-size:10px; text-align:right; }
  .dashboard-view .fix-row.fresh{ animation:dash-fixflash 1.1s var(--ease); }
  @keyframes dash-fixflash{
    0%{ background:rgba(105,254,255,0.30); }
    100%{ background:transparent; }
  }
  .dashboard-view .fixlog::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:46px; pointer-events:none;
    background:linear-gradient(180deg, rgba(243,246,249,0) 0%, rgba(243,246,249,0.65) 100%);
  }

  /* ---------- OPERATOR BREAKDOWN ---------- */
  .dashboard-view .op-row{
    display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:11px;
    cursor:pointer; transition:background 160ms var(--ease); border:0.5px solid transparent;
  }
  .dashboard-view .op-row:hover{ background:var(--card-fill-hover); }
  .dashboard-view .op-row.on{ background:var(--cyan-tint); border-color:rgba(14,122,163,0.20); }
  /* logo-layout A (tegel): logo in een witte tegel; geen logo = gekleurde tegel */
  .dashboard-view .op-swatch{ width:38px; height:28px; border-radius:8px; flex-shrink:0; border:0.5px solid var(--hair); box-shadow:0 1px 3px rgba(9,28,53,.10); }
  .dashboard-view .op-logo{ width:38px; height:28px; object-fit:contain; flex-shrink:0; border-radius:8px; background:#fff; padding:3px; border:0.5px solid var(--hair); box-shadow:0 1px 3px rgba(9,28,53,.10); }
  .dashboard-view .op-name{ flex:1; font-size:12px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink); }
  .dashboard-view .op-count{ font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink-muted); }
  /* while a rederij filter is active, fade the rows that are not selected */
  .dashboard-view #opList.filtering .op-row:not(.on){ opacity:0.4; }
  /* "Filter: <rederij> x  Toon alle" bar above the operator list */
  .dashboard-view .op-filter-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:4px 0 10px; }
  .dashboard-view .op-filter-bar[hidden]{ display:none; }
  .dashboard-view .opf-label{ font-size:9px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-faint); margin-right:1px; }
  .dashboard-view .opf-chip{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; cursor:pointer;
    font-size:11px; font-weight:600; background:var(--cyan-tint); color:var(--cyan-ink); border:0.5px solid rgba(14,122,163,0.25); }
  .dashboard-view .opf-chip:hover{ filter:brightness(0.97); }
  .dashboard-view .opf-x{ font-style:normal; font-size:14px; line-height:1; opacity:0.75; }
  .dashboard-view .opf-clear{ font-size:11px; font-weight:600; color:var(--blue); background:none; border:none; cursor:pointer; padding:3px 4px; }
  .dashboard-view .opf-clear:hover{ text-decoration:underline; }
  .dashboard-view .op-site{ display:inline-block; margin-top:3px; font-size:10.5px; font-weight:600; line-height:1.2;
    color:var(--blue); text-decoration:none; }
  .dashboard-view .op-site:hover{ text-decoration:underline; }
  .dashboard-view .op-site::after{ content:"\2197"; font-size:9px; margin-left:3px; }   /* ↗ */
  .dashboard-view .op-bar{ height:3px; border-radius:2px; margin-top:6px; background:rgba(9,28,53,0.10); overflow:hidden; }
  .dashboard-view .op-bar > i{ display:block; height:100%; border-radius:2px; transform-origin:left; transform:scaleX(0); transition:transform 800ms var(--ease); }

  /* ---------- VESSEL LIST ---------- */
  .dashboard-view .v-toggle-group{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
  .dashboard-view .v-toggle{
    display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
    font-size:10.5px; color:var(--ink-muted); padding:3px 4px; border-radius:8px;
    transition:color 160ms var(--ease);
  }
  .dashboard-view .v-toggle:hover{ color:var(--ink); }
  .dashboard-view .toggle-track{ width:30px; height:17px; border-radius:999px; background:rgba(9,28,53,0.12);
    border:0.5px solid var(--hair); position:relative; transition:background 200ms var(--ease); flex-shrink:0; }
  .dashboard-view .toggle-track::after{ content:""; position:absolute; top:1.5px; left:1.5px; width:12px; height:12px; border-radius:50%;
    background:rgba(9,28,53,0.45); transition:transform 200ms var(--spring), background 200ms var(--ease); box-shadow:0 1px 2px rgba(9,28,53,0.2); }
  .dashboard-view .v-toggle.on .toggle-track{ background:rgba(105,254,255,0.30); border-color:rgba(14,122,163,0.4); }
  .dashboard-view .v-toggle.on .toggle-track::after{ transform:translateX(13px); background:var(--cyan-ink); }

  .dashboard-view .vessel-row{
    display:grid; grid-template-columns:14px 1fr auto; align-items:center; gap:10px;
    padding:9px 10px; border-radius:11px; cursor:pointer;
    transition:background 160ms var(--ease); border:0.5px solid transparent;
  }
  .dashboard-view .vessel-row:hover{ background:var(--card-fill-hover); }
  .dashboard-view .vessel-row.active{ background:var(--cyan-tint); border-color:rgba(14,122,163,0.22); }
  .dashboard-view .vessel-row[hidden]{ display:none; }
  .dashboard-view .v-dot{ width:9px; height:9px; border-radius:50%; }
  /* bolletje = foto-status: groen = eigen foto in de store, rood = geen foto */
  .dashboard-view .v-dot.hasphoto{ background:var(--green); box-shadow:0 0 7px rgba(15,138,79,0.5); }
  .dashboard-view .v-dot.nophoto{ background:var(--red); box-shadow:0 0 7px rgba(255,80,60,0.4); }
  .dashboard-view .v-main{ min-width:0; }
  .dashboard-view .v-name{ font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink); }
  .dashboard-view .v-meta{ font-size:10.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums; margin-top:1px; }
  .dashboard-view .v-right{ display:flex; align-items:center; gap:7px; }
  .dashboard-view .age{ font-size:10px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
  .dashboard-view .age.stale{ color:var(--amber); }
  .dashboard-view .class-chip{ font-size:9.5px; font-weight:700; letter-spacing:0.04em; padding:2px 7px; border-radius:var(--r-chip);
    background:rgba(9,28,53,0.06); color:var(--ink-muted); border:0.5px solid var(--hair); }
  .dashboard-view .class-chip.A{ background:rgba(105,254,255,0.16); color:var(--cyan-ink); border-color:rgba(14,122,163,0.28); }

  /* ---------- MAP VESSEL CARD (click) - premium frosted glass ---------- */
  /* boot-info als VAST rechter-paneel (niet meer een popup op de kaart) - zo valt het
     nooit over de geprojecteerde route. Vervangt de plek van het oude acc-panel. */
  .dashboard-view .vcard{
    position:fixed; right:16px; top:82px; width:300px; max-width:calc(100vw - 32px);
    max-height:calc(100vh - 98px);   /* op content-hoogte; scrollt pas als het niet past */
    z-index:7; padding:0; border-radius:20px;
    overflow-x:hidden; overflow-y:auto;
    background:rgba(243,246,249,0.82);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    backdrop-filter:blur(24px) saturate(180%);
    border:0.5px solid rgba(9,28,53,0.12);
    box-shadow:0 18px 50px rgba(9,28,53,0.22), inset 0 1px 0 rgba(255,255,255,0.65);
    color:var(--ink);
    opacity:0; transform:translateX(12px); pointer-events:none;
    transition:opacity 200ms var(--ease), transform 240ms var(--spring);
  }
  @supports not (backdrop-filter: blur(1px)){
    .dashboard-view .vcard{ background:rgba(248,250,252,0.97); }
  }
  .dashboard-view .vcard.show{ opacity:1; transform:translateX(0); pointer-events:auto; }
  /* dark mode: donker glas + lichte tekst (her-thematiseert de ink-tokens, net als het deck) */
  body.dark .dashboard-view .vcard{
    --ink:rgba(243,246,249,0.94); --ink-muted:rgba(243,246,249,0.62); --ink-faint:rgba(243,246,249,0.45);
    --hair:rgba(255,255,255,0.12); --cyan-ink:#69FEFF; --off:rgba(255,255,255,0.06);
    background:rgba(6,16,33,0.92);
    border:0.5px solid rgba(105,254,255,0.20);
    box-shadow:0 18px 50px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
  }
  body.dark .dashboard-view .vcard .vc-site{ color:#7fa6ff; }
  body.dark .dashboard-view .vc-close{ color:rgba(255,255,255,0.72); background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.18); }
  body.dark .dashboard-view .vc-close:hover{ color:#fff; background:rgba(255,255,255,0.18); }
  body.dark .dashboard-view .vc-proj-btns button{ color:rgba(243,246,249,0.72); border-color:rgba(255,255,255,0.14); }
  body.dark .dashboard-view .vc-proj-btns button.on{ background:rgba(105,254,255,0.16); color:#eaffff; border-color:rgba(105,254,255,0.5); }
  .dashboard-view .vc-photo{
    width:100%; height:150px;
    background:repeating-linear-gradient(45deg, rgba(9,28,53,0.07) 0 6px, rgba(9,28,53,0.03) 6px 12px);
    border-bottom:0.5px solid var(--hair);
    display:grid; place-items:center; color:var(--ink-faint); font-size:9px;
  }
  .dashboard-view .vc-body{ padding:13px 15px 14px; }
  .dashboard-view .vc-name{ font-size:13.5px; font-weight:600; color:var(--ink); }
  .dashboard-view .vc-op{ font-size:11px; color:var(--ink-muted); margin-top:2px; }
  .dashboard-view .vc-site{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600;
    color:var(--blue); text-decoration:none; margin-top:4px; }
  .dashboard-view .vc-site[hidden]{ display:none; }   /* the explicit display above otherwise defeats [hidden] */
  .dashboard-view .vc-site:hover{ text-decoration:underline; }
  .dashboard-view .vc-site::after{ content:"\2197"; font-size:10px; }   /* ↗ */
  .dashboard-view .vc-mmsi{ font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); margin-top:5px; letter-spacing:0.02em; }
  .dashboard-view .vc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px 12px; margin-top:13px; padding-top:12px; border-top:0.5px solid var(--hair); }
  .dashboard-view .vc-grid .eyebrow{ font-size:8.5px; }
  .dashboard-view .vc-grid .vv{ font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; margin-top:2px; color:var(--ink); }
  .dashboard-view .vc-proj{ margin-top:11px; padding-top:11px; border-top:0.5px solid var(--hair); }
  .dashboard-view .vc-proj .eyebrow{ font-size:8.5px; }
  .dashboard-view .vc-proj #vcProjMeta{ font-weight:600; color:var(--ink); text-transform:none; letter-spacing:0; }
  .dashboard-view .vc-proj-btns{ display:flex; gap:6px; margin-top:7px; }
  .dashboard-view .vc-proj-btns button{ flex:1; font:inherit; font-size:11px; font-weight:600; padding:5px 0; cursor:pointer;
    border-radius:8px; border:0.5px solid rgba(9,28,53,0.14); background:var(--off,#F3F6F9); color:rgba(9,28,53,0.7); }
  .dashboard-view .vc-proj-btns button.on{ background:#E5EBFF; color:#091C35; border-color:#3366FF; }
  .dashboard-view .vc-close{ position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:8px; cursor:pointer; z-index:1;
    display:grid; place-items:center; color:rgba(9,28,53,0.6); background:rgba(255,255,255,0.75); border:0.5px solid rgba(9,28,53,0.12);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
  .dashboard-view .vc-close:hover{ color:var(--ink); background:rgba(255,255,255,0.95); }
  /* callout tail pointing from the card down to the vessel marker (up when flipped below) */
  /* vcard is nu een vast rechter-paneel; de callout-tail (pijl naar de marker) vervalt */
  .dashboard-view .vc-tail{ display:none !important; }
  .dashboard-view .vc-tail-old{ position:absolute; z-index:6; width:0; height:0; pointer-events:none;
    border-left:9px solid transparent; border-right:9px solid transparent;
    border-top:11px solid rgba(243,246,249,0.92);
    filter:drop-shadow(0 3px 2px rgba(9,28,53,0.10));
    opacity:0; transition:opacity 200ms var(--ease); }
  .dashboard-view .vc-tail.show{ opacity:1; }
  .dashboard-view .vc-tail.up{ border-top:0; border-bottom:11px solid rgba(243,246,249,0.92); filter:drop-shadow(0 -2px 2px rgba(9,28,53,0.08)); }

  /* ---------- FLEET PANEL (slides in from the right, frosted glass) ---------- */
  .dashboard-view .fleet-scrim{ position:absolute; inset:0; z-index:7; background:rgba(9,28,53,0.28);
    opacity:0; pointer-events:none; transition:opacity 240ms var(--ease); }
  .dashboard-view .fleet-scrim.open{ opacity:1; pointer-events:auto; }
  .dashboard-view .fleet-panel{
    position:absolute; top:0; right:0; bottom:0; width:min(420px, 92%); z-index:8;
    display:flex; flex-direction:column; color:rgba(243,246,249,0.94);
    background:linear-gradient(180deg, rgba(13,36,64,0.86), rgba(9,28,53,0.82));
    -webkit-backdrop-filter:blur(30px) saturate(170%); backdrop-filter:blur(30px) saturate(170%);
    border-left:0.5px solid rgba(255,255,255,0.12);
    box-shadow:-24px 0 60px rgba(9,28,53,0.40);
    transform:translateX(100%); transition:transform 320ms var(--spring); }
  .dashboard-view .fleet-panel.open{ transform:translateX(0); }
  .dashboard-view .fleet-head{ flex:0 0 auto; display:flex; align-items:flex-start; justify-content:space-between;
    gap:12px; padding:20px 20px 14px; border-bottom:0.5px solid rgba(255,255,255,0.10); }
  .dashboard-view .fleet-head .eyebrow{ color:var(--cyan); }
  .dashboard-view .fleet-title{ font-size:18px; font-weight:700; letter-spacing:-0.01em; margin-top:3px; }
  .dashboard-view .fleet-close{ flex:0 0 auto; width:30px; height:30px; border-radius:9px; cursor:pointer; display:grid; place-items:center;
    color:rgba(243,246,249,0.7); background:rgba(255,255,255,0.07); border:0.5px solid rgba(255,255,255,0.12); }
  .dashboard-view .fleet-close:hover{ color:#fff; background:rgba(255,255,255,0.14); }
  .dashboard-view .fleet-body{ flex:1 1 auto; overflow-y:auto; padding:14px 16px 28px; }
  .dashboard-view .fleet-op{ margin-bottom:18px; }
  .dashboard-view .fleet-op-head{ display:flex; align-items:center; gap:9px; margin-bottom:10px; }
  .dashboard-view .fleet-op-swatch{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
  .dashboard-view .fleet-op-name{ font-size:13.5px; font-weight:600; color:#fff; }
  .dashboard-view .fleet-op-count{ font-size:11px; font-weight:600; color:rgba(243,246,249,0.55); }
  .dashboard-view .fleet-op-site{ margin-left:auto; font-size:10.5px; font-weight:600; color:var(--cyan); text-decoration:none; white-space:nowrap; }
  .dashboard-view .fleet-op-site:hover{ text-decoration:underline; }
  .dashboard-view .fleet-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
  .dashboard-view .fleet-ship{ border-radius:12px; overflow:hidden; background:rgba(255,255,255,0.05); border:0.5px solid rgba(255,255,255,0.08); }
  .dashboard-view .fleet-ship-photo{ width:100%; height:88px; background-size:cover; background-position:center;
    background-color:rgba(255,255,255,0.04);
    background-image:repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 6px, rgba(255,255,255,0.02) 6px 12px); }
  .dashboard-view .fleet-ship-name{ font-size:11px; font-weight:600; color:rgba(243,246,249,0.92);
    padding:7px 9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dashboard-view .fleet-empty{ font-size:12px; color:rgba(243,246,249,0.55); padding:20px 4px; }

  /* ---------- GRACEFUL MAP NOTE ---------- */
  .dashboard-view .mapnote{ position:absolute; inset:0; z-index:4; display:none; place-items:center; padding:30px; }
  .dashboard-view .mapnote.show{ display:grid; }
  .dashboard-view .mapnote .card{ max-width:340px; padding:24px; text-align:center; }
  .dashboard-view .mapnote h3{ font-size:16px; margin-bottom:8px; }
  .dashboard-view .mapnote p{ font-size:12.5px; color:var(--ink-muted); line-height:1.55; }
  .dashboard-view .mapnote code{ font-size:11.5px; color:var(--cyan-ink); background:rgba(105,254,255,0.16); padding:2px 6px; border-radius:6px; }

  /* focus rings */
  .dashboard-view :focus-visible{ outline:2px solid var(--cyan-ink); outline-offset:2px; border-radius:6px; }
  .dashboard-view [tabindex], .dashboard-view button, .dashboard-view .op-row, .dashboard-view .vessel-row, .dashboard-view .run-btn, .dashboard-view .v-toggle{ outline:none; }

  @media (prefers-reduced-motion: reduce){
    .dashboard-view *{ animation:none !important; transition:none !important; }
    .dashboard-view .hist-fill, .dashboard-view .op-bar>i{ transform:scaleX(1) !important; }
  }

  /* ============================================================
     C COMMAND-DOCK REDESIGN (Fase 1) - full-bleed kaart-hero +
     zwevende glass-chrome. Override-blok onderaan zodat de cascade
     wint. Alle element-ID's blijven intact (live-JS/markers/i18n).
     ============================================================ */
  .dashboard-view .split{ inset:0; }                          /* appbar onderdrukt -> kaart full-bleed */
  .dashboard-view .map-col{ position:absolute; inset:0; }      /* de kaart is de held */
  .dashboard-view .map-vignette{ display:none; }               /* geen naad meer; de deck zweeft nu */
  .dashboard-view .map-brand{ display:none !important; }        /* merk staat nu in de topdock */
  /* deck -> zwevende frosted glass-card links (boven de kaart) */
  .dashboard-view .deck{
    position:absolute; left:16px; top:82px; bottom:16px; width:364px;
    flex:none; min-width:0;
    border-radius:22px; border:0.5px solid rgba(255,255,255,0.55);
    box-shadow:0 18px 50px rgba(9,28,53,0.20), inset 0 1px 0 rgba(255,255,255,0.6);
    z-index:5;
  }
  .dashboard-view .deck.dark{
    border:0.5px solid rgba(105,254,255,0.16);
    background:rgba(6,16,33,0.92);
    -webkit-backdrop-filter:blur(26px) saturate(170%); backdrop-filter:blur(26px) saturate(170%);
    box-shadow:0 20px 54px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07);
  }

  /* map-overlays vrijhouden van de zwevende deck (links) + topdock (boven) */
  .dashboard-view .acc-panel{ top:82px; }

  /* (topbar-chrome verhuisd naar appbar.js - Fase 2: de gedeelde navy-glass C-pil
     wordt nu door appbar.js geinjecteerd op elke pagina, ook hier.) */

  /* ============================================================
     MOBIEL (mobiel fase 1) - variant B: kaart als held + Kaart|Data-toggle.
     Op <=760px overlapt het 364px-brede deck anders het hele scherm en valt de
     kaart weg. Nu is de kaart full-bleed de achtergrond en zweeft het deck als
     sheet die je via de sub-toggle in/uit schakelt. Navy-glass toggle sluit aan
     op de topbar + de mobiele bottom-nav (beide in appbar.js).
     ============================================================ */
  /* Gedeelde mobiele navy-glass chrome (bottom-nav-taal): hergebruikt door de
     dashboard Kaart|Data-toggle EN de route-explorer drill-down back-bar - één bron
     voor het frosted-navy oppervlak (No Copy). De elementen leveren zelf hun
     lay-out (positie/padding/radius). Specificity-veilig: de scoped basisregels
     declareren het oppervlak niet meer, dus deze utility-class (0,1,0) wint zonder
     botsing. */
  .mob-glass{
    background:rgba(6,16,33,0.72);
    -webkit-backdrop-filter:blur(30px) saturate(170%); backdrop-filter:blur(30px) saturate(170%);
    border:0.5px solid rgba(255,255,255,0.16);
    box-shadow:0 10px 30px rgba(9,28,53,0.28), inset 0 1px 0 rgba(255,255,255,0.12);
  }
  .dashboard-view .mob-toggle{
    display:none;
    position:fixed; top:82px; left:50%; transform:translateX(-50%); z-index:8;
    padding:3px; gap:2px; border-radius:999px;
  }
  .dashboard-view .mob-toggle button{
    font:600 12.5px/1 "Libre Franklin",system-ui,sans-serif; letter-spacing:-0.01em;
    padding:8px 20px; border:0; border-radius:999px; cursor:pointer;
    background:transparent; color:rgba(255,255,255,0.62);
    transition:background 200ms var(--ease), color 200ms var(--ease);
  }
  .dashboard-view .mob-toggle button.on{
    background:linear-gradient(180deg,rgba(105,254,255,0.20),rgba(105,254,255,0.10)),rgba(105,254,255,0.10);
    color:#fff; box-shadow:inset 0 0 12px rgba(105,254,255,0.30), inset 0 0 0 1px rgba(255,255,255,0.06);
  }
  @media(max-width:760px){
    .dashboard-view .mob-toggle{ display:flex; }
    /* kaart is de held (full-bleed achtergrond); deck zweeft als sheet, standaard uit */
    .dashboard-view .deck{
      left:8px; right:8px; width:auto; top:120px;
      bottom:calc(86px + env(safe-area-inset-bottom, 0px));
      display:none;
    }
    .dashboard-view.mob-data .deck{ display:flex; }
    /* voorspelling-legende + acc-panel: op mobiel weg (te veel chrome over de kaart) */
    .dashboard-view .proj-legend, .dashboard-view .acc-panel{ display:none !important; }
    /* boot-kaart (vcard): op mobiel een COMPACTE bottom-sheet i.p.v. een bijna-
       schermvullend rechter-paneel - kleine foto, krappe spacing, gecapt op 58dvh en
       onderaan uitgelijnd boven de bottom-nav, zodat de kaart erboven zichtbaar blijft. */
    .dashboard-view .vcard{
      left:8px; right:8px; top:auto; width:auto; max-width:none;
      bottom:calc(96px + env(safe-area-inset-bottom, 0px));
      max-height:min(56dvh, calc(100dvh - 116px)); border-radius:18px;
      transform:translateY(12px);
    }
    .dashboard-view .vcard.show{ transform:translateY(0); }
    .dashboard-view .vc-photo{ height:96px; }
    .dashboard-view .vc-body{ padding:11px 13px 12px; }
    .dashboard-view .vc-grid{ gap:7px 12px; margin-top:10px; padding-top:9px; }
    .dashboard-view .vc-proj{ margin-top:9px; padding-top:9px; }
  }

/* ─── /#/heatmap - drukte-heatmap (scoped; zie views/heatmap.mjs) ─────────────
 * Kaart full-bleed met een canvas-dot-overlay (AIS-meetpunten), links een
 * zwevende glass-besturingsdeck (slider + filters + legenda), onderin een
 * hover-chip met de dichtheid van de cel onder de muis. */
/* wrapper is fixed; gmaps zet zelf inline position:relative op de map-div, dus
   die krijgt alleen 100%-maten (zelfde les als de foto-route-split) */
.heatmap-view .hm-wrap{position:fixed;inset:0}
.heatmap-view .hm-map{width:100%;height:100%}
.heatmap-view .hm-deck{position:fixed;top:86px;left:14px;width:288px;z-index:5;padding:14px 16px 12px;max-height:calc(100vh - 104px);overflow:auto}
.heatmap-view .hm-title{margin:2px 0 10px;font-size:20px;font-weight:800;letter-spacing:-0.01em}
.heatmap-view .hm-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.heatmap-view .hm-gap{margin-top:14px}
.heatmap-view .hm-lbl{font-size:11px;font-weight:600;color:var(--ink-faint)}
.heatmap-view .hm-val{font-size:12px;font-weight:700}
.heatmap-view .hm-slider{width:100%;margin:8px 0 4px;accent-color:#3366FF}
.heatmap-view .hm-count{font-size:11.5px;color:var(--ink-muted);margin:0 0 8px}
.heatmap-view .hm-count .num{font-weight:700;color:var(--ink)}
.heatmap-view .hm-allday{font:600 11px/1 inherit;font-family:inherit;padding:5px 10px;border-radius:8px;border:0.5px solid var(--hair);background:transparent;color:var(--ink-muted);cursor:pointer}
.heatmap-view .hm-allday.on{background:#E5EBFF;color:#091C35;border-color:transparent;cursor:default}
body.dark .heatmap-view .hm-allday.on{background:rgba(51,102,255,0.38);color:#fff}
.heatmap-view .hm-seg{display:flex;border:0.5px solid var(--hair);border-radius:8px;overflow:hidden}
.heatmap-view .hm-seg button{font:600 11px/1 inherit;font-family:inherit;padding:5px 9px;border:0;background:transparent;color:var(--ink-muted);cursor:pointer}
.heatmap-view .hm-seg button + button{border-left:0.5px solid var(--hair)}
.heatmap-view .hm-seg button.on{background:#E5EBFF;color:#091C35;font-weight:700}
body.dark .heatmap-view .hm-seg button.on{background:rgba(51,102,255,0.38);color:#fff}
.heatmap-view .hm-legend{margin-top:14px}
.heatmap-view .hm-grad{height:8px;border-radius:4px;background:linear-gradient(90deg,#1ABC6C,#FFC700,#FF3B30)}
.heatmap-view .hm-grad-x{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-faint);margin-top:3px}
.heatmap-view .hm-meta{margin-top:12px;padding-top:9px;border-top:0.5px solid var(--hair);font-size:10.5px;color:var(--ink-faint)}
.heatmap-view .hm-hover{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:6;padding:8px 14px;font-size:12.5px;border-radius:12px;white-space:nowrap;pointer-events:none}
.heatmap-view .hm-err{color:#8A1C0F;font-size:12px}
body.dark .heatmap-view .hm-err{color:#FF9C8F}
.heatmap-view .nokey{position:fixed;top:96px;left:50%;transform:translateX(-50%);z-index:6;padding:10px 16px;border-radius:10px;background:#FFF4D6;color:#5C3A00;font-size:13px}
/* mobiel: het besturingsdeck vult de breedte en cap't onder de bottom-nav. */
@media(max-width:760px){
  .heatmap-view .hm-deck{left:8px;right:8px;width:auto;top:82px;
    max-height:calc(100vh - 82px - 96px);max-height:calc(100dvh - 82px - 96px)}
  .heatmap-view .hm-hover{bottom:calc(90px + env(safe-area-inset-bottom,0px))}
}

/* ══ Mobiel: document-flow-views ruimte vrijhouden onder de zwevende bottom-nav
 * (appbar.js, <=760px). De kaart/deck-views (dashboard/route-explorer/heatmap/
 * foto-route) regelen dit zelf met fixed panels + safe-area-bottom. ══ */
@media(max-width:760px){
  .rederijen-view, .hoe-werkt-het-view, .accuratesse-view, .todo-view,
  .db-view, .research-view, .rapport-view, .rederij-research-view{
    padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* rederijen-zoek blijft bereikbaar terwijl je door de lange lijst scrollt */
  .rederijen-view .red-searchbar{position:sticky;top:78px;z-index:7;margin:0 0 14px;
    padding:8px;border-radius:16px;
    background:rgba(243,246,249,0.82);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%)}
  body.dark .rederijen-view .red-searchbar{background:rgba(9,20,38,0.82)}
}