/* Corpus als app (ronde 4, *Corpus als app*; de demo app-gevoel-demo.html). Na corpus.css, fabriek.css en telefoon.css.
   Eigen voorvoegsels: dr- (direct opslaan, static/js/direct.js), zk- (Ctrl+K zoeken, static/js/zoeken.js), ov- (omlaag
   trekken om te verversen, static/js/appgevoel.js). De overgang tussen pagina's (View Transitions) staat bewust elders. */

/* --- 9 · Knoppen geven mee: kort indrukken (scale .97, 80 ms), geen grijze tikvlek, knoppen niet selecteren ---------
   :where() houdt de specificiteit op nul: een eigen transition of transform van een element gaat altijd voor, en het
   losse `scale` telt op bij een bestaande transform in plaats van hem te vervangen. */
a, button, summary, label, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:where(.knop, .knop-klein, button, .ob-knop, .hoofdnav a, .filters a, .pl-chip, .pl-teller, .pp-chip, .vr-chip, .ow-chip,
       .zk-knop, .tracker-knop, .sc-blad > summary, .sc-vraag > summary, .sc-afkeuren > summary) {
  -webkit-user-select: none; user-select: none;
}
:where(.knop, .knop-klein, button:not(.link), .ob-knop, .hoofdnav a, .filters a, .pl-chip, .pl-teller, .pp-chip, .vr-chip, .ow-chip,
       .zk-knop, .kaarten > .kaart, .tk-kaart, .ow-kaart, .pl-kaart, .vinkje-knop) {
  transition: scale 80ms ease-out;
}
:where(.knop, .knop-klein, button:not(.link), .ob-knop, .hoofdnav a, .filters a, .pl-chip, .pl-teller, .pp-chip, .vr-chip, .ow-chip,
       .zk-knop, .kaarten > .kaart, .tk-kaart, .ow-kaart, .pl-kaart, .vinkje-knop):active:not(:disabled) {
  scale: .97;
}

/* --- 100dvh waar 100vh op de telefoon springt (de adresbalk), en de randen van het toestel ------------------------- */
.pp-inteplannen { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
body.app.kijkmodus .zijbalk { height: calc(100vh - var(--kijkbalk)); height: calc(100dvh - var(--kijkbalk)); }
@media (max-width: 640px) {
  .sc-blad[open] > .sc-bladform, .sc-afkeuren[open] > .sc-bladform { max-height: 80vh; max-height: 80dvh; }
  html.tel:has(.onderbalk) .sc-blad[open] > .sc-bladform, html.tel:has(.onderbalk) .sc-afkeuren[open] > .sc-bladform {
    max-height: calc(80vh - var(--onderbalk-hoogte)); max-height: calc(80dvh - var(--onderbalk-hoogte));
  }
}
.fb-vraagknop { right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); }

/* --- 3 · Direct opslaan (static/js/direct.js) ------------------------------------------------------------------------ */
.dr-deel { display: contents; }               /* een deel dat direct.js vervangt; geen eigen vak in de opmaak */
.dr-bezig { cursor: progress; }
/* De nieuwe stand meteen, tot de server de echte stand terugstuurt; geen tekst "opslaan" of "opgeslagen" ernaast. */
.sc-punt.dr-ok .sc-okknop { background: #3b7a32; border-color: #3b7a32; color: var(--pagina); }   /* het groen van OK */
.sc-punt.dr-opm .sc-uitkomst { color: var(--let); }
.dr-weg.dr-bezig, .sc-punt.dr-weg .sc-uitkomst { opacity: .45; }
.vinkje.af.dr-bezig .vinkje-vak:empty::after { content: "✓"; }
.vinkje.dr-bezig:not(.af) .vinkje-vak { color: transparent; background: var(--pagina); }
/* De pil onderaan, alleen als iets niet bewaard is: een korte melding, geen balk. Op de telefoon boven de onderbalk. */
.dr-pil {
  position: fixed; left: 50%; bottom: calc(var(--onderbalk-hoogte, 0px) + env(safe-area-inset-bottom) + 20px);
  z-index: 60; max-width: min(520px, calc(100vw - 32px)); padding: 9px 16px; border-radius: 999px;
  background: var(--donker); color: var(--pagina); font-size: 13px; line-height: 1.35; text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18); pointer-events: none; opacity: 0;
  transform: translate(-50%, 12px); transition: opacity .2s, transform .25s cubic-bezier(.3, .7, .2, 1);
}
.dr-pil.dr-pil-aan { opacity: 1; transform: translate(-50%, 0); }
.dr-pil.dr-pil-fout::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 8px 1px 0; border-radius: 50%;
  background: #e07a70; vertical-align: middle;
}

/* --- Live bijwerken (19 okt 2026, static/js/live.js) ------------------------------------------------------------------ */
/* Het pilletje *Bijgewerkt · vernieuwen*: er is iets veranderd terwijl je bezig was. Klein en rustig (geen balk); in de
   kop van een paneel rechts vóór het nummer, elders rechtsboven in het deel. Tikken ververst. */
.live-pil {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border: 0; border-radius: 999px;
  background: var(--donker); color: var(--pagina); font: inherit; font-size: 11px; font-weight: 500; line-height: 1;
  white-space: nowrap; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .14); animation: live-pil-in .25s var(--ag-glad, ease-out);
}
.live-pil::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #8fc79f; }
.live-pil:hover, .live-pil:focus-visible { background: #000; }
.pkop > .live-pil { margin-left: auto; margin-right: 8px; }
:not(.pkop) > .live-pil { position: absolute; top: -11px; right: 12px; z-index: 5; }
/* Op de telefoon (20 okt 2026): boven een heel scherm (Productie, Mijn taken) viel het onder de vaste kopbalk. Daar staat
   het vast onder in het midden, net boven de onderbalk (en boven de knoppenbalk van een stapreeks, html.rk-aan) - bij je
   duim, niet over de titel, en zichtbaar waar je ook gescrold bent. Midden met left/right en margin auto, niet met
   transform: die gebruikt de animatie. */
html.tel :not(.pkop) > .live-pil {
  position: fixed; top: auto; bottom: calc(var(--onderbalk-hoogte) + env(safe-area-inset-bottom, 0px) + 12px);
  left: 0; right: 0; width: max-content; margin: 0 auto; height: 30px; padding: 0 14px; font-size: 12px; z-index: 30;
}
html.tel.rk-aan :not(.pkop) > .live-pil { bottom: calc(var(--onderbalk-hoogte) + 86px + env(safe-area-inset-bottom, 0px) + 12px); }
.zone-waar, #pl-live, #taken-live, #pd-plan { position: relative; }
@keyframes live-pil-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .live-pil { animation: none; } }

/* --- 10 · Ctrl+K zoeken (templates/core/_zoeken.html) ---------------------------------------------------------------- */
.zk-knop {
  display: inline-flex; align-items: center; gap: 8px; min-width: 260px; height: 34px; margin-right: auto; padding: 0 10px;
  border: 1px solid var(--rand); border-radius: 8px; background: var(--pagina); color: var(--zacht); font-size: 12px;
  text-decoration: none; cursor: pointer;
}
.zk-knop:hover { border-color: var(--donker); color: var(--tekst); }
.zk-knop .icoon { width: 16px; height: 16px; flex: none; }
.zk-knop-tekst { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zk-kbd {
  display: inline-block; min-width: 18px; padding: 0 5px; border: 1px solid var(--lijn); border-radius: 4px;
  font: inherit; font-size: 10px; line-height: 16px; text-align: center; color: var(--zacht); background: var(--pagina);
}
html.tel .zk-knop { min-width: 0; width: 36px; height: 36px; margin-right: 0; padding: 0; justify-content: center; border-radius: 50%; }
html.tel .zk-knop .icoon { width: 20px; height: 20px; }
html.tel .zk-knop-tekst, html.tel .zk-knop .zk-kbd { display: none; }
.zk-vak {
  width: min(600px, calc(100vw - 32px)); max-height: min(70vh, 560px); max-height: min(70dvh, 560px); margin: 12vh auto 0;
  padding: 0; border: 0; border-radius: 14px; background: var(--pagina); color: var(--tekst); overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
.zk-vak[open] { display: flex; flex-direction: column; animation: zk-open .18s ease-out; }
.zk-vak::backdrop { background: rgba(23, 28, 34, .3); }
@keyframes zk-open { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.zk-form { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--lijn); }
.zk-icoon { display: grid; color: var(--zacht); }
.zk-icoon .icoon { width: 18px; height: 18px; }
.zk-vak .zk-invoer {
  flex: 1; min-width: 0; padding: 16px 0; border: 0; outline: none; background: none; font: inherit; font-size: 16px;
}
.zk-lijst { flex: 1; overflow-y: auto; padding: 6px 0 8px; }
.zk-groep { margin: 0; padding: 10px 18px 4px; font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); }
.zk-regel {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 18px; color: var(--tekst);
  text-decoration: none; cursor: pointer;
}
.zk-regel:hover, .zk-regel.zk-gekozen { background: var(--vlak); }
.zk-titel { font-weight: 500; white-space: nowrap; }
.zk-sub { min-width: 0; font-size: 12px; color: var(--zacht); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zk-leeg { margin: 0; padding: 14px 18px; font-size: 13px; color: var(--zacht); }
.zk-hulp {
  display: flex; gap: 16px; margin: 0; padding: 8px 18px; border-top: 1px solid var(--lijn); font-size: 11px; color: var(--zacht);
}
.zk-hulp .zk-kbd { margin-right: 2px; }
html.tel .zk-vak { width: calc(100vw - 24px); margin-top: calc(env(safe-area-inset-top) + 10px); max-height: calc(100dvh - 120px); }
html.tel .zk-hulp { display: none; }

/* --- 10b · Zoeken tijdens het typen op de pagina Zoeken (templates/core/search.html, static/js/zoeken.js) --------------- */
.zp-form {
  align-items: center; gap: 8px; padding: 0 10px 0 14px; margin-bottom: 4px; border: 1.5px solid var(--donker);
  border-radius: 12px; background: var(--pagina);
}
.zp-form:focus-within { box-shadow: 0 0 0 3px var(--actief); }
.zp-icoon { display: grid; color: var(--zacht); }
.zp-icoon .icoon { width: 20px; height: 20px; }
.zp-form .zp-invoer {
  flex: 1; min-width: 0; padding: 14px 0; border: 0; border-radius: 0; outline: none; background: none; font: inherit; font-size: 17px;
}
.zp-form .zp-invoer::-webkit-search-cancel-button, .zp-form .zp-invoer::-webkit-search-decoration { display: none; -webkit-appearance: none; }
.zp-form .zp-wis {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--zacht); font: inherit; font-size: 15px; cursor: pointer;
}
.zp-form .zp-wis[hidden] { display: none; }
.zp-form .zp-wis:hover { background: var(--vlak); color: var(--tekst); }
.zp-form .zp-zoek { margin: 5px 0; }
.zp-js .zp-zoek { display: none; }                  /* met JavaScript zoekt het tijdens het typen; Enter geeft de volledige lijst */
.zp-live .zp-vol { display: none; }                 /* de volledige lijst van de server, zolang de resultaten van het veld getoond worden */
.zp-lijst { margin: 8px 0 24px; }
.zp-lijst .zk-groep { padding: 16px 4px 4px; }
.zp-lijst .zk-regel { padding: 11px 4px; border-bottom: 1px solid var(--rand); }
.zp-lijst .zk-regel:hover { background: var(--vlak); }
.zp-lijst .zk-titel { white-space: normal; min-width: 0; overflow-wrap: anywhere; }
.zp-lijst .zk-leeg { padding: 18px 4px; font-size: 14px; }
.zp-lijst mark { padding: 0; border-radius: 3px; background: #f1e7d6; color: inherit; }
.zp-alles {
  display: block; margin: 16px 0 0; padding: 12px; border: 1px solid var(--rand); border-radius: 10px; color: var(--tekst);
  font-size: 13px; text-align: center; text-decoration: none;
}
.zp-alles:hover { border-color: var(--donker); }
/* Op de telefoon: het veld bovenaan, zonder de kop van de pc (voor een schermlezer blijft hij). */
html.tel .zp > h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Telefoontest 19 okt 2026, B3 Zoeken: de resultatentabel van de pc (477 px) stond in een kader van 294-364 px en schoof zijwaarts. Op de telefoon een
   kaart per resultaat: posecode en corpuscode bovenaan, de omschrijving, dan klant en project; de hele kaart is de link. */
html.tel .zp-tabel table, html.tel .zp-tabel tbody { display: block; }
html.tel .zp-tabel thead { display: none; }
html.tel .zp-tabel tr {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 12px; margin: 0 0 8px;
  padding: 10px 12px; border-radius: 10px; background: var(--vlak);
  grid-template-areas: "pose corpus" "naam naam" "klant project";
}
html.tel .zp-tabel tr:last-child { margin-bottom: 0; }
html.tel .zp-tabel td { display: block; min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; }
html.tel .zp-tabel td[colspan] { grid-column: 1 / -1; }
/* De HTML is die van de pc (kolommen op volgorde: posecode, corpuscode, omschrijving, klant, project); de plek op de kaart volgt de kolom. */
html.tel .zp-tabel td:nth-child(1) { grid-area: pose; font-size: 15px; }
html.tel .zp-tabel td:nth-child(1) a::after { content: ""; position: absolute; inset: 0; border-radius: 10px; }
html.tel .zp-tabel td:nth-child(2) { grid-area: corpus; font-size: 12px; color: var(--zacht); text-align: right; }
html.tel .zp-tabel td:nth-child(3) { grid-area: naam; font-size: 13px; }
html.tel .zp-tabel td:nth-child(n+4) { font-size: 12px; color: var(--zacht); }
html.tel .zp-tabel td:nth-child(4) { grid-area: klant; }
html.tel .zp-tabel td:nth-child(5) { grid-area: project; text-align: right; }
html.tel .zp-tabel td:nth-child(n+3):empty { display: none; }
/* Zoeken is een ingang van de onderbalk: geen terugpijltje boven het veld. */
html.tel .page > .kruimelrij.alleen-terug:has(+ .zp) { display: none; }
html.tel .zp-lijst .zk-regel { flex-direction: column; align-items: stretch; gap: 1px; }
html.tel .zp-lijst .zk-sub { text-align: left; white-space: normal; }

/* --- 4 · Omlaag trekken om te verversen (static/js/appgevoel.js), alleen in de telefoonlaag -------------------------- */
html.tel.ov-aan { overscroll-behavior-y: contain; }   /* niet ook nog de eigen verversing van de browser */
.ov-trek {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 58px); z-index: 30; display: grid; place-items: center;
  width: 36px; height: 36px; margin-left: -18px; border-radius: 50%; background: var(--pagina);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .16); opacity: 0; pointer-events: none; transform: translateY(-48px);
}
.ov-trek.ov-terug { transition: transform .2s, opacity .2s; }
.ov-rondje {
  width: 18px; height: 18px; border: 2px solid var(--lijn); border-top-color: var(--donker); border-radius: 50%;
}
.ov-trek.ov-laadt .ov-rondje { animation: ov-draai .7s linear infinite; }
@keyframes ov-draai { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  :where(.knop, .knop-klein, button:not(.link), .ob-knop, .hoofdnav a, .filters a, .pl-chip, .pl-teller, .pp-chip, .vr-chip, .ow-chip,
         .zk-knop, .kaarten > .kaart, .tk-kaart, .ow-kaart, .pl-kaart, .vinkje-knop) { transition: none; }
  :where(.knop, .knop-klein, button:not(.link), .ob-knop, .hoofdnav a, .filters a, .pl-chip, .pl-teller, .pp-chip, .vr-chip, .ow-chip,
         .zk-knop, .kaarten > .kaart, .tk-kaart, .ow-kaart, .pl-kaart, .vinkje-knop):active:not(:disabled) { scale: none; }
  .dr-pil, .ov-trek.ov-terug { transition: none; }
  .zk-vak[open] { animation: none; }
  .ov-trek.ov-laadt .ov-rondje { animation-duration: 2s; }
}