@font-face { font-family: 'Atkinson Hyperlegible Next'; font-weight: 400; font-display: swap; src: url("../fonts/atkinson-400-lEu3FxX.woff2") format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-weight: 600; font-display: swap; src: url("../fonts/atkinson-600-RFpf-ud.woff2") format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-weight: 700; font-display: swap; src: url("../fonts/atkinson-700-Tax5xkS.woff2") format('woff2'); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-size: 16px; line-height: 24px; min-height: 100dvh; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
ul { list-style: none; margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* ---------- Schil ---------- */
.app { min-height: 100dvh; display: flex; flex-direction: column; }
.app__main { flex: 1; padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
.page { padding: 4px 16px 32px; max-width: 640px; margin: 0 auto; }
.zacht { color: var(--inkt-zacht); }
.klein { font-size: 14px; line-height: 20px; }
.titel { font-size: 22px; line-height: 28px; font-weight: 700; }
.kop { font-size: 17px; line-height: 24px; font-weight: 700; }
.bedrag-xl { font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -.01em; }
.amt { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon--20 { width: 20px; height: 20px; }

.offline { padding: 6px 16px; font-size: 14px; line-height: 20px; background: var(--liniaal); text-align: center; }

/* ---------- Onderbalk ---------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(68px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--verhoogd);
  box-shadow: var(--schaduw), inset 0 1px 0 var(--liniaal); }
.tabbar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 56px; font-size: 13px; line-height: 16px; color: var(--inkt-zacht); }
.tabbar__item[aria-current="page"] { color: var(--inkt); font-weight: 700; }
.tabbar__icon { position: relative; display: grid; place-items: center; }
.tabbar__add { width: 48px; height: 36px; border-radius: 10px; background: var(--inkt); color: var(--blad); display: grid; place-items: center; }
.badge-count { position: absolute; top: -6px; left: 16px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: var(--markeer); color: var(--op-markeer); font-size: 13px; line-height: 20px; font-weight: 700; text-align: center; }
.badge { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--markeer); color: var(--op-markeer); font-size: 13px; line-height: 20px; font-weight: 600; }

/* ---------- Kop ---------- */
.monthbar { display: flex; align-items: center; height: 56px; gap: 0; }
.monthbar__title { font-size: 22px; line-height: 28px; font-weight: 700; }
.iconbtn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; color: var(--inkt-zacht); }
.iconbtn--ink { color: var(--inkt); }
.spacer { flex: 1; }
.topbar { display: flex; align-items: center; height: 56px; padding: 0 4px; }
.topbar h1 { font-size: 17px; line-height: 24px; font-weight: 700; }

/* ---------- Kasboek-rijen ---------- */
.ledger { border-bottom: 3px double var(--liniaal); }
.row { display: flex; align-items: center; gap: 12px; min-height: 48px; border-top: 1px solid var(--liniaal); }
.row--56 { min-height: 56px; }
.row__grow { flex: 1; min-width: 0; }
.row__amt { font-weight: 600; text-align: right; white-space: nowrap; }
.row__amt--bij { color: var(--bij); }
.section { padding-top: 32px; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 8px; }

.todoline { display: flex; align-items: center; gap: 8px; margin: 20px -16px 0; padding: 0 16px; min-height: 56px; font-weight: 600; }
.todoline--vlak { background: var(--markeer); color: var(--op-markeer); }
.todoline--streep { background: var(--blad); border-left: 4px solid var(--markeer); border-top: 1px solid var(--liniaal); border-bottom: 1px solid var(--liniaal); padding-left: 12px; }

/* ---------- Budgetten ---------- */
.budget { padding: 12px 0; border-top: 1px solid var(--liniaal); display: grid; gap: 8px; }
.budget__line { display: flex; justify-content: space-between; align-items: baseline; }
.budget__amt { font-weight: 600; }
.bar { height: 4px; background: var(--track); }
.bar > i { display: block; height: 100%; background: var(--bij); }
.bar--near > i { background: var(--inkt); }
.bar--over > i { background: var(--stempel); }
.over { color: var(--stempel); font-weight: 600; text-align: right; }
.over-amt { color: var(--stempel); }

/* ---------- Transactierij ---------- */
.tx { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 16px 8px 12px; border-left: 4px solid var(--blad); border-top: 1px solid var(--liniaal); background: var(--blad); }
.tx--open { border-left-color: var(--markeer); }
.tx__init { width: 40px; height: 40px; border-radius: 50%; background: var(--papier); box-shadow: inset 0 0 0 1px var(--liniaal); display: grid; place-items: center; font-weight: 700; flex: none; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.label { display: inline-block; font-size: 13px; line-height: 18px; padding: 0 6px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--liniaal); margin-left: 6px; }
.label--geschat { box-shadow: none; border: 1px dashed var(--inkt-zacht); }
.label--vraag { background: var(--markeer); color: var(--op-markeer); box-shadow: none; font-weight: 600; }
.daygroup { padding: 16px 16px 4px; font-size: 14px; line-height: 20px; color: var(--inkt-zacht); }
.list-bleed { margin: 0 -16px; }

/* ---------- Knoppen ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 16px; border-radius: 10px; font-size: 17px; font-weight: 700; background: var(--inkt); color: var(--blad); text-align: center; }
.btn--ghost { background: transparent; color: var(--inkt); box-shadow: inset 0 0 0 1.5px var(--liniaal); font-weight: 600; }
.btn--text { background: transparent; color: var(--inkt-zacht); font-weight: 600; box-shadow: none; }
.btn--48 { min-height: 48px; font-size: 16px; }
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--track); color: var(--inkt-zacht); cursor: not-allowed; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }

/* ---------- Te doen ---------- */
.segments { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--blad); box-shadow: inset 0 0 0 1px var(--liniaal); }
.segments a { flex: 1; min-height: 44px; display: grid; place-items: center; border-radius: 9px; font-weight: 600; }
.segments a[aria-selected="true"] { background: var(--inkt); color: var(--blad); }
.card { display: flex; flex-direction: column; background: var(--blad); border: 1px solid var(--liniaal); border-radius: 16px; min-height: calc(100dvh - 330px); }
.card__head { padding: 16px; display: grid; gap: 8px; }
.card__meta { display: flex; justify-content: space-between; align-items: center; }
.facts > div { display: flex; justify-content: space-between; padding: 14px 16px; border-top: 1px solid var(--liniaal); }
.facts dd { margin: 0; font-weight: 600; }
.facts dt { color: var(--inkt-zacht); }
.card__actions { margin-top: auto; padding: 16px; display: grid; gap: 12px; }
.pair { display: flex; gap: 12px; }
.pair > * { flex: 1; }
.check { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 24px; height: 24px; }
.check__box { width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--inkt); display: grid; place-items: center; flex: none; color: transparent; }
.check input:checked + .check__box { background: var(--inkt); color: var(--blad); }
.check input:focus-visible + .check__box { outline: 3px solid currentColor; outline-offset: 2px; }
.bigcheck { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--bij); color: var(--bij); }
.empty { text-align: center; display: grid; justify-items: center; gap: 8px; padding: 64px 16px; }

.rawline { background: var(--papier); margin: 0 16px; padding: 10px 12px; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; }
.rawline strong { letter-spacing: .06em; }
.proposals { display: grid; margin-top: 8px; }
.proposal { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 10px 16px; border-top: 1px solid var(--liniaal); cursor: pointer; width: 100%; text-align: left; }
.proposal:has(input:checked) { background: var(--papier); }
.proposal input { position: absolute; opacity: 0; }
.proposal__photo { width: 68px; display: grid; justify-items: center; gap: 2px; font-size: 11px; line-height: 13px; color: var(--inkt-zacht); text-align: center; flex: none; }
.photo { width: 52px; height: 52px; border-radius: 8px; background-color: #fff; background-image: repeating-linear-gradient(135deg, #F2F2EF 0 6px, #E6E7E3 6px 12px); filter: var(--foto-filter); display: grid; place-items: center; font-family: ui-monospace, monospace; font-size: 11px; color: #62675F; }
.photo--new { background: none; border: 2px dashed var(--inkt-zacht); font-size: 22px; }
.radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--inkt-zacht); flex: none; margin-left: auto; }
.proposal input:checked ~ .radio { border: 7px solid var(--inkt); }
.proposal input:focus-visible ~ .radio { outline: 3px solid currentColor; outline-offset: 2px; }
.bought { color: var(--bij); font-weight: 600; }

.toast { position: fixed; left: 12px; right: 12px; bottom: calc(100px + env(safe-area-inset-bottom)); z-index: 40; max-width: 616px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 16px; border-radius: 10px; background: var(--inkt); color: var(--papier); box-shadow: var(--zweef); font-size: 15px; line-height: 20px; animation: toast-in .2s ease; }
.toast button { font-weight: 700; text-decoration: underline; color: inherit; min-height: 44px; }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } }

/* ---------- Sheet ---------- */
.scrim { position: fixed; inset: 0; z-index: 50; background: var(--scrim); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; max-width: 640px; margin: 0 auto; background: var(--verhoogd); border-radius: 20px 20px 0 0; box-shadow: var(--zweef); padding-bottom: env(safe-area-inset-bottom); animation: sheet-in .22s ease; }
.sheet__grip { width: 40px; height: 4px; border-radius: 2px; background: var(--liniaal); margin: 8px auto 0; }
.sheet h2 { font-size: 17px; line-height: 24px; font-weight: 700; padding: 8px 16px 12px; }
.sheet__row { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 0 16px; width: 100%; text-align: left; }
.sheet__row .icon { width: 22px; height: 22px; }
.sheet__row[aria-disabled="true"] { color: var(--inkt-zacht); }
.initial { width: 36px; height: 36px; border-radius: 50%; background: var(--papier); box-shadow: inset 0 0 0 1px var(--liniaal); display: grid; place-items: center; font-weight: 700; flex: none; }
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } }

/* ---------- Skelet ---------- */
.skel { background: var(--track); border-radius: 4px; }

/* ---------- Verdelen ---------- */
.split-head { padding: 4px 16px 20px; border-bottom: 3px double var(--liniaal); display: flex; justify-content: space-between; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 0 14px; border-radius: 10px; background: var(--blad); box-shadow: inset 0 0 0 1px var(--liniaal); font-weight: 600; }
.chip small { font-weight: 400; color: var(--inkt-zacht); margin-left: 4px; font-size: 14px; }
.chip--plain { background: none; box-shadow: none; color: var(--inkt-zacht); }
.lines { background: var(--blad); }
.line { border-left: 4px solid var(--blad); border-top: 1px solid var(--liniaal); padding: 10px 8px 10px 12px; }
.line--open { border-left-color: var(--markeer); }
.line__main { display: flex; align-items: center; gap: 8px; }
.line__name { font-weight: 600; }
.catbtn { min-height: 32px; display: inline-flex; align-items: center; gap: 4px; color: var(--inkt-zacht); font-size: 14px; }
.amtfield { min-width: 100px; height: 44px; padding: 0 12px; border-radius: 10px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--liniaal); text-align: right; font-weight: 600; display: flex; align-items: center; justify-content: flex-end; }
.amtfield--active { box-shadow: inset 0 0 0 2px var(--inkt); }
.choice { display: grid; gap: 8px; padding: 12px 0 4px; }
.choice__opt { min-height: 52px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--liniaal); padding: 6px 12px; text-align: left; display: flex; flex-direction: column; justify-content: center; }
.choice__opt[aria-checked="true"] { background: var(--inkt); color: var(--blad); }
.people { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.person { position: relative; width: 48px; height: 48px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--liniaal); font-weight: 700; display: grid; place-items: center; }
.person[aria-checked="true"] { background: var(--inkt); color: var(--blad); }
.person .star { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--inkt); color: var(--blad); box-shadow: 0 0 0 2px var(--blad); display: grid; place-items: center; font-size: 12px; line-height: 1; }
.actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--verhoogd); box-shadow: var(--schaduw), inset 0 1px 0 var(--liniaal); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
.actionbar__in { max-width: 640px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.actionbar .btn { min-height: 52px; padding: 0 28px; }
.rest { font-size: 20px; line-height: 26px; font-weight: 700; }
.rest--ok { color: var(--bij); }
.rest--neg { color: var(--stempel); }
.keypad { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: var(--toetsenbord); padding: 8px 8px calc(6px + env(safe-area-inset-bottom)); }
.keypad__in { max-width: 640px; margin: 0 auto; }
.keypad__top { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px 8px; gap: 8px; }
.keypad__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.key { height: 50px; border-radius: 8px; background: var(--toets); font-size: 22px; font-weight: 600; display: grid; place-items: center; }
.key--rest { height: 40px; padding: 0 12px; border-radius: 10px; background: var(--toets); font-size: 15px; font-weight: 600; }
.keypad .btn { margin-top: 6px; min-height: 50px; width: 100%; }
.error { color: var(--stempel); font-weight: 600; padding: 8px 16px; }
.done { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 48px 16px 16px; }

/* ---------- Instellingen ---------- */
.radiorow { display: flex; gap: 8px; }
.radiorow label { flex: 1; }
.radiorow input { position: absolute; opacity: 0; }
.radiorow span { display: grid; place-items: center; min-height: 48px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--liniaal); font-weight: 600; }
.radiorow input:checked + span { background: var(--inkt); color: var(--blad); }
.radiorow input:focus-visible + span { outline: 3px solid currentColor; outline-offset: 2px; }

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  .app { flex-direction: row; }
  .tabbar { order: -1; position: sticky; top: 0; align-self: flex-start; width: 260px; height: 100dvh; display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; padding: 16px 12px; background: var(--blad); box-shadow: inset -1px 0 0 var(--liniaal); flex: none; }
  .tabbar::before { content: 'Huishoudboek'; font-size: 17px; font-weight: 700; padding: 0 12px 16px; }
  .tabbar__item { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 10px; font-size: 16px; }
  .tabbar__item[aria-current="page"] { background: var(--papier); }
  .tabbar__add { width: 24px; height: 24px; background: none; color: inherit; }
  .badge-count { position: static; margin-left: auto; }
  .tabbar__item .badge-count { order: 3; }
  .app__main { padding-bottom: 32px; flex: 1; min-width: 0; }
  .page { max-width: 720px; }
  .toast { bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) { .toast, .sheet { animation: none; } }
@media (prefers-contrast: more) { :root { --liniaal: #8A9AA0; --inkt-zacht: var(--inkt); } }

/* ---------- Invoervelden ---------- */
.field { min-height: 56px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--blad); box-shadow: inset 0 0 0 1px var(--liniaal); font-size: 16px; width: 100%; }
.field:focus-visible { box-shadow: inset 0 0 0 2px var(--inkt); outline: none; }

/* ---------- Uitklapvelden op de productkaart ---------- */
.panel > summary { list-style: none; cursor: pointer; }
.panel > summary::-webkit-details-marker { display: none; }
.panel[open] > summary { box-shadow: inset 0 0 0 2px var(--inkt); }
.photo > img { position: absolute; }
.photo { position: relative; overflow: hidden; }
.proposal__photo a { color: inherit; }

/* ---------- Inkomen: gestapelde balk per maand (doc 19 §9) ---------- */
.stack { display: flex; height: 10px; margin: 8px 0; border-radius: 5px; overflow: hidden; background: var(--track); }
.stack > i { display: block; height: 100%; }
.stack > i.stack--est { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .55) 0 3px, transparent 3px 6px); }