/* De vier namen die ook in styles.css staan (.btn, .pot, .pot--hoog en
   .brd__main) hangen hier onder .pwin. Sinds de demo op de homepage staat
   worden allebei de stylesheets samen geladen, en zonder die scoop nam
   product.css de knoppen en de potentie-labels van de site over.
   .ml-cta .btn hangt er ook onder, anders wint .pwin .btn van hem op
   volgorde in plaats van te verliezen op specificiteit. */

/* ── De productpagina: wat Ajeto is, in één oogopslag ──────── *
   Eén venster, vijf tabs, en in dat venster het echte product,
   nagebouwd uit de componenten in git/Ajeto met de teksten en de
   beweging die daar staan. De zijbalk, de kaarten en het bord komen
   uit styles.css (.brd__*), zodat alles hier één op één matcht met
   het bord op de homepage.                                         */

.ptop {
  padding: calc(var(--bar-h) + clamp(40px, 7vh, 80px)) clamp(20px, 5vw, 64px) clamp(22px, 4vh, 40px);
  text-align: center;
}

.ptop__inner { max-width: 820px; margin: 0 auto; }

.ptop__eyebrow {
  margin: 0 0 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #B26A12;
}

.ptop__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -.032em;
  text-wrap: balance;
}

.ptop__lead {
  margin: 18px auto 0;
  max-width: 54ch;
  font-size: clamp(16px, 1.35vw, 18.5px);
  line-height: 1.55;
  color: rgba(43, 54, 79, .8);
}

/* ── De tabstrook: dezelfde pil als de fasebalk in het product ── *
   stage-jump-bar.tsx: rounded-full, border-line, bg-offwhite/95,
   p-1.5, schaduw ds-sm.                                             */

/* De balk plakt onder de topbalk zolang het scherm in beeld is, zodat je
   kunt bladeren zonder terug te scrollen. De achtergrond is een eigen
   pil achter de balk: op de productpagina staat hij op crème, op de
   homepage schuift het productvenster eronderdoor. */
.ptabs {
  position: sticky;
  top: calc(var(--bar-h, 84px) + 10px);
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 clamp(20px, 5vw, 64px);
}

.ptabs__pijl {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--ajeto-line, #EAE8E2);
  background: rgba(255, 253, 248, .95);
  box-shadow: var(--ajeto-shadow-sm, 0 1px 2px rgba(15, 23, 42, .05));
  cursor: pointer;
}
.ptabs__pijl svg { width: 17px; height: 17px; fill: none; stroke: var(--ajeto-navy, #1E2A45); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ptabs__pijl:hover { border-color: rgba(43, 54, 79, .34); }
.ptabs__pijl[disabled] { opacity: .32; cursor: default; }
.ptabs__pijl:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.ptabs__list {
  display: inline-flex;
  gap: 4px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ajeto-line, #EAE8E2);
  background: rgba(255, 253, 248, .95);
  box-shadow: var(--ajeto-shadow-sm, 0 1px 2px rgba(15, 23, 42, .05));
  max-width: 100%;
  overflow-x: auto;
}

.ptab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(43, 54, 79, .7);
  cursor: pointer;
  white-space: nowrap;
}

.ptab i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ajeto-line-2, #D9D6CE);
}

.ptab:hover { color: var(--ajeto-navy, #1E2A45); }

.ptab[aria-selected="true"] {
  background: var(--ajeto-navy, #1E2A45);
  color: var(--cream);
}

.ptab[aria-selected="true"] i { background: var(--teal); }
.ptab:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Op een smal scherm passen de vier stappen niet naast elkaar. De lijst
   werd een schuifstrook en de actieve stap viel er buiten beeld (Nathan,
   27 oktober). Daar staat alleen de actieve stap, met "2 van 4" erachter,
   zoals het product "fase 1 van 4" zegt; de pijlen bladeren. De knoppen
   verdwijnen, niet de <li>'s: wat display: none heeft, telt niet mee in
   een CSS-teller. */
@media (max-width: 700px) {
  .ptabs { gap: 6px; padding: 0 16px; }
  .ptabs__pijl { width: 36px; height: 36px; }
  /* even breed bij elke stap, anders verspringen de pijlen als je doortikt */
  .ptabs__list { flex: 1 1 auto; max-width: 300px; gap: 0; counter-reset: stap; overflow: visible; }
  .ptabs__list li { counter-increment: stap; display: flex; }
  .ptabs__list li:has(> [aria-selected="true"]) { flex: 1; }
  .ptab { flex: 1; justify-content: center; gap: 7px; padding: 9px 12px; }
  .ptab[aria-selected="false"] { display: none; }
  .ptab[aria-selected="true"]::after { content: counter(stap) " van 4"; font-weight: 500; opacity: .62; }
}

/* ── Het venster ────────────────────────────────────────── */

.pstage {
  padding: clamp(22px, 4vh, 40px) clamp(20px, 5vw, 64px) clamp(60px, 10vh, 110px);
}

.pstage__inner { max-width: 1180px; margin: 0 auto; }

.pscreen[hidden] { display: none; }

.pscreen__say {
  margin: 0 auto 18px;
  max-width: 62ch;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: -.02em;
  color: var(--ajeto-navy, #1E2A45);
}

/* hetzelfde bord als op de homepage, maar hier zonder perspectief en
   met een eigen scherm in het hoofdvlak */
.pwin {
  position: relative;
  container-type: inline-size;
}

.pwin .brd { aspect-ratio: 3456 / 2234; }

/* Waar een scene zijn eerste beweging heeft. De keyframes verderop
   beginnen met een paar stille seconden; product.js zet de scene meteen
   op dit moment zodra je een stap kiest, zodat je niet naar een
   stilstaand beeld kijkt. De looptijd erachter staat er als houvast:
   verander je die in de keyframes, kijk dan of --vanaf nog klopt. */
.pwin            { --vanaf: 0s; }    /* intake, 3s: stapjes vanaf .25 */
.pwin--phone     { --vanaf: 1.4s; }  /* klantuitvraag, 7.7s: tik op 1.7 */
.pwin--schouw    { --vanaf: 1.2s; }  /* schouw, 16s: tik op 1.6 */
.pwin--wvb       { --vanaf: 2s; }    /* werkvoorbereiding, 9s: pakket op 2.5 */
.pwin--home      { --vanaf: .8s; }   /* home, 8.5s: begroeting op 1.2 */

.pwin__cap {
  margin: 12px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--ajeto-muted, #6B7280);
}

.pwin__replay {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 5;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(43, 54, 79, .14);
  background: rgba(255, 253, 248, .92);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: rgba(43, 54, 79, .78);
  cursor: pointer;
}

.pwin__replay:hover { color: var(--ajeto-navy, #1E2A45); }

/* ── Het projectscherm (intake) ─────────────────────────── *
   projects/[projectId]/page.tsx: kruimelpad, adres met potentie,
   de fasebalk, daaronder de woningprofiel-sectie in drie groepen
   van drie kolommen (FieldSection cols={3}), elk veld een
   SectionLabel met de waarde eronder en de herkomst als icoon.    */

.pv { padding: 1.4em 1.8em 1.8em; font-size: 1em; }

.pv__crumb { font-size: .95em; color: rgba(43, 54, 79, .55); margin: 0 0 .6em; }
.pv__crumb b { color: rgba(43, 54, 79, .8); font-weight: 600; }

.pv__head { display: flex; align-items: center; justify-content: space-between; gap: 1em; flex-wrap: wrap; }

.pv__addr {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2em;
  letter-spacing: -.028em;
}

.pv__sub { margin: .15em 0 0; font-size: .98em; color: rgba(43, 54, 79, .62); }

/* de fasebalk: stage-jump-bar.tsx */
.pv__stages {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .35em;
  border-radius: 999px;
  border: 1px solid rgba(43, 54, 79, .12);
  background: rgba(255, 253, 248, .95);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

.pv__stage {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .45em .95em;
  border-radius: 999px;
  font-size: .95em;
  font-weight: 600;
  color: rgba(43, 54, 79, .62);
}

.pv__stage i { width: .55em; height: .55em; border-radius: 50%; background: rgba(43, 54, 79, .18); }
.pv__stage.is-now { background: rgba(43, 54, 79, .06); color: var(--ajeto-navy, #1E2A45); }
.pv__stage.is-now i { background: var(--orange); }
.pv__stage.is-done i { background: var(--teal); }

/* de sectie: fieldgroup.tsx h5 font-display 18px + Badge */
.pv__section { margin-top: 1.5em; }

.pv__sh {
  display: flex;
  align-items: center;
  gap: .7em;
  margin: 0 0 .8em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3em;
  letter-spacing: -.005em;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .2em .6em;
  border-radius: 999px;
  border: 1px solid;
  font-family: var(--font-body);
  font-size: .68em;
  font-weight: 600;
  letter-spacing: .01em;
}

/* badge.tsx: completed en action, letterlijk de kleuren */
.badge--completed { background: #E9F8EC; color: #15803D; border-color: #BDE8C6; }
.badge--action { background: rgba(245, 124, 0, .1); color: #A85800; border-color: rgba(245, 124, 0, .3); }
.badge i { width: .5em; height: .5em; border-radius: 50%; background: currentColor; }

.pwin .pot { display: inline-flex; align-items: center; gap: .4em; padding: .3em .7em; border-radius: 999px; font-size: .9em; font-weight: 600; }
.pwin .pot--hoog { background: rgba(46, 196, 182, .15); color: #12756B; }

/* de groep: FieldSection cols={3} */
.pv__group { margin-top: 1em; }

.pv__gh {
  display: flex;
  align-items: center;
  gap: .6em;
  margin: 0 0 .55em;
  font-size: .95em;
  font-weight: 600;
  color: var(--ajeto-navy, #1E2A45);
}

.pv__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em 1.2em; }

/* één veld: SectionLabel + waarde, herkomst-icoon erachter */
.fld { display: flex; flex-direction: column; gap: .25em; min-width: 0; }

.fld__l {
  font-size: .78em;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(43, 54, 79, .55);
}

.fld__v {
  display: flex;
  align-items: center;
  gap: .5em;
  font-size: 1.02em;
  font-weight: 500;
  color: var(--ajeto-navy, #1E2A45);
}

.fld__v em { font-style: italic; font-weight: 400; color: rgba(43, 54, 79, .5); }

/* herkomst: provenance-icons.tsx — Database (CRM), User (klantuitvraag),
   Binoculars (schouw), Wrench (gebruiker), en ✦ in oranje voor AI */
.prov { display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; flex: 0 0 auto; color: rgba(43, 54, 79, .5); }
.prov svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.prov--crm { color: #3B6FD1; }
.prov--ai { font-family: var(--font-display); font-weight: 900; font-size: 1.05em; color: var(--orange); }

/* de lopende taak: project-progress.tsx, state running */
.pv__task {
  display: flex;
  align-items: center;
  gap: .55em;
  margin-top: 1.4em;
  padding: .8em 1em;
  border-radius: .6em;
  border: 1px solid rgba(46, 196, 182, .45);
  background: #fff;
  font-size: .98em;
  font-weight: 600;
  color: #12756B;
}

.pv__task svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* de ingeklapte secties onder het woningprofiel; het "Niet gestart" is
   de default-state uit project-progress.tsx */
.pv__list { margin-top: 1.3em; border-top: 1px solid rgba(43, 54, 79, .1); }

.pv__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin: 0;
  padding: .85em 0;
  border-bottom: 1px solid rgba(43, 54, 79, .1);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15em;
  letter-spacing: -.005em;
}

.pv__hint { font-family: var(--font-body); font-weight: 500; font-size: .8em; color: rgba(43, 54, 79, .58); }
.badge--muted { background: rgba(43, 54, 79, .06); color: rgba(43, 54, 79, .62); border-color: rgba(43, 54, 79, .12); }

/* ── Beweging: fieldgroup/werkvoorbereiding gebruiken animate-in
   fade-in slide-in-from-bottom-1 duration-300; de spinner is
   Tailwinds animate-spin (1s lineair). In rust staat alles op de
   eindstand; .is-playing draait het af.                            */

@keyframes p-in { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
@keyframes p-spin { to { rotate: 360deg; } }
@keyframes p-pop { 0% { opacity: 0; scale: .8; } 60% { scale: 1.06; } 100% { opacity: 1; scale: 1; } }

#scr-intake .is-playing .fld { animation: p-in .3s ease both; animation-delay: calc(.25s + var(--d, 0) * .14s); }
#scr-intake .is-playing .fld .prov { animation: p-pop .3s ease both; animation-delay: calc(.4s + var(--d, 0) * .14s); }
#scr-intake .is-playing .badge--completed { animation: p-pop .35s ease both 2.6s; }
#scr-intake .is-playing .pv__task svg { animation: p-spin 1s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .is-playing .fld, .is-playing .fld .prov, .is-playing .badge--completed, #scr-intake .is-playing .pv__task svg { animation: none !important; }
}

/* ── Een tab die nog gebouwd wordt ──────────────────────── */

.psoon {
  display: grid;
  place-items: center;
  min-height: 320px;
  border-radius: 1.1em;
  border: 1px dashed var(--ajeto-line-2, #D9D6CE);
  color: rgba(43, 54, 79, .55);
  font-size: 15px;
  text-align: center;
  padding: 24px;
}

.psoon b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--ajeto-navy, #1E2A45); margin-bottom: 6px; }

@media (max-width: 760px) {
  .pv__grid { grid-template-columns: 1fr 1fr; }
  .pv__addr { font-size: 1.5em; }
}

/* ── Het klantportaal (klantuitvraag) ──────────────────────── *
   apps/portal: een telefoon op een rustige grond. Alle maten
   staan in em tegenover de 14px-basis van het portaal, zodat de
   telefoon met het venster meeschaalt (net als het bord). De
   kleuren en radii komen uit apps/portal/app/_tokens.css, de
   regels uit portal.css; alleen ingekort tot wat hier in beeld
   is. Vier schermen liggen op elkaar; in rust staat het laatste. */

.pph {
  --pp-ink: #1E2A45; --pp-ink2: #45464D; --pp-muted: #6B7280;
  --pp-off: #FFFDF8; --pp-paper: #F9F7F2; --pp-line: #EAE8E2; --pp-line2: #D9D6CE;
  --pp-orange: #F57C00; --pp-teal: #2EC4B6;
  --pp-tint-soft: color-mix(in srgb, #F57C00 8%, #FFFDF8);
  --pp-tint: color-mix(in srgb, #F57C00 16%, #FFFDF8);
  --pp-tint-strong: color-mix(in srgb, #F57C00 26%, #FFFDF8);
  --pp-border: color-mix(in srgb, #F57C00 34%, #FFFDF8);
  --pp-brand-ink: color-mix(in srgb, #F57C00 62%, #1E2A45);
  --pp-glow: rgba(245, 124, 0, .18); --pp-glow-soft: rgba(245, 124, 0, .10);
  --pp-run-bg: #EAFAF7; --pp-run-fg: #0C7C6E; --pp-run-bd: #BEEDE5;
  --pp-ok-bg: #E9F8EC; --pp-ok-fg: #15803D; --pp-ok-bd: #BDE8C6;
  --pp-sh-sm: 0 1px 2px rgba(15,23,42,.05);
  --pp-sh-md: 0 2px 8px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --pp-sh-lg: 0 8px 32px rgba(15,23,42,.08);
  aspect-ratio: 3456 / 2234;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(165deg, #F3F0E9, #E9E5DC);
  border: 1px solid rgba(43, 54, 79, .1);
  overflow: hidden;
}

.phone {
  font-size: clamp(7px, 1.02cqw, 14px);
  width: 27.86em;
  height: 57.14em;
  padding: .8em;
  border-radius: 3.4em;
  background: #0F1626;
  box-shadow: 0 34px 60px -24px rgba(15, 23, 42, .5), 0 0 0 1px rgba(255, 255, 255, .08) inset;
}

.phone__scr {
  position: relative;
  height: 100%;
  border-radius: 2.7em;
  overflow: hidden;
  background: var(--pp-paper);
  color: var(--pp-ink);
  font-family: var(--font-body);
  font-size: 1em;
  line-height: 1.5;
}

.phone__scr *, .phone__scr *::before, .phone__scr *::after { box-sizing: border-box; }
.phone__scr svg { flex-shrink: 0; }

.ps { position: absolute; inset: 0; overflow: hidden; opacity: 0; }
.ps--4 { opacity: 1; }

/* instapscherm */
.ml-screen { position: relative; min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 1.71em; background: var(--pp-paper); overflow: hidden; }
.ml-screen::before { content: ""; position: absolute; left: -30%; right: -30%; top: -50%; height: 60%; pointer-events: none;
  background: radial-gradient(ellipse at center, var(--pp-glow-soft) 0%, rgba(255,205,87,.08) 30%, rgba(165,240,224,.06) 60%, transparent 80%); }
.ml-card { position: relative; z-index: 1; width: 100%; text-align: center; background: var(--pp-off); border: 1px solid var(--pp-line); border-radius: 1.43em; box-shadow: var(--pp-sh-lg); padding: 1.71em 1.57em 2em; }
.ml-hero-fallback { width: 100%; aspect-ratio: 16 / 9; border-radius: 1.43em; margin-bottom: 1.57em; display: grid; place-items: center; background: linear-gradient(135deg, var(--pp-tint-soft), var(--pp-tint)); color: var(--pp-brand-ink); box-shadow: var(--pp-sh-sm); }
.ml-mark { width: 3.71em; height: 3.71em; margin: 0 auto 1em; border-radius: .86em; display: grid; place-items: center; background: var(--pp-paper); border: 1px solid var(--pp-line); }
.ml-mark img { width: 2.43em; height: 2.43em; object-fit: contain; }
.ml-card .ov { font-size: .75em; letter-spacing: .14em; text-transform: uppercase; color: var(--pp-muted); font-weight: 700; margin-bottom: .57em; }
.ml-card h2 { font-family: var(--font-display); font-weight: 600; font-size: 2em; line-height: 1.2; letter-spacing: -.015em; color: var(--pp-ink); margin: 0 0 .36em; }
.ml-card .addr { font-size: 1em; color: var(--pp-ink2); margin-bottom: 1.43em; }
.ml-secure { display: inline-flex; align-items: center; gap: .43em; font-size: .82em; color: var(--pp-muted); background: var(--pp-paper); padding: .43em .86em; border-radius: 999px; border: 1px solid var(--pp-line); }
.ml-card .reassure { font-size: .93em; color: var(--pp-muted); margin: 1.29em 0 1.57em; line-height: 1.55; }
.ml-cta { position: relative; display: flex; justify-content: center; margin-bottom: .57em; }
.pwin .ml-cta .btn { padding: .93em 1.57em; font-size: 1em; }
.ml-foot { font-size: .79em; color: var(--pp-muted); margin-top: 1.14em; padding-top: 1em; border-top: 1px solid var(--pp-line); }

.pwin .btn { display: inline-flex; align-items: center; justify-content: center; gap: .43em; font-family: var(--font-body); font-weight: 600; font-size: .93em; padding: .64em 1em; border-radius: .57em; border: 1px solid transparent; line-height: 1; }
.btn-primary { background: var(--pp-orange); color: #fff; }
.btn-ghost { color: var(--pp-ink); border-color: var(--pp-line2); }
.btn-block { width: 100%; }

/* het portaal zelf, mobiele weergave (.sp.is-mobile) */
.sp { position: relative; height: 100%; display: flex; flex-direction: column; background: var(--pp-paper); font-size: 1em; }
.sp::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 37em; pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 30% 0%, rgba(245,124,0,.06), transparent 65%), radial-gradient(ellipse 70% 55% at 90% 10%, rgba(46,196,182,.07), transparent 65%); }
.sp-inner { position: relative; z-index: 1; padding: 0 1.14em 5.71em; display: flex; flex-direction: column; }
.sp-inner > .banner { order: -2; margin-top: 1em; }
.sp-inner > .sp-todo { order: -1; margin-top: 1em; }

.sp-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 1em 1.14em .86em; background: var(--pp-paper); }
.sp-top-brand { display: flex; flex-direction: column; }
.sp-top-brand .inst { font-family: var(--font-display); font-weight: 600; font-size: 1.07em; line-height: 1.1; color: var(--pp-ink); }
.sp-top-brand .powered { display: flex; align-items: center; gap: .29em; font-size: .71em; color: var(--pp-muted); letter-spacing: .04em; margin-top: .14em; }
.sp-top-brand .powered img { width: .79em; height: .79em; border-radius: 2px; object-fit: contain; }
.sp-top-right { display: flex; align-items: center; gap: .57em; }
.lang-switch { display: inline-flex; align-items: center; gap: .14em; padding: .14em; border: 1px solid var(--pp-line); border-radius: 999px; background: var(--pp-off); }
.lang-opt { padding: .29em .64em; border-radius: 999px; font-size: .79em; font-weight: 700; letter-spacing: .04em; color: var(--pp-muted); line-height: 1.3; }
.lang-opt.is-active { background: var(--pp-ink); color: var(--pp-off); }
.sp-bell { position: relative; width: 3em; height: 3em; border-radius: 50%; background: var(--pp-off); border: 1px solid var(--pp-line); color: var(--pp-ink2); display: grid; place-items: center; }
.sp-bell .count { position: absolute; top: -.21em; right: -.21em; min-width: 1.29em; height: 1.29em; padding: 0 .36em; border-radius: 999px; background: var(--pp-orange); color: #fff; font-size: .71em; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--pp-off); line-height: 1; }

.banner { display: flex; align-items: flex-start; gap: .71em; padding: .86em 1em; border-radius: .86em; background: var(--pp-run-bg); color: var(--pp-run-fg); border: 1px solid var(--pp-run-bd); font-size: .89em; line-height: 1.45; }
.banner > div { flex: 1; }
.banner b { font-weight: 700; }
.banner .x { opacity: .6; margin-left: auto; display: grid; }

.sp-todo { background: var(--pp-off); border: 1px solid var(--pp-border); border-radius: 1.14em; padding: 1.43em 1.29em 1.14em; box-shadow: var(--pp-sh-sm); }
.sp-todo-head { margin-bottom: 1.14em; }
.sp-todo-h { font-family: var(--font-display); font-weight: 600; font-size: 1.57em; letter-spacing: -.018em; line-height: 1.15; color: var(--pp-ink); margin: 0; }
.sp-todo-sub { font-size: .93em; color: var(--pp-ink2); margin-top: .43em; line-height: 1.5; }
.sp-todo-clear { border-color: var(--pp-ok-bd); display: flex; align-items: center; gap: 1em; padding: 1.43em 1.57em; }
.sp-todo-clear-ic { width: 3.14em; height: 3.14em; border-radius: 50%; flex-shrink: 0; background: var(--pp-ok-bg); color: var(--pp-ok-fg); display: grid; place-items: center; }
.sp-todo-clear .sp-todo-h { font-size: 1.43em; }

.task-big { position: relative; background: var(--pp-off); border: 1px solid var(--pp-line); border-radius: .86em; padding: 1em; box-shadow: var(--pp-sh-sm); }
.task-big-head { display: flex; align-items: center; gap: .86em; }
.task-big-ic { width: 3.14em; height: 3.14em; border-radius: .57em; background: var(--pp-tint); color: var(--pp-brand-ink); display: grid; place-items: center; flex-shrink: 0; }
.task-big-t { font-family: var(--font-display); font-weight: 600; font-size: 1.11em; letter-spacing: -.005em; line-height: 1.25; color: var(--pp-ink); }
.task-big-s { font-size: .89em; color: var(--pp-muted); margin-top: .21em; line-height: 1.45; }
.task-big-extra { margin-top: 1em; padding-top: .86em; border-top: 1px solid var(--pp-line); }
.task-big-why { font-size: .89em; color: var(--pp-ink2); line-height: 1.55; margin-bottom: .71em; }
.task-big-tips-lbl { font-size: .71em; letter-spacing: .14em; text-transform: uppercase; color: var(--pp-muted); font-weight: 700; margin-bottom: .43em; }
.task-big-tips { margin: 0; padding: 0 0 0 1.29em; font-size: .89em; color: var(--pp-ink2); line-height: 1.6; }
.task-big-tips li { list-style: disc; }
.task-big-tips li::marker { color: var(--pp-orange); }

.sp-hero-wrap { display: grid; gap: 1em; margin-top: 1em; }
.sp-hero { position: relative; overflow: hidden; background: var(--pp-off); border: 1px solid var(--pp-line); border-radius: 1.43em; padding: 1.43em 1.43em 1.57em; box-shadow: var(--pp-sh-sm); }
.sp-hero::after { content: ""; position: absolute; right: -7em; top: -7em; width: 21em; height: 21em; pointer-events: none; background: radial-gradient(circle, rgba(245,124,0,.08), transparent 60%); }
.sp-hero > * { position: relative; z-index: 1; }
.sp-hero-eyebrow { display: flex; align-items: center; gap: .57em; font-size: .75em; letter-spacing: .14em; text-transform: uppercase; color: var(--pp-muted); font-weight: 700; margin-bottom: .43em; }
.sp-hero-eyebrow .ic { display: grid; color: var(--pp-orange); }
.sp-hero h1 { font-family: var(--font-display); font-weight: 600; font-size: 1.86em; letter-spacing: -.018em; line-height: 1.1; color: var(--pp-ink); margin: 0 0 .21em; }
.sp-hero-addr { display: flex; align-items: center; gap: .43em; font-size: .93em; color: var(--pp-ink2); }
.sp-hero-addr .pin { display: inline-grid; color: var(--pp-muted); }
.sp-hero-div { height: 1px; background: var(--pp-line); margin: 1.29em 0; }
.sp-hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1em 1.29em; }
.sp-stat { display: flex; flex-direction: column; gap: .14em; min-width: 0; }
.sp-stat .k { display: flex; align-items: center; gap: .36em; font-size: .75em; letter-spacing: .12em; text-transform: uppercase; color: var(--pp-muted); font-weight: 700; }
.sp-stat .k .ic { display: grid; color: var(--pp-orange); }
.sp-stat .v { font-family: var(--font-display); font-weight: 600; font-size: 1.07em; letter-spacing: -.005em; color: var(--pp-ink); line-height: 1.25; word-break: break-word; }
.sp-products { margin-top: 1.29em; }
.sp-products-lbl { font-size: .75em; letter-spacing: .12em; text-transform: uppercase; color: var(--pp-muted); font-weight: 700; margin-bottom: .57em; }
.sp-prod-row { display: flex; flex-wrap: wrap; gap: .57em; }
.sp-prod { display: inline-flex; align-items: center; gap: .43em; background: var(--pp-paper); border: 1px solid var(--pp-line); padding: .5em .86em .5em .64em; border-radius: 999px; font-size: .89em; font-weight: 600; color: var(--pp-ink2); }
.sp-prod .ic { width: 1.29em; height: 1.29em; border-radius: 50%; display: grid; place-items: center; color: var(--pp-orange); background: var(--pp-tint); }
.sp-prod.teal .ic { background: #C7F0E8; color: #0BA39A; }

.sp-adv { display: flex; align-items: center; background: var(--pp-off); border: 1px solid var(--pp-line); border-radius: 1.43em; padding: 1.14em; box-shadow: var(--pp-sh-sm); }
.sp-adv-av { width: 4em; height: 4em; margin-right: 1em; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: linear-gradient(135deg, var(--pp-tint), var(--pp-tint-strong)); font-family: var(--font-display); font-weight: 600; font-size: 1.29em; color: #7A3B00; border: 3px solid var(--pp-off); box-shadow: 0 0 0 1px var(--pp-line), var(--pp-sh-sm); }
.sp-adv-name { font-family: var(--font-display); font-weight: 600; font-size: 1.07em; letter-spacing: -.005em; color: var(--pp-ink); line-height: 1.2; }
.sp-adv-role { font-size: .82em; color: var(--pp-muted); margin-top: .14em; }
.sp-adv-meta { margin-top: .36em; display: flex; gap: .86em; font-size: .86em; color: var(--pp-ink2); }
.sp-adv-meta span { display: inline-flex; align-items: center; gap: .36em; white-space: nowrap; }

.journey { display: flex; align-items: flex-start; background: var(--pp-off); border: 1px solid var(--pp-line); border-radius: 1.14em; box-shadow: var(--pp-sh-sm); padding: 1em .43em; margin-top: 1em; }
.journey-step { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .57em; min-width: 0; }
.journey-step:not(:last-child)::after { content: ""; position: absolute; top: 1.14em; left: 50%; right: -50%; height: 2px; background: var(--pp-line2); }
.journey-node { position: relative; z-index: 1; width: 2.29em; height: 2.29em; border-radius: 999px; display: grid; place-items: center; font-size: .93em; font-weight: 700; background: var(--pp-paper); border: 2px solid var(--pp-line2); color: var(--pp-muted); }
.journey-step.active .journey-node { background: var(--pp-orange); border-color: var(--pp-orange); color: #fff; box-shadow: 0 0 0 4px var(--pp-glow-soft); }
.journey-label .t { font-size: .89em; font-weight: 600; color: var(--pp-ink); line-height: 1.2; }
.journey-step.upcoming .journey-label .t { color: var(--pp-muted); }
.journey-label .s { display: none; }

.sp-tabbar { display: flex; gap: .29em; padding: .43em; border-radius: 999px; background: rgba(249,247,242,.88); border: 1px solid var(--pp-line); margin: 1.57em 0 1.29em; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.29em, #000 calc(100% - 1.86em), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 1.29em, #000 calc(100% - 1.86em), transparent 100%); }
.sp-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .43em; padding: .64em .79em; border-radius: 999px; color: var(--pp-ink2); font-size: .86em; font-weight: 600; white-space: nowrap; letter-spacing: -.005em; border: 1px solid transparent; }
.sp-tab.on { background: var(--pp-off); color: var(--pp-ink); box-shadow: var(--pp-sh-sm); border-color: var(--pp-line); }
.sp-tab .count-pill { display: inline-grid; place-items: center; min-width: 1.29em; height: 1.29em; padding: 0 .36em; border-radius: 999px; background: var(--pp-orange); color: #fff; font-size: .71em; font-weight: 700; line-height: 1; }
.ps--3 .sp-tabbar { margin-top: .57em; }

.sp-tab-panel { background: var(--pp-off); border: 1px solid var(--pp-line); border-radius: 1.43em; padding: 1.57em; box-shadow: var(--pp-sh-sm); }
.q-progress { background: var(--pp-off); border: 1px solid var(--pp-line); border-radius: .86em; padding: 1em 1.14em; margin-bottom: 1em; box-shadow: var(--pp-sh-sm); }
.q-progress .row { display: flex; align-items: baseline; justify-content: space-between; gap: .71em; margin-bottom: .57em; }
.q-progress .label { font-family: var(--font-display); font-weight: 600; font-size: 1.07em; letter-spacing: -.005em; color: var(--pp-ink); }
.q-progress .meta { font-size: .86em; color: var(--pp-muted); }
.qbar { height: .43em; background: var(--pp-paper); border-radius: 999px; overflow: hidden; }
.qbar > i { display: block; height: 100%; background: var(--pp-teal); border-radius: inherit; }
.q-wizard { background: var(--pp-off); border: 1px solid var(--pp-line2); border-radius: .86em; box-shadow: var(--pp-sh-sm); overflow: hidden; }
.q-wizard-body { padding: 1.71em 1.43em .71em; }
.q-item .q { font-size: 1.21em; line-height: 1.5; font-weight: 600; color: var(--pp-ink); margin-bottom: 1.14em; }
.upload-inline { position: relative; display: flex; align-items: center; gap: .86em; width: 100%; border: 1px solid var(--pp-border); border-radius: .86em; padding: 1.14em; background: var(--pp-tint-soft); box-shadow: var(--pp-sh-sm); font-size: .93em; color: var(--pp-ink2); text-align: left; }
.upload-inline .ic { flex-shrink: 0; width: 2.86em; height: 2.86em; border-radius: .57em; display: grid; place-items: center; background: var(--pp-tint); color: var(--pp-orange); }
.upload-inline .txt { flex: 1; min-width: 0; }
.upload-inline b { display: grid; color: var(--pp-ink); font-weight: 600; font-size: 1.08em; }
.upload-inline b > span, .upload-inline .hint > span { grid-area: 1 / 1; }
.upload-inline .hint { display: grid; font-size: .92em; color: var(--pp-muted); margin-top: .14em; line-height: 1.4; }
.upload-inline .h0 { overflow: hidden; max-height: 0; }
.upload-inline .tail { display: grid; align-items: center; justify-items: end; max-width: 6em; overflow: hidden; }
.upload-inline .tail > * { grid-area: 1 / 1; }
.upload-inline .chev { display: grid; color: var(--pp-muted); }
.q-saved { display: inline-flex; align-items: center; gap: .29em; font-size: .75em; font-weight: 600; color: var(--pp-ok-fg); letter-spacing: .04em; white-space: nowrap; }
.upload-previews { display: flex; gap: .57em; margin-top: .57em; }
.upload-preview { display: block; width: 4.57em; height: 4.57em; border-radius: .57em; overflow: hidden; border: 1px solid var(--pp-line); background: var(--pp-paper); }
.upload-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.q-wizard-nav { display: flex; align-items: center; justify-content: space-between; gap: .86em; padding: 1em 1.14em; border-top: 1px solid var(--pp-line); }
.q-wizard-nav-right { display: flex; align-items: center; gap: .71em; }
.q-wizard-skip { font-size: .89em; font-weight: 500; color: var(--pp-muted); }

/* rusttoestand van het fotoveld: de foto staat erin */
.upload-inline .b1, .upload-inline .h0, .upload-inline .chev { opacity: 0; }
.upload-inline .b0, .upload-inline .h1, .upload-inline .q-saved { opacity: 1; }

/* de tik: een zachte ring op de plek waar de bewoner drukt */
.tap { position: absolute; left: 50%; top: 50%; width: 2.6em; height: 2.6em; margin: -1.3em 0 0 -1.3em; border-radius: 50%; background: rgba(245, 124, 0, .28); box-shadow: 0 0 0 .5em rgba(245, 124, 0, .16); opacity: 0; pointer-events: none; }

/* ── de choreografie: één tijdlijn van 7.7s, alles in procenten ── *
   0–2.1s instap · tik 1.7s · 2.1s naar het overzicht · tik op de
   taak 3.5s · 3.85s vragenlijst · tik 4.9s · uploaden · 5.3s foto
   toegevoegd · 6.4s terug naar het overzicht · 6.9s bijgewerkt.
   Tot 26 oktober was dit 11s; Nathan vond de klantuitvraag te lang en
   wilde hem 30% sneller. De tussenschermen in schermen.css en de
   tijden in schermen.js zijn even hard meegegaan.  */
@keyframes ps1 { 0%, 27.3% { translate: 0 0; opacity: 1; animation-timing-function: ease-in; } 31.4%, 100% { translate: -14% 0; opacity: 0; } }
@keyframes ps2 { 0%, 27.3% { translate: 100% 0; opacity: 0; animation-timing-function: ease-out; } 31.8%, 50% { translate: 0 0; opacity: 1; } 53% , 100% { translate: 0 0; opacity: 0; } }
@keyframes ps3 { 0%, 50% { opacity: 0; } 53%, 83.6% { opacity: 1; } 86.6%, 100% { opacity: 0; } }
@keyframes ps4 { 0%, 83.6% { opacity: 0; } 86.6%, 100% { opacity: 1; } }
@keyframes pp-tap1 { 0%, 21.8% { opacity: 0; scale: .4; } 23.3% { opacity: 1; scale: 1; } 26.5%, 100% { opacity: 0; scale: 1.5; } }
@keyframes pp-tap2 { 0%, 44.5% { opacity: 0; scale: .4; } 46% { opacity: 1; scale: 1; } 49%, 100% { opacity: 0; scale: 1.5; } }
@keyframes pp-tap3 { 0%, 62.7% { opacity: 0; scale: .4; } 64.2% { opacity: 1; scale: 1; } 67%, 100% { opacity: 0; scale: 1.5; } }
@keyframes pp-press1 { 0%, 22.7% { scale: 1; } 23.3% { scale: .98; } 24.5%, 100% { scale: 1; } }
@keyframes pp-press2 { 0%, 45.5% { scale: 1; } 46.1% { scale: .98; } 47.3%, 100% { scale: 1; } }
@keyframes pp-press3 { 0%, 63.6% { scale: 1; } 64.2% { scale: .98; } 65.4%, 100% { scale: 1; } }
@keyframes pp-b0 { 0%, 64.5% { opacity: 1; } 65.5%, 68.5% { opacity: 0; } 69.5%, 100% { opacity: 1; } }
@keyframes pp-b1 { 0%, 64.5% { opacity: 0; } 65.5%, 68.5% { opacity: 1; } 69.5%, 100% { opacity: 0; } }
@keyframes pp-h0 { 0%, 68.5% { opacity: 1; max-height: 8em; } 69.5%, 100% { opacity: 0; max-height: 0; } }
@keyframes pp-tail { 0%, 68.5% { max-width: 1em; } 69.5%, 100% { max-width: 6em; } }
@keyframes pp-h1 { 0%, 68.5% { opacity: 0; } 69.5%, 100% { opacity: 1; } }
@keyframes pp-chev { 0%, 68.5% { opacity: 1; } 69.5%, 100% { opacity: 0; } }
@keyframes pp-pop-saved { 0%, 68.8% { opacity: 0; scale: .8; } 70.5% { scale: 1.06; } 71.5%, 100% { opacity: 1; scale: 1; } }
@keyframes pp-pop-prev { 0%, 69.1% { opacity: 0; scale: .9; translate: 0 .3em; } 71.5%, 100% { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes pp-pop-banner { 0%, 90% { opacity: 0; translate: 0 -.4em; } 92.5%, 100% { opacity: 1; translate: 0 0; } }
@keyframes pp-pop-check { 0%, 92.7% { opacity: 0; scale: .6; } 94.5% { scale: 1.1; } 95.5%, 100% { opacity: 1; scale: 1; } }

.pwin--phone.is-playing .ps--1 { animation: ps1 7.7s linear both; }
.pwin--phone.is-playing .ps--2 { animation: ps2 7.7s linear both; }
.pwin--phone.is-playing .ps--3 { animation: ps3 7.7s linear both; }
.pwin--phone.is-playing .ps--4 { animation: ps4 7.7s linear both; }
.pwin--phone.is-playing .ps--1 .tap { animation: pp-tap1 7.7s linear both; }
.pwin--phone.is-playing .ps--2 .tap { animation: pp-tap2 7.7s linear both; }
.pwin--phone.is-playing .ps--3 .tap { animation: pp-tap3 7.7s linear both; }
.pwin--phone.is-playing .ps--1 .btn-primary { animation: pp-press1 7.7s linear both; }
.pwin--phone.is-playing .ps--2 .task-big { animation: pp-press2 7.7s linear both; }
.pwin--phone.is-playing .ps--3 .upload-inline { animation: pp-press3 7.7s linear both; }
.pwin--phone.is-playing .upload-inline .b0 { animation: pp-b0 7.7s linear both; }
.pwin--phone.is-playing .upload-inline .b1 { animation: pp-b1 7.7s linear both; }
.pwin--phone.is-playing .upload-inline .h0 { animation: pp-h0 7.7s linear both; }
.pwin--phone.is-playing .upload-inline .h1 { animation: pp-h1 7.7s linear both; }
.pwin--phone.is-playing .upload-inline .chev { animation: pp-chev 7.7s linear both; }
.pwin--phone.is-playing .upload-inline .tail { animation: pp-tail 7.7s linear both; }
.pwin--phone.is-playing .upload-inline .q-saved { animation: pp-pop-saved 7.7s linear both; }
.pwin--phone.is-playing .upload-preview { animation: pp-pop-prev 7.7s linear both; }
.pwin--phone.is-playing .ps--4 .banner { animation: pp-pop-banner 7.7s linear both; }
.pwin--phone.is-playing .sp-todo-clear-ic { animation: pp-pop-check 7.7s linear both; }

@media (prefers-reduced-motion: reduce) {
  .pwin--phone.is-playing .ps, .pwin--phone.is-playing .ps *, .pwin--phone.is-playing .upload-preview { animation: none !important; }
}

/* smal scherm: de telefoon krijgt de ruimte in plaats van de bordverhouding */
@media (max-width: 700px) {
  .pph { aspect-ratio: auto; padding: 22px 0; }
  .phone { font-size: clamp(7px, 2.2cqw, 14px); }
}


/* ── Het schouwformulier ──────────────────────────────────────── *
   apps/web app/(public)/schouw/[token]/page.tsx op de telefoon:
   welkomscherm, sectie met foto's (CarriedOverStrip + PhotoCapture),
   sectie met spraak (VoiceInput), afronding en het bedankt-scherm.
   Maten in em op de 14px-basis; kleuren en radii uit tailwind.config
   (paper, offwhite, line, ink, orange, teal, teal-light; sm 8 · md 12
   · lg 16 · xl 20). In rust staat het laatste scherm.               */

.pwin--schouw .ps--4 { opacity: 0; }
.pwin--schouw .ps--5 { opacity: 1; }
.pwin--schouw .ps { background: #F9F7F2; color: #1E2A45; }

/* welkom (max-w-md, px-4 py-10) */
.sf-welkom { padding: 2.86em 1.14em; }
.sf-logo { height: 2em; width: auto; display: block; margin-bottom: 2em; }
.sf-eyebrow { display: inline-flex; align-items: center; padding: .29em .86em; border-radius: 999px; border: 1px solid rgba(245,124,0,.3); background: rgba(245,124,0,.1); font-size: .82em; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #F57C00; margin-bottom: .86em; }
.sf-welkom h1 { font-family: var(--font-display); font-size: 2em; font-weight: 700; line-height: 1.25; letter-spacing: -.025em; margin: 0; color: #1E2A45; }
.sf-sub { margin: .14em 0 0; font-size: 1em; color: #6B7280; }
.sf-hr { height: 1px; background: #EAE8E2; margin: 1.43em 0; }
.sf-card { border: 1px solid #EAE8E2; background: #FFFDF8; border-radius: 1.43em; padding: 1em 1.14em; }
.sf-card__name { margin: .29em 0 0; font-size: 1.07em; font-weight: 600; }
.sf-card__sub { margin: .14em 0 0; font-size: .93em; color: #6B7280; text-transform: capitalize; }
.sf-note { margin-top: 1.14em; display: flex; align-items: flex-start; gap: .43em; border-radius: 1.43em; border: 1px solid rgba(46,196,182,.3); background: rgba(165,240,224,.4); padding: .86em 1.14em; font-size: .89em; font-weight: 500; line-height: 1.5; color: #1E2A45; }
.sf-note svg { flex-shrink: 0; margin-top: .2em; }
.sf-list { margin-top: 1.14em; border: 1px solid #EAE8E2; background: #FFFDF8; border-radius: 1.43em; overflow: hidden; }
.sf-list__h { padding: .71em 1.14em; border-bottom: 1px solid #EAE8E2; }
.sf-row { position: relative; display: flex; align-items: center; gap: .86em; padding: .86em 1.14em; border-bottom: 1px solid #EAE8E2; font-size: 1em; font-weight: 500; }
.sf-row:last-child { border-bottom: 0; }
.sf-row .chev { margin-left: auto; color: rgba(107,114,128,.4); }

.sf-lbl { font-size: .75em; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #6B7280; line-height: 1.4; }
.sf-lbl--xs { font-size: .71em; }
.sf-hint { margin: .29em 0 0; font-size: .89em; line-height: 1.6; color: #6B7280; }
.sf-subtitle { margin: 0 0 1.14em; font-size: .93em; line-height: 1.6; color: #6B7280; }

/* sectie: vaste kop, vaste voet, lichaam ertussen */
.sf { position: absolute; inset: 0; display: flex; flex-direction: column; }
.sf-top { position: relative; z-index: 2; background: rgba(249,247,242,.95); border-bottom: 1px solid #EAE8E2; }
.sf-top__row { display: flex; align-items: center; gap: .86em; padding: .86em 1.14em; }
.sf-ibtn { width: 2.57em; height: 2.57em; flex-shrink: 0; display: grid; place-items: center; border-radius: .86em; color: #6B7280; }
.sf-top__t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.07em; font-weight: 600; }
.sf-top__n { flex-shrink: 0; font-size: .86em; font-weight: 600; color: #6B7280; }
.sf-prog { height: 3px; background: #EAE8E2; }
.sf-prog i { display: block; height: 100%; background: #F57C00; }
.sf-body { flex: 1; min-height: 0; padding: 1.71em 1.14em; overflow: hidden; }
.sf-body > .sf-fields, .sf-body > .sf-terug, .sf-body > .sf-subtitle { translate: 0 var(--scroll, 0); }
/* de schouwer is al naar beneden gescrold: het spraakveld en de beslissing in beeld */
.sf-body--s3 { --scroll: -6.61em; }
.sf-body--s4 { --scroll: -11.5em; }
.sf-terug { display: flex; align-items: center; gap: .71em; margin-bottom: 1.43em; padding: .86em 1.14em; border: 1px solid #EAE8E2; background: #FFFDF8; border-radius: 1.43em; font-size: .96em; font-weight: 600; }
.sf-terug .ic { color: #F57C00; display: grid; }
.sf-terug > span:not(.ic) { flex: 1; }
.sf-terug > svg:last-child { color: #6B7280; }
.sf-fields { display: flex; flex-direction: column; gap: 1.43em; }
.sf-field > .sf-lbl + *:not(.sf-hint) { margin-top: .57em; }
.sf-hint + * { margin-top: .57em; }

/* foto's: klantfoto's uit de klantuitvraag, dan zelf maken */
.sf-strip { border-radius: 1.14em; border: 1px solid rgba(46,196,182,.3); background: rgba(165,240,224,.5); padding: .86em; margin-bottom: .86em; }
.sf-strip__lbl { margin: 0 0 .57em; display: inline-flex; align-items: center; gap: .43em; font-size: .75em; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.sf-strip__lbl:last-child { margin-bottom: 0; }
.sf-strip__row { display: flex; gap: .71em; align-items: flex-start; }
.sf-strip__row img { width: 4.57em; height: 4.57em; flex-shrink: 0; border-radius: .86em; border: 1px solid rgba(46,196,182,.3); object-fit: cover; }
.sf-strip__row p { flex: 1; min-width: 0; margin: 0; font-size: .86em; line-height: 1.4; }
.sf-hide { flex-shrink: 0; border: 1px solid #EAE8E2; background: #fff; border-radius: .86em; padding: .29em .57em; font-size: .79em; font-weight: 500; color: #6B7280; }
.sf-cap__btns { display: flex; gap: .71em; overflow: hidden; }
.sf-dash { position: relative; min-height: 3.71em; flex: 1; display: flex; align-items: center; justify-content: center; gap: .57em; border-radius: 1.14em; border: 2px dashed #D9D6CE; background: #F9F7F2; padding: .86em .86em; font-size: .96em; font-weight: 500; color: #6B7280; }
.sf-dash--cam { flex: 2; font-size: 1.04em; }
.sf-dash--cam .c0, .sf-dash--cam .c1 { grid-area: 1 / 1; }
.sf-dash--cam .c1 { opacity: 0; }
.sf-dash--cam > .lbl { display: inline-grid; white-space: nowrap; }
.sf-busy { height: 0; opacity: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: .57em; border-radius: 1.14em; border: 2px dashed rgba(245,124,0,.4); background: rgba(245,124,0,.05); padding: 0 1.14em; box-sizing: border-box; }
.sf-busy__t { display: flex; align-items: center; gap: .71em; font-size: .96em; font-weight: 500; color: #F57C00; }
.sf-busy__t > span { grid-area: 1 / 1; }
.sf-busy__t { display: grid; grid-template-columns: auto 1fr; }
.sf-busy__t svg { grid-column: 1; }
.sf-busy__t .b0, .sf-busy__t .b1 { grid-column: 2; grid-row: 1; }
.sf-busy__t .b1 { opacity: 0; }
.sf-busy .p { display: inline-grid; }
.sf-busy .p > span { grid-area: 1 / 1; opacity: 0; }
.sf-busy .p0 { opacity: 1; }
.sf-busy__bar { height: .43em; border-radius: 999px; background: rgba(245,124,0,.15); overflow: hidden; }
.sf-busy__bar i { display: block; height: 100%; width: 4%; border-radius: 999px; background: #F57C00; }
.sf-thumbs { display: flex; gap: .71em; margin-top: .71em; height: 5.71em; }
.sf-thumb { position: relative; width: 5.71em; height: 5.71em; }
.sf-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 1.14em; border: 1px solid #EAE8E2; display: block; }
.sf-thumb__ann { position: absolute; inset: auto 0 0; display: flex; align-items: center; justify-content: center; gap: .29em; padding: .29em 0; border-radius: 0 0 1.14em 1.14em; background: rgba(0,0,0,.6); color: #fff; font-size: .79em; font-weight: 600; }
.sf-thumb__x { position: absolute; top: -.43em; right: -.43em; width: 1.43em; height: 1.43em; border-radius: 50%; background: #B42318; color: #fff; display: grid; place-items: center; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.ps--2 .sf-thumbs { opacity: 0; height: 0; margin-top: 0; overflow: visible; }

/* spraak (VoiceInput) */
.sf-voice { display: flex; flex-direction: column; gap: .43em; }
.sf-ta { position: relative; display: grid; min-height: 6.6em; border-radius: 1.14em; border: 1px solid #EAE8E2; background: #fff; padding: .86em 1.14em; font-size: 1.14em; line-height: 1.5; color: #1E2A45; }
.sf-ta > span { grid-area: 1 / 1; }
.sf-ta .ph { color: rgba(107,114,128,.7); }
.sf-ta .ph1, .sf-ta .t0, .sf-ta .t1 { opacity: 0; }
.sf-ta .tx { opacity: 1; }
.sf-ta .tx + .ph, .sf-ta:has(.tx:not(:empty)) .ph { opacity: 0; }
.ps--3 .sf-ta .ph0 { opacity: 1; }
.sf-rec { position: relative; display: grid; height: 3.14em; border-radius: 1.14em; background: #F57C00; color: #fff; font-size: 1em; font-weight: 600; }
.sf-rec > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: .71em; }
.sf-rec--idle { display: flex; align-items: center; justify-content: center; gap: .71em; }
.sf-rec__on { opacity: 0; }
.sf-rec__on .sq { width: .71em; height: .71em; flex-shrink: 0; border-radius: .14em; background: #fff; animation: sf-pulse 1.4s ease-in-out infinite; }
.sf-rec__on .wave { display: flex; align-items: center; justify-content: space-between; width: 8.57em; height: 1.57em; }
.sf-rec__on .wave i { display: block; width: .22em; height: 100%; background: #fff; border-radius: 1px; transform-origin: center; animation: sf-wave calc(.42s + var(--k) * .09s) ease-in-out calc(var(--k) * -.13s) infinite alternate; }
.sf-rec__on .tm { display: inline-grid; font-variant-numeric: tabular-nums; }
.sf-rec__on .tm span { grid-area: 1 / 1; opacity: 0; }
.sf-rec__on .tm span:first-child { opacity: 1; }
.sf-rec__on .sf-stop { font-size: .89em; font-weight: 500; opacity: .8; }
.sf-voice__row { display: flex; align-items: center; justify-content: space-between; gap: .86em; min-height: 1.6em; }
.sf-voice__st { display: grid; flex: 1 1 auto; min-width: 0; font-size: .86em; color: #6B7280; line-height: 1.4; }
.sf-voice__st > span { grid-area: 1 / 1; display: flex; align-items: center; gap: .43em; opacity: 0; }
.sf-pill { display: inline-flex; align-items: center; gap: .43em; padding: .14em .57em; border-radius: 999px; border: 1px solid #EAE8E2; font-size: .82em; font-weight: 500; color: #6B7280; white-space: nowrap; }
.sf-pill--teal { border-color: rgba(46,196,182,.4); background: #A5F0E0; color: #1E2A45; }
.sf-omit { margin: 0; font-size: .86em; line-height: 1.5; color: #6B7280; opacity: 0; max-height: 0; overflow: hidden; }
.sf-omit b { font-weight: 600; color: #F57C00; text-decoration: underline; }
.ps--3 .sf-ta .t1 { opacity: 0; }

/* keuzes (SelectInput) */
.sf-opts { display: flex; flex-direction: column; gap: .57em; }
.sf-opt { position: relative; display: flex; align-items: center; gap: .86em; border-radius: 1.14em; border: 1px solid #EAE8E2; background: #fff; padding: .86em 1.14em; font-size: 1.07em; }
.sf-opt > i:first-child { width: 1.14em; height: 1.14em; flex-shrink: 0; border-radius: 50%; border: 2px solid #D9D6CE; }
.sf-opt.on { border-color: #F57C00; background: rgba(245,124,0,.1); }
.sf-opt.on > i:first-child { border-color: #F57C00; background: #F57C00; }

/* vaste voet */
.sf-foot { position: relative; z-index: 2; border-top: 1px solid #EAE8E2; background: rgba(249,247,242,.95); padding: 1em 1.14em; }
.sf-foot__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: .57em; }
.sf-save { display: inline-flex; align-items: center; gap: .43em; font-size: .89em; font-weight: 500; color: #6B7280; }
.sf-saved { font-size: .82em; color: #2EC4B6; }
.sf-foot__btns { display: flex; gap: .86em; }
.sf-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .57em; height: 3.14em; padding: 0 1.71em; border-radius: .86em; font-family: var(--font-body); font-size: 1.07em; font-weight: 600; white-space: nowrap; }
.sf-btn--ghost { flex: 1; border: 1px solid #D9D6CE; color: #1E2A45; }
.sf-btn--primary { flex: 2; background: #F57C00; color: #fff; }
.sf-btn--send { display: grid; }
.sf-btn--send > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: .57em; }
.sf-btn--send .k1 { opacity: 0; }
.sf-btn--sm { height: 2.86em; padding: 0 1.14em; font-size: 1em; flex: none; }

/* bedankt */
.sf-dank { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 1.14em; }
.sf-dank__ok { width: 4.57em; height: 4.57em; border-radius: 50%; background: #A5F0E0; color: #2EC4B6; display: grid; place-items: center; margin-bottom: 1.43em; }
.sf-dank h1 { margin: 0; font-family: var(--font-display); font-size: 1.36em; line-height: 1.37; letter-spacing: -.01em; font-weight: 600; }
.sf-dank p { margin: .86em 0 0; max-width: 24em; font-size: 1.07em; line-height: 1.6; color: #6B7280; }
.sf-dank .sf-btn { margin-top: 1.71em; }
.sf-dank__logo { margin-top: 2.86em; height: 1.43em; width: auto; opacity: .3; }

.sf-spin { animation: sf-spin 1s linear infinite; }
@keyframes sf-spin { to { rotate: 360deg; } }
@keyframes sf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes sf-wave { from { scale: 1 .12; opacity: .4; } to { scale: 1 1; opacity: 1; } }

/* ── de tijdlijn: zestien seconden, alles in procenten ─────────── *
   0 welkom · 1.6 tik op Groepenkast · 2.2 sectie · 3.6 Foto maken ·
   3.75 klaarmaken · 4.4 uploaden · 5.0 foto staat erin · 6.2 volgende
   sectie · 7.0 Inspreken · 9.6 Stop · 10.6 tekst · 11.4 gefilterd ·
   12.6 afronding · 13.2 Aanpassingen nodig · 14.0 Schouw afronden ·
   14.8 ingediend.                                                    */
@keyframes sf-s1 { 0%, 13.75% { opacity: 1; } 16.25%, 100% { opacity: 0; } }
@keyframes sf-s2 { 0%, 13.75% { opacity: 0; } 16.25%, 38.75% { opacity: 1; } 41.25%, 100% { opacity: 0; } }
@keyframes sf-s3 { 0%, 38.75% { opacity: 0; } 41.25%, 78.75% { opacity: 1; } 81.25%, 100% { opacity: 0; } }
@keyframes sf-s4 { 0%, 78.75% { opacity: 0; } 81.25%, 92.5% { opacity: 1; } 95.0%, 100% { opacity: 0; } }
@keyframes sf-s5 { 0%, 92.5% { opacity: 0; } 95.0%, 100% { opacity: 1; } }
@keyframes sf-tap1 { 0%, 10.0% { opacity: 0; scale: .4; } 11.56% { opacity: 1; scale: 1; } 14.37%, 100% { opacity: 0; scale: 1.5; } }
@keyframes sf-tap2 { 0%, 22.5% { opacity: 0; scale: .4; } 24.06% { opacity: 1; scale: 1; } 26.88%, 100% { opacity: 0; scale: 1.5; } }
@keyframes sf-tap3 { 0%, 43.75% { opacity: 0; scale: .4; } 45.31% { opacity: 1; scale: 1; } 48.12%, 100% { opacity: 0; scale: 1.5; } }
@keyframes sf-tap3b { 0%, 60.0% { opacity: 0; scale: .4; } 61.56% { opacity: 1; scale: 1; } 64.38%, 100% { opacity: 0; scale: 1.5; } }
@keyframes sf-tap4 { 0%, 82.5% { opacity: 0; scale: .4; } 84.06% { opacity: 1; scale: 1; } 86.87%, 100% { opacity: 0; scale: 1.5; } }
@keyframes sf-tap4b { 0%, 87.5% { opacity: 0; scale: .4; } 89.06% { opacity: 1; scale: 1; } 91.88%, 100% { opacity: 0; scale: 1.5; } }
@keyframes sf-press2 { 0%, 23.12% { scale: 1; } 23.75% { scale: .97; } 25.0%, 100% { scale: 1; } }
@keyframes sf-press3 { 0%, 44.38% { scale: 1; } 45.0% { scale: .97; } 46.25%, 100% { scale: 1; } }
@keyframes sf-press3b { 0%, 60.62% { scale: 1; } 61.25% { scale: .97; } 62.5%, 100% { scale: 1; } }
@keyframes sf-press4 { 0%, 83.12% { scale: 1; } 83.75% { scale: .97; } 85.0%, 100% { scale: 1; } }
@keyframes sf-press4b { 0%, 88.12% { scale: 1; } 88.75% { scale: .97; } 90.0%, 100% { scale: 1; } }
@keyframes sf-btns { 0%, 23.44% { opacity: 1; height: auto; } 23.75%, 31.25% { opacity: 0; height: 0; } 31.56%, 100% { opacity: 1; height: auto; } }
@keyframes sf-busy { 0%, 23.44% { opacity: 0; height: 0; } 23.75%, 31.25% { opacity: 1; height: 3.71em; } 31.56%, 100% { opacity: 0; height: 0; } }
@keyframes sf-b0 { 0%, 27.5% { opacity: 1; } 27.81%, 100% { opacity: 0; } }
@keyframes sf-b1 { 0%, 27.5% { opacity: 0; } 27.81%, 100% { opacity: 1; } }
@keyframes sf-p0 { 0%, 28.75% { opacity: 1; } 28.88%, 100% { opacity: 0; } }
@keyframes sf-p1 { 0%, 28.75% { opacity: 0; } 28.88%, 30.0% { opacity: 1; } 30.12%, 100% { opacity: 0; } }
@keyframes sf-p2 { 0%, 30.0% { opacity: 0; } 30.12%, 100% { opacity: 1; } }
@keyframes sf-bar { 0%, 27.5% { width: 4%; } 28.75% { width: 18%; } 30.0% { width: 64%; } 31.25%, 100% { width: 91%; } }
@keyframes sf-thumb { 0%, 31.25% { opacity: 0; scale: .85; height: 0; margin-top: 0; } 31.56% { opacity: 0; scale: .85; height: 5.71em; margin-top: .71em; } 33.44%, 100% { opacity: 1; scale: 1; height: 5.71em; margin-top: .71em; } }
@keyframes sf-c0 { 0%, 31.25% { opacity: 1; } 31.56%, 100% { opacity: 0; } }
@keyframes sf-c1 { 0%, 31.25% { opacity: 0; } 31.56%, 100% { opacity: 1; } }
@keyframes sf-rec-on { 0%, 43.75% { opacity: 0; } 44.69%, 60.0% { opacity: 1; } 60.94%, 100% { opacity: 0; } }
@keyframes sf-rec-idle { 0%, 43.75% { opacity: 1; } 44.69%, 60.0% { opacity: 0; } 60.94%, 100% { opacity: 1; } }
@keyframes sf-rec-bg { 0%, 43.75% { background: #F57C00; } 44.69%, 60.0% { background: #EF4444; } 60.94%, 100% { background: #F57C00; } }
@keyframes sf-ta-rec { 0%, 43.75% { border-color: #EAE8E2; box-shadow: none; } 44.69%, 60.0% { border-color: rgba(245,124,0,.6); box-shadow: 0 0 0 2px rgba(245,124,0,.2); } 60.94%, 100% { border-color: #EAE8E2; box-shadow: none; } }
@keyframes sf-ph0 { 0%, 43.75% { opacity: 1; } 44.38%, 100% { opacity: 0; } }
@keyframes sf-ph1 { 0%, 43.75% { opacity: 0; } 44.38%, 66.25% { opacity: 1; } 66.88%, 100% { opacity: 0; } }
@keyframes sf-tm0 { 0%, 50.0% { opacity: 1; } 50.12%, 100% { opacity: 0; } }
@keyframes sf-tm1 { 0%, 50.0% { opacity: 0; } 50.12%, 56.25% { opacity: 1; } 56.38%, 100% { opacity: 0; } }
@keyframes sf-tm2 { 0%, 56.25% { opacity: 0; } 56.38%, 100% { opacity: 1; } }
@keyframes sf-s-in { 0%, 43.75% { opacity: 0; } 44.38%, 60.0% { opacity: 1; } 60.62%, 100% { opacity: 0; } }
@keyframes sf-s-tx { 0%, 60.0% { opacity: 0; } 60.62%, 66.25% { opacity: 1; } 66.88%, 100% { opacity: 0; } }
@keyframes sf-s-fi { 0%, 66.25% { opacity: 0; } 66.88%, 71.25% { opacity: 1; } 71.88%, 100% { opacity: 0; } }
@keyframes sf-t0 { 0%, 66.25% { opacity: 0; } 67.81%, 71.25% { opacity: 1; } 72.81%, 100% { opacity: 0; } }
@keyframes sf-t1 { 0%, 71.25% { opacity: 0; } 72.81%, 100% { opacity: 1; } }
@keyframes sf-omit { 0%, 71.25% { opacity: 0; max-height: 0; } 73.75%, 100% { opacity: 1; max-height: 4em; } }
@keyframes sf-pick { 0%, 83.12% { border-color: #EAE8E2; background: #fff; } 84.06%, 100% { border-color: #F57C00; background: rgba(245,124,0,.1); } }
@keyframes sf-pick-dot { 0%, 83.12% { border-color: #D9D6CE; background: transparent; } 84.06%, 100% { border-color: #F57C00; background: #F57C00; } }
@keyframes sf-k0 { 0%, 88.12% { opacity: 1; } 88.44%, 100% { opacity: 0; } }
@keyframes sf-k1 { 0%, 88.12% { opacity: 0; } 88.44%, 100% { opacity: 1; } }
@keyframes sf-ok { 0%, 94.38% { opacity: 0; scale: .5; } 97.5%, 100% { opacity: 1; scale: 1; } }
@keyframes sf-up1 { 0%, 95.62% { opacity: 0; translate: 0 .6em; } 98.12%, 100% { opacity: 1; translate: 0 0; } }
@keyframes sf-up2 { 0%, 96.56% { opacity: 0; translate: 0 .6em; } 99.06%, 100% { opacity: 1; translate: 0 0; } }
@keyframes sf-up3 { 0%, 97.5% { opacity: 0; translate: 0 .6em; } 100.0%, 100% { opacity: 1; translate: 0 0; } }
.pwin--schouw.is-playing .ps--1 { animation: sf-s1 16s linear both; }
.pwin--schouw.is-playing .ps--2 { animation: sf-s2 16s linear both; }
.pwin--schouw.is-playing .ps--3 { animation: sf-s3 16s linear both; }
.pwin--schouw.is-playing .ps--4 { animation: sf-s4 16s linear both; }
.pwin--schouw.is-playing .ps--5 { animation: sf-s5 16s linear both; }
.pwin--schouw.is-playing .ps--1 .tap { animation: sf-tap1 16s linear both; }
.pwin--schouw.is-playing .ps--2 .tap { animation: sf-tap2 16s linear both; }
.pwin--schouw.is-playing .ps--3 .sf-rec .tap { animation: sf-tap3 16s linear both, sf-tap3b 16s linear both; }
.pwin--schouw.is-playing .ps--4 .sf-opt--pick .tap { animation: sf-tap4 16s linear both; }
.pwin--schouw.is-playing .ps--4 .sf-btn--send .tap { animation: sf-tap4b 16s linear both; }
.pwin--schouw.is-playing .ps--2 .sf-dash--cam { animation: sf-press2 16s linear both; }
.pwin--schouw.is-playing .ps--3 .sf-rec { animation: sf-press3 16s linear both, sf-press3b 16s linear both, sf-rec-bg 16s linear both; }
.pwin--schouw.is-playing .ps--4 .sf-opt--pick { animation: sf-press4 16s linear both, sf-pick 16s linear both; }
.pwin--schouw.is-playing .ps--4 .sf-opt--pick > i:first-child { animation: sf-pick-dot 16s linear both; }
.pwin--schouw.is-playing .ps--4 .sf-btn--send { animation: sf-press4b 16s linear both; }
.pwin--schouw.is-playing .ps--2 .sf-cap__btns { animation: sf-btns 16s linear both; }
.pwin--schouw.is-playing .ps--2 .sf-busy { animation: sf-busy 16s linear both; }
.pwin--schouw.is-playing .sf-busy .b0 { animation: sf-b0 16s linear both; }
.pwin--schouw.is-playing .sf-busy .b1 { animation: sf-b1 16s linear both; }
.pwin--schouw.is-playing .sf-busy .p0 { animation: sf-p0 16s linear both; }
.pwin--schouw.is-playing .sf-busy .p1 { animation: sf-p1 16s linear both; }
.pwin--schouw.is-playing .sf-busy .p2 { animation: sf-p2 16s linear both; }
.pwin--schouw.is-playing .sf-busy__bar i { animation: sf-bar 16s linear both; }
.pwin--schouw.is-playing .ps--2 .sf-thumbs { animation: sf-thumb 16s linear both; }
.pwin--schouw.is-playing .sf-dash--cam .c0 { animation: sf-c0 16s linear both; }
.pwin--schouw.is-playing .sf-dash--cam .c1 { animation: sf-c1 16s linear both; }
.pwin--schouw.is-playing .ps--3 .sf-rec__on { animation: sf-rec-on 16s linear both; }
.pwin--schouw.is-playing .ps--3 .sf-rec__idle { animation: sf-rec-idle 16s linear both; }
.pwin--schouw.is-playing .ps--3 .sf-voice .sf-ta { animation: sf-ta-rec 16s linear both; }
.pwin--schouw.is-playing .ps--3 .ph0 { animation: sf-ph0 16s linear both; }
.pwin--schouw.is-playing .ps--3 .ph1 { animation: sf-ph1 16s linear both; }
.pwin--schouw.is-playing .ps--3 .tm span:nth-child(1) { animation: sf-tm0 16s linear both; }
.pwin--schouw.is-playing .ps--3 .tm span:nth-child(2) { animation: sf-tm1 16s linear both; }
.pwin--schouw.is-playing .ps--3 .tm span:nth-child(3) { animation: sf-tm2 16s linear both; }
.pwin--schouw.is-playing .ps--3 .s-in { animation: sf-s-in 16s linear both; }
.pwin--schouw.is-playing .ps--3 .s-tx { animation: sf-s-tx 16s linear both; }
.pwin--schouw.is-playing .ps--3 .s-fi { animation: sf-s-fi 16s linear both; }
.pwin--schouw.is-playing .ps--3 .t0 { animation: sf-t0 16s linear both; }
.pwin--schouw.is-playing .ps--3 .t1 { animation: sf-t1 16s linear both; }
.pwin--schouw.is-playing .ps--3 .sf-omit { animation: sf-omit 16s linear both; }
.pwin--schouw.is-playing .ps--4 .k0 { animation: sf-k0 16s linear both; }
.pwin--schouw.is-playing .ps--4 .k1 { animation: sf-k1 16s linear both; }
.pwin--schouw.is-playing .ps--5 .sf-dank__ok { animation: sf-ok 16s linear both; }
.pwin--schouw.is-playing .ps--5 h1 { animation: sf-up1 16s linear both; }
.pwin--schouw.is-playing .ps--5 p { animation: sf-up2 16s linear both; }
.pwin--schouw.is-playing .ps--5 .sf-btn { animation: sf-up3 16s linear both; }
.pwin--schouw.is-playing .ps--2 .sf-thumbs { overflow: visible; }
@media (prefers-reduced-motion: reduce) {
  .pwin--schouw.is-playing .ps, .pwin--schouw.is-playing .ps * { animation: none !important; }
}

/* -- De werkvoorbereiding -------------------------------------- *
   apps/web projects/[projectId]/page.tsx, gescrold naar de actieve
   fase: links de FieldGroup "Werkvoorbereiding" (werkvoorbereiding-
   section.tsx: de AI-velden en daaronder de drie lijsten), rechts de
   takenkolom (aside + task-row.tsx) in drie standen, onderin de
   fasebalk (stage-jump-bar.tsx). Rustig gehouden: een accentkleur,
   geen gevulde vlakken, tekst op leesformaat in plaats van als kop. */

.pwin .brd__main { position: relative; }
.pv__stages { position: absolute; left: 50%; bottom: .9em; translate: -50% 0; z-index: 6; white-space: nowrap; }
.pv__stage .ok { display: grid; place-items: center; width: 1em; height: 1em; border-radius: 50%; background: var(--teal); color: #fff; }
.pv__badges { display: flex; align-items: center; gap: .5em; margin: .7em 0 0; }
.pv__sub b { color: var(--ajeto-navy, #1E2A45); font-weight: 600; }
.badge--running { background: #EAFAF7; color: #0C7C6E; border-color: #BEEDE5; }

.pv--wvb { --l: rgba(43, 54, 79, .12); font-size: 1em; padding: 1.2em 2.4em 2.2em; overflow: hidden; }
.pv__onder { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; margin-top: 1em; }
.fg__h--sub { padding: .85em 1.4em; }
.fg__h--sub h5 { font-size: 1.02em; }
.fg__h--sub p { margin: .2em 0 0; font-size: .84em; color: #6B7280; }
.pv__cols { display: grid; grid-template-columns: 1fr 23em; gap: 1.6em; align-items: start; }
.pv__main { display: flex; flex-direction: column; gap: 1em; min-width: 0; }

/* fieldgroup.tsx: kaart met kop en badge, ingeklapt of open */
.fg { overflow: hidden; border-radius: 1em; border: 1px solid var(--l); background: #FFFDF8; }
.fg__h { display: flex; align-items: center; justify-content: space-between; padding: .9em 1.4em; color: #6B7280; }
.fg__h h5 { margin: 0; display: flex; align-items: center; gap: .6em; font-family: var(--font-display); font-size: 1.18em; font-weight: 600; letter-spacing: -.005em; color: var(--ajeto-navy, #1E2A45); }
.fg__h h5 .badge { font-size: .64em; font-weight: 600; }
.fg--open .fg__h > svg { rotate: 180deg; }
.fg__body { position: relative; display: grid; border-top: 1px solid var(--l); padding: 1.3em 1.4em 1.4em; }
.fg__body > * { grid-area: 1 / 1; }

.wv-l { display: flex; align-items: center; gap: .45em; font-size: .8em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6B7280; }
.wv-empty { display: flex; flex-direction: column; gap: .3em; }
.wv-dash { font-style: italic; color: #6B7280; }
.wv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1em 2.2em; align-content: start; }
.wv-fld { display: flex; flex-direction: column; gap: .2em; min-width: 0; }
.wv-v { display: flex; align-items: baseline; gap: .4em; font-size: 1.02em; font-weight: 500; color: var(--ajeto-navy, #1E2A45); line-height: 1.4; }
.wv-v::before { content: "\2726"; flex: 0 0 auto; font-family: var(--font-display); font-size: .84em; color: #E07000; }

/* de lijsten: geen vlak, alleen een haarlijn en een gekleurd puntje */
.wv-list { grid-column: 1 / -1; padding-top: .85em; border-top: 1px solid var(--l); }
.wv-list .wv-l i { width: .42em; height: .42em; border-radius: 50%; background: currentColor; }
.wv-list ul { margin: .45em 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .3em; }
.wv-list li { font-size: 1em; line-height: 1.45; color: #2B364F; }
.wv-list--open .wv-l { color: #A85800; }
.wv-list--risk .wv-l { color: #B42318; }
.wv-list--cmp .wv-l { color: #0C7C6E; }
.wv-foot { grid-column: 1 / -1; margin: .2em 0 0; padding-top: .85em; border-top: 1px solid var(--l); font-size: .82em; color: #6B7280; }
.wv-foot .ai { color: #E07000; margin-right: .3em; }

/* de takenkolom */
.tk { position: relative; box-sizing: border-box; height: 16.19em; border-radius: 1em; border: 1px solid rgba(245, 124, 0, .4); background: #FFFDF8; padding: 1.15em; }
.tk-s { position: absolute; inset: 0; padding: inherit; display: flex; flex-direction: column; gap: .7em; opacity: 0; }
.tk-s3 { opacity: 1; }
.tk-head h4 { margin: 0; display: flex; align-items: center; gap: .5em; font-family: var(--font-display); font-size: 1.14em; font-weight: 600; color: var(--ajeto-navy, #1E2A45); }
.tk-open { border-radius: 999px; background: rgba(245, 124, 0, .1); padding: .15em .6em; font-family: var(--font-body); font-size: .72em; font-weight: 700; color: #A85800; }
.tk-stage { margin: .15em 0 0; font-size: .86em; color: #6B7280; }
.tk-done { display: flex; align-items: center; gap: .4em; margin: 0; font-size: .84em; font-weight: 500; color: #6B7280; }
.tk-row { display: grid; grid-template-columns: 1.5em 1fr auto; align-items: center; gap: .6em; border-radius: .8em; border: 1px solid var(--l); background: #FFFDF8; padding: .7em .8em; }
.tk-row--stack { display: block; }
.tk-row--running { position: relative; overflow: hidden; }
.tk-row--running::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: linear-gradient(90deg, transparent, var(--teal), transparent); background-size: 200% 100%; animation: tk-sweep 1.8s linear infinite; }
.tk-row--action { background: rgba(245, 124, 0, .045); border-color: rgba(245, 124, 0, .3); }
.tk-row--muted { opacity: .68; }
.tk-row__top { display: flex; align-items: flex-start; gap: .6em; }
.tk-row__act { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4em .8em; margin-top: .7em; padding-left: 2.1em; }
.tk-t { min-width: 0; display: block; font-size: .98em; font-weight: 500; line-height: 1.35; color: var(--ajeto-navy, #1E2A45); }
.tk-sub { display: block; margin-top: .2em; font-size: .88em; font-weight: 400; color: #45464D; }
.tk-sub--run { color: #0A6C60; }
.tk-who { border-radius: 999px; background: rgba(43, 54, 79, .05); padding: .2em .55em; font-size: .78em; font-weight: 500; color: #5C6472; white-space: nowrap; }
.tk-mark { width: 1.5em; height: 1.5em; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgba(43, 54, 79, .28); background: #FFFDF8; }
.tk-mark i { width: .5em; height: .5em; border-radius: 50%; background: rgba(43, 54, 79, .28); }
.tk-mark--done { border-color: var(--teal); background: var(--teal); color: #fff; }
.tk-mark--run { border-color: var(--teal); background: #DFF4F1; color: #0A6C60; }
.tk-mark--act { border-color: var(--orange); background: var(--orange); color: #fff; }
.tk-spin { width: .8em; height: .8em; animation: sf-spin 1s linear infinite; }
.tk-btns { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; }
.tk-btn { display: inline-flex; align-items: center; height: 2.1em; padding: 0 .8em; border-radius: .6em; background: var(--orange); color: #fff; font-size: .92em; font-weight: 600; white-space: nowrap; }
.tk-ok { position: relative; display: inline-grid; align-items: center; border-radius: .6em; border: 1px solid rgba(46, 196, 182, .4); padding: .35em .7em; font-size: .84em; font-weight: 600; color: #0A6C60; white-space: nowrap; }
.tk-ok > span { grid-area: 1 / 1; }
.tk-ok .k1 { opacity: 0; }

/* rust = eindstand */
.wv-empty { opacity: 0; }

/* -- de tijdlijn: negen seconden -- 0 agent bezig - 2.5 het pakket
   staat er en gaat naar beoordelen - 6.0 Akkoord - 6.6 afronden.  */
@keyframes wv-s1 { 0%, 27.78% { opacity: 1; } 31.67%, 100% { opacity: 0; } }
@keyframes wv-s2 { 0%, 27.78% { opacity: 0; } 31.67%, 73.33% { opacity: 1; } 77.22%, 100% { opacity: 0; } }
@keyframes wv-s3 { 0%, 73.33% { opacity: 0; } 77.22%, 100% { opacity: 1; } }
@keyframes wv-empty { 0%, 25.56% { opacity: 1; } 28.89%, 100% { opacity: 0; } }
@keyframes wv-grow { 0%, 27.78% { max-height: 4.4em; } 33.33%, 100% { max-height: 80em; } }
@keyframes wv-tap { 0%, 66.67% { opacity: 0; scale: .4; } 69.44% { opacity: 1; scale: 1; } 74.44%, 100% { opacity: 0; scale: 1.5; } }
@keyframes wv-k0 { 0%, 68.33% { opacity: 1; } 68.89%, 100% { opacity: 0; } }
@keyframes wv-k1 { 0%, 68.33% { opacity: 0; } 68.89%, 100% { opacity: 1; } }
@keyframes wv-in { from { opacity: 0; translate: 0 .29em; } to { opacity: 1; translate: 0 0; } }
@keyframes tk-sweep { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.pwin--wvb.is-playing .fg--open .fg__body { animation: wv-grow 9s linear both; }
@keyframes wv-tk { 0%, 27.78% { height: 18.78em; } 31.67%, 73.33% { height: 24.45em; } 77.22%, 100% { height: 16.19em; } }
.pwin--wvb.is-playing .tk { animation: wv-tk 9s linear both; }
.pwin--wvb.is-playing .tk-s1 { animation: wv-s1 9s linear both; }
.pwin--wvb.is-playing .tk-s2 { animation: wv-s2 9s linear both; }
.pwin--wvb.is-playing .tk-s3 { animation: wv-s3 9s linear both; }
.pwin--wvb.is-playing .wv-empty { animation: wv-empty 9s linear both; }
.pwin--wvb.is-playing .wv-grid > * { animation: wv-in .3s ease both; animation-delay: calc(2.55s + var(--i, 0) * .05s); }
.pwin--wvb.is-playing .wv-list li { animation: wv-in .3s ease both; animation-delay: calc(2.55s + var(--i, 0) * .05s + var(--j, 0) * .05s); }
.pwin--wvb.is-playing .tk-s2 .tap { animation: wv-tap 9s linear both; }
.pwin--wvb.is-playing .tk-s2 .k0 { animation: wv-k0 9s linear both; }
.pwin--wvb.is-playing .tk-s2 .k1 { animation: wv-k1 9s linear both; }
@media (prefers-reduced-motion: reduce) {
  .pwin--wvb.is-playing .fg--open .fg__body, .pwin--wvb.is-playing .tk, .pwin--wvb.is-playing .tk-s, .pwin--wvb.is-playing .wv-empty,
  .pwin--wvb.is-playing .wv-grid > *, .pwin--wvb.is-playing .wv-list li,
  .pwin--wvb.is-playing .tk-s2 .tap, .pwin--wvb.is-playing .tk-s2 .k0, .pwin--wvb.is-playing .tk-s2 .k1 { animation: none !important; }
}

/* -- Home ------------------------------------------------------ *
   apps/web app/(dashboard)/home: de begroeting met het tijdvenster,
   de fasestrook (stage-flow-strip.tsx), de vaste kaart "Wat wacht op
   mij" (spine.tsx + action-row.tsx) en de instroom van deze week
   (lead-stats-panel.tsx). Zelfde rust als de werkvoorbereiding: een
   accentkleur, geen gevulde vlakken, tekst op leesformaat.          */

.pv--home { --l: rgba(43, 54, 79, .12); font-size: 1em; padding: 1.4em 2.4em 2em; overflow: hidden; }

.hm-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.2em; flex-wrap: wrap; }
.hm-kop h1 { margin: 0; font-family: var(--font-display); font-size: 1.86em; font-weight: 600; letter-spacing: -.02em; color: var(--ajeto-navy, #1E2A45); }
.hm-kop p { margin: .25em 0 0; font-size: .96em; color: #6B7280; }
.hm-kop p b { font-weight: 600; color: #45464D; }
.hm-chrome { display: flex; align-items: center; gap: .6em; }
.hm-tijd { display: inline-flex; align-items: center; height: 2.3em; padding: .2em; border-radius: 999px; background: #FFFDF8; box-shadow: 0 1px 2px rgba(15,23,42,.06); font-size: .89em; font-weight: 600; }
.hm-tijd span { padding: .25em .8em; border-radius: 999px; color: #6B7280; }
.hm-tijd .on { background: rgba(43, 54, 79, .07); color: var(--ajeto-navy, #1E2A45); }
.hm-rond { width: 2.3em; height: 2.3em; display: grid; place-items: center; border-radius: 50%; background: #FFFDF8; color: #6B7280; box-shadow: 0 1px 2px rgba(15,23,42,.06); }

/* de fasestrook */
.hm-strook { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; margin-top: 1.3em; }
.hm-fase { display: flex; flex-direction: column; gap: .75em; border-radius: 1em; background: #FFFDF8; padding: 1.05em 1.3em; box-shadow: 0 2px 8px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04); }
.hm-fase__kop { display: flex; align-items: baseline; justify-content: space-between; gap: .8em; }
.hm-fase__kop h3 { margin: 0; display: flex; align-items: center; gap: .55em; font-family: var(--font-display); font-size: 1.14em; font-weight: 600; letter-spacing: -.015em; color: var(--ajeto-navy, #1E2A45); }
.hm-fase__kop h3 i { width: 3px; height: 1.05em; border-radius: 999px; background: var(--teal); }
.hm-fase__n { flex-shrink: 0; font-family: var(--font-display); font-size: 1.57em; font-weight: 600; line-height: 1; color: var(--ajeto-navy, #1E2A45); }
.hm-fase__n b { margin-left: .35em; font-family: var(--font-body); font-size: .48em; font-weight: 500; color: #6B7280; }
.hm-fase__balk { display: flex; height: .57em; gap: 3px; }
.hm-fase__balk span { border-radius: 999px; }
.hm-fase__steps { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .85em; }
.hm-step { display: flex; align-items: center; gap: .4em; font-size: .86em; color: #45464D; }
.hm-step i { width: .57em; height: .57em; flex-shrink: 0; border-radius: 50%; }
.hm-step b { font-weight: 400; color: #6B7280; }
.hm-fase__pillen { display: flex; flex-wrap: wrap; gap: .5em; min-height: 1.9em; }
.hm-pill { display: inline-flex; align-items: center; gap: .45em; border-radius: 999px; padding: .28em .75em; background: rgba(43, 54, 79, .05); font-size: .82em; font-weight: 600; color: #5C6472; }
.hm-pill i { width: .43em; height: .43em; border-radius: 50%; background: rgba(43, 54, 79, .28); }
.hm-pill--let { background: #FFF3E0; color: #A35200; }
.hm-pill--let i { background: var(--orange); }

/* Wat wacht op mij */
.hm-kaart { margin-top: 1.3em; border-radius: 1.14em; background: #FFFDF8; overflow: hidden; box-shadow: 0 2px 8px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04); }
.hm-kaart__kop { padding: 1.1em 1.6em .8em; }
.hm-kaart__kop h2 { margin: 0; font-family: var(--font-display); font-size: 1.29em; font-weight: 600; letter-spacing: -.015em; color: var(--ajeto-navy, #1E2A45); }
.hm-kaart__kop p { margin: .15em 0 0; font-size: .86em; color: #6B7280; }
.hm-rijen { position: relative; border-top: 1px solid var(--l); }
.hm-rij { display: flex; align-items: center; gap: .85em; padding: .8em 1.6em; border-bottom: 1px solid var(--l); }
.hm-dot { width: .57em; height: .57em; flex-shrink: 0; border-radius: 50%; }
.hm-rij--approve .hm-dot { background: #A35200; }
.hm-rij--info .hm-dot { background: var(--teal); }
.hm-rij--ready .hm-dot { background: var(--ajeto-navy, #1E2A45); }
.hm-rij__t { flex: 1; min-width: 0; display: block; }
.hm-rij__kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: .55em; }
.hm-rij__kop b { font-family: var(--font-display); font-size: 1em; font-weight: 600; letter-spacing: -.01em; color: var(--ajeto-navy, #1E2A45); }
.hm-meta { font-size: .86em; color: #6B7280; }
.hm-context { display: block; margin-top: .1em; font-size: .86em; color: #6B7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-context .ai { color: #E07000; }
.hm-knop { flex-shrink: 0; display: inline-flex; align-items: center; gap: .45em; border-radius: .6em; border: 1px solid rgba(43, 54, 79, .2); padding: .45em .85em; font-size: .89em; font-weight: 600; color: #45464D; white-space: nowrap; }
.hm-meer { margin: 0; padding: .7em 1.6em; text-align: center; font-size: .89em; font-weight: 600; color: #6B7280; }

/* de rijen laden eerst als lege balken, zoals in het echte scherm */
.hm-skel { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .6em; padding: .8em; opacity: 0; }
.hm-skel i { display: block; height: 4.14em; border-radius: .8em; background: rgba(43, 54, 79, .07); }

/* instroom deze week */
.hm-instroom { margin-top: 1.3em; border-radius: 1.14em; border: 1px solid var(--l); background: #FFFDF8; padding: 1.2em 1.4em 1.3em; }
.hm-instroom__kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .8em; }
.hm-instroom__kop h2 { margin: 0; font-family: var(--font-display); font-size: 1.07em; font-weight: 600; color: var(--ajeto-navy, #1E2A45); }
.hm-wacht { font-size: .82em; font-weight: 600; color: #A35200; }
.hm-periode { margin: .15em 0 0; font-size: .82em; color: #6B7280; }
.hm-tegels { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85em; margin-top: 1em; }
.hm-tegel { border-radius: .8em; border: 1px solid var(--l); background: #F9F7F2; padding: .75em .95em; }
.hm-tegel__l { display: block; font-size: .78em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #6B7280; }
.hm-tegel__v { display: flex; align-items: baseline; gap: .5em; margin-top: .25em; font-family: var(--font-display); font-size: 1.86em; font-weight: 600; line-height: 1; color: var(--ajeto-navy, #1E2A45); }
.hm-tegel__v em { display: inline-flex; align-items: center; gap: .1em; font-family: var(--font-body); font-size: .46em; font-weight: 600; font-style: normal; }
.hm-tegel__v .op { color: #15803D; }
.hm-tegel__v .af { color: #B42318; }
.hm-tegel__p { display: block; margin-top: .25em; font-size: .78em; color: #6B7280; }

/* -- de tijdlijn: acht en een halve seconde --------------------- *
   0 de kaart laadt · 1.2 begroeting en fasestrook · 2.2 de rijen
   landen · 4.6 de muis gaat over de eerste rij, de knop kleurt naar
   het accent · 6.4 over de derde rij. In rust: alles zichtbaar,
   niets aangewezen.                                                */
@keyframes hm-in { from { opacity: 0; translate: 0 .35em; } to { opacity: 1; translate: 0 0; } }
@keyframes hm-skel { 0% { opacity: 1; } 22.35% { opacity: 1; } 25.88%, 100% { opacity: 0; }  }
@keyframes hm-puls { 0%%, 100%% { opacity: 1; } 50%% { opacity: .45; } }
@keyframes hm-hover1 { 0%, 54.12% { background: transparent; } 55.88%, 72.94% { background: #F9F7F2; } 74.71%, 100% { background: transparent; } }
@keyframes hm-knop1 { 0%, 54.12% { background: transparent; border-color: rgba(43,54,79,.2); color: #45464D; } 55.88%, 72.94% { background: var(--orange); border-color: var(--orange); color: #fff; } 74.71%, 100% { background: transparent; border-color: rgba(43,54,79,.2); color: #45464D; } }
@keyframes hm-hover3 { 0%, 75.29% { background: transparent; } 77.06%, 94.12% { background: #F9F7F2; } 95.88%, 100% { background: transparent; } }
@keyframes hm-knop3 { 0%, 75.29% { background: transparent; border-color: rgba(43,54,79,.2); color: #45464D; } 77.06%, 94.12% { background: var(--ajeto-navy, #1E2A45); border-color: var(--ajeto-navy, #1E2A45); color: #fff; } 95.88%, 100% { background: transparent; border-color: rgba(43,54,79,.2); color: #45464D; } }
@keyframes hm-wijzer { 0%, 51.18% { opacity: 0; } 54.12%, 72.94% { opacity: 1; top: var(--y1); } 77.06%, 94.12% { opacity: 1; top: var(--y3); } 97.06%, 100% { opacity: 0; top: var(--y3); } }

.pwin--home.is-playing .hm-kop > div,
.pwin--home.is-playing .hm-chrome { animation: hm-in .35s ease both; animation-delay: 1.2s; }
.pwin--home.is-playing .hm-fase { animation: hm-in .35s ease both; animation-delay: calc(1.35s + var(--i, 0) * .1s); }
.pwin--home.is-playing .hm-kaart { animation: hm-in .35s ease both; animation-delay: 1.7s; }
.pwin--home.is-playing .hm-skel { animation: hm-skel 8.5s linear both; }
.pwin--home.is-playing .hm-skel i { animation: hm-puls 1.4s ease-in-out infinite; }
.pwin--home.is-playing .hm-rij,
.pwin--home.is-playing .hm-meer { animation: hm-in .35s ease both; animation-delay: calc(2.2s + var(--i, 0) * .12s); }
.pwin--home.is-playing .hm-instroom { animation: hm-in .35s ease both; animation-delay: 2.8s; }
.pwin--home.is-playing .hm-tegel { animation: hm-in .35s ease both; animation-delay: calc(2.95s + var(--i, 0) * .1s); }
.pwin--home.is-playing .hm-rij:nth-child(2) { animation: hm-in .35s ease both 2.2s, hm-hover1 8.5s linear both; }
.pwin--home.is-playing .hm-rij:nth-child(2) .hm-knop { animation: hm-knop1 8.5s linear both; }
.pwin--home.is-playing .hm-rij:nth-child(4) { animation: hm-in .35s ease both 2.44s, hm-hover3 8.5s linear both; }
.pwin--home.is-playing .hm-rij:nth-child(4) .hm-knop { animation: hm-knop3 8.5s linear both; }
@media (prefers-reduced-motion: reduce) {
  .pwin--home.is-playing .hm-kop > div, .pwin--home.is-playing .hm-chrome, .pwin--home.is-playing .hm-fase,
  .pwin--home.is-playing .hm-kaart, .pwin--home.is-playing .hm-skel, .pwin--home.is-playing .hm-skel i,
  .pwin--home.is-playing .hm-rij, .pwin--home.is-playing .hm-meer, .pwin--home.is-playing .hm-instroom,
  .pwin--home.is-playing .hm-tegel, .pwin--home.is-playing .hm-rij .hm-knop { animation: none !important; }
}