/* ---- Schermvullende app. Layout-CSS hoort in de head: een stijlblok onderaan
       geeft een zichtbare sprong bij de eerste verf (meting 09-09-2026). ---- */
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--to-papier);color:var(--to-tekst);
  font-family:'Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:13px}
.fys-seo{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

#fysApp{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;position:relative}

/* ---- topbalk ---- */
#fysTop{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--to-vlak);
  border-bottom:1px solid var(--to-lijn);flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;flex:0 0 auto}
#fysTop::-webkit-scrollbar{display:none}
/* [17-09-2026] De balk schuift horizontaal, maar verborg met scrollbar-width
   elke aanwijzing dat er meer stond. Op een telefoon lagen daardoor het menu
   (opslaan, openen, voorbeelden) en de uitleg buiten beeld zonder dat iets dat
   verklapte. Een vervaging aan de kant waar nog iets staat kost geen ruimte en
   verdwijnt vanzelf zodra je aan het eind bent; de klassen zet het script bij
   elke schuifbeweging. */
.fys-schuifbaar{position:relative}
.fys-schuifbaar::before,.fys-schuifbaar::after{content:"";position:absolute;top:0;bottom:0;
  width:22px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:2}
.fys-schuifbaar::before{left:0;background:linear-gradient(to right,var(--to-vlak),transparent)}
.fys-schuifbaar::after{right:0;background:linear-gradient(to left,var(--to-vlak),transparent)}
.fys-schuifbaar.meer-links::before{opacity:1}
.fys-schuifbaar.meer-rechts::after{opacity:1}
#fysTitel{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;border:0;background:none;
  cursor:pointer;font:inherit;font-weight:700;font-size:.95rem;color:var(--to-tekst);padding:4px 6px;border-radius:8px}
#fysTitel:hover{background:var(--to-vlak-2)}
.fys-terug{flex:0 0 auto;color:var(--to-gedempt);text-decoration:none;font-size:.82rem;padding:4px 8px;border-radius:8px;white-space:nowrap}
.fys-terug:hover{background:var(--to-vlak-2);color:var(--to-tekst)}
.fys-scheid{flex:0 0 auto;width:1px;height:22px;background:var(--to-lijn);margin:0 3px}
.fys-rek{flex:1 1 auto;min-width:4px}
.fys-knop{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  min-width:34px;height:34px;padding:0 8px;border:1px solid var(--to-lijn-2);border-radius:9px;
  background:var(--to-vlak);color:var(--to-tekst-2);cursor:pointer;font:inherit;font-size:.8rem}
.fys-knop:hover{border-color:var(--to-merk);color:var(--to-merk)}
.fys-knop:disabled{opacity:.4;cursor:default;border-color:var(--to-lijn)}
.fys-knop:disabled:hover{color:var(--to-tekst-2)}
.fys-knop.aan{background:var(--to-merk);border-color:var(--to-merk);color:var(--to-op-merk)}
.fys-knop svg{width:17px;height:17px;flex:0 0 auto}

/* ---- middenstuk: rail + doek + paneel ---- */
#fysMid{flex:1 1 auto;display:flex;min-height:0;position:relative}
#fysRail{flex:0 0 auto;width:52px;display:flex;flex-direction:column;gap:5px;padding:7px 6px;
  background:var(--to-vlak);border-right:1px solid var(--to-lijn);overflow-y:auto;overflow-x:hidden}
.fys-ger{width:40px;height:40px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  border:1px solid var(--to-lijn-2);border-radius:10px;background:var(--to-vlak);color:var(--to-tekst-2);cursor:pointer;padding:0}
.fys-ger:hover{border-color:var(--to-merk);color:var(--to-merk)}
.fys-ger[aria-pressed="true"]{background:var(--to-merk);border-color:var(--to-merk);color:var(--to-op-merk)}
.fys-ger svg{width:20px;height:20px}

#fysDoekWrap{flex:1 1 auto;position:relative;min-width:0;min-height:0;background:var(--to-papier)}
#doek{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
#fysHint{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:3;pointer-events:none;
  max-width:calc(100% - 24px);padding:7px 14px;border-radius:999px;background:var(--to-vlak);
  border:1px solid var(--to-lijn-2);color:var(--to-tekst-2);font-size:.8rem;box-shadow:var(--to-schaduw);
  text-align:center;transition:opacity .3s ease}
#fysHint[hidden]{display:none}

/* ---- eigenschappenpaneel ---- */
#fysPaneel{flex:0 0 auto;width:232px;background:var(--to-vlak);border-left:1px solid var(--to-lijn);
  padding:11px 12px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
#fysPaneel h2{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--to-gedempt);
  margin:9px 0 3px;font-weight:700}
#fysPaneel h2:first-child{margin-top:0}
.fys-mats{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.fys-mat{display:flex;align-items:center;gap:7px;height:34px;padding:0 9px;border:1px solid var(--to-lijn-2);
  border-radius:9px;background:var(--to-vlak);color:var(--to-tekst-2);cursor:pointer;font:inherit;font-size:.8rem}
.fys-mat:hover{border-color:var(--to-merk)}
.fys-mat[aria-pressed="true"]{border-color:var(--to-merk);color:var(--to-merk);background:var(--to-vlak-2)}
.fys-stip{width:13px;height:13px;border-radius:4px;flex:0 0 auto;border:1px solid rgba(0,0,0,.18)}
.fys-kleuren{display:flex;flex-wrap:wrap;gap:5px}
.fys-kleur{width:26px;height:26px;border-radius:8px;border:2px solid transparent;cursor:pointer;padding:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.fys-kleur[aria-pressed="true"]{border-color:var(--to-tekst)}
.fys-regel{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--to-tekst-2);min-height:30px}
.fys-regel label{flex:0 0 auto;min-width:72px}
.fys-regel input[type=range]{flex:1 1 auto;min-width:0;accent-color:var(--to-merk);height:26px}
.fys-regel output{flex:0 0 auto;min-width:50px;text-align:right;font-variant-numeric:tabular-nums;color:var(--to-gedempt)}
.fys-vink{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--to-tekst-2);cursor:pointer;min-height:34px}
/* display:flex uit de regels hierboven wint van de UA-regel [hidden]{display:none};
   zonder deze twee regels blijft een verborgen schuif gewoon staan. */
.fys-regel[hidden],.fys-vink[hidden]{display:none!important}
.fys-vink input{width:17px;height:17px;accent-color:var(--to-merk)}
.fys-breed{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:34px;
  border:1px solid var(--to-lijn-2);border-radius:9px;background:var(--to-vlak);color:var(--to-tekst-2);
  cursor:pointer;font:inherit;font-size:.8rem}
.fys-breed:hover{border-color:var(--to-merk);color:var(--to-merk)}
.fys-breed:disabled{opacity:.4;cursor:default}
.fys-tip{font-size:.74rem;line-height:1.5;color:var(--to-gedempt-2);margin:2px 0 0}
.fys-regel input[type=color]{flex:0 0 auto;width:34px;height:26px;padding:0;border:1px solid var(--to-lijn-2);
  border-radius:7px;background:none;cursor:pointer}
.fys-richting{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.fys-richting button{height:32px;display:flex;align-items:center;justify-content:center;padding:0;
  border:1px solid var(--to-lijn-2);border-radius:8px;background:var(--to-vlak);color:var(--to-tekst-2);
  cursor:pointer;font:inherit;font-size:.72rem}
.fys-richting button[aria-pressed="true"]{background:var(--to-merk);border-color:var(--to-merk);color:var(--to-op-merk)}
.fys-richting svg{width:15px;height:15px}
#fysVerbinding[hidden]{display:none}

/* ---- zwevend menu in de topbalk ---- */
#fysMenu{position:absolute;right:8px;top:46px;z-index:9400;min-width:222px;padding:6px;
  background:var(--to-vlak);border:1px solid var(--to-lijn-2);border-radius:12px;
  box-shadow:var(--to-schaduw-diep);display:flex;flex-direction:column;gap:2px}
#fysMenu[hidden]{display:none}
#fysMenu button{display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:0 10px;
  border:0;border-radius:8px;background:none;color:var(--to-tekst-2);cursor:pointer;font:inherit;
  font-size:.83rem;text-align:left}
#fysMenu button:hover{background:var(--to-vlak-2);color:var(--to-merk)}
#fysMenu svg{width:16px;height:16px;flex:0 0 auto;opacity:.75}
#fysMenu h3{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--to-gedempt);
  margin:7px 0 2px;padding:0 10px;font-weight:700}

/* ---- knop 'klaar' bij de veelhoek; zweeft boven het doek ---- */
#fysKlaar{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;z-index:5;
  display:none;align-items:center;gap:7px;height:44px;padding:0 18px;border-radius:999px;
  border:1px solid var(--to-merk);background:var(--to-merk);color:var(--to-op-merk);
  cursor:pointer;font:inherit;font-size:.85rem;font-weight:600;box-shadow:var(--to-schaduw-diep)}
#fysKlaar[data-aan]{display:flex}

/* ---- uitleg-overlay ---- */
#fysHelp{position:fixed;inset:0;z-index:9500;background:rgba(15,23,42,.55);display:flex;
  align-items:center;justify-content:center;padding:18px}
#fysHelp[hidden]{display:none!important}
#fysHelpKaart{background:var(--to-vlak);color:var(--to-tekst);border-radius:16px;max-width:520px;width:100%;
  max-height:84vh;overflow-y:auto;padding:22px 24px;box-shadow:var(--to-schaduw-diep);position:relative}
#fysHelpKaart h2{font-size:1.06rem;margin:0 0 8px;font-weight:700}
#fysHelpKaart h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--to-gedempt);
  margin:18px 0 6px;font-weight:700}
#fysHelpKaart p{font-size:.88rem;line-height:1.6;color:var(--to-tekst-2);margin:0 0 9px}
.fys-toetsen{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:.83rem;color:var(--to-tekst-2)}
.fys-toetsen kbd{justify-self:start;background:var(--to-vlak-2);border:1px solid var(--to-lijn-2);
  border-bottom-width:2px;border-radius:6px;padding:1px 7px;font:inherit;font-size:.76rem;white-space:nowrap}
#fysHelpSluit{position:absolute;right:12px;top:12px;width:34px;height:34px;display:flex;
  align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--to-lijn-2);
  background:var(--to-vlak);color:var(--to-tekst-2);cursor:pointer;font-size:1.1rem;line-height:1;padding:0}

/* ---- statusregel ---- */
#fysStatus{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:5px 12px;
  background:var(--to-vlak);border-top:1px solid var(--to-lijn);color:var(--to-gedempt);
  font-size:.75rem;font-variant-numeric:tabular-nums;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
#fysStatus::-webkit-scrollbar{display:none}
#fysStatus b{font-weight:600;color:var(--to-tekst-2)}

/* ---- knop die het paneel opent; alleen op smal scherm zichtbaar ---- */
#fysPaneelKnop{display:none;position:absolute;left:10px;bottom:10px;z-index:4;
  width:44px;height:44px;align-items:center;justify-content:center;border-radius:12px;
  border:1px solid var(--to-lijn-2);background:var(--to-vlak);color:var(--to-tekst-2);
  box-shadow:var(--to-schaduw);cursor:pointer;padding:0}
#fysPaneelKnop svg{width:20px;height:20px}
#fysPaneelSluit{display:none}

/* ---- smal scherm ----
   De gereedschappen gaan naar een horizontaal schuivende rij ONDER het doek,
   het paneel wordt een onderblad. Rechtsonder blijft vrij: daar zweeft de
   zoekknop van Ctrl+K (#dlpalBtn, 44px + marge). De freemium-pil (#tgBanner)
   staat onderin het midden en krijgt ruimte via .has-gate hieronder. */
@media (max-width:820px){
  #fysMid{flex-direction:column}
  #fysRail{flex-direction:row;width:auto;height:auto;order:2;border-right:0;border-top:1px solid var(--to-lijn);
    padding:6px 62px 6px 8px;gap:6px;overflow-x:auto;overflow-y:hidden}
  .fys-ger{width:44px;height:44px}
  #fysDoekWrap{order:1}
  #fysPaneelKnop{display:flex}
  #fysPaneel{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;z-index:9200;
    max-height:64vh;border-left:0;border-top:1px solid var(--to-lijn-2);
    border-radius:16px 16px 0 0;box-shadow:var(--to-schaduw-diep);padding:12px 14px 22px}
  #fysPaneel[hidden]{display:none}
  #fysPaneelSluit{display:flex;align-items:center;justify-content:center;position:absolute;right:10px;top:10px;
    width:34px;height:34px;border-radius:10px;border:1px solid var(--to-lijn-2);background:var(--to-vlak);
    color:var(--to-tekst-2);cursor:pointer;font-size:1.1rem;line-height:1;padding:0}
  .fys-mat,.fys-breed{min-height:44px}
  .fys-knop{min-width:44px;height:44px}
  /* [17-09-2026] De titelknop draagt .fys-knop niet en bleef daardoor als
     enige knop in de app onder de veertig pixels staan (gemeten 81x27). */
  #fysTitel{min-height:44px;padding:4px 10px}
  .fys-kleur{width:34px;height:34px}
  #fysStatus{font-size:.7rem;padding:4px 10px}
  .fys-terug{display:none}
  #fysMenu{right:6px;top:56px;min-width:200px}
  #fysMenu button{min-height:44px}
  .fys-richting button{height:40px}
  /* De 'klaar'-knop van de veelhoek zweeft boven de gereedschapsrij, en
     rechtsonder is bezet door de zoekknop (#dlpalBtn, 44px + marge). */
  #fysKlaar{bottom:10px;left:auto;right:64px;transform:none}
}
@media (max-width:820px){
  /* De freemium-pil zweeft onderin. Ruimte eronder vrijhouden bij de
     STATUSREGEL, niet bij de gereedschapsrij: dan blijft de statustekst
     leesbaar en liggen de knoppen er niet onder. --gateH wordt gemeten door
     gateRuimte() in het simulatieblok. */
  #fysApp.has-gate #fysStatus{padding-bottom:var(--gateH,52px)}
}
/* iOS zoomt in op een invoerveld kleiner dan 16px en zoomt daarna niet terug. */
@media (pointer:coarse){
  #fysPaneel input,#fysPaneel select{font-size:16px}
}