/*! Copyright (c) 2026 Nathan Taco. All rights reserved. */
/*
 * The pages around the editor: sign in, sign up, confirm, reset, the account page (templates/auth, account).
 * bnnr's colours as tokens, light on :root and dark under [data-bs-theme="dark"] — the same switch and the same
 * values as bm.css, so the pages read as the editor's own.
 */
:root {
    color-scheme: light;
    --au-bg: #f5f6f8;
    --au-panel: #fff;
    --au-surface-2: #f3f4f6;
    --au-text: #1f2937;
    --au-muted: #6b7280;
    --au-border: #e5e7eb;
    --au-accent: #4c3dff;
    --au-accent-hover: #3f31e6;
    --au-accent-text: #4c3dff;
    --au-on-accent: #fff;
    --au-danger: #dc2626;
    --au-ok: #047857;
    --au-shadow: 0 1px 2px rgba(15, 16, 32, .04), 0 12px 32px rgba(15, 16, 32, .08);
}
[data-bs-theme="dark"] {
    color-scheme: dark;
    --au-bg: #0f1020;
    --au-panel: #1b1d2e;
    --au-surface-2: #24263a;
    --au-text: #e7e8f0;
    --au-muted: #a6a9be;
    --au-border: #30334b;
    --au-accent: #4c3dff;
    --au-accent-hover: #5d50ff;
    --au-accent-text: #9d95ff;
    --au-on-accent: #fff;
    --au-danger: #f87171;
    --au-ok: #34d399;
    --au-shadow: 0 12px 32px rgba(0, 0, 0, .45);
    --bs-body-bg: var(--au-bg);
    --bs-body-color: var(--au-text);
    --bs-border-color: var(--au-border);
}

body.au-page {
    min-height: 100vh;
    margin: 0;
    background: var(--au-bg);
    color: var(--au-text);
    font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
}
.au-shell { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.au-card {
    width: 100%;
    max-width: 420px;
    background: var(--au-panel);
    border: 1px solid var(--au-border);
    border-radius: 16px;
    box-shadow: var(--au-shadow);
    padding: 32px;
}
.au-logo { display: block; margin: 0 auto 24px; height: 32px; width: auto; }
[data-bs-theme="dark"] .au-logo-light, :root:not([data-bs-theme="dark"]) .au-logo-dark { display: none; }
.au-card h1 { font-size: 22px; font-weight: 650; margin: 0 0 6px; text-align: center; letter-spacing: -.01em; }
.au-lead { color: var(--au-muted); text-align: center; margin: 0 0 24px; }
.au-card .form-label { font-weight: 550; font-size: 14px; margin-bottom: 4px; }
.au-card .form-control { background: var(--au-panel); border-color: var(--au-border); color: var(--au-text); padding: 9px 12px; border-radius: 9px; }
.au-card .form-control:focus { border-color: var(--au-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--au-accent) 25%, transparent); }
.au-card .form-text { color: var(--au-muted); font-size: 13px; }
.au-card .form-check-input:checked { background-color: var(--au-accent); border-color: var(--au-accent); }
.au-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 10px 16px; border-radius: 9px; font-weight: 600; font-size: 15px;
    border: 1px solid transparent; text-decoration: none; cursor: pointer;
}
.au-btn-primary { background: var(--au-accent); color: var(--au-on-accent); }
.au-btn-primary:hover { background: var(--au-accent-hover); color: var(--au-on-accent); }
.au-btn-secondary { background: var(--au-panel); color: var(--au-text); border-color: var(--au-border); }
.au-btn-secondary:hover { background: var(--au-surface-2); color: var(--au-text); }
.au-btn-inline { display: inline-flex; width: auto; padding: 6px 12px; font-size: 14px; }
.au-social { display: grid; gap: 10px; }
.au-social svg { width: 18px; height: 18px; flex: none; }
.au-divider { display: flex; align-items: center; gap: 12px; color: var(--au-muted); font-size: 13px; margin: 20px 0; }
.au-divider::before, .au-divider::after { content: ""; flex: 1; border-top: 1px solid var(--au-border); }
.au-foot { text-align: center; color: var(--au-muted); font-size: 14px; margin-top: 20px; }
.au-card a:not(.au-btn), .au-wide a:not(.au-btn) { color: var(--au-accent-text); text-decoration: none; font-weight: 550; }
.au-card a:not(.au-btn):hover, .au-wide a:not(.au-btn):hover { text-decoration: underline; }
.au-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.au-alert { border-radius: 9px; padding: 10px 12px; font-size: 14px; margin-bottom: 16px; border: 1px solid; }
.au-alert-danger { color: var(--au-danger); border-color: color-mix(in srgb, var(--au-danger) 35%, transparent); background: color-mix(in srgb, var(--au-danger) 8%, transparent); }
.au-alert-success { color: var(--au-ok); border-color: color-mix(in srgb, var(--au-ok) 35%, transparent); background: color-mix(in srgb, var(--au-ok) 8%, transparent); }
.au-alert-info { color: var(--au-text); border-color: var(--au-border); background: var(--au-surface-2); }
.au-alert form { margin-top: 8px; }

/* The account page: wider, in sections. */
.au-wide { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; }
.au-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.au-top .au-logo { margin: 0; height: 26px; }
.au-top nav { display: flex; gap: 16px; font-size: 14px; }
.au-section { background: var(--au-panel); border: 1px solid var(--au-border); border-radius: 14px; padding: 24px; margin-bottom: 16px; }
.au-section h2 { font-size: 16px; font-weight: 650; margin: 0 0 4px; }
.au-section > p.au-muted { margin: 0 0 16px; }
.au-muted { color: var(--au-muted); font-size: 14px; }
.au-section .form-control { background: var(--au-panel); border-color: var(--au-border); color: var(--au-text); border-radius: 9px; }
.au-section .form-label { font-weight: 550; font-size: 14px; }
.au-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0 0; }
.au-facts div { background: var(--au-surface-2); border-radius: 10px; padding: 10px 12px; }
.au-facts dt { font-size: 12px; color: var(--au-muted); font-weight: 500; }
.au-facts dd { margin: 0; font-weight: 600; }
.au-list { list-style: none; padding: 0; margin: 0; }
.au-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--au-border); }
.au-list li:first-child { border-top: 0; }
.au-chip { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--au-surface-2); color: var(--au-muted); }
.au-chip-accent { background: color-mix(in srgb, var(--au-accent) 15%, transparent); color: var(--au-accent-text); }
.au-chip-warn { background: color-mix(in srgb, var(--au-danger) 12%, transparent); color: var(--au-danger); }

/* Two-step sign-in (account/two_factor.html.twig): the QR code on white so any app can read it in the dark theme, the backup codes. */
.bnnr-qr { display: inline-block; background: #fff; padding: 8px; border-radius: 10px; margin: 8px 0 12px; }
.bnnr-codes { background: var(--au-surface-2); border: 1px solid var(--au-border); border-radius: 10px; padding: 14px 18px; font: 600 16px/1.7 ui-monospace, Menlo, monospace; column-count: 2; color: var(--au-text); }

/* The Terms / Privacy / Refund links under a card */
.au-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 18px; font-size: 13px; }
.au-legal a { color: var(--au-muted); text-decoration: none; }
.au-legal a:hover, .au-legal a:focus-visible { text-decoration: underline; }