/* Het klantportaal en de pagina's zonder inlog. Bovenbalk, logo, tabbladen, kopfoto en titel komen uit
   shell.css, precies zoals in de kantooromgeving; hier alleen de foto zoals op het dashboard, de titel van
   de pagina over de foto, de pillen per stap en wat er in het vlak staat. Alles onder .app--client. Alleen tokens. */

/* Kopfoto: dezelfde hoogte en uitsnede als op het dashboard */
.app.app--client > .backdrop { background-position: center, center, 50% 0%; }
.app.app--client { --band: 30rem; }
@media (min-width: 64rem) {
  .app.app--client { --deck: clamp(17rem, 42dvh, 36rem); --band: calc(100dvh - var(--deck) * 0.4); }
}

/* De titel van de pagina staat over de foto, op de plek en in de maat van de titels in het kantoor */
.client { display: grid; gap: 0.625rem; min-width: 0; }
.client__head .page-head { display: grid; gap: var(--s-2); margin: 0; }
.client__head .page-head h1 { max-width: 22ch; font-size: clamp(2.25rem, 1.5rem + 2vw, 3.5rem); font-weight: 300; line-height: 1.04; letter-spacing: -0.025em; }
.client__head .eyebrow { font-family: var(--font-sans); font-size: var(--step--1); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.client__head .lede { max-width: 40rem; color: var(--ink-2); font-size: var(--step-0); }
.client__head .back { display: inline-flex; align-items: center; gap: var(--s-2); width: fit-content; margin-bottom: var(--s-3); padding: 0.4rem 0.9rem 0.4rem 0.7rem; border: 1px solid var(--glass-edge); border-radius: 999px; background: var(--glass); color: var(--ink); font-size: var(--step--1); text-decoration: none; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.client__head:empty { display: none; }
/* Tabbladen en pillen wijzen de weg; een terug-link en een regel boven de titel zijn hier overbodig, zodat de titel
   op precies dezelfde hoogte staat als in het kantoor */
.app--client:not(.app--public) .client__head .back, .app--client:not(.app--public) .client__head .eyebrow { display: none; }

/* Tabbladen: een vinkje bij een stap die klaar is */
.tabs__done { display: inline-grid; place-items: center; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--ok-soft); color: var(--ok); }
.tabs__done .i { width: 0.7rem; height: 0.7rem; }
.round.round--label { width: auto; padding: 0 var(--s-4); font-size: var(--step--1); font-weight: 500; }

/* De bladen binnen een stap als pillen tussen de titel en het vlak */
.substeps { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.substep { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.5rem; padding: 0 var(--s-4) 0 0.4rem; border: 1px solid var(--glass-edge); border-radius: 999px; background: var(--glass); color: var(--ink-2); font-size: var(--step--1); font-weight: 500; text-decoration: none; -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); transition: background-color var(--dur) var(--ease); }
.substep:hover { background: var(--sheet); color: var(--ink); }
.substep[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.substep__mark { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--sheet-2); color: var(--ink-2); font-size: var(--step--2); font-weight: 700; font-variant-numeric: tabular-nums; }
.substep__mark .i { width: 0.85rem; height: 0.85rem; }
.substep--done .substep__mark { background: var(--ok-soft); color: var(--ok); }
.substep[aria-current="page"] .substep__mark { background: var(--accent); color: var(--on-ink); }

/* Het vlak: glas zoals de vlakken op het dashboard, zo hoog als de inhoud */
.client__body {
  position: relative;
  min-width: 0;
  padding: clamp(var(--s-4), 2.2vw, var(--s-6));
  border: 1px solid var(--glass-edge);
  background: linear-gradient(170deg, var(--glass-top), var(--sheet) 22rem);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 40px 80px -48px var(--glass-shadow);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  backdrop-filter: blur(28px) saturate(1.5);
}
.client__body > :first-child { margin-top: 0; }
.client__body > form, .client__body > .prose, .client__body > .stack { max-width: 44rem; }
/* Op een breed scherm een kaart in het midden van de pagina, met de pillen erboven in dezelfde kolom */
.client__body, .substeps { justify-self: center; width: min(100%, 60rem); }
.substeps { padding-inline: 0; }
.client--narrow .client__body { width: min(100%, 32rem); }

/* Lange formulieren in stappen (app.js): de stappen links, de velden rechts; op de telefoon erboven */
.wizard { display: flex; gap: var(--s-1); margin: 0 0 var(--s-2); padding: 0; overflow-x: auto; list-style: none; scrollbar-width: none; }
.wizard__step { display: inline-flex; align-items: center; gap: var(--s-2); width: 100%; min-height: 2.375rem; padding: 0.25rem var(--s-3) 0.25rem 0.25rem; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: var(--step--1); font-weight: 500; text-align: left; white-space: nowrap; cursor: pointer; transition: background-color var(--dur) var(--ease); }
.wizard__step:hover { background: var(--sheet-2); color: var(--ink); }
.wizard__no { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: none; border: 1px solid var(--line); border-radius: 50%; background: var(--sheet); font-size: var(--step--2); font-weight: 700; font-variant-numeric: tabular-nums; }
.wizard__step.is-done .wizard__no { border-color: transparent; background: var(--ok-soft); color: var(--ok); }
.wizard__step[aria-current="step"] { background: var(--sheet-2); color: var(--ink); }
.wizard__step[aria-current="step"] .wizard__no { border-color: var(--accent); background: var(--accent); color: var(--on-ink); }
.wizard__count { margin: 0 0 var(--s-2); color: var(--muted); font-size: var(--step--2); }
.is-off { display: none !important; }

/* Desktop: zelfde opbouw als het dashboard, zonder voettekst. De kaart is zo hoog als de inhoud; app.js
   zet een formulier in stappen vast op zijn langste stap, zodat de kaart niet verspringt tussen de stappen.
   Past zelfs die niet op het scherm, dan stopt de kaart boven de onderrand en scrolt de stap erbinnen. */
html:has(.app--client) { scrollbar-gutter: stable; }
@media (min-width: 64rem) {
  .app.app--client:not(.app--public) .app__content { padding-bottom: var(--s-3); }
  .app.app--client:not(.app--public) .app__foot { display: none; }
  .app--client:not(.app--public) .client__body { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }

  .client__body form:has(> .wizard) { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: var(--s-6); align-items: start; max-width: none; }
  .client__body form:has(> .wizard) > * { grid-column: 2; }
  .client__body form:has(> .wizard) > .wizard { grid-row: 1 / -1; grid-column: 1; align-self: stretch; flex-direction: column; gap: 2px; margin: 0; padding-right: var(--s-4); border-right: 1px solid var(--line); }
  .client__body form:has(> .wizard) > fieldset.group { align-self: start; min-height: 0; max-height: 100%; margin: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .client__body form:has(> .wizard) > .actions { margin: var(--s-3) 0 0; padding-top: var(--s-3); }
  /* Tijdens het meten (app.js) zonder grens, zodat elke stap op zijn echte hoogte gemeten wordt */
  .client__body form.is-measuring { grid-template-rows: auto auto auto; }
  .client__body form.is-measuring > fieldset.group { max-height: none; overflow: visible; }
}

/* Groepen velden: een zacht vlak met een gewone kop */
.app--client .group { margin: 0 0 var(--s-3); padding: var(--s-4); border-radius: var(--radius-lg); background: var(--sheet-2); }
.app--client .group > legend { float: left; width: 100%; margin-bottom: var(--s-3); padding: 0; border: 0; color: var(--ink); font-family: var(--font-sans); font-size: var(--step-0); font-weight: 600; letter-spacing: -0.01em; text-transform: none; }
.app--client .group > .field:last-child, .app--client .group > .choices:last-child { margin-bottom: 0; }

/* Velden: compact, allemaal even hoog en op één lijn; een label in een rij past op één regel */
.app--client .row { align-items: end; gap: 0 var(--s-3); }
.app--client .row .field__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app--client .field { gap: 0.35rem; margin-bottom: var(--s-3); }
.app--client .choices { margin-bottom: var(--s-3); }
.app--client .choices > legend { margin-bottom: 0.35rem; }
.app--client .choices__options { gap: 0.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.app--client .choices--inline .choices__options { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); }
.app--client .field__label, .app--client .choices > legend { font-size: var(--step--1); font-weight: 500; }
.app--client .field__hint { font-size: var(--step--2); }
.app--client .input, .app--client .choice { border-color: var(--line); border-radius: 10px; }
.app--client .input { min-height: 2.625rem; padding: 0.5rem 0.75rem; background: var(--sheet); font-size: var(--step--1); }
.app--client input.input, .app--client select.input { height: 2.625rem; }
.app--client .input:hover, .app--client .choice:hover { border-color: var(--line-strong); }
.app--client .input:focus, .app--client .input:focus-within { border-color: var(--accent); outline: 3px solid var(--accent-soft); outline-offset: 0; }
.app--client .choice { min-height: 2.625rem; padding: 0.45rem 0.75rem; gap: var(--s-2); background: var(--sheet); font-size: var(--step--1); }
.app--client .choice:has(:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: none; }
.app--client .choice input:checked { border-color: var(--accent); }
.app--client .choice input::before { background: var(--accent); }
.app--client .choice input[type="checkbox"]:checked { border-color: var(--accent); background: var(--accent); }
.app--client .why { font-size: var(--step--2); }
.app--client .why summary { color: var(--ink-2); }
/* Knoppen: rond, in het marine van het logo */
.app--client .btn { min-height: 2.625rem; border-radius: 999px; padding-inline: var(--s-5); font-size: var(--step--1); }
.app--client .btn:not(.btn--line):not(.btn--quiet):not(.btn--danger) { border-color: var(--logo); background: var(--logo); color: var(--sheet); }
.app--client .btn:not(.btn--line):not(.btn--quiet):not(.btn--danger):hover { background: color-mix(in srgb, var(--logo) 86%, var(--sheet)); }
.app--client .btn--line { border-color: var(--line-strong); background: var(--sheet); }
.app--client .actions { gap: var(--s-2); }

/* Overzicht: de bladen als gegroepeerde lijst, de stand als kaart */
.app--client .overview__main { max-width: none; }
.app--client .sheets { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--sheet); }
.app--client .sheets > li { border-bottom: 1px solid var(--line); }
.app--client .sheets > li:last-child { border-bottom: 0; }
.app--client .sheet { padding-inline: var(--s-4); transition: background-color var(--dur) var(--ease); }
.app--client .sheet:hover { background: var(--sheet-2); }
.app--client .sheet__no { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border-radius: 50%; background: var(--sheet-2); color: var(--ink-2); font-family: var(--font-sans); font-size: var(--step--2); font-weight: 600; }
.app--client .status { justify-self: start; width: fit-content; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--sheet-2); font-family: var(--font-sans); font-size: var(--step--2); font-weight: 600; letter-spacing: 0; text-transform: none; }
.app--client .status--ok { background: var(--ok-soft); }
.app--client .status--warn { background: var(--warn-soft); }
.app--client .status--bad { background: var(--bad-soft); }
.app--client .status--info { background: var(--info-soft); }
.app--client .titleblock { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--sheet); }
.app--client .titleblock dt { font-family: var(--font-sans); font-size: var(--step--2); font-weight: 500; letter-spacing: 0; text-transform: none; }
.app--client .meter { width: 100%; height: 0.375rem; border: 0; border-radius: 999px; -webkit-appearance: none; appearance: none; background: var(--sheet-2); overflow: hidden; }
.app--client .meter::-webkit-progress-bar { border-radius: 999px; background: var(--sheet-2); }
.app--client .meter::-webkit-progress-value { border-radius: 999px; background: var(--accent); }
.app--client .meter::-moz-progress-bar { border-radius: 999px; background: var(--accent); }
.app--client .home { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.app--client .panel { border-radius: var(--radius-lg); }
.app--client .panel--ink { border: 0; background: linear-gradient(140deg, var(--logo), color-mix(in srgb, var(--logo) 70%, var(--accent))); color: var(--sheet); }
.app--client .panel--ink h2, .app--client .panel--ink p { color: var(--sheet); }
.app--client .panel--ink .btn:not(.btn--line):not(.btn--quiet):not(.btn--danger) { border-color: var(--sheet); background: var(--sheet); color: var(--logo); }
.app--client .notice { border-radius: var(--radius-lg); }

/* Lijsten in de bladen: geen harde zwarte lijn, gewone cijfers, zachte uploadvlakken */
.app--client .checklist, .app--client .vragen, .app--client .zaken, .app--client .people { border-top-color: var(--line); }
.app--client .check__no, .app--client .pages__no, .app--client .photo__date,
.app--client .vraag > .choices > legend::before { font-family: var(--font-sans); letter-spacing: 0; }
.app--client .vraag > .choices > legend::before { color: var(--accent); font-weight: 600; }
.app--client .drop { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--sheet-2); }
.app--client .drop:hover { border-color: var(--line-strong); }

/* Telefoon: pillen op één rij om opzij te schuiven, tekst over de foto met een zachte gloed, en de plakkende
   knoppenbalk is glas in plaats van een grijze strook */
@media (max-width: 40rem) {
  .substeps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .substep { flex: none; }
  .client__head .page-head { text-shadow: 0 0 18px var(--paper), 0 0 6px var(--paper); }
  .app--client .actions--sticky {
    margin-inline: 0;
    border-top: 1px solid var(--glass-edge);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--glass);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
  }
}