/* 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;
}
/* Ember glow rising behind the card — the bible's signature top-of-frame flare.
   Pinned behind content (card establishes its own stacking via box-shadow). */
.auth-shell::before {
  content: '';
  position: fixed;
  inset: -20% 0 auto 0;
  height: 70vh;
  background: var(--gradient-ember);
  pointer-events: none;
  z-index: 0;
}
/* Canvas grain (2026-07-03) — the dashboard's dot texture (app.css, canonical),
   lit by the ember above and dissolving by ~2/3 down. Rides the shell (not
   body::before) because the auth body paints an opaque --auth-bg. */
.auth-shell::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: var(--canvas-texture);
  background-size: 18px 18px;
  -webkit-mask-image: var(--canvas-texture-mask);
  mask-image: var(--canvas-texture-mask);
  pointer-events: none;
  z-index: 0;
}

.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  /* EMBER RIM (2026-07-29, operator: "the sign in screen box has a white outline
     for no reason? should be sexy ember or something"). This was
     --gradient-chrome, a bright SILVER ramp (#f4f4f6 → #b9b9bf → #65656c …) held
     over from when the ring lockup was the card's mark and chrome framing made
     sense. The auth pages are fixed MAX dark now, so a silver ramp on black is
     just a hard white line around the card.
     What replaces it is heat, and it is directional, not an outline: the shell's
     --gradient-ember bloom falls from the top of the frame, so the rim catches
     ember at the top corner, cools through Energy Red, and is an ordinary
     --border hairline by the time it reaches the bottom. Same double-background
     mechanic as before — card fill on padding-box, ramp through the 1px border.
     No glow: --glow-red-* on a resting card reads as "selected", and the red
     charge on this page is reserved for the CTA.
     The warm stops are --max-ember / --max-red, the fixed brand hexes, NOT
     --brand: the chrome ramp this replaces was theme-independent, and .auth-card
     is also worn by teams-tab.html, which is theme-aware — --brand resolves to
     the informational BLUE in light, so a --brand stop would paint an
     ember→blue rim there. The cool tail is --border / --border-subtle, which are
     theme-aware, so the hairline end still matches whatever theme is on. */
  border: 1px solid transparent;
  background: linear-gradient(var(--auth-card), var(--auth-card)) padding-box,
              linear-gradient(158deg,
                color-mix(in srgb, var(--max-ember) 82%, transparent) 0%,
                color-mix(in srgb, var(--max-red) 55%, transparent) 17%,
                color-mix(in srgb, var(--max-red) 22%, var(--border)) 42%,
                var(--border) 68%,
                var(--border-subtle) 100%) border-box;
  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); }

.auth-btn-primary {
  background: var(--auth-accent);
  background-image: var(--gradient-energy-diag);   /* bible charged surface on the one primary CTA */
  color: #fff;
}
.auth-btn-primary:hover:not(:disabled) {
  filter: brightness(1.1);   /* not a bg swap — the shorthand would wipe the gradient */
  box-shadow: var(--glow-red);
}
.auth-btn-primary:focus-visible { box-shadow: var(--glow-red), 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); }