/* styles/auth.css — standalone styling for /login, /accept-invite, /reset-password.
 *
 * Mobile-first per STYLE.md §4. A premium design-bible entry: deep-black canvas,
 * a graphite card with a hairline border + top rim-light, mono UPPERCASE eyebrow
 * voice, a Saira headline, and ONE charge of Energy Red on the CTA. The local
 * --auth-* layer now maps onto the bible tokens (tokens.css + bible.css load
 * first) so it inherits the same Light / Dark(MAX) / Auto cascade — no flash,
 * no redefined values. Light stays calm; Dark IS the MAX performance layer.
 */

:root {
  --auth-bg:           var(--bg);
  --auth-card:         var(--panel);
  --auth-fg:           var(--text-primary);
  --auth-muted:        var(--text-muted);
  --auth-border:       var(--border);
  --auth-input:        var(--bg-sunken);
  --auth-accent:       var(--brand);          /* Energy Red brand CTA */
  --auth-accent-hover: var(--brand);
  --auth-ms:           #2f2f2f;
  --auth-ms-hover:     #181818;
  --auth-err:          var(--red);
  --auth-ok:           var(--green);
  --auth-shadow:       var(--edge-highlight), var(--sh-2);
}
[data-theme="dark"] {
  --auth-ms:           #ffffff;
  --auth-ms-hover:     #ebebeb;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--auth-bg);
  color: var(--auth-fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  touch-action: pan-x pan-y;
}

.auth-shell {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
/* R23 #14 (F25, reading A, 2026-08-22 ruling): the ember wash + gradient rim
   were a second brand "signature" next to the rail (VISION §7 tie-breaker 5).
   Flattened to tokens — no ::before wash, no gradient border. */
.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: var(--auth-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--auth-shadow);
  padding: 32px 28px 28px;
}

.auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.auth-logo img { height: 36px; width: auto; }
.auth-logo .logo-dark { display: none; }
[data-theme="dark"] .auth-logo .logo-light { display: none; }
[data-theme="dark"] .auth-logo .logo-dark  { display: inline; }
/* The card mark is the flat standalone ma+x wordmark (bible.css .max-wordmark,
   ONE global size) — the ring lockup is retired as a logo (operator ruling
   2026-07-28); rings remain only as Max AI loading vocabulary. */

.auth-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight, -0.015em);
  font-size: 24px;
  line-height: var(--lh-snug, 1.18);
  color: var(--text-primary);
  text-align: center;
  margin: 6px 0 4px;
}
.auth-subtitle {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow, 0.2em);
  text-align: center;
  color: var(--auth-muted);
  font-size: var(--fs-xs, 11.5px);
  margin: 0 0 22px;
}

.auth-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--fw-semi, 600);
  cursor: pointer;
  transition: background var(--hover-dur, 0.15s) var(--hover-ease),
              box-shadow var(--hover-dur, 0.15s) var(--hover-ease),
              transform 0.05s var(--hover-ease);
}
.auth-btn:active { transform: translateY(1px); }
.auth-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.auth-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }

/* R23 #14 (F25, reading A): flat --brand fill, no gradient. */
.auth-btn-primary {
  background: var(--auth-accent);
  color: #fff;
}
.auth-btn-primary:hover:not(:disabled) {
  filter: brightness(1.1);
}
.auth-btn-primary:focus-visible { box-shadow: var(--ring-focus); }

.auth-btn-ms {
  background: var(--auth-ms);
  color: #fff;
  margin-bottom: 16px;
}
[data-theme="dark"] .auth-btn-ms { color: #111; }
.auth-btn-ms:hover:not(:disabled) { background: var(--auth-ms-hover); }
.auth-btn-ms svg { width: 18px; height: 18px; flex: 0 0 18px; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--auth-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs, 10.5px);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow, 0.2em);
  margin: 16px 0;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--auth-border);
}

.auth-field { margin-bottom: 14px; }
.auth-field-mfa { margin-bottom: 18px; }
.auth-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs, 10.5px);
  font-weight: var(--fw-semi, 600);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow, 0.2em);
  margin-bottom: 7px;
  color: var(--auth-muted);
}
.auth-input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--auth-border);
  border-radius: var(--r-sm);
  background: var(--auth-input);
  color: var(--auth-fg);
  font-family: var(--font-sans);
  font-size: 16px;
  outline: none;
  transition: border-color var(--dur-fast, 0.12s) var(--ease-out),
              box-shadow var(--dur-fast, 0.12s) var(--ease-out);
}
.auth-input:focus {
  border-color: var(--auth-accent);
  box-shadow: var(--ring-focus);
}

.auth-code-input {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.auth-msg {
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  margin-bottom: 14px;
  display: none;
}
.auth-msg.err {
  background: var(--error-tint);
  color: var(--auth-err);
  border: 1px solid color-mix(in srgb, var(--red) 32%, transparent);
  display: block;
}
.auth-msg.ok {
  background: color-mix(in srgb, var(--green) 10%, transparent);
  color: var(--auth-ok);
  border: 1px solid color-mix(in srgb, var(--green) 28%, transparent);
  display: block;
}

.auth-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  font-size: 13px;
}
.auth-link {
  color: var(--auth-accent);
  text-decoration: none;
  font-weight: var(--fw-medium, 500);
  padding: 8px 0;
}
.auth-link:hover { text-decoration: underline; }
.auth-link:focus-visible {
  outline: none;
  border-radius: var(--r-xs);
  box-shadow: var(--ring-focus);
}

.auth-hint {
  color: var(--auth-muted);
  font-size: 12px;
  line-height: var(--lh-normal, 1.35);
  margin: 7px 0 0;
}

.auth-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  color: var(--auth-muted);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 8px 0;
  margin-top: 10px;
  transition: color var(--hover-dur, 0.15s) var(--hover-ease);
}
.auth-back:hover { color: var(--text); }
.auth-back:focus-visible {
  outline: none;
  border-radius: var(--r-xs);
  box-shadow: var(--ring-focus);
}

.hidden { display: none !important; }

@media (max-width: 480px) {
  .auth-card { padding: 24px 20px 22px; border-radius: var(--r-lg); }
  .auth-h1 { font-size: 20px; }
}

/* ================================================================ AUTH LOGO
   The sign-in card mark is the flat ma+x wordmark (bible.css .max-wordmark).
   The former ring lockup spool-up/orbit animation block was retired with the
   ring itself (operator ruling 2026-07-28). */

/* The sign-in heading is SCREEN-READER ONLY (operator, 2026-07-29: "lets just
   lose 'sign in' its obvious what this is"). It is removed from sight, NOT from
   the document: the wordmark is an image and the form fields are the only other
   content, so deleting the h1 outright would leave the page with no heading and
   no accessible name. Deliberately login-only — "Welcome" (accept-invite) and
   "Reset password" both sit above a password field and are the only thing
   distinguishing those two pages, so they stay visible. */
.auth-h1--sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}
/* With the heading and the brand subtitle gone, the wordmark now sits directly
   above the first field and needs the breathing room they used to supply
   (operator: "the max and 'Sign in' feel awkward too with how close they are"). */
.auth-card:has(.auth-h1--sr) .auth-logo { margin-bottom: var(--sp-5); }