/* Horecast fase 2: de huisstijl van de nieuwe publieke site van Bistro Theo (Arthur 6/10/2026).
   Een laag bovenop theo.css en theo-plus.css: die twee blijven ongewijzigd. Deze file en haar
   <link> in index.html eruit = de look van fase 1 terug. Er verandert niets aan de werking.

   Palet (public_site/src/styles/global.css): inkt #15120e/#221d17/#2f2a22, crème #fbf8ea,
   linnen #efe7cc, zand #e9e2c4, olijf #8c7d54 / olijf-inkt #5e5337, messing #d4af37 /
   #f1d675 / #b8952c, neonrood #ff4d3d (alarm), bladgroen #72997a (in orde).
   Titels in Fraunces, tekst in Roboto Condensed; beide zelf gehost (CSP font-src 'self').

   Contrast: elke tekstkleur hieronder haalt minstens 4,5:1 op de grond waarop ze staat
   (gemeten 6/10). Neon en blad zijn te licht voor kleine tekst op crème: die twee kleuren
   dienen voor balken, bolletjes en randen; de tekst in die toestand krijgt de donkere
   variant (--neon-ink 5,3:1, --leaf-ink 5,2:1). */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url("../fonts/fraunces-var.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900;
  font-display: swap; src: url("../fonts/fraunces-var-italic.woff2") format("woff2"); }

/* De tokens van de publieke site (inkt, creme, linnen, messing, neon, blad) staan sinds UX fase 4 (20/10/2026) in
   tokens.css: het palet (--p-*) en de rollen (--bg, --surface, --text, --brand, ...). De oude namen (--f2-ink, --cream,
   --charcoal, ...) wijzen daar naar de rollen; deze stylesheet gebruikt de rollen zelf. */

body { background: var(--bg); color: var(--text); }
::selection { background: var(--brand); color: var(--p-inkt); }

/* ---- titels in Fraunces ---- */
h1, h2, .page-head h1, .ws-post, .ws-over-kop, .md h1, .md h2 {
  font-family: var(--f2-serif); font-weight: 600; letter-spacing: -.01em; color: var(--text-strong);
  font-variation-settings: "opsz" 72;
}
.page-head h1 { font-size:var(--t-3xl); line-height: 1.1; }
.page-head::after { width: 56px; height: 3px; background: linear-gradient(90deg, var(--brand-deep), var(--brand-2), var(--brand)); margin-top: .5rem; }
.page-head .t-sub { color: var(--text-2); }
@media (max-width: 760px) { .page-head h1 { font-size:var(--t-2xl); } }
/* kaarttitels: het 'eyebrow'-label van de publieke site, kapitaal en gespatieerd */
.ct, .card > .t-label:first-child, .card > div:first-child > .t-label:first-child {
  font-size:var(--t-s); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2);
}
.t-label { color: var(--text-2); }
/* Handboek: de lopende tekst groter en in een gewone (niet versmalde) letter, zodat ze leest als een
   boek (Bart, ticket 20261006-8aacbf). Geldt voor de vanilla- en de Preact-versie (zelfde DOM). */
#hb-gids .md, #hb-ops .md {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:var(--t-l); max-width: 72ch;
}
#hb-gids .md p, #hb-gids .md li, #hb-ops .md p, #hb-ops .md li { line-height: 1.65; }
#hb-gids .ct, #hb-ops .ct { font-size:var(--t-ml); }
#hb-gids .tabs button { font-size:var(--t-base); }

/* ---- zijbalk: inkt met messing accenten ---- */
.sidenav {
  background: var(--chrome); color: var(--on-chrome);
  box-shadow: inset -1px 0 0 rgba(212, 175, 55, .16);
  scrollbar-color: rgba(251, 248, 234, .2) transparent;
}
.sidenav .sec { color: var(--brand); letter-spacing: .22em; font-size:var(--t-xs); }
.sidenav a { color: rgba(251, 248, 234, .86); font-weight: 500; }
.sidenav a svg.ic { opacity: .75; }
.sidenav a:hover { background: rgba(251, 248, 234, .07); color: var(--on-chrome); }
.sidenav a.active, .sidenav a.active:hover {
  background: var(--brand); color: var(--p-inkt); font-weight: 700;
  box-shadow: 0 8px 22px -10px rgba(212, 175, 55, .75);
}
.sidenav a.active svg.ic { opacity: 1; }
.sidenav a .wip { color: var(--on-chrome-3); }
.sidenav .navfoot { border-top-color: rgba(251, 248, 234, .12); color: var(--on-chrome-2); }
.sidenav .navfoot button { background: transparent; color: var(--on-chrome); border: 1px solid rgba(251, 248, 234, .3); border-radius: 999px; }
.sidenav .navfoot button:hover { background: rgba(251, 248, 234, .1); border-color: var(--on-chrome); color: var(--on-chrome); }
#navclose { color: var(--on-chrome); }
#navclose:hover { background: rgba(251, 248, 234, .1); }
/* meldingen bovenaan de zijbalk */
.sidenav .na-head { background: var(--chrome-2); border-color: rgba(251, 248, 234, .14); color: var(--on-chrome-2); }
.sidenav .na-head:hover, .sidenav .navalert.open .na-head { background: var(--chrome-3); border-color: rgba(212, 175, 55, .5); color: var(--on-chrome); }
.na-n { background: var(--err); color: var(--p-inkt); font-weight: 700; }     /* 5,7:1 */
.navalert.stil .na-n { background: var(--chrome-3); color: var(--on-chrome-2); }
@media (hover: none) { .sidenav a:hover { background: transparent; } .sidenav a.active:hover { background: var(--brand); } }

/* ---- kopband: inkt, logo in crème, een messing haarlijn ---- */
.topbar, body.plus-scrolled .topbar {
  background: color-mix(in srgb, var(--chrome) 94%, transparent); border-bottom: 1px solid rgba(212, 175, 55, .28);
  box-shadow: 0 10px 30px -18px rgba(21, 18, 14, .8);
}
.topbar img { filter: brightness(0) invert(96%) sepia(14%) saturate(380%) hue-rotate(5deg); height: 38px; }
#navopen { color: var(--on-chrome); }
#navopen:hover { background: rgba(251, 248, 234, .1); }

/* ---- inhoud: kaarten, tegels, KPI's ---- */
.card {
  background-color: var(--surface); background-image: none;
  border: 1px solid color-mix(in srgb, var(--text-strong) 8%, transparent); border-radius: var(--r-l);
  box-shadow: var(--shadow-card);
}
.tile {
  background: var(--surface-3); border: 1px solid var(--line-2);
  border-left: .4rem solid var(--p-olijf); border-radius: 4px var(--r-m) var(--r-m) 4px;
}
.tile .v, .metric .v { color: var(--text-strong); }
.tile .d { color: var(--text-3); }
.tile .d.up, .tile-link .d .up { color: var(--ok-ink); }
.tile .d.down, .tile-link .d .down { color: var(--err-ink); }
.tile.alert { border-left-color: var(--err); }
.metric { border: 1px solid color-mix(in srgb, var(--text-strong) 8%, transparent); border-left: 3px solid var(--brand); border-radius: 4px var(--r-m) var(--r-m) 4px; box-shadow: var(--shadow-card); }
.metric .dlab { color: var(--text-3); }
.metric .dchip.up, .hero .dchip.up, .dchip.up { background: var(--ok-bg); color: var(--ok-ink); }
.metric .dchip.down, .hero .dchip.down, .dchip.down { background: var(--err-bg); color: var(--err-ink); }
@media (hover: hover) { .tile-link:hover { background: var(--inset); border-left-color: var(--brand); } }
.leader .fill { background-image: radial-gradient(circle, rgba(184, 149, 44, .6) 1.1px, transparent 1.3px); }

/* ---- statuskleuren: neon = fout, blad = in orde ---- */
.chip.ok   { background: var(--ok-bg); color: var(--ok-ink); }
.chip.warn { background: var(--surface-3); color: var(--brand-ink); }
.chip.err  { background: var(--err-bg); color: var(--err-ink); }
.chip.idle { background: var(--inset); color: var(--text-2); }
.note { border-color: color-mix(in srgb, var(--text-strong) 8%, transparent); border-left: 3px solid var(--brand); border-radius: 4px var(--r-s) var(--r-s) 4px; }
.note.err  { border-left-color: var(--err); }
.note.warn { border-left-color: var(--messing); }
.note.ok   { border-left-color: var(--ok); }
.mc-chip.ok { color: var(--ok-ink); }
.mc-chip.fel, .mc-n.fel { background: var(--err); color: var(--p-inkt); }
.ws-melding.fout { background: var(--err-bg); color: var(--rood-nacht); border-color: var(--rood-licht); }
.ws-melding.goed { background: var(--ok-bg); color: var(--groen-nacht); border-color: var(--blad-licht); }
#login .err { color: var(--err-ink); }

/* ---- tabellen ---- */
.tblwrap { border: 1px solid color-mix(in srgb, var(--text-strong) 12%, transparent); border-radius: var(--r-m); box-shadow: var(--shadow-card); background: var(--surface); }
.tblwrap .tbl-h { background: var(--surface-2); border-bottom-color: var(--line); }
.tblwrap th { background: var(--surface-2); color: var(--text-2); letter-spacing: .02em; }
th .sortic, th.sortable.on { color: var(--brand-ink); }
th.sortable:hover { color: var(--text-strong); }
td { border-bottom-color: var(--inset); }
tbody tr:hover td { background: rgba(212, 175, 55, .08); }
tr.total td { background: var(--surface-2); border-top-color: var(--line-strong); }
td.hi { background: var(--warn-bg); color: var(--messing-nacht); }

/* ---- knoppen en velden ---- */
button, .btn { border-color: color-mix(in srgb, var(--text-strong) 28%, transparent); border-width: 1px; border-radius: var(--r-s); color: var(--text); }
/* het oude hover (wit op messing) haalde maar 2:1 */
button:hover, .btn:hover { background: var(--surface-3); color: var(--text-strong); border-color: var(--text-zacht); }
button.primary, .btn.primary {
  background: var(--brand); border-color: var(--brand); color: var(--p-inkt);
  font-weight: 700; border-radius: 999px; padding-left: 1.15rem; padding-right: 1.15rem; letter-spacing: .02em;
}
button.primary:hover, .btn.primary:hover { background: var(--brand-2); border-color: var(--brand-2); color: var(--p-inkt); }
button:disabled, button:disabled:hover { color: var(--text-faint); border-color: var(--line); background: var(--surface); }
button.quiet { border-color: transparent; }
button.quiet:hover { background: var(--inset); }
input, select, textarea { background: var(--raised); border-color: color-mix(in srgb, var(--text-strong) 20%, transparent); border-radius: var(--r-s); }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--text-strong) 38%, transparent); }
input:focus, select:focus, textarea:focus { border-color: var(--text-strong); outline: none; }
input[type="checkbox"], input[type="radio"] { border-color: var(--p-olijf); background: var(--raised); }
input[type="checkbox"]:checked, input[type="radio"]:checked { background-color: var(--chrome-2); border-color: var(--chrome-2); }
:focus-visible { box-shadow: 0 0 0 3px rgba(212, 175, 55, .45) !important; }
.seg { border-color: color-mix(in srgb, var(--text-strong) 20%, transparent); border-radius: 999px; background: var(--surface); }
.seg button { border-right-color: color-mix(in srgb, var(--text-strong) 12%, transparent); }
.seg button.on { background: var(--sel-bg); color: var(--sel-fg); font-weight: 600; }
.seg button.on:hover { background: var(--sel-bg); color: var(--sel-fg); }
.tabs button { border-color: color-mix(in srgb, var(--text-strong) 20%, transparent); }
.tabs button.on { background: var(--sel-bg); border-color: var(--sel-bg); color: var(--sel-fg); box-shadow: 0 8px 20px -12px rgba(21, 18, 14, .7); }
.tabs button.on:hover { background: var(--sel-bg); color: var(--sel-fg); }
.dd-list button.on { background: var(--surface-3); color: var(--text-strong); }
.screen-tabs button { color: var(--text-2); }
.screen-tabs button.on { color: var(--text-strong); border-bottom-color: var(--brand); }
.ctl-bar { border-color: color-mix(in srgb, var(--text-strong) 8%, transparent); }
details.exp { border-color: color-mix(in srgb, var(--text-strong) 10%, transparent); }
.pop .pop-panel { border-color: color-mix(in srgb, var(--text-strong) 12%, transparent); }
.mp-knop-link { border-color: color-mix(in srgb, var(--text-strong) 28%, transparent); background: var(--surface); border-radius: 999px; }
.mp-knop-link:hover { background: var(--surface-3); }
.md a, .help-link { text-decoration-color: var(--brand); }
.md a:hover, .help-link:hover, .theo-links a:hover { color: var(--brand-ink); }
#login .t-meta a { color: var(--brand-ink); }

/* ---- Aanvraag-knop rechtsonder ---- */
.tk-fab { background: var(--chrome); color: var(--brand); border: 1px solid rgba(212, 175, 55, .5); box-shadow: 0 14px 30px -12px rgba(21, 18, 14, .7); }
.tk-fab:hover { background: var(--chrome-3); color: var(--brand-2); border-color: var(--brand); }

/* ---- Volstaat deze oplossing? (Arthur 8/10, assets/js/tickets.js) ----
   Het cijfer op de knop: wit op neon-inkt (5,6:1); de vraag zelf op de telefoon eerst:
   de drie keuzes onder elkaar, groot genoeg voor een duim (44 px). */
.tk-fab .tk-badge { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--p-rood-inkt); color: var(--wit); font-size:var(--t-xs); font-weight: 700; line-height: 22px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg); pointer-events: none; }
.tk-fb-panel { width: min(640px, 100%); }
.tk-fb { display: grid; gap: 10px; padding: 14px; background: var(--surface-3); border: 1px solid var(--line-2); border-radius: var(--r-m); }
.tk-fb + .tk-fb { margin-top: 4px; }
.tk-fb-titel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.tk-fb-titel b { font-size:var(--t-l); color: var(--text-strong); }
.tk-fb-titel .soort { font-size:var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.tk-fb-wat { background: var(--surface); border-left: 3px solid var(--brand); border-radius: 0 var(--r-s) var(--r-s) 0; padding: 8px 12px; }
.tk-fb-label { display: block; font-size:var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.tk-fb-wat p { margin: 4px 0 0; color: var(--text); white-space: pre-line; }
.tk-fb-knoppen { display: grid; gap: 8px; }
.tk-fb [hidden] { display: none !important; }      /* .tk-form en .tk-fb-knoppen zetten zelf display */
.tk-fb-knoppen button { min-height: 44px; justify-content: center; }
.tk-fb-knoppen button.quiet { border-color: var(--line-strong); }
.tk-fb-anders textarea { min-height: 88px; }
.tk-fb-anders .tk-acties button { min-height: 44px; }
.tk-fb-klaar { margin: 0; font-weight: 600; color: var(--err-ink); }
.tk-fb-klaar.ok { color: var(--ok-ink); }
.tk-fb-leeg { margin: 0; }
/* Arthur 11/10: de vraag legt zichzelf uit — wat je vroeg, op welke pagina, je schermafdruk */
.tk-fb-vroeg { padding: 0 2px; }
.tk-fb-vroeg p { margin: 4px 0 2px; color: var(--text-strong); white-space: pre-line; }
.tk-fb-shot { display: block; justify-self: start; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-s); background: var(--surface); cursor: zoom-in; overflow: hidden; max-width: 100%; }
.tk-fb-shot img { display: block; max-height: 120px; max-width: 100%; width: auto; }
.tk-fb-shot.groot { justify-self: stretch; cursor: zoom-out; }
.tk-fb-shot.groot img { max-height: none; width: 100%; }
.tk-fb-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-fb-nav button { min-height: 44px; border-color: var(--line-strong); }
.tk-fb-versie { margin: 0; font-size:var(--t-xs); opacity: .75; }
.tk-fb-banier { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px;
  background: var(--surface-3); border: 1px solid var(--brand); border-radius: var(--r-m); color: var(--text); }
.tk-fb-banier button { min-height: 44px; }
/* in de lijst van Hulp */
.tk-rij .status.bevestigd { background: var(--ok-bg); color: var(--ok-ink); font-weight: 600; }
.tk-fb-rij { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  padding: 8px 10px; background: var(--surface); border: 1px solid var(--brand); border-radius: var(--r-s); }
.tk-fb-rij > div { min-width: 0; flex: 1 1 220px; }
.tk-fb-rij .t-meta { display: block; margin-top: 2px; }
.tk-fb-rij button { min-height: 44px; }
.tk-fb-eerder { grid-column: 1 / -1; font-size:var(--t-m); color: var(--text-2); border-left: 3px solid var(--line-strong); padding-left: 8px; }
/* bouwagent (Arthur 8/10): een gebouwde oplossing nakijken in de lijst van Hulp; telefoon eerst */
.tk-bouwinfo { margin: 0 0 10px; }
.tk-rij .status.klaar_voor_review { background: var(--surface-3); color: var(--brand-ink); font-weight: 600; }
.tk-rij .status.goedgekeurd { background: var(--ok-bg); color: var(--ok-ink); }
.tk-bouw-rij { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  padding: 8px 10px; background: var(--surface-3); border: 1px solid var(--brand); border-radius: var(--r-s); }
.tk-bouw-rij > div { min-width: 0; flex: 1 1 220px; }
.tk-bouw-rij .t-meta { display: block; margin-top: 2px; }
.tk-bouw-rij button { min-height: 44px; }
.tk-bouw-paneel { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0;
  contain: inline-size;            /* de brede diff mag de rij niet breder maken dan de telefoon */
  padding: 12px; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r-m); }
.tk-bouw-paneel[hidden], .tk-bouw-paneel [hidden] { display: none !important; }
.tk-bouw-let { padding: 8px 10px; border-left: 3px solid var(--brand); background: var(--surface-3); font-size:var(--t-m); }
.tk-bouw-feiten { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size:var(--t-ml); overflow-wrap: anywhere; }
.tk-bouw-feiten code { font-size:var(--t-s); }
.tk-bouw-feiten .plus, .tk-bouw-diff .plus { color: var(--ok-ink); }
.tk-bouw-feiten .min, .tk-bouw-diff .min { color: var(--err-ink); }
.tk-bouw-fout { color: var(--err-ink); }
.tk-bouw-diff summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.tk-bouw-diff pre { margin: 6px 0 0; max-height: 60vh; overflow: auto; padding: 8px; background: var(--raised); border: 1px solid var(--line-strong);
  border-radius: var(--r-s); font-size:var(--t-xs); line-height: 1.45; white-space: pre; }
.tk-bouw-diff .plus { background: var(--ok-bg); display: inline-block; min-width: 100%; }
.tk-bouw-diff .min { background: var(--err-bg); display: inline-block; min-width: 100%; }
.tk-bouw-diff .kop { color: var(--text-2); font-weight: 600; }
.tk-bouw-diff .blok { color: var(--brand-ink); }
.tk-bouw-knoppen button { min-height: 44px; justify-content: center; }
@media (min-width: 560px) {
  .tk-fb-knoppen { grid-template-columns: repeat(3, auto); justify-content: start; }
}
@media (max-width: 559px) {
  .tk-fb-overlay { place-items: end stretch; padding: 0; }
  .tk-fb-panel { width: 100%; max-height: 92vh; border-radius: var(--r-l) var(--r-l) 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* ---- voet ---- */
footer { border-top: 1px solid color-mix(in srgb, var(--text-strong) 12%, transparent); color: var(--text-3); }
footer strong { color: var(--text-strong); letter-spacing: .12em; }

/* ---- login: inkt rondom, crème kaart ---- */
#login { background: radial-gradient(1200px 600px at 50% -10%, var(--chrome-3), var(--chrome) 60%); }
#login form { background: var(--bg); border: 1px solid rgba(212, 175, 55, .35); border-radius: 22px; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9); }
#login .rule { background: var(--brand); }

/* ---- telefoonbalk van het personeel (fase 1): inkt met messing ---- */
@media (max-width: 760px) {
  /* Arthur 25/10: groen, zodat de balk opvalt boven de inhoud */
  .plus-tabbar { background: color-mix(in srgb, var(--p-groen-terras) 96%, transparent); border-color: rgba(255, 255, 255, .22); box-shadow: 0 14px 34px -12px rgba(21, 18, 14, .75); }
  .plus-tabbar a { color: rgba(255, 255, 255, .9); }
  .plus-tabbar a.on { background: var(--brand); color: var(--p-inkt); }
}
/* zijbalk als overlay op tablet/telefoon: donkere sluier */
body.nav-open-phone::before { background: color-mix(in srgb, var(--p-inkt) 50%, transparent); }

/* ---- werkpost-tablet: zelfde schermen, nieuwe tokens; alleen de leesbaarheid nagekeken ---- */
.ws-uur.vraag { background: var(--warn-bg); border-color: var(--brand); }
.ws-uur.ok { border-color: var(--ok); background: var(--ok-bg); }
.ws-uur.ok .ws-uur-s { color: var(--ok-ink); }
.ws-seg button.on { background: var(--sel-bg); border-color: var(--sel-bg); color: var(--sel-fg); }
.ws-in { background: var(--raised); border-color: color-mix(in srgb, var(--text-strong) 20%, transparent); }
.ws-naam.last { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.mp-cel.gepland .mp-sub, .mp-cel.nu .dn { color: var(--brand-ink); }
.start-greet .g .naam { color: var(--brand-ink); }
.cal-cell .wx.fc { color: var(--p-creme-0); }

@media (prefers-reduced-motion: reduce) {
  .sidenav a, button, .btn { transition: none; }
}

/* ---- contrastcorrecties (scan 6/10 over alle tabs) ---- */
.theo-tip { color: var(--text-3); }                 /* het ⓘ-teken: 5,0:1 op crème, 4,4 op linnen */
.theo-tagline { color: var(--text-2); }
a.pl-lnk, .t-meta a, .note a, #pl-hc .t-meta a, .av-stats a { color: var(--brand-ink); }

/* ================= Start (stap 2): kop zoals de publieke site + blokkenraster ================= */
.f2-start > * + * { margin-top: 1rem; }
.f2-kop {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center;
  padding: clamp(1.4rem, 3vw, 2.6rem) clamp(1.2rem, 3.4vw, 3rem);
  border-radius: 26px; color: var(--on-chrome);
  background:
    radial-gradient(520px 300px at 88% 20%, rgba(212, 175, 55, .20), transparent 70%),
    radial-gradient(700px 380px at 0% 120%, rgba(140, 125, 84, .28), transparent 70%),
    var(--chrome);
  box-shadow: 0 30px 80px -40px rgba(21, 18, 14, .75);
}
.f2-kop::before {         /* de dunne messing lijn bovenaan, zoals de luifel van de zaak */
  content: ""; position: absolute; inset: 0 0 auto; height: 3px; z-index: -1;
  background: linear-gradient(90deg, transparent, var(--brand-deep) 20%, var(--brand-2) 50%, var(--brand-deep) 80%, transparent);
}
.f2-eyebrow { font-size:var(--t-xs); font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--brand); }
.f2-groet { margin: .55rem 0 0; color: var(--on-chrome); font-family: var(--f2-serif); font-weight: 500;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1; letter-spacing: -.01em; }
.f2-groet em { font-style: italic; display: block; }
.f2-groet .naam {
  display: block; margin-top: .2rem; font-family: var(--font); font-style: normal; font-weight: 800;
  text-transform: uppercase; letter-spacing: -.02em; line-height: .9; font-size: clamp(2.6rem, 6.4vw, 4.8rem);
  color: var(--brand-2); text-shadow: 0 2px 0 rgba(120, 96, 24, .6);
}
.f2-kop p { margin: 1rem 0 0; max-width: 58ch; color: var(--on-chrome-2); line-height: 1.5; }
.f2-links { justify-content: flex-start; flex-wrap: wrap; gap: 8px; margin-top: 1.1rem; }
.f2-links a { color: var(--on-chrome); border: 1px solid rgba(251, 248, 234, .25); border-radius: 999px; padding: 6px 14px;
  min-height: 36px; font-weight: 600; font-size:var(--t-m); letter-spacing: .06em; text-transform: uppercase; transition: background .3s var(--f2-ease), border-color .3s; }
.f2-links a:hover { color: var(--on-chrome); background: rgba(251, 248, 234, .1); border-color: var(--on-chrome); }
.f2-kop-merk { color: var(--brand); opacity: .92; }
.f2-merk { display: block; width: clamp(130px, 15vw, 200px); height: auto; }

.f2-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); gap: 14px; }
.f2-raster > * { margin: 0 !important; }
.f2-blok.groot { grid-column: span 2; grid-row: span 2; }
.f2-blok.breed { grid-column: span 2; }
.f2-data { grid-column: span 3; }
.f2-week { grid-column: 1 / -1; }

.tile.f2-blok {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 16px;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--text-strong) 9%, transparent); border-radius: 22px;
  box-shadow: var(--shadow-card); min-width: 0;
}
.f2-blok-kop { display: flex; align-items: center; gap: 8px; }
.f2-blok .t-label { font-size:var(--t-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.f2-bol { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--ok); box-shadow: 0 0 0 4px rgba(114, 153, 122, .18); }
.f2-blok.alert .f2-bol { background: var(--err); box-shadow: 0 0 0 4px rgba(255, 77, 61, .18), 0 0 10px rgba(255, 77, 61, .6); }
.f2-naar { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  color: var(--text-strong); background: var(--surface-3); transition: transform .35s var(--f2-ease), background .25s; }
.f2-naar svg.ic { width: 16px; height: 16px; }
@media (hover: hover) { .f2-blok:hover .f2-naar { transform: translateX(3px); background: var(--brand); } }
.f2-blok .v { margin-top: auto; font-weight: 800; letter-spacing: -.02em; line-height: .95; color: var(--text-strong);
  font-size: clamp(2rem, 3vw, 2.6rem); text-transform: uppercase; overflow-wrap: anywhere; }
.f2-blok.alert .v { color: var(--err-ink); }
.f2-blok .d { font-size:var(--t-m); color: var(--text-3); line-height: 1.35; }
.f2-status { align-self: flex-start; margin-top: 4px; font-size:var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  border-radius: 999px; padding: 2px 9px; background: var(--ok-bg); color: var(--ok-ink); }
.f2-blok.alert .f2-status { background: var(--err-bg); color: var(--err-ink); }
@media (hover: hover) { .tile.f2-blok:hover { background: var(--bg); border-color: rgba(212, 175, 55, .55); } }

/* het grote blok: inkt, cijfer in crème, label in messing */
.tile.f2-blok.groot { background: radial-gradient(420px 260px at 100% 0%, rgba(212, 175, 55, .16), transparent 70%), var(--chrome-2);
  border-color: rgba(212, 175, 55, .25); color: var(--on-chrome); padding: 24px 26px 22px; }
.f2-blok.groot .t-label { color: var(--brand); }
.f2-blok.groot .theo-tip { color: var(--on-chrome-2); }
.f2-blok.groot .f2-naar { background: rgba(251, 248, 234, .1); color: var(--on-chrome); }
.f2-blok.groot .v { color: var(--on-chrome); font-size: clamp(3.2rem, 6vw, 5.4rem); }
.f2-blok.groot.alert .v { color: var(--err); }                     /* 5,6:1 op inkt */
.f2-blok.groot .d { color: var(--on-chrome-2); font-size:var(--t-ml); }
.f2-blok.groot .d .up { color: var(--blad-licht); } .f2-blok.groot .d .down { color: var(--rood-zacht); }
.f2-blok.groot .f2-status { background: rgba(114, 153, 122, .2); color: var(--blad-licht); }
.f2-blok.groot.alert .f2-status { background: rgba(255, 77, 61, .16); color: var(--rood-zacht); }
@media (hover: hover) { .tile.f2-blok.groot:hover { background: radial-gradient(420px 260px at 100% 0%, rgba(212, 175, 55, .24), transparent 70%), var(--chrome-3); border-color: rgba(212, 175, 55, .6); } }
.f2-blok.breed .v { font-size: clamp(2.3rem, 3.6vw, 3.2rem); }

.f2-data, .f2-week { border-radius: 22px; padding: 18px 20px; }
.leader .v.f2-oud { color: var(--err-ink); }

@media (max-width: 1200px) {
  .f2-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f2-data { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .f2-kop { grid-template-columns: 1fr; gap: 1rem; border-radius: 22px; padding: 1.3rem 1.1rem 1.2rem; }
  .f2-kop-merk { position: absolute; right: 14px; top: 14px; opacity: .5; }
  .f2-merk { width: 64px; }
  .f2-kop p { font-size:var(--t-ml); margin-top: .8rem; }
  .f2-eyebrow { font-size:var(--t-xs); letter-spacing: .2em; padding-right: 70px; }
  .f2-raster { gap: 10px; grid-auto-rows: minmax(128px, auto); }
  .f2-blok.groot { grid-row: auto; }
  .tile.f2-blok { padding: 14px 14px 12px; border-radius: 18px; }
  .f2-blok .v { font-size:var(--t-3xl); }
  .f2-blok.groot .v { font-size:var(--t-4xl); }
  .f2-blok.breed .v { font-size:var(--t-4xl); }
  .f2-blok .t-label { letter-spacing: .1em; font-size:var(--t-xs); }
  .f2-blok .d { font-size:var(--t-s); }
  .f2-naar { width: 26px; height: 26px; }
  /* het laatste losse blok (sociale media) over de volle breedte */
  .f2-raster > .f2-blok:nth-child(5) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .f2-naar { transition: none; } }
.f2-blok:not(.groot):not(.breed) .v { font-size: clamp(1.7rem, 2.2vw, 2.3rem); }
.f2-blok:not(.groot):not(.breed) .t-label { letter-spacing: .12em; }
@media (max-width: 760px) {
  .f2-kop p { display: none; }                 /* op de gsm: de begroeting en de cijfers, de uitleg staat in de ⓘ's */
  .f2-links { gap: 6px; margin-top: .9rem; }
  .f2-links a { min-height: 32px; padding: 3px 10px; font-size:var(--t-xs); gap: 5px; }
  .f2-links svg { width: 15px; height: 15px; }
  .f2-groet .naam { font-size:var(--t-4xl); }
  .f2-blok:not(.groot):not(.breed) .v { font-size:var(--t-3xl); }
}
@media (max-width: 760px) { .f2-blok:not(.groot):not(.breed) .v { font-size:var(--t-2xl); overflow-wrap: break-word; } }

/* ================= Ploeg (stap 3): rustigere tabel op de laptop, kaarten op de telefoon ================= */
/* initialen in de kleur van de afdeling (volgorde van de afdelingen); crème op elke kleur >= 5:1 */
.plg-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size:var(--t-xs); font-weight: 700; letter-spacing: .04em; color: var(--on-chrome); background: var(--chrome-3);
  box-shadow: inset 0 0 0 2px rgba(251, 248, 234, .14); }
.plg-afd-0 { background: var(--p-olijf-inkt); } .plg-afd-1 { background: var(--p-blad-inkt); } .plg-afd-2 { background: var(--p-messing-inkt); }
.plg-afd-3 { background: var(--chrome-3); } .plg-afd-4 { background: var(--p-wijn-rood); } .plg-afd-5 { background: var(--p-blauw-nacht); }
.plg-av-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.plg-wie { display: inline-flex; align-items: center; gap: 10px; }
#plg-tbl td { padding-top: 8px; padding-bottom: 8px; vertical-align: middle; }
#plg-tbl .plg-posten { display: block; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.plg-naam { color: var(--text-strong); text-decoration: none; }
button.plg-naam:hover { color: var(--brand-ink); text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 3px; }
button.plg-loon:hover { color: var(--brand-ink); }
button.plg-loon small { font-size:var(--t-xs); margin-left: 2px; }
/* kost en netto per uur onder het uurloon (Arthur 8/10); in het detail de drie cijfers met de opbouw */
.plg-pu { display: block; font-size:var(--t-xs); white-space: nowrap; margin-top: 2px; }
.plg-k-rechts .plg-pu { white-space: normal; text-align: right; max-width: 120px; }
.plg-pu-d { white-space: nowrap; }
.plg-pu-rap .r .num { font-variant-numeric: tabular-nums; }
.plg-pu-uitleg { margin-top: 8px; font-size:var(--t-s); }
/* jeugdloon (Arthur 8/10): klopt het uurloon met het barema voor de leeftijd */
.chip.plg-jl { display: inline-block; font-size:var(--t-xs); margin-top: 3px; white-space: normal; line-height: 1.25; }
.plg-jl-rij { margin: 6px 0 10px; }

/* kleurlabels: statuut, gegevens */
.plg-lab { display: inline-flex; align-items: center; white-space: nowrap; border-radius: 999px; padding: 2px 10px;
  font-size:var(--t-xs); font-weight: 700; letter-spacing: .02em; line-height: 1.5; }
.plg-st-student { background: var(--surface-3); color: var(--brand-ink); }
.plg-st-flexi   { background: var(--ok-bg); color: var(--groen-nacht); }
.plg-st-extra   { background: var(--surface-3); color: var(--text-2); }
.plg-st-vast    { background: var(--info-bg); color: var(--blauw-nacht); }
.plg-st-zelfst  { background: var(--chrome-2); color: var(--on-chrome); }
.plg-ok  { background: var(--ok-bg); color: var(--ok-ink); }
.plg-nog { background: var(--err-bg); color: var(--err-ink); }
.plg-leeg { color: var(--text-3); }
/* account: een vinkje of een kruisje, de tekst enkel voor schermlezers en op de kaart */
.plg-acc { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.plg-acc svg.ic { width: 16px; height: 16px; }
.plg-acc.ja { background: var(--ok-bg); color: var(--ok-ink); }
.plg-acc.nee { background: var(--err-bg); color: var(--err-ink); }
.plg-acc-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* kaarten: alleen op de telefoon */
#plg-kaarten { display: none; }
@media (max-width: 760px) {
  #plg-tbl { display: none; }
  #plg-kaarten { display: block; }
  .plg-kop { gap: 8px; }
  .plg-kop #plg-nieuw { width: 100%; }
  .plg-kzoek { width: 100%; min-height: 46px; margin: 2px 0 6px; }
  .plg-kgroep[hidden], .plg-kaart[hidden] { display: none; }
  .plg-kafd { margin: 16px 2px 8px; font-family: var(--font); font-size:var(--t-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); }
  .plg-kafd .t-meta { letter-spacing: 0; margin-left: 4px; }
  .plg-kaart { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
    padding: 12px 12px 12px 12px; margin-bottom: 8px; border-radius: 16px; cursor: pointer;
    background: var(--raised); border: 1px solid color-mix(in srgb, var(--text-strong) 9%, transparent); box-shadow: 0 1px 2px rgba(21, 18, 14, .05);
    -webkit-tap-highlight-color: transparent; transition: transform .15s var(--f2-ease), border-color .2s; }
  .plg-kaart:active { transform: scale(.985); border-color: var(--brand); }
  .plg-kaart .plg-av { width: 42px; height: 42px; font-size:var(--t-m); }
  .plg-k-naam { font-weight: 700; color: var(--text-strong); font-size:var(--t-base); line-height: 1.2; overflow-wrap: anywhere; }
  .plg-k-labels { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
  .plg-k-labels .plg-lab { font-size:var(--t-xs); padding: 1px 8px; }
  .plg-k-posten { margin-top: 5px; font-size:var(--t-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .plg-k-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
  .plg-k-loon { font-weight: 700; font-size:var(--t-ml); color: var(--text-strong); white-space: nowrap; }
  .plg-k-loon small { font-weight: 400; font-size:var(--t-xs); }
  .plg-k-loon .plg-kost { font-weight: 400; font-size:var(--t-xs); white-space: normal; text-align: right; display: block; max-width: 92px; }
  .plg-k-loon .plg-lab { font-size:var(--t-xs); padding: 1px 7px; }
}
@media (prefers-reduced-motion: reduce) { .plg-kaart { transition: none; } }
/* de tabel past op een laptop: smallere werkposten en zoekveld, leeg statuut niet op de kaart */
#plg-tbl .plg-posten { max-width: 150px; }
#plg-tbl th .th-q { width: 146px; }
#plg-tbl tr.measure .th-q-sp { width: 156px; }
.plg-k-labels .plg-leeg, .plg-k-loon .plg-leeg { display: none; }
.plg-wie-t { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.25; }
#plg-tbl .plg-posten { max-width: 190px; font-size:var(--t-xs); margin-top: 1px; }
#plg-tbl .plg-wie-t .plg-lab { font-size:var(--t-xs); padding: 0 7px; margin-top: 2px; }
#plg-tbl th, #plg-tbl td { padding-left: 10px; padding-right: 10px; }
#plg-tbl th .th-pick { margin-left: 6px; }
#plg-tbl tr.measure td:not(:first-child) .th-q-sp { width: 78px; }   /* naast een keuzelijst is "Alle ▾" maar 64 px breed */

/* ================= Personeelsplanner (stap 4): rustiger balk, een kalender in het palet ================= */
/* De dagstatus als tokens (staffing.js KLEUR/TKLEUR). Gemeten 6/10, tekst op de celkleur:
   groen #4a7352 met crème 5,1:1 · rood #a8352b met crème 6,1:1 · geel #e2c35a met inkt 10,8:1 ·
   grijs #cfc7ae met inkt-3 8,4:1 · geen plan #efe7cc met olijf-inkt 6,1:1. Het weer, de teller
   onderaan en de hoekjes volgen de tekstkleur van de cel (vroeger crème op elke cel: op grijs
   en 'geen plan' maar 2,0 en 1,2:1). Een voorspelling onderscheidt zich nu door een dunnere
   letter, niet meer door een lichtere kleur. */
:root, [data-theme] {
  /* de volle statuskleuren blijven in beide thema's gelijk (met hun eigen tekstkleur); "geen plan" en de lichte
     tinten volgen het thema (UX fase 4) */
  --pl-groen: var(--p-plan-groen); --pl-groen-t: var(--on-chrome);
  --pl-rood: var(--p-plan-rood);  --pl-rood-t: var(--on-chrome);
  --pl-geel: var(--p-plan-geel);  --pl-geel-t: var(--on-brand);
  --pl-grijs: var(--p-grijs); --pl-grijs-t: var(--p-inkt-3);
  --pl-geen: var(--surface-3);  --pl-geen-t: var(--text-2);
  /* een kleine afwijking (Arthur 8/10): de kleur in een lichte tint, met een rand in de volle
     kleur; de tekst in inkt (#2a2418 op #f3d6d2 13,6:1, op #f6eac0 14,2:1) */
  --pl-rood-licht: var(--rood-tint-2); --pl-geel-licht: var(--warn-bg); --pl-licht-t: var(--text);
}

/* de balk: kiezer, pijlen en weergave links; import en export rechts als stille knoppen */
.pl-bar { gap: 10px; padding: 10px 12px; border-radius: var(--r-l); background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--text-strong) 8%, transparent); box-shadow: var(--shadow-card); }
.pl-bar .pop-btn, .pl-bar a.btn, .pl-bar .pl-vastknop { border-radius: 999px; min-height: 40px; }
.pl-bar .pl-pick > .pop-btn { background: var(--chrome-2); color: var(--on-chrome); border-color: var(--chrome-2); font-weight: 600; padding-left: 14px; padding-right: 14px; }
.pl-bar .pl-pick > .pop-btn:hover { background: var(--chrome-3); color: var(--on-chrome); }
.pl-bar .pl-right { gap: 8px; }
.pl-bar .pl-right .pop-btn { min-width: 0; }
.pl-bar .pl-imp.warn .pop-btn { border-color: var(--err); color: var(--err-ink); background: var(--err-bg); }
.pl-bar .pl-imp.warn .pop-btn:hover { color: var(--err-ink); background: var(--rood-tint-2); }
.pl-bar .warnmark { color: var(--err-ink); }
.pl-bar .pl-imp.ok .okmark { color: var(--ok-ink); }
.pl-vastknop.on { background: var(--brand); border-color: var(--brand); color: var(--p-inkt); }
.pl-bar .cal-nav { border-radius: 50%; width: 38px; min-height: 38px; }

/* de maandkalender */
.pl-maand .cal-head { font-size:var(--t-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); margin: 6px 0 8px; }
.pl-maand .cal { gap: 8px; }
.pl-maand .cal-cell { border-radius: 14px; min-height: 76px; box-shadow: inset 0 0 0 1px rgba(21, 18, 14, .06);
  transition: transform .2s var(--f2-ease), box-shadow .2s var(--f2-ease); }
.pl-maand .cal-cell .dn { font-family: var(--f2-serif); font-weight: 600; font-size:var(--t-xl); letter-spacing: -.01em;
  font-variation-settings: "opsz" 48; }
.pl-maand .cal-cell .ks { font-size:var(--t-xs); font-weight: 700; letter-spacing: .02em; }
@media (hover: hover) {
  .pl-maand .cal-cell:not(:disabled):not(.out):hover { filter: none; transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px rgba(21, 18, 14, .1), 0 12px 24px -16px rgba(21, 18, 14, .6); }
}
.pl-maand .cal-cell.out { border-color: var(--line); background: transparent; box-shadow: none; }
.pl-maand .cal-cell.out .dn { font-family: var(--font); font-size:var(--t-m); }
/* vandaag: een ring in inkt rond de cel, zichtbaar op elke statuskleur (messing viel weg op geel) */
.cal-cell.vandaag, .pl-maand .cal-cell.vandaag { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text-strong); }
.legend .dot.lg-vandaag { box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 3px var(--text-strong); }
/* voorbij: niet meer doorschijnend (dat haalde de tekst onder de drempel), wel fijn gearceerd */
.cal-cell.voorbij { opacity: 1; box-shadow: none;
  background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--text-strong) 9%, transparent) 0 1.5px, transparent 1.5px 7px); }
.cal-cell.voorbij:hover { opacity: 1; }
.legend .dot.lg-voorbij { box-shadow: none; background: var(--surface-3) repeating-linear-gradient(135deg, color-mix(in srgb, var(--text-strong) 30%, transparent) 0 1.5px, transparent 1.5px 4px); }
/* weer en hoekjes: de tekstkleur van de cel, volle dekking */
.cal-cell .wx, .cal-cell .wx.fc, .cal-cell .hd-mrk, .cal-cell .hd-mrk.fc, .cal-cell .ev-mrk, .cal-cell .ev-mrk.fc,
.cal-cell .rs-mrk, .cal-cell .rs-mrk.fc { color: inherit; opacity: 1; text-shadow: none; }
.cal-cell .wx b { font-weight: 700; }
.cal-cell .wx.fc b { font-weight: 400; }
.cal-cell .wx b i, .cal-cell .wx.fc b i { opacity: 1; font-weight: 400; }
.cal-cell .wx.fc .wx-alarm.lvl2, .cal-cell .wx.fc .wx-alarm.lvl3, .cal-cell .wx.fc .wx-alarm.lvl4 { color: inherit; }
.pl-maand .cal-legend { gap: 8px 6px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.pl-maand .cal-legend .legend { font-size:var(--t-s); color: var(--text-2); margin-left: 6px; }
.pl-maand .cal-legend .dot { width: 12px; height: 12px; border-radius: 4px; }
/* een voorbije dag in twee (Arthur/Bart 11/10): links achteraf (echte uren tegenover wat het model
   nodig acht voor de echte omzet), rechts zoals voorspeld; het dagnummer bovenaan op een pilletje */
.pl-maand .cal-cell.pl-split { padding: 0; overflow: hidden; justify-content: flex-start; background: none; }
.pl-maand .cal-cell.pl-split .pl-h { position: absolute; top: 0; bottom: 0; width: 50%; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; gap: 1px; padding: 0 2px 6px; min-width: 0; font-size:var(--t-xs); line-height: 1.15;
  font-weight: 600; white-space: nowrap; overflow: hidden;
  background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--text-strong) 9%, transparent) 0 1.5px, transparent 1.5px 7px); }
.pl-maand .cal-cell.pl-split .pl-h.l { left: 0; }
.pl-maand .cal-cell.pl-split .pl-h.r { right: 0; box-shadow: inset 1.5px 0 0 var(--bg); }
.pl-maand .cal-cell.pl-split .pl-h.licht { box-shadow: inset 0 0 0 2px var(--pl-rand); }
.pl-maand .cal-cell.pl-split .pl-h.r.licht { box-shadow: inset 0 0 0 2px var(--pl-rand), inset 1.5px 0 0 var(--bg); }
.pl-maand .cal-cell.pl-split .pl-hm { opacity: .9; }
.pl-maand .cal-cell.pl-split .pl-hv { font-size:var(--t-xs); font-weight: 800; letter-spacing: .01em; }
.pl-maand .cal-cell.pl-split .pl-hv .pl-b { margin-right: 2px; }
.pl-maand .cal-cell.pl-split .dn { position: relative; z-index: 1; margin-top: 5px; padding: 1px 7px; border-radius: 999px;
  background: var(--bg); color: var(--text-strong); font-size:var(--t-base); line-height: 1.2; }
.pl-maand .cal-cell.pl-split .wx, .pl-maand .cal-cell.pl-split .hd-mrk { z-index: 1; }
.pl-maand .cal-cell.pl-split.vandaag { box-shadow: none; }
.pl-split-lg { display: flex; align-items: center; gap: 8px; margin: -2px 0 10px; font-size:var(--t-s); color: var(--text-2); }
.pl-split-sw { display: inline-flex; width: 22px; height: 14px; border-radius: 4px; overflow: hidden; flex: none;
  box-shadow: inset 0 0 0 1px rgba(21, 18, 14, .12); }
.pl-split-sw i { flex: 1; background: var(--pl-groen, var(--ok)); }
.pl-split-sw i + i { background: var(--pl-rood, var(--p-baksteen)); box-shadow: inset 1px 0 0 var(--bg); }

/* de getallen van maand en dag als blokken zoals op Start; het tekort van de maand in inkt */
#pl-body .row > .tile { background: var(--surface-3); border: 1px solid color-mix(in srgb, var(--text-strong) 7%, transparent); border-left: 0;
  border-radius: 18px; padding: 14px 16px 16px; box-shadow: none; }
#pl-body .row > .tile .t-label, #pl-body .row > .tile > :first-child { font-size:var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
#pl-body .row > .tile .v { font-size: clamp(1.8rem, 2.6vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; margin-top: 8px; color: var(--text-strong); }
#pl-body .pl-maandplan .row > .tile:last-child { background: var(--chrome-2); border-color: var(--chrome-2); }
#pl-body .pl-maandplan .row > .tile:last-child .t-label, #pl-body .pl-maandplan .row > .tile:last-child > :first-child { color: var(--brand); }
#pl-body .pl-maandplan .row > .tile:last-child .v { color: var(--on-chrome); }
#pl-body .pl-maandplan .row > .tile:last-child .theo-tip { color: var(--on-chrome-2); }

/* weekrooster en tabel: dezelfde tokens, een rustiger kop */
.wk-tbl thead th { background: var(--surface-2); color: var(--text); }
.wk-tbl thead th.vandaag { box-shadow: inset 0 -3px 0 var(--text-strong); }
.wk-tbl .wk-dd { color: var(--text-2); }
.wk-blk { border-radius: 7px; box-shadow: 0 1px 2px rgba(21, 18, 14, .08); }
.wk-tbl tr.wk-total th, .wk-tbl tr.wk-total td { background: var(--surface-2); }
.pt-tbl thead th, .pt-tbl tr.pt-tot th, .pt-tbl tr.pt-tot td { background: var(--surface-2); color: var(--text); }
.pt-tbl th.pt-dag { background: var(--surface); }
/* de totaalrij plakt onderaan en links, boven de dagkolom (anders schoof 'Vr 23' over 'Totaal') */
.pt-tbl tr.pt-tot th { left: 0; z-index: 3; }
.pt-tbl tr.pt-we th.pt-dag, .pt-tbl tr.pt-we td { background-color: var(--inset); }
.pt-tbl tr.pt-nu th.pt-dag { box-shadow: inset 4px 0 0 var(--text-strong); }
.pt-tbl td.pt-shift { background: var(--warn-bg); }
.pt-tbl td.pt-shift small { opacity: 1; color: var(--text-2); }
.pt-tbl td.pt-kan { background: var(--ok-bg); }
.pt-tbl td.pt-nee { background: var(--err-bg); }
.pt-tbl td.pt-open { color: var(--err-ink); }
.pt-tbl .pt-ok .ic { color: var(--ok-ink); }
/* Tabel staat los van Maand · Week · Dag (Bart 22/10): zelfde segmentknop, eigen omlijsting */
.pl-bar #pl-seg-tabel { margin-left: 12px; }
.ploeg-link > svg { fill: var(--brand-ink); }
.ploeg-link a { color: var(--brand-ink); text-decoration-color: var(--brand); }

@media (max-width: 760px) {
  /* de balk op de telefoon: kiezer en pijlen op een regel, de weergave over de volle breedte,
     de vier knoppen in een raster van twee */
  .pl-bar { padding: 10px; gap: 8px; }
  .pl-bar .pl-pick { flex: 1 1 auto; min-width: 0; }
  .pl-bar .pl-pick > .pop-btn { width: 100%; justify-content: flex-start; }
  .pl-bar #pl-seg { order: 3; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
  .pl-bar #pl-seg-tabel { order: 3; margin-left: 0; width: 100%; display: grid; }
  .pl-bar #pl-seg button, .pl-bar #pl-seg-tabel button { min-height: 40px; padding: 0 4px; }
  .pl-bar .pl-vastknop { order: 4; }
  .pl-bar .pl-right { order: 5; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .pl-bar .pl-right .pop-btn { gap: 6px; padding-right: 10px; }
  .pl-bar .pl-vastknop, .pl-bar .pl-right .pop-btn, .pl-bar .pl-right a.btn { width: 100%; min-height: 44px; font-size:var(--t-s);
    white-space: normal; line-height: 1.15; text-align: left; justify-content: flex-start; padding: 6px 12px; }
  .pl-bar .pl-vastknop { flex: 1 1 100%; }
  .pl-bar .pl-right > :last-child { grid-column: 1 / -1; }
  .pl-bar .pl-right .pop, .pl-bar .pl-right .pl-imp { min-width: 0; width: 100%; }

  /* kalender: zonder de zijpijlen (de balk heeft ze al), het dagnummer groot, het weer als
     icoon, en een stip voor reservaties of evenementen; de rest staat in de uitleg bij een tik */
  .pl-maand .cal-wrap > .cal-nav { display: none; }
  .pl-maand .cal { gap: 5px; }
  .pl-maand .cal-head { letter-spacing: .08em; font-size:var(--t-xs); }
  .pl-maand .cal-cell { min-height: 58px; padding: 4px 2px; border-radius: 11px; }
  .pl-maand .cal-cell .dn { font-size:var(--t-base); }
  .pl-maand .cal-cell .wx { position: absolute; top: 3px; right: 3px; margin: 0; }
  .pl-maand .cal-cell .wx b { display: none; }
  .pl-maand .cal-cell .wx svg.wx-ic { width: 13px; height: 14px; }
  .pl-maand .cal-cell .hd-mrk { top: 3px; left: 3px; }
  .pl-maand .cal-cell .hd-mrk .wx-ic { width: 12px; height: 13px; }
  .pl-maand .cal-cell .ev-mrk, .pl-maand .cal-cell .rs-mrk { display: none; }
  .pl-maand .cal-cell.mrk::after, .pl-maand .cal-cell.evt::after { content: ""; position: absolute; right: 5px; bottom: 5px;
    width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .pl-maand .cal-cell .ks, .pl-maand .cal-cell.evt .ks, .pl-maand .cal-cell.mrk .ks { left: 2px; right: 2px; bottom: 4px; font-size:var(--t-xs); }
  /* de gesplitste dag op de telefoon: alleen de kleuren en het verschil; de rest staat in de uitleg */
  .pl-maand .cal-cell.pl-split { padding: 0; }
  .pl-maand .cal-cell.pl-split .pl-h { padding: 0 1px 4px; font-size:var(--t-xs); }
  .pl-maand .cal-cell.pl-split .pl-hm { display: none; }
  .pl-maand .cal-cell.pl-split .pl-hv { font-size:var(--t-xs); letter-spacing: 0; }
  .pl-maand .cal-cell.pl-split .dn { margin-top: 4px; padding: 0 5px; font-size:var(--t-m); }
  .pl-maand .cal-cell.pl-split .wx { display: none; }
  .pl-split-lg { font-size:var(--t-xs); margin-bottom: 8px; }
  .pl-maand .cal-legend { justify-content: flex-start; }
  .pl-maandplan .row { grid-template-columns: 1fr 1fr !important; }
  .pl-maandplan .row > .tile:last-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .pl-maand .cal-cell { transition: none; } }

/* ================= Lonen (stap 4): een rustige betaaltabel die op een laptop past ================= */
/* Alles wat Bart vroeg blijft: vorige maand voorschot / eindloon / verschil en Te goed, de
   totaalrij, de regel per persoon (.lb-regel), het voorstel gecentreerd met de uitleg eronder
   (.lb-voorstel), de kop die blijft staan (.lb-wrap) en de foutmelding in de lijst (.lb-msg).
   Gemeten 6/10: rood bedrag --neon-ink op crème 5,6:1 · melding inkt-2 op inset 13,9:1 ·
   initialen crème op inkt-3 13,4:1 · olijf-inkt op linnen 6,1:1. */
.lb { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.lb > .card { margin: 0; min-width: 0; }
.lb > .card:first-child { grid-column: 1 / -1; }
.lb > .card > h3 { font-family: var(--f2-serif); font-weight: 600; font-size:var(--t-xl); letter-spacing: -.01em; color: var(--text-strong); margin: 0 0 6px; }

/* kop: maand en deel */
.lb-nav { flex-wrap: wrap; gap: 6px 10px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.lb-nav h3 { font-family: var(--f2-serif); font-weight: 600; font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -.01em; color: var(--text-strong); min-width: 0; }
.lb-nav h3 .lb-wat { display: block; font-family: var(--font); font-size:var(--t-xs); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--brand-ink); }
.lb-nav h3 .lb-mnd::first-letter { text-transform: uppercase; }
.lb-nav [data-m] { width: 38px; min-height: 38px; padding: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--text-strong) 16%, transparent); }
.lb-nav .lb-deel { margin-left: auto; }
.lb-lijst > p.t-meta:first-child { max-width: 110ch; font-size:var(--t-s); line-height: 1.5; color: var(--text-3); margin: 12px 0 4px; }
.lb-lijst > .lb-rij { margin: 12px 0; }

/* de tabel */
.lb-hoofd { font-size:var(--t-s); }
.lb-hoofd thead th { font-size:var(--t-xs); font-weight: 700; letter-spacing: .04em; color: var(--text-2); white-space: normal; vertical-align: bottom; line-height: 1.2; padding-top: 10px; padding-bottom: 8px; }
.lb-hoofd thead th small { display: block; font-weight: 500; letter-spacing: 0; color: var(--text-3); text-transform: none; }
.lb-hoofd td, .lb-hoofd tbody th { padding-top: 9px; padding-bottom: 9px; }
.lb-hoofd td.r { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lb-hoofd tbody th { font-weight: 600; color: var(--text-strong); background: var(--surface); }
.lb-wie { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lb-wie > span:last-child { min-width: 0; }
.lb-av { width: 30px; height: 30px; font-size:var(--t-xs); }
.lb-hoofd tbody th small { font-weight: 400; font-size:var(--t-xs); white-space: nowrap; }
/* vorige maand: rustiger, met een lijn ervoor; Te goed apart */
.lb-hoofd .lb-vm { color: var(--text-3); }
.lb-hoofd .lb-vm1 { border-left: 1px solid var(--line); }
.lb-hoofd thead th:nth-child(2) { border-left: 1px solid var(--line); }
.lb-hoofd .lb-tegoed { border-right: 1px solid var(--line); }
.lb-is-vs thead th:nth-child(5), .lb-is-eind thead th:nth-child(5) { border-right: 1px solid var(--line); }
.lb-teveel { color: var(--err-ink); font-weight: 700; }
small.lb-teveel { font-weight: 600; }
/* het voorstel in het midden, de uitleg en de regel eronder */
.lb-hoofd td.lb-voorstel { background: rgba(212, 175, 55, .07); }
.lb-voorstel .lb-vs-b { font-size:var(--t-base); font-weight: 800; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.lb-voorstel small.t-meta { font-size:var(--t-xs); }
.lb-voorstel .lb-regel { width: 9ch !important; min-height: 32px; padding: 2px 8px; font-size:var(--t-s); border-radius: 999px; text-align: center !important; background: var(--surface-3); border-color: color-mix(in srgb, var(--text-strong) 14%, transparent); }
.lb-voorstel .lb-regel:not(:placeholder-shown) { background: var(--raised); border-color: var(--brand); font-weight: 700; }
.lb-vsbedrag, .lb-eind { width: 8.5ch !important; padding-left: 6px; padding-right: 6px; min-height: 38px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-hoofd td strong { color: var(--text-strong); font-size:var(--t-m); }
.lb-hoofd .chip { white-space: normal; line-height: 1.25; display: inline-block; }
.lb-hoofd td:nth-last-child(2) { min-width: 96px; max-width: 120px; font-size:var(--t-s); line-height: 1.35; }
/* smal genoeg voor een laptop van 1440 px: minder lucht tussen de kolommen, de knoppen onder elkaar */
.lb-hoofd th, .lb-hoofd td { padding-left: 6px; padding-right: 6px; }
.lb-hoofd tbody th { padding-left: 10px; }
.lb-hoofd td:last-child { white-space: nowrap; }
.lb-hoofd td:last-child > button { display: flex; margin: 2px 0; }
.lb-hoofd tbody th small.t-meta { font-size:var(--t-xs); }
.lb-hoofd tbody th small.lb-teveel { white-space: normal; font-size:var(--t-xs); line-height: 1.25; }
.lb-hoofd tbody th { max-width: 172px; }
.lb-voorstel small.t-meta { white-space: normal; line-height: 1.2; }
.lb-hoofd td.lb-voorstel { min-width: 96px; }
.lb-hoofd .lb-qr { border-radius: 999px; min-height: 34px; padding: 2px 12px; white-space: nowrap; background: var(--chrome-2); color: var(--on-chrome); border-color: var(--chrome-2); font-weight: 600; }
.lb-hoofd .lb-qr:hover { background: var(--chrome-3); color: var(--on-chrome); }
.lb-hoofd .lb-schuld, .lb-hoofd .lb-verreken, .lb-hoofd .lb-schrap, .lb-hoofd .lb-schuldweg { min-height: 30px; padding: 2px 10px; font-size:var(--t-xs); border-radius: 999px; white-space: nowrap; margin: 2px 0; }
.lb-is-eind td:nth-last-child(2) { max-width: none; min-width: 150px; }
.lb-geenvs { white-space: nowrap; color: var(--text-2); font-size:var(--t-xs) !important; padding: 2px 6px !important; }
/* totaalrij: plakt onderaan, in inkt zodat de som opvalt */
.lb-wrap tfoot th, .lb-wrap tfoot td { background: var(--chrome-2); color: var(--on-chrome); border-top: 0; white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: 11px; padding-bottom: 11px; }
.lb-wrap tfoot th { font-size:var(--t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--brand); }
.lb-wrap tfoot strong { color: var(--brand-2); font-size:var(--t-base); }
.lb-wrap tfoot .lb-teveel { color: var(--rood-zacht); }                  /* 7,5:1 op inkt-2; messing 8,0, licht messing 11,6 */
.lb-wrap { border-radius: var(--r-l); }
/* de kop blijft staan; de naam blijft links staan als de tabel zijwaarts schuift */
.lb-wrap thead th:first-child, .lb-hoofd tbody th, .lb-wrap tfoot th { position: sticky; left: 0; z-index: 1; }
.lb-wrap thead th:first-child { z-index: 3; }
.lb-wrap tfoot th { z-index: 3; }
.lb-hoofd tbody th { box-shadow: inset -1px 0 0 var(--line); }
/* een melding in de lijst (fout of bevestiging: dezelfde plek) als een balk, niet als losse grijze tekst */
.lb-msg:not(:empty), .lb-pmsg:not(:empty) { margin-top: 10px; padding: 9px 12px; border-radius: var(--r-s);
  background: var(--inset); color: var(--text); border-left: 3px solid var(--brand); font-weight: 600; }
.lb-qrkaart { border-radius: var(--r-l); border-color: color-mix(in srgb, var(--text-strong) 10%, transparent); box-shadow: var(--shadow-card); }
.lb-qrkaart h4 { font-family: var(--f2-serif); font-size:var(--t-xl); margin: 0 0 4px; }

/* formulieren: het label klein boven het veld */
.lb-rij .xl-veld { display: flex; flex-direction: column; align-items: stretch; margin: 0; }
.lb-rij .xl-veld > span { font-size:var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); text-align: left; }
.lb-rij input { min-height: 40px; }
.lb-proef .lb-rij [name=naam], .lb-proef .lb-rij [name=iban] { width: 100%; }
.lb-proef .lb-rij .xl-veld:nth-child(-n+2) { flex: 1 1 180px; }
.lb-bestandkies .btn { border-radius: 999px; }
.lb-schulden > p > b { font-size:var(--t-2xl); font-weight: 800; color: var(--err-ink); }

/* een scherm per maand (Arthur 8/10): rest van vorige maand · Te goed | voorschot van deze maand.
   Alleen Te goed is rood; Te betalen is gewone inkt. De regel per persoon is een knop-chip die een klein
   venster in de cel opent (.lb-pop), net als het geplande loon (vast maandloon). Gemeten: olijf-inkt op
   linnen 6,1:1 · inkt op wit 18:1 · crème op inkt-2 16,6:1 (het label 'vast'). */
.lb-nav .lb-sub { margin: 0 0 0 auto; font-size:var(--t-s); color: var(--text-3); }
.lb-delen { font-variant-numeric: tabular-nums; }
.lb-samen thead th:nth-child(5) { border-right: 1px solid var(--line); }
.lb-samen td.lb-tebet small { display: block; font-size:var(--t-xs); white-space: nowrap; }
.lb-samen td.lb-tebet { color: var(--text-3); }
/* ok in XLS = bevestigd en betaald vanuit de bank (Arthur 8/10); groen-inkt op crème */
.lb-samen td.lb-tebet .lb-okbetaald { display: flex; justify-content: flex-end; align-items: center; gap: 3px; margin-top: 2px; font-weight: 700; color: var(--ok-ink); }
.lb-samen td.lb-tebet .lb-okbetaald svg, .lb-samen td.lb-tebet .lb-okbetaald .ms { width: 13px; height: 13px; font-size:var(--t-s); }
.lb-samen td.lb-vsvak .lb-okbetaald { display: flex; justify-content: flex-end; align-items: center; gap: 3px; margin-top: 2px; font-weight: 700; color: var(--ok-ink); }
.lb-samen td.lb-vsvak .lb-okbetaald svg, .lb-samen td.lb-vsvak .lb-okbetaald .ms { width: 13px; height: 13px; font-size:var(--t-s); }
.lb-samen td.lb-stand { min-width: 128px; max-width: 176px; font-size:var(--t-xs); line-height: 1.35; white-space: normal; }
.lb-samen td.lb-stand .chip { font-size:var(--t-xs); }
/* de stand in korte zinnen (Arthur 8/10): betaald (groen-inkt 5,2:1), nog te betalen (inkt), wachten
   (messing-inkt 5,8:1), geen voorschot (grijs), te veel (rood 5,6:1), vorige maand klein en grijs */
.lb-samen td.lb-stand { min-width: 170px; max-width: 240px; }
.lb-acties { display: flex; flex-wrap: wrap; gap: 2px 6px; margin-top: 2px; }
.lb-samen td.lb-stand .lb-acties > button { display: inline-flex; margin: 0; min-height: 28px; }
.lb-samen td.lb-stand .lb-acties > button.quiet { padding: 0 4px !important; text-decoration: underline; text-underline-offset: 2px; }
.lb-zin { line-height: 1.3; margin: 1px 0 3px; }
.lb-zin .lb-schrap { display: inline-flex; min-height: 26px; padding: 0 5px; vertical-align: middle; }
.lb-zin-ok { color: var(--ok-ink); font-weight: 600; }
.lb-zin-open { color: var(--text-strong); font-weight: 700; }
.lb-zin-wacht { color: var(--brand-ink); font-weight: 600; }
.lb-zin-geen { color: var(--text-3); }
.lb-zin-fout { color: var(--err-ink); font-weight: 700; }
.lb-zin-vorig { color: var(--text-3); font-size:var(--t-xs); }

/* Week voor UwPayroll (Arthur 18/10): een brede kaart onder de lonen */
.lb > .card.lb-uwp { grid-column: 1 / -1; }
.lb-nav [data-w] { width: 38px; min-height: 38px; padding: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--text-strong) 16%, transparent); }
.lb-uwp-stand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0; }
.lb-uwp-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size:var(--t-xs); font-weight: 700; }
.lb-uwp-klaar { background: var(--ok-bg); color: var(--ok-ink); }
.lb-uwp-wacht { background: var(--err-bg); color: var(--err-ink); }
.lb-uwp-waarom { flex: 1 1 260px; }
.lb-uwp-ctl { margin: 8px 0; padding-left: 18px; }
.lb-uwp-c { margin: 2px 0; line-height: 1.35; }
.lb-uwp-blokkeert { color: var(--err-ink); font-weight: 600; }
.lb-uwp-waarschuwing { color: var(--brand-ink); }
.lb-uwp-info { color: var(--text-3); }
.lb-uwp-tab th small { display: block; font-weight: 400; }
.lb-uwp-tab .lb-uwp-eerste > * { border-top: 1px solid var(--line); }
.lb-uwp-tab .lb-uwp-sub td { border-bottom: 1px solid var(--line); }
.lb-uwp-afw, .lb-uwp-tb { color: var(--err-ink); font-weight: 600; }
/* het loonbeslag als eigen rij meteen onder de werknemer (Bart 10/10) */
.lb-hoofd tr.lb-bsrij > th, .lb-hoofd tr.lb-bsrij > td { background: var(--surface-3); border-top: 1px dashed var(--line); }
.lb-hoofd tr.lb-bsrij > th { font-weight: 600; font-size:var(--t-xs); padding-left: 22px; box-shadow: inset 3px 0 0 var(--brand), inset -1px 0 0 var(--line); }
.lb-hoofd tr.lb-bsrij .lb-bsav { background: var(--chrome-2); color: var(--brand); font-size:var(--t-xs); }
.lb-hoofd tr.lb-bsrij > th { white-space: normal; min-width: 172px; line-height: 1.25; }
.lb-hoofd tr.lb-bsrij th small { display: block; white-space: normal; }
.lb-hoofd tr.lb-bsrij .lb-bsmed { white-space: normal; overflow-wrap: anywhere; }
.lb-hoofd tr.lb-bsrij .lb-bsvoor { white-space: normal; font-size:var(--t-xs); line-height: 1.3; }
.lb-hoofd tr.lb-bsrij .lb-bsmedin { width: 100%; min-height: 32px; font-size:var(--t-xs); margin-top: 3px; }
.lb-hoofd .lb-bsbedrag { width: 8.5ch !important; padding-left: 6px; padding-right: 6px; min-height: 38px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-hoofd .lb-bsqr { border-radius: 999px; min-height: 34px; padding: 2px 12px; white-space: nowrap; background: var(--chrome-2); color: var(--on-chrome); border-color: var(--chrome-2); font-weight: 600; }
.lb-hoofd .lb-bsqr:hover { background: var(--chrome-3); color: var(--on-chrome); }
.lb-hoofd .lb-bsschrap { display: inline-flex; min-height: 26px; padding: 0 5px; vertical-align: middle; }
.lb-samen td.lb-vsvak .lb-geenvs-vak, .lb-samen td.lb-vsvak .lb-typ { display: inline-block; min-width: 8.5ch; text-align: center; color: var(--text-3); font-weight: 700; }
.lb-samen td.lb-vsvak .lb-typ { min-height: 38px; border: 1px dashed color-mix(in srgb, var(--text-strong) 22%, transparent); border-radius: 8px; }
.lb-samen td.lb-stand > button { margin: 2px 0; }
.lb-samen td.lb-stand > button.lb-schrap, .lb-samen td.lb-stand > button.lb-schuldweg { display: inline-flex; min-height: 28px; padding: 0 6px; vertical-align: middle; }
.lb-samen td.lb-nu strong { display: block; font-size:var(--t-ml); }
.lb-samen td.lb-nu .lb-qr { margin: 5px 0 0 auto; display: inline-flex; }
.lb-hoofd .lb-regelknop { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin-top: 4px; padding: 2px 12px;
  border-radius: 999px; font-size:var(--t-xs); font-weight: 600; white-space: nowrap; background: var(--surface-3); color: var(--text-2); border: 1px solid color-mix(in srgb, var(--text-strong) 14%, transparent); }
.lb-hoofd .lb-regelknop::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .7; }
.lb-hoofd .lb-regelknop.on { background: var(--raised); border-color: var(--brand); color: var(--text-strong); font-weight: 700; }
.lb-hoofd .lb-regelknop:hover { background: var(--chrome-2); border-color: var(--chrome-2); color: var(--on-chrome); }
.lb-hoofd .lb-vastknop { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 2px 4px; border: 0; border-radius: 6px;
  background: transparent; color: var(--text-3); font: inherit; font-variant-numeric: tabular-nums; text-decoration: underline dotted color-mix(in srgb, var(--text-strong) 35%, transparent); text-underline-offset: 3px; }
.lb-hoofd .lb-vastknop.on { color: var(--text-strong); font-weight: 600; }
.lb-hoofd .lb-vastknop:hover { background: var(--inset); color: var(--text-strong); }
.lb-hoofd .lb-vastknop { flex-direction: column; align-items: flex-end; gap: 2px; }
.lb-vasttag { padding: 1px 7px; border-radius: 999px; background: var(--chrome-2); color: var(--on-chrome); font-size:var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.lb-pop { display: block; margin: 6px 0 2px; scroll-margin: 12px 0 64px;   /* niet onder de kop of de totaalrij */ padding: 10px 12px; min-width: 210px; max-width: 260px; text-align: left; white-space: normal;
  background: var(--raised); border: 1px solid var(--brand); border-radius: var(--r-m, 12px); box-shadow: var(--shadow-card); font-size:var(--t-s); color: var(--text-strong); }
.lb-pop .seg { display: grid; grid-template-columns: 1fr 1.6fr; width: 100%; margin-bottom: 8px; }
.lb-pop .seg button { min-height: 36px; font-size:var(--t-s); }
.lb-pop-veld { display: flex; flex-direction: column; gap: 3px; }
.lb-pop-veld > span:first-child { font-size:var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.lb-pop-in { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.lb-pop-in input { width: 9ch; min-height: 38px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-pop p.t-meta { margin: 6px 0 8px; font-size:var(--t-xs); line-height: 1.35; }
.lb-pop-knoppen { display: flex; flex-wrap: wrap; gap: 6px; }
.lb-pop-knoppen button { min-height: 36px; padding: 2px 12px; border-radius: 999px; font-size:var(--t-xs); }
.lb-pop-notitie { margin-top: 8px; }
.lb-pop-notitie input { min-height: 38px; width: 100%; }
.lb-hoofd .lb-buiten { white-space: nowrap; color: var(--text-2); font-size:var(--t-xs) !important; padding: 2px 6px !important; }
.lb-hoofd .lb-regellink { background: transparent; border-color: transparent; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; color: var(--text-2); }
.lb-hoofd .lb-regellink::after { display: none; }
.lb-hoofd tbody th small.lb-geeniban { display: block; font-size:var(--t-xs); font-weight: 600; color: var(--brand-ink); white-space: normal; }   /* messing-inkt 5,8:1: een opdracht, geen schuld */
.lb-pop-msg:not(:empty) { margin-top: 6px; color: var(--err-ink); font-weight: 600; }
/* het rekeningnummer in de naamkolom (Arthur 11/10): invullen of wijzigen in een venster in de cel */
.lb-ibanrij { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; }
.lb-ibanrij > small { display: block; }
.lb-ibanrij > .lb-pop { flex-basis: 100%; }
/* de naamkolom kleeft (z-index 1, een eigen laag): met het venster erin moet die cel boven de andere rijen */
.lb-hoofd tbody th:has(.lb-pop) { z-index: 81; }
.lb-hoofd .lb-ibanknop { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; min-width: 28px; padding: 0 4px; vertical-align: middle; }
.lb-hoofd .lb-ibanknop svg, .lb-hoofd .lb-ibanknop .ms { width: 14px; height: 14px; font-size:var(--t-m); }
.lb-hoofd .lb-ibanknop.lb-geeniban { display: flex; justify-content: flex-start; gap: 4px; min-height: 30px; margin-top: 2px; padding: 0 2px; font-size:var(--t-xs); font-weight: 600; color: var(--brand-ink); white-space: normal; text-align: left; }   /* messing-inkt: een opdracht, geen schuld */
.lb-pop-iban input { min-height: 38px; width: 100%; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .lb-nav .lb-sub { order: 1; flex: 1 1 0; min-width: 0; margin: 0; text-align: center; font-size:var(--t-xs); }
  .lb-samen td.lb-stand { min-width: 130px; }
  /* het venster als een blad onderaan het scherm: past niet naast de vaste naamkolom */
  .lb-pop { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 80; min-width: 0;   /* boven de ticketknop (70) */ max-width: none; margin: 0; padding: 14px 16px;
    box-shadow: 0 -4px 30px rgba(21, 18, 14, .28); font-size:var(--t-m); }
  .lb-pop-knoppen button { min-height: 44px; }
  .lb-pop-in input { min-height: 44px; }
  .lb-pop-iban input { min-height: 44px; font-size:var(--t-base); }   /* 16px: de iPhone zoomt niet in */
}

@media (max-width: 1100px) { .lb { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .lb { gap: 10px; }
  .lb-nav { gap: 8px; }
  .lb-nav h3 { order: -1; flex: 1 1 100%; }
  .lb-nav [data-m="-1"] { order: 0; }
  .lb-nav .lb-deel { order: 1; flex: 1 1 0; min-width: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
  .lb-nav .lb-deel button { min-width: 0; padding-left: 6px; padding-right: 6px; }
  .lb-nav [data-m="1"] { order: 2; }
  .lb-lijst > .lb-rij .lb-bestand { width: 100%; }
  .lb-wrap { max-height: calc(100vh - 150px); margin: 0 -6px; }
  .lb-hoofd { font-size:var(--t-s); }
  .lb-hoofd tbody th { min-width: 150px; max-width: 170px; white-space: normal; }
  .lb-av { width: 26px; height: 26px; font-size:var(--t-xs); }
  .lb-wie { gap: 7px; }
  .lb-proef .lb-rij > button { flex: 1 1 auto; }
}

/* ================= Kasboek / XLS (stap 4): de omgeving van Barts werkboek, niet het werkboek zelf ================= */
/* Het raster blijft zoals Bart het vroeg: zijn kolomtitels en hun woorden, de neonkleur per
   persoon (kleuren.json), Cash Tot in #00E676, de grote totalen (.xl-groot) en 'Stand nu',
   de rij Maandtotaal, de dagen van vorige maand, de kolom die groot wordt (.xl-wk-groot) en de
   bladen links onder elkaar. Hier veranderen alleen de bladen, de kop, de kerncijfers en de
   letters rondom. Gemeten 6/10: crème op inkt-2 15,6:1 · messing op inkt-2 8,0:1 · olijf-inkt
   op crème 7,0:1 · rood --neon-ink op crème 5,6:1 · zwart op de felste neon (rood #FF1744) 5,4:1. */

/* de bladen links: Kasboek en Personeel groot, de rest als stille lijst; het actieve blad in inkt */
@media (min-width: 901px) { .xl-layout { grid-template-columns: 206px minmax(0, 1fr); gap: 20px; } }
.xl-zij { gap: 10px; top: calc(var(--header-h, 64px) + 12px); }
.xl-zij button { background: var(--surface); border: 1px solid color-mix(in srgb, var(--text-strong) 10%, transparent); border-radius: var(--r-m); color: var(--text);
  transition: background .2s var(--f2-ease), border-color .2s, transform .2s var(--f2-ease); }
.xl-zij button:hover { background: var(--surface-3); border-color: color-mix(in srgb, var(--text-strong) 22%, transparent); color: var(--text-strong); }
.xl-zij-groot { padding: 16px 14px !important; border-radius: 20px !important; box-shadow: var(--shadow-card); align-items: flex-start !important; }
.xl-zij-groot .ic { width: 36px; height: 36px; padding: 7px; border-radius: 50%; background: var(--surface-3); color: var(--text); box-sizing: border-box; }
.xl-zij-groot strong { font-family: var(--f2-serif); font-weight: 600; font-size:var(--t-xl); letter-spacing: -.01em; }
.xl-zij-groot small { opacity: 1; color: var(--text-2); margin-top: 2px; }
.xl-zij button.on, .xl-zij button.on:hover { background: var(--sel-bg); border-color: var(--sel-bg); color: var(--sel-fg); font-weight: 600;
  box-shadow: 0 16px 30px -18px rgba(21, 18, 14, .8); }
.xl-zij-groot.on .ic { background: var(--brand); color: var(--p-inkt); }
.xl-zij-groot.on small { color: var(--sel-fg-2); }
.xl-zij-rest { gap: 2px; margin-top: 4px; padding: 6px; border-radius: var(--r-m); background: var(--inset); }
.xl-zij-rest button { border-color: transparent; background: transparent; border-radius: 10px; padding: 7px 12px; font-size:var(--t-ml); }
.xl-zij-rest button:hover { background: var(--surface); border-color: transparent; }
.xl-zij-rest button.on { position: relative; }
.xl-zij-rest button.on::before { content: ""; position: absolute; left: 4px; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: var(--brand); }

/* de kop van een blad: de maand groot in Fraunces, ronde pijlen, de acties als stille pillen */
.xl-kaart { border-radius: 22px; }
.xl-kiezer { gap: 8px 10px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.xl-kiezer .xl-titel { font-family: var(--f2-serif); font-weight: 600; font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing: -.01em; color: var(--text-strong); min-width: 0; text-align: center; }
.xl-kiezer .xl-titel::first-letter { text-transform: uppercase; }
.xl-kiezer .xl-m { width: 36px; min-height: 36px; padding: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--text-strong) 16%, transparent); }
.xl-mkies { border-radius: 999px; min-height: 36px; padding: 0 12px; color: var(--text-2); background: var(--surface); }
.xl-acties { gap: 6px; }
.xl-acties > button, .xl-acties > .xl-alle, .xl-acties > a.xl-werkboek { border-radius: 999px; min-height: 36px; padding: 4px 12px; border: 1px solid color-mix(in srgb, var(--text-strong) 14%, transparent); background: var(--surface); color: var(--text); font-size:var(--t-m); }
.xl-acties > button:hover, .xl-acties > a.xl-werkboek:hover { background: var(--surface-3); }
.xl-acties > a.xl-werkboek { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; } /* Barts werkboek (Arthur 31/10) */
.xl-acties > .xl-opmaakknop.on { background: var(--sel-bg); color: var(--sel-fg); border-color: var(--sel-bg); }
.xl-kaart h3 { font-family: var(--f2-serif); font-weight: 600; font-size:var(--t-xl); letter-spacing: -.01em; color: var(--text-strong); margin: 20px 0 8px; }
.xl-kaart > p.t-meta, .xl-kaart .xl-week + p.t-meta { max-width: 115ch; }

/* kerncijfers zoals de blokken op Start: label als eyebrow, groot getal */
.xl-kern { gap: 12px; margin-bottom: 14px; }
.xl-kern > div { padding: 14px 16px 15px; border: 1px solid color-mix(in srgb, var(--text-strong) 7%, transparent); border-radius: 18px; background: var(--surface-3); gap: 6px; }
.xl-kern .t-label { font-size:var(--t-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.xl-kern strong { font-size: clamp(1.25rem, 1.9vw, 1.65rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.xl-kern strong small { font-size:var(--t-s); font-weight: 500; letter-spacing: 0; color: var(--text-2); }
.xl-kern small { color: var(--text-2); }
.xl-kern > div:first-child { background: var(--chrome-2); border-color: var(--chrome-2); }
.xl-kern > div:first-child .t-label { color: var(--brand); }
.xl-kern > div:first-child strong { color: var(--on-chrome); }
.xl-kern > div:first-child small, .xl-kern > div:first-child strong small { color: var(--on-chrome-2); }    /* 9,1:1 op inkt-2 */
.xl-kern > div:first-child .theo-tip { color: var(--on-chrome-2); }
.xl-rood-t, .xl-kern strong.xl-rood-t { color: var(--err-ink); }
.xl-neg { color: var(--err-ink); }
.xl-pos { color: var(--ok-ink); }
.xl-kern strong.xl-pos { color: var(--ok-ink); }    /* de cash flow: groen boven, rood onder 0 (Bart 10/10) */

/* het raster: alleen de rand en de hoeken; de grote totalen nog iets groter */
.tblwrap.xl-wrap { border-radius: 16px; border-color: color-mix(in srgb, var(--text-strong) 18%, transparent); }
.xl-tabel tr.xl-deel th { background: var(--surface-2); color: var(--text-2); font-weight: 700; letter-spacing: .14em; }
.xl-groot { font-size:var(--t-xl); }
.xl-msg:not(:empty) { margin-top: 10px; padding: 8px 12px; border-radius: var(--r-s); background: var(--inset); color: var(--text); border-left: 3px solid var(--brand); font-weight: 600; }
.xl-fitvs { color: var(--text-3); }

/* blad Personeel: de neon blijft; de tekst erop in zwart, ook het statuut (was grijs: 3,9:1 op rood) */
th.xl-pkleur, th.xl-pkleur small { color: var(--zwart) !important; opacity: 1 !important; }
.xl-weeknav h3 { font-family: var(--f2-serif); }
.xl-weeknav button { border-radius: 50%; }
.xl-pregels { border-color: color-mix(in srgb, var(--text-strong) 12%, transparent); border-radius: var(--r-m); background: var(--surface); }
.xl-wk-p { color: var(--text-3); }
.xl-wk-mis .xl-wk-t { color: var(--err-ink); }
.xl-wk-fix { border-color: var(--p-rood-inkt); color: var(--err-ink); }
.xl-wktab .xl-wk-groot { background: rgba(212, 175, 55, .14); }

/* Personeel, Week of Maand (Arthur 8/10): de keuze als twee pillen naast de navigatie */
.xl-wkzicht { display: inline-flex; margin-left: auto; padding: 3px; gap: 2px; border-radius: 999px; background: var(--surface-3); border: 1px solid color-mix(in srgb, var(--text-strong) 10%, transparent); }
.xl-wkzicht button { min-height: 36px; padding: 4px 16px; border: 0; border-radius: 999px !important; background: transparent; color: var(--text); font-weight: 600; }
.xl-wkzicht button.on { background: var(--sel-bg); color: var(--sel-fg); }
.xl-wkzicht button:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 1px; }
/* de maand: het raster scrolt binnen zichzelf, zodat de namen boven en de dagen links blijven staan */
.xl-wkwrap.xl-wk-maand { max-height: calc(100dvh - 140px); overflow: auto; overscroll-behavior: contain; }
.xl-wk-maand .xl-wktab thead { position: sticky; top: 0; z-index: 3; }
.xl-wk-maand .xl-wktab thead th { background: var(--surface-2); }
.xl-wk-maand .xl-wktab thead th.xl-pkleur { background: var(--pk); }
.xl-wk-maand .xl-wktab thead th.xl-wk-dag { z-index: 4; }
.xl-wk-maand .xl-wktab tr.xl-tot > * { position: sticky; bottom: 0; z-index: 2; background: var(--surface-2); border-top: 2px solid var(--text); }
.xl-wk-maand .xl-wktab tr.xl-tot > th.xl-wk-dag { z-index: 4; }
.xl-wktab tr.xl-wk-ma > * { border-top: 2px solid color-mix(in srgb, var(--text-strong) 35%, transparent); }   /* een nieuwe week begint */
/* de balk met de totalen van de maand (Uren ... Loonkost) blijft onder de kopband staan terwijl je
   door de personeelslijst scrolt (Bart, ticket 20261008-fb1149); op de gsm niet, daar is het scherm te klein */
@media (min-width: 761px) {
  .xl-ptot { position: sticky; top: var(--header-h); z-index: 5; background: var(--surface); padding-top: 8px; }
  .xl-ptot .xl-kern { margin-bottom: 8px; }
}

/* de naam als knop: opent het venster met alle dagen van die persoon */
.xl-pnaam { all: unset; box-sizing: border-box; display: inline; cursor: pointer; font: inherit; color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--text-strong) 35%, transparent); text-underline-offset: 3px; overflow-wrap: anywhere; }
.xl-pnaam:hover { text-decoration-color: currentColor; }
.xl-pnaam-cel { cursor: pointer; }
.xl-pnaam-cel:hover .xl-pnaam { text-decoration-color: currentColor; }
.xl-pnaam:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; border-radius: 3px; }

/* het venster: in het midden op de computer, een volle laag op de telefoon */
.xl-pm { padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-l); background: var(--surface); color: var(--text);
  width: min(880px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); box-shadow: var(--shadow-pop); overflow: hidden; }
.xl-pm[open] { display: flex; flex-direction: column; }
.xl-pm::backdrop { background: color-mix(in srgb, var(--p-inkt) 50%, transparent); }
.xl-pm-in { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; min-height: 0; flex: 1; }
.xl-pm-kop { display: flex; align-items: flex-start; gap: 12px; }
.xl-pm-wie { flex: 1; min-width: 0; }
.xl-pm-kop h2 { margin: 0; font-family: var(--f2-serif); font-weight: 600; font-size:var(--t-2xl); letter-spacing: -.01em; color: var(--text-strong); display: flex; align-items: center; gap: 10px; overflow-wrap: anywhere; }
.xl-pm-kop p { margin: 2px 0 0; }
.xl-pm-kop p::first-letter { text-transform: uppercase; }
.xl-pm-bol { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--pk); border: 1px solid color-mix(in srgb, var(--text-strong) 35%, transparent); }
.xl-pm-x { flex: none; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--text-strong) 16%, transparent); background: var(--surface); color: var(--text-strong); }
.xl-pm-x:hover { background: var(--surface-3); }
.xl-pm-tot { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.xl-pm-tot > div { display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; border-radius: 14px; background: var(--surface-3); border: 1px solid color-mix(in srgb, var(--text-strong) 7%, transparent); }
.xl-pm-tot .t-label { font-size:var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.xl-pm-tot strong { font-size:var(--t-l); font-weight: 800; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.xl-pm-tot small { color: var(--text-2); font-size:var(--t-xs); }
.xl-pm-tot > div:nth-child(2) { background: var(--chrome-2); border-color: var(--chrome-2); }
.xl-pm-tot > div:nth-child(2) .t-label { color: var(--brand); }
.xl-pm-tot > div:nth-child(2) strong { color: var(--on-chrome); }
.xl-pm-tot > div:nth-child(2) small { color: var(--on-chrome-2); }
.xl-pm-totw .note { margin: 8px 0 0; }
.xl-pm-in > p.t-meta { margin: 0; }
.xl-pm-lijst { flex: 1; min-height: 0; overflow: auto; border: 1px solid color-mix(in srgb, var(--text-strong) 14%, transparent); border-radius: 14px; background: var(--surface); }
.xl-pm-tab { width: 100%; border-collapse: collapse; font-size:var(--t-m); font-variant-numeric: tabular-nums; }
.xl-pm-tab th, .xl-pm-tab td { padding: 4px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; white-space: nowrap; }
.xl-pm-tab .r { text-align: right; }
.xl-pm-tab thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); font-size:var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); border-bottom: 2px solid var(--text); }
.xl-pm-tab tfoot > tr > * { position: sticky; bottom: 0; background: var(--surface-2); border-top: 2px solid var(--text); border-bottom: 0; font-weight: 700; }
.xl-pm-tab tbody th { font-weight: 600; color: var(--text-strong); background: transparent; }
.xl-pm-tab tr.xl-nu > * { background: rgba(212, 175, 55, .16); }
.xl-pm-tab tr.xl-wk-ma > * { border-top: 2px solid color-mix(in srgb, var(--text-strong) 30%, transparent); }
.xl-pm-tab tr.xl-pm-leeg th { color: var(--text-3); font-weight: 400; }
.xl-pm-tab .xl-wk-t { font-size:var(--t-m); }
.xl-pm-tab .xl-wk-p { font-size:var(--t-s); color: var(--text-3); }
.xl-pm-tab .xl-wk-fix { display: inline-block; margin: 0 0 0 6px; min-height: 28px; padding: 2px 10px; font-size:var(--t-xs); }
.xl-pm-klok { color: var(--text-3); }
.xl-pm-typ, .xl-pmcel.xl-typ { font-weight: 800; color: var(--text-strong); }
.xl-pmcel { width: 72px; min-height: 34px; text-align: right; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--raised); padding: 2px 8px; font: inherit; font-variant-numeric: tabular-nums; }
.xl-pmcel::placeholder { color: var(--text-3); opacity: 1; font-weight: 400; }
.xl-pmcel.xl-fout { border-color: var(--p-rood-inkt); background: var(--err-bg); }
.xl-pm-msg:empty { display: none; }
.xl-pm-msg { padding: 6px 10px; border-radius: var(--r-s); background: var(--inset); color: var(--text); border-left: 3px solid var(--brand); font-weight: 600; }
/* een dag schrappen: de reden uit een keuzelijst (Bart 29/10) */
.xl-pm.xl-schrap { width: min(460px, calc(100vw - 32px)); height: auto; margin: auto; border-radius: var(--r-l); }
.xl-schrap .xl-pm-kop h2 { font-size: var(--t-xl); }
.xl-schrap-veld { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.xl-schrap-veld[hidden] { display: none; }
.xl-schrap-veld select, .xl-schrap-veld input { width: 100%; min-height: 44px; }
.xl-schrap-knoppen { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .xl-wkzicht { margin-left: 0; }
  .xl-wkwrap.xl-wk-maand { max-height: calc(100dvh - 110px); }
  /* een volle laag: een rij per dag, niets schuift zijwaarts */
  .xl-pm { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .xl-pm-in { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
  .xl-pm-kop { position: sticky; top: -12px; z-index: 2; margin: -12px -16px 0; padding: 12px 16px 8px; background: var(--surface); border-bottom: 1px solid var(--line); }
  .xl-pm-tot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xl-pm-lijst { flex: none; overflow: visible; }
  .xl-pm-tab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .xl-pm-tab tbody tr, .xl-pm-tab tfoot tr { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "dag tik u" "dag plan u" "dag klok u"; align-items: center; column-gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
  .xl-pm-tab tbody tr > *, .xl-pm-tab tfoot tr > * { padding: 0; border: 0; background: transparent; white-space: normal; text-align: left; }
  .xl-pm-tab tbody tr.xl-nu { background: rgba(212, 175, 55, .16); }
  .xl-pm-tab tbody tr.xl-wk-ma { border-top: 2px solid color-mix(in srgb, var(--text-strong) 30%, transparent); }
  .xl-pm-tab tbody tr.xl-wk-ma > * { border-top: 0; }
  .xl-pm-tab tfoot tr { position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom)); background: var(--surface-2); border-top: 2px solid var(--text); }
  .xl-pm-tab tfoot tr > * { position: static; }
  .xl-pm-dag { grid-area: dag; align-self: start; }
  .xl-pm-tik { grid-area: tik; }
  .xl-pm-plan { grid-area: plan; }
  .xl-pm-klok { grid-area: klok; font-size:var(--t-s); }
  .xl-pm-klok:not(:empty)::before { content: "volgens de regels "; }
  .xl-pm-u { grid-area: u; text-align: right !important; }
  .xl-pm-tab td:empty { display: none; }
  .xl-pmcel { width: 80px; min-height: 44px; font-size:var(--t-base); }
  .xl-pm-tab .xl-wk-fix { min-height: 36px; margin: 4px 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .xl-pm[open] { animation: xl-pm-in .18s var(--f2-ease); }
  @keyframes xl-pm-in { from { opacity: 0; transform: translateY(8px); } }
}

@media (max-width: 900px) {
  .xl-layout { gap: 12px; }
  .xl-zij { gap: 8px; }
  .xl-zij-groot { flex: 1 1 140px; padding: 12px !important; }
  /* de andere bladen als een rij pillen die zijwaarts schuift */
  .xl-zij-rest { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; padding: 4px; gap: 4px; scrollbar-width: none; }
  .xl-zij-rest button { flex: none; white-space: nowrap; padding: 6px 14px; }
  .xl-zij-rest button.on { background: var(--sel-bg); color: var(--sel-fg); }
  .xl-zij-rest button.on::before { display: none; }
}
@media (max-width: 760px) {
  .xl-zij-groot strong { font-size:var(--t-base); }
  .xl-zij-groot small { font-size:var(--t-xs); }
  .xl-zij-groot .ic { width: 30px; height: 30px; padding: 5px; }
  .xl-kaart { padding: 14px 12px; border-radius: 18px; }
  .xl-kiezer .xl-titel { flex: 1 1 auto; }
  .xl-mkies { flex: 1 1 100%; max-width: none; }
  .xl-acties { margin-left: 0; width: 100%; }
  .xl-acties > * { flex: 1 1 auto; justify-content: center; }
  .xl-kern { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .xl-kern > div { padding: 11px 12px; border-radius: 14px; }
  .xl-kern strong { font-size:var(--t-l); }
}
@media (prefers-reduced-motion: reduce) { .xl-zij button { transition: none; } }

/* ---- werkpost-tablet: de vijf drukteknoppen (restpunt van stap 1) ---- */
/* De kleur van elke knop blijft (rand en smiley in --kl uit werkstation.js); alleen het woord
   eronder krijgt een donkere variant van dezelfde tint. Gemeten 6/10 op crème #fffdf6:
   Te druk #c9822b 3,1 -> #8a5312 6,2:1 · Goed #72997a 3,2 -> #3f6b48 6,1:1 ·
   Veel te kalm #6b7c93 4,2 -> #4f5d72 6,6:1. Veel te druk (5,6) en Te kalm (4,5) waren in orde.
   De smileys zijn grafisch en halen de 3:1 voor iconen. De algemene hover (linnen, inkt) liet de
   kleur van de knop vallen; hier blijft de knop crème met zijn eigen rand. */
.ws-lvl[data-lvl="druk"] > span { color: var(--warn-ink); }
.ws-lvl[data-lvl="goed"] > span { color: var(--ok-ink); }
.ws-lvl[data-lvl="zeer_kalm"] > span { color: var(--leisteen); }
.ws-lvl:hover { background: var(--surface); border-color: var(--kl); color: var(--kl); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kl) 22%, transparent); }
/* ================= Personeelsplanner, WEEK op de telefoon: dagkiezer + één leesbare dag (Arthur 6/10) ================= */
/* Onder 900 px wijkt de weektabel (er stond maar één dagkolom in beeld) voor .wkg uit staffing.js
   drawWeek: zeven dagknoppen met de dagstatus en daaronder één dag. Vanaf 900 px blijft het
   weekrooster zoals het was; deze regels raken de tabel niet.
   Contrast (gemeten 6/10): tekort in --neon-ink (5,6:1 op wit), teveel in #6e5410 (7,0), in orde in
   --leaf-ink (6,0), bijtekst in --ink-mute (6,0); op de gekozen dag (inkt) crème 15,7 en
   --f2-on-ink-sub 9,1. Neon en blad enkel als balk, stip en rand; het bolletje 'open' is
   crème op --neon-ink (5,3). Doelen voor de duim minstens 44 px. */
.wkg { display: none; }
@media (max-width: 899px) {
  .wk-kaart .wk-breed, .wk-kaart .wk-legend, .wk-kaart .ct .wk-nav, .wk-kaart .wk-titel-week, .wk-kaart .wk-av-vak { display: none; }
  .wkg { display: block; }
  .wk-kaart .wk-acties { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 4px; }
  .wk-kaart .wk-acties > button { width: 100%; min-height: 48px; border-radius: 999px; }
  .wk-kaart .wk-acties > .t-meta:empty { display: none; }
  .wk-kaart .wk-eigen { font-size:var(--t-m); line-height: 1.35; }

  /* kop: de week met de pijlen ernaast */
  .wkg-kop { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; margin: 10px 0 6px; }
  .wkg-kop-t { text-align: center; line-height: 1.15; }
  .wkg-kop-t b { display: block; font-family: var(--f2-serif); font-size:var(--t-xl); font-weight: 600; color: var(--text-strong); letter-spacing: -.01em; }
  .wkg-kop-t span { font-size:var(--t-s); color: var(--text-3); }
  button.wkg-pijl { width: 48px; height: 48px; min-height: 48px; padding: 0; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--raised); color: var(--text-strong); }
  button.wkg-pijl svg.ic { width: 24px; height: 24px; }
  button.wkg-pijl:disabled { opacity: .45; }

  /* de zeven dagen: plakken onder de kopband terwijl je door de dag scrolt */
  .wkg-strip { position: sticky; top: var(--header-h, 64px); z-index: 4; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px; margin: 0 -4px; padding: 6px 4px 8px; background: var(--surface); }
  button.wkg-dag { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1px; min-width: 0; min-height: 70px;
    padding: 6px 0 8px; border: 1px solid color-mix(in srgb, var(--text-strong) 10%, transparent); border-radius: 14px; background: var(--raised); color: var(--text-strong);
    line-height: 1.1; box-shadow: 0 1px 2px rgba(21, 18, 14, .05); -webkit-tap-highlight-color: transparent;
    transition: transform .15s var(--f2-ease), background-color .15s var(--f2-ease); }
  button.wkg-dag:hover { background: var(--raised); color: var(--text-strong); border-color: var(--brand); }
  .wkg-wd { font-size:var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
  .wkg-dn { font-family: var(--f2-serif); font-size:var(--t-xl); font-weight: 600; font-variation-settings: "opsz" 36; }
  .wkg-bal { width: 70%; height: 5px; border-radius: 3px; margin-top: 3px; }
  .wkg-mini { font-size:var(--t-xs); font-weight: 700; color: var(--text-3); white-space: nowrap; }
  .wkg-dag.st-rood .wkg-mini { color: var(--err-ink); }
  .wkg-dag.st-geel .wkg-mini { color: var(--brand-ink); }
  .wkg-dag.st-groen .wkg-mini { color: var(--ok-ink); }
  .wkg-nopen { position: absolute; top: -7px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
    display: grid; place-items: center; font-size:var(--t-xs); font-weight: 800; line-height: 1; background: var(--p-rood-inkt); color: var(--on-chrome);
    box-shadow: 0 0 0 2px var(--surface); }
  .wkg-dag.voorbij { background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--text-strong) 7%, transparent) 0 1.5px, transparent 1.5px 7px); }
  .wkg-dag.vandaag { box-shadow: inset 0 0 0 2px var(--text-strong); }
  button.wkg-dag.sel, button.wkg-dag.sel:hover { background: var(--chrome-2); border-color: var(--chrome-2); color: var(--on-chrome); }
  .wkg-dag.sel .wkg-wd, .wkg-dag.sel .wkg-mini { color: var(--on-chrome-2); }
  .wkg-dag.sel.vandaag { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
  button.wkg-dag:active { transform: scale(.96); }
  .wkg-sleutel { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 2px 10px; font-size:var(--t-xs); color: var(--text-3); }
  .wkg-sleutel span { display: inline-flex; align-items: center; gap: 5px; }
  .wkg-sleutel i { width: 14px; height: 5px; border-radius: 3px; }
  .wkg-sleutel i.wkg-sl-open { width: 10px; height: 10px; border-radius: 50%; background: var(--p-rood-inkt); }

  /* de gekozen dag */
  .wkg-paneel { border-top: 1px solid var(--line); padding-top: 12px; touch-action: pan-y; }
  .wkg-paneel.wissel { animation: wkg-in .24s var(--f2-ease); }
  .wkg-dkop h3 { margin: 0; font-family: var(--f2-serif); font-size:var(--t-xl); font-weight: 600; letter-spacing: -.01em; color: var(--text-strong); }
  .wkg-nu { font-family: var(--font); font-size:var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-ink); vertical-align: 3px; margin-left: 4px; }
  .wkg-dmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 12px; }
  .wkg-dmeta .chip { font-size:var(--t-s); }
  .wkg-wx, .wkg-vrij { display: inline-flex; align-items: center; gap: 4px; font-size:var(--t-s); color: var(--text-2); }
  .wkg-cijfers { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
  .wkg-cijfers > div { background: var(--surface-3); border-radius: 14px; padding: 8px 10px 9px; min-width: 0; }
  .wkg-cijfers span { display: block; font-size:var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
  .wkg-cijfers b { display: block; font-size:var(--t-xl); font-weight: 800; letter-spacing: -.02em; color: var(--text-strong); line-height: 1.15; margin-top: 2px; }
  .wkg-cijfers small { font-size:var(--t-xs); color: var(--text-2); white-space: nowrap; }
  .wkg-cijfers > .wkg-c-open { background: var(--err-bg); box-shadow: inset 3px 0 0 var(--err); }
  .wkg-cijfers > .wkg-c-open span, .wkg-cijfers > .wkg-c-open b, .wkg-cijfers > .wkg-c-open small { color: var(--err-ink); }
  .wkg-vs { font-weight: 700; padding: 0 7px; border-radius: 999px; background: var(--ok-bg); color: var(--groen-donker); }
  .wkg-vs.meer { background: var(--surface-3); color: var(--brand-ink); }
  .wkg-vs.minder { background: var(--info-bg); color: var(--blauw-nacht); }
  .wkg-rest { margin: 6px 2px 0; font-size:var(--t-xs); color: var(--text-3); line-height: 1.35; }

  /* nog open: wat Bart nog moet invullen, met de knop naar het dagrooster */
  .wkg-open { margin: 12px 0 4px; padding: 10px 12px 12px; border-radius: 14px; background: var(--err-bg); border-left: 4px solid var(--err); }
  .wkg-open-kop { display: flex; align-items: center; gap: 6px; color: var(--err-ink); font-size:var(--t-ml); }
  .wkg-open-kop svg.ic { width: 18px; height: 18px; }
  .wkg-open ul { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; gap: 4px; }
  .wkg-open li { display: flex; align-items: baseline; gap: 8px; font-size:var(--t-ml); color: var(--text-strong); }
  .wkg-open li b { min-width: 58px; }
  .wkg-open li i { font-style: normal; font-weight: 800; color: var(--err-ink); }
  .wkg-open .wkg-toewijzen { width: 100%; min-height: 48px; border-radius: 999px; }

  /* wie er staat, per afdeling */
  .wkg-afd { margin-top: 14px; }
  .wkg-afd-kop { display: flex; align-items: center; gap: 8px; margin: 0 2px 6px; font-family: var(--font); font-size:var(--t-xs); font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
  .wkg-afd-kop span { margin-left: auto; letter-spacing: .02em; text-transform: none; font-weight: 600; color: var(--text-3); }
  .wkg-stip { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--p-olijf); }
  .wkg-p { display: flex; align-items: stretch; margin-bottom: 6px; border-radius: 14px; background: var(--raised);
    border: 1px solid color-mix(in srgb, var(--text-strong) 9%, transparent); box-shadow: 0 1px 2px rgba(21, 18, 14, .04); }
  .wkg-p.wijz { border-color: var(--brand); box-shadow: inset 3px 0 0 var(--brand); }
  button.wkg-p-knop { flex: 1; width: auto; height: auto; min-width: 0; min-height: 60px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
    padding: 8px 8px 8px 10px; border: 0; border-radius: 14px; background: transparent; text-align: left; line-height: 1.2; color: var(--text-strong);
    -webkit-tap-highlight-color: transparent; }
  button.wkg-p-knop:hover { background: transparent; color: var(--text-strong); }
  button.wkg-p-knop:active { background: var(--inset); transform: none; }
  .wkg-av { width: 40px; height: 40px; font-size:var(--t-s); }
  .wkg-av.afd-keu { background: var(--p-groen-terras); } .wkg-av.afd-bar { background: var(--p-bruin); } .wkg-av.afd-sch { background: var(--p-blauw-mid); }
  .wkg-av.afd-zv { background: var(--p-geel); color: var(--p-inkt); } .wkg-av.afd-ze { background: var(--messing-tint); color: var(--text-strong); }
  .wkg-av.afd-afw { background: var(--p-steen); color: var(--p-inkt); }
  .wkg-stip.afd-keu { background: var(--p-groen-terras); } .wkg-stip.afd-zv { background: var(--p-geel); } .wkg-stip.afd-bar { background: var(--p-bruin); }
  .wkg-stip.afd-afw { background: var(--p-steen); } .wkg-stip.afd-ze { background: var(--messing-licht); } .wkg-stip.afd-sch { background: var(--p-blauw-mid); }
  .wkg-p-t { min-width: 0; }
  .wkg-p-t b { display: block; font-size:var(--t-base); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wkg-p-t small { display: block; margin-top: 2px; font-size:var(--t-xs); line-height: 1.3; color: var(--text-3); }
  .wkg-lab { display: inline-block; margin: 3px 4px 0 0; padding: 0 7px; border-radius: 999px; font-size:var(--t-xs); font-weight: 700; line-height: 1.6; }
  .wkg-lab.wijz { background: var(--surface-3); color: var(--brand-ink); }
  .wkg-lab.nee { background: var(--err-bg); color: var(--err-ink); }
  .wkg-lab.kanniet { background: var(--err); color: var(--on-solid); }   /* zei 'kan niet', toch ingepland (4/11) */
  .wkg-p-u { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; white-space: nowrap; }
  .wkg-p-u b { font-size:var(--t-base); font-weight: 700; font-variant-numeric: tabular-nums; }
  .wkg-p-u small { font-size:var(--t-xs); color: var(--text-3); }
  .wkg-zone { font-style: normal; font-size:var(--t-xs); font-weight: 700; padding: 0 6px; border-radius: 999px; background: var(--inset); color: var(--text-2); }
  .wkg-p button.wk-weg { position: static; opacity: 1; flex: none; width: 44px; min-height: 44px; padding: 0; margin: 0; border-radius: 0 14px 14px 0;
    border-left: 1px solid var(--line); color: var(--text-3); }
  .wkg-p button.wk-weg:hover, .wkg-p button.wk-weg:active { background: var(--err-bg); color: var(--err-ink); }
  .wkg-p button.wk-weg svg.ic { width: 20px; height: 20px; }
  .wkg-leeg { margin: 14px 2px; color: var(--text-3); }

  /* stand 'beschikbaarheid aanpassen': elke rij zegt de stand in woorden en in kleur */
  .wkg-av-uitleg { margin: 0 0 6px; padding: 8px 12px; border-radius: 12px; background: var(--inset); font-size:var(--t-m); color: var(--text); line-height: 1.35; }
  .wkg-avst { font-size:var(--t-xs); font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--inset); color: var(--text-2); white-space: nowrap; }
  .wkg-p.av-ja { box-shadow: inset 4px 0 0 var(--ok); }
  .wkg-p.av-ja .wkg-avst { background: var(--ok-bg); color: var(--ok-ink); }
  .wkg-p.av-nee { box-shadow: inset 4px 0 0 var(--err); }
  .wkg-p.av-nee .wkg-avst { background: var(--err-bg); color: var(--err-ink); }
  .wkg-p.bezig { opacity: .7; }
  .wkg-p button.wkg-p-knop:disabled { opacity: 1; background: transparent; color: var(--text-3); cursor: default; }

  /* wie nog kan of niet kan */
  .wkg-rest-blok { margin-top: 14px; }
  .wkg-rest-blok h4 { margin: 0 2px 6px; font-family: var(--font); font-size:var(--t-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
  .wkg-rest-blok h4 span { letter-spacing: 0; color: var(--text-3); margin-left: 4px; }
  .wkg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  button.wkg-chip { width: auto; height: auto; min-height: 44px; padding: 4px 14px; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid transparent; font-size:var(--t-m); line-height: 1.15;
    flex-direction: column; gap: 0; }
  button.wkg-chip small { font-size:var(--t-xs); }
  button.wkg-chip.ja, button.wkg-chip.ja:hover { background: var(--ok-bg); color: var(--ok-ink); border-color: rgba(63, 107, 72, .25); }
  button.wkg-chip.nee, button.wkg-chip.nee:hover { background: var(--err-bg); color: var(--err-ink); border-color: rgba(196, 43, 31, .2); }
  .wkg-stil { margin: 10px 2px 0; font-size:var(--t-s); color: var(--text-3); }

  /* de week in een regel, en de volgorde van de afdelingen */
  .wkg-week { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 16px; padding: 10px 12px; border-radius: 14px; background: var(--chrome-2); color: var(--on-chrome); }
  .wkg-week span { font-size:var(--t-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); }
  .wkg-week b { font-size:var(--t-base); }
  .wkg-week .wkg-vs { font-size:var(--t-xs); }
  button.wkg-volg { margin-top: 8px; min-height: 44px; padding: 4px 10px; color: var(--text-2); }
  button.wkg-volg svg.ic { width: 18px; height: 18px; }
}
@media (max-width: 480px) {
  /* de zeven dagknoppen krijgen elk minstens 44 px: de kaart iets smaller ingesprongen */
  .wk-kaart { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 360px) {
  .wkg-strip { gap: 2px; margin: 0 -6px; padding-left: 0; padding-right: 0; }
  .wkg-dn { font-size:var(--t-base); }
  .wkg-mini { font-size:var(--t-xs); }
}
@keyframes wkg-in { from { opacity: .3; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .wkg-paneel.wissel { animation: none; }
  button.wkg-dag, button.wkg-dag:active { transition: none; transform: none; }
}

/* ================= Personeelsplanner, DAG op de telefoon: het rooster als kaarten per werkpost (Arthur 8/10) ================= */
/* Tot en met 768 px (telefoon en iPad rechtop, Arthur 8/10) wijkt de roostertabel (#pl-roost) voor .pld uit staffing.js drawDagPlan: per werkpost
   een kop met stip, daaronder één kaart per blok. Uren groot, wie erop staat in de gewone keuzelijst
   van het toestel, knoppen met tekst; elk doel voor de duim minstens 44 px. Breder blijft de
   tabel zoals ze was; .pld staat daar uit.
   Contrast: tekst in --f2-ink / --ink-mute / --f2-olive-ink op wit of crème; 'nog vrij' in
   --neon-ink op --neon-tint (5,3:1), 'gewijzigd' in #6e5410 op #f6ebc9. Neon en messing enkel
   als rand en balk. */
.pld { display: none; }
@media (max-width: 768px) {
  #pl-body .pl-roost-breed { display: none; }
  .pld { display: block; margin: 4px 0 12px; }

  .pld-groep + .pld-groep { margin-top: 16px; }
  .pld-gkop { display: flex; align-items: center; gap: 8px; margin: 0 2px 8px; font-family: var(--font); font-size:var(--t-xs); font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
  .pld-gkop > span:last-child { margin-left: auto; letter-spacing: .02em; text-transform: none; font-weight: 600; color: var(--text-3); }
  .pld-gkop > span:last-child b { color: var(--err-ink); }
  .pld-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

  /* één blok */
  .pld-k { padding: 10px 12px 12px; border-radius: 14px; background: var(--raised); border: 1px solid color-mix(in srgb, var(--text-strong) 10%, transparent);
    box-shadow: 0 1px 2px rgba(21, 18, 14, .04); }
  .pld-k.open { background: var(--err-bg); border-color: rgba(196, 43, 31, .25); box-shadow: inset 4px 0 0 var(--err); }
  .pld-k.pl-wijz { border-color: var(--brand); box-shadow: inset 4px 0 0 var(--brand); }
  .pld-k.pl-nabij { box-shadow: inset 4px 0 0 var(--err); }
  .pld-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .pld-uurcel { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
  .pld-uurcel .pl-shift { font-size:var(--t-l); font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--text-strong); }
  .pld .pl-uren { opacity: 1; margin-left: 0; min-height: 44px; padding: 0 10px; display: inline-flex; align-items: center; gap: 4px; font-size:var(--t-m); color: var(--text-2); border-radius: 999px; }
  .pld .pl-uren svg.ic { width: 18px; height: 18px; }
  .pld-cijf { display: flex; flex-direction: column; align-items: flex-end; text-align: right; white-space: nowrap; line-height: 1.2; }
  .pld-cijf b { font-size:var(--t-base); font-variant-numeric: tabular-nums; color: var(--text-strong); }
  .pld-cijf small { font-size:var(--t-xs); color: var(--text-3); }

  /* uren aanpassen: twee velden en twee knoppen, alles duimgroot */
  .pld .pl-uurbew { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
  .pld .pl-uurbew input { width: 76px; min-height: 44px; font-size:var(--t-base); }
  .pld .pl-uurbew button { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; border-radius: 12px; }
  .pld .pl-uurbew button.ok { background: var(--sel-bg); color: var(--sel-fg); }

  /* wie staat er op: avatar + de keuzelijst van het toestel over de hele breedte */
  .pld-wie { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
  .pld-av { width: 40px; height: 40px; font-size:var(--t-s); }
  .pld-av.leeg { background: var(--raised); color: var(--err-ink); box-shadow: inset 0 0 0 2px var(--err); }
  .pld-av.leeg svg.ic { width: 20px; height: 20px; }
  .pld-wie select { flex: 1; min-width: 0; width: 100%; min-height: 48px; padding: 0 12px; font-size:var(--t-base); font-weight: 600;
    color: var(--text-strong); background-color: var(--raised); border: 1.5px solid var(--line-strong); border-radius: 12px; text-overflow: ellipsis; }
  .pld-k.open .pld-wie select { border-color: var(--p-rood-inkt); color: var(--err-ink); }
  .pld-wie select:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; }

  .pld-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 8px 0 0 50px; font-size:var(--t-s); color: var(--text-3); line-height: 1.3; }
  .pld-tag { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px; font-size:var(--t-xs); font-weight: 700; background: var(--inset); color: var(--text-2); }
  .pld-tag svg.ic { width: 14px; height: 14px; }
  .pld-tag.wijz { background: var(--surface-3); color: var(--brand-ink); }
  .pld-tag.nb { background: var(--err-bg); color: var(--err-ink); }
  .pld-acties { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0 50px; }
  .pld-acties button { min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; font-size:var(--t-m); border-radius: 999px;
    border: 1px solid var(--line-strong); color: var(--text-strong); }
  .pld-acties button svg.ic { width: 18px; height: 18px; }
  .pld-acties .pl-weg:hover, .pld-acties .pl-weg:active { background: var(--err-bg); color: var(--err-ink); border-color: rgba(196, 43, 31, .3); }

  .pld-tot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin-top: 12px; padding: 10px 12px;
    border-radius: 14px; background: var(--surface-3); color: var(--text-strong); }
  .pld-tot span { font-size:var(--t-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
  .pld-tot b { font-variant-numeric: tabular-nums; }

  /* de kop van de kaart: vinkje en 'terug naar het voorstel' leesbaar en duimgroot */
  #pl-body .ct .pl-ruim { min-height: 44px; margin-right: 0; text-transform: none; letter-spacing: 0; font-weight: 500; font-size:var(--t-m); }
  #pl-body .ct .pl-ruim input { width: 22px; height: 22px; }
  #pl-body .ct #pl-herstel { min-height: 44px; }
  #pl-body .pl-goed-k, #pl-body .pl-goed-k button { width: 100%; }
  #pl-body .pl-goed-k button { min-height: 48px; justify-content: center; }

  /* blok toevoegen: onder elkaar, velden over de hele breedte */
  #pl-body .pl-nieuw { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
  #pl-body .pl-nieuw > .t-meta:first-child { grid-column: 1 / -1; font-weight: 700; color: var(--text-strong); font-size:var(--t-m); }
  #pl-body .pl-nieuw > .dd-host { display: block !important; grid-column: 1 / -1; }
  #pl-body .pl-nieuw .dd-host .pop { display: flex; width: 100%; }
  #pl-body .pl-nieuw .dd-btn { flex: 1; width: 100%; min-height: 48px; justify-content: space-between; font-size:var(--t-base); }
  #pl-body .pl-nieuw .pl-uurveld { min-height: 48px; }
  #pl-body .pl-nieuw .pl-uurveld input { flex: 1; width: auto; min-width: 0; min-height: 44px; font-size:var(--t-base); }
  #pl-body .pl-nieuw #pl-n-add { grid-column: 1 / -1; min-height: 48px; justify-content: center; border: 1.5px solid var(--text-strong); border-radius: 999px; color: var(--text-strong); font-weight: 600; }
  #pl-body .pl-nieuw #pl-n-err { grid-column: 1 / -1; }
  #pl-body .pl-nieuw #pl-n-err:empty { display: none; }

  /* de ronde aanvraagknop: kleiner op de planner, blijft 48 px en dus makkelijk te raken; onderaan
     extra ruimte zodat hij nooit de laatste rij bedekt (Arthur 8/10) */
  body:has(#pl-bar) .tk-fab { width: 48px; height: 48px; right: 12px; bottom: 14px; }
  body:has(#pl-bar) .tk-fab .tk-plus { font-size:var(--t-3xl); }
  #pl-body { padding-bottom: 72px; }
}

/* ---- Schaduwloon (Arthur 8/10): Horecast rekent de lonen naast UwPayroll. Telefoon eerst: een
   kaart per persoon met vier posten onder elkaar; breder twee of drie kaarten naast elkaar. De
   band 'Schaduw' bovenaan staat er altijd: dit is geen officiele loonbrief. ---- */
.ls { display: grid; gap: 14px; }
.ls > .card, .ls-vak > .card { margin: 0; }
.ls-vak { display: grid; gap: 14px; }
.ls-banner { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--r-m); padding: 12px 14px;
  background: var(--chrome) repeating-linear-gradient(135deg, rgba(212, 175, 55, .10) 0 10px, transparent 10px 20px); }
.ls-banner p { margin: 0; font-size:var(--t-m); line-height: 1.45; color: var(--on-chrome); }
.ls-banner b { color: var(--brand-2); }
.ls-stempel { flex: none; font-size:var(--t-xs); font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--p-inkt); background: var(--brand-2); border-radius: 4px; padding: 4px 8px; transform: rotate(-3deg); margin-top: 2px; }
.ls-navkaart .lb-nav { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.ls-navkaart [data-m]:disabled { opacity: .35; }
/* Loonregelwacht (Arthur 27/10): de wekelijkse controle van de loonregels, alleen lezen */
.ls-navkaart[hidden] { display: none; }
.ls > .ls-vak, .ls-vak > .card { min-width: 0; }      /* een brede tabel scrolt in haar kaart, niet de pagina */
.lrw-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lrw-lijst li { line-height: 1.45; overflow-wrap: anywhere; }
.lrw-tabel { overflow-x: auto; max-width: 100%; }
.lrw-bronnen { width: 100%; }
.lrw-bronnen td { vertical-align: top; white-space: nowrap; }
.lrw-bronnen td:first-child { white-space: normal; overflow-wrap: anywhere; }
.lrw-diff { white-space: pre-wrap; font-size: var(--t-xs); max-height: 260px; overflow: auto; margin: 6px 0 0; }
.ls-tel { display: flex; flex-wrap: wrap; gap: 6px; }
.ls-tot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.ls-tot > div { display: flex; flex-direction: column; gap: 2px; background: var(--inset); border-radius: var(--r-s); padding: 8px 10px; min-width: 0; }
.ls-tot b { font-size:var(--t-l); font-variant-numeric: tabular-nums; color: var(--text-strong); }
.ls-tot .t-label { font-size:var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ls-in { display: grid; gap: 6px; }
.ls-in p { margin: 0; font-size:var(--t-s); line-height: 1.45; }
.ls-inmsg:empty { display: none; }
.ls-lijst { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.ls-pers { margin: 0; border-top: 3px solid var(--line-strong); min-width: 0; }
.ls-pers.ls-klopt { border-top-color: var(--ok); }
.ls-pers.ls-verschil { border-top-color: var(--err); }
.ls-wie { display: flex; align-items: center; gap: 10px; }
.ls-wie > div { flex: 1; min-width: 0; }
.ls-wie h3 { margin: 0; font-family: var(--f2-serif); font-size:var(--t-base); font-weight: 600; color: var(--text-strong); }
.ls-wie small { display: block; }
.ls-stand { flex: none; }
.ls-afw { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.ls-pers .note { margin: 8px 0 0; }
.ls-tab { width: 100%; border-collapse: collapse; margin-top: 10px; font-size:var(--t-m); table-layout: fixed; }
.ls-tab th, .ls-tab td { padding: 6px 4px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.ls-tab th:first-child { width: 24%; }
.ls-tab thead th:nth-child(2) { width: 26%; }
.ls-tab thead th:nth-child(3) { width: 29%; }
.ls-tab .r { text-align: right; font-variant-numeric: tabular-nums; }
.ls-tab thead th { font-size:var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.ls-tab thead small { display: block; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.ls-tab tbody th { font-weight: 600; color: var(--text-strong); }
.ls-tab .chip { font-size:var(--t-xs); white-space: nowrap; padding-left: 6px; padding-right: 6px; }
.ls-tab .chip .ic { width: 14px; height: 14px; vertical-align: -2px; }
.ls-uw { width: 100%; max-width: 13ch; min-height: 38px; padding: 4px 6px; font-size:var(--t-s); text-align: right; font-variant-numeric: tabular-nums; }
.ls-meer summary { cursor: pointer; margin-top: 8px; font-size:var(--t-s); color: var(--brand-ink); }
.ls-meer ul { margin: 6px 0 0; padding-left: 18px; font-size:var(--t-s); line-height: 1.45; }
.ls-pdf { margin-top: 8px; }
.ls-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ls-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 8px; }
.ls-form [hidden] { display: none !important; }
.ls-form .xl-veld { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 0; }
.ls-form .xl-veld > span { font-size:var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.ls-form input:not([type=checkbox]), .ls-form select { width: 100%; min-height: 44px; }
.ls-attest { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.ls-attest input { width: 20px; height: 20px; }
.ls-form button[type=submit] { min-height: 44px; }
.ls-fmsg:empty { display: none; }
.ls-vlijst, .ls-dag ul, .ls-som { list-style: none; margin: 8px 0 0; padding: 0; }
.ls-vlijst li, .ls-dag li { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ls-vlijst li > span:last-child { display: flex; gap: 6px; }
.ls-dag h4, .ls-afwlijst > h4 { margin: 14px 0 0; font-size:var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.ls-som li { padding: 4px 0; font-size:var(--t-m); }
.ls-voorstel .ls-alle { margin-top: 4px; }
.ls-beslag { margin: 8px 0 0; font-size:var(--t-s); }
.ls-beslag b { color: var(--text-strong); font-variant-numeric: tabular-nums; }
.ls-inst { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.ls-inst summary { cursor: pointer; font-size:var(--t-s); font-weight: 600; color: var(--brand-ink); min-height: 32px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ls-instform { display: grid; gap: 10px; margin-top: 6px; }
.ls-instform fieldset { border: 1px solid var(--line); border-radius: var(--r-s); padding: 8px 10px 10px; margin: 0; display: grid; gap: 8px; min-width: 0; }
.ls-instform legend { padding: 0 4px; font-size:var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.ls-instform p { margin: 0; font-size:var(--t-xs); line-height: 1.4; }
.ls-instform .xl-veld { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 0; }
.ls-instform .xl-veld > span { font-size:var(--t-xs); color: var(--text-2); }
.ls-instform input:not([type=checkbox]), .ls-instform select { width: 100%; min-height: 40px; }
.ls-vink { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size:var(--t-m); }
.ls-vink input { width: 20px; height: 20px; flex: none; }
.ls-instform button[type=submit] { justify-self: start; min-height: 42px; }
.ls-imsg:empty { display: none; }
@media (min-width: 760px) {
  .ls-tot { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ls-form { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: end; }
}
@media (min-width: 980px) { .ls-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1360px) { .ls-lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ================= Personeelsplanner: dagkleur met verschil, en Barts eigen oordeel (Arthur 8/10) ================= */
/* De B: Barts oordeel, niet de rekensom van het model. Inkt op crème, overal even groot. */
.pl-b { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 5px;
  background: var(--chrome); color: var(--on-chrome); font: 800 var(--t-xs)/1 var(--font); letter-spacing: 0; margin: 0 4px 0 0; vertical-align: 1px; }
.pl-stip { display: inline-block; flex: none; width: 11px; height: 11px; border-radius: 50%; }
/* een kleine afwijking: lichte tint met een rand in de volle kleur (ook op vandaag) */
.pl-maand .cal-cell.licht, .cal-cell.licht { box-shadow: inset 0 0 0 2px var(--pl-rand); }
.pl-maand .cal-cell.licht.vandaag, .cal-cell.licht.vandaag { box-shadow: inset 0 0 0 2px var(--pl-rand), 0 0 0 2px var(--bg), 0 0 0 4px var(--text-strong); }
.cal-cell .ks .pl-b { margin-right: 3px; }
.cal-cell.licht .ks .pl-b, .cal-cell .ks .pl-b { box-shadow: 0 0 0 1px rgba(251, 248, 234, .5); }
.wkg-bal.licht { box-shadow: inset 0 0 0 1.5px var(--pl-rand); height: 6px; }

/* de dagstatus in de dagkop van het weekrooster: stip + verschil, een tik opent het oordeelmenu */
.wk-tbl thead th button.wk-st { display: flex; width: max-content; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 5px; max-width: 100%;
  margin: 4px auto 0; min-height: 28px; padding: 3px 8px; line-height: 1.2;
  border: 1px solid var(--line-strong); border-radius: 14px; background: var(--raised); color: var(--text-strong);
  font-size:var(--t-xs); font-weight: 700; letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer; }
.wk-tbl thead th button.wk-st small { font-size:var(--t-xs); font-weight: 600; color: var(--text-2); }
.wk-tbl thead th button.wk-st:hover { border-color: var(--text-strong); }
.wk-tbl thead th button.wk-st.st-geen { color: var(--text-2); font-weight: 600; border-style: dashed; }
.wk-tbl thead th button.wk-st.st-geen svg.ic { width: 14px; height: 14px; }
.wk-tbl thead th button.wk-st .pl-b { margin: 0; }

/* telefoon: het percentage onder het verschil, de B linksboven */
.wkg-pct { font-size:var(--t-xs); font-weight: 600; color: var(--text-3); white-space: nowrap; }
.wkg-dag.sel .wkg-pct { color: var(--on-chrome-2); }
.wkg-b { position: absolute; top: -7px; left: -5px; min-width: 16px; height: 16px; border-radius: 5px; display: grid; place-items: center;
  font-size:var(--t-xs); font-weight: 800; line-height: 1; background: var(--chrome); color: var(--on-chrome); box-shadow: 0 0 0 2px var(--surface); }
.wkg-dmeta button.wkg-ob { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px; border: 1px solid transparent;
  border-radius: 999px; font: inherit; font-size:var(--t-s); font-weight: 600; cursor: pointer; text-align: left; }
.wkg-dmeta button.wkg-ob svg.ic { width: 16px; height: 16px; opacity: .8; }
.wkg-dmeta button.wkg-ob.idle { background: var(--surface-3); color: var(--text-2); }
.wkg-ob-not { margin: -6px 0 12px; font-size:var(--t-s); color: var(--text-2); font-style: italic; }

/* bovenaan het dagscherm (en de terugblik): de kleur, het verschil met het model, Barts oordeel */
.pl-oordeel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 18px;
  background: var(--surface-3); border: 1px solid color-mix(in srgb, var(--text-strong) 7%, transparent); color: var(--text-strong); }
.pl-oordeel > .pl-stip { width: 14px; height: 14px; }
.pl-oordeel .pl-ob-t { flex: 1 1 260px; min-width: 0; display: grid; gap: 2px; line-height: 1.35; }
.pl-oordeel .pl-ob-t .t-meta { color: var(--text-2); }
.pl-oordeel .pl-ob-n { font-style: italic; color: var(--text-zacht); }
.pl-oordeel .pl-ob-afw { color: var(--text-strong); white-space: nowrap; }
.pl-oordeel button.pl-ob-knop { min-height: 44px; border-radius: 999px; padding: 6px 14px; border: 1px solid var(--line-strong); background: var(--raised); }
.pl-oordeel.bart { box-shadow: inset 0 0 0 1.5px var(--text-strong); }

/* het oordeelmenu */
.pl-ob-dlg .pl-ob-keuze { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 12px; }
.pl-ob-dlg .pl-ob-keuze button { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 64px; padding: 8px 6px;
  border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--raised); color: var(--text-strong); font-weight: 700; font-size:var(--t-m); }
.pl-ob-dlg .pl-ob-keuze button svg.ic { width: 20px; height: 20px; }
.pl-ob-dlg .pl-ob-keuze button.ob-goed svg.ic { color: var(--ok-ink); }
.pl-ob-dlg .pl-ob-keuze button.ob-weinig svg.ic { color: var(--err-ink); }
.pl-ob-dlg .pl-ob-keuze button.ob-veel svg.ic { color: var(--brand-ink); }
.pl-ob-dlg .pl-ob-keuze button.on { background: var(--sel-bg); border-color: var(--sel-bg); color: var(--sel-fg); }
.pl-ob-dlg .pl-ob-keuze button.on svg.ic { color: var(--brand-2); }
.pl-ob-dlg label { display: grid; gap: 4px; margin: 0 0 12px; font-size:var(--t-s); font-weight: 600; color: var(--text-2); }
.pl-ob-dlg label[hidden] { display: none; }
.pl-ob-dlg .pl-ob-stap { display: inline-grid; grid-template-columns: 44px 64px 44px; gap: 6px; align-items: center; }
.pl-ob-dlg .pl-ob-stap button { min-height: 44px; font-size:var(--t-xl); font-weight: 700; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--raised); }
.pl-ob-dlg .pl-ob-stap input { min-height: 44px; text-align: center; font-size:var(--t-base); font-weight: 700; }
.pl-ob-dlg .pl-ob-not input { min-height: 44px; width: 100%; font-size:var(--t-base); }
.pl-ob-dlg .pl-dlg-knoppen button { min-height: 44px; }
@media (max-width: 480px) {
  .pl-ob-dlg .pl-dlg-knoppen { flex-direction: column-reverse; align-items: stretch; }
  .pl-ob-dlg .pl-dlg-knoppen .spacer { display: none; }
}
/* Inplannen vanuit het weekrooster (Bart 12/10): per blok start, einde en afdeling op een regel,
   op de telefoon onder elkaar; de knoppen minstens 44 px hoog */
.pl-cv-dlg { width: min(520px, 100%); }
.pl-cv-av { margin: 0 0 10px; padding: 6px 10px; border-radius: 8px; font-size:var(--t-m); background: var(--pl-geen, var(--surface-3)); }
.pl-cv-av.ja { background: var(--blad-tint-2); }
.pl-cv-av.nee { background: var(--rood-tint-2); }
.pl-cv-lijst { display: grid; gap: 8px; margin-bottom: 8px; }
.pl-cv-blok { display: grid; grid-template-columns: 1fr 1fr 1.3fr auto; gap: 8px; align-items: end; margin: 0; padding: 8px 10px 10px; border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.pl-cv-blok.oud { grid-template-columns: 1fr 1fr auto; }
.pl-cv-blok legend { padding: 0 4px; font-size:var(--t-xs); font-weight: 600; color: var(--text-2, inherit); }
.pl-cv-blok label { display: grid; gap: 3px; font-size:var(--t-s); font-weight: 600; min-width: 0; }
.pl-cv-blok input, .pl-cv-blok select { min-height: 40px; width: 100%; min-width: 0; font-size:var(--t-base); }
.pl-cv-blok button { min-height: 40px; }
/* de uurvelden zijn met de pijltjes te bedienen (Bart 19/10): op de pc zie je waar je staat */
.pl-cv-blok .pl-uurveld:focus-visible { outline: 2px solid var(--f2-brass-deep); outline-offset: 1px; }
.pl-cv-blok.weg { opacity: .65; }
.pl-cv-blok.weg legend { text-decoration: line-through; }
.pl-cv-blok.keuze { display: flex; flex-direction: column; gap: 2px; }
.pl-cv-plus { margin-bottom: 8px; }
.pl-cv-msg { min-height: 1.2em; margin-bottom: 6px; color: var(--err-ink); }
.pl-cv-dlg .pl-dlg-knoppen button { min-height: 44px; }
@media (max-width: 480px) {
  .pl-cv-blok, .pl-cv-blok.oud { grid-template-columns: 1fr 1fr; }
  .pl-cv-blok .pl-cv-post { grid-column: 1 / -1; }
  .pl-cv-blok .pl-cv-weg, .pl-cv-blok .pl-cv-del { grid-column: 1 / -1; justify-self: start; }
  .pl-cv-dlg .pl-dlg-knoppen { flex-direction: column-reverse; align-items: stretch; }
  .pl-cv-dlg .pl-dlg-knoppen .spacer { display: none; }
}
/* Meerdere dagen (Arthur 21/10): een maandkalender in het venster; een getikte dag is messing,
   een vak zegt in een woord wat er die dag al is (de uren op het rooster, nee, kan) */
.pl-cv-meer { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 6px; cursor: pointer; }
.pl-cv-meer input { width: 20px; height: 20px; }
.pl-mk { border: 1px solid var(--line); border-radius: 10px; padding: 8px; margin-bottom: 8px; }
.pl-mk-kop { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.pl-mk-kop b { text-transform: capitalize; }
.pl-mk-kop button { min-width: 44px; min-height: 40px; }
.pl-mk-wd, .pl-mk-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.pl-mk-wd span { text-align: center; font-size: var(--t-xs); color: var(--text-3); }
.pl-mk-dag { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-height: 46px; padding: 2px 1px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; min-width: 0; }
.pl-mk-dag b { font-size: var(--t-m); line-height: 1.1; }
.pl-mk-dag small { font-size: var(--t-xs); line-height: 1.1; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pl-mk-dag.ja { background: var(--blad-tint-2); }
.pl-mk-dag.nee { background: var(--rood-tint-2); }
.pl-mk-dag.heeft { background: var(--warn-bg); }
.pl-mk-dag.eigen { box-shadow: inset 0 0 0 1.5px var(--brand-deep, var(--brand)); }
.pl-mk-dag[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand, var(--p-inkt)); }
.pl-mk-dag[aria-pressed="true"] small { color: inherit; }
.pl-mk-dag:disabled { opacity: .4; cursor: not-allowed; }
.pl-mk-n { margin: 6px 2px 0; }
.pl-cv-klaar { display: flex; gap: 8px; align-items: flex-start; font-weight: 600; margin: 4px 0 12px; }
.pl-cv-klaar svg.ic { width: 20px; height: 20px; flex: none; }

/* ================= Weekrooster: meer ruimte voor de ploeg (Arthur 20/10) =================
   'Zoveel mogelijk van het weekoverzicht zichtbaar': in de weekweergave de volle breedte (geen
   maximum, 16 px rand), de paginakop, de balk en de kop van de kaart op zo weinig mogelijk
   regels, de dagkop op twee lage regels en de rij 'Nog open' zo laag als kan. Alleen vanaf 900 px:
   daaronder staat de week van de telefoon (.wkg), die blijft zoals hij was. */
@media (min-width: 900px) {
  main:has(.wk-kaart) { max-width: none; padding-left: 16px; padding-right: 16px; }
  main:has(.wk-kaart) .page-head { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 14px; margin: 0 0 8px; }
  main:has(.wk-kaart) .page-head::after { display: none; }
  main:has(.wk-kaart) .page-head .bijgewerkt { margin: 0; }
  main:has(.wk-kaart) .page-head .t-sub { margin: 0; }
  main:has(.wk-kaart) #pl-bar { padding-top: 6px; padding-bottom: 6px; }
  .wk-kaart { padding-top: 10px; padding-bottom: 12px; }
  /* titel, pijlen, goedkeuren, beschikbaarheid en de etiketten op één regel */
  .wk-kopregel { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; }
  .wk-kopregel > .ct { margin: 0; }
  .wk-kopregel .wk-acties { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0; flex: 1 1 auto; }
  .wk-kopregel .wk-acties > button { min-height: 36px; padding-top: 2px; padding-bottom: 2px; }
  .wk-kaart > .wk-eigen { display: none; }
  /* de dagkop: naam en datum op één regel, de etiketjes op één regel eronder */
  .wk-tbl thead th { padding: 4px; }
  .wk-tbl thead th.wk-d .wk-chips { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px 4px; margin-top: 2px; }
  .wk-tbl thead th.wk-d .wk-chips > * { margin: 0; }
  .wk-tbl thead th.wk-d button.wk-st { margin: 0; min-height: 24px; padding: 1px 7px; }
  .wk-tbl thead th.wk-d .wk-fd { margin: 0; }
  /* 'Nog open': één lage regel */
  .wk-tbl tr.wk-open-row th.wk-nogopen { padding: 3px 8px; }
  .wk-tbl tr.wk-open-row th.wk-nogopen span, .wk-tbl tr.wk-open-row th.wk-nogopen small { display: inline; }
  .wk-tbl tr.wk-open-row .wk-open { min-height: 26px; padding: 2px 5px; }
  .wk-tbl tr.wk-open-row td.wk-tot { padding-top: 3px; padding-bottom: 3px; }
  .wk-tbl tr.wk-total th, .wk-tbl tr.wk-total td { padding-top: 5px; padding-bottom: 5px; }
}
@media (max-width: 899px) { .wk-etiket { display: none; } }
/* donker thema: het blok in een vak had een witte grond met de lichte tekst van het thema */
[data-theme="dark"] .wk-blk { background: color-mix(in srgb, var(--surface) 92%, transparent); }
.wk-etiket { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 2px 6px 2px 10px; border-radius: 999px;
  background: var(--ok-bg); color: var(--ok-ink); font-size: var(--t-xs); font-weight: 600; white-space: nowrap; }
.wk-etiket svg.ic { width: 14px; height: 14px; fill: currentColor; }
/* de dag in de kop is een knop: hij opent het dagvenster */
.wk-tbl thead th button.wk-dagknop { appearance: none; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer;
  display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 5px; max-width: 100%; min-height: 28px; padding: 2px 6px; border-radius: 8px; }
.wk-tbl thead th button.wk-dagknop:hover { background: var(--surface-3); text-decoration: underline; text-underline-offset: 3px; }
.wk-tbl thead th button.wk-dagknop:focus-visible { outline: 2px solid var(--focus, var(--brand-deep)); outline-offset: 1px; }

/* het dagvenster: wie werkt, wie kan ook, wie gaf niets op (Arthur 20/10) */
.pl-dv-dlg { width: min(640px, 100%); max-height: min(90vh, 90dvh); }
.pl-dv-dlg .dv-nota { margin: 0 0 8px; }
.dv-sec { margin: 10px 0 0; }
.dv-sec h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: var(--t-s); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.dv-n { min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--surface-3); color: var(--text); font-size: var(--t-xs); letter-spacing: 0; text-align: center; }
details.dv-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; min-height: 36px; }
details.dv-sec > summary::-webkit-details-marker { display: none; }
details.dv-sec > summary::before { content: "›"; font-weight: 700; color: var(--text-2); transition: transform .15s; }
details.dv-sec[open] > summary::before { transform: rotate(90deg); }
details.dv-sec > summary h3 { margin: 0; }
.dv-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dv-lijst + .dv-lijst { margin-top: 4px; }
.dv-p { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); }
.dv-p.dv-werkt { background: var(--raised); }
.dv-p.dv-ja { background: var(--ok-bg); border-color: transparent; }
.dv-p.dv-nee { background: var(--err-bg); border-color: transparent; }
.dv-p.dv-ob { background: var(--warn-bg); border-color: transparent; }
.dv-wie { display: grid; min-width: 0; }
.dv-wie b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-wie small { color: var(--text-2); font-size: var(--t-xs); line-height: 1.25; }
.dv-wat { font-size: var(--t-s); font-variant-numeric: tabular-nums; color: var(--text); }
.dv-p button, .dv-p select { min-height: 36px; white-space: nowrap; }
.dv-p select { max-width: 220px; }
.dv-leeg { margin: 0; }
.pl-dv-dlg .pl-dlg-knoppen { margin-top: 12px; }
.pl-dv-dlg .pl-dlg-knoppen button { min-height: 44px; }
/* op de telefoon (Arthur 20/10): per dag een brede knop naar het dagvenster, en het venster als
   blad onderaan het scherm: de lijst scrolt, Sluiten en Open de dag blijven onderaan staan */
.wkg-dagvenster { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 52px; margin: 0 0 12px;
  padding: 6px 10px 6px 12px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); color: var(--text-strong); font: inherit; text-align: left; cursor: pointer; }
.wkg-dagvenster > span { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wkg-dagvenster > span > span { display: grid; min-width: 0; }
.wkg-dagvenster b { font-weight: 700; }
.wkg-dagvenster small { color: var(--text-2); font-size: var(--t-xs); line-height: 1.3; }
.wkg-dagvenster svg.ic { flex: none; width: 22px; height: 22px; fill: currentColor; color: var(--text-2); }
.wkg-dagvenster:hover, .wkg-dagvenster:active { border-color: var(--text-strong); }
@media (max-width: 560px) {
  .pl-ov:has(> .pl-dv-dlg) { align-items: flex-end; padding: 0; }
  .pl-dv-dlg { width: 100%; max-height: 92dvh; border-radius: 18px 18px 0 0; padding: 16px 14px 0; overscroll-behavior: contain; }
  .pl-dv-dlg .pl-dlg-knoppen { position: sticky; bottom: 0; z-index: 1; flex-wrap: nowrap; margin: 12px -14px 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--line); }
  .pl-dv-dlg .pl-dlg-knoppen button { flex: 1 1 0; justify-content: center; }
  .pl-dv-dlg .pl-dlg-knoppen .spacer { display: none; }
  .dv-p { grid-template-columns: minmax(0, 1fr) auto; }
  .dv-p button { min-height: 44px; }
  .dv-p .dv-wat { grid-column: 1; grid-row: 2; }
  .dv-p > button, .dv-p > select { grid-column: 2; grid-row: 1 / span 2; }
  .dv-p select { max-width: 150px; }
}

/* ---- Documenten om te tekenen (Arthur 8/10): de verwerkersovereenkomst op de telefoon ----
   Bart tekent op zijn telefoon: een kolom, de tekst leesbaar zoals een brief (Fraunces voor
   de koppen), daaronder het tekenvlak van de contracten. Op de pc blijft de tekst smal. */
.tk { max-width: 760px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.tk > .card { margin: 0; min-width: 0; }
.tk .pills a { padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; text-decoration: none; color: var(--text-2); }
.tk .pills a.on { border-color: var(--brand); color: var(--brand-ink); font-weight: 600; }
.tk-eyebrow { font-size:var(--t-xs); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--brand-ink); }
.tk-titel { font-family: var(--f2-serif); font-weight: 600; font-size:var(--t-2xl); line-height: 1.2; margin: 4px 0 10px; color: var(--text-strong); }
.tk-kop .note { margin: 0 0 10px; }
.tk-kop .note svg.ic { width: 16px; height: 16px; vertical-align: -3px; }
.tk-klaar { border-left-color: var(--ok) !important; }
.tk-spring { white-space: nowrap; font-weight: 600; }
.tk-stand { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tk-partij { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--bg); line-height: 1.4; }
.tk-partij small { color: var(--text-3); }
.tk-bol { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; margin-top: 1px;
  border: 2px dashed var(--line-strong); }
.tk-partij.ok .tk-bol { border: 0; background: var(--ok); color: var(--wit); }
.tk-bol svg.ic { width: 15px; height: 15px; fill: currentColor; }
.tk-wacht { color: var(--err-ink); font-weight: 600; }
.tk-pdfs { display: grid; gap: 8px; margin-top: 12px; }
.tk-pdf { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-s); background: var(--chrome-3); color: var(--on-chrome); text-decoration: none; min-height: 48px; }
.tk-pdf span { flex: 1; display: grid; }
.tk-pdf small { color: var(--on-chrome-2); }
.tk-pdf svg.ic { width: 20px; height: 20px; fill: var(--brand); flex: none; }
/* de tekst zelf, met de opmaak van docs/juridisch/stijl.css vertaald naar het scherm */
.tk-tekst { font-size:var(--t-base); line-height: 1.55; color: var(--text-strong); overflow-wrap: break-word; }
.tk-tekst h1 { font-family: var(--f2-serif); font-size:var(--t-2xl); font-weight: 600; margin: 0 0 4px; }
.tk-tekst h2 { font-size:var(--t-base); margin: 22px 0 6px; padding-bottom: 3px; border-bottom: 1px solid var(--line-strong); }
.tk-tekst p { margin: 0 0 8px; }
.tk-tekst ol, .tk-tekst ul { margin: 0 0 8px; padding-left: 1.3rem; }
.tk-tekst li { margin-bottom: 5px; }
.tk-tekst .sub { color: var(--text-3); margin-bottom: 14px; }
.tk-tekst table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size:var(--t-m); }
.tk-tekst th, .tk-tekst td { border: 1px solid var(--line-strong); padding: 6px 8px; vertical-align: top; text-align: left;
  white-space: normal; overflow-wrap: break-word; }
.tk-tekst th { background: var(--surface-2); }
.tk-tekst .tk-paren th { width: 30%; }
.tk-tekst .lijn { display: inline-block; min-width: 9em; border-bottom: 1px solid var(--text-strong); }
.tk-tekst .lijn.tk-ingevuld { min-width: 0; border-bottom: 0; background: var(--surface-4); padding: 0 4px; border-radius: 4px; font-weight: 600; }
.tk-tekst .handtekening { display: none; }      /* het tekenen gebeurt hieronder */
.tk-teken h3 { font-family: var(--f2-serif); font-weight: 600; margin: 0 0 10px; }
.tk-teken .xl-veld { display: grid; gap: 4px; margin-bottom: 10px; }
.tk-teken .xl-veld input { font-size:var(--t-base); min-height: 44px; }
.tk-plaats { display: grid; gap: 2px; margin-bottom: 12px; }
.tk-plaats span { font-size:var(--t-m); color: var(--text-2); }
.tk-akkoord { display: flex; margin: 0 0 12px; font-size:var(--t-ml) !important; color: var(--text-strong) !important; }
.tk-teken .tv-doek { height: 190px; }
.tk-go { width: 100%; min-height: 50px; margin-top: 12px; font-size:var(--t-base); display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.tk-go svg.ic { width: 18px; height: 18px; fill: currentColor; }
.tk-msg { min-height: 1.3em; margin-top: 8px; }
.tk-msg.err { color: var(--err-ink); font-weight: 600; }
.tk-uitleg { margin: 10px 0 0; font-size:var(--t-s); }
@media (max-width: 600px) {
  .tk-titel { font-size:var(--t-xl); }
  .tk-tekst { padding: 16px 14px; font-size:var(--t-base); }
  /* tabellen op de telefoon: elke rij een blok, de kop boven de inhoud */
  .tk-tekst table, .tk-tekst tbody, .tk-tekst tr, .tk-tekst th, .tk-tekst td { display: block; width: auto !important; }
  .tk-tekst thead { display: none; }
  .tk-tekst tr { border: 1px solid var(--line-strong); border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
  .tk-tekst th, .tk-tekst td { border: 0; }
  .tk-tekst .tk-kolommen td { border-top: 1px solid var(--line); }
  .tk-tekst .tk-kolommen td:first-child { border-top: 0; font-weight: 600; background: var(--surface-2); }
  .tk-tekst .tk-kolommen td:not(:first-child)::before { content: attr(data-kop) ": "; color: var(--text-3); font-size:var(--t-s); }
}

/* de privacyverklaring voor het personeel (Arthur 8/10): zelfde lezing als bij Documenten (.tk-tekst) */
.pv-telling p { margin: 4px 0 0; }
.pv-gelezen .note { margin: 0; }
.pv-ok { border-left-color: var(--ok) !important; }
.pv-gelezen .note svg.ic { width: 16px; height: 16px; vertical-align: -3px; }
.pv-vraag { margin: 0 0 10px; }
.pv-go { width: 100%; min-height: 50px; font-size:var(--t-base); display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pv-go svg.ic { width: 18px; height: 18px; fill: currentColor; }
.pv-msg { min-height: 1.3em; margin-top: 8px; }
.pv-msg.err { color: var(--err-ink); font-weight: 600; }
.tk-tekst .klein { font-size:var(--t-m); color: var(--text-3); }
.mg-privacylink { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 12px; font-size:var(--t-ml); }
.mg-privacylink svg.ic { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.mg-privacylink a, .acc-privacy a { font-weight: 600; color: var(--brand-ink); text-decoration-color: var(--brand); }
.acc-privacy { display: flex; gap: 6px; align-items: flex-start; margin: 14px 0 0; }
.acc-privacy svg.ic { width: 16px; height: 16px; flex: none; margin-top: 2px; }
/* de link onderaan de zijbalk: onder de naam en Log uit */
.sidenav .navfoot { flex-wrap: wrap; }
.sidenav .navfoot #privacylink { flex-basis: 100%; color: var(--on-chrome-2); font-size:var(--t-s); text-decoration: underline; text-underline-offset: 2px; padding: 4px 0; }
.sidenav .navfoot #privacylink:hover { color: var(--on-chrome); }
.sidenav .navfoot #privacylink[hidden] { display: none; }

/* de kaart op Start als er iets te tekenen is */
.f2-teken { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--text-strong);
  border-left: 5px solid var(--err) !important; padding: 14px 16px; }
.f2-teken-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--chrome-3); }
.f2-teken-ic svg.ic { width: 20px; height: 20px; fill: var(--brand); }
.f2-teken-tekst { display: grid; gap: 2px; min-width: 0; }
.f2-teken .f2-eyebrow { color: var(--err-ink); padding-right: 0; font-size:var(--t-xs); }
.f2-teken b { font-family: var(--f2-serif); font-weight: 600; font-size:var(--t-l); line-height: 1.25; }
.f2-teken small { color: var(--text-2); }
@media (hover: hover) { .f2-teken:hover .f2-naar { transform: translateX(3px); background: var(--brand); } }

/* ---- Overstap: te doen (Arthur 8/10): de open punten om INDII en UwPayroll te vervangen ---- */
.ov { display: grid; gap: 14px; }
.ov-intro p { margin: 0 0 10px; color: var(--text); }
.ov .pills button { min-height: 44px; padding: 6px 14px; }
.ov .pills button.on { background: var(--sel-bg); border-color: var(--sel-bg); color: var(--sel-fg); font-weight: 600; }   /* 17,5:1 */
.ov-kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 4px; }
.ov-kop h2 { margin: 0; font-size:var(--t-xl); }
.ov-ik { font-family: inherit; font-size:var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--p-inkt); background: var(--brand); border-radius: 999px; padding: 2px 8px; vertical-align: 3px; }
.ov-tel { display: flex; gap: 12px; font-size:var(--t-m); color: var(--text-2); }
.ov-tel b { color: var(--text-strong); }
.ov-groep { margin: 14px 0 6px; font-size:var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.ov-leeg { margin: 10px 0 0; }
.ov-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ov-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 12px; background: var(--surface);
  border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--r-m); }
.ov-item.st-wacht { border-left-color: var(--p-olijf); }
.ov-item.st-klaar { border-left-color: var(--ok); background: var(--bg); }
.ov-item.st-doorlopend { border-left-color: var(--line-strong); }
.ov-vink { width: 44px; height: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; border-radius: 12px;
  border: 2px solid var(--p-olijf); background: var(--surface); }
.ov-vink svg.ic { width: 24px; height: 24px; fill: transparent; }
.ov-vink:hover svg.ic { fill: var(--p-olijf); }
.ov-vink[aria-checked="true"] { background: var(--p-blad-inkt); border-color: var(--ok-ink); }
.ov-vink[aria-checked="true"] svg.ic { fill: var(--on-chrome); }
.ov-main { min-width: 0; display: grid; gap: 6px; }
.ov-titel { display: flex; align-items: baseline; gap: 8px; line-height: 1.3; }
.ov-titel b { color: var(--text-strong); font-size:var(--t-base); overflow-wrap: anywhere; }
.st-klaar .ov-titel b { color: var(--text-2); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.ov-code { flex: none; font-size:var(--t-xs); font-weight: 700; color: var(--brand-ink); background: var(--inset); border-radius: 6px; padding: 1px 6px; }
.ov-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size:var(--t-m); }
.ov-meta small { color: var(--text-3); }
.ov-st, .ov-wacht { font-weight: 600; border-radius: 999px; padding: 1px 8px; font-size:var(--t-xs); }
.ov-st { background: var(--inset); color: var(--text-2); }
.st-open .ov-st, .st-bezig .ov-st { background: var(--surface-3); color: var(--brand-ink); }
.st-klaar .ov-st { background: var(--ok-bg); color: var(--ok-ink); }
.ov-wacht { background: var(--chrome-3); color: var(--on-chrome); }
.ov-uitleg { margin: 0; color: var(--text); font-size:var(--t-ml); overflow-wrap: anywhere; }
.ov-uitleg a, .ov-notities a { color: var(--brand-ink); font-weight: 600; }
.ov-uitleg code, .ov-notities code { font-size: .85em; background: var(--inset); padding: 1px 4px; border-radius: 4px; overflow-wrap: anywhere; }
.ov-notities { list-style: none; margin: 0; padding: 0 0 0 10px; border-left: 3px solid var(--line-strong); display: grid; gap: 6px; }
.ov-notities p { margin: 0; font-size:var(--t-ml); color: var(--text); overflow-wrap: anywhere; }
.ov-notities small { color: var(--text-3); font-size:var(--t-s); }
.ov-wijzig summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-2); }
.ov-wijzig summary svg.ic { width: 16px; height: 16px; fill: currentColor; }
.ov-form { display: grid; gap: 10px; padding: 10px 0 2px; }
.ov-form label { display: grid; gap: 4px; font-size:var(--t-m); color: var(--text-2); font-weight: 600; }
.ov-form label[hidden] { display: none; }
.ov-form select, .ov-form input, .ov-form textarea { width: 100%; min-height: 44px; font-size:var(--t-base); }
.ov-f-go { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ov-f-go svg.ic { width: 18px; height: 18px; fill: currentColor; }
.ov-msg { min-height: 1.2em; }
.ov-msg.err { color: var(--err-ink); font-weight: 600; }
.ov-klaar { margin-top: 14px; }
.ov-klaar > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size:var(--t-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ok-ink); }
@media (min-width: 761px) {
  .ov-form { grid-template-columns: 200px 220px; align-items: end; }
  .ov-form .ov-f-no-l { grid-column: 1 / -1; }
  .ov-f-go { justify-self: start; padding: 0 18px; }
}

.lb-gu .lb-gd { display: block; white-space: nowrap; }

/* ---- Overheid: RSZ, voorheffing, Horecafonds (Arthur/Bart 8/10) ---- */
.ob { display: grid; gap: 14px; }
.ob-vak, .ob-lijst, .ob-docs { display: grid; gap: 12px; }
.ob .card { margin: 0; }
.ob-kop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ob-kop div { display: grid; gap: 2px; min-width: 0; }
.ob-kop b { font-family: var(--f2-serif); font-size:var(--t-xl); color: var(--text-strong); overflow-wrap: anywhere; }
.ob-kop b.ob-rood, .ob-rood { color: var(--err-ink); }
.ob-niet { border: 2px solid var(--err); background: var(--err-bg); }
.ob-niet h3 { color: var(--err-ink); display: flex; gap: 6px; align-items: center; margin: 0 0 6px; }
.ob-niet ul, .ob-info ul, .ob-hist ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 8px; }
.ob-niet li span { color: var(--text); }
.ob-post header, .ob-doc header, .ob-kw header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.ob-post h3, .ob-doc h3, .ob-kw h3 { font-family: var(--f2-serif); font-size:var(--t-l); margin: 0; }
.ob-bedrag { font-family: var(--f2-serif); font-size:var(--t-xl); white-space: nowrap; color: var(--text-strong); }
.ob-te_laat, .ob-te_laat_deels { border-left: 4px solid var(--err); }
.ob-gegevens { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px 16px; margin: 10px 0; }
.ob-gegevens div { min-width: 0; }
.ob-gegevens dt { font-size:var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.ob-gegevens dd { margin: 0; overflow-wrap: anywhere; }
.ob-mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size:var(--t-ml); }
.ob-acties { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ob-tab { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ob-tab th, .ob-tab td { padding: 6px 4px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.ob-tab th { white-space: normal; overflow-wrap: anywhere; background: none; font-weight: 600; }
.ob-tab th small { display: block; font-weight: 400; }
.ob-tab .r { text-align: right; white-space: nowrap; }
.ob-kw header { flex-wrap: wrap; }
.ob-tab tr.ob-tot th, .ob-tab tr.ob-tot td { font-weight: 700; border-top: 2px solid var(--text-zacht); }
.ob-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 10px; }
.ob-form label { display: grid; gap: 4px; font-size:var(--t-m); }
.ob-form button { align-self: end; }
.ob-info li { list-style: none; margin-left: -1.1rem; }
@media (max-width: 640px) {
  .ob-kop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ob-tab { font-size:var(--t-m); }
  .ob-tab td.ob-mono { word-break: break-all; }
}

/* ---- Klokken: planning en de code van Bart (Arthur 9/10) ----
   Op de gsm van het personeel: een weigering in neonrand, het veld voor de code van Bart (zes
   cijfers). Op de tablet: hetzelfde veld onder de foutmelding. In Inlog: Barts code groot, met
   een balk die afloopt tot de volgende code. */
.mk-klok-plaats.mk-klok-nee { display: flex; gap: 8px; align-items: flex-start; background: var(--err-bg); border-color: var(--err); color: var(--err-ink); }
.mk-klok-plaats.mk-klok-nee .ic { flex: none; margin-top: 2px; }
.mk-klok-bart input { width: 7.4em; }
.mk-klok-uitleg { flex-basis: 100%; font-size:var(--t-m); color: var(--text-2); }
.mk-klok-link { margin-top: 8px; padding: 6px 0; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; color: var(--text); background: none; border: 0; }
/* Arthur 9/10 (incident: een tik op mobiele data, niets bewaard): de stand groot bovenaan de kaart.
   Rood zolang er niets bewaard is, groen met het uur zodra de server het registreerde. */
.mk-klok-staat { margin: 10px 0 12px; padding: 14px 16px; border-radius: var(--r-m, 12px); border: 2px solid; line-height: 1.35; }
.mk-klok-staat b { display: block; font-size:var(--t-xl); letter-spacing: .01em; }
.mk-klok-staat span { display: block; margin-top: 4px; font-size:var(--t-ml); }
.mk-klok-staat.nee { background: var(--err-bg); border-color: var(--p-rood-inkt); color: var(--rood-nacht); }
.mk-klok-staat.ja { background: var(--ok-bg); border-color: var(--p-groen-donker); color: var(--groen-nacht); }
.mk-klok-wifi { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; padding: 10px 12px; border-radius: var(--r-s); background: var(--info-bg); border: 1px solid var(--blauw-licht); color: var(--blauw-nacht); font-size:var(--t-ml); line-height: 1.4; }
.mk-klok-wifi .ic { flex: none; margin-top: 2px; width: 16px; height: 16px; fill: currentColor; }
.ws-klok-fout b { display: block; font-size:var(--t-l); }
.ws-klok-bart { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin: 6px 0 10px; }
.ws-klok-bart label { font-weight: 600; flex-basis: 100%; text-align: center; }
.ws-klok-bart input { width: 8em; font: 700 var(--t-2xl) var(--font); letter-spacing: .2em; text-align: center; padding: 8px; border: 2px solid var(--brand-deep); border-radius: var(--r-s); background: var(--raised); }
.ws-klok-bart .btn { min-height: 52px; }
.kl-bart { border-left: 4px solid var(--brand); }
.kl-bart-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 4px 0 10px; }
.kl-bart-code { font-family: var(--f2-serif); font-size: clamp(2.4rem, 11vw, 3.4rem); font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--text-strong); line-height: 1; }
.kl-bart-code span { display: inline-block; width: .35em; }
.kl-bart-tijd { flex: 1 1 180px; display: grid; gap: 6px; font-size:var(--t-m); color: var(--text-2); }
.kl-bart-balk { height: 8px; border-radius: 4px; background: var(--surface-4); overflow: hidden; position: relative; }
.kl-bart-balk::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--deel); background: var(--brand); transition: width 1s linear; }
.kl-bartcode { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size:var(--t-xs); font-weight: 600; color: var(--brand-ink); background: var(--surface-3); border: 1px solid var(--brand); white-space: nowrap; }

/* De statusbalk van een dag in de planner (Arthur 11/10): ingepland met personeel, nog open,
   nodig volgens het model, en wat er nog moet gebeuren. Plakt bovenaan terwijl je door het
   rooster scrolt; draagt de knop om goed te keuren en het oordeel. Op de gsm twee regels. */
.pl-sbalk { position: sticky; top: calc(var(--header-h, 64px) + 6px); z-index: 8; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 4px 14px; padding: 10px 14px 10px 16px; border-radius: 18px; background: var(--surface-3);
  border: 1px solid color-mix(in srgb, var(--text-strong) 10%, transparent); border-left: 5px solid var(--pl-grijs, var(--creme-mat)); color: var(--text-strong);
  box-shadow: 0 8px 20px -14px rgba(21, 18, 14, .45); }
.pl-sbalk.st-rood { border-left-color: var(--pl-rood, var(--p-baksteen)); }
.pl-sbalk.st-geel { border-left-color: var(--pl-geel, var(--warn)); }
.pl-sbalk.st-groen { border-left-color: var(--pl-groen, var(--ok)); }
.pl-sbalk.bart { box-shadow: inset 0 0 0 1.5px var(--text-strong), 0 8px 20px -14px rgba(21, 18, 14, .45); }
.pl-sbalk > .pl-stip { width: 14px; height: 14px; }
.pl-sb-t { min-width: 0; display: grid; gap: 2px; line-height: 1.3; }
.pl-sbalk button.pl-sb-kop { display: block; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font: inherit; font-size:var(--t-base); font-weight: 700; text-align: left; color: var(--text-strong); cursor: default; }
.pl-sbalk.st-rood .pl-sb-kop { color: var(--err-ink); }
.pl-sbalk.st-geel .pl-sb-kop { color: var(--brand-ink); }
.pl-sbalk.st-groen .pl-sb-kop { color: var(--ok-ink); }
.pl-sb-kop small { font-size: .8em; font-weight: 600; color: var(--text-2); }
.pl-sb-b { margin-left: 6px; font-size:var(--t-s); font-weight: 600; color: var(--text-2); }
.pl-sb-cijfers { display: flex; flex-wrap: wrap; gap: 0 16px; font-size:var(--t-m); }
.pl-sb-cijfers span { white-space: nowrap; }
.pl-sb-cijfers i { font-style: normal; color: var(--text-2); }
.pl-sb-open b { color: var(--err-ink); }
.pl-sb-zones { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 3px; font-size:var(--t-xs); }
.pl-sb-z { padding: 1px 9px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line); white-space: nowrap; }
.pl-sb-z.minder { border-color: rgba(176, 65, 62, .5); }
.pl-sb-z.meer { border-color: rgba(201, 168, 69, .8); }
.pl-sb-z em { font-style: normal; font-weight: 600; color: var(--err-ink); }
.pl-sb-zones > i { font-style: normal; color: var(--text-2); align-self: center; }
/* voorstellen van de planner: wie thuis kan blijven of korter, of waar een open blok bij moet */
.pl-sb-vs { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.pl-sb-vs li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 4px 4px 4px 10px; border-radius: 12px;
  background: var(--raised); border: 1px dashed var(--line-strong); font-size:var(--t-s); }
.pl-sb-vs-t { flex: 1 1 260px; min-width: 0; }
.pl-sb-vs-k { display: flex; gap: 6px; }
.pl-sbalk .pl-sb-vs button { min-height: 34px; padding: 2px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--raised); font-size:var(--t-s); white-space: nowrap; }
.pl-sbalk .pl-sb-vs button.pl-sb-vs-ok { background: var(--sel-bg); border-color: var(--sel-bg); color: var(--sel-fg); }
.pl-sb-k { display: flex; align-items: center; gap: 8px; }
.pl-sbalk .pl-sb-k button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 14px; border-radius: 999px; white-space: nowrap; }
.pl-sbalk .pl-sb-k button.pl-sb-ob { border: 1px solid var(--line-strong); background: var(--raised); color: var(--text-strong); }
.pl-sb-kort { display: none; }
.pl-sb-notitie { margin: -6px 4px 0; font-size:var(--t-m); font-style: italic; color: var(--text-zacht); }
.wkg-sbalk { top: calc(var(--header-h, 64px) + var(--wkg-strip-h, 86px)); z-index: 3; margin: 0 0 12px; }
@media (max-width: 760px) {
  .pl-sbalk { top: calc(var(--header-h, 64px) + 4px); grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "stip kop ob" "cijf cijf goed" "zones zones zones" "vs vs vs"; gap: 4px 10px; padding: 8px 10px 8px 12px; border-radius: 14px; }
  .wkg-sbalk { top: calc(var(--header-h, 64px) + var(--wkg-strip-h, 86px)); }
  .pl-sb-t, .pl-sb-k { display: contents; }
  .pl-sbalk > .pl-stip { grid-area: stip; }
  .pl-sbalk button.pl-sb-kop { grid-area: kop; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:var(--t-base); cursor: pointer; }
  .pl-sb-kop small { display: none; }
  .pl-sbalk button.pl-sb-kop::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px; border: solid currentColor;
    border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: .6; }
  .pl-sbalk.meer button.pl-sb-kop::after { transform: rotate(-135deg); margin-bottom: 0; }
  .pl-sb-cijfers { grid-area: cijf; gap: 0 10px; font-size:var(--t-s); }
  .pl-sb-zones { grid-area: zones; display: none; margin-top: 0; }
  .pl-sbalk.meer .pl-sb-zones { display: flex; }
  .pl-sb-vs { grid-area: vs; margin: 0; }
  .pl-sbalk:not(.meer) .pl-sb-vs li + li { display: none; }
  .pl-sb-vs li { font-size:var(--t-s); padding: 4px 4px 4px 8px; }
  .pl-sb-vs-t { flex-basis: 100%; }
  .pl-sb-vs-k { margin-left: auto; }
  .pl-sbalk .pl-sb-k button.pl-sb-ob { grid-area: ob; width: 38px; min-height: 38px; height: 38px; padding: 0; }
  .pl-sbalk .pl-sb-k button.pl-sb-goed { grid-area: goed; min-height: 40px; padding: 4px 12px; }
  .pl-sb-lang { display: none; }
  .pl-sb-kort { display: inline; }
}

/* ---- fase 2 UX (14/10) ------------------------------------------------------------------- */
/* Start: "Vandaag te doen", een regel per soort met het aantal en een klik naar de tab */
.f2-todo { padding: 14px 16px; }
.f2-todo-kop { margin: 0 0 8px; font-family: var(--f2-serif); font-weight: 600; font-size:var(--t-l); color: var(--text-strong); }
.f2-todo-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.f2-todo-rij { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 8px; border-radius: 10px; text-decoration: none; color: var(--text-strong); }
.f2-todo-rij:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 2px; }
.f2-todo-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--err-bg); }
.f2-todo-ic svg.ic { width: 18px; height: 18px; fill: var(--err-ink); }
.f2-todo-tekst { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.f2-todo-leeg { margin: 0; color: var(--ok-ink); font-weight: 600; }
@media (hover: hover) {
  .f2-todo-rij:hover { background: rgba(212, 175, 55, .12); }
  .f2-todo-rij:hover .f2-naar { transform: translateX(3px); background: var(--brand); }
}
/* een tab die niet laadt: gewone taal en een knop om opnieuw te proberen */
.laadfout p { margin: 0 0 14px; color: var(--text-strong); font-weight: 600; }
.laadfout-opnieuw { display: inline-flex; align-items: center; gap: 6px; }
/* de ⓘ is met het toetsenbord te bereiken: een zichtbare focus */
.theo-tip:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 2px; border-radius: 50%; }
/* telefoonbalk van het personeel: het cijfer op Meldingen */
.plus-tabbar a { position: relative; }
.plus-tab-n { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--err); color: var(--p-inkt); font-size:var(--t-xs); font-weight: 700; line-height: 18px; text-align: center; }
.plus-tab-n[hidden] { display: none; }

/* ---- Het Orakel (Arthur 16/10, assets/js/orakel.js): de ronde knop met de kristallen bol, net boven
   de '+' rechtsonder (zelfde familie: inkt met goud), en het venster 'Vraag het Orakel'. Staat de '+'
   er niet (personeel zonder open vraag, tablet), dan neemt de bol zijn plaats in. Altijd binnen de
   veilige zone (iPhone: de balk onderaan, de inkeping), en onderaan de pagina extra ruimte zodat de
   knoppen nooit de laatste regel bedekken. */
.ok-fab { position: fixed; z-index: 70; right: calc(22px + env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom));
  width: 58px; height: 58px; border-radius: 50%; padding: 0; min-height: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--chrome); color: var(--brand); border: 1px solid rgba(212, 175, 55, .5); box-shadow: 0 14px 30px -12px rgba(21, 18, 14, .7); }
.ok-fab svg.ic { width: 30px; height: 30px; fill: none; }
.ok-fab:hover { background: var(--chrome-3); color: var(--brand-2); border-color: var(--brand); }
.ok-fab:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 3px; }
body:has(#tk-fab:not([hidden])) .ok-fab { bottom: calc(22px + 58px + 12px + env(safe-area-inset-bottom)); }
body.ok-aan main { padding-bottom: 170px; }
@media (max-width: 760px) {
  .ok-fab { width: 50px; height: 50px; right: calc(16px + env(safe-area-inset-right)); }
  .ok-fab svg.ic { width: 26px; height: 26px; }
  body:has(#tk-fab:not([hidden])) .ok-fab { right: calc(26px + env(safe-area-inset-right)); bottom: calc(22px + 58px + 10px + env(safe-area-inset-bottom)); }
  body.plus-has-tabbar .ok-fab { bottom: calc(84px + env(safe-area-inset-bottom)); }
  body.plus-has-tabbar:has(#tk-fab:not([hidden])) .ok-fab { bottom: calc(84px + 58px + 10px + env(safe-area-inset-bottom)); }
  body:has(#pl-bar):has(#tk-fab:not([hidden])) .ok-fab { right: calc(11px + env(safe-area-inset-right)); bottom: calc(14px + 48px + 10px + env(safe-area-inset-bottom)); }
  body.ok-aan main { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
  body.ok-aan.plus-has-tabbar main { padding-bottom: calc(220px + env(safe-area-inset-bottom)); }
}

.ok-overlay { position: fixed; inset: 0; z-index: 80; background: color-mix(in srgb, var(--p-inkt) 35%, transparent); display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 16px calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) 16px; }
.ok-sheet { width: min(440px, 100%); max-height: min(640px, calc(100dvh - 32px)); display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg); border: 1px solid rgba(212, 175, 55, .45); border-radius: 18px; box-shadow: 0 24px 60px -20px rgba(21, 18, 14, .6); }
.ok-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 12px 16px; background: var(--chrome); color: var(--on-chrome); }
.ok-head h2 { margin: 0; font-family: var(--f2-serif); font-size:var(--t-l); font-weight: 600; color: var(--on-chrome); display: flex; align-items: center; gap: 8px; }
.ok-head h2 svg.ic { width: 22px; height: 22px; fill: none; color: var(--brand); }
.ok-head .quiet { color: var(--on-chrome); border-color: rgba(251, 248, 234, .3); background: transparent; min-height: 40px; }
.ok-head .quiet:hover { color: var(--brand-2); border-color: var(--brand); }
.ok-log { flex: 1 1 auto; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 10px; min-height: 120px; overscroll-behavior: contain; }
.ok-bericht { max-width: 92%; padding: 10px 12px; border-radius: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.ok-ik { align-self: flex-end; background: var(--chrome); color: var(--on-chrome); border-bottom-right-radius: 4px; }
.ok-orakel { align-self: flex-start; background: var(--surface-3); color: var(--text-strong); border: 1px solid var(--line-2); border-bottom-left-radius: 4px; }
.ok-intro { color: var(--text-2); }
.ok-fout { border-color: rgba(176, 58, 46, .45); }
.ok-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ok-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; text-decoration: none;
  background: var(--chrome); color: var(--brand-2); border: 1px solid var(--chrome); font-weight: 600; }
.ok-link:hover { background: var(--chrome-3); color: var(--brand-2); }
.ok-link svg.ic { width: 18px; height: 18px; }
.ok-ticket { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ok-ticket-knop { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border-radius: 999px; border: 1.5px solid var(--text-strong); background: var(--bg); color: var(--text-strong); font-weight: 600; }
.ok-ticket-ok { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-2); }
.ok-ticket-err:empty { display: none; }
.ok-denkt { display: inline-flex; gap: 5px; padding: 4px 2px; }
.ok-denkt i { width: 7px; height: 7px; border-radius: 50%; background: var(--p-olijf); animation: ok-denkt 1s infinite ease-in-out; }
.ok-denkt i:nth-child(2) { animation-delay: .15s; }
.ok-denkt i:nth-child(3) { animation-delay: .3s; }
@keyframes ok-denkt { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ok-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 14px 4px; border-top: 1px solid var(--line-2); }
.ok-form textarea { flex: 1; min-width: 0; resize: none; min-height: 48px; max-height: 140px; font-size:var(--t-base); border-radius: 12px; }
.ok-form .primary { min-height: 48px; padding: 0 18px; border-radius: 999px; }
.ok-voet { margin: 0; padding: 4px 14px 12px; font-size:var(--t-xs); color: var(--text-2); }
.ok-voet a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* spreken (16/10): een grote microfoonknop boven het tekstvak; rood met een stopblokje tijdens de opname */
.ok-spraak { display: flex; align-items: center; gap: 12px; padding: 10px 14px 0; border-top: 1px solid var(--line-2); }
.ok-spraak + .ok-form { border-top: 0; }
.ok-mic { flex: none; width: 64px; height: 64px; border-radius: 50%; padding: 0; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: var(--chrome); color: var(--brand-2); border: 2px solid var(--brand); font-size:var(--t-xs); font-weight: 700; letter-spacing: .02em;
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; cursor: pointer; }
.ok-mic svg.ic { width: 28px; height: 28px; fill: none; }
.ok-mic:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 3px; }
.ok-neemt-op .ok-mic { background: var(--p-baksteen); border-color: var(--p-rood-nacht); color: var(--wit); box-shadow: 0 0 0 0 rgba(176, 58, 46, .5); animation: ok-puls 1.4s infinite; }
@keyframes ok-puls { 0% { box-shadow: 0 0 0 0 rgba(176, 58, 46, .5); } 70% { box-shadow: 0 0 0 12px rgba(176, 58, 46, 0); } 100% { box-shadow: 0 0 0 0 rgba(176, 58, 46, 0); } }
.ok-spraak-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size:var(--t-m); line-height: 1.35; color: var(--text); }
.ok-spraak-staat b { color: var(--text-strong); }
.ok-tijd { font-variant-numeric: tabular-nums; margin-right: 4px; }
.ok-rec { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--p-baksteen); margin-right: 6px; vertical-align: 0; animation: ok-knipper 1s infinite; }
@keyframes ok-knipper { 50% { opacity: .25; } }
.ok-spraak-fout { color: var(--rood-nacht); font-weight: 600; }
.ok-meteen { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size:var(--t-s); color: var(--text-2); cursor: pointer; }
.ok-meteen input { width: 18px; height: 18px; margin: 0; }
.ok-luid { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--text-2); border: 1.5px solid var(--line-2); }
.ok-luid svg.ic { width: 22px; height: 22px; fill: none; }
.ok-luid[aria-pressed="true"] { background: var(--chrome); color: var(--brand-2); border-color: var(--brand); }
.ok-spraak-hint { flex: 1; margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size:var(--t-m); line-height: 1.4; color: var(--text-2); }
.ok-spraak-hint svg.ic { flex: none; width: 20px; height: 20px; fill: none; margin-top: 1px; }
.ok-form textarea.ok-live { border-color: var(--p-baksteen); box-shadow: 0 0 0 2px rgba(176, 58, 46, .15); }
.ok-sheet .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 760px) {
  /* telefoon: een blad van onderen, over de volle breedte */
  .ok-overlay { padding: 0; align-items: stretch; flex-direction: column; justify-content: flex-end; }
  .ok-sheet { width: 100%; max-height: calc(100dvh - 48px - env(safe-area-inset-top)); border-radius: 18px 18px 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom); }
  .ok-bericht { max-width: 96%; }
}
@media (prefers-reduced-motion: reduce) { .ok-denkt i, .ok-neemt-op .ok-mic, .ok-rec { animation: none; opacity: .6; } .ok-neemt-op .ok-mic { opacity: 1; } }
/* Klok > Dag: loonkost nu (idee Arthur 16/10). Een geel accent als de omzet achterloopt; het % in baksteen
   boven het doel. Het voorstel is een gewone lijst: Bart beslist. */
.kl-lk { border-left: 4px solid var(--brand); }
.kl-lk.kl-lk-onder { border-left-color: var(--messing); }
.kl-lk-rij { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: .6rem; }
.kl-lk-rij .tile .d .up { color: var(--ok); }
.kl-lk-rij .tile .d .down { color: var(--err-ink); }
.kl-lk-boven .v { color: var(--err-ink); }
.kl-lk-voorstel { margin: .9rem 0 0; }
.kl-lk-voorstel ul { margin: .4rem 0; padding-left: 1.2em; line-height: 1.5; }
.kl-lk-voet { margin: .7rem 0 0; }
/* Ploeg: de jaargrens (plafondwachter, 16/10) */
.plg-plafond { margin-top: .9rem; }
.plg-plafond .plg-plafond-voorstel { margin: .3rem 0 0; }
   Ontworpen voor de gsm (personeel, 390 px) en de tablet: grote raakvlakken, een kolom. */
.wk, .hc { display: grid; gap: 12px; min-width: 0; }
.wk .card, .hc .card { min-width: 0; }
.wk h2, .hc h2 { margin: 0 0 .5rem; font-size:var(--t-l); }
.wk-zoek { display: grid; gap: 10px; }
.wk-q { width: 100%; min-height: 44px; font-size:var(--t-base); box-sizing: border-box; }
.wk-posten { display: flex; flex-wrap: wrap; gap: 6px; }
.wk-pf { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); }
.wk-pf.on { background: rgba(212, 175, 55, .28); color: var(--brand-ink); font-weight: 600; border-color: var(--brand-deep); }
.wk-beheer { display: flex; flex-wrap: wrap; gap: 8px; }
.wk-groepkop { margin: .4rem 2px .3rem; font-size:var(--t-s); text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.wk-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wk-item { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; text-align: left; min-height: 56px; cursor: pointer; border: 1px solid var(--line); }
.wk-item-t { font-weight: 600; color: var(--text); }
.wk-item-s { grid-column: 1; }
.wk-item .chip { grid-column: 2; grid-row: 1 / span 2; }
.wk-concept-k { color: var(--brand-ink-2); }
.wk-concept { margin: .4rem 0; padding: 8px 10px; border-radius: var(--r-s); background: var(--warn-bg); color: var(--brand-ink); display: flex; gap: 6px; align-items: flex-start; }
.wk-concept .ic { flex: none; width: 18px; height: 18px; fill: currentColor; }
.wk-afval-nu { display: flex; gap: 8px; align-items: center; text-decoration: none; color: var(--text); border-left: 4px solid var(--brand); }
.wk-afval-nu .ic { width: 20px; height: 20px; flex: none; fill: var(--brand-deep); }
.wk-terug { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; color: var(--text-2); text-decoration: none; }
.wk-kaartkop h2 { margin-bottom: .2rem; }
.wk-video { margin: .4rem 0; }
.wk-res img, .wk-staptekst img { display: block; max-width: 100%; max-height: 60vh; border-radius: var(--r-s); margin-top: 6px; }
.wk-res { margin: .6rem 0; }
.wk-ing { margin: .6rem 0; padding: 8px 12px; background: var(--surface-3); border-radius: var(--r-s); }
.wk-ing h3 { margin: 0 0 .3rem; font-size:var(--t-base); }
.wk-ing ul { margin: 0; padding-left: 1.1em; line-height: 1.6; }
.wk-vinkkop { display: grid; gap: 8px; margin: .6rem 0 .2rem; }
.wk-wie { display: grid; gap: 4px; font-weight: 600; }
.wk-wie select { min-height: 44px; font-size:var(--t-base); }
.wk-stappen { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: 8px; }
.wk-stap { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px; border-radius: var(--r-s); background: var(--surface); border: 1px solid var(--line); }
.wk-stap.af { background: var(--ok-bg); }
.wk-stap.af .wk-staptekst p { color: var(--text-2); }
.wk-nr { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); font-weight: 700; color: var(--text-2); margin: 2px auto 0; }
.wk-vink { display: grid; place-items: center; min-height: 44px; cursor: pointer; }
.wk-vink input { width: 26px; height: 26px; }
.wk-staptekst p { margin: .3rem 0; line-height: 1.45; overflow-wrap: anywhere; }
.wk-wie-t { display: block; }
.wk-edit .wk-veld, .wk-afval .wk-veld { display: grid; gap: 4px; margin: 0 0 10px; border: 0; padding: 0; min-width: 0; }
.wk-edit input[type=text], .wk-edit input[type=url], .wk-edit select, .wk-edit textarea, .wk-afval textarea { width: 100%; min-height: 44px; font-size:var(--t-base); box-sizing: border-box; }
.wk-postkeuze, .wk-wd, .hc-i-dicht { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.wk-postkeuze label, .wk-wd label, .hc-i-dicht label { display: inline-flex; gap: 4px; align-items: center; min-height: 36px; }
.wk-check { display: flex; gap: 8px; align-items: center; min-height: 40px; }
.wk-estappen { margin: 0; padding-left: 1.4em; display: grid; gap: 12px; }
.wk-estap textarea { width: 100%; box-sizing: border-box; font-size:var(--t-base); }
.wk-estap-k { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.wk-estap-k .btn { min-height: 40px; min-width: 40px; }
.wk-fknop { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
.wk-mini { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; }
.wk-knoppen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wk-knoppen .err { flex-basis: 100%; margin: 0; }
.wk-afvallijst, .wk-komend { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: 8px; }
.wk-afvallijst li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 8px; background: var(--surface-3); border-radius: var(--r-s); }
.wk-afvallijst .btn { min-height: 44px; }
.wk-fractie { border: 1px solid var(--line); border-radius: var(--r-s); padding: 8px 10px; margin: 0 0 10px; min-width: 0; }
.wk-f-uur { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wk-f-uur input, .wk-f-uur select { min-height: 40px; }
/* HACCP */
.hc-kop { display: grid; gap: 8px; }
.hc-dagen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hc-dagen input { min-height: 40px; }
.hc-koelingen, .hc-taken, .hc-llijst, .hc-ilijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hc-k { display: grid; gap: 6px; padding: 8px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface); }
.hc-k.ok { background: var(--ok-bg); }
.hc-k.buiten { background: var(--err-bg); border-color: var(--p-rood-inkt); }
.hc-k-naam { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.hc-k-in { display: flex; gap: 8px; }
.hc-waarde { width: 7.5em; min-height: 44px; font-size:var(--t-l); text-align: right; }
.hc-k-in .btn { min-height: 44px; }
.hc-actie { display: grid; gap: 4px; font-weight: 600; color: var(--err-ink); }
.hc-actie[hidden] { display: none; }
.hc-actie input { min-height: 44px; font-size:var(--t-base); width: 100%; box-sizing: border-box; }
.hc-sub { margin: .8rem 0 .4rem; font-size:var(--t-base); }
.hc-taak { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; cursor: pointer; }
.hc-taak input { width: 24px; height: 24px; flex: none; margin-top: 2px; }
.hc-taak .t-meta { display: block; }
.hc-lform { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); align-items: end; }
.hc-lform label { display: grid; gap: 4px; }
.hc-lform input { min-height: 44px; width: 100%; box-sizing: border-box; }
.hc-llijst { margin-top: .6rem; }
.hc-periode { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hc-tegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hc-rood { color: var(--err-ink); }
.hc-tabel { border-collapse: collapse; width: 100%; font-size:var(--t-m); }
.hc-tabel th, .hc-tabel td { border-bottom: 1px solid var(--line); padding: 5px 8px; text-align: right; white-space: nowrap; }
.hc-tabel th:first-child, .hc-per td { text-align: left; }
.hc-tabel thead th { font-weight: 600; vertical-align: bottom; }
.hc-tabel td.hc-buiten { background: var(--err-bg); color: var(--err-ink); font-weight: 700; }
.hc-tabel td.hc-gat { background: var(--warn-bg); color: var(--brand-ink); }
.hc-tabel tr.hc-dicht { color: var(--text-faint); }
.hc-tabel tr.hc-focus th, .hc-tabel tr.hc-focus td { box-shadow: inset 0 2px 0 var(--brand), inset 0 -2px 0 var(--brand); }
.hc-afw { margin: 0; padding-left: 1.1em; line-height: 1.6; }
.hc-ik, .hc-it { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hc-ik input, .hc-it input, .hc-it select { min-height: 40px; }
.hc-ik-n, .hc-it-n { flex: 1 1 200px; min-width: 0; }
.hc-ik-min, .hc-ik-max { width: 4.5em; }
.hc-blad h1 { font-size:var(--t-2xl); margin: .4rem 0; }
.hc-blad h2 { font-size:var(--t-base); margin: 1rem 0 .4rem; }
@media (max-width: 760px) {
  .hc-tegels { grid-template-columns: 1fr; }
}
@media print {
  body:has(.hc-favv) .sidenav, body:has(.hc-favv) #navopen, body:has(.hc-favv) .topbar, body:has(.hc-favv) .page-head,
  body:has(.hc-favv) .hc-noprint, body:has(.hc-favv) .tk-fab { display: none !important; }
  body:has(.hc-favv) #shell, body:has(.hc-favv) #main { display: block; margin: 0; padding: 0; }
  body:has(.hc-favv) { background: var(--raised); }
  .hc-blad .tbl-x { overflow: visible; }
  .hc-blad .hc-tabel { font-size: 9pt; }
  .hc-blad .hc-tabel tr { break-inside: avoid; }
}
/* Planner: 'Evenementen & feestdagen' (16/10; compact 20/10). Eén regel per gebeurtenis met een balk over
   haar dagen (14 kolommen). Op de gsm staat de naam boven de balk; nooit breder dan het scherm. */
.pl-kal .pk-gantt { display: grid; gap: 2px; min-width: 0; }
.pl-kal .pk-r { display: grid; grid-template-columns: minmax(9rem, 17rem) repeat(var(--pk-n, 14), minmax(0, 1fr));
  align-items: center; column-gap: 2px; min-height: 30px; border-radius: 6px; }
.pl-kal .pk-r:not(.pk-kop):hover { background: var(--surface-3); }
.pl-kal .pk-l { grid-column: 1; grid-row: 1; display: flex; gap: 6px; align-items: center; min-width: 0; padding: 3px 8px 3px 2px; }
.pl-kal .pk-l svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--text-2); }
.pl-kal .pk-l span { display: flex; flex-direction: column; min-width: 0; }
.pl-kal .pk-l b { font-weight: 600; font-size: var(--t-s); color: var(--text-strong); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-kal .pk-l small { font-size: var(--t-xs, .72rem); color: var(--text-2); line-height: 1.2; }
.pl-kal .pk-kop { min-height: 0; position: sticky; top: 0; }
.pl-kal .pk-k { grid-row: 1; text-align: center; font-size: var(--t-xs, .72rem); font-weight: 700; color: var(--text-strong);
  line-height: 1.1; padding: 2px 0 4px; border-radius: 6px; }
.pl-kal .pk-k i { display: block; font-style: normal; font-weight: 500; color: var(--text-2); text-transform: lowercase; }
.pl-kal .pk-k.pk-we { background: var(--surface-3); }
.pl-kal .pk-k.pk-nu { box-shadow: inset 0 -2px 0 var(--p-olijf); }
.pl-kal .pk-bar { grid-row: 1; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--p-olijf) 45%, transparent); }
.pl-kal .pk-bar.pk-open { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.pl-kal .pk-school .pk-bar { background: color-mix(in srgb, var(--text-2) 35%, transparent); }
.pl-kal .pk-buren .pk-bar, .pl-kal .pk-religie .pk-bar { background: color-mix(in srgb, var(--text-2) 22%, transparent); }
.pl-kal .pk-ev .pk-bar { background: color-mix(in srgb, var(--p-olijf) 70%, transparent); }
.pl-kal .pk-sterk .pk-bar { background: var(--p-olijf); height: 12px; }
.pl-kal .pk-leeg { margin: 0; font-size:var(--t-m); color: var(--text-2); }
@media (max-width: 640px) {
  .pl-kal .pk-r { grid-template-columns: 0 repeat(var(--pk-n, 14), minmax(0, 1fr)); column-gap: 1px; padding: 2px 0; }
  .pl-kal .pk-l { grid-column: 1 / -1; padding: 0 2px 2px; }
  .pl-kal .pk-bar { grid-row: 2; height: 8px; }
  .pl-kal .pk-k { font-size: .86em; }
}
/* ---- feedback na de shift (Arthur 16/10) ------------------------------------------------- */
/* de vraag na het uitklokken: tablet, eigen gsm en Mijn rooster (assets/js/shiftfeedback.js) */
.sf { display: grid; gap: 10px; min-width: 0; }
.sf-tablet { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.sf-kop { font-family: var(--f2-serif); font-weight: 600; font-size:var(--t-xl); color: var(--text-strong); }
.sf-sub { color: var(--text-2); font-size:var(--t-ml); }
.sf-smileys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sf-smiley { display: grid; justify-items: center; gap: 4px; min-height: 88px; padding: 10px 4px; border-radius: 14px;
  border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--text-strong); font-size:var(--t-ml); font-weight: 600; cursor: pointer; }
.sf-smiley:hover:not(:disabled) { background: var(--surface-3); }
.sf-smiley:focus-visible, .sf-tag:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 2px; }
.sf-emo { font-size:var(--t-4xl); line-height: 1; }
.sf-tablet .sf-smiley { min-height: 120px; font-size:var(--t-l); }
.sf-tablet .sf-emo { font-size:var(--t-4xl); }
.sf-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-tag { min-height: 40px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-strong); cursor: pointer; }
.sf-tag[aria-pressed="true"] { background: var(--sel-bg); border-color: var(--sel-bg); color: var(--sel-fg); }
.sf-tekst-l { font-weight: 600; color: var(--text-strong); }
.sf-tekst { width: 100%; min-height: 64px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-strong); font: inherit; background: var(--raised); color: var(--text-strong); resize: vertical; }
.sf-anoniem { display: flex; gap: 8px; align-items: flex-start; font-size:var(--t-ml); color: var(--text-strong); }
.sf-anoniem input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; }
.sf-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-knoppen button { min-height: 44px; }
.sf-fout:empty { display: none; }
.sf-fout { color: var(--err-ink); font-weight: 600; }
.sf-wie { margin: 0; font-size:var(--t-s); line-height: 1.4; color: var(--text-2); }

/* het overzicht voor Bart (Klok > Feedback) */
.sf-weken { margin: 0 0 12px; }
.sf-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 8px; font-size:var(--t-m); color: var(--text-2); }
.sf-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.sf-rij { display: grid; grid-template-columns: minmax(64px, 7.5em) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 0; }
.sf-rij-l { font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.sf-rij-l small, .sf-rij-c small { display: block; font-weight: 400; font-size:var(--t-xs); color: var(--text-2); }
.sf-rij-c { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-strong); }
.sf-balk { display: flex; gap: 2px; height: 14px; min-width: 0; }
.sf-balk.leeg { border-bottom: 1px dashed var(--line-strong); height: 8px; }
.sf-balk i, .sf-legende i, .sf-verloop i { display: block; }
.sf-balk i { height: 100%; border-radius: 4px; min-width: 4px; }
.sf-balk i.g, .sf-legende i.g, .sf-verloop i.g { background: var(--p-blad-mid); }
.sf-balk i.m, .sf-legende i.m, .sf-verloop i.m { background: var(--p-lijn-sterk); }
.sf-balk i.s, .sf-legende i.s, .sf-verloop i.s { background: var(--p-baksteen); }
.sf-rooster td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sf-rooster td small { color: var(--text-2); }
.sf-rooster td.g { background: var(--ok-bg); }
.sf-rooster td.s { background: var(--err-bg); }
.sf-labels { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-label { padding: 4px 10px; border-radius: 999px; background: var(--surface-3); color: var(--text-strong); }
.sf-label.leeg { opacity: .6; }
.sf-signaal { border-left: 4px solid var(--err); background: var(--err-bg); }
.sf-signaal ul { margin: 0; padding-left: 18px; color: var(--text-strong); }
.sf-signaal li { margin: 4px 0; }
.sf-reeks { white-space: nowrap; }
.sf-personen { display: grid; gap: 6px; }
.sf-persoon { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); }
.sf-persoon.let-op { border-color: var(--err); background: var(--err-bg); }
.sf-persoon-n { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; min-width: 0; }
.sf-persoon-n span { color: var(--text-2); font-size:var(--t-m); }
.sf-verloop { grid-column: 1 / -1; display: flex; gap: 3px; }
.sf-verloop i { width: 14px; height: 14px; border-radius: 50%; }
.sf-verloop i.x { background: transparent; border: 1px dashed var(--line-strong); }
.sf-persoon .sf-reeks { grid-row: 1; grid-column: 2; }
.sf-teksten { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sf-teksten li { display: flex; gap: 10px; align-items: flex-start; }
.sf-teksten .sf-emo { font-size:var(--t-2xl); }
.sf-teksten p { margin: 0 0 2px; color: var(--text-strong); overflow-wrap: anywhere; }
.sf-teksten small { color: var(--text-2); }
.sf-voet { margin: 4px 0 0; }
/* ================= Werkkaarten en HACCP (Arthur 16/10) ==========
/* meer dan een loonlijn per persoon (Bart 4/11) */
.lb-eindlijn { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.lb-eindlijn + .lb-eindlijn { margin-top: 6px; }