/* Kerncomponenten van de nieuwe /mijn/ (demo/assets/kern.js). Kleuren en maten zoals op het canvas "De nieuwe schermen". */
.k-wolk, .k-waaier { flex: none; vertical-align: middle; }

/* archiefbudget */
.k-dozen { display: inline-flex; gap: 1px; align-items: center; }
.k-dozen.groot { display: flex; gap: 4px; flex-wrap: wrap; }
.k-tussen { width: 10px; }
.k-bud-knop { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid #E2D2AE; background: #FBF7EE; color: #5B3A1E; font: 700 13px/1 'Plus Jakarta Sans', sans-serif; cursor: pointer; white-space: nowrap; }
.k-bud-knop:hover, .k-bud-knop.open { border: 2px solid #101828; padding: 0 9px; }
.k-bud-knop:focus-visible { outline: 3px solid #2B4EFF; outline-offset: 2px; }
@media (max-width: 760px) { .k-bud-l { display: none; } }
.k-bud { margin: 0; padding: 14px; border-radius: 14px; background: #FBF7EE; border: 1px solid #E2D2AE; display: flex; flex-direction: column; gap: 10px; }
.k-bud-kop { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; flex-wrap: wrap; }
.k-bud-kop span { color: #5B3A1E; }
.k-bud-leg { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: #3B4655; }
.k-blauw { color: #1D3BD8; }
.k-bud figcaption { font-size: 13px; color: #3B4655; }
.k-plan { border-top: 1px solid #E2D2AE; padding-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.k-plan > b { font-size: 13px; color: #5B3A1E; }
.k-plan-r { display: flex; gap: 8px; align-items: center; font-size: 13px; color: #3B4655; }
.k-plan-r > span:first-child { width: 70px; }
.k-plan-r > span:last-child { width: 40px; text-align: right; }
.k-plan-b { flex: 1; height: 8px; border-radius: 999px; background: #F3EDE0; overflow: hidden; }
.k-plan-b i { display: block; height: 100%; background: repeating-linear-gradient(135deg, #B9A27A 0 3px, #D9C49A 3px 6px); }

/* venster (popover op laptop, onderblad op mobiel) */
.k-dlg { width: min(400px, calc(100vw - 24px)); box-sizing: border-box; padding: 18px; border-radius: 16px; border: 1px solid #E4E7EC; box-shadow: 0 16px 40px rgba(16, 24, 40, .22); font-family: 'Plus Jakarta Sans', sans-serif; color: #101828; }
.k-dlg::backdrop { background: rgba(16, 24, 40, .35); }
.k-dlg-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.k-dlg-kop b { font-size: 18px; }
.k-dlg-x { width: 40px; height: 40px; border-radius: 999px; border: 1px solid #D0D5DD; background: #fff; font-size: 20px; cursor: pointer; flex: none; }
.k-uitleg-in { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5; color: #344054; }
.k-uitleg-in p { margin: 0; }
.k-dlg-voet { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 600px) {
  .k-dlg { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: 18px 18px 0 0; max-height: 85vh; overflow: auto; }
}

/* Lees meer */
.k-kort { margin: 0; }
.k-meer summary { cursor: pointer; color: #1D3BD8; font-weight: 700; font-size: 14px; min-height: 32px; display: inline-flex; align-items: center; }
.k-meer p { margin: 6px 0 0; }

/* boekmeter */
.k-meter { display: flex; gap: 6px; align-items: center; text-decoration: none; min-height: 24px; color: #475467; }
.k-meter-l { font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.k-meter-b { flex: 1; display: flex; gap: 3px; min-width: 80px; }
.k-meter-b i { flex: 1; height: 8px; border-radius: 3px; background: #E4E7EC; }
.k-meter-b i.af { background: #2E7D4F; }
.k-meter.groot .k-meter-b i { height: 12px; }
.k-meter-n { font-size: 12px; white-space: nowrap; }

/* gidsstrook */
.k-gids { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 12px; border-radius: 14px; background: #F3F5FF; border: 1px solid #C7D2FE; margin: 0 0 14px; }
.k-gids.vondst { background: #FBF7EE; border-color: #E2D2AE; }
.k-gids.antwoord { background: #ECFDF3; border-color: #ABEFC6; }
.k-gids.mijlpaal { background: #FFF4D6; border-color: #FEDF89; }
.k-gids.af { background: #ECFDF3; border-color: #ABEFC6; }
.k-gids-t { flex: 1; display: flex; flex-direction: column; gap: 1px; font-size: 15px; line-height: 20px; color: #101828; }
.k-gids-l { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #1D3BD8; }
.k-gids.vondst .k-gids-l { color: #6B4E16; } .k-gids.antwoord .k-gids-l { color: #067647; } .k-gids.mijlpaal .k-gids-l { color: #93370D; } .k-gids.af .k-gids-l { color: #067647; }
.k-gids-k { min-height: 40px; padding: 0 16px; border-radius: 10px; background: #fff; color: #1D3BD8; font: 700 14px/1 'Plus Jakarta Sans', sans-serif; border: 1.5px solid #2B4EFF; box-sizing: border-box; text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; cursor: pointer; }
.k-gids-2 { font-size: 14px; font-weight: 700; white-space: nowrap; }
.k-gids-x { width: 36px; height: 36px; border: 0; background: none; color: #667085; font-size: 20px; cursor: pointer; flex: none; }
@media (max-width: 600px) { .k-gids-x { width: 44px; height: 44px; } .k-gids { flex-wrap: wrap; } .k-gids > svg { display: none; } .k-gids-t { flex-basis: calc(100% - 48px); } .k-gids-k { flex: 1; justify-content: center; } }

/* gezichtjes */
.k-gez { position: relative; flex: none; width: 22px; height: 22px; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #F9FAFB; }
.k-gez + .k-gez { margin-left: -4px; }
.k-gez-w { position: absolute; right: -8px; top: -9px; display: flex; background: #fff; border-radius: 4px; }

/* wolkje op een kaartje in de stamboom */
.sb-wolk, .fv-wolk { position: absolute; right: -7px; top: -9px; display: flex; background: #fff; border-radius: 5px; padding: 1px; box-shadow: 0 1px 2px rgba(16, 24, 40, .15); z-index: 2; }
.sb-lp { position: relative; }

/* vragen aan familie (personenpaneel) */
.hv { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; border: 1px solid #C7D2FE; background: #F8F9FF; }
.hv.antwoord { border-color: #ABEFC6; background: #F3FBF6; }
.hv-kop { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; }
.hv-vragen { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.hv-vragen li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.4; }
.hv-vragen li::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #2B4EFF; margin-top: 6px; }
.hv.antwoord .hv-vragen li::before { background: #12B76A; }
.hv-a { display: block; font-weight: 700; color: #101828; }
.hv-a.niet { font-weight: 400; color: #667085; font-style: italic; }
.hv-knoppen { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hv-noot { margin: 0; font-size: 13px; color: #475467; }
.hv-wie { display: flex; gap: 8px; flex-wrap: wrap; }
.hv-stuur { display: flex; gap: 8px; flex-wrap: wrap; }
.hv-stuur button { min-height: 44px; }

/* redactie-hulpvragen staan uit (besluit release "De nieuwe /mijn/"): geen knoppen naar de redactie meer */
body.k-redactie-uit [data-hulp]:not(.hk-hulp):not(.kb-hulpkop), body.k-redactie-uit [data-ak-hulp] { display: none !important; }

/* de gidsstrook boven de preview (over de hele breedte; op de telefoon onder de kop) */
.pv > .k-gids { grid-area: gids; margin: 0; }
.pv:has(> .k-gids) { grid-template-areas: "gids gids" "intro kijker" "links kijker"; }
@media (max-width: 820px) { .pv:has(> .k-gids) { grid-template-areas: "intro" "gids" "kijker" "links"; } }
/* in de kopregel verbergt de telefoon alle spans; de dozen moeten blijven */
.mj-wie .k-bud-knop .k-dozen { display: inline-flex !important; }
.mj-wie .k-bud-knop { min-height: 44px; }

/* de kopregel heeft een eigen knopstijl (onderstreept, zonder rand): het budget houdt zijn doos */
.mj-wie .k-bud-knop { border: 1px solid #E2D2AE; background: #FBF7EE; text-decoration: none; padding: 0 10px; color: #5B3A1E; font-size: 13px; border-radius: 10px; }
.mj-wie .k-bud-knop:hover { border: 2px solid #101828; padding: 0 9px; }
@media (max-width: 1400px) { .mj-wie .k-bud-l { display: none; } }

/* stapel: een dichtgeklapte familie in de stamboom */
.sb-k.sb-stapel { border-style: dashed; border-color: #8C6A3C; background: repeating-linear-gradient(0deg, #FBF7EE 0 6px, #F3E9D2 6px 7px); box-shadow: 3px 3px 0 #E2D2AE, 6px 6px 0 #F3E9D2; }
.sb-k.sb-stapel b { font-size: 18px; }
.sb-lp.sb-stapel { border-style: dashed; background: #FBF7EE; }
.sb-dichtk { align-self: flex-start; min-height: 36px; }

/* Vraag iemand staat in het paneel direct onder de kop: één van de drie taken */
.pp-taak-vraag { padding: 0 20px 12px; display: flex; flex-direction: column; gap: 10px; }
.pp-taak-vraag:empty { display: none; }
.pp-plek{font-size:inherit;font-weight:600;padding:0;min-height:0;vertical-align:baseline}
/* vast woord vóór een veld ("Voor …" bij het voorwoord, "voor …" op de voorkant) */
.vk-voorrij{display:flex;align-items:stretch;border:1.5px solid #C9CED6;border-radius:10px;background:#fff;overflow:hidden}
.vk-voorrij:focus-within{border-color:#2B4EFF;box-shadow:0 0 0 3px #DCE3FF}
.vk-voorpre{display:flex;align-items:center;padding:0 4px 0 14px;color:#475467;font-weight:600}
.vk-voorrij input{border:0!important;box-shadow:none!important;flex:1;min-width:0;padding-left:4px!important;outline:none}
div.mj-veld>label[for]{font-weight:700}
div.mj-veld{display:flex;flex-direction:column;gap:6px;font-size:15px;min-width:0}