/* Auth pages — forgot-password and reset-password.
   ─────────────────────────────────────────────────────────────────────────
   The composition is login.html's: the folder-tab panel wearing the brand tab,
   flat fill, no rim, no shadow, every value a token so a brand override is a
   token change rather than a repaint. See the long note in templates/login.html
   for why the folder stays and the glass/gear went.

   TWO DELIBERATE DIFFERENCES FROM login.html:

   1. login.html keeps its own inline copy of these rules. It is the live front
      door and its entrance animation is tuned around fixed centering; pointing
      it here would be a visual change to the one page that must not regress for
      a cosmetic win. When it next gets touched for real, fold it in.

   2. Centering is flow-based (flex on body) rather than fixed. The reset form
      is taller than the login form, and fixed centering on a short viewport
      clips the card with no way to scroll to it. Identical at rest; it just
      never traps content off-screen. Same reason change_password.html does it.

   Loaded AFTER tokens.css, tokens-v2.css and restage-skin.css. */

:root {
    --be-font: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --be-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --be-ease-boot: cubic-bezier(0.16, 1, 0.3, 1);
    --be-bg: var(--bg-page);
    --be-ink: var(--text-primary);
    --be-ink-soft: var(--text-secondary);
    --be-ink-faint: var(--text-faint);
    --r4: var(--rs-radius);
}

/* ── Productbeeld: light login (white surface + ink accent), matches productbeeld.nl ── */
html[data-brand="productbeeld"] {
    --be-bg: #F6F5F2;
    --be-ink: #1b1b1d;
    --be-ink-soft: #55565a;
    --be-ink-faint: #8d8b8e;
}
html[data-brand="productbeeld"] .legal { color: #a2a1a4; }
html[data-brand="productbeeld"] ::selection { background: rgba(27, 27, 29, 0.14); color: var(--be-ink); }
html[data-brand="productbeeld"] .form-input {
    background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.12);
}
html[data-brand="productbeeld"] .form-input:focus { border-color: rgba(0, 0, 0, 0.30); background: rgba(0, 0, 0, 0.05); }
html[data-brand="productbeeld"] .form-input:-webkit-autofill,
html[data-brand="productbeeld"] .form-input:-webkit-autofill:hover,
html[data-brand="productbeeld"] .form-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px #F6F5F2 inset; -webkit-text-fill-color: var(--be-ink); caret-color: var(--be-ink);
}
html[data-brand="productbeeld"] .flash-message { color: #b23b3b; }
html[data-brand="productbeeld"] .submit-btn {
    background: linear-gradient(180deg, #2b2824, #141210); color: #f5f4f1;
    box-shadow: 0 3px 9px -3px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
html[data-brand="productbeeld"] .submit-btn:hover { box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.40), inset 0 -1px 2px rgba(255, 255, 255, 0.10); }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    font-family: var(--be-font);
    background: var(--be-bg);
    color: var(--be-ink);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body { display: flex; align-items: center; justify-content: center; padding: 72px 20px; }

::selection { background: var(--accent-wash); color: var(--be-ink); }

/* ── Chrome: brandline (top-left) · legal (bottom-right) ── */
.brandline {
    position: fixed; z-index: 30; top: 20px; left: 20px;
    font-size: 12px; font-weight: 600; letter-spacing: -0.01em;
    color: var(--be-ink); text-decoration: none;
}
.brandline em { font-style: normal; font-weight: 500; color: var(--be-ink-faint); transition: color 0.35s var(--be-ease); }
.brandline:hover em { color: var(--be-ink-soft); }

.legal {
    position: fixed; z-index: 30; bottom: 16px; right: 20px; text-align: right;
    font-size: 11px; font-weight: 500; letter-spacing: 0.06em; color: var(--be-ink-faint);
}
.legal a { color: inherit; text-decoration: none; transition: color 0.35s var(--be-ease); }
.legal a:hover { color: var(--be-ink-soft); }

/* ── The stage ── */
/* The width cap lives HERE, not on .card. The stage is a real flex item of body,
   so it is constrained by the padded content box and shrinks on a narrow screen.
   A percentage width on .card instead resolves against this shrink-to-fit parent
   — circular, so it collapsed to max-content and ran off the right of a phone. */
.login-stage {
    position: relative; z-index: 10; display: flex; align-items: center;
    width: 100%; max-width: 400px;
    transform: translateY(18px);
    visibility: hidden;
}
.login-stage.visible {
    visibility: visible;
    transform: translateY(0);
    transition: transform 0.7s var(--be-ease-boot);
}

.card {
    order: 1; position: relative; width: 100%;
    --ftab-w: 200px; --ftab-h: 36px;
}
.folder-glass, .folder-skin, .ftab { position: absolute; pointer-events: none; }
.folder-glass, .folder-skin { left: 0; right: 0; top: calc(-1 * var(--ftab-h)); bottom: 0; }
.folder-glass { z-index: 2; background: var(--bg-tray); }
.folder-skin { z-index: 3; overflow: visible; }
/* No rim, no shadow — the fill IS the object, same as every product row. */
.folder-skin .fp { fill: var(--bg-tray); stroke: none; }
.ftab {
    z-index: 5; left: 0; top: calc(-1 * var(--ftab-h));
    width: var(--ftab-w); height: var(--ftab-h);
    display: flex; align-items: center; padding-left: 40px;   /* = card-content padding-left */
    font-size: 11px; font-weight: 600; letter-spacing: 0.05em; color: var(--be-ink-faint);
    white-space: nowrap;
}

.card-content { position: relative; z-index: 4; display: flex; flex-direction: column; padding: 40px 40px 42px; }

.login-title { font-size: 22px; font-weight: 650; letter-spacing: -0.015em; margin-bottom: 6px; color: var(--be-ink); }
.login-subtitle { font-size: 13px; color: var(--be-ink-faint); margin-bottom: 30px; line-height: 1.4; }

.flash-message {
    background: var(--bg-status-rejected, rgba(220, 60, 60, 0.08));
    border: 1px solid transparent;
    border-radius: var(--rs-radius); padding: 10px 14px; margin-bottom: 20px;
    font-size: 13px; color: var(--danger, #b23b3b); line-height: 1.4;
}
/* The generic "if an account exists..." reply is not an error, and colouring it
   like one reads as failure on the one path that actually worked. */
.flash-message.is-success {
    background: var(--bg-inset);
    color: var(--be-ink-soft);
}

.form-group { margin-bottom: 16px; }
.form-label {
    display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
    color: var(--be-ink-faint); margin-bottom: 6px;
}
.required { color: var(--danger, #b23b3b); }
.form-input {
    width: 100%; background: var(--bg-inset); border: 1px solid transparent;
    border-radius: var(--rs-radius); padding: 12px 15px; font-family: var(--be-font); font-size: 14px; color: var(--be-ink);
    outline: none; transition: border-color 0.35s var(--be-ease), background 0.35s var(--be-ease);
}
.form-input::placeholder { color: var(--be-ink-faint); }
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px var(--bg-inset) inset;
    -webkit-text-fill-color: var(--be-ink); caret-color: var(--be-ink);
}
.form-input:focus { border-color: var(--text-primary); background: var(--bg-inset); }
.form-hint { font-size: 11px; color: var(--be-ink-faint); margin-top: 6px; line-height: 1.4; }

.submit-btn {
    width: 100%; margin-top: 24px; padding: 13px 20px;
    background: var(--accent-grad);
    border: 0; border-radius: var(--radius-pill, 999px); color: var(--on-accent, #fff);
    font-family: var(--be-font); font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; cursor: pointer;
    box-shadow: var(--shadow-accent);
    transition: transform 0.4s var(--be-ease), box-shadow 0.4s var(--be-ease);
}
.submit-btn:hover { transform: translateY(1.5px) scale(0.985); box-shadow: var(--shadow-accent-press); }
.submit-btn:active { transform: translateY(1.5px) scale(0.985); }

/* Quiet secondary action — "Back to sign in". */
.btn-cancel {
    display: block; width: 100%; margin-top: 10px; padding: 12px 20px;
    background: transparent; border: 1px solid var(--border-hairline, rgba(0, 0, 0, 0.12));
    border-radius: var(--radius-pill, 999px); color: var(--be-ink-faint);
    font-family: var(--be-font); font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
    text-decoration: none; text-align: center; cursor: pointer;
    transition: color 0.35s var(--be-ease), border-color 0.35s var(--be-ease);
}
.btn-cancel:hover { color: var(--be-ink); border-color: var(--text-primary); }

@media (max-width: 820px) {
    body { padding: 40px 16px; }
    .card-content { padding: 32px 28px 34px; }
    .ftab { padding-left: 28px; }   /* = card-content padding-left */
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; }
    .login-stage { visibility: visible !important; transform: none !important; }
}