/* Ontwikkelpunten (ADR-0070) — trainerbediening (TeamSeason-pagina, index.html) en spelersportaal (gedeeld.html).
   Eigen bestand zodat de bestaande paginastijlen ongewijzigd blijven; gebruikt de variabelen van de pagina. */

/* ===== Trainer: TeamSeason-pagina, tabblad Ontwikkelpunten ===== */
.op-sectie{display:flex; flex-direction:column; gap:8px;}
.op-privacy{margin:0; font-size:.84rem; color:var(--muted);}
.op-spelers, .op-punten{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.op-speler-body{display:flex; flex-direction:column; gap:8px; padding:8px 0 4px 12px; border-left:2px solid var(--line); margin:4px 0 0 8px;}
.op-punt{display:flex; flex-direction:column; gap:4px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--card);}
.op-punt.is-archived{opacity:.8;}
.op-punt-kop{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; min-width:0;}
.op-knop{font-weight:800; overflow-wrap:anywhere;}
.op-meta{color:var(--muted); font-size:.8rem;}
.op-toelichting{margin:0; font-size:.86rem; white-space:pre-wrap; overflow-wrap:anywhere;}
.op-acties{display:flex; flex-wrap:wrap; gap:6px;}
.op-acties .tb-act{margin-left:0;}
.op-ingetrokken{display:flex; flex-wrap:wrap; align-items:center; gap:6px;}
.op-chip{display:inline-flex; align-items:center; gap:6px; font-size:.84rem; padding:2px 4px 2px 10px; border:1px dashed var(--line); border-radius:999px;}
.op-chip .tb-act{margin-left:0;}
.op-los{display:flex; flex-direction:column; gap:6px;}
.op-form{max-width:560px;}
.op-fieldset{display:flex; flex-direction:column; gap:4px; margin:0; padding:8px 10px; border:1px solid var(--line); border-radius:10px;}
.op-fieldset legend{padding:0 4px; font-size:.78rem; color:var(--muted);}
.op-check{display:flex; align-items:center; gap:8px; min-height:36px; font-size:.9rem; color:var(--ink);}
.op-check input{inline-size:18px; block-size:18px; flex:none;}
.op-fieldset .tb-select{margin-top:2px;}
.op-teller{color:var(--muted); font-weight:400;}
.op-toelichting-in{min-height:96px; resize:vertical;}
@media (max-width:767px){
  .op-acties .tb-act, .op-chip .tb-act, .op-check{min-height:44px;}
  .op-acties .tb-act, .op-chip .tb-act{display:inline-flex; align-items:center;}
}

/* Trainer: gedeelde eigen punten van een speler (ADR-0070 Am.6 B8), alleen lezen. */
.op-eigen{margin-top:8px;}
.op-punt.is-eigen .op-knop{font-style:normal;}
.op-momenten{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:4px;}
.op-moment{padding:4px 0; border-top:1px solid var(--line, #243040);}
.op-moment:first-child{border-top:0;}
.op-moment-kop{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; min-width:0;}
.op-moment-wat{flex:1 1 10rem; min-width:0; overflow-wrap:anywhere; font-size:.86rem;}
.op-beoordeling{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:6px;
  border:1px solid var(--line, #243040); font-weight:800;}
.op-beoordeling.positive{color:var(--good, #5fbf7f);} .op-beoordeling.negative{color:var(--bad, #e0764f);}
.op-beoordeling.neutral, .op-beoordeling.leeg{color:var(--muted, #9aa6b6);}
.op-moment-tekst{margin:2px 0 0 32px; font-size:.86rem; white-space:pre-wrap; overflow-wrap:anywhere;}
.op-naar{min-height:36px; display:inline-flex; align-items:center;}

/* ===== Speler: portaal (gedeeld.html) ===== */
/* Puntrijen (ADR-0070 Am.4): per punt één rij over de volle breedte van de bedieningsruimte: ⓘ · naam · + ○ −.
   Geen omlijnde groep meer; alleen een subtiele lijn tussen opeenvolgende punten. De naam krijgt de resterende
   breedte en mag over twee regels lopen; de drie knoppen staan bij alle punten exact onder elkaar (vaste kolom). */
.puntbalk{display:flex; flex-direction:column; align-items:stretch; gap:0; padding:2px 0; min-width:0; width:100%;}
.puntbalk[hidden], .ro-ctrls .ro-rij-punten[hidden]{display:none;}
.ro-rij.ro-rij-punten{flex-wrap:nowrap; justify-content:flex-start; padding:0;}
.pt-rij{display:grid; grid-template-columns:40px minmax(0, 1fr) auto; grid-template-areas:"info naam knoppen" ". status status";
  align-items:center; column-gap:4px; min-height:48px; min-width:0; border-top:1px solid var(--line);}
.pt-rij:first-child{border-top:0;}
.pt-rij .pt-info{grid-area:info; width:40px; height:40px; min-height:40px; padding:0; border:0; background:transparent; color:var(--muted); font-size:1.05rem;}
.pt-rij .pt-info[aria-expanded="true"]{color:var(--accent);}
.pt-rij .pt-naam{grid-area:naam; min-width:0; min-height:44px; padding:4px 6px; border:0; background:transparent; color:var(--ink);
  font-weight:700; text-align:left; justify-content:flex-start; white-space:normal; overflow-wrap:anywhere; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; height:auto;}
.pt-rij .pt-naam:not(:disabled):hover{color:var(--accent-ink);}
.pt-rij .pt-knoppen{grid-area:knoppen; display:inline-flex; gap:4px;}
.pt-rij .pt-knop{flex:0 0 auto; width:44px; min-width:44px; height:40px; min-height:40px; padding:0; font-size:1.1rem; font-weight:800; color:var(--muted);}
.pt-rij .pt-knop.good:not(:disabled):hover{color:var(--good);}
.pt-rij .pt-knop.bad:not(:disabled):hover{color:var(--bad);}
.pt-rij .pt-knop:disabled, .pt-rij .pt-naam:disabled{opacity:.45;}
.pt-rij .pt-status{grid-area:status; justify-self:start; padding:0 6px 4px;}
.pt-rij .pt-status:empty{display:none;}
/* Opslagfeedback subtiel IN de rij (PO 2026-10-29): geen eigen regel met een groot vinkje. Bezig en opgeslagen tonen
   een klein teken achter de naam: "…" tijdens het opslaan, daarna een wegvagend ✓ (de live-regio meldt het voor de
   schermlezer). De status blijft zo zichtbaar (ADR-0070 D11); alleen een fout krijgt een eigen regel, met Opnieuw. */
.pt-rij .pt-status[data-status="saving"], .pt-rij .pt-status[data-status="saved"]{display:none;}
.pt-rij:has(.pt-status[data-status="saving"]) .pt-naam::after{content:" …"; color:var(--muted); font-weight:700;}
.pt-rij:has(.pt-status[data-status="saved"]) .pt-naam::after{content:" ✓"; color:var(--good); font-weight:800; animation:pt-ok 2.2s ease forwards;}
@keyframes pt-ok{0%, 60%{opacity:1;} 100%{opacity:0;}}
@media (prefers-reduced-motion: reduce){ .pt-rij:has(.pt-status[data-status="saved"]) .pt-naam::after{animation:none; opacity:.7;} }
/* Mobiele kolom (zelfde mediaqueries als gedeeld.html): direct onder de afspeelbediening, vóór het + Moment-
   formulier - in de bedieningszone, nooit boven de video. Gelijke order = DOM-volgorde (na .transport). */
@media (max-width: 700px), (orientation: landscape) and (max-height: 520px) and (max-width: 1000px){
  .matchview .puntbalk{order:4; margin:0; padding:4px 0;}
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px){
  .matchview .puntbalk{order:1;}
}
/* Kop "Annoteer ontwikkelpunten" met ⓘ (uitleg), en subtiele groepskoppen (ADR-0070 Am.6 B1/B4). De rijen eronder
   blijven exact gelijk; alleen de lijn boven de eerste rij van een groep vervalt. */
.pt-kop{display:flex; align-items:center; gap:2px; min-height:40px; padding:0 0 0 6px;}
.pt-kop-titel{font-size:.8rem; font-weight:700; color:var(--muted); letter-spacing:.01em;}
.pt-kop .pt-hulp{width:44px; height:44px; min-height:44px; padding:0; border:0; background:transparent; color:var(--muted); font-size:1.05rem;}
.pt-kop .pt-hulp:hover, .pt-kop .pt-hulp:focus-visible{color:var(--accent);}
.pt-groep{margin:4px 0 0; padding:4px 6px 2px; font-size:.72rem; font-weight:600; color:var(--muted); text-transform:none; border-top:1px solid var(--line);}
.pt-kop + .pt-rij, .pt-kop + .pt-groep, .pt-groep + .pt-rij{border-top:0;}
.pt-kop + .pt-groep{margin-top:0;}
.am-punten .pt-kop{padding-left:0;}

/* Eigen ontwikkelpunten: "+ Eigen ontwikkelpunt", het compacte formulier en het beheer (alleen op de pagina). */
.pteigen{display:flex; flex-direction:column; gap:6px; padding:2px 0 6px; min-width:0; width:100%;}
.pteigen[hidden]{display:none;}
.pte-acties{display:flex; flex-wrap:wrap; gap:6px;}
.pte-acties .tbtn{min-height:44px;}
.pte-form{display:flex; flex-direction:column; gap:8px; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--bg-2); min-width:0;}
.pte-veld{display:flex; flex-direction:column; gap:4px; min-width:0;}
.pte-lab{font-size:.8rem; font-weight:700; color:var(--muted);}
.pte-titel, .pte-beschrijving{box-sizing:border-box; width:100%; min-height:44px; padding:8px 10px; font:inherit; font-size:16px; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:8px;}
.pte-beschrijving{min-height:60px; max-height:30vh; resize:vertical; line-height:1.35;}
.pte-deel{display:flex; align-items:flex-start; gap:8px; font-size:.86rem; line-height:1.35; color:var(--ink); min-height:44px;}
.pte-deel input{inline-size:20px; block-size:20px; flex:none; margin:2px 0 0;}
.pte-fout{margin:0; font-size:.84rem; color:var(--bad);}
.pte-fout:empty{display:none;}
.pte-knoppen{display:flex; flex-wrap:wrap; gap:8px;}
.pte-knoppen .tbtn{flex:1 1 120px; min-height:44px;}
.pte-knoppen .pte-ok{font-weight:700; border-color:var(--accent-line); color:var(--accent-ink);}
.pte-beheer[hidden]{display:none;}
.pte-lijst{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.pte-item{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 8px; padding:6px; border-top:1px solid var(--line);}
.pte-item:first-child{border-top:0;}
.pte-item-kop{display:flex; flex-direction:column; min-width:0; flex:1 1 12rem;}
.pte-naam{font-weight:700; overflow-wrap:anywhere;}
.pte-meta{font-size:.76rem; color:var(--muted);}
.pte-item.is-archief .pte-naam{color:var(--muted);}
.pte-item-acties{display:flex; flex-wrap:wrap; gap:6px;}
.pte-item-acties .tbtn{min-height:44px;}
.pte-uitleg{margin:4px 0 0;}
.pte-melding{margin:0;}
.pte-melding:empty{display:none;}
.pte-melding.err{color:var(--bad);}
@media (max-width: 700px), (orientation: landscape) and (max-height: 520px) and (max-width: 1000px){
  .matchview .pteigen{order:4;}
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px){
  .matchview .pteigen{order:1;}
}

.pt-uitleg{flex-basis:100%; margin:0; padding:6px 8px; font-size:.84rem; color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere; background:var(--bg-2); border:1px solid var(--line); border-radius:8px;}
.pt-uitleg[hidden]{display:none;}

/* Opslagstatus bij puntknoppen en notitieveld: zelfde vorm als .rb-status (eigen klasse, zodat de status van
   "Jouw beoordeling" er niet mee vermengd wordt). */
.op-status{position:relative; display:inline-flex; align-items:center; gap:4px; font-size:.74rem; color:var(--muted); white-space:nowrap; min-width:0;}
.op-status[data-status="saved"]{color:var(--good);}
.op-status[data-status="error"]{color:var(--bad);}
.op-status .rb-opnieuw{height:32px; min-height:32px; padding:0 8px; color:var(--ink);}

/* Notitieveld: "bij: [doel ▾] · fragment", compact (één regel) tot het focus krijgt, groeit mee met de tekst. */
.ro-notitie{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; width:100%; max-width:640px; min-width:0; font-size:.8rem; color:var(--muted);}
.ro-notitie[hidden]{display:none;}
.rn-doel-wrap{display:inline-flex; align-items:center; gap:4px; min-width:0;}
.rn-doel{max-width:55vw; min-height:34px; font:inherit; font-size:.82rem; font-weight:700; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:8px; padding:0 6px;}
.rn-frag{flex:1 1 0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rn-tekst{flex:1 1 100%; box-sizing:border-box; min-height:38px; max-height:34vh; height:38px; resize:none; overflow-y:auto; font:inherit; font-size:.92rem; line-height:1.35; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:8px; padding:8px 10px;}
.rn-tekst:focus{outline:2px solid var(--accent-line); outline-offset:0;}
.rn-tekst[readonly]{opacity:.75;}
.rn-status:empty{display:none;}
.rn-status[data-status="concept"]{font-style:italic;}

/* Geldt "Jouw beoordeling" voor een punt, dan staat de knopnaam er ook op een smal scherm bij (anders lijkt
   het de vrije beoordeling van het fragment). */
.ro-ctrls .ro-grp-beoordeel.rb-doel-punt .rb-lab{display:inline; max-width:14ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--accent-ink); font-weight:700; font-size:.74rem;}

/* Toevoegen aan → Ontwikkelpunt (reeksweergave, regel van de fragmenttijd). */
.ro-toevoegbox{flex-basis:100%; display:flex; flex-direction:column; gap:2px; padding:4px 0;}
.ro-toevoegbox[hidden]{display:none;}
.pt-vink{display:flex; align-items:center; gap:8px; min-height:40px; color:var(--ink); font-size:.9rem;}
.pt-vink input{inline-size:20px; block-size:20px; flex:none;}
.pt-vink-st{color:var(--muted); font-size:.78rem;}
.pt-vink-uitleg{margin:2px 0 0;}

/* Momentenlijst: de punten waar de speler dit moment aan koppelde (alleen voor de speler zelf). */
.pt-tags{display:flex; flex-wrap:wrap; gap:4px; margin-top:3px;}
.pt-tag{display:inline-flex; align-items:center; gap:3px; max-width:100%; font-size:.72rem; padding:1px 7px; border:1px solid var(--accent-line); border-radius:999px; color:var(--accent-ink); overflow-wrap:anywhere;}
.pt-tag .assess{font-size:.78rem;}

/* Reeksweergave: het ontwikkelpuntenblok staat standaard gewoon in de bediening (omhulling onzichtbaar). Liggend
   op een telefoon en in de kijkmodus kost GEEN regel beeldhoogte (contract gedeeld.html): dan staat het achter ◎,
   als overlay boven de bediening - zelfde vorm als de momentenoverlay (☰). */
.ro-ontwikkel{display:contents;}
.ro-puntenknop{display:none;}
.ro-puntenknop[aria-expanded="true"]{color:var(--accent); border-color:var(--accent);}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1099px){
  .reviewoverlay .ro-ctrls .ro-puntenknop:not([hidden]){display:inline-flex; align-items:center; justify-content:center;}
  .reviewoverlay .ro-ontwikkel{display:none;}
  .reviewoverlay.punten-open .ro-ontwikkel{display:flex; flex-direction:column; align-items:stretch; gap:6px; position:fixed; left:8px; bottom:52px; z-index:70;
    width:min(620px, calc(100vw - 16px)); max-height:calc(100vh - 104px); overflow-y:auto; overscroll-behavior:contain; padding:8px; border-radius:12px;
    background:rgba(12,17,25,.92); border:1px solid rgba(255,255,255,.12); box-shadow:0 10px 30px rgba(0,0,0,.5);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);}
  .reviewoverlay.punten-open .ro-ontwikkel .ro-rij-punten{justify-content:flex-start; max-width:none;}
  .reviewoverlay.punten-open .ro-ontwikkel .ro-notitie{max-width:none;}
}
/* Kijkmodus: het blok staat NOOIT in de flow (meetFsRuimte rekent met de hoogte van de bediening). Annoteren gaat daar
   via ＋ en het annotatiemenu (ADR-0070 Am.4); ◎ en zijn overlay zijn in de kijkmodus niet meer nodig. */
.reviewoverlay.ro-fs .ro-ontwikkel{display:none;}

/* Kijkmodus: dezelfde lichte, transparante laag als de rest van de bediening. */
.reviewoverlay.ro-fs .rn-tekst, .reviewoverlay.ro-fs .rn-doel{background:rgba(22,29,40,.72); border-color:rgba(255,255,255,.16);}
/* Kijkmodus (Am.4): ＋ (annotatiemenu) is de ingang; ◎ is daar overbodig. */
.reviewoverlay.ro-fs .ro-ctrls .ro-puntenknop:not([hidden]){display:none;}

/* Annotatiemenu (kijkmodus): over het beeld, alle eigen punten direct in dezelfde rijvorm + "Vrij moment". Een tik
   naast het paneel annuleert. Staand onderaan (duimbereik), liggend gecentreerd. */
.ro-annotmenu{position:absolute; inset:0; z-index:80; display:flex; align-items:flex-end; justify-content:center; background:rgba(0,0,0,.18);}
.ro-annotmenu[hidden]{display:none;}
.am-paneel{box-sizing:border-box; width:min(560px, calc(100% - 16px)); max-height:calc(100% - 16px); overflow-y:auto; overscroll-behavior:contain;
  margin:8px; padding:4px 10px 8px; border-radius:12px; background:rgba(12,17,25,.8); border:0; box-shadow:0 6px 24px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);}
.am-kop{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:36px; font-size:.78rem; color:var(--muted);}
.am-paneel .pt-rij{border-top-color:rgba(255,255,255,.08);}
.am-paneel .pt-knop, .am-vrij{background:rgba(22,29,40,.6); border-color:rgba(255,255,255,.14);}
.am-sluit{width:40px; height:40px; min-height:40px; padding:0; border:0; background:transparent;}
.am-punten{padding:0;}
.am-melding{margin:2px 2px 4px; font-size:.82rem; color:var(--muted);}
.am-melding[data-soort="fout"], .pt-laadfout{color:var(--bad);}
.pt-laadfout{margin:0; padding:4px 2px; font-size:.82rem; min-width:0; white-space:normal; overflow-wrap:anywhere;}
.am-vrij{display:flex; align-items:center; justify-content:center; width:100%; min-height:44px; margin-top:6px; font-weight:700; color:var(--ink);}
@media (orientation: landscape) and (max-height: 520px){
  .ro-annotmenu{align-items:center;}
  .am-paneel{max-height:calc(100% - 12px); margin:6px; padding:4px 10px 8px;}
  .am-paneel .pt-rij{min-height:44px;}
}

/* Compacte annotatiebalk (kijkmodus): één regel onderaan het beeld - tekstveld + ○ − ✓ - met het punt klein erboven.
   Deels transparant tot de speler erin tikt; dan ondoorzichtig met goed contrast. Boven de bediening als die
   zichtbaar is, anders tegen de onderrand van het beeld. */
.ro-annotbalk{position:absolute; left:8px; right:8px; bottom:max(6px, calc(var(--fs-onder, 60px) - 22px)); z-index:75; box-sizing:border-box; display:flex; flex-direction:column; gap:2px;
  max-width:720px; margin:0 auto; padding:3px 6px 5px; border-radius:10px; background:rgba(12,17,25,.42); border:1px solid rgba(255,255,255,.10);}
.ro-annotbalk[hidden]{display:none;}
.reviewoverlay.ro-fs.ro-idle .ro-annotbalk, .reviewoverlay.ro-fs.fs-ruimte .ro-annotbalk{bottom:6px;}
.ro-annotbalk.ab-actief{background:rgba(12,17,25,.94); border-color:rgba(255,255,255,.22);}
.ab-kop{display:flex; align-items:center; gap:8px; min-width:0; min-height:16px; font-size:.72rem; color:rgba(255,255,255,.86); text-shadow:0 1px 2px rgba(0,0,0,.6);}
.ab-label{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700;}
.ab-status:empty{display:none;}
.ab-rij{display:flex; align-items:center; gap:6px; min-width:0;}
/* Titel bij een vrij moment (PO 2026-11-01): één compacte regel boven de opmerking, zelfde vorm als het opmerkingveld. */
.ab-titel{box-sizing:border-box; width:100%; min-width:0; height:36px; min-height:36px; font:inherit; font-size:16px; font-weight:600;
  color:var(--ink); background:rgba(22,29,40,.5); border:1px solid rgba(255,255,255,.2); border-radius:8px; padding:6px 10px;}
.ab-titel[hidden]{display:none;}
.ab-actief .ab-titel{background:var(--card); border-color:var(--accent-line);}
.ab-titel:focus{outline:2px solid var(--accent-line); outline-offset:0;}
.ab-tekst{flex:1 1 auto; min-width:0; box-sizing:border-box; height:38px; min-height:38px; max-height:30vh; resize:none; overflow-y:auto; font:inherit; font-size:16px; line-height:1.3;
  color:var(--ink); background:rgba(22,29,40,.5); border:1px solid rgba(255,255,255,.2); border-radius:8px; padding:8px 10px;}
.ab-actief .ab-tekst{background:var(--card); border-color:var(--accent-line);}
.ab-tekst:focus{outline:2px solid var(--accent-line); outline-offset:0;}
.ab-knoppen{display:inline-flex; gap:4px; flex:none;}
.ab-knoppen .rb-knop{width:40px; min-width:40px; height:38px; min-height:38px; padding:0; font-size:1.1rem; font-weight:800; color:var(--ink); background:rgba(22,29,40,.6); border-color:rgba(255,255,255,.2);}
.ab-knoppen .rb-knop.good[aria-pressed="true"]{color:var(--good); border-color:var(--good); background:rgba(30,70,40,.9); box-shadow:inset 0 0 0 1px var(--good);}
.ab-knoppen .rb-knop.neu[aria-pressed="true"]{color:var(--ink); border-color:var(--accent); background:rgba(32,52,80,.9); box-shadow:inset 0 0 0 1px var(--accent);}
.ab-knoppen .rb-knop.bad[aria-pressed="true"]{color:var(--bad); border-color:var(--bad); background:rgba(70,35,25,.9); box-shadow:inset 0 0 0 1px var(--bad);}
.ab-klaar{flex:none; width:40px; min-width:40px; height:38px; min-height:38px; padding:0; font-weight:800;}
.ab-knoppen .rb-knop:disabled, .ab-klaar:disabled, .ab-tekst:disabled{opacity:.5;}

/* Bewaarde reflecties (ADR-0070 Am. 2): onder het portaal, los van elke wedstrijd; alleen lezen. */
.bewaard[hidden]{display:none;}
.bewaard{margin-top:14px;}
.bewaard-kaart summary{cursor:pointer; font-weight:700; min-height:40px; display:list-item; line-height:40px;}
.bewaard-lijst{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:8px;}
.bewaard-item{padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--bg-2); min-width:0;}
.bewaard-kop{display:flex; align-items:center; gap:6px; overflow-wrap:anywhere;}
.bewaard-tekst{margin:4px 0 0; white-space:pre-wrap; overflow-wrap:anywhere;}
.bewaard-status{margin-top:2px; font-size:13px; font-style:italic; color:var(--muted); overflow-wrap:anywhere;}