.pe-werk{ --pe-r:1.7778; --pe-ar:16 / 9; display:flex; border:1px solid var(--to-lijn); border-radius:12px; overflow:hidden;
  height:min(66vh, 640px); min-height:280px; background:var(--to-lijn); }
.pe-zij{ flex:0 0 172px; overflow-y:auto; overflow-x:hidden; background:var(--to-papier); border-right:1px solid var(--to-lijn);
  padding:10px 10px 10px 4px; display:flex; flex-direction:column; gap:10px; outline:none; touch-action:pan-y; }
.pe-werk.zonder-zij .pe-zij{ display:none; }
.pe-duim{ display:flex; gap:4px; align-items:flex-start; cursor:pointer; position:relative; flex:0 0 auto; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.pe-nr{ flex:0 0 20px; font-size:.72rem; color:var(--to-gedempt); text-align:right; padding-top:2px; font-variant-numeric:tabular-nums; }
.pe-plaat{ flex:1 1 auto; min-width:0; display:block; aspect-ratio:var(--pe-ar); background:#fff; border:1px solid var(--to-lijn-2);
  border-radius:3px; overflow:hidden; }
.pe-plaat img{ display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.pe-duim:hover .pe-plaat{ border-color:var(--to-gedempt-2); }
.pe-duim.actief .pe-plaat{ border-color:var(--to-merk); box-shadow:0 0 0 2px var(--to-merk); }
.pe-zij:focus-visible .pe-duim.actief .pe-plaat{ box-shadow:0 0 0 3px var(--to-merk); }
.pe-duim.verborgen .pe-plaat{ opacity:.45; }
.pe-duim.verborgen .pe-nr{ text-decoration:line-through; }
.pe-duim.sleept{ opacity:.45; }
.pe-duim.voor::before, .pe-duim.na::after{ content:""; position:absolute; left:22px; right:0; height:3px; border-radius:2px; background:var(--to-merk); }
.pe-duim.voor::before{ top:-7px; }
.pe-duim.na::after{ bottom:-7px; }
.pe-vlak{ flex:1 1 auto; min-width:0; min-height:0; overflow:auto; display:flex; padding:24px; box-sizing:border-box;
  container-type:size; touch-action:pan-y pinch-zoom; }
.pe-dia{ margin:auto; flex:0 0 auto; position:relative; background:#fff; aspect-ratio:var(--pe-ar);
  width:min(100cqw, calc(100cqh * var(--pe-r))); box-shadow:0 1px 3px rgba(15,23,42,.18), 0 8px 24px rgba(15,23,42,.10); }
.pe-dia.vast{ aspect-ratio:auto; }
.pe-dia{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; outline:none; }
.pe-dia.toetsfocus{ box-shadow:0 0 0 2px var(--to-merk), 0 8px 24px rgba(15,23,42,.10); }
.pe-dia canvas.pe-laag{ position:absolute; left:0; top:0; display:none; transform-origin:0 0; pointer-events:none; }
.pe-dia.lagen canvas.pe-laag{ display:block; }
.pe-dia.lagen #peDoek{ visibility:hidden; }
.pe-dia.lagen canvas.pe-laag-sel{ will-change:transform; }
.pe-sel-laag{ position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.pe-sel-laag .pe-sel-vak{ fill:transparent; stroke:#1d6fd8; stroke-width:1.25; pointer-events:all; touch-action:none; }
.pe-sel-laag .pe-sel-vak.vast{ stroke:#64748b; stroke-dasharray:4 3; }
.pe-sel-laag .pe-sel-samen{ fill:none; stroke:#1d6fd8; stroke-width:1; stroke-dasharray:5 4; }
.pe-sel-laag .pe-sel-groep{ fill:none; stroke:#64748b; stroke-width:1; stroke-dasharray:6 4; }
.pe-sel-laag .pe-sel-kader{ fill:rgba(29,111,216,.08); stroke:#1d6fd8; stroke-width:1; stroke-dasharray:4 3; }
.pe-sel-laag .pe-hulplijn{ stroke:#e8590c; stroke-width:1; stroke-dasharray:5 3; }
.pe-sel-laag .pe-draai-steel{ stroke:#1d6fd8; stroke-width:1; }
.pe-sel-laag .pe-greep .vang{ fill:transparent; pointer-events:all; touch-action:none; }
.pe-sel-laag .pe-greep .zicht{ fill:#fff; stroke:#1d6fd8; stroke-width:1.25; pointer-events:none; }
.pe-sel-laag .pe-draai .vang{ cursor:grab; }
.pe-sel-maat{ font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.pe-dia canvas{ display:block; width:100%; height:100%; }
.pe-ph-laag{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.pe-ph{ position:absolute; box-sizing:border-box; border:1px dashed rgba(100,116,139,.7); border-radius:2px; }
.pe-ph-naam{ position:absolute; left:6px; top:4px; max-width:calc(100% - 12px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:.72rem; line-height:1.25; color:#64748b; background:rgba(255,255,255,.85); padding:1px 5px; border-radius:3px; }
.pe-dia.fout::after{ content:attr(data-fout); position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:16px; text-align:center; color:#475569; background:#f1f5f9; font-size:.9rem; }
.rb .pe-kleurknop{ cursor:pointer; }
.rb .pe-kleurknop input[type="color"]{ width:30px; height:22px; min-height:0; padding:0; margin:0; border:1px solid var(--to-lijn-2);
  border-radius:4px; background:none; display:block; cursor:pointer; }
.pe-typ{ position:absolute; left:0; top:0; transform-origin:0 0; display:flex; flex-direction:column; justify-content:flex-start; box-sizing:border-box; z-index:2; }
.pe-typ.anker-ctr{ justify-content:center; }
.pe-typ.anker-b{ justify-content:flex-end; }
.pe-typ.wacht{ opacity:0; }
.pe-typ.sluit{ pointer-events:none; }
.pe-typ-houder{ position:relative; flex:none; }
.pe-typ-tekst{ outline:none; white-space:pre-wrap; overflow-wrap:break-word; word-break:normal; line-height:0; color:#000; cursor:text;
  -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; font-variant-ligatures:none; font-feature-settings:"liga" 0, "clig" 0;
  font-synthesis:weight style; text-rendering:geometricPrecision; -webkit-text-size-adjust:none; text-size-adjust:none; }
.pe-typ.nowrap .pe-typ-tekst{ white-space:pre; }
.pe-typ-tekst .pe-tp{ margin:0; line-height:0; }
.pe-typ-tekst .pe-tp.leeg{ line-height:var(--lh, 1.2); }
.pe-typ-tekst .pe-tp > span{ line-height:var(--lh, 1.2); }
.pe-typ-tekst .pe-tp.bu::before{ content:var(--bu); display:inline-block; min-width:var(--bu-w, 0); margin-right:var(--bu-na, 0); font-family:var(--bu-font);
  font-size:var(--bu-sz); color:var(--bu-kleur); line-height:0; text-indent:0; white-space:pre; font-weight:400; font-style:normal; text-decoration:none; }
.pe-typ-tekst .pe-tv, .pe-typ-tekst .pe-tx, .pe-typ-tekst .pe-ts{ -webkit-user-select:all; user-select:all; }
.pe-typ-tekst .pe-ts.mist{ outline:1px dashed #8a94a6; outline-offset:-1px; }
.pe-typ-hint{ position:absolute; left:0; right:0; top:0; pointer-events:none; color:#8a94a6; white-space:pre-wrap; overflow-wrap:break-word; }
.pe-dia.typt .pe-sel-laag .pe-greep, .pe-dia.typt .pe-sel-laag .pe-draai-steel{ display:none; }
.pe-dia.typt .pe-sel-laag .pe-sel-vak{ stroke-dasharray:4 3; pointer-events:none; }
html.vs-vol #peDropCard, html.vs-vol #peStatus{ display:none !important; }
html:not(.vs-vol) #peMelding{ display:none; }
html.vs-vol .pe-zij, html.vs-vol .pe-vlak{ overscroll-behavior:contain; }
html.vs-vol .pe-werk{ flex:1 1 auto; height:auto; min-height:0; border-radius:0; border-left:0; border-right:0; }
@media (max-width:720px){
  .pe-werk{ flex-direction:column; height:auto; min-height:0; }
  .pe-vlak{ order:1; container-type:inline-size; padding:12px; max-height:70vh; }
  .pe-dia{ width:100cqw; }
  .pe-zij{ order:2; flex:0 0 auto; flex-direction:row; overflow-x:auto; overflow-y:hidden; border-right:0;
    border-top:1px solid var(--to-lijn); padding:8px 10px; gap:8px; scrollbar-width:thin; }
  .pe-duim{ flex:0 0 104px; flex-direction:column; gap:2px; }
  .pe-nr{ flex:0 0 auto; text-align:left; padding:0 0 0 2px; }
  .pe-plaat{ width:100%; }
  .pe-duim.voor::before, .pe-duim.na::after{ top:0; bottom:0; width:3px; height:auto; left:auto; right:auto; }
  .pe-duim.voor::before{ left:-6px; }
  .pe-duim.na::after{ right:-6px; }
  #peOnderbalk{ gap:3px 10px; padding:6px 10px; background:var(--to-papier); }
  #peOnderbalk > .ot-ob-zoom{ margin-left:auto; gap:3px; }
  #peOnderbalk > .ot-ob-zoom input[type="range"]{ display:none; }
  #peOnderbalk > .ot-ob-zoom .ot-ob-knop{ width:28px; height:28px; }
  #peOnderbalk > #peMelding{ flex:1 1 100%; order:5; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #peOnderbalk > #peSelMaat{ flex:1 1 100%; order:4; }
  .pe-notitie{ min-height:72px; }
}
.pe-dia.invoegen, .pe-dia.invoegen *{ cursor:crosshair !important; }
.pe-dia.invoegen{ touch-action:none; }
.pe-sel-laag .pe-teken{ fill:rgba(29,111,216,.06); stroke:#1d6fd8; stroke-width:1.25; stroke-dasharray:5 3; }
.pe-sel-laag line.pe-teken{ fill:none; }
.pe-dia.sleepbeeld{ box-shadow:0 0 0 3px var(--to-merk), 0 8px 24px rgba(15,23,42,.10); }
.pe-notities{ display:flex; border:1px solid var(--to-lijn); border-top:0; background:var(--to-papier); }
.pe-notities.dicht{ display:none; }
.pe-notitie{ flex:1 1 auto; min-width:0; box-sizing:border-box; border:0; margin:0; padding:8px 12px; resize:vertical; min-height:58px; max-height:40vh;
  font:inherit; font-size:.88rem; line-height:1.45; color:var(--to-tekst); background:transparent; outline:none; }
.pe-notitie:focus-visible{ box-shadow:inset 0 0 0 2px var(--to-merk); }
.pe-notitie::placeholder{ color:var(--to-gedempt); }
.ot-ob-knop.pe-ob-notities{ width:auto; padding:0 8px; height:22px; }
.ot-ob-knop.pe-ob-notities[aria-pressed="true"]{ border-color:var(--to-merk); color:var(--to-merk); }
html.vs-vol .pe-notities{ flex:0 0 auto; border-left:0; border-right:0; }
.pe-concept{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:8px 12px; margin:0 0 8px; border:1px solid var(--to-merk);
  border-radius:8px; background:var(--to-vlak-2); color:var(--to-tekst); font-size:.88rem; }
.pe-concept > span{ flex:1 1 260px; min-width:0; overflow-wrap:anywhere; }
.pe-concept .pt-btn{ margin:0; }
.rb .pe-tot .pe-kleurknop{ gap:4px; }