/* Layout: relay-panel feel. Header strip, then track plan (the "tableau") beside loc throttles, CAN monitor full width underneath. */
/* Lettertypes meegeleverd in public/fonts/ (latin + latin-ext, SIL Open Font License, zie fonts/OFL.txt): niets van
   Google Fonts, zodat geen pagina het IP-adres van de gebruiker naar een ander stuurt (AVG, privacylabels van de app). */
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-semi-condensed-400.woff2) format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-semi-condensed-500.woff2) format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-semi-condensed-600.woff2) format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-semi-condensed-700.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-400.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-500.woff2) format("woff2")}
@font-face{font-family:"Zilla Slab";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/zilla-slab-700.woff2) format("woff2")} /* alleen de letters van het woordmerk */
[hidden]{display:none !important} /* hidden wint altijd van display-regels hieronder */
/* Baanplanner op stellhaus.com (<html data-nav="planner">, website/src/planner.mjs): zonder server */
html:not([data-nav=planner]) .web-only,html[data-nav=planner] .server-only{display:none !important}
:root{
  --bg:#E1E7E2; --surface:#F4F7F4; --sunk:#D3DBD5; --ink:#17211C; --muted:#56675E; --line:#BFCBC3;
  --track:#34433C; --gap:#E1E7E2; --route:#D9971A; --accent:#1E5CA3;
  --sig-red:#CF3329; --sig-green:#1E9E5A; --sig-yellow:#D9A400; --warn:#B86E00; --crit:#C02A22; --good:#1C7F4B; --info:#1E5CA3; --on-warn:#1A1206; --on-crit:#fff;
  --on-accent:#fff; --stop-bg:#C02A22; --go-bg:#1C7F4B; /* tekst op accentkleur; Stop/Go-knop met witte tekst (contrast ≥ 4,5:1); --on-warn/--on-crit = tekst op --warn/--crit, per stijl ≥ 4,5:1 (test/kleurcontrast.test.js) */
  --t-icm:#E9B800; --t-1700:#2F6DB5; --t-218:#C23B2E;
  --f-ui:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#101614; --surface:#18211D; --sunk:#0B100E; --ink:#E3EBE6; --muted:#90A39A; --line:#2B3833;
  --track:#B7C6BE; --gap:#101614; --route:#F2B13A; --accent:#78ABEB;
  --sig-red:#FF5A4C; --sig-green:#3FCB82; --sig-yellow:#F2C230; --warn:#F0A43A; --crit:#FF6A5E; --good:#4CC98A; --info:#78ABEB; --on-warn:#1A1206; --on-crit:#1F0806;
  --on-accent:#0B1A2B; --stop-bg:#C62D24; --go-bg:#1C7F4B; /* donker: lichte accentkleur krijgt donkere tekst; Stop blijft diep rood met witte tekst */
  --t-icm:#F5C824; --t-1700:#5D93D8; --t-218:#E3584A; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#101614; --surface:#18211D; --sunk:#0B100E; --ink:#E3EBE6; --muted:#90A39A; --line:#2B3833;
  --track:#B7C6BE; --gap:#101614; --route:#F2B13A; --accent:#78ABEB;
  --sig-red:#FF5A4C; --sig-green:#3FCB82; --sig-yellow:#F2C230; --warn:#F0A43A; --crit:#FF6A5E; --good:#4CC98A; --info:#78ABEB; --on-warn:#1A1206; --on-crit:#1F0806;
  --on-accent:#0B1A2B; --stop-bg:#C62D24; --go-bg:#1C7F4B; /* donker: lichte accentkleur krijgt donkere tekst; Stop blijft diep rood met witte tekst */
  --t-icm:#F5C824; --t-1700:#5D93D8; --t-218:#E3584A; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:15px;line-height:1.4;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:16px 32px}
/* breed scherm: het baanplan groeit mee (vroeger hield de pagina op bij 1280 px en kromp het baanplan zodra er een zijvenster bij kwam) */
.wrap{max-width:2560px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

header.top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;justify-content:space-between}
.brand h1{margin:0;font-size:28px;font-weight:700;letter-spacing:.01em;line-height:1}
.brand p{margin:4px 0 0;color:var(--muted);font-size:14px}
.brand a{color:var(--accent)}
.conn{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:14px;font-variant-numeric:tabular-nums}
.dot{width:9px;height:9px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 25%,transparent)}
.pill.off .dot{background:var(--crit);box-shadow:0 0 0 3px color-mix(in srgb,var(--crit) 25%,transparent)}
.stopgo{border:0;border-radius:8px;padding:10px 18px;font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;color:#fff;background:var(--stop-bg);min-width:120px}
.stopgo.go{background:var(--go-bg)}
/* Op tablet en telefoon blijft Stop altijd in beeld */
@media (max-width:900px){
  .stopgo{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:40;
    min-width:132px;padding:14px 22px;font-size:18px;box-shadow:0 6px 18px rgb(0 0 0 / .28)}
  body{padding-bottom:96px}
}

/* Modusbalk: echte baan of simulatie, en of er iets verstuurd wordt */
.modebar{margin:-16px calc(-1 * max(16px,env(safe-area-inset-left,0px))) 12px;padding:6px 16px;text-align:center;
  font-weight:700;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase}
.modebar.m-sim{background:color-mix(in srgb,var(--info) 16%,var(--surface));color:var(--info)}
.modebar.m-ro{background:color-mix(in srgb,var(--warn) 22%,var(--surface));color:var(--warn)}
.modebar.m-live{background:var(--crit);color:var(--on-crit)}
.modebar.m-off{background:var(--sunk);color:var(--muted)}
body[data-mode=m-live] .wrap{box-shadow:inset 0 3px 0 var(--crit)}

.grid{display:grid;grid-template-columns:var(--locw,340px) minmax(0,1fr);grid-template-areas:"locs plan" "locs mel" "mon mon";gap:16px;align-items:start}
@media (max-width:900px){.grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"plan" "locs" "mel" "mon"}}
.locs{grid-area:locs;display:flex;flex-direction:column;gap:12px;min-width:0}
.loc-track{display:flex;flex-direction:column;gap:12px}
.loc-dots{display:none}
.plan{grid-area:plan;min-width:0}
.mon{grid-area:mon;min-width:0}

.label{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px}

/* Throttle card */
.loc{padding:14px;display:flex;flex-direction:column;gap:10px}
.loc-head{display:flex;gap:10px;align-items:center}
.sw{width:14px;height:34px;border-radius:3px;flex:none}
.loc-name{font-weight:600;font-size:17px;line-height:1.15}
.loc-meta{font-family:var(--f-mono);font-size:11.5px;color:var(--muted)}
.speed{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-variant-numeric:tabular-nums;margin-left:auto;text-align:right}
.speed > div{display:flex;align-items:baseline;gap:6px}
.btn.unit{padding:4px 9px;font-size:13px}
.speed .real{font-size:12.5px;color:var(--muted);white-space:nowrap;min-height:1em}
.speed b{font-size:26px;font-weight:600;line-height:1}
.speed span{font-size:12px;color:var(--muted)}
input[type=range]{width:100%;accent-color:var(--accent)}
input[type=range]:disabled{opacity:.55}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.seg button{border:0;background:transparent;padding:6px 10px;cursor:pointer;font-size:14px}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--surface)}
.fn{border:1px solid var(--line);background:transparent;border-radius:6px;padding:5px 8px;font-size:13px;cursor:pointer;font-variant-numeric:tabular-nums}
.fn[aria-pressed=true]{border-color:var(--route);background:color-mix(in srgb,var(--route) 22%,transparent)}
.fn{display:inline-flex;align-items:center;gap:5px}
.fn-ic{width:16px;height:16px;flex:none}
.fn.fn-moment{border-style:dashed;touch-action:none;-webkit-user-select:none;user-select:none}

/* Telefoon: regelaarmodus, één loc per scherm, vegen tussen locs, verticale snelheidsregelaar */
@media (max-width:600px){
  .grid{grid-template-areas:"locs" "plan" "mel" "mon"}
  .loc-track{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;scrollbar-width:none;
    margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}
  .loc-track::-webkit-scrollbar{display:none}
  .loc{flex:0 0 100%;scroll-snap-align:center}
  .loc .row .auto{margin-left:0}
  .seg button{padding:10px 14px;font-size:16px}
  .fn{padding:9px 11px;font-size:14px}
  .loc-dots{display:flex;justify-content:center;gap:10px}
  .ldot{width:28px;height:28px;border-radius:50%;border:2px solid transparent;background:transparent;padding:0;cursor:pointer;display:grid;place-items:center}
  .ldot::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--c);opacity:.45}
  .ldot[aria-current=true]{border-color:var(--c)}
  .ldot[aria-current=true]::after{opacity:1}
}
.auto{display:inline-flex;gap:8px;align-items:center;cursor:pointer;font-size:14px;margin-left:auto}
.auto input{width:34px;height:18px;appearance:none;border-radius:999px;background:var(--sunk);border:1px solid var(--line);position:relative;cursor:pointer;margin:0}
.auto input::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--muted);transition:transform .15s}
.auto input:checked{background:var(--accent);border-color:var(--accent)}
.auto input:checked::after{transform:translateX(16px);background:#fff}
.place{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--muted)}
/* ⋯ in de regelaar: minder gebruikte knoppen, met tekst erbij */
.locmorebtn{margin-left:auto;min-width:38px;font-weight:700}
.locmenu{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px dashed var(--line);border-radius:8px;background:var(--bg)}
.locmenu .row{gap:6px}
.lm-place:empty,.lm-extra:empty,.body-place:empty{display:none}
.locmenu a.btn{text-decoration:none;display:inline-flex;align-items:center}
/* Mijn treinen en de volgorde (slepen aan het kleurblokje) */
.loc.notmine,.ldot.notmine{display:none}
.loc .sw[draggable=true]{cursor:grab}
.loc.dragging{opacity:.5}
.loc.dropat{outline:2px dashed var(--accent);outline-offset:2px}
.place label{display:flex;gap:8px;align-items:center;flex:1;min-width:0}
.ahead{font-size:13px;color:var(--muted)}
.ahead:empty{display:none}
.place select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:4px 8px;flex:1;min-width:0}
.status{display:inline-flex;align-items:center;gap:7px;font-size:14px}
.status i{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.s-good i{background:var(--good)} .s-warn i{background:var(--warn)} .s-crit i{background:var(--crit)} .s-info i{background:var(--info)}
.s-warn{color:var(--warn)} .s-crit{color:var(--crit)}

/* Plan */
.plan .panel{padding:12px;position:relative}
.hit{fill:none;stroke:transparent;stroke-width:24;stroke-linecap:round;cursor:pointer;pointer-events:stroke}
.hit:focus-visible{outline:none;stroke:color-mix(in srgb,var(--accent) 35%,transparent)}
.res{fill:none;stroke-width:7;stroke-linecap:butt;stroke-dasharray:10 8;opacity:0;transition:opacity .2s}
.lg-dash{background:repeating-linear-gradient(90deg,var(--t-icm) 0 6px,transparent 6px 10px)}

/* Blokmenu */
.blockmenu{position:absolute;z-index:20;width:min(280px,calc(100% - 16px));background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:12px;box-shadow:0 10px 28px rgb(0 0 0 / .22);display:flex;flex-direction:column;gap:10px}
.blockmenu h3{margin:0;font-size:16px;font-weight:600}
.blockmenu dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0;font-size:14px}
.blockmenu dt{color:var(--muted)} .blockmenu dd{margin:0;font-weight:500}
.bm-acts{display:flex;flex-wrap:wrap;gap:6px}
.faults{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.faults summary{cursor:pointer;font-weight:600}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-top:6px}
.fgrid label{display:flex;flex-direction:column;gap:3px;font-size:13.5px}
.fgrid select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:3px 6px}
.crossings{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;font-size:13px}
.crossings span{padding:2px 8px;border-radius:999px;border:1px solid var(--line);background:var(--bg)}
.crossings span.closed{border-color:var(--sig-red);color:var(--sig-red);font-weight:600}
/* wegverkeer (public/wegen-view.js) */
#plan .road-base{fill:none;stroke:var(--line);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
#plan .road{fill:none;stroke:var(--bg);stroke-width:1.2;stroke-dasharray:4 4;stroke-linecap:round}
#plan .road.busy{stroke:var(--warn);stroke-width:2.2;stroke-dasharray:none}
#plan .road.route{stroke:var(--info);stroke-width:2.2;stroke-dasharray:none}
#plan .road-stop{fill:var(--sig-green);stroke:var(--bg);stroke-width:1}
#plan .road-stop.dicht{fill:var(--sig-red)}
#plan .road-af{cursor:pointer}
#plan .road-af rect{fill:var(--muted);stroke:var(--bg);stroke-width:.8}
#plan .road-af.af rect{fill:var(--info)}
#plan .road-af:focus-visible rect{stroke:var(--accent);stroke-width:2}
#plan .car rect{stroke:#0008;stroke-width:.5}
.wegen{margin-top:8px;display:grid;gap:6px;font-size:13px}
.wegen .wg-sec{display:grid;gap:4px}
.wegen .wg-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.wegen .wg-name{min-width:9em;font-weight:600}
.wegen .wg-state{color:var(--muted)}
.wegen .wg-state.dicht{color:var(--sig-red)}
.wegen .wg-warn{padding:4px 8px;border:1px solid var(--crit);color:var(--crit);border-radius:6px;font-weight:600}
.routepick{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:6px;padding:6px 10px;border-radius:8px;
  border:1px solid color-mix(in srgb,var(--route) 60%,var(--line));background:color-mix(in srgb,var(--route) 14%,var(--surface));font-size:14px;font-weight:500}
.bm-label{width:100%;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}
.bm-train{border-left:4px solid var(--c)}
.bm-clear{width:100%;margin-top:4px;border-color:color-mix(in srgb,var(--warn) 60%,var(--line));color:var(--warn)}
.bm-clear.armed{background:var(--warn);border-color:var(--warn);color:var(--on-warn)}
.bm-note{margin:0;font-size:13.5px;color:var(--muted)}
.bm-close{align-self:flex-end}
.btn{min-height:32px}
.plan-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.plan-head h2,.mon h2{margin:0;font-size:18px;font-weight:600}
svg#plan{display:block;width:100%;height:auto;background:var(--bg);border-radius:8px}
/* een hoge baan nooit hoger dan het venster (de tekening blijft in het midden, zoomen rekent daarmee) */
@media (min-width:901px){svg#plan{max-height:calc(100vh - 120px)}}
.trk{fill:none;stroke:var(--track);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.occ{fill:none;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .2s}
.leg{fill:none;stroke-width:7;stroke-linecap:butt}
.leg.on{stroke:var(--route)} .leg.off{stroke:var(--gap);stroke-width:9} .leg.off-soft{stroke:transparent}
/* bloknamen even groot op het scherm (--k = baaneenheden per pixel, gezet bij zoomen), met een rand in de achtergrondkleur */
.blabel{font-family:var(--f-ui);font-size:calc(13px * var(--k,1));fill:var(--muted);font-weight:500;paint-order:stroke;stroke:var(--bg);stroke-width:calc(3px * var(--k,1));stroke-linejoin:round}
.bl-m{display:none}
svg.detail .bl-m{display:inline}
/* sporen van een groep: alleen het nummer, de groepsnaam één keer erbij; ingezoomd de hele naam */
.bl-pre{display:none}
svg.detail .bl-pre{display:inline}
.blabel.bl-short{font-weight:700}
.blabel.glabel{fill:var(--ink);font-weight:600;letter-spacing:.02em}
.tbtn{cursor:pointer}
.tbtn circle{fill:var(--surface);stroke:var(--route);stroke-width:2.5}
.tbtn:hover circle,.tbtn:focus-visible circle{fill:color-mix(in srgb,var(--route) 25%,var(--surface))}
.tbtn text{font-family:var(--f-ui);font-size:12px;font-weight:700;fill:var(--ink)}
.tstate{font-family:var(--f-ui);font-size:12px;fill:var(--muted)}
.sig-post{stroke:var(--track);stroke-width:1.5}
.trainlabel{font-family:var(--f-ui);font-size:12.5px;font-weight:700;fill:var(--ink)}
/* ingezoomd: snelheid en sein onder de trein (app.js trainInfo) */
.traininfo{display:none;font-family:var(--f-ui);font-size:11.5px;font-weight:600;fill:var(--muted);paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round}
svg.detail .traininfo{display:inline}
.traininfo.a-red{fill:var(--sig-red)} .traininfo.a-green{fill:var(--sig-green)} .traininfo.a-yellow{fill:var(--warn)}
.estop rect{fill:var(--crit);opacity:.92}
.estop text{fill:#fff;font-family:var(--f-ui);font-weight:700;font-size:20px;letter-spacing:.12em}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:13px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.lg-line{width:22px;height:5px;border-radius:2px}
.lg-dot{width:10px;height:10px;border-radius:50%}
.note{margin:10px 0 0;font-size:14px;color:var(--muted);max-width:70ch}

/* Monitor */
.mel{grid-area:mel;min-width:0}
.mel .panel{padding:12px}
.mel .plan-head .btn{margin-left:auto}
.mel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.mel-sub{margin:14px 0 6px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}
.mtile{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1px 9px;align-items:center;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.mtile .lamp{grid-row:span 2;width:14px;height:14px;border-radius:50%;background:var(--sunk);border:1px solid var(--line)}
.mtile.on{border-color:var(--route)}
.mtile.on .lamp{background:var(--route);border-color:var(--route);box-shadow:0 0 0 3px color-mix(in srgb,var(--route) 30%,transparent)}
.mtile.unknown .lamp{background:transparent;border:1.5px dashed var(--muted)}
.mt-main{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.mt-main b{font-family:var(--f-mono);font-size:12.5px;margin-right:6px}
.mt-meta{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.mtile.flash{animation:melflash .9s ease-out}
@keyframes melflash{from{background:color-mix(in srgb,var(--route) 40%,var(--bg))}to{background:var(--bg)}}
@media (prefers-reduced-motion:reduce){.mtile.flash{animation:none}}
.mon .panel{padding:12px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:-4px 0 12px}
.tabs [role=tab]{border:0;background:transparent;padding:8px 12px;font-size:15px;font-weight:600;color:var(--muted);cursor:pointer;
  border-bottom:3px solid transparent;margin-bottom:-1px;display:inline-flex;gap:6px;align-items:center}
.tabs [role=tab][aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}
.tab-sub{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.badge{background:var(--warn);color:var(--on-warn);border-radius:999px;font-size:12px;padding:0 7px;line-height:18px}
.notes{list-style:none;margin:0;padding:0;max-height:340px;overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.notes:empty{display:none}
.notes li{display:grid;grid-template-columns:auto auto 1fr auto;gap:10px;align-items:baseline;padding:6px 10px;border-top:1px solid var(--line);font-size:14px}
.notes li:first-child{border-top:0}
.notes time{font-family:var(--f-mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.notes i{width:8px;height:8px;border-radius:50%;background:var(--muted);align-self:center}
.notes .note-warn i{background:var(--warn)} .notes .note-crit i{background:var(--crit)}
.notes .note-crit span{color:var(--crit);font-weight:600}

/* Pop-ups voor waarschuwingen */
.toasts{position:fixed;top:12px;right:max(12px,env(safe-area-inset-right,0px));z-index:50;display:flex;flex-direction:column;gap:8px;
  width:min(380px,calc(100vw - 24px));pointer-events:none}
.toast{pointer-events:auto;display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:9px;background:var(--surface);
  border:1px solid var(--line);border-left:5px solid var(--warn);box-shadow:0 8px 22px rgb(0 0 0 / .2);font-size:14.5px}
.toast-crit{border-left-color:var(--crit)}
.toast span{flex:1}
.toast-x{border:0;background:transparent;font-size:20px;line-height:1;cursor:pointer;color:var(--muted);padding:0 2px;min-width:28px;min-height:28px}
.mon-head{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;margin-bottom:8px}
.mon-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:14px}
.mon-tools label{display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.mon-tools input{accent-color:var(--accent)}
.btn{border:1px solid var(--line);background:transparent;border-radius:6px;padding:4px 10px;cursor:pointer;font-size:14px}
.tablewrap{overflow:auto;max-height:340px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
table{border-collapse:collapse;width:100%;min-width:760px;font-size:13px}
th{position:sticky;top:0;background:var(--sunk);text-align:left;font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:6px 10px}
td{padding:4px 10px;border-top:1px solid var(--line);vertical-align:top;white-space:nowrap}
td.t{font-family:var(--f-mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
td.d{font-weight:600}
td.d.pc{color:var(--accent)} td.d.cs{color:var(--good)}
td.hex{font-family:var(--f-mono);font-size:12.5px}
.h-id{color:var(--ink)} .h-dlc{color:var(--route);font-weight:500} .h-data{color:var(--muted)}
td.m{white-space:normal}
tr.ack td.m{color:var(--muted)}
.fmt{margin:10px 0 0;font-size:13.5px;color:var(--muted);max-width:90ch}
.fmt code{font-family:var(--f-mono);font-size:12.5px;color:var(--ink)}

/* ---- Toegevoegd voor de server-versie ---- */
.pill.warn .dot{background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 25%,transparent)}
.readonly{display:inline-flex;gap:8px;align-items:center;font-size:14px;cursor:pointer}
.readonly input{accent-color:var(--warn)}
.banner{border:1px solid color-mix(in srgb,var(--warn) 55%,var(--line));background:color-mix(in srgb,var(--warn) 12%,var(--surface));color:var(--ink);border-radius:10px;padding:10px 14px;font-size:14.5px;max-width:110ch}
.banner b{color:var(--warn)}
.banner-x{display:block;margin-top:8px}
tr.blocked td{opacity:.6} tr.blocked td.m{font-style:italic}
td.d.rx{color:var(--route)}

/* Baanplan niet bruikbaar: bediening start niet */
.layout-error{max-width:70ch;margin:40px auto;background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--crit);border-radius:10px;padding:16px 20px}
.layout-error h1{font-size:22px;margin:0 0 8px}
.layout-error li{margin:4px 0}
.layout-error a{color:var(--accent)}

/* Kinderstand: beheer verborgen (de server weigert het toch), grote regelaars */
.kids .admin-only{display:none!important}
.kids-banner{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;font-weight:600}
@media (min-width:601px){.kids .loc input[type=range]{height:44px}}
.kids .fn{min-height:44px}
.kids-banner[hidden]{display:none}
.mtile.sick{outline:2px solid var(--warn);outline-offset:-2px}
.claim{display:flex;gap:8px;align-items:center;justify-content:space-between;font-size:13.5px;margin:6px 0;padding:5px 8px;border-radius:7px;background:var(--sunk)}
.claim.other{background:color-mix(in srgb,var(--warn) 16%,var(--surface));font-weight:600}
.claim .btn{padding:3px 9px;font-size:13px}
.mepill{cursor:pointer;font:inherit}
.claim[hidden]{display:none}
.hwdlg{max-width:520px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);padding:16px}
.hwdlg::backdrop{background:rgb(0 0 0 / .35)}
.hwdlg h2{margin:0 0 6px;font-size:18px}
.hwdlg .acts{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.hwdlg .chk{display:flex;gap:8px;align-items:flex-start;font-size:14px;margin-top:8px}
.loc.pad{outline:3px solid var(--accent);outline-offset:2px}

/* Eigen vragen en meldingen (dialog.js) */
.sh-dialog{border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);padding:18px 20px;max-width:min(460px,calc(100vw - 32px));box-shadow:0 12px 40px rgba(0,0,0,.25)}
.sh-dialog::backdrop{background:rgba(10,16,14,.45)}
.sh-dialog p{margin:0 0 14px;white-space:pre-line}
.sh-dialog input{width:100%;margin:0 0 14px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--bg)}
.sh-dialog-acts{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.sh-dialog-acts .btn{min-height:36px;padding:6px 14px}
.sh-dialog-acts .opdracht{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 0;padding:10px 14px;border-radius:10px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));border:2px solid var(--accent);font-size:18px;font-weight:600}
.opdracht .op-ster{font-size:20px;letter-spacing:2px}
.opdracht.klaar{border-color:#d9a400}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.sh-dialog-acts .btn.primary.danger{background:var(--crit);border-color:var(--crit)}

/* ---- Navigatie (nav.js), op elke pagina: zijbalk links ---- */
:root{--sbw:212px}
html.zijin{--sbw:60px}
.brandline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.navbtn{display:none}
.brand{position:relative}
.sidebar{position:fixed;top:0;bottom:0;left:0;width:var(--sbw);z-index:70;display:flex;flex-direction:column;gap:6px;
  background:var(--surface);border-right:1px solid var(--line);padding:10px 8px calc(10px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));overflow:hidden auto;overscroll-behavior:contain}
.sbtop{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:2px 4px 6px}
.sbbrand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:19px;color:var(--ink);text-decoration:none;white-space:nowrap;overflow:hidden}
/* het teken van Stellhaus (ingestelde rijweg, public/icons/stellhaus.svg) voor de naam */
.sbbrand::before,.brandmark::before{content:"";flex:none;width:1.25em;height:1.25em;background:url(/icons/stellhaus.svg) center/contain no-repeat}
.brandmark{display:flex;align-items:center;gap:.35em}
.brandmark::before{width:1em;height:1em;display:none}
.sbfold{border:0;background:transparent;color:var(--muted);font:inherit;font-size:18px;cursor:pointer;width:32px;height:32px;border-radius:8px;flex:none}
.sbfold:hover{background:var(--sunk);color:var(--ink)}
.sitenav{display:flex;flex-direction:column;gap:10px;flex:1}
.navgroup{display:flex;flex-direction:column;gap:1px}
.navhead{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:2px 8px 3px;white-space:nowrap}
.navitem{position:relative;display:flex;align-items:center}
.sitenav a{flex:1;display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;color:var(--ink);text-decoration:none;font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;min-width:0}
.sitenav a::before{content:attr(data-ic);width:22px;text-align:center;flex:none;font-size:15px}
.sitenav a:hover{background:var(--sunk)}
.sitenav a[aria-current=page]{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
.sitenav a.navhelp,.sitenav a.navtour{color:var(--muted)}
.navbadge{position:absolute;right:30px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:700;line-height:17px;padding:0 6px;border-radius:999px;background:var(--sunk);color:var(--muted);pointer-events:none}
.navbadge.info{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.navbadge.warn{background:var(--warn);color:var(--on-warn)}
.navbadge.crit{background:var(--crit);color:var(--on-crit)}
.navpin{position:absolute;right:2px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--muted);cursor:pointer;width:26px;height:26px;border-radius:6px;font-size:14px;opacity:0}
.navitem:hover .navpin,.navpin:focus-visible,.navpin[aria-pressed=true]{opacity:1}
.navpin[aria-pressed=true]{color:var(--route)}
@media (hover:none){.navpin{opacity:1}} /* geen muis: altijd zichtbaar, in de gedempte kleur (doorzichtig was 2,5:1) */
.sbtools{display:flex;flex-direction:column;gap:1px;border-top:1px solid var(--line);padding-top:6px}
.navtheme{border:0;background:transparent;color:var(--muted);font:inherit;font-size:13.5px;cursor:pointer;padding:5px 8px;border-radius:8px;text-align:left;white-space:nowrap;overflow:hidden}
.navtheme:hover{color:var(--ink);background:var(--sunk)}
.navtheme[aria-pressed=true]{color:var(--accent)}
.sbshade{display:none}
/* eenvoudige zijbalk: de andere pagina's ingeklapt onder "Meer pagina's" */
.navmore{display:flex;flex-direction:column;gap:10px}
.navmore>summary{cursor:pointer;list-style:none;color:var(--muted);font-weight:600;font-size:14px;padding:6px 8px;border-radius:8px;white-space:nowrap;display:flex;align-items:center;gap:9px}
.navmore>summary::-webkit-details-marker{display:none}
.navmore>summary::before{content:'▸';width:22px;text-align:center;flex:none}
.navmore[open]>summary::before{content:'▾'}
.navmore>summary:hover{background:var(--sunk);color:var(--ink)}
.navmore[open]{gap:10px}
/* breed scherm: de pagina schuift op voor de zijbalk */
@media (min-width:901px){
  html.hassidebar body{padding-left:calc(var(--sbw) + max(16px,env(safe-area-inset-left,0px)))}
  html.hassidebar body .modebar{margin-left:-16px}
  /* ingeklapt: alleen pictogrammen; de naam staat in de tooltip */
  html.zijin .sbbrand,html.zijin .navhead,html.zijin .navpin,html.zijin .navbadge{display:none}
  html.zijin .sbtop{justify-content:center;padding-inline:0}
  html.zijin .sitenav a{font-size:0;gap:0;justify-content:center;padding-inline:0}
  html.zijin .sitenav a::before{font-size:18px}
  html.zijin .navtheme{font-size:0;text-align:center;padding-inline:0}
  html.zijin .navtheme::before{content:attr(data-ic);font-size:15px}
  html.zijin .navgroup+.navgroup{border-top:1px solid var(--line);padding-top:8px}
  html.zijin .navmore>summary{font-size:0;justify-content:center;padding-inline:0}
  html.zijin .navmore>summary::before{content:attr(data-ic);font-size:18px}
  html.zijin .navitem:has(.navbadge:not([hidden]))::after{content:"";position:absolute;right:6px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
}
/* telefoon en tablet: ☰ Menu schuift de zijbalk van links in beeld */
@media (max-width:900px){
  .navbtn{display:inline-flex;align-items:center}
  .brandmark::before{display:block} /* de zijbalk met het teken is dicht: dan staat het in de kopbalk */
  .sidebar{width:min(290px,86vw);transform:translateX(-105%);transition:transform .2s ease;box-shadow:0 0 40px rgb(0 0 0 / .3)}
  html.zijopen .sidebar{transform:none}
  html.zijopen .sbshade{display:block;position:fixed;inset:0;z-index:69;background:rgb(0 0 0 / .35)}
  .sitenav a,.navtheme,.navmore>summary{padding:10px 10px;font-size:16px}
  .navpin{opacity:1}
}
@media (prefers-reduced-motion:reduce){.sidebar{transition:none}}
/* schermvullend, volledig scherm, ingebed en afdrukken: geen zijbalk */
body.kiosk .sidebar,body.vol .sidebar,html.ingebed .sidebar{display:none}
body.kiosk .brandmark::before,body.vol .brandmark::before{display:block}
@media (min-width:901px){html.hassidebar body.kiosk,html.hassidebar body.vol{padding-left:max(16px,env(safe-area-inset-left,0px))}}
@media print{.sidebar,.sbshade,.navbtn{display:none!important}html.hassidebar body{padding-left:0!important}}

/* ---- Kopbalk van de bediening: plakt bovenaan, met de modusbalk erboven ---- */
.modebar{position:sticky;top:0;z-index:36}
header.top.app{position:sticky;top:31px;z-index:35;background:var(--bg);padding-block:8px;margin-block:-8px;gap:8px 16px}
header.top.app .brand h1{font-size:24px}
.bell{position:relative;min-width:38px}
.bell .badge{position:absolute;top:-7px;right:-7px}
/* ⋯ in de kopbalk: busberichten en schermnaam altijd erachter (.rare), op de telefoon ook de andere knoppen (.opt) */
.morebtn{display:inline-flex;align-items:center}
.conn .rare{display:none}
.conn.more .rare{display:inline-flex}
/* meetwaarden: klein (⚡ en lampje) tot je tikt of een waarde in een hoger bereik komt */
.trackpill{cursor:pointer}
.trackpill:not(.full):not(.hot) .tk-v{display:none}
#connText{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42ch}
@media (max-width:600px){
  header.top.app{padding-block:6px}
  header.top.app .brand h1{font-size:21px}
  .conn{gap:6px}
  .conn .opt{display:none}
  .conn.more .opt{display:inline-flex}
  .conn.more #mePill[hidden]{display:none}
  #connText{max-width:32vw}
  .pill{padding:5px 10px}
}
.critbanner{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:9px 12px;border-radius:10px;border:1px solid var(--crit);
  background:color-mix(in srgb,var(--crit) 13%,var(--surface));font-weight:600}
.critbanner #critText{flex:1;min-width:12ch}
.cb-ic{color:var(--crit);font-size:18px}
.toast-info{border-left-color:var(--info)}
.toast-open{flex:1;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;padding:0;overflow-wrap:anywhere}
@media (max-width:900px){.toasts{top:auto;bottom:calc(96px + env(safe-area-inset-bottom,0px))}}

/* ---- Rijregelaars ---- */
.locs-bar{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.locs-bar .label{margin-right:auto}
.loc-id{min-width:0;flex:1}
.loc-name{overflow:hidden;text-overflow:ellipsis}
.dirmark{font-size:13px;color:var(--muted)}
.loc .fold{padding:2px 9px;min-height:30px;flex:none}
.loc-body,.ctl{display:flex;flex-direction:column;gap:10px;min-width:0}
.place label span{flex:none}
/* seinblok: vorm + kleur van het sein vóór de trein, met de reden in gewone taal */
.sigbox{display:flex;gap:9px;align-items:center;padding:7px 10px;border-radius:8px;background:var(--sunk);border-left:5px solid var(--muted);font-size:14px;font-weight:500;line-height:1.3}
.sigbox.a-green{border-left-color:var(--sig-green)}
.sigbox.a-red{border-left-color:var(--sig-red);background:color-mix(in srgb,var(--sig-red) 11%,var(--surface))}
.aspect{width:14px;height:14px;flex:none;border-radius:50%;border:2px solid var(--muted)}
.a-green .aspect{background:var(--sig-green);border-color:var(--sig-green)}
.a-red .aspect{border-radius:2px;background:var(--sig-red);border-color:var(--sig-red)}
/* onbewaakte baan: grijs, geen vorm van een sein (Seinhuis weet het niet: kijk zelf) */
.sigbox.a-unguarded{border-left-style:dashed;border-left-color:var(--muted)}
.a-unguarded .aspect{border-style:dashed;background:transparent}
.tbtn.manual circle{stroke-dasharray:3 2}
.tbtn.manual.wanted circle{stroke:var(--warn);stroke-width:3}
/* wisselwachter: handwissels die een rijweg of de automaat nodig heeft */
.handbar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:8px 12px;border:1px solid color-mix(in srgb,var(--warn) 55%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--warn) 12%,var(--surface))}
.handbar[hidden]{display:none}
.handbar .hb-item{display:inline-flex;gap:8px;align-items:center}
.loc.compact{padding:8px 12px;gap:6px}
.loc.compact .loc-body,.loc.compact .claim,.loc.compact .loc-meta{display:none}
.loc.compact .sigbox{padding:4px 8px;font-size:13px}
.loc.compact .speed b{font-size:20px}
.loc.compact .sw{height:24px}
.loc.sel{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 40%,transparent)}
.loc.nope{animation:nope .35s ease-in-out}
@keyframes nope{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.loc.nope{animation:none;outline:2px solid var(--warn)}}
.fns .fn-more{display:none}
.fns.all .fn-more{display:inline-flex}
.fn-toggle{color:var(--muted)}

/* ---- Baanbeeld: zoomen, treinen, voorproef van een rijweg ---- */
.planbox{position:relative}
.zoombar{position:absolute;top:8px;right:8px;display:flex;gap:4px}
.zoombar .btn{background:color-mix(in srgb,var(--surface) 88%,transparent);min-width:34px;font-weight:600}
svg#plan{touch-action:pan-y}
svg#plan.zoomed{touch-action:none;cursor:grab}
svg#plan.panning{cursor:grabbing}
.pv{fill:none;stroke-width:12;stroke-linecap:round;stroke-opacity:.45;opacity:0;transition:opacity .15s;pointer-events:none}
.sig-go{fill:var(--sig-green);stroke:var(--surface);stroke-width:1.5}
.sig-stop{fill:var(--sig-red);stroke:var(--surface);stroke-width:1.5}
/* stand naast de wissel pas ingezoomd (de kleur van de tong laat hem al zien); een vergrendeling altijd */
.tstate{display:none}
svg.detail .tstate,.tbtn.locked .tstate,.tbtn.fault .tstate{display:inline}
.tbtn.fault circle{stroke:var(--crit);stroke-width:3.5}
.tbtn.fault .tstate{fill:var(--crit);font-weight:700}
.tbtn.onstraat circle{fill:color-mix(in srgb,var(--route) 45%,var(--surface))}
.tbtn.locked circle{stroke-dasharray:4 3;fill:color-mix(in srgb,var(--muted) 20%,var(--surface))}
.tmark{cursor:pointer}
.tlab rect{fill:var(--surface);stroke-width:2}
.tmark.sel .tlab rect{stroke-width:3.5}
.tmark.sel circle{stroke:var(--accent)}
.tmark:focus-visible{outline:none}
.tmark:focus-visible .tlab rect{stroke:var(--accent);stroke-width:3.5}
.lg-sq{width:10px;height:10px;border-radius:1px}
.rp-acts{display:inline-flex;gap:6px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}

/* ---- Melders en meldingen ---- */
.mel-grid.brief .mtile.quiet{display:none}
.mel-empty{margin:4px 0 8px}
.notes[data-f=warn] .note-info,.notes[data-f=crit] .note-info,.notes[data-f=crit] .note-warn{display:none}
.notes li.unread{background:color-mix(in srgb,var(--warn) 10%,transparent)}
.notes li.note-crit.unread{background:color-mix(in srgb,var(--crit) 10%,transparent)}
.keys{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:10px 0;font-size:14.5px}
.keys dt{white-space:nowrap}
.keys dd{margin:0}
kbd{font-family:var(--f-mono);font-size:12px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 5px;background:var(--bg)}

/* ---- Aanraakschermen: knoppen minstens 44 px hoog ---- */
@media (pointer:coarse){
  .btn,.fn,.seg button,.navtheme,.tabs [role=tab]{min-height:44px}
  .btn{padding-inline:12px}
  .zoombar .btn{min-width:44px}
}

/* Telefoon: regelaar met de schuif links over de hele hoogte, knoppen ernaast; kop en seinblok over de
   volle breedte. Hier achteraan, zodat het de regels voor brede schermen hierboven overschrijft. */
@media (max-width:600px){
  .loc-body{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:stretch}
  .loc-body>input[type=range]{writing-mode:vertical-lr;direction:rtl;width:64px;height:100%;min-height:230px;margin:0}
  .loc.compact{padding:14px;gap:10px}
  .loc.compact .loc-body{display:grid}
  .loc.compact .claim:not([hidden]){display:flex}
  .loc.compact .loc-meta{display:block}
  .loc.compact .sigbox{padding:7px 10px;font-size:14px}
  .loc.compact .speed b{font-size:26px}
  .loc.compact .sw{height:34px}
  .loc .fold,.locs-bar>:not(#mineBtn){display:none}
  .locs-bar{justify-content:flex-end}
  .place{flex-wrap:wrap}
  .place label{flex:1 1 100%}
  .zoombar{position:static;justify-content:flex-end;margin-top:6px}
}
.heat{fill:none;stroke-width:15;stroke-linecap:round;opacity:0;pointer-events:none;transition:opacity .3s}
.heatbar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:6px;font-size:13.5px;color:var(--muted)}
.plan-head #heatBtn[aria-pressed=true]{background:color-mix(in srgb,var(--crit) 14%,transparent);border-color:var(--crit)}
.sig-warn{fill:var(--sig-yellow);stroke:var(--surface);stroke-width:1.5}
.sigbox.a-yellow{border-left-color:var(--sig-yellow);background:color-mix(in srgb,var(--sig-yellow) 14%,var(--surface))}
.a-yellow .aspect{background:var(--sig-yellow);border-color:var(--sig-yellow);border-radius:1px;transform:rotate(45deg) scale(.82)}
.lg-dia{width:9px;height:9px;transform:rotate(45deg)}
.rwbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.rwlist{display:flex;gap:6px;flex-wrap:wrap}
.rw{display:inline-flex}
.rw .rwbtn{border-radius:6px 0 0 6px;font-weight:600}
.rw .rwx{border-radius:0 6px 6px 0;border-left:0;color:var(--muted);padding-inline:7px}
.rp-keep{display:inline-flex;gap:5px;align-items:center;font-size:13px;font-weight:500}
.trackpill .dot{box-shadow:none}

/* ---- Treinenoverzicht ---- */
.trainlist{min-width:640px}
.trainlist th{cursor:pointer;user-select:none}
.trainlist th[aria-sort=ascending]::after{content:" ▲"} .trainlist th[aria-sort=descending]::after{content:" ▼"}
.trainlist tbody tr{cursor:pointer}
.trainlist tbody tr:hover,.trainlist tbody tr.sel{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.trainlist td{white-space:normal;vertical-align:middle;font-size:13.5px}
.tl-name{font-weight:600;border-left:5px solid var(--c)}
.tl-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.tl-sig{display:flex;gap:6px;align-items:center}
.tl-sig .aspect{width:11px;height:11px}
.tl-num small{color:var(--muted);margin-left:6px}
.tl-sub{display:none}
/* smal (zijvenster, los venster): drie kolommen; blok, rijdt en onderweg naar onder de naam (telefoon: kaarten) */
#paneTrains .tablewrap{container-type:inline-size}
@media (min-width:601px){@container (max-width:560px){
  .trainlist .tl-col,.trainlist th:is([data-k=block],[data-k=mode],[data-k=next]){display:none}
  .trainlist .tl-sub{display:flex;flex-direction:column;font-weight:400;font-size:12.5px;color:var(--ink);margin-top:2px}
  .trainlist .tl-sub span{color:var(--muted)}
  .trainlist .tl-sub span:empty{display:none}
  .trainlist .tl-num small{display:block;margin:0}
  .trainlist td{padding-block:6px}
}}

/* ---- Volledig scherm ---- */
.kioskbar{display:flex;gap:10px;align-items:center;padding:6px 8px;border-bottom:1px solid var(--line);margin:-8px -8px 8px}
.kb-mode{flex:1;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:13px;padding:4px 8px;border-radius:6px}
.kb-mode.m-sim{color:var(--info)} .kb-mode.m-ro{color:var(--warn)} .kb-mode.m-live{background:var(--crit);color:var(--on-crit)} .kb-mode.m-off{color:var(--muted)}
.kb-clock{font-variant-numeric:tabular-nums;font-weight:600}
.kioskbar .stopgo{position:static;min-width:140px;padding:12px 20px;font-size:18px;box-shadow:none}
body.kiosk{overflow:hidden}
body.kiosk .plan .panel{position:fixed;inset:0;z-index:70;border-radius:0;display:flex;flex-direction:column;padding:8px max(8px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
body.kiosk .plan .plan-head,body.kiosk .plan .legend,body.kiosk .plan .note,body.kiosk .plan .heatbar{display:none}
body.kiosk .planbox{flex:1;min-height:0}
body.kiosk svg#plan{width:100%;height:100%}
body.kiosk .toasts{z-index:90;top:70px;bottom:auto}

/* ---- Telefoon: tabellen als kaarten (nav.js zet data-label), invoer niet ingezoomd door iOS ---- */
@media (max-width:600px){
  input,select,textarea{font-size:16px}
  table.cards{min-width:0}
  table.cards thead{display:none}
  table.cards,table.cards tbody{display:block}
  table.cards tr{display:block;border:1px solid var(--line);border-radius:9px;margin:0 0 8px;padding:6px 10px;background:var(--surface)}
  table.cards td{display:flex;gap:10px;justify-content:space-between;align-items:center;border:0;padding:4px 0;white-space:normal;text-align:right;min-height:30px}
  table.cards td::before{content:attr(data-label);font:600 14px var(--f-ui);color:var(--muted);text-align:left;flex:none;max-width:45%}
  table.cards td[data-label=""]::before{content:none}
  table.cards td > *{max-width:100%}
  .tablewrap:has(> table.cards){overflow:visible;max-height:none;border:0;background:transparent}
  .trainlist.cards .tl-name{border-left:0}
  .trainlist.cards tr{border-left:5px solid var(--line)}
}

/* ---- Rondleiding ---- */
.tour-shade{position:fixed;inset:0;z-index:94;background:rgb(10 16 14 / .55);pointer-events:none}
.tour-spot{position:fixed;z-index:95;border-radius:10px;box-shadow:0 0 0 3px var(--accent);pointer-events:none;transition:all .2s ease}
.tour-card{position:fixed;z-index:96;width:min(340px,calc(100vw - 16px));background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:0 14px 40px rgb(0 0 0 / .3)}
.tour-card h3{margin:0 0 6px;font-size:17px}
.tour-card p{margin:0 0 12px;font-size:14.5px}
.tour-acts{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.tour-count{margin-right:auto;color:var(--muted);font-size:13px}
@media (prefers-reduced-motion:reduce){.tour-spot{transition:none}}
/* regelaar zonder snelheidsgegevens: link naar Locs → Rijgedrag */
.speed .real .real-hint{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
/* Locs: de loc waar je vandaan komt (regelaar) */
tr.hl td{background:color-mix(in srgb,var(--accent) 14%,transparent)}
/* draaischijf en rolbrug onder het seinbeeld */
.bridges{display:flex;flex-direction:column;gap:6px;margin-top:8px;font-size:13px}
.bridges .bridge{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.bridges .bridge b{margin-right:4px}

/* Grote knoppen (html.grote) en hoog contrast (html.contrast): keuze in de paginarij, per browser */
html.grote{font-size:118%}
html.grote .btn,html.grote button{min-height:48px;font-size:17px;padding:8px 14px}
html.grote .stopgo{min-height:64px;font-size:24px;min-width:130px}
html.grote input[type=range]{height:36px}
html.grote input[type=checkbox],html.grote input[type=radio]{width:22px;height:22px}
html.grote select,html.grote input{font-size:17px;min-height:40px}
html.grote .sitenav a,html.grote .navtheme{font-size:16px;padding:8px 10px}
html.contrast{--muted:var(--ink);--line:#4a5a52}
html.contrast:not([data-theme="dark"]) body{--bg:#FFFFFF;--surface:#FFFFFF;--sunk:#E6ECE8;--ink:#000000;--line:#30403A}
@media (prefers-color-scheme: dark){html.contrast:not([data-theme="light"]) body{--bg:#000000;--surface:#0A0D0C;--sunk:#000;--ink:#FFFFFF;--line:#9FB0A7}}
html.contrast[data-theme="dark"] body{--bg:#000000;--surface:#0A0D0C;--sunk:#000;--ink:#FFFFFF;--line:#9FB0A7}
html.contrast .btn,html.contrast button,html.contrast .panel{border-width:2px}
html.contrast :focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* camera (public/camera-view.js) */
.cam{display:flex;flex-direction:column;gap:4px}
.cam .cam-bar{display:flex;gap:8px;align-items:center;font-size:13px}
.cam .cam-bar select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:2px 4px}
.cam .cam-img{width:100%;max-height:40vh;object-fit:contain;background:#000;border-radius:8px}
.cam-float{position:fixed;right:12px;bottom:12px;width:min(360px,45vw);z-index:20;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:6px;box-shadow:0 6px 20px rgb(0 0 0 / .25)}

/* Afbeelding per loc en zoek mijn loc */
.loc-head .loc-foto{height:34px;max-width:110px;object-fit:contain;flex:none}
.tl-foto{height:20px;max-width:70px;object-fit:contain;vertical-align:middle;margin-right:6px}
.tmark .zoekring{display:none;transform-box:fill-box;transform-origin:center}
/* meekijken (alleen meelezen): hier had Seinhuis ingegrepen */
.tmark .shadowmark{display:none}
.tmark.shadow .shadowmark{display:inline}
.tmark .shadowmark circle{stroke:var(--warn)}
.tmark .shadowmark text{font-family:var(--f-ui);font-size:13px;font-weight:800;fill:var(--warn);paint-order:stroke;stroke:var(--bg);stroke-width:3px}
.modebar.m-shadow{cursor:pointer}
.tmark.zoeken .zoekring{display:inline;animation:zoekring .8s ease-out infinite}
@keyframes zoekring{from{transform:scale(.6);opacity:1}to{transform:scale(2.2);opacity:0}}
.loc.zoeken{outline:3px solid var(--accent, #2f6fb3);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.tmark.zoeken .zoekring{animation:none;transform:scale(1.4)}}

/* ---- Stijl: Kiezel (html.kiezel, keuze in de paginarij, per browser; heette eerst "iPhone") ----
   Glad en rond als een kiezelsteen, zoals een iPhone-app: systeemlettertype (San Francisco op Apple-apparaten), de systeemkleuren van iOS voor licht en
   donker, grijze achtergrond met witte afgeronde kaarten zonder rand, gevulde knoppen, schakelaars en een
   gesegmenteerde keuze. Alleen opmaak: niets aan de bediening verandert. Hoog contrast gaat voor. */
html.kiezel{
  --bg:#F2F2F7; --surface:#FFFFFF; --sunk:#E5E5EA; --ink:#000000; --muted:#6C6C70; --line:#D1D1D6;
  --track:#3A3A3C; --gap:#F2F2F7; --route:#FF9500; --accent:#007AFF;
  --sig-red:#FF3B30; --sig-green:#34C759; --sig-yellow:#FFCC00; --warn:#C76A00; --crit:#FF3B30; --good:#248A3D; --info:#007AFF; --on-warn:#1A1206; --on-crit:#1F0806;
  --fill:rgb(118 118 128 / .12); --fill2:rgb(118 118 128 / .2); --knob:#FFFFFF; --segsel:#FFFFFF;
  --f-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",system-ui,"Segoe UI",Roboto,sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){html.kiezel:not([data-theme="light"]){
  --bg:#000000; --surface:#1C1C1E; --sunk:#2C2C2E; --ink:#FFFFFF; --muted:#98989F; --line:#38383A;
  --track:#AEAEB2; --gap:#000000; --route:#FF9F0A; --accent:#0A84FF;
  --sig-red:#FF453A; --sig-green:#30D158; --sig-yellow:#FFD60A; --warn:#FF9F0A; --crit:#FF453A; --good:#30D158; --info:#0A84FF; --on-warn:#1A1206; --on-crit:#1F0806;
  --fill:rgb(118 118 128 / .24); --fill2:rgb(118 118 128 / .36); --segsel:#636366}}
html.kiezel[data-theme="dark"]{
  --bg:#000000; --surface:#1C1C1E; --sunk:#2C2C2E; --ink:#FFFFFF; --muted:#98989F; --line:#38383A;
  --track:#AEAEB2; --gap:#000000; --route:#FF9F0A; --accent:#0A84FF;
  --sig-red:#FF453A; --sig-green:#30D158; --sig-yellow:#FFD60A; --warn:#FF9F0A; --crit:#FF453A; --good:#30D158; --info:#0A84FF; --on-warn:#1A1206; --on-crit:#1F0806;
  --fill:rgb(118 118 128 / .24); --fill2:rgb(118 118 128 / .36); --segsel:#636366}
html.kiezel body{font-size:16px;line-height:1.35;-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
html.kiezel .brand h1{font-size:34px;font-weight:700;letter-spacing:.01em}
html.kiezel header.top.app .brand h1{font-size:28px}
html.kiezel .label,html.kiezel th{letter-spacing:0;text-transform:uppercase;font-size:13px;font-weight:400;color:var(--muted)}
/* kaarten: wit en afgerond, geen rand */
html.kiezel .panel,html.kiezel .tablewrap,html.kiezel .notes,html.kiezel .mtile,html.kiezel .toast,html.kiezel .banner{border:0;border-radius:12px}
html.kiezel .panel{box-shadow:0 1px 2px rgb(0 0 0 / .04)}
html.kiezel .tablewrap,html.kiezel .notes{background:var(--surface)}
html.kiezel .mtile{background:var(--surface);box-shadow:inset 0 0 0 .5px var(--line)}
html.kiezel th{background:var(--surface);border-bottom:.5px solid var(--line)}
html.kiezel td{border-top:.5px solid var(--line);padding-block:8px}
html.kiezel svg#plan{border-radius:10px}
/* knoppen: grijs gevuld met blauwe tekst; hoofdknop blauw gevuld; Stop rood als een iOS-knop */
html.kiezel .btn{border:0;background:var(--fill);color:var(--accent);border-radius:10px;padding:6px 14px;font-weight:500;min-height:34px}
html.kiezel .btn:hover{background:var(--fill2)}
html.kiezel .btn:active{opacity:.6}
html.kiezel .btn.primary{background:var(--accent);color:var(--on-accent);font-weight:600}
html.kiezel .btn.primary.danger,html.kiezel .sh-dialog-acts .btn.primary.danger{background:var(--crit)}
html.kiezel .stopgo{border-radius:14px;letter-spacing:.02em;font-weight:700;box-shadow:none}
@media (max-width:900px){html.kiezel .stopgo{border-radius:999px;box-shadow:0 8px 24px rgb(0 0 0 / .25)}}
html.kiezel .pill{border:0;background:var(--surface);box-shadow:0 1px 2px rgb(0 0 0 / .06)}
/* functies als kleine gevulde knoppen; aan = getint */
html.kiezel .fn{border:0;background:var(--fill);border-radius:9px;padding:6px 10px}
html.kiezel .fn[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}
html.kiezel .fn[aria-pressed=true] .fn-ic{filter:brightness(10)}
html.kiezel .fn.fn-moment{border:1px dashed var(--fill2)}
/* gesegmenteerde keuze (rijrichting en dergelijke) */
html.kiezel .seg{border:0;background:var(--fill);border-radius:9px;padding:2px;gap:2px}
html.kiezel .seg button{border-radius:7px;padding:6px 12px;font-weight:500}
html.kiezel .seg button[aria-pressed=true]{background:var(--segsel);color:var(--ink);box-shadow:0 3px 8px rgb(0 0 0 / .12),0 3px 1px rgb(0 0 0 / .04)}
/* schakelaars zoals op de iPhone (51 × 31, groen als hij aan staat) */
html.kiezel .auto input{width:51px;height:31px;border:0;background:var(--fill2);flex:none}
html.kiezel .auto input::after{top:2px;left:2px;width:27px;height:27px;background:var(--knob);box-shadow:0 3px 8px rgb(0 0 0 / .15),0 3px 1px rgb(0 0 0 / .06);transition:transform .2s}
html.kiezel .auto input:checked{background:#34C759}
html.kiezel .auto input:checked::after{transform:translateX(20px);background:var(--knob)}
/* schuif: dunne lijn met een witte knop */
html.kiezel input[type=range]{-webkit-appearance:none;appearance:none;height:28px;background:transparent}
html.kiezel input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--fill2)}
html.kiezel input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-12px;border-radius:50%;background:#fff;box-shadow:0 .5px 4px rgb(0 0 0 / .12),0 6px 13px rgb(0 0 0 / .12),0 0 0 .5px rgb(0 0 0 / .04)}
html.kiezel input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--fill2)}
html.kiezel input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--accent)}
html.kiezel input[type=range]::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:#fff;box-shadow:0 .5px 4px rgb(0 0 0 / .12),0 6px 13px rgb(0 0 0 / .12)}
/* telefoon: de staande snelheidsregelaar als de brede schuif van het bedieningspaneel van een iPhone */
@media (max-width:600px){
  html.kiezel .loc-body>input[type=range]{width:56px}
  html.kiezel .loc-body>input[type=range]::-webkit-slider-runnable-track{width:48px;height:100%;margin:0 auto;border-radius:16px;background:var(--fill2)}
  html.kiezel .loc-body>input[type=range]::-webkit-slider-thumb{width:44px;height:44px;margin:0 2px}
  html.kiezel .loc-body>input[type=range]::-moz-range-track{width:48px;height:100%;border-radius:16px}
  html.kiezel .loc-body>input[type=range]::-moz-range-progress{width:48px;border-radius:16px}
  html.kiezel .loc-body>input[type=range]::-moz-range-thumb{width:44px;height:44px}
}
/* invoer en keuzelijsten: grijs gevuld, afgerond */
html.kiezel select,html.kiezel input:not([type]),html.kiezel input[type=text],html.kiezel input[type=number],html.kiezel input[type=search],html.kiezel input[type=password],html.kiezel input[type=time],html.kiezel input[type=date],html.kiezel textarea{
  border:0;background:var(--fill);color:var(--ink);border-radius:10px;padding:7px 10px}
html.kiezel input[type=checkbox],html.kiezel input[type=radio]{accent-color:var(--accent)}
/* zijbalk zoals de zijbalk van een iPad-app: wazig, de huidige pagina blauw gevuld */
html.kiezel .sidebar{border-right:.5px solid var(--line);background:color-mix(in srgb,var(--surface) 80%,transparent);-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8)}
html.kiezel .sitenav a{border-radius:10px;font-weight:500}
html.kiezel .sitenav a[aria-current=page]{background:var(--accent);color:var(--on-accent)}
html.kiezel .navhead{letter-spacing:0;font-size:13px;font-weight:600;text-transform:none}
html.kiezel .navtheme{border-radius:10px}
/* kopbalk: doorschijnend en wazig zoals de balk bovenin een iPhone-app */
/* het waas op een laag achter de balk: backdrop-filter op de balk zelf zou de Stop-knop (position:fixed, in de balk) aan de balk vastzetten */
html.kiezel header.top.app{background:transparent;isolation:isolate}
html.kiezel header.top.app::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8)}
html.kiezel .modebar{letter-spacing:.02em;text-transform:none;font-weight:600}
/* vragen en meldingen (dialog.js) zoals een iOS-melding */
html.kiezel .sh-dialog{border:0;border-radius:14px;padding:20px 18px 14px;text-align:center;background:color-mix(in srgb,var(--surface) 92%,transparent);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px)}
html.kiezel .sh-dialog::backdrop{background:rgb(0 0 0 / .35)}
html.kiezel .sh-dialog-acts{justify-content:center}
html.kiezel .sh-dialog-acts .btn{flex:1;min-width:110px}
html.kiezel .claim,html.kiezel .routepick{border-radius:10px}
html.kiezel .sw{border-radius:4px}
/* Hoog contrast blijft hoog contrast: randen terug */
html.kiezel.contrast .panel,html.kiezel.contrast .btn,html.kiezel.contrast .tablewrap{border:2px solid var(--line)}

/* ---- Zijvensters in de bediening (public/zijvensters.js), alleen op een breed scherm ---- */
.dockbar,.dockx,.dockgrip,.dockhead{display:none}
/* alleen als het past (zijvensters.js zet .docked) */

.grid.docked{grid-template-columns:var(--locw,300px) minmax(600px,1fr) auto 46px;grid-template-areas:"locs plan dock bar"}
.grid.docked .mel,.grid.docked .mon,.grid.docked .dockx{grid-area:dock;width:var(--dockw,420px);display:none;position:sticky;top:var(--docktop,150px);min-width:0}
.grid.docked[data-dock=meldingen] .mon,.grid.docked[data-dock=treinen] .mon,.grid.docked[data-dock=can] .mon{display:block}
.grid.docked[data-dock=melders] .mel{display:block}
.grid.docked[data-dock=camera] .dockx,.grid.docked[data-dock=chat] .dockx,.grid.docked[data-dock=vertrek] .dockx,.grid.docked[data-dock=rijdag] .dockx{display:flex}
.grid.docked .mon .tabs{display:none}
.grid.docked .mon .panel,.grid.docked .mel .panel,.grid.docked .dockx{position:relative;max-height:calc(100vh - var(--docktop,150px) - 16px);overflow:auto}
.grid.docked .notes,.grid.docked .tablewrap{max-height:none}
.grid.docked .mel-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.grid.docked .dockhead{display:flex;align-items:center;gap:6px;margin:-2px 0 8px}
.grid.docked .dockhead h2{flex:1;margin:0;font-size:17px}
.grid.docked .dockhead .btn{min-width:32px;padding:2px 8px}
.grid.docked .dockgrip{display:block;position:absolute;left:0;top:0;bottom:0;width:8px;cursor:col-resize;z-index:2;touch-action:none}
.grid.docked .dockgrip:hover,.grid.docked .dockgrip:focus-visible{background:color-mix(in srgb,var(--accent) 35%,transparent)}
/* greepje op de scheiding, zodat je ziet dat hij te verslepen is */
.grid.docked .dockgrip::after,.locgrip::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:36px;margin:-18px 0 0 -2px;border-radius:2px;background:var(--line)}
.grid.docked .dockgrip:hover::after,.locgrip:hover::after,.locgrip:focus-visible::after,.grid.docked .dockgrip:focus-visible::after{background:var(--accent)}
/* scheiding tussen regelaars en seinbeeld (zijvensters.js): ligt over de tussenruimte rechts van de regelaars */
.locgrip{display:none}
@media (min-width:901px){
  .grid:not(.boven)>.locgrip{display:block;grid-area:locs;justify-self:end;align-self:stretch;position:relative;width:12px;margin-right:-14px;cursor:col-resize;touch-action:none;z-index:2;border-radius:6px}
  .grid:not(.boven)>.locgrip::after{top:min(50%,260px)}
  .grid:not(.boven)>.locgrip:hover,.grid:not(.boven)>.locgrip:focus-visible{background:color-mix(in srgb,var(--accent) 25%,transparent);outline:none}
}
body.kiosk .locgrip,body.alleen .locgrip,body.alleen .popout{display:none!important}
@media (max-width:900px){.popout{display:none}}
.grid.docked .dockbar{grid-area:bar;display:flex;flex-direction:column;gap:4px;position:sticky;top:var(--docktop,150px);align-self:start}
.dockx{flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px}
.dockx .dockhead{padding-left:6px}
.dockbody{display:flex;flex-direction:column;flex:1;min-height:0}
.dockbody .cam{width:100%}
.dockframe{border:0;width:100%;height:calc(100vh - var(--docktop,150px) - 90px);border-radius:8px;background:var(--bg)}
.grid.docked .mon .panel,.grid.docked .mel .panel{padding-left:14px}
.dockbtn{position:relative;width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:19px;display:grid;place-items:center;padding:0}
.dockbtn:hover{background:var(--sunk)}
.dockbtn[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--surface))}
.dockbtn.dockoff{margin-top:8px;color:var(--muted);font-size:16px}
.dockcount{position:absolute;top:-5px;right:-5px;background:var(--warn);color:var(--on-warn);border-radius:999px;font-size:11px;line-height:17px;padding:0 5px;font-weight:700}
body.dragging,body.dragging *{cursor:col-resize!important;user-select:none!important}
body.dragging iframe{pointer-events:none}
html.kiezel .dockbtn{border:0;background:var(--fill)}
html.kiezel .dockbtn[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}
html.kiezel .dockx{border:0;border-radius:12px}
/* ⇱ losgemaakt: alleen dat stuk van de bediening (kop met Stop blijft) */
body.alleen .grid>section,body.alleen .dockbar,body.alleen .dockx{display:none}
body.alleen .grid{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:none!important}
body.alleen[data-alleen=mon] .grid>.mon,body.alleen[data-alleen=mel] .grid>.mel{display:block;grid-area:auto}
body.alleen[data-alleen=locs] .grid>.locs{display:flex;grid-area:auto}
body.alleen[data-alleen=locs] .layoutbtn{display:none}
body.alleen .mon .tabs{display:none}
body.alleen .notes,body.alleen .tablewrap{max-height:none}
body.alleen[data-alleen=cam] #camBox{position:static;width:100%}
body.alleen .sidebar{display:none}
@media (min-width:901px){html.hassidebar body.alleen{padding-left:max(16px,env(safe-area-inset-left,0px))}}
.grid.docked .mon-head>h2,.grid.docked .mel .plan-head>h2{display:none}
.grid.docked table.trainlist,body.alleen table.trainlist{min-width:0}
body.alleen .navbtn{display:none!important}

/* ---- Indeling van de bediening (app.js, per browser seinhuis-indeling) ---- */
/* "boven": seinbeeld over de volle breedte, regelaars eronder als strook. Alleen op een breed scherm;
   tablet en telefoon houden hun eigen indeling. */
.layoutbtn{display:none}
@media (min-width:901px){
  .layoutbtn{display:inline-flex}
  .grid.boven{grid-template-columns:minmax(0,1fr);grid-template-areas:"plan" "locs" "mel" "mon"}
  .grid.boven.docked{grid-template-columns:minmax(760px,1fr) auto 46px;grid-template-areas:"plan dock bar" "locs dock bar"}
  .grid.boven .loc-track{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));align-items:start}
  /* regelaars blijven in beeld onder een groot baanplan */
  .grid.boven svg#plan{max-height:calc(100vh - 340px);min-height:180px}
}

/* ---- Uitleg onder het seinbeeld (inklapbaar, per browser seinhuis-uitleg) ---- */
.planhelp{margin-top:8px}
.planhelp>summary{cursor:pointer;color:var(--muted);font-size:13.5px;width:max-content;max-width:100%;padding:2px 0}
.planhelp>summary:hover{color:var(--ink)}
.planhelp .legend{margin-top:6px}
body.kiosk .plan .planhelp{display:none}

/* ---- Bloknamen wijken voor een trein (app.js, render) ---- */
.blabel{transition:opacity .2s}
.blabel.undertrain{opacity:0}

/* ---- Laatste meldingen onder de kopbalk (app.js; niet als de meldingen al in het zijvenster staan) ---- */
.notestrip{display:flex;gap:12px;align-items:center;min-width:0;cursor:pointer;padding:6px 8px 6px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.notestrip:hover{background:color-mix(in srgb,var(--sunk) 50%,var(--surface))}
.notestrip .btn{flex:none}
.ns-head{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;flex:none}
.notestrip ol{list-style:none;margin:0;padding:0;min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.notestrip li{display:flex;gap:8px;align-items:baseline;font-size:14px;white-space:nowrap;min-width:0}
.notestrip li span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.notestrip time{font-family:var(--f-mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.notestrip i{width:8px;height:8px;border-radius:50%;background:var(--muted);align-self:center;flex:none}
.notestrip .note-warn i{background:var(--warn)} .notestrip .note-crit i{background:var(--crit)}
.notestrip .note-crit span{color:var(--crit);font-weight:600}
.notestrip li.old span{color:var(--muted)} /* oudere meldingen gedempt van kleur, niet doorzichtig: dan zakte de tijd onder 3:1 */
@media (max-width:600px){.notestrip{display:none!important}}
body.kiosk .notestrip,body.alleen .notestrip{display:none!important}
html.kiezel .notestrip{border:0;border-radius:12px}

/* ---- Opdrachtenbalk (public/palet.js) ---- */
.sbfind{border:1px solid var(--line);margin:0 0 4px}
html.zijin .sbfind{border:0}
dialog.palet{border:0;padding:0;background:transparent;width:min(620px,calc(100vw - 24px));margin:12vh auto auto;max-height:76vh}
dialog.palet::backdrop{background:rgb(0 0 0 / .35)}
.pl-box{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px rgb(0 0 0 / .3);overflow:hidden;display:flex;flex-direction:column;max-height:76vh}
.pl-box input{border:0;border-bottom:1px solid var(--line);background:transparent;padding:16px 18px;font-size:18px;outline:none;color:var(--ink);width:100%}
.pl-list{list-style:none;margin:0;padding:6px;overflow:auto}
.pl-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;cursor:pointer}
.pl-item[aria-selected=true]{background:color-mix(in srgb,var(--accent) 15%,transparent)}
.pl-item.pl-stop .pl-label{color:var(--crit);font-weight:700}
.pl-ic{width:24px;text-align:center;flex:none}
.pl-label{flex:1;min-width:0}
.pl-sub{color:var(--muted);font-size:13px;line-height:1.35;margin-top:2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pl-hint{color:var(--muted);font-size:13px;white-space:nowrap}
.pl-empty{padding:14px;color:var(--muted)}
.pl-status{margin:0;padding:0 18px;min-height:0;font-size:14px;color:var(--good)}
.pl-status:not(:empty){padding:8px 18px}
.pl-status.bad{color:var(--crit)}
.pl-keys{margin:0;padding:8px 18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
html.kiezel .pl-box{border:0;border-radius:16px;background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8)}
html.kiezel .pl-item[aria-selected=true]{background:var(--accent);color:var(--on-accent)}
html.kiezel .pl-item[aria-selected=true] .pl-hint,html.kiezel .pl-item[aria-selected=true] .pl-sub{color:rgb(255 255 255 / .8)}
html.kiezel .sbfind{border:0;background:var(--fill)}
.sidebar>*{flex-shrink:0}

/* ---- Volgende stap bij een storing (bediening) ---- */
.stepcard{background:var(--surface);border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-left:6px solid var(--accent);border-radius:10px;padding:10px 14px;max-width:110ch;display:flex;flex-direction:column;gap:6px}
.stepcard .sc-head{display:flex;align-items:center;gap:8px;font-size:16px}
.stepcard .sc-head b{flex:1}
.stepcard p{margin:0;color:var(--ink)}
.stepcard .sc-acts{display:flex;flex-wrap:wrap;gap:6px}
.notes .note-step{margin-left:auto;align-self:center;font-size:12.5px;min-height:24px;padding:0 8px}
html.kiezel .stepcard{border:0;border-left:0;border-radius:12px;box-shadow:inset 4px 0 0 var(--accent)}

/* ---- Meldingen per trein of blok ---- */
.ngroups{display:flex;flex-direction:column;padding:4px}
.ngroup{border-top:1px solid var(--line)}
.ngroup:first-child{border-top:0}
.ngroup summary{display:grid;grid-template-columns:auto auto auto 1fr;gap:8px;align-items:center;padding:8px 10px;cursor:pointer;list-style:none}
.ngroup summary::-webkit-details-marker{display:none}
.ngroup summary::before{content:"▸";color:var(--muted);grid-row:1;grid-column:1;display:none}
.ngroup .ng-dot{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.ngroup.ng-warn .ng-dot{background:var(--warn)}
.ngroup.ng-crit .ng-dot{background:var(--crit)}
.ngroup .ng-n{font-size:12px;font-weight:700;background:var(--sunk);border-radius:999px;padding:0 7px;line-height:18px}
.ngroup .ng-last{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ngroup[open] .ng-last{display:none}
.ngroup .notes{border:0;max-height:none;background:transparent;margin:0 0 6px 18px}
html.kiezel .ngroup{border-top:.5px solid var(--line)}
.layout-error h2{font-size:16px;margin:16px 0 6px}
.layout-error ol{padding-left:22px;margin:0}
.layout-error ol li{margin:8px 0;line-height:1.45}
.layout-error ol .btn{margin:0 2px}
.layout-error details{margin-top:18px;color:var(--muted)}
.layout-error summary{cursor:pointer}

/* ---- Welkom (public/welkom.js) en Leer Seinhuis (public/oefenen.js) ---- */
dialog.welkom{max-width:min(680px,calc(100vw - 24px))}
.welkom h2{margin:0 0 6px}
.welkom-intro{margin:0 0 12px;color:var(--muted)}
.welkom-wegen{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px;margin-bottom:12px}
.welkom-weg{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:start;text-align:left;font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px;cursor:pointer}
.welkom-weg:hover,.welkom-weg:focus-visible{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--bg))}
.welkom-ic{grid-row:span 2;font-size:24px;line-height:1}
.welkom-weg strong{font-size:16px}
.welkom-weg span:last-child{color:var(--muted);font-size:13.5px;line-height:1.35}
.welkom-niveau{display:flex;gap:8px;align-items:flex-start;margin:4px 0 8px;font-size:14px}
.welkom-tip{font-size:13px;color:var(--muted);margin:0 0 10px}
.welkom-kop{display:flex;flex-direction:column;gap:2px}
.welkom-bij{font-size:15px;font-weight:500;color:var(--muted);letter-spacing:.02em}
.welkom-kop .merk{font-size:clamp(34px,8vw,48px);line-height:1.1}
/* Woordmerk als neonletter, zoals een lichtreclame aan de gevel: Zilla Slab, alleen de omlijning ("de buis").
   Licht: de buis brandt niet (omlijning in accentkleur); donker: hij brandt en gloeit. Alleen voor de naam Stellhaus,
   nooit voor bediening of meldingen. Hoog contrast en Windows-contrastthema: gewone, volle letters. */
.merk{font-family:"Zilla Slab",Rockwell,Georgia,serif;font-weight:700;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;
  --neon:var(--accent);color:var(--neon)}
@supports (-webkit-text-stroke:1px black){.merk{color:transparent;-webkit-text-stroke:max(1.5px,.05em) var(--neon)}} /* licht: dikker, er is geen gloed */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .merk{--neon:#A8E6FF;-webkit-text-stroke-width:max(1px,.032em);filter:drop-shadow(0 0 1px #4FC3FF) drop-shadow(0 0 6px #2AA8F0) drop-shadow(0 0 14px #1C7FD0)}}
:root[data-theme="dark"] .merk{--neon:#A8E6FF;-webkit-text-stroke-width:max(1px,.032em);filter:drop-shadow(0 0 1px #4FC3FF) drop-shadow(0 0 6px #2AA8F0) drop-shadow(0 0 14px #1C7FD0)}
/* aangaan zoals een neonbuis: twee keer haperen, dan brandt hij (één keer, minder dan 3 flitsen per seconde) */
.merk.ontsteek{animation:merk-aan 1.6s steps(1,end) .3s 1 both}
@keyframes merk-aan{0%{opacity:.15}15%{opacity:1}25%{opacity:.3}42%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.merk.ontsteek{animation:none}}
:root.contrast .merk{color:var(--ink);-webkit-text-stroke:0;filter:none} /* :root: wint van de donkere stijl hierboven */
@media (forced-colors:active){:root .merk.merk{color:CanvasText;-webkit-text-stroke:0;filter:none}}
.oefen{position:fixed;left:calc(var(--sbw,0px) + 16px);bottom:16px;z-index:60;width:min(340px,calc(100vw - 32px));background:var(--surface);border:2px solid var(--accent);border-radius:14px;box-shadow:0 8px 30px rgb(0 0 0 / .25);padding:10px 12px;font-size:14px}
@media (max-width:900px){.oefen{left:16px;bottom:96px}}
.oefen-head{display:flex;align-items:center;gap:6px}
.oefen-head strong{flex:1}
.oefen-ic{border:0;background:transparent;color:var(--muted);font:inherit;font-size:18px;width:30px;height:30px;border-radius:8px;cursor:pointer}
.oefen-ic:hover{background:var(--sunk);color:var(--ink)}
.oefen-bar{height:5px;border-radius:3px;background:var(--sunk);margin:6px 0 8px;overflow:hidden}
.oefen-bar span{display:block;height:100%;background:var(--accent);transition:width .4s}
.oefen.min .oefen-bar{margin-bottom:0}
.oefen-list{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:2px}
.oefen-list li{display:flex;gap:8px;color:var(--muted)}
.oefen-list li.nu{color:var(--ink);font-weight:700}
.oefen-list li.klaar{color:var(--good)}
.oefen-v{width:16px;text-align:center;flex:none}
.oefen-now p{margin:0 0 8px;line-height:1.4}
.oefen-acts{display:flex;gap:8px;flex-wrap:wrap}
.oefen p{margin:0 0 8px;line-height:1.4}
.oefen-wijs{outline:4px solid var(--accent)!important;outline-offset:3px;animation:oefen-puls .8s ease-in-out 3}
@keyframes oefen-puls{50%{outline-color:transparent}}
@media (prefers-reduced-motion:reduce){.oefen-wijs{animation:none}}
.tour-offer{position:fixed;right:16px;bottom:16px;z-index:65;display:flex;gap:8px;align-items:center;flex-wrap:wrap;max-width:min(440px,calc(100vw - 32px));background:var(--surface);border:2px solid var(--accent);border-radius:12px;padding:10px 12px;box-shadow:0 8px 30px rgb(0 0 0 / .2)}
.tour-offer span{flex:1 1 100%;font-size:14px}
.leeg{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px dashed var(--line);border-radius:12px;background:color-mix(in srgb,var(--accent) 5%,var(--surface));margin:8px 0}
.leeg[hidden]{display:none}
.leeg-ic{font-size:26px;line-height:1}
.leeg strong{display:block;font-size:16px;margin-bottom:2px}
.leeg p{margin:0 0 8px;color:var(--muted);line-height:1.4;max-width:70ch}
.leeg-acts{display:flex;gap:8px;flex-wrap:wrap}
.leeg-acts a.btn{text-decoration:none}
.whybtn{margin-left:auto;flex:none;border:1px solid currentColor;background:transparent;color:inherit;font:inherit;font-weight:700;font-size:13px;width:24px;height:24px;border-radius:50%;cursor:pointer;padding:0;line-height:1}
.whybtn:hover,.whybtn:focus-visible{background:color-mix(in srgb,currentColor 12%,transparent)}
html.grote .whybtn{width:36px;height:36px;font-size:16px}
dialog.waarom{max-width:min(460px,calc(100vw - 24px))}
.waarom h2{margin:0 0 6px;font-size:18px}
.waarom p{line-height:1.45;margin:0 0 10px}
.waarom-reden{color:var(--muted);font-style:italic}
.waarom .acts a.btn{text-decoration:none}
/* ---- Wat is dit? (nav.js) ---- */
html.watisdit body *{cursor:help!important}
html.watisdit :is(.stopgo,.stop,.mushroom,[data-stop]){cursor:pointer!important}
.watis-bar{position:fixed;left:50%;transform:translateX(-50%);top:10px;z-index:200;display:flex;gap:10px;align-items:center;background:var(--accent);color:var(--on-accent);border-radius:12px;padding:8px 10px 8px 14px;box-shadow:0 8px 30px rgb(0 0 0 / .25);font-weight:600;max-width:calc(100vw - 24px)}
.watis-bar .btn{background:var(--on-accent);color:var(--accent);border-color:var(--on-accent)}
.watis-pop{position:fixed;z-index:201;width:min(360px,calc(100vw - 16px));background:var(--surface);color:var(--ink);border:2px solid var(--accent);border-radius:12px;padding:10px 12px;box-shadow:0 8px 30px rgb(0 0 0 / .25);font-size:14px}
.watis-pop strong{display:block;margin-bottom:4px}
.watis-pop p{margin:0 0 8px;line-height:1.4}
.watis-pop .watis-uit{color:var(--muted);font-size:13px}
.watis-acts{display:flex;gap:8px;justify-content:flex-end}
.watis-acts a.btn{text-decoration:none}
.toast-undo{display:flex;align-items:center;gap:10px}
.toast-undo span{flex:1}
/* Cabinezicht (public/cabinezicht-view.js): uitzicht vanuit de cabine in machinistenstand en lessenaar */
.uitzicht{display:flex;flex-direction:column;gap:6px}
.uitzicht.uz-leeg{color:#90a39a;font-size:14px}
.uz-bar{display:flex;align-items:center;gap:8px;font-size:14px;color:#90a39a}
.uz-bar button{font:inherit;color:#e7efe9;background:#18211d;border:1px solid #2b3833;border-radius:8px;padding:4px 10px;cursor:pointer;min-height:36px}
.uz-bar .uz-tip{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uz-wrap{position:relative;aspect-ratio:16/9;max-height:62vh;border-radius:14px;overflow:hidden;background:#0d1310;border:1px solid #2b3833}
.uz-wrap[hidden]{display:none}
.uz-wrap > canvas:first-child{position:absolute;inset:0;width:100%;height:100%;display:block}
.uz-hud{position:absolute;left:10px;top:8px;right:calc(min(120px,26%) + 16px);display:flex;flex-direction:column;gap:2px;color:#fff;text-shadow:0 1px 3px #000a;pointer-events:none;font-size:14px}
.uz-spd{font:700 28px/1 'Barlow Semi Condensed',sans-serif}
.uz-sig{display:flex;align-items:center;gap:6px}
.uz-sig i{width:12px;height:12px;border-radius:50%;background:#555;flex:none}
.uz-sig i.g{background:#2eb85c;box-shadow:0 0 8px #2eb85c} .uz-sig i.y{background:#f2c230;box-shadow:0 0 8px #f2c230} .uz-sig i.r{background:#e33b2e;box-shadow:0 0 8px #e33b2e}
.uz-map{position:absolute;right:8px;top:8px;width:min(120px,26%);height:auto;aspect-ratio:1;pointer-events:none}
.uz-msg{position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center;color:#c9d6cf;font-size:16px}
.uz-msg[hidden]{display:none}
.uz-stop,.uz-exit{display:none}
.uitzicht.uz-vol .uz-wrap{position:fixed;inset:0;z-index:95;max-height:none;aspect-ratio:auto;border-radius:0;border:0}
.uitzicht.uz-vol .uz-stop{display:block;position:absolute;left:50%;transform:translateX(-50%);bottom:max(14px,env(safe-area-inset-bottom,0px));min-width:180px;min-height:64px;font:700 26px 'Barlow Semi Condensed',sans-serif;color:#fff;background:#c23b2e;border:0;border-radius:14px;cursor:pointer}
.uitzicht.uz-vol .uz-exit{display:block;position:absolute;right:12px;bottom:max(14px,env(safe-area-inset-bottom,0px));min-width:48px;min-height:48px;font-size:20px;color:#fff;background:#0009;border:1px solid #fff4;border-radius:12px;cursor:pointer}
.uitzicht.uz-vol .uz-hud{font-size:17px}
.uitzicht.uz-vol .uz-spd{font-size:40px}
.uitzicht.uz-vol .uz-map{width:min(160px,30vw)}
.uitzicht.uz-vol .uz-hud{right:calc(min(160px,30vw) + 16px)}
body.uz-open{overflow:hidden}
@media (max-width:600px){.uz-hud{font-size:12px}.uz-spd{font-size:22px}.uz-sig span,.uz-next{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}
.wijsblok{fill:none;stroke:var(--accent);stroke-width:16;stroke-linecap:round;opacity:.75;animation:wijs-puls .9s ease-in-out 4;pointer-events:none}
.tbtn.wijs circle{stroke:var(--accent);stroke-width:5}
@keyframes wijs-puls{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.wijsblok{animation:none}}
.sc-film{margin:8px 0 0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#f4f6f3}
.sc-film img{display:block;width:100%;height:auto;max-height:50vh;object-fit:contain}
.sc-film figcaption{font-size:13px;color:#4b5a52;padding:5px 10px}

/* ---- Stijl: Vitrine (html.vitrine, keuze in de paginarij, per browser) ----
   Zoals de website van Apple: veel lucht, grote strakke koppen, lichtgrijze pagina (#F5F5F7) met witte
   kaarten met ruime ronde hoeken, blauwe pilknoppen (gevuld of met een rand), een dunne doorschijnende
   kopbalk en een rustige zijbalk zonder vlakken, zoals het menu onderaan apple.com. De naam: zo staat
   je baan in de etalage, zoals de locs in de vitrinekast. Alleen opmaak; hoog contrast gaat voor. */
html.vitrine{
  --bg:#F5F5F7; --surface:#FFFFFF; --sunk:#E8E8ED; --ink:#1D1D1F; --muted:#6E6E73; --line:#D2D2D7;
  --track:#1D1D1F; --gap:#F5F5F7; --route:#F56300; --accent:#0071E3; --link:#0066CC;
  --sig-red:#E30000; --sig-green:#00A33D; --sig-yellow:#F5B800; --warn:#B64400; --crit:#E30000; --good:#008009; --info:#0066CC; --on-warn:#fff; --on-crit:#fff;
  --vt-glass:rgb(250 250 252 / .8); --vt-shadow:0 4px 24px rgb(0 0 0 / .06); --vt-chip:#1D1D1F; --vt-chipink:#FFFFFF;
  --f-ui:"SF Pro Text","SF Pro Icons",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-head:"SF Pro Display","SF Pro Icons",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){html.vitrine:not([data-theme="light"]){
  --bg:#000000; --surface:#161617; --sunk:#272729; --ink:#F5F5F7; --muted:#86868B; --line:#424245;
  --track:#E8E8ED; --gap:#000000; --route:#FF9F0A; --accent:#0071E3; --link:#2997FF;
  --sig-red:#FF453A; --sig-green:#30D158; --sig-yellow:#FFD60A; --warn:#FF9F0A; --crit:#FF453A; --good:#30D158; --info:#2997FF; --on-warn:#1A1206; --on-crit:#1F0806;
  --vt-glass:rgb(22 22 23 / .8); --vt-shadow:none; --vt-chip:#F5F5F7; --vt-chipink:#1D1D1F}}
html.vitrine[data-theme="dark"]{
  --bg:#000000; --surface:#161617; --sunk:#272729; --ink:#F5F5F7; --muted:#86868B; --line:#424245;
  --track:#E8E8ED; --gap:#000000; --route:#FF9F0A; --accent:#0071E3; --link:#2997FF;
  --sig-red:#FF453A; --sig-green:#30D158; --sig-yellow:#FFD60A; --warn:#FF9F0A; --crit:#FF453A; --good:#30D158; --info:#2997FF; --on-warn:#1A1206; --on-crit:#1F0806;
  --vt-glass:rgb(22 22 23 / .8); --vt-shadow:none; --vt-chip:#F5F5F7; --vt-chipink:#1D1D1F}
html.vitrine body{font-size:16px;line-height:1.47;letter-spacing:-.016em;-webkit-font-smoothing:antialiased}
html.vitrine .wrap{gap:22px}
html.vitrine a{color:var(--link)}
/* koppen: groot, halfvet en dicht op elkaar, zoals de koppen op apple.com */
html.vitrine .brand h1{font-family:var(--f-head);font-size:40px;font-weight:600;letter-spacing:-.025em;line-height:1.08}
html.vitrine header.top.app .brand h1{font-size:30px}
html.vitrine .brand p{font-size:15px}
html.vitrine .plan-head h2,html.vitrine .mon h2,html.vitrine .hwdlg h2,html.vitrine .grid.docked .dockhead h2{font-family:var(--f-head);font-size:21px;font-weight:600;letter-spacing:-.02em}
html.vitrine .blockmenu h3,html.vitrine .tour-card h3,html.vitrine .loc-name{font-family:var(--f-head);font-weight:600;letter-spacing:-.015em}
html.vitrine .speed b{font-family:var(--f-head);font-weight:600;letter-spacing:-.02em}
/* kleine kopjes: niet in hoofdletters, gewoon halfvet grijs */
html.vitrine .label,html.vitrine .bm-label,html.vitrine .mel-sub,html.vitrine .tab-sub,html.vitrine th{text-transform:none;letter-spacing:-.01em;font-size:13px;font-weight:600;color:var(--muted)}
/* kaarten: wit op lichtgrijs, ruime ronde hoeken, geen rand, zachte schaduw */
html.vitrine .panel,html.vitrine .dockx{border:0;border-radius:18px;box-shadow:var(--vt-shadow)}
html.vitrine .loc{padding:16px 14px}
/* regelaarkop: de naam krijgt de ruimte (dit lettertype is breder dan het smalle Barlow) */
html.vitrine .loc-name{font-size:16px}
html.vitrine .speed .real{font-size:11.5px;letter-spacing:-.01em}
html.vitrine .loc-head .btn.fold{padding:0;min-width:30px;min-height:30px}
html.vitrine .tablewrap,html.vitrine .notes{border:0;border-radius:14px;background:var(--surface)}
html.vitrine .panel .tablewrap,html.vitrine .panel .notes{background:var(--bg)}
html.vitrine .mtile{border:0;border-radius:12px;background:var(--bg)}
html.vitrine .mtile.on{box-shadow:inset 0 0 0 2px var(--route)}
html.vitrine .toast,html.vitrine .banner{border:0;border-radius:14px;box-shadow:0 8px 32px rgb(0 0 0 / .14)}
html.vitrine th{background:var(--bg);border-bottom:1px solid var(--line)}
html.vitrine .panel th{background:var(--bg)}
html.vitrine td{padding-block:8px}
html.vitrine svg#plan{border-radius:14px}
/* knoppen: blauwe pillen; gewone knop met een blauwe rand, hoofdknop blauw gevuld (zoals "Meer info" en "Koop") */
html.vitrine .btn{border:1px solid var(--accent);background:transparent;color:var(--link);border-radius:980px;padding:6px 16px;font-size:14px;font-weight:400;min-height:34px;transition:background .15s,color .15s}
html.vitrine .btn:hover{background:var(--accent);color:#fff}
html.vitrine .btn:active{opacity:.7}
html.vitrine .btn:disabled{opacity:.4;background:transparent;color:var(--link)}
html.vitrine .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
html.vitrine .btn.primary:hover{background:#0077ED}
html.vitrine .btn.primary.danger,html.vitrine .sh-dialog-acts .btn.primary.danger{background:var(--crit);border-color:var(--crit)}
html.vitrine .btn.unit{padding:3px 11px;font-size:12.5px;min-height:26px}
html.vitrine .stopgo{border-radius:980px;letter-spacing:.02em;font-weight:600;padding:11px 26px;box-shadow:none}
@media (max-width:900px){html.vitrine .stopgo{box-shadow:0 10px 30px rgb(0 0 0 / .28)}}
html.vitrine .pill{border:0;background:var(--surface);box-shadow:var(--vt-shadow);font-size:13px}
/* tabbladen als keuzechips zoals in de Apple Store: gekozen = donker gevuld */
html.vitrine .tabs{border-bottom:0;gap:6px;margin:-2px 0 14px;flex-wrap:wrap}
html.vitrine .tabs [role=tab]{border:0;border-radius:980px;padding:6px 14px;font-size:14px;font-weight:400;color:var(--ink);background:var(--sunk)}
html.vitrine .tabs [role=tab][aria-selected=true]{background:var(--vt-chip);color:var(--vt-chipink)}
/* rijrichting en dergelijke: pil met een donkere gekozen helft */
html.vitrine .seg{border:1px solid var(--line);border-radius:980px;padding:2px;gap:2px;background:var(--surface)}
html.vitrine .seg button{border-radius:980px;padding:5px 14px}
html.vitrine .seg button[aria-pressed=true]{background:var(--vt-chip);color:var(--vt-chipink)}
/* functies: keuzevakjes zoals bij het kiezen van een kleur of opslag; aan = blauwe rand */
html.vitrine .fn{border:1px solid var(--line);border-radius:12px;padding:6px 11px;background:var(--surface)}
html.vitrine .fn[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--link)}
html.vitrine .fn.fn-moment{border-style:dashed}
/* schakelaar: rond, blauw als hij aan staat */
html.vitrine .auto input{width:42px;height:26px;border:0;background:var(--sunk);flex:none}
html.vitrine .auto input::after{top:3px;left:3px;width:20px;height:20px;background:#fff;box-shadow:0 2px 6px rgb(0 0 0 / .2);transition:transform .2s}
html.vitrine .auto input:checked{background:var(--accent)}
html.vitrine .auto input:checked::after{transform:translateX(16px);background:#fff}
/* schuif: dunne lijn met een witte knop */
html.vitrine input[type=range]{-webkit-appearance:none;appearance:none;height:26px;background:transparent}
html.vitrine input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--line)}
html.vitrine input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-10px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 2px 8px rgb(0 0 0 / .16)}
html.vitrine input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--line)}
html.vitrine input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--accent)}
html.vitrine input[type=range]::-moz-range-thumb{width:24px;height:24px;border:1px solid var(--line);border-radius:50%;background:#fff;box-shadow:0 2px 8px rgb(0 0 0 / .16)}
@media (max-width:600px){
  html.vitrine .loc-body>input[type=range]{width:48px}
  html.vitrine .loc-body>input[type=range]::-webkit-slider-runnable-track{width:6px;height:100%;margin:0 auto;border-radius:3px}
  html.vitrine .loc-body>input[type=range]::-webkit-slider-thumb{width:40px;height:40px;margin:0 0 0 -17px}
  html.vitrine .loc-body>input[type=range]::-moz-range-thumb{width:40px;height:40px}
}
/* invoer: witte vakken met een dunne rand en een blauwe gloed bij het typen, zoals de formulieren van Apple */
html.vitrine select,html.vitrine input:not([type]),html.vitrine input[type=text],html.vitrine input[type=number],html.vitrine input[type=search],html.vitrine input[type=password],html.vitrine input[type=time],html.vitrine input[type=date],html.vitrine textarea{
  border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;padding:8px 12px}
html.vitrine select:focus-visible,html.vitrine input:focus-visible,html.vitrine textarea:focus-visible{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent)}
html.vitrine input[type=checkbox],html.vitrine input[type=radio]{accent-color:var(--accent)}
html.vitrine :focus-visible{outline-color:var(--link);outline-width:3px;outline-offset:3px}
/* zijbalk: rustig zoals het menu onderaan apple.com, geen gekleurde vlakken; de huidige pagina donker en halfvet */
html.vitrine .sidebar{background:var(--bg);border-right:1px solid var(--line)}
html.vitrine .sbbrand{font-family:var(--f-head);font-weight:600;letter-spacing:-.02em;font-size:21px}
html.vitrine .navhead{text-transform:none;letter-spacing:-.01em;font-size:12px;font-weight:600;color:var(--ink)}
html.vitrine .sitenav a{font-weight:400;font-size:14px;color:var(--muted);border-radius:8px}
html.vitrine .sitenav a:hover{background:transparent;color:var(--ink);text-decoration:underline}
html.vitrine .sitenav a[aria-current=page]{background:transparent;color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--ink);border-radius:0 8px 8px 0}
html.vitrine .navtheme{font-size:12.5px}
html.vitrine .navtheme:hover{background:transparent;color:var(--ink)}
html.vitrine .sbfind{border:1px solid var(--line);border-radius:980px;background:var(--surface)}
/* kopbalk: dun en doorschijnend zoals de menubalk van apple.com (het waas op een laag erachter, zie Kiezel) */
html.vitrine header.top.app{background:transparent;isolation:isolate}
html.vitrine header.top.app::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--vt-glass);-webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
/* modusbalk zoals de mededelingenbalk bovenaan apple.com: gewone letters, gecentreerd */
html.vitrine .modebar{text-transform:none;letter-spacing:-.01em;font-weight:500;font-size:14px;padding-block:9px}
html.vitrine .modebar.m-sim{background:var(--sunk);color:var(--ink)}
/* vragen en meldingen (dialog.js) */
html.vitrine .sh-dialog{border:0;border-radius:18px;padding:26px 26px 20px;box-shadow:0 20px 60px rgb(0 0 0 / .25)}
html.vitrine .sh-dialog::backdrop{background:rgb(0 0 0 / .4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html.vitrine .sh-dialog p{font-size:17px}
html.vitrine .sh-dialog input{border-radius:12px;padding:10px 12px}
html.vitrine .sh-dialog-acts .btn{min-height:38px;padding:7px 20px}
html.vitrine .claim,html.vitrine .routepick{border-radius:14px}
html.vitrine .sw{border-radius:999px;width:10px}
/* zijvensters, opdrachtenbalk, volgende stap, meldingen per trein */
html.vitrine .dockbtn{border:0;border-radius:12px;background:var(--surface);box-shadow:var(--vt-shadow)}
html.vitrine .dockbtn[aria-pressed=true]{background:var(--vt-chip);color:var(--vt-chipink)}
html.vitrine .pl-box{border:0;border-radius:18px;box-shadow:0 30px 80px rgb(0 0 0 / .3)}
html.vitrine .pl-box input{font-size:22px;letter-spacing:-.02em;padding:18px 22px}
html.vitrine .pl-item{border-radius:10px}
html.vitrine .pl-item[aria-selected=true]{background:var(--sunk)}
html.vitrine .stepcard{border:0;border-radius:18px;box-shadow:var(--vt-shadow),inset 4px 0 0 var(--accent)}
html.vitrine .ngroup .ng-n{background:var(--sunk)}
html.vitrine .notestrip{border:0;border-radius:14px;box-shadow:var(--vt-shadow)}
/* Hoog contrast blijft hoog contrast: randen terug */
html.vitrine.contrast .panel,html.vitrine.contrast .tablewrap,html.vitrine.contrast .dockx{border:2px solid var(--line)}
html.vitrine.contrast .btn{border-width:2px}
/* In de app voor iOS/Android (app/, html[data-app] uit public/nav.js): geen knoppen of teksten om buiten de app te
   kopen (App Store-richtlijn 3.1.3(f): gratis app bij software die je elders koopt) */
html[data-app] .niet-in-app{display:none!important}
html:not([data-app]) .alleen-in-app{display:none!important}