/* Scope Compass - het inlogscherm (ontwerp "Inlogscherm" 3a desktop en 3b mobiel, Claude Design, 4 okt 2026).
   De maten en kleuren komen uit het ontwerp; waar de app een token heeft, staat het token.
   Poppins 600 (OFL) voor de merknaam en de slogan wordt zelf meegeleverd, net als op scopecompass.nl:
   de CSP laat geen lettertypen van buiten toe. Alleen 600 en alleen Latijn; de slogan (500 in het
   ontwerp) valt daardoor op 600. */
@font-face { font-family: Poppins; font-style: normal; font-weight: 500 600; font-display: swap; src: url('../../assets/fonts/Poppins-600-latin.woff2') format('woff2'); }

/* Geen overflow:hidden hier: de achtergrondlaag staat vast (fixed) en is bewust groter dan het scherm
   (zoals cover); een vaste laag laat de pagina niet scrollen, dus er valt niets af te knippen. */
.inlog { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: #EEF0FB; }

/* De liggende achtergrond met Vera. Het vlak is altijd zo groot als "cover" en staat in het midden,
   zodat de tekstwolk (in procenten van het beeld) altijd naast Vera blijft staan. */
.inlog-beeld { position: fixed; left: 50%; top: 50%; width: max(100vw, calc(100vh * 1672 / 941)); aspect-ratio: 1672 / 941;
  transform: translate(-50%, -50%); background: url('../../assets/inlog/achtergrond-liggend.webp') center / 100% 100% no-repeat; pointer-events: none; }
.inlog-wolk { position: absolute; right: 14%; bottom: 53%; width: max-content; max-width: 200px; background: #fff; border: 1px solid #ECEDF0;
  border-radius: 12px 12px 4px 12px; box-shadow: 0 4px 16px rgba(16, 24, 40, .10); padding: 10px 14px; font-size: 13.5px; line-height: 1.45;
  color: #111827; text-wrap: pretty; }

.inlog-midden { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 20px; }
.inlog-kaart { width: 420px; max-width: 100%; box-sizing: border-box; background: #fff; border: 1px solid #ECEDF0; border-radius: 12px;
  box-shadow: 0 4px 16px rgba(16, 24, 40, .10); padding: 32px 36px 26px; display: flex; flex-direction: column; gap: 24px; }

/* De afzender: in de kaart op de desktop, erboven op de telefoon. */
.inlog-afzender { display: none; }
.inlog-afzender-kaart { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.inlog-mark { width: 56px; height: 56px; display: block; }
.inlog-naam { font-family: Poppins, var(--font); font-weight: 600; font-size: 24px; letter-spacing: -.01em; color: #14105A; line-height: 1.15; }
.inlog-slogan { font-family: Poppins, var(--font); font-weight: 500; font-size: 13px; color: var(--pri, #4F46E5); }

/* Met een klantmerk: het klantlogo met de belofte van de app. */
.inlog-klant { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #F7F8FC; border-radius: 8px; font-size: 12.5px; line-height: 1.45; color: var(--text-2, #4B5563); }
.inlog-klant img { max-height: 32px; max-width: 120px; width: auto; object-fit: contain; flex: none; }

.inlog-kop { display: flex; flex-direction: column; gap: 2px; }
.inlog-titel { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.inlog-sub { margin: 0; font-size: 13.5px; color: #6B7280; }

.inlog-form { display: flex; flex-direction: column; gap: 16px; }
.inlog-veld { display: flex; flex-direction: column; gap: 6px; }
.inlog-veld .input { width: 100%; box-sizing: border-box; }
.inlog-labelrij { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.inlog-label { font-size: 13px; font-weight: 500; color: var(--text, #111827); }
.inlog-link { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; color: var(--pri, #4F46E5); cursor: pointer; }
.inlog-link:hover, .inlog-a:hover { color: var(--pri-hover, #4338CA); text-decoration: underline; }
.inlog-a { color: var(--pri, #4F46E5); text-decoration: none; }
.inlog-hulp { font-size: 12.5px; line-height: 1.5; color: var(--text-2, #4B5563); background: #F7F8FC; border-radius: 8px; padding: 10px 12px; }
.inlog-hulp[hidden] { display: none; }
.inlog-blijf { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #374151; cursor: pointer; }
.inlog-blijf input { width: 16px; height: 16px; margin: 0; accent-color: var(--pri, #4F46E5); }
.inlog-knop { width: 100%; height: 40px; justify-content: center; gap: 8px; }
.inlog-melding { font-size: 12.5px; line-height: 1.5; color: var(--text-3, #6B7280); }
.inlog-melding:empty { display: none; }
.inlog-melding[data-fout] { color: var(--red-strong, #B42A33); }
.inlog-akkoord { font-size: 12px; line-height: 1.5; color: #6B7280; text-align: center; text-wrap: pretty; }
.inlog-problemen { font-size: 12.5px; color: #6B7280; text-align: center; padding-top: 14px; border-top: 1px solid #ECEDF0; }

.inlog-lang { display: inline; }
.inlog-kort { display: none; }

/* ---- Onboarding flow (ontwerp 2b, 2c, 2f, 16 okt 2026) ----
   2b: naast "Ingelogd blijven" de taalkeuze NL/EN als twee radioknoppen in één vlak. */
.inlog-blijfrij { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.inlog-taal { display: flex; gap: 2px; padding: 2px; background: #F3F4F6; border-radius: 8px; flex: none; }
.inlog-taal-knop { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border: none; border-radius: 6px; background: transparent;
  font: inherit; font-size: 12px; font-weight: 600; color: #6B7280; cursor: pointer; touch-action: manipulation; transition: background .15s ease, color .15s ease; }
.inlog-taal-knop:hover { color: #1A1C23; }
.inlog-taal-knop[aria-checked="true"] { background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); color: #1A1C23; }
.inlog-taal-knop:focus-visible { outline: 2px solid var(--pri, #4F46E5); outline-offset: 1px; }
/* Tikfeedback binnen 100 ms (mobiele regels §2: de tap-highlight staat globaal uit), en zolang de gekozen
   taal laadt staat de knop zichtbaar op bezig (§7: elke asynchrone actie toont meteen zijn stand). */
.inlog-taal-knop:active { background: #E5E7EB; transform: scale(.97); }
.inlog-taal-knop[aria-busy="true"] { opacity: .6; cursor: progress; }
.inlog-vlag { display: block; flex: none; width: 16px; height: 11px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .10); }

/* 2c en 2f: de stap in de route, rechts van de titel of in de compacte kop. */
.inlog-titelrij { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.inlog-stap { font-size: 12px; color: #8A8D98; white-space: nowrap; }
.inlog-sub { text-wrap: pretty; }

/* 2f: de compacte kop van de tweede stap (logo, naam, stap) en het codeveld met de knop ernaast. */
.inlog-afzender-rij { display: flex; align-items: center; gap: 10px; }
.inlog-afzender-rij .inlog-mark { width: 36px; height: 36px; }
.inlog-afzender-rij .inlog-naam { font-size: 18px; }
.inlog-afzender-rij .inlog-stap { margin-left: auto; }
.inlog-compact .inlog-kaart { padding: 28px 36px 24px; gap: 20px; }
.inlog-compact .inlog-kop { gap: 4px; }
.inlog-compact .inlog-sub { line-height: 1.5; }
.inlog-breed .inlog-kaart { width: 520px; }
.inlog .tweestap-form { margin-bottom: 0; }
.inlog .tweestap-label { font-size: 13px; color: var(--text, #111827); }
.tweestap-coderij { display: flex; gap: 10px; }
.tweestap-coderij .tweestap-code { flex: 1; min-width: 0; box-sizing: border-box; }
.tweestap-coderij .btn { min-height: 44px; padding: 0 20px; }
.inlog-problemen .inlog-link { font-size: 12.5px; }
.inlog-hulpregel { display: block; margin-bottom: 4px; text-wrap: pretty; }

/* De vaste voettekst. */
.inlog-voet { position: relative; z-index: 1; min-height: 44px; box-sizing: border-box; background: #fff; border-top: 1px solid #ECEDF0; display: flex;
  align-items: center; justify-content: space-between; gap: 16px; padding: 0 28px; font-size: 12.5px; color: #6B7280; }
.inlog-voet-links { display: flex; flex-wrap: wrap; gap: 20px; }
.inlog-voet-a { color: #4B5563; text-decoration: none; }
.inlog-voet-a:hover { color: var(--pri, #4F46E5); text-decoration: underline; }

/* ---- staande schermen (telefoon, tablet rechtop): de staande achtergrond met Vera links ----
   De liggende zou Vera en haar tekstwolk buiten beeld schuiven; de wolk past hier niet naast haar. */
@media (max-width: 640px), (max-aspect-ratio: 1/1) {
  .inlog-beeld { left: 0; top: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: none;
    background: #EEF0FB url('../../assets/inlog/achtergrond-staand.webp') 18% bottom / cover no-repeat; }
  .inlog-wolk { display: none; }
}

/* ---- 3b: de telefoon ---- */
@media (max-width: 640px) {
  .inlog-midden { justify-content: flex-start; align-items: stretch; padding: 28px 20px 28px; gap: 12px; }
  .inlog-afzender { display: flex; align-items: center; justify-content: center; gap: 10px; }
  .inlog-afzender .inlog-mark { width: 40px; height: 40px; }
  .inlog-afzender .inlog-naam { font-size: 21px; }
  .inlog-afzender .inlog-slogan { display: none; }
  /* 3b heeft geen ondertitel en geen hulpregel: de kaart blijft kort, zodat Vera eronder in beeld blijft
     (ook met de akkoordzin; daarom de krappere bovenmarge).
     Wie zijn wachtwoord kwijt is, vindt de uitleg onder "Vergeten?". */
  .inlog-afzender-kaart, .inlog-sub, .inlog-problemen { display: none; }
  .inlog-kaart { width: auto; padding: 20px; gap: 14px; }
  .inlog-titel { font-size: 18px; }
  .inlog-form { gap: 12px; }
  .inlog-akkoord { font-size: 12.5px; }
  .inlog-veld .input { height: 46px; font-size: 16px; }
  .inlog-link { font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; }
  .inlog-blijf { font-size: 14px; gap: 10px; min-height: 44px; }
  .inlog-blijf input { width: 18px; height: 18px; }
  .inlog-knop { height: 46px; font-size: 15px; }
  .inlog-lang { display: none; }
  .inlog-kort { display: inline; }
  .inlog-voet { flex-direction: column; justify-content: center; gap: 6px; padding: 12px 20px 22px; }
  .inlog-voet-links { order: -1; justify-content: center; gap: 0 16px; }
  .inlog-voet-a { min-height: 44px; display: inline-flex; align-items: center; }
  /* De taalkeuze: twee losse knoppen van 44 px met ruimte ertussen (duimgroot, niet mis te tikken). */
  .inlog-taal { gap: 8px; padding: 0; background: none; }
  .inlog-taal-knop { height: 44px; padding: 0 12px; font-size: 14px; border: 1px solid #E4E5EA; background: #fff; }
  .inlog-taal-knop[aria-checked="true"] { border-color: var(--pri, #4F46E5); background: #EEF2FF; color: #4338CA; box-shadow: none; }
  .inlog-taal-knop:active { background: #E0E7FF; }
  /* Wachtwoord en tweede stap: de kaart draagt zijn eigen kop, en uitloggen blijft bereikbaar. */
  .inlog-compact .inlog-afzender { display: none; }
  .inlog-compact .inlog-kaart { padding: 20px; gap: 16px; }
  .inlog-breed .inlog-kaart { width: auto; }
  /* Tekst op de telefoon minstens 14 px (mobiele regels §5); de stap "Stap x van y" is een bijschrift (12). */
  .inlog-problemen.inlog-blijft { display: block; font-size: 14px; }
  /* Op de stapschermen blijft de uitleg staan: daar zegt hij wat er van je gevraagd wordt. */
  .inlog-stapscherm .inlog-sub { display: block; font-size: 14px; }
  .inlog-problemen .inlog-link { font-size: 14px; }
  .inlog .tweestap-label { font-size: 14px; }
}