/*
 * appcore auth pages styles (/login, /signup, /forgot-password).
 *
 * Scoped under #auth-root and built on the same shared site tokens as
 * app-shell.css (--ink --wash --paper --flag --flag-ink --flag-wash --ok
 * --line --muted --font-head --font-body --radius --radius-small). Each is
 * read once, below, into a private --s-* token with a fallback, so the pages
 * work on a host that loads none of them. The older --app-* properties still
 * win when a host sets them:
 *
 *   --app-ink --app-bg --app-wash --app-accent --app-font
 *
 * Dark mode follows prefers-color-scheme; `data-theme="light|dark"` on
 * #auth-root overrides it.
 */

#auth-root {
  --s-ink: var(--app-ink, var(--ink, #14213d));
  --s-paper: var(--app-bg, var(--paper, #ffffff));
  --s-wash: var(--app-wash, var(--wash, #f3f5f9));
  --s-flag: var(--app-accent, var(--flag, #c2410c));
  --s-flag-ink: var(--flag-ink, #ffffff);
  --s-flag-wash: var(--flag-wash, #fdeee6);
  --s-ok: var(--ok, #1b7348);
  --s-danger: #b3261e;
  --s-line: var(--line, color-mix(in srgb, var(--s-ink) 16%, transparent));
  --s-muted: var(--muted, color-mix(in srgb, var(--s-ink) 72%, white));
  --s-font-head: var(--font-head, var(--app-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif));
  --s-font-body: var(--font-body, var(--app-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif));
  --s-radius: var(--radius, 10px);
  --s-radius-small: var(--radius-small, 6px);

  color: var(--s-ink);
  font-family: var(--s-font-body);
  line-height: 1.5;
  display: flex;
  justify-content: center;
  padding: 1rem 0.25rem 1.5rem;
  box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
  #auth-root:not([data-theme="light"]) {
    --s-ink: var(--app-ink, #f2f2f2);
    --s-paper: var(--app-bg, #16181d);
    --s-wash: var(--app-wash, #20232a);
    --s-line: color-mix(in srgb, var(--s-ink) 20%, transparent);
    --s-muted: color-mix(in srgb, var(--s-ink) 72%, transparent);
    --s-danger: #f2b8b5;
    --s-flag-wash: color-mix(in srgb, var(--s-flag) 18%, var(--s-paper));
  }
}

#auth-root[data-theme="dark"] {
  --s-ink: var(--app-ink, #f2f2f2);
  --s-paper: var(--app-bg, #16181d);
  --s-wash: var(--app-wash, #20232a);
  --s-line: color-mix(in srgb, var(--s-ink) 20%, transparent);
  --s-muted: color-mix(in srgb, var(--s-ink) 72%, transparent);
  --s-danger: #f2b8b5;
  --s-flag-wash: color-mix(in srgb, var(--s-flag) 18%, var(--s-paper));
}

#auth-root *,
#auth-root *::before,
#auth-root *::after {
  box-sizing: inherit;
}

/* ---- the card: the same primary surface as the product demo ---- */

#auth-root .auth-card {
  width: 100%;
  max-width: 26rem;
  background: var(--s-paper);
  border: 1px solid var(--s-ink);
  border-radius: var(--s-radius);
  box-shadow: 10px 10px 0 color-mix(in srgb, var(--s-ink) 12%, transparent);
  padding: 1.75rem 1.5rem;
}

#auth-root .auth-title {
  margin: 0 0 1rem;
  font-family: var(--s-font-head);
  font-weight: var(--font-head-weight, 700);
  font-size: 1.75rem;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

#auth-root .auth-intro {
  margin: 0 0 1rem;
  overflow-wrap: anywhere;
  color: var(--s-muted);
}

/* ---- form ---- */

#auth-root .auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 0 1rem;
}

#auth-root .auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

#auth-root .auth-field label {
  font-weight: 600;
  font-size: 0.9rem;
}

#auth-root .auth-input {
  width: 100%;
  padding: 0.65em 0.8em;
  font: inherit;
  color: inherit;
  background: var(--s-paper);
  border: 1px solid color-mix(in srgb, var(--s-ink) 40%, transparent);
  border-radius: var(--s-radius-small);
}

#auth-root .auth-input[aria-invalid="true"] {
  border-color: var(--s-danger);
  box-shadow: inset 3px 0 0 var(--s-danger);
}

#auth-root .auth-field-error {
  margin: 0;
  font-size: 0.875rem;
  color: var(--s-danger);
}

#auth-root .auth-field-error:empty {
  display: none;
}

/* ---- buttons: the site's .btn ---- */

#auth-root .auth-btn {
  display: block;
  width: 100%;
  padding: 0.75em 1.2em;
  margin: 0 0 0.75rem;
  font: inherit;
  font-weight: 600;
  border-radius: var(--s-radius-small);
  border: 2px solid var(--s-ink);
  cursor: pointer;
}

#auth-root .auth-form .auth-btn {
  margin-bottom: 0;
}

#auth-root .auth-btn--primary {
  color: var(--s-paper);
  background: var(--s-ink);
}

#auth-root .auth-btn--primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--s-ink) 86%, white);
}

#auth-root .auth-btn--secondary {
  color: var(--s-ink);
  background: transparent;
}

#auth-root .auth-btn--secondary:hover:not(:disabled) {
  background: var(--s-wash);
}

#auth-root .auth-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---- status line ---- */

#auth-root .auth-status {
  margin: 0 0 1rem;
}

#auth-root .auth-status:empty {
  display: none;
}

#auth-root .auth-status:not(:empty) {
  padding: 0.6rem 0.8rem;
  border-radius: var(--s-radius-small);
  background: var(--s-wash);
  border: 1px solid var(--s-line);
  overflow-wrap: anywhere;
}

#auth-root .auth-status[data-kind="error"]:not(:empty) {
  color: var(--s-danger);
  background: color-mix(in srgb, var(--s-danger) 8%, var(--s-paper));
  border-color: var(--s-danger);
  box-shadow: inset 3px 0 0 var(--s-danger);
}

/* ---- links, divider ---- */

#auth-root a {
  color: var(--s-ink);
  font-weight: 600;
  text-underline-offset: 0.18em;
}

#auth-root .auth-links,
#auth-root .auth-terms {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
}

#auth-root .auth-terms {
  color: var(--s-muted);
}

#auth-root .auth-links a {
  display: inline-block;
  margin-right: 0.9rem;
}

#auth-root .auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: var(--s-muted);
}

#auth-root .auth-divider::before,
#auth-root .auth-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--s-line);
}

#auth-root .auth-config-error {
  margin: 0;
  color: var(--s-danger);
}

/* ---- focus (same ring as the marketing pages) ---- */

#auth-root .auth-btn:focus-visible,
#auth-root .auth-input:focus-visible,
#auth-root a:focus-visible,
#auth-root .auth-title:focus-visible {
  outline: 3px solid var(--s-flag);
  outline-offset: 3px;
}

#auth-root .auth-title:focus:not(:focus-visible) {
  outline: none;
}

@media (max-width: 26rem) {
  #auth-root .auth-card {
    padding: 1.25rem 1rem;
    box-shadow: 5px 5px 0 color-mix(in srgb, var(--s-ink) 12%, transparent);
  }
}