/* CN-beheer · INLOGGEN (M3): de deur van het atelier (ONTWERP-V2 §4.0), de stap omhoog en Instellingen › Beveiliging.
   Familie van het WordPress-inlogscherm van charmenouveau.com (_lancering/inlog, "de deur van het atelier"): een vel papier op de wand,
   het S5-monogram links en de datum rechts, "Welkom terug" in CN Kop met de wending cursief, één knop in inkt, en onderaan de handtekening.
   Bij daglicht valt het licht van het loftraam over de wand; in het donker brandt de lamp. Telefoon eerst. Alleen de tokens van de app
   (tokens.css); de wand is de enige eigen kleur (achtergrond, geen tekst erop). Geen beweging bij "minder beweging". */

:root { --deur-wand: #e8e0d6; --deur-licht: .62; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --deur-wand: #1a120e; --deur-licht: 0; } }
:root[data-theme="dark"] { --deur-wand: #1a120e; --deur-licht: 0; }

/* ------------------------------------------------------------------ de deur: een venster over alles heen (ook over een open blad) */
dialog.deur {
  position: fixed; inset: 0; z-index: 100;
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; box-sizing: border-box;
  padding: max(12px, var(--cn-safe-t)) 12px max(12px, var(--cn-safe-b));
  background: var(--deur-wand); color: var(--cn-text-2);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
}
dialog.deur:not([open]) { display: none; }
dialog.deur::backdrop { background: var(--deur-wand); }
/* het licht op de wand: bij dag het loftraam (rechtsboven, scheef, zacht), 's avonds de lamp. Versiering, nooit klikbaar. */
dialog.deur::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 900' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3Cfilter id='z' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23z)' fill='%23fffaf3' fill-opacity='.62' transform='translate(610 -40) skewX(-26) skewY(10)'%3E%3Crect x='0' y='0' width='150' height='200' rx='3'/%3E%3Crect x='166' y='0' width='150' height='200' rx='3'/%3E%3Crect x='332' y='0' width='150' height='200' rx='3'/%3E%3Crect x='498' y='0' width='150' height='200' rx='3'/%3E%3Crect x='0' y='216' width='150' height='200' rx='3'/%3E%3Crect x='166' y='216' width='150' height='200' rx='3'/%3E%3Crect x='332' y='216' width='150' height='200' rx='3'/%3E%3Crect x='498' y='216' width='150' height='200' rx='3'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat,
    radial-gradient(120% 90% at 50% 120%, rgb(120 92 70 / .10), transparent 60%);
  opacity: 1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) dialog.deur::before {
    background: radial-gradient(70vmax 58vmax at 90% -10%, rgb(255 178 104 / .18), rgb(255 178 104 / .06) 45%, transparent 75%), radial-gradient(120% 90% at 50% 120%, rgb(0 0 0 / .35), transparent 60%);
  }
}
:root[data-theme="dark"] dialog.deur::before {
  background: radial-gradient(70vmax 58vmax at 90% -10%, rgb(255 178 104 / .18), rgb(255 178 104 / .06) 45%, transparent 75%), radial-gradient(120% 90% at 50% 120%, rgb(0 0 0 / .35), transparent 60%);
}
html[data-geforceerd-donker] dialog.deur::before { content: none; }

/* ------------------------------------------------------------------ het vel */
.deur-vel {
  position: relative; z-index: 1; box-sizing: border-box;
  width: min(440px, 100%); margin: auto; padding: 24px 22px 18px;
  border-radius: var(--cn-r); background: var(--cn-card); color: var(--cn-text-2);
  box-shadow: 0 1px 1px rgb(36 24 18 / .05), 0 3px 8px -3px rgb(36 24 18 / .10), 0 34px 70px -34px rgb(36 24 18 / .46);
  animation: deur-in .42s var(--cn-silk) both;
}
/* de korrel van het CN-papier */
.deur-vel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--cn-papier-beeld) 0 0 / 256px; opacity: .07; mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .deur-vel { box-shadow: 0 1px 1px rgb(0 0 0 / .35), 0 36px 80px -34px rgb(0 0 0 / .8), inset 0 1px 0 rgb(255 236 210 / .05); } }
:root[data-theme="dark"] .deur-vel { box-shadow: 0 1px 1px rgb(0 0 0 / .35), 0 36px 80px -34px rgb(0 0 0 / .8), inset 0 1px 0 rgb(255 236 210 / .05); }
dialog.deur.weg .deur-vel { animation: deur-uit .28s ease-in both; }
dialog.deur.weg { transition: opacity .28s ease-in; opacity: 0; }
@keyframes deur-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes deur-uit { to { opacity: 0; transform: translateY(-6px) scale(.99); } }
@media (prefers-reduced-motion: reduce) { .deur-vel, dialog.deur.weg .deur-vel { animation: none; } dialog.deur.weg { transition: none; } }

/* boven: het monogram links, de datum rechts (zoals op de factuur) */
.deur-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 22px; }
.deur-mono {
  display: block; width: 38px; height: 31px; flex: none; background: var(--cn-text);
  -webkit-mask: url("../beeld/s5-monogram.57e91c547d.svg") center / contain no-repeat; mask: url("../beeld/s5-monogram.57e91c547d.svg") center / contain no-repeat;
}
.deur-datum { margin: 0; font: 500 11.5px/1.3 var(--cn-f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cn-muted); text-align: right; }
.deur-titel { font: 400 clamp(32px, 9vw, 40px)/1.06 var(--cn-f-serif); letter-spacing: -.012em; color: var(--cn-text); margin: 0 0 8px; }
.deur-titel em { font-style: italic; }
.deur-titel:focus { outline: none; }
.deur-regel { margin: 0 0 20px; font-size: var(--cn-fs-s); color: var(--cn-text-2); max-width: 34ch; }

/* een melding: een zacht vlak, met de zin van ONTWERP-V2 §4.0 */
.deur-melding { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 11px 13px; border-radius: var(--cn-r-xs); font-size: var(--cn-fs-s); line-height: 1.45; color: var(--cn-text); background: var(--cn-bad-tint); }
.deur-melding.info { background: var(--cn-info-tint); }
.deur-melding .icon { flex: none; margin-top: 2px; color: var(--cn-bad); }
.deur-melding.info .icon { color: var(--cn-text-2); }
.deur-melding[hidden] { display: none; }

/* de routes: de passkey (één grote knop) en de code (reserve) */
.deur-route { display: flex; flex-direction: column; gap: 14px; }
.deur-route[hidden] { display: none; }
.deur-route .field { margin: 0; }
.deur-knop {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 0 18px 0 16px;
  border: 0; border-radius: var(--cn-pill); background: var(--cn-solid); color: var(--cn-on-accent);
  font: 500 16px/1 var(--cn-f-sans); cursor: pointer; text-align: left;
  box-shadow: 0 12px 26px -14px rgb(36 24 18 / .55); transition: background var(--cn-t-fast), transform var(--cn-t-fast);
}
.deur-knop:hover { background: var(--cn-solid-hover); }
.deur-knop:active { transform: scale(.99); }
.deur-knop:focus-visible { outline: 2px solid var(--cn-text); outline-offset: 3px; }
/* de eerste focus (na het laden) zonder ring; de eerste toets zet hem terug (toegang.js, data-stil) */
.deur[data-stil] .deur-knop:focus-visible { outline: none; }
.deur-knop:disabled { cursor: progress; opacity: .8; }
.deur-knop-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--cn-on-accent) 14%, transparent); flex: none; }
.deur-knop-t { flex: 1; }
.deur-knop-pijl { display: grid; place-items: center; flex: none; }
.deur-knop.bezig .deur-knop-ic { animation: cn-adem 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .deur-knop.bezig .deur-knop-ic { animation: none; } }

.deur-check { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 4px 0; cursor: pointer; }
.deur-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--cn-text); flex: none; }
.deur-check-t { display: block; color: var(--cn-text); font-size: var(--cn-fs-s); }
.deur-check-s { display: block; color: var(--cn-muted); font-size: var(--cn-fs-xs); }
.deur-link {
  align-self: flex-start; min-height: 44px; padding: 0 2px; border: 0; background: none; cursor: pointer;
  font: 500 var(--cn-fs-s)/1.4 var(--cn-f-sans); color: var(--cn-text);
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--cn-text) 35%, transparent); text-underline-offset: 4px;
}
.deur-link:hover { text-decoration-color: currentColor; }
.deur-ww { position: relative; }
.deur-ww .input { width: 100%; padding-right: 52px; }
.deur-oog { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--cn-muted); cursor: pointer; border-radius: 50%; }
.deur-oog[aria-pressed="true"] { color: var(--cn-text); }
.deur-klein { margin: 0; font-size: var(--cn-fs-xs); color: var(--cn-muted); }

/* onderaan: een haarlijn, links het adres van het atelier, rechts de handtekening */
.deur-voet { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--cn-hair); }
.deur-voet-t { font-size: var(--cn-fs-xs); color: var(--cn-muted); }
.deur-hand {
  display: block; width: 92px; height: 26px; flex: none; background: var(--cn-text); opacity: .86;
  -webkit-mask: url("../beeld/s5-handtekening.76a98168b6.svg") right center / contain no-repeat; mask: url("../beeld/s5-handtekening.76a98168b6.svg") right center / contain no-repeat;
}
@media (min-width: 768px) {
  .deur-vel { padding: 30px 30px 20px; }
  .deur-regel { margin-bottom: 24px; }
}
/* de app onder de deur blijft verborgen (ook voor een schermlezer) */
html[data-deur] .app { visibility: hidden; }

/* ------------------------------------------------------------------ de stap omhoog (blad) */
.omhoog p { margin: 0 0 12px; }
.omhoog-reserve { margin: 6px 0 0; padding: 12px 14px; border-radius: var(--cn-r-xs); background: var(--cn-bg-2); }
.omhoog-fout { margin: 12px 0 0; }
.omhoog-fout[hidden] { display: none; }

/* ------------------------------------------------------------------ Instellingen › Beveiliging */
.bv { display: flex; flex-direction: column; gap: 12px; }
.bv-plek { display: flex; flex-direction: column; gap: 12px; }
.bv-blok { margin: 0; }
.bv-blok + .bv-blok { margin-top: 0; }
.bv-blok h2 { font-size: 24px; margin: 0; }
.bv-blok .bv-kop { align-items: center; margin-bottom: 6px; }
.bv-blok .bv-uitleg { margin: 0 0 12px; max-width: 62ch; }
.bv-lijst { margin: 0 0 8px; padding: 0; list-style: none; }
.bv-rij { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--cn-hair); }
.bv-rij:first-child { border-top: 0; }
.bv-rij .lead { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--cn-nude); color: var(--cn-text); }
.bv-rij .main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bv-rij .t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: var(--cn-text); font-weight: 500; }
.bv-rij .s { color: var(--cn-muted); font-size: var(--cn-fs-xs); }
.bv-acties { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.bv-acties:empty { display: none; }
.bv-acties .btn.ghost { padding-left: 10px; padding-right: 10px; }
/* "Weghalen" bij de laatste passkey: rustig grijs, niet nadrukkelijker dan de knoppen die wel werken */
.bv-acties .btn.ghost[disabled] { background: transparent; border-color: transparent; }
@media (min-width: 640px) {
  .bv-rij { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .bv-acties { grid-column: 3; justify-content: flex-end; }
}
.bv-raad { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 12px; font-size: var(--cn-fs-s); color: var(--cn-text-2); }
.bv-raad .icon { flex: none; margin-top: 2px; }
.bv-klein { margin: 8px 0 0; font-size: var(--cn-fs-xs); }
.bv-uitleg .kv { margin-top: 8px; }
.bv-uitleg .callout, .bv-uitleg .note.demo { margin-top: 12px; }
.bv-welkom { margin: 0; }
.bv-laden { margin: 12px 4px; }
.bv-form .field { margin-bottom: 12px; }

/* de authenticator-app */
.bv-stappen { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 6px; }
.bv-qr { display: grid; place-items: center; margin: 4px 0 14px; padding: 14px; border-radius: var(--cn-r-s); background: #fff; }
.bv-qr svg { width: min(220px, 70vw); height: auto; display: block; }
.bv-sleutel { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--cn-r-xs); background: var(--cn-bg-2); }
.bv-sleutel-k { margin: 0 0 4px; font: 500 var(--cn-fs-label)/1.4 var(--cn-f-sans); letter-spacing: var(--cn-track); text-transform: uppercase; color: var(--cn-muted); }
.bv-sleutel-v { display: block; margin: 0 0 10px; font: 500 15px/1.6 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .04em; color: var(--cn-text); word-break: break-all; }

/* herstelcodes: twee kolommen, groot en rustig, om over te schrijven */
.bv-codes { margin: 14px 0; padding: 14px 16px 14px 36px; border-radius: var(--cn-r-xs); background: var(--cn-bg-2); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.bv-codes code { font: 500 16px/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .05em; color: var(--cn-text); }
.bv-codes li::marker { color: var(--cn-muted); font-size: var(--cn-fs-xs); }