/* ============================================================================
   Mia OS · Strak — os-ontdek.css  (kennismaking, ideeën, wat kan hier, voorstellen, leerde)
   Alleen Strak-tokens uit os-strak.css (Helder + Avond via html[data-thema]). Backend-rustig:
   kleine maten, één accent, geen glas/blur/gradient. 44px raakvlak op touch, focus zichtbaar,
   prefers-reduced-motion. Alles onder het voorvoegsel .oo- zodat niets anders geraakt wordt.
   ========================================================================== */
.oo-laag, .oo-checklist, .oo-nieuw, .ms-galerij {
  --oo-vlak: var(--vlak, #fff); --oo-vlak2: var(--vlak2, #F7F8F8); --oo-zacht: var(--zacht, #EEF4F4);
  --oo-lijn: var(--lijn, rgba(20,32,36,.08)); --oo-lijn2: var(--lijn2, rgba(20,32,36,.13));
  --oo-inkt: var(--inkt, #1A2124); --oo-inkt2: var(--inkt2, #566166); --oo-inkt3: var(--inkt3, #8B9599);
  --oo-teal: var(--teal, #0E6E73); --oo-teal2: var(--teal2, #0B5A5E); --oo-tealz: var(--teal-z, #E3EFEF);
  --oo-oker: var(--oker, #B9821A); --oo-groen: var(--groen, #2F8A5B); --oo-rood: var(--warn, #C24A42);
  --oo-r1: var(--r1, 8px); --oo-r2: var(--r2, 12px); --oo-r3: var(--r3, 20px);
  --oo-f: var(--f, 'Switzer', system-ui, sans-serif); --oo-m: var(--m, 'Fragment Mono', ui-monospace, monospace);
  --oo-knop-h: 36px;
  font-family: var(--oo-f); color: var(--oo-inkt); font-size: 14px; line-height: 1.45; letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
@media (pointer: coarse) { .oo-laag, .oo-checklist, .oo-nieuw, .ms-galerij { --oo-knop-h: 44px; } }
.oo-laag *, .oo-checklist *, .oo-nieuw * { box-sizing: border-box; }
.oo-laag svg, .oo-checklist svg, .oo-nieuw svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.oo-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- laag + scrim ---------------------------------------------------- */
.oo-laag { position: fixed; inset: 0; z-index: 9400; display: grid; place-items: center; padding: 24px; }
.oo-laag.oo-kaal { pointer-events: none; }
.oo-scrim { position: absolute; inset: 0; background: rgba(14,19,21,.32); opacity: 0; transition: opacity .16s ease; }
html[data-thema="avond"] .oo-scrim { background: rgba(0,0,0,.55); }
.oo-laag.oo-in .oo-scrim { opacity: 1; }
.oo-laag > .oo-kaart, .oo-laag > .oo-paneel { position: relative; opacity: 0; transform: translateY(6px); transition: opacity .16s ease, transform .2s cubic-bezier(.2,.8,.2,1); }
.oo-laag.oo-in > .oo-kaart, .oo-laag.oo-in > .oo-paneel { opacity: 1; transform: none; }
.oo-laag.oo-weg .oo-scrim, .oo-laag.oo-weg > .oo-kaart, .oo-laag.oo-weg > .oo-paneel { opacity: 0; }
.oo-laag.oo-verstopt { visibility: hidden; }

/* ---------- algemene bouwstenen -------------------------------------------- */
.oo-kicker, .oo-pos { font-family: var(--oo-m); font-size: 11.5px; color: var(--oo-inkt3); letter-spacing: .02em; }
.oo-kop { font-size: 22px; line-height: 1.22; font-weight: 600; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
.oo-h2 { font-size: 17px; line-height: 1.3; font-weight: 600; margin: 0; }
.oo-h3 { font-size: 15px; font-weight: 600; margin: 0; }
.oo-h4 { font-size: 12px; font-weight: 600; margin: 18px 0 6px; color: var(--oo-inkt2); text-transform: none; }
.oo-sub { color: var(--oo-inkt2); margin: 6px 0 0; font-size: 13.5px; text-wrap: pretty; }
.oo-knop, .oo-knop2, .oo-link, .oo-chip, .oo-x, .oo-sw, .oo-vraag, .oo-zoekdemo, .oo-vk-x, .oo-ckkop {
  font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.oo-knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--oo-knop-h); padding: 0 16px;
  border: 0; border-radius: var(--oo-r1); background: var(--oo-teal); color: #fff; font-weight: 600; font-size: 13.5px; white-space: nowrap; }
html[data-thema="avond"] .oo-knop { color: #071012; }
.oo-knop:hover { background: var(--oo-teal2); }
html[data-thema="avond"] .oo-knop:hover { background: #3DBAB1; }
.oo-knop[disabled] { opacity: .65; cursor: progress; }
.oo-knop-vol { width: 100%; margin-top: 12px; }
.oo-knop2 { display: inline-flex; align-items: center; justify-content: center; min-height: var(--oo-knop-h); padding: 0 14px; border-radius: var(--oo-r1);
  background: var(--oo-vlak); border: 1px solid var(--oo-lijn2); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.oo-knop2:hover { background: var(--oo-vlak2); }
.oo-knop2.klein { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
@media (pointer: coarse) { .oo-knop2.klein { min-height: 44px; } }
.oo-knop2.gevaar { color: var(--oo-rood); }
.oo-link { background: none; border: 0; padding: 0 4px; min-height: var(--oo-knop-h); color: var(--oo-inkt2); font-size: 13.5px; border-radius: var(--oo-r1); }
.oo-link:hover { color: var(--oo-inkt); }
.oo-x { display: grid; place-items: center; width: 36px; height: 36px; border: 0; background: none; border-radius: var(--oo-r1); color: var(--oo-inkt2); flex: none; }
.oo-x:hover { background: var(--oo-vlak2); color: var(--oo-inkt); }
@media (pointer: coarse) { .oo-x { width: 44px; height: 44px; } }
.oo-acties { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.oo-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 99px; background: var(--oo-tealz); color: var(--oo-teal); font-size: 11.5px; font-weight: 500; }
html[data-thema="avond"] .oo-tag { color: #6FD0C6; }
.oo-tag.zacht { background: var(--oo-vlak2); color: var(--oo-inkt2); border: 1px solid var(--oo-lijn); }
.oo-bol { display: inline-grid; place-items: center; width: 36px; height: 28px; border-radius: 99px; background: var(--oo-teal); color: #fff; margin: 4px 0 14px; }
html[data-thema="avond"] .oo-bol { color: #071012; }
.oo-bol.klein { width: 30px; height: 30px; margin: 0; }
.oo-bol svg { width: 16px; height: 16px; }

.oo-laag :focus-visible, .oo-checklist :focus-visible, .oo-nieuw :focus-visible { outline: 2px solid var(--oo-teal); outline-offset: 2px; }
html[data-thema="avond"] .oo-laag :focus-visible, html[data-thema="avond"] .oo-checklist :focus-visible, html[data-thema="avond"] .oo-nieuw :focus-visible { outline-color: #6FD0C6; }

/* chips (onderwerpen + filters) */
.oo-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.oo-chip { min-height: 40px; padding: 0 14px; border-radius: var(--oo-r1); border: 1px solid var(--oo-lijn2); background: var(--oo-vlak); font-size: 14px; font-weight: 500; }
.oo-chip:hover { border-color: var(--oo-teal); }
.oo-chip[aria-pressed="true"] { background: var(--oo-teal); border-color: var(--oo-teal); color: #fff; }
html[data-thema="avond"] .oo-chip[aria-pressed="true"] { color: #071012; }
.oo-chip.klein { min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: 99px; }
@media (pointer: coarse) { .oo-chip, .oo-chip.klein { min-height: 44px; } }

/* schakelaar */
.oo-sch { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 8px 8px 14px; margin-top: 8px;
  background: var(--oo-vlak); border: 1px solid var(--oo-lijn); border-radius: var(--oo-r2); font-size: 14px; }
.oo-sw { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; min-width: 64px; padding: 0 6px 0 12px; border-radius: 99px; border: 1px solid var(--oo-lijn2);
  background: var(--oo-vlak2); color: var(--oo-inkt2); font-size: 12.5px; font-weight: 600; justify-content: space-between; }
.oo-sw i { width: 22px; height: 22px; border-radius: 50%; background: var(--oo-inkt3); transition: background .15s; }
.oo-sw[aria-checked="true"] { background: var(--oo-teal); border-color: var(--oo-teal); color: #fff; flex-direction: row; }
html[data-thema="avond"] .oo-sw[aria-checked="true"] { color: #071012; }
.oo-sw[aria-checked="true"] i { background: #fff; }
html[data-thema="avond"] .oo-sw[aria-checked="true"] i { background: #071012; }
@media (pointer: coarse) { .oo-sw { min-height: 44px; } }

/* ---------- kennismaking ---------------------------------------------------- */
.oo-kennis { width: min(440px, 100%); max-height: min(760px, calc(100dvh - 48px)); display: flex; flex-direction: column;
  background: var(--oo-vlak2); border-radius: var(--oo-r3); box-shadow: var(--sh-l); overflow: hidden; }
html[data-thema="avond"] .oo-kennis { background: var(--oo-vlak); }
.oo-kbody { flex: 1; overflow: auto; padding: 18px 22px 8px; overscroll-behavior: contain; }
.oo-kk { display: flex; align-items: center; justify-content: space-between; min-height: 32px; margin-bottom: 8px; }
.oo-kk .oo-link { font-family: var(--oo-m); font-size: 11.5px; color: var(--oo-inkt3); min-height: 32px; }
.oo-kvoet { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 12px 22px 18px; }
.oo-kvoet > :first-child { justify-self: start; }
.oo-kvoet > :last-child { justify-self: end; }
.oo-dots { display: inline-flex; gap: 5px; align-items: center; }
.oo-dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--oo-lijn2); transition: width .2s, background .2s; }
.oo-dots i.on { width: 18px; background: var(--oo-teal); }
.oo-kennis .oo-kop { margin-top: 2px; }

/* stap 2 — voorstel-Start */
.oo-voorstel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.oo-vk { background: var(--oo-vlak); border: 1px solid var(--oo-lijn); border-radius: var(--oo-r2); padding: 10px 10px 12px 12px; min-height: 92px; text-align: left; transition: opacity .15s; }
html[data-thema="avond"] .oo-vk { background: var(--oo-vlak2); }
.oo-vk.breed { grid-column: 1 / -1; min-height: 76px; }
.oo-vk.weg { opacity: .45; border-style: dashed; }
.oo-vk.weg .oo-pv { visibility: hidden; }
.oo-vk-k { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.oo-vk-k b { font-size: 13.5px; font-weight: 600; }
.oo-vk-x { display: grid; place-items: center; width: 28px; height: 28px; margin: -4px -4px 0 0; border: 0; background: none; border-radius: var(--oo-r1); color: var(--oo-inkt3); }
.oo-vk-x:hover { background: var(--oo-vlak2); color: var(--oo-inkt); }
.oo-vk-x svg { width: 15px; height: 15px; }
@media (pointer: coarse) { .oo-vk-x { width: 44px; height: 44px; margin: -10px -10px -6px 0; } }
.oo-vk-idee { border: 1.5px dashed color-mix(in srgb, var(--oo-teal) 55%, transparent); background: transparent !important; color: var(--oo-teal); cursor: pointer; display: flex; flex-direction: column; gap: 2px; font: inherit; }
html[data-thema="avond"] .oo-vk-idee { color: #6FD0C6; }
.oo-vk-idee b { font-size: 13.5px; }
.oo-vk-idee span { font-size: 12.5px; }

/* mini-voorbeelden (ook in galerij) */
.oo-pv { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; font-size: 12.5px; color: var(--oo-inkt2); min-width: 0; }
.oo-pv-v { color: var(--oo-inkt); font-size: 13px; font-variant-numeric: tabular-nums; }
.oo-pv-v.groot { font-size: 20px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
.oo-pv-s { color: var(--oo-inkt3); font-size: 12px; }
.oo-pv-bt { display: block; height: 4px; border-radius: 99px; background: var(--oo-lijn2); overflow: hidden; margin: 6px 0 2px; }
.oo-pv-bt i { display: block; height: 100%; background: var(--oo-teal); border-radius: 99px; }
.oo-pv-r { display: flex; align-items: center; gap: 7px; color: var(--oo-inkt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oo-pv-r.af { color: var(--oo-inkt3); text-decoration: line-through; }
.oo-pv-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--oo-teal); flex: none; }
.oo-pv-dot.st-let { background: var(--oo-oker); }
.oo-pv-dot.st-ok { background: var(--oo-groen); }
.oo-pv-ck { width: 11px; height: 11px; border-radius: 3px; border: 1.5px solid var(--oo-inkt3); flex: none; }
.oo-pv-r.af .oo-pv-ck { background: var(--oo-inkt3); }
.oo-pv-c { color: var(--oo-inkt); font-size: 13px; font-style: italic; }
.oo-pv-foto { display: flex; gap: 3px; height: 34px; }
.oo-pv-foto i { flex: 1; border-radius: 4px; background: var(--oo-tealz); }
.oo-pv-foto i:nth-child(2) { background: color-mix(in srgb, var(--oo-oker) 22%, var(--oo-vlak)); }
.oo-pv-foto i:nth-child(3) { background: color-mix(in srgb, var(--oo-groen) 20%, var(--oo-vlak)); }

/* stap 3 — vraag aan Mia */
.oo-vragen { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.oo-vraag { text-align: left; padding: 11px 14px; min-height: 44px; border-radius: var(--oo-r2); border: 1px solid var(--oo-lijn); background: var(--oo-vlak); font-size: 14px; line-height: 1.35; }
html[data-thema="avond"] .oo-vraag { background: var(--oo-vlak2); }
.oo-vraag:hover { border-color: var(--oo-teal); }
.oo-vraag[aria-checked="true"] { background: var(--oo-teal); border-color: var(--oo-teal); color: #fff; }
html[data-thema="avond"] .oo-vraag[aria-checked="true"] { background: var(--oo-teal); border-color: var(--oo-teal); color: #071012; }
.oo-vb { margin-top: 12px; padding: 12px 14px; border-radius: var(--oo-r2); background: var(--oo-vlak); border: 1px solid var(--oo-lijn); }
html[data-thema="avond"] .oo-vb { background: var(--oo-vlak2); }
.oo-vb .oo-vk-k b { font-size: 13.5px; }
.oo-knop-2 { background: var(--oo-vlak); color: var(--oo-inkt); border: 1px solid var(--oo-lijn2); }
.oo-knop-2:hover { background: var(--oo-zacht); }
html[data-thema="avond"] .oo-knop-2 { color: var(--oo-inkt); background: var(--oo-vlak2); }

/* stap 4 — zoekbalk */
.oo-zoekdemo { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; margin-top: 16px; padding: 0 10px 0 14px;
  border-radius: var(--oo-r2); border: 1px solid var(--oo-lijn2); background: var(--oo-vlak); color: var(--oo-inkt3); font-size: 14.5px; text-align: left; }
html[data-thema="avond"] .oo-zoekdemo { background: var(--oo-vlak2); }
.oo-zoekdemo:hover { border-color: var(--oo-teal); }
.oo-zoekdemo span { flex: 1; }
.oo-zoekdemo kbd { font-family: var(--oo-m); font-size: 11.5px; padding: 2px 6px; border: 1px solid var(--oo-lijn2); border-radius: 5px; color: var(--oo-inkt2); }
.oo-rijen { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.oo-rij { padding: 10px 14px; border-radius: var(--oo-r2); background: var(--oo-vlak); border: 1px solid var(--oo-lijn); display: flex; flex-direction: column; gap: 2px; }
html[data-thema="avond"] .oo-rij { background: var(--oo-vlak2); }
.oo-rij b { font-size: 13.5px; font-weight: 600; }
.oo-rij span { font-size: 13px; color: var(--oo-inkt2); }

/* stap 5 + checklist */
.oo-ck { margin-top: 10px; padding: 12px 14px; border-radius: var(--oo-r2); background: var(--oo-vlak); border: 1px solid var(--oo-lijn); }
html[data-thema="avond"] .oo-ck, html[data-thema="avond"] .oo-kennis .oo-sch { background: var(--oo-vlak2); }
.oo-ck > b { font-size: 13.5px; font-weight: 600; }
.oo-ckl { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.oo-ckl li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; min-height: 24px; }
.oo-ckl li i { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--oo-inkt3); display: grid; place-items: center; flex: none; }
.oo-ckl li i svg { width: 12px; height: 12px; stroke-width: 2.4; }
.oo-ckl li.af { color: var(--oo-inkt3); }
.oo-ckl li.af span:first-of-type { text-decoration: line-through; }
.oo-ckl li.af i { background: var(--oo-teal); border-color: var(--oo-teal); color: #fff; }

.oo-checklist { position: fixed; left: 16px; bottom: 16px; z-index: 900; width: 248px; background: var(--oo-vlak); border-radius: var(--oo-r2); box-shadow: var(--sh-m); overflow: hidden; }
.oo-ckkop { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 40px; padding: 0 14px; background: none; border: 0; font-size: 13.5px; }
.oo-ckkop b { font-weight: 600; }
.oo-ckn { font-family: var(--oo-m); font-size: 11.5px; color: var(--oo-inkt3); }
.oo-ckbody { display: none; padding: 0 14px 10px; }
.oo-checklist.open .oo-ckbody { display: block; }
.oo-ckbody .oo-link { font-size: 12.5px; min-height: 32px; padding: 0; margin-top: 2px; }
@media (max-width: 759px) { .oo-checklist { left: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); width: auto; max-width: 260px; } .oo-ckkop { min-height: 44px; } }

/* kaart "Nieuw in Start" (bestaande gebruikers) */
.oo-nieuw { position: fixed; right: 16px; bottom: 16px; z-index: 900; width: min(340px, calc(100vw - 32px)); display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; background: var(--oo-vlak); border-radius: var(--oo-r2); box-shadow: var(--sh-m); }
@media (max-width: 759px) { .oo-nieuw { right: 12px; left: 12px; width: auto; bottom: calc(76px + env(safe-area-inset-bottom)); } }

/* ---------- panelen (ideeën, wat kan hier, voorstellen, leerde) ------------- */
.oo-paneel { width: min(760px, 100%); max-height: min(820px, calc(100dvh - 48px)); display: flex; flex-direction: column;
  background: var(--oo-vlak2); border-radius: var(--oo-r3); box-shadow: var(--sh-l); overflow: hidden; }
html[data-thema="avond"] .oo-paneel { background: var(--oo-vlak); }
.oo-paneel.oo-smal { width: min(480px, 100%); }
.oo-pkop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 16px 12px 22px; border-bottom: 1px solid var(--oo-lijn); }
.oo-pbody { flex: 1; overflow: auto; padding: 14px 22px 20px; overscroll-behavior: contain; }
.oo-pvoet { padding: 6px 22px 12px; border-top: 1px solid var(--oo-lijn); }
.oo-leeg { padding: 18px 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

/* ideeën-galerij */
.oo-filters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin: 0 -4px 12px; padding-left: 4px; scrollbar-width: none; }
.oo-filters::-webkit-scrollbar { display: none; }
.oo-filters .oo-chip { flex: none; }
.oo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.oo-idee { display: flex; flex-direction: column; background: var(--oo-vlak); border: 1px solid var(--oo-lijn); border-radius: var(--oo-r2); padding: 10px 12px 12px; min-width: 0; }
html[data-thema="avond"] .oo-idee { background: var(--oo-vlak2); }
.oo-pv-kader { background: var(--oo-vlak2); border: 1px solid var(--oo-lijn); border-radius: var(--oo-r1); padding: 6px 10px 10px; min-height: 74px; }
html[data-thema="avond"] .oo-pv-kader { background: var(--oo-vlak); }
.oo-it { font-size: 14px; font-weight: 600; margin: 10px 0 0; line-height: 1.3; }
.oo-iv { font-size: 12.5px; color: var(--oo-inkt2); margin: 3px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.oo-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.oo-idee .oo-acties { margin-top: auto; padding-top: 10px; }
.oo-idee .oo-knop, .oo-idee .oo-knop2 { min-height: 32px; padding: 0 12px; font-size: 13px; }
@media (pointer: coarse) { .oo-idee .oo-knop, .oo-idee .oo-knop2 { min-height: 44px; } }

/* wat kan hier */
.oo-l-watkan { place-items: end; }
.oo-l-watkan .oo-scrim { background: rgba(14,19,21,.22); }
.oo-wkp { width: min(420px, 100%); max-height: calc(100dvh - 48px); }
.oo-wkl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.oo-wk { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--oo-lijn); }
.oo-wk:last-child { border-bottom: 0; }
.oo-wk div { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; min-width: 0; }
.oo-wk div b { font-weight: 600; font-size: 13.5px; display: inline; }
.oo-wk div > span:last-child { color: var(--oo-inkt2); }
.oo-wk.niet { opacity: .62; }
.oo-niet { color: var(--oo-inkt3); font-size: 12px; }
.oo-nr { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--oo-teal); color: #fff; font-size: 11.5px; font-weight: 700; flex: none; font-variant-numeric: tabular-nums; }
html[data-thema="avond"] .oo-nr { color: #071012; }
.oo-nr.leeg { background: none; border: 1.5px dashed var(--oo-lijn2); }
.oo-wka { margin-top: 16px; }
.oo-markers { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
.oo-mark { position: fixed; border: 2px solid var(--oo-teal); border-radius: var(--oo-r2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--oo-teal) 18%, transparent); }
.oo-mark i { position: absolute; top: -10px; left: -10px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--oo-teal); color: #fff; font: 700 11.5px/1 var(--oo-f); font-style: normal; }
html[data-thema="avond"] .oo-mark { border-color: #6FD0C6; }
html[data-thema="avond"] .oo-mark i { background: #6FD0C6; color: #071012; }
.oo-l-watkan > .oo-paneel { z-index: 2; }

/* voorstellen */
.oo-vsl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.oo-vs { background: var(--oo-vlak); border: 1px solid var(--oo-lijn); border-radius: var(--oo-r2); padding: 12px 14px 14px; }
html[data-thema="avond"] .oo-vs { background: var(--oo-vlak2); }
.oo-vs .oo-it { margin: 0; font-size: 14.5px; }
.oo-waarom { display: flex; gap: 8px; margin: 6px 0 0; font-size: 13px; color: var(--oo-inkt2); }
.oo-waarom b { font-weight: 600; color: var(--oo-inkt2); }
.oo-waarom .oo-ic svg { width: 15px; height: 15px; color: var(--oo-inkt3); margin-top: 2px; }

/* leerde */
.oo-tabel { list-style: none; margin: 0; padding: 0; border: 1px solid var(--oo-lijn); border-radius: var(--oo-r2); background: var(--oo-vlak); overflow: hidden; }
html[data-thema="avond"] .oo-tabel { background: var(--oo-vlak2); }
.oo-tabel li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n k" "m k"; column-gap: 12px; align-items: center; padding: 8px 8px 8px 12px; border-bottom: 1px solid var(--oo-lijn); }
.oo-tabel li:last-child { border-bottom: 0; }
.oo-tn { grid-area: n; font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oo-tm { grid-area: m; font-size: 12px; color: var(--oo-inkt3); font-variant-numeric: tabular-nums; }
.oo-tabel li .oo-knop2 { grid-area: k; }
.oo-tabel li:not(:has(.oo-tm)) { grid-template-areas: "n k"; }
.oo-eind { margin-top: 18px; }

/* kaartbouwer-terugval */
.oo-bouwer { width: min(880px, 100%); height: min(760px, calc(100dvh - 48px)); }
.oo-bouwer-fr { flex: 1; width: 100%; border: 0; background: var(--oo-vlak); }

/* ---------- telefoon: bladen van onderen ------------------------------------ */
@media (max-width: 759px) {
  .oo-laag { padding: 0; place-items: end stretch; }
  .oo-kennis, .oo-paneel, .oo-paneel.oo-smal, .oo-wkp { width: 100%; max-height: calc(100dvh - 24px); border-radius: var(--oo-r3) var(--oo-r3) 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .oo-kennis { height: calc(100dvh - 24px); }
  .oo-bouwer { height: calc(100dvh - 24px); }
  .oo-laag > .oo-kaart, .oo-laag > .oo-paneel { transform: translateY(24px); }
  .oo-kbody { padding: 16px 18px 8px; }
  .oo-kvoet { padding: 10px 18px 16px; }
  .oo-pkop { padding: 16px 10px 10px 18px; }
  .oo-pbody { padding: 12px 18px 18px; }
  .oo-grid { grid-template-columns: 1fr; gap: 8px; }
  .oo-idee .oo-acties { flex-direction: column; }
  .oo-idee .oo-acties > * { width: 100%; }
  .oo-iv { display: none; }
  .oo-kop { font-size: 21px; }
}
@media (max-width: 359px) { .oo-grid { grid-template-columns: 1fr; } }

/* ---------- minder beweging ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .oo-scrim, .oo-laag > .oo-kaart, .oo-laag > .oo-paneel, .oo-dots i, .oo-vk, .oo-sw i { transition: none !important; }
  .oo-laag > .oo-kaart, .oo-laag > .oo-paneel { transform: none !important; }
}

/* Widgets V2 (04-10): echte voorbeelden (kaart.html?idee=…) i.p.v. schetsen */
.oo-pv-echt { display: flex; justify-content: center; margin: 0; }
.oo-pv-fr { display: block; border: 0; width: 100%; max-width: 344px; height: 168px; border-radius: 14px; background: var(--oo-vlak); box-shadow: 0 0 0 1px var(--oo-lijn); pointer-events: none; }
.oo-pv-echt.oo-pv-s .oo-pv-fr { width: 168px; }
.oo-pv-kader:has(.oo-pv-echt) { padding: 0; background: transparent; border: 0; min-height: 168px; }
.oo-vk .oo-pv-echt, .oo-vb .oo-pv-echt { margin-top: 8px; }
.oo-ik { margin: 6px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--oo-inkt3); }
.oo-ik:empty { display: none; }