/* ==========================================================================
   Sign-in, after dark.

   Loaded after styles.css on login.html only: the same form, wearing the
   landing page's black-and-red. Structure and behavior stay in styles.css
   and login.js — this layer only touches color and light.
   ========================================================================== */
:root {
  --dk-bg: #0A0A0B;
  --dk-panel: #131316;
  --dk-panel-2: #17171B;
  --dk-line: rgba(255, 255, 255, .1);
  --dk-line-2: rgba(255, 255, 255, .16);
  --dk-ink: #F7F5F3;
  --dk-muted: #A6A19C;
  --dk-dim: #6E6A66;
  --dk-red-bright: #F0524F;
}

body.auth-page {
  background:
    radial-gradient(42% 34% at 82% 0%, rgba(193, 18, 31, .14), transparent 70%),
    radial-gradient(30% 26% at 8% 100%, rgba(255, 183, 3, .05), transparent 70%),
    var(--dk-bg);
  color: var(--dk-ink);
}

/* The form panel painted itself white in the base styles — clear it so the
   page's black (and its red breath) runs edge to edge. */
.auth-page .auth-main { background: transparent; }

.auth-page .wordmark .qr { color: var(--dk-ink); }
.auth-page .wordmark .cms { color: var(--dk-muted); }

.auth-page .auth-heading { color: var(--dk-ink); }
.auth-page .auth-sub { color: var(--dk-muted); }
.auth-page .auth-sub b { color: var(--dk-ink); }

/* ---- the sign in / create account switch ---- */
.auth-page .auth-switch {
  background: var(--dk-panel);
  border: 1px solid var(--dk-line);
}
.auth-page .auth-switch button { color: var(--dk-muted); background: transparent; }
.auth-page .auth-switch button[aria-pressed="true"] {
  background: var(--red-600);
  color: #fff;
}

/* ---- fields: white on black, so what you type is unmissable ---- */
.auth-page label { color: var(--dk-muted); }
.auth-page input {
  background: #FFFFFF;
  border-color: transparent;
  color: var(--ink);
}
.auth-page input:focus {
  border-color: var(--red-500);
  box-shadow: 0 0 0 3px rgba(240, 82, 79, .3);
}
.auth-page input::placeholder { color: #9A8F90; }

/* Chrome's autofill paints its own yellow; keep the field clean white. */
.auth-page input:-webkit-autofill,
.auth-page input:-webkit-autofill:hover,
.auth-page input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  transition: background-color 9999s ease-in-out 0s;
}

.auth-page .slug-preview { color: var(--dk-muted); }
.auth-page .slug-preview b { color: var(--amber-400); }

/* ---- buttons ---- */
.auth-page button.primary {
  background: var(--red-600);
  border-color: var(--red-600);
  color: #fff;
}
.auth-page button.primary:hover { background: var(--red-500); border-color: var(--red-500); }
.auth-page button.block:not(.primary) {
  background: var(--dk-panel);
  border: 1px solid var(--dk-line-2);
  color: var(--dk-ink);
}
.auth-page button.block:not(.primary):hover { border-color: var(--red-500); }
.auth-page .link { color: var(--dk-red-bright); background: none; }
.auth-page .auth-legal { color: var(--dk-dim); }

/* ---- notices ---- */
.auth-page .notice {
  background: var(--dk-panel-2);
  border: 1px solid var(--dk-line-2);
  color: var(--dk-ink);
}
.auth-page .notice.error { border-color: rgba(240, 82, 79, .5); background: rgba(193, 18, 31, .14); }
.auth-page .notice.ok { border-color: rgba(76, 195, 138, .45); background: rgba(27, 127, 75, .16); }
.auth-page .notice.warn { border-color: rgba(255, 183, 3, .4); background: rgba(255, 183, 3, .09); }

/* ---- confirm-your-email view ---- */
.auth-page .confirm-steps { color: var(--dk-muted); }
.auth-page .confirm-view .auth-sub b { color: var(--amber-400); }

/* ---- the brand panel ---- */
.auth-page .auth-side {
  background:
    radial-gradient(60% 50% at 30% 20%, rgba(193, 18, 31, .22), transparent 70%),
    radial-gradient(45% 40% at 85% 90%, rgba(255, 183, 3, .08), transparent 70%),
    var(--dk-panel);
  border-left: 1px solid var(--dk-line);
}
.auth-page .auth-quote { color: var(--dk-ink); }
.auth-page .trust { color: var(--dk-muted); border-color: var(--dk-line); }