/*
 * TARFKET — authentication surface refinement.
 *
 * Linked ONLY from login.html, after css/auth.css, and every selector is
 * scoped to `body.auth-page`. css/auth.css is shared with the workspace and
 * Brand pages, so this file exists to refine the login/registration surface
 * without re-versioning a stylesheet that six other pages load.
 *
 * The page stays light-only (css/login-light.css already pins the light
 * palette independently of the saved workspace theme), so there is no dark
 * block here. Tokens, type scale, radii, shadow and motion values follow the
 * Creator design system in DESIGN.md sections 3-6 so the auth surface reads
 * like the new onboarding UI.
 */

body.auth-page {
  --auth-surface: #ffffff;
  --auth-surface-soft: #fbfaff;
  --auth-surface-sunken: #f4f2fb;
  --auth-border: #e4e0f2;
  --auth-border-soft: #efecf8;
  --auth-border-strong: #d4c9f2;

  --auth-text-strong: #11142b;
  --auth-text: #252a45;
  --auth-text-muted: #626a89;
  --auth-text-faint: #858ca6;

  --auth-accent: #6d28d9;
  --auth-accent-hover: #7c3aed;
  --auth-accent-soft: #f3edfe;
  --auth-accent-text: #5b21b6;

  --auth-success: #15803d;
  --auth-success-soft: #eef9f1;
  --auth-success-border: #c6e8d2;

  --auth-danger: #b93843;
  --auth-danger-soft: #fff3f4;
  --auth-danger-border: #f6d3d6;

  --auth-warning: #8a5a00;
  --auth-warning-soft: #fff8e9;
  --auth-warning-border: #f4e2b8;

  --auth-info: #2455c4;
  --auth-info-soft: #f0f5ff;
  --auth-info-border: #d3e0fa;

  --auth-radius-card: 24px;
  --auth-radius-md: 14px;
  --auth-radius-sm: 10px;

  --auth-shadow-card:
    0 26px 62px -30px rgba(58, 41, 116, 0.3),
    0 2px 10px rgba(58, 41, 116, 0.045);
  --auth-shadow-raised: 0 12px 26px -14px rgba(109, 40, 217, 0.55);
  --auth-focus-ring: 0 0 0 4px rgba(109, 40, 217, 0.16);

  --auth-motion-fast: 140ms ease-out;
  --auth-motion: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --auth-motion-enter: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Shared stylesheets give several of these blocks a display value, so the
   hidden attribute has to be re-asserted for each one. */
body.auth-page .auth-form[hidden],
body.auth-page .auth-result[hidden],
body.auth-page .auth-alert[hidden],
body.auth-page .auth-nudge[hidden],
body.auth-page .auth-password-checklist[hidden],
body.auth-page .auth-result-actions[hidden],
body.auth-page .auth-alert-actions[hidden] {
  display: none;
}

/* ------------------------------------------------------------ page frame */

html[data-auth-pending] body.auth-page .auth-loading {
  grid-auto-flow: row;
  align-content: center;
  justify-items: center;
  gap: 12px;
  color: var(--auth-text-muted);
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
}

body.auth-page .auth-loading-spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--auth-border);
  border-top-color: var(--auth-accent);
  animation: auth-spin 720ms linear infinite;
}

@keyframes auth-spin {
  to {
    transform: rotate(360deg);
  }
}

body.auth-page .auth-shell {
  width: min(500px, calc(100% - 32px));
  margin: 40px auto 80px;
}

body.auth-page .auth-heading {
  margin-bottom: 22px;
}

body.auth-page .auth-heading > span {
  display: inline-block;
  color: var(--auth-accent);
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

body.auth-page .auth-heading h1 {
  margin: 12px 0 10px;
  color: var(--auth-text-strong);
  font-size: clamp(1.9rem, 5.4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 800;
}

body.auth-page .auth-heading p {
  max-width: 40ch;
  margin: 0 auto;
  color: var(--auth-text-muted);
  font-size: 0.875rem;
  line-height: 1.375rem;
}

/* --------------------------------------------------------- role selector */

/* The two role controls stay standalone pills — no shared container around
   them, as in the original composition. */
body.auth-page .auth-role-choice {
  gap: 10px;
  margin-bottom: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.auth-page .auth-role-choice button,
body.auth-page .auth-role-choice a {
  min-width: 116px;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid var(--auth-border);
  border-radius: var(--auth-radius-md);
  color: var(--auth-text-muted);
  background: var(--auth-surface);
  font-size: 0.8125rem;
  font-weight: 700;
  box-shadow: 0 6px 16px -12px rgba(58, 41, 116, 0.45);
  transition:
    color var(--auth-motion-fast),
    border-color var(--auth-motion-fast),
    background-color var(--auth-motion-fast),
    box-shadow var(--auth-motion-fast);
}

body.auth-page .auth-role-choice button:hover,
body.auth-page .auth-role-choice a:hover {
  color: var(--auth-accent-text);
  border-color: var(--auth-border-strong);
  background: var(--auth-accent-soft);
  transform: none;
}

body.auth-page .auth-role-choice button.active,
body.auth-page .auth-role-choice button.active:hover {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(135deg, #6d28d9, #7c3aed 55%, #4f46e5);
  box-shadow: var(--auth-shadow-raised);
}

/* ---------------------------------------------------------------- card */

body.auth-page .auth-card {
  padding: 30px 30px 26px;
  border: 1px solid var(--auth-border);
  border-radius: var(--auth-radius-card);
  background: var(--auth-surface);
  box-shadow: var(--auth-shadow-card);
}

body.auth-page .auth-tabs {
  gap: 4px;
  margin-bottom: 24px;
  padding: 5px;
  border: 1px solid var(--auth-border-soft);
  border-radius: 14px;
  background: var(--auth-surface-sunken);
}

body.auth-page .auth-tabs button {
  min-height: 40px;
  border-radius: 10px;
  color: var(--auth-text-muted);
  font-size: 0.8125rem;
  font-weight: 700;
  transition:
    color var(--auth-motion-fast),
    background-color var(--auth-motion-fast),
    box-shadow var(--auth-motion-fast);
}

body.auth-page .auth-tabs button:hover {
  color: var(--auth-text-strong);
}

body.auth-page .auth-tabs button.active,
body.auth-page .auth-tabs button.active:hover {
  border-color: var(--auth-border);
  color: var(--auth-text-strong);
  background: var(--auth-surface);
  box-shadow: 0 4px 12px -6px rgba(58, 41, 116, 0.3);
}

body.auth-page .auth-form {
  gap: 18px;
}

/* --------------------------------------------------------------- fields */

body.auth-page .auth-field-block > label,
body.auth-page .password-field-block > label {
  display: block;
}

body.auth-page .auth-alert-body {
  min-width: 0;
}

body.auth-page .auth-form label,
body.auth-page .password-field-block > label {
  color: var(--auth-text-strong);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  letter-spacing: 0.005em;
}

body.auth-page .auth-form input[type="email"],
body.auth-page .auth-form input[type="password"],
body.auth-page .auth-form input[type="text"] {
  min-height: 50px;
  margin-top: 8px;
  padding: 0 14px;
  border: 1px solid var(--auth-border);
  border-radius: var(--auth-radius-md);
  color: var(--auth-text-strong);
  background: var(--auth-surface-soft);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition:
    border-color var(--auth-motion-fast),
    background-color var(--auth-motion-fast),
    box-shadow var(--auth-motion-fast);
}

body.auth-page .auth-form input::placeholder {
  color: var(--auth-text-faint);
  font-weight: 500;
}

body.auth-page .auth-form input[type="email"]:hover,
body.auth-page .auth-form input[type="password"]:hover,
body.auth-page .auth-form input[type="text"]:hover {
  border-color: var(--auth-border-strong);
}

body.auth-page .auth-form input[type="email"]:focus,
body.auth-page .auth-form input[type="password"]:focus,
body.auth-page .auth-form input[type="text"]:focus {
  outline: none;
  border-color: var(--auth-accent);
  background: var(--auth-surface);
  box-shadow: var(--auth-focus-ring);
}

body.auth-page .auth-form input:focus-visible {
  outline: none;
  border-color: var(--auth-accent);
  box-shadow: var(--auth-focus-ring);
}

body.auth-page .auth-form input[aria-invalid="true"] {
  border-color: #e29aa1;
  background: var(--auth-danger-soft);
}

body.auth-page .auth-form input[aria-invalid="true"]:focus {
  border-color: var(--auth-danger);
  box-shadow: 0 0 0 4px rgba(185, 56, 67, 0.14);
}

body.auth-page .password-input-wrap {
  margin-top: 8px;
}

body.auth-page .password-input-wrap > input {
  padding-right: 54px;
}

body.auth-page .password-toggle {
  right: 8px;
  border-radius: var(--auth-radius-sm);
  color: var(--auth-text-faint);
  transition:
    color var(--auth-motion-fast),
    background-color var(--auth-motion-fast);
}

body.auth-page .password-toggle:hover,
body.auth-page .password-toggle[aria-pressed="true"] {
  color: var(--auth-accent);
  background: var(--auth-accent-soft);
}

/* ------------------------------------------------- password requirements */

/* The four rules sit on one row from the card's desktop width down; below
   that they wrap, which is why this stays a wrapping flex row rather than a
   fixed four-column grid. */
body.auth-page .auth-password-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: -6px 0 0;
  padding: 0;
  list-style: none;
}

body.auth-page .auth-password-checklist li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px 5px 7px;
  border: 1px solid var(--auth-border-soft);
  border-radius: 999px;
  color: var(--auth-text-muted);
  background: var(--auth-surface-sunken);
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 650;
  transition:
    color var(--auth-motion-fast),
    border-color var(--auth-motion-fast),
    background-color var(--auth-motion-fast);
}

body.auth-page .auth-password-checklist li::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: none;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  opacity: 0.45;
  transition: opacity var(--auth-motion-fast);
}

body.auth-page .auth-password-checklist li[data-met="true"] {
  color: var(--auth-success);
  border-color: var(--auth-success-border);
  background: var(--auth-success-soft);
}

body.auth-page .auth-password-checklist li[data-met="true"]::before {
  border-color: transparent;
  opacity: 1;
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2315803d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.6l3.2 3.2L13 5'/%3E%3C/svg%3E")
      center / 13px 13px no-repeat;
}

/* ----------------------------------------------------- inline alert card */

body.auth-page .auth-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  padding: 13px 14px;
  border: 1px solid var(--auth-danger-border);
  border-radius: var(--auth-radius-md);
  background: var(--auth-danger-soft);
  animation: auth-rise var(--auth-motion-enter) both;
}

body.auth-page .auth-alert[data-tone="info"] {
  border-color: var(--auth-info-border);
  background: var(--auth-info-soft);
}

body.auth-page .auth-alert[data-tone="warning"] {
  border-color: var(--auth-warning-border);
  background: var(--auth-warning-soft);
}

body.auth-page .auth-alert[data-tone="success"] {
  border-color: var(--auth-success-border);
  background: var(--auth-success-soft);
}

body.auth-page .auth-alert-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  margin-top: 1px;
  border-radius: 50%;
  color: #ffffff;
  background: var(--auth-danger);
  font-size: 0.75rem;
  font-weight: 800;
}

body.auth-page .auth-alert[data-tone="info"] .auth-alert-icon {
  background: var(--auth-info);
}

body.auth-page .auth-alert[data-tone="warning"] .auth-alert-icon {
  background: var(--auth-warning);
}

body.auth-page .auth-alert[data-tone="success"] .auth-alert-icon {
  background: var(--auth-success);
}

body.auth-page .auth-alert-title {
  color: var(--auth-text-strong);
  font-size: 0.8125rem;
  line-height: 1.1875rem;
  font-weight: 750;
  letter-spacing: -0.005em;
}

body.auth-page .auth-alert-text {
  margin-top: 3px;
  color: var(--auth-text-muted);
  font-size: 0.78125rem;
  line-height: 1.1875rem;
}

body.auth-page .auth-alert-text:empty {
  display: none;
}

body.auth-page .auth-alert-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

body.auth-page .auth-inline-action {
  min-height: 38px;
  padding: 9px 14px;
  border: 1px solid var(--auth-border);
  border-radius: var(--auth-radius-sm);
  color: var(--auth-accent-text);
  background: var(--auth-surface);
  font:
    750 0.75rem "Manrope",
    sans-serif;
  cursor: pointer;
  transition:
    color var(--auth-motion-fast),
    border-color var(--auth-motion-fast),
    background-color var(--auth-motion-fast);
}

body.auth-page .auth-inline-action:hover {
  border-color: var(--auth-border-strong);
  background: var(--auth-accent-soft);
}

body.auth-page .auth-inline-action:focus-visible {
  outline: 3px solid rgba(109, 40, 217, 0.24);
  outline-offset: 2px;
}

body.auth-page .auth-inline-action:disabled {
  color: var(--auth-text-faint);
  cursor: not-allowed;
  opacity: 0.7;
}

/* --------------------------------------------------- forgot-password hint */

body.auth-page .auth-forgot {
  margin-top: -6px;
  padding: 4px 2px;
  font-size: 0.75rem;
  font-weight: 700;
  transition: color var(--auth-motion-fast);
}

body.auth-page .auth-nudge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px 11px 14px;
  border: 1px solid var(--auth-border-strong);
  border-radius: var(--auth-radius-md);
  background: var(--auth-accent-soft);
  animation: auth-rise var(--auth-motion-enter) both;
}

body.auth-page .auth-nudge p {
  color: var(--auth-text);
  font-size: 0.78125rem;
  line-height: 1.125rem;
}

body.auth-page .auth-nudge strong {
  display: block;
  color: var(--auth-text-strong);
  font-size: 0.8125rem;
  font-weight: 750;
}

/* -------------------------------------------------------- submit button */

body.auth-page .auth-submit {
  position: relative;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: var(--auth-radius-md);
  background: linear-gradient(135deg, #6d28d9, #7c3aed 55%, #4f46e5);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  box-shadow: var(--auth-shadow-raised);
  transition:
    transform var(--auth-motion-fast),
    box-shadow var(--auth-motion-fast),
    opacity var(--auth-motion-fast);
}

body.auth-page .auth-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px -14px rgba(109, 40, 217, 0.68);
}

body.auth-page .auth-submit:active:not(:disabled) {
  transform: translateY(0);
}

body.auth-page .auth-submit:focus-visible {
  outline: 3px solid rgba(109, 40, 217, 0.34);
  outline-offset: 3px;
}

body.auth-page .auth-submit:disabled {
  cursor: not-allowed;
  opacity: 0.72;
  transform: none;
  box-shadow: none;
}

body.auth-page .auth-submit[data-loading="true"] {
  cursor: wait;
}

body.auth-page .auth-submit-spinner {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-top-color: #ffffff;
  animation: auth-spin 720ms linear infinite;
}

body.auth-page .auth-submit:not([data-loading="true"]) .auth-submit-spinner {
  display: none;
}

/* ------------------------------------------------------- footer elements */

body.auth-page .auth-account-switch {
  margin-top: 2px;
  padding-top: 16px;
  border-top: 1px solid var(--auth-border-soft);
  color: var(--auth-text-muted);
  font-size: 0.75rem;
}

body.auth-page .auth-account-switch button,
body.auth-page .auth-back {
  font-size: 0.75rem;
  font-weight: 750;
}

body.auth-page .auth-status {
  min-height: 0;
  color: var(--auth-text-muted);
  font-size: 0.75rem;
  line-height: 1.125rem;
}

body.auth-page .auth-status:empty {
  display: none;
}

body.auth-page .auth-status[data-type="error"] {
  color: var(--auth-danger);
}

body.auth-page .auth-status[data-type="success"] {
  color: var(--auth-success);
}

/* ------------------------------------------- verification / result state */

body.auth-page .auth-result {
  display: grid;
  justify-items: center;
  gap: 0;
  text-align: center;
  animation: auth-rise var(--auth-motion-enter) both;
}

body.auth-page .auth-result-icon {
  position: relative;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--auth-success);
  background: var(--auth-success-soft);
  box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.06);
}

body.auth-page .auth-result-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.auth-page .auth-result-icon svg path,
body.auth-page .auth-result-icon svg polyline {
  stroke-dasharray: 72;
  stroke-dashoffset: 0;
  animation: auth-draw 620ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes auth-draw {
  from {
    stroke-dashoffset: 72;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes auth-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

body.auth-page .auth-result-eyebrow {
  margin-top: 18px;
  color: var(--auth-accent);
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.auth-page .auth-result-title {
  margin-top: 7px;
  color: var(--auth-text-strong);
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

body.auth-page .auth-result-text {
  max-width: 34ch;
  margin-top: 8px;
  color: var(--auth-text-muted);
  font-size: 0.875rem;
  line-height: 1.375rem;
}

body.auth-page .auth-result-email {
  max-width: 100%;
  margin-top: 14px;
  padding: 9px 14px;
  overflow-wrap: anywhere;
  border: 1px solid var(--auth-border);
  border-radius: var(--auth-radius-sm);
  color: var(--auth-text-strong);
  background: var(--auth-surface-sunken);
  font-size: 0.8125rem;
  line-height: 1.125rem;
  font-weight: 750;
}

body.auth-page .auth-result-email:empty {
  display: none;
}

body.auth-page .auth-result-steps {
  width: 100%;
  display: grid;
  gap: 9px;
  margin-top: 18px;
  padding: 15px 16px;
  border: 1px solid var(--auth-border-soft);
  border-radius: var(--auth-radius-md);
  background: var(--auth-surface-soft);
  counter-reset: auth-step;
  list-style: none;
  text-align: left;
}

body.auth-page .auth-result-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  color: var(--auth-text-muted);
  font-size: 0.78125rem;
  line-height: 1.1875rem;
}

body.auth-page .auth-result-steps li::before {
  content: counter(auth-step);
  counter-increment: auth-step;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--auth-accent-text);
  background: var(--auth-accent-soft);
  font-size: 0.625rem;
  font-weight: 800;
}

body.auth-page .auth-result-actions {
  width: 100%;
  display: grid;
  gap: 9px;
  margin-top: 18px;
}

body.auth-page .auth-result-note {
  min-height: 18px;
  margin-top: 10px;
  color: var(--auth-text-muted);
  font-size: 0.75rem;
  line-height: 1.125rem;
}

body.auth-page .auth-result-note[data-type="error"] {
  color: var(--auth-danger);
}

body.auth-page .auth-result-note[data-type="success"] {
  color: var(--auth-success);
}

body.auth-page .auth-secondary {
  min-height: 46px;
  padding: 11px 16px;
  border: 1px solid var(--auth-border);
  border-radius: var(--auth-radius-md);
  color: var(--auth-text-strong);
  background: var(--auth-surface);
  font:
    750 0.8125rem "Manrope",
    sans-serif;
  cursor: pointer;
  transition:
    border-color var(--auth-motion-fast),
    background-color var(--auth-motion-fast);
}

body.auth-page .auth-secondary:hover:not(:disabled) {
  border-color: var(--auth-border-strong);
  background: var(--auth-accent-soft);
}

body.auth-page .auth-secondary:focus-visible {
  outline: 3px solid rgba(109, 40, 217, 0.24);
  outline-offset: 2px;
}

body.auth-page .auth-secondary:disabled {
  color: var(--auth-text-faint);
  cursor: not-allowed;
  opacity: 0.75;
}

body.auth-page .auth-ghost {
  min-height: 44px;
  padding: 11px 12px;
  border: 0;
  border-radius: var(--auth-radius-sm);
  color: var(--auth-accent-text);
  background: transparent;
  font:
    750 0.8125rem "Manrope",
    sans-serif;
  cursor: pointer;
  transition: background-color var(--auth-motion-fast);
}

body.auth-page .auth-ghost:hover {
  background: var(--auth-accent-soft);
}

body.auth-page .auth-ghost:focus-visible {
  outline: 3px solid rgba(109, 40, 217, 0.24);
  outline-offset: 2px;
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 560px) {
  body.auth-page .auth-shell {
    width: min(500px, calc(100% - 24px));
    margin: 24px auto 56px;
  }

  body.auth-page .auth-card {
    padding: 22px 18px 20px;
    border-radius: 20px;
  }

  body.auth-page .auth-heading h1 {
    font-size: 1.75rem;
  }

  body.auth-page .auth-role-choice button,
  body.auth-page .auth-role-choice a {
    min-width: 0;
    flex: 1 1 0;
  }

  body.auth-page .auth-nudge {
    grid-template-columns: minmax(0, 1fr);
  }

  body.auth-page .auth-inline-action {
    min-height: 44px;
  }

  body.auth-page .auth-nudge .auth-inline-action {
    width: 100%;
  }

  body.auth-page .auth-alert-actions .auth-inline-action {
    flex: 1 1 auto;
  }
}

/* --------------------------------------------------------- forced colors */

/* Inputs trade the native outline for a soft ring, and box shadows are
   dropped in forced-colors mode, so focus needs an explicit outline there. */
@media (forced-colors: active) {
  body.auth-page .auth-form input:focus,
  body.auth-page .auth-form input:focus-visible,
  body.auth-page .auth-submit:focus-visible,
  body.auth-page .auth-secondary:focus-visible,
  body.auth-page .auth-ghost:focus-visible,
  body.auth-page .auth-inline-action:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }

  body.auth-page .auth-alert,
  body.auth-page .auth-nudge,
  body.auth-page .auth-result-steps,
  body.auth-page .auth-result-email {
    border-color: CanvasText;
  }
}

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  body.auth-page .auth-alert,
  body.auth-page .auth-nudge,
  body.auth-page .auth-result {
    animation: none;
  }

  body.auth-page .auth-result-icon svg path,
  body.auth-page .auth-result-icon svg polyline {
    stroke-dasharray: none;
    animation: none;
  }

  body.auth-page .auth-loading-spinner,
  body.auth-page .auth-submit-spinner {
    animation: none;
    border-top-color: currentColor;
  }

  body.auth-page .auth-submit:hover:not(:disabled) {
    transform: none;
  }

  body.auth-page .auth-role-choice button,
  body.auth-page .auth-role-choice a,
  body.auth-page .auth-tabs button,
  body.auth-page .auth-form input,
  body.auth-page .auth-submit,
  body.auth-page .auth-secondary,
  body.auth-page .auth-ghost,
  body.auth-page .auth-inline-action,
  body.auth-page .password-toggle,
  body.auth-page .auth-password-checklist li {
    transition: none;
  }
}

/* ------------------------------------------------- Google account sign-in */

/* TARFKET account authentication with Google. Light-first like the rest of
   the auth page, reusing the existing auth tokens rather than new colours.
   The only fixed colours are the Google mark itself, which must stay
   unmodified per Google's brand requirements. */

body.auth-page .auth-alt {
  display: grid;
  gap: 14px;
}

body.auth-page .auth-alt[hidden] {
  display: none;
}

body.auth-page .auth-alt-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  color: var(--auth-text-faint);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.auth-page .auth-alt-divider::before,
body.auth-page .auth-alt-divider::after {
  content: "";
  height: 1px;
  background: var(--auth-border-soft);
}

body.auth-page .auth-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 49px;
  padding: 0 16px;
  border: 1px solid var(--auth-border-strong);
  border-radius: 11px;
  color: var(--auth-text-strong);
  background: var(--auth-surface);
  font:
    750 0.83rem "Manrope",
    sans-serif;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}

body.auth-page .auth-google:hover:not(:disabled) {
  border-color: var(--auth-accent);
  background: var(--auth-surface-soft);
}

body.auth-page .auth-google:focus-visible {
  outline: 2px solid var(--auth-accent);
  outline-offset: 2px;
}

body.auth-page .auth-google:disabled {
  cursor: wait;
  opacity: 0.62;
}

body.auth-page .auth-google-mark {
  display: inline-flex;
  flex: none;
  width: 18px;
  height: 18px;
}

body.auth-page .auth-google-mark svg {
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  body.auth-page .auth-google {
    transition: none;
  }
}