.ws-toetsen{ display:none; margin:10px 0 0; }
#wsGrid:has(.cb:focus-visible) + .ws-toetsen{ display:block; }
.pt-ws-bar{ display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:10px 12px;
  background:var(--to-vlak); border:1px solid var(--to-lijn); border-radius:12px; margin-bottom:14px;
  box-shadow:0 8px 24px -18px rgba(15,23,42,.28); position:sticky; top:8px; z-index:20; }
.ws-rij{ display:flex; align-items:center; gap:6px 18px; min-width:0; }
.ws-gereedschap{ flex-wrap:nowrap; }
.ws-grp{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.ws-meer-wrap{ position:relative; margin-left:auto; flex:0 0 auto; }
.ws-meer-wrap[hidden]{ display:none; }
.ws-meer-paneel{ position:absolute; right:0; top:calc(100% + 6px); z-index:30; display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  padding:10px; background:var(--to-vlak); border:1px solid var(--to-lijn-2); border-radius:12px; box-shadow:0 16px 36px -14px rgba(15,23,42,.4);
  width:max-content; max-width:min(320px, calc(100vw - 24px)); }
.ws-meer-paneel[hidden]{ display:none; }
.ws-meer-paneel .ws-grp{ flex-wrap:wrap; }
.ws-afronden{ flex-wrap:wrap; padding-top:8px; border-top:1px solid var(--to-lijn); }
.ws-afronden .pt-count-pill{ flex:0 0 auto; white-space:nowrap; }
.ws-afronden .ws-naam{ flex:1 1 12rem; min-width:0; }
.ws-afronden #wsFinish{ flex:0 0 auto; margin-left:auto; }
.pt-tbtn.ws-ic{ width:36px; height:36px; padding:0; justify-content:center; }
.pt-ws-bar .pt-tbtn svg{ flex:0 0 auto; width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ws-grp .pt-tbtn:not(.ws-ic), .ws-meer-wrap .pt-tbtn{ min-height:36px; }
.ws-grp .pt-seg button{ min-height:36px; }
.ws-grp .pt-selall{ min-height:36px; white-space:nowrap; }
.ws-gereedschap.ws-krap .ws-meer-t{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.ws-gereedschap.ws-krap #wsMeer{ width:36px; height:36px; padding:0; justify-content:center; }
.pt-tbtn{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--to-lijn-2); background:var(--to-vlak);
  border-radius:9px; padding:8px 12px; font:inherit; font-size:.85rem; font-weight:600; color:var(--to-tekst-2); cursor:pointer; }
.pt-tbtn:hover{ background:var(--to-vlak-2); }
.pt-tbtn:disabled{ opacity:.4; cursor:default; }
.pt-ws-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:14px; }
.pt-cell{ position:relative; background:var(--to-vlak); border:1px solid var(--to-lijn); border-radius:12px;
  padding:10px 10px 8px; text-align:center; cursor:grab; transition:border-color .12s, box-shadow .12s; }
.pt-cell:active{ cursor:grabbing; }
.pt-cell.sel{ border-color:var(--to-merk); box-shadow:0 0 0 3px color-mix(in srgb,var(--to-merk) 22%,transparent); }
.pt-cell.dragover{ border-color:var(--to-merk); border-style:dashed; }
.pt-cell.drop-voor::before, .pt-cell.drop-na::after{
  content:""; position:absolute; top:4px; bottom:4px; width:4px; border-radius:3px;
  background:var(--to-merk); box-shadow:0 0 0 2px var(--to-vlak); z-index:3;
  pointer-events:none;
}
.pt-cell.drop-voor::before{ left:-8px; }
.pt-cell.drop-na::after{ right:-8px; }
.pt-cell.sel .cb{ accent-color:var(--to-merk); }
.pt-cell .cv{ height:150px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pt-cell canvas{ max-width:100%; max-height:150px; box-shadow:0 1px 6px rgba(15,23,42,.18); background:var(--to-vlak); transition:transform .15s; }
.pt-cell .cb{ position:absolute; top:8px; left:8px; width:17px; height:17px; accent-color:var(--to-merk); cursor:pointer; }
.pt-cell .nm{ margin-top:8px; font-size:.78rem; font-weight:600; color:var(--to-tekst);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pt-cell .meta{ font-size:.72rem; color:var(--to-gedempt-2); margin-top:2px; }
.pt-addcell{ border:2px dashed var(--to-lijn-2); border-radius:12px; display:flex; flex-direction:column; gap:8px;
  align-items:center; justify-content:center; min-height:190px; color:var(--to-merk); cursor:pointer;
  font-size:.85rem; font-weight:600; background:var(--to-papier); }
.pt-addcell:hover{ background:var(--to-vlak-2); border-color:var(--to-merk); }
.ws-uitkomst{ margin:0 0 12px; }
.ws-uitkomst:has(.pt-status:empty):not(:has(.dlbus-btn)){ margin:0; }
.pt-count-pill{ font-size:.78rem; color:var(--to-tekst-2); background:var(--to-vlak-2); border-radius:999px; padding:3px 10px; }
.ws-naam{ display:inline-flex; align-items:center; gap:4px; font-size:.85rem; color:var(--to-gedempt); }
:root .ws-naam .pt-input{ width:10.5rem; min-height:36px; padding:.32rem .6rem; font-size:.85rem; }
:root .ws-afronden .ws-naam .pt-input{ flex:1 1 auto; width:auto; min-width:6rem; }
.ws-naam .ws-ext{ flex:0 0 auto; }
.pt-cell .ws-loep{ position:absolute; top:6px; right:6px; z-index:2; width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--to-lijn-2); border-radius:7px; background:var(--to-vlak); color:var(--to-tekst-2); cursor:zoom-in; padding:0; }
.pt-cell .ws-loep:hover{ background:var(--to-vlak-2); color:var(--to-merk); }
@media (pointer:coarse), (max-width:560px){
  .pt-cell .cb{ width:24px; height:24px; top:6px; left:6px; }
  .pt-cell .ws-loep{ width:34px; height:34px; top:4px; right:4px; }
}
.ws-groot{ position:fixed; inset:0; z-index:90; background:rgba(15,23,42,.74); display:flex; flex-direction:column; align-items:center; gap:10px; padding:12px; box-sizing:border-box; }
.ws-groot-kop{ display:flex; align-items:center; gap:8px; max-width:100%; background:var(--to-vlak); color:var(--to-tekst); border-radius:12px; padding:6px 8px 6px 14px; box-shadow:var(--to-schaduw-diep); }
.ws-groot-kop strong{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.9rem; }
.ws-groot-tel{ font-size:.8rem; color:var(--to-gedempt); white-space:nowrap; }
.ws-groot-vlak{ flex:1; min-height:0; width:100%; display:flex; align-items:center; justify-content:center; }
.ws-groot-vlak canvas{ display:block; max-width:100%; max-height:100%; background:#fff; box-shadow:0 12px 40px rgba(0,0,0,.5); }
.pt-ws-bar{ container-type:inline-size; }
@container (max-width:640px){
  .ws-afronden::after{ content:""; order:1; flex-basis:100%; height:0; }
  .ws-afronden .ws-naam, .ws-afronden #wsFinish{ order:2; }
  .ws-afronden{ row-gap:8px; }
}
@media (max-width:640px){
  :root .ws-naam .pt-input{ font-size:16px; }
  .pt-ws-grid{ grid-template-columns:repeat(auto-fill,minmax(126px,1fr)); }
  .pt-cell .cv{ height:120px; }
  .pt-cell canvas{ max-height:120px; }
}