/* "Mijn dag" (ontwerp 19a) — alles gescoped onder .md zodat het niet botst met de app-stijlen.
   Het deel onder "uit 19a" is gegenereerd uit mijn-dag-19/19a.html (botsende klassen hernoemd:
   sheet → blad, chip(s) → kchip(s), toast → mdtoast). Pas waarden daar aan in de geest van 19a. */

.md {
  --sheet: #1e1f25; --s2: #2a2c33; --muted: #9aa0ab; --dim: #6d717b; --deep: #0b4a85;
  --ok: #2ea043; --knel: #f0a04b; --voer: var(--accent); --pauzekleur: var(--accent);  --r: 16px;   /* één kleur voor alle activiteiten: soort = accent, status verschilt */
}
.md ul { list-style: none; }

/* containers in de app: het scherm (in #screen) en de laag voor bladen + toast (over het hele toestel) */
.md-scherm { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.md-laag { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
/* een blad dat wegschuift neemt geen tikken meer aan */
.md .sheetroot:not(.is-op) * { pointer-events: none !important; }

/* toevoegingen t.o.v. 19a: ADL-deeltaken onder de activiteit, eindtijd-editor in het blad */
.md .tr__sub { display: block; margin-top: 3px; font-size: 12px; line-height: 1.35; color: var(--dim); white-space: normal; }
.md .md-editor { margin-top: 14px; padding: 12px 14px 14px; }
.md .md-editor .af19__loc { margin-top: 0; text-transform: none; }
.md .vo15 { gap: 8px; }

/* ===== uit 19a ===== */
/* ===== Richting 14c — FOCUS-TEGEL =====
Het verhaal: bovenin het sheet ligt één grote tegel van NU — de lopende
behandeling, met locatie, tijden en voortgang. Daaronder de behandellijst.
De pil op de tegel is de volgende stap; de app werkt de selectie af. */

.md .kop{flex:none;padding:18px 18px 16px;display:flex;align-items:center;gap:14px;position:relative;z-index:2;background:var(--bg)}
.md .kop__ti{font-size:34px;font-weight:800;letter-spacing:-.5px;line-height:1}
.md .kop__ti span{display:inline-block;font-size:34px;font-weight:800;color:var(--text);letter-spacing:-.5px;text-transform:none;margin:0}
.md .rug{position:absolute;left:51px;top:108px;bottom:0;width:2px;background:var(--line);z-index:0;pointer-events:none;opacity:.92}
.md .sheetroot.is-op .rug{background:linear-gradient(180deg,var(--line) 0 23%,rgba(10,124,255,.5) 23.4% 24.2%,var(--line) 24.6% 100%)}
.md .rug::before{content:'';position:absolute;top:0;left:0;width:100%;height:var(--vul,0px);border-radius:2px;background:linear-gradient(180deg,rgba(168,200,255,.25),rgba(10,124,255,.85));box-shadow:0 0 8px rgba(10,124,255,.35);transition:height .7s var(--ease)}
/* laag voor het nu-bolletje: precies over de rug, maar boven de lijst, zodat de bolletjes van de rijen er bij het
   scrollen onderdoor schuiven in plaats van eroverheen. Alleen de knop zelf vangt tikken. */
.md .nu-laag{position:absolute;left:51px;top:108px;bottom:0;width:2px;z-index:3;pointer-events:none}
/* het nu-label: de tijd los links, het "+" precies op de as. Beweegt mee met de tijd en is de knop om nu iets te
   starten. Rustig (geen puls); glijdt naar een nieuwe tijd. left:-51px = de rand van het scherm (rug op left:51px). */
.md .rug__nu{position:absolute;left:-51px;right:-12px;top:var(--ny,0px);transform:translateY(-50%);display:flex;align-items:center;justify-content:space-between;height:26px;padding:0 3px 0 6px;background:none;border:0;color:#fff;pointer-events:auto;cursor:pointer;transition:top .7s var(--ease)}
.md .rug__nu b{font-size:13px;font-weight:800;line-height:1;letter-spacing:0;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.9);font-variant-numeric:tabular-nums;white-space:nowrap}
.md .rug__plus{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:#fff;box-shadow:0 0 0 2px var(--bg);transition:transform 140ms var(--ease),box-shadow 140ms}
/* stippellijn over de lijst op de plek van nu, alleen bij hover of focus (je ziet waar het komt) */
.md .rug__nu::after{content:'';position:absolute;left:100%;top:50%;width:var(--lijn,0px);margin-left:2px;border-top:1.5px dashed rgba(120,176,255,.8);opacity:0;pointer-events:none;transition:opacity 140ms}
.md .rug__nu:hover::after,.md .rug__nu:focus-visible::after{opacity:1}
.md .rug.is-direct::before,.md .nu-laag.is-direct .rug__nu{transition:none}
@media (prefers-reduced-motion:reduce){.md .rug::before,.md .rug__nu{transition:none}}

.md .lijst{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;padding:10px 16px 92px;position:relative}
.md .lijst::-webkit-scrollbar{display:none}
.md .spoor{position:relative;margin-left:0;padding-left:66px}
.md .tl__b{position:relative;margin-bottom:14px;padding-bottom:12px;min-height:52px}
.md .tl__b:last-child{margin-bottom:2px}
.md .tl__u{display:none}
.md .tl__k{position:absolute;left:-20px;top:31px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--muted);z-index:1}
.md .tl__b--loopt .tl__k{width:16px;height:16px;left:-22px;top:29px;background:var(--accent);border-color:rgba(168,200,255,.45);box-shadow:0 0 0 6px rgba(10,124,255,.15)}
.md .tl__b--af .tl__k{background:var(--ok);border-color:var(--ok)}
/* cliënt begonnen, nog niet af: half gevulde bol, blauwe ring naar rato */
.md .tl__b--uit .tl__k{background:transparent;border-color:var(--dim)}
.md .tl__b--pauze .tl__k{background:var(--pauzekleur);border-color:var(--pauzekleur)}
.md .tl__b .held{margin:0}
.md .tl__b--af .tl__u,.md .tl__b--uit .tl__u{color:var(--dim)}
.md .tl__b--loopt .tl__u,.md .tl__b--voer .tl__u{color:var(--text-2);font-weight:700}

/* lopende kaart = de focus-tegel op het hoofdscherm */
.md .held{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--vlk,#12233a);border:1px solid rgba(10,124,255,.38);border-radius:20px;padding:13px 13px 11px;margin:4px 0 14px;cursor:pointer;transition:transform 140ms var(--ease),border-color 140ms}
.md .held:active{transform:scale(.99);border-color:rgba(10,124,255,.62)}
.md .held__kop{display:flex;align-items:flex-start;gap:10px}
.md .held__kop b{flex:1;min-width:0;font-size:21px;font-weight:800;line-height:1.15;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md .held__loc{margin-top:6px;display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);min-width:0}
.md .held__loc .ms{flex:none;font-size:15px;opacity:.75}
.md .held__loc span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md .held__soort{margin-top:5px;display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);min-width:0;text-transform:lowercase}
.md .held__soort .ms{flex:none;font-size:15px;opacity:.75}
.md .held__soort span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md .tijdchip{display:inline-flex;align-self:flex-start;align-items:center;gap:4px;margin:8px 46px 0 0;padding:1px 7px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(168,200,255,.2);font-variant-numeric:tabular-nums}
.md .tijdchip span{font-size:11.5px;color:var(--muted)}
.md .tijdchip .ms{font-size:11px;opacity:.55}
.md .tijdchip b{font-size:12px;font-weight:800;color:var(--accent)}
.md .stop{flex:none;position:absolute;right:13px;bottom:13px;display:inline-flex;align-items:center;justify-content:center;gap:7px;width:38px;height:38px;padding:0;border-radius:11px;background:var(--primary);color:#fff;font-size:14px;font-weight:700;transition:transform 140ms var(--ease)}
.md .stop .ms{font-size:17px}
.md .stop:active{transform:scale(.93)}

.md .tijd{flex:none;font-size:14.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.md .rij{width:100%;display:flex;align-items:center;gap:14px;padding:15px 4px 15px 6px;text-align:left;color:inherit;position:relative}
.md .rij::after{content:'';position:absolute;left:58px;right:6px;bottom:0;height:1px;background:var(--line)}
.md .lijst > li:last-child .rij::after{display:none}
.md .rij:active{background:rgba(255,255,255,.035)}
.md .rij:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:12px}
.md .cirkel{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(var(--c,transparent) calc(var(--p,0) * 1%), var(--line) 0)}
.md .cirkel::after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--bg)}
.md .cirkel i{position:relative;z-index:1;font-style:normal;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--s2);color:var(--text-2);font-size:13px;font-weight:700}
.md .cirkel--team i{background:transparent;border:1px solid var(--line);color:var(--muted)}
.md .cirkel--klaar{--c:var(--ok);--p:100}
.md .cirkel--klaar i{background:#23242a;color:var(--dim)}
.md .cirkel--uit{--p:0;opacity:.5}
.md .cirkel--uit i{background:#23242a;color:var(--dim)}
.md .cirkel--pauze{--c:var(--pauzekleur);--p:100}
.md .cirkel--pauze i{background:rgba(10,124,255,.14);color:var(--pauzekleur);font-size:17px}
.md .rij--pauze{opacity:1;cursor:default}
.md .rij--pauze .mid b{color:var(--pauzekleur);font-weight:700}
.md .uitknop{flex:none;height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-size:13.5px;font-weight:700}
.md .mid{flex:1;min-width:0}
.md .mid b{display:block;font-size:17px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md .mid small{display:block;margin-top:2px;font-size:12px;color:var(--dim)}
.md .rij--af .mid b{color:var(--text-2);font-weight:700}
.md .rij--af .tijd{color:var(--text-2);font-size:14px}
.md .rij--af .mid small{color:var(--muted)}
.md .rij--uit{opacity:.42}
.md .rij--uit .mid b{text-decoration:line-through}
.md .rij--vol{padding-top:19px;padding-bottom:19px}
.md .rij--vol .mid b{font-size:19px}
.md .rij--vol .tijd{color:var(--text-2);font-size:16px}
.md .rij--vol .cirkel{width:48px;height:48px}
.md .rij--vol .cirkel i{width:38px;height:38px}
/* eerstvolgende: een echte kaart met label, zodat je ziet wie er aan de beurt is */

/* ===== sheet ===== */
.md .sheetroot{position:absolute;inset:0;z-index:40;pointer-events:none}
.md .overlay{position:absolute;inset:0;background:rgba(0,0,0,.62);opacity:0;transition:opacity 240ms;pointer-events:auto}
.md .blad{position:absolute;left:0;right:0;bottom:0;top:22%;background:var(--sheet);border-radius:26px 26px 0 0;display:flex;flex-direction:column;transform:translateY(100%);transition:transform 300ms var(--ease);pointer-events:auto}
.md .sheetroot.is-op .overlay{opacity:1}
.md .sheetroot.is-op .blad{transform:translateY(0)}
.md .blad__head{flex:none;padding:15px 17px 12px;display:flex;align-items:center;gap:13px;border-bottom:1px solid var(--line)}
.md .blad__av{flex:none;width:46px;height:46px;border-radius:50%;background:var(--deep);color:#dbe7ff;display:grid;place-items:center;font-size:15px;font-weight:700}
.md .blad__nm{font-size:18.5px;font-weight:700}
.md .blad__sub{margin-top:3px;font-size:12.5px;color:var(--muted)}
.md .blad__sluit{margin-left:auto;width:40px;height:40px;display:grid;place-items:center;color:var(--muted);flex:none}
.md .blad__body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:20px}
.md .blad__body::-webkit-scrollbar{display:none;width:0;height:0}

.md .cep{padding:15px 17px 4px;font-size:13px;letter-spacing:.7px;text-transform:uppercase;color:var(--muted)}
.md .cep--sm{padding-top:6px;display:flex;align-items:center}
.md .kies{display:flex;align-items:center;gap:12px;width:100%;padding:13px 17px;text-align:left;border-bottom:1px solid var(--line-soft)}
.md .kies:active{background:rgba(255,255,255,.04)}
.md .kies .av{flex:none;width:36px;height:36px;border-radius:50%;background:var(--s2);display:grid;place-items:center;font-size:13px;font-weight:700}
.md .kies b{flex:1;font-size:16px;font-weight:700}
.md .kies .ms{color:var(--dim)}
.md .kies .ks{flex:none;margin-left:auto;margin-right:8px;font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.md .tk{padding:13px 17px 6px}
.md .tk__duur{display:flex;align-items:center;justify-content:space-between;margin:0 0 9px}
.md .tk__titel{font-size:16px;font-weight:700}
.md .tk__duur .ks{font-size:13px;color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
.md .tk__rij{display:flex;align-items:stretch;gap:6px}
.md .tk__chip{flex:1;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--s2);color:var(--text-2);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.md .tk__chip--d{border-color:var(--primary);background:rgba(10,124,255,.16);color:var(--accent)}
.md .tk__chip:active{transform:scale(.94)}
.md .tk__nm{flex:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--s2);color:var(--accent);font-size:19px;font-weight:700;line-height:1}
.md .kchips{display:flex;flex-wrap:wrap;gap:8px;padding:0 17px 6px}
.md .kchip{padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:var(--s2);color:var(--text-2);font-size:14px;font-weight:700}
.md .kchip.is-gekozen{border-color:var(--primary);background:rgba(10,124,255,.16);color:var(--accent)}
.md .kchip:active{transform:scale(.96)}
.md .bev{display:flex;align-items:center;justify-content:center;gap:9px;width:calc(100% - 34px);margin:12px 17px 4px;padding:14px 0;border-radius:14px;background:var(--primary);color:#fff;font-size:16px;font-weight:700}
.md .bev:active{transform:scale(.98)}

/* ===== 14 — gedeelde sheet-bouwstenen ===== */
.md .tr{padding:2px 17px 0}
.md .tr__all{margin-left:auto;font-size:12.5px;font-weight:800;color:var(--accent);text-decoration:underline;text-underline-offset:3px;padding:2px 4px}
.md .tr__r{display:flex;align-items:center;gap:12px;width:100%;padding:12px 13px;margin:8px 0 0;border:1px solid var(--line);border-radius:14px;background:var(--s2);text-align:left;transition:border-color 140ms,background 140ms}
.md .tr__r:active{transform:scale(.99)}
.md .tr__c{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.05);color:var(--dim)}
.md .tr__c .ms{font-size:19px}
.md .tr__c--sel{background:var(--primary);color:#fff;cursor:pointer;transition:transform 140ms var(--ease)}
.md .tr__c--sel:active{transform:scale(.9)}
.md .tr__r[data-actie]{cursor:pointer}
.md .tr__g{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.md .tr__g b{font-size:16px;font-weight:800;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md .tr__tijd{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.md .tr__duur{font-size:12.5px;color:var(--muted)}
.md .tr__kn{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--dim);color:var(--dim);background:none;padding:0;cursor:pointer}
.md .tr__kn:active{transform:scale(.9)}
.md .tr__kn .ms{font-size:17px}
.md .tr__r.aan .tr__c{background:rgba(10,124,255,.16);color:var(--accent)}
.md .tr__r.aan .tr__kn{border-color:var(--primary);background:var(--primary);color:#fff}
.md .tr__r.loop{border-color:rgba(10,124,255,.6);background:#12233a}
.md .tr__r.loop .tr__c{background:rgba(10,124,255,.2);color:var(--accent)}
.md .tr__r.loop .tr__tijd,.md .tr__r.af .tr__tijd{color:var(--text-2);font-weight:700}
.md .tr__kn--stop{border-color:var(--primary);background:var(--primary);color:#fff}
.md .tr__r.af{border-color:rgba(46,160,67,.4)}
.md .tr__r.af .tr__c{background:rgba(46,160,67,.16);color:var(--ok)}
.md .tr__kn--af{border-color:var(--ok);background:var(--ok);color:#fff}
.md .sm{margin:13px 17px 0;padding:14px 15px;border-radius:16px;background:#182a1f;border:1px solid rgba(46,160,67,.34)}
.md .sm__top{display:flex;align-items:center;gap:9px}
.md .sm__top .ms{color:var(--ok);font-size:20px}
.md .sm__top b{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
.md .sm__top u{margin-left:auto;text-decoration:none;font-size:14px;font-weight:800;color:var(--ok)}
.md .sm__laat{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--voer);align-self:flex-start;margin-top:3px}
.md .sm__loc{display:flex;align-items:center;gap:5px;margin-top:7px;font-size:13px;color:var(--muted)}
.md .sm__loc .ms{font-size:15px;opacity:.8}
.md .sm__acts{margin-top:11px;padding-top:9px;border-top:1px solid rgba(255,255,255,.07)}
.md .sm__a{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:14px}
.md .sm__a span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md .sm__a i{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase}
.md .sm__a i.ind{color:var(--voer)}
.md .sm__a i.dir{color:var(--accent)}
.md .sm__a .sm__duur{flex:none;font-size:13px;font-weight:800;color:var(--text-2);font-variant-numeric:tabular-nums}
.md .ey14{display:block;width:100%;margin-top:13px;padding:13px 2px 0;border-top:1px solid var(--line-soft);text-align:center;color:var(--accent);font-size:13.5px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.md .ey14r{margin-top:14px}
.md .nudge{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:10px}
.md .nudge button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--s2);display:grid;place-items:center;font-size:19px}
.md .nudge b{min-width:58px;text-align:center;font-size:16px;color:var(--text);font-variant-numeric:tabular-nums}
.md .vo14{display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 34px);margin:14px 17px 0;padding:16px;background:none;border:1px dashed var(--line);border-radius:16px;color:var(--muted);font:inherit;font-size:14px;cursor:pointer}
.md .vo14 .ms{font-size:19px}
.md .vo14:active{background:rgba(255,255,255,.04)}
.md .vo14t{display:flex;align-items:center;justify-content:center;gap:6px;width:calc(100% - 34px);padding:13px 0 0;margin:12px 17px 0;border-top:1px solid var(--line);color:var(--dim);font:inherit;font-size:13px}
.md .vo14t button{color:inherit;font:inherit;background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.md .vo14t button:active{color:var(--muted)}
.md .hin14{margin:10px 0 0;text-align:center;font-size:12px;color:var(--dim)}

/* 16 — de dag-balk bovenin het sheet (uit 14d) */
.md .sg14{display:flex;gap:6px;padding:15px 17px 0}
.md .sg14 i{flex:1;height:7px;border-radius:4px;background:var(--line);min-width:8px}
.md .sg14 i.ind{background:var(--voer)}
.md .sg14 i.dir{background:var(--primary)}
.md .sg14 i.klaar{background:var(--ok)}
.md .sg14 i.aan{background:var(--accent);box-shadow:0 0 10px rgba(168,200,255,.5)}

/* tabbar — gelijk aan css/styles.css van de hoofd-app; wijzig ze samen */
.md .mdtoast{position:absolute;left:50%;bottom:82px;transform:translate(-50%,20px);background:#e3e5ea;color:#15171c;padding:10px 16px;border-radius:10px;font-size:14px;font-weight:700;opacity:0;pointer-events:none;transition:opacity 200ms,transform 200ms var(--ease);z-index:40;white-space:nowrap;max-width:360px;overflow:hidden;text-overflow:ellipsis}
.md .mdtoast.is-op{opacity:1;transform:translate(-50%,0)}
.md .kop__plus{margin-left:auto;flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:transparent;border:none;color:var(--text);cursor:pointer}
.md .kop__plus .ms{font-size:28px}
.md .kop__plus:active{background:rgba(255,255,255,.06)}

/* ===== 15 — gaat niet door als echte knop ===== */
.md .vo15{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 17px 0;padding-top:12px;border-top:1px solid var(--line-soft)}
.md .vo15__btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 18px;border-radius:10px;background:var(--s2);border:1px solid var(--line);color:var(--muted);font-size:13.5px;font-weight:700;transition:transform 140ms var(--ease),color 140ms}
.md .vo15__btn .ms{font-size:16px;opacity:.8}
.md .vo15__btn:active{transform:scale(.96);color:var(--text-2)}

/* 16 — de grote "nu"-rij (uit 14d) */
.md .big14{display:flex;align-items:center;gap:13px;width:calc(100% - 34px);margin:13px 17px 0;padding:15px 16px;border-radius:18px;background:var(--s2);border:1px solid var(--line);text-align:left;transition:transform 140ms var(--ease)}
.md .big14:active{transform:scale(.99)}
.md .big14 .ms{flex:none;font-size:24px;color:var(--muted)}
.md .big14__l{flex:1;min-width:0}
.md .big14__l b{display:block;font-size:19px;font-weight:800;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md .big14__l em{display:block;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;margin-top:3px;color:var(--dim)}
.md .big14__t{flex:none;display:flex;align-items:center;gap:6px;font-size:20px;font-weight:800;color:var(--text-2);font-variant-numeric:tabular-nums}
.md .big14__t .ms{font-size:17px;color:var(--dim)}
.md .big14--dir{background:#12233a;border-color:rgba(10,124,255,.55)}
.md .big14--dir .ms{color:var(--accent)}
.md .big14--dir em{color:var(--accent)}
.md .big14--dir .big14__t{color:var(--accent)}
.md .big14--dir .big14__t .ms{color:var(--accent);opacity:.7}

/* 19 — pil op de tegel: de 18b-chip, iets groter */
.md .held__vol{display:flex;align-items:center;gap:10px;width:fit-content;max-width:calc(100% - 46px);margin:2px 0 0;padding:7px 12px 7px 7px;border-radius:999px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.17);text-align:left;transition:transform 140ms var(--ease),background 140ms}
.md .held__vol:active{transform:scale(.97);background:rgba(255,255,255,.17)}
.md .held__vol__ic{flex:none;width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center}
.md .held__vol__ic .ms{font-size:18px}
.md .held__vol__t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.md .held__vol__l{font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--muted)}
.md .held__vol__n{font-size:14.5px;font-weight:800;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md .held__vol__ch{flex:none;opacity:.5;font-size:20px}
/* behandeling groot en duidelijk op de tegel */
.md .held__soort{margin-top:6px;gap:7px;font-size:17px;font-weight:800;color:var(--text)}
.md .held__soort .ms{font-size:20px;opacity:.9}

/* ===== 19 — blad: genummerde stations, geen enkele tijd ===== */
.md .tr__g b{font-size:17px}
.md .rail17{position:relative;padding-left:44px}
.md .rail17::before{content:'';position:absolute;left:15px;top:34px;bottom:34px;width:2px;background:var(--line-soft);border-radius:1px}
.md .rail17 .tr__r{position:relative;padding:14px 13px;margin:10px 0 0}
.md .rail17 .tr__c{width:38px;height:38px}
.md .rail17 .tr__c .ms{font-size:21px}
.md .rail17 .tr__kn{width:38px;height:38px}
.md .rail17 .tr__kn .ms{font-size:19px}
.md .rb17{position:absolute;left:-44px;top:23px;width:30px;height:30px;border-radius:50%;background:var(--sheet);border:2px solid var(--dim);box-shadow:0 0 0 3.5px var(--sheet);display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--dim);font-variant-numeric:tabular-nums}
.md .rb17--af{background:var(--ok);border-color:var(--ok);color:#fff}
.md .rb17--loop{background:var(--accent);border-color:var(--accent);color:#0a1220;box-shadow:0 0 0 3.5px var(--sheet),0 0 14px rgba(168,200,255,.55)}
/* af-kaart: rustig, pillen en containers, kapsels — geen te-laat */
.md .af19{margin:16px 17px 0;padding:16px;border-radius:18px;background:var(--s2);border:1px solid var(--line)}
.md .af19__top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.md .af19__tijd{font-size:22px;font-weight:800;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.md .af19__min{font-size:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--ok);background:rgba(46,160,67,.13);border:1px solid rgba(46,160,67,.35);padding:5px 11px;border-radius:999px}
.md .af19__loc{display:flex;align-items:center;gap:6px;margin-top:11px;font-size:13px;color:var(--muted);min-width:0}
.md .af19__loc .ms{flex:none;font-size:15px;opacity:.8}
.md .af19__loc span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md .af19__acts{margin-top:13px;display:grid;gap:8px}
.md .af19__a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:13px;background:rgba(255,255,255,.03);border:1px solid var(--line-soft);font-size:14.5px;text-transform:capitalize}
.md .af19__a .ms{flex:none;font-size:17px}
.md .af19__a .dir{color:var(--accent)}
.md .af19__a .ind{color:var(--voer)}
.md .af19__a span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-2);font-weight:700}
.md .af19__a b{flex:none;font-size:11.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--dim);font-variant-numeric:tabular-nums}
.md .af19__bew{display:flex;align-items:center;justify-content:space-between;margin-top:13px;padding:10px;border-radius:15px;background:var(--sheet);border:1px solid var(--line)}
.md .af19__k{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--s2);color:var(--text-2);font-family:inherit;font-size:21px;font-weight:700;line-height:1;display:grid;place-items:center;cursor:pointer;transition:transform 140ms var(--ease),background 140ms}
.md .af19__k:active{transform:scale(.9);background:rgba(255,255,255,.08)}
.md .af19__nu{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.md .af19__klaar{height:38px;padding:0 18px;border-radius:999px;border:0;background:var(--primary);color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;cursor:pointer;transition:transform 140ms var(--ease)}
.md .af19__klaar:active{transform:scale(.95)}
.md .af19__knoppen{display:flex;gap:10px;margin:14px 17px 0}
.md .af19__btn{flex:1;height:44px;border-radius:999px;border:1px solid var(--line);background:var(--s2);color:var(--text-2);font-family:inherit;font-size:12.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;cursor:pointer;transition:transform 140ms var(--ease),background 140ms}
.md .af19__btn:active{transform:scale(.97);background:rgba(255,255,255,.06)}
.md .af19__btn--primair{border:0;background:var(--primary);color:#fff}
/* blad zo hoog als z'n content — geen dode ruimte meer onderin */
.md .blad{top:auto;max-height:78%}
.md .blad::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:38px;height:4px;border-radius:2px;background:var(--line);z-index:1}
.md .blad__head{padding-top:19px}
.md .tr{padding-top:16px}
/* rustig: status op één plek — groen subtiel, geen dubbele seinen */
.md .tr__r.af{border-color:var(--line)}
.md .tr__r.af .tr__c{background:rgba(255,255,255,.05);color:var(--dim)}
.md .tr__r.af .tr__g b{color:var(--muted)}
.md .tr__kn--af{border-color:var(--line);background:rgba(46,160,67,.1);color:var(--ok)}
.md .tr__kn--aan{border-color:var(--primary);background:var(--primary);color:#fff}
.md .tr__kn--skip:active{transform:none}
.md .rb17--skip{border-style:dashed;border-color:var(--line);color:var(--dim)}
.md .af19__a--skip{background:none;border-style:dashed}
.md .af19__a--skip .ms{color:var(--dim)}
.md .af19__a--skip span{color:var(--dim);font-weight:400;text-decoration:line-through}

/* Inbedmodus in de hoofd-app: het iframe IS het hele toestel — eigen rand weg,
direction-pill weg; statusbar en tabbar blijven (19a-look), tabbar bestuurt de app */


/* ===== 26 okt — feedback: één kleur, status verschilt; officieel vs verwacht; ruimte ===== */
/* begonnen maar niet af: groene ring naar rato (groen = klaar) */
.md .tl__b--deels .tl__k{background:linear-gradient(90deg,var(--ok) 50%,var(--bg) 50%);border-color:var(--ok)}
.md .cirkel--deels{--c:var(--ok)}
.md .rij--deels .mid small{color:var(--muted)}

/* tijdkolom: afgesproken tijd vast, verwachte tijd klein eronder als die afwijkt */
.md .tijd{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.md .tijd b{font-weight:700;color:inherit}
.md .tijd small{font-size:11px;color:var(--muted);white-space:nowrap}
.md .rij--af .tijd{color:var(--dim)}
.md .tr__duur em{font-style:normal;color:var(--muted)}

/* eerstvolgende: geen rand, alleen een rustig label */
.md .beurt{display:block;margin-bottom:2px;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--text-2)}

/* niet gedaan (gaat niet door / no show): zichtbaar, gestippeld, grijs, geen vinkje */
.md .tr__r.skip{background:none;border:1px dashed var(--line)}
.md .tr__r.skip .tr__c{background:rgba(255,255,255,.04);color:var(--dim)}
.md .tr__r.skip .tr__g b{color:var(--dim);font-weight:700;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.3)}
.md .tr__r.skip .tr__duur{color:var(--dim);font-style:italic}
.md .tr__r.skip .tr__kn--skip{border:1px dashed var(--line);color:var(--dim);cursor:default}

/* voorbereiding niet nodig → weghalen */
.md .tr__weg{align-self:flex-start;display:inline-flex;align-items:center;gap:3px;margin-top:5px;padding:3px 9px 3px 6px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--muted);font:inherit;font-size:11.5px;font-weight:700;cursor:pointer}
.md .tr__weg .ms{font-size:14px}
.md .tr__weg:active{background:rgba(255,255,255,.06)}

/* ruimte: vrijgekomen tijd, gestippeld en uitnodigend om te vullen */
.md .tl__b--ruimte .tl__k{background:var(--bg);border:2px dashed var(--dim)}
.md .ruimte{width:100%;display:flex;align-items:center;gap:14px;padding:12px 10px 12px 6px;border:1px dashed var(--line);border-radius:16px;background:none;color:inherit;text-align:left;cursor:pointer}
.md .ruimte:active{background:rgba(255,255,255,.04)}
.md .ruimte__ic{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px dashed var(--dim);color:var(--muted)}
.md .ruimte .mid b{font-size:15px;color:var(--text-2)}

/* ===== 27 okt: de planning blijft staan; knelpunten als geheugensteuntje, no show, dag afsluiten ===== */
/* knelpunt: oranje bol en label "staat nog open"; verder geen knoppen (oplossen gaat in het blad) */
.md .tl__b--knel .tl__k{background:var(--bg);border-color:var(--knel);box-shadow:0 0 0 4px rgba(240,160,75,.14)}
.md .knel{display:block;margin-bottom:2px;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--knel)}
.md .rij--knel .mid small{color:var(--knel);opacity:.85}
.md .rij--knel .tijd b{color:var(--knel)}
.md .rij--uit .mid small{text-decoration:none}
.md .kop__knel{display:inline-flex;align-items:center;gap:4px;padding:3px 10px 3px 7px;border-radius:999px;border:1px solid rgba(240,160,75,.45);color:var(--knel);font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums}
.md .kop__knel .ms{font-size:16px}
.md .knelhint{display:flex;gap:9px;margin:14px 17px 2px;padding:11px 12px;border-radius:14px;border:1px solid rgba(240,160,75,.35);background:rgba(240,160,75,.07);font-size:13px;line-height:1.4;color:var(--text-2)}
.md .knelhint .ms{flex:none;font-size:18px;color:var(--knel)}
.md .knelhint b{color:var(--text)}
.md .tr__knel{font-style:normal;font-weight:700;color:var(--knel)}
.md .kies .ks--knel{color:var(--knel);white-space:nowrap}
/* dag afsluiten, onderaan de lijst */
.md .tl__b--sluit .tl__k{background:var(--bg);border:2px dashed var(--dim)}
.md .sluitdag{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;padding:14px 0;border-radius:16px;border:1px dashed var(--line);background:none;color:var(--text-2);font:inherit;font-size:15px;font-weight:800;cursor:pointer}
.md .sluitdag:active{background:rgba(255,255,255,.04)}
.md .sluitdag .ms{font-size:19px}
.md .sluitdag--klaar{border-style:solid;border-color:rgba(46,160,67,.45);color:var(--ok);cursor:default}

/* ===== 27 okt: toevoegen via het plusje (js/mijn-dag-toevoegen.js), less is more ===== */
.md .tv-tabs{display:flex;gap:4px;margin:14px 17px 6px;padding:3px;border-radius:14px;background:var(--s2)}
.md .tv-tab{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;border-radius:11px;color:var(--muted);font-size:14px;font-weight:800;transition:background 160ms,color 160ms}
.md .tv-tab .ms{font-size:18px}
.md .tv-tab.is-gekozen{background:var(--accent);color:#0e2a4d}
.md .tv-tab:focus-visible,.md .kies:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.md .tv-zoek{display:flex;align-items:center;gap:10px;margin:10px 17px 4px;padding:0 14px;height:46px;border-radius:14px;background:var(--s2);border:1px solid var(--line);color:var(--muted)}
.md .tv-zoek:focus-within{border-color:var(--accent)}
.md .tv-zoek input{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;color:var(--text);font:inherit;font-size:15px}
.md .tv-zoek input::placeholder{color:var(--dim)}
.md .tv-leeg{padding:22px 17px;color:var(--dim);font-size:14px;text-align:center}

.md .tv-wie{margin-top:6px}
.md .tv-wie .av{background:var(--deep);color:#dbe7ff}
.md .tv-wie .ms{margin-left:auto;color:var(--accent)}
.md .tv-chips{padding-top:14px}

/* tijd: groot, met − en +; tik op de tijd om te typen */
.md .tv-klok{display:flex;align-items:center;justify-content:space-between;margin:18px 17px 0;padding:8px;border-radius:16px;border:1px solid var(--line);background:var(--s2)}
.md .tv-klok input{width:140px;background:none;border:0;outline:0;color:var(--text);font:inherit;font-size:30px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums;color-scheme:dark;border-radius:10px}
.md .tv-klok input:focus-visible{background:rgba(168,200,255,.1)}
.md .tv-klok input::-webkit-calendar-picker-indicator{display:none}

.md .tv-knoppen{display:flex;gap:10px;margin:22px 17px 4px}
.md .tv-knop{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:52px;border-radius:15px;border:1px solid var(--line);background:var(--s2);color:var(--text-2);font-size:16px;font-weight:800;transition:transform 140ms var(--ease)}
.md .tv-knop .ms{font-size:21px}
.md .tv-knop--primair{border:0;background:var(--primary);color:#fff}
.md .tv-knop:active{transform:scale(.98)}
.md .tv-knop:disabled{opacity:.4;pointer-events:none}

/* het nu-bolletje als "+"-knop: icoon en tikgedrag (positie en vorm staan bij .md .rug__nu bovenaan) */
.md .rug__plus .ms{font-size:15px;font-variation-settings:'wght' 500}
.md .rug__ic--pijl{display:none}
/* nu uit beeld gescrold: aan de rand een rustig donker rondje met een pijl naar nu (tik = terugscrollen) */
.md .nu-laag.is-buiten .rug__ic--plus{display:none}
.md .nu-laag.is-buiten .rug__ic--pijl{display:inline-block}
.md .nu-laag.is-buiten-onder .rug__ic--pijl{transform:rotate(180deg)}
.md .nu-laag.is-buiten .rug__plus{background:#1b2533;color:var(--accent);box-shadow:0 0 0 2px var(--bg),0 0 0 3px rgba(120,176,255,.5)}
.md .nu-laag.is-buiten .rug__nu::after{display:none}
/* locatie bij de start: status op de lopende kaart, kaartje in het blad */
.md .held__loc .geo-plek{flex:none;margin-left:8px}
.md .blad__body > .geo-plek--kaart{display:block;margin:14px 17px 0}
.md .blad__body > .geo-plek--kaart .geokaart{margin-top:0}
/* valt nu vóór het eerste blok, dan bovenaan ruimte voor het nu-bolletje */
.md .spoor.spoor--nu-boven{padding-top:44px}
/* loopt er iets, dan ís dat nu: alleen de tijd staat naast het eigen bolletje van de lopende kaart, zonder "+" */
.md .rug__nu:disabled{pointer-events:none;cursor:default}
.md .rug__nu:disabled .rug__plus{visibility:hidden}
.md .rug__nu:focus-visible{outline:none}
.md .rug__nu:hover .rug__plus,.md .rug__nu:focus-visible .rug__plus{transform:scale(1.1);box-shadow:0 0 0 2px var(--bg),0 0 0 3px rgba(168,200,255,.9)}
.md .rug__nu:active .rug__plus{transform:scale(.9)}

/* net toegevoegd: licht kort op in de lijst */
.md .tl__b.is-nieuw > .rij,.md .tl__b.is-nieuw > .held{animation:tvNieuw 2.4s var(--ease) both}
@keyframes tvNieuw{0%,35%{box-shadow:0 0 0 2px var(--accent);border-radius:16px;background-color:rgba(10,124,255,.12)}100%{box-shadow:0 0 0 8px rgba(168,200,255,0);background-color:transparent}}
@media (prefers-reduced-motion:reduce){.md .tl__b.is-nieuw > .rij,.md .tl__b.is-nieuw > .held{animation:none}}