/* CNSLTR Live · het dashboard (A3)
   Eén scherm, geen pagina: links het navy paneel (vraag, vier werkregels, uw materiaal), rechts het witte werkvlak
   met één kop die zegt wat er gebeurt en daaronder de tool. Alles op één raster van 8 px. */

/* ---------- tokens ---------- */
.dash{
  --ink:#0a1628; --zacht:#536073; --haar:rgba(10,22,40,.10); --mist:#f3f5f8;
  --w:#fff; --w-zacht:rgba(255,255,255,.66); --w-haar:rgba(255,255,255,.14); --w-ring:rgba(255,255,255,.42);
  /* letters: één schaal (13 · 15 · 18 · 24 · kop) */
  --t1:13px; --t2:15px; --t3:18px; --t4:22px; --t5:26px; --t6:clamp(36px,4.2vw,68px);
  /* raster */
  --balk:64px; --pw:376px; --px:40px; --wx:clamp(32px,4.4vw,64px); --wmax:1120px;
  --ease:cubic-bezier(.2,.75,.22,1);
}
.dash-body{background:var(--white);overflow:hidden}
/* geen automatische lettervergroting op telefoons: de maten blijven zoals ontworpen (anders groeien vakken en verspringt de tool) */
html:has(.dash-body){-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ---------- indeling: 100svh, de pagina scrolt niet ---------- */
.dash{display:grid;grid-template-columns:var(--pw) minmax(0,1fr);grid-template-rows:var(--balk) minmax(0,1fr);
  height:100vh;height:100svh;color:var(--ink)}

/* ---------- bovenbalk ---------- */
.balk{display:contents}
.balk-l{grid-area:1/1;position:relative;z-index:2;display:flex;align-items:center;gap:16px;padding:0 var(--px);background:var(--ink);color:var(--w);
  box-shadow:inset 0 -1px 0 var(--w-haar)}
.balk-r{grid-area:1/2;position:relative;z-index:2;display:flex;align-items:center;justify-content:flex-end;padding:0 var(--wx);box-shadow:inset 0 -1px 0 var(--haar)}
.d-logo{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:inherit;text-decoration:none}
.d-bol{display:block;width:32px;height:32px}
.d-logo .wm{display:block;height:12px;aspect-ratio:8.3307;background:currentColor;-webkit-mask:url(../wordmark.svg) center/contain no-repeat;mask:url(../wordmark.svg) center/contain no-repeat}
.d-live{display:flex;align-items:center;gap:16px;font-size:var(--t2);font-weight:400;letter-spacing:.01em}
.d-live::before{content:"";width:1px;height:16px;background:var(--w-ring)}
.d-sluit{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:var(--t2);color:var(--ink);text-decoration:underline;text-decoration-color:rgba(10,22,40,.3);text-underline-offset:5px}
.d-sluit:hover{text-decoration-color:var(--ink)}
.d-logo:focus-visible{outline:2px solid var(--w);outline-offset:4px;border-radius:4px}

/* ---------- paneel ---------- */
.paneel{grid-area:2/1;position:relative;z-index:2;min-height:0;min-width:0;overflow:hidden;display:flex;flex-direction:column;gap:32px;
  padding:40px var(--px) 32px;background:var(--ink);color:var(--w)}
.p-kop{display:grid;gap:8px}
.p-kop [hidden]{display:none}
.p-intro{font-size:var(--t4);line-height:1.3;font-weight:400;letter-spacing:-.02em;text-wrap:balance}
.p-host{font-size:var(--t1);color:var(--w-zacht)}
/* de naam mag twee regels; die hoogte staat vanaf het begin vast, puntjes pas na twee regels */
.p-naam{min-height:2.4em;display:flex;align-items:flex-end;font-size:var(--t4);line-height:1.2;font-weight:500;letter-spacing:-.025em}
.p-naam[hidden]{display:none}
.p-naam span{text-wrap:balance;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.p-host{min-height:1.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-vraag{margin-top:4px;font-size:var(--t2);line-height:1.5;color:var(--w-zacht);quotes:"“" "”";
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.p-vraag::before{content:open-quote}.p-vraag::after{content:close-quote}

/* vier werkregels, elk met een witte stip */
.regels{list-style:none;margin:0;padding:0;border-top:1px solid var(--w-haar)}
.regels > li{display:grid;grid-template-columns:12px 88px minmax(0,1fr);grid-template-rows:48px;grid-auto-rows:auto;align-items:center;column-gap:16px;padding:0;border-bottom:1px solid var(--w-haar)}
.regels i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--w-ring);transition:box-shadow .3s var(--ease),background .3s var(--ease)}
.regels b{font-size:var(--t2);font-weight:400;color:var(--w-zacht)}
.regels span{min-width:0;font-size:var(--t1);line-height:1.45;color:var(--w);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.regels > li:not(.actief) span{display:none}
.regels > li[data-s="bezig"] i{box-shadow:inset 0 0 0 1.5px var(--w),inset 0 0 0 3.5px var(--ink),inset 0 0 0 12px var(--w)}
.regels > li[data-s="klaar"] i{background:var(--w);box-shadow:none}
.regels > li[data-s="open"] i{box-shadow:inset 0 0 0 1.5px var(--w)}
.regels > li[data-s] b{color:var(--w)}
/* overgeslagen (geen of geen leesbare website): een rustige streep in plaats van een stip, met de reden */
.regels > li[data-s="overgeslagen"] i{height:1.5px;border-radius:1px;background:var(--w-ring);box-shadow:none}
.regels > li[data-s="overgeslagen"] b{color:var(--w-zacht)}
.regels > li[data-s="overgeslagen"] span{display:block;color:var(--w-zacht)}
/* het advies is ingeklapt tot één regel; uitklapbaar */
.advies-knop{all:unset;cursor:pointer;justify-self:start;display:inline-flex;align-items:center;min-height:44px;font-size:var(--t1);color:var(--w-zacht);text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:4px}
.advies-knop[hidden]{display:none}
.advies-knop:hover{color:var(--w)}
.advies-knop:focus-visible{outline:2px solid var(--w);outline-offset:3px;border-radius:4px}
.advies-knop[aria-expanded="true"]::after{content:", inklappen"}
/* advies: drie regels onder Adviseren; inhoud, dus ook zichtbaar als de regel niet actief is */
.advies{grid-column:2/-1;list-style:none;margin:4px 0 4px;padding:0;display:grid;gap:6px}
.advies[hidden]{display:none}
.advies li{position:relative;padding-left:16px;font-size:var(--t1);line-height:1.45;color:var(--w)}
.advies li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--w-ring)}
/* bouwen: de stip vult zich per vak dat inkt wordt */
@property --vul{syntax:"<percentage>";inherits:false;initial-value:0%}
.regels > li[data-r="bouwen"] i{background:linear-gradient(to top,var(--w) var(--vul),transparent var(--vul));transition:--vul .4s var(--ease),box-shadow .3s var(--ease)}
.regels > li[data-r="bouwen"][data-s="bezig"] i{box-shadow:inset 0 0 0 1.5px var(--w)}

/* uw materiaal: alleen kaartjes die er helemaal op passen */
.plank{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column}
.plank[hidden]{display:none}
.plank-kop{all:unset;display:flex;align-items:center;gap:12px;min-height:44px;margin-bottom:8px;font-size:var(--t2)}
.plank-kop b{font-weight:400}
.plank-kop span{font-size:var(--t1);color:var(--w-zacht);font-variant-numeric:tabular-nums}
.plank-kop:focus-visible{outline:2px solid var(--w);outline-offset:4px;border-radius:4px}
.plank-noot{font-size:var(--t1);line-height:1.5;color:var(--w-zacht);padding-bottom:16px}
.plank-noot[hidden]{display:none}
.kaarten{list-style:none;margin:0;padding:0;flex:1;min-height:0;min-width:0;overflow:hidden}
.kaart{padding:12px 0 14px;border-top:1px solid var(--w-haar);cursor:default;outline:0}
.kaart:focus-visible{box-shadow:inset 2px 0 0 var(--w);padding-left:12px}
.kaart q{background:linear-gradient(var(--w),var(--w)) 0 100%/0 1px no-repeat;transition:background-size .2s var(--ease)}
.kaart.wijs q{background-size:100% 1px}
.kaart[data-weg]{display:none}
.kaart-meer{padding:12px 0 0;border-top:1px solid var(--w-haar);font-size:var(--t1);color:var(--w-zacht);list-style:none}
.kaart-meer[hidden]{display:none}
.kaart-kop{display:flex;justify-content:space-between;gap:12px;min-width:0;font-size:var(--t1);color:var(--w-zacht)}
.kaart-kop b{position:relative;padding-left:16px;font-weight:400;color:var(--w)}
.kaart-kop b{flex:none}
.kaart-kop span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kaart-kop b::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;box-shadow:inset 0 0 0 1.25px var(--w-ring);transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.kaart.gezet .kaart-kop b::before{background:var(--w);box-shadow:none}
.kaart q{display:block;margin-top:4px;font-size:var(--t2);line-height:1.45;quotes:"“" "”";text-wrap:pretty}
@media (min-width:981px){.kaart q{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}}
/* een kaartje schrijft in van links naar rechts (geen fade, geen verschuiving) */
.inschrijf{animation:inschrijf .45s var(--ease) both}
@keyframes inschrijf{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* warm: pas na klaar */
.warm{display:grid;justify-items:start;gap:4px}
.warm[hidden]{display:none}
.warm .btn{min-height:48px;padding:0 24px}
.warm .d-link{color:var(--w);text-decoration-color:rgba(255,255,255,.4)}
.warm .d-link:hover{text-decoration-color:var(--w)}
.warm .btn:focus-visible,.warm .d-link:focus-visible{outline:2px solid var(--w);outline-offset:3px}
.warm-noot{font-size:var(--t1);color:var(--w-zacht)}
.dash[data-warm="afmaken"] .warm [data-warm="afmaken"],.dash[data-warm="deel"] .warm [data-warm="deel"]{visibility:hidden}
.warm-noot:empty{display:none}

.d-link{all:unset;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;font-size:var(--t2);color:var(--ink);text-decoration:underline;text-decoration-color:rgba(10,22,40,.3);text-underline-offset:5px}
.d-link:hover{text-decoration-color:var(--ink)}
.d-link:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}

/* ---------- werkvlak ---------- */
.werk{grid-area:2/2;min-width:0;min-height:0;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);row-gap:24px;
  padding:32px var(--wx) 32px;position:relative;z-index:2}
.werk > *{width:100%;max-width:var(--wmax)}
/* de kopstrook: vaste hoogte (drie regels), één maat en één basislijn voor elke kop, ook voor de vraag.
   De knoppen hebben een vaste kolom rechts, ook als ze er niet staan: de kop breekt dus altijd op dezelfde breedte. */
.w-kop{height:calc(var(--t5)*1.25*3);display:grid;grid-template-columns:minmax(0,1fr) 296px;align-items:end;column-gap:32px}
.kop{font-size:var(--t5);line-height:1.25;font-weight:400;letter-spacing:-.02em;text-wrap:pretty;max-width:40ch}
.w-regel{display:flex;align-items:center;justify-content:flex-end;min-height:48px}
.w-regel > [hidden]{display:none}
.w-sub{font-size:var(--t2);color:var(--zacht)}
.vraag-knoppen{display:flex;align-items:center;gap:24px}
.vraag-knoppen .btn{min-height:48px;white-space:nowrap}
.dash[data-stand="leeg"] .w-kop{height:auto;display:block}
.dash[data-stand="leeg"] .kop{font-size:clamp(34px,3.4vw,52px);line-height:1.08;letter-spacing:-.035em;max-width:18ch;text-wrap:balance}
.dash[data-stand="leeg"] .w-regel{display:none}
/* lezen, kaarten en het wachten op het recept: alleen de zin van de site, geen statuskop (die staat in het paneel) */
.dash:is([data-stand="lezen"],[data-stand="kaarten"],[data-stand="skelet"]) .w-kop{visibility:hidden}
.dash:is([data-stand="lezen"],[data-stand="kaarten"],[data-stand="skelet"]) .woorden{grid-row:1/-1}

/* de opening: alleen de kop, het veld en de bol. Het paneel is er nog niet; de invoer lijnt uit met het logo */
@media (min-width:981px){
  .dash[data-stand="leeg"] .paneel{visibility:hidden}
  .dash[data-stand="leeg"] .werk{grid-column:1/-1;grid-template-columns:min(720px,100%);grid-template-rows:auto auto;justify-content:center;align-content:center;padding:0 var(--px) 8vh}
}

/* rij 2: startscherm, werktekening of tool, steeds op dezelfde plek */
.tool[hidden]{display:none}
.start,.woorden,.vlak{grid-row:2;grid-column:1;min-height:0}
.start[hidden],.woorden[hidden],.vlak[hidden],.warm-m[hidden]{display:none}
.dash[data-stand="leeg"] .start{padding-top:16px}

.start{display:grid;align-content:start;gap:24px;max-width:720px}
.veld{width:100%;min-height:48px;border:0;border-radius:12px;padding:0 16px;font:300 var(--t2)/1.5 var(--font);color:var(--ink);background:var(--mist)}
.veld::placeholder{color:#6b7584}
.veld:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--ink)}
.veld-groot{display:block;min-height:160px;padding:16px 20px;font-size:var(--t3);line-height:1.5;resize:none}
.start-rij{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px}
.start-site{display:grid;gap:8px}
.lab{font-size:var(--t1);color:var(--zacht)}
.start-knop{min-width:160px;min-height:48px}
.start-fout{font-size:var(--t1);color:var(--ink)}

/* zijn woorden groot: één letterlijke zin tegelijk in het lege werkvlak */
.woorden{display:grid;align-content:center;gap:16px;padding-bottom:32px}
/* twee zinnen in één cel: de nieuwe schrijft in van links naar rechts terwijl de oude op dezelfde lijn wijkt (nooit leeg) */
.woorden-tekst{display:grid;max-width:22ch;font-size:var(--t6)}
.wz{grid-area:1/1;display:block;font-size:inherit;line-height:1.08;font-weight:500;letter-spacing:-.04em;text-wrap:balance;quotes:"“" "”";overflow-wrap:break-word;hyphens:manual}
.wz.citaat::before{content:open-quote}.wz.citaat::after{content:close-quote}
.woorden-label{font-size:var(--t2);color:var(--zacht);min-height:1.5em}

/* de route: drie stappen in open stippen, verbonden door een stippellijn (de taal van de route op de site) */
.d-route{grid-row:1/-1;grid-column:1;display:grid;align-content:start;gap:32px;padding-top:clamp(24px,8vh,96px)}
.d-route[hidden]{display:none}
.route-lijst{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:24px}
.route-lijst li{position:relative;display:grid;gap:16px;align-content:start}
.route-lijst li:not(:last-child)::after{content:"";position:absolute;left:32px;right:-16px;top:9px;height:2px;
  background:radial-gradient(circle,var(--ink) 1px,transparent 1.4px) 0 50%/8px 4px repeat-x;height:4px;top:8px;opacity:.45}
.r-stip{width:20px;height:20px;overflow:visible}
.r-stip circle{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-dasharray:0 4.2}
.r-naam{font-size:var(--t4);line-height:1.3;letter-spacing:-.015em;text-wrap:balance}
/* de potloodschets onder de route: drie vakken in open stippen, in de vorm van een eerste scherm */
.rs-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-rows:120px 168px;gap:16px 24px;margin-top:16px}
.rs-vak{position:relative}
.rs-vak svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rs-vak rect{width:calc(100% - 2px);height:calc(100% - 2px);fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-dasharray:0 6;opacity:.45}
.rs-1{grid-column:1;grid-row:1}.rs-2{grid-column:1;grid-row:2}.rs-3{grid-column:2;grid-row:1 / span 2}
/* in de eindstand korte citaten, zodat er altijd gezette kaartjes passen */
@media (min-width:981px){ .dash:is([data-stand="demo"],[data-stand="klaar"]) .kaart q{-webkit-line-clamp:2} }

/* de tool en (na klaar) het warm-vak; dit vlak mag binnenin scrollen als het scherm laag is */
.vlak{overflow:auto;overscroll-behavior:contain;scroll-margin-top:16px;border-top:1px solid transparent;transition:border-color .2s var(--ease)}
/* gescrold: een haarlijn markeert de bovenrand, zodat niets 'afgesneden' oogt */
.vlak.gescrold{border-top-color:var(--haar)}
.warm-m,.advies-m,.m-status{display:none}
.dash[data-warm="afmaken"] .warm-m [data-warm="afmaken"],.dash[data-warm="deel"] .warm-m [data-warm="deel"]{display:none}
/* het warm-vak staat op de plek van de tool, zonder kader */
.warm-vak{position:relative;max-width:640px}
.warm-vak[hidden]{display:none}
.warm-vak .cw{border:0;border-radius:0;padding:0;margin:0;max-width:none;background:none}
.terug{margin-top:16px}
.terug[hidden]{display:none}

/* ---------- het navy dek (startscherm) ----------
   In "leeg" is alles navy met de invoer in wit. Na Start schuift alleen de rand in .9 s naar het paneel (transform).
   De rand stopt precies onder de rand van het (zelf navy) paneel, dat erboven ligt: geen naad mogelijk. */
.dek{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100svh;z-index:1;background:var(--ink);pointer-events:none;
  transform:translateX(0);transition:transform .9s cubic-bezier(.22,1,.36,1);will-change:transform}
.dash:not([data-stand="leeg"]) .dek{transform:translateX(calc(var(--pw) - 100vw))}
.dash[data-stand="leeg"] .balk-r{box-shadow:inset 0 -1px 0 var(--w-haar)}
.dash[data-stand="leeg"] .d-sluit{color:var(--w);text-decoration-color:rgba(255,255,255,.4)}
.dash[data-stand="leeg"] .d-sluit:focus-visible{outline-color:var(--w)}
.dash[data-stand="leeg"] .werk{color:var(--w)}
.dash[data-stand="leeg"] .veld{background:rgba(255,255,255,.07);color:var(--w);box-shadow:inset 0 0 0 1px var(--w-haar)}
.dash[data-stand="leeg"] .veld::placeholder{color:rgba(255,255,255,.5)}
.dash[data-stand="leeg"] .veld:focus{box-shadow:inset 0 0 0 1.5px var(--w)}
.dash[data-stand="leeg"] .lab{color:var(--w-zacht)}
.dash[data-stand="leeg"] .start-fout{color:var(--w)}
.dash[data-stand="leeg"] .start-knop:focus-visible{outline:2px solid var(--w);outline-offset:3px}

/* smallere desktop: het paneel blijft een vaste maat */
@media (min-width:981px) and (max-width:1279px){ .dash{--pw:320px} }

/* ---------- lage schermen: compacter, maar niets valt weg ---------- */
@media (min-width:981px) and (max-height:820px){
  .dash{--balk:64px}
  .paneel{padding-top:32px;gap:24px}
  .werk{padding-top:32px;padding-bottom:32px;row-gap:24px}
  .regels > li{min-height:44px;padding:6px 0}
}

/* ---------- mobiel: het paneel wordt een strook bovenaan, de pagina mag scrollen ---------- */
@media (max-width:980px){
  .dash-body{overflow:auto}
  .dash{display:block;height:auto;--px:16px;--wx:16px;--t5:26px;--t6:34px}
  .balk{display:flex;justify-content:space-between;align-items:center;height:56px;padding:0 16px;background:var(--ink);color:var(--w)}
  .balk-l,.balk-r,.dash[data-stand="leeg"] .balk-r{padding:0;background:none;box-shadow:none}
  .d-bol{width:28px;height:28px}
  .d-logo{gap:10px}
  .d-logo .wm{height:11px}
  .d-live{gap:12px;font-size:var(--t1)}
  .d-sluit{color:var(--w);text-decoration-color:rgba(255,255,255,.4);font-size:var(--t1)}
  .d-sluit:focus-visible{outline-color:var(--w)}
  .dek{position:absolute;width:100%}
  .dash:not([data-stand="leeg"]) .dek{transform:translateY(-100%)}
  .balk{position:relative;z-index:2}
  .paneel{display:block;padding:8px 16px 4px;border-radius:0 0 24px 24px;margin-top:-1px}
  .p-kop{gap:4px;padding-bottom:12px}
  .p-intro{font-size:var(--t2);line-height:1.45;color:var(--w-zacht);font-weight:300;letter-spacing:0}
  .p-naam{font-size:20px}
  .p-vraag{font-size:var(--t1);-webkit-line-clamp:2;margin-top:0}
  .regels > li{display:none;min-height:44px;border-bottom:0}
  .regels > li.actief{display:grid}
  .dash[data-stand="leeg"] .regels{display:none}
  .plank{display:block}
  .plank-kop{width:100%;box-sizing:border-box;min-height:48px;padding:0;border-top:1px solid var(--w-haar);cursor:pointer}
  .plank-kop::after{content:"Bekijk";margin-left:auto;font-size:var(--t1);color:var(--w-zacht)}
  .plank-kop[aria-expanded="true"]::after{content:"Sluit"}
  .plank-noot{padding:0 0 12px}
  .kaarten{display:none;overflow:visible;padding-bottom:12px}
  .plank-kop[aria-expanded="true"] ~ .kaarten{display:block}
  .kaart[data-weg]{display:block}
  .warm{display:none}
  .werk{display:block;padding:24px 16px 40px;overflow:visible}
  .werk > * + *{margin-top:24px}
  .w-kop{height:auto;min-height:0;align-content:start;display:grid;grid-template-columns:1fr;row-gap:16px}
  .w-regel{justify-content:flex-start}
  .dash[data-stand="leeg"] .paneel{display:none}
  .kaart-meer{display:none}
  /* op mobiel blijft de strook even hoog (0 px verspringen): het advies staat onder de tool */
  .regels .advies{display:none}
  .advies-m{display:grid;gap:8px;margin-top:40px}
  .advies-m[hidden]{display:none}
  .advies-m h2{font-size:var(--t2);font-weight:500}
  .advies-m .advies{display:grid;margin:0}
  .advies-m .advies li{color:var(--ink)}
  .advies-m .advies li::before{background:var(--zacht)}
  .dash:is([data-stand="lezen"],[data-stand="kaarten"],[data-stand="skelet"]) .w-kop{display:none}
  .warm-vak{max-width:none}
  .regels span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vlak.gescrold{border-top-color:transparent}
  .kop{max-width:none;text-wrap:balance}
  .dash[data-stand="vraag"] .kop{font-size:var(--t4)}
  .w-regel:not(:has(> :not([hidden]))){display:none}
  .vraag-knoppen{flex-wrap:wrap;gap:8px 24px}
  .start{max-width:none}
  .start-rij{grid-template-columns:1fr}
  .start-knop{width:100%}
  .veld-groot{min-height:136px;font-size:var(--t2)}
  .woorden{min-height:280px;padding-bottom:0}
  .woorden-tekst{max-width:100%}
  /* de statusregel: vast bovenaan, één regel, alleen als het paneel uit beeld is */
  .m-status{display:grid;position:fixed;top:0;left:0;right:0;z-index:20;display:grid;grid-template-columns:10px auto minmax(0,1fr);align-items:center;column-gap:12px;height:44px;padding:0 16px;
    background:var(--ink);color:var(--w);font-size:var(--t1);transform:translateY(-100%);transition:transform .25s var(--ease);pointer-events:none}
  .m-status.aan{transform:none}
  .m-status i{width:8px;height:8px;border-radius:50%;background:var(--w)}
  .m-status b{font-weight:400}
  .m-status span{color:var(--w-zacht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #tool .kv,.tool{scroll-margin-top:60px}
  /* vaste breedte: geen verspringen als de schuifbalk verschijnt */
  html:has(.dash-body){scroll-padding-top:56px}
  .d-route{min-height:280px;padding-bottom:0}
  .route-lijst{grid-auto-flow:row;gap:20px}
  .route-lijst li{grid-template-columns:20px minmax(0,1fr);align-items:center;gap:16px}
  .route-lijst li:not(:last-child)::after{content:none}
  .r-naam{font-size:var(--t3)}
  .rs-raster{grid-template-columns:1fr;grid-template-rows:72px 96px 120px;gap:12px;margin-top:8px}
  .rs-1,.rs-2,.rs-3{grid-column:1;grid-row:auto}
  .p-naam{min-height:1.2em}
  .advies-knop{display:none}
  .vlak{overflow:visible;border-top:0}
  .warm-m{display:grid;justify-items:start;gap:4px;margin-top:40px;padding-top:24px;border-top:1px solid var(--haar)}
  .warm-m[hidden]{display:none}
}

@media (prefers-reduced-motion:reduce){
  .inschrijf{animation:none}
  .dek{transition:none}
  .m-status{transition:none}
  .regels i,.kaart-kop b::before{transition:none}
}

/* desktop: het resultaatvak scrolt zelf, met een zachte rand onderaan alleen als het overloopt */
#tool .kv-uit.loopt-over{overflow:auto;overscroll-behavior:contain;-webkit-mask-image:linear-gradient(#000 calc(100% - 32px),transparent);mask-image:linear-gradient(#000 calc(100% - 32px),transparent);padding-bottom:16px}
#tool .kv-uit[style*="max-height"]{overflow:auto}

/* het resultaatvak is zo hoog als zijn inhoud (max-height via pasUit), geen leeg vlak onderin */
#tool .kit-kol > .kv-resultaat{flex:0 0 auto}
#tool .kv-resultaat > .kv-lagen{flex:none}

/* melding van /api/tool: een kleine regel boven het resultaat, niet in de tekst voor de klant */
#tool .kv .uit-melding{display:block;width:auto;max-width:none;margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--haar);font-size:12.5px;line-height:1.45;color:var(--zacht);white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word;-webkit-line-clamp:unset}

/* herkomst aanwijzen: een lijn onder de titel van het gegeven dat uit het aangewezen kaartje komt */
#tool .kv-inh [data-kaart] :is(.kv-ot,.kv-rt){position:relative}
#tool .kv-inh [data-kaart] :is(.kv-ot,.kv-rt)::after,#tool .kv-inh [data-kaart]:not(:has(.kv-ot,.kv-rt))::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease);pointer-events:none}
#tool .kv-inh [data-kaart]:not(:has(.kv-ot,.kv-rt)){position:relative}
#tool .kv-inh [data-kaart].wijs :is(.kv-ot,.kv-rt)::after,#tool .kv-inh [data-kaart].wijs:not(:has(.kv-ot,.kv-rt))::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){#tool .kv-inh [data-kaart] *::after,#tool .kv-inh [data-kaart]::after,.kaart q{transition:none}}

/* tablet (600–980): de strook in twee kolommen, zodat hij laag blijft */
@media (min-width:600px) and (max-width:980px){
  .paneel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;align-items:start;padding-bottom:8px}
  .p-kop{grid-column:1;grid-row:1 / span 2;padding-bottom:8px}
  .regels{grid-column:2;grid-row:1}
  .plank{grid-column:2;grid-row:2}
  .regels > li{min-height:40px}
  .plank-kop{min-height:44px}
}