/*
 * Sign-in, forgotten password, and reset. Three pages that render through
 * application.html.erb rather than the console layout, and until now the only
 * styling they had was `style="color:red"` on a flash.
 *
 * They matter more than three small forms suggest: this is the first thing a new
 * operator sees, and the page somebody lands on at 2am when their session has
 * expired mid-incident. An unstyled form reads as a half-finished internal tool,
 * which is exactly the wrong thing to think about a console that controls 65
 * point-of-sale systems.
 *
 * Scoped to .auth-page for the same reason every rule in console.css is scoped:
 * application.html.erb links stylesheets with `stylesheet_link_tag :app`, which
 * Propshaft expands to EVERY css file under app/assets, so a bare `body` or
 * `input` rule here would reach the console too. `body:has(.auth-page)` is what
 * lets the page own its background without a layout change —
 * ApplicationController's `allow_browser versions: :modern` already requires
 * :has support, so this is not a new floor.
 *
 * The tokens are console.css's, restated rather than shared: these pages do not
 * load that file, and a variable defined on .console-page cannot reach a page
 * that has no .console-page on it.
 */

.auth-page {
  --floor: #f4f4f1;
  --panel: #ffffff;
  --ink: #14171a;
  --ink-2: #5c646d;
  --rule: #dcdcd6;
  --go: #14614a;
  --stop: #a32316;
  --stop-wash: #fbeeec;
  --go-wash: #e7f1ec;
}

@media (prefers-color-scheme: dark) {
  .auth-page {
    --floor: #14161a;
    --panel: #1b1e23;
    --ink: #e9eaec;
    --ink-2: #9aa2ac;
    --rule: #2e333b;
    --go: #74d3a0;
    --stop: #ff8d7e;
    --stop-wash: #2c1815;
    --go-wash: #16261f;
  }
}

body:has(.auth-page) { margin: 0; background: #f4f4f1; }

@media (prefers-color-scheme: dark) {
  body:has(.auth-page) { background: #14161a; }
}

.auth-page {
  box-sizing: border-box;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  max-width: 23rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--floor);
}

.auth-page * { box-sizing: border-box; }

.auth-page__brand {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}

.auth-page h1 { font-size: 1.35rem; font-weight: 650; letter-spacing: -0.015em; margin: 0.15rem 0 0; }
.auth-page__lede { color: var(--ink-2); margin: 0 0 0.5rem; }

.auth-page form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.1rem;
}

.auth-page label { font-size: 0.88rem; font-weight: 600; display: block; margin-bottom: 0.25rem; }

.auth-page input[type="email"],
.auth-page input[type="password"] {
  font: inherit;
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--panel);
  color: var(--ink);
}

.auth-page input[type="submit"] {
  font: inherit;
  font-weight: 600;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--ink);
  border-radius: 3px;
  background: var(--ink);
  color: var(--panel);
  cursor: pointer;
}

.auth-page input[type="submit"]:hover { opacity: 0.86; }
.auth-page :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.auth-page__message {
  margin: 0;
  padding: 0.6rem 0.8rem;
  border-radius: 3px;
  border: 1px solid var(--rule);
  background: var(--panel);
  font-size: 0.94rem;
}

.auth-page__message--alert { border-color: var(--stop); background: var(--stop-wash); color: var(--stop); }
.auth-page__message--notice { border-color: var(--go); background: var(--go-wash); color: var(--go); }

.auth-page__aside { font-size: 0.92rem; color: var(--ink-2); margin: 0; }
.auth-page__aside a { color: inherit; text-underline-offset: 2px; }