/* Senzuru demo: inkt op gebroken wit, één diep accent. Oranje alleen in de figuurtjes. */
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
/* Fraunces zonder cijfers: cijfers vallen terug op Inter (geen krullerige 4). */
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-002F, U+003A-10FFFF; }

:root {
  --bg: #F4F1EB; --ink: #1D1B18; --accent: #24473B;
  --soft: #4A4640; --muted: #6B655D; --paper: #FBFAF7; --tile: #ECE7DE;
  --line: rgba(29,27,24,.12); --line-strong: rgba(29,27,24,.22);
  --warn: #7A4A0C; --danger: #8C3D32;
  --vast-licht: #F4F1EB; --tegel-inkt: #1D1B18; --tegel-accent: #24473B; --tegel-zacht: #57524A; --line-card: #D3CDC3; /* designwerkstuk S6 fase 1: vaste kleuren, ook in het donker (tegel blijft licht, Eli 1/11; licht op groen) */
  --fs-xs: .72rem; --fs-s: .8rem; --fs-sm: .85rem; --fs-m: .9rem; --fs-base: 1rem; --fs-l: 1.2rem; --fs-xl: 1.5rem; --fs-xxl: 2rem; /* S6 fase 1: alleen waar de waarde exact gelijk is */
  --line-field: #85827E; /* designwerkstuk S4 (3/11, WCAG 1.4.11): rand van velden, keuzelijsten, zoekveld, stepper, notitie- en toevoegveld, linkregels, spoor van de schakelaar (UIT) en de reactiepil; ≥ 3:1 op --bg en --paper. --line-strong blijft voor de rest */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Fraunces", "Inter", Georgia, serif;
  --tap: 44px;
  color: var(--ink); background: var(--bg); font-family: var(--sans); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; }
img, svg { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; font-size: 16px; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2 { font-family: var(--serif); font-weight: 500; line-height: 1.15; margin: 0 0 .4em; }
h1 { font-size: var(--fs-xxl); } h2 { font-size: 1.3rem; }
p { margin: 0 0 .8em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.label { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; font-family: var(--sans); margin: 0 0 6px; }
.meta { color: var(--muted); font-size: .88rem; }
.wrap { max-width: 640px; margin: 0 auto; padding: 12px 20px 40px; }
.wrap.wide { max-width: 1120px; }

/* Knoppen */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 18px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); text-decoration: none; font-size: .95rem; font-weight: 600; white-space: nowrap; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.danger { color: var(--danger); border-color: rgba(140,61,50,.4); }
.btn.big { min-height: 56px; font-size: 1.05rem; border-radius: 14px; }
.btn.light { background: var(--vast-licht); color: var(--accent); border-color: var(--vast-licht); }
.btn:disabled { opacity: .45; cursor: default; }
.link-btn { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-size: .95rem; min-height: var(--tap); }
.link-btn.light { color: var(--vast-licht); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; font-size: var(--fs-m); color: var(--ink); text-decoration: none; }
.chip[aria-pressed="true"], .chip[aria-current="page"] { background: var(--ink); color: var(--bg); border-color: var(--ink); } /* WCAG K3: Profiel-tabs zijn links (aria-current) */
.chip .n { color: var(--muted); font-size: var(--fs-s); }
.chip[aria-pressed="true"] .n, .chip[aria-current="page"] .n { color: rgba(244,241,235,.75); }
.chip.small { min-height: 32px; font-size: .82rem; padding: 0 12px; }
.check { display: flex; align-items: center; gap: 10px; min-height: var(--tap); }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }

/* Kraanvogel */
.crane { width: 34px; color: var(--ink); }
.crane .crane-fill { fill: transparent; }
.crane.on .crane-fill { fill: var(--accent); }
.crane.on { color: var(--accent); }
.crane.mini { width: 20px; display: inline-block; vertical-align: middle; }
.crane.big { width: 96px; }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-family: var(--serif); font-size: 1.3rem; }
.logo .crane { width: 32px; }

/* Beelden: figuurtjes smelten in de achtergrond */
.thumb { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 10px; background: var(--tile); overflow: hidden; display: grid; place-items: center; }
.thumb img, .tile img, .stage img, .d-imgs img, .pr-imgs img, .phone-mock img, .w-fig img { mix-blend-mode: multiply; }
.thumb img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Patiënt ---------- */
.p-head { max-width: 640px; margin: 0 auto; padding: 10px 20px 0; display: flex; justify-content: space-between; align-items: center; }
.lang-sw { display: flex; align-items: center; gap: 4px; color: var(--muted); }
.lang-btn { min-width: 40px; min-height: var(--tap); font-size: var(--fs-m); color: var(--muted); }
.lang-btn[aria-pressed="true"] { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }
.p-wrap { padding-top: 8px; }
.from { color: var(--muted); font-size: .92rem; margin: 10px 0 2px; }
.p2 h1 { font-size: 2.3rem; }
.week-box { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin: 14px 0 18px; }
.week-cranes { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.week-cranes li { display: grid; justify-items: center; gap: 2px; width: 40px; padding: 6px 0 4px; border-radius: 10px; border: 1.5px solid transparent; font-size: .75rem; color: var(--muted); }
.week-cranes .crane { width: 28px; color: var(--line-strong); }
.week-cranes li.on .crane { color: var(--accent); }
.week-cranes li.on .crane-fill { fill: var(--accent); }
.week-cranes li.today { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.week-cranes li.future { opacity: .55; }
.total { display: flex; align-items: center; gap: 6px; color: var(--soft); font-size: var(--fs-m); margin: 0; }
.main-card { display: grid; gap: 2px; padding: 18px 22px; border-radius: 18px; background: var(--accent); color: #fff; text-decoration: none; margin: 0 0 22px; }
.main-card strong { font-family: var(--serif); font-weight: 500; font-size: var(--fs-xl); }
.main-card span { color: rgba(255,255,255,.82); font-size: .95rem; }
.done-strip { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px; padding: 14px 18px; border-radius: 14px; background: rgba(36,71,59,.08); color: var(--accent); margin: 0 0 22px; }
.done-strip p { margin: 0; }
.note-card { margin: 0 0 26px; padding: 18px 20px 14px; background: var(--paper); border-radius: 4px; box-shadow: 0 1px 0 var(--line-strong), 0 6px 18px rgba(29,27,24,.05); }
.note-card blockquote { margin: 0 0 6px; font-family: var(--serif); font-style: italic; font-size: var(--fs-l); line-height: 1.4; }
.note-card .sign { margin: 0; color: var(--soft); font-family: var(--serif); font-style: italic; }
.note-card .tr { text-transform: none; letter-spacing: 0; font-weight: 400; }
.today-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.today-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.tr-main { flex: 1; display: grid; }
.tr-name { font-weight: 600; }
.tr-dose { color: var(--muted); font-size: var(--fs-m); }
.state-dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.state-dot.on { background: var(--accent); border-color: var(--accent); }
.p2-foot { display: flex; gap: 22px; align-items: center; margin-top: 20px; }

.dots { display: inline-flex; gap: 8px; align-items: center; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.dot.on { background: var(--ink); }
.dots.wide { display: flex; margin: 8px 0 12px; }
.dots.wide .dot { flex: 1; height: 4px; border-radius: 2px; }
.dots.wide .dot.done { background: var(--accent); }
.dots.wide .dot.on { background: var(--ink); }

/* P1 */
.p1 { display: flex; flex-direction: column; min-height: calc(100vh - 80px); }
.p1-top { display: flex; justify-content: space-between; align-items: center; }
.p1-body { flex: 1; padding: 20px 0; }
.p1 h1 { font-size: var(--fs-xxl); }
.lead { color: var(--soft); font-size: 1.05rem; }
.lang-list { border: 0; padding: 0; margin: 10px 0; display: grid; gap: 10px; }
.radio-row { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--paper); font-size: 1.05rem; }
.radio-row input { width: 22px; height: 22px; accent-color: var(--accent); }
.radio-row:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.w-fig { display: grid; place-items: center; height: 220px; margin-bottom: 10px; }
.w-fig .thumb { width: 220px; height: 220px; background: transparent; }
.p1 .btn.big { width: 100%; }

/* P3 speler */
.p3-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.back { text-decoration: none; min-height: var(--tap); display: inline-flex; align-items: center; }
.of { color: var(--muted); font-size: var(--fs-m); }
.stage { position: relative; width: 100%; height: 300px; display: block; border-radius: 16px; overflow: hidden; }
.stage.wide { height: 230px; }
.stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .35s; }
.stage .img-e { opacity: 0; }
.stage.show-e .img-e { opacity: 1; }
.stage.show-e .img-b { opacity: 0; }
.pos-tag { position: absolute; right: 8px; bottom: 8px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: var(--paper); border: 1px solid var(--line); padding: 4px 8px; border-radius: 999px; color: var(--soft); }
.ex-name { margin-top: 10px; font-size: var(--fs-xxl); }
.dose-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.dose-num { font-family: var(--serif); font-size: 2.6rem; line-height: 1; }
.dose-unit { color: var(--muted); }
.instr { color: var(--soft); }
.sets-box { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 0; border-top: 1px solid var(--line); }
.set-row { display: flex; gap: 12px; }
.set-dot { width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--line-strong); font-weight: 600; color: var(--muted); background: var(--paper); }
.set-dot.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.timer { position: relative; width: 92px; height: 92px; display: grid; place-items: center; }
.timer svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--line); stroke-width: 5; }
.ring { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; }
.t-num { font-size: 1.6rem; font-weight: 600; line-height: 1; margin-top: 18px; }
.t-cap { font-size: .62rem; color: var(--muted); max-width: 70px; text-align: center; line-height: 1.1; margin-bottom: 14px; }
.hint { flex-basis: 100%; color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.p3-nav { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; position: sticky; bottom: 0; padding: 12px 0 16px; background: var(--bg); box-shadow: 0 -10px 10px var(--bg); }
.p3-nav .btn { min-height: 54px; }

/* P4 */
[data-side="patient"]:has(.p4) body, body:has(.p4) { background: var(--accent); }
.p4 { color: var(--vast-licht); min-height: 100vh; }
.p4 h1 { font-size: 2.1rem; margin-top: 14px; }
.p4 .lead { color: rgba(244,241,235,.85); }
.garlands { display: grid; gap: 10px; margin: 18px 0 8px; }
.garland { position: relative; height: 58px; }
.garland .string { position: absolute; inset: 0 0 auto; width: 100%; height: 30px; }
.garland .string path { fill: none; stroke: rgba(244,241,235,.45); stroke-width: 1; vector-effect: non-scaling-stroke; }
.garland ol { list-style: none; margin: 0; padding: 0 4%; display: grid; grid-template-columns: repeat(7, 1fr); position: relative; }
.garland li { display: grid; justify-items: center; transform: translateY(var(--sag)); }
.garland .crane { width: 30px; color: var(--vast-licht); }
.garland .crane .crane-fill { fill: rgba(244,241,235,.25); }
.garland li.newest .crane { width: 46px; }
.garland li.newest .crane .crane-fill { fill: var(--vast-licht); }
.garland .knot { width: 4px; height: 4px; border-radius: 50%; background: rgba(244,241,235,.4); margin-top: 6px; }
.crane.unfold { animation: unfold 1.1s cubic-bezier(.2,.8,.2,1) both; transform-origin: 50% 30%; }
@keyframes unfold { 0% { transform: scale(.3) rotate(-25deg); opacity: 0; } 60% { transform: scale(1.12) rotate(4deg); opacity: 1; } 100% { transform: none; } }
.feel { border: 0; padding: 0; margin: 18px 0; }
.feel legend { font-family: var(--serif); font-size: 1.25rem; margin-bottom: 8px; }
.p4 .chip { color: var(--vast-licht); border-color: rgba(244,241,235,.45); }
.p4 .chip[aria-pressed="true"] { background: var(--vast-licht); color: var(--accent); }
.p4 .check input { accent-color: var(--vast-licht); }
.saved { font-size: var(--fs-sm); color: rgba(244,241,235,.8); }
.p4 .btn.big { width: 100%; margin-top: 10px; }

/* P5 */
.p5-card { text-align: center; padding: 60px 0; display: grid; justify-items: center; gap: 8px; }
.p5-card .crane { color: var(--muted); }

/* Paneel van onder */
.sheet-back { position: fixed; inset: 0; background: rgba(29,27,24,.4); display: flex; align-items: flex-end; justify-content: center; z-index: 50; }
.sheet-back[hidden] { display: none; }
.sheet { width: 100%; max-width: 640px; max-height: 90vh; overflow: auto; background: var(--bg); color: var(--ink); border-radius: 20px 20px 0 0; padding: 22px 22px 28px; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* P6 afdruk */
.print-wrap { max-width: 900px; }
.pr-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.pr-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; border-bottom: 1px solid var(--ink); padding-bottom: 14px; margin-bottom: 16px; }
.pr-head .crane { width: 40px; }
.pr-qr { margin: 0; width: 120px; text-align: center; font-size: var(--fs-xs); color: var(--muted); }
.pr-qr svg { width: 110px; height: 110px; margin: 0 auto 4px; }
.pr-row { display: grid; grid-template-columns: 150px 1fr; gap: 10px 18px; padding: 14px 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.pr-imgs { display: flex; gap: 4px; }
.pr-imgs img { width: 72px; height: 90px; object-fit: contain; }
.pr-text h2 { margin: 0 0 2px; font-size: 1.15rem; }
.pr-dose { font-family: var(--serif); font-size: 1.1rem; margin: 0 0 4px; }
.pr-text p { font-size: var(--fs-m); }
.lines span { display: block; height: 24px; border-bottom: 1px solid var(--line-strong); }
.grid4 { grid-column: 1 / -1; border-collapse: collapse; font-size: .7rem; color: var(--muted); }
.grid4 th { font-weight: 400; padding: 2px 4px; text-align: left; }
.grid4 td { width: 22px; height: 18px; border: 1px solid var(--line-strong); }
.pr-foot { margin-top: 18px; color: var(--soft); font-style: italic; }
@media (min-width: 900px) { .pr-row { grid-template-columns: 150px 1fr 230px; } .grid4 { grid-column: auto; } }
@media print {
  @page { size: A4; margin: 14mm; }
  .no-print, .btn { display: none !important; }
  :root, body { background: #fff !important; }
  .pr-row { grid-template-columns: 130px 1fr 210px; }
  .grid4 { grid-column: auto; }
  .note-card { box-shadow: none; border: 1px solid #999; background: #fff; }
  img { mix-blend-mode: normal !important; }
}

/* ---------- Website ---------- */
.w-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; padding-top: 10px; padding-bottom: 0; }
.w-nav { display: flex; flex-wrap: wrap; gap: 0 18px; align-items: center; }
.w-nav a, .w-nav .link-btn { color: var(--soft); text-decoration: none; font-size: .92rem; min-height: var(--tap); display: inline-flex; align-items: center; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: center; padding: 20px 0 10px; }
/* R18-103 (TG-19): op 320 px niet breder dan het scherm. */
@media (max-width: 359px) { .display { font-size: var(--fs-xxl); overflow-wrap: break-word; } }
.display { font-size: 2.6rem; }
.hero .stack { display: grid; gap: 10px; margin: 18px 0 14px; }
.points { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; color: var(--muted); font-size: .88rem; }
.points li::before { content: "·"; margin-right: 8px; color: var(--accent); font-weight: 600; }
.phone-mock { justify-self: center; width: 250px; border: 1.5px solid var(--ink); border-radius: 34px; padding: 14px; background: var(--paper); }
.pm-screen { background: var(--bg); border-radius: 24px; padding: 18px 16px; }
.pm-brand { display: flex; gap: 6px; align-items: center; font-family: var(--serif); margin: 0 0 8px; }
.pm-brand .crane { width: 22px; }
.pm-title { font-family: var(--serif); font-size: 1.4rem; margin: 0; }
.pm-dose { font-family: var(--serif); font-size: 1.8rem; margin: 0; }
.phone-mock img { height: 160px; margin: 6px auto; }
.pm-done { font-size: var(--fs-s); color: var(--muted); margin: 0 0 8px; }
.pm-week { display: flex; gap: 2px; margin: 0; }
.pm-week .day { display: grid; justify-items: center; font-size: .6rem; color: var(--muted); width: 28px; padding: 2px 0; border-radius: 6px; border: 1px solid transparent; }
.pm-week .crane { width: 20px; color: var(--line-strong); }
.pm-week .on .crane { color: var(--accent); } .pm-week .on .crane-fill { fill: var(--accent); }
.pm-week .today { border-color: var(--ink); }
.how, .why { border-top: 1px solid var(--ink); padding-top: 18px; margin-top: 30px; }
.how ol { padding-left: 1.2em; display: grid; gap: 14px; }
.how li strong { display: block; }
.how li span { color: var(--soft); }
.w-foot { color: var(--muted); font-size: .88rem; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .home-grid { grid-template-columns: 1.2fr 1fr; } .display { font-size: 3.6rem; } .hero .stack { grid-template-columns: auto auto; justify-content: start; } }

/* ---------- Kinesist ---------- */
.k-top { border-bottom: 1px solid var(--line); }
.k-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; padding-top: 6px; padding-bottom: 0; }
.k-nav { display: flex; flex-wrap: wrap; gap: 0 18px; flex: 1; }
.k-nav a { min-height: var(--tap); display: inline-flex; align-items: center; text-decoration: none; color: var(--muted); font-size: .95rem; border-bottom: 2px solid transparent; }
.k-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.who { color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 639px) { .k-bar .who { margin-left: auto; } .k-nav { flex-basis: 100%; order: 2; } }
.k-main { padding-top: 22px; min-height: 60vh; }
.k-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.k-title h1 { margin: 0; }
.intro { color: var(--soft); max-width: 640px; }
.crumb { margin: 0 0 8px; } .crumb a { text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap, 44px); } /* R18-104 (TG-20): kruimel 44 px hoog */
.big-search { width: 100%; min-height: 54px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--line-field); background: var(--paper); font-size: 1.05rem; margin: 6px 0 14px; }
.filter-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 14px; }
.order { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--fs-m); margin-bottom: 12px; }
select { min-height: 40px; border: 1px solid var(--line-field); border-radius: 10px; background: var(--paper); padding: 0 10px; }
.plist-k, .tlist, .elist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.prow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pr-a { flex: 1 1 220px; display: grid; }
.pname { font-family: var(--serif); font-size: var(--fs-l); color: var(--ink); text-decoration: none; }
.status { flex: 0 0 auto; font-size: var(--fs-m); color: var(--soft); min-width: 170px; }
.status.soon { color: var(--ink); font-weight: 700; } /* designwerkstuk S3 A (Eli 3/11): geen amber buiten de figuren; Verlengen draagt het signaal */ .status.out { color: var(--muted); }
.count { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-m); color: var(--soft); min-width: 64px; }
.row-btns { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.prow.confirm { background: rgba(140,61,50,.05); padding: 12px; }
.prow.confirm p { margin: 0; flex: 1 1 260px; }
@media (max-width: 700px) { .prow:not(.confirm) { display: grid; grid-template-columns: 1fr auto; } .status { min-width: 0; text-align: right; white-space: nowrap; font-size: var(--fs-sm); } .count { grid-column: 1; } .prow .row-btns { grid-column: 2; } }
.more { position: relative; }
.more summary { list-style: none; width: var(--tap); height: var(--tap); display: grid; place-items: center; border-radius: 10px; cursor: pointer; font-size: var(--fs-l); }
.more summary::-webkit-details-marker { display: none; }
.more .menu { position: absolute; right: 0; top: 100%; z-index: 20; min-width: 240px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 10px 30px rgba(29,27,24,.12); padding: 6px; display: grid; }
.more .menu a, .more .menu button { text-align: left; padding: 10px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: .95rem; }
.more .menu .danger { color: var(--danger); }
.more .menu > *:hover { background: var(--tile); }
.empty { padding: 18px 0; color: var(--muted); }
.shown { margin-top: 10px; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-size: .92rem; z-index: 60; animation: toast 3.2s forwards; }
@keyframes toast { 0%, 85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

/* K1 */
.k1 { display: grid; gap: 28px; }
.steps { padding-left: 1.3em; display: grid; gap: 16px; }
.steps li { font-size: 1.1rem; }
.steps li > * { display: block; margin-top: 4px; }
.steps .btn { display: inline-flex; margin-top: 8px; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: grid; gap: 10px; align-content: start; justify-items: start; }
@media (min-width: 900px) { .k1 { grid-template-columns: 1.6fr 1fr; } .k1 h1 { font-size: 2.4rem; } }

/* K3 */
.name-in { width: 100%; border: 0; border-bottom: 1.5px solid var(--ink); background: transparent; font-family: var(--serif); font-size: var(--fs-xxl); padding: 6px 0; border-radius: 0; }
.name-in:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 1.5px 0 var(--accent); } /* WCAG K7: onderlijn bij focus 3 px (zonder verschuiving) */
.quiet-row { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 12px 0 16px; color: var(--muted); font-size: var(--fs-m); }
.quiet-row label { display: flex; gap: 8px; align-items: center; }
.saved-note::before { content: "✓ "; color: var(--accent); }
.groups { display: grid; gap: 10px; }
.group { border-top: 1px solid var(--ink); }
.group summary { padding: 12px 0; font-weight: 600; cursor: pointer; }
.group ul { list-style: none; margin: 0; padding: 0; }
.group li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.g-main { flex: 1; display: grid; min-width: 0; }
.g-main .meta { overflow: hidden; text-overflow: ellipsis; }
.fav-mark { color: var(--danger); font-size: .85em; }

/* K4 */
.erow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); background: var(--bg); }
.erow.dragging { opacity: .5; }
.grip { cursor: grab; color: var(--muted); letter-spacing: -2px; }
.e-name { flex: 1 1 140px; font-weight: 600; }
.dose-ed { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-field); border-radius: 10px; background: var(--paper); }
.stepper button { width: 38px; height: 40px; font-size: 1.1rem; }
.stepper output { min-width: 30px; text-align: center; font-weight: 600; }
.unit { color: var(--muted); font-size: var(--fs-sm); }
.sw { font-size: .82rem; min-height: 32px; }
.icon { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); }
.icon.danger { color: var(--danger); }
.icon:disabled { opacity: .35; }
@media (max-width: 700px) { .dose-ed { flex-basis: 100%; padding-left: 26px; } .erow .row-btns { margin-left: 26px; } }
.add-box { position: relative; margin: 14px 0 22px; }
.add-box input { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px dashed var(--line-field); background: var(--paper); }
.dropdown { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; list-style: none; margin: 4px 0 0; padding: 6px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 10px 30px rgba(29,27,24,.12); }
.dropdown button { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 6px; border-radius: 8px; }
.dropdown button:hover { background: var(--tile); }
.dropdown .thumb { width: 40px; height: 40px; }
.dropdown span:nth-child(2) { flex: 1; }
.note-ed textarea { width: 100%; border: 1px solid var(--line-field); border-radius: 12px; background: var(--paper); padding: 12px 14px; font-family: var(--serif); font-style: italic; font-size: 1.1rem; }
.tr-preview { background: var(--paper); border-left: 3px solid var(--accent); padding: 8px 12px; font-family: var(--serif); font-style: italic; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
@media (max-width: 639px) { .actions .btn { flex: 1 1 100%; } }
.share-grid { display: flex; flex-wrap: wrap; gap: 20px; margin: 10px 0; }
.qr { margin: 0; width: 160px; background: #fff; padding: 8px; border-radius: 10px; }
.link-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.link-line code { font-size: var(--fs-base); background: var(--paper); padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); }
.share-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.share-list a { display: inline-flex; min-height: var(--tap); align-items: center; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 12px; text-decoration: none; color: var(--ink); background: var(--paper); }
.copied { color: var(--accent); font-size: var(--fs-m); }

/* K6 */
.tpl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.t-main { flex: 1 1 280px; display: grid; gap: 2px; }
.tname { font-family: var(--serif); font-weight: 500; font-size: var(--fs-l); }
.t-ex { color: var(--soft); font-size: .92rem; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; min-height: var(--tap); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.track { width: 42px; height: 24px; border-radius: 12px; background: var(--line-field); position: relative; transition: background .2s; }
.track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(18px); }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }
.sw-l { font-size: .88rem; color: var(--soft); min-width: 180px; }

/* K7 */
.lib { display: grid; gap: 20px; }
.lib-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.card { position: relative; }
.card-a { display: grid; gap: 2px; text-decoration: none; color: var(--ink); }
.card.sel .tile { box-shadow: inset 0 0 0 2px var(--accent); }
.tile { position: relative; display: block; aspect-ratio: 1; background: var(--tile); border-radius: 14px; overflow: hidden; margin-bottom: 6px; }
.tile img { width: 100%; height: 100%; object-fit: contain; }
.tag { position: absolute; left: 8px; top: 8px; z-index: 1; font-size: .7rem; font-weight: 600; background: var(--paper); padding: 3px 8px; border-radius: 999px; color: var(--soft); }
/* OE-09 (vlag nieuwe_varianten): markering Concept in de details en het blad (niet absoluut zoals .tag op de kaart). */
.concept-tag { display: inline-block; vertical-align: middle; font-size: .7rem; font-weight: 600; background: var(--paper); border: 1px solid var(--line); padding: 2px 8px; border-radius: 999px; color: var(--soft); }
/* Ronde 3 C L1–L3: +, ♡ en ☆ als los icoon zonder schijf (lijn 1,6, 20 px); het tikvlak blijft 44 px. */
.heart { position: absolute; right: 6px; top: 6px; width: 44px; height: 44px; display: grid; place-items: center; background: none; }
.heart svg { width: 20px; fill: none; stroke: var(--ink); stroke-width: 1.6; }
.heart[aria-pressed="true"] svg { fill: var(--danger); stroke: var(--danger); }
.detail { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 18px; align-self: start; }
.d-head { display: flex; justify-content: space-between; gap: 10px; position: relative; }
.d-head .heart { position: static; }
.d-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.d-imgs.wide { grid-template-columns: 1fr; }
.d-imgs figure { margin: 0; background: var(--tile); border-radius: 12px; padding: 6px; }
.d-imgs img { width: 100%; height: 170px; object-fit: contain; }
.d-imgs figcaption { font-size: .75rem; color: var(--muted); text-align: center; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: .92rem; }
.facts dt { color: var(--muted); } .facts dd { margin: 0; }
.vars .kind { color: var(--muted); font-size: .78rem; }
.add-to { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 8px; }
.add-to .row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.add-to select { flex: 1 1 180px; }
.back-lib { display: none; }
@media (min-width: 900px) { .lib.has-detail { grid-template-columns: 1fr 380px; } .detail { position: sticky; top: 12px; } }
@media (max-width: 899px) { .lib.has-detail { display: flex; flex-direction: column-reverse; } .back-lib { display: inline-flex; min-height: var(--tap); align-items: center; } }

/* K8 */
.wizard { display: grid; gap: 20px; }
.wsteps { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.wsteps button { display: flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 12px; border-radius: 10px; color: var(--muted); }
.wsteps button[aria-current="step"] { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line-strong); }
.wsteps .n { width: 24px; height: 24px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; font-size: var(--fs-s); }
.fld { display: grid; gap: 4px; margin: 0 0 12px; font-size: .92rem; color: var(--soft); }
.fld input, .fld textarea, .fld select { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-field); border-radius: 10px; background: var(--paper); color: var(--ink); }
.fld .row { display: flex; align-items: center; gap: 6px; } .fld .row input { width: 80px; }
.proposal { border-style: dashed !important; }
.row2 { display: grid; gap: 0 14px; }
@media (min-width: 640px) { .row2 { grid-template-columns: 1fr 1fr; } }
.row { display: flex; flex-wrap: wrap; gap: 8px; }
.warn { color: var(--warn); font-weight: 600; }
.sim { list-style: none; padding: 0; margin: 0 0 14px; }
.sim li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sim strong { flex: 1; }
.confirm-box { background: var(--paper); border-radius: 16px; padding: 20px; }
@media (min-width: 900px) { .wizard { grid-template-columns: 240px 1fr; } .wsteps { flex-direction: column; } }

/* K9 */
.help { display: grid; gap: 24px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { padding: 14px 0; cursor: pointer; font-weight: 600; }
.faq details p { color: var(--soft); }
.mail { margin-top: 24px; } .sel-text { user-select: all; font-weight: 600; }
@media (min-width: 900px) { .help { grid-template-columns: 340px 1fr; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Ronde 4b: details uit de ontwerpborden ---------- */
.btn.pill, .btn.round { border-radius: 999px; }
.btn.round { width: 54px; padding: 0; font-size: var(--fs-l); }
.link-btn.quiet { color: var(--soft); }
/* P1 */
.p1 { min-height: calc(100vh - 90px); }
.p1-body { display: flex; flex-direction: column; justify-content: center; }
.p1 h1 { font-size: 2.3rem; }
.p1 .lang-list { gap: 0; border-top: 1px solid var(--line); }
.p1 .radio-row { justify-content: space-between; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 0; min-height: 56px; }
.p1 .radio-row:has(input:checked) { box-shadow: none; }
.p1-foot { display: grid; justify-items: center; gap: 18px; }
.p1-foot .dot.on { width: 18px; border-radius: 4px; background: var(--accent); }
.w-fig img { height: 220px; object-fit: contain; mix-blend-mode: multiply; }
/* P2 */
.week-box { align-items: center; }
.total { text-align: right; max-width: 120px; }
.main-card { grid-template-columns: 1fr auto; }
.main-card strong, .main-card span:not(.arrow) { grid-column: 1; }
.main-card .arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 1.4rem; color: #fff; }
.p2 .sub { font-family: var(--sans); font-size: var(--fs-m); color: var(--soft); font-weight: 400; margin: 0 0 8px; }
.today-list { border-top-color: var(--line-strong); }
.today-row { gap: 12px; }
.today-row .fig { width: 40px; height: 40px; flex: 0 0 auto; }
.today-row .fig img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.today-row .tr-name { flex: 1; }
.today-row .tr-dose { white-space: nowrap; }
.p2-foot { justify-content: space-between; }
/* P3 */
.p3 { padding-top: 10px; display: flex; flex-direction: column; min-height: 100vh; }
.p3 .dots.wide { margin: 0 0 6px; }
.p3-top { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; }
.p3-top .of { text-align: center; }
.close { width: 44px; height: 44px; display: grid; place-items: center; text-decoration: none; color: var(--ink); font-size: 1.1rem; }
.stage { height: 330px; }
.pos-line { display: flex; justify-content: flex-end; margin: 4px 0 0; }
.pos-tag { position: static; background: none; border: 0; padding: 0; font-size: .7rem; }
.ex-name { margin: 2px 0 4px; font-size: 2.1rem; }
.sets-box { border-top: 0; align-items: flex-end; justify-content: space-between; padding-top: 8px; }
.sets-box .dose-big { margin: 0; }
.sets-box .dose-num { font-size: 4.2rem; }
.set-col { display: grid; justify-items: end; gap: 6px; }
.set-col .hint { flex-basis: auto; font-size: .78rem; }
.set-dot { width: 46px; height: 46px; }
.p3-nav { grid-template-columns: auto 1fr; margin-top: auto; }
.p3-nav .btn.pill:not(.primary) { background: transparent; }
/* P4 */
.garlands { display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; gap: 0; margin: -12px 0 16px; }
.garland { height: auto; display: grid; justify-items: center; }
.garland::before { content: ""; width: 1px; height: 18px; background: rgba(244,241,235,.45); }
.garland ol { display: grid; justify-items: center; gap: 0; padding: 0; grid-template-columns: none; }
.garland li { transform: none; display: grid; justify-items: center; }
.garland li::after { content: ""; width: 1px; height: 8px; background: rgba(244,241,235,.45); }
.garland .crane { width: 26px; }
.garland li.newest .crane { width: 40px; }
.garland .wk { font-size: var(--fs-xs); color: rgba(244,241,235,.7); margin-top: 2px; }
.p4-date { color: rgba(244,241,235,.75); font-size: var(--fs-m); margin: 18px 0 0; }
.p4 .feel { border-top: 1px solid rgba(244,241,235,.2); padding-top: 16px; }
.p4 .feel legend { font-family: var(--sans); font-size: var(--fs-base); font-weight: 600; padding-top: 16px; }
.p4 .chips { display: grid; grid-template-columns: repeat(3, 1fr); }
.p4 .chip { justify-content: center; min-height: 46px; }
.p4 .btn.big { border-radius: 999px; }
/* P5 */
.p5-card { text-align: left; justify-items: start; padding: 90px 0 40px; }
.p5-card .crane { color: var(--muted); margin-bottom: 16px; }
.p5-card h1 { font-size: 2.1rem; }
.p5-count { font-family: var(--serif); font-style: italic; color: var(--accent); font-size: 1.15rem; }
/* P6 */
.pr-dose { font-size: var(--fs-xl); }
.grid4 td { border-radius: 4px; border-color: var(--line-strong); }
.grid4 { border-collapse: separate; border-spacing: 3px; }
.pr-foot { display: flex; justify-content: space-between; gap: 20px; font-style: normal; font-size: var(--fs-sm); }
/* Kinesist 4b */
.btn.small { min-height: 36px; padding: 0 14px; font-size: .88rem; }
.btn.dashed { border-style: dashed; background: transparent; }
.link-btn.small { font-size: var(--fs-sm); min-height: 32px; }
.heart[aria-pressed="true"] svg { fill: var(--accent); stroke: var(--accent); }
.fav-mark { color: var(--accent); }
.icon-search { padding-left: 46px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B655D' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 16px center / 18px; }
.quiet-select { border: 0; background-color: transparent; font-weight: 600; color: var(--ink); padding: 0 4px; min-height: 36px; }
.prow .btn, .tpl-row .btn, .row-btns .btn { border-radius: 999px; min-height: 38px; }
.status.ok { color: var(--accent); }
@media (max-width: 700px) {
  .prow:not(.confirm) { grid-template-columns: 1fr auto; row-gap: 4px; }
  .prow .pr-a { grid-column: 1 / -1; }
  .prow .status { grid-column: 1; text-align: left; }
  .prow .count { grid-column: 2; justify-content: flex-end; }
  .prow .row-btns { grid-column: 1 / -1; justify-content: flex-end; }
}
/* K1 */
.k1 h1 { padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.steps { list-style: none; padding: 0; gap: 0; }
.steps li { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-base); }
.steps li > * { display: initial; margin: 0; }
.steps .num { font-family: var(--serif); font-size: 1.8rem; width: 28px; color: var(--accent); }
.steps .s-main { flex: 1; display: grid; }
.steps .btn { margin: 0; }
.steps.small .num { font-size: 1.3rem; width: 20px; }
.steps.small li { padding: 10px 0; align-items: flex-start; }
.panel { background: var(--tile); border: 0; }
.panel .crane { width: 40px; }
/* K3 */
.group { border-top: 0; }
.group summary { display: flex; justify-content: space-between; align-items: center; list-style: none; border-bottom: 1px solid var(--ink); font-family: var(--serif); font-weight: 500; font-size: var(--fs-l); }
.group summary::-webkit-details-marker { display: none; }
.g-toggle::after { content: "Uitklappen"; font-family: var(--sans); font-size: var(--fs-s); color: var(--muted); font-weight: 400; }
.group[open] .g-toggle::after { content: "Inklappen"; }
.group .fig, .dropdown .fig { width: 40px; height: 40px; flex: 0 0 auto; }
.group .fig img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.act { color: var(--accent); font-weight: 600; font-size: .92rem; min-height: var(--tap); padding: 0 6px; }
/* K4 */
.erow .thumb { background: transparent; }
.stepper { border-radius: 999px; }
.stepper output { font-family: var(--sans); }
.fld-label { display: block; font-weight: 600; margin-bottom: 6px; }
.k4 .actions { justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 16px; }
.k4 .actions .btn { border-radius: 999px; }
.add-box input { border-style: solid; }
@media (min-width: 900px) { .k4 > * { max-width: 860px; margin-left: auto; margin-right: auto; } .erow { flex-wrap: nowrap; } .dose-ed { flex-wrap: nowrap; } }
/* K5 */
.sheet.share { display: grid; gap: 12px; }
.grabber { justify-self: center; width: 44px; height: 4px; border-radius: 2px; background: var(--line-strong); }
.sheet.share .qr { justify-self: center; width: 210px; text-align: center; font-size: var(--fs-s); color: var(--muted); background: var(--paper); padding: 12px; }
.sheet.share .qr svg { background: #fff; }
.sheet.share .link-line { justify-content: space-between; border: 1px solid var(--line-field); border-radius: 999px; padding: 4px 4px 4px 16px; background: var(--paper); margin: 0; }
.sheet.share .link-line code { border: 0; background: none; padding: 0; font-family: var(--sans); }
.sheet.share .share-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.sheet.share .share-list a { display: flex; gap: 10px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; min-height: 52px; padding: 0; font-weight: 600; }
.share-list .hint { margin-left: auto; color: var(--muted); font-weight: 400; font-size: var(--fs-sm); }
/* K7 */
.lib-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-bottom: 14px; }
.lib-filters .chips { margin: 0; }
.tabs { display: flex; gap: 14px; }
.tab { min-height: 36px; color: var(--muted); font-size: .92rem; border-bottom: 2px solid transparent; }
.tab[aria-pressed="true"], .tab[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
a.tab { display: inline-flex; align-items: center; text-decoration: none; }
.d-imgs figcaption { letter-spacing: .08em; font-size: .68rem; }
.add-to .row .btn { flex: 1 1 100%; }
/* K8 */
.wizard h1 { font-size: 1.9rem; }
.wsteps { gap: 0; }
.wsteps li { border-bottom: 1px solid var(--line); }
.wsteps button[aria-current="step"] { background: none; box-shadow: none; }
.wsteps button[aria-current="step"] .n { background: var(--ink); color: var(--bg); }
.fld { color: var(--ink); font-weight: 600; }
.fld input, .fld textarea, .fld select { font-weight: 400; }
.up-row { align-items: center; }
.up-row .warn { color: var(--danger); font-weight: 400; font-size: var(--fs-sm); }
/* K9 */
.faq h1 { font-size: 2.4rem; padding-bottom: 10px; border-bottom: 1px solid var(--ink); margin-bottom: 0; }
.faq summary { display: flex; justify-content: space-between; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
/* W1 */
.label.accent { color: var(--accent); }
.w-nav .btn.pill { color: var(--ink); }
.display { font-size: 2.4rem; }
.hero .lead { max-width: 520px; }
.points { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.mock-wrap { justify-self: center; position: relative; padding: 20px 30px; }
.mock-wrap::before { content: ""; position: absolute; inset: 40px -10px; border-radius: 50%; background: var(--tile); z-index: 0; }
.phone-mock { position: relative; z-index: 1; border: 6px solid var(--ink); border-radius: 30px; padding: 0; width: 220px; background: var(--bg); }
.pm-screen { padding: 18px 16px 24px; }
.pm-brand { font-family: var(--sans); font-size: .62rem; color: var(--muted); margin: 0; }
.pm-h { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 4px; }
.pm-sets { display: flex; gap: 6px; margin: 6px 0 0; }
.pm-sets span { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; font-size: var(--fs-xs); }
.pm-sets .on { background: var(--accent); color: #fff; border-color: var(--accent); }
.how { border-top-color: var(--ink); }
.how ol { list-style: none; padding: 0; display: grid; gap: 18px; }
.how .num { display: block; font-family: var(--serif); font-size: 1.8rem; color: var(--accent); }
.how li strong { font-family: var(--serif); font-weight: 500; font-size: var(--fs-l); }
@media (min-width: 900px) { .how ol { grid-template-columns: repeat(3, 1fr); gap: 30px; } .display { font-size: 3.4rem; } .w-foot { display: flex; justify-content: space-between; gap: 30px; } }
.week-cranes { gap: 1px; }
.week-cranes li { width: 34px; }
.week-cranes .crane { width: 24px; }
.total { max-width: 86px; font-size: .82rem; line-height: 1.3; }
.week-box { flex-wrap: nowrap; }
.p1 .radio-row:has(input:checked) { border-color: var(--line); }
.garlands { margin-top: 0; }
.p4 .feel { border-top: 0; padding-top: 0; }
.p4 .feel legend { padding-top: 0; }
.p4 .lead { border-bottom: 1px solid rgba(244,241,235,.2); padding-bottom: 18px; }
.name-in { display: block; }
.sheet.share .share-list a > span:first-child { white-space: nowrap; }
.sheet.share .qr svg { width: 100%; height: auto; }

/* ---------- Ronde 5 ---------- */
/* W1: echt scherm i.p.v. mock */
.w-top { display: flex; justify-content: space-between; align-items: center; }
.w-note { color: var(--muted); font-size: var(--fs-m); margin: 14px 0 0; }
.shot-wrap { margin: 0; justify-self: center; position: relative; padding: 10px 24px; }
.shot-wrap::before { content: ""; position: absolute; inset: 60px -6px; border-radius: 50%; background: var(--tile); z-index: 0; }
.shot { position: relative; z-index: 1; display: block; width: 250px; height: auto; border: 6px solid var(--ink); border-radius: 30px; background: var(--bg); }
@media (max-width: 899px) { .shot { width: 220px; } }
/* K2: nette kolommen */
.week-total { display: flex; align-items: center; gap: 8px; margin: -4px 0 14px; color: var(--soft); }
.week-total .crane { width: 22px; height: 22px; }
.plist-k .prow:not(.confirm) { display: grid; grid-template-columns: minmax(0, 1fr) 190px 52px 230px; gap: 6px 18px; align-items: center; flex-wrap: nowrap; }
.plist-k .prow .row-btns { justify-content: flex-end; }
.plist-k .count { min-width: 0; justify-content: flex-start; font-variant-numeric: tabular-nums; }
.plist-k .status { min-width: 0; text-align: left; }
@media (max-width: 700px) {
  .plist-k .prow:not(.confirm) { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .plist-k .prow .pr-a { grid-column: 1; grid-row: 1; }
  .plist-k .prow .count { grid-column: 2; grid-row: 1; justify-content: flex-end; }
  .plist-k .prow .status { grid-column: 1; grid-row: 2; white-space: nowrap; font-size: var(--fs-sm); }
  .plist-k .prow .row-btns { grid-column: 2; grid-row: 2; }
}
.h-n { font-family: Inter, system-ui, sans-serif; font-size: .45em; color: var(--muted); font-weight: 500; vertical-align: middle; margin-left: 6px; }
/* Eén editor: keuze patiënt of sjabloon */
.seg { display: inline-flex; border: 1px solid var(--ink); border-radius: 999px; padding: 3px; margin: 4px 0 14px; gap: 2px; }
.seg-opt { position: relative; }
.seg-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg-opt span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 999px; font-size: .92rem; }
.seg-opt input:checked + span { background: var(--ink); color: var(--bg); }
.seg-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.k1 { grid-template-columns: 1fr; max-width: 720px; }
.plist-k .count { width: 100%; }
@media (max-width: 700px) { .plist-k .prow:not(.confirm) { grid-template-columns: minmax(0, 1fr) 150px; } }
@media (max-width: 700px) { .plist-k .prow:not(.confirm) { grid-template-columns: minmax(0, 1fr) 172px; column-gap: 10px; } .plist-k .prow .btn { padding-left: 12px; padding-right: 12px; } }
@media (max-width: 700px) { .plist-k .prow:not(.confirm) { grid-template-columns: minmax(0, 1fr) auto; } }
/* ---------- Ronde 6 ---------- */
.ed-title { margin: 6px 0 14px; }
.save-panel { border: 1px solid var(--ink); border-radius: 14px; padding: 16px; margin: 16px 0; background: var(--paper); display: grid; gap: 10px; }
.save-panel h2 { margin: 0; font-size: 1.15rem; }
.save-panel .fld input { width: 100%; }
.err { color: #8c3d32; margin: 0; font-size: .92rem; }
.added { margin: 10px 0 0; font-size: .92rem; color: var(--soft); }
.added a { font-weight: 600; }
.t-items { list-style: none; padding: 0; margin: 8px 0 12px; display: grid; gap: 6px; }
.t-items li { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; }
.confirm-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.confirm-inline p { margin: 0; flex: 1 1 100%; }
.detail .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.detail { min-width: 0; max-width: 100%; }
.add-to .row { min-width: 0; }
#k7-target { min-width: 0; width: 100%; max-width: 100%; text-overflow: ellipsis; }

/* ---------- Ronde 7b (designerfeedback) ---------- */
/* P3: ring vervangt het grote getal; geen verloop over inhoud */
.sets-box.timed { align-items: center; }
.timer-wrap { display: grid; justify-items: center; gap: 4px; }
.sets-box .timer { width: 112px; height: 112px; }
.sets-box .t-num { font-family: "Fraunces", Georgia, serif; font-size: 2.6rem; font-weight: 500; margin: 0; }
.t-cap { font-size: .78rem; color: var(--muted); }
.set-of { color: var(--muted); }
.p3-nav { box-shadow: none; background: var(--bg); z-index: 2; }
.p3 { padding-bottom: 8px; }
@media (max-height: 700px) { .p3 .stage { height: 200px; } .p3 .stage.wide { height: 160px; } .p3 .instr { font-size: var(--fs-m); margin: 4px 0; } .sets-box .timer { width: 96px; height: 96px; } .sets-box .dose-num { font-size: 3.4rem; } }
/* P2: teller in twee regels; gedaan = gevuld bolletje met vinkje */
.total { display: grid; justify-items: end; gap: 0; max-width: none; text-align: right; }
.total .t-n { font-family: "Fraunces", Georgia, serif; font-size: 20px; color: var(--ink); line-height: 1.1; }
.total .t-w { font-size: var(--fs-s); color: var(--muted); }
@media (max-width: 420px) { .week-box { flex-wrap: wrap; } .total { display: flex; gap: 4px; justify-items: start; text-align: left; width: 100%; align-items: baseline; } }
.state-dot { display: grid; place-items: center; }
.state-dot svg { width: 16px; height: 16px; }
/* P6: één rooster */
.pr-grid { margin-top: 18px; }
.pr-grid h2 { font-size: var(--fs-base); margin: 0 0 8px; }
.gridall { border-collapse: separate; border-spacing: 3px; font-size: .75rem; color: var(--muted); }
.gridall th { font-weight: 400; text-align: left; padding: 0 6px 0 0; white-space: nowrap; }
.gridall td { width: 26px; height: 18px; border: 1px solid var(--line-strong); border-radius: 4px; }
.gridall tr { break-inside: avoid; }
@media print { .pr-grid { break-inside: auto; } .gridall td { height: 16px; } }
/* K-top: naam = link naar profiel */
a.who { text-decoration: none; }
a.who:hover, a.who[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.profile { max-width: 620px; display: grid; gap: 14px; }
.profile .fld input, .profile .fld select { width: 100%; }
/* Editor: greep (ook toetsenbord) + ✕ op desktop, ⋯ met Omhoog/Omlaag/Verwijderen */
.erow .grip { background: none; border: 0; cursor: grab; color: var(--muted); padding: 6px 4px; border-radius: 6px; }
.erow .grip:focus-visible { outline: 2px solid var(--accent); }
.row-more .menu { min-width: 160px; }
.row-more summary { width: 36px; height: 36px; }
.empty-ed { margin: 8px 0 0; }
@media (max-width: 700px) {
  .erow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "th nm mo" "do do do"; gap: 4px 10px; padding: 8px 0; }
  .erow .grip, .erow .x-rm { display: none; }
  .erow .thumb { grid-area: th; width: 44px; height: 44px; }
  .erow .e-name { grid-area: nm; }
  .erow .row-btns { grid-area: mo; margin-left: 0; }
  .erow .dose-ed { grid-area: do; padding-left: 0; display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
  .erow .stepper button { width: 32px; height: 38px; }
  .erow .stepper output { min-width: 24px; }
  .erow .sw { font-size: var(--fs-s); }
}
/* Delen: boven alles, desktop gecentreerd, pagina erachter scrolt niet */
.sheet-back { z-index: 1000; }
html:has(.sheet-back:not([hidden])) { overflow: hidden; }
@media (min-width: 700px) { .sheet-back { align-items: center; } .sheet { border-radius: 20px; max-height: 90vh; } }
/* Sjablonen: strip met de samenstelling */
.t-strip { display: flex; gap: 6px; margin-top: 8px; align-items: center; min-width: 0; }
/* ronde 7c: tegels krimpen op smalle kaarten (5 tegels op gsm), nooit breder dan 34px */
.st-tile { width: 34px; height: auto; aspect-ratio: 1 / 1; border-radius: 8px; background: var(--tile); overflow: hidden; flex: 0 1 34px; min-width: 0; }
.st-tile img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.st-more { font-size: var(--fs-s); color: var(--muted); }
/* K2 gsm: drie compacte regels */
@media (max-width: 700px) {
  .plist-k .prow:not(.confirm) { padding: 8px 0; row-gap: 2px; }
  .plist-k .prow .btn { min-height: 34px; }
  .plist-k .prow .more summary { width: 34px; height: 34px; }
  .plist-k .prow .pr-a .meta { font-size: .82rem; }
}
/* K2 gsm: compacter zodat ≥ 6 patiënten zichtbaar zijn */
@media (max-width: 700px) {
  .k-main:has(.plist-k) .k-title { margin-bottom: 4px; }
  .k-main:has(.plist-k) .k-title h1 { font-size: 1.9rem; }
  .k-main:has(.plist-k) .k-title .btn { min-height: 40px; padding-top: 6px; padding-bottom: 6px; }
  .week-total { font-size: var(--fs-sm); margin: 2px 0 8px; }
  #k2-q { min-height: 44px; padding-top: 8px; padding-bottom: 8px; margin-bottom: 8px; }
  .filter-bar { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin-bottom: 4px; }
  .filter-bar .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; }
  .filter-bar .chip { white-space: nowrap; min-height: 34px; padding-top: 4px; padding-bottom: 4px; }
  .filter-bar .order { flex: 0 0 auto; font-size: 0; }
  .filter-bar .order select { font-size: var(--fs-sm); }
  .plist-k .prow:not(.confirm) { padding: 6px 0; row-gap: 0; }
  .plist-k .prow .pname { font-size: 1.1rem; line-height: 1.25; }
  .plist-k .prow .pr-a .meta { line-height: 1.2; }
  .plist-k .prow .btn { min-height: 32px; padding-top: 2px; padding-bottom: 2px; }
  .plist-k .prow .more summary { width: 32px; height: 32px; }
}
@media (max-width: 700px) { .plist-k .prow:not(.confirm) { padding: 4px 0; } .week-total { line-height: 1.3; } }

/* ===== Ronde 8 ===== */
/* Zoekveld met wisknop */
.search-wrap { position: relative; }
.search-wrap .big-search { padding-right: 46px; }
.clear-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: transparent; border: 0; font-size: var(--fs-base); cursor: pointer; }
.clear-x:hover { background: var(--line); color: var(--ink); }
.clear-x[hidden] { display: none; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
/* Bewaard-melding */
.saved-note { display: block; margin: 4px 0 0; font-size: var(--fs-sm); }
.saved-note[hidden] { display: none; }
.saved-note .ok { color: var(--ink); }
.saved-note .ok::before { content: "✓ "; color: var(--accent); }
.saved-note .meta { margin-left: 4px; }
/* Notitie: vertaalvinkje subtiel */
.tr-line { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: var(--fs-sm); color: var(--muted); }
.tr-line .check.small { font-size: var(--fs-sm); gap: 6px; }
.tr-line .check.small input { width: 16px; height: 16px; }
.tr-line a.meta { color: var(--muted); }
/* Editorrij: oefening openen */
.ex-open { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; min-width: 0; }
.ex-open:hover .e-name { text-decoration: underline; }
.var-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.var-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.var-list .e-name { display: grid; }
.sheet.exs { max-width: 560px; width: 100%; overflow: auto; }
.sheet.exs .d-imgs img { max-height: 200px; object-fit: contain; }
/* Patiënten: nieuw programma gemarkeerd, 0 kraanvogels verborgen, menu-labels */
.prow.hl { background: var(--paper); box-shadow: inset 3px 0 0 var(--accent); }
.count.none { visibility: hidden; }
.menu .menu-l { margin: 6px 12px 2px; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
details.ext summary { list-style: none; cursor: pointer; }
details.ext summary::-webkit-details-marker { display: none; }
/* Status van eigen items */
.badge { display: inline-block; font-size: var(--fs-xs); padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); vertical-align: 1px; white-space: nowrap; }
.badge.st-voorgesteld { border-color: var(--accent); color: var(--accent); }
.badge.st-opgenomen { background: var(--ink); border-color: var(--ink); color: var(--bg); }
/* Melding na bewaren / toevoegen */
.flash { margin: 6px 0 12px; padding: 10px 14px; border-radius: 10px; background: var(--paper); border-left: 3px solid var(--accent); }
.card.hl .tile { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Materiaalmenu */
.lib-filters { position: relative; }
.gear-menu { display: inline-block; position: relative; }
.gear-menu > summary { list-style: none; cursor: pointer; }
.gear-menu > summary::-webkit-details-marker { display: none; }
.gear-menu .menu { min-width: 230px; }
.gear-menu .menu button[aria-pressed="true"]::after { content: " ✓"; color: var(--accent); }
.menu .opt { display: flex; gap: 8px; align-items: center; padding: 6px 12px; font-size: .92rem; cursor: pointer; }
/* Ronde 3 C W4: 'Zonder speciaal materiaal' op één regel */
.gear-menu .menu .opt { white-space: nowrap; }
/* Mandje */
.card .pick { position: absolute; left: 6px; top: 6px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; background: none; cursor: pointer; }
.card .pick input { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; }
.card.picked .tile { outline: 2px solid var(--accent); outline-offset: 2px; }
.basket-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: flex-end; padding: 10px max(16px, calc((100vw - 1180px) / 2)); background: var(--bg); border-top: 1px solid var(--line-strong); box-shadow: 0 -6px 18px rgba(29,27,24,.06); }
.basket-bar .bk-n { margin-right: auto; font-weight: 600; }
.k-main.has-bar { padding-bottom: max(96px, calc(var(--bk-h, 0px) + 24px)); } /* Eli 1/11: nooit minder dan de balk zelf (gsm: balk tot 169 px) */
/* Eli 1/11: het meeschuivende detail (≥900 px) eindigt boven de selectiebalk, zodat je het tot onderaan kunt lezen.
   --bk-h = gemeten hoogte van de balk (kine-catalogus.js); 72px als die (nog) niet gemeten is. */
@media (min-width: 900px) { .k-main.has-bar .lib.has-detail .detail { max-height: calc(100vh - 24px - var(--bk-h, 72px)); } }
.pick-sheet { max-width: 480px; width: 100%; }
.pick-list { list-style: none; margin: 10px 0 0; padding: 0; max-height: 50vh; overflow: auto; }
.pick-list button { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 10px; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.pick-list button:hover, .pick-list button:focus-visible { background: var(--paper); }
/* Familie (ladder) */
.ladder { margin: 4px 0 14px; padding-left: 22px; }
.ladder li { margin: 2px 0; }
.ladder li.cur::marker { color: var(--accent); font-weight: 700; }
@media (max-width: 599px) {
  .basket-bar { justify-content: stretch; }
  .basket-bar .btn { flex: 1 1 auto; text-align: center; }
  .k-main.has-bar { padding-bottom: max(150px, calc(var(--bk-h, 0px) + 24px)); }
}
/* Afdruk: logo één keer, notitie en rooster bovenaan naast elkaar, geen schrijflijnen */
.pr-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.pr-logo .crane { width: 32px; }
.pr-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; margin-bottom: 18px; }
.pr-top.no-note { grid-template-columns: 1fr; }
.pr-top .note-card { margin: 0; }
.pr-top .pr-grid { margin-top: 0; }
.pr-top .note-card blockquote { overflow-wrap: anywhere; }
@media (max-width: 639px) { .pr-top { grid-template-columns: 1fr; } }
@media print { .pr-top { grid-template-columns: minmax(0, 1fr) auto; break-inside: avoid; } }
.more.gear-menu > summary, .more.ext > summary { width: auto; height: auto; display: inline-flex; font-size: inherit; }
.more.ext > summary { padding: 0 16px; min-height: 40px; align-items: center; }
.gear-menu .menu { left: 0; right: auto; }
.more .menu .menu-l:hover { background: none; }
.detail { position: relative; }
@media (min-width: 900px) { .detail .back-lib { display: inline-flex; float: right; margin: -6px -4px 0 8px; font-size: var(--fs-sm); color: var(--muted); text-decoration: none; padding: 6px 8px; border-radius: 8px; } .detail .back-lib:hover { background: var(--tile); } }
.card .pick input { border-radius: 6px; }
.detail .actions { flex-wrap: wrap; }
.detail .actions .btn { max-width: 100%; white-space: normal; text-align: center; }

/* ---------- Ronde 9 ---------- */
.w-story { max-width: 62ch; } .w-story p { margin: 0 0 8px; } .w-story p + p { color: var(--soft); }
/* Patiënten: hele rij klikbaar, ster, eigen volgorde */
.plist-k .prow[data-row-href] { cursor: pointer; }
.plist-k .prow[data-row-href]:hover { background: rgba(36,71,59,.04); }
.pr-a { display: flex !important; align-items: center; gap: 8px; min-width: 0; }
.pr-txt { display: grid; min-width: 0; }
.star { width: 32px; height: 32px; flex: 0 0 32px; display: inline-grid; place-items: center; border-radius: 50%; color: var(--line-strong); }
.star svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.star[aria-pressed="true"] { color: var(--accent); } .star[aria-pressed="true"] svg { fill: currentColor; }
.star:hover { background: var(--tile); }
/* R18-085 (30/10): tikvlak 44 px zonder zichtbaar verschil (icoon en cirkel blijven 32 px). */
.star { position: relative; } .star::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
/* Editor: opbouw */
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 6px; font-weight: 600; font-size: .92rem; border-bottom: 1px solid var(--line); }
.sec-head .rounds { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; color: var(--soft); }
.sec-sel { font-size: .82rem; }
.ed-tools { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: -10px 0 18px; font-size: var(--fs-sm); }
.tr-line { font-size: var(--fs-s); color: var(--soft); } .tr-line .check { font-size: var(--fs-s); } .tr-def { color: var(--soft); }
.fb-line { margin: 10px 0 0; }
.var-list li.cur { background: var(--tile); border-radius: 10px; }
/* Speler */
.sec-line { margin: 4px 0 0; font-size: var(--fs-s); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.today-list .sec-head { border: 0; padding: 14px 0 4px; color: var(--soft); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.pr-sec { font-size: var(--fs-base); margin: 18px 0 6px; }
.preview-bar, .site-bar { position: sticky; top: 0; z-index: 30; margin: 0; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 8px 12px; background: var(--ink); color: #fff; font-size: var(--fs-sm); }
.preview-bar a, .site-bar a { color: #fff; text-decoration: underline; }
@media print { .preview-bar, .site-bar { display: none; } }
/* Catalogus: detail schuift mee */
@media (min-width: 900px) { .lib.has-detail .detail { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; } }
.users-list .meta { margin-left: auto; margin-right: 8px; }
/* Nieuw bewaard → gemarkeerde rij: tekst niet tegen de rand.
   r18 bugrapport: de inhoud blijft uitgelijnd met de andere rijen (de markering valt buiten de kolom). */
.plist-k .prow.hl { padding-left: 12px; padding-right: 8px; margin-left: -12px; margin-right: -8px; border-radius: 0 10px 10px 0; }
/* Gsm: status en teller onder de naam, naast de ster; zonder ster (kleine lijst) gewoon tegen de rand. */
@media (max-width: 700px) { .plist-k .prow:not(.confirm):has(.star) .status { padding-left: 40px; } }
.erow .sec-sel { margin-left: auto; }
@media (max-width: 700px) { .erow .sec-sel { display: none; } }

/* ---------- Ronde 10 ---------- */
.saved-note::before { content: none !important; }
.ed-sec { margin: 0 0 6px; }
.ed-sec .sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 6px; border-bottom: 1px solid var(--ink); font-weight: 600; }
.ed-sec .rounds { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; color: var(--soft); font-size: var(--fs-m); }
.ed-sec .elist { border-top: 0; }
.add-box.small { margin: 8px 0 14px; } .add-box.small input { min-height: 40px; font-size: var(--fs-m); }
.ed-tools { display: flex; justify-content: flex-end; margin: -8px 0 18px; }
.opt-menu .menu { right: 0; left: auto; min-width: 260px; }
.opt-menu summary.btn { min-height: 34px; padding: 0 14px; }
.tr-dev { font-size: var(--fs-s); margin: 6px 0 0; }
.feel-box { margin: 10px 0 0; } .feel-box .sub { font-size: .95rem; margin: 0 0 4px; }
.feel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-m); }
.fb-icon { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 50%; color: var(--soft); flex: 0 0 auto; }
.fb-icon svg { width: 20px; height: 20px; } .fb-icon:hover { background: var(--tile); color: var(--ink); }
.round-screen .round-card { text-align: center; padding: 48px 8px 32px; display: grid; justify-items: center; gap: 8px; }
.round-screen h1 { margin: 0; }
.card.hl { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 14px; }
.chat { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.msg { max-width: 92%; padding: 12px 14px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); }
.msg p { margin: 0 0 8px; } .msg p:last-child { margin-bottom: 0; }
.msg.me { justify-self: end; background: var(--accent); color: #fff; border-color: var(--accent); } .msg.me .meta { color: rgba(255,255,255,.8); }
.msg.bot a.ex-link { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.msg.bot .who-s { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--accent); margin-bottom: 6px; }
.msg .sim { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 6px; } .msg .sim li { display: flex; align-items: center; gap: 10px; } .msg .sim .btn { margin-left: auto; }
.proposal-card { border-top: 1px solid var(--line); padding-top: 8px; margin: 6px 0; }

/* ===== Ronde 11 ===== */
/* Bovenbalk: Feedback links van de naam */
.k-right { display: inline-flex; align-items: center; gap: 16px; }
.fb-link { color: var(--ink); font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; min-height: var(--tap); display: inline-flex; align-items: center; }
.fb-link[aria-current] { font-weight: 600; }
@media (max-width: 639px) { .k-bar .k-right { margin-left: auto; } .k-bar .who { margin-left: 0; } }
.news-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-left: 5px; vertical-align: middle; }
/* Editor: kop op één regel, zelfde stijl */
.hdr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; margin: 6px 0 10px; }
.hsel { display: inline-flex; align-items: baseline; gap: 6px; }
.hsel .h-l { color: var(--muted); font-size: var(--fs-sm); }
.hsel .quiet-select { appearance: none; -webkit-appearance: none; field-sizing: content; font-weight: 600; padding: 0 16px 0 0; min-height: 36px; max-width: 100%;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%234A4640' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1px center / 10px 10px; cursor: pointer; }
@media (min-width: 900px) { .hdr-row { flex-wrap: nowrap; } }
/* Opties als gewone pill */
.opt-menu summary.opt-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; white-space: nowrap; list-style: none; }
.opt-menu summary.opt-btn::-webkit-details-marker { display: none; }
.opt-btn .chev { width: 12px; height: 12px; }
.opt-menu .menu button { white-space: nowrap; }
.empty-ed { margin: 8px 0 24px; }
.tr-on { margin: 6px 0 0; font-size: var(--fs-sm); }
/* Oefeningenlijst desktop: vaste kolom voor de steppers */
@media (min-width: 900px) {
  .erow { display: grid; grid-template-columns: 32px minmax(0, 1fr) 270px 96px; align-items: center; gap: 0 12px; }
  .erow .grip { grid-column: 1; }
  .erow .ex-open { grid-column: 2; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; }
  .erow .ex-open .thumb { width: 56px; height: 56px; }
  .erow .e-name { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .erow .dose-ed { grid-column: 3; justify-self: start; flex-wrap: nowrap; }
  .erow .row-btns { grid-column: 4; justify-content: flex-end; margin-left: 0; gap: 0; }
  .erow .row-btns > * { width: 44px; height: 44px; display: grid; place-items: center; }
  .erow .row-more > summary { width: 44px; height: 44px; display: grid; place-items: center; }
}
/* Patiëntenlijst: reactie */
.react { color: var(--ink); font-size: var(--fs-s); font-weight: 600; white-space: nowrap; }
/* Sjablonen: kaart als samenstelling */
.cat-t .lib-grid { grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 28px 24px; }
.tcard .card-a { display: block; text-decoration: none; }
.fig-strip { display: flex; justify-content: center; align-items: center; gap: 2px; background: var(--tile); border-radius: 8px; min-height: 112px; padding: 14px 12px; }
.tcard .fig-strip { aspect-ratio: 3 / 1; }
@media (max-width: 399px) { .tcard .fig-strip { min-width: 0; max-width: 100%; } } /* WCAG K10: op smalle schermen mag min-height via aspect-ratio geen 336 px breedte afdwingen (320 px: 36 px zijwaarts scrollen) */
.fs-fig { flex: 0 1 68px; width: 68px; max-width: 68px; aspect-ratio: 1; display: grid; place-items: center; min-width: 0; }
.fs-fig img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
/* golf3: gegrond (zie grond.js); het witte deel dat onder de tegel valt, verdwijnt. */
.fs-fig { overflow: hidden; } .fs-fig img { transform: translateY(var(--g, 0)); }
.fs-more { font-family: "Fraunces", Georgia, serif; } /* S6 fase 2: grootte en kleur komen van de latere .fs-more (r18, PT-07); 22px/#4A4640 golden nergens */
.tcard.sel .fig-strip { box-shadow: inset 0 0 0 2px var(--accent); }
.tcard.hl .fig-strip { outline: 3px solid var(--accent); outline-offset: 2px; }
.tc-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.tc-name { font-family: "Fraunces", Georgia, serif; font-size: 22px; color: var(--ink); text-decoration: none; line-height: 1.2; }
.tc-name:hover { text-decoration: underline; }
.tcard .heart { position: static; width: 44px; height: 44px; background: none; flex: none; margin-right: -8px; }
.tcard .heart svg { width: 20px; }
.tcard > .meta { display: block; }
.vaak { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-s); color: var(--accent); margin-top: 3px; }
.vaak .crane { width: 16px; height: auto; }
.t-detail .t-items { list-style: none; padding: 0; margin: 12px 0; counter-reset: none; }
.t-detail .t-items li { display: grid; grid-template-columns: 22px 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.t-detail .t-items .thumb { width: 52px; height: 52px; }
.t-detail .t-n { color: var(--muted); font-size: var(--fs-sm); }
.t-detail .t-dose { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.sheet-dim { display: none; }
@media (max-width: 899px) {
  .cat-t .lib.has-detail { display: grid; }
  .cat-t .detail { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: 85vh; overflow: auto; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.18); }
  .cat-t .sheet-dim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(28,27,25,.35); }
}
/* Oefeningen: vinkje alleen bij hover/focus of in selectie */
.cat-ex .card .pick { opacity: 0; transition: opacity .12s; }
.cat-ex .card:hover .pick, .cat-ex .card:focus-within .pick, .cat-ex.selecting .card .pick { opacity: 1; }
@media (max-width: 599px) {
  .cat-ex .lib-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
  .cat-ex .card strong { font-size: 13px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; }
  .cat-ex .card .card-a > .meta { display: none; }
  .cat-ex .tile { border-radius: 10px; margin-bottom: 4px; }
  .cat-ex .card .heart { width: 44px; height: 44px; right: -6px; top: -6px; background: none; }
  .cat-ex .card .heart svg { width: 20px; }
  .cat-ex .card .pick { width: 44px; height: 44px; left: -6px; top: -6px; background: none; }
  .cat-ex .card .pick input { width: 18px; height: 18px; }
}
/* Gesprekken */
.threads { margin: 4px 0 18px; }
.thread-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.th-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; min-height: var(--tap); }
.th-row:hover .th-t { text-decoration: underline; }
.th-t .news-dot { margin: 0 8px 0 0; }
.th-st { font-size: .75rem; padding: 3px 8px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); white-space: nowrap; }
.th-st.st-klaar { color: var(--accent); border-color: var(--accent); }
.th-st.st-niet { color: var(--accent); }
.msg .m-at { display: block; font-size: var(--fs-xs); margin-top: 4px; }
.k8chat .warn { color: var(--danger); font-size: var(--fs-sm); margin: 2px 0 10px; }
.file-btn { cursor: pointer; }
/* Feedbackpagina */
.fb-page { max-width: 640px; }
.fb-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 2px 4px 2px 12px; font-size: var(--fs-sm); margin: 0 0 14px; }
.chip-x { width: 36px; height: 36px; border: 0; background: none; cursor: pointer; color: var(--muted); border-radius: 50%; }
/* Speler: tussenscherm per deel, voortgangsbalk in delen */
.part-screen .fig-strip { width: 100%; max-width: 420px; min-height: 96px; margin: 8px 0; }
.dots.wide { gap: 6px; }
.dots.wide .seg { display: flex; flex: var(--n, 1) 1 0; gap: 3px; min-width: 0; }
.dots.wide .seg .dot { flex: 1; }
.set-col { justify-items: start; }
.set-col .set-of { text-align: left; }
/* r11 fixes */
.opt-menu summary.opt-btn { width: auto; height: auto; border-radius: 999px; font-size: inherit; display: inline-flex; }
.cnt { display: inline-flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; }
@media (min-width: 701px) { .plist-k .prow:not(.confirm) { grid-template-columns: minmax(0, 1fr) 190px 180px 230px; } }

@media (max-width: 700px) { .prow .cnt { grid-column: 1; } }
@media (min-width: 900px) { .erow { grid-template-columns: 32px minmax(0, 1fr) 310px 96px; } .erow .sw { white-space: nowrap; overflow: visible; } }
.cat-tabs a, .tabs a, .tabs button:not(.sel-mode) { white-space: nowrap; }
.tc-row .tc-name { min-width: 0; }
.tc-row .heart { flex: 0 0 auto; }
.tcard { min-width: 0; }
@media (max-width: 639px) { .k-nav { gap: 0 14px; flex-wrap: nowrap; } .k-nav a { font-size: var(--fs-m); } .k-right { margin-left: auto; } }
.tabs.views { flex-wrap: wrap; }
#k8-text { width: 100%; box-sizing: border-box; }
@media (min-width: 900px) { .cat-t:has(.detail) .lib-grid { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); } }

/* Ronde 12b: speler past altijd op één scherm. Het figuur krimpt (min. 160 px); dosering, bolletjes en knoppen blijven zichtbaar. */
.p3 { height: 100vh; height: 100dvh; min-height: 0; overflow-y: auto; box-sizing: border-box; }
.p3 > * { flex: 0 0 auto; }
.p3 .stage, .p3 .stage.wide { flex: 1 1 330px; height: auto; min-height: 160px; max-height: 330px; }
.p3 .stage.wide { max-height: 230px; }
.p3-nav.solo { grid-template-columns: 1fr; }
.dots.wide .seg.up .dot { background: var(--accent); opacity: .3; }
/* 12b: beschrijving en antwoord in dezelfde stijl als de notitie in de editor. */
textarea.note-fld { display: block; width: 100%; box-sizing: border-box; min-height: calc(4 * 1.5em + 24px); border: 1px solid var(--line-field); border-radius: 12px; background: var(--paper); padding: 12px 14px; line-height: 1.5; resize: vertical; }
.th-send-row { justify-content: flex-end; }
.fb-thread .chat { margin-bottom: 20px; } /* ruimte tussen laatste bericht en antwoordveld (bug 27/10) */
.lib-filters.no-filters { margin-bottom: 8px; }
/* 12b: filters op de gsm compact: tabs, dan Materiaal + Selecteer op één regel, regio's op één scrollende rij. */
.lf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
@media (max-width: 600px) {
  .k-title { flex-wrap: nowrap; }
  .k-title h1 { font-size: var(--fs-xxl); }
  .k-title .btn { min-height: 36px; padding: 4px 14px; border-radius: 999px; font-size: var(--fs-m); white-space: nowrap; }
  .search-wrap { margin-bottom: 8px; }
  .lib-filters { display: block; margin-bottom: 10px; }
  .lf-row { gap: 6px 10px; }
  .lf-row .tabs.views { flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .lib-filters .chips.regs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-top: 6px; gap: 6px; }
  .lib-filters .chips.regs::-webkit-scrollbar, .lf-row .tabs.views::-webkit-scrollbar { display: none; }
  .lib-filters .chips.regs .chip { flex: 0 0 auto; }
}
@media (max-width: 600px) {
  .k-title h1 { font-size: 1.75rem; white-space: nowrap; }
  .k-title { margin-bottom: 8px; }
  .search-wrap { margin-top: 0; }
  .search-wrap .big-search { min-height: 46px; height: 46px; padding-top: 8px; padding-bottom: 8px; }
}
@media (max-width: 600px) {
  .k7 .search-wrap { padding: 0; margin: 0 0 8px; min-height: 0; }
  .k7 .k-title { margin-top: -8px; }
}
@media (max-width: 600px) { .k7 .search-wrap .big-search { margin: 0; } }
/* 12b: reactielabels beginnen op dezelfde x (vaste breedte voor de teller). */
@media (min-width: 701px) { .cnt > .count { flex: 0 0 auto; min-width: 46px; box-sizing: border-box; } }
/* 12b: Verstuur en Annuleren op hetzelfde midden, 16 px ertussen. */
.row.fb-actions { display: flex; align-items: center; gap: 16px; }
@media (max-width: 700px) {
  .plist-k .cnt { justify-content: flex-start; }
  .plist-k .cnt > .count { width: auto; min-width: 52px; flex: 0 0 auto; justify-content: flex-start; } /* golf3b: ruimte voor "2/3" */
  .plist-k .prow:not(.confirm) { grid-template-columns: minmax(0, 1fr) auto; }
  .plist-k .prow .btn { white-space: nowrap; }
}
/* 12b: "Verlengen" is een knop, geen ⋯-rondje (viel op de gsm buiten zijn vorm). */
.more.ext > summary.btn, .plist-k .prow .more.ext > summary.btn { width: auto; height: auto; min-height: 34px; display: inline-flex; padding: 0 14px; border-radius: 999px; font-size: inherit; white-space: nowrap; }
@media (max-width: 700px) { .plist-k .prow:has(.star) .cnt { padding-left: 40px; } }
@media (max-width: 700px) { .plist-k .prow .status { white-space: normal; min-width: 0; } .plist-k .prow .more.ext > summary.btn { padding: 0 12px; font-size: .92rem; } }
@media (max-width: 600px) { .k7 .k-title h1 { font-size: var(--fs-xl); } .k7 .k-title .btn { padding: 4px 12px; font-size: var(--fs-sm); } }
/* 12b: tussenscherm: blok verticaal gecentreerd boven "Begin". */
.p3.part-screen .round-card { margin-top: auto; margin-bottom: auto; }
.p3.part-screen .p3-nav { margin-top: 0; }

/* ---- ronde 13 ---- */
.preview-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.preview-btn .eye { width: 20px; height: 20px; flex: none; }
.preview-btn.big { font-size: 1.05rem; padding: 12px 20px; border-radius: 999px; }
.d-preview { margin: 14px 0; }
.d-imgs.big img { height: 240px; }
.qr-none { font-size: var(--fs-sm); color: var(--muted); max-width: 30ch; }
.noshare { font-size: var(--fs-xs); color: var(--muted); border: 1px solid currentColor; border-radius: 999px; padding: 1px 7px; margin-left: 6px; white-space: nowrap; }
.p2-when { color: var(--muted); margin: 4px 0 10px; }
.p2-set { margin: 18px 0 6px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.p2-set label { display: block; margin: 4px 0; }
.p-disc, .pr-disc { font-size: .78rem; color: var(--muted); margin-top: 18px; }
.t-side { font-size: var(--fs-m); color: var(--muted); }
.demo-note { font-size: var(--fs-s); color: var(--muted); background: var(--tile); border-radius: 8px; padding: 6px 10px; }
.link-line code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; font-size: .78rem; }
.cue-ed textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 8px; border-radius: 8px; border: 1px solid var(--line); }
.cue-row { justify-content: space-between; gap: 8px; }
/* TV-19 (Eli 2/11): "Standaarduitleg terugzetten" direct onder het tekstvak, de teller rechts. */
.cue-reset-row { justify-content: space-between; gap: 8px; margin-top: 4px; } .cue-reset-row .tel { margin-left: auto; }
.cue-tag { font-size: .7rem; color: var(--muted); font-style: italic; margin-left: 4px; }
.side-sel { margin-left: 6px; font-size: var(--fs-s); }
.sets-on { font-size: var(--fs-s); margin-left: 4px; }
.name-hint { font-size: .78rem; margin: 2px 0 8px; }
.dose-ed { flex-wrap: wrap; row-gap: 4px; }
.side-sel { max-width: 100%; }
@media (max-width: 600px) { .side-sel { margin-left: 0; } .preview-btn.big { width: 100%; justify-content: center; } }
@media (max-width: 899px) { .erow .dose-ed { flex-wrap: wrap; } }

/* ---------- Ronde 14 ---------- */
/* Kraanvogel per grootte (brief ronde-13 §1.2): klein = alleen omtrek, dikkere lijn. */
.crane.mini .crane-folds, .crane.small .crane-folds, .crane.tiny .crane-folds { display: none; }
.crane.mini .crane-line, .crane.small .crane-line { stroke-width: 2.1; }
.crane.tiny .crane-line { stroke-width: 3; }
.crane.tiny { width: 16px; display: inline-block; vertical-align: middle; }
/* Sluiten = één ×, overal hetzelfde. */
.x-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -8px -10px -8px 0; border: 0; background: none; color: var(--muted); font-size: 1.15rem; border-radius: 999px; cursor: pointer; text-decoration: none; flex: none; }
.x-close:hover { color: var(--ink); background: var(--paper); }
@media (min-width: 900px) { .detail .back-lib.x-close { display: inline-flex; float: right; margin: -10px -10px 0 8px; } }
/* Bekijk als patiënt: kleine tekstlink. */
.preview-link { font-size: var(--fs-m); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; align-self: center; }
.preview-link:hover { color: var(--ink); }
.d-preview { margin: 8px 0; }
/* Deelscherm: alles binnen het blad (BUG-03). */
.sheet.share { grid-template-columns: minmax(0, 1fr); }
.sheet.share > * { min-width: 0; max-width: 100%; }
.sheet.share .link-line { flex-wrap: nowrap; min-width: 0; }
.sheet.share .link-line code { flex: 1 1 auto; min-width: 0; }
.sheet.share .link-line .btn { flex: none; }
.sheet.share .qr { max-width: 100%; }
/* Zijde nooit over Verwijderen (BUG-04). */
.erow .dose-ed { min-width: 0; flex-wrap: wrap !important; row-gap: 6px; }
.erow .row-btns { position: relative; z-index: 1; }
/* Feedback: Annuleren op hetzelfde midden als Verzenden (DEMO-03). */
.row.fb-actions { justify-content: center; }
/* Patiëntenlijst: reactie mag wrappen (DEMO-18). */
@media (min-width: 701px) { .cnt { white-space: normal; flex-wrap: wrap; row-gap: 2px; } }
/* Zoeken: meer treffers. */
.dropdown .more-hits { padding: 8px 12px; }
/* Tandwiel (Eli punt 1). */
.p-head { display: flex; justify-content: space-between; align-items: center; }
.gear-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--muted); border-radius: 999px; cursor: pointer; }
.gear-btn svg { width: 24px; height: 24px; }
.gear-btn:hover, .gear-btn:focus-visible { color: var(--ink); background: var(--paper); }
.gear-sheet .lang-list { margin-top: 12px; }
.p2-set { margin-top: 18px; }
/* Speler: Volgende met open sets. */
.next-col { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.open-hint { text-align: center; }

/* Afdruk P6 volgens brief ronde-13 §2: A4 794 × 1123, regen in de rechterrand. */
.p6.print-wrap { max-width: none; padding: 16px; }
.p6 .pr-actions { max-width: 794px; margin: 0 auto 14px; }
.p6 .pr-scroll { overflow-x: auto; }
.p6 .pr-page { position: relative; width: 794px; min-height: 1123px; height: 1123px; margin: 0 auto 24px; background: #fff; color: #1D1B18; box-sizing: border-box; padding: 60px 140px 48px 72px; box-shadow: 0 1px 6px rgba(0,0,0,.12); overflow: hidden; }
.p6 .pr-page2 { height: auto; }
.p6 .pr-page > *:not(.pr-foot) { position: relative; z-index: 1; }
.p6 .pr-foot { z-index: 1; }
.p6 .pr-head { display: block; border-bottom: 1px solid #1D1B18; padding-bottom: 12px; margin-bottom: 14px; }
.p6 .pr-logo .crane { width: 32px; }
.p6 .pr-head h1 { font-family: var(--serif); font-size: 38px; line-height: 1.1; margin: 10px 0 4px; }
.p6 .pr-meta { margin: 0; font-size: 13px; color: #4A4640; }
.p6 .pr-note { font-size: 13px; margin: 0 0 10px; max-width: 520px; }
.p6 .pr-note .label { font-weight: 600; margin-right: 4px; }
.p6 .pr-list { display: block; }
.p6 .pr-row { display: grid; grid-template-columns: 124px minmax(0, 300px); gap: 0 14px; padding: 10px 0; border-bottom: 1px solid rgba(29,27,24,.14); break-inside: avoid; }
.p6 .pr-imgs img { width: 60px; height: 80px; object-fit: contain; }
.p6 .pr-text h3 { margin: 0 0 2px; font-weight: 400; }
.p6 .pr-name { font-family: var(--serif); font-size: 18px; }
.p6 .pr-dose { font-family: var(--serif); font-size: 14px; color: var(--accent); margin: 0; }
.p6 .pr-text p { font-size: 13px; margin: 0; line-height: 1.35; }
.p6 .pr-sec { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: #4A4640; margin: 12px 0 0; }
.p6 .pr-foot { position: absolute; left: 72px; right: 140px; bottom: 48px; display: flex; gap: 14px; align-items: center; font-style: normal; font-size: 12px; color: #4A4640; margin: 0; }
.p6 .pr-foot p { margin: 0 0 2px; }
.p6 .pr-foot .p-disc { margin-top: 4px; font-size: 11px; }
.p6 .pr-qr { width: 116px; flex: none; margin: 0; } /* deel 3 punt 11: ≈ 31 mm op A4 (was 64 px ≈ 17 mm) */
.p6 .pr-qr svg { width: 116px; height: 116px; margin: 0; }
@media print {
  @page { size: A4; margin: 0; }
  .p6.print-wrap { padding: 0; }
  .p6 .pr-scroll { overflow: visible; }
  .p6 .pr-page { margin: 0; box-shadow: none; break-after: page; }
  .p6 .pr-page:last-child { break-after: auto; }
}
.p6 .pr-note { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

/* ===== Ronde 15 ===== */
/* Feedback: knoppen links; Annuleren verticaal gecentreerd op Verzenden. */
.row.fb-actions { justify-content: flex-start !important; align-items: center; }
/* Programmakop: label boven de keuze, links uitgelijnd, wrapt zonder te knellen. */
.hdr-row { display: flex; flex-wrap: wrap !important; align-items: flex-start; gap: 10px 28px; }
.hsel { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; }
.hsel .h-l { font-size: .78rem; }
.hsel .quiet-select { min-height: 30px; }
/* Zijde naast de naam. */
.erow .nm-wrap { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; min-width: 0; }
@media (min-width: 701px) { .erow .nm-wrap { grid-column: 2; } .erow .nm-wrap .ex-open { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; } }
.erow .nm-wrap .side-sel { margin-left: 0; font-size: var(--fs-s); }
/* Menu van een rij boven de knoppen van de volgende rij. */
.erow:has(details[open]) { position: relative; z-index: 40; }
.erow .row-more .menu { z-index: 41; }
/* Melding met actie: leesbaar en drie keer langer zichtbaar. */
.toast.has-act { animation-duration: 10s; }
.toast .toast-act { color: var(--bg); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; margin-left: 8px; }
/* Sjablonen: rijen niet uitrekken naar de hoogte van het detail. */
.lib-grid { align-content: start; align-items: start; }
/* Voortgangsbalk in de speler: geen kader (botsing met .seg van de keuzeknoppen). */
.dots.wide .seg { border: 0; padding: 0; margin: 0; border-radius: 0; }
/* Patiëntkop: afdrukken links van het tandwiel. */
.p-tools { display: inline-flex; gap: 4px; align-items: center; }
.p-tools .gear-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--ink); }
.p-tools .gear-btn svg { width: 22px; height: 22px; }
.why-link { font-size: var(--fs-sm); margin-left: 8px; }
.p1-set .p1-body h1 { margin-top: 8px; }
.w-ver, .ver { font-size: var(--fs-xs); color: var(--muted); margin-top: 18px; }
/* Afdruk: de slogan staat onderaan (frequentieregel), de notitie krijgt weer ruimte. */
.p6 .pr-note { -webkit-line-clamp: 8; max-width: 600px; }
.erow .side-sel { field-sizing: content; width: auto; padding-right: 18px; }
@media (max-width: 700px) {
  .erow .nm-wrap { flex-wrap: nowrap; }
  .erow .nm-wrap .e-name { overflow-wrap: anywhere; }
  /* Verwijderen staat niet meer in het menu: het kruisje is ook op de gsm zichtbaar. */
  .erow .x-rm { display: inline-grid !important; place-items: center; width: 36px; height: 36px; }
  .erow .row-btns { display: inline-flex; align-items: center; gap: 2px; }
}
.p1 .w-fig { margin: 4px 0 6px; }
.p1 .w-fig svg { width: 64px; height: auto; }
.p1 .p1-body h1 { font-size: clamp(1.6rem, 6.4vw, 2.2rem); }
.p1 .w-fig { height: auto !important; min-height: 0 !important; padding: 0 !important; }
.p6 .pr-note { font-size: 14px; line-height: 1.45; margin-bottom: 14px; }

/* ===== Ronde 16 ===== */
/* Feedback: Annuleren verticaal gecentreerd op Verzenden. */
.row.fb-actions { align-items: center !important; }
.row.fb-actions .link-btn { display: inline-flex; align-items: center; min-height: 0; line-height: 1.2; margin: 0; }
/* Programma: korte eenheid, nooit onder de stepper. */
.erow .sw { white-space: nowrap; }
/* Patiëntenlijst: 'deelt niet' als een stil streepje. */
.noshare { border: 0 !important; padding: 0 !important; color: var(--muted); font-size: .95rem; margin-left: 6px; }
/* Welkom/instellingen: taal als keuzelijst, meer ruimte voor delen. */
.w-lang { display: grid; gap: 8px; margin: 18px 0 30px; }
.w-lang-sel { font: inherit; font-size: 1.05rem; min-height: 48px; padding: 0 40px 0 14px; border: 1px solid var(--line-field); border-radius: 12px; background: var(--paper); color: var(--ink); max-width: 320px; }
.p1 .share-q { margin-top: 8px; }
/* Timer: mm:ss past in de ring; geen vierkant kader, wel een ronde focusring. */
.timer { border: 0; background: none; border-radius: 50%; padding: 0; outline: none; }
.timer:focus { outline: none; }
.timer:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.sets-box .t-num.long { font-size: 1.7rem; letter-spacing: -0.02em; }
/* Afdruk: notitie groot en met naam, zoals in de speler. */
.p6 .pr-note { display: block !important; -webkit-line-clamp: none !important; overflow: visible; max-width: 600px; margin: 0 0 16px; padding: 12px 16px 10px; box-shadow: none; border: 1px solid #ddd; background: #fff; }
.p6 .pr-note blockquote { font-size: 18px; margin: 4px 0; }
.p6 .pr-note .label { display: block; font-size: 11px; }
.p6 .pr-note .sign { font-size: 13px; }
@media (max-width: 700px) { .erow .nm-wrap { flex-wrap: wrap; } .erow .nm-wrap .e-name { overflow-wrap: normal; word-break: normal; hyphens: auto; } }
@media (max-width: 700px) { .erow .nm-wrap .ex-open { flex: 1 1 150px; min-width: 0; } .erow .nm-wrap .e-name { overflow-wrap: break-word; } }
.p6 .pr-note blockquote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
/* r17: website "Waarom Senzuru" */
.why h2 { margin: 0 0 14px; }
.why-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.why-list strong { display: block; font-family: var(--serif); font-weight: 500; font-size: var(--fs-l); }
.why-list span { color: var(--soft); }
@media (min-width: 900px) { .why-list { grid-template-columns: repeat(2, 1fr); gap: 24px 30px; } }

/* ===== r18 (snede 1, kinesist) ===== */
.k-bar { flex-wrap: nowrap; gap: 0 18px; }
.k-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; align-items: center; }
.k-nav::-webkit-scrollbar { display: none; }
.k-nav .k-right { margin-left: auto; padding-left: 18px; gap: 18px; }
.k-nav .k-right a { min-height: var(--tap); display: inline-flex; align-items: center; color: var(--muted); text-decoration: none; font-size: .95rem; border-bottom: 2px solid transparent; }
.k-nav .k-right a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
@media (max-width: 639px) { .logo-t { display: none; } .k-bar .logo { position: relative; } .k-bar .logo::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } /* WCAG K12: tikdoel logo 44 × 44 zonder dat de kop verschuift */ .k-bar { gap: 0 12px; } .k-nav { flex-basis: auto; order: 0; gap: 0 14px; } .k-nav .k-right { gap: 14px; padding-left: 14px; } }
@media (max-width: 639px) { .k-nav { flex-basis: auto; order: 0; } .k-bar .k-right { margin-left: auto; } }
.toast[data-toast] { animation: none; }
.toast[data-toast][hidden] { display: none; }
.chip.zero, .chip[disabled] { opacity: .45; cursor: default; }
.more .menu .sub-menu > summary { list-style: none; padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: .95rem; }
.more .menu .sub-menu > summary::-webkit-details-marker { display: none; }
.more .menu .sub-menu .sub { display: grid; padding-left: 10px; }
.more .menu .sub-menu .sub button { font-size: var(--fs-m); }
/* Start (n = 0) */
.k-start { display: grid; gap: 24px; margin-top: 8px; }
@media (min-width: 900px) { .k-start { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-card { display: grid; gap: 6px; padding: 14px; }
.st-card .btn { justify-self: start; }
.ks-links { gap: 18px; margin-top: 14px; }
.ks-try { background: var(--accent); color: var(--bg); border-radius: 16px; padding: 20px; }
.ks-try h2 { color: var(--bg); font-size: 1.4rem; }
.ks-try .qr { background: var(--paper); border-radius: 12px; padding: 10px; display: inline-block; margin: 6px 0 0; }
.ks-try .qr figcaption { color: var(--muted); font-size: var(--fs-s); text-align: center; }
.ks-try .btn { background: var(--paper); color: var(--ink); }
.preview-bar .pv-fb { margin-left: 6px; }
.ks-try .qr-link { display: inline-block; border-radius: 12px; }
.ks-try .qr-link:focus-visible { outline: 3px solid var(--bg); outline-offset: 3px; }
.ks-try .ks-here { margin: 8px 0 0; }
.ks-try .ks-here .link-btn { color: var(--bg); text-decoration: underline; }
.only-narrow { display: none; }
@media (max-width: 639px) { .only-wide { display: none !important; } .only-narrow { display: block; } .st-grid { grid-template-columns: 1fr; } }
/* Op weg */
.on-weg { position: relative; border: 1px solid var(--line-strong); border-radius: 14px; padding: 12px 16px; margin: 0 0 14px; background: var(--paper); }
.on-weg ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.on-weg li::before { content: "○ "; color: var(--muted); }
.on-weg li.done::before { content: "✓ "; color: var(--accent); }
.on-weg .x-close { position: absolute; right: 8px; top: 6px; }
/* Editor */
.name-in.need { border-bottom-color: var(--danger); }
.hdr-row { gap: 4px 18px; }
.hdr-row .quiet-select { appearance: none; -webkit-appearance: none; field-sizing: content; border: 0; background: transparent; font-weight: 600; min-height: 36px; padding: 0 14px 0 0; color: var(--ink); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 4px center, right 0 center; background-size: 4px 4px; background-repeat: no-repeat; }
.hdr-row .quiet-select.check { outline: 2px dashed var(--warn); outline-offset: 2px; border-radius: 6px; }
.side-t { font-size: var(--fs-sm); color: var(--muted); margin-left: 4px; }
/* golf6 OE-05/06 (vlaggen telwijze, houdtijd) */
.cnt-t { font-size: var(--fs-sm); color: var(--muted); margin-left: 4px; } .cnt-t.unset { font-style: italic; }
.hold-ed { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; } .hold-l { font-size: var(--fs-sm); color: var(--muted); }
/* OE-06 rusttijd (1/11) */
.rest-ed { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; } .rest-l { font-size: var(--fs-sm); color: var(--muted); }
.opbouw { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 4px 0 18px; font-size: .92rem; }
.opbouw .op-row { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; }
.opbouw .opt { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); }
.rounds .r-l { color: var(--muted); font-size: var(--fs-sm); }
.note-ed .fld-label .meta { font-weight: 400; }
.ed-actions { align-items: center; }
.ed-actions .ed-prev { margin-right: auto; }
.ed-actions .main-wrap { display: inline-flex; align-items: center; gap: 12px; }
.ed-actions .miss { align-self: center; }
.ed-actions .ed-more .menu { top: auto; bottom: 100%; }
@media (max-width: 639px) {
  .ed-actions { flex-wrap: wrap; }
  .ed-actions .main-wrap { order: -1; flex: 1 1 100%; flex-direction: column; align-items: stretch; }
  .ed-actions .main-wrap .btn { width: 100%; }
}
/* Delen */
.sh-saved { margin: 0 0 12px; }
.sheet.share.phone .wide-btn { width: 100%; }
/* Profiel */
.def-grid { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; align-items: center; }
.def-grid .h-l { color: var(--muted); font-size: var(--fs-m); }
.def-sets { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* r18 (Eli): ook een lijn boven "Een nieuw programma start zo", zoals boven Demo. */
.profile .defaults, .demo-box, .test-box { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 12px; }
.faq .search-wrap { margin-bottom: 14px; }
/* r18 fix: startkaarten en probeer-QR */
.k-start .tcard, .k-start .tcard .card-a, .k-start .tcard .fig-strip { min-width: 0; max-width: 100%; overflow: hidden; }
.k-start .tcard .fig-strip { aspect-ratio: auto; }
.ks-try .qr { width: 160px; }
.ks-try .qr svg { width: 100%; height: auto; display: block; background: #fff; }
.more .menu .sub-menu > summary { display: flex; justify-content: space-between; gap: 12px; }
.def-grid { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); }
.def-grid > * { min-width: 0; }
.def-grid select { max-width: 100%; }
@media (max-width: 480px) { .def-grid { grid-template-columns: minmax(0, 1fr); gap: 2px 0; } .def-grid .h-l { margin-top: 8px; } }

/* ---------- r18 · snede 2: patiëntkant ---------- */
/* PT-07: hoogstens 4 figuren + "+n" */
.fs-more { flex: 0 0 auto; min-width: 44px; height: 44px; display: grid; place-items: center; font-weight: 600; font-size: var(--fs-base); color: var(--ink); background: rgba(255,255,255,.7); border-radius: 22px; padding: 0 8px; }
/* C6 */
.p5-missing .p6-sub { margin: 0; font-size: 1.05rem; }
/* C4: "Toch delen met …?" en "Morgen terugkomen?" */
.p4 .share-ask { font-size: var(--fs-base); }
.p4 .share-ask a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 10px 0; }
.home-tip { position: relative; margin: 28px 0 0; padding: 14px 52px 14px 16px; border: 1px solid rgba(244,241,235,.3); border-radius: 10px; font-size: var(--fs-base); line-height: 1.45; }
.home-tip p { margin: 0; }
.home-how { display: inline-block; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 10px 0 0; min-height: 34px; }
.home-x { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; border: 0; background: none; color: inherit; font-size: 1.1rem; cursor: pointer; border-radius: 22px; }
.home-x:focus-visible { outline: 2px solid currentColor; }
/* C7 */
.c7 { padding-bottom: 48px; }
.c7-back { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; font-size: var(--fs-base); }
.c7 h1 { margin: 8px 0 6px; }
.c7 .lead { font-size: 1.05rem; }
.c7-tabs { display: flex; gap: 4px; margin: 18px 0 0; border-bottom: 1px solid var(--line-strong); }
.c7-tabs button { min-height: 44px; padding: 0 14px; border: 0; background: none; font: inherit; font-size: var(--fs-base); color: var(--soft); border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; }
.c7-tabs button[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.c7-panel { padding: 16px 0 4px; font-size: var(--fs-base); line-height: 1.5; }
.c7-steps { margin: 0; padding-left: 1.4em; display: grid; gap: 10px; }
.c7-note { margin: 14px 0 0; font-size: var(--fs-base); }
.c7-link { margin: 22px 0 0; }
.c7-link .sub { display: block; font-size: var(--fs-base); margin-bottom: 6px; }
.c7-row { display: flex; gap: 8px; }
.c7-row input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 12px; font: inherit; font-size: var(--fs-base); border: 1px solid var(--line-field); border-radius: 8px; background: #fff; text-overflow: ellipsis; }
.c7-row .btn { min-height: 44px; flex: 0 0 auto; }
.c7-good { margin: 24px 0 0; padding: 14px 16px; background: var(--paper); border-radius: 8px; font-size: var(--fs-base); line-height: 1.5; }
.c7-good h2 { font-size: var(--fs-base); margin: 0 0 4px; font-family: var(--sans); font-weight: 600; }
.c7-good p { margin: 0; }
/* C1: uitleg onder de deelvraag ≥ 16 px */
.p1 .share-q .meta { font-size: var(--fs-base); }
/* P6-10: de notitie staat volledig op papier */
.p6 .pr-note blockquote { display: block !important; -webkit-line-clamp: none !important; overflow: visible !important; overflow-wrap: anywhere; }
/* PT-07: de kolom van het tussenscherm groeit niet mee met de strook (lead liep anders mee buiten beeld) */
.round-screen .round-card { grid-template-columns: minmax(0, 1fr); width: 100%; box-sizing: border-box; }
.part-screen .fig-strip { box-sizing: border-box; justify-self: center; }
/* r18 (Eli): Profiel › Demo: schakelaars voor de feature flags. */
.flag-set { border: 0; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.flag-set legend { padding: 0; margin-bottom: 6px; }
.flag-sw { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: .95rem; min-height: 32px; }
.flag-sw input { appearance: none; -webkit-appearance: none; width: 36px; height: 20px; border-radius: 999px; background: var(--line-field); position: relative; margin: 0; flex: none; cursor: pointer; transition: background .15s; }
.flag-sw input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.flag-sw input:checked { background: var(--accent); }
.flag-sw input:checked::after { transform: translateX(16px); }
.flag-sw input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* r18 bugrapport 2 (Eli) §1: Patiënten op de gsm: Delen en ⋯ verticaal gecentreerd over de hele rij (ook de gemarkeerde rij zonder kraanvogels). */
@media (max-width: 700px) { .plist-k .prow:not(.confirm) .row-btns { grid-row: 1 / span 3; align-self: center; } }
/* r18 bugrapport 2 (Eli) §2: Berichten: soort, titel, datum en status elk in een eigen vak (geen overlap). Desktop één regel; gsm: soort + datum, dan titel + status. */
.th-row.th-msg { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "k t d s"; }
.th-msg .th-k { grid-area: k; justify-self: start; white-space: nowrap; }
.th-msg .th-t { grid-area: t; min-width: 0; overflow-wrap: anywhere; }
.th-msg .th-d { grid-area: d; white-space: nowrap; }
.th-msg .th-st { grid-area: s; justify-self: end; }
@media (max-width: 600px) { .th-row.th-msg { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k d" "t s"; row-gap: 6px; column-gap: 12px; } }
/* MVP stap 1: Aanmelden en Instellen */
.auth { max-width: 460px; padding-top: 24px; padding-bottom: 48px; }
.auth h1 { margin: 8px 0 16px; }
.auth-form { display: grid; gap: 8px; margin: 0 0 16px; }
.auth-form .btn { justify-self: start; }
.auth-err { color: var(--danger); font-weight: 600; }
.auth-test { font-size: var(--fs-sm); color: var(--soft); border: 1px dashed var(--line-strong); border-radius: 10px; padding: 6px 10px; margin: 0 0 8px; }
.auth-code { border-top: 1px solid var(--line); padding-top: 12px; }
.auth-check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; line-height: 1.4; }
.auth-check input { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.auth-note { margin: -4px 0 12px; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--paper); color: var(--ink); }
.auth-note p { margin: 0; } .auth-note .sig { color: var(--soft); margin-top: 4px; }
.auth-demo { margin-top: 24px; }
.acct-box { margin-top: 24px; }
.auth:has(> .doc) { max-width: 720px; }
.doc h1 { font-size: clamp(1.6rem, 7vw, 2.4rem); overflow-wrap: anywhere; hyphens: auto; }
.doc h2 { font-size: 1.1rem; margin: 22px 0 6px; }
.doc p, .doc li { line-height: 1.55; }
.doc ul { padding-left: 1.2em; margin: 6px 0; }
.doc-intro { font-weight: 600; }
.doc-lang { border-left: 3px solid var(--accent); padding: 6px 10px; background: var(--paper); }
.doc-tbl { overflow-x: auto; margin: 8px 0; }
.doc-tbl table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.doc-tbl th, .doc-tbl td { text-align: left; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.doc-nav { margin-top: 28px; }
/* ---------- golf3 kaarten (vlag "kaarten"): patiënten als kaarten met de partituur ---------- */
.pc-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 14px; }
.pc-list > .empty { padding: 18px 0; }
.pcard { position: relative; min-width: 0; background: var(--paper); border: 1px solid var(--line-card); border-radius: 18px; padding: 8px 8px 6px; cursor: pointer; }
.pcard.soon { border-color: var(--ink); }
.pcard.out { background: transparent; border-color: transparent; }
.pcard.out .fig img { opacity: .45; }
.pcard.hl { box-shadow: 0 0 0 2px var(--accent); }
/* Band */
.band-wrap { position: relative; min-width: 0; }
.band { display: flex; align-items: flex-end; background: var(--tile); border-radius: 13px; padding: 12px 12px 8px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.band.top { padding-top: 30px; }
.band::-webkit-scrollbar { height: 6px; } .band::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
@media (hover: none) and (pointer: coarse) { .band { scrollbar-width: none; } .band::-webkit-scrollbar { display: none; } }
.band:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.band-wrap.over:not(.at-end)::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 36px; pointer-events: none; border-radius: 0 13px 13px 0; background: linear-gradient(to right, rgba(236,231,222,0), var(--tile)); }
.band.none { min-height: 112px; align-items: center; justify-content: center; }
.band-none { color: var(--muted); font-size: var(--fs-m); }
.figs { display: flex; align-items: flex-end; gap: 6px; }
.fig { flex: 0 0 80px; width: 80px; display: grid; justify-items: center; }
.fig-i { width: 80px; height: 80px; overflow: hidden; }
.fig-i img { width: 80px; height: 80px; object-fit: contain; mix-blend-mode: multiply; transform: translateY(var(--g, 0)); }
.dose { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 2px; white-space: nowrap; }
/* Partituur: delen met een dun lijntje ertussen, ×N boven het hoofddeel (geen herhaaltekens). */
.pseg { position: relative; display: flex; align-items: flex-end; flex: none; padding: 0 10px; }
.pseg:first-child { padding-left: 0; } .pseg:last-child { padding-right: 0; }
.pseg + .pseg { border-left: 1px solid var(--line-strong); }
.pseg-l { position: absolute; top: -24px; left: 10px; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--muted); white-space: nowrap; }
.pseg:first-child .pseg-l { left: 0; }
.pseg-x { position: absolute; top: -26px; right: 10px; font-size: .95rem; font-weight: 600; color: var(--accent); }
.pseg:last-child .pseg-x { right: 0; }
/* Ster: tikvlak 44 px, geen schijf meer (ronde 3 C L3) */
.pcard .star { position: absolute; top: 4px; right: 4px; width: var(--tap); height: var(--tap); flex: none; display: grid; place-items: center; background: none; color: var(--muted); }
.pcard .star svg { position: relative; width: 20px; height: 20px; } /* controle Designer: 20 px zoals + en ♡ */
.pcard .star[aria-pressed="true"] { color: var(--accent); }
/* 4/11 (Eli: "ster niet"): bij een band die overloopt lag de vervaging (.band-wrap.over::after) over de ster en schoven figuren eronder. Ster boven de vervaging, met een eigen tegelkleurig rondje. */
.pcard .star { z-index: 2; } .pcard .star svg { z-index: 1; }
.pcard .star::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--tile); }
:root[data-thema="donker"] .pcard .star::before { background: var(--img-tile); }
/* Wie + wat te doen */
.pc-row { display: grid; gap: 4px; padding: 8px 6px 2px; }
.pc-who { display: flex; flex-direction: column; min-width: 0; }
.pc-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pcard .pname { font-family: var(--serif); font-size: 1.35rem; color: var(--ink); text-decoration: none; line-height: 1.25; }
.pcard .cnt { display: inline-flex; align-items: center; gap: 4px; }
.pcard .count { min-width: 0; gap: 4px; color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.pcard .noshare { font-size: var(--fs-m); color: var(--muted); }
.pcard .p-n { display: none; }
.pc-todo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; border-top: 1px solid var(--line); padding-top: 6px; }
.pc-st { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.pcard .status { min-width: 0; font-size: .88rem; }
.pcard .react { color: var(--ink); border: 1px solid var(--line-field); border-radius: 999px; padding: 1px 9px; } /* S3 A: neutrale pil, zonder vulling; te licht en te zwaar blijven gelijk (TV-64) */
.pcard .row-btns { margin-left: auto; gap: 4px; }
.pcard .row-btns .btn, .pcard .more.ext > summary.btn { min-height: var(--tap); }
/* Kaarten | Lijst */
.filter-bar.has-view { flex-wrap: wrap; }
@media (min-width: 640px) { .filter-bar.has-view { flex-wrap: nowrap; } .filter-bar.has-view .chips { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .filter-bar.has-view .chip { white-space: nowrap; } }
.view-sw { display: inline-flex; flex: none; margin-left: auto; border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px; background: var(--paper); margin: 0 0 12px auto; }
.view-sw button { min-height: var(--tap); min-width: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--soft); font: inherit; font-size: .88rem; cursor: pointer; }
.view-sw button[aria-pressed="true"] { background: var(--accent); color: #fff; font-weight: 600; }
@media (min-width: 640px) {
  .pc-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .pc-todo { border-top: 0; padding-top: 0; flex-wrap: nowrap; }
  .pcard .p-n { display: inline; }
  .pcard { border-radius: 16px; } .band { border-radius: 12px; }
}
/* golf3 startgids (vlag): één bron (gids.js), drie plaatsen. Kaarten op het startscherm, Op weg plat met een groene lijn, Support "Aan de slag". */
.g-t strong { font-weight: 600; color: var(--ink); }
.g-r { margin: 6px 0; }
.g-a { white-space: nowrap; font-size: .92em; color: var(--accent); font-weight: 600; text-decoration: none; }
.g-a:hover, .g-a:focus-visible { text-decoration: underline; }
.g-doel { margin: 4px 0 6px; }
.g-gk { margin: 12px 0 2px; }
.g-goed { margin: 0; padding-left: 18px; }
.g-goed li { margin: 4px 0; }
.g-demo { color: var(--muted); font-size: .88rem; margin: 10px 0 0; }
.g-actie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 4px; }
.g-start { margin: 18px 0 26px; }
.g-cards { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .g-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.g-card { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px 10px 52px; min-width: 0; }
.g-num { position: absolute; left: 14px; top: 13px; width: 26px; height: 26px; border-radius: 999px; background: var(--accent); color: var(--bg); display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 700; }
.g-tit { font-size: 1.05rem; margin: 0; font-weight: 700; }
.g-more summary { cursor: pointer; color: var(--accent); font-weight: 600; list-style: none; padding: 0; min-height: 44px; display: flex; align-items: center; width: max-content; }
.g-more summary::-webkit-details-marker { display: none; }
.g-more summary::after { content: "\00a0›"; }
.g-more[open] summary::after { content: "\00a0‹"; }
.g-more .g-m2, .g-more[open] .g-m1 { display: none; }
.g-more[open] .g-m2 { display: inline; }
.g-ghost-l { margin: 0 0 22px; }
.pc-ghost { border: 2px dashed var(--line-strong); border-radius: 18px; padding: 28px 16px; color: var(--muted); text-align: center; }
.on-weg.g-weg { border: 0; border-left: 3px solid var(--accent); border-radius: 0; background: none; padding: 4px 48px 4px 16px; margin: 0 0 18px; }
.g-weg .g-lead { margin: 2px 0 6px; color: var(--soft); }
.g-weg ul, .g-weg ol { display: block; }
.on-weg.g-weg li::before, .on-weg.g-weg li.done::before { content: none; }
.g-steps { list-style: none; margin: 0; padding: 0; }
.g-step summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; padding: 0; min-height: 44px; }
.g-step summary::-webkit-details-marker { display: none; }
.g-check { width: 24px; height: 24px; flex: none; border-radius: 999px; border: 1.5px solid var(--accent); color: var(--accent); display: grid; place-items: center; font-size: var(--fs-s); font-weight: 700; }
.g-step.done .g-check { background: var(--accent); color: var(--bg); }
.g-step.done .g-tit { color: var(--muted); font-weight: 600; }
.g-ok { color: var(--muted); font-size: var(--fs-sm); }
.g-step .g-body { padding: 0 0 8px 34px; }
.g-weg .g-goed { padding-left: 18px; list-style: disc; }
.g-weg .g-goed li { display: list-item; }
/* Review build 8dd591c (punt 2): leeg startscherm compacter, zodat de eerste kaart ook met de kop in twee regels (vorm) op ≤ 700 px begint.
   "Of meteen voor een patiënt" staat onder het kader (.g-nu). */
.on-weg.g-weg.g-leeg { margin-bottom: 6px; padding-right: 0; } /* leeg: geen ✕, dus geen plaats ervoor nodig */
.g-leeg .g-actie { margin-top: 8px; }
.g-nu { margin: 0 0 6px; }
.g-sup { margin: 18px 0 8px; }
.g-sup .g-body { padding: 0 0 12px; }
.g-sup .g-body p, .g-sup .g-body li { color: var(--soft); }
.g-alle { margin-top: 26px; }
.faq details[id], .g-sup details { scroll-margin-top: 16px; }

/* ---------- golf3 b1: toegankelijkheid patiëntkant, alleen CSS (geen gedrag) ---------- */
/* R18-088 / TG-02: de vastgezette knoppenbalk bedekt geen setrondje meer dat de focus krijgt (scroll-padding = hoogte balk). */
.p3 { scroll-padding-bottom: 140px; }
/* R18-145 / PT-18 (hoort bij R18-088): de balk houdt rekening met de veilige zone onderaan (iPhone). */
.p3-nav { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
/* R18-087 / TG-03: op het groene eindscherm is de focusring crème in plaats van groen op groen. */
.p4 :focus-visible { outline-color: var(--vast-licht); }
/* R18-135 / PT-03: "Naar mijn oefeningen" blijft in beeld op een kleine gsm (voet plakt onderaan). */
.p1-foot { position: sticky; bottom: 0; z-index: 2; background: var(--bg); padding: 12px 0 max(12px, env(safe-area-inset-bottom)); }
/* R18-140 / PT-15: geen lijn meer door de vraag "Mag je kinesist zien hoe het gaat?" (de lijn zat op de rand van de fieldset). */
.p1 .lang-list.share-q { border-top: 0; }
.p1 .share-q .radio-row:first-of-type { border-top: 1px solid var(--line); }
/* R18-091 / TG-04: dagnamen van later deze week op vol contrast (alleen de vogel blijft lichter); lege vogel ≥ 3:1. */
.week-cranes li.future { opacity: 1; }
.week-cranes li.future .crane { opacity: .55; }
.week-cranes .crane { color: var(--muted); }
.week-cranes li.on .crane { color: var(--accent); opacity: 1; }
/* R18-094 / TG-15: bij inzoomen breekt een lange kop af in plaats van te verdwijnen, de weekrij mag wrappen en het timerbijschrift past op één regel. */
.p-wrap h1 { overflow-wrap: anywhere; hyphens: auto; }
.week-cranes { flex-wrap: wrap; }
.t-cap { max-width: none; }

/* ---------- golf3 b4: kinesistkant ---------- */
/* R18-126 / DS-08, SK-03: Bekijk als patiënt en Bewaar blijven onderaan in beeld (zoals de spelerbalk). */
.ed-actions { position: sticky; bottom: 0; z-index: 5; background: var(--bg); margin-bottom: 0; padding: 10px 0 max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
html[data-side="kine"] { scroll-padding-bottom: 96px; }
.t-detail > .actions { margin: 4px 0 12px; }
/* golf3 (R18-086): de kop krijgt de focus na een schermwissel als startpunt, maar is geen knop: geen focusring. */
h1[tabindex="-1"]:focus { outline: none; }

/* golf3 (R18-074): onaf eindscherm op papier, zonder slingers. */
.p4o h1 { font-size: 1.8rem; margin: 6px 0 10px; }
.p4o-date { margin: 18px 0 0; }
.open-list { list-style: none; margin: 4px 0 14px; border-top: 1px solid var(--line); padding: 0; display: grid; gap: 8px; }
.open-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
.open-list li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); }
.p4o .btn.big { width: 100%; margin-top: 18px; }
.p4o .feel .chips { display: grid; grid-template-columns: repeat(3, 1fr); }
.p4o .feel .chip { justify-content: center; min-height: 46px; }
.p4o .saved { color: var(--soft); }

/* golf3 (R18-003): "2 van 3 deze week" in plaats van een rij van 7 dagen bij minder dan elke dag. */
.week-goal { display: grid; gap: 6px; }
.goal-cranes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.goal-cranes li { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1.5px dashed var(--line-strong); }
.goal-cranes li.on { border-style: solid; border-color: var(--accent); }
.goal-cranes .crane { width: 26px; color: var(--muted); opacity: .55; }
.goal-cranes li.on .crane { color: var(--accent); opacity: 1; }
.goal-cranes li.on .crane-fill { fill: var(--accent); }
.goal-txt { margin: 0; font-weight: 600; color: var(--ink); }
.count .of-f { color: var(--muted); font-weight: 400; }

/* golf3b: met een overslaan-link blijft de terugknop rond en vult Volgende de kolom (ook bij meerdere sets). */
.p3-nav:has(.next-col) { align-items: start; }
.next-col { display: flex; align-items: stretch; }
.next-col .btn { width: 100%; }
.next-col .link-btn { align-self: center; padding: 8px 4px; }
@media (max-height: 700px) { .next-col .link-btn { padding: 2px 4px; } }
/* golf4d 8b: referentiefoto bij een aanvraag (waarschuwing, verplicht vinkje, voorbeeld, foto in het gesprek) */
.k8-foto { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 12px 0; background: var(--paper); } /* review 8dd591c: --card bestond niet; licht was dat #fff, nu --paper zoals in het donker (regel donker thema) */
.k8-foto h2.sub { margin: 0 0 6px; font-size: var(--fs-base); }
.k8-foto .k8-foto-warn { color: var(--danger); font-weight: 600; font-size: var(--fs-m); margin: 0 0 6px; }
.k8-foto .meta { margin: 0 0 6px; }
.k8-foto .chk { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 8px 0; cursor: pointer; font-weight: 600; }
.k8-foto .chk input { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.k8-foto .file-btn { min-height: 44px; display: inline-flex; align-items: center; }
.k8-prev { margin: 8px 0 0; }
.k8-prev img, .th-foto img { display: block; max-width: min(100%, 360px); max-height: 280px; border-radius: 8px; border: 1px solid var(--line); object-fit: contain; background: #fafafa; }
.k8-prev .btn { min-height: 44px; }
.msg-foto .th-foto { margin: 0; }
.msg-foto figcaption { margin-top: 4px; }

/* Review 2 (30/10): tekenteller bij notitie en uitleg, pas vanaf 80 % van de grens */
.tel { display: block; text-align: right; margin-top: 2px; }
.tel[hidden] { display: none; }
.tel.over { color: var(--danger); font-weight: 600; }
/* Review 3 (30/10): vraag bij afmelden als er nog niet-bewaard werk is */
.afm-vraag { border: 1px solid rgba(140,61,50,.4); border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
.afm-vraag .row { gap: 8px; flex-wrap: wrap; }
/* golf6 A12 (vlag agenda): Zet in mijn agenda */
.agenda-tip { margin: 22px 0 0; }
.agenda-tip .meta { margin: 6px 0 0; }
.p4 .agenda-tip .meta { color: inherit; opacity: .8; }
/* golf6 A14 (vlag snelkiezen): + altijd zichtbaar op de oefenkaarten */
.cat-ex.snel .card .pick { opacity: 1; }
.cat-ex.snel .card .pick input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; }
/* TV-22 (Eli 2/11): open getekend zoals het hartje; gekozen = vinkje in een groen vierkant; geen rand rond de tegel. */
.cat-ex.snel .card .pick .plus { width: 24px; height: 24px; box-sizing: border-box; display: grid; place-items: center; border: 0; color: var(--tegel-inkt); font-size: 0; line-height: 1; pointer-events: none; background: linear-gradient(currentColor, currentColor) center / 20px 1.6px no-repeat, linear-gradient(currentColor, currentColor) center / 1.6px 20px no-repeat; }
.cat-ex.snel .card.picked .pick .plus { border-radius: 6px; border: 1.6px solid var(--accent); background: var(--accent); color: #fff; font-weight: 700; font-size: 15px; }
.cat-ex.snel .card.picked .tile { outline: 0; }
.cat-ex.snel .card .pick input:focus-visible + .plus { outline: 2px solid var(--ink); outline-offset: 2px; }
/* golf6 A15 (vlag detailvogels): weekrij in de editor, alleen als de patiënt deelt */
.ed-week { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0 2px; }
.ed-week ol { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.ed-week li { display: grid; justify-items: center; gap: 2px; font-size: 12px; color: var(--muted); min-width: 26px; }
.ed-week li svg { width: 22px; height: 22px; }
.ed-week li.leeg svg { opacity: .18; }
/* B66 stap 2 (vlag demo_verborgen): "Bekijk hoe het werkt" */
.hoe { padding: 20px 0 10px; }
.hoe-stappen { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 40px; }
.hoe-stap { display: grid; gap: 16px; border-top: 1px solid var(--ink); padding-top: 18px; }
.hoe-stap .num { display: block; font-family: var(--serif); font-size: 1.8rem; color: var(--accent); }
.hoe-stap h2 { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; margin: 2px 0 6px; }
.hoe-stap p { color: var(--soft); margin: 0; max-width: 34em; }
.hoe-fig { margin: 0; }
.hoe-fig img { display: block; width: 100%; max-width: 340px; height: auto; border: 1px solid var(--line); border-radius: 14px; }
.hoe-cta { display: grid; gap: 10px; margin: 36px 0 10px; }
@media (min-width: 760px) { .hoe-stap { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; } .hoe-fig img { max-width: 100%; border-radius: 10px; } .hoe-cta { grid-template-columns: auto auto; justify-content: start; } }

/* 31/10 stap 3 en 4 (mockups v2 B, C1–C3): tabs onder Profiel, Account en abonnement (alleen lezen), Praktijk. Alleen kleuren uit de variabelen: werkt ook in het donkere thema. */
.prof-tabs { margin: 4px 0 18px; }
/* TV-40: tabs per kinesist boven de patiëntenlijst */
.tabs.pd-w { flex-wrap: wrap; margin: 0 0 10px; }
.tabs.pd-w .n { color: var(--muted); font-weight: 400; }
.pk-noot { margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--paper); }
.ab-plan, .ab-betalen, .ab-plannen, .pk-nieuw, .pk-uitn, .pk-kop { margin: 0 0 22px; }
.ab-plan { padding: 16px 18px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--paper); }
.ab-plan .ab-naam { font-size: 1.35rem; font-weight: 700; margin: 0 0 4px; }
.ab-plan .meta { margin: 2px 0; }
.ab-betalen { padding: 14px 18px; border: 1px dashed var(--line-strong); border-radius: 14px; }
.ab-rijen, .pk-leden { list-style: none; margin: 0 0 10px; padding: 0; }
.ab-rijen li, .pk-leden li { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ab-rijen li > span, .pk-leden li > span:first-child { display: flex; flex-direction: column; min-width: 0; flex: 1 1 180px; overflow-wrap: anywhere; }
.ab-betalen .btn:disabled, .ab-kaart .btn:disabled { opacity: 1; color: var(--muted); border-style: dashed; background: transparent; }
.ab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 0 0 10px; }
.ab-kaart { padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--paper); display: flex; flex-direction: column; gap: 4px; }
.ab-kaart.is-mijn { border: 2px solid var(--ink); }
.ab-kaart h3 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ab-kaart ul { margin: 6px 0; padding-left: 18px; font-size: .92rem; }
.ab-kaart .ab-prijs { margin: auto 0 6px; font-weight: 600; }
.ab-mijn { font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--ink); color: var(--bg); }
.pk-uitn { padding: 16px 18px; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); }
.pk-form.row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.pk-form.row .fld { flex: 1 1 220px; margin: 0; }
.pk-rol { font-size: var(--fs-sm); color: var(--muted); }
.pk-rollen { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.pk-rollen dt { font-weight: 600; } .pk-rollen dd { margin: 0; }
.pk-mail { margin: 10px 0; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--paper); }
.pk-mail p { margin: 0 0 8px; } .pk-mail p:last-child { margin: 0; }
.pk-verlaat { margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 480px) { .pk-rollen { grid-template-columns: 1fr; } .pk-rollen dd { margin-bottom: 6px; } }
.profile.prof-account { max-width: 940px; }

/* ---------- Stap 5 (31/10): sjablonen delen in de praktijk (vlaggen praktijk + praktijk_sjablonen) ---------- */
.tcard .pk-lab { align-self: flex-start; margin-top: 4px; }
.badge.pk-lab { border-color: var(--accent); color: var(--accent); }
.pk-t-acties { margin: 8px 0 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pk-t-noot { margin: 0 0 10px; }

/* ---------- Stap 6 (31/10): patiënten in de praktijk ---------- */
.pd-ban { padding: 12px 16px; margin: 0 0 12px; border: 1px solid var(--line-strong); border-left: 4px solid var(--ink); border-radius: 12px; background: var(--paper); }
.pd-ban p { margin: 0 0 6px; } .pd-ban p:last-child { margin-bottom: 0; }
.pd-lab { color: var(--muted, inherit); font-size: var(--fs-sm); }
.pd-noot, .pd-ed-noot { margin: 12px 0; }
.pd-form { display: grid; gap: 14px; max-width: 560px; }
.pd-form fieldset { border: 1px solid var(--line-strong); border-radius: 12px; padding: 10px 14px; margin: 0; display: grid; gap: 8px; }
.pd-form legend { padding: 0 6px; font-weight: 600; }
.pd-form .chk { display: flex; gap: 8px; align-items: flex-start; min-height: 32px; }
.pd-data { gap: 12px; flex-wrap: wrap; }
.pd-zeker { padding: 10px 14px; border-radius: 10px; border: 2px solid var(--ink); }
.pk-afw .btn { margin-top: 4px; }

/* ---------- Stap 7 (030): logboek per patiënt, verdelen ---------- */
.pd-log { margin: .5rem 0 .75rem; }
.pd-log summary { cursor: pointer; font-weight: 600; }
.pd-log ul { list-style: none; padding: 0; margin: .25rem 0 0; }
.pd-log li { padding: .2rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.pd-eig-hint { margin-top: .25rem; }
.pk-vd { margin-top: 1rem; }

/* ---------- Stap 8 (031): weggaan met akkoord van de eigenaar ---------- */
.pk-vt-form fieldset { border: 0; padding: 0; margin: 0 0 .5rem; }
.pk-vt-form .chk, .pk-vt-a .chk { display: flex; gap: .5rem; align-items: center; padding: .2rem 0; overflow-wrap: anywhere; }
.pk-vt-form textarea { width: 100%; }
.pk-vt-a { border-top: 1px solid var(--line); padding-top: .5rem; margin-top: .5rem; }
.pk-vt-a blockquote { margin: .25rem 0 .5rem; font-style: italic; overflow-wrap: anywhere; }

/* ---------- Stap 9 (032): Student ---------- */
.stu-noot { overflow-wrap: anywhere; }

/* Backlog 'naam afgekapt op 390 px' (1/11): op de gsm scrolt de menurij en viel de voornaam buiten beeld. Onder 640 px blijft de
   naam rechts vastgepind in de rij (sticky binnen de scrollende nav; .k-right telt dan niet als eigen doos), lange namen krijgen
   een ellips; de volledige naam staat in title en blijft de toegankelijke naam (tekstinhoud). Pc ongewijzigd. Licht en donker via var(--bg). */
@media (max-width: 639px) {
  .k-nav .k-right { display: contents; }
  .k-nav .k-right a.who { position: sticky; right: 0; z-index: 1; flex: 0 0 auto; display: block; max-width: 6em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: calc(var(--tap) - 2px); margin-left: auto; background: var(--bg); box-shadow: -14px 0 8px -2px var(--bg); }
}
/* B8 (vlag speler_materiaal, UIT): regel "Nodig: …" onder de naam in de speler. */
.gear-line { margin: 0 0 6px; color: var(--ink); font-weight: 600; font-size: .95rem; }
@media (max-height: 700px) { .gear-line { font-size: var(--fs-sm); margin: 0 0 2px; } }
/* r19 (vlag dosis_gewoon, UIT; R19-004): dosis op een eigen regel onder de naam; het vinkje blijft rechts. */
.today-row.dose2 .tr-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.today-row.dose2 .tr-name { flex: none; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.today-row.dose2 .tr-dose { white-space: normal; line-height: 1.35; }
.today-row.dose2 .state-dot { flex: 0 0 auto; }
.set-col .rest-line { font-size: var(--fs-m); line-height: 1.3; color: var(--ink); text-align: left; max-width: 11.5em; }
/* r19 (vlag deel_uitleg, UIT; R19-036): demowaarschuwing vóór de deelknoppen, goed leesbaar. */
.demo-note.demo-warn { font-size: .92rem; color: var(--ink); border-left: 3px solid var(--line-strong); border-radius: 4px 8px 8px 4px; padding: 8px 12px; margin: 0 0 12px; }
/* r19 PAT-02 (bugfix zonder gedragswijziging, geen vlag): op korte schermen (≤ 880 px hoog) blijven de set-rondjes boven Volgende.
   Het getal en de rondjes staan naast elkaar, de uitleg eronder over de volle breedte; het beeld mag kleiner worden. Hogere schermen: ongewijzigd. */
@media (max-height: 880px) {
  .p3 .sets-box:not(.timed) { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "num sets" "unit unit"; align-items: center; gap: 4px 16px; padding: 6px 0 4px; }
  .p3 .sets-box:not(.timed) .dose-big { display: contents; }
  .p3 .sets-box:not(.timed) .dose-num { grid-area: num; font-size: 3rem; }
  .p3 .sets-box:not(.timed) .dose-unit { grid-area: unit; font-size: .92rem; line-height: 1.35; }
  .p3 .sets-box:not(.timed) .set-col { grid-area: sets; justify-self: end; }
  .p3 .sets-box.timed { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 16px; padding: 6px 0 4px; }
  .p3 .sets-box.timed .set-col { justify-self: end; }
  .p3 .stage, .p3 .stage.wide { min-height: 160px; flex-basis: 0; }
  .p3 .pos-line { margin: 0; }
  .p3-nav { padding-top: 8px; }
}
@media (max-height: 650px) { .p3 .stage, .p3 .stage.wide { min-height: 84px; } }
/* dosis_gewoon AAN met rustregel: de langere woorden krijgen voorrang op de figuur (alleen op korte schermen) */
@media (max-height: 880px) { .p3:has([data-rust]) .stage, .p3:has([data-rust]) .stage.wide { min-height: 84px; } }
/* r19 PAT-01 (bugfix zonder gedragswijziging, geen vlag): een lange dosisregel (houdtijd + telwijze) breekt af in plaats van het vinkje
   rechts uit het scherm te duwen. Past de regel, dan verandert er niets. */
.today-row:not(.dose2) .tr-dose { white-space: normal; text-align: right; }
.today-row .state-dot { flex: 0 0 auto; }
/* TV-31: zes delen in Support, duidelijk van elkaar gescheiden */
.faq .faq-h { margin-top: 28px; }
.faq .faq-h > h2.sub { font-size: var(--fs-l); margin: 0 0 4px; padding: 0 0 8px; border-bottom: 2px solid var(--ink); }
/* Designwerkstuk S1 (3/11, vlag vorm, UIT): onder 640 px de kop in twee regels. Regel 1: kraanvogel links, Feedback · Support · voornaam
   rechts. Regel 2: Patiënten · Sjablonen · Oefeningen · Berichten over de volle breedte. Niets scrolt opzij; de voornaam is niet meer
   sticky (ellips na 7em, volledige naam in title). Op de pc blijft .k-tabs onzichtbaar als doos: de kop is daar dezelfde. */
.kop2 .k-tabs { display: contents; }
@media (max-width: 639px) {
  .kop2 .k-bar { flex-wrap: wrap; gap: 0 16px; }
  .kop2 .k-nav { display: contents; }
  .kop2 .k-nav .k-right { display: flex; order: 1; margin-left: auto; padding-left: 0; gap: 16px; min-width: 0; }
  .kop2 .k-nav .k-right a.who { position: static; box-shadow: none; background: none; max-width: 7em; margin-left: 0; }
  .kop2 .k-tabs { display: flex; order: 2; flex-basis: 100%; justify-content: space-between; gap: 0 4px; } /* review 8dd591c: 4 px minimum (space-between verdeelt de rest), zodat NL op 360 px past */
  .kop2 .k-tabs a { font-size: var(--fs-m); }
}
@media (max-width: 359px) { .kop2 .k-tabs a { font-size: .76rem; } }
/* Review build 8dd591c (punt 1): onder 360 px ook regel 1 op .76rem (zoals de mockup); met de 4 px tussen de tabs eindigt het
   nieuwsbolletje binnen de rand (≤ 300 px op 320, ≤ 340 px op 360). */
@media (max-width: 359px) { .kop2 .k-nav .k-right a { font-size: .76rem; } }
/* Review build 8dd591c (d, vlag vorm): tussen 640 en 899 px viel Feedback · Support · voornaam buiten beeld (de nav scrolde opzij).
   Met vorm ook daar twee regels: kraanvogel + Senzuru en rechts Feedback · Support · voornaam, eronder de tabs links uitgelijnd. */
@media (min-width: 640px) and (max-width: 899px) {
  .kop2 .k-bar { flex-wrap: wrap; }
  .kop2 .k-nav { display: contents; }
  .kop2 .k-nav .k-right { order: 1; margin-left: auto; padding-left: 0; }
  .kop2 .k-tabs { display: flex; order: 2; flex-basis: 100%; gap: 0 18px; }
}

/* Designwerkstuk S1 (vlag vorm): link naar Feedback rechts van de titel in Berichten, 44 px hoog. */
.k-title-link { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; } /* past hij niet naast de titel, dan op de regel eronder (.k-title wrapt); focusrand: de algemene :focus-visible (2 px --accent) */
.k-title:has(> .k-title-link) { flex-wrap: wrap; } /* de gsm-regel zet .k-title op nowrap */

/* Ronde 3 B3 (3/11): "wijzig" naast de praktijknaam in Inter, zoals andere linkknoppen (niet in de kopletter). */
.sub .link-btn.small.pk-wijzig { font: 400 var(--fs-s) var(--sans); }
/* Ronde 3 B6 (3/11): Support › Aan de slag oogt als de andere hoofdstukken (zie .faq .faq-h): kop met lijn eronder, gewone vraagrijen. */
.faq .g-sup { margin-top: 28px; }
.faq .g-sup > h2.sub { font-size: var(--fs-l); margin: 0 0 4px; padding: 0 0 8px; border-bottom: 2px solid var(--ink); }
/* Ronde 3 I (iPhone, 3/11): op de gsm iets meer ruimte boven de kop, onder de statusbalk (W3; 8 px is een schatting, Eli kijkt na). */
@media (max-width: 639px) { .k-top { padding-top: max(8px, env(safe-area-inset-top)); } }
/* Ronde 3 I: geen witte vlakken rond figuren (multiply met transform op iOS): eigen stapelcontext voor de kaartband en de tegels. */
.band-wrap, .tile, .lib-grid .card, .thumb { isolation: isolate; }
/* 4/11 (Eli, iPhone, §12): toch witte vlakken in de strook van de patiëntkaart (licht thema, band scrollt). De webp's zijn ondoorzichtig wit en leunen op multiply;
   in een scrollcontainer (.band, overflow-x) met de vervaging erover blendt iOS Safari niet met wat erachter ligt. Elke figuur blendt nu binnen haar eigen
   tegelkleurige vak (zoals donker al met --img-tile), dus onafhankelijk van de scrolllaag. */
.fig-i, .today-row .fig, .group .fig, .st-tile, .fs-fig { isolation: isolate; }
.fig-i, .today-row .fig, .group .fig, .fs-fig { background: var(--tile); }
/* Ronde 3 U (S7): uitlegblok "Goed om weten": groene lijn links, ✕ rechtsboven; op de computer op één regel als het past. */
.g-uitleg { border-left: 3px solid var(--accent); padding-right: 52px; }
.g-uitleg .g-r { margin: 2px 0 0; }
/* Controle Designer (f9d7432): ook op de computer de kop boven de tekst; 'Meer ›' breekt niet los van het laatste woord. */
.g-uitleg .g-a { white-space: nowrap; }
/* Controle Designer: 'Uitleg tonen' = de gewone schakelaar (.switch, tikvlak 44 px), label vet, uitleg ernaast (op de gsm eronder). */
.g-uitleg-sw { margin: 4px 0 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
.g-uitleg-sw .switch { position: relative; flex: none; }
.g-uitleg-sw .meta { margin: 0; flex: 1 1 240px; }
/* Controle Designer: vinkrijen bij 'Patiënten verplaatsen' met een tikvlak van 44 px. */
.vp-lijst .opt { display: flex; align-items: center; gap: 10px; min-height: var(--tap); cursor: pointer; }
.vp-lijst .opt input { margin: 0; flex: none; }
/* Ronde 3 L (vlag ronde3): bron van een sjabloon; het vogeltje 14 px hoog in --accent (draait mee in het donker), 4 px voor het woord. De bron breekt niet. */
.t-bron { white-space: nowrap; }
.t-bron .crane.mini { width: 21px; height: 14px; color: var(--accent); margin-right: 4px; vertical-align: -2px; }

/* Ronde 3 C E5 (vlag ronde3): twee timers naast elkaar, Links en Rechts */
.timer-twee { display: flex; gap: 14px; justify-content: center; }
.t-kant { font-size: .78rem; font-weight: 600; color: var(--ink); }
.timer.af .t-num { color: var(--accent); }
/* ---------- Ronde 3 K (spec-tsuru-deel2, vlag detailvogels): kraanvogelrij bij de kinesist ----------
   Alles hangt aan .krv (de lijst, alleen met de vlag) of .kr-ed (editor) of .krij/.kr-uit (alleen met de vlag in de DOM).
   Vlag UIT: geen enkele regel hieronder raakt iets (de tokens worden nergens anders gebruikt). */
:root { --kr-zacht: #B5AEA3; --kr-schijf: #D3CDC3; --kr-half: rgba(36,71,59,.38); --kr-lbl-zacht: #8A8378; --kr-s: 20px; --kr-gap: 1px; }
@media (min-width: 700px) { :root { --kr-s: 22px; --kr-gap: 3px; } }
@media (min-width: 1100px) { :root { --kr-s: 26px; --kr-gap: 4px; } }
.krij { display: block; margin: 0; }
.krij > summary { list-style: none; display: flex; align-items: center; justify-content: flex-end; min-height: 44px; cursor: pointer; border-radius: 10px; }
.krij > summary::-webkit-details-marker { display: none; }
.krij > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kr-vogels { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: flex-end; gap: var(--kr-gap); }
.kr-vogels > li { position: relative; width: var(--kr-s); height: var(--kr-s); flex: none; }
.kr-vogels > li.vandaag { margin-left: calc(var(--kr-gap) + 5px); }
.kr-vogels > li.vandaag::before { content: ""; position: absolute; left: calc(-1 * var(--kr-gap) / 2 - 3px); top: -4px; bottom: -4px; width: 1px; background: var(--line-strong); }
.kv { width: 100%; height: 100%; display: block; overflow: visible; }
.kv .lijf { fill: none; stroke: var(--accent); stroke-width: 1.5px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.kv .schijf { fill: var(--kr-schijf); }
.kv.st-leeg .lijf, .kv.st-open .lijf { stroke: var(--kr-zacht); stroke-dasharray: 2.5 2; }
.kv.st-gemist .lijf, .kv.st-gepland .lijf { stroke-dasharray: 2.5 2; }
.kv.st-goed .lijf, .kv.st-gedaan .lijf, .kv.st-zwaar .lijf { fill: var(--accent); }
.kv.st-nietaf .lijf, .kv.st-nietaf-licht .lijf, .kv.st-nietaf-zwaar .lijf { stroke-dasharray: 2.5 2; fill: var(--kr-half); }
/* Uitklap: twee lijsten (voorbij | vandaag en later), per dag datum · vogel · label */
.kr-uit { margin: 4px 0 8px; padding: 8px 12px; background: var(--tile); border-radius: 10px; font-size: var(--fs-sm); text-align: left; }
.kr-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.kr-lijst.nu:not(.eerst) { border-top: 1px solid var(--line-strong); margin-top: -1px; }
.kr-lijst li { padding: 2px 0; display: grid; grid-template-columns: 5.4em 18px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 26px; }
.kr-lijst .kr-d { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kr-lijst .kv { width: 18px; height: 18px; }
.kr-lijst .t-zacht .kr-l { color: var(--kr-lbl-zacht); font-size: var(--fs-s); }
.kr-lijst .t-rustig .kr-l { color: var(--soft); }
.kr-lijst .t-afw .kr-l { color: var(--ink); font-weight: 600; }
.kr-lijst li.vd .kr-d { color: var(--ink); font-weight: 600; }
.kr-los { display: none; }
/* Kaart, gsm (< 700 px): naam links, regio rechts op de naamregel (zakt mee als het niet past), rij eronder rechts */
.krv .pc-who { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
.krv .pc-who > .pc-name { flex: 0 1 auto; min-width: 0; }
.krv .pname { overflow-wrap: anywhere; }
.krv .pc-who > .meta { flex: 0 1 auto; margin-left: auto; max-width: 100%; min-width: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.krv .pc-who > .meta.geen { color: var(--kr-lbl-zacht); }
.krv .pc-who > .pd-lab { flex: 1 0 100%; display: block; line-height: 1.35; font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 699px) {
  .krv .pc-row { grid-template-columns: minmax(0, 1fr); }
  .krv .pc-row > .krij { margin-top: -2px; }
  .krv .pc-todo { border-top: 1px solid var(--line); padding-top: 6px; flex-wrap: wrap; }
}
@media (min-width: 700px) {
  .kr-lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
  .krv .pc-who { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .krv .pc-who > .meta { margin-left: 0; text-align: left; white-space: normal; overflow: visible; }
  .krv .pc-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "who who" "kr todo"; column-gap: 0; row-gap: 4px; align-items: center; }
  .krv .pc-row > .pc-who { grid-area: who; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
  .krv:not(.kr-fb) .pc-row > .krij { display: contents; }
  .krv .pc-row > .krij > summary { grid-area: kr; justify-content: flex-start; padding: 0 20px 0 0; }
  .krv.kr-fb .pc-row > .krij { grid-area: kr; }
  .krv .pc-row > .pc-todo { grid-area: todo; align-items: center; border-top: 0; padding-top: 0; justify-content: flex-end; min-width: 0; flex-wrap: nowrap; }
  .krv .pc-row > .pc-todo .pc-st { flex: 1 1 auto; justify-content: flex-end; text-align: right; }
  .krv .pc-row > .pc-todo .status { flex: 0 1 auto; white-space: normal; } /* beslissing 2 (Eli 3/11): alleen onder de vlag */
  .krv .pc-row > .pc-todo .row-btns { margin-left: 0; flex: none; }
  .krv .pc-row > .krij::details-content { grid-column: 1 / -1; }
  /* Fallback zonder ::details-content (beslissing 3): de uitklap in de details blijft verborgen, het losse blok onder de rij toont hem. */
  .krv.kr-fb .pc-row > .krij > .kr-uit { display: none; }
  .krv.kr-fb .pcard.kr-open > .kr-los { display: block; margin: 4px 6px 8px; }
}
@media (min-width: 1100px) {
  /* Controle Designer op ec3dc77: tussenruimte 10 px (was 28) → naamkolom 282 px op 1280/1440 (spec ±280); de rij schuift 18 px naar rechts, in elke kaart even ver.
     De regio-regel blijft op één regel (… en de volledige tekst in title, zoals op de gsm), zodat elke kaart 199 px blijft. */
  .krv .pc-row { grid-template-columns: minmax(0, 1fr) auto 19rem; grid-template-areas: "who kr todo"; column-gap: 10px; row-gap: 0; }
  .krv .pc-row > .pc-who { border-bottom: 0; padding-bottom: 0; }
  .krv .pc-who > .meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .krv .pc-row > .krij > summary { padding: 0; }
}
/* Editor: dezelfde rij en uitklap, rechts uitgelijnd (vervangt .ed-week) */
.kr-ed { margin: 6px 0 2px; }
.kr-ed .krij > summary { justify-content: flex-end; }

/* support2 (4/11, vlag support2, standaard UIT): de nieuwe Support (demo/support2.js). Alleen onder .faq.s2; de oude Support verandert niet. */
.faq.s2 .s2-lead { color: var(--soft); margin: 4px 0 12px; }
.faq.s2 .s2-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 4px; font-weight: 600; }
.faq.s2 .s2-demo { border-left: 3px solid var(--line); padding: 8px 12px; margin: 16px 0; color: var(--soft); font-size: var(--fs-sm); }
.faq.s2 .s2-demo ol { margin: 6px 0; padding-left: 20px; }
.faq.s2 .s2-sec { margin-top: 28px; }
.faq.s2 .s2-sec > h2.sub { font-size: var(--fs-l); margin: 0 0 4px; padding: 0 0 8px; border-bottom: 2px solid var(--ink); }
.faq.s2 .s2-n { color: var(--soft); margin-right: 4px; }
.faq.s2 .s2-det .g-body { padding: 0 0 12px; }
.faq.s2 .s2-det .g-body p, .faq.s2 .s2-det .g-body li, .faq.s2 .s2-det > p { color: var(--soft); }
.faq.s2 .s2-k { font-size: var(--fs-base); margin: 14px 0 4px; }
.faq.s2 .s2-l { margin: 4px 0; padding-left: 20px; }
.faq.s2 .s2-l li { margin: 4px 0; }
.faq.s2 .s2-tw { overflow-x: auto; }
.faq.s2 .s2-t { border-collapse: collapse; font-size: var(--fs-sm); margin: 6px 0; }
.faq.s2 .s2-t th, .faq.s2 .s2-t td { text-align: left; vertical-align: top; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); }
.faq.s2 details[id], .faq.s2 [data-plek] { scroll-margin-top: 16px; }
/* 4/11: een oud anker (faq-id) wijst naar een rij of tabel in een onderwerp; die licht even op (zoals een bewaarde rij op Patiënten) en vervaagt. */
.faq.s2 [data-plek]:focus { outline: none; }
.faq.s2 .s2-plek { background: var(--paper); border-radius: 8px; padding: 4px 8px; animation: s2plek 1.2s ease-out 2.5s forwards; }
@keyframes s2plek { to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .faq.s2 .s2-plek { animation: none; } }
.faq.s2 .s2-intro { color: var(--soft); margin: 8px 0 4px; }
.profile .uitleg-box { margin-top: 24px; }

/* ---------- deel 3 (vlag ronde3b, testfeedback 4/11) ---------- */
/* Punt 1: plus en hartje in Oefeningen even groot (≈ 16 px), lijn 1,6 px, rustige kleur zoals de ster; tikvlak blijft 44 px. */
:root[data-r3b] .cat-ex.snel .card .pick .plus { width: 20px; height: 20px; color: var(--muted); background: linear-gradient(currentColor, currentColor) center / 13px 1.6px no-repeat, linear-gradient(currentColor, currentColor) center / 1.6px 13px no-repeat; }
:root[data-r3b] .cat-ex.snel .card.picked .pick .plus { color: #fff; background: var(--accent); }
:root[data-r3b] .card > .heart:not([aria-pressed="true"]) svg { stroke: var(--muted); }
/* Punt 2: hartje van een sjabloon rechtsboven op de figurenstrook; "+n" blijft vrij. */
:root[data-r3b] .tcard > .heart { position: absolute; right: 0; top: 0; width: 44px; height: 44px; margin: 0; z-index: 2; }
:root[data-r3b] .tcard .fig-strip { padding-right: 44px; }
/* Punt 4: "Alles selecteren" boven de vinkjes, gescheiden door een dunne lijn. */
.vp-lijst .vp-alles { border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.vp-van-vast { margin: 0 0 8px; }
.pk-vp { margin-top: 12px; }

/* ===== Welkompagina met video (4/11, claude-welkompagina) ===== */
.w2-nav { gap: 0 16px; }
.w2-nav a:not(.btn) { color: var(--soft); }
.w2-hero { max-width: 780px; margin: 0 auto; text-align: center; padding: 28px 0 8px; }
.w2-hero .lead { max-width: 640px; margin: 14px auto 0; }
.w2-knoppen { display: grid; gap: 10px; margin: 22px 0 6px; }
@media (min-width: 640px) { .w2-knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } }
.w2-film { margin: 26px 0 0; }
.w2-video-wrap { position: relative; border-radius: 20px; overflow: hidden; background: var(--bg); box-shadow: 0 1px 0 var(--line), 0 18px 50px rgba(60,45,20,.12); border: 1px solid var(--line); }
.w2-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; cursor: pointer; background: var(--bg); }
.w2-speel { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: rgba(251,250,247,.92); color: var(--ink); font: 600 var(--fs-m) var(--sans); cursor: pointer; }
.w2-speel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.w2-ico { width: 14px; height: 14px; position: relative; }
.w2-ico::before { content: ""; position: absolute; left: 2px; top: 0; border-left: 12px solid var(--accent); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.w2-speel.speelt .w2-ico::before { left: 1px; width: 4px; height: 14px; border: 0; background: var(--accent); box-shadow: 7px 0 0 var(--accent); }
.w2-stappen { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .w2-stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .w2-stappen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.w2-stap { width: 100%; height: 100%; text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line);
  background: transparent; color: var(--ink); font: inherit; cursor: pointer; transition: background .25s, border-color .25s; }
.w2-stap:hover { background: var(--paper); }
.w2-stap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.w2-stap.nu { background: var(--paper); border-color: var(--accent); }
.w2-tijd { grid-row: span 2; font: 500 var(--fs-sm) var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 2px; }
.w2-stap.nu .w2-tijd { color: var(--accent); }
.w2-stap strong { font-family: var(--serif); font-weight: 500; font-size: 1.08rem; }
.w2-u { color: var(--soft); font-size: var(--fs-m); }
.w2-sectie { border-top: 1px solid var(--ink); padding-top: 18px; margin-top: 46px; }
.w2-h2 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-xxl); margin: 0 0 12px; line-height: 1.15; }
.w2-drie-l { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 20px; }
.w2-drie-l li { display: grid; gap: 4px; }
.w2-drie-l .num { font-family: var(--serif); font-size: 1.8rem; color: var(--accent); line-height: 1; }
.w2-drie-l strong { font-family: var(--serif); font-weight: 500; font-size: var(--fs-l); }
.w2-drie-l span:not(.num) { color: var(--soft); }
@media (min-width: 900px) { .w2-drie-l { grid-template-columns: repeat(3, 1fr); gap: 30px; } }
.w2-kraan { display: grid; gap: 22px; align-items: start; }
.w2-kraan p { color: var(--soft); margin: 0 0 12px; }
.w2-zacht { font-size: var(--fs-m); color: var(--muted) !important; }
.w2-kaart { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 10px; }
.w2-band { display: flex; gap: 6px; background: var(--tile); border-radius: 12px; padding: 8px 10px 6px; overflow: hidden; }
.w2-fig { display: grid; justify-items: center; gap: 2px; font-size: var(--fs-xs); color: var(--muted); flex: 0 1 80px; min-width: 0; }
.w2-fig img { width: 100%; max-width: 80px; height: auto; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
.w2-kaart-rij { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 14px; padding: 10px 6px 4px; }
.w2-kaart-rij > div { display: grid; }
.w2-kaart-rij .meta { color: var(--muted); font-size: var(--fs-sm); }
.w2-kaart .kr-vogels { --kr-s: 20px; --kr-gap: 2px; }
.w2-legende { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: var(--fs-sm); color: var(--soft); }
.w2-legende li { display: inline-flex; align-items: center; gap: 6px; }
.w2-legende .kv { width: 24px; height: 24px; }
@media (min-width: 900px) { .w2-kraan { grid-template-columns: 1fr 1.1fr; column-gap: 40px; } .w2-legende { grid-column: 2; } }
.w2-figuren { display: flex; gap: 4px; background: var(--tile); border-radius: 14px; padding: 8px 12px; margin: 4px 0 20px; overflow: hidden; }
.w2-figuren img { flex: 1 1 0; min-width: 0; max-width: 96px; height: auto; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
.w2-slot { margin-top: 50px; background: var(--accent); color: var(--vast-licht); border-radius: 22px; padding: 30px 22px; text-align: center; }
.w2-slot .w2-h2 { color: var(--vast-licht); }
.w2-slot p { color: rgba(244,241,235,.85); max-width: 560px; margin: 0 auto; }
.w2-slot .w2-omlijnd { background: transparent; color: var(--vast-licht); border-color: rgba(244,241,235,.6); }
.w2-meer { margin-top: 14px !important; font-size: var(--fs-m); }
.w2-meer a { color: var(--vast-licht); }
.w2 > .w-note { text-align: center; margin-top: 18px; }
@media (min-width: 900px) { .w2-hero .display { font-size: 3.8rem; } .w2-slot { padding: 44px 30px; } }
.w-top:has(.w2-nav) { flex-wrap: nowrap; }
.w2-nav { flex-wrap: nowrap; white-space: nowrap; }
.w2-kaart .kr-vogels { justify-content: flex-start; }
@media (max-width: 639px) { .w2-speel { left: 8px; bottom: 8px; padding: 0; width: var(--tap); justify-content: center; } .w2-speel-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .w2-ico { margin-left: 2px; } }
.w2-kraan { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 399px) { .w2-kaart .kr-vogels { --kr-s: 16px; --kr-gap: 1px; } .w2-kaart { padding: 8px; } }
@media (max-width: 359px) { .w-top:has(.w2-nav) { flex-wrap: wrap; } .w2-nav { gap: 0 12px; } }
@media (min-width: 900px) { .w2-kraan { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.w-top:has(.w2-nav) .logo { flex-shrink: 0; }
@media (max-width: 639px) { .w2-hero .display { font-size: 2.2rem; } }
@media (max-width: 419px) { .w-top:has(.w2-nav) { gap: 4px 10px; } .w2-nav { gap: 0 10px; } .w2-nav a:not(.btn) { font-size: var(--fs-sm); } .w2-nav .btn.small { padding-left: 12px; padding-right: 12px; } }
@media (max-width: 379px) { .w-top:has(.w2-nav) { flex-wrap: wrap; } }
/* 5/11: knop Volledig scherm (rechtsonder in de video) */
.w2-vol { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: rgba(251,250,247,.92); color: var(--ink); font: 600 var(--fs-m) var(--sans); cursor: pointer; }
.w2-vol[hidden] { display: none; }
.w2-vol:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.w2-vol-ico { width: 16px; height: 16px; position: relative; flex: 0 0 auto;
  background: linear-gradient(var(--accent),var(--accent)) 0 0/6px 2px, linear-gradient(var(--accent),var(--accent)) 0 0/2px 6px,
    linear-gradient(var(--accent),var(--accent)) 100% 0/6px 2px, linear-gradient(var(--accent),var(--accent)) 100% 0/2px 6px,
    linear-gradient(var(--accent),var(--accent)) 0 100%/6px 2px, linear-gradient(var(--accent),var(--accent)) 0 100%/2px 6px,
    linear-gradient(var(--accent),var(--accent)) 100% 100%/6px 2px, linear-gradient(var(--accent),var(--accent)) 100% 100%/2px 6px; background-repeat: no-repeat; }
.w2-video:fullscreen { object-fit: contain; background: #F4F1EB; }
@media (max-width: 639px) { .w2-vol { right: 8px; bottom: 8px; padding: 0; width: var(--tap); justify-content: center; } .w2-vol-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
/* 5/11: uitleg onder Aanmelden */
.auth-uitleg { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line); }
.auth-uitleg h2 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-l); margin: 0 0 10px; }
.auth-uitleg ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; color: var(--soft); font-size: var(--fs-m); line-height: 1.5; }
.auth-uitleg strong { color: var(--ink); font-weight: 600; }
/* 5/11: zin voor de kinesist op het eindscherm van het websitevoorbeeld; bewust anders dan de speler (papier, stippelrand, label) */
.kine-noot { margin: 30px 0 0; padding: 14px 16px 16px; background: var(--paper); color: var(--ink); border-radius: 14px; text-align: left;
  outline: 2px dashed rgba(244,241,235,.65); outline-offset: 5px; }
.kine-noot p { margin: 0; color: var(--soft); font-size: var(--fs-m); line-height: 1.5; }
.kine-noot .kine-noot-l { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font: 600 var(--fs-xs) var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.kine-noot .kine-noot-l .crane { width: 22px; color: var(--accent); }
/* 5/11: deelkeuze als kaart (welkom en Opties) */
.deel-kaart { margin: 18px 0 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 16px 16px 14px; }
.deel-t { font: 600 1.05rem var(--sans); margin: 0 0 6px; }
.deel-u { color: var(--soft); margin: 0 0 12px; line-height: 1.5; }
.deel-knoppen { display: grid; gap: 10px; }
.deel-knoppen .btn { width: 100%; min-height: 50px; font-size: var(--fs-base); }
.deel-nee { background: transparent; border: 1.5px solid var(--line-strong); color: var(--ink); }
.deel-m { color: var(--muted); font-size: var(--fs-sm); margin: 10px 0 0; line-height: 1.45; }
.deel-tg { display: inline-flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 0; border: 0; background: none; color: var(--ink); font: 600 1rem var(--sans); cursor: pointer; }
.deel-tg:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 999px; }
.deel-sw { width: 54px; height: 32px; border-radius: 999px; background: #CFC8BC; position: relative; transition: background .2s; flex: 0 0 auto; }
.deel-sw > span { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.deel-tg[aria-checked="true"] .deel-sw { background: var(--accent); }
.deel-tg[aria-checked="true"] .deel-sw > span { transform: translateX(22px); }
.deel-tg[aria-checked="true"] .deel-st { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .deel-sw, .deel-sw > span { transition: none; } }
.p1 .deel-kaart { margin-top: 4px; }
@media (max-height: 720px) { .p1:not(.p1-set) .w-fig { display: none; } .p1:not(.p1-set) .p1-body h1 { margin-top: 4px; } .p1 .deel-knoppen .btn { min-height: 46px; } }
@media (max-height: 720px) { .p1:not(.p1-set) .w-lang { margin: 12px 0 14px; } .p1:not(.p1-set) .p1-body .lead { margin-bottom: 0; } }


/* ===== Afdruk 7/11 (Eli, prototype demo/afdruk-prototype): raster van 2 kolommen, geen kraanvogels, QR-code (≈ 32 mm) rechtsboven ===== */
.p6 .pr-page { padding: 44px 60px 40px; }
.p6 .pr-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; border-bottom: 1.5px solid #1D1B18; padding-bottom: 14px; margin-bottom: 0; }
.p6 .pr-head-txt { min-width: 0; }
.p6 .pr-logo { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 600; font-size: 15px; }
.p6 .pr-logo .crane { width: 34px; }
.p6 .pr-head h1 { font-size: 38px; line-height: 1.05; margin: 0 0 8px; }
.p6 .pr-meta { margin: 0; display: flex; flex-direction: column; color: #4A4640; }
.p6 .pr-freq { font-size: 17px; font-weight: 600; color: #1D1B18; }
.p6 .pr-dates { font-size: 14px; margin-top: 2px; }
.p6 .pr-qr { width: 168px; flex: none; margin: 0; text-align: center; } /* QR 121 px ≈ 32 mm: 1/10 van de leesafstand voor een code van 41 × 41 modules */
.p6 .pr-qr svg { width: 121px; height: 121px; margin: 0 auto; display: block; }
.p6 .pr-qr figcaption { font-size: 11.5px; line-height: 1.3; color: #4A4640; margin-top: 6px; }
/* notitie: één accent, een groen lijntje links en een heel lichte tint */
.p6 .pr-note { max-width: none !important; margin: 16px 0 0 !important; padding: 10px 16px !important; background: #F4F1EB !important; border: 0 !important; border-left: 3px solid #24473B !important; border-radius: 0; }
.p6 .pr-note .label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #6E685F; margin: 0 0 4px; }
.p6 .pr-note blockquote { font-family: var(--serif); font-style: normal; font-size: 16.5px; line-height: 1.4; margin: 0; }
.p6 .pr-note .sign { margin: 4px 0 0; font-family: var(--sans); font-size: 12.5px; font-style: normal; color: #4A4640; }
/* raster: wit scheidt de oefeningen, geen lijnen */
.p6 .pr-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 36px; margin-top: 6px; }
.p6 .pr-sec { grid-column: 1 / -1; margin: 14px 0 0; }
.p6 .pr-row { display: block; padding: 16px 0 14px; border-bottom: 0; break-inside: avoid; }
.p6 .pr-hd { display: flex; gap: 10px; align-items: baseline; }
.p6 .pr-nr { font-size: 13px; font-weight: 600; color: #6E685F; min-width: 14px; }
.p6 .pr-hd h3 { margin: 0; font-weight: 400; }
.p6 .pr-name { display: block; font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.2; }
.p6 .pr-dose { display: block; font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: #1D1B18; margin: 2px 0 0; }
.p6 .pr-imgs { display: flex; gap: 14px; align-items: flex-end; height: 88px; margin: 8px 0 6px 24px; }
.p6 .pr-imgs img { height: 88px; width: 96px; object-fit: contain; object-position: center bottom; }
.p6 .pr-text p { margin: 0 0 0 24px; font-size: 14px; line-height: 1.42; max-width: none; }
/* voet */
.p6 .pr-foot { position: absolute; left: 60px; right: 60px; bottom: 32px; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-top: 9px; border-top: 0.75pt solid #B8B1A5; font-size: 11.5px; color: #4A4640; margin: 0; }
.p6 .pr-foot .p-disc { margin: 0; font-size: 11.5px; }
.p6 .pr-foot .pr-pg { margin: 0; white-space: nowrap; font-weight: 500; }
/* blad 2: lopende kop, voet onder de oefeningen */
.p6 .pr-page2 { height: auto; min-height: 1123px; }
.p6 .pr-page2 .pr-foot { position: static; margin-top: 24px; }
.p6 .pr-cont { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding-bottom: 10px; border-bottom: 1px solid #B8B1A5; font-size: 12.5px; color: #4A4640; }
.p6 .pr-cont .crane { width: 26px; }

/* ===== Gsm-kader (Eli 8/11): de patiëntkant in een gsm op een breed scherm (demo/gsmkader.js) ===== */
html.gk-open { overflow: hidden; }
.gk { --gk-s: 1; position: fixed; inset: 0; z-index: 1000; }
.gk-dim { position: absolute; inset: 0; background: rgba(236, 232, 224, .9); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.gk-wrap { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 56px; padding: 0 48px; pointer-events: none; }
.gk-wrap > * { pointer-events: auto; }
.gk-txt { justify-self: end; max-width: 300px; }
.gk-lab { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #6E685F; margin: 0 0 10px; }
.gk-txt h2 { font-family: var(--serif); font-weight: 500; font-size: 32px; line-height: 1.15; margin: 0 0 12px; color: #1D1B18; }
.gk-sub { font-size: 15px; line-height: 1.5; color: #4A4640; margin: 0; }
.gk-gsm { box-sizing: border-box; width: calc((390px + 24px) * var(--gk-s)); height: calc((780px + 24px) * var(--gk-s)); border-radius: calc(52px * var(--gk-s)); background: #1D1B18; padding: calc(12px * var(--gk-s)); box-shadow: 0 30px 60px rgba(40, 30, 15, .18); }
.gk-scherm { width: calc(390px * var(--gk-s)); height: calc(780px * var(--gk-s)); border-radius: calc(41px * var(--gk-s)); overflow: hidden; background: #F4F1EB; }
.gk-scherm iframe { width: 390px; height: 780px; border: 0; display: block; transform: scale(var(--gk-s)); transform-origin: 0 0; background: #F4F1EB; }
.gk-zij { justify-self: start; align-self: start; margin-top: 40px; }
.gk-sluit { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; background: #24473B; color: #fff; font: 600 16px/1 var(--sans); border: 0; cursor: pointer; }
.gk-sluit span { font-size: 20px; }
.gk-sluit:focus-visible { outline: 3px solid #1D1B18; outline-offset: 3px; }
.gk-esc { font-size: 13px; color: #6E685F; margin: 10px 0 0 6px; }
html.in-kader .preview-bar, html.in-kader .site-bar { display: none !important; }
/* 9/11: de noot staat naast de gsm (alleen op het laatste scherm), niet in de gsm; geen schuifbalk in de gsm (zoals op een echte gsm, scrollen blijft werken). */
.gk-noot aside { margin-top: 28px; padding: 14px 16px 16px; background: #FBF9F5; border-radius: 14px; box-shadow: 0 1px 0 rgba(40, 30, 15, .06); }
.gk-noot p { margin: 0; font-size: 14px; line-height: 1.5; color: #4A4640; }
.gk-noot .gk-noot-l { margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #24473B; }
html.in-kader .kine-noot { display: none; }
/* Vaste (sticky) balken in de verkleinde gsm: de browser tekende een dunne naad rond hun laag; een rand in de eigen achtergrondkleur dekt die toe (9/11). */
html.in-kader .p1-foot, html.in-kader .p3-nav { box-shadow: 0 0 0 2px var(--bg); }
html.in-kader { scrollbar-width: none; }
html.in-kader::-webkit-scrollbar, html.in-kader body::-webkit-scrollbar { display: none; }

/* ---------- Donker thema (31/10, Eli; vlag thema, standaard UIT) ----------
   Alleen kinesistschermen: <html data-side="kine" data-thema="donker"> (demo/thema.js). Zonder dat attribuut verandert er niets.
   Patiëntlink, "Bekijk als patiënt" en de website hebben data-side="patient"/"site" en blijven licht; een afdruk is altijd licht (@media screen).
   Origamibeelden blijven op een lichte tegel (--img-tile). Contrast van elk paar ≥ 4,5:1 (tools/suites_thema.py meet het). */
.weergave-box { margin: 18px 0; padding-top: 18px; border-top: 1px solid var(--line); }
.weergave-box .seg { border-color: var(--line-strong); background: var(--paper); flex-wrap: wrap; }
.weergave-box .seg button { min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: .95rem; color: var(--soft); display: inline-flex; align-items: center; gap: 6px; }
.weergave-box .seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); font-weight: 600; }
@media screen {
  :root[data-side="kine"][data-thema="donker"] {
    color-scheme: dark;
    --bg: #1A1815; --ink: #EDE8DF; --accent: #9DB3A8; --on-accent: #1A1815;
    --soft: #CFC8BC; --muted: #A39B8F; --paper: #24211D; --tile: #2E2B26; --img-tile: #D8D1C5; /* Eli 1/11: tegel gedempt van #ECE7DE (minder fel wit); figuur/tegel 2,29→2,23:1, schaduwkant 3,43→3,25:1 */
    --line: rgba(237,232,223,.12); --line-strong: rgba(237,232,223,.26); --line-field: #737069;
    --kr-zacht: #58554F; --kr-schijf: #57534B; --kr-half: rgba(157,179,168,.38); --kr-lbl-zacht: #8C857A; /* ronde 3 K: kraanvogelrij */
    --warn: #E0A04A; --danger: #E39A8C;
  }
  :root[data-thema="donker"] body { background: var(--bg); }
  /* Tekst op het accent: donker in plaats van wit */
  :root[data-thema="donker"] .btn.primary, :root[data-thema="donker"] .main-card, :root[data-thema="donker"] .main-card .arrow,
  :root[data-thema="donker"] .msg.me, :root[data-thema="donker"] .view-sw button[aria-pressed="true"], :root[data-thema="donker"] .pm-sets .on,
  :root[data-thema="donker"] .set-dot.on { color: var(--on-accent); }
  :root[data-thema="donker"] .main-card span, :root[data-thema="donker"] .msg.me .meta { color: rgba(26,24,21,.8); }
  :root[data-thema="donker"] .btn.light { background: var(--paper); border-color: var(--line-strong); color: var(--accent); }
  :root[data-thema="donker"] .btn.danger { border-color: rgba(227,154,140,.45); }
  :root[data-thema="donker"] .chip[aria-pressed="true"] .n, :root[data-thema="donker"] .chip[aria-current="page"] .n { color: rgba(26,24,21,.8); } /* WCAG K15: .8 = 5,43:1 */
  :root[data-thema="donker"] .done-strip { background: rgba(157,179,168,.12); }
  :root[data-thema="donker"] .err { color: var(--danger); }
  :root[data-thema="donker"] .prow.confirm { background: rgba(227,154,140,.08); }
  :root[data-thema="donker"] .plist-k .prow[data-row-href]:hover { background: rgba(157,179,168,.06); }
  :root[data-thema="donker"] .more .menu, :root[data-thema="donker"] .dropdown { box-shadow: 0 10px 30px rgba(0,0,0,.45); }
  :root[data-thema="donker"] .sheet-back { background: rgba(0,0,0,.6); }
  :root[data-thema="donker"] .pcard { border-color: var(--line-strong); }
  :root[data-thema="donker"] .pcard.soon { border-color: var(--ink); } /* designwerkstuk S3 A: ook donker de inktrand */
  /* TV-05 (Eli 2/11): de ster op de kaart zoals het hartje op de beeldtegel: lichte cirkel, donkere omtrek, gevuld in het lichte accent. */
  :root[data-thema="donker"] .pcard .star { color: var(--tegel-zacht); }
  :root[data-thema="donker"] .pcard .star[aria-pressed="true"] { color: var(--tegel-accent); }
  :root[data-thema="donker"] .heart:not(.card > .heart) { background: rgba(36,33,29,.85); }
  /* Eli 1/11: hartje en vinkje op de lichte beeldtegel blijven licht, zoals in het lichte thema (geen donkere vlek, aan/uit duidelijk).
     Op de tegel geldt de lichte inkt #1D1B18 en het lichte accent #24473B (gevuld hartje, vinkje, focusrand). */
  :root[data-thema="donker"] .card > .heart, :root[data-thema="donker"] .card .pick { color-scheme: light; }
  :root[data-thema="donker"] .card > .heart svg { stroke: var(--tegel-inkt); }
  :root[data-thema="donker"] .card > .heart[aria-pressed="true"] svg { fill: var(--tegel-accent); stroke: var(--tegel-accent); }
  :root[data-thema="donker"] .card .pick input { accent-color: var(--tegel-accent); }
  :root[data-thema="donker"] .cat-ex.snel .card.picked .pick .plus { background: var(--tegel-accent); border-color: var(--tegel-accent); color: #fff; } /* TV-22: op de lichte tegel het lichte accent */
  :root[data-thema="donker"] .card > .heart:focus-visible, :root[data-thema="donker"] .card .pick input:focus-visible { outline-color: var(--tegel-accent); }
  :root[data-thema="donker"] .c7-row input, :root[data-thema="donker"] .k8-foto { background: var(--paper); }
  :root[data-thema="donker"] .k8-prev img, :root[data-thema="donker"] .th-foto img { background: var(--tile); }
  :root[data-thema="donker"] .note-card { box-shadow: 0 1px 0 var(--line-strong), 0 6px 18px rgba(0,0,0,.3); }
  :root[data-thema="donker"] .track::after, :root[data-thema="donker"] .flag-sw input::after { background: var(--ink); }
  /* Origamibeelden: altijd op dezelfde lichte tegel (geen nieuwe beelden nodig) */
  :root[data-thema="donker"] .thumb, :root[data-thema="donker"] .tile, :root[data-thema="donker"] .d-imgs figure, :root[data-thema="donker"] .st-tile,
  :root[data-thema="donker"] .band, :root[data-thema="donker"] .fig-strip, :root[data-thema="donker"] .fs-fig, :root[data-thema="donker"] .today-row .fig,
  :root[data-thema="donker"] .group .fig, :root[data-thema="donker"] .w-fig, :root[data-thema="donker"] .pr-imgs, :root[data-thema="donker"] .fig-i { background: var(--img-tile); color: var(--tegel-inkt); }
  :root[data-thema="donker"] .thumb, :root[data-thema="donker"] .tile, :root[data-thema="donker"] .d-imgs figure, :root[data-thema="donker"] .band { box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
  :root[data-thema="donker"] .d-imgs figcaption { color: #4A4640; }
  :root[data-thema="donker"] .fs-more { color: #4A4640; }
  :root[data-thema="donker"] .band .dose { color: var(--tegel-zacht); } /* WCAG K2: dosering op de tegel, 5,11:1 op #D8D1C5 */
  /* TV-04 (Eli 2/11): op de lichte band ook de scheiding en de labels opwarming/hoofddeel/afkoeling donker, zoals in het lichte thema */
  :root[data-thema="donker"] .band .pseg + .pseg { border-left-color: rgba(29,27,24,.35); }
  :root[data-thema="donker"] .band .pseg-l { color: var(--tegel-zacht); } /* 5,11:1 op #D8D1C5 */
  :root[data-thema="donker"] .band .pseg-x { color: var(--tegel-accent); } /* lichte accent, 6,9:1 op #D8D1C5 */
  :root[data-thema="donker"] .band-wrap.over:not(.at-end)::after { background: linear-gradient(to right, rgba(216,209,197,0), var(--img-tile)); }
  /* QR-codes blijven zwart op wit */
  :root[data-thema="donker"] .qr, :root[data-thema="donker"] .qr svg { background: #fff; color: var(--tegel-inkt); }
  :root[data-thema="donker"] .qr figcaption { color: #4A4640; }
  /* tekstvakken zonder eigen achtergrond: zelfde vlak als invoervelden */
  :root[data-thema="donker"] textarea { background-color: var(--paper); }
}

/* deel 3 (vlag ronde3b): donker thema (afdruk blijft licht) */
@media screen {
  :root[data-r3b][data-thema="donker"] .cat-ex.snel .card:not(.picked) .pick .plus { color: var(--tegel-zacht); }
  :root[data-r3b][data-thema="donker"] .cat-ex.snel .card.picked .pick .plus { background: var(--tegel-accent); }
  :root[data-r3b][data-thema="donker"] .card > .heart:not([aria-pressed="true"]) svg { stroke: var(--tegel-zacht); }
}