/* De kantooromgeving: bovenbalk met tabbladen, kopfoto, zwevende vlakken, pillen en ronde knoppen.
   Alles over de volle breedte; de marge langs de rand groeit mee met het scherm. Alleen tokens. */

.app { --gutter: clamp(1.25rem, 4vw, 4.5rem); --edge: 0.625rem; --topbar-h: auto; position: relative; display: flex; flex: 1; flex-direction: column; min-height: 100dvh; isolation: isolate; }
.app > * { position: relative; z-index: 1; }

/* Kopfoto: helder, over de volle breedte; alleen onderaan loopt hij over in het papier, achter de vlakken */
.app > .backdrop {
  --hero-img: url(/assets/brand/hero-1600.jpg);
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: var(--band, 22rem);
  background-color: var(--paper);
  background-image:
    linear-gradient(to bottom, transparent 72%, var(--paper) 99%),
    linear-gradient(var(--hero-dim), var(--hero-dim)),
    var(--hero-img);
  background-position: center, center, 50% 0%;
  background-size: cover;
  background-repeat: no-repeat;
}
.app--full { --band: clamp(36rem, 84vh, 58rem); --deck: auto; }
.app--page { --band: 21rem; }
.app--page > .backdrop { background-position: center, center, 50% 22%; }

@media (max-width: 48rem) {
  .app > .backdrop { --hero-img: url(/assets/brand/hero-960.jpg); }
  .app--full { --band: 30rem; }
  .app--page { --band: 17rem; }
}
@media (min-width: 100rem), (min-width: 64rem) and (min-resolution: 1.5dppx) {
  .app > .backdrop { --hero-img: url(/assets/brand/hero-2560.jpg); }
}
@media (min-width: 160rem), (min-width: 100rem) and (min-resolution: 1.5dppx) {
  .app > .backdrop { --hero-img: url(/assets/brand/hero-3840.jpg); }
}

/* Bovenbalk: logo links, tabbladen in het midden, ronde knoppen rechts */
.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s-3) var(--s-5);
  padding: var(--s-5) var(--gutter) 0;
}
.topbar__brand { display: flex; align-items: center; gap: var(--s-4); justify-self: start; min-height: 3rem; color: var(--ink); text-decoration: none; }
.topbar__brand .logo { height: 1.3rem; }
.topbar__sub { padding-left: var(--s-4); border-left: var(--hair) solid color-mix(in srgb, var(--ink) 30%, transparent); color: var(--ink-2); font-size: var(--step--2); line-height: 1.3; }

.tabs {
  position: relative;
  display: flex;
  justify-content: center;
  gap: var(--s-1) var(--s-6);
  min-width: 0;
  padding: 0 var(--s-2);
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ink) 14%, transparent);
}
.tabs a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: none;
  min-height: 2.75rem;
  color: var(--ink-2);
  font-size: var(--step--1);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.tabs a[aria-current="page"]::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; border-radius: 2px; background: var(--ink); }
.tabs__count { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.125rem; padding: 0 0.3rem; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: 0.625rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.topbar__tools { display: flex; align-items: center; justify-self: end; gap: var(--s-2); }
.topbar__tools form { display: contents; }

/* Ronde knop, ook als link */
.round {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  padding: 0;
  border: var(--hair) solid var(--glass-line);
  border-radius: 50%;
  background: var(--glass);
  color: var(--ink);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);
  cursor: pointer;
  text-decoration: none;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.round:hover { background: var(--sheet); }
.round:active { transform: scale(0.96); }
.round .i { width: 1rem; height: 1rem; }
.round[aria-current="page"], .round--ink { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.round--ink:hover { background: var(--ink); }
.round--s { width: 2rem; height: 2rem; }
.round--s .i { width: 0.875rem; height: 0.875rem; }

/* Kleur per stap van de pijplijn: fase 1 amber, fase 2a groen, de opname oranje, daarna inkt en grijs */
.stage--uitnodiging, .stage--account, .stage--tweestap, .stage--keuze, .stage--gegevens, .stage--eigenaren { --stage: var(--st-nieuw); }
.stage--woning, .stage--documenten, .stage--fotos, .stage--vragenlijst, .stage--zaken, .stage--planning { --stage: var(--st-woning); }
.stage--opname { --stage: var(--st-opname); }
.stage--doorgestuurd { --stage: var(--st-doorgestuurd); }
.stage--kopen { --stage: var(--st-kopen); }

/* Zwart telplaatje, zoals naast een titel */
.badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.75rem;
  height: 1.375rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  vertical-align: top;
}

/* Pil: een filter of snelkoppeling met sleutel en waarde */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0 0.35rem 0 0.9rem;
  border: var(--hair) solid var(--glass-line);
  border-radius: 999px;
  background: var(--sheet);
  color: var(--ink);
  font-size: var(--step--1);
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 8%, transparent);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pill__k { color: var(--muted); }
.pill__v { font-weight: 500; font-variant-numeric: tabular-nums; }
.pill__plus { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; }
.pill__plus .i { width: 0.75rem; height: 0.75rem; }
.pill:hover { background: var(--sheet-2); }
.pill[aria-current="true"] { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.pill[aria-current="true"] .pill__k { color: color-mix(in srgb, var(--on-ink) 70%, transparent); }

/* Zwevend vlak: wit en doorschijnend over de foto, ruime hoeken, zachte schaduw */
.glass {
  min-width: 0;
  border: var(--hair) solid var(--glass-line);
  border-radius: var(--radius-xl);
  background: var(--glass);
  box-shadow: 0 1px 1px color-mix(in srgb, var(--ink) 4%, transparent), 0 30px 60px -36px color-mix(in srgb, var(--ink) 35%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
}
.surface {
  display: grid;
  align-content: start;
  gap: var(--s-4);
  min-width: 0;
  padding: var(--s-5);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--sheet);
  box-shadow: 0 1px 1px color-mix(in srgb, var(--ink) 3%, transparent), 0 24px 48px -36px color-mix(in srgb, var(--ink) 30%, transparent);
}
.surface__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.surface__head h2 { display: flex; align-items: center; gap: var(--s-2); font-size: var(--step-0); font-weight: 500; letter-spacing: -0.01em; }
.surface__head p { color: var(--muted); font-size: var(--step--1); }

/* Kop van een pagina, over de foto: grote dunne titel met teller */
/* De titel staat op één lijn met het logo; de vlakken eronder lopen tot vlak bij de schermrand */
.masthead { position: relative; display: grid; align-content: start; gap: var(--s-3); padding: var(--s-7) calc(var(--gutter) - var(--edge)) var(--s-6); }
.masthead__eyebrow { color: var(--ink-2); font-size: var(--step--1); }
.masthead .masthead__title { max-width: 16ch; font-size: clamp(2.5rem, 1.4rem + 2.7vw, 4.25rem); font-weight: 300; line-height: 1.04; letter-spacing: -0.025em; }
.masthead .masthead__title .badge { position: relative; top: 0.25em; margin-left: 0.25em; }
.masthead--page { padding-bottom: var(--s-5); }
.masthead.masthead--page .masthead__title { max-width: none; font-size: clamp(2.25rem, 1.5rem + 2vw, 3.5rem); }

.app__content { flex: 1; width: 100%; padding: 0 var(--edge) var(--s-8); }
/* Pagina's zonder kopfoto (een dossier, het account) houden de gewone marge: daar staat vooral tekst */
.app:not(.app--full):not(.app--page) .app__content { padding-inline: var(--gutter); }
.app__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); width: 100%; padding: var(--s-4) var(--gutter); color: var(--muted); font-size: var(--step--2); }

/* Smal scherm: tabbladen onder logo en knoppen, opzij te schuiven */
@media (max-width: 63.99rem) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; padding-top: var(--s-4); }
  .tabs { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .topbar__sub { display: none; }
  .topbar__brand .logo { height: 1rem; }
}

/* Desktop: de bovenbalk heeft een vaste hoogte, zodat het dashboard precies één scherm vult.
   Zoals in het ontwerp krijgen de vlakken ruim 40 procent van de schermhoogte, de foto met de titel de rest. */
@media (min-width: 64rem) {
  .app { --topbar-h: 5rem; }
  .topbar { height: var(--topbar-h); padding-top: var(--s-4); }
  .app--full { --deck: clamp(17rem, 42dvh, 36rem); --band: calc(100dvh - var(--deck) * 0.4); }
}

/* Melding na een handeling in de kantooromgeving: zweeft rechtsboven onder de bovenbalk, buiten de
   opmaak, zodat de vlakken niet verspringen. app.js haalt hem na een paar seconden weg. */
.toast { position: fixed; z-index: 50; top: calc(var(--topbar-h, 5rem) + var(--s-2)); right: var(--edge); left: var(--edge); display: grid; justify-items: end; pointer-events: none; }
.toast:empty { display: none; }
.toast .notice { width: min(100%, 28rem); margin: 0; border-radius: var(--radius-lg); background: var(--sheet); box-shadow: 0 20px 40px -20px var(--glass-shadow); pointer-events: auto; cursor: pointer; }
.toast [hidden] { display: none; }

@media (prefers-reduced-transparency: reduce) {
  .glass, .round:not(.round--ink):not([aria-current="page"]) { background: var(--sheet); }
  .glass, .round { -webkit-backdrop-filter: none; backdrop-filter: none; }
}