/* p-cijfers: pagina's "Wat een uur oplevert", "Wat alles kost" en "Marge per product". Alleen var(--token). */

/* Kop met het antwoord in een oogopslag */
.cf-kop { padding: 22px 24px; display: grid; gap: 6px; }
.cf-kop__waarde { font-size: clamp(34px, 8vw, 52px); font-weight: 650; line-height: 1.05; letter-spacing: -.02em; }
.cf-kop__waarde[data-staat="goed"] { color: var(--goed-tekst); }
.cf-kop__waarde[data-staat="slecht"] { color: var(--slecht-tekst); }
.cf-kop__zin { font-size: 15px; color: var(--tekst-2); max-width: 62ch; }

/* Getallen in een rij of onder elkaar */
.cf-uitleg { font-size: 13.5px; color: var(--tekst-2); max-width: 70ch; line-height: 1.5; }
.cf-uitleg + .cf-uitleg { margin-top: 8px; }

.cf-tabel { min-width: 720px; }
.cf-tabel tfoot td { padding: 9px 12px; font-weight: 650; border-top: 1px solid var(--lijn-sterk); }
.cf-min { color: var(--tekst-3); }
.cf-over { font-weight: 650; }
.cf-geen { font-size: 12.5px; color: var(--tekst-3); max-width: 28ch; text-align: right; margin-left: auto; line-height: 1.35; }
.cf-notitie { margin-top: 10px; }

/* Rekensom: regels met een bedrag rechts */
.cf-som { display: grid; gap: 0; max-width: 560px; }
.cf-som__rij {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--lijn); font-size: 14px;
}
.cf-som__rij--totaal { border-bottom: 0; border-top: 1px solid var(--lijn-sterk); font-weight: 650; font-size: 15px; }
.cf-som__rij--stil { color: var(--tekst-3); font-size: 13px; }
.cf-som__rij .num[data-staat="slecht"] { color: var(--slecht-tekst); }
.cf-som__rij .num[data-staat="goed"] { color: var(--goed-tekst); }
.cf-som__label { min-width: 0; }

.cf-twee { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Staafjes per maand */
.cf-maanden { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; align-items: stretch; }
.cf-maand { display: grid; grid-template-rows: 90px auto auto; gap: 4px; justify-items: center; font-size: 11px; color: var(--tekst-3); min-width: 0; }
.cf-maand__vlak { position: relative; width: 100%; height: 100%; }
.cf-maand__nul { position: absolute; left: 0; right: 0; height: 1px; background: var(--lijn-sterk); }
.cf-maand__staaf { position: absolute; left: 18%; right: 18%; background: var(--roest); border-radius: 3px; }
.cf-maand__staaf[data-neg="ja"] { background: var(--slecht); }
.cf-maand__bedrag { font-size: 10.5px; color: var(--tekst-2); }

/* Kosten per groep */
.cf-groep { border-bottom: 1px solid var(--lijn); }
.cf-groep:last-child { border-bottom: 0; }
.cf-groep > summary {
  list-style: none; cursor: pointer; padding: 14px 20px; display: grid; gap: 8px;
}
.cf-groep > summary::-webkit-details-marker { display: none; }
.cf-groep > summary:hover { background: var(--opp-2); }
.cf-groep > summary:focus-visible { outline: 2px solid var(--roest); outline-offset: -2px; }
.cf-groep__bovenrij { display: flex; align-items: center; gap: 10px; }
.cf-groep__kop { font-weight: 600; font-size: 14.5px; flex: 1; min-width: 0; }
.cf-groep__bedrag { font-weight: 650; font-size: 14.5px; }
.cf-groep__pct { font-size: 12.5px; color: var(--tekst-3); min-width: 42px; text-align: right; }
.cf-groep__pijl { color: var(--tekst-3); transition: rotate .15s; display: inline-flex; }
.cf-groep[open] .cf-groep__pijl { rotate: 90deg; }
.cf-balk { height: 6px; border-radius: 3px; background: var(--lijn-2); overflow: hidden; }
.cf-balk i { display: block; height: 100%; background: var(--roest); border-radius: 3px; }
.cf-groep__rekeningen { padding: 0 20px 14px; }
.cf-groep__rekeningen .tabel { min-width: 420px; }

/* Marge: afwijkende prijsafspraken */
.cf-laag { color: var(--slecht-tekst); font-weight: 650; }
.cf-afspraak { border-bottom: 1px solid var(--lijn); }
.cf-afspraak:last-child { border-bottom: 0; }
.cf-afspraak__kop { padding: 14px 20px 4px; font-weight: 600; font-size: 14.5px; }
.cf-afspraak .tabel { min-width: 560px; }

@media (max-width: 600px) {
  .cf-kop { padding: 18px 16px; }
  .cf-groep > summary, .cf-groep__rekeningen, .cf-afspraak__kop { padding-left: 14px; padding-right: 14px; }
}
.cf-som__rij .num { white-space: nowrap; }
.cf-afspraak .tabel { table-layout: fixed; } .cf-afspraak .tabel th:first-child { width: 22%; }

.cf-tabel td.num { white-space: nowrap; }
@media (max-width: 600px) { .cf-maand__bedrag { font-size: 9px; } .cf-maand { font-size: 10px; } }