/*
 * W3 Mini readiness check + W4 AI Readiness Snapshot.
 * Gedeelde stijlen voor dilemma-kaarten (.w34-*), daarna per widget.
 */

/* ── Gedeeld: dilemmakaart, opties, schaal ───────────────────────────── */
.w3, .w4 { font-variant-numeric: tabular-nums; }
.w34-card {
    background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md); padding: 32px; color: var(--color-text-primary); min-width: 0;
}
.w34-card .s-kicker { margin-bottom: 12px; }
.w34-scenario p { margin: 0 0 12px; color: var(--color-text-secondary); font-size: 16px; line-height: 1.6; }
.w34-scenario p.w34-ask { color: var(--color-text-primary); font-weight: 650; margin-bottom: 0; }
.w34-help { font-size: 14px; color: var(--color-text-muted); margin: 18px 0 10px; }

.w34-options { display: grid; gap: 8px; margin-top: 18px; }
.w34-option {
    display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%;
    text-align: left; font: inherit; color: inherit; cursor: pointer;
    background: #fff; border: 1.5px solid var(--color-border); border-radius: 14px; padding: 12px 14px;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.w34-option:hover { border-color: var(--color-primary-light); background: var(--color-surface-subtle); }
.w34-option:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.w34-option[aria-checked="true"] { border-color: var(--color-primary); background: var(--color-primary-soft); }
.w34-option-score {
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
    background: var(--color-surface-blue); color: var(--color-primary); font-weight: 800; font-size: 14px;
}
.w34-option[aria-checked="true"] .w34-option-score { background: var(--color-primary); color: #fff; }
.w34-option-body { display: grid; gap: 2px; min-width: 0; }
.w34-option-label { font-weight: 700; font-size: 15.5px; line-height: 1.35; }
.w34-option-desc { font-size: 14px; line-height: 1.5; color: var(--color-text-secondary); }

/* Kleur per score: --color-score-1..5 (0 en 1 delen de eerste kleur). */
.w34-s0, .w34-s1 { --w34-score: var(--color-score-1); }
.w34-s2 { --w34-score: var(--color-score-2); }
.w34-s3 { --w34-score: var(--color-score-3); }
.w34-s4 { --w34-score: var(--color-score-4); }
.w34-s5 { --w34-score: var(--color-score-5); }

.w34-error { margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--color-error-strong); }
.w34-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; align-items: center; }
.w34-actions .s-btn-ghost { margin-left: auto; }
.w34-message { margin-top: 14px; }

@media (max-width: 767px) {
    .w34-card { padding: 22px 18px; border-radius: 18px; }
    .w34-option { grid-template-columns: 30px minmax(0, 1fr); padding: 11px 12px; gap: 10px; }
    .w34-option-score { width: 28px; height: 28px; }
    .w34-actions .s-btn { flex: 1 1 auto; }
    .w34-actions .s-btn-ghost { margin-left: 0; }
}

/* ── W3 Mini readiness check ─────────────────────────────────────────── */
.w3 { max-width: none; }
.w3-result { margin-top: 20px; padding: 20px; border-radius: 16px; background: var(--color-bg); border: 1px solid var(--color-border); }
.w3-result[hidden] { display: none; }
/* Na een klik: de uitkomst op de plek van de antwoorden ("Change answer" zet ze terug).
   Naast elkaar blijven de antwoorden onzichtbaar ruimte innemen, zodat de kaart even hoog blijft
   (zie de container query hieronder); smal zou dat een groot leeg vlak geven. */
.w3 .w34-col-answers { position: relative; }
.w3-answered .w34-options { display: none; }
.w3-answered .w3-result { margin-top: 0; }
.w3-result .w34-actions .s-btn-ghost { margin-left: auto; }
.w3-dark .w3-result .s-btn-ghost { color: #5EE0EE; }
.w3-dark .w3-result .s-btn-ghost:hover { background: rgba(255, 255, 255, .08); }
.w3-result-title { font-size: 18px; font-weight: 750; margin: 0 0 6px; }
.w3-result-text { margin: 0; color: var(--color-text-secondary); font-size: 15.5px; line-height: 1.55; }
.w3-scale { position: relative; margin: 14px 0 18px; padding-top: 4px; }
.w3-scale-track { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.w3-scale-track span { height: 10px; border-radius: 6px; background: var(--color-chart-faint); }
.w3-scale-track span.is-filled { background: var(--w34-score, var(--color-primary)); }
.w3-scale-labels { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 6px; font-size: 12px; color: var(--color-text-muted); text-align: center; }
.w3-scale-labels span.is-current { color: var(--color-text-primary); font-weight: 800; }
.w3-result .w34-actions { margin-top: 16px; }
.w3-foot { margin: 16px 0 0; font-size: 13.5px; color: var(--color-text-muted); }

/* Donkere variant (ink-secties) */
.w3-dark .w34-card { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); box-shadow: none; color: #fff; }
.w3-dark .w34-card .s-kicker { color: #5EE0EE; }
.w3-dark .w34-scenario p { color: rgba(255, 255, 255, .8); }
.w3-dark .w34-scenario p.w34-ask { color: #fff; }
.w3-dark .w34-option { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .2); color: #fff; }
.w3-dark .w34-option:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .45); }
.w3-dark .w34-option[aria-checked="true"] { background: rgba(94, 224, 238, .14); border-color: #5EE0EE; }
.w3-dark .w34-option:focus-visible { box-shadow: 0 0 0 3px #5EE0EE; }
.w3-dark .w34-option-score { background: rgba(255, 255, 255, .12); color: #fff; }
.w3-dark .w34-option[aria-checked="true"] .w34-option-score { background: #5EE0EE; color: var(--color-text-primary); }
.w3-dark .w34-option-desc { color: rgba(255, 255, 255, .74); }
.w3-dark .w3-result { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); }
.w3-dark .w3-result-text, .w3-dark .w3-scale-labels { color: rgba(255, 255, 255, .78); }
.w3-dark .w3-scale-labels span.is-current, .w3-dark .w3-result-title { color: #fff; }
.w3-dark .w3-scale-track span { background: rgba(255, 255, 255, .16); }
.w3-dark .w3-scale-track span.is-filled { background: var(--w34-score, #5EE0EE); }
.w3-dark .w3-foot { color: rgba(255, 255, 255, .66); }
.s-bg-ink .w3-dark p.w3-result-title { color: #fff; }

/* ── W4 AI Readiness Snapshot ────────────────────────────────────────── */
.w4 { max-width: none; }
.w4-start-card { max-width: none; }
.w4-start-card .w34-card { padding: 26px; }
.w4-start-card .w34-scenario p { font-size: 15px; }
.w4-head { margin-bottom: 16px; }
.w4-step { font-size: 13px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--color-brand-teal); margin: 0 0 10px; }
.w4-step:focus { outline: none; }
.w4-step:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; border-radius: 4px; }
.w4-progress { height: 6px; border-radius: 6px; background: var(--color-chart-faint); overflow: hidden; }
.w4-progress i { display: block; height: 100%; background: var(--color-primary); border-radius: inherit; transition: width .25s ease; }
.w4-busy { position: relative; }
.w4-busy::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: w4-spin .7s linear infinite; vertical-align: -2px; }
@keyframes w4-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .w4-busy::after { animation: none; } .w4-progress i { transition: none; } }

.w4-result:focus, .w4-result:focus-visible { outline: none; }
.w4-result-title { margin: 0 0 12px; font-size: 22px; font-weight: 750; line-height: 1.3; }
.w4-result-title strong { display: block; font-size: 56px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--color-primary); }
.w4-result-title strong small { font-size: 22px; font-weight: 700; color: var(--color-text-muted); letter-spacing: 0; }
.w4-result-text { margin: 0 0 22px; color: var(--color-text-secondary); line-height: 1.6; }
.w4-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.w4-bar-label { display: block; font-size: 15px; font-weight: 650; margin-bottom: 6px; }
.w4-bar-label span { font-weight: 500; color: var(--color-text-secondary); }
.w4-bar-track { display: block; position: relative; height: 14px; border-radius: 8px; background: var(--color-chart-faint);
    background-image: linear-gradient(90deg, transparent calc(20% - 1px), #fff calc(20% - 1px), #fff 20%, transparent 20%, transparent calc(40% - 1px), #fff calc(40% - 1px), #fff 40%, transparent 40%, transparent calc(60% - 1px), #fff calc(60% - 1px), #fff 60%, transparent 60%, transparent calc(80% - 1px), #fff calc(80% - 1px), #fff 80%, transparent 80%); }
.w4-bar-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: var(--w34-score); min-width: 6px; }
.w4-bar-low .w4-bar-track { box-shadow: 0 0 0 2px var(--color-warning-border); }
.w4-scale-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--color-text-muted); margin-top: 6px; }
.w4-start { margin-top: 22px; padding: 18px 20px; border-radius: 16px; background: var(--color-warning-soft); border: 1px solid var(--color-warning-border); }
.w4-start p { margin: 0; color: var(--color-text-secondary); line-height: 1.55; }
.w4-start strong { color: var(--color-text-primary); }

.w4-details { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--color-border); }
.w4-details:focus, .w4-details:focus-visible { outline: none; }
.w4-details-title { font-size: 20px; font-weight: 750; margin: 0 0 6px; }
.w4-details-intro { margin: 0 0 18px; color: var(--color-text-secondary); }
.w4-details .s-form-row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.w4-details .s-form-row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.w4-success { margin-top: 28px; padding: 22px; border-radius: 16px; background: var(--color-success-soft); border: 1px solid #BBE5C8; }
.w4-success:focus, .w4-success:focus-visible { outline: none; }
.w4-success p { margin: 0; color: var(--color-text-primary); line-height: 1.6; }
@media (max-width: 767px) {
    .w4-result-title strong { font-size: 44px; }
    .w4-details .s-form-row-3, .w4-details .s-form-row-2 { grid-template-columns: 1fr; }
}

/* Programmatische focus op containers (uitslag, bevestiging): geen ring. */
.w4-result:focus-visible, .w4-details:focus-visible, .w4-success:focus-visible { box-shadow: none; }
.w4-step:focus-visible { box-shadow: none; }

/* Naast elkaar in plaats van onder elkaar: de kaart meet zijn eigen breedte (container query).
   Breed (≥ 760px): situatie en vraag links, antwoorden en knoppen rechts, zodat een dilemma
   in één scherm past. Smal: alles onder elkaar, zoals op mobiel. */
.w34-card { container-type: inline-size; }
@container (min-width: 760px) {
    .w34-cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 36px; align-items: start; }
    .w34-col-text { position: sticky; top: 96px; }
    .w34-col-answers .w34-options { margin-top: 0; }
    .w34-option { padding: 10px 14px; }
    .w34-option-desc { font-size: 13.5px; line-height: 1.45; }
    .w34-help { margin: 14px 0 0; }
    .w3-answered .w34-options { display: grid; visibility: hidden; }
    .w3-answered .w3-result { position: absolute; top: 0; left: 0; right: 0; }
}
/* Middelbreed (520–759px): tablets: antwoorden in twee kolommen onder de vraag. */
@container (min-width: 520px) and (max-width: 759px) {
    .w34-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .w34-option { padding: 10px 12px; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
    .w34-option-desc { font-size: 13px; line-height: 1.45; }
}
/* Heel breed (≥ 1000px): de antwoorden rechts ook in twee kolommen; een dilemma past dan ruim in één scherm. */
@container (min-width: 1000px) {
    .w34-col-answers .w34-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .w34-col-answers .w34-option { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
    .w34-col-answers .w34-option-score { width: 26px; height: 26px; font-size: 13px; }
    .w34-col-answers .w34-option-label { font-size: 14.5px; }
}