/* ==========================================================================
   tools-ui.css: gedeelde look & feel voor de vier juridische tools
   (wettelijke rente, transitievergoeding, aanmaningsbrief, vaststellingsovereenkomst)
   in alle vijf talen. Alleen geladen op de 20 toolpagina's, als laatste stylesheet,
   zodat het de oudere tool-specifieke stijlen gelijktrekt.

   Bewegingsprincipes (Emil Kowalski / emil-design-eng):
   - alleen transform en opacity animeren waar het kan; nooit `all`
   - ease-out voor alles wat verschijnt, nooit ease-in; UI onder 300 ms
   - knoppen geven indrukfeedback (scale .97), geen hover-lift of glans
   - hover-effecten alleen op een echte muis (hover:hover + pointer:fine)
   - reduced motion: geen beweging, alleen een korte fade
   - geen gekleurde streep links naast meldingen: een rustige rand rondom
   ========================================================================== */

:root{
  --tl-ink:#122d4d;          /* huisblauw */
  --tl-ink-strong:#0b1f38;
  --tl-text:#2d333b;
  --tl-muted:#5a6370;
  --tl-faint:#8a939e;
  --tl-line:#d3d8de;         /* invoerranden */
  --tl-line-soft:#e3e7ec;    /* kaarten en meldingen */
  --tl-surface:#f8f9fb;
  --tl-ring:0 0 0 3px rgba(18,45,77,.12);
  --tl-ease:cubic-bezier(.23,1,.32,1);       /* sterke ease-out */
  --tl-ease-io:cubic-bezier(.77,0,.175,1);   /* beweging op het scherm */
  --tl-press:120ms;
  --tl-fast:160ms;
  --tl-base:220ms;
  --tl-reveal:320ms;
}

/* --------------------------------------------------------------------------
   0. Tool-UI doet niet mee met de site-brede scroll-fade.
   Formulier, resultaat en gegenereerde documenten staan er meteen;
   anders faden de artikelkoppen van een gegenereerde overeenkomst
   pas in als je erlangs scrollt.
   -------------------------------------------------------------------------- */
form .scroll-animate,
form.scroll-animate,
#body-content > .scroll-animate:has(form, .calc-result, .ab-result, .vso-result, #tp-result),
.calc-result .scroll-animate,
#tp-result .scroll-animate,
.ab-result .scroll-animate,
.vso-result .scroll-animate,
.ab-letter .scroll-animate,
.vso-doc .scroll-animate{opacity:1;transform:none;transition:none}

#main-content button,#main-content input,#main-content select,#main-content textarea{font-family:inherit}

/* --------------------------------------------------------------------------
   1. Formulierkaarten
   -------------------------------------------------------------------------- */
.calc-form,
.ab-form-section,
.vso-form-section,
.ab-collapsible-card,
.vso-collapsible-card{background:var(--tl-surface);border:1px solid var(--tl-line-soft);border-radius:12px}
.calc-form{padding:28px 32px}
.ab-collapsible-card.active,
.vso-collapsible-card.active{border-color:#cfd5dc;box-shadow:0 1px 2px rgba(11,31,56,.04)}
@media (max-width:768px){.calc-form{padding:20px}}

/* --------------------------------------------------------------------------
   2. Labels, hulpteksten, invoervelden
   -------------------------------------------------------------------------- */
.calc-label,
.calc-form-group > label:not([class]),
.ab-form-group > label,
.vso-form-group > label,
.tp-wage-field label{display:block;font-size:13.5px;font-weight:500;color:var(--tl-text);line-height:1.4;letter-spacing:0;margin-bottom:6px}

form .calc-help,
.ab-form-group small,
.vso-form-group small,
.calc-cc-date-hint{font-size:13px;line-height:1.5;color:var(--tl-muted);margin-top:6px}

.calc-input,
.ab-form-group input[type="text"],.ab-form-group input[type="email"],.ab-form-group input[type="tel"],
.ab-form-group input[type="number"],.ab-form-group input[type="date"],.ab-form-group select,.ab-form-group textarea,
.vso-form-group input[type="text"],.vso-form-group input[type="email"],.vso-form-group input[type="tel"],
.vso-form-group input[type="number"],.vso-form-group input[type="date"],.vso-form-group select,.vso-form-group textarea,
.vso-check-item .vso-item-extra input,
.tp-wage-row input,.tp-wage-row select,
.tp-late-panel input[type="date"]{
  font-size:15px;line-height:1.4;color:var(--tl-text);
  min-height:44px;padding:10px 13px;
  background:#fff;border:1px solid var(--tl-line);border-radius:8px;box-shadow:none;
  transition:border-color var(--tl-fast) ease,box-shadow var(--tl-fast) ease;
}
.ab-form-group textarea,.vso-form-group textarea{min-height:88px}
/* compacte rijen (vorderingen, facturen, deelbetalingen) */
.calc-claim-row .calc-input,.calc-payment-row .calc-input,
.ab-invoice-row > .ab-form-group input,.ab-payment-row > .ab-form-group input,
.vso-check-item .vso-item-extra input,.tp-wage-row input,.tp-wage-row select{font-size:14px;min-height:40px;padding:8px 11px}

.calc-input::placeholder,.ab-form-group input::placeholder,.vso-form-group input::placeholder,
.ab-form-group textarea::placeholder,.vso-form-group textarea::placeholder{color:#9aa3ae;opacity:1}

@media (hover:hover) and (pointer:fine){
  .calc-input:hover,.ab-form-group input:hover,.ab-form-group select:hover,.ab-form-group textarea:hover,
  .vso-form-group input:hover,.vso-form-group select:hover,.vso-form-group textarea:hover,
  .tp-wage-row input:hover,.tp-wage-row select:hover{border-color:#b9c1cb}
}
.calc-input:focus,
.ab-form-group input:focus,.ab-form-group select:focus,.ab-form-group textarea:focus,
.vso-form-group input:focus,.vso-form-group select:focus,.vso-form-group textarea:focus,
.vso-check-item .vso-item-extra input:focus,
.tp-wage-row input:focus,.tp-wage-row select:focus,
.tp-late-panel input[type="date"]:focus{outline:none;border-color:var(--tl-ink);box-shadow:var(--tl-ring)}

.calc-input[aria-invalid="true"],.vso-form-group input.vso-invalid,.tp-wage-row [aria-invalid="true"]{border-color:#c53030;box-shadow:0 0 0 3px rgba(197,48,48,.12)}
.calc-input:disabled{background:#f3f4f6;color:var(--tl-muted)}

/* Keuzelijsten: eigen pijltje, zelfde hoogte als de tekstvelden */
.ab-form-group select,.vso-form-group select,.tp-wage-row select,select.calc-input{
  -webkit-appearance:none;appearance:none;padding-right:36px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6370' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:12px;
}

.calc-checkbox-label input[type="checkbox"],.ab-checkbox-label input[type="checkbox"],.vso-checkbox-label input[type="checkbox"],
.tp-13th-check input,.tp-u18-check input,.tp-elig-opt input,.tp-wage-opt input{accent-color:var(--tl-ink)}

/* --------------------------------------------------------------------------
   3. Knoppen
   Primair: effen huisblauw. Secundair: wit met rand. Geen verloop,
   geen glans, geen lift, geen letter-spacing-animatie.
   -------------------------------------------------------------------------- */
.calc-btn-primary,
.ab-btn-primary,
.vso-btn-primary,
.ab-export-actions button:not(.secondary),
.vso-export-actions button:not(.secondary),
.calc-action-btn.calc-action-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:11px 22px;margin-top:0;
  font-size:15px;font-weight:600;line-height:1.2;letter-spacing:0;
  color:#fff;background:var(--tl-ink);background-image:none;
  border:1px solid var(--tl-ink);border-radius:8px;
  box-shadow:0 1px 2px rgba(11,31,56,.14),inset 0 1px 0 rgba(255,255,255,.06);
  transform:none;cursor:pointer;
  transition:background-color var(--tl-fast) ease,border-color var(--tl-fast) ease,box-shadow var(--tl-fast) ease,transform var(--tl-press) var(--tl-ease);
}
.calc-btn-primary::before,.calc-btn-primary::after,
.calc-btn-secondary::before,.calc-add-payment::before{display:none!important}
/* de hoofdactie van elk formulier */
.calc-form .calc-btn-primary,#abGenerate,#vsoGenerate{min-height:48px;padding:13px 28px;font-size:15.5px;letter-spacing:0}
.calc-form .calc-btn-primary{margin-top:8px;align-self:flex-start;width:auto}
.calc-form .calc-btn-primary,#abGenerate,#vsoGenerate{min-width:220px}
.calc-schedule-trigger .calc-btn-primary{background:var(--tl-ink);background-image:none}
.ab-export-actions button:not(.secondary),.vso-export-actions button:not(.secondary),.calc-action-btn.calc-action-primary{min-height:40px;padding:9px 16px;font-size:14px;font-weight:500}

.calc-btn-secondary,
.ab-btn-secondary,
.vso-btn-secondary,
.calc-action-btn,
.ab-export-actions button.secondary,
.vso-export-actions button.secondary,
.vso-mini-btn,
.tp-elig-btn,
.tp-wage-btn,
.calc-next-claim,
.ab-next-claim{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:40px;padding:9px 16px;
  font-size:14px;font-weight:500;line-height:1.2;letter-spacing:0;white-space:nowrap;
  color:var(--tl-ink);background:#fff;
  border:1px solid var(--tl-line);border-radius:8px;
  box-shadow:0 1px 1px rgba(11,31,56,.04);transform:none;cursor:pointer;
  transition:background-color var(--tl-fast) ease,border-color var(--tl-fast) ease,color var(--tl-fast) ease,transform var(--tl-press) var(--tl-ease);
}
.calc-next-claim,.ab-next-claim{min-height:36px;padding:6px 11px;font-size:13px;font-weight:600}
.calc-btn.calc-btn-secondary{padding:9px 16px}

/* kleine rij-knoppen: verwijderen */
.calc-remove-claim,.calc-remove-payment,.ab-remove-btn{
  width:36px;height:36px;padding:0;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;color:var(--tl-faint);
  background:#fff;border:1px solid var(--tl-line);border-radius:8px;box-shadow:none;transform:none;cursor:pointer;
  transition:color var(--tl-fast) ease,border-color var(--tl-fast) ease,background-color var(--tl-fast) ease,transform var(--tl-press) var(--tl-ease);
}

/* rij toevoegen */
.calc-add-claim,.calc-add-payment,.ab-add-btn,.tp-add-period{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:40px;padding:9px 16px;
  font-size:13.5px;font-weight:500;color:var(--tl-muted);
  background:transparent;border:1px dashed #c3cad3;border-radius:8px;box-shadow:none;transform:none;cursor:pointer;
  transition:color var(--tl-fast) ease,border-color var(--tl-fast) ease,background-color var(--tl-fast) ease,transform var(--tl-press) var(--tl-ease);
}

/* tekstknoppen (uitklappen, links) */
.tp-advanced-toggle,.tp-wage-open,.tp-elig-link,.tp-period-remove{color:var(--tl-ink);font-weight:500;transition:color var(--tl-fast) ease}
.tp-advanced-toggle{font-size:14.5px;gap:8px}
.tp-wage-open,.tp-elig-link{text-decoration:underline;text-decoration-color:rgba(18,45,77,.35);text-underline-offset:3px}
.tp-period-remove{color:#9b2c2c}

@media (hover:hover) and (pointer:fine){
  .calc-btn-primary:hover:not(:disabled),.ab-btn-primary:hover:not(:disabled),.vso-btn-primary:hover:not(:disabled),
  .ab-export-actions button:not(.secondary):hover,.vso-export-actions button:not(.secondary):hover,
  .calc-action-btn.calc-action-primary:hover{background:var(--tl-ink-strong);border-color:var(--tl-ink-strong);color:#fff;transform:none;letter-spacing:0;box-shadow:0 1px 2px rgba(11,31,56,.18),inset 0 1px 0 rgba(255,255,255,.06)}
  .calc-btn-secondary:hover,.ab-btn-secondary:hover,.vso-btn-secondary:hover,.calc-action-btn:not(.calc-action-primary):hover,
  .ab-export-actions button.secondary:hover,.vso-export-actions button.secondary:hover,
  .vso-mini-btn:hover,.tp-elig-btn:not(.tp-elig-btn-primary):not([disabled]):hover,.tp-wage-btn:not(.tp-wage-btn-primary):hover,
  .calc-next-claim:hover,.ab-next-claim:hover{background:#f4f6f9;border-color:#aab3be;color:var(--tl-ink-strong);transform:none;box-shadow:0 1px 1px rgba(11,31,56,.04)}
  .calc-remove-claim:hover,.calc-remove-payment:hover,.ab-remove-btn:hover:not(:disabled){color:#b42318;border-color:#e9b8b2;background:#fef6f5;transform:none;box-shadow:none}
  .calc-add-claim:hover,.calc-add-payment:hover,.ab-add-btn:hover,.tp-add-period:hover{color:var(--tl-ink);border-color:var(--tl-ink);border-style:dashed;background:rgba(18,45,77,.03);transform:none;box-shadow:none}
  .tp-advanced-toggle:hover,.tp-wage-open:hover,.tp-elig-link:hover{color:var(--tl-ink-strong)}
}
@media (hover:none),(pointer:coarse){
  .calc-btn-primary:hover,.ab-btn-primary:hover,.vso-btn-primary:hover,.calc-btn-secondary:hover,
  .calc-next-claim:hover,.ab-next-claim:hover,.calc-add-payment:hover,.calc-remove-payment:hover{transform:none;box-shadow:none}
}

/* indrukfeedback: de interface hoort de klik */
.calc-btn-primary:active:not(:disabled),.ab-btn-primary:active:not(:disabled),.vso-btn-primary:active:not(:disabled),
.calc-btn-secondary:active,.ab-btn-secondary:active,.vso-btn-secondary:active,.calc-action-btn:active,
.ab-export-actions button:active,.vso-export-actions button:active,.vso-mini-btn:active,
.tp-elig-btn:active:not([disabled]),.tp-wage-btn:active,.calc-next-claim:active,.ab-next-claim:active,
.calc-remove-claim:active,.calc-remove-payment:active,.ab-remove-btn:active:not(:disabled),
.calc-add-claim:active,.calc-add-payment:active,.ab-add-btn:active,.tp-add-period:active{transform:scale(.97)}

.calc-btn-primary:disabled,.ab-btn-primary:disabled,.vso-btn-primary:disabled{background:#c5ccd5;border-color:#c5ccd5;color:#fff;opacity:1;box-shadow:none;cursor:not-allowed;transform:none}

/* gelukt-bevestiging (bestaand gedrag in alle vier tools) */
.calc-btn-primary.calc-btn-done,.ab-btn-done,.vso-btn-done,
.calc-btn-primary.calc-btn-done:hover,.ab-btn-done:hover,.vso-btn-done:hover{background:#1e6e3e!important;border-color:#1e6e3e;color:#fff;transform:none;box-shadow:0 1px 2px rgba(30,110,62,.25)}
.calc-btn-done svg,.ab-btn-done svg,.vso-btn-done svg{animation:tl-pop 200ms var(--tl-ease)}

/* focus: één rustige ring voor alle knoppen en keuzes */
.calc-btn:focus-visible,.calc-action-btn:focus-visible,.calc-toggle-btn:focus-visible,.calc-next-claim:focus-visible,
.calc-remove-claim:focus-visible,.calc-remove-payment:focus-visible,.calc-add-claim:focus-visible,.calc-add-payment:focus-visible,
.ab-btn:focus-visible,.ab-toggle-btn:focus-visible,.ab-add-btn:focus-visible,.ab-next-claim:focus-visible,.ab-remove-btn:focus-visible,
.ab-export-actions button:focus-visible,.ab-template:focus-visible,.ab-collapsible-toggle:focus-visible,
.vso-btn:focus-visible,.vso-toggle-btn:focus-visible,.vso-mini-btn:focus-visible,.vso-export-actions button:focus-visible,
.vso-scenario:focus-visible,.vso-collapsible-toggle:focus-visible,
.tp-advanced-toggle:focus-visible,.tp-add-period:focus-visible,.tp-period-remove:focus-visible,.tp-late-toggle:focus-visible,
.tp-elig-btn:focus-visible,.tp-elig-link:focus-visible,.tp-wage-open:focus-visible,.tp-wage-btn:focus-visible{
  outline:2px solid var(--tl-ink);outline-offset:2px;box-shadow:none}

/* --------------------------------------------------------------------------
   4. Segmentknoppen: één stijl (witte keuze op een grijze baan)
   -------------------------------------------------------------------------- */
.calc-toggle,.ab-toggle,.ab-toggle-grid,.vso-toggle{background:#eceff3;padding:3px;border-radius:10px;gap:3px;box-shadow:inset 0 0 0 1px rgba(11,31,56,.03)}
.calc-toggle-btn,.ab-toggle-btn,.vso-toggle-btn{
  padding:9px 14px;border-radius:7px;border:0;
  font-size:14px;font-weight:500;line-height:1.3;color:var(--tl-muted);
  background:transparent;box-shadow:none;text-shadow:none;transform:none;
  transition:background-color var(--tl-base) var(--tl-ease),color var(--tl-base) var(--tl-ease),box-shadow var(--tl-base) var(--tl-ease),transform var(--tl-press) var(--tl-ease);
}
.calc-toggle-btn small,.ab-toggle-btn small,.vso-toggle-btn small{font-size:12px;font-weight:400;color:var(--tl-faint);opacity:1;margin-top:2px;transition:color var(--tl-base) var(--tl-ease)}
.calc-toggle-btn.active,.ab-toggle-btn.active,.vso-toggle-btn.active{
  background:#fff;color:var(--tl-ink-strong);font-weight:600;
  box-shadow:0 1px 2px rgba(11,31,56,.10),0 0 0 1px rgba(11,31,56,.05);
  transition:background-color var(--tl-base) var(--tl-ease),color var(--tl-base) var(--tl-ease),box-shadow var(--tl-base) var(--tl-ease),transform var(--tl-press) var(--tl-ease);
}
.calc-toggle-btn.active small,.ab-toggle-btn.active small,.vso-toggle-btn.active small{color:var(--tl-muted)}
@media (hover:hover) and (pointer:fine){
  .calc-toggle-btn:not(.active):hover,.ab-toggle-btn:not(.active):not(:disabled):hover,.vso-toggle-btn:not(.active):hover{color:var(--tl-text);background:rgba(255,255,255,.55);transform:none}
}
.calc-toggle-btn:active,.ab-toggle-btn:active:not(:disabled),.vso-toggle-btn:active{transform:scale(.98)}
@media (max-width:768px){.calc-toggle-btn{padding:9px 10px;font-size:13.5px}}

/* --------------------------------------------------------------------------
   5. Keuzekaarten (briefsoort, scenario)
   -------------------------------------------------------------------------- */
.ab-template,.vso-scenario{
  background:#fff;border:1px solid var(--tl-line-soft);border-radius:12px;box-shadow:0 1px 2px rgba(11,31,56,.03);transform:none;
  transition:border-color var(--tl-fast) ease,box-shadow var(--tl-fast) ease,background-color var(--tl-fast) ease,transform var(--tl-press) var(--tl-ease);
}
.ab-template.active,.vso-scenario.active{border-color:var(--tl-ink);background:#fff;box-shadow:0 0 0 1px var(--tl-ink),0 4px 14px -8px rgba(11,31,56,.25)}
@media (hover:hover) and (pointer:fine){
  .ab-template:not(.active):hover,.vso-scenario:not(.active):hover{transform:none;border-color:#b9c1cb;background:#fff;box-shadow:0 1px 2px rgba(11,31,56,.05)}
}
.ab-template:active,.vso-scenario:active{transform:scale(.985)}
.ab-template-cite{font-family:inherit;font-size:11.5px;font-weight:500;letter-spacing:.1px;color:#3d4a5c;background:#eef1f5;border-radius:6px;padding:2px 8px}

/* --------------------------------------------------------------------------
   6. Meldingen en toelichtingen: rand rondom, geen streep links
   -------------------------------------------------------------------------- */
.ab-geo,.vso-geo{background:#f5f7fa;border:1px solid var(--tl-line-soft);border-radius:12px}
.ab-optional-hint{background:#f5f7fa;border:1px solid var(--tl-line-soft);border-radius:8px}
.calc-cap-info{background:#f7f8fa;border:1px solid var(--tl-line-soft);border-radius:8px;color:var(--tl-text)}
.calc-cap-info.calc-cap-warn,
.calc-warnings{background:#fffaf0;border:1px solid #efdcae;border-radius:8px;color:#5c4813}
.tp-cond{background:#f5f8fb;border:1px solid #dde5ee;border-radius:8px}
.calc-disclaimer{background:#f7f8fa;border:1px solid var(--tl-line-soft);border-radius:10px}
.calc-checkbox-info{background:#f5f7fa;border:1px solid transparent;border-radius:8px;
  transition:max-height var(--tl-reveal) var(--tl-ease),opacity var(--tl-base) ease,padding var(--tl-reveal) var(--tl-ease),margin var(--tl-reveal) var(--tl-ease),border-color var(--tl-base) ease}
.calc-checkbox-info.visible{border-color:var(--tl-line-soft)}
.vso-privacy,.vso-stepbar{background:#f7f8fa;border-color:var(--tl-line-soft)}

/* gegenereerde documenten: zelfde regelafstand in brief en overeenkomst */
.vso-doc p,.vso-doc li,.vso-doc td{font-size:13.5px;line-height:1.7;color:#222}

/* --------------------------------------------------------------------------
   7. Uitklappen en verschijnen
   -------------------------------------------------------------------------- */
@keyframes tl-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes tl-reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes tl-fade{from{opacity:0}to{opacity:1}}
@keyframes tl-pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}

/* kaarten met een vinkje (deelbetalingen, toon, rente): soepel via grid-rijen */
.ab-collapsible-content,.vso-collapsible-content{
  display:grid;grid-template-rows:0fr;max-height:none;overflow:hidden;opacity:0;
  transition:grid-template-rows 220ms var(--tl-ease),opacity 140ms ease;
}
.ab-collapsible-card.active .ab-collapsible-content,.vso-collapsible-card.active .vso-collapsible-content{
  grid-template-rows:1fr;max-height:none;opacity:1;
  transition:grid-template-rows var(--tl-reveal) var(--tl-ease),opacity var(--tl-base) ease 40ms;
}
.ab-collapsible-inner,.vso-collapsible-inner{min-height:0;overflow:hidden;
  transition:padding-top var(--tl-reveal) var(--tl-ease),padding-bottom var(--tl-reveal) var(--tl-ease),border-color var(--tl-base) ease}
/* dicht: ook de binnenmarge naar nul, anders blijft er een lege strook staan */
.ab-collapsible-card:not(.active) .ab-collapsible-inner,
.vso-collapsible-card:not(.active) .vso-collapsible-inner{padding-top:0;padding-bottom:0;border-top-color:transparent;
  transition:padding-top 220ms var(--tl-ease),padding-bottom 220ms var(--tl-ease),border-color 120ms ease}
.ab-collapsible-toggle,.vso-collapsible-toggle{transition:background-color var(--tl-fast) ease}
.ab-collapsible-toggle:active,.vso-collapsible-toggle:active{transform:none}
.ab-cb-box,.vso-cb-box{border-radius:5px;transition:background-color var(--tl-fast) ease,border-color var(--tl-fast) ease}
.ab-collapsible-card.active .ab-cb-box::after,.vso-collapsible-card.active .vso-cb-box::after{animation:tl-pop 180ms var(--tl-ease)}
.ab-collapsible-chevron,.vso-collapsible-chevron{transition:transform var(--tl-base) var(--tl-ease)}

.ab-optional-fields{transition:max-height var(--tl-reveal) var(--tl-ease),opacity var(--tl-base) ease}

/* TV: uitgebreide berekening */
.tp-advanced-toggle::before{content:"";width:7px;height:7px;border-right:1.75px solid currentColor;border-bottom:1.75px solid currentColor;transform:rotate(-45deg);margin:0 2px 0 1px;font-size:0;transition:transform var(--tl-base) var(--tl-ease)}
.tp-advanced-toggle.open::before{transform:rotate(45deg)}
.tp-advanced-panel{background:#fff;border:1px solid transparent;border-radius:10px;
  transition:max-height var(--tl-reveal) var(--tl-ease),opacity var(--tl-base) ease,padding var(--tl-reveal) var(--tl-ease),margin var(--tl-reveal) var(--tl-ease),border-color var(--tl-base) ease}
.tp-advanced-panel.tp-open{border-color:var(--tl-line-soft)}

/* dingen die met een vinkje of keuze tevoorschijn komen */
.ab-conditional.visible,.vso-conditional.visible,
.vso-check-item.on .vso-item-extra,
.tp-cond:not([hidden]),.tp-elig-panel:not([hidden]),.tp-wage-panel:not([hidden]),.tp-wage-applied:not([hidden]),
.vso-error-box[style*="block"],.calc-error{animation:tl-in var(--tl-base) var(--tl-ease) both}

/* --------------------------------------------------------------------------
   8. Resultaat: één korte onthulling voor alle vier tools
   (was: 1,6 s per blok met tot 1,4 s vertraging bij de rente-calculator)
   -------------------------------------------------------------------------- */
@keyframes calcFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes calcFadeIn{from{opacity:0}to{opacity:1}}
.calc-result-title{animation:calcFadeUp var(--tl-reveal) var(--tl-ease) both}
.calc-result-subtitle{animation:calcFadeUp var(--tl-reveal) var(--tl-ease) 40ms both}
.calc-cards{animation:calcFadeUp var(--tl-reveal) var(--tl-ease) 80ms both}
.calc-context-lines{animation:calcFadeUp var(--tl-reveal) var(--tl-ease) 120ms both}
.calc-section-title{animation:calcFadeUp var(--tl-reveal) var(--tl-ease) 140ms both}
.calc-table-wrap{animation:calcFadeIn 360ms ease 160ms both}
.calc-collection-box{animation:calcFadeUp var(--tl-reveal) var(--tl-ease) 180ms both}
.calc-grand-total{animation:calcFadeUp var(--tl-reveal) var(--tl-ease) 200ms both}
.calc-export{animation:calcFadeUp var(--tl-reveal) var(--tl-ease) 220ms both}
.calc-schedule-trigger{animation:calcFadeUp var(--tl-reveal) var(--tl-ease) 240ms both}
.calc-schedule-summary{animation:calcFadeUp var(--tl-reveal) var(--tl-ease) both}
.calc-table-schedule{animation:calcFadeIn 360ms ease 60ms both}
.calc-schedule-disclaimer{animation:calcFadeUp var(--tl-reveal) var(--tl-ease) 100ms both}
.calc-schedule.calc-schedule-open{animation:calcFadeUp var(--tl-reveal) var(--tl-ease) both}
.calc-table-lawyer{animation:calcFadeIn 360ms ease both}

/* resultaatkaarten zijn geen knoppen: geen hover-lift */
.calc-card{background:#fff;border-color:var(--tl-line-soft);transition:none}
.calc-card:hover{transform:none;box-shadow:none;border-color:var(--tl-line-soft)}
.calc-grand-total{transition:none}
.calc-grand-total:hover{transform:none;box-shadow:none}

/* TV-resultaat: zelfde tempo */
.tp-result-section{opacity:0;transform:translateY(8px);transition:opacity var(--tl-reveal) var(--tl-ease),transform var(--tl-reveal) var(--tl-ease)}
.tp-result-section.tp-show{opacity:1;transform:none}
.tp-result-section .calc-total-card{opacity:0;transform:scale(.985);transition:opacity var(--tl-reveal) var(--tl-ease) 40ms,transform var(--tl-reveal) var(--tl-ease) 40ms}
.tp-result-section.tp-show .calc-total-card{opacity:1;transform:none}
.tp-result-section .calc-components,.tp-result-section .calc-breakdown,.tp-result-section .calc-cap-info,
.tp-result-section .calc-disclaimer,.tp-result-section .calc-actions,.tp-result-section .calc-warnings{
  opacity:0;transform:translateY(6px);transition:opacity var(--tl-reveal) var(--tl-ease) 100ms,transform var(--tl-reveal) var(--tl-ease) 100ms}
.tp-result-section.tp-show .calc-components,.tp-result-section.tp-show .calc-breakdown,.tp-result-section.tp-show .calc-cap-info,
.tp-result-section.tp-show .calc-disclaimer,.tp-result-section.tp-show .calc-actions,.tp-result-section.tp-show .calc-warnings{opacity:1;transform:none}
.calc-actions{gap:8px}

/* generatoren: brief en overeenkomst verschijnen op dezelfde manier */
.ab-result.visible,.vso-result.visible{animation:tl-reveal var(--tl-reveal) var(--tl-ease) both}
.ab-result.visible .ab-letter,.vso-result.visible .vso-doc{animation:tl-reveal 360ms var(--tl-ease) 60ms both}

/* TV: rente bij te late betaling (uitklapper in het resultaat) */
.tp-late-section{margin-top:28px;border:1px solid var(--tl-line-soft);border-radius:10px;background:#fff;overflow:hidden}
.tp-late-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;
  background:transparent;border:0;cursor:pointer;text-align:left;
  font-size:15px;font-weight:600;line-height:1.4;color:var(--tl-ink);transition:background-color var(--tl-fast) ease}
@media (hover:hover) and (pointer:fine){.tp-late-toggle:hover{background:#f8f9fb}}
.tp-late-chev{width:8px;height:8px;border-right:1.75px solid var(--tl-muted);border-bottom:1.75px solid var(--tl-muted);transform:rotate(45deg) translate(-2px,-2px);flex:none;transition:transform var(--tl-base) var(--tl-ease)}
.tp-late-toggle[aria-expanded="true"] .tp-late-chev{transform:rotate(225deg) translate(-2px,-2px)}
.tp-late-panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 220ms var(--tl-ease),opacity 140ms ease}
.tp-late-panel.open{grid-template-rows:1fr;opacity:1;transition:grid-template-rows var(--tl-reveal) var(--tl-ease),opacity var(--tl-base) ease 40ms}
.tp-late-inner{min-height:0;overflow:hidden}
.tp-late-body{padding:4px 18px 18px;border-top:1px solid #eef0f3}
.tp-late-body .tp-late-explain{font-size:13.5px;color:#444a52;margin:12px 0 14px;line-height:1.55}
.tp-late-body .tp-late-line{font-size:14px;color:var(--tl-ink);margin:0 0 8px}
.tp-late-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:14px 0 6px}
.tp-late-field{flex:1 1 220px;min-width:200px}
.tp-late-field label{display:block;font-size:13.5px;font-weight:500;color:var(--tl-text);margin-bottom:6px}
.tp-late-field input{width:100%;max-width:260px}
.tp-late-row .calc-action-btn{flex:0 0 auto}
.tp-late-result{margin-top:16px}
.tp-late-msg{padding:10px 14px;border-radius:8px;font-size:13.5px;line-height:1.5;border:1px solid var(--tl-line-soft);background:#f7f8fa;color:var(--tl-text)}
.tp-late-msg.is-error{background:#fdf3f3;border-color:#efc9c9;color:#8f2424}
.tp-late-msg.is-info{background:#f3f7fc;border-color:#d3e0f0;color:#1a3a6b}
.tp-late-msg.is-warn{background:#fffaf0;border-color:#efdcae;color:#5c4813;margin-top:12px;font-size:13px}

/* --------------------------------------------------------------------------
   8b. Datumkiezer (flatpickr, zelf gehost in /js/vendor/flatpickr-4.6.13/)
   Alleen op de vijf transitievergoedingspagina's. Huisblauw in plaats van
   het standaardblauw, Inter, en een snellere opening (180 ms i.p.v. 300 ms).
   -------------------------------------------------------------------------- */
.flatpickr-calendar{font-family:inherit;border-radius:10px;
  box-shadow:0 10px 28px -10px rgba(11,31,56,.28),0 0 0 1px rgba(11,31,56,.07)}
.flatpickr-calendar.open{animation-duration:180ms;animation-timing-function:var(--tl-ease)}
.flatpickr-calendar.arrowTop:before{border-bottom-color:rgba(11,31,56,.10)}
.flatpickr-calendar.arrowBottom:before{border-top-color:rgba(11,31,56,.10)}
.flatpickr-months .flatpickr-month,.flatpickr-current-month{color:var(--tl-ink-strong)}
.flatpickr-current-month{font-size:15px;font-weight:600}
.flatpickr-current-month .flatpickr-monthDropdown-months{font-weight:600}
span.flatpickr-weekday{color:var(--tl-faint);font-weight:500}
.flatpickr-day{color:var(--tl-text);border-radius:8px}
.flatpickr-day:hover,.flatpickr-day:focus{background:#eef1f5;border-color:#eef1f5}
.flatpickr-day.today{border-color:#b9c1cb}
.flatpickr-day.today:hover,.flatpickr-day.today:focus{background:#eef1f5;border-color:#b9c1cb;color:var(--tl-text)}
.flatpickr-day.selected,.flatpickr-day.selected:hover,.flatpickr-day.selected:focus,
.flatpickr-day.startRange,.flatpickr-day.endRange{background:var(--tl-ink);border-color:var(--tl-ink);color:#fff}
.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay{color:#aab3be}
.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:var(--tl-ink)}

/* --------------------------------------------------------------------------
   8c. Geen automatisch inzoomen op telefoons
   iOS Safari zoomt in zodra een veld met tekst kleiner dan 16 px focus krijgt;
   de pagina wordt dan breder dan het scherm en schuift zijwaarts. Op apparaten
   met touch (en op smalle schermen) zijn alle tekstvelden daarom 16 px.
   Bewust NIET opgelost met maximum-scale in de viewport: dat blokkeert ook
   handmatig zoomen en is slecht voor de toegankelijkheid.
   De #main-content-prefix wint ook van de stijlen die de scripts invoegen.
   -------------------------------------------------------------------------- */
@media (pointer:coarse),(max-width:768px){
  #main-content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  #main-content select,
  #main-content textarea,
  .flatpickr-calendar input{font-size:16px}
}

/* --------------------------------------------------------------------------
   9. Mobiel en reduced motion
   -------------------------------------------------------------------------- */
.tp-advanced-toggle{text-align:left;justify-content:flex-start}
@media (max-width:768px){
  .calc-form .calc-btn-primary,#abGenerate,#vsoGenerate{width:100%}
  /* vordering/deelbetaling: bedrag en datum naast elkaar, knoppen eronder */
  .calc-claim-row .calc-input-sm,.calc-payment-row .calc-input-sm{flex:1 1 130px;min-width:0}
  .calc-claim-btns{margin-left:auto}
  /* op mobiel scrolt het resultaat in beeld: alleen een korte fade, geen verschuiving */
  .tp-result-section,.tp-result-section .calc-total-card,.tp-result-section .calc-components,.tp-result-section .calc-breakdown,
  .tp-result-section .calc-cap-info,.tp-result-section .calc-disclaimer,.tp-result-section .calc-actions,.tp-result-section .calc-warnings{transform:none;transition-property:opacity;transition-duration:200ms;transition-delay:0s}
}
@media (prefers-reduced-motion:reduce){
  @keyframes calcFadeUp{from{opacity:0}to{opacity:1}}
  @keyframes tl-in{from{opacity:0}to{opacity:1}}
  @keyframes tl-reveal{from{opacity:0}to{opacity:1}}
  @keyframes tl-pop{from{opacity:0}to{opacity:1}}
  .tp-result-section,.tp-result-section *{transform:none!important;transition-duration:150ms!important;transition-delay:0s!important}
  .calc-btn-primary:active,.ab-btn-primary:active,.vso-btn-primary:active,.calc-btn-secondary:active,.ab-btn-secondary:active,.vso-btn-secondary:active,
  .calc-action-btn:active,.ab-export-actions button:active,.vso-export-actions button:active,.vso-mini-btn:active,.tp-elig-btn:active,.tp-wage-btn:active,
  .calc-next-claim:active,.ab-next-claim:active,.calc-remove-claim:active,.calc-remove-payment:active,.ab-remove-btn:active,
  .calc-add-claim:active,.calc-add-payment:active,.ab-add-btn:active,.tp-add-period:active,
  .calc-toggle-btn:active,.ab-toggle-btn:active,.vso-toggle-btn:active,.ab-template:active,.vso-scenario:active{transform:none}
  .ab-collapsible-content,.vso-collapsible-content,.tp-late-panel,.ab-optional-fields,.calc-checkbox-info,.tp-advanced-panel{transition-duration:0s!important}
  .tp-advanced-toggle::before,.tp-late-chev,.ab-collapsible-chevron,.vso-collapsible-chevron{transition:none}
  .flatpickr-calendar.open{animation:none}
}
@media print{
  .ab-result.visible,.vso-result.visible,.ab-letter,.vso-doc{animation:none!important;opacity:1!important;transform:none!important}
}

/* --------------------------------------------------------------------------
   10. Uitlegtekst: inhoudsopgave en functielijst (transitievergoeding, v4)
   De inhoudsopgave is het site-component .toc (css/20260322.css); hier alleen
   zonder streep links en met de tijden van deze stijlgids (open 320, dicht 220 ms).
   -------------------------------------------------------------------------- */
#main-content .toc::before{display:none}
#main-content .toc>summary{transition:background-color var(--tl-fast) var(--tl-ease)}
#main-content .toc>summary::after,#main-content .toc[open]>summary::after{box-shadow:none;transition:transform var(--tl-base) var(--tl-ease),background-size var(--tl-base) var(--tl-ease),background-color var(--tl-fast) var(--tl-ease)}
#main-content .toc::details-content{transition:height var(--tl-base) var(--tl-ease),content-visibility var(--tl-base);transition-behavior:allow-discrete}
#main-content .toc[open]::details-content{transition-duration:var(--tl-reveal)}
#main-content .toc nav{transform:translateY(4px);transition:opacity var(--tl-base) var(--tl-ease),transform var(--tl-base) var(--tl-ease)}
#main-content .toc[open] nav{transform:none}
#main-content .toc a{transition:color var(--tl-fast) var(--tl-ease),background-size var(--tl-base) var(--tl-ease)}
@media (hover:hover) and (pointer:fine){#main-content .toc a:hover{transform:none}}
.tp-features{display:grid;grid-template-columns:1fr;gap:6px 32px;margin:.5em 0 1em;padding:0}
@media (min-width:700px){.tp-features{grid-template-columns:1fr 1fr}}
.article-content .tp-features li{margin:0;line-height:1.55}
.tp-features strong{font-weight:600;color:var(--tl-ink)}
@media (prefers-reduced-motion:reduce){
  #main-content .toc::details-content,#main-content .toc nav,#main-content .toc>summary::after{transition:none}
}

/* --------------------------------------------------------------------------
   11. Juridische controle VSO-generator (13 oktober 2026)
   Het pictogram (vinkje, uitroepteken, kruis) is het enige teken per regel. De artikelstijl
   (.article-content ul li::before) tekende op hetzelfde pseudo-element een grijs bolletje.
   -------------------------------------------------------------------------- */
.article-content .vso-legal-check li{position:relative;margin:0;padding:3px 0 3px 22px}
.article-content .vso-legal-check li::before{position:absolute;left:0;top:3px;width:16px;height:auto;margin:0;background:none;border-radius:0;text-align:center;line-height:inherit}
/* Meldingen van de VSO-generator (rode/oranje signalen, waarschuwing bedingen): één bolletje,
   dat van de artikelstijl; het standaardbolletje (list-style: disc uit de pagina) vervalt */
.article-content .vso-warning ul{list-style:none;margin:6px 0 0;padding:0}
.article-content .vso-warning li{position:relative;margin:3px 0;padding-left:18px}