/* =========================================================
   BudgetEasy: inloggen, registreren, herstellen

   Het ontwerp zet hier geen kaart neer: de inhoud staat rechtstreeks op het crème, met twee
   zachte oranje gloeden in de hoeken. Geen zijpaneel, geen fotografie, geen blur -- het systeem
   blijft vlak en scherp, en een kaart zou een rand trekken om iets wat geen rand nodig heeft.
   ========================================================= */

.auth {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--s-5) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  overflow: hidden;
}

/*
 * De twee blooms. Radiale verlopen mogen alleen op een omslagvlak als dit, nooit over
 * lopende tekst -- vandaar dat ze hier op de achtergrond staan en nergens anders.
 */
.auth::before, .auth::after {
  content: ''; position: absolute; pointer-events: none;
  width: 620px; height: 620px; border-radius: 50%;
}
.auth::before { top: -220px; left: -200px; background: radial-gradient(circle, rgba(242,106,31,.08), transparent 70%); }
.auth::after  { bottom: -260px; right: -220px; background: radial-gradient(circle, rgba(242,106,31,.07), transparent 70%); }

.auth__main, .auth__column { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; }
/* De merkregel staat links boven de inhoud, niet gecentreerd erboven. */
.auth__markline { width: 100%; max-width: 380px; justify-content: flex-start; }
.auth--wide .auth__markline { max-width: 440px; }

/* Het merk erboven: het vierkant met de M, de naam ernaast, en 40px lucht eronder. */
.auth__logo { display: inline-flex; align-items: center; gap: var(--s-3); margin-bottom: 40px; }
.auth__logo-mark { width: 40px; height: 40px; }
/* Eén woordmerk voor de hele app: Bricolage 600, -0.01em, in ink. De variant met een
   tweekleurige "Fin" en die met een oranje punt in de e-mail zijn hierop teruggebracht. */
.cf-wordmark { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h3); letter-spacing: -0.01em; color: var(--ink); }

/* Geen kaart: de inhoud staat op het crème, links uitgelijnd binnen 380px. */
.auth__panel {
  width: 100%; max-width: 380px;
  animation: screenIn var(--dur-4) var(--ease-out);
}
.auth--wide .auth__panel { max-width: 440px; }

.auth__heading { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h2); line-height: 1.15; letter-spacing: -0.025em; color: var(--ink); margin-bottom: var(--s-2); }
.auth__lead { color: var(--ink-muted); margin-bottom: var(--s-6); }

.auth__form { display: block; }
.auth__footer { margin-top: var(--s-4); font-size: var(--t-small); color: var(--ink-muted); text-align: center; }
/* De link in de voettekst staat er zonder klasse; hij hoort dezelfde kleur te hebben als elke
   andere link op deze schermen. */
.auth__footer a { color: var(--tafel-orange-deep); font-weight: 500; }
.auth__footer a:hover { text-decoration: underline; }
.auth__link { color: var(--tafel-orange-deep); font-weight: 500; }
.auth__link:hover { text-decoration: underline; }
.auth__link--muted { color: var(--ink-muted); font-weight: 400; }
.auth__back { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-muted); font-size: var(--t-small); margin-bottom: var(--s-4); }
.auth__back:hover { color: var(--ink); }
.auth__recentre { text-align: center; }

/* De scheiding tussen de knoppen en het wachtwoordformulier. */
.auth__divider { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-5) 0; color: var(--ink-faint); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.auth__divider::before, .auth__divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.auth__alert { margin-bottom: var(--s-4); }

/* De merkregel: links, op dezelfde lijn als de kop eronder. */
.auth__markline { display: flex; }

/* De body van elk authscherm: crème, gecentreerd, en genoeg lucht op een telefoon. */
.cf-auth-body { min-height: 100vh; }

/* ---------- Formuliervelden ---------- */

.cf-field { display: block; margin-bottom: var(--s-4); }
.cf-field__label { display: block; font-size: var(--t-small); font-weight: 500; color: var(--ink-muted); margin-bottom: 6px; }
.cf-field__hint { display: block; font-size: var(--t-small); color: var(--ink-faint); margin-top: 6px; }
.cf-field__error { display: block; font-size: var(--t-small); color: var(--danger); margin-top: 6px; }
.cf-field.has-error .cf-input { border-color: var(--danger); }

/*
 * Dezelfde afspraak als in app.css: op een aanraakscherm 16px, met de regelhoogte vastgezet
 * zodat het veld niet hoger wordt. Anders zoomt Safari in zodra je op het e-mailveld tikt -- en
 * juist op het inlogscherm is dat het eerste wat iemand van BudgetEasy meemaakt.
 */
/* Het inlogveld gaat op een aanraakscherm naar 16px; die regel staat onderaan dit bestand. */
.cf-input {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); font-size: var(--t-body);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.cf-input:focus { outline: none; border-color: var(--tafel-orange); box-shadow: var(--ring-focus); }
.cf-input::placeholder { color: var(--ink-faint); }

.cf-eyebrow { font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--tafel-orange-deep); margin-bottom: var(--s-2); }

/* ---------- Knoppen ---------- */

.cf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 8px 14px; border-radius: var(--r-sm); border: 1px solid transparent;
  font-size: var(--t-small); font-weight: 600;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-snap), box-shadow var(--dur-2) var(--ease-out);
}
.cf-btn:active { transform: translateY(1px) scale(.98); }
.cf-btn--lg { padding: 13px 18px; font-size: var(--t-body); }
.cf-btn--block { width: 100%; }
.cf-btn--primary { background: var(--tafel-orange); color: #fff; }
.cf-btn--primary:hover { background: var(--tafel-orange-deep); box-shadow: 0 6px 16px rgba(242,106,31,.28); }
.cf-btn--secondary { background: var(--surface); border-color: var(--border); color: var(--ink); font-weight: 500; }
.cf-btn--secondary:hover { background: var(--surface-2); border-color: var(--border-hover); }
/* Passkey is de eerste keuze in het ontwerp, en draagt daarom het zwart. */
.cf-btn--dark { background: var(--ink); color: #fff; }
.cf-btn--dark:hover { background: #2a2926; }
.cf-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* Alleen zichtbaar terwijl de knop bezig is; het script zet `is-loading`. Zonder deze regel
   draait er op elke knop een molentje, ook voordat je erop hebt geklikt. */
.cf-btn__spinner { display: none; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; opacity: .7; animation: spin 800ms linear infinite; }
.cf-btn.is-loading .cf-btn__spinner { display: block; }
/* Terwijl hij draait blijft de knop even breed: de tekst verdwijnt niet, hij schuift alleen op. */
.cf-btn.is-loading { pointer-events: none; opacity: .75; }

.cf-optiontile {
  display: flex; align-items: center; gap: var(--s-3); width: 100%; text-align: left;
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-2);
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface);
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.cf-optiontile:hover { background: var(--surface-2); border-color: var(--border-hover); }
.cf-optiontile__title { font-weight: 500; }
.cf-optiontile__sub { font-size: var(--t-small); color: var(--ink-muted); }

/* ---------- Meldingen ---------- */

.cf-alert { padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); font-size: var(--t-small); border: 1px solid transparent; }
.cf-alert--danger  { background: var(--danger-soft);  border-color: var(--danger-border);  color: var(--danger); }
.cf-alert--success { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
.cf-alert--info    { background: var(--info-soft);    border-color: var(--info-border);    color: var(--info); }
.cf-alert--warning { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning); }

/* ---------- Bevestigingsscherm ---------- */

.cf-success { text-align: center; }
.cf-success__ring { width: 56px; height: 56px; margin: 0 auto var(--s-4); border-radius: 50%; background: var(--success-soft); color: var(--success); display: grid; place-items: center; animation: pop var(--dur-4) var(--ease-spring); }
.cf-success__title { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h3); }
.cf-success__sub { color: var(--ink-muted); margin-top: 6px; }

/* ---------- Tweestapscode ---------- */

.cf-otp { display: flex; gap: var(--s-2); justify-content: center; }
.cf-otp__box {
  width: 44px; height: 54px; text-align: center;
  font-family: var(--font-mono); font-size: 20px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface);
}
.cf-otp__box:focus { outline: none; border-color: var(--tafel-orange); box-shadow: var(--ring-focus); }

/* ---------- Checkbox ---------- */

.cf-check { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.cf-check input { width: 18px; height: 18px; accent-color: var(--tafel-orange); }
.cf-check__text { font-size: var(--t-small); color: var(--ink-muted); }

/* ---------- Iconen in een knop ---------- */

/* De reset zet elke svg op `display: block; max-width: 100%`, en zonder eigen maat vult hij dan
   zijn hele knop -- een Google-logo van 184 pixels. Elke svg in een knop of een label is een
   icoon en heeft de hoogte van een regel. */
.cf-btn svg,
.cf-field__label svg,
.auth__back svg,
.auth__field-head svg {
  width: 18px; height: 18px; flex: none;
}

/* Hetzelfde geldt in het rondje boven een bevestiging: zonder eigen maat vult het vinkje de
   hele cirkel en loopt hij eroverheen. */
.cf-success__ring svg { width: 26px; height: 26px; }

/* ---------- Inlogmethoden ---------- */

.auth__providers { display: grid; gap: var(--s-2); margin-bottom: var(--s-2); }
@media (min-width: 420px) {
  /* Twee naast elkaar zodra er ruimte is; in z'n eentje blijft hij over de volle breedte. */
  .auth__providers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth__providers--single { grid-template-columns: 1fr; }
}
/* De passkeyknop staat binnen het raster maar hoort over de volle breedte: als halve cel
   breekt "Inloggen met passkey" over drie regels. */
.auth__providers-wide { grid-column: 1 / -1; order: -1; }

/* De inktzwarte knop uit het ontwerp: de weg die je hoort te nemen. */
.cf-btn--dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.cf-btn--dark:hover { background: #2a2926; transform: translateY(-1px); }

/* De scheiding leest als een zin, niet als een kopje: gewone letters, geen spatiëring. */
.auth__divider { text-transform: none; letter-spacing: normal; font-size: var(--t-small); }

/* ---------- Velden ---------- */

.auth__field-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  margin-bottom: 6px;
}
.auth__field-head label { font-size: var(--t-small); font-weight: 500; color: var(--ink-muted); }
.auth__field-head .auth__link { font-size: var(--t-small); }

.auth__row { display: grid; grid-template-columns: 1fr; gap: 0 var(--s-3); }
@media (min-width: 420px) { .auth__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.auth__remember { margin-bottom: var(--s-4); }
.auth__password-only { margin-top: var(--s-2); }

/* ---------- Wachtwoordsterkte ---------- */

.auth__strength { display: flex; align-items: center; gap: var(--s-3); margin-top: 8px; }
.auth__strength-bar { flex: 1 1 auto; height: 4px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.auth__strength-bar span {
  display: block; height: 100%; width: 0; border-radius: var(--r-pill);
  background: var(--danger);
  transition: width var(--dur-3) var(--ease-out), background var(--dur-3) var(--ease-out);
}
/* De klassen die het script erop zet; `none` is de beginstand. */
.auth__strength-bar span.none  { width: 0; }
.auth__strength-bar span.weak  { width: 33%;  background: var(--danger); }
.auth__strength-bar span.fair  { width: 66%;  background: var(--warning); }
.auth__strength-bar span.good  { width: 100%; background: var(--success); }
.auth__strength-label { font-size: var(--t-small); color: var(--ink-muted); flex: none; min-width: 64px; text-align: right; }

/* ---------- De tweede stap ---------- */

/* Twee stappen: de eerste is gezet, de tweede loopt. Puur een aanduiding, geen navigatie --
   vandaar aria-hidden in de markup. */
.auth__steps { display: flex; align-items: center; gap: 6px; justify-content: center; margin-bottom: var(--s-4); }
.auth__step-dot  { width: 8px; height: 8px; border-radius: 50%; background: var(--tafel-orange); }
.auth__step-line { width: 28px; height: 2px; background: var(--tafel-orange-border); }
.auth__step-pill { width: 22px; height: 8px; border-radius: var(--r-pill); background: var(--tafel-orange); }

.auth__otp { margin-bottom: var(--s-4); }

.auth__altrow {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  flex-wrap: wrap; margin-top: var(--s-4); font-size: var(--t-small);
}
.auth__alts { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---------- Gelukt ---------- */

.auth__panel--success { text-align: center; }

/* Een balkje dat volloopt terwijl je wordt doorgestuurd: zonder dat lijkt het scherm te hangen. */
.auth__progress { height: 3px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; margin-top: var(--s-5); }
.auth__progress span { display: block; height: 100%; width: 0; background: var(--tafel-orange); animation: authProgress 1.6s var(--ease-out) forwards; }

@keyframes authProgress { to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .auth__progress span { animation: none; width: 100%; }
}

/* -- Aanraakschermen --------------------------------------------------------
 *
 * Zie app.css: hetzelfde verhaal, en om dezelfde reden onderaan. Dit blok stond hierboven,
 * vlak voor `.cf-input` zelf, en verloor het daarom van de 15px die daar staat. Elk inlogveld
 * zoomde dus nog steeds in op een iPhone.
 */
@media (pointer: coarse) {
  .cf-input {
    font-size: 16px;
    line-height: calc(var(--t-body) * 1.55);
  }
}