/* Planner v2 (Arthur 22/10/2026, docs/PLANNER_V2.md): het dagscherm als tijdlijn, het blad, de toast, de
   werkbalk met '⋯ Meer' op de gsm en de statusbalk van één regel. Voor ux-fase4.css (die blijft als laatste, tests/test_uxstijl.py).
   Alleen rollen uit tokens.css (licht en donker); de afdelingskleuren uit het palet (zoals het weekrooster).
   Gevoel: een dienstboek aan de pas — creme papier, inkt voor wat vastligt, messing voor de ene actie
   (goedkeuren), baksteenrood alleen waar volk te kort is. Ruimte op 4/8; tikdoelen 44 px. */

:root, [data-theme] {
  --afd-keu: var(--p-groen-terras); --afd-bar: var(--p-bruin); --afd-zv: var(--p-geel); --afd-afw: var(--p-steen); --afd-sch: var(--p-blauw-mid);
  --afd-zv-t: var(--p-inkt);
  --pl2-rij: 40px;
}

/* ---- de werkbalk: op de pc één rij; op de gsm ‹ datum › ⋯ en daaronder de segmentknop ---- */
.pl-bar .pl-admin { display: contents; }
.pl-bar .pl-meer { display: none; }
.pl-bar .pl-meer .ic { width: 20px; height: 20px; fill: currentColor; }
.pl-meer-stip { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--err); box-shadow: 0 0 0 2px var(--surface); }
@media (max-width: 760px) {
  .pl-bar { padding: 8px; gap: 8px; }
  .pl-bar .pl-pick { order: 1; flex: 1 1 auto; min-width: 0; }
  .pl-bar .pl-pick > .pop-btn { min-height: 44px; }
  .pl-bar .cal-nav { order: 2; width: 44px; min-height: 44px; }
  .pl-bar .pl-meer { order: 3; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: 44px; min-height: 44px; padding: 0;
    border-radius: 50%; border: 1px solid var(--line-strong); background: var(--raised); color: var(--text-strong); }
  .pl-bar .pl-meer span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pl-bar.meer-open .pl-meer { background: var(--sel-bg); color: var(--sel-fg); border-color: var(--sel-bg); }
  .pl-bar #pl-seg, .pl-bar #pl-seg-tabel { order: 4; }
  .pl-bar .pl-admin { order: 5; display: none; width: 100%; flex-direction: column; gap: 8px; padding-top: 4px; border-top: 1px solid var(--line); }
  .pl-bar.meer-open .pl-admin { display: flex; }
  .pl-bar .pl-admin .pl-vastknop { order: 0; width: 100%; }
  .pl-bar .pl-admin .pl-right { order: 0; display: flex; flex-direction: column; width: 100%; }
  .pl-bar .pl-admin .pl-right > * { width: 100%; }
  .pl-bar .pl-admin .pl-right .pop-btn, .pl-bar .pl-admin .pl-right a.btn, .pl-bar .pl-admin .pl-vastknop { justify-content: flex-start; min-height: 44px; }
}

/* ---- de statusbalk: één regel die plakt; per afdeling en de cijfers bij een tik op de kop ---- */
.pl-sbalk .pl-sb-k button.pl-sb-aandacht { position: relative; gap: 4px; padding: 6px 12px; border: 1px solid var(--line-strong); background: var(--raised); color: var(--text-strong); }
.pl-sb-aandacht b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--err); color: var(--on-solid); font-size: var(--t-xs); line-height: 20px; }
@media (max-width: 760px) {
  .pl-sbalk { grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "stip kop aandacht ob goed" "cijf cijf cijf cijf cijf" "zones zones zones zones zones";
    gap: 0 8px; padding: 6px 6px 6px 12px; min-height: 56px; border-radius: 16px; }
  .pl-sbalk .pl-sb-cijfers { display: none; }
  .pl-sbalk.meer .pl-sb-cijfers { display: flex; margin-top: 4px; }
  .pl-sbalk.meer .pl-sb-zones { margin-top: 4px; }
  /* de kop mag op twee regels ("Nog in te plannen: / 9 u"): nooit afgekapt */
  .pl-sbalk button.pl-sb-kop { font-size: var(--t-m); line-height: 1.2; min-height: 44px; white-space: normal; overflow: visible; text-overflow: clip;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .pl-sbalk button.pl-sb-kop::after { display: none; }
  .pl-sbalk .pl-sb-k button.pl-sb-aandacht { grid-area: aandacht; min-height: 40px; height: 40px; padding: 0 10px; }
  .pl-sbalk .pl-sb-k button.pl-sb-ob { width: 40px; height: 40px; min-height: 40px; }
  .pl-sbalk .pl-sb-k button.pl-sb-goed { min-height: 44px; padding: 4px 14px; }
}

/* ---- het dagscherm ---- */
.pl2-dagscherm { display: grid; gap: 12px; }
.pl2-kop { padding: 16px 18px 14px; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-card); touch-action: pan-y; }
.pl2-kop-r { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.pl2-dag { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: var(--t-2xl); line-height: 1.1; letter-spacing: -.01em; color: var(--text-strong); text-wrap: balance; }
.pl2-pil { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-pil); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; border: 1px solid transparent; }
.pl2-pil.vs { background: var(--surface-3); color: var(--text-2); border-color: var(--line-2); }
.pl2-pil.vl { background: var(--warn-bg); color: var(--warn-ink); border-color: color-mix(in srgb, var(--warn) 60%, transparent); }
.pl2-pil.ok { background: var(--ok-bg); color: var(--ok-ink); border-color: color-mix(in srgb, var(--ok) 60%, transparent); }
.pl2-stats { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-size: var(--t-s); color: var(--text-2); }
.pl2-stats b { font-size: var(--t-l); font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; margin-right: 2px; }
.pl2-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pl2-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 2px 12px; border-radius: var(--r-pil); border: 1px solid var(--line-2);
  background: var(--raised); color: var(--text); font-size: var(--t-s); font-weight: 600; cursor: pointer;
  transition: transform var(--d-1) var(--ease-out), background-color var(--d-2) var(--ease-out); }
.pl2-chip:hover { background: var(--surface-3); }
.pl2-chip:active { transform: scale(.97); }
.pl2-chip.sterk { border-color: var(--brand); background: var(--messing-tint); }
.pl2-chip .wx-ic { width: 20px; height: 20px; }
.pl2-chip small { font-weight: 400; color: var(--text-3); }
.pl2-staat { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 12px 0 0; padding: 0; border: 0; background: none; font-size: var(--t-s); color: var(--text-2); }
.pl2-staat > .ic { width: 18px; height: 18px; flex: none; }
.pl2-staat > span { flex: 1 1 0; min-width: 0; }
.pl2-staat b { color: var(--text-strong); }
.pl2-staat.pl-voorlopig > .ic { color: var(--warn-ink); }
.pl2-link { min-height: 36px; padding: 2px 10px; border-radius: var(--r-pil); font-size: var(--t-s); font-weight: 600; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }

/* de Aandacht-strook */
/* wat niet mag op het rooster (27/10): een extra op een 3e dag na elkaar */
.pl2-regel { border-radius: 14px; padding: 10px 14px; background: var(--err-bg, color-mix(in srgb, var(--err) 12%, var(--surface))); border: 1px solid color-mix(in srgb, var(--err) 55%, transparent); color: var(--err-ink); }
.pl2-regel > b { display: flex; align-items: center; gap: 6px; }
.pl2-regels, .pl2-kanniet { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.pl2-regels li, .pl2-kanniet li { display: flex; gap: 6px; align-items: flex-start; }
.pl2-aandachtblad .pl2-regels li, .pl2-aandachtblad .pl2-kanniet li { color: var(--err-ink); }
.pl2-tag.regel, .pl2-tag.kanniet { background: var(--err); color: var(--on-solid); }
.pl2-r.regel, .pl2-r.kanniet { box-shadow: inset 3px 0 0 var(--err); }
.pl2-aandacht { display: flex; align-items: stretch; border-radius: 14px; background: var(--surface-3); border: 1px solid var(--line-2); overflow: hidden; }
.pl2-aandacht.sterk { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.pl2-a-knop { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px; border: 0; border-radius: 0; background: none; color: var(--text-strong);
  text-align: left; font-size: var(--t-m); cursor: pointer; }
.pl2-a-knop > span { flex: 1; min-width: 0; }
.pl2-a-knop b { margin-right: 4px; }
.pl2-a-knop .ic { flex: none; width: 20px; height: 20px; }
.pl2-a-weg { width: 48px; min-height: 48px; border-radius: 0; border-left: 1px solid var(--line-2); }

/* de kaart Rooster */
.pl2-rooster { padding: 14px 16px 10px; }
.pl2-rkop { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 10px; }
.pl2-rtitel { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-serif); font-weight: 600; font-size: var(--t-xl); color: var(--text-strong); }
.pl2-weerg button { min-height: 36px; }
.pl2-nieuwknop { min-height: 44px; padding: 4px 16px; border-radius: var(--r-pil); gap: 6px; }
.pl2-tabelbalk { display: flex; justify-content: flex-end; margin: 0 0 8px; }
#pl-body .pl2-rooster .pl-roost-breed { display: block; }
.pl2-rvoet { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; justify-content: space-between; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line); font-size: var(--t-s); color: var(--text-2); }
.pl2-tot b { color: var(--text-strong); }

/* de tijdlijn: dezelfde kolommen voor de as, de dekking en elke rij, zodat de balken onder elkaar kloppen */
.pl2-tl { --pl2-kol: 36px minmax(0, 1fr) auto; display: grid; gap: 14px; }
.pl2-asrij, .pl2-dekrij { display: grid; grid-template-columns: 0 minmax(0, 1fr); gap: 0; padding: 0 11px; }
.pl2-as { position: relative; height: 18px; font-size: var(--t-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.pl2-as span { position: absolute; top: 0; transform: translateX(-50%); }
.pl2-as span:first-child { transform: none; }
.pl2-as span:last-child { transform: translateX(-100%); }
.pl2-lane { display: grid; gap: 6px; }
.pl2-lkop { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 2px; }
.pl2-lkop h4 { margin: 0; font-size: var(--t-base); font-weight: 700; color: var(--text-strong); }
.pl2-ldot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.pl2-ldot.afd-keu { background: var(--afd-keu); } .pl2-ldot.afd-bar { background: var(--afd-bar); } .pl2-ldot.afd-zv { background: var(--afd-zv); }
.pl2-ldot.afd-afw { background: var(--afd-afw); } .pl2-ldot.afd-sch { background: var(--afd-sch); }
.pl2-lmeta { margin-left: auto; font-size: var(--t-s); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl2-lmeta b { color: var(--text-strong); }
.pl2-lmeta.minder b { color: var(--err-ink); }
.pl2-lmeta.meer b { color: var(--warn-ink); }
.pl2-lmeta em { font-style: normal; font-weight: 700; color: var(--err-ink); }
.pl2-plus { width: 40px; min-height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); }
.pl2-leeg { margin: 0; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: 12px; font-size: var(--t-s); color: var(--text-3); }
.pl2-dek-l { display: none; font-size: var(--t-xs); color: var(--text-3); align-self: center; white-space: nowrap; }
.pl2-dek-l b { color: var(--err-ink); }
.pl2-dek { position: relative; height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.pl2-dek i { position: absolute; top: 0; bottom: 0; display: grid; place-items: center; border-right: 1px solid var(--surface); font-style: normal; }
.pl2-dek i span { display: none; font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.pl2-dek i.ok { background: color-mix(in srgb, var(--ok) 45%, var(--surface-3)); }
.pl2-dek i.veel { background: color-mix(in srgb, var(--warn) 55%, var(--surface-3)); }
.pl2-dek i.kort { background: color-mix(in srgb, var(--err) 80%, var(--surface)); }
.pl2-dek i.zonder { background: var(--line); }
.pl2-rijen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pl2-r { display: grid; width: 100%; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "av naam rechts" "spoor spoor spoor";
  align-items: center; gap: 6px 10px; min-height: 56px; margin: 0; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--raised); color: var(--text-strong); text-align: left; font: inherit; cursor: pointer;
  transition: transform var(--d-1) var(--ease-out), border-color var(--d-2) var(--ease-out), background-color var(--d-2) var(--ease-out); }
.pl2-r:hover { border-color: var(--line-strong); }
.pl2-r:active { transform: scale(.985); }
.pl2-r:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pl2-r.open { border: 1px dashed color-mix(in srgb, var(--err) 70%, transparent); background: color-mix(in srgb, var(--err-bg) 60%, var(--raised)); }
/* gewijzigd: een streep binnen de rand (geen dikkere rand: dan schuift de balk 3 px en klopt hij niet meer met de as) */
.pl2-r.gew { box-shadow: inset 4px 0 0 var(--brand); }
.pl2-r.nabij { box-shadow: inset 4px 0 0 var(--err); }
.pl2-r.flits { animation: pl2-flits 900ms var(--ease-out); }
@keyframes pl2-flits { 0% { background: var(--messing-tint); } 100% { background: var(--raised); } }
.pl2-av { grid-area: av; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: var(--t-xs); font-weight: 700; letter-spacing: .02em;
  color: var(--on-solid); background: var(--text-3); flex: none; }
.pl2-av.afd-keu { background: var(--afd-keu); } .pl2-av.afd-bar { background: var(--afd-bar); } .pl2-av.afd-zv { background: var(--afd-zv); color: var(--afd-zv-t); }
.pl2-av.afd-afw { background: var(--afd-afw); color: var(--p-inkt); } .pl2-av.afd-sch { background: var(--afd-sch); }
.pl2-av.leeg { background: transparent; color: var(--err-ink); border: 1.5px dashed currentColor; }
.pl2-av .ic { width: 18px; height: 18px; }
.pl2-naam { grid-area: naam; min-width: 0; display: grid; gap: 1px; line-height: 1.25; }
.pl2-naam b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-ml); }
.pl2-naam small { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; font-size: var(--t-s); color: var(--text-2); font-variant-numeric: tabular-nums; }
.pl2-tijd { font-weight: 600; color: var(--text); }
.pl2-tijd .kz-r { display: inline; }
.pl2-tag { display: inline-flex; align-items: center; gap: 3px; padding: 0 7px; border-radius: var(--r-pil); font-style: normal; font-size: var(--t-xs); font-weight: 700;
  background: var(--surface-3); color: var(--text-2); }
.pl2-tag .ic { width: 12px; height: 12px; }
.pl2-tag.nb { background: var(--err-bg); color: var(--err-ink); }
.pl2-tag.gew { background: var(--messing-tint); color: var(--brand-ink); }
.pl2-tag.kz { background: var(--info-bg); color: var(--info-ink); }
.pl2-rechts { grid-area: rechts; font-size: var(--t-s); color: var(--text-3); font-variant-numeric: tabular-nums; }
.pl2-kies { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--r-pil); background: var(--err); color: var(--on-solid); font-size: var(--t-s); font-weight: 700; }
.pl2-spoor { grid-area: spoor; position: relative; height: 12px; border-radius: 6px; background: repeating-linear-gradient(90deg, var(--surface-3) 0 1px, transparent 1px calc(100% / var(--pl2-uren, 12)));
  background-color: color-mix(in srgb, var(--surface-3) 45%, transparent); }
.pl2-bar { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: var(--text-3); font-style: normal; overflow: hidden; }
.pl2-bar em, .pl2-dek i, .pl2-tag { font-style: normal; }
.pl2-bar em { display: none; }
.pl2-r[data-station="kitchen"] .pl2-bar { background: var(--afd-keu); } .pl2-r[data-station="bar"] .pl2-bar { background: var(--afd-bar); }
.pl2-r[data-station="zaal"] .pl2-bar { background: var(--afd-zv); } .pl2-r[data-station="dishwash"] .pl2-bar { background: var(--afd-afw); }
.pl2-r[data-station="cleaning"] .pl2-bar { background: var(--afd-sch); }
.pl2-r.open .pl2-bar { background: repeating-linear-gradient(135deg, var(--err) 0 6px, color-mix(in srgb, var(--err) 45%, transparent) 6px 12px); }
.pl2-bar.kz { opacity: .45; }
.pl2-bar.kz.telt { opacity: 1; }
.pl2-nu { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--err-ink); border-radius: 1px; z-index: 1; }

/* pc en iPad liggend: de naam links, de balk ernaast, met de uren in de balk en de dekking met cijfers */
@media (min-width: 900px) {
  /* rij: rand 1 + 10 opvulling + 36 + 10 + 200 + 10 + 90 + 10 = de balk begint op 367 px; as en dekking idem */
  .pl2-r { grid-template-columns: 36px 200px 90px minmax(0, 1fr); grid-template-areas: "av naam rechts spoor"; min-height: 52px; padding: 6px 10px; }
  .pl2-asrij, .pl2-dekrij { grid-template-columns: 346px minmax(0, 1fr); gap: 0 10px; }
  .pl2-dek-l { display: block; text-align: right; }
  .pl2-dek { height: 20px; border-radius: 6px; }
  .pl2-dek i span { display: block; color: var(--text-strong); }
  .pl2-dek i.kort span { color: var(--on-solid); }
  .pl2-spoor { height: 28px; border-radius: 8px; }
  .pl2-bar { border-radius: 8px; display: flex; align-items: center; }
  .pl2-bar em { display: block; padding: 0 8px; font-size: var(--t-s); font-weight: 700; color: var(--on-solid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pl2-r[data-station="zaal"] .pl2-bar em, .pl2-r[data-station="dishwash"] .pl2-bar em { color: var(--p-inkt); }
  .pl2-rechts { text-align: right; }
  .pl2-dag { font-size: var(--t-3xl); }
}

/* de dichtgeklapte secties */
.pl2-secties { display: grid; gap: 8px; }
.pl2-sec { border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.pl2-sec > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 14px; cursor: pointer; list-style: none; font-weight: 700; color: var(--text-strong); }
.pl2-sec > summary::-webkit-details-marker { display: none; }
.pl2-sec > summary small { font-weight: 400; color: var(--text-3); }
.pl2-sec > summary .ic { margin-left: auto; width: 20px; height: 20px; color: var(--text-3); transition: transform var(--d-2) var(--ease-out); }
.pl2-sec[open] > summary .ic { transform: rotate(180deg); }
.pl2-sec > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 14px; }
.pl2-sec-b { padding: 0 14px 14px; min-width: 0; overflow-x: auto; }
.pl2-sec-b > .card { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.pl2-sec-b > .card > .ct:first-child { display: none; }
.pl2-sec-b .wx-card, .pl2-sec-b .ev-card { margin: 0; }

/* ---- het blad ---- */
.pl2-ov { z-index: var(--z-venster, 90); padding: 24px; background: var(--scrim); opacity: 0; transition: opacity var(--d-3) var(--ease-out); overscroll-behavior: contain; }
.pl2-ov.aan { opacity: 1; }
.pl2-blad { position: relative; display: flex; flex-direction: column; width: min(560px, 100%); max-height: min(88vh, 88dvh); border-radius: var(--r-l);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop); transform: translateY(12px) scale(.98);
  transition: transform var(--d-3) var(--ease-out); }
.pl2-ov.aan .pl2-blad { transform: none; }
.pl2-greep { display: none; width: 40px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--line-strong); touch-action: none; }
.pl2-bkop { display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 10px 20px; touch-action: none; }
.pl2-bkop-t { flex: 1; min-width: 0; }
.pl2-bkop h2 { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: var(--t-xl); line-height: 1.2; color: var(--text-strong); overflow-wrap: anywhere; }
.pl2-bsub { margin: 2px 0 0; font-size: var(--t-s); color: var(--text-2); font-variant-numeric: tabular-nums; }
.pl2-sluit { width: 44px; min-height: 44px; padding: 0; border-radius: 50%; flex: none; }
.pl2-binh { flex: 1; overflow: auto; padding: 0 20px 16px; overscroll-behavior: contain; }
.pl2-bvoet { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--surface); border-radius: 0 0 var(--r-l) var(--r-l); }
.pl2-bvoet button { min-height: 44px; border-radius: var(--r-pil); padding: 4px 16px; }
.pl2-gevaar { color: var(--err-ink); }
.pl2-bsec + .pl2-bsec { margin-top: 18px; }
.pl2-h { margin: 0 0 8px; font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.pl2-h small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.pl2-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.pl2-tags .pl2-tag { padding: 2px 9px; font-size: var(--t-s); }
.pl2-actie { margin-top: 10px; min-height: 44px; border-radius: var(--r-pil); padding: 4px 16px; }
@media (max-width: 760px) {
  .pl2-ov { align-items: flex-end; padding: 0; }
  .pl2-blad { width: 100%; max-height: 92dvh; border-radius: 20px 20px 0 0; transform: translateY(100%); transition-timing-function: cubic-bezier(.32, .72, 0, 1); }
  .pl2-greep { display: block; }
  .pl2-bkop { padding-top: 8px; }
  .pl2-bvoet { border-radius: 0; }
  .pl2-bvoet button { flex: 1 1 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .pl2-blad, .pl2-ov.aan .pl2-blad { transform: none; transition: none; }
  .pl2-r, .pl2-chip { transition: none; }
  .pl2-r:active, .pl2-chip:active { transform: none; }
}

/* de lijst met mensen */
.pl2-kand { display: grid; gap: 4px; }
.pl2-kh { margin: 8px 0 2px; font-size: var(--t-s); font-weight: 700; color: var(--text-2); }
.pl2-kh small { font-weight: 400; color: var(--text-3); }
.pl2-k { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 10px; border-radius: 12px; border: 1px solid transparent;
  background: none; color: var(--text-strong); text-align: left; font: inherit; cursor: pointer; transition: background-color var(--d-2) var(--ease-out); }
button.pl2-k:hover { background: var(--surface-3); }
.pl2-k .pl2-av { width: 32px; height: 32px; }
.pl2-k-t { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.pl2-k-t b { font-size: var(--t-ml); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl2-k-t small { font-size: var(--t-s); color: var(--text-2); }
.pl2-k > .ic { width: 20px; height: 20px; color: var(--ok-ink); opacity: 0; }
.pl2-k[aria-pressed="true"] { border-color: var(--ok); background: var(--ok-bg); }
.pl2-k[aria-pressed="true"] > .ic { opacity: 1; }
.pl2-k.nu { background: var(--surface-3); cursor: default; }
.pl2-k.nee .pl2-k-t small { color: var(--err-ink); }
.pl2-k.vrij b { color: var(--err-ink); }
.pl2-k.bezig { opacity: .6; pointer-events: none; }
.pl2-kdicht > summary { min-height: 44px; display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: var(--t-s); font-weight: 700; color: var(--text-2); cursor: pointer; }
.pl2-kdicht > summary small { font-weight: 400; color: var(--text-3); }
.pl2-kleeg { margin: 4px 0; }

/* de tijdkiezer */
.pl2-tk { display: grid; gap: 8px; }
.pl2-tk-r { display: grid; grid-template-columns: 40px 44px minmax(0, 1fr) 44px; align-items: center; gap: 6px; }
.pl2-tk-l { font-size: var(--t-s); font-weight: 700; color: var(--text-2); }
.pl2-tk input[type="time"] { min-height: 48px; width: 100%; padding: 4px 10px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--inset);
  color: var(--text-strong); font: inherit; font-size: var(--t-xl); font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.pl2-stap { width: 44px; min-height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--raised); font-size: var(--t-xl); line-height: 1; }
.pl2-stap:active, .pl2-vk:active { transform: scale(.95); }
.pl2-voork { display: flex; flex-wrap: wrap; gap: 6px; }
.pl2-voork:empty { display: none; }
.pl2-vk { min-height: 40px; padding: 2px 14px; border-radius: var(--r-pil); border: 1px solid var(--line-2); background: var(--raised); font-weight: 700; font-variant-numeric: tabular-nums;
  transition: transform var(--d-1) var(--ease-out); }
.pl2-vk.on { background: var(--sel-bg); color: var(--sel-fg); border-color: var(--sel-bg); }
.pl2-afd[aria-checked="true"] { background: var(--sel-bg); color: var(--sel-fg); border-color: var(--sel-bg); }
.pl2-meer { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.pl2-meer input { width: 20px; height: 20px; }
.pl2-meer input:disabled + span { opacity: .55; }
.pl2-nieuwblad .pl-mk { margin-top: 8px; }

/* het Aandacht-blad */
.pl2-blad .pl-sb-vs { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 8px; }
.pl2-blad .pl-sb-vs li { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line-2); font-size: var(--t-m); }
.pl2-blad .pl-sb-vs-k { display: flex; gap: 8px; }
.pl2-blad .pl-sb-vs button { min-height: 44px; padding: 4px 16px; border-radius: var(--r-pil); border: 1px solid var(--line-strong); background: var(--raised); }
.pl2-blad .pl-sb-vs button.pl-sb-vs-ok { background: var(--sel-bg); border-color: var(--sel-bg); color: var(--sel-fg); }
.pl2-blad .pl2-h + .pl-sb-vs, .pl2-blad .pl2-h + .pl-ma { margin-top: 0; }
.pl2-blad .pl-ma { margin-bottom: 14px; padding: 12px; border-radius: 12px; background: var(--surface-3); }
.pl2-blad .pl-ma summary { cursor: pointer; min-height: 32px; }
.pl2-oblist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pl2-oblist li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 6px 6px 6px 12px; border-radius: 12px;
  border: 1.5px dashed color-mix(in srgb, var(--err) 70%, transparent); font-variant-numeric: tabular-nums; }
.pl2-kiesknop { min-height: 40px; padding: 2px 14px; border-radius: var(--r-pil); border: 0; background: var(--err); color: var(--on-solid); font-weight: 700; }
.pl2-blad .pl-keuze { display: grid; gap: 6px; }
.pl2-blad .pl-keuze-k { display: flex; flex-wrap: wrap; gap: 6px; }
.pl2-blad .pl-keuzepin { min-height: 44px; border-radius: var(--r-pil); }

/* ---- de toast ---- */
.pl2-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: var(--z-toast, 95); display: flex; align-items: center; gap: 10px;
  max-width: min(560px, calc(100vw - 32px)); padding: 8px 8px 8px 14px; border-radius: 14px; background: var(--chrome-2); color: var(--on-chrome);
  box-shadow: var(--shadow-pop); font-size: var(--t-m); opacity: 0; transform: translate(-50%, 8px); transition: opacity var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out); }
.pl2-toast.aan { opacity: 1; transform: translate(-50%, 0); }
.pl2-toast > .ic { width: 18px; height: 18px; flex: none; color: var(--ok); }
.pl2-toast.fout > .ic { color: var(--err); }
.pl2-toast > span { flex: 1; min-width: 0; padding: 6px 0; }
.pl2-toast-k { flex: none; min-height: 40px; padding: 2px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--on-chrome) 30%, transparent);
  background: transparent; color: var(--brand-2, var(--brand)); font-weight: 700; gap: 4px; }
@media (max-width: 760px) {
  .pl2-toast { bottom: calc(16px + env(safe-area-inset-bottom)); width: calc(100vw - 32px); }
  body:has(.plus-tabbar) .pl2-toast { bottom: calc(96px + env(safe-area-inset-bottom)); }      /* boven de onderbalk (UX_NAV) */
}
/* terwijl een blad openstaat, staat de melding bovenaan: nooit over de kop of de knoppen van het blad */
body:has(.pl2-ov) .pl2-toast { top: calc(12px + env(safe-area-inset-top)); bottom: auto; }
@media (prefers-reduced-motion: reduce) { .pl2-toast { transition: opacity var(--d-2) linear; transform: translate(-50%, 0); } }

/* ---- week: dezelfde pil voor 'voorlopig' ---- */
.wk-vl { border-radius: var(--r-pil); background: var(--warn-bg); color: var(--warn-ink); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; font-size: var(--t-xs); padding: 1px 7px; }

/* week op de gsm: de twee acties naast elkaar, zoals de knoppen van het dagscherm (pil, 44 px) */
@media (max-width: 899px) {
  .wk-kaart .wk-acties { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-kaart .wk-acties > :not(button), .wk-kaart .wk-acties > button:only-of-type { grid-column: 1 / -1; }
  .wk-kaart .wk-acties > button { min-height: 44px; padding: 4px 10px; font-size: var(--t-m); line-height: 1.15; }
  .wkg-kop { grid-template-columns: 44px minmax(0, 1fr) 44px; }
}

/* dagkop op de gsm: de dag en de pil op een regel */
@media (max-width: 760px) {
  .pl2-dag { font-size: var(--t-xl); } .pl2-kop { padding: 14px 14px 12px; } .pl2-stats b { font-size: var(--t-base); }
  .pl2-rooster { padding: 12px 12px 8px; }
  .pl2-rkop { flex-wrap: nowrap; gap: 8px; }
  .pl2-rtitel { font-size: var(--t-l); }
  .pl2-weerg button { padding: 2px 10px; }
  .pl2-nieuwknop { padding: 4px 14px; flex: none; }
}

/* ook wie zich niet opgaf in de lijst van een blad (standaard aan) */
.pl2-ruim { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 2px; font-size: var(--t-s); color: var(--text-2); cursor: pointer; }
.pl2-ruim input { width: 20px; height: 20px; }

/* ---- klok vanuit de planner (Arthur 22/10): Start/Stop naast het blok, de stand in een stip ---- */
/* elke rij dezelfde kolommen rechts (vuilbakje, klok), en de uren-as en dekking evenveel ingesprongen:
   zo staan alle balken op één lijn (Arthur 22/10: "drie shiften starten om 9u maar staan niet op een lijn") */
.pl2-rijen > li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-items: stretch; }
.pl2-tl:has(.pl2-weg) .pl2-rijen > li { grid-template-columns: minmax(0, 1fr) 40px; }
.pl2-tl.met-klokkol .pl2-rijen > li { grid-template-columns: minmax(0, 1fr) 96px; }
.pl2-tl.met-klokkol:has(.pl2-weg) .pl2-rijen > li { grid-template-columns: minmax(0, 1fr) 40px 96px; }
.pl2-tl:has(.pl2-weg) :is(.pl2-asrij, .pl2-dekrij) { padding-right: 57px; }
.pl2-tl.met-klokkol :is(.pl2-asrij, .pl2-dekrij) { padding-right: 113px; }
.pl2-tl.met-klokkol:has(.pl2-weg) :is(.pl2-asrij, .pl2-dekrij) { padding-right: 159px; }
.pl2-klok.leeg { visibility: hidden; }
.pl2-tl.met-klokkol .pl2-klok { min-width: 0; width: 100%; padding: 4px 6px; }
.pl2-weg { display: grid; place-items: center; min-height: 44px; padding: 0; border-radius: 12px; color: var(--text-3); }
.pl2-weg:hover, .pl2-weg:focus-visible { color: var(--err-ink); background: var(--err-bg, var(--surface-3)); }
.pl2-klok { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-width: 64px; min-height: 44px; padding: 4px 10px;
  border-radius: 14px; border: 1px solid var(--line-2); background: var(--raised); color: var(--text-strong); font: inherit; line-height: 1.15; }
button.pl2-klok { cursor: pointer; transition: transform var(--d-1) var(--ease-out); }
button.pl2-klok:active { transform: scale(.97); }
.pl2-klok b { font-size: var(--t-m); }
.pl2-klok small { font-size: var(--t-xs); color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl2-klok.in { background: var(--sel-bg); color: var(--sel-fg); border-color: var(--sel-bg); }
.pl2-klok.in small { color: var(--sel-fg-2); }
.pl2-klok.uit { border-color: var(--ok); background: var(--ok-bg); }
.pl2-klok.uit small { color: var(--ok-ink); }
.pl2-klok.stil { background: transparent; border-style: dashed; }
.pl2-klokrij, .pl2-klijst li { display: flex; align-items: center; gap: 10px; min-height: 52px; }
.pl2-klijst { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.pl2-klijst li { padding: 4px 4px 4px 10px; border-radius: 12px; }
.pl2-klijst li:nth-child(odd) { background: var(--surface-2); }
.pl2-kstip { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--line-strong); }
.st-in > .pl2-kstip { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.st-pauze > .pl2-kstip { background: var(--warn); }
.st-uit > .pl2-kstip { background: var(--text-3); }
.pl2-ktxt { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.pl2-ktxt small { font-size: var(--t-s); color: var(--text-2); }
.pl2-kknop { min-height: 44px; min-width: 88px; padding: 4px 16px; border-radius: var(--r-pil); }
.pl2-klokg { padding: 14px 16px; }
@media (prefers-reduced-motion: reduce) { button.pl2-klok { transition: none; } button.pl2-klok:active { transform: none; } }

/* Dag: de balk (datum, ‹ ›, weergave) en de dagkop plakken bovenaan; de statusbalk scrolt mee (Arthur 22/10).
   Na wat scrollen wordt de dagkop compact: alleen de dag, het etiket en de cijfers op één regel. */
.stack:has(.pl2-dagscherm) > .pl-bar { position: sticky; top: var(--header-h, 64px); z-index: 9; box-shadow: var(--shadow-card); }
.pl2-dagscherm .pl-sbalk { position: static; }
.pl2-dagscherm .pl2-kop { position: sticky; top: calc(var(--header-h, 64px) + var(--pl-bar-h, 64px) + 4px); z-index: 8; }
.pl-gescrold .pl2-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; padding: 8px 14px; }
.pl-gescrold .pl2-kop .pl2-dag { font-size: var(--t-l); }
.pl-gescrold .pl2-kop .pl2-stats { margin-top: 0; }
.pl-gescrold .pl2-kop .pl2-stats b { font-size: var(--t-m); }
.pl-gescrold .pl2-kop :is(.pl2-chips, .pl2-staat) { display: none; }
.pl-gescrold > .pl-bar .pl-right { display: none; }
@media (max-width: 899px) {
  .pl-gescrold .pl2-kop .pl2-stats span:nth-child(3) { display: none; }
}

/* gsm: vuilbakje onder de klokknop in één smalle kolom, zodat de rij breed genoeg blijft */
@media (max-width: 899px) {
  .pl2-tl.met-klokkol .pl2-rijen > li, .pl2-tl.met-klokkol:has(.pl2-weg) .pl2-rijen > li { grid-template-columns: minmax(0, 1fr) 80px; grid-template-rows: auto auto; }
  .pl2-tl.met-klokkol .pl2-rijen > li > .pl2-r { grid-row: 1 / span 2; }
  .pl2-tl.met-klokkol .pl2-rijen > li > .pl2-klok { grid-column: 2; grid-row: 1; }
  .pl2-tl.met-klokkol .pl2-rijen > li > .pl2-weg { grid-column: 2; grid-row: 2; min-height: 36px; }
  .pl2-tl.met-klokkol :is(.pl2-asrij, .pl2-dekrij), .pl2-tl.met-klokkol:has(.pl2-weg) :is(.pl2-asrij, .pl2-dekrij) { padding-right: 97px; }
}

/* een voorbije dag (Arthur 31/10): dezelfde tijdlijn, alleen-lezen, met onder de geplande balk een dunne balk met
   wat er geklokt is. Een rij is daar geen knop: geen hover, geen indrukken. */
.pl2-pil.vb { background: var(--surface-3); color: var(--text-3); border-color: var(--line-2); }
.pl2-r.vb { cursor: default; }
.pl2-r.vb:hover { border-color: var(--line); }
.pl2-r.vb:active { transform: none; }
.pl2-spoor.met-kbar { height: 16px; }
.pl2-spoor.met-kbar .pl2-bar { bottom: 5px; }
.pl2-kbar { position: absolute; bottom: 0; height: 3px; border-radius: 2px; background: var(--text-strong); }
.pl2-kbar.open { background: repeating-linear-gradient(90deg, var(--err) 0 4px, transparent 4px 7px); }
.pl2-gk { color: var(--text-strong); }
.pl2-gkw { white-space: nowrap; }
.pl2-tag.nk { background: var(--warn-bg); color: var(--warn-ink); }
@media (min-width: 900px) {
  .pl2-spoor.met-kbar { height: 30px; }
  .pl2-spoor.met-kbar .pl2-bar { bottom: 8px; }
  .pl2-kbar { height: 5px; border-radius: 3px; }
}