/* Baanplan-editor. Kleuren en lettertypen komen uit styles.css. */
:root{ --bed:#B9C3BC; --rail:#34433C; --port:#1E5CA3; --sel:#D9971A; }
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){ --bed:#33403A; --rail:#C9D6CF; --port:#78ABEB; --sel:#F2B13A; }}
:root[data-theme="dark"]{ --bed:#33403A; --rail:#C9D6CF; --port:#78ABEB; --sel:#F2B13A; }

body.ed{padding-block:12px 16px}
.ed-top{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:space-between;max-width:1600px;margin:0 auto 12px}
.ed-top a{color:var(--accent)}
.ed-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.file-btn{position:relative;display:inline-flex;align-items:center}
.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.pill.dirty{border-color:var(--warn);color:var(--warn)}

.ed-main{display:grid;grid-template-columns:300px minmax(0,1fr) 270px;gap:12px;max-width:1600px;margin:0 auto;height:calc(100vh - 110px);min-height:520px}
@media (max-width:1100px){.ed-main{grid-template-columns:280px minmax(0,1fr);height:auto}
  .ed-side{max-height:70vh}
  .ed-canvas{height:70vh;min-height:420px}
  .ed-insp{grid-column:1 / -1}}
@media (max-width:700px){.ed-main{grid-template-columns:minmax(0,1fr)}
  .ed-canvas{order:-1;height:60vh;min-height:360px}}

.ed-side{padding:10px 12px;overflow:auto;min-height:0}
.ed-side .tabs{margin:0 0 10px;flex-wrap:wrap}
.ed-side .tabs [role=tab]{padding:7px 8px;font-size:14px}
.ed-search{width:100%;font:inherit;padding:7px 10px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--ink)}
.ed-hint{font-size:13.5px;color:var(--muted);margin:8px 0}
.ed-h{font-size:15px;margin:14px 0 6px}
.lib-group h3{margin:14px 0 6px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}
.lib-items{display:grid;grid-template-columns:1fr;gap:4px}
.art{display:grid;grid-template-columns:56px 1fr;gap:8px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--bg);
  border-radius:7px;padding:4px 8px;cursor:pointer;color:var(--ink)}
.art:hover,.art:focus-visible{border-color:var(--accent)}
.art svg{width:56px;height:34px}
.art b{font-family:var(--f-mono);font-size:12.5px;font-weight:500}
.art span{display:block;font-size:13px;line-height:1.2}
.art .unsure{color:var(--warn);font-size:12px}

.ed-canvas{position:relative;overflow:hidden;min-height:0;padding:0}
#sheet{position:absolute;inset:0;display:block;width:100%;height:100%;background:var(--bg);touch-action:none;cursor:grab;border-radius:10px}
#sheet.panning{cursor:grabbing}
.grid-line{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.grid-line.major{stroke:color-mix(in srgb,var(--muted) 45%,transparent)}
.pc .bed{fill:none;stroke:var(--bed);stroke-width:40;stroke-linecap:butt;stroke-linejoin:round}
.pc .rail{fill:none;stroke:var(--rail);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round}
.pc{cursor:pointer}
.pc:hover .bed{stroke:color-mix(in srgb,var(--bed) 70%,var(--accent))}
.pc.sel .bed{stroke:color-mix(in srgb,var(--sel) 55%,var(--bed))}
.pc.sel .rail{stroke:var(--sel);stroke-width:3}
.pc .lbl{font-family:var(--f-mono);fill:var(--muted);pointer-events:none}
.port{fill:var(--surface);stroke:var(--port);stroke-width:2;vector-effect:non-scaling-stroke;cursor:pointer}
.port.active{fill:var(--port)}
.port:hover{fill:color-mix(in srgb,var(--port) 40%,var(--surface))}

.ed-tools{position:absolute;left:10px;bottom:10px;display:flex;gap:6px;align-items:center;background:color-mix(in srgb,var(--surface) 85%,transparent);padding:6px;border-radius:9px;border:1px solid var(--line)}
.ed-tools .btn{min-width:36px}
.ed-scale{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;padding:0 4px}
.ed-mode{position:absolute;left:10px;top:10px;right:10px;background:var(--accent);color:var(--on-accent);border-radius:8px;padding:6px 10px;font-size:14px;display:flex;gap:10px;align-items:center;justify-content:space-between}
.ed-mode .btn{color:#fff;border-color:#fff8}

.ed-insp{padding:12px;overflow:auto;min-height:0}
.ed-insp h2{font-size:17px;margin:0 0 2px}
.ed-insp .meta{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.ed-insp .acts{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.field{display:grid;gap:3px;font-size:13.5px;margin:8px 0;color:var(--muted)}
.field input,.field select{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:5px 8px}
.warnbox{border:1px solid color-mix(in srgb,var(--warn) 55%,var(--line));background:color-mix(in srgb,var(--warn) 12%,var(--surface));border-radius:8px;padding:8px 10px;font-size:13px;margin-top:10px}
kbd{font-family:var(--f-mono);font-size:12px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 4px;background:var(--bg)}

.blocklist{list-style:none;padding:0;margin:10px 0;display:flex;flex-direction:column;gap:8px}
.blocklist li{border:1px solid var(--line);border-left:6px solid var(--c);border-radius:8px;padding:8px;background:var(--bg)}
.blocklist li.active{outline:2px solid var(--accent)}
.blocklist .row{gap:6px}
.blocklist input{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:4px 6px;min-width:0}
.blocklist .bname{flex:1}
.blocklist .bnum{width:70px}
.blocklist small{color:var(--muted);font-size:12.5px}

.checks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px;font-size:13.5px}
.checks li{padding:5px 8px;border-radius:6px;background:var(--bg);border-left:4px solid var(--muted)}
.checks li.fout{border-left-color:var(--crit)} .checks li.letop{border-left-color:var(--warn)} .checks li.ok{border-left-color:var(--good)}
.bom{width:100%;min-width:0;font-size:13px}
.bom td,.bom th{white-space:normal}
.bom td:first-child{font-family:var(--f-mono)}
.bom td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.field.check{display:flex;gap:8px;align-items:flex-start;color:var(--ink)}
.field.check input{margin-top:3px}
.bextra{margin-top:6px;font-size:13.5px}
.bextra summary{cursor:pointer;color:var(--muted)}
.mgrid{display:grid;grid-template-columns:auto 1fr 1fr;gap:4px 6px;align-items:center;margin-top:6px}
.mgrid b{font-size:12px;font-weight:600;color:var(--muted)}
.mgrid input{width:100%;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:3px 6px}
.gen-info{margin-top:12px;border:1px solid var(--line);border-radius:8px;padding:10px;background:var(--bg);font-size:13.5px}
.gen-info h3{margin:0 0 4px;font-size:16px}
.gen-info .bad{color:var(--warn)}
.gen-info .acts{margin-top:8px}
#paneGen .row input{width:90px;font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:5px 8px}
#paneGen .row{gap:6px;flex-wrap:nowrap}
.acts{display:flex;gap:6px;flex-wrap:wrap}
#crossList li{--c:var(--warn)}
.cross-blocks{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font-size:13px}
.cross-blocks small{flex-basis:100%;color:var(--muted)}

/* Voorbeelden */
.vb-filter{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.vb-filter .btn[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.vb-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.vb-card{border:1px solid var(--line);border-radius:8px;background:var(--bg);overflow:hidden}
.vb-thumb{display:block;width:100%;height:96px;background:var(--surface);border-bottom:1px solid var(--line)}
.vb-thumb path{fill:none;stroke:var(--rail);stroke-width:22;stroke-linecap:round}
.vb-body{padding:8px 10px 10px;font-size:13.5px}
.vb-body h3{margin:0 0 2px;font-size:15px}
.vb-body p{margin:6px 0}
.vb-meta{color:var(--muted)}
.vb-src{color:var(--muted);font-size:12.5px}
.vb-src a{color:var(--accent);overflow-wrap:anywhere}
.vb-cost{margin-top:4px}
.vb-cost strong{font-size:15px}
.vb-cost .bad{color:var(--warn)}
.vb-body .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
#paneVb .row{display:flex;gap:6px;align-items:center}
#paneVb .row input,#paneVb .row select{flex:1;min-width:0}

/* Lagen en slepen */
.ed-tools{flex-wrap:wrap;max-width:calc(100% - 20px)}
.ed-sep{width:1px;align-self:stretch;background:var(--line);margin:0 2px}
.ed-chk{display:inline-flex;gap:5px;align-items:center;font-size:13px;white-space:nowrap}
.ed-chk select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:2px 4px}
.pc.other-layer{opacity:.28}
.pc.other-layer .lbl{display:none}
.pc.ramp .bed{stroke-dasharray:18 10}
.pc.layer-up .bed{filter:drop-shadow(0 0 6px rgb(0 0 0 / .35))}
.pc.dragging{cursor:grabbing}
.layerlist li{--c:var(--accent)}
/* terugmelder per wisselstand: kleine velden naast elkaar */
.fbrow{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:flex-end}
.fbrow>span{flex:1 1 100%}
.fbrow label{display:flex;flex-direction:column;font-size:12.5px;color:var(--muted);gap:2px}
.fbrow input{width:78px}
.field.alleen{display:flex;flex-wrap:wrap;gap:4px 12px}
.field.alleen>span{flex:1 1 100%}
.field.alleen .check{display:inline-flex;gap:5px;align-items:center;color:var(--ink)}
/* 3D-voorbeeld */
.ed-3d{width:min(1100px,calc(100vw - 32px));max-height:calc(100vh - 32px);border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);padding:14px}
.ed-3d::backdrop{background:rgb(0 0 0 / .4)}
.v3-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.v3-head h2{margin:0;font-size:18px}
#v3Canvas{display:block;width:100%;height:min(62vh,620px);border-radius:8px;touch-action:none;cursor:grab}
.v3-tools{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:8px;font-size:14px}
.v3-tools label{display:flex;gap:8px;align-items:center}
/* Vergelijken met de centrale */
.cs3-box .btn{margin:4px 0}
.cs3-table td{vertical-align:top}
.cs3-st{font-size:12px;font-weight:600;padding:1px 6px;border-radius:999px;white-space:nowrap}
.cs3-st.ok{color:var(--good)} .cs3-st.letop{color:var(--warn)} .cs3-st.fout{color:var(--crit)}
.cs3-diagram{margin-top:8px;border:1px solid var(--line);border-radius:8px;overflow:auto;background:var(--bg)}
.cs3-diagram svg{display:block;width:100%;min-width:420px;height:auto}
.cs3-bg{fill:var(--bg)}
.cs3-trk{stroke:var(--track);stroke-width:4;fill:none;stroke-linecap:round}
.cs3-dash{stroke-dasharray:4 4}
.cs3-thick{stroke-width:6}
.cs3-sig{fill:var(--sig-red)}
.cs3-s88{fill:var(--route)}
.cs3-acc{fill:none;stroke:var(--muted);stroke-width:2}
.cs3-lab{font:9px var(--f-mono);fill:var(--muted)}
/* Meerdere stukken, liniaal, minikaart, geschiedenis */
.pc.msel .bed{stroke:color-mix(in srgb,var(--accent) 70%,var(--bed))}
.pc.msel .rail{stroke:var(--accent)}
#sheet.boxmode,#sheet.measuring{cursor:crosshair}
.selbox{fill:color-mix(in srgb,var(--accent) 12%,transparent);stroke:var(--accent);stroke-dasharray:6 4;vector-effect:non-scaling-stroke}
.measure line,.measure circle{stroke:var(--crit);fill:var(--crit)}
.measure text{fill:var(--crit);font-weight:700;paint-order:stroke;stroke:var(--bg);stroke-width:3px;vector-effect:non-scaling-stroke}
.ed-selbar{position:absolute;top:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center;background:color-mix(in srgb,var(--surface) 92%,transparent);padding:6px 8px;border-radius:9px;border:1px solid var(--line);box-shadow:0 6px 18px rgb(0 0 0 / .15);max-width:calc(100% - 20px)}
.ed-mini{position:absolute;right:10px;bottom:10px;width:180px;height:120px;background:color-mix(in srgb,var(--surface) 90%,transparent);border:1px solid var(--line);border-radius:8px;cursor:pointer;touch-action:none}
.mini-trk{fill:none;stroke:var(--rail,var(--track));stroke-linecap:round}
.mini-view{fill:color-mix(in srgb,var(--accent) 12%,transparent);stroke:var(--accent)}
.ed-histwrap{position:relative;display:inline-flex}
.ed-hist{position:absolute;top:calc(100% + 4px);right:0;z-index:30;width:300px;max-height:60vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgb(0 0 0 / .2);padding:8px;display:flex;flex-direction:column;gap:2px}
.hist-item{display:flex;justify-content:space-between;gap:10px;text-align:left;border:0;background:transparent;padding:7px 8px;border-radius:6px;cursor:pointer;font:inherit;color:var(--ink)}
.hist-item:hover{background:var(--sunk)}
.hist-item small{color:var(--muted);font-variant-numeric:tabular-nums}
.vb-thumb.on-plate{height:140px}
.vb-thumb .vb-plate{fill:var(--bg);stroke:var(--line);stroke-width:12}
.vb-proef{margin-top:4px}
.phase-list{margin:6px 0 0;padding-left:20px}
.phase-list li{margin:4px 0}
.phase-list .btn{padding:2px 8px;font-size:12.5px}
#genOwned{width:100%;font:13px var(--f-mono, monospace)}
.pc .pit{fill:color-mix(in srgb,var(--muted) 18%,transparent);stroke:var(--line);stroke-width:3}
.pc .pit.ring{fill:color-mix(in srgb,var(--muted) 8%,transparent)}
.vb-thumb .vb-hole{fill:color-mix(in srgb,var(--warn,#c23b2e) 25%,transparent);stroke:var(--warn,#c23b2e);stroke-width:8}
.hole-row{gap:4px;align-items:center;margin:4px 0}
.hole-row input[type=number]{width:62px}
.hole-row input:not([type]){width:90px}
.knel-list{margin:4px 0 0;padding-left:20px}
.knel-list li{margin:2px 0}

/* landschap: vlakken onder de rails, tunnels gestreept, bruggen met liggers */
.scn{stroke:rgb(0 0 0 / .35);stroke-width:2;cursor:grab;opacity:.55}
.scn.sel{stroke:var(--accent);stroke-width:5;opacity:.8}
.scn-lbl{font-size:13px;fill:var(--ink);pointer-events:none;font-weight:600}
.pc.tunnel .rail{stroke-dasharray:10 8}
.pc.tunnel .bed{opacity:.35}
.pc .girder{fill:none;stroke:var(--ink);stroke-width:62;opacity:.45}
.scn-list{list-style:none;padding:0;margin:8px 0;display:flex;flex-direction:column;gap:8px}
.scn-list li{border:1px solid var(--line);border-radius:8px;padding:6px 8px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 6px;font-size:13px}
.scn-list li.sel{border-color:var(--accent)}
.scn-list li .full{grid-column:1 / -1;display:flex;gap:6px;align-items:center}
.scn-list input,.scn-list select{width:100%;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:2px 4px}
.ed-row{display:flex;gap:6px;align-items:center;margin-bottom:6px}
/* wegen (public/wegen-editor.js) */
#paneWeg .scn-list li{grid-template-columns:repeat(2,minmax(0,1fr))}
#paneWeg .wg-f{display:flex;flex-direction:column;gap:2px}
#paneWeg .wg-f:has(input[type=checkbox]){flex-direction:row;align-items:center;grid-column:1 / -1}
#paneWeg .scn-list input[type=checkbox]{width:auto}
#paneWeg .full{flex-wrap:wrap}
.roads .road-ed-base{fill:none;stroke:#8a8f94;stroke-width:34;stroke-linecap:round;stroke-linejoin:round;opacity:.45}
.roads .road-ed-base.sel{stroke:var(--accent);opacity:.5}
.roads .road-ed{fill:none;stroke:#fff;stroke-width:3;stroke-dasharray:14 10;cursor:pointer}
.roads .road-ed.ov{stroke:#f2c230}
.roads .road-ed.draft{stroke:var(--accent);stroke-dasharray:none;stroke-width:4;cursor:crosshair}
.roads .road-ed-pt{fill:var(--accent)}
.roads .road-ed-melder{fill:#1e5ca3;stroke:#fff;stroke-width:2}
.roads .road-ed-stop{fill:#cf3329;stroke:#fff;stroke-width:2}
.roads .road-ed-af{fill:#1e5ca3;stroke:#fff;stroke-width:2}
.roads .road-ed-arrow{fill:none;stroke:#fff;stroke-width:3}
#sheet.road-drawing{cursor:crosshair}