/* CNSLTR Live · het adviesgesprek (18 okt). Bouwt op regie.css: zelfde tokens, raster en paneel.
   Startscherm met drie velden, één vraag per scherm (rijen met een stip, de taal van de werkregels), daarna de conclusie. */

.kop:focus{outline:0}

/* ---------- startscherm ---------- */
.start .veld-groot{min-height:128px}
.start-velden{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.start-veld{display:grid;align-content:start;gap:8px}
.start-veld .veld:disabled{opacity:.55}
.s-link{all:unset;cursor:pointer;justify-self:start;display:inline-flex;align-items:center;min-height:44px;margin-top:-6px;font-size:var(--t1);color:var(--zacht);text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:4px}
.s-link:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:4px}
.s-hint{font-size:var(--t1);line-height:1.45;color:var(--zacht);min-height:44px;display:flex;align-items:center;margin-top:-6px}
.start-voet{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px}
.s-privacy{font-size:var(--t1);line-height:1.5;color:var(--zacht);max-width:46ch}
.s-privacy a{display:inline-flex;align-items:center;min-height:44px;margin:-13px 0;color:inherit;text-underline-offset:3px}
.dash[data-stand="leeg"] :is(.s-link,.s-hint,.s-privacy){color:var(--w-zacht)}
.dash[data-stand="leeg"] .s-link:hover,.dash[data-stand="leeg"] .s-privacy a:hover{color:var(--w)}
.dash[data-stand="leeg"] .start-veld .veld:disabled{opacity:.45}

/* ---------- lezen en schrijven: alleen de grote zin ---------- */
.dash[data-stand="schrijven"] .w-kop{visibility:hidden}
.dash[data-stand="schrijven"] .woorden{grid-row:1/-1}

/* ---------- een verdiepingsvraag ---------- */
.vr{max-width:680px;padding-top:8px}
.vr[hidden]{display:none}
.vr-set{border:0;margin:0;padding:0;min-width:0}
.opties{display:grid;border-top:1px solid var(--haar)}
.optie{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;column-gap:16px;min-height:56px;padding:6px 0;border-bottom:1px solid var(--haar);cursor:pointer}
.optie input[type=radio]{appearance:none;-webkit-appearance:none;margin:0;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--zacht);cursor:pointer;transition:box-shadow .2s var(--ease)}
.optie:hover input[type=radio]{box-shadow:inset 0 0 0 1.5px var(--ink)}
.optie input[type=radio]:checked{box-shadow:inset 0 0 0 1.5px var(--ink),inset 0 0 0 5px var(--w),inset 0 0 0 20px var(--ink)}
.optie input[type=radio]:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.optie-t{font-size:var(--t3);line-height:1.4;text-wrap:pretty}
.optie:has(input:checked) .optie-t{font-weight:500}
.optie-zacht .optie-t{color:var(--zacht)}
.optie-veld{grid-column:2;margin:4px 0 10px}
.optie-veld[hidden]{display:none}
.vr-voet{display:flex;align-items:center;gap:24px;margin-top:32px}
.vr-voet .btn{min-height:48px;min-width:160px}
.vr-voet .btn:disabled{opacity:.3;cursor:default}
.vr-voet .btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.vr-tel{font-size:var(--t2);color:var(--zacht)}

/* ---------- de conclusie ---------- */
.cc{display:grid;gap:32px;max-width:680px;padding:8px 0 24px}
.cc[hidden]{display:none}
.cc-basis{font-size:var(--t2);color:var(--zacht)}
.cc-deel h2{font-size:var(--t2);font-weight:500;letter-spacing:0;margin:0 0 8px}
.cc-deel p{font-size:var(--t3);line-height:1.6;text-wrap:pretty}
.cc-noot{padding-top:24px;border-top:1px solid var(--haar);font-size:var(--t2);line-height:1.55;color:var(--zacht)}
.cc-voet{display:flex;align-items:center;flex-wrap:wrap;gap:16px 24px}
.cc-voet .btn{min-height:48px}
.cc-voet .btn[hidden]{display:none}
.cc-voet .btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.cc-voet .btn[aria-busy="true"]{opacity:.6;cursor:progress}
.cc-status{font-size:var(--t2);line-height:1.5;color:var(--ink);max-width:52ch}
.cc-status:empty{display:none}
.cc .wacht{visibility:hidden}
/* de conclusiekop mag groter dan een vraag */
.dash[data-stand="conclusie"] .kop{font-size:clamp(26px,2.1vw,30px);line-height:1.2;letter-spacing:-.025em}
@media (min-width:981px){ .dash[data-stand="conclusie"] .w-kop{height:auto;min-height:calc(var(--t5)*1.25*3)} }

/* ---------- mobiel ---------- */
@media (max-width:980px){
  .start-velden,.start-voet{grid-template-columns:1fr}
  .start-voet{gap:16px}
  .start-voet .start-knop{order:-1}
  .optie-t{font-size:var(--t2)}
  .vr-voet{flex-wrap:wrap;gap:16px}
  .vr-voet .btn{flex:1 1 100%}
  .cc{gap:28px}
  .cc-deel p{font-size:var(--t2)}
  .cc-voet .btn{width:100%}
  .dash[data-stand="conclusie"] .kop{font-size:24px}
  .dash[data-stand="schrijven"] .w-kop{display:none}
}

@media (prefers-reduced-motion:reduce){
  .optie input[type=radio]{transition:none}
}

/* desktop: de knop blijft altijd in beeld, vast onderaan het werkvlak. Loopt de tekst eronder door,
   dan een zachte overgang boven de knop (geen halve regel); onderaan gescrold staat hij gewoon na de noot. */
@media (min-width:981px){
  .cc-voet{position:sticky;bottom:0;z-index:1;background:var(--w);padding:16px 0 4px}
  .cc-voet::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:56px;background:linear-gradient(rgba(255,255,255,0),var(--w));pointer-events:none;opacity:0;transition:opacity .2s var(--ease)}
  .vlak.loopt .cc-voet::before{opacity:1}
  .vlak.loopt .cc-voet{box-shadow:0 -1px 0 var(--haar)}
  .cc{padding-bottom:0}
}

/* criticus 18 okt: geen grijze knop (geen merkkleur); uitgeschakeld = navy omlijning op wit */
.vr-voet .btn:disabled{opacity:1;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);cursor:default}
/* het paneel zegt al welke vraag het is; naast de knop alleen op telefoon */
@media (min-width:981px){ .vr-tel{display:none} }
/* tablet: de kolom vult de breedte met gelijke marges links en rechts */
@media (min-width:600px) and (max-width:980px){
  .werk{padding-left:32px;padding-right:32px}
  .vr,.cc{max-width:none}
  .vr-voet .btn{flex:0 0 auto}
}