/*
 * Auth surface — Doorkeeper-hosted login, magic-link "sent" confirmation,
 * and the matching expired-token page. Rules are scoped under
 * `.auth-shell` so this file cannot bleed onto pages that share the
 * application layout.
 *
 * Direction: V1 "Quiet Parchment" from the Claude Design SSO bundle —
 * full-page parchment, no card. Three-row grid: header / centered form
 * column / utility footer.
 *
 * Colour tokens between the GENERATED markers come from the app's parchment
 * palette (app/src/components/parchment/palette.js) via
 * scripts/generate-parchment-tokens.js — edit the palette and run the script,
 * never those lines. The flash borders take the solid alert/notice ink rather
 * than the app's translucent *-border hairlines, so an invalid input keeps an
 * edge of at least 3:1.
 */

:root {
  /* BEGIN GENERATED parchment light — scripts/generate-parchment-tokens.js; edit app/src/components/parchment/palette.js instead */
  --bg: #f7f3ea; /* --wf-bg */
  --surface: #ffffff; /* --wf-surface */
  --border: #d8d0bd; /* --wf-border */
  --border-soft: rgba(42, 37, 32, 0.09); /* --wf-border-soft */
  --text: #1a1612; /* --wf-text */
  --text-dim: #524a40; /* --wf-text-dim */
  --text-faint: #8b8474; /* --wf-text-faint */
  --ink: #1a1612; /* --wf-ink */
  --ink-soft: rgba(26, 22, 18, 0.06); /* --wf-ink-soft */
  --alert-bg: #f0d8db; /* --wf-alert-bg */
  --alert-border: #6e2532; /* --wf-alert-fg */
  --alert-text: #6e2532; /* --wf-alert-fg */
  --notice-bg: #dde7d8; /* --wf-notice-bg */
  --notice-border: #1f4d28; /* --wf-notice-text */
  --notice-text: #1f4d28; /* --wf-notice-text */
  /* END GENERATED parchment */

  --font-display: "Cinzel", serif;
  --font-body: "Lora", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --radius-input: 8px;
  --radius-pill: 6px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 14px;
  --space-lg: 18px;
  --space-xl: 24px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* BEGIN GENERATED parchment dark — scripts/generate-parchment-tokens.js; edit app/src/components/parchment/palette.js instead */
    --bg: #1c1814; /* --wf-bg */
    --surface: #272219; /* --wf-surface */
    --border: #3d3528; /* --wf-border */
    --border-soft: rgba(238, 224, 196, 0.10); /* --wf-border-soft */
    --text: #f2e6c8; /* --wf-text */
    --text-dim: #c4b596; /* --wf-text-dim */
    --text-faint: #8e8166; /* --wf-text-faint */
    --ink: #f2e6c8; /* --wf-ink */
    --ink-soft: rgba(242, 230, 200, 0.08); /* --wf-ink-soft */
    --alert-bg: #3a1d18; /* --wf-alert-bg */
    --alert-border: #f0ccc4; /* --wf-alert-fg */
    --alert-text: #f0ccc4; /* --wf-alert-fg */
    --notice-bg: #1f2e22; /* --wf-notice-bg */
    --notice-border: #b8d6b8; /* --wf-notice-text */
    --notice-text: #b8d6b8; /* --wf-notice-text */
    /* END GENERATED parchment */
  }
}

/* The public layout no longer loads Tailwind (PR #1025), so the body
 * keeps its UA-default 8px margin and shows a white edge around the
 * parchment .auth-shell. Reset to 0 here — the rule lives inside
 * auth.css because that's the only stylesheet the public layout
 * loads, so it cannot bleed onto admin / Tailwind-rendered pages. */
body { margin: 0; }

.auth-shell, .auth-shell * { box-sizing: border-box; }

/* =============================================================================
 * Page shell — full-page 3-row grid (header / body / footer).
 * Replaces the previous card-on-canvas layout.
 * ========================================================================== */

.auth-shell {
  min-height: 100dvh;
  margin: 0;
  padding: 32px 48px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.auth-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.auth-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}

.auth-content {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  text-align: center;
}

/* =============================================================================
 * Wordmark — inline SVG inherits color via currentColor for dark mode.
 * ========================================================================== */

.auth-wordmark {
  display: inline-flex;
  height: 32px;
  color: var(--text);
  margin: 0;
}

.auth-wordmark svg {
  display: block;
  height: 100%;
  width: auto;
}

/* =============================================================================
 * Heading + sub-copy
 * ========================================================================== */

.auth-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.15;
  margin: 0;
}

.auth-lede {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
}

.auth-content > * + * { margin-top: 0; }

/* =============================================================================
 * Flash messaging — semantic color (oxblood / moss-sage)
 * ========================================================================== */

.auth-alert,
.auth-notice {
  font-size: 13px;
  line-height: 1.5;
  border-left-style: solid;
  border-left-width: 3px;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  padding: 10px 12px;
  margin: 0;
  text-align: left;
}

.auth-alert {
  background: var(--alert-bg);
  border-left-color: var(--alert-border);
  color: var(--alert-text);
}

.auth-notice {
  background: var(--notice-bg);
  border-left-color: var(--notice-border);
  color: var(--notice-text);
}

/* =============================================================================
 * Form
 * ========================================================================== */

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0;
  text-align: left;
}

.auth-form label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 7px;
}

.auth-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  transition: border-color 120ms ease;
}

.auth-input:hover {
  border-color: var(--text-faint);
}

.auth-input:focus-within {
  border-color: var(--text);
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.auth-input[data-invalid="true"] {
  border-color: var(--alert-border);
}

.auth-input svg {
  flex-shrink: 0;
  color: var(--text-faint);
}

.auth-input input[type="email"],
.auth-input input[type="password"],
.auth-input input[type="text"] {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--text);
  padding: 0;
  min-height: 22px;
}

.auth-input input[type="email"]::placeholder,
.auth-input input[type="password"]::placeholder {
  color: var(--text-faint);
  font-family: var(--font-body);
}

/* =============================================================================
 * Primary CTA — ink fill with arrow icon
 * ========================================================================== */

.auth-button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  min-height: 48px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius-input);
  cursor: pointer;
  transition: opacity 120ms ease;
  margin-top: var(--space-xs);
}

.auth-button:hover {
  opacity: 0.92;
}

.auth-button:active {
  opacity: 0.85;
}

.auth-button:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.auth-button:disabled,
.auth-button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.auth-button svg {
  flex-shrink: 0;
}

/* =============================================================================
 * Mode toggle — "New to the forge? FORGE A NAME" minimal link below the button.
 * Renders as a single-line lede that calls out to /join on whimsyforge.com.
 * ========================================================================== */

.auth-mode-toggle {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
  margin: 0;
}

.auth-mode-toggle a {
  font-weight: 600;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.auth-mode-toggle a:hover {
  color: var(--text-dim);
}

/* Utility footer (Terms · Privacy · Trouble signing in?) is deferred to
 * #1001 — those marketing pages don't exist yet. The .auth-footer rules
 * will land in a follow-up PR alongside the partial. */

/* =============================================================================
 * Sent state — dedicated "A scroll has been sent / Check your inbox" panel.
 * ========================================================================== */

.auth-sent {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.auth-sent-icon {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  margin-bottom: 12px;
}

.auth-sent-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0;
}

.auth-sent-email {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  margin: 0 0 var(--space-md);
  word-break: break-all;
}

.auth-sent-tip {
  width: 100%;
  padding: 12px 14px;
  background: var(--ink-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-input);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
  text-align: left;
  margin: 0;
}

.auth-sent-tip-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 4px;
}

.auth-sent-tip-mono {
  font-family: var(--font-mono);
  color: var(--text);
}

.auth-sent-back {
  display: inline-block;
  background: none;
  border: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  padding: 0;
  margin-top: var(--space-sm);
}

.auth-sent-back:hover {
  color: var(--text);
}

/* =============================================================================
 * Responsive
 * ========================================================================== */

@media (max-width: 480px) {
  .auth-shell {
    padding: 24px 20px;
  }

  .auth-heading {
    font-size: 22px;
  }
}