/* (M5) Boekhouding › Stukken om te boeken, Kwartaal invullen en het pakket voor de boekhouder (views/boek/stukken.js, kwartaal.js).
   Alleen tokens; licht en donker komen uit tokens.css. Tikvlakken ≥ 44 px. */
.st-knoppen { margin: 0 0 20px; }
.st-knoppen .btn { min-height: 48px; }
.st-lijst { display: grid; gap: 8px; margin-bottom: 24px; }
.st-lijst > .list { margin-bottom: 8px; }
.st-rij { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 12px 16px; min-height: 64px; }
.st-rij .lead { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--cn-bg-2); color: var(--cn-text-2); }
.st-rij .main { min-width: 0; }
.st-rij .t { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-rij .s { display: block; font-size: var(--cn-fs-s); color: var(--cn-muted); line-height: 1.45; }
.st-rij .st-fout { grid-column: 2 / -1; font-size: var(--cn-fs-s); }
.st-acties { flex-wrap: nowrap; justify-content: flex-end; }
.st-acties .btn { min-height: 44px; }
@media (max-width: 559px) {
  .st-rij { grid-template-columns: 40px minmax(0, 1fr); }
  .st-acties { grid-column: 1 / -1; justify-content: stretch; }
  .st-acties .btn { flex: 1; }
}
.st-uitleg { margin-top: 8px; }

/* Kwartaal invullen: de acht stappen (BOEKHOUDREGELS §11.2) */
.kv-stappen { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; counter-reset: kvstap; }
.kv-stap { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 14px; padding: 14px 16px; background: var(--cn-card); border: 1px solid var(--cn-hair); border-radius: var(--cn-r); counter-increment: kvstap; }
.kv-stap::before { content: counter(kvstap); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--cn-bg-2); color: var(--cn-text-2); font: 400 16px/1 var(--cn-f-serif); }
.kv-stap.klaar::before { content: '✓'; background: var(--cn-solid); color: var(--cn-on-accent); }
.kv-stap.let::before { background: var(--cn-nude); color: var(--cn-nude-ink); }
.kv-stap-body { min-width: 0; }
.kv-stap-t { margin: 4px 0 2px; font-weight: 500; }
.kv-stap-s { margin: 0; color: var(--cn-muted); font-size: var(--cn-fs-s); line-height: 1.5; }
.kv-stap .btn-row { margin-top: 10px; }
.kv-stap .btn { min-height: 44px; }
.kv-vergelijk { width: 100%; border-collapse: collapse; margin: 8px 0 0; font-variant-numeric: tabular-nums; }
.kv-vergelijk th, .kv-vergelijk td { padding: 6px 8px; border-bottom: 1px solid var(--cn-line); text-align: right; }
.kv-vergelijk th:first-child, .kv-vergelijk td:first-child { text-align: left; }
.kv-vergelijk tr.verschil td { color: var(--cn-bad-ink); font-weight: 500; }
.kv-velden { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px 12px; }
.kv-werkboek-rij { font-variant-numeric: tabular-nums; }
.pk-keuze { display: grid; gap: 8px; margin-bottom: 16px; }
.kv-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.kv-rub { border: 0; margin: 0 0 8px; padding: 0; }
.kv-rub legend { padding: 0; margin-bottom: 4px; }

/* Kwartaal invullen › Per post: de snelle invoertabel (ONTWERP-V2 §5.9). Smal: een kaartje per post; breed: twee regels per post */
.kv-posten { display: grid; gap: 10px; margin-bottom: 12px; container-type: inline-size; container-name: kvposten; }
.kv-post { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; grid-template-areas: "dat bed weg" "oms oms oms" "btw btw btw" "cat via via"; gap: 8px 12px; align-items: end; padding: 12px; background: var(--cn-card); border: 1px solid var(--cn-hair); border-radius: var(--cn-r); }
.kv-post > .field { margin: 0; }
.kv-post > :nth-child(1) { grid-area: dat; }
.kv-post > :nth-child(2) { grid-area: oms; }
.kv-post > :nth-child(3) { grid-area: bed; }
.kv-post > :nth-child(4) { grid-area: btw; }
.kv-post > :nth-child(5) { grid-area: cat; }
.kv-post > :nth-child(6) { grid-area: via; }
.kv-post > .kv-pp-weg { grid-area: weg; align-self: start; justify-self: end; }
.kv-pp-som { margin: 8px 0 0; font-variant-numeric: tabular-nums; }
@container kvposten (min-width: 700px) {
  .kv-post { grid-template-columns: 9.5rem minmax(0, 1fr) minmax(0, 1fr) 9rem 44px; grid-template-areas: "dat oms oms bed weg" "btw btw cat via via"; }
}