/* Generieke layout voor planners/rekentools (prefix .mod-). Module-specifiek: inline <style> in de module zelf. */
.mod-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem}
.mod-head h1{font-size:1.5rem}
.mod-head .muted{max-width:60ch}
.mod-layout{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:1.25rem;align-items:start}
@media (max-width:900px){.mod-layout{grid-template-columns:1fr}}
.mod-form{position:sticky;top:5rem;padding:1.1rem;display:grid;gap:.9rem}
.mod-form fieldset{border:0;padding:0;margin:0;display:grid;gap:.6rem}
.mod-form legend{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-4);margin-bottom:.3rem}
.mod-field{display:grid;gap:.25rem}
.mod-field .label{margin:0}
.mod-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.mod-unit{position:relative}
.mod-unit .input{padding-right:2.4rem}
.mod-unit span{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);font-size:.8rem;color:var(--fg-4)}
.mod-results{display:grid;gap:1.25rem}
.mod-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem}
.mod-kpi{padding:.9rem 1rem}
.mod-kpi .k{font-size:.75rem;color:var(--fg-4);font-weight:500}
.mod-kpi .v{font-size:1.35rem;font-weight:600;letter-spacing:-.02em;margin-top:.15rem;font-variant-numeric:tabular-nums}
.mod-kpi .d{font-size:.75rem;color:var(--fg-4);margin-top:.15rem}
.mod-kpi.good .v{color:var(--lime-600)} .mod-kpi.bad .v{color:var(--rose-500)} .mod-kpi.accent .v{color:var(--indigo-600)}
.mod-card{padding:1.1rem 1.25rem}
.mod-card h2{font-size:1rem;margin-bottom:.75rem}
.mod-table{width:100%;border-collapse:collapse;font-size:.85rem}
.mod-table th,.mod-table td{padding:.45rem .6rem;text-align:right;border-bottom:1px solid var(--line-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.mod-table th{font-weight:500;color:var(--fg-4);font-size:.75rem}
.mod-table th:first-child,.mod-table td:first-child{text-align:left}
.mod-table tr.total td{font-weight:600;border-top:1px solid var(--line)}
.mod-table-wrap{overflow:auto;max-height:420px}
.mod-chart{width:100%;height:auto;display:block}
.mod-legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;font-size:.75rem;color:var(--fg-3);margin-top:.5rem}
.mod-legend i{display:inline-block;width:.7rem;height:.7rem;border-radius:3px;margin-right:.35rem;vertical-align:-1px}
.mod-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem}
.mod-note{font-size:.8rem;color:var(--fg-4);line-height:1.5}
.mod-bron{font-size:.75rem;color:var(--fg-4);border-top:1px dashed var(--line);padding-top:.6rem;margin-top:.5rem}
.mod-bron code{font-family:var(--font-mono);font-size:.7rem;background:var(--slate-100);padding:.1rem .35rem;border-radius:4px}
.mod-toggle{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);padding:.2rem;background:#fff}
.mod-toggle label{padding:.3rem .8rem;border-radius:var(--r-pill);font-size:.8rem;cursor:pointer;color:var(--fg-3)}
.mod-toggle input{display:none}
.mod-toggle input:checked+span,.mod-toggle label.on{background:var(--slate-900);color:#fff;border-radius:var(--r-pill);padding:.3rem .8rem;margin:-.3rem -.8rem}
.mod-steps{display:grid;gap:.5rem;font-size:.85rem}
.mod-steps div{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;border-bottom:1px solid var(--line-soft)}
.mod-steps div:last-child{border:0;font-weight:600}
.mod-bar{height:.6rem;border-radius:var(--r-pill);background:var(--slate-100);overflow:hidden}
.mod-bar i{display:block;height:100%;background:var(--accent)}
.mod-tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--line);margin-bottom:1rem;overflow:auto}
.mod-tabs a{padding:.6rem .9rem;font-size:.85rem;color:var(--fg-3);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.mod-tabs a.on{color:var(--fg);border-color:var(--slate-900);font-weight:500}