/* De opmaak van de viewer: thema's, werkbalken, panelen en de objectlijst.
   Stond tot 13 augustus 2026 als <style>-blok in web/index.html. Losgetrokken
   zodat de opmaak op een eigen plek staat en de browser hem apart kan
   bewaren. De regels zelf zijn ongewijzigd overgenomen. */

:root{
  --paper:#f1efe8; --card:#fff; --ink:#221f19; --muted:#6f695d; --hair:#dcd8cd;
  --veld:#f7f5f0; --veldop:#fff;
  --accent:#b45f3d; --chipbg:#f5f2ea; --panel:#faf8f3; --hover:#f1ede3; --canvas:#e9e6df;
  --schaduw:rgba(0,0,0,.12);
  /* Uitklapmenu: staat los boven de rest en moet zich daarvan losmaken.
     In het lichte thema is dat gewoon wit; in het donkere thema een grijs
     dat duidelijk lichter is dan de kaart eronder. */
  --menu:#fff; --menuhaar:#dcd8cd;
}
html[data-thema="donker"]{
  --paper:#1a1c1f; --card:#26292e; --ink:#e7e4dc; --muted:#9a958a; --hair:#3a3e44;
  --veld:#32363c; --veldop:#3c4148;
  --accent:#e0855f; --chipbg:#2e3238; --panel:#212429; --hover:#31353b; --canvas:#15171a;
  --schaduw:rgba(0,0,0,.45);
  /* Sylvain, 4 augustus 2026: "menu valt een beetje weg door zwarte kleur,
     maak deze donker grijs." Het menu stond op --card (#26292e) en dat
     verschilt te weinig van de achtergrond (#1a1c1f). */
  --menu:#363b42; --menuhaar:#4d535b;
}
*{ box-sizing:border-box; }
html,body{ height:100%; overflow:hidden; }
input[type=text], input[type=number], input[type=search], select, textarea{
  background:var(--card); color:var(--ink); }
input::placeholder{ color:var(--muted); }
body{ margin:0; background:var(--paper); color:var(--ink);
  font-family:"Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif; overflow:hidden; }
.app{ display:flex; height:100vh; height:100dvh; }

/* ── paneel ── */
aside{ width:280px; min-width:280px; background:var(--panel); border-right:1px solid var(--hair);
  display:flex; flex-direction:column; }
.ptop{ padding:12px 12px 8px; border-bottom:1px solid var(--hair); }
.ptop h1{ font-size:15px; margin:0 0 2px; }
.ptop p{ font-size:11px; color:var(--muted); margin:0 0 8px; }
/* Het zoekveld had dezelfde achtergrond als het paneel eromheen, en in het
   donkere thema viel het daardoor weg -- je zag alleen de blauwe focusrand
   van de browser en niet waar het veld begon. Sylvain, 6 augustus: "maak
   selectievlak achtergrond grijs voor beter zichtbaarheid." Nu een tint
   lichter dan het paneel, en bij focus nog iets lichter met een eigen rand
   in de accentkleur. */
#zoek{ width:100%; padding:8px 10px; border:1px solid var(--hair); border-radius:8px;
  font-size:14px; font-family:inherit; background:var(--veld); color:var(--ink); }
#zoek::placeholder{ color:var(--muted); }
#zoek:focus{ background:var(--veldop); border-color:var(--accent); outline:none; }
#lijst{ flex:1; overflow-y:auto; padding:6px 8px 12px; }
.cat{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  font-weight:600; margin:12px 4px 4px; }
.mi{ display:flex; align-items:center; gap:8px; width:100%; padding:6px 8px; margin:2px 0;
  border:1px solid transparent; border-radius:8px; background:none; cursor:pointer;
  font-family:inherit; font-size:13px; text-align:left; color:var(--ink); }
.mi:hover{ background:var(--hover); border-color:var(--hair); }
.mi .maat{ margin-left:auto; font-size:11px; color:var(--muted); white-space:nowrap; }
.mi svg{ flex:none; }
/* Op een muisscherm is het icoontje van 30 px te klein om te zien wat voor
   meubel het is. Sylvain, 01-08: "het plaatje wat er voor staat groter maken
   op desktop, is nu niet te zien". De viewBox blijft gelijk, dus de tekening
   schaalt gewoon mee; op de telefoon blijft het klein, want daar telt elke
   regel van de lijst. */
@media (min-width:761px){
  .mi svg{ width:54px; height:54px; }
  .mi{ gap:10px; }
}
/* Zwevend kadertje met het object in 3D, van voren. Staat los in de body en
   niet in de zijbalk, anders knipt de scrollende lijst het af. */
#pvKader{ position:fixed; z-index:120; display:none; padding:6px;
  background:var(--panel); border:1px solid var(--hair); border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.18); pointer-events:none; }
#pvKader canvas{ display:block; border-radius:6px; }
/* De kiezer met de opslaanknop ernaast: de dropdown krijgt de ruimte, de
   knop blijft even hoog. Sylvain, 01-08: "graag save ikoon achter type
   selectie". */
.kiezer{ position:relative; margin-bottom:8px; display:flex; gap:6px;
  align-items:stretch; }
.kiezer > #projectKnop{ flex:1 1 auto; min-width:0; }
#bewaarKnop{ flex:0 0 auto; width:38px; border-radius:8px;
  border:1px solid var(--hair); background:var(--card); color:var(--ink);
  font-family:inherit; font-size:15px; cursor:pointer; }
#bewaarKnop.wijzig{ border-color:#b3541e; background:#b3541e; }
.kiezer > button{ width:100%; display:flex; align-items:center; gap:8px;
  padding:8px 10px; border:1px solid var(--hair); border-radius:8px;
  background:var(--card); color:var(--ink); font-family:inherit; font-size:12.5px;
  cursor:pointer; text-align:left; }
.kiezer > button #projectKnopTekst{ flex:1; }
.kiezer .pijl{ opacity:.55; font-size:11px; }
.kiezerPaneel{ position:absolute; z-index:60; left:0; right:0; top:calc(100% + 4px);
  max-height:min(58vh, 420px); overflow:auto; background:var(--menu);
  border:1px solid var(--menuhaar); border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.28); padding:4px; }
.kiezerPaneel[hidden]{ display:none; }
.kiezerPaneel button{ width:100%; display:flex; align-items:center; gap:8px;
  padding:8px 10px; border:0; border-radius:7px; background:transparent;
  color:var(--ink); font-family:inherit; font-size:12.5px; cursor:pointer;
  text-align:left; }
.kiezerPaneel button:hover{ background:rgba(127,127,127,.16); }
.kiezerPaneel button.actief{ background:rgba(127,127,127,.22); font-weight:700; }
.kiezerPaneel .tel{ opacity:.55; font-size:11.5px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.kiezerPaneel .kop{ padding:6px 10px 4px; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); }
.kiezerPaneel .streep{ height:1px; background:var(--menuhaar); margin:4px 6px; }
.pbot{ border-bottom:1px solid var(--hair); padding:0 0 8px; margin-bottom:8px;
  display:flex; flex-wrap:wrap; gap:6px; }
.pbot button, .pbot select{ font-family:inherit; font-size:12px; padding:6px 10px;
  border:1px solid var(--hair); border-radius:8px; background:var(--card); cursor:pointer; color:var(--ink); }

/* ── canvas ── */
main{ flex:1; position:relative; background:var(--canvas); overflow:hidden; }
#canvasBG, #canvas{ position:absolute; inset:0; width:100%; height:100%; display:block;
  transform-origin:center center; }
#canvasBG{ pointer-events:none; will-change:transform; }
#canvas{ touch-action:none; }
/* Sylvain, 07-08: "window mag groter iconen slecht te lezen." De balk zat op
   95% van de breedte met tekstsymbolen van 13px; de pijltjes (⇤ ⇥ ⤒ ⤓ ≡↔)
   zijn juist de tekens die klein onleesbaar worden. Balk mag nu de volle
   breedte gebruiken en alles is een slag groter. */
#toolbar{ position:absolute; top:10px; left:50%; transform:translateX(-50%);
  background:#26231d; color:#f6f3ec; border-radius:12px; padding:10px 14px;
  display:none; align-items:center; gap:8px; box-shadow:0 6px 24px -8px rgba(0,0,0,.4);
  font-size:14px; z-index:20; flex-wrap:wrap; justify-content:center;
  /* Zonder width kiest de browser shrink-to-fit: een wrappende flexbox bleef
     dan op ~610px steken terwijl er 1200px ruimte was, en viel "Verwijder"
     op een eigen regel. max-content vraagt de volle rij aan en de max-width
     knipt dat terug tot wat er past -- resultaat: minder rijen, grotere
     knoppen, en op een smal scherm gedraagt hij zich als voorheen. */
  width:max-content; max-width:min(1400px, 99%); }
#toolbar.aan{ display:flex; }
#toolbar .naam{ font-weight:600; margin-right:2px; white-space:nowrap; font-size:15px; }
#toolbar button{ background:#3a362e; color:#f6f3ec; border:none; border-radius:8px;
  padding:8px 13px; font-size:16px; cursor:pointer; font-family:inherit; line-height:1.15; }
#toolbar button:active{ background:#4a463c; }
#toolbar button.rood{ background:#8e3b25; }
#toolbar .tbm{ display:flex; align-items:center; gap:4px; font-size:14px; flex-wrap:wrap;
  justify-content:center; }
/* "× D" en "· vanaf" mogen nooit middenin afbreken: bij de grotere letters
   zette de flexbox de × op de ene en de D op de volgende regel. */
#toolbar .tbm > span{ white-space:nowrap; }
/* De losse tekensymbolen nog een maat groter: als glyph zijn ze optisch
   kleiner dan een letter van dezelfde punthoogte. */
#tbuitlijn button, #tbdraai button{ font-size:19px; padding:7px 12px; }
#toolbar input[type=number]{ width:62px; padding:6px 7px; border:none; border-radius:6px;
  background:#3a362e; color:#f6f3ec; font-family:inherit; font-size:15px; text-align:center; }
#toolbar input[type=number]:focus{ outline:2px solid #b45f3d; }
#tbkleur{ display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; }
/* Elke functie in een eigen kader met de naam erboven, in plaats van één lange
   rij met kleine tussenwoordjes. Sylvain, 11-08: "de tekst behang en overige
   verduidelijkende teksten mogen groter, misschien zet de tekst erboven en
   omkader de functies." */
#tbkleur .tbvak{ display:flex; flex-direction:column; gap:4px; padding:4px 8px 6px;
  border:1px solid #ffffff2b; border-radius:10px; background:#ffffff0a; }
#tbkleur .tbkop{ font-size:12.5px; letter-spacing:.04em; opacity:.9; text-align:center;
  color:#f6f3ec; line-height:1; }
#tbkleur .tbrij{ display:flex; align-items:center; gap:5px; flex-wrap:wrap;
  justify-content:center; }
/* Bovenste rij: de kleuren die je zelf het laatst hebt gekozen, nieuwste
   links. Sylvain, 11-08: "zet uit de kleurkiezer de laatst geselecteerde
   kleuren vast bovenin als opschuifbare selectie." */
#tbkleur .tbrecent{ border-bottom:1px solid #ffffff22; padding-bottom:5px; }
#tbkleur .tbmini{ font-size:11px; opacity:.6; margin-right:2px; }
#tbkleur .swrecent{ border-radius:5px; width:22px; height:22px; }
.tbgroep{ display:flex; gap:3px; padding:3px; border-radius:9px; background:#161410; }
/* de draaiknoppen (↺15 ↺5 ↻1 …): pijl plus getal, beide te klein op 12px */
.tbgroep button{ padding:7px 11px; font-size:15px; }
.sw{ width:24px; height:24px; border-radius:50%; border:1.5px solid rgba(255,255,255,.35);
  cursor:pointer; padding:0; }
/* Een donker staal viel weg tegen de donkere balk; met een lichtere rand zie
   je dat er een kleur staat. */
.sw.donker{ border-color:rgba(255,255,255,.72); }
.sw.aktief{ outline:2px solid #fff; outline-offset:1px; }
.sw.reset{ background:#3a362e; color:#f6f3ec; font-size:14px; width:auto; border-radius:8px;
  padding:3px 9px; height:24px; border:none; }
/* fixed, niet absolute: bij browserzoom of een overlopende layout schoof
   deze knop uit beeld, en dan is er GEEN weg terug meer als de zijbalk
   verborgen is -- precies de vastloper die Sylvain kreeg (31-07). */
/* schuift mee met de lettergrootte: de zijbalk wordt breder, dus deze knop
   moet mee naar rechts, anders staat hij over de tekst heen */
#menuKnop{ position:fixed; left:calc(292px * var(--uischaal, 1)); top:12px; z-index:60; width:40px; height:40px;
  border-radius:10px; border:1px solid var(--hair); background:var(--card); font-size:16px;
  cursor:pointer; color:var(--ink); box-shadow:0 2px 8px var(--schaduw); }
.app.dicht aside{ display:none; }
.app.dicht #menuKnop{ left:12px; width:auto; padding:0 12px; font-size:13px; }
.app.dicht #menuKnop::after{ content:" Menu"; }
/* De objectenknop bestaat alleen op een telefoon; op een breed scherm
   staat de lijst gewoon in de zijbalk. */
#objKnop{ display:none; }
#zoomctl button.aan{ background:#b3541e; color:#fff; border-color:#8e3b25; }
#meetbalk{ display:none; position:absolute; top:12px; left:50%; transform:translateX(-50%);
  z-index:22; background:#26231dee; color:#f6f3ec; padding:8px 12px; border-radius:12px;
  font-size:12.5px; align-items:center; gap:10px; max-width:94%; }
#meetbalk.aan{ display:flex; }
#meetbalk button{ background:#3a362e; color:#f6f3ec; border:none; border-radius:8px;
  padding:5px 10px; font-size:12.5px; cursor:pointer; font-family:inherit; }
#meetbalk button:hover{ background:#4a463c; }
main.meten svg{ cursor:crosshair; }
#zoomctl{ position:fixed; right:12px; bottom:12px; display:flex; flex-direction:column; gap:6px; z-index:20; }
#zoomctl button{ width:40px; height:40px; border-radius:10px; border:1px solid var(--hair);
  background:var(--card); font-size:18px; cursor:pointer; color:var(--ink); box-shadow:0 2px 8px var(--schaduw); }
#maatinfo.aan{ background:#b45f3d; color:#fff; border-color:#b45f3d; }
/* Staat de looproute AAN, dan is de knop gevuld groen -- zelfde groen als de
   lijn op de tekening (#2e7d46), zodat je aan de knop ziet wat je op de
   plattegrond ziet. Sylvain, 08-08: "maak de knop gevuld groen als deze
   geselecteerd is". Uit blijft de gewone knop, alleen wat gedimd. */
/* `#zoomctl button` is specifieker dan `#looprouteKnop` alleen (id + element
   tegen id), dus die won en de knop bleef gewoon donker. Vandaar allebei
   binnen #zoomctl. */
#zoomctl button#looprouteKnop{ background:#2e7d46; color:#fff; border-color:#246036; }
#zoomctl button#looprouteKnop.uit{ opacity:.4; background:var(--card);
  color:var(--ink); border-color:var(--hair); }
#hint{ position:absolute; left:12px; bottom:12px; font-size:11px; color:#7a745f;
  background:var(--panel)cc; border-radius:8px; padding:6px 10px; z-index:20; max-width:46ch; }
#paneelknop{ display:none; }

#overlay{ display:none; position:fixed; inset:0; background:rgba(30,26,20,.45); z-index:50;
  align-items:center; justify-content:center; padding:16px; }
#overlay.aan{ display:flex; }
#modal{ background:var(--panel); border-radius:14px; padding:18px; width:100%; max-width:420px;
  max-height:85dvh; overflow-y:auto; box-shadow:0 20px 60px -20px rgba(0,0,0,.5); }
#modal h2{ font-size:16px; margin:0 0 10px; }
#modal h3{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
  margin:16px 0 6px; }
.mrow{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.mrow input[type=text]{ flex:1; padding:8px 10px; border:1px solid var(--hair); border-radius:8px;
  font-family:inherit; font-size:14px; }
#modal button{ font-family:inherit; font-size:13px; padding:8px 12px; border:1px solid var(--hair);
  border-radius:8px; background:var(--card); cursor:pointer; color:var(--ink); }

/* ── rondleiding: vijf pagina's in één venster, altijd overslaanbaar ──── */
#rondleiding{ position:fixed; inset:0; z-index:95; display:flex;
  align-items:center; justify-content:center; padding:16px;
  background:rgba(24,20,15,.52); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
#rondleiding[hidden]{ display:none; }
.rlkaart{ background:var(--panel); color:var(--ink); border-radius:16px; width:100%;
  max-width:520px; overflow:hidden; box-shadow:0 30px 70px -24px rgba(0,0,0,.6);
  animation:rlop .34s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rlop{ from{ opacity:0; transform:translateY(14px) scale(.98); } }
.rlbeeld{ background:var(--canvas); border-bottom:1px solid var(--hair); }
.rlbeeld svg{ display:block; width:100%; height:auto; }
.rltekst{ padding:20px 24px 4px; }
.rlnr{ margin:0 0 6px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); font-weight:600; }
.rltekst h2{ margin:0 0 8px; font-size:20px; line-height:1.2; }
.rltekst p:last-child{ margin:0; font-size:14px; line-height:1.5; color:var(--muted); }
.rlvoet{ display:flex; align-items:center; gap:12px; padding:18px 20px 20px; }
.rlstippen{ display:flex; gap:7px; margin:0 auto; }
.rlstip{ width:7px; height:7px; padding:0; border:none; border-radius:50%; cursor:pointer;
  background:var(--hair); transition:background .2s ease, transform .2s ease; }
.rlstip.aan{ background:var(--accent); transform:scale(1.35); }
.rlnav{ display:flex; gap:8px; }
.rlkaal, .rlprim{ font:inherit; font-size:13.5px; border-radius:9px; cursor:pointer;
  padding:9px 14px; border:1px solid transparent; }
.rlkaal{ background:none; color:var(--muted); }
.rlniet{ display:flex; align-items:center; gap:6px; font-size:13px;
  color:var(--muted); cursor:pointer; user-select:none; }
.rlniet input{ width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }
.rlkaal:hover{ color:var(--ink); background:var(--hover); }
.rlprim{ background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }
.rlprim:hover{ filter:brightness(1.06); }
@media (max-width:520px){
  .rltekst{ padding:16px 18px 2px; } .rltekst h2{ font-size:18px; }
  /* Op een telefoon paste de rij niet: "Aan de slag" brak over drie regels.
     De stippen krijgen een eigen regel, de knoppen blijven op één lijn. */
  .rlvoet{ padding:12px 14px 16px; gap:6px; flex-wrap:wrap; }
  .rlstippen{ order:3; width:100%; justify-content:center; margin:10px 0 0; }
  .rlnav{ margin-left:auto; }
  .rlkaal, .rlprim{ padding:9px 10px; font-size:13px; white-space:nowrap; }
}

#helpOverlay{ display:none; position:fixed; inset:0; background:rgba(30,26,20,.45); z-index:90;
  align-items:center; justify-content:center; padding:16px; }
#helpOverlay.aan{ display:flex; }
#helpModal{ background:var(--panel); border-radius:14px; padding:20px 22px; width:100%; max-width:640px;
  max-height:88dvh; overflow-y:auto; box-shadow:0 20px 60px -20px rgba(0,0,0,.5); font-size:13.5px; }
#helpModal h3{ margin:0; font-size:17px; }
#helpVersie{ font-size:12px; color:var(--muted); margin-top:2px; }
#helpVersie b{ color:var(--ink); font-weight:600; }
.voorbehoud{ margin:14px 0 4px; padding:10px 12px; border-radius:9px;
  background:var(--chipbg); border:1px solid var(--hair);
  font-size:12.5px; line-height:1.45; color:var(--muted); }
#helpModal h4{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
  margin:20px 0 8px; }
#helpModal h4:first-of-type{ margin-top:16px; }
#helpModal p{ margin:0 0 4px; line-height:1.5; color:var(--ink); }
.helptab{ width:100%; border-collapse:collapse; }
.helptab td{ padding:5px 10px 5px 0; vertical-align:top; border-bottom:1px solid var(--hair); line-height:1.4; }
.helptab td:first-child{ white-space:nowrap; font-weight:600; color:var(--ink); width:1%; }
.helptab td:last-child{ color:var(--muted); }
.helpsectie{ margin-bottom:14px; }
.helpsectie b.helpsectienaam{ display:block; font-size:12.5px; color:var(--ink); margin-bottom:4px; }
.helprij{ display:flex; gap:8px; padding:3px 0; font-size:13px; }
.helprij .helpicoon{ min-width:2.4em; text-align:center; color:var(--accent); font-weight:600; }
.helprij .helptekst{ color:var(--muted); }
#modal button.primair{ background:#26231d; color:#f6f3ec; border-color:#26231d; }
#modal button.klein{ padding:5px 9px; font-size:12px; }
#modal button.rood{ color:#8e3b25; border-color:#e0c4b8; }
.ontwerp{ display:flex; align-items:center; gap:8px; padding:8px 4px; border-bottom:1px solid var(--hair); }
.ontwerp .on{ flex:1; min-width:0; }
.ontwerp .on b{ font-size:13.5px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ontwerp .on span{ font-size:11px; color:var(--muted); }
#ontwerpLijst .leeg, #srvLijst .leeg{ font-size:12.5px; color:var(--muted); padding:8px 2px; }
#srvStatus{ font-size:10px; letter-spacing:0; text-transform:none; color:var(--muted); font-weight:400; }

#d3overlay{ display:none; position:fixed; inset:0; z-index:80; background:var(--canvas); }
#d3overlay.aan{ display:block; }
#d3canvas{ width:100%; height:100%; display:block; touch-action:none; }
#d3top{ position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:81;
  display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:center;
  background:#26231dee; color:#f6f3ec; padding:8px 10px; border-radius:12px; font-size:12.5px;
  max-width:95%; }
#d3top button{ background:#3a362e; color:#f6f3ec; border:none; border-radius:8px;
  padding:6px 10px; font-size:13px; cursor:pointer; font-family:inherit; }
#d3top button.rood{ background:#8e3b25; }
/* Blijft altijd staan (geen display:none meer) en is nu de enige knop
   die de bovenbalk in- en uitklapt -- Sylvain, 07-08: "balk weg als je
   het menu knop nog een keer indrukt, laat de menu knop ook zichtbaar
   als je erop klikt" / "menu dus afhankelijk van deze". Verving de
   aparte "⤢ balk weg"-knop die IN de balk stond: die verdween nu juist
   mee zodra je 'm nodig had. */
#d3home{ position:absolute; right:12px; bottom:426px; z-index:83;
  width:40px; height:40px; border-radius:10px; border:1px solid var(--hair);
  background:var(--card); color:var(--ink); cursor:pointer; padding:0;
  font-family:inherit; box-shadow:0 2px 8px var(--schaduw);
  display:grid; place-items:center; }
.merk{ position:relative; }
.merk:hover{ border-color:var(--accent) !important; color:var(--accent) !important; }
#d3toon{ position:absolute; right:12px; bottom:380px; z-index:83;
  width:40px; height:40px; border-radius:10px; border:1px solid var(--hair);
  background:var(--card); color:var(--ink); font-size:16px; cursor:pointer; padding:0;
  font-family:inherit; box-shadow:0 2px 8px var(--schaduw);
  display:grid; place-items:center; }        /* oog-icoon netjes in het midden */
/* Knoppenrooster rechtsonder, GELIJK in 2D en 3D. Sylvain, 07-08: "zet de
   vergelijkbare buttons op dezelfde hoogte op 3d en 2d modus."
   #zoomctl (2D) is een flexkolom vanaf bottom:12px met 40px knoppen en 6px
   ertussen, dus sleuven van 46px: 12, 58, 104, 150, 196, 242, 288, 334, 380.

   De volgorde van boven naar beneden ligt vast op Sylvains regel van 09-08:
   "menu knop boven aan dan ? dan 2D/3D dan Route, dan opname knop, dan
   overige." Een knop die in een van beide standen niet bestaat wordt
   overgeslagen; de gedeelde functies houden hun gelijke hoogte:

      sleuf   2D (#zoomctl)        3D (#d3overlay)
      380     ? (help)             ☰ balk terughalen
      334     3D                   2D
      288     🚶 looproute         🚶 wandelen
      242     📏 meetlat           ⏺ opname
      196     ⓘ maten              ◧ muren doorzichtig
      150     ＋ inzoomen          --
      104     － uitzoomen         --
       58     ⌂ zoom terug         --
       12     🌙 thema             ☀ sfeer/zon

   De uitklappanelen staan op dezelfde hoogte als hun knop: #loopsnel bij 🚶,
   #opnamestand bij ⏺, #muurpaneel bij ◧, #sfeerpaneel bij ☀. */
#d3dicht{ position:absolute; right:12px; bottom:334px; z-index:83; width:40px; height:40px;
  border-radius:10px; border:1px solid var(--hair); background:var(--card); color:var(--ink);
  font-size:13px; font-weight:700; cursor:pointer; font-family:inherit;
  box-shadow:0 2px 8px var(--schaduw); }
#d3overlay.balkweg #d3top{ display:none; }
#d3sfeer{ position:absolute; right:12px; bottom:12px; z-index:83; width:40px; height:40px;
  border-radius:10px; border:1px solid var(--hair); background:var(--card); color:var(--ink);
  font-size:18px; cursor:pointer; padding:0; font-family:inherit; box-shadow:0 2px 8px var(--schaduw); }
#sfeerpaneel{ position:absolute; right:60px; bottom:12px; z-index:81;
  display:none; flex-direction:column; gap:8px; background:#26231dee; color:#f6f3ec;
  padding:12px 14px; border-radius:12px; font-size:12.5px; min-width:230px; }
#sfeerpaneel.open{ display:flex; }
#sfeerpaneel .sfhead{ font-weight:600; display:flex; align-items:center; gap:7px; cursor:pointer; }
#sfControls{ display:flex; flex-direction:column; gap:7px; }
#sfControls label{ display:flex; flex-direction:column; gap:3px; font-size:11.5px; opacity:.85; }
#sfControls input[type=range]{ width:100%; accent-color:#d99a3a; }

/* Melding dat de server een nieuwere tekening heeft dan de kopie op dit
   apparaat. Zonder deze balk kijkt iemand naar zijn eigen oude versie
   terwijl de tekening allang is bijgewerkt. */
#verseVersie{ display:none; align-items:center; gap:8px; margin:-2px 0 8px;
  padding:7px 9px; border-radius:9px; background:#f3e2cd; color:#6a4a24;
  border:1px solid #dcbf98; font-size:12px; line-height:1.35; }
#verseVersie[hidden]{ display:none; }
#verseVersie.open{ display:flex; }
#verseVersie button{ border:none; border-radius:7px; cursor:pointer;
  font-family:inherit; font-size:12px; padding:5px 9px; background:#8a5a24; color:#fff; }
#verseVersie #verseWeg{ background:none; color:#8a6a45; padding:2px 5px; font-size:14px; }

/* Dekking van de 3D-wanden: knop en paneel onder de zonknop rechtsonder. */
#d3muur{ position:absolute; right:12px; bottom:196px; z-index:83; width:40px; height:40px;
  border-radius:10px; border:1px solid var(--hair); background:var(--card); color:var(--ink);
  font-size:17px; cursor:pointer; padding:0; font-family:inherit; box-shadow:0 2px 8px var(--schaduw); }
/* Zelfde ronde knop-stijl, zelfde plek in de kolom (rechtsonder) als het
   🚶-icoon in #zoomctl dat in 2D de looproute laat zien/verbergen --
   Sylvain, 07-08: "maak gebruik van de zelfde knop voor looproute in
   3d, als in 2d visible." Vervangt de aparte tekstknop "🚶 loop" die
   eerst in de bovenbalk stond. */
#d3loop{ position:absolute; right:12px; bottom:288px; z-index:83; width:40px; height:40px;
  border-radius:10px; border:1px solid var(--hair); background:var(--card); color:var(--ink);
  font-size:17px; cursor:pointer; padding:0; font-family:inherit; box-shadow:0 2px 8px var(--schaduw); }
#d3loop.aan{ background:#8e5b25; color:#fff; border-color:#8e5b25; }
#muurpaneel{ position:absolute; right:60px; bottom:196px; z-index:81;
  display:none; flex-direction:column; gap:8px; background:#26231dee; color:#f6f3ec;
  padding:12px 14px; border-radius:12px; font-size:12.5px; min-width:230px; }
#muurpaneel.open{ display:flex; }
#muurpaneel .mphead{ font-weight:600; display:flex; justify-content:space-between; gap:10px; }
#muurpaneel input[type=range]{ width:100%; accent-color:#d99a3a; }
#muurpaneel .mptoel{ font-size:11px; opacity:.75; line-height:1.35; }
#muurpaneel .mpsnel{ display:flex; gap:6px; }
#muurpaneel .mpsnel button{ flex:1; border:none; border-radius:7px; cursor:pointer;
  font-family:inherit; font-size:11.5px; padding:5px 0; background:#3a362e; color:#f6f3ec; }
#muurpaneel .mpsnel button.aan{ background:#8a6a2f; }
/* Lettergrootte van de bediening. De maat zelf staat als --uischaal op de
   documentwortel; `zoom` schaalt tekst EN knoppen mee, zodat de zijbalk en de
   werkbalk als geheel groter worden en niets over elkaar heen valt.
   Sylvain, 11-08: "letters grootte moet ergens instelbaar zijn (...) niet te
   lezen voor mij." De plattegrond zelf blijft buiten schot: die heeft zijn
   eigen zoomknoppen. Dit paneel schaalt bewust NIET mee -- anders kun je de
   tekst niet meer terugzetten als je hem te groot hebt gemaakt. */
aside, #toolbar, #muurpaneel, #loopsnel, #meetbalk, #modal, #helpModal{
  zoom: var(--uischaal, 1); }
#tekstpaneel{ position:absolute; right:60px; bottom:96px; z-index:83;
  display:none; flex-direction:column; gap:8px; background:#26231dee; color:#f6f3ec;
  padding:12px 14px; border-radius:12px; font-size:13.5px; min-width:250px;
  box-shadow:0 6px 20px #0007; }
#tekstpaneel.open{ display:flex; }
#tekstpaneel .tphead{ font-weight:600; font-size:15px; }
#tekstpaneel .tprij{ display:flex; gap:6px; flex-wrap:wrap; }
#tekstpaneel .tprij button{ flex:1 1 46%; border:none; border-radius:8px; cursor:pointer;
  font-family:inherit; font-size:13.5px; padding:8px 6px; background:#3a362e; color:#f6f3ec; }
#tekstpaneel .tprij button.aan{ background:#8a6a2f; }
#tekstpaneel .tptoel{ font-size:12px; opacity:.8; line-height:1.4; }
#tbkleur .tbkant{ border:none; border-radius:6px; cursor:pointer; font-family:inherit;
  font-size:13px; padding:4px 10px; background:#3a362e; color:#f6f3ec; }
#tbkleur .tbkant.aan{ background:#8a6a2f; }
#tbkleur .behang{ width:28px; height:28px; padding:0; border:1.5px solid rgba(255,255,255,.35);
  border-radius:7px; cursor:pointer; overflow:hidden; background:none; }
#tbkleur .behang.aktief{ outline:2px solid #fff; outline-offset:1px; }
#tbkleur .behang svg{ display:block; width:100%; height:100%; }
#tbkleur .swkies{ width:28px; height:28px; padding:0; border:2px solid #ffffff22;
  border-radius:7px; background:none; cursor:pointer; }
#tbkleur .swcode{ width:80px; height:28px; border:1px solid #ffffff22; border-radius:7px;
  background:#1c1a16; color:#f6f3ec; font-family:inherit; font-size:12.5px;
  text-align:center; padding:0 4px; }
#tbkleur .swcode::placeholder{ color:#f6f3ec55; }
/* schilderij: een klein voorbeeld van de foto plus de maten in centimeters */
#tbkleur .schvoor{ width:34px; height:28px; border-radius:5px; object-fit:cover;
  border:1.5px solid rgba(255,255,255,.35); display:block; }
#tbkleur .schgetal{ width:52px; height:28px; border:1px solid #ffffff22; border-radius:7px;
  background:#1c1a16; color:#f6f3ec; font-family:inherit; font-size:12.5px;
  text-align:center; padding:0 2px; }
#tbkleur .schlabel{ font-size:11px; opacity:.6; margin-left:3px; }
#tbkleur .schknop{ border:none; border-radius:7px; cursor:pointer; font-family:inherit;
  font-size:12.5px; padding:5px 10px; background:#3a362e; color:#f6f3ec; }
/* de kant-en-klare doeken om uit te kiezen */
#tbkleur .schkies{ width:34px; height:28px; padding:0; border:1.5px solid rgba(255,255,255,.35);
  border-radius:5px; cursor:pointer; overflow:hidden; background:none; }
#tbkleur .schkies.aktief{ outline:2px solid #fff; outline-offset:1px; }
#tbkleur .schkies img{ display:block; width:100%; height:100%; object-fit:cover; }
/* Snelheid van de wandeling. Verschijnt vanzelf zodra het lopen begint, zodat
   je hem TIJDENS de rondleiding kunt bijstellen -- Sylvain, 07-08: "wil de
   snelheid van de looproute in kunnen stellen." Zelfde plek en stijl als het
   muurpaneel, maar iets hoger zodat ze elkaar niet overlappen. */
#loopsnel{ position:absolute; right:60px; bottom:288px; z-index:82;
  display:none; flex-direction:column; gap:6px; background:#26231dee; color:#f6f3ec;
  padding:10px 14px; border-radius:12px; font-size:12.5px; min-width:200px; }
#loopsnel.open{ display:flex; }
#loopsnel .lshead{ font-weight:600; display:flex; justify-content:space-between; gap:10px; }
#loopsnel input[type=range]{ width:100%; accent-color:#d99a3a; }
#loopsnel .lssnel{ display:flex; gap:6px; }
#loopsnel .lssnel button{ flex:1; border:none; border-radius:7px; cursor:pointer;
  font-family:inherit; font-size:11.5px; padding:5px 0; background:#3a362e; color:#f6f3ec; }
#loopsnel .lssnel button.aan{ background:#8a6a2f; }
/* Opnameknop: legt de wandeling vast als filmpje om te delen. Rechtsonder,
   onder de loopknop -- Sylvain, 07-08: "opname button dus rechtsonder". */
#d3opname{ position:absolute; right:12px; bottom:242px; z-index:83; width:40px; height:40px;
  border-radius:10px; border:1px solid var(--hair); background:var(--card); color:var(--ink);
  font-size:17px; cursor:pointer; padding:0; font-family:inherit; box-shadow:0 2px 8px var(--schaduw); }
#d3opname.aan{ background:#a52d2d; color:#fff; border-color:#a52d2d; }
#d3opname:disabled{ opacity:.45; cursor:default; }
/* Rode stip + verstreken tijd tijdens de opname, zodat zichtbaar is dat er
   echt vastgelegd wordt. */
#opnamestand{ position:absolute; right:60px; bottom:242px; z-index:82; display:none;
  align-items:center; gap:7px; background:#26231dee; color:#f6f3ec;
  padding:7px 12px; border-radius:999px; font-size:12.5px; }
#opnamestand.open{ display:flex; }
#opnamestand .stip{ width:9px; height:9px; border-radius:50%; background:#e2453f;
  animation:opnameknipper 1s infinite; }
@keyframes opnameknipper{ 0%,100%{opacity:1} 50%{opacity:.25} }
/* Klaar-paneel met bekijken/delen/bewaren. */
#opnameklaar{ position:absolute; right:60px; bottom:58px; z-index:84; display:none;
  flex-direction:column; gap:8px; background:#26231dee; color:#f6f3ec;
  padding:12px 14px; border-radius:12px; font-size:12.5px; min-width:230px; }
#opnameklaar.open{ display:flex; }
#opnameklaar video{ width:100%; border-radius:8px; background:#000; }
#opnameklaar .okknop{ display:flex; gap:6px; }
#opnameklaar .okknop button{ flex:1; border:none; border-radius:7px; cursor:pointer;
  font-family:inherit; font-size:11.5px; padding:6px 0; background:#3a362e; color:#f6f3ec; }
#opnameklaar .okknop button.prim{ background:#8a6a2f; }
#opnameklaar .oktoel{ font-size:11px; opacity:.75; line-height:1.35; }

/* Sluiten hoort rechtsboven, zoals bij elk venster. Uit de flexstroom, dus
   hij verschuift niet mee als de balk over meerdere rijen breekt. */
#tbsluit{ position:absolute; top:6px; right:8px; z-index:2;
  font-size:15px; line-height:1; padding:4px 9px; border-radius:8px; }
#toolbar{ padding-right:38px; }

@media (max-width: 760px){
  /* De bewerkbalk mag op een telefoon flink kleiner: hij ligt over de
     tekening en anders zie je niets meer van je woning. */
  #toolbar{ gap:4px; padding:6px 8px; font-size:12px; max-height:46dvh;
    overflow-y:auto; }
  #toolbar button{ padding:6px 8px; font-size:12px; }
  #toolbar .naam{ font-size:12.5px; }
  #toolbar input[type=number]{ width:52px; padding:5px 6px; font-size:12px; }
  #tbsluit{ top:5px; right:6px; padding:4px 8px; }
  /* links ruimte voor de menuknop die eroverheen zweeft, rechts voor het
     kruisje -- anders schuift het B-veld onder de ☰ */
  #toolbar{ padding-right:34px; padding-left:62px; }

  .app{ flex-direction:column; }
  aside{ width:100%; min-width:0; max-height:44dvh; order:2; border-right:none; border-top:1px solid var(--hair); }
  #menuKnop{ left:12px; }
  main{ order:1; flex:1; }
  #hint{ font-size:10.5px; opacity:.75; }
  .ptop h1{ font-size:13px; }
  /* Op een telefoon vult de plattegrond standaard het scherm; de zijbalk
     komt alleen tevoorschijn via een van de twee knoppen. */
  aside{ display:none; }
  #objKnop{ display:block; position:fixed; left:12px; bottom:12px; z-index:60;
    width:44px; height:44px; border-radius:12px; border:1px solid var(--hair);
    background:var(--card); font-size:19px; cursor:pointer; color:var(--ink);
    box-shadow:0 2px 8px var(--schaduw); }

  /* MENU linksboven: de kop BOVEN de tekening, en verder niets -- het
     zoekveld en de objectenlijst zitten onder de sleutelknop. Sylvain,
     01-08: "zet dit deel boven aan, dus boven de tekening bij klikken op
     menu, en laat de rest weg want dat zit in het andere menu". */
  .app.menuop aside{ display:flex; order:0; max-height:none;
    border-top:none; border-bottom:1px solid var(--hair); }
  .app.menuop #zoek,
  .app.menuop #lijst{ display:none; }
  .app.menuop .ptop{ border-bottom:none; }
  /* de menuknop zweeft over de kop; de titel begint daarnaast */
  .app.menuop .ptop h1{ padding-left:56px; min-height:34px; }

  /* SLEUTEL linksonder: de objectenlijst onder de tekening, met de
     projectkiezer en het zoekveld erbij; de kop blijft weg. De hoogte is
     met de greep bovenaan te verslepen -- Sylvain, 01-08: "maak de
     scheidingslijn tussen het onderste menu en tekening verplaatsbaar
     naar beneden". */
  .app.objop aside{ display:flex; order:2; height:var(--paneelhoogte, 62dvh);
    max-height:88dvh; min-height:16dvh; }
  .app.objop #greep{ display:block; }
  #greep{ display:none; height:22px; flex:0 0 auto; cursor:ns-resize;
    background:var(--panel); border-bottom:1px solid var(--hair);
    touch-action:none; position:relative; }
  #greep::before{ content:""; position:absolute; left:50%; top:9px;
    width:44px; height:4px; margin-left:-22px; border-radius:2px;
    background:var(--hair); }
  .app.objop .ptop h1,
  .app.objop .ptop p,
  .app.objop #ontwerpLabel,
  .app.objop .pbot,
  .app.objop #wieBalk{ display:none; }
  .app.objop .ptop{ padding:8px 12px 6px; }
  /* De knop zweeft over de lijst; zonder deze ruimte valt het onderste
     object eronder en is het niet meer aan te tikken. */
  #lijst{ padding-bottom:64px; }
}
/* Dikker/dunner naast het diepteveld. Sylvain, 02-08: "maak bij de muur tool
   een + en - button om makkelijk de dikte aan te passen." Een muur aanpassen
   ging alleen door het getal te selecteren en te typen; met deze twee gaat
   het per stap van 1 cm, ingedrukt houden herhaalt. */
.dstap{ width:20px; height:22px; padding:0; margin:0 2px; line-height:1;
        font-size:15px; font-weight:600; border-radius:6px; cursor:pointer;
        background:#3a3733; color:#e8e2d6; border:1px solid #4d4842; }
.dstap:hover{ background:#4d4842; }
.dstap:active{ background:#5d574f; }