/* alswe — calculator pages. Depends on brand/tokens.css, app.css and landing.css. */
.tool-page{padding-block:18px 56px}
.tool-page .crumbs{font-size:13.5px;color:var(--gedempt);margin:0 0 10px}
.tool-page .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0}
.tool-page .crumbs li+li::before{content:"›";margin-right:6px}
.tool-page .crumbs a{color:var(--inkt-2)}
.tool-page .crumbs [aria-current]{color:var(--inkt)}
.tool-page .crumb{font-family:var(--font-mono);font-size:13px;color:var(--gedempt);margin:0 0 10px}
.calc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:26px;align-items:start}
.calc>*{min-width:0}
.form{background:var(--vlak);border:1px solid var(--lijn);border-radius:16px;padding:20px;min-width:0}
.form .fld,.form .two,.form .adv,.form .adv__body{min-width:0}
.form .inp small{white-space:normal;text-align:right}
.form .ttl{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-family:var(--font-display);font-weight:600;font-size:18px}
.form .fld{margin-bottom:14px}
.form .inp{display:flex;align-items:center;gap:8px;border:1px solid var(--lijn);border-radius:10px;padding:0 12px;background:var(--papier)}
.form .inp:focus-within{border-color:var(--iris);box-shadow:0 0 0 3px var(--iris-tint)}
.form .inp .pre{font-family:var(--font-mono);color:var(--gedempt);font-size:15px}
.form .inp input{flex:1;min-width:0;border:0;background:transparent;padding:11px 0;font-family:var(--font-mono);font-size:17px;color:var(--inkt);font-variant-numeric:tabular-nums}
.form .inp input:focus{outline:none}
.form .inp small{font-size:13px;color:var(--gedempt);white-space:nowrap}
.form .seg{display:flex;background:var(--vlak-2);border-radius:999px;padding:4px;gap:4px;margin:0 0 8px}
.form .seg__opt{flex:1;text-align:center;font-size:13.5px;font-weight:600;padding:7px 6px;border-radius:999px;color:var(--inkt-2);cursor:pointer}
.form .seg__opt input{position:absolute;opacity:0;width:1px;height:1px}
.form .seg__opt.on{background:var(--vlak);color:var(--inkt);box-shadow:0 1px 3px rgba(34,31,43,.12)}
.form .seg__opt:focus-within{outline:2px solid var(--iris);outline-offset:1px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .hint{display:block;font-size:12.5px;color:var(--gedempt);margin-top:6px}
.form .adv{border:1px dashed var(--lijn);border-radius:12px;padding:0 14px;margin:4px 0 10px}
.form .adv summary{display:flex;align-items:center;gap:8px;cursor:pointer;padding:11px 0;font-weight:600;font-size:14.5px;list-style:none}
.form .adv summary::-webkit-details-marker{display:none}
.form .adv summary .ic{width:18px;height:18px;color:var(--gedempt)}
.form .adv summary .tag{margin-left:auto}
.form .adv__body{padding:0 0 12px}
.form .inp.is-disabled{opacity:.55;background:var(--vlak-2)}
.form .checkbox-row.is-disabled{opacity:.55}
.form .adv .fld{margin-bottom:10px}
.form .priv{display:flex;align-items:center;gap:6px;margin-top:14px;color:var(--munt-tekst)}
.form .priv .ic{width:16px;height:16px}
.form .errorlist{margin:4px 0 0}
.res{background:var(--vlak);border:1px solid var(--lijn);border-radius:16px;padding:22px 22px 20px;box-shadow:0 1px 2px rgba(34,31,43,.04),0 16px 40px -24px rgba(34,31,43,.35)}
.results{display:flex;flex-direction:column;gap:16px;min-width:0}
.results>*{min-width:0}
.res--month{border-color:var(--inkt)}
.res--year{box-shadow:none;background:var(--vlak)}
.res .eyebrow{margin-bottom:10px}
.hero-net{display:flex;flex-direction:column;gap:4px;margin:2px 0 14px;padding:16px 18px;background:var(--zon-tint);border-radius:14px}
.hero-net__big{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.hero-net__big span{font-family:var(--font-display);font-weight:800;font-size:clamp(40px,5vw,56px);letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.hero-net__big small{font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--zon-tekst)}
.hero-net__from{font-size:14.5px;color:var(--inkt-2)}
.hero-net__from b{color:var(--inkt)}
.year-net{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 10px}
.year-net span{font-family:var(--font-display);font-weight:700;font-size:30px;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.year-net small{font-size:14.5px;color:var(--inkt-2)}
.year-net small b{color:var(--inkt)}
.res--year .row.hl{background:var(--iris-tint)}
.res--year .row.hl .ic,.res--year .row.hl .k{color:var(--iris-tekst)}
.res .hd{display:flex;gap:16px;align-items:flex-start}
.res .ans{font-family:var(--font-display);font-weight:700;font-size:28px;letter-spacing:-.025em;line-height:1.08;margin:4px 0 12px}
.res .sub{font-size:14.5px;color:var(--inkt-2);margin:0 0 12px}
.badge{width:64px;height:64px;border-radius:20px;background:var(--munt-tint);color:var(--munt-tekst);display:inline-flex;align-items:center;justify-content:center;position:relative;flex:none}
.badge .ic{width:30px;height:30px}
.badge b{position:absolute;right:-6px;bottom:-6px;width:24px;height:24px;border-radius:50%;background:var(--munt);color:#fff;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--vlak)}
.badge b .ic{width:14px;height:14px}
.rows{display:flex;flex-direction:column;min-width:0}
.rows>*{min-width:0}
.row{display:grid;grid-template-columns:26px 1fr auto;gap:10px;padding:11px 0;border-top:1px solid var(--lijn);align-items:start}
.row .ic{color:var(--gedempt);margin-top:2px;width:22px;height:22px}
.row .k{font-size:15px}
.row .k small{display:block;font-size:13px;color:var(--gedempt)}
.row .v{font-family:var(--font-mono);font-size:18px;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.row.hl{background:var(--zon-tint);margin:6px -22px 0;padding:12px 22px;border-top:0}
.row.hl .ic,.row.hl .k{color:var(--zon-tekst)}.row.hl .k{font-weight:700}
.brk{border-top:1px dashed var(--lijn);margin:0;min-width:0;max-width:100%}
.brk summary{display:flex;align-items:center;gap:8px;cursor:pointer;padding:9px 0 9px 36px;font-size:14px;color:var(--iris-tekst);list-style:none;font-weight:600}
.brk summary::-webkit-details-marker{display:none}
.brk summary .ic{width:18px;height:18px;margin-left:-26px}
.brk summary .brk__hint{font-weight:400;color:var(--gedempt);font-size:13px}
.brk summary::after{content:"+";margin-left:auto;font-family:var(--font-mono);color:var(--gedempt)}
.brk[open] summary::after{content:"−"}
.brk__body{padding:4px 0 12px 26px;max-width:100%}
.brk__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;border-radius:10px}
.brk__lead,.brk__note{font-size:13.5px;color:var(--inkt-2);margin:0 0 8px}
.brk__note{margin:8px 0 0}
.brk__t{width:100%;min-width:440px;border-collapse:collapse;font-size:13.5px;background:var(--papier);border:1px solid var(--lijn)}
.brk__t th,.brk__t td{padding:6px 8px;border-bottom:1px solid var(--lijn);text-align:left;vertical-align:top}
.brk__t thead th{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:500;color:var(--inkt-2);background:var(--vlak-2)}
.brk__t td:first-child{min-width:150px}
.brk__t td small{display:block;font-size:12px;color:var(--gedempt);white-space:nowrap}
.brk__t .n{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.brk__t tr.empty td{color:var(--gedempt)}
.brk__t tfoot td{font-weight:600;border-bottom:0;background:var(--vlak-2)}
.res .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;align-items:center}
.res .assume{font-size:13px;color:var(--gedempt);margin:14px 0 0;line-height:1.45}
.res .assume a{color:var(--iris-tekst)}
.explain{margin-top:36px;max-width:820px}
.explain h2{font-size:24px;margin-bottom:8px}
.explain p{max-width:70ch}
.explain .small{font-size:14px;color:var(--inkt-2)}
.explain .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0}
.explain .card{background:var(--vlak);border:1px solid var(--lijn);border-radius:14px;padding:14px 16px}
.explain .card h3{font-size:16px;margin:0 0 4px}
.explain .card p{font-size:14px;color:var(--inkt-2);margin:0 0 6px}
.explain .card .src{font-size:12.5px}
.explain .links{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:8px 0 0;list-style:none}
.explain .links a{display:inline-block;padding:7px 12px;border:1px solid var(--lijn);border-radius:999px;background:var(--vlak);font-size:14px;color:var(--inkt);text-decoration:none}
@media (max-width:800px){
  .calc{grid-template-columns:minmax(0,1fr)}
  .form .two{grid-template-columns:1fr}
  .res{padding:18px 16px 16px}
  .res .ans{font-size:24px}
  .row{grid-template-columns:26px 1fr}
  .row .v{grid-column:2;text-align:left;font-size:17px}
  .row.hl{margin-inline:-16px;padding-inline:16px}
  .brk summary{padding-left:0}
  .brk summary .ic{margin-left:0}
  .brk__body{padding-left:0}
  .brk summary .brk__hint{display:none}
  .explain .grid3{grid-template-columns:1fr}
}