@import url("/static/yorbody-tokens.css?v=15.235.0");
/* v15.8.2 -- de ruimte voor de verticale scrollbar blijft gereserveerd. Zonder dit
   springt de hele pagina ~15 px opzij zodra een filter geen patienten oplevert en
   de scrollbar verdwijnt; bij de volgende klik weer terug. Dat leest als trillen.
   Browsers met overlay-scrollbars (macOS, de meeste mobiele) merken er niets van. */
html{scrollbar-gutter:stable}
*{box-sizing:border-box}html{font-size:16px;color-scheme:only light}body{margin:0;font-family:var(--sans);font-variant-numeric:tabular-nums;background:var(--paper);color:var(--ink);line-height:1.45}button,input,summary{font:inherit}a{color:var(--deep)}
.loginbody{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 12% 12%,#e5f2e9 0,transparent 34%),linear-gradient(145deg,#f7faf8,#eef4f1)}
.login-shell{width:min(940px,100%);display:grid;grid-template-columns:1.1fr .9fr;background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 25px 70px rgba(20,64,60,.13)}
.login-brand-panel{padding:48px 50px;background:linear-gradient(160deg,#eff8f2 0,#f9fbfa 58%,#fff8d8 120%);display:flex;flex-direction:column;justify-content:space-between;gap:42px}.login-logo{width:min(360px,86%);height:auto}.login-brand-copy h1{font-size:clamp(2rem,4vw,3.2rem);line-height:1.05;margin:.55rem 0 1rem;color:var(--deep2);letter-spacing:-.035em}.login-brand-copy p{max-width:520px;color:var(--muted);font-size:1.03rem}.loginbox{padding:48px 44px;align-self:center}.loginbox h2{font-size:2rem;margin:.45rem 0 .35rem}.loginbox>p{margin-top:0;color:var(--muted)}.eyebrow-server{text-transform:uppercase;letter-spacing:.13em;color:var(--green);font-weight:800;font-size:.72rem}.login-form label{display:block;margin:18px 0 6px;font-weight:600}.login-form input,.rowform input,.import-form input{width:100%;padding:12px 13px;border:1px solid var(--lijn-invoer);border-radius:10px;background:#fff;color:var(--ink);outline:none;transition:.15s}.login-form input:focus,.rowform input:focus,.import-form input:focus{border-color:var(--deep);box-shadow:0 0 0 3px rgba(13,73,65,.11)}.error{background:var(--dangerbg);color:#8e3028;padding:11px 13px;border-radius:9px;margin:14px 0}.login-submit{width:100%;margin-top:22px;padding:13px}.login-help{font-size:.78rem!important;margin-top:18px!important;text-align:center}
.button-primary,.button-secondary,.button-ghost,button{display:inline-flex;align-items:center;justify-content:center;border-radius:9px;padding:10px 14px;text-decoration:none;cursor:pointer;border:1px solid transparent;font-weight:700;transition:.16s}.button-primary,button{background:var(--deep);color:#fff}.button-primary:hover,button:hover{background:#0a3d36}.button-secondary{background:#fff;color:var(--deep);border-color:#afc5be}.button-secondary:hover{background:#f3f8f5}.button-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.serverbar{min-height:68px;background:var(--deep);color:#fff;display:flex;align-items:center;gap:12px;padding:8px 16px;position:sticky;top:0;z-index:40;box-shadow:0 2px 12px rgba(0,0,0,.08)}.server-brand{display:flex;align-items:center;gap:17px;text-decoration:none;color:#fff}.server-brand img{width:186px;height:46px;object-fit:contain;object-position:left center}.server-product{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:#dcebe6;font-weight:700}/* v15.13.0 -- de hoofdonderdelen bovenin. Twee bestemmingen; de rest van de app
   hangt aan een patiënt en is via de werklijst bereikbaar. */
.server-nav{display:flex;align-items:center;gap:4px;margin-left:4px}
.server-navlink{display:inline-flex;align-items:center;min-height:34px;padding:7px 10px;
  border-radius:9px;border:1px solid transparent;color:rgba(255,255,255,.95);
  text-decoration:none;font-size:.8rem;font-weight:700;white-space:nowrap;transition:.15s}
.server-navlink:hover{background:rgba(255,255,255,.12);color:#fff}
.server-navlink.aan{background:#fff;color:var(--deep);border-color:#fff}
.server-menu-knop{display:none;flex:0 0 auto;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid rgba(255,255,255,.4);border-radius:9px;background:transparent;color:#fff;font-size:1.25rem;line-height:1;cursor:pointer}
.server-menu-knop:hover{background:rgba(255,255,255,.12)}
@media(max-width:900px){
  /* v15.85.0 -- onder 900px valt de horizontale nav weg; de hamburger vouwt 'm als een
     lijst onder de balk uit (iPad-portret/telefoon). */
  .serverbar{flex-wrap:wrap}
  .server-menu-knop{display:inline-flex}
  .server-nav{display:none;order:9;flex:0 0 100%;width:100%;flex-direction:column;gap:4px;margin:6px 0 2px}
  .server-nav.open{display:flex}
  .server-nav .server-navlink{width:100%}
}
.server-account{margin-left:auto;display:flex;align-items:center;gap:11px}.server-account form{margin:0}.server-account>span{font-size:.82rem}.server-account .button-ghost{padding:7px 11px;font-size:.82rem}
.wrap{max-width:1180px;margin:34px auto;padding:0 22px 44px}.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:25px;margin-bottom:22px}.page-head h1{font-size:2.25rem;margin:.25rem 0 .25rem;letter-spacing:-.025em}.page-head p{margin:0;color:var(--muted)}.dashboard-kpis{display:flex;gap:10px}.dashboard-kpis>div{min-width:88px;padding:10px 13px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:center}.dashboard-kpis strong{display:block;font-size:1.35rem}.dashboard-kpis span{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow);margin:18px 0}.panel-head{display:flex;justify-content:space-between;gap:18px;margin-bottom:18px}.panel-head>div{display:flex;gap:12px;align-items:flex-start}.panel h2{margin:0;font-size:1.35rem}.panel-head p{margin:3px 0 0;color:var(--muted);font-size:.88rem}.step-badge{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--deep);color:#fff;font-weight:800;font-size:.78rem;flex:0 0 auto}.step-badge svg{width:18px;height:18px;display:block;pointer-events:none}.rowform{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(260px,1.7fr) auto;gap:12px;align-items:end}.rowform label,.import-form label{margin:0;color:var(--muted);font-size:.78rem;font-weight:700}.rowform label input,.import-form label input{margin-top:5px;color:var(--ink);font-size:.95rem}
.patient-list{display:grid;gap:10px}.patient-card{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:15px 16px;border:1px solid #e0e8e5;border-radius:12px;background:#fbfcfc}.patient-main{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 auto}.patient-avatar{width:42px;height:42px;border-radius:50%;background:var(--mint);color:var(--deep);display:grid;place-items:center;font-weight:900;font-size:1.08rem}.patient-title-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.patient-title-row h3{margin:0;font-size:1rem}.patient-code{font-family:inherit;color:var(--muted);font-size:12px;margin-top:2px}.status-chip{display:inline-flex;padding:3px 7px;border-radius:999px;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.status-chip.active{background:#e0f2e6;color:#14714a}.status-chip.inactive{background:#eef1f0;color:var(--grijs)}.patient-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
/* v15.9.2 -- de kaartacties stonden alle vier op volle knopmaat terwijl de kaart
   uit kleine tekst bestaat, en alle vier even zwaar, dus zonder rangorde. Drie
   niveaus: het dossier is de dagelijkse handeling, de patientapp de tweede,
   Excel de uitzondering. De globale min-height van 32px blijft; die komt uit de
   hardening. */
.patient-actions{gap:6px;flex:0 0 auto;flex-wrap:nowrap}
/* Zonder min-width:0 weigert een flexkind onder zijn inhoudsbreedte te krimpen,
   en duwt het de knoppen naar een tweede regel. */
.patient-card>.patient-main{min-width:0}
.patient-actions .button-primary,.patient-actions .button-secondary,
.patient-actions .import-details summary{padding:5px 11px;font-size:.81rem;
  line-height:1.35;border-radius:9px}
.patient-actions .button-secondary,.patient-actions .import-details summary{font-weight:600}
.patient-actions .kaart-excel{border-color:var(--lijn);color:var(--grijs);background:var(--wit)}
.patient-actions .kaart-excel:hover{color:var(--diep);border-color:#afc5be;background:#f3f8f5}
.import-details{position:relative}.import-details summary{list-style:none}.import-details summary::-webkit-details-marker{display:none}.import-details[open] .import-form{display:flex}.import-form{position:absolute;right:0;top:48px;width:320px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px;box-shadow:0 16px 40px rgba(20,64,60,.16);z-index:20;display:none;gap:8px;align-items:end}.import-form label{flex:1}.import-form input[type=file]{padding:8px;font-size:.75rem}.empty-state{padding:28px;text-align:center;border:1px dashed #c7d6d1;border-radius:12px;color:var(--muted)}.empty-state strong,.empty-state span{display:block}.empty-state strong{color:var(--deep);font-size:1rem;margin-bottom:4px}
@media(max-width:800px){.login-shell{grid-template-columns:1fr}.login-brand-panel{padding:28px 28px 24px;gap:20px}.login-logo{width:260px}.login-brand-copy h1{font-size:2rem}.login-brand-copy p{font-size:.92rem}.loginbox{padding:30px 28px}.server-product,.server-account>span{display:none}.serverbar{padding:8px 14px}.server-brand img{width:155px;height:42px}.wrap{padding:0 14px 30px;margin-top:22px}.page-head{align-items:flex-start;flex-direction:column}.rowform{grid-template-columns:1fr}.patient-card{align-items:flex-start;flex-direction:column}.patient-actions{justify-content:flex-start;width:100%}.patient-actions>a,.patient-actions>details{flex:1}.patient-actions .button-primary,.patient-actions .button-secondary,.import-details summary{width:100%}.import-form{position:fixed;left:12px;right:12px;top:auto;bottom:18px;width:auto}.dashboard-kpis{width:100%}.dashboard-kpis>div{flex:1}}
@media(max-width:470px){.loginbody{padding:0}.login-shell{min-height:100vh;border:0;border-radius:0}.login-brand-panel{padding:24px 22px 18px}.login-brand-copy p{display:none}.loginbox{padding:26px 22px}.server-brand img{width:140px}.panel{padding:18px 15px}.patient-actions{display:grid;grid-template-columns:1fr}.dashboard-kpis{gap:7px}}

/* v15.3.3 — fysiotherapeutische werklijst / triage */
.triage-dashboard{background:linear-gradient(135deg,var(--wit) 0,#F4F9F7 100%);color:var(--inkt);border:1px solid var(--lijn);border-radius:18px;padding:22px;box-shadow:0 18px 46px rgba(20,64,60,.14);margin:0 0 18px;display:flex;flex-direction:column;gap:16px;align-items:stretch}.triage-dashboard .eyebrow-server{color:var(--groen-inkt)}.triage-intro h2{margin:.25rem 0 .35rem;font-size:1.45rem;color:var(--diep)}.triage-intro p{margin:0;color:var(--grijs);font-size:.86rem;max-width:500px}.triage-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,150px));gap:10px;justify-content:start}.triage-metric{display:flex;align-items:center;gap:9px;padding:12px;border-radius:13px;background:#fff;border:1px solid #d9e5e1;border-top:3px solid #c3d0cc;min-height:84px;color:var(--inkt);min-width:0}.triage-metric>div{min-width:0}.triage-symbol{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:900;background:var(--vlak-2);color:inherit;flex:0 0 30px}.triage-metric strong{display:block;font-size:1.6rem;line-height:1;color:inherit;font-weight:800}.triage-metric div span{display:block;font-size:.84rem;color:inherit;margin-top:5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.25;overflow-wrap:anywhere}.triage-metric.attention{background:var(--vlak-2);border-color:#c3d0cc;border-top-color:var(--diep);color:var(--diep)}.triage-metric.red{background:#fff;border-color:#d9e5e1;border-top-color:#b4231f;color:var(--rood-inkt)}.triage-metric.orange{background:#fff;border-color:#d9e5e1;border-top-color:#e0a24a;color:var(--oranje-inkt)}.triage-metric.open{background:#fff;border-color:#d9e5e1;border-top-color:#2c6e9b;color:var(--blauw-inkt)}.triage-metric.stable{background:#fff;border-color:#d9e5e1;border-top-color:#2f7d4f;color:var(--groen-inkt)}.triage-callout{grid-column:1/-1;display:flex;gap:8px 14px;align-items:center;flex-wrap:wrap;padding:10px 12px;border-radius:10px;background:#fff6db;color:#604915;font-size:.8rem}.triage-callout.calm{background:#e5f4eb;color:#165a3d}.sort-note{align-self:center;color:var(--muted);font-size:.75rem;font-weight:700;background:#f4f7f6;border:1px solid var(--line);padding:7px 10px;border-radius:999px}.patient-card{position:relative;overflow:visible}.patient-card::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:5px;border-radius:12px 0 0 12px;background:#b8c8c3}.patient-card.triage-red::before{background:var(--rood)}.patient-card.triage-orange::before{background:var(--oranje)}.patient-card.triage-open::before{background:#3567a9}.patient-card.triage-stable::before{background:var(--groen)}.patient-card.triage-empty::before{background:#9aaba6}.patient-copy{min-width:0;flex:1 1 auto}.patient-triage-line{display:flex;align-items:center;gap:7px 10px;flex-wrap:wrap;margin-top:7px;color:var(--muted);font-size:.75rem}.triage-chip{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:.66rem;font-weight:900;text-transform:uppercase;letter-spacing:.045em}.triage-chip.open{background:#e8f0fb;color:#285a99}.triage-chip.stable{background:#e4f3e9;color:#176241}.triage-chip.empty{background:#edf1f0;color:#697a75}.last-activity{padding-left:9px;border-left:1px solid #d7e0dd}.patient-card.triage-red{background:linear-gradient(90deg,#fff8f7 0,#fbfcfc 17%)}.patient-card.triage-orange{background:linear-gradient(90deg,#fffaf2 0,#fbfcfc 17%)}.patient-card.triage-open{background:linear-gradient(90deg,#f6f9fd 0,#fbfcfc 17%)}
@media(max-width:900px){.triage-dashboard{grid-template-columns:1fr}}
@media(max-width:520px){.triage-dashboard{padding:17px 14px}.triage-metrics{gap:7px}.triage-metric{padding:10px 9px;min-height:64px}.triage-metric strong{font-size:1.15rem}.sort-note{display:none}.patient-triage-line{align-items:flex-start;flex-direction:column;gap:5px}.last-activity{padding-left:0;border-left:0}.triage-callout{align-items:flex-start;flex-direction:column}}
/* v15.3.3 exact triage worklist */

.patient-card.triage-green::before{background:var(--groen)}
.patient-card.triage-green{background:linear-gradient(90deg,#f4fbf7 0,#fbfcfc 17%)}
.worklist-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 2px 9px;padding:0 2px;color:var(--muted);font-size:.78rem}.worklist-section-head>div{display:flex;align-items:center;gap:8px}.worklist-section-head strong{color:var(--ink);font-size:.9rem}.worklist-dot{width:9px;height:9px;border-radius:50%;background:#90a19c}.attention-list-head .worklist-dot{background:var(--oranje)}.other-list-head{margin-top:24px}.other-list-head .worklist-dot{background:var(--groen)}.attention-list{margin-bottom:6px}

/* v15.5 — triage workflow and account security */
.triage-event-list{display:grid;gap:7px;margin-top:10px;max-width:760px}.triage-event{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #dfe8e5;border-radius:10px;padding:8px 10px;background:#fff}.triage-event.red{border-left:4px solid var(--rood)}.triage-event.orange{border-left:4px solid var(--oranje)}.triage-event>div:first-child{display:grid;gap:2px}.triage-event strong{font-size:13px}.triage-event span{font-size:12px;color:var(--muted)}.triage-event-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.triage-event-actions form{margin:0}.triage-event-actions a,.triage-event-actions button{border:1px solid #cbd8d4;border-radius:9px;background:#fff;padding:5px 11px;font-size:.78rem;font-weight:700;color:var(--deep);text-decoration:none;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;min-width:96px}.triage-event-actions button.resolve{background:#e4f3e9;border-color:#b8dac4;color:#176241}.triage-event-actions button.sig-gezien{background:#eef6f1;border-color:#bcdcc9;color:#176241}.success-note{padding:12px;border-radius:10px;background:#e4f3e9;color:#176241;line-height:1.5}.login-help a{color:var(--deep);font-weight:800}.login-tekstknop{background:none;border:0;padding:0;margin-top:10px;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}.compact-auth{max-width:900px}
@media(max-width:700px){.triage-event{align-items:flex-start;flex-direction:column}.triage-event-actions{width:100%}}
/* v15.199.0 - de knoppen van een signaalregel blijven een blok: naast de tekst als ze
   passen, anders als geheel eronder (niet meer half omgeslagen bij een langere tekst). */
@media(min-width:701px){.triage-event{flex-wrap:wrap}.triage-event>div:first-child{flex:1 1 280px;min-width:0}}

/* v15.5 — dashboard 2.0, patient detail, timeline and accessibility */
.skip-link{position:fixed;left:12px;top:8px;z-index:9999;transform:translateY(-160%);background:#fff;color:#14403c;padding:9px 12px;border:2px solid #14403c;border-radius:8px;font-weight:800}.skip-link:focus{transform:none}
:focus-visible{outline:3px solid var(--diep);outline-offset:2px}.button-primary,.button-secondary,.button-ghost,button,a[role=button]{min-height:32px}.patient-detail-wrap{max-width:1180px}.detail-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;margin-bottom:15px;padding:24px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,#fff,#f4f9f7);box-shadow:var(--shadow);position:relative;overflow:hidden}.detail-hero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:#90a19c}.detail-hero.triage-red::before{background:var(--rood)}.detail-hero.triage-orange::before{background:var(--oranje)}.detail-hero.triage-green::before{background:var(--groen)}.detail-hero h1{margin:.2rem 0 .2rem;font-size:2rem}.detail-code{font-family:inherit;color:var(--muted);font-size:.85rem}.detail-hero p{margin:.5rem 0 0;color:var(--muted);font-size:.84rem}.detail-hero-actions{display:flex;gap:8px;flex-wrap:wrap}.detail-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:9px;margin:15px 0}.detail-kpis>div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:0 5px 18px rgba(20,64,60,.04)}.detail-kpis span{display:block;font-size:.67rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:5px}.detail-kpis strong{font-size:.95rem;color:var(--deep)}.triage-text.red{color:#9a2a22}.triage-text.orange{color:#9d5c0d}.triage-text.green{color:#176241}.detail-signal-list{display:grid;gap:9px}.detail-signal{display:flex;justify-content:space-between;align-items:center;gap:18px;border:1px solid #dfe8e5;border-radius:12px;padding:12px 13px;background:#fff}.detail-signal.red{border-left:5px solid var(--rood);background:#fff9f8}.detail-signal.orange{border-left:5px solid var(--oranje);background:#fffaf3}.signal-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.signal-head strong{font-size:13px}.signal-head time{color:var(--muted);font-size:.72rem}.signal-copy p{margin:5px 0 0;color:var(--muted);font-size:12px}.seen-chip,.workflow-chip{display:inline-flex;padding:3px 7px;border-radius:999px;font-size:.64rem;font-weight:850;background:#e8f0fb;color:#285a99}.signal-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.signal-actions form{margin:0}.signal-actions .button-primary,.signal-actions .button-secondary{padding:5px 11px;font-size:.81rem;line-height:1.35;border-radius:9px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;min-width:104px}.signal-actions .button-secondary{font-weight:600}.kop-met-info{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.kop-met-info>h2{flex:0 1 auto;min-width:0}.panel-info{display:inline-block}.panel-info>summary{list-style:none;cursor:pointer;width:22px;height:22px;border-radius:50%;border:1px solid var(--lijn);color:var(--grijs);display:inline-grid;place-items:center;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:700;font-size:.82rem;line-height:1}.panel-info>summary::-webkit-details-marker{display:none}.panel-info>summary:hover,.panel-info>summary:focus-visible{color:var(--diep);border-color:#afc5be}.panel-info .panel-uitleg{margin:8px 0 0;color:var(--muted);font-size:.88rem;font-weight:400}.timeline-list{list-style:none;margin:0;padding:0;display:grid;gap:0}.timeline-item{display:grid;grid-template-columns:18px 92px 1fr;gap:10px;position:relative;padding:0 0 18px}.timeline-item:not(:last-child)::before{content:"";position:absolute;left:8px;top:16px;bottom:0;width:2px;background:#dce6e2}.timeline-marker{width:16px;height:16px;border-radius:50%;background:#9aaba6;border:3px solid #fff;box-shadow:0 0 0 1px #cbd8d4;z-index:1}.timeline-item.red .timeline-marker{background:var(--rood)}.timeline-item.orange .timeline-marker{background:var(--oranje)}.timeline-item.green .timeline-marker{background:var(--groen)}.timeline-date{font-size:.72rem;color:var(--muted);padding-top:1px}.timeline-body{border:1px solid #e0e8e5;border-radius:11px;padding:10px 12px;background:#fbfcfc}.timeline-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.timeline-body p{margin:4px 0;color:var(--muted);font-size:.78rem;overflow-wrap:anywhere}.timeline-body a{font-size:.72rem;font-weight:800;color:var(--deep)}.workflow-chip.resolved{background:#e4f3e9;color:#176241}.workflow-chip.new{background:#fff0dd;color:#9d5c0d}.sev-chip{display:inline-flex;padding:3px 7px;border-radius:999px;font-size:.64rem;font-weight:850}.sev-chip.red{background:#fbe9e7;color:#9a2a22}.sev-chip.orange{background:#fde7cf;color:#9d5c0d}.detail-actions-row{display:flex;gap:8px;flex-wrap:wrap}.small-note{font-size:.72rem;color:var(--muted);margin-top:10px}
@media(max-width:1000px){.detail-kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.detail-hero{align-items:flex-start;flex-direction:column}.detail-hero-actions{width:100%}.detail-hero-actions a{flex:1}.detail-kpis{grid-template-columns:repeat(2,1fr)}.detail-signal{align-items:flex-start;flex-direction:column}.signal-actions{width:100%}.timeline-item{grid-template-columns:18px 1fr}.timeline-date{grid-column:2}.timeline-body{grid-column:2}}

/* v15.5 mobile header hardening: keep the primary logout reachable without horizontal overflow. */
@media(max-width:520px){
  .serverbar{gap:8px;padding:8px 10px}
  .server-brand img{width:132px;height:40px}
  .server-account{gap:8px;min-width:0}
  .server-account form:first-of-type{display:none}
  .server-account .button-ghost{padding:9px 10px;white-space:nowrap}
}

/* v15.5 — expliciete toestemming voor externe trainingsdata */
.consent-body{background:#f4f7f5}.consent-wrap{max-width:880px}.consent-panel{padding:30px}.consent-panel h1{margin:.35rem 0 .65rem}.consent-panel .lead{font-size:1.04rem;line-height:1.6;max-width:720px}.consent-purpose{margin:22px 0;padding:18px;border:1px solid var(--line);border-radius:14px;background:#eef7f1}.consent-purpose p{margin:.45rem 0 0;line-height:1.55}.consent-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.consent-grid>div{border:1px solid var(--line);border-radius:13px;padding:15px;background:#fff}.consent-grid p{margin:.45rem 0 0;color:var(--muted);line-height:1.5}.consent-form{margin-top:22px}.consent-check{display:flex;align-items:flex-start;gap:12px;padding:16px;border:1px solid var(--line);border-radius:13px;background:#fff;font-weight:650;line-height:1.45}.consent-check input{width:22px;height:22px;flex:0 0 auto;margin-top:1px}.consent-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}@media(max-width:620px){.consent-panel{padding:20px 16px}.consent-grid{grid-template-columns:1fr}.consent-actions>*{width:100%;text-align:center}}

/* v15.5.3 — triagetellers zijn directe navigatie naar de gefilterde werklijst */
.triage-metric{text-decoration:none;color:inherit;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.triage-metric:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,64,60,.14);border-color:currentColor}
.triage-metric:active{transform:translateY(0)}
.triage-metric small{display:block;margin-top:7px;font-size:.8rem;font-weight:800;color:inherit;text-transform:none;letter-spacing:0;overflow-wrap:anywhere}
/* v15.116.0 - werkvoorraad: 'aandacht nodig' is de kop-metriek, de rest de uitsplitsing.
   De tint hieronder spiegelt .triage-metric.attention (#F7DFA6 / #E4C67F / --oranje-inkt);
   pas ze samen aan als die kleur verandert. */
.triage-hoofd{display:flex;align-items:center;gap:15px;text-decoration:none;padding:15px 18px;border-radius:14px;background:#F7DFA6;border:1px solid #E4C67F;color:var(--oranje-inkt);transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.triage-hoofd:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,64,60,.14);border-color:currentColor}
.triage-hoofd:active{transform:translateY(0)}
.triage-hoofd.calm{background:#e5f4eb;border-color:#bfe0cd;color:#165a3d}
.triage-hoofd-getal{font-size:2.6rem;line-height:1;font-weight:800;color:inherit;flex:0 0 auto;font-variant-numeric:tabular-nums}
.triage-hoofd-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.triage-hoofd-label{font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em;color:inherit}
.triage-hoofd-zin{font-size:1.02rem;font-weight:700;color:inherit;line-height:1.22}
.triage-hoofd-actie{font-size:.8rem;font-weight:800;color:inherit;margin-top:3px}
.triage-waarvan-kop{margin:0 2px;font-size:.76rem;font-weight:800;color:var(--grijs);text-transform:uppercase;letter-spacing:.03em}
.triage-waarvan-kop span{font-weight:600;text-transform:none;letter-spacing:0}
@media(max-width:520px){.triage-hoofd{padding:13px 14px;gap:12px}.triage-hoofd-getal{font-size:2.1rem}}
.triage-metrics .triage-metric{flex-direction:column;align-items:flex-start;justify-content:space-between;aspect-ratio:1;min-height:0;padding:12px;gap:6px}
.triage-metrics .triage-metric div span{margin-top:2px}
.triage-metric-kop{display:flex;align-items:center;gap:8px}
.triage-metric.attention strong,.triage-metric.stable strong{font-size:1.9rem;line-height:1;color:inherit}
#worklist{scroll-margin-top:18px}
#worklist:focus{outline:none}
@media(max-width:520px){.triage-metric small{font-size:.7rem}.triage-metric{min-height:76px}}

/* v15.5.3+ experiment — descriptive recent-session trend card */
.recent-trend-panel{position:relative;overflow:hidden}
.recent-trend-panel::after{content:"";position:absolute;right:-90px;top:-110px;width:230px;height:230px;border-radius:50%;background:rgba(31,102,93,.055);pointer-events:none}
.trend-date{font-size:.82rem;font-weight:800;color:var(--server-muted,#667875);white-space:nowrap}
.trend-summary-line{display:flex;gap:10px 18px;align-items:baseline;flex-wrap:wrap;margin:4px 0 16px;padding:12px 14px;border-radius:14px;background:#f3f8f5;border:1px solid #dfeae5}
.trend-summary-line strong{color:#14403c}
.trend-summary-line span{color:#4e625e}
.recent-trend-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.recent-trend-card{min-height:126px;padding:15px;border:1px solid #dce8e3;border-radius:16px;background:#fff;box-shadow:0 4px 16px rgba(18,63,58,.045)}
.recent-trend-head{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#60736f;font-size:.8rem;font-weight:800}
.trend-arrow{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#edf5f1;color:#17554d;font-size:1.05rem}
.trend-arrow.up,.trend-arrow.down,.trend-arrow.flat{color:#17554d}
.recent-trend-values{margin-top:12px;color:#173f3a;font-size:1.03rem;line-height:1.3;font-weight:900;letter-spacing:-.01em;word-break:break-word}
.trend-dots{height:32px;display:flex;align-items:flex-end;gap:5px;margin-top:10px}
.trend-dots i{display:block;width:8px;height:var(--h);max-height:30px;border-radius:99px;background:#91bcb0}.trend-dots i.sev-green{background:var(--groen)}.trend-dots i.sev-orange{background:var(--oranje)}.trend-dots i.sev-red{background:var(--rood)}
.trend-session-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.trend-session-strip>div{display:flex;gap:6px 9px;align-items:center;min-width:0;padding:9px 11px;border-radius:12px;background:#f8fbf9;border:1px solid #e4ece8;font-size:.78rem}
.trend-session-strip strong{color:#245f57;white-space:nowrap}.trend-session-strip span{color:#667875;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clinical-note{display:flex;gap:10px;align-items:flex-start;margin-top:13px;color:#5d706c;font-size:.78rem}
.clinical-note>span{display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:#e5f1ec;color:#17554d;font-weight:900}.clinical-note p{margin:1px 0 0}
@media(max-width:900px){.recent-trend-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.recent-trend-grid{grid-template-columns:1fr 1fr;gap:9px}.recent-trend-card{min-height:115px;padding:13px}.recent-trend-values{font-size:.94rem}.trend-session-strip{grid-template-columns:1fr}.trend-summary-line{display:block}.trend-summary-line span{display:block;margin-top:4px}.trend-date{display:none}}

/* v15.5.3+ TrendSignal — trend context is coupled to signals for review */
.trend-context{display:flex;gap:11px;align-items:flex-start;margin:0 0 14px;padding:13px 14px;border:1px solid #dce8e3;border-radius:14px;background:#f8faf9}
.trend-context.attention{border-color:#efcf9f;background:#fff8ee}
.trend-context.positive{border-color:#bddfc8;background:#f1faf4}
.trend-context-icon{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:9px;background:#e5eeeb;color:#17554d;font-weight:950}
.trend-context.attention .trend-context-icon{background:#f8dfb7;color:#8a4d08}
.trend-context.positive .trend-context-icon{background:#dcefe2;color:#176241}
.trend-context strong{display:block;color:#173f3a;font-size:.88rem}
.trend-context p{margin:3px 0 0;color:#5f716d;font-size:.78rem;line-height:1.45}
.trend-context-link{display:block;margin-top:6px;color:#47635d;font-size:.72rem;font-weight:800}
@media(max-width:560px){.trend-context{padding:12px}.trend-context p{font-size:.76rem}}

/* ══ v15.7 stap 3 t/m 8 — dashboardraamwerk, werklijst, meldingen en drempels ══ */
/* YorBody v15.6 — plak dit blok ONDERAAN app/static/server.css
   Hoort bij stap 3, 4, 6 en 7 van het overdrachtspakket. */

/* ── stap 3: dashboardraamwerk 3a ─────────────────────────────── */
.yb-dash{height:100vh;height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.yb-dash .serverbar{flex:0 0 auto;position:static}
.yb-body{flex:1;min-height:0;display:flex}
.yb-lijst{flex:0 0 380px;width:380px;border-right:1px solid var(--lijn);background:var(--wit);display:flex;flex-direction:column;min-height:0}
.yb-dossier{flex:1;min-width:0;overflow-y:auto;padding:22px 24px 40px}
.yb-dossier .wrap{max-width:none;margin:0;padding:0}

.yb-rail{display:none}
[data-lijst="in"] .yb-lijst{display:none}
[data-lijst="in"] .yb-rail{flex:0 0 74px;width:74px;background:var(--diep-2);display:flex;flex-direction:column;align-items:center;padding:14px 0;gap:12px;overflow-y:auto}
.yb-rail-toggle,.yb-rail-av,.yb-rail-new{width:44px;height:44px;flex:0 0 44px;border-radius:12px;display:grid;place-items:center;text-decoration:none;font-weight:600}
.yb-rail-toggle{border:0;background:rgba(255,255,255,.16);color:var(--zand);font-size:19px;padding:0}
.yb-rail-toggle:hover{background:rgba(255,255,255,.26)}
.yb-rail-av{background:rgba(255,255,255,.10);color:#fff;font-size:16px}
.yb-rail-av.triage-red{box-shadow:inset 0 0 0 2px var(--rood)}
.yb-rail-av.triage-orange{box-shadow:inset 0 0 0 2px var(--oranje)}
.yb-rail-av.triage-green{box-shadow:inset 0 0 0 2px var(--green2)}
.yb-rail-new{margin-top:auto;border:1px solid rgba(255,255,255,.25);color:#cfe0dc;font-size:22px}
.yb-rail-new:hover{background:rgba(255,255,255,.14);color:#fff}

/* ── stap 4: werklijst ────────────────────────────────────────── */
/* v15.8.8 -- terug naar het overzicht, boven de werklijst. */
.yb-terug-overzicht{display:block;margin:0 0 10px;color:var(--diep);font-size:.8rem;font-weight:800;text-decoration:none}
.yb-terug-overzicht:hover{text-decoration:underline}
.yb-lijst-kop{flex:0 0 auto;padding:18px 20px 14px;border-bottom:1px solid var(--lijn-zacht)}
.yb-lijst-scroll{scrollbar-gutter:stable;flex:1;min-height:0;overflow-y:auto}
.yb-lijst-voet{flex:0 0 auto;padding:14px 20px;border-top:1px solid var(--lijn-zacht);background:var(--vlak-2)}
.yb-blok{width:100%}
.yb-rij{display:flex;align-items:center;gap:10px}
.yb-rij-tussen{display:flex;align-items:center;justify-content:space-between;gap:10px}
.yb-h3{font-size:17px;color:var(--diep)}
.yb-sub{font-size:13px;color:var(--grijs)}
.yb-inklap{width:30px;height:30px;padding:0;border:1px solid var(--lijn-invoer);border-radius:9px;background:var(--wit);color:var(--diep);font-size:15px;line-height:1}
.yb-inklap:hover{background:var(--hover)}
/* v15.9.1 -- de enige filterplek, in de werklijstkolom. Smal, dus alles onder
   elkaar op volle breedte; de chips wikkelen zelf. */
.yb-filters{display:flex;flex-direction:column;gap:9px;margin:0 0 4px}
/* v15.67.0 - het filterblok apart inklapbaar; de lijst (flex:1) vult de vrijgekomen ruimte. */
.yb-filter-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;
  margin:2px 0 10px;padding:6px 9px;border:1px solid var(--lijn-invoer);border-radius:8px;
  background:var(--wit);color:var(--grijs);font-size:11px;font-weight:700;cursor:pointer;
  text-transform:uppercase;letter-spacing:.03em}
.yb-filter-toggle:hover{background:var(--hover)}
.yb-filter-chevron{font-size:.9rem;transition:transform .12s}
[data-filters="in"] .yb-filter-chevron{transform:rotate(-90deg)}
[data-filters="in"] .yb-filters{display:none}
@media(max-width:760px){body.yb-dash:not([data-filters-set]) .yb-filters{display:none}body.yb-dash:not([data-filters-set]) .yb-filter-chevron{transform:rotate(-90deg)}}
.yb-zoekveld,.yb-veld select{width:100%;box-sizing:border-box;border:1px solid var(--lijn-invoer);border-radius:11px;background:var(--vlak-2);padding:10px 12px;font-family:inherit;font-size:14.5px;color:var(--inkt);outline:none}
.yb-zoekveld:focus,.yb-veld select:focus{border-color:var(--diep);background:var(--wit)}
.yb-veld{display:flex;flex-direction:column;gap:4px;min-width:0}
.yb-veld>span{font-size:.72rem;font-weight:800;letter-spacing:.04em;color:var(--grijs);text-transform:uppercase}
.yb-filterknoppen{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.yb-filterknoppen .button-secondary{flex:1 1 auto;text-align:center}
.yb-wis{flex:0 0 auto;color:var(--diep);font-size:.78rem;font-weight:700;text-decoration:underline}
.yb-chips{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.yb-chip{border:1px solid var(--lijn-invoer);border-radius:999px;padding:6px 12px;font-size:13px;color:var(--inkt-2);background:var(--wit);text-decoration:none}
.yb-chip:hover{background:var(--hover)}
.yb-chip.aan{background:var(--diep);border-color:var(--diep);color:#fff;font-weight:600}
.yb-groep{margin:0;padding:12px 20px 8px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grijs)}
.yb-groep.rood{color:var(--rood)}
.yb-leeg{margin:0;padding:26px 20px;font-size:14.5px;color:var(--grijs);text-align:center}
/* v15.8.1 -- de hele rij is een link naar het dossier, maar dat was pas te zien
   als je erover bewoog. De chevron staat er altijd, zwak, en wordt donker bij hover
   of wanneer de patient open staat. Een gedraaide border in plaats van een teken:
   dan valt er voor een schermlezer niets extra's voor te lezen. */
.yb-rij-p{display:flex;gap:13px;padding:13px 26px 13px 20px;border-bottom:1px solid var(--lijn-licht);text-decoration:none;color:inherit;position:relative}
.yb-rij-p::after{content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;border-right:2px solid var(--lijn);border-bottom:2px solid var(--lijn);transform:translateY(-50%) rotate(-45deg);transition:border-color .12s}
.yb-rij-p:hover::after,.yb-rij-p:focus-visible::after,.yb-rij-p.actief::after{border-color:var(--diep)}
.yb-rij-p:hover{background:var(--hover)}
.yb-rij-p.actief{background:var(--hover);box-shadow:inset 3px 0 0 var(--diep)}
.yb-rij-tekst{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
/* v15.16.0: de rij heeft twee doelen. De rij zelf gaat naar het dossier; de knop
   rechts naar het scherm waar je alles instelt. De punthaak verhuist naar links
   van die knop, zodat allebei zichtbaar blijft waar je terechtkomt. */
.yb-rij-omhulsel{position:relative}
.yb-rij-omhulsel .yb-rij-p{padding:13px 20px 7px 20px;border-bottom:none}
.yb-rij-omhulsel .yb-rij-p::after{display:none}
.yb-rij-acties{display:flex;gap:8px;padding:0 20px 13px 73px;border-bottom:1px solid var(--lijn-licht)}
.yb-rij-instel{
  padding:5px 10px;border-radius:9px;border:1.5px solid var(--diep);
  background:var(--wit);color:var(--diep);font-size:12px;font-weight:700;
  text-decoration:none;white-space:nowrap;transition:.12s;
}
.yb-rij-instel:hover{background:var(--diep);color:#fff}
.yb-rij-instel:focus-visible{outline:2px solid var(--diep);outline-offset:2px}
.yb-rij-dossier{background:var(--diep);color:#fff}

.yb-rij-naam{display:flex;align-items:baseline;gap:8px;font-size:16px}
.yb-vlag{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600}
.yb-rij-tekst .yb-sub{font-size:12px}
.yb-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;background:#90a19c}
.yb-dot.triage-red{background:var(--rood)}
.yb-dot.triage-orange{background:var(--oranje)}
.yb-dot.triage-green{background:var(--groen)}
.yb-av{flex:0 0 40px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:16px;font-weight:600;background:#EDF3F1;color:var(--diep)}
.yb-av.triage-red{background:var(--rood-zacht);color:var(--rood-inkt)}
.yb-av.triage-orange{background:var(--oranje-zacht);color:var(--oranje-inkt)}
.yb-av.triage-green{background:var(--groen-zacht);color:var(--groen-inkt)}

/* ── stap 6: formulieren ──────────────────────────────────────── */
.yb-terug{display:inline-flex;align-items:center;gap:8px;background:var(--wit);border:1px solid var(--lijn-invoer);border-radius:11px;padding:10px 15px;font-size:14.5px;font-weight:600;color:var(--diep);text-decoration:none}
.yb-terug:hover{background:var(--hover)}
.yb-titel{margin:18px 0 4px;font-size:20px;letter-spacing:-.01em;color:var(--diep)}
.yb-intro{margin:0 0 18px;font-size:14.5px;color:var(--inkt-2);max-width:560px;text-wrap:pretty}
.yb-kaart-form{background:var(--wit);border:1px solid var(--lijn-zacht);border-radius:var(--r-l);padding:20px 22px;display:grid;gap:16px;max-width:620px}
.yb-kaart-form label span{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.yb-kaart-form input{width:100%;border:1px solid var(--lijn-invoer);border-radius:11px;padding:12px 14px;background:var(--vlak-2);font-size:15.5px;color:var(--inkt);outline:none}
.yb-kaart-form input:focus{border-color:var(--diep);background:var(--wit)}.yb-kaart-form select{width:100%;border:1px solid var(--lijn-invoer);border-radius:11px;padding:12px 14px;background-color:var(--vlak-2);font-size:15.5px;color:var(--inkt);outline:none}.yb-kaart-form select:focus{border-color:var(--diep);background-color:var(--wit)}
/* v15.225.0 (audit T7-4) - het instructieveld van een oefening was een kaal vakje in de
   typemachineletter van de browser. Zelfde opmaak als de invoervelden hierboven; staat bewust
   voor .prog-form textarea, zodat die (gelijke specificiteit, later) blijft winnen. */
.yb-kaart-form textarea{width:100%;box-sizing:border-box;border:1px solid var(--lijn-invoer);border-radius:11px;padding:12px 14px;background:var(--vlak-2);font:inherit;font-size:15.5px;line-height:1.45;color:var(--inkt);outline:none;resize:vertical}
.yb-kaart-form textarea:focus{border-color:var(--diep);background:var(--wit)}
.yb-kaart-form small{display:block;margin-top:5px;font-size:13px;color:var(--grijs)}
.yb-kaart-form small.fout{font-weight:600;color:var(--rood)}

/* ── stap 7: bevestiging en startstappen ──────────────────────── */
.yb-melding{display:flex;align-items:center;gap:11px;border-radius:10px;padding:11px 14px;margin:12px 0;font-size:14px}
.yb-melding.groen{background:var(--groen-zacht);border:1px solid var(--groen-rand);color:var(--groen-inkt)}
.yb-vink{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--groen);color:#fff;display:grid;place-items:center;font-size:14px}
.yb-stappen{margin-top:14px;display:grid;gap:10px}
.yb-stap{display:flex;align-items:center;gap:13px;border:1px solid var(--lijn-zacht);border-radius:13px;padding:14px 16px}
.yb-stap>div{flex:1;min-width:0}
.yb-stap p{margin:3px 0 0}
.yb-stap-nr{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--diep);color:#fff;font-size:14px;font-weight:700}

/* ── stap 8: signaalkleuren uit de tokens ─────────────────────── */
.detail-signal.red{border-left-color:var(--rood);background:var(--rood-zacht)}
.detail-signal.orange{border-left-color:var(--oranje);background:var(--oranje-zacht)}
.triage-event.red{border-left-color:var(--rood)}
.triage-event.orange{border-left-color:var(--oranje)}
.triage-chip.red{background:var(--rood-zacht);color:var(--rood-inkt)}
.triage-chip.orange{background:var(--oranje-zacht);color:var(--oranje-inkt)}
.triage-chip.green{background:var(--groen-zacht);color:var(--groen-inkt)}

/* ── smal scherm: terug naar één kolom ────────────────────────── */
@media(max-width:900px){
  .yb-dash{height:auto;overflow:visible}
  .yb-body{flex-direction:column}
  .yb-lijst{flex:none;width:auto;border-right:0;border-bottom:1px solid var(--lijn)}
  .yb-rail{display:none!important}
  [data-lijst="in"] .yb-lijst{display:flex}
  [data-dossier] .yb-dossier{order:-1}
  body:not([data-dossier]) .yb-dossier{order:-1}
  /* v15.192.0 - op smal scherm scrollt de pagina zelf (de serverbar is op dit
     dashboard statisch en schuift mee). Zet de dossierkolom op overflow:visible, zodat
     de sticky zoekbalk aan het document hangt en bovenin blijft terwijl je door de (nu
     langere) beeldlijst scrolt. */
  .yb-dossier{overflow:visible}
  .bib-zoekbalk{position:sticky;top:0;z-index:30;background:var(--paper);margin:0 0 10px;padding:12px 0 10px}
}


/* v15.7.5 — tabbladen in het patiëntdossier. De panelen staan alle drie in de
   pagina; de server verbergt de niet-actieve met [hidden] en physio-dashboard.js
   wisselt zonder herlading. De tabs zijn links, zodat ze ook zonder JavaScript
   werken en een tabblad deelbaar blijft. */
.yb-tabs{display:flex;gap:2px;flex-wrap:wrap;margin:4px 0 16px;border-bottom:1px solid var(--lijn)}
.yb-tab{padding:10px 14px;border-bottom:2px solid transparent;color:var(--grijs);font-size:.86rem;font-weight:700;text-decoration:none;white-space:nowrap}
.yb-tab:hover{color:var(--inkt);background:var(--hover)}
.yb-tab.aan{color:var(--diep);border-bottom-color:var(--diep)}
.yb-tabpaneel[hidden]{display:none}
@media(max-width:700px){.yb-tabs{gap:0;overflow-x:auto;flex-wrap:nowrap}.yb-tab{padding:10px 11px;font-size:.8rem}}
/* v15.7.6 — grafieken in het dossier, met CSS-staven omdat de CSP geen inline
   script toestaat en patient-app.js niet los te gebruiken is. */
.yb-grafiek-legenda{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 10px;color:var(--grijs);font-size:.75rem}
.yb-grafiek-legenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.yb-vlek.tijdens{background:var(--diep)}
.yb-vlek.na24{background:var(--oranje)}
.yb-vlek.grens{background:transparent;border-top:2px dashed var(--rood);border-radius:0;height:0;width:14px}
/* v15.228.0 (audit T9-9) - staven, grenslijn, raster en y-as rekenen met dezelfde plothoogte
   (--yb-plot) boven de labelrij (--yb-label); --t is de hoogte als fractie (0 tot 1). Voorheen
   was de grenslijn een percentage van het hele vlak en de staaf van het vlak min de labels. */
.yb-grafiek{--yb-plot:130px;--yb-label:22px;position:relative;display:flex;align-items:flex-start;gap:6px;
  padding:20px 0 0;overflow-x:auto}
.yb-yas{position:relative;flex:0 0 20px;height:calc(var(--yb-plot) + var(--yb-label))}
.yb-yas span{position:absolute;right:2px;bottom:calc(var(--yb-label) + var(--yb-plot) * var(--t));transform:translateY(50%);
  color:var(--grijs);font-size:.66rem;line-height:1;font-variant-numeric:tabular-nums}
.yb-plotvlak{position:relative;flex:1 0 auto;min-width:min-content;height:calc(var(--yb-plot) + var(--yb-label))}
.yb-plotvlak::after{content:"";position:absolute;left:0;right:0;bottom:var(--yb-label);border-top:1px solid var(--lijn);pointer-events:none}
.yb-raster{position:absolute;left:0;right:0;bottom:calc(var(--yb-label) + var(--yb-plot) * var(--t));border-top:1px dotted var(--lijn);pointer-events:none}
.yb-staven{display:flex;align-items:flex-end;justify-content:flex-start;gap:14px;height:100%;min-width:min-content;padding-right:44px}
.yb-staafgroep{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:0;height:100%;flex:0 0 auto;min-width:46px}
.yb-paar{display:flex;align-items:flex-end;gap:3px;height:var(--yb-plot);flex:0 0 auto;width:100%;justify-content:center}
.yb-kolom{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.yb-waarde{flex:0 0 auto;margin:0 0 2px;color:var(--inkt);font-size:.64rem;font-weight:700;line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums}
.yb-grafiek-tabel{margin:6px 0 0}
.yb-grafiek-tabel>summary{cursor:pointer;color:var(--diep);font-weight:700;font-size:.86rem;padding:6px 0;width:max-content}
.yb-waardetabel{width:100%;max-width:640px;border-collapse:collapse;margin-top:4px;font-size:.84rem;font-variant-numeric:tabular-nums}
.yb-waardetabel th{text-align:left;padding:8px 10px 8px 0;border-bottom:1px solid var(--lijn);color:var(--grijs);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em}
.yb-waardetabel td{padding:9px 10px 9px 0;border-bottom:1px solid var(--lijn-licht);vertical-align:top}
.yb-tabel-boven{color:var(--rood);font-weight:700;font-size:.78rem}
/* geen display:flex: dan verdwijnt het uitklap-driehoekje (zie .toewijs-meer>summary) */
@media(pointer:coarse){.yb-grafiek-tabel>summary{min-height:48px;box-sizing:border-box;padding-top:12px;padding-bottom:12px}}
.yb-staaf{display:block;flex:0 0 auto;width:16px;border-radius:4px 4px 0 0;background:var(--diep);min-height:2px}
.yb-staaf.na24{background:var(--oranje)}
.yb-staaf.tijdens.boven{background:var(--rood)}
.yb-staaf.last{width:34px;background:var(--groen)}
.yb-staaf.last.stijging{background:var(--oranje)}
.yb-staaflabel{color:var(--grijs);font-size:.66rem;white-space:nowrap;height:var(--yb-label,auto);line-height:var(--yb-label,normal)}
.yb-grenslijn{position:absolute;left:0;right:0;bottom:calc(var(--yb-label) + var(--yb-plot) * var(--t,0));border-top:2px dashed var(--rood);pointer-events:none;z-index:1}
.yb-grenslijn span{position:absolute;right:0;top:-9px;background:var(--wit);padding:0 4px;color:var(--rood);font-size:.66rem;font-weight:800}

/* v15.7.6 — Deze week naast de signalen. */
.yb-dossier-kolommen{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.yb-zijkolom{position:sticky;top:16px}
.yb-week dl{margin:0}
.yb-weekrijen>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px solid var(--lijn-licht)}
.yb-weekrijen>div:last-child{border-bottom:0}
.yb-weekrijen dt{color:var(--grijs);font-size:.8rem}
.yb-weekrijen dd{margin:0;font-weight:800;color:var(--inkt);white-space:nowrap}
.yb-delta{margin-left:6px;font-size:.78rem;color:var(--grijs)}
.yb-delta.op{color:var(--oranje-inkt)}
.yb-delta.neer{color:var(--groen-inkt)}
.yb-boven{color:var(--rood-inkt)}
@container inhoud (max-width:900px){.yb-dossier-kolommen{grid-template-columns:1fr}.yb-zijkolom{position:static}}
/* v15.7.7 — programma en oefenbibliotheek als leesbaar overzicht. */
.yb-programmakop{margin-top:6px}
.yb-weekblok .panel-head{margin-bottom:6px}
.yb-sessielijst{list-style:none;margin:0;padding:0;display:grid;gap:0}
.yb-sessie{padding:12px 0;border-bottom:1px solid var(--lijn-licht)}
.yb-sessie:last-child{border-bottom:0}
.yb-sessie-kop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.yb-sessie p{margin:3px 0 0;font-size:.8rem}
.yb-sessie a{font-size:.72rem;font-weight:800;color:var(--deep)}
.yb-status{flex:0 0 auto;border-radius:999px;padding:3px 9px;font-size:.66rem;font-weight:850;background:var(--lijn-licht);color:var(--grijs)}
.yb-status.uitgevoerd{background:var(--groen-zacht);color:var(--groen-inkt)}
.yb-status.onvolledig{background:#FFF1CC;color:#7A4605}   /* v15.219.0 */
.yb-status.overgeslagen{background:var(--oranje-zacht);color:var(--oranje-inkt)}
.yb-oefentabel{width:100%;border-collapse:collapse;margin-top:6px;font-size:.84rem}
.yb-oefentabel th{text-align:left;padding:8px 10px 8px 0;border-bottom:1px solid var(--lijn);color:var(--grijs);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em}
.yb-oefentabel td{padding:11px 10px 11px 0;border-bottom:1px solid var(--lijn-licht);vertical-align:top}
.yb-oefentabel td:first-child strong{display:block}
.yb-oefentabel .yb-sub{display:block;font-size:.74rem}
/* v15.224.0 (T5-8): de derde kolom is nu Gewicht; op de telefoon valt Doel-RPE (de vierde) weg, zoals voorheen */
@media(max-width:700px){.yb-oefentabel th:nth-child(4),.yb-oefentabel td:nth-child(4){display:none}}
/* v15.8.0 — de voorstelkaart. Zandkleur uit de tokens: het vraagt aandacht, maar het
   is geen signaal -- de fysiotherapeut beslist. */
/* v15.9.0 -- de zojuist toegepaste aanpassing, met de knop om hem terug te draaien. */
.yb-teruggedraaid{margin-top:12px;border-color:var(--lijn-zacht);background:var(--vlak-2)}
.yb-teruggedraaid .yb-voorstel-tekst{margin:0 0 10px}
.yb-voorstel{background:var(--zand-zacht);border-color:var(--zand-rand)}
.yb-voorstel-tekst{margin:2px 0 10px;font-size:.86rem;color:var(--inkt)}
.yb-voorstel .yb-rij{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.yb-voorstel form{margin:0}

/* ──────────────────────────── v15.18.0: de praktijkbibliotheek

   Een lijst die groeit met de praktijk, dus kaarten en geen tabel: een instructie
   van drie regels moet niet de kolombreedte van alle andere bepalen. */
.bib-filters{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:12px;align-items:end;
  background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:14px 16px;margin:14px 0}
.bib-filters label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--grijs)}
.bib-filters label span{font-weight:700;color:var(--inkt)}
.bib-filters input,.bib-filters select{padding:9px 10px;border:1px solid var(--lijn);
  border-radius:8px;font:inherit;background:var(--wit);min-width:0}
.bib-filters .bib-archief{flex-direction:row;align-items:center;gap:8px;grid-column:1/-1}
.bib-filters .yb-rij{grid-column:1/-1}
@media(max-width:900px){.bib-filters{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.bib-filters{grid-template-columns:1fr}}

.bib-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin:18px 0 10px}
.bib-teller{font-size:13px;color:var(--grijs);font-weight:700}

.bib-lijst{display:grid;gap:12px}
.bibkaart{background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:14px 16px}
.bibkaart.gearchiveerd{background:var(--vlak-2);opacity:.75}
.bibkaart-kop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bibkaart-kop h3{margin:0;font-size:17px;color:var(--diep)}
.bib-chip{font-size:11.5px;font-weight:700;letter-spacing:.03em;padding:3px 9px;
  border-radius:999px;background:var(--hover);color:var(--diep);border:1px solid var(--lijn)}
.bib-chip.zacht{background:transparent;color:var(--grijs)}
.bib-chip.archief{background:var(--oranje-zacht);border-color:var(--oranje);color:#7A4605}
.bibkaart-dosis{margin:8px 0 0;font-size:13px;color:var(--grijs)}
.bibkaart-instructie{margin:6px 0 0;font-size:13.5px}
.bibkaart-voet{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid var(--lijn-licht)}
.bib-media{font-size:12.5px;color:var(--grijs)}

.bib-form .bib-groep{margin:22px 0 2px;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--grijs)}
.bib-form .bib-groep:first-of-type{margin-top:4px}
.bib-groephint{margin:0 0 6px;font-size:13px;color:var(--grijs)}
.bib-drie{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.bib-koppel{grid-template-columns:2fr 1fr}
.bib-half{max-width:calc(33% - 8px)}
@media(max-width:700px){.bib-drie{grid-template-columns:1fr}.bib-half{max-width:none}}

.bib-archiveer{margin-top:22px;padding-top:16px;border-top:1px solid var(--lijn);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bib-archiveer small{font-size:12.5px;color:var(--grijs);max-width:52ch}

.yb-leeg{background:var(--vlak-2);border:1px dashed var(--lijn);border-radius:10px;
  padding:16px 18px;color:var(--grijs)}

.yb-melding.goed{background:var(--groen-zacht);color:#1E5637;border:1px solid #9CC9AE}
.yb-melding.fout{background:var(--rood-zacht);color:var(--rood);border:1px solid #E7A9A4}

/* v15.19.0: de foto bij een bibliotheekoefening. */
.bibkaart-beeld{float:right;width:104px;height:78px;object-fit:cover;border-radius:8px;
  border:1px solid var(--lijn);margin:0 0 8px 14px}
.bib-foto{margin:4px 0 0}
.bib-foto-beeld{max-width:260px;border-radius:10px;border:1px solid var(--lijn);display:block}
.bib-foto-leeg{margin:0;color:var(--grijs);font-size:13.5px}
.bib-fotoform,.bib-fotoweg{margin-top:14px;display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.bib-fotokies{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--grijs)}
.bib-fotokies span{font-weight:700;color:var(--inkt)}
@media(max-width:560px){.bibkaart-beeld{float:none;width:100%;height:150px;margin:0 0 10px}}

/* v15.20.0: kiezen wie wat krijgt. */
.toewijs-lijst{display:grid;gap:2px;margin:6px 0 18px;border:1px solid var(--lijn);
  border-radius:10px;overflow:hidden;background:var(--lijn)}
.toewijs-rij{display:flex;align-items:center;gap:12px;background:var(--wit);
  padding:11px 14px;cursor:pointer;flex-wrap:wrap}
.toewijs-rij:hover{background:var(--hover)}
.toewijs-rij.heeft-al{background:var(--vlak-2);cursor:default;color:var(--grijs)}
.toewijs-rij.heeft-al:hover{background:var(--vlak-2)}
.toewijs-rij input{width:18px;height:18px;flex:0 0 auto}
.toewijs-naam{display:flex;flex-direction:column;gap:2px;font-weight:700;flex:1 1 220px}
.toewijs-naam .yb-sub{font-weight:400;font-size:12.5px;color:var(--grijs)}
.toewijs-status{font-size:12.5px;color:var(--grijs);font-weight:400}
.bibkaart-knoppen{display:flex;gap:8px;flex-wrap:wrap}
/* v15.196.0 - de per-rij Toewijzen krijgt een groene rand: rustiger dan de groen-gevulde bulk-knop, net iets prominenter dan Bewerken. */
.bibkaart-toewijs{border-color:var(--deep)}
/* v15.197.0 - op het bulk-scherm staat de bevestiging (groen) op zichzelf; Annuleren wordt een rustige grijze uitweg met ruimte ervoor. */
.bulk-annuleer{margin-left:16px;background:transparent;border-color:transparent;color:var(--grijs)}
.bulk-annuleer:hover{background:#f3f8f5;color:var(--inkt)}
.yb-melding.let-op{background:var(--oranje-zacht);color:#7A4605;border:1px solid var(--oranje)}
.toewijs-status.let-op{color:var(--rood);font-weight:700}

/* v15.21.0: de startset. */
.bib-kopknoppen{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bib-startset{margin:0}
.bib-startkaart{background:var(--wit);border:1px solid var(--lijn);border-left:4px solid var(--diep);
  border-radius:12px;padding:16px 18px;margin-bottom:14px}
.bib-startkaart h2{margin:0 0 6px;font-size:18px;color:var(--diep)}
.bib-startkaart p{margin:0 0 8px;font-size:14px}
.bib-startkaart-klein{font-size:13px!important;color:var(--grijs);margin-bottom:0!important}

/* v15.22.0: zoeken staat los van filteren en is dus ook los te zien. */
.bib-zoekbalk{display:flex;gap:10px;align-items:stretch;margin:14px 0 10px}
.bib-zoekbalk label{flex:1 1 auto;display:flex;min-width:0}
.bib-zoekbalk input{flex:1 1 auto;min-width:0;padding:12px 14px;font:inherit;font-size:15px;
  border:1.5px solid var(--lijn);border-radius:10px;background:var(--wit)}
.bib-zoekbalk input:focus{outline:2px solid var(--diep);outline-offset:1px;border-color:var(--diep)}
.bibkaart[hidden]{display:none!important}
@media(max-width:560px){.bib-zoekbalk{flex-wrap:wrap}}

/* Een label dat alleen voor een schermlezer bestaat. Dezelfde regel als in
   patient.css; een placeholder is geen label. */
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important
}

/* v15.23.0: de zoekterm oplichten.

   --zand is dezelfde markeerkleur als het actieve tabblad in de patientapp.
   Gemeten tegen --inkt: 12,9:1, ruim boven de 4,5:1 die kleine tekst nodig heeft.
   Een rand erbij, want kleur alleen is geen markering voor wie hem niet ziet. */
mark.zoektreffer{
  background:var(--zand);color:var(--inkt);border-radius:3px;padding:0 2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.12);
}
.bib-teller.zoekt{
  color:var(--diep);background:var(--zand-zacht);border:1px solid var(--zand);
  border-radius:999px;padding:4px 12px;
}
@media (prefers-contrast:more){
  mark.zoektreffer{box-shadow:0 0 0 1.5px var(--inkt)}
}

/* ═══════════════ v15.26.7 - de praktijkkant op een telefoon ═══════════════

   Nagemeten op 320, 360, 390 en 430px over zeven praktijkpagina's. Geen ervan schuift
   horizontaal; dat was al in orde. Wat wel opviel staat hieronder. */

/* Safari op iOS zoomt in op een invoerveld zodra je het aanraakt, als de letters
   kleiner zijn dan 16px. Je tikt op een zoekveld en het hele scherm springt; daarna moet
   je terugknijpen. Gemeten: de filterbalk stond op 14.5px, de keuzelijsten in de
   oefenbibliotheek zelfs op 13px. Alleen op telefoonbreedte, want op de praktijkschermen
   zelf is de kleinere maat een bewuste keuze. */
@media(max-width:560px){
  /* Op de selectors die de maten werkelijk zetten. Een eerste poging met kale
     elementselectors raakte alleen wat toevallig een type-selector had: q wel
     (input[type=search] wint van .yb-zoekveld), status_filter en sort niet. */
  .yb-zoekveld, .yb-veld select, .yb-veld input,
  .yb-kaart-form input, .yb-kaart-form select, .yb-kaart-form textarea,
  .bib-zoekbalk input,
  .bib-filters input, .bib-filters select,
  .rowform label input, .import-form label input{font-size:16px}
  /* De opschriften boven die velden blijven klein; alleen wat je aanraakt telt. */
  .bib-filters label{font-size:13px}
}

/* Terug naar de werklijst was 19px hoog: een kale tekstlink zonder ruimte eromheen,
   terwijl het de belangrijkste weg terug is. Apple houdt 44px aan, Android 48; sinds
   v15.26.8 is Android ook uitgangspunt, dus 48 is de maat geworden. */
@media(max-width:560px){
  .yb-terug-overzicht{padding:14px 2px;margin:0 0 4px;font-size:.86rem;min-height:48px;
    display:flex;align-items:center}
}

/* De inklapknop van de werklijst was 32x30. Een misser laadt niet de verkeerde pagina,
   maar klapt wel iets weg wat je juist wilde lezen. */
@media(max-width:560px){
  .yb-inklap{min-width:48px;min-height:48px;display:inline-grid;place-items:center}
}

/* v15.35.0 - de melding na het toewijzen draagt nu namen en een weg erheen. */
.yb-melding-kop{margin:0;font-weight:700}
/* v15.215.0: een melding met een lijst of toelichting onder elkaar, niet in kolommen naast elkaar */
.yb-melding:has(> .yb-melding-lijst),.yb-melding:has(> .yb-melding-nuance){display:block}
.yb-programmapanel .panel-head .panel-acties a{white-space:nowrap}
.yb-melding-lijst{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.yb-melding-lijst a{display:inline-flex;align-items:center;gap:8px;min-height:40px;
 padding:7px 12px;border-radius:8px;border:1px solid var(--lijn);background:var(--wit);
 color:var(--diep);font-weight:700;text-decoration:none}
.yb-melding-lijst a:hover{background:#F2F8F5}
.yb-melding-code{color:var(--grijs);font-weight:600;font-size:.82em}
.yb-melding-pijl{color:var(--grijs)}
.yb-melding-nuance{margin:8px 0 0;color:var(--grijs);font-size:.86em}

/* v15.35.0 - 'rood -> oranje -> groen' benoemt kleuren; laat ze dan ook zien.
   Vet erbij, want deze tinten zijn op een lichte ondergrond minder sterk dan zwart. */
.triage-woord{font-weight:800}
.triage-woord.rood{color:var(--rood)}
.triage-woord.oranje{color:#A85F08}
.triage-woord.groen{color:#1F6B42}

/* v15.28.0 - herkomst van een oefening, en de nuance bij de startdosering. */
.bibkaart-herkomst{display:flex;flex-wrap:wrap;gap:4px 6px;margin:6px 0 0;
  font-size:.72rem;color:var(--grijs)}
.bib-let-op{border-left:3px solid var(--oranje);background:var(--zand-zacht);
  border-radius:6px;padding:8px 10px;color:var(--inkt)}
.bib-let-op strong{color:var(--diep)}


/* v15.50.0 — de beeldbibliotheek.

   Een raster van vaste vakken in plaats van kaarten op inhoudshoogte: de illustraties
   lopen van 250 x 641 tot 1484 x 1060, en zonder vast vak springt de rij uit elkaar.
   object-fit: contain laat elke verhouding heel binnen dat vak. */
.beeld-raster{display:grid;gap:14px;margin-top:14px;align-items:start;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.beeldtegel{display:flex;flex-direction:column;gap:8px;padding:10px;
  background:var(--papier);border:1px solid var(--rand);border-radius:12px}
.beeldtegel-beeld{display:block;height:170px;border-radius:8px;overflow:hidden;
  background:#fff;border:1px solid var(--rand)}
.beeldtegel-beeld img{width:100%;height:100%;object-fit:contain}
/* v15.65.0 - bij 'Man en vrouw' staan beide uitvoeringen naast elkaar in de tegel. */
.beeldtegel-beeld.paar{display:flex;gap:2px}
.beeldtegel-beeld.paar img{width:50%}
.beeldtegel-titel{margin:0;font-size:.95rem;line-height:1.3}
.beeldtegel-chips{display:flex;flex-wrap:wrap;gap:4px;margin:0}
.bib-chip.alleen{background:var(--zand);color:var(--inkt-zacht)}
.beeldtegel-knop{margin-top:auto;text-align:center}
.beeldtegel-kiezen{display:flex;gap:6px;margin-top:auto}
.beeldtegel-kiezen form{flex:1}
.beeldtegel-kiezen button{width:100%}

/* Het keuzescherm: de uitvoeringen naast elkaar, zo groot als ze zijn. */
.beeldkiezer{display:flex;flex-wrap:wrap;gap:16px;margin:14px 0}
.beeldkiezer-vak{margin:0;flex:1 1 280px;max-width:420px;padding:10px;
  background:#fff;border:1px solid var(--rand);border-radius:12px;text-align:center}
.beeldkiezer-vak img{max-width:100%;height:auto}
.beeldkiezer-vak figcaption{margin-top:6px;font-size:.85rem;color:var(--inkt-zacht)}
.beeldform{margin-top:18px}
.bib-kiesuit{margin:0 0 10px}
.bib-kiesuit small{display:block;margin-top:4px}

@media (max-width:640px){
  /* v15.192.0 - telefoon: 1 kolom, groter beeld (de man/vrouw-paren waren op twee
     kolommen te klein om de uitvoering te zien). De lijst wordt langer; de zoekbalk
     blijft sticky en de regio/spiergroep-filters korten de lijst in. */
  .beeld-raster{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
  .beeldtegel-beeld{height:260px}
}


/* v15.53.0 — de kopbalk op een regel, ook ingezoomd.

   Met de vierde bestemming (Beeldbibliotheek, v15.50.0) paste de balk niet meer. Tussen
   940 en 1180 CSS-pixels breed -- een laptop op 125% zoom zit daar middenin -- stak
   Uitloggen rechts buiten het venster, en tot 1420 brak de balk over twee of drie regels
   omdat "Alle sessies uitloggen" zich over drie regels vouwde.

   Knoppen breken niet meer af; in plaats daarvan valt er stapsgewijs iets weg of wordt
   het compacter, van minst naar meest nodig: eerst het tagline naast het logo, dan het
   e-mailadres, dan wat lucht, en pas als laatste de knop Alle sessies uitloggen -- die
   stond onder 520 pixels al niet in de balk. Onder 900 verdwijnt het menu, zoals al zo
   was. */
@media(min-width:901px){.serverbar{flex-wrap:nowrap}}
.server-nav{flex-wrap:nowrap;flex-shrink:0}
.server-navlink,.server-account .button-ghost{white-space:nowrap}
.server-account{flex-shrink:0}
@media(max-width:1440px){.server-product{display:none}}
@media(max-width:1260px){
  .server-account>span{display:none}
  .serverbar{gap:14px;padding:8px 18px}
  .server-brand img{width:156px;height:42px}
  .server-account{gap:10px}
}
@media(max-width:1080px){
  .server-nav{gap:3px;margin-left:0}
  .server-navlink{padding:7px 9px;font-size:.84rem}
  .server-account .button-ghost{padding:9px 12px}
}
/* v15.83.0 -- Inter is breder: de tweede uitlogknop (alle sessies) past met de rest van de
   balk pas vanaf ~1120px; hij stond op 1000. De gewone Uitloggen blijft altijd bereikbaar. */
@media(max-width:1119px){
  .server-account form:first-of-type{display:none}
}


/* v15.54.0 — het inhoudsvlak kijkt naar zijn eigen breedte.

   De regels hierboven schakelen op de breedte van het venster, maar tussen 900 en 1150
   staat de werklijst links in beeld en houdt het inhoudsvlak er maar 555 tot 755 over.
   Het signalenblok zette dan nog steeds zijn tekst naast vier tegels met een minimum van
   460 -- dat zat er al in sinds v15.5.3 -- en stak tot 192 pixels rechts uit. Ingezoomd
   op een laptop valt de pagina precies in dat gebied. Het filterformulier van de
   oefenbibliotheek had hetzelfde, in het klein.

   Een container query op het inhoudsvlak: het maakt dan niet uit of de werklijst open of
   ingeklapt is, of hoe ver er is ingezoomd. */
.yb-dossier{container-type:inline-size;container-name:inhoud}
@container inhoud (max-width:780px){
  .triage-dashboard{grid-template-columns:1fr}
  
}
@container inhoud (max-width:680px){
  .bib-filters{grid-template-columns:1fr 1fr}
}
/* De patientkaart in de werklijst: naam en signalen links, knoppen rechts die niet
   afbreken. Onder 800 venster ging hij al onder elkaar; nu ook in een smal inhoudsvlak. */
@container inhoud (max-width:960px){
  .patient-card{align-items:flex-start;flex-direction:column}
  .patient-actions{justify-content:flex-start;width:100%;flex-wrap:wrap}
}
/* Formulieren met drie velden naast elkaar: een lange optie in een keuzelijst maakte de
   kolom breder dan er ruimte was. */
.bib-drie>*{min-width:0}
.bib-drie select,.bib-drie input{max-width:100%}
@container inhoud (max-width:620px){
  .bib-drie{grid-template-columns:1fr}
  .bib-half{max-width:none}
}


/* v15.63.0 - meervoudige spiergroep-filter: een <details> met vinkjes in de plaats van de
   enkele keuzelijst, zodat je meerdere spieren tegelijk kunt kiezen. */
.bib-multi-cel{display:flex;flex-direction:column;gap:5px;align-self:end;min-width:0}
.bib-multi-kop{font-weight:700;color:var(--inkt);font-size:13px}
.bib-multi{position:relative;border:1px solid var(--lijn);border-radius:9px;background:var(--wit)}
.bib-multi>summary{list-style:none;cursor:pointer;padding:9px 10px;display:flex;
  align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:var(--inkt)}
.bib-multi>summary::-webkit-details-marker{display:none}
.bib-multi>summary::after{content:"";flex:0 0 auto;width:10px;height:7px;background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='7'%20viewBox='0%200%2010%207'%3E%3Cpath%20d='M0%200h10L5%207z'%20fill='%235E706C'/%3E%3C/svg%3E") no-repeat center;background-size:10px 7px;transition:transform .12s}
.bib-multi[open]>summary::after{transform:rotate(180deg)}
/* zweeft over de rij eronder, zoals een gewone keuzelijst; geen layout-verschuiving */
.bib-multi-lijst{position:absolute;left:0;right:auto;top:calc(100% + 3px);z-index:25;
  min-width:100%;width:max-content;max-width:340px;
  max-height:250px;overflow:auto;padding:6px 10px 10px;display:grid;gap:1px;
  background:var(--wit);border:1px solid var(--lijn);border-radius:9px;
  box-shadow:0 10px 24px rgba(20,64,60,.16)}
.bib-multi-lijst .bib-multi-optie{display:flex;flex-direction:row;align-items:center;gap:8px;
  font-size:13px;font-weight:400;color:var(--inkt);padding:4px 2px;cursor:pointer;white-space:nowrap}
.bib-multi-optie input{flex:0 0 auto}

/* v15.90.0 - native keuzelijsten dezelfde moderne look als de .bib-multi-lijsten:
   geen systeempijl maar hetzelfde grijze driehoekje (\25BE) rechts. !important overrulet
   de verspreide background:var(--wit)-regels zonder de achtergrondkleur aan te raken. */
select{
  -webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='7'%20viewBox='0%200%2010%207'%3E%3Cpath%20d='M0%200h10L5%207z'%20fill='%235E706C'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 11px center!important;
  background-size:10px 7px!important;
  padding-right:30px!important;
}

/* v15.73.0 - meelopende rondleiding in de fysio-app. Zelfde spotlight als de patientapp,
   hier in de gedeelde shell: wijst de werklijst, de bibliotheken en 'Nieuwe patient' aan.
   Boven de sticky serverbar (z-index 40). Stand per apparaat in localStorage. */
.fob-herstart{min-width:34px;width:34px;height:34px;min-height:34px;padding:0;border-radius:50%;font-size:1rem;font-weight:800;line-height:1}
.onboarding{position:fixed;inset:0;z-index:9000}
.onboarding[hidden]{display:none}
.ob-tip [hidden]{display:none}
.ob-catch{position:fixed;inset:0;z-index:9000;background:transparent;transition:background .2s}
.onboarding.ob-centraal .ob-catch{background:rgba(16,33,31,.55)}
.ob-spot{position:fixed;z-index:9001;border-radius:10px;pointer-events:none;
  box-shadow:0 0 0 2px #fff, 0 0 0 9999px rgba(16,33,31,.55);transition:top .35s cubic-bezier(.4,0,.2,1),left .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1),height .35s cubic-bezier(.4,0,.2,1)}
.ob-spot[hidden]{display:none}
.ob-tip{position:fixed;z-index:9002;background:var(--wit);border-radius:14px;width:min(360px,calc(100vw - 32px));
  padding:16px 18px 14px;box-shadow:0 14px 44px rgba(0,0,0,.28);display:flex;flex-direction:column;gap:9px;color:var(--inkt);transition:top .35s cubic-bezier(.4,0,.2,1),left .35s cubic-bezier(.4,0,.2,1),transform .35s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){.ob-spot,.ob-tip,.ob-catch{transition:none}}
.onboarding-voortgang{display:flex;gap:7px}
.ob-stip{width:8px;height:8px;border-radius:50%;background:var(--lijn);transition:transform .15s,background .15s}
.ob-stip.gedaan{background:var(--groen)}
.ob-stip.aan{background:var(--diep);transform:scale(1.3)}
.ob-badge{align-self:flex-start;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--diep);background:var(--hover);border-radius:999px;padding:3px 9px}
.ob-tip h2{margin:2px 0;font-size:1.08rem;color:var(--inkt)}
.ob-tip p{margin:0;line-height:1.5;color:var(--grijs);font-size:.92rem}
.onboarding-knoppen{display:flex;align-items:center;gap:8px;margin-top:4px}
.onboarding-knoppen [data-fob-volgende]{margin-left:auto}
.onboarding-knoppen .button-secondary,.onboarding-knoppen .button-primary{padding:8px 14px;font-size:.88rem}
.onboarding-overslaan{background:none;border:0;color:var(--grijs);text-decoration:underline;cursor:pointer;font-size:.82rem;padding:5px;min-height:0}
.onboarding-overslaan:hover{background:none;color:var(--diep)}

/* v15.82.0 - de PWA-installatiebanner voor de fysio-app (niet-blokkerend). */
.pwa-install{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:12px;display:flex;justify-content:center;pointer-events:none}
.pwa-install[hidden]{display:none}
.pwa-install-kaart{pointer-events:auto;background:var(--wit);border:1px solid var(--lijn);border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.18);padding:14px 16px;max-width:440px;width:100%;display:flex;flex-direction:column;gap:9px}
.pwa-install-kop{display:flex;align-items:center;gap:9px;font-size:1rem;color:var(--inkt)}
.pwa-install-icoon img{width:28px;height:28px;display:block}
.pwa-install p{margin:0;line-height:1.45;color:var(--grijs);font-size:.9rem}
.pwa-deel{vertical-align:-3px;color:var(--diep)}
.pwa-install-knoppen{display:flex;gap:8px;justify-content:flex-end;margin-top:2px}
.pwa-install-knoppen .button-primary,.pwa-install-knoppen .button-secondary{min-height:44px}

.yb-instelbalk{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:8px;border:1px solid var(--lijn-zacht);border-radius:14px;background:var(--vlak-2)}
.yb-instelbalk .kop{flex:1 1 100%;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--grijs);padding:4px 8px 0}
.yb-instelstap{display:flex;align-items:center;gap:10px;flex:1 1 190px;min-width:0;padding:9px 12px;border-radius:10px;text-decoration:none;color:var(--inkt);background:var(--wit);border:1px solid var(--lijn-zacht)}
.yb-instelstap:hover{background:var(--hover);border-color:var(--lijn)}
.yb-instelstap .merk{flex:0 0 26px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;background:var(--diep);color:#fff}
.yb-instelstap.klaar .merk{background:var(--groen)}
.yb-instelstap .tekst{min-width:0}
.yb-instelstap .tekst strong{display:block;font-size:13.5px;font-weight:600;line-height:1.25}
.yb-instelstap .tekst span{display:block;font-size:11.5px;color:var(--grijs)}
.yb-instelstap.klaar .tekst span{color:var(--groen-inkt)}
@media(max-width:700px){.yb-instelstap{flex:1 1 100%}}

/* v15.125.0 - meervoudige selectie + bulk-toewijzen op het oefenbibliotheek-overzicht */
.bibkaart-kies{display:inline-flex;align-items:center}
.bibkaart-kies input{width:15px;height:15px;cursor:pointer;accent-color:var(--diep)}
.bib-selbalk{position:sticky;top:8px;z-index:6;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 14px;padding:10px 14px;background:var(--diep);color:#fff;border-radius:12px;box-shadow:0 6px 18px rgba(20,64,60,.22)}
.bib-selbalk .bib-sel-teller{font-weight:600}
.bib-selbalk .button-secondary{background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff}
.bib-selbalk .button-secondary:hover{background:rgba(255,255,255,.12)}
.toewijs-oeflijst{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}

/* v15.126.0 - een gezien triagesignaal blijft staan maar wordt gedempt en gemarkeerd */
.triage-event.status-seen{opacity:.6}
.triage-event.status-seen strong{font-weight:600}
.triage-gezien{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;background:var(--vlak-2,#eef2f0);color:var(--grijs,#5b6b66);font-size:11px;font-weight:600;vertical-align:middle}

/* v15.127.0 - een afgehandeld tijdlijn-signaal: titel gedempt zodat de signaalnaam (bv. 'Herstelmeting open') niet meer als actuele status botst met 'Signaal afgehandeld' */
.timeline-item.wf-resolved .timeline-title strong{opacity:.72;font-weight:650}
.timeline-item.wf-resolved .timeline-body{background:#f4faf6;border-color:#d6e8dd}

/* v15.128.0 - beeldbibliotheek: een beeld aan meerdere oefeningen koppelen (scrollbare lijst) */
.beeld-koppel-lijst{max-height:340px;overflow:auto;border:1px solid var(--line);border-radius:12px;padding:6px}

/* v15.130.0 - een geslaagde melding vervaagt vanzelf na wat scrollen */
.yb-melding{transition:opacity .5s ease}
.yb-melding.weg{opacity:0}

/* v15.131.0 - versie-melding voor de fysio-dashboardpagina's (zoals de patientapp) */
.update-banner{position:sticky;top:0;z-index:120;display:flex;align-items:center;justify-content:center;gap:10px 14px;flex-wrap:wrap;padding:10px 16px;background:#fff6db;border-bottom:1px solid #e5c978;color:#51400e;box-shadow:0 4px 16px rgba(20,64,60,.10)}
.update-banner[hidden]{display:none}
.update-banner strong{color:#332900}
.update-banner button{border:0;border-radius:999px;background:#14403c;color:#fff;font-weight:800;padding:8px 13px;cursor:pointer}

/* v15.132.0 - klinische samenvatting / verwijsbrief (aparte printbare pagina) */
.vb-body{background:#eef2f0;margin:0;color:var(--deep,#14403c)}
.vb-acties{max-width:820px;margin:0 auto;padding:16px 24px 0;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.verwijsbrief{max-width:820px;margin:16px auto 40px;background:#fff;border:1px solid var(--line,#dfe8e5);border-radius:14px;padding:32px 36px;box-shadow:0 8px 30px rgba(20,64,60,.08)}
.vb-kop{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;border-bottom:2px solid var(--deep,#14403c);padding-bottom:16px;margin-bottom:8px}
.vb-merk{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--deep,#14403c)}
.vb-kop h1{margin:.2rem 0 .3rem;font-size:1.6rem}
.vb-sub{margin:0;max-width:46ch;color:var(--muted,#5b6b66);font-size:.8rem;line-height:1.45}
.vb-meta{margin:0;display:grid;gap:4px;font-size:.82rem;min-width:220px}
.vb-meta div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dotted #d6e0dc;padding-bottom:3px}
.vb-meta dt{color:var(--muted,#5b6b66)}
.vb-meta dd{margin:0;font-weight:700;text-align:right}
.vb-blok{margin-top:22px}
.vb-blok h2{font-size:1.05rem;margin:0 0 10px;padding-bottom:5px;border-bottom:1px solid var(--line,#dfe8e5)}
.vb-datum{font-size:.72rem;font-weight:600;color:var(--muted,#5b6b66)}
.vb-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.vb-stats div{background:#f4f9f7;border:1px solid var(--line,#dfe8e5);border-radius:10px;padding:10px 12px;font-size:.76rem;color:var(--muted,#5b6b66)}
.vb-stats span{display:block;font-size:1.5rem;font-weight:800;color:var(--deep,#14403c);line-height:1.1;margin-bottom:2px}
.vb-grenzen{margin:0;display:grid;gap:5px}
.vb-grenzen div{display:flex;justify-content:space-between;gap:16px;font-size:.84rem;border-bottom:1px dotted #d6e0dc;padding-bottom:4px}
.vb-grenzen dt{color:var(--muted,#5b6b66)}
.vb-grenzen dd{margin:0;font-weight:700}
.vb-h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted,#5b6b66);margin:16px 0 6px}
.vb-vlaggen{margin:0;padding-left:20px;font-size:.84rem;line-height:1.5}
.vb-advies{font-size:.82rem;background:#fff6db;border:1px solid #e4c67f;border-radius:8px;padding:8px 10px;margin:8px 0 0;color:#604915}
.vb-tabel{width:100%;border-collapse:collapse;font-size:.8rem}
.vb-tabel th,.vb-tabel td{text-align:left;padding:6px 8px;border-bottom:1px solid #e6edea}
.vb-tabel th{font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted,#5b6b66);border-bottom:1.5px solid var(--line,#dfe8e5)}
.vb-tabel td.vb-num{text-align:center;font-variant-numeric:tabular-nums}
.vb-rij-signaal{background:#fff9f3}
/* v15.133.0 - print-vaste markering: randen en vet drukken altijd af, een achtergrondtint niet */
.vb-rij-signaal td:first-child{border-left:3px solid #c0453b}
.vb-rij-signaal td:last-child{font-weight:700;color:#9a2a22}
.vb-voetnoot{font-size:.72rem;color:var(--muted,#5b6b66);line-height:1.45;margin:10px 0 0}
.vb-leeg{color:var(--muted,#5b6b66);font-size:.85rem}
.vb-voet{margin-top:26px;border-top:1px solid var(--line,#dfe8e5);padding-top:10px;font-size:.7rem;color:var(--muted,#5b6b66)}
@media print{
  .vb-body{background:#fff}
  .no-print{display:none!important}
  .verwijsbrief{max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;padding:0}
  .vb-tabel tr{page-break-inside:avoid}
  .vb-blok{page-break-inside:avoid}
  @page{margin:16mm}
}

/* v15.138.0 - werklijstkaarten: signaalregels per kaart in-/uitklapbaar (rustiger overzicht) */
.card-signalen-toggle{display:inline-flex;align-items:center;gap:6px;margin-top:9px;background:#fff;border:1px solid var(--line,#dfe8e5);border-radius:8px;padding:4px 11px;font-size:.78rem;font-weight:600;color:var(--deep,#14403c);cursor:pointer}
.card-signalen-toggle:hover{background:#f4f9f7}
.card-signalen-toggle .chev{font-size:.95rem;transition:transform .15s ease}
.patient-card.card-collapsed .card-signalen-toggle .chev{transform:rotate(-90deg)}
.patient-card.card-collapsed .triage-event-list{display:none}

/* v15.139.0 - knop om de hele werklijst in een keer in-/uit te klappen */
.worklist-bulk{display:flex;justify-content:flex-end;margin:2px 0 10px}
.worklist-bulk-btn{background:#fff;border:1px solid var(--line,#dfe8e5);border-radius:8px;padding:5px 12px;font-size:.78rem;font-weight:600;color:var(--deep,#14403c);cursor:pointer}
.worklist-bulk-btn:hover{background:#f4f9f7}
.worklist-bulk-btn[hidden]{display:none}

/* v15.141.0 - actieknoppen op de toewijs-pickers blijven onderaan in beeld (geen scrollen nodig) */
.plak-onder{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--wit,#fff);margin-top:10px;padding:12px 0 6px;border-top:1px solid var(--lijn)}
@media(pointer:coarse){.yb-rij-instel,.yb-chip,.yb-tab,.triage-event-actions a,.triage-event-actions button,.yb-veld select,.yb-inklap,.yb-filter-toggle,.card-signalen-toggle,.worklist-bulk-btn{min-height:48px;display:inline-flex;align-items:center}.fob-herstart{width:48px;height:48px;min-width:48px;min-height:48px}}


/* v15.168.0 - meldingen-belletje (fase 1) in de serverbalk */
.server-mel{position:relative;display:inline-flex}
.server-mel[hidden]{display:none}
.server-mel>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;position:relative;min-width:32px;min-height:32px;border-radius:50%;color:inherit}
.server-mel>summary::-webkit-details-marker{display:none}
.server-mel-badge{position:absolute;top:-3px;right:-8px;pointer-events:none;background:var(--rood);color:#fff;border-radius:999px;font-size:.7rem;line-height:1;padding:.16rem .42rem;font-weight:700;min-width:1.15rem;text-align:center;box-shadow:0 0 0 2px var(--deep)}
.server-mel-paneel{position:absolute;right:0;top:calc(100% + .45rem);z-index:60;background:var(--wit);color:var(--inkt);border:1px solid var(--lijn);border-radius:var(--r-l);box-shadow:var(--shadow);width:min(92vw,23rem);padding:.6rem}
.server-mel-kop{margin:.1rem .35rem .45rem;font-weight:700;font-size:.92rem}
.server-mel-paneel ul{list-style:none;margin:0;padding:0;max-height:60vh;overflow:auto}
.server-mel-paneel li a{display:grid;grid-template-columns:1fr auto;gap:.05rem .6rem;padding:.5rem .45rem;border-radius:var(--r-s);text-decoration:none;color:inherit}
.server-mel-paneel li a:hover,.server-mel-paneel li a:focus-visible{background:var(--hover)}
.server-mel-naam{grid-column:1;font-weight:600}
.server-mel-label{grid-column:1;color:var(--muted);font-size:.85rem}
.server-mel-datum{grid-column:2;grid-row:1;align-self:center;color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums}
.server-mel-detail{grid-column:1;color:var(--muted);font-size:.8rem;line-height:1.25}
.server-mel-voet{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.4rem}
.server-mel-voet form{flex:1 1 auto;margin:0}
.server-mel-alles{width:100%}
.server-mel-geluid{white-space:nowrap;flex:0 0 auto}
.server-mel-voet .button-ghost{color:var(--inkt);background:var(--wit);border:1px solid var(--lijn);border-radius:9px;padding:.42rem .6rem;font-size:.85rem;font-weight:600}
.server-mel-voet .button-ghost:hover,.server-mel-voet .button-ghost:focus-visible{background:var(--hover)}
@media(max-width:560px){.server-mel-paneel{position:fixed;top:58px;left:8px;right:8px;width:auto}}
@media(max-width:940px){.server-account>span{display:none}.server-account .fob-herstart{display:none}}
@media(pointer:coarse){.server-mel>summary{min-width:48px;min-height:48px;justify-content:center}.server-mel-paneel li a{min-height:48px;align-content:center}.server-mel-alles{min-height:48px}}
/* v15.235.0 (audit F-4) - 'Testgeluid' naast 'Geluid uit', met de uitleg eronder; 48px op touch */
.server-mel-testuitleg{margin:.35rem 0 0;font-size:.8rem;color:var(--grijs)}
@media(pointer:coarse){.server-mel-voet .server-mel-geluid{min-height:48px}}
/* v15.235.0 (audit F-8) - meervoudige filters weer met vinkvakken (_vinklijst.html): geen ✓ ervoor maar een vakje,
   aangevinkt donkergroen; 'Alles wissen' bovenaan; een optie zonder resultaat grijs onderaan en niet te kiezen */
.bib-vinklijst .bib-vink::before,.bib-vinklijst .bib-vink-wis::before{content:none}
.bib-vinklijst .bib-vink{gap:10px;font-weight:400;background:none}
.bib-vinklijst .bib-vink.aan{font-weight:600;background:var(--vlak-2)}
.bib-vinkvak{flex:0 0 18px;width:18px;height:18px;box-sizing:border-box;border:2px solid var(--grijs);border-radius:4px;
  background:var(--wit);display:inline-flex;align-items:center;justify-content:center}
.bib-vink.aan .bib-vinkvak{background:var(--diep);border-color:var(--diep)}
.bib-vink.aan .bib-vinkvak::after{content:"";width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;
  transform:translateY(-1px) rotate(45deg)}
.bib-vink-naam{min-width:0;overflow:hidden;text-overflow:ellipsis}
.bib-vinklijst .bib-vink.leeg{color:var(--grijs);opacity:.6;cursor:default}
.bib-vinklijst .bib-vink.leeg .bib-vinkvak{border-color:var(--lijn)}
.bib-vinklijst .bib-vink.leeg:hover{background:none}
.bib-vinklijst .bib-vink-wis{font-weight:600;color:var(--diep);text-decoration:underline;text-underline-offset:2px;
  border-bottom:1px solid var(--lijn);border-radius:7px 7px 0 0;margin-bottom:2px}
/* v15.235.0 (audit E-1) - 'Schema afgerond – nabespreken' is langer dan 'Traint niet': mag afbreken, zodat hij in een
   smalle kolom (de dossierkop op een telefoon, de werklijst) niet buiten beeld schuift */
.trouw-chip.schema-af-chip{white-space:normal;max-width:100%}
/* v15.235.0 (audit F-7) - in het Schema van het dossier: de herstelmeting van deze training is verlopen (grijs) */
.yb-herstel-verlopen{margin-top:2px;color:var(--grijs);font-style:italic}

/* v15.173.0 - voorval-groepering in de patienttijdlijn: sessie + signalen + herstel als een kaart */
.timeline-episode .timeline-body{background:#fff}
.timeline-episode.alles-afgehandeld .timeline-body{background:#f4faf6;border-color:#d6e8dd}
.episode-summary{color:var(--muted);font-size:.7rem;font-weight:700}
.episode-signals{list-style:none;margin:8px 0 0;padding:8px 0 0;border-top:1px dashed #e0e8e5;display:grid;gap:7px}
.episode-signal{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:.76rem;border-left:3px solid #cbd8d4;padding-left:9px}
.episode-signal.red{border-left-color:var(--rood)}
.episode-signal.orange{border-left-color:var(--oranje)}
.episode-signal.green{border-left-color:var(--groen)}
.episode-signal strong{font-size:.78rem}
.episode-signal .episode-detail{color:var(--muted);flex:1 1 100%}
.episode-signal.wf-resolved{opacity:.72}
.episode-dag{color:var(--muted);font-size:.68rem}

.sessie-feiten{display:flex;flex-wrap:wrap;gap:3px 18px;margin:2px 0 2px}
.sessie-feiten>div{display:flex;align-items:baseline;gap:6px}
.sessie-feiten dt{font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.sessie-feiten dd{margin:0;font-size:.82rem;color:var(--deep);font-weight:650}
.sessie-feiten dd span{color:var(--muted);font-weight:400;font-size:.72rem}
.pijn-piek{color:var(--rood)}

.triage-event .triage-event-detail{font-size:13px;color:var(--ink);line-height:1.45}

.detail-kpis>a.kpi-link{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:0 5px 18px rgba(20,64,60,.04);text-decoration:none;color:inherit;cursor:pointer;position:relative;transition:border-color .12s,box-shadow .12s}
.detail-kpis>a.kpi-link:hover,.detail-kpis>a.kpi-link:focus-visible{border-color:#afc5be;box-shadow:0 7px 22px rgba(20,64,60,.12)}
.detail-kpis>a.kpi-link::after{content:"›";position:absolute;top:8px;right:11px;color:var(--muted);font-weight:800;font-size:1rem;line-height:1}

.sig-opsomming{margin:3px 0 0;padding-left:1.15em;display:grid;gap:2px}
.sig-opsomming li{font-size:13px;color:var(--ink);line-height:1.4}
.sig-voetnoot{display:block;margin-top:4px;font-size:11px;color:var(--muted);font-style:italic}

.sig-metrics{list-style:none;margin:3px 0 0;padding:0;display:grid;gap:4px;max-width:520px}
.sig-metric{display:flex;align-items:baseline;gap:8px 12px;flex-wrap:wrap;font-size:13px;color:var(--ink)}
.sig-metric-label{font-weight:700;min-width:118px}
.sig-metric-pad{font-variant-numeric:tabular-nums}
.sig-metric-tekst{color:var(--muted)}
.sig-eind{font-weight:800}
.sig-eind.sev-red{color:var(--rood)}
.sig-eind.sev-orange{color:var(--oranje-inkt)}   /* v15.228.0 (T9-4): --oranje op wit is 3,70:1 */
.sig-pijl{color:var(--muted);font-weight:700;margin-left:2px}
.sig-ref{color:var(--muted);font-size:12px}
.sig-eind.boven{text-decoration:underline dotted;text-decoration-color:var(--muted);text-underline-offset:3px}
/* v15.181.0 UX-audit B1 */
.bib-selbalk[hidden]{display:none}
.vb-tabel-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:600px){.verwijsbrief{padding:20px 16px;margin:12px auto}.vb-tabel{font-size:.78rem}.vb-tabel th,.vb-tabel td{padding:5px 6px}.vb-tabel td:first-child{white-space:nowrap}}
/* v15.191.0: signaal-tiles wit+accent - getal in neutraal inkt, label grijs */
.triage-metrics .triage-metric strong{color:var(--inkt)}
.triage-metrics .triage-metric div span{color:var(--grijs)}

/* v15.205.0 — oefenprogramma's: kaarten met een raster van oefenplaatjes (zoals Physitrack),
   het naamscherm en het programmascherm met de dosering per oefening. */
.bib-tabs{margin-top:0}
.prog-raster{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.progkaart{display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--wit);border:1px solid var(--lijn);border-radius:12px}
.progkaart[hidden]{display:none!important}
.progkaart.gearchiveerd{background:var(--vlak-2);opacity:.75}
.progkaart-link{display:flex;flex-direction:column;gap:8px;color:inherit;text-decoration:none}
.progkaart-link:hover .progkaart-titel,.progkaart-link:focus-visible .progkaart-titel{text-decoration:underline}
.prog-mozaiek{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.prog-tegel{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--lijn-licht);border-radius:8px;background:var(--wit);color:var(--diep);font-weight:700}
.prog-tegel img{width:100%;height:100%;object-fit:contain;display:block}
.prog-letter,.prog-meer{background:var(--hover);width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.prog-meer{font-size:1.4rem;letter-spacing:.08em}
.prog-vul{background:var(--vlak-2);border-color:transparent}
.progkaart-titel{margin:0;font-size:17px;color:var(--diep)}
.progkaart-tekst{margin:0;font-size:13.5px;color:var(--inkt-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.progkaart-meta{margin:0;font-size:13px;color:var(--grijs);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.progkaart-voet{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px;padding-top:8px;border-top:1px solid var(--lijn-licht)}
.prog-regios{margin:0 0 12px}
.prog-stappen{margin:8px 0 12px;padding-left:20px}
.prog-form{max-width:880px}
.prog-form textarea{width:100%;border:1px solid var(--lijn-invoer);border-radius:11px;padding:12px 14px;background:var(--vlak-2);font:inherit;font-size:15.5px;color:var(--inkt);outline:none;resize:vertical}
.prog-form textarea:focus{border-color:var(--diep);background:var(--wit)}
.prog-form fieldset{border:0;padding:0;margin:0}
.prog-form legend{font-weight:700;color:var(--diep);margin-bottom:6px}
.prog-sessie{display:grid;gap:10px;margin:6px 0 4px!important}
.prog-dagen{display:flex;flex-wrap:wrap;gap:8px}
.prog-dagen legend{width:100%;font-weight:600;color:var(--inkt-2);font-size:14px}
.prog-dagen label{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--lijn-invoer);border-radius:999px;background:var(--wit)}
.prog-voorbeeld{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px;max-width:880px}
.prog-voorbeeld li{display:flex;align-items:center;gap:10px}
.prog-voorbeeld .prog-tegel{width:44px;flex:none}
.prog-voorbeeld-naam{font-weight:600}
.prog-toevoegform{margin-top:18px}
.prog-metaregel{margin:-4px 0 8px;font-size:13px;color:var(--grijs)}
.prog-items{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.prog-item{display:grid;gap:8px;padding:10px 12px;border:1px solid var(--lijn);border-radius:12px;background:var(--wit);scroll-margin-top:80px}
.prog-item.heeft-fout{border-color:var(--rood)}
.prog-item-kop{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.prog-item .prog-tegel{width:56px;flex:none}
.prog-nummer{min-width:22px;font-weight:700;color:var(--grijs)}
.prog-item-naam{color:var(--diep)}
.prog-item-knoppen{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.prog-pijl{min-width:40px;padding-left:10px;padding-right:10px}
/* v15.209.0 - 'Uit programma halen' herkenbaar als verwijderactie (Peter zocht hem) */
.prog-weg{color:var(--rood);border-color:var(--rood-rand)}
.prog-weg:hover{background:var(--rood-zacht);color:var(--rood);border-color:var(--rood)}
.prog-extra summary{cursor:pointer;color:var(--diep);font-weight:600;font-size:14px;padding:4px 0}
.prog-extra[open]{display:grid;gap:10px}
.prog-standaardknop{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:700px){.prog-item-knoppen{margin-left:0;width:100%}.prog-item .prog-basis{grid-template-columns:1fr 1fr 1fr}}
@media(pointer:coarse){.prog-item-kop button,.prog-dagen label,.prog-extra summary,.progkaart-voet a{min-height:48px}}

/* v15.205.0 — de kopbalk met Oefenprogramma's erbij en 'Nieuwe patiënt' als actieknop rechts.
   Afgestemd op het zwaarste geval: het meldingenbelletje zichtbaar en een lang e-mailadres.

   Met de vijfde knop liep de balk tussen 901 en 1280 CSS-pixels tot 149 pixels over; met
   vier paste hij overal (test_v1553_kopbalk). Zelfde aanpak als in v15.53.0: stapsgewijs
   iets weg of korter, het minst nodige eerst. Het e-mailadres valt al onder 1400 weg in
   plaats van 1260, en drie namen krijgen een korte vorm: onder 1280 Programma's, onder 1250
   Patiënten, onder 1000 Beelden. In het uitklapmenu (onder 900) staan de volledige namen weer. */
.server-navlink .nav-kort{display:none}
/* Een lang e-mailadres (30+ tekens) duwde de balk boven 1366 alsnog buiten beeld; het
   eindigt nu op een beletselteken, met het volledige adres als tooltip. */
.server-account>span{max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:1600px){.server-account>span{display:none}}
@media(max-width:1280px){
  .server-navlink[href="/physio/oefenbibliotheek/programmas"] .nav-lang{display:none}
  .server-navlink[href="/physio/oefenbibliotheek/programmas"] .nav-kort{display:inline}
}
@media(max-width:1250px){
  .server-navlink[href="/physio"] .nav-lang{display:none}
  .server-navlink[href="/physio"] .nav-kort{display:inline}
}
@media(max-width:1000px){
  .server-navlink[href="/physio/beeldbibliotheek"] .nav-lang{display:none}
  .server-navlink[href="/physio/beeldbibliotheek"] .nav-kort{display:inline}
}
@media(max-width:900px){
  .server-navlink .nav-lang{display:inline!important}
  .server-navlink .nav-kort{display:none!important}
}

/* v15.205.0 (review) — een vaste opslaanbalk onderaan (.plak-onder) bedekte het veld dat net
   focus kreeg; de browser scrolt nu tot boven de balk. En de tekstvakken van de
   programmaschermen krijgen op de telefoon 16px, anders zoomt iOS in. */
:root:has(.plak-onder){scroll-padding-bottom:max(96px,calc(var(--plak-onder-hoogte,0px) + 16px))}
/* v15.228.0 (audit T9-5) - onder 560px liep de balk over twee à drie regels (120-200px) terwijl er
   96px vrij bleef: een doseringsveld met focus viel erachter. Minstens 180px, en anders de gemeten
   hoogte (physio-dashboard.js zet --plak-onder-hoogte). */
@media(max-width:560px){:root:has(.plak-onder){scroll-padding-bottom:max(180px,calc(var(--plak-onder-hoogte,0px) + 16px))}}
/* v15.215.0 - op een breed scherm scrolt de dossierkolom zelf (padding-bottom 40px); sticky telt
   die ruimte mee, waardoor de balk 40px boven de onderrand bleef en het veld eronder doorpiepte. */
@media(min-width:901px){.yb-dossier .plak-onder{bottom:-40px;padding-bottom:12px}}
@media(max-width:560px){.prog-form textarea{font-size:16px}}

/* v15.205.0 — 'Nieuwe patiënt' als actieknop rechts (Peters keuze): wit gevuld met een plus,
   zodat hij zich onderscheidt van de onderdelen links en van de uitlogknoppen (omlijnd). Op
   een smallere balk wordt het "+ Nieuw", op de telefoon alleen de plus. */
.server-actie{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:7px 12px;border-radius:9px;
  border:1px solid #fff;background:#fff;color:var(--deep);font-size:.8rem;font-weight:700;text-decoration:none;white-space:nowrap}
.server-actie:hover{background:rgba(255,255,255,.88)}
.server-actie.aan{box-shadow:0 0 0 3px rgba(255,255,255,.35)}
.server-actie-plus{font-size:1.05rem;line-height:1}
.server-actie .nav-kort{display:none}
@media(max-width:1366px){.server-actie .nav-lang{display:none}.server-actie .nav-kort{display:inline}}
@media(max-width:1000px){.server-actie .nav-kort{display:none}}
@media(max-width:1180px){.server-account>form:first-of-type{display:none}}
/* Het menu-item 'Nieuwe patiënt' bestaat alleen voor de telefoon (onder 520 verdwijnt de
   actieknop uit de balk, anders valt die over twee regels). */
.server-nav-nieuw{display:none!important}
@media(max-width:520px){.server-actie{display:none}.server-nav.open .server-nav-nieuw{display:inline-flex!important}}
/* Bestaande fout gevonden bij het meten: '.server-account form:first-of-type' (onder 1119 en
   520) verborg ook het formulier 'Alles gelezen' in het meldingenpaneel. */
.server-account .server-mel form{display:block}.server-account .server-mel form[hidden]{display:none}
@media(pointer:coarse){.server-actie{min-height:48px;min-width:48px;justify-content:center}}

/* v15.206.0 — het toewijsscherm van een oefenprogramma. */
.prog-toewijs-kop{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin:0 0 14px}
.prog-toewijs-kop .prog-mozaiek{width:200px;flex:none}
.prog-toewijs-namen{margin:0;padding-left:20px;font-size:14px;color:var(--inkt-2)}
.toewijs-rij.heeft-al .toewijs-link{margin-left:auto;font-size:13px;white-space:nowrap}

/* v15.207.0 — meerdere oefeningen of programma's verwijderen (archiveren). Een vinkje linksboven
   op een programmakaart, en het bevestigingsscherm. */
.progkaart{position:relative}
/* v15.213.0 - het vinkje op een kaart (programma's, beeldbibliotheek): kleiner, zoals een gewoon
   vinkje (Peter: "De checkboxes moeten iets kleiner worden"). Een klein wit vlakje houdt hem
   zichtbaar op een afbeelding; op een aanraakscherm vergroot een onzichtbare rand het raakvlak. */
.kaart-kies{position:absolute;top:8px;left:8px;z-index:2;display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:5px;background:var(--wit);border:1px solid var(--lijn);box-shadow:0 1px 2px rgba(0,0,0,.08);cursor:pointer}
.kaart-kies input{width:15px;height:15px;margin:0;cursor:pointer;accent-color:var(--diep)}
@media(pointer:coarse){.kaart-kies::after{content:'';position:absolute;inset:-11px}}
.weg-lijst{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px;max-width:760px}
.weg-lijst li{background:var(--wit);border:1px solid var(--lijn);border-radius:10px;padding:10px 14px;display:grid;gap:4px}
.weg-let-op{font-size:13.5px;color:#7A4605}
.weg-form{max-width:760px}

/* v15.207.0 — Peters wens: de knoppen van een patiëntkaart in de werklijst onder elkaar, rechts
   naast de signalen. Bovenaan Open dossier, daaronder Oefeningen en de patiëntapp, en de twee
   Excel-knoppen naast elkaar onderaan. Alleen als er ruimte is; in een smal inhoudsvlak blijft
   het zoals het was (container 'inhoud', zie v15.54.0). */
@container inhoud (min-width:961px){
  .patient-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:236px;flex:0 0 236px;align-self:center}
  .patient-actions>:not(.kaart-excel):not(.import-details){grid-column:1/-1}
  .patient-actions>a,.patient-actions>.import-details>summary{display:flex;align-items:center;justify-content:center;width:100%;text-align:center}
  .patient-actions>.kaart-excel,.patient-actions>.import-details{margin-top:6px}
}
/* v15.207.0 (review) — onder 900px is de zoekbalk sticky (z-index 30) en schoof de selectiebalk
   eronder: na scrollen waren Toewijzen/Verwijderen onbereikbaar. Zolang er iets gekozen is, ligt
   de selectiebalk er nu bovenop. */
@media(max-width:900px){.bib-selbalk{z-index:31}}
/* v15.228.0 (audit T9-5, review) - zolang de selectiebalk bovenin plakt, viel een knop met focus
   erachter (op 360px is de balk zo'n 230px hoog). De browser scrolt nu tot onder de balk; de
   hoogte meet physio-dashboard.js (--bib-selbalk-hoogte), plus top:8px en 16px lucht. Op een breed
   scherm scrolt de dossierkolom zelf; daar plakt de balk ook onder zijn padding van 22px. */
:root:has(.bib-selbalk:not([hidden])){scroll-padding-top:calc(var(--bib-selbalk-hoogte,72px) + 8px + 16px)}
.yb-dossier:has(.bib-selbalk:not([hidden])){scroll-padding-top:calc(var(--bib-selbalk-hoogte,72px) + 22px + 8px + 16px)}

/* v15.208.0 — statusknoppen en sorteerknoppen in de kop van de werklijst; de tegels tonen het
   actieve filter (Peters vraag: niet altijd naar de zijbalk). */
.werklijst-bediening{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:12px 0 0}
.werklijst-keuze{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.werklijst-keuze-kop{min-width:72px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grijs)}
.werklijst-filterregel{margin:8px 0 0;font-size:13px;color:var(--grijs)}
.triage-metric.aan{outline:3px solid var(--diep);outline-offset:2px}
.triage-metric.aan small{display:block;margin-top:4px;font-size:.78rem;font-weight:600}

/* v15.209.0 — oefeningen toevoegen vanuit het programma: de knop op het programmascherm en het
   keuzescherm met de hele bibliotheek. */
.prog-toevoegen{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 6px}
.prog-toevoegen small{font-size:13px;color:var(--grijs);margin:0}
.kies-form,.kies-zoekbalk{max-width:880px}
.kies-form .bib-teller{margin:0 0 8px}
.kies-lijst{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px}
.kies-rij[hidden]{display:none!important}
.kies-rij label{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--wit);border:1px solid var(--lijn);border-radius:10px;cursor:pointer}
.kies-rij label:has(input:checked){border-color:var(--diep);box-shadow:inset 0 0 0 1px var(--diep)}
.kies-rij input{width:20px;height:20px;flex:none;margin:0}
.kies-rij .prog-tegel{width:52px;flex:none}
.kies-naam{display:grid;gap:4px}
.kies-chips{display:flex;flex-wrap:wrap;gap:6px}
.kies-rij.al-in label{opacity:.6;cursor:default;background:var(--vlak-2)}
.kies-gekozen{font-size:13px;font-weight:700;color:var(--grijs)}
@media(pointer:coarse){.kies-rij label{min-height:56px}}

/* v15.210.0 — het belletje als lijn-icoon, altijd zichtbaar. Bij 0 meldingen gedempt (wit op
   62%, ruim 5:1 op de balk) en zonder tellertje; het tellertje ligt als rondje op de bel, dus
   de bel is smaller dan het oude emoji-plus-tellertje. Op de telefoon (≤520px) is er geen
   plaats voor een extra knop van 48px: daar verschijnt de bel alleen bij een melding. */
.server-mel-knop svg{display:block;pointer-events:none}
.server-mel>summary:hover{background:rgba(255,255,255,.1)}
.server-mel.leeg>summary{color:rgba(255,255,255,.62)}
.server-mel-leeg,.server-mel-ververs{margin:.1rem .35rem .5rem;font-size:.88rem;color:var(--grijs)}
@media(max-width:520px){.server-mel.leeg{display:none}}
/* (review) met een vinger is de bel 48px; tot 540px past hij dan niet naast logo, menu en Uitloggen */
@media(max-width:540px) and (pointer:coarse){.server-mel.leeg{display:none}}

/* v15.211.0 — op een telefoon liepen de knoppen naast een paneelkop (Oefeningen, Programma)
   buiten beeld: de kop krijgt de volle breedte en de knoppen gaan eronder. */
@media(max-width:640px){.panel-head{flex-wrap:wrap}.panel-head>div{flex:1 1 100%;min-width:0}}

/* v15.212.0 — staat het geluid uit, dan gaat er een streep door de bel. De brede streep in de
   kleur van de balk maakt een uitsparing, zodat de witte streep los van de bel te zien is. */
.yb-bel-streep{display:none}
.server-mel.stil .yb-bel-streep{display:inline}
.server-mel .yb-bel-gat{stroke:var(--deep);stroke-width:5}

/* v15.213.0 — afbeeldingen selecteren en verwijderen in de beeldbibliotheek */
.beeldtegel{position:relative}
.beeldtegel.verwijderd{opacity:.72}
.beeldtegel form{margin:0}
.beeldtegel form .beeldtegel-knop{width:100%}
/* Peter: "Zorg dat de knoppen 'Gebruiken' overal op dezelfde hoogte staan." De tegels in een rij
   worden even hoog en de knop staat onderaan, hoe lang de titel of hoeveel chips er ook zijn. */
.beeld-raster{align-items:stretch}
.beeldtegel>.beeldtegel-knop,.beeldtegel>form,.beeldtegel>.beeldtegel-kiezen{margin-top:auto}

/* v15.214.0 — oefenprogramma's terugvinden: filters als aan/uit-knoppen met aantallen, een ster per
   fysio op de kaart en op het programmascherm, en een badge 'Nieuw'. */
.prog-filters{display:grid;gap:8px;margin:2px 0 14px}
.prog-filterrij{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.prog-filterkop{min-width:64px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grijs)}
.prog-filters .chip-aantal{margin-left:3px;font-weight:600;opacity:.72}
.prog-filters .chip-ster{display:inline-flex;margin-right:4px;vertical-align:-2px}
.prog-filters .chip-ster svg{width:14px;height:14px}
.prog-filters .yb-chip.aan .chip-ster svg{fill:currentColor}
.progkaart-ster-form{position:absolute;top:6px;right:6px;z-index:2;margin:0}
.prog-ster-form{margin:0}
.prog-ster{width:32px;height:32px;min-height:32px;padding:0;display:inline-grid;place-items:center;border-radius:50%;
  background:var(--wit);border:1px solid var(--lijn);color:var(--grijs);box-shadow:0 1px 2px rgba(0,0,0,.08);cursor:pointer;position:relative}
.prog-ster:hover{background:var(--wit);color:#8a6400;border-color:#d9c48f}
.prog-ster svg{width:18px;height:18px;display:block;pointer-events:none}
.prog-ster[aria-pressed="true"]{color:#A87800;border-color:#e3cf95}
.prog-ster[aria-pressed="true"] svg{fill:currentColor}
@media(pointer:coarse){.prog-ster::after{content:'';position:absolute;inset:-8px}}
.prog-titelrij{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.prog-titelrij .yb-titel{margin-right:2px}
.bib-chip.nieuw{background:#E3F2E8;color:#1E6B3A}
.prog-dupliceer{margin-top:10px}

/* v15.215.0 — programma kiezen vanuit het dossier; klaarzetten voor een nieuwe patiënt */
.prog-voor{margin-bottom:12px}
.prog-nieuwschema[hidden]{display:none}
.prog-nieuwschema{display:grid;gap:10px;border:1px solid var(--lijn);border-radius:10px;padding:12px 14px;margin:12px 0}
.prog-nieuwschema legend{font-weight:700;padding:0 4px}
.prog-nieuwschema label{display:grid;gap:4px}
.prog-nieuwschema .prog-weken input{max-width:120px}
.toewijs-rij.nieuw .toewijs-status{color:var(--diep);font-weight:600}
.empty-state .button-primary{margin-top:10px;align-self:flex-start}

/* v15.216.0 - therapietrouw: 'Traint niet' is grijs en neutraal, bewust geen triagekleur
   (Peters keuze): rood en oranje blijven voor klinisch risico. */
.trouw-chip{display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;background:var(--vlak-2);
  border:1px solid var(--lijn);color:var(--inkt);font-size:12px;font-weight:700;font-style:normal;white-space:nowrap;line-height:1.5}
.trouw-rij{display:flex;flex-wrap:wrap;align-items:center;gap:4px 7px;font-size:12px;color:var(--grijs)}
.detail-kpis .trouw-chip{margin-top:6px}

/* v15.217.0 - uitleg achter een i (Peters wens). De i blijft naast de titel staan; opengeklapt
   komt de tekst eronder over de volle breedte. Eerder stond de tekst ín de details en sprong de i
   mee naar een nieuwe regel. Zonder :has() blijft de uitleg dicht; hij is nooit nodig om het
   scherm te gebruiken. */
:is(.kop-met-info,.prog-titelrij)>.panel-uitleg{display:none;flex:1 0 100%;box-sizing:border-box;max-width:none;margin:2px 0 6px;
  /* een max-width liet het blok naast de titel passen; zo breekt het altijd af en blijft de regel <= 640px */
  padding-right:max(0px,calc(100% - 640px));
  color:var(--muted);font-size:.88rem;font-weight:400;line-height:1.5;text-wrap:pretty}
:is(.kop-met-info,.prog-titelrij):has(> .panel-info[open])>.panel-uitleg{display:block}
:is(.kop-met-info,.prog-titelrij)>.panel-uitleg p{margin:0 0 6px}
.yb-titelkop{margin:18px 0 14px}
.yb-titelkop>.yb-titel{margin:0}
.yb-stapkop{display:block;margin:16px 0 0}
.yb-stapkop+.yb-titelkop{margin-top:4px}

/* v15.218.0 - fasen: het voorstel in het dossier, de koppeling in het programmatabblad en de
   gevolgen op het inplanscherm */
.fase-voorstel{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;
  margin:0 0 15px;padding:14px 16px;border:1px solid var(--groen-rand);border-left:4px solid var(--groen);
  border-radius:12px;background:var(--groen-zacht)}
.fase-voorstel-tekst{display:grid;gap:3px;min-width:0;flex:1 1 300px}
.fase-voorstel-tekst strong{color:var(--diep);font-size:15px}
.fase-voorstel-tekst span{color:var(--inkt-2);font-size:14px}
.fase-voorstel .button-primary{white-space:nowrap}
.fase-link{margin:12px 0 0;font-size:14px;color:var(--inkt-2)}
.fase-gevolgen{margin:14px 0 4px;padding-left:20px;display:grid;gap:5px;font-size:14px;color:var(--inkt-2);max-width:70ch}
.fase-gevolgen .let-op{color:#7A4605}
.prog-vervolg label{display:grid;gap:4px;font-weight:600;font-size:14px}
.prog-vervolg select{min-width:min(300px,100%);min-height:44px;box-sizing:border-box;border:1px solid var(--lijn-invoer);
  border-radius:11px;padding:10px 36px 10px 12px;background-color:var(--vlak-2);font-size:15px;color:var(--inkt)}
.prog-form>.prog-weken input{max-width:120px}
@media(max-width:560px){.fase-voorstel .button-primary{width:100%;text-align:center}}

/* v15.220.0 - de filters van de oefenprogramma's als een rij keuzelijsten (Peter), in de stijl
   van de oefenbibliotheek. De opties zijn links; de gekozen staat vet met een vinkje. */
.prog-filters{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-start;margin:2px 0 14px}
.prog-filters .prog-filterrij{display:block;margin:0;flex:0 1 auto;min-width:0}
.prog-keuze{min-width:200px}
.prog-keuze>summary{gap:10px;min-height:42px;box-sizing:border-box}
.prog-keuze-kop{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grijs)}
.prog-keuze-waarde{flex:1 1 auto;font-weight:600;color:var(--inkt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prog-keuze-lijst{padding:6px;gap:2px}
.prog-keuze-optie{display:flex;align-items:center;gap:6px;padding:8px 10px 8px 8px;border-radius:7px;
  font-size:14px;color:var(--inkt);text-decoration:none;white-space:nowrap;min-height:40px;box-sizing:border-box}
.prog-keuze-optie:not(.bib-vink):not(.bib-vink-wis)::before{content:"";flex:0 0 14px;text-align:center;font-weight:800;color:var(--diep)}
.prog-keuze-optie.aan{font-weight:700;background:var(--vlak-2)}
.prog-keuze-optie.aan:not(.bib-vink)::before{content:"\2713"}   /* v15.235.0 (F-8): een vinklijst heeft zijn eigen vakje, geen tweede vinkje */
.prog-keuze-optie:hover,.prog-keuze-optie:focus-visible{background:#F2F8F5}
.prog-keuze-optie .chip-aantal{margin-left:auto;padding-left:14px;font-weight:600;opacity:.72}
.prog-keuze-optie .chip-ster{display:inline-flex;margin-right:2px}
.prog-keuze-optie .chip-ster svg{width:14px;height:14px}
.prog-keuze-optie.aan .chip-ster svg{fill:currentColor}
@media(max-width:560px){.prog-filters .prog-filterrij{flex:1 1 100%}.prog-keuze{min-width:0}}

/* v15.221.0 (T1-7) - de foto zit in het hoofdformulier van een oefening: een eigen knop
   'Foto uploaden…' in plaats van 'Choose File', naast 'Kies uit de beeldbibliotheek'. */
.bib-foto-acties{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 6px}
.bib-foto-acties .button-secondary{min-height:44px}
.yb-kaart-form label.bib-fotokies-knop{position:relative;display:inline-flex;cursor:pointer;margin:0}
.yb-kaart-form label.bib-fotokies-knop input[type=file]{position:absolute;inset:0;width:100%;height:100%;
  padding:0;border:0;opacity:0;cursor:pointer}
.yb-kaart-form label.bib-fotokies-knop:focus-within{outline:3px solid var(--diep);outline-offset:2px}
.bib-foto-gekozen{margin:4px 0;font-size:13.5px;font-weight:600;color:var(--inkt)}
.bib-foto-gekozen[hidden]{display:none}
.yb-kaart-form small.bib-foto-uitleg{margin:0 0 8px}
/* het vervolg staat nu in het programmaformulier zelf */
.prog-vervolg-veld select{max-width:420px}
@media(pointer:coarse){.bib-foto-acties .button-secondary{min-height:48px}}
/* v15.221.0: knoppen in een paneelkop rekken niet mee met de hoogte van de koptekst (Peter: 'veel te hoog'). */
.panel-head{align-items:flex-start}
.panel-head>:is(a,button,form,.trend-date){flex:none;align-self:flex-start}
.panel-head:has(>.panel-acties){flex-wrap:wrap}.panel-head:has(>.panel-acties)>div:first-child{flex:1 1 18rem;min-width:0}.panel-head>.panel-acties{flex:none;margin-left:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;align-items:flex-start}
@media(max-width:640px){.panel-head>.panel-acties{flex:1 1 100%;min-width:0;justify-content:flex-start;margin-left:0}.panel-head>.panel-acties a{white-space:normal;max-width:100%}}
/* v15.221.0: lange waarden (aandoening, behandeldoel) breken af in plaats van de kaart uit te lopen op de telefoon. */
.yb-programmakop dt{flex:none}
.yb-programmakop dd{white-space:normal;text-align:right;min-width:0;overflow-wrap:anywhere}

/* v15.222.0 - audit 2, batch B4: werklijst en signalen + Excel-import.
   T4-8: dezelfde signaalknoppen op de werklijstkaart en in het dossier (_signaal_acties.html). */
.signaal-acties{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.signaal-acties form{margin:0}
.signaal-acties .sig-knop{padding:5px 11px;font-size:.81rem;line-height:1.3;border-radius:9px;white-space:nowrap;min-width:96px;min-height:36px;box-sizing:border-box}
.signaal-acties .button-secondary.sig-knop{font-weight:600}
.signaal-acties .sig-bekeken-knop{flex-direction:column;gap:0;line-height:1.15}
.signaal-acties .sig-hint,.triage-event .signaal-acties .sig-hint{display:block;font-size:.68rem;font-weight:500;color:var(--grijs)}
.signaal-acties .sig-bekeken{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
.signaal-acties .sig-bekeken .seen-chip{font-size:.72rem}
.signaal-acties .sig-bekeken .sig-hint{display:inline}
.signaal-acties .sig-terugzetten{background:none;border:0;padding:4px 2px;min-height:32px;color:var(--diep);font-size:.78rem;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.signaal-acties .sig-terugzetten:hover{background:none;color:var(--deep)}
.sig-afhandel-form{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.sig-notitie>summary{list-style:none;cursor:pointer;font-size:.76rem;font-weight:700;color:var(--diep);padding:4px 2px;text-decoration:underline;text-underline-offset:2px}
.sig-notitie>summary::-webkit-details-marker{display:none}
.sig-notitie[open]{flex:1 1 100%}
.sig-notitie-veld{display:grid;gap:3px;margin-top:4px;font-size:.74rem;font-weight:600;color:var(--grijs)}
.triage-event .sig-notitie-veld span{font-size:.74rem}
.sig-notitie-veld input{width:100%;max-width:420px;box-sizing:border-box;min-height:36px;padding:6px 9px;border:1px solid var(--lijn-invoer);border-radius:8px;font:inherit;font-size:.86rem;color:var(--inkt);background:var(--wit)}
/* T4-1: de tussenstap bij een rode vlag, in de pagina (geen window.confirm) */
.sig-afhandel-stap>summary{list-style:none}
.sig-afhandel-stap>summary::-webkit-details-marker{display:none}
.sig-afhandel-stap[open]{flex:1 1 100%}
.sig-afhandel-stap[open]>summary{display:none}
/* dichtgeklapt geen box: Chrome geeft de inhoud van een gesloten details anders nog een breedte */
.sig-afhandel-stap:not([open])>.sig-stap-paneel,.sig-notitie:not([open])>.sig-notitie-veld{display:none}
.sig-stap-paneel{border:1px solid var(--rood-rand);background:var(--rood-zacht);border-radius:10px;padding:10px 12px;display:grid;gap:8px}
.sig-stap-tekst,.triage-event .sig-stap-tekst{margin:0;font-size:.84rem;line-height:1.4;color:var(--inkt)}
.sig-stap-paneel .sig-notitie-veld,.sig-stap-paneel .sig-notitie-veld span{color:var(--inkt)}   /* grijs op rood-zacht haalt 4.5:1 niet */
.sig-stap-form{display:grid;gap:8px}
.sig-stap-knoppen{display:flex;flex-wrap:wrap;gap:6px}
/* T4-5: welke rode-vlagvraag, en 'Kan niet trainen sinds' */
.sig-vlagvragen{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:2px;font-size:.8rem;color:var(--inkt)}
.sig-vlagvragen li{line-height:1.35}
.sig-vlagvragen strong,.triage-event .sig-vlagvragen strong{font-size:inherit;color:var(--rood)}
.blokkade-chip{display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;background:var(--rood-zacht);
  border:1px solid var(--rood-rand);color:var(--rood);font-size:12px;font-weight:700;font-style:normal;white-space:nowrap;line-height:1.5}
.yb-rij-tekst .blokkade-chip{align-self:flex-start;margin-top:2px}
/* T4-1: de bevestiging na Afhandelen, met 'Ongedaan maken' (bewust niet .goed: die verdwijnt vanzelf) */
.afhandel-melding{flex-wrap:wrap;align-items:flex-start}
.afhandel-melding-tekst{display:grid;gap:3px;flex:1 1 260px;min-width:0}
.afhandel-notitie{font-style:italic}
.afhandel-let-op{font-size:.86em;color:var(--inkt)}
.afhandel-ongedaan{margin:0}
.afhandel-ongedaan .sig-knop{padding:6px 12px;font-size:.84rem;min-height:36px}
.afgehandeld-door{display:block;margin-top:3px;font-size:.74rem;color:var(--grijs)}
.afgehandeld-door q{color:var(--inkt)}
/* T4-2: alleen de soorten met een open signaal */
.detail-kpis>a.kpi-link.kpi-rood{border-color:var(--rood-rand);background:#fff9f8}
.detail-kpis>a.kpi-link.kpi-rood strong{color:var(--rood)}
.detail-kpis>.kpi-geen strong{color:var(--grijs);font-weight:600}
/* T4-13: het open werk onder de meldingen */
.server-mel-open{margin:.5rem .35rem .2rem;padding-top:.5rem;border-top:1px solid var(--lijn);font-size:.86rem;color:var(--inkt)}
.server-mel-open a{color:var(--diep);font-weight:700;white-space:nowrap}
/* T4-10: op de telefoon een zoekveld bovenaan de werklijst; de inklapknop doet daar niets */
.werklijst-zoek-mobiel{display:none}
@media(max-width:900px){
  .werklijst-zoek-mobiel{display:flex;gap:8px;margin:10px 0 4px}
  .werklijst-zoek-mobiel .yb-zoekveld{flex:1 1 auto;min-width:0;min-height:44px;box-sizing:border-box;font-size:16px}
  .werklijst-zoek-mobiel .button-secondary{min-height:44px}
  .yb-dash .yb-lijst-kop .yb-inklap,.yb-dash .yb-lijst-kop button.yb-inklap{display:none}
  .sig-notitie-veld input{font-size:16px}   /* iOS zoomt in onder 16px */
}
/* X-1: Excel-import */
.import-uitleg{display:block;font-size:.76rem;color:var(--grijs)}
.excel-import{max-width:760px}
.excel-import-feiten{display:grid;gap:6px;margin:14px 0 18px;padding:0}
.excel-import-feiten>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--lijn)}
.excel-import-feiten dt{color:var(--grijs);font-size:.88rem}
.excel-import-feiten dd{margin:0;font-weight:700;color:var(--inkt);text-align:right}
.excel-import-knoppen{display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:700px){.signaal-acties{width:100%}.excel-import-knoppen>*{flex:1 1 auto}}
@media(pointer:coarse){
  .signaal-acties .sig-knop,.signaal-acties .sig-terugzetten,.sig-notitie>summary,.sig-notitie-veld input,
  .afhandel-ongedaan .sig-knop,.werklijst-zoek-mobiel .yb-zoekveld,.werklijst-zoek-mobiel .button-secondary,
  .server-mel-open a,.excel-import-knoppen>*,.patient-actions .import-details>summary,.import-form button{min-height:48px}
  .sig-notitie>summary,.server-mel-open a{display:inline-flex;align-items:center}
  .patient-actions .import-details>summary{display:flex;align-items:center;justify-content:center;box-sizing:border-box}
}
/* ── v15.224.0: audit 2, batch 5 (nieuwe patiënt, toewijzen en fasen) ── */
/* T5-1/T5-5: een melding met de volgende stap en een knop */
.yb-melding-volgende{flex-wrap:wrap}
.yb-melding-volgende .yb-melding-tekst{flex:1 1 260px;min-width:0}
/* T5-2: 'Voor: <naam>', de uitklapper met de andere patiënten, zoeken en 'N gekozen' */
.voor-chip{display:inline-block;max-width:100%;box-sizing:border-box;margin:0 0 8px;padding:4px 12px;border-radius:999px;
  background:var(--groen-zacht);border:1px solid var(--groen-rand);color:var(--groen-inkt);font-size:13px;font-weight:600}
.voor-chip strong{color:var(--inkt)}
.toewijs-voor{margin:0 0 6px}
.toewijs-voor-kop{margin:0 0 4px;font-size:17px;color:var(--diep)}
.toewijs-voor-kop .yb-sub{font-weight:500;font-size:14px;color:var(--grijs)}
.toewijs-meer{margin:14px 0 4px;border:1px solid var(--lijn);border-radius:10px;padding:0 14px;background:var(--wit)}
.toewijs-meer>summary{cursor:pointer;font-weight:700;color:var(--diep);padding:12px 0;min-height:24px}
.toewijs-meer[open]>summary{border-bottom:1px solid var(--lijn-licht);margin-bottom:6px}
.toewijs-zoek[hidden],.toewijs-rij[hidden],.toewijs-teller[hidden]{display:none}
.toewijs-zoek{margin:8px 0 6px}
.toewijs-teller{margin-left:auto}
/* T5-4: informatie in grijs, en 'Nu invullen' bij lege waarschuwingssignalen */
.toewijs-rij.heeft-al.info .toewijs-status{color:var(--grijs);font-weight:500}
.toewijs-rij.signalen-leeg{cursor:default}
.toewijs-kies{display:flex;align-items:center;gap:12px;flex:1 1 220px;min-width:0;cursor:pointer}
.toewijs-nu-invullen{flex:1 1 100%;display:grid;gap:8px}
.toewijs-nu-invullen>summary{cursor:pointer;font-weight:700;color:var(--diep);width:max-content}
.toewijs-nu-invullen label,.toewijs-vlag-vast{display:grid;gap:4px;font-size:13.5px}
.toewijs-vlag-vast{margin:0}
.toewijs-vlag-vast>span:last-child{color:var(--inkt);font-weight:600}
.toewijs-rij .toewijs-nu-invullen input{width:100%;max-width:520px;height:auto;box-sizing:border-box;padding:8px 10px;
  border:1px solid var(--lijn-invoer);border-radius:8px;font:inherit;background:var(--wit);color:var(--inkt)}
.toewijs-rij.signalen-leeg .toewijs-link{margin-left:auto;font-size:13px}
/* T5-6: de oefeningen zichtbaar op de kaart bij het kiezen voor een patiënt */
.progkaart-namen{margin:0;font-size:13px;color:var(--inkt-2);line-height:1.4}
.progkaart-meer{color:var(--grijs);white-space:nowrap}
/* T5-7: de dagen van nu bij het inplannen van een fase */
.fase-nu-dagen{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:2px 0 10px;font-size:14px;color:var(--inkt-2)}
.fase-andere-dagen-regio{flex:1 1 100%}
.fase-andere-dagen{margin:0;color:#7A4605;font-weight:600}
.fase-andere-dagen[hidden]{display:none}
/* T5-8: tabblad Schema - geplande dag en datum, 'Deze week', ingeklapte afgeronde weken */
.yb-gepland{font-weight:700;color:var(--inkt)}
.yb-deze-week{border-color:var(--diep);box-shadow:0 0 0 1px var(--diep) inset}
.yb-deze-week-chip{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;background:var(--diep);color:#fff;
  font-size:.62em;font-weight:700;vertical-align:middle;letter-spacing:.02em}
.yb-week-dicht>summary{cursor:pointer;list-style-position:inside;padding:2px 0;min-height:24px}
.yb-week-dicht>summary strong{color:var(--diep)}
.yb-week-dicht[open]>summary{margin-bottom:6px}
.yb-gewicht{min-width:9em}
/* de knoppen in een paneelkop (Schema, Oefeningen) liepen op 390px buiten beeld: flex:none hield ze op een regel */
@media(max-width:640px){.panel-head>.panel-acties{flex:1 1 100%;min-width:0}}
/* het zoekveld blijft bovenaan staan in de witte uitklapper */
.toewijs-meer .toewijs-zoek{background:var(--wit)}
@media(max-width:700px){.yb-gewicht{min-width:0}}
@media(pointer:coarse){
  /* (review) geen display:flex: dan verdwijnt het uitklap-driehoekje en de spatie na 'Week N' */
  .toewijs-meer>summary,.toewijs-nu-invullen>summary,.yb-week-dicht>summary{min-height:48px;box-sizing:border-box;padding-top:12px;padding-bottom:12px}
  .yb-melding-volgende .button-primary{min-height:48px;display:inline-flex;align-items:center}
  .fase-nu-dagen .button-secondary,.toewijs-rij .toewijs-link{min-height:48px;display:inline-flex;align-items:center}
  .toewijs-zoek input,.toewijs-rij .toewijs-nu-invullen input{min-height:48px;font-size:16px}
}
/* ── v15.225.0: audit 2, batch 7 (bibliotheek, programma's en consistentie) ── */
/* T7-2: een melding met een link of lijst blijft staan; de sluitknop zet physio-dashboard.js erbij */
.yb-melding.heeft-sluit{position:relative;padding-right:48px}
.yb-melding-sluit{position:absolute;top:4px;right:4px;width:36px;height:36px;display:inline-flex;align-items:center;
  justify-content:center;border:0;border-radius:8px;background:transparent;color:inherit;font-size:22px;line-height:1;cursor:pointer}
.yb-melding-sluit:hover{background:rgba(20,64,60,.08)}
.yb-melding-sluit:focus-visible{outline:3px solid var(--diep);outline-offset:1px}
.yb-melding-lijst.met-uitleg{flex-direction:column;align-items:flex-start}
.yb-melding-lijst.met-uitleg li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.yb-melding-uitleg{font-size:.9em;color:var(--inkt)}
.yb-melding-uitleg a{font-weight:700;color:var(--diep);white-space:nowrap}
/* T7-1: stap 3 staat bij de oefeningen, waar de pagina heen springt */
.prog-oefeningen-kop{display:grid;gap:2px;scroll-margin-top:12px}
.prog-oefeningen-kop .yb-stapkop{margin:0}
/* T7-3: de kaart waar je na het bewerken terugkomt */
.bibkaart{scroll-margin-top:12px}
.bibkaart.net-bewaard,.bibkaart:target{border-color:var(--diep);box-shadow:0 0 0 1px var(--diep) inset}
.bibkaart-melding{margin:0 0 10px}
.yb-kaart-form h2.bib-groep{scroll-margin-top:12px}
/* T7-3: drie knoppen onder het oefeningformulier (met 'Opslaan en toewijzen') lopen op de telefoon door */
.bib-form>.yb-rij{flex-wrap:wrap}
/* T7-4: teller onder het instructieveld */
.yb-kaart-form small.bib-tekenteller{margin-top:2px;text-align:right;font-variant-numeric:tabular-nums}
/* T7-5: het overzicht vooraf van de startset */
.startset-telling{max-width:70ch}
.startset-lijst{margin:12px 0;border:1px solid var(--lijn);border-radius:10px;padding:0 14px;background:var(--wit);max-width:720px}
.startset-lijst>summary{cursor:pointer;font-weight:700;color:var(--diep);padding:12px 0}
.startset-namen{margin:0 0 14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px 18px}
.startset-namen dt{font-weight:700;color:var(--inkt);font-size:13px;letter-spacing:.04em;text-transform:uppercase;margin:0 0 4px}
.startset-namen dd{margin:0;padding:2px 0;font-size:14px;color:var(--inkt-2)}
.bib-startkaart .bib-startset{margin-top:10px}
/* T8-2: de introductie van /physio achter een i; de titel krimpt zodat de i ernaast blijft */
.page-head .kop-met-info>h1{flex:0 1 auto;min-width:0}
/* T8-2: 'Zoeken' verdwijnt waar de lijst live filtert (physio-dashboard.js zet hidden; de knopklasse
   zet display en zou dat anders overrulen) */
.bib-zoekbalk button[hidden]{display:none}
/* T8-2: de keuzelijsten van de bibliotheken (zelfde als de oefenprogramma's) */
.bib-keuzes{align-items:center}
.bib-filters-wis{align-self:center;padding:8px 2px}
.bib-meer{min-width:0}
.bib-meer>summary{min-height:42px;box-sizing:border-box;padding:9px 12px;gap:10px}
.bib-meer .bib-multi-lijst{left:auto;right:0}
/* T8-2: de werklijst links - zoeken met een knop, Status en Sorteer als keuzelijsten */
.yb-zoekform{display:flex;gap:8px;min-width:0}
.yb-zoekform .yb-zoekveld{flex:1 1 auto;min-width:0}
.yb-zoekform .button-secondary{flex:0 0 auto}
.yb-keuzes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.yb-keuzes .prog-keuze{min-width:0}
.yb-keuzes .yb-keuze-sorteer .bib-multi-lijst{left:auto;right:0}
.yb-keuzes .bib-multi-lijst{max-height:min(440px,60vh)}
@media(max-width:380px){.yb-keuzes{grid-template-columns:1fr}.yb-keuzes .yb-keuze-sorteer .bib-multi-lijst{left:0;right:auto}}
@media(max-width:560px){.yb-zoekform .yb-zoekveld{font-size:16px}}
@media(pointer:coarse){
  .prog-keuze>summary,.prog-keuze-optie,.bib-meer>summary,.yb-zoekform .yb-zoekveld,.yb-zoekform .button-secondary,
  .bib-filters-wis{min-height:48px;box-sizing:border-box}
  .bib-filters-wis{display:inline-flex;align-items:center}
  .yb-melding-sluit{width:48px;height:48px;top:0;right:0}
  .yb-melding-lijst a{min-height:48px}
  /* review: ook de knoppen die deze batch neerzet halen 48px (archieflink, bevestigingspagina's,
     de knoppenrij onder het oefeningformulier, 'Wissen' in de werklijst, de vervolglink na aanmaken) */
  .bib-kopknoppen a.button-secondary,.weg-form .yb-rij>:is(.button-primary,.button-secondary),
  .bib-form>.yb-rij>:is(.button-primary,.button-secondary){min-height:48px;box-sizing:border-box}
  .yb-filterknoppen .yb-wis,.yb-melding-vervolg{display:inline-flex;align-items:center;min-height:48px;box-sizing:border-box}
  /* review: de i naast 'Patiënten & signalen' - een groter raakvlak, zonder dat hij groter oogt */
  .page-head .panel-info>summary{position:relative}
  .page-head .panel-info>summary::after{content:'';position:absolute;inset:-14px}
}


/* v15.226.0 (Y-3) - de naam van de training bij een signaal: twee trainingen op een dag leken dubbel */
.signal-head .signal-training,.timeline-title .signal-training{display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;
  background:var(--vlak-2);border:1px solid var(--lijn);color:var(--inkt);font-size:.74rem;font-weight:600;line-height:1.5;
  max-width:100%;overflow-wrap:anywhere}
.triage-event-detail .signal-training{font-weight:600;color:var(--inkt)}

/* ── v15.228.0: audit 2, batch 8 (toegankelijkheid en mobiel) ── */
/* T9-3: de focusring is standaard donkergroen (regel 74; geel haalde op wit 1,79:1). Geel alleen nog
   op de donkere vlakken: de bovenbalk, de smalle patiëntenbalk en de selectiebalk van de bibliotheken.
   Het witte meldingenpaneel onder het belletje hangt in de bovenbalk en houdt de groene ring. */
.serverbar :focus-visible,.yb-rail :focus-visible,.bib-selbalk :focus-visible{outline-color:#f2b84b}
.serverbar .server-mel-paneel :focus-visible{outline-color:var(--diep)}
.panel-info>summary:focus-visible{outline:3px solid var(--diep);outline-offset:2px}
/* T9-2: het i-knopje oogt 22px, maar heeft een raakvlak van 44px (de kop van de pagina 50px, zie
   v15.225.0); en Inter in plaats van Georgia cursief, zoals de rest van de app */
.panel-info>summary{position:relative;font-family:var(--sans);font-style:normal}
.panel-info>summary::after{content:'';position:absolute;inset:-12px}
/* T9-2: 'Wachtwoord vergeten?' en de andere hulplinks onder een inlogformulier: groter raakvlak (44px) */
.login-help a{display:inline-block;padding:13px 4px}
/* T9-2: het vakje op een oefeningkaart blijft 15px (Peters keuze, v15.213), het raakvlak niet */
.bibkaart-kies{position:relative}
.bibkaart-kies input{position:relative;z-index:1}   /* het vakje zelf boven het vergrote raakvlak */
@media(pointer:coarse){
  .bibkaart-kies::after{content:'';position:absolute;inset:-15px}
  /* T9-2: 'Overslaan' in de rondleiding van de fysio */
  .onboarding-overslaan{min-height:48px;padding:12px 16px}
  /* T9-1: de kaartknoppen op de werklijst (Open dossier, Oefeningen, Open patiëntapp, Excel) */
  .patient-actions>a,.patient-actions .import-details>summary{min-height:48px;box-sizing:border-box}
  /* T9-1: meer ruimte tussen de signaalknoppen, en Afhandelen (onomkeerbaar, geeft een rode vlag
     vrij) apart rechts, los van Bekeken. De knoppen zelf zijn sinds v15.222.0 al 48px. */
  .signaal-acties{gap:10px}
  .signaal-acties>.sig-afhandel-form,.signaal-acties>.sig-afhandel-stap:not([open]){margin-left:auto}
  /* zelfde patroon: de link naar de training in de tijdlijn (14px hoog), de menuknop (40px),
     Uitloggen (39px), de terugknop boven een formulier (43px), de knop in een paginakop (42px) en
     de knoppen in de opslaanbalk (42px) */
  .timeline-body a{display:inline-flex;align-items:center;min-height:48px}
  .server-menu-knop{width:48px;height:48px}
  /* op een tablet: de navigatie bovenin (35px), de inklapknop van de werklijst (30px breed) en
     'Terug naar de werklijst' (19px) */
  .server-navlink{min-height:48px}
  .yb-terug-overzicht{min-height:48px;display:flex;align-items:center}
  .yb-inklap{min-width:48px;min-height:48px;display:inline-grid;place-items:center}
  .server-account .button-ghost,.yb-terug,.page-head :is(.button-primary,.button-secondary),
  .plak-onder>:is(.button-primary,.button-secondary){min-height:48px;box-sizing:border-box}
}
/* T9-5: onder 560px blijft de opslaanbalk op een regel: de knoppen delen de breedte (de tekst breekt
   binnen de knop af), en 'Opslaan en toewijzen' laat ' aan <naam> →' weg (de volledige tekst staat
   in .knop-lang; een verborgen span telt niet mee in de naam van de knop). */
@media(max-width:560px){
  /* wint van .bib-form>.yb-rij{flex-wrap:wrap}; min-width:0, anders rekt de balk het formulier (een
     grid) op tot de breedte van alle knoppen naast elkaar en schuift de pagina horizontaal */
  :is(.yb-rij,.bib-form>.yb-rij).plak-onder{flex-wrap:nowrap;gap:6px;min-width:0}
  .plak-onder>:is(.button-primary,.button-secondary){flex:1 1 auto;white-space:normal;text-align:center;line-height:1.25;padding-left:10px;padding-right:10px}
  .plak-onder>:is(.kies-gekozen,.bib-teller){flex:0 1 auto;min-width:0;font-size:.8rem}
  .plak-onder>.bulk-annuleer{flex:0 0 auto;margin-left:0;padding-left:8px;padding-right:8px}
  /* met drie knoppen (programma: Opslaan, Opslaan en toewijzen, Annuleren) past het niet: Annuleren
     uit de balk; '← Terug naar de oefenprogramma's' bovenaan gaat naar dezelfde plek */
  .plak-onder:has(>.bibkaart-toewijs)>.bulk-annuleer{display:none}
  .plak-onder .knop-lang{display:none}
}
@media(min-width:561px){.plak-onder .knop-kort{display:none}}

/* -- v15.229.0: de Flourish-proef (alleen met FLOURISH_PROEF aan; app/flourish.py) -- */
.yb-flourish{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--lijn-licht)}
.yb-flourish-kop{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px;margin:0 0 8px}
.yb-flourish-kop h3,.yb-flourish-item h3{margin:0;font-size:1rem}
.yb-flourish-kop a{color:var(--diep);font-weight:700;font-size:.86rem}
.yb-flourish-frame{display:block;box-sizing:border-box;width:100%;max-width:100%;height:480px;border:1px solid var(--lijn-zacht);
  border-radius:var(--r-l);background:var(--wit)}
.yb-flourish-waarschuwing{margin:0 0 12px}
.yb-flourish-lijst{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.yb-flourish-item{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.yb-flourish-form{box-sizing:border-box;width:100%;max-width:none;min-width:0}
.yb-flourish-form input{box-sizing:border-box;min-width:0}
.yb-flourish-knoppen{display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:560px){.yb-flourish-frame{height:420px}.yb-flourish-form{padding:16px}}
@media(pointer:coarse){
  .yb-flourish-kop a{display:inline-flex;align-items:center;min-height:48px}
  .yb-flourish-csv,.yb-flourish-knoppen>button{min-height:48px;box-sizing:border-box}
}
/* -- v15.230.0: audit 2, overlegpunten werklijst en triage (O-C), Peters keuzes van 2026-10-14 -- */
/* T4-12: een compacte tegelrij, getal en label naast elkaar (~64px hoog), zodat de kaarten hoger
   beginnen. 'Aandacht nodig' is het totaal: neutraal (donkergroen) en met 'totaal' eronder; de
   soorten daarna overlappen en tellen er niet toe op. */
.triage-metrics{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.triage-metrics .triage-metric{flex-direction:row;align-items:center;justify-content:flex-start;aspect-ratio:auto;
  min-height:64px;box-sizing:border-box;padding:8px 11px;gap:9px}
.triage-metrics .triage-metric .triage-metric-kop{flex:0 0 auto;gap:7px}
/* het symbool vervalt in de compacte rij: de gekleurde bovenrand onderscheidt de soorten, en zo past een
   label als 'Training/trend afwijkend' zonder midden in een woord af te breken */
.triage-metrics .triage-metric .triage-symbol{display:none}
.triage-metrics .triage-metric strong{font-size:1.35rem}
.triage-metrics .triage-metric>div{min-width:0}
.triage-metrics .triage-metric div span{margin-top:0;text-transform:none;letter-spacing:0;line-height:1.2}
.triage-metrics .triage-metric small{margin-top:2px;font-size:.78rem}
.triage-metrics .triage-metric.totaal{border-width:1.5px;border-top-width:3px}
.triage-metrics .triage-metric.totaal div span{color:var(--diep)}
.triage-totaal{display:block;margin-top:1px;font-style:normal;font-size:.72rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--grijs)}
/* T4-3: een open herstelmeting binnen de termijn is grijs, geen signaal (net als 'Traint niet').
   T4-4: 'Klaar voor <volgende fase>' is een grijze link naar het inplannen. */
a.fase-klaar-chip{position:relative;gap:4px;color:var(--diep);text-decoration:none}
/* een lange programmatitel breekt af in plaats van de kaart breder te duwen dan het scherm */
a.fase-klaar-chip{white-space:normal;overflow-wrap:anywhere;max-width:100%;box-sizing:border-box;text-align:left}
a.fase-klaar-chip:hover{background:var(--hover);border-color:var(--diep)}
.workflow-chip.wacht{background:#edf1f0;color:var(--grijs)}
/* T4-11: onder 900px op de werklijstkaart alleen 'Open dossier' en 'Meer'. 'Meer' is een lege
   <details> vóór de overige knoppen; zolang hij dicht is verbergt deze regel wat erna komt. Vanaf
   900px staat hij uit en is de indeling van v15.207 ongewijzigd. */
.patient-actions .kaart-meer>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.patient-actions .kaart-meer>summary::-webkit-details-marker{display:none}
.patient-actions .kaart-meer>summary::after{content:'\25BE';font-size:.9em;transition:transform .12s}
.patient-actions .kaart-meer[open]>summary::after{transform:rotate(180deg)}
/* T4-11: de werklijstkolom onder 900px. Op /physio staat de compacte lijst niet nog eens onder de
   kaarten; op de andere pagina's is de kolom een ingeklapt blok 'Werklijst (N)' (zelfde lege
   <details>-patroon). De zoek- en filterbediening op /physio blijft. */
.yb-lijst-uitklap{display:none}
.yb-lijst-uitklap>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;
  box-sizing:border-box;padding:12px 20px;list-style:none;cursor:pointer;font-size:17px;font-weight:700;color:var(--diep)}
.yb-lijst-uitklap>summary::-webkit-details-marker{display:none}
.yb-uitklap-chevron{font-size:.9rem;transition:transform .12s}
.yb-lijst-uitklap[open]>summary .yb-uitklap-chevron{transform:rotate(180deg)}
.yb-lijst-uitklap[open]{border-bottom:1px solid var(--lijn-zacht)}
@media(min-width:900px){.patient-actions>.kaart-meer{display:none}}
@media(max-width:899.98px){
  .patient-actions>.kaart-meer:not([open])~*{display:none}
  body[data-werklijstpagina] .yb-lijst-scroll{display:none}
  body:not([data-werklijstpagina]) .yb-lijst>.yb-lijst-uitklap{display:block}
  body:not([data-werklijstpagina]) .yb-lijst>.yb-lijst-uitklap:not([open])~*{display:none}
  /* de weg terug naar de werklijst (in een dossier) blijft staan, boven het ingeklapte blok */
  body:not([data-werklijstpagina]) .yb-lijst>.yb-lijst-uitklap:not([open])~.yb-lijst-kop:has(>.yb-terug-overzicht){display:block;order:-1}
  body:not([data-werklijstpagina]) .yb-lijst>.yb-lijst-uitklap:not([open])~.yb-lijst-kop>:not(.yb-terug-overzicht){display:none}
}
@media(pointer:coarse){
  .patient-actions .kaart-meer>summary{min-height:48px;box-sizing:border-box}
  /* de fase-link is een smalle chip in de triageregel: een onzichtbare rand maakt het raakvlak 48px */
  a.fase-klaar-chip::after{content:'';position:absolute;inset:-14px -4px}
  /* die rand mag niet over de knop 'Signalen verbergen/Toon signalen' eronder vallen */
  .patient-triage-line:has(.fase-klaar-chip)+.card-signalen-toggle{margin-top:20px}
}


/* ═══ v15.231.0 (batch O-D) ═══ */
/* G-1 - de interactieve dossiergrafieken (chart-engine.js, dezelfde motor als Overzicht in de patiëntapp).
   patient.css staat niet op de dossierpagina; dit zijn de regels die de motor nodig heeft, onder
   .yb-dosgrafiek. Tekst in echte pixels (de motor tekent op ware grootte), minstens 13px. */
.yb-dosgrafiek{margin:2px 0 8px;min-width:0}
.yb-dosgrafiek[hidden]{display:none}
.yb-dosgrafiek .chart-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.yb-dosgrafiek .chart-type{display:inline-flex;border:1px solid var(--lijn);border-radius:10px;overflow:hidden;background:var(--wit,#fff)}
.yb-dosgrafiek .chart-type button{min-height:40px;min-width:96px;margin:0;padding:6px 16px;border:0;border-radius:0;background:transparent;
  color:var(--diep);font:inherit;font-size:.86rem;font-weight:700;cursor:pointer}
.yb-dosgrafiek .chart-type button+button{border-left:1px solid var(--lijn)}
.yb-dosgrafiek .chart-type button[aria-pressed="true"]{background:var(--diep);color:#fff}
.yb-dosgrafiek .chart-type button:focus-visible{outline:3px solid var(--diep);outline-offset:-3px}
.yb-dosgrafiek .chart-info{min-height:44px;display:flex;flex-wrap:wrap;align-items:stretch;gap:4px 18px;margin:0 0 8px;padding:9px 12px;
  border-left:4px solid #2F8F9D;border-radius:7px;background:#f3f8fa;color:#38534f;font-size:.85rem;line-height:1.35}
.yb-dosgrafiek .chart-info.chart-info-actief{border-left-color:var(--diep);background:#eaf4f1}
.yb-dosgrafiek .chart-info-hint{align-self:center;color:#4a625e;font-style:italic}
.yb-dosgrafiek .chart-info-deel{display:grid;gap:1px;align-content:center}
.yb-dosgrafiek .chart-info-label{font-size:.66rem;font-weight:800;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:#54706c}
.yb-dosgrafiek .chart-info-waarde{font-size:.86rem;font-weight:700;line-height:1.25;color:var(--inkt)}
.yb-dosgrafiek .chart-stage{position:relative;border:1px solid var(--lijn-zacht);border-radius:10px;background:#fbfdfc;overflow:hidden}
.yb-dosgrafiek .interactive-chart{display:block;width:100%;height:240px;overflow:hidden;user-select:none;touch-action:pan-y;cursor:pointer}
.yb-dosgrafiek .chart-grid{stroke:#dfe8e5;stroke-width:1}
.yb-dosgrafiek .chart-zero-grid{stroke:#c4d2ce;stroke-width:1.15}
.yb-dosgrafiek .chart-axis{stroke:#aabdb8;stroke-width:1.2}
.yb-dosgrafiek .chart-axis-tick{stroke:#9db1ac;stroke-width:1}
.yb-dosgrafiek .chart-axis-label{font-family:inherit;font-size:13px;fill:#536965}
.yb-dosgrafiek .chart-x-label{font-weight:650}
.yb-dosgrafiek .chart-line{stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.yb-dosgrafiek .chart-area{pointer-events:none}
.yb-dosgrafiek .chart-point{stroke-width:2.4;cursor:pointer}
.yb-dosgrafiek .chart-point:hover,.yb-dosgrafiek .chart-point.is-actief{r:7.5;stroke-width:3.4}
.yb-dosgrafiek .chart-point:focus{outline:none}
.yb-dosgrafiek .chart-point:focus-visible{stroke:var(--diep);stroke-width:4;r:8}
.yb-dosgrafiek .chart-bar{cursor:pointer;opacity:.88}
.yb-dosgrafiek .chart-bar:hover,.yb-dosgrafiek .chart-bar.is-actief{opacity:1;stroke:var(--diep);stroke-width:2.2}
.yb-dosgrafiek .chart-bar:focus{outline:none}
.yb-dosgrafiek .chart-bar:focus-visible{opacity:1;stroke:var(--diep);stroke-width:3}
.yb-dosgrafiek .chart-reference-line{stroke-width:1.8;opacity:.92;pointer-events:none}
.yb-dosgrafiek .chart-reference-label{font-family:inherit;font-size:13px;font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round;pointer-events:none}
@media(max-width:560px){.yb-dosgrafiek .interactive-chart{height:210px}.yb-dosgrafiek .chart-type{display:flex;width:100%}
  .yb-dosgrafiek .chart-type button{flex:1;min-width:0}.yb-dosgrafiek .chart-info{gap:4px 12px}}
@media(pointer:coarse){.yb-dosgrafiek .chart-type button{min-height:48px}}
/* T6-2/T5-3 - de dossiertab Drempels: een uitgangspijn die nog niet is ingevuld */
.drempel-leeg{font-style:normal;font-weight:700;font-size:.78rem;color:var(--oranje-inkt)}
/* T5-9 - het blok 'Behandeling' in de klinische samenvatting */
.vb-programmas{margin:0;padding-left:20px;font-size:.84rem;line-height:1.5}
.vb-programmas li+li{margin-top:4px}
.vb-periode{display:block;color:var(--muted,#5b6b66)}
.vb-behandeling .vb-grenzen dd{text-align:right}
@media(max-width:560px){.vb-behandeling .vb-grenzen div{flex-direction:column;gap:2px}.vb-behandeling .vb-grenzen dd{text-align:left}}

/* v15.233.0 (K-4f) - de oefeningen van een training in de tijdlijn, met 'zelf gekozen' waar de patiënt hem zelf koos */
.sessie-oefeningen{margin:4px 0 2px;font-size:.8rem;color:var(--inkt);overflow-wrap:anywhere}
.sessie-oefeningen .sessie-oef-kop{color:var(--muted);font-size:.72rem}
.sessie-oefeningen .sessie-oef-noot{color:var(--muted);font-size:.72rem}   /* v15.233.0 (K-4f) - benadering */
.zelf-gekozen-chip{display:inline-flex;align-items:center;padding:0 7px;border-radius:999px;background:var(--vlak-2);
  border:1px solid var(--lijn);color:var(--inkt);font-size:.7rem;font-weight:600;line-height:1.5;white-space:nowrap}
.yb-oefentabel .yb-zelf-gekozen{color:var(--inkt);font-weight:600}
/* v15.234.0 (audit T1-9) - de kop van het dossier heeft vier knoppen ('Schema bewerken' en 'Bekijk als patiënt'
   in plaats van 'Open trainingapp'). Past dat niet naast de naam, dan gaan de knoppen een regel omlaag (rechts)
   in plaats van de naam te knijpen; zo blijft de i op zijn plek als de uitleg opengaat (test_v15217). */
.detail-hero{flex-wrap:wrap}
.detail-hero-actions{margin-left:auto}