/* ============================================================
   tools.css: interactieve tools (sitewide wizard /que-necesitas/ en
   roadmap-pagina's, calculators en assistenten in de rail of inline,
   strategieboom /admin/estrategia/). Alleen geladen op pagina's die zo'n
   tool renderen: 'css' => ['tools'] in seo_context() (zie head.php).
   Nieuwe tool-CSS hoort HIER, niet in main.css.
   ============================================================ */

/* ==== Sitewide wizard (/que-necesitas/) en roadmap-pagina's =============
   Designtaal F: flat, tokens only. De vraagkaarten volgen de taal van de
   NIE-routekaarten (border-strong, ink-inversie op hover); het gele
   stapnummerblok is het signatuurelement van de roadmap-pagina's. */

.wizard { margin: 8px 0 52px; }
.wizard-progress {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--red);
    margin: 0 0 10px;
}
.wizard-question {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.5rem, 2.5vw, 1.9rem);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    margin: 0 0 41px;
}
.wizard-options { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 760px) { .wizard-options { grid-template-columns: 1fr; gap: 14px; } }

/* Gegroepeerde eerste stap: twee gelabelde kolommen met elk 3 kaarten. */
.wizard-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 14px; align-items: start; }
@media (max-width: 760px) { .wizard-groups { grid-template-columns: 1fr; gap: 28px; } }
.wizard-group-label {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink);
    margin: 0 0 14px;
}
.wizard-groups .wizard-options { grid-template-columns: 1fr; gap: 14px; }

/* Optie met icoon: witte kaart als rij met genummerde badge in een eigen
   cel (hairline-divider over de volle hoogte), dan icoon, dan tekst.
   Vaste breedtes zodat de tekst in elke knop op dezelfde x begint. */
.wizard-option.wizard-option-has-icon {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: var(--bg);
}
.wizard-option-numcell {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    border-right: 1px solid var(--ink);
}
.wizard-option-num {
    display: inline-block;
    background: var(--yellow);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    padding: 6px 9px;
    line-height: 1;
}
.wizard-option-icon { flex: none; align-self: center; width: 52px; height: 52px; margin-left: 22px; }
.wizard-option-icon svg { display: block; width: 100%; height: 100%; }
.wizard-option-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    text-align: left;
    padding: 22px 24px 22px 20px;
}
.wizard-option:hover .wizard-option-numcell { border-color: var(--on-ink-line); }
.wizard-option:hover .wizard-option-num { color: var(--ink); }

/* Tweede groep (Moving & paperwork): badge omgekeerd, geel op inkt. */
.wizard-group:nth-child(2) .wizard-option-num { background: var(--ink); color: var(--yellow); }
.wizard-group:nth-child(2) .wizard-option:hover .wizard-option-num { color: var(--yellow); }
.wizard-option {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: var(--border-strong);
    padding: 24px 26px;
    background: var(--yellow);
    color: var(--ink);
    text-decoration: none;
    transition: background 200ms ease, color 200ms ease;
}
.wizard-option-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    line-height: var(--lh-tight);
}
.wizard-option-text { color: var(--muted); font-size: 0.98rem; }
.wizard-option:hover { background: var(--ink); color: var(--bg); }
@media (max-width: 760px) {
    [data-node="inicio"] .wizard-option {
        box-sizing: border-box;
        min-height: 76px;
        justify-content: center;
        gap: 4px;
        padding: 12px 14px;
    }
    [data-node="inicio"] .wizard-option-title { font-size: 1rem; }
    [data-node="inicio"] .wizard-option-text { font-size: clamp(0.72rem, 3.5vw, 0.86rem); }
    [data-node="inicio"] .wizard-option-has-icon { gap: 0; justify-content: flex-start; padding: 0; }
    [data-node="inicio"] .wizard-option-numcell { width: 58px; }
    [data-node="inicio"] .wizard-option-num { font-size: 0.85rem; padding: 5px 7px; }
    [data-node="inicio"] .wizard-option-icon { width: 30px; height: 30px; margin-left: 12px; }
    [data-node="inicio"] .wizard-option-body { gap: 2px; align-items: flex-start; padding: 10px 12px 10px 10px; }
}
.wizard-option:hover .wizard-option-title { color: var(--yellow); }
.wizard-option:hover .wizard-option-text { color: var(--bg); }
.wizard-option:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.wizard-exit { margin: 22px 0 0; font-size: 0.95rem; }
.wizard-exit a, .wizard-back a { color: var(--muted); }
.wizard-back { margin: 26px 0 0; font-size: 0.95rem; }
.wizard-fallback-question {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin: 0 0 12px;
}
/* Geneste no-JS-boom: subvragen als ingesprongen details binnen .decision. */
.wizard-fallback .decision-options details { border-top: var(--border-hair); }
.wizard-fallback .decision-options summary {
    cursor: pointer;
    list-style: none;
    padding: 14px 8px;
    font-family: var(--font-display);
    font-weight: 700;
}
.wizard-fallback .decision-options summary::-webkit-details-marker { display: none; }
.wizard-fallback .decision-options summary:hover { background: var(--yellow); }
.wizard-fallback .decision-options .decision-options { padding-left: 22px; }
.wizard-fallback .decision-leaf { margin: 0 0 10px; padding: 4px 8px; }
.wizard-fallback .decision-leaf a { font-weight: 600; }

.roadmap-cambiar { margin: 14px 0 0; font-size: 0.95rem; }
.roadmap-cambiar a { color: var(--muted); }
.roadmap { list-style: none; margin: 0; padding: 0; border-top: var(--border-strong); }
.roadmap-paso {
    border-bottom: var(--border-hair);
    padding: 30px 8px 26px;
    scroll-margin-top: 24px;
}
.roadmap-paso-titulo {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    margin: 0 0 14px;
}
.roadmap-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--yellow);
    border: var(--border-strong);
    font-size: 1.3rem;
}
.roadmap-paso p { max-width: 68ch; margin: 0 0 10px; }
.roadmap-dep { font-size: 0.92rem; color: var(--muted); }
.roadmap-dep a { color: var(--muted); }
.roadmap-go { margin-bottom: 0; }
.roadmap-go a { font-weight: 700; }
.roadmap-mientras ul, .roadmap-relacionados ul { list-style: none; margin: 0 0 18px; padding: 0; }
.roadmap-mientras li, .roadmap-relacionados li { padding-left: 26px; position: relative; margin-bottom: 10px; }
.roadmap-mientras li::before, .roadmap-relacionados li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 10px;
    height: 10px;
    background: var(--yellow);
}
.roadmap-mientras a, .roadmap-relacionados a { font-weight: 600; }
.roadmap-relacionados p { font-size: 0.95rem; }
.roadmap-relacionados p a { color: var(--muted); }
@media (max-width: 560px) {
    .roadmap-paso { padding: 22px 8px 20px; }
    .roadmap-num { width: 36px; height: 36px; font-size: 1.1rem; }
}
/* Roadmap-kop: zelfde 8-koloms breedte als de gidskoppen (guide-head). */
.roadmap-head h1, .roadmap-head .lead { max-width: calc((100% - 64px) * 8 / 12); }
@media (max-width: 960px) {
    .roadmap-head h1, .roadmap-head .lead { max-width: none; }
}

/* Admin: strategiepagina (/admin/estrategia/, localhost-only) */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.compare-col { border: 2px solid var(--ink); padding: 26px; }
.compare-col > h3 { margin: 0 0 6px; font-size: 1.22rem; }
.compare-col .compare-sub { color: var(--muted); font-size: 0.95rem; margin: 0 0 18px; }
.strategy-tree { list-style: none; margin: 0; padding: 0; font-size: 0.95rem; line-height: 1.5; }
.strategy-tree ul { list-style: none; margin: 2px 0 2px 4px; padding-left: 20px; border-left: 1px solid var(--border); }
.strategy-tree li { position: relative; padding: 5px 0 5px 18px; margin: 0; }
.strategy-tree li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 8px; height: 8px; background: var(--yellow); }
.strategy-tree li li::before { width: 7px; height: 7px; background: none; border: 2px solid var(--yellow); top: 0.65em; }
.strategy-tree .tree-note { display: block; color: var(--muted); font-size: 0.88rem; }
.strategy-tree .badge { margin-left: 8px; vertical-align: 1px; }
.strategy-tree code { font-size: 0.92em; }
@media (max-width: 960px) {
    .compare-grid { grid-template-columns: 1fr; }
}
/* ---- Paro-calculator (calculadora-paro, embed in gids) ------------------- */
/* Label, input en helpertekst vormen een strakke groep; de ruimte zit
   tussen de groepen (gap), niet binnen een veld. */
.calc-input-euro { display: flex; align-items: stretch; }
.calc-input-euro > span { display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--ink); border-right: 0; background: var(--bg-alt); font-family: var(--font-display); font-weight: 700; }

/* ---- Beckham-calculator (calculadora-beckham, compact in aside.rail) ---- */
.rail--tool { position: sticky; top: 24px; }
/* Kleine laptopschermen: een hoge assistent valt anders half buiten beeld en
   blijft daar hangen omdat de rail sticky is. De rail krijgt daarom maximaal de
   viewporthoogte en scrolt zelf; de onderkant van de tool is zo altijd te
   bereiken. Een kaart die past, scrolt niet (geen zichtbare scrollbalk). */
.rail--tool {
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    padding-right: 4px;
}
.calcb { border: 2px solid var(--ink); font-size: 0.9rem; }
.calcb-title { background: var(--ink); color: var(--bg); border-bottom: 2px solid var(--ink); padding: 18px 16px; font-size: 1.05rem; margin: 0; }
.calcb form { padding: 16px 16px 30px; }
/* Met JS (html.js, gezet vóór de eerste paint in head.php) staat het formulier meteen in de
   layout: enhance.js maakt het toch altijd zichtbaar, en zo springt de tekst eronder niet
   omlaag zodra het script draait (CLS 0,13 op de cita-gids mobiel, 2026-10-03). Zonder JS
   blijft [hidden] gelden en is de gids de fallback. */
.js .calcb form[data-asis-form][hidden], .js .calcb form[data-calc-form][hidden] { display: block; }
.calcb label {display: block;font-family: var(--font-display);font-weight: 700;font-size: 0.85rem;margin: 15px 0 10px;}
/* Alleen het allereerste label van het formulier of van een vervolgstap verliest
   zijn bovenmarge. Nooit een kale :first-child-reset: een label in een
   wrapper-div (bv. een veldgroep die apart verborgen wordt) is ook first-child
   en verloor dan zijn afstand tot het veld erboven. */
.calcb form > label:first-child, .calcb [data-asis-paso] > label:first-child,
.calcb form > :first-child > label:first-child, .calcb [data-asis-paso] > :first-child > label:first-child { margin-top: 0; }
.calcb input, .calcb select { width: 100%; font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid var(--ink); background: var(--bg); color: var(--ink); }
.calcb .calc-input-euro > span { padding: 0 10px; }
.calcb input[type="range"] { width: 100%; margin: 8px 0 0; padding: 0; border: 0; background: transparent; accent-color: var(--red); }
.calcb select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; padding-right: 32px; }
.calcb input:focus-visible, .calcb select:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.calcb [data-calc-out] { border-top: 2px solid var(--ink); padding: 0; }
.calcb-headline { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.4; margin: 0; padding: 25px 16px 24px; }
.calcb-amount { display: block; color: var(--green-dark); font-size: 1.9rem; line-height: 1.1; margin: 4px 0 6px; font-variant-numeric: tabular-nums; }
.calcb-amount.is-neg { color: var(--red); }
.calcb-amount.is-neutral { color: var(--ink); }
.calcb-amount[hidden] { display: none; }
.calcb-amount.is-date { font-size: 1.5rem; white-space: nowrap; }
.calcb-table td { overflow: hidden; text-overflow: ellipsis; max-width: 0; }
.calcb-table th:first-child { width: 1%; }
.calcb-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 12px; }
.calcb-row > div { min-width: 0; }
.calcb-row label { margin-top: 0; }
.calcb-row input { width: 100%; max-width: 100%; box-sizing: border-box; padding-left: 8px; padding-right: 6px; font-size: 15px; }
.calcb-check { display: flex; align-items: center; gap: 8px; font-family: inherit; font-weight: 400; font-size: 0.85rem; margin-top: 12px; }
.calcb-check input { width: auto; accent-color: var(--red); }
.calcb-help { font-size: 0.78rem; color: var(--muted); margin: 4px 0 0; }
/* Hulpregel onder een vraag: ruimte naar de knoppen of het veld eronder. */
.calcb .calcb-help + .asis-opciones, .calcb .calcb-help + select, .calcb .calcb-help + input, .calcb .calcb-help + .dp { margin-top: 10px; }
.calcb-table td.calcb-wrap { white-space: normal; }
.calcb-table td.calcb-nota { white-space: normal; text-align: left; font-size: 0.8rem; color: var(--muted); max-width: none; }
.calcb input[type="date"] { min-height: 42px; }
/* Datatabel volgens design-f: kader 2px, th Sora uppercase op --bg-alt, tabular-nums. */
.calcb-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 0; margin: 0; font-size: 0.88rem; }
.calcb-table thead th { border-top: 2px solid var(--ink); }
.calcb-table th, .calcb-table td { padding: 10px 8px; border-bottom: var(--border-hair); text-align: right; white-space: nowrap; }
.calcb-table th:first-child, .calcb-table td:first-child { padding-left: 16px; }
.calcb-table th:last-child, .calcb-table td:last-child { padding-right: 16px; }
.calcb [data-calc-out] { overflow: hidden; }
.calcb-table th:first-child, .calcb-table td:first-child { text-align: left; }
.calcb-table thead th { font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; background: var(--bg-alt); }
.calcb-table tbody th { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; text-transform: none; letter-spacing: normal; background: none; }
.calcb-table td { font-variant-numeric: tabular-nums; }
.calcb-table tr:last-child th, .calcb-table tr:last-child td { border-bottom: var(--border-hair); }
/* Toelichting als tooltip: info-knop, tekst verschijnt bij hover of focus. */
/* Asistente de cita (rechterkolom cita-gids; deelt de .calcb-kaart) */
.asis form { padding-top: 6px; padding-bottom: 15px; }
.asis .calcb-q { margin-bottom: 18px; }
.asis .calcb-headline { padding-top: 10px; padding-bottom: 28px; }
/* Antwoord zonder getal (ja/nee-uitspraak): groter, zonder kader, 34px boven (15 + 19), 24px onder. */
.asis .calcb-headline.is-rojo { color: var(--red); } /* cita niet bij het SEPE: uitspraak in rood */
.asis .calcb-headline.is-verdict {margin: 0;padding: 13px 16px 24px;font-size: 1.2rem;line-height: 1.3;}
.calcb-q { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; margin: 0 0 8px; }
.asis-opciones { display: grid; gap: 12px; }
.asis-opcion { display: block; width: 100%; text-align: left; font: inherit; font-size: 0.88rem; line-height: 1.3; padding: 10px 12px; border: 2px solid var(--ink); background: var(--bg); color: var(--ink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asis-opcion:hover { background: var(--ink); color: var(--bg); }
.asis-opcion[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
/* Keuzeknoppen herkenbaar als knop (2026-10-02, eigenaar): scherpe schaduw zonder
   blur rechtsonder, bewuste uitzondering op "geen schaduwen" uit designtaal F.
   Ingedrukt en gekozen schuift de knop in zijn schaduw (transform, dus niets
   verspringt). Geldt voor alle helpers (ook ja/nee). */
.asis-opcion { box-shadow: 2px 4px 0 var(--ink); border-radius: 3px; }
.asis-opcion:active,
.asis-opcion[aria-pressed="true"] { box-shadow: 0 0 0 var(--ink); transform: translate(2px, 4px); }
.asis-opcion:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
/* Vervolgstappen: de ruimte zit op de stap zelf, niet op het label. Zo krijgt
   een stap die met een vraag (.calcb-q) opent dezelfde afstand als een stap die
   met een label opent; binnen een stap houdt een tweede veld de groepsafstand. */
.asis [data-asis-paso] { margin-top: 16px; }
.asis [data-asis-paso] > :first-child { margin-top: 0; }
.calcb-amount.is-name { font-size: 1.25rem; line-height: 1.25; }
.asis-lista { margin: 0; padding: 0 16px; border-top: var(--border-hair); }
.asis-lista > div { padding: 10px 0; border-bottom: var(--border-hair); }
.asis-lista dt { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; margin: 0 0 2px; }
.asis-lista dd { margin: 0; font-size: 0.9rem; line-height: 1.4; }
.asis-lista dd a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
.asis-lista dd a:hover { color: var(--red); }
.asis-enlace:not([hidden]) { display: block; }
/* Stapnummer in de assistent (asistente-regularizacion): klein zwart blokje, wit vet cijfer */
.asis-num { display: inline-block; min-width: 1.25em; height: 1.25em; margin-right: 0.45em; padding: 0 0.2em; background: var(--ink); color: var(--bg); font-family: var(--font-display); font-weight: 700; font-size: 0.8em; line-height: calc(1.25em - 1px); padding-top: 1px; box-sizing: border-box; text-align: center; vertical-align: 0.15em; }
/* Hangende inspringing: een tweede regel begint gelijk met de tekst achter het blokje */
.asis-lista dd .asis-enlace:has(> .asis-num) { position: relative; padding-left: 1.75em; }
.asis-lista dd .asis-enlace > .asis-num { position: absolute; left: 0; top: 0.2em; margin-right: 0; }
/* Stap 1 (de rij 'Ahora'): geel blokje met zwart cijfer */
.asis-num.is-primero { background: var(--yellow); color: var(--ink); }
.asis-lista dd .asis-enlace a { color: var(--red); }
.asis-lista dd .asis-enlace a:hover { color: var(--red-dark); }
.asis-nota { margin: 0; padding: 10px 16px 0; font-size: 0.82rem; line-height: 1.4; color: var(--muted); }
.asis-lista dd a + a:not([hidden]) { display: block; }
.asis-madrid input[type="text"] { font-variant-numeric: tabular-nums; }
/* Datablokken Madrid-cita-gids (component cita-madrid-bloque) */
.cm-tabla-wrap { overflow-x: auto; margin: 8px 0 28px; border: 2px solid var(--ink); } /* zelfde kader als de assistent (.calcb) */
.prose .cm-tabla { margin: 0; font-size: 0.9rem; table-layout: fixed; min-width: 560px; border: 0; } /* de 1px-rand zit op de wrap; de 2px-regel voor .prose table niet stapelen */
.cm-tabla--capital th:nth-child(1) { width: 27%; } .cm-tabla--capital th:nth-child(3) { width: 11%; } .cm-tabla--capital th:nth-child(4) { width: 21%; }
.cm-tabla--metro th:nth-child(1) { width: 30%; } .cm-tabla--metro th:nth-child(3) { width: 22%; }
.cm-tabla th, .cm-tabla td { padding: 10px 12px; vertical-align: top; }
.cm-tabla td:last-child { white-space: nowrap; }
.cm-tabla thead th { font-size: 0.72rem; letter-spacing: 0.06em; }
.cm-tabla tbody th { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; text-transform: none; letter-spacing: normal; background: none; }
.cm-tabla tbody th a, .cm-tabla td a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
.cm-tabla tbody th a:hover, .cm-tabla td a:hover { color: var(--red); }
.cm-nota { margin: 0 0 28px; }
.cita-botones-guia { margin: 14px 0 0; font-size: 0.9rem; }
.cita-botones-guia a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
.cita-botones-guia a:hover { color: var(--red); }
.asis-cta {margin: 0;padding: 6px 16px 24px;}
.asis-leer { margin: 0; padding: 0 16px; font-size: 0.9em; }
.asis-leer a { color: var(--red); }
.asis-leer a:hover { color: var(--red-dark); }
.asis-btn { width: 100%; justify-content: center; gap: 10px; padding: 14px 10px; font-size: 1rem; line-height: 1.2; white-space: nowrap; }
/* ---- Assistent in de tekstkolom (.asis-inline) --------------------------
   Voor assistenten die te hoog zijn voor de sticky rechterkolom (DGT-canje en
   DGT-cita): dezelfde kaart, maar midden in het artikel. Twee dingen zijn
   nodig. Ten eerste mag de prose-typografie niet doorlekken (.prose h2 en
   .prose p winnen op specificiteit van de kaartregels). Ten tweede gaat de
   extra breedte naar twee kolommen keuzeknoppen en antwoordrijen, zodat de
   kaart ongeveer half zo hoog wordt. Onder 900px blijft alles eenkoloms. */
.asis-inline { margin: 40px 0 44px; }
.prose .asis-inline p { max-width: none; }
.prose .asis-inline .calcb-title { font-size: 1.05rem; font-weight: 700; margin: 0; scroll-margin-top: 0; }
.prose .asis-inline .calcb-q {margin: 15px 0 10px;}
.prose .asis-inline .calcb-headline, .prose .asis-inline .asis-cta, .prose .asis-inline .calcb-foot { margin: 0; }
/* Ankerknop binnen .prose: win van .prose a[href^="#"] (inkt, stippellijn), knop blijft rood met witte tekst. */
.prose .asis-inline .asis-btn, .prose .asis-inline .asis-btn:hover { color: var(--bg); text-decoration: none; }
.prose .asis-inline .calcb-help { margin: 4px 0 0; }
@media (min-width: 900px) {
    .asis-inline .asis-opciones { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    /* In de smalle rail worden lange labels afgekapt; in de tekstkolom mogen ze
       over twee regels, zodat er nooit tekst wegvalt. De grid maakt de knoppen
       in een rij even hoog. */
    .asis-inline .asis-opcion { white-space: normal; }
    .asis-inline .asis-lista { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; }
    .asis-inline .asis-btn { width: auto; min-width: 300px; }
    .asis-inline .asis-cta { display: flex; }
    /* Velden even breed als een knopkolom (halve breedte min de helft van de 8px gap). */
    .asis-inline [data-asis-paso] select, .asis-inline [data-asis-paso] input, .asis-inline [data-asis-paso] .dp { max-width: calc(50% - 4px); }
}
.asis-btn::before { content: ""; flex: 0 0 auto; width: 1.1em; height: 1.1em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='square'%20stroke-linejoin='miter'%3E%3Crect%20x='2'%20y='5'%20width='20'%20height='14'/%3E%3Cpath%20d='M6%2010h4'/%3E%3Cpath%20d='M6%2014h6'/%3E%3Cpath%20d='M15%2010h3'/%3E%3C/svg%3E") center / contain no-repeat;; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='square'%20stroke-linejoin='miter'%3E%3Crect%20x='2'%20y='5'%20width='20'%20height='14'/%3E%3Cpath%20d='M6%2010h4'/%3E%3Cpath%20d='M6%2014h6'/%3E%3Cpath%20d='M15%2010h3'/%3E%3C/svg%3E") center / contain no-repeat; }
.direct-answer .task-cta .btn { line-height: 1.2; }

/* Animatie rail-tools: vervolgvragen en antwoordblok klappen open, het
   hoofdgetal pulseert bij elke nieuwe waarde. Display-toggle via [hidden]
   herstart de keyframes vanzelf; enhance.js zet alleen .is-pop. */
.calcb [data-asis-paso]:not([hidden]), .calcb [data-asis-out]:not([hidden]), .calcb [data-calc-out]:not([hidden]) { animation: calcb-abrir 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes calcb-abrir { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
/* De animatie maakt een stacking context; het datumveld moet boven het antwoordblok liggen zodat de kalender-popover niet achter de tekst valt. */
.calcb [data-asis-paso], .calcb [data-calc-form] { position: relative; z-index: 2; }
.calcb [data-asis-out], .calcb [data-calc-out] { position: relative; z-index: 1; }
/* Stap met open kalender boven de volgende stappen (enhance.js zet .dp-abierto). */
.calcb [data-asis-paso].dp-abierto, .calcb [data-calc-form].dp-abierto { z-index: 3; }
.calcb-amount.is-pop { animation: calcb-pop 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes calcb-pop { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
.asis-opcion { transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.08s ease, transform 0.08s ease; }
@media (prefers-reduced-motion: reduce) {
    .calcb [data-asis-paso]:not([hidden]), .calcb [data-asis-out]:not([hidden]), .calcb [data-calc-out]:not([hidden]), .calcb-amount.is-pop { animation: none; }
    .asis-opcion { transition: none; }
    .calcb-tip, .calcb-foot:hover .calcb-tip { transition-delay: 0s; }
}
/* Rail-tools (calculators en assistenten in de rechterkolom): zwarte titelbalk
   met gele tekst (2026-10-05, eigenaar), kaart op --bg-alt; velden en
   keuzeknoppen blijven wit. */
.calcb { background: var(--bg-alt); }
.calcb-title { background: var(--ink); color: var(--yellow); }
.calcb input, .calcb select, .asis-opcion { background-color: var(--bg); }
.calcb input[type="range"] { background-color: transparent; }
.calcb-table thead th { background: var(--bg); }

/* Datumkiezer (enhance.js blok 15) */
.dp { position: relative; }
.dp .dp-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dp-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 42px; padding: 8px 10px; border: 2px solid var(--yellow); background: var(--bg); color: var(--ink); font: inherit; font-size: 16px; font-variant-numeric: tabular-nums; text-align: left; cursor: pointer; }
.dp-btn svg { width: 18px; height: 18px; flex: none; }
.dp-btn.is-vacio .dp-val { color: var(--muted); }
.dp-btn:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.dp-pop { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: 272px; max-width: calc(100vw - 48px); padding: 10px; background: var(--bg); border: 2px solid var(--ink); }
.dp-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-family: var(--font-display); font-size: 0.9rem; text-transform: capitalize; }
/* Maand- en jaarkeuze in de kalenderkop: compacte selects, zelfde chevron als .calcb select. */
.calcb .dp-sel { width: auto; min-width: 0; flex: 1 1 0; height: 32px; padding: 0 22px 0 8px; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; background-position: right 6px center; background-size: 12px; text-transform: capitalize; }
.calcb .dp-ano { flex: 0 0 76px; }
.dp-nav { width: 32px; height: 32px; border: 2px solid var(--ink); background: var(--bg); color: var(--ink); font: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0; }
.dp-nav:hover { background: var(--ink); color: var(--bg); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-wd { text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; color: var(--muted); padding: 2px 0 4px; }
.dp-day { height: 34px; border: 0; background: var(--bg); color: var(--ink); font: inherit; font-size: 0.88rem; font-variant-numeric: tabular-nums; cursor: pointer; padding: 0; }
.dp-day:hover { background: var(--bg-alt); }
.dp-day.is-hoy { box-shadow: inset 0 0 0 2px var(--red); }
.dp-day.is-sel { background: var(--ink); color: var(--bg); }
.dp-day:disabled { color: var(--muted); cursor: default; background: none; }
.dp-day:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
.calcb-row .dp-btn { padding-left: 8px; padding-right: 6px; font-size: 15px; }
.calcb-row .dp-pop { left: auto; right: 0; }
.calcb-row > div:first-child .dp-pop { left: 0; right: auto; }

.calcb-foot { position: relative; display: flex; justify-content: flex-start; padding: 10px 16px 12px; margin: 0; }
.calcb-info { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 0.85rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: help; padding: 0; }
/* Omcirkeld vraagteken voor "Cómo funciona" (2026-10-02, eigenaar); lijnstijl als het icoon in .prose-red-cta. */
.calcb-info::before { content: ""; flex: 0 0 auto; width: 1.5em; height: 1.5em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='square'%20stroke-linejoin='miter'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M9.2%209.3a2.9%202.9%200%200%201%205.6.9c0%202-2.8%202.4-2.8%204.4'/%3E%3Cpath%20d='M12%2017.8v.2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='square'%20stroke-linejoin='miter'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M9.2%209.3a2.9%202.9%200%200%201%205.6.9c0%202-2.8%202.4-2.8%204.4'/%3E%3Cpath%20d='M12%2017.8v.2'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Tooltip verschijnt pas na een halve seconde muis-op-de-link en verdwijnt met
   een kleine vertraging, zodat de muis naar de tekst kan bewegen. Toetsenbord
   (focus) toont hem direct. */
.calcb-tip { position: absolute; left: 16px; bottom: 36px; width: 260px; padding: 10px 12px; background: var(--bg); border: 2px solid var(--ink); font-size: 0.78rem; line-height: 1.4; color: var(--ink); z-index: 5; visibility: hidden; opacity: 0; transition: opacity 0.15s ease 0.3s, visibility 0s linear 0.45s; }
.calcb-foot:hover .calcb-tip { visibility: visible; opacity: 1; transition: opacity 0.15s ease 0.5s, visibility 0s linear 0.5s; }
.calcb-foot:focus-within .calcb-tip { visibility: visible; opacity: 1; transition-delay: 0s; }

/* ---- Mobiel (max-width: 760px): uit het MOBIEL SYSTEEM van main.css ---- */
@media (max-width: 760px) {
    .rail--tool { position: static; order: -1; }
    .calcb { margin-bottom: 8px; }
    .wizard { margin-bottom: 32px; }
    .wizard-breadcrumb { display: none; }
    .wizard-intro { display: none; }
    .wizard-progress { padding-top: 16px; }
    .wizard-question { font-size: 1.25rem; margin-bottom: 20px; }
    .wizard-options { gap: 10px; }
    .wizard-groups { gap: 20px; }
    .wizard-group-label { font-size: 0.85rem; margin-bottom: 10px; }
    .wizard-option { padding: 16px 18px; gap: 6px; }
    .wizard-option-title { font-size: 1.02rem; }
    .wizard-option-text { font-size: 0.88rem; }
    .wizard-exit, .wizard-back { font-size: 0.85rem; margin-top: 14px; }

    /* -- Roadmap -- */
    .roadmap-paso { padding: 16px 4px; }
    .roadmap-paso-titulo { font-size: 1.15rem; gap: 12px; margin-bottom: 10px; }
    .roadmap-num { width: 32px; height: 32px; font-size: 1rem; }
    .roadmap-cambiar { font-size: 0.85rem; }
}
/* Probleemhulp DGT-cita: ja/nee-knoppen naast elkaar in de rail. */
.asis-opciones--sino { grid-template-columns: 1fr 1fr; }