/* ============================================================
   auth.css — sign-in / sign-up / password-reset surfaces
   Phase 2 of accounts plan shipped the auth templates with class
   hooks (.auth-card, .auth-error, .auth-password-toggle, .forgot-link)
   but no CSS rules. This file plugs that gap with token-driven styles
   in the same idiom as components.css / nav.css.
   ============================================================ */

/* ── Page wrapper + hero (replaces the demo password gate copy) ── */

.auth-page {
  max-width: 640px;
  margin: 0 auto;
  /* Fill the viewport below the topbar and optically centre the card so it
     isn't stranded near the top with empty space below. 72px offsets the
     topbar; the min() floor keeps it sensible on tall windows. */
  min-height: min(calc(100dvh - 72px), 760px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) var(--space-lg);
}

.auth-hero {
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border);
}

.auth-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-soft);
  margin: 0 0 var(--space-sm) 0;
}

.auth-headline {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 var(--space-md) 0;
}

.auth-lede {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  max-width: 560px;
}

.auth-footer-note {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.auth-footer-note p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  max-width: 560px;
}

.auth-footer-note p a {
  color: var(--text-secondary);
  text-decoration: underline;
}

.auth-footer-note p a:hover {
  color: var(--text);
}

/* ── Minimal topbar variant on /auth/* pages ──────────────── */
/* Removes the default justify-between behaviour since there's
   only one child element (the logo). */

.topbar--minimal {
  justify-content: flex-start;
}

/* ── Auth card container ──────────────────────────────────── */

.auth-card {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 40px 38px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px);
  box-shadow: var(--shadow-md, 0 6px 24px rgba(0, 0, 0, 0.06));
}

.auth-card h1 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 var(--space-sm) 0;
}

.auth-card .auth-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 var(--space-xl) 0;
}

/* ── Forms inside the card ────────────────────────────────── */

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

.auth-card label {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* First + last name side by side; stack on very narrow screens. */
.auth-name-row {
  display: flex;
  gap: var(--space-md);
}
.auth-name-row label { flex: 1; min-width: 0; }
@media (max-width: 420px) { .auth-name-row { flex-direction: column; } }

.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm, 6px);
  outline: none;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
  box-sizing: border-box;
}

.auth-card input[type="email"]:hover,
.auth-card input[type="password"]:hover,
.auth-card input[type="text"]:hover {
  border-color: var(--text-soft);
}

.auth-card input[type="email"]:focus,
.auth-card input[type="password"]:focus,
.auth-card input[type="text"]:focus,
.auth-card input[type="email"]:focus-visible,
.auth-card input[type="password"]:focus-visible,
.auth-card input[type="text"]:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* ── Buttons inside the card ──────────────────────────────── */

.auth-card button[type="submit"] {
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  border: none;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: background var(--motion-fast);
}

.auth-card button[type="submit"]:hover,
.auth-card button[type="submit"]:focus-visible {
  background: var(--primary-dark);
}

.auth-card button[type="submit"]:focus-visible {
  outline: 2px solid var(--primary-soft);
  outline-offset: 2px;
}

/* btn-secondary (used on /agent/account "Sign out") */
.auth-card button.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}

.auth-card button.btn-secondary:hover,
.auth-card button.btn-secondary:focus-visible {
  background: var(--bg-subtle);
  border-color: var(--text-soft);
}

/* ── Inline error ─────────────────────────────────────────── */

.auth-error {
  margin: 0 0 var(--space-md) 0;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--removed);
  background: #fceced;
  border: 1px solid #f3c8cb;
  border-radius: var(--radius-sm, 6px);
}

/* Invite-only dialog: a non-allowlisted signup gets a focus-grabbing overlay
   (clearer than an inline notice that gets lost in the form) handing off to the
   marketing-site waitlist, prefilled. No-JS: scrim + × are links to a fresh
   signup form, the CTA goes to the site. */
.auth-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.auth-modal-overlay__scrim {
  position: absolute;
  inset: 0;
  background: rgba(31, 26, 15, 0.45);
}
.auth-modal {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: var(--surface, #fff);
  border: 1px solid var(--parch-border, #E5DDC9);
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 18px 48px -12px rgba(31, 26, 15, 0.35);
  padding: 28px 26px 26px;
  text-align: left;
}
.auth-modal__close {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 22px;
  line-height: 1;
  color: var(--text-soft, #9a9384);
  text-decoration: none;
}
.auth-modal__close:hover,
.auth-modal__close:focus-visible { color: var(--text-secondary, #3D362A); }
.auth-modal__title {
  font-family: var(--font-heading);
  font-size: 20px;
  margin: 0 0 8px;
  color: var(--text, #1F1A0F);
}
.auth-modal__body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--text-secondary, #3D362A);
  line-height: 1.55;
  margin: 0 0 18px;
}
.auth-modal__cta {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-md);
  padding: 12px 20px;
  border-radius: var(--radius-sm, 6px);
  text-decoration: none;
}
.auth-modal__cta:hover,
.auth-modal__cta:focus-visible { background: var(--primary-dark); }

/* Required-field asterisk + optional hint on labels. */
.auth-card .req { color: var(--removed); margin-left: 1px; font-weight: 600; }
.auth-card .opt { color: var(--text-soft, #9a9384); font-weight: 400; }

/* Invalid field: red border + inline message (replaces the browser's native
   "fill out this field" popup, which is suppressed via `novalidate`). */
.auth-card input.input-error,
.auth-card input.input-error:hover { border-color: var(--removed); }
.auth-card input.input-error:focus,
.auth-card input.input-error:focus-visible {
  border-color: var(--removed);
  box-shadow: 0 0 0 3px rgba(192, 83, 47, 0.15);
}
.auth-card .field-error {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--removed);
  margin: 4px 0 0;
}

/* ── "Use a password instead" disclosure ──────────────────── */

.auth-password-toggle {
  margin: 0 0 var(--space-lg) 0;
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--border);
}

.auth-password-toggle summary {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--space-sm) 0;
  user-select: none;
  list-style: none;
}

.auth-password-toggle summary::-webkit-details-marker {
  display: none;
}

.auth-password-toggle summary::before {
  content: "▸ ";
  color: var(--text-soft);
  margin-right: 4px;
  transition: transform var(--motion-fast);
  display: inline-block;
}

.auth-password-toggle[open] summary::before {
  content: "▾ ";
}

.auth-password-toggle summary:hover,
.auth-password-toggle summary:focus-visible {
  color: var(--text);
}

.auth-password-toggle form {
  margin-top: var(--space-sm);
}

/* ── Small links + muted helper text ──────────────────────── */

.auth-card .forgot-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--primary);
  text-decoration: none;
  align-self: flex-start;
  margin-top: calc(-1 * var(--space-xs));
}

.auth-card .forgot-link:hover,
.auth-card .forgot-link:focus-visible {
  color: var(--primary-dark);
  text-decoration: underline;
}

.auth-card .muted {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: var(--space-md) 0 0 0;
  line-height: 1.5;
}

.auth-card .muted a {
  color: var(--primary);
  text-decoration: none;
}

.auth-card .muted a:hover,
.auth-card .muted a:focus-visible {
  color: var(--primary-dark);
  text-decoration: underline;
}

/* ── /agent/account flat-list rows (Plain anchor — Phase 7) ── */

/* Settings rows: label on the left, value or action link on the right.
   Divider lines above/below mirror Plain.com's flat settings layout —
   no chrome boxes, no danger zones, no tabs. Just a vertical scan. */
.account-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-md) 0;
  border-top: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: var(--text-base);
}

.account-row + .account-row {
  /* Adjacent rows share a divider — already drawn by the upper row's
     border-top, so no need for a top border on subsequent rows. */
}

.account-row:last-of-type {
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-lg);
}

.account-row-label {
  color: var(--text-muted);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}

.account-row-value {
  color: var(--text);
  font-weight: 500;
}

.account-row a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--motion-fast);
}

.account-row a:hover {
  text-decoration: underline;
}

/* ── /agent/account settings page (Phase 4 Task 21) ───────── */

.account-page {
  max-width: 480px;
  margin: var(--space-xl) auto;
  padding: var(--space-xl);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
}

.account-page h1 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 var(--space-lg) 0;
}

.account-page form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0 0 var(--space-lg) 0;
}

.account-page label {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.account-page input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm, 6px);
  outline: none;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
  box-sizing: border-box;
}

.account-page input[type="text"]:focus,
.account-page input[type="text"]:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.account-page button[type="submit"] {
  align-self: flex-start;
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  color: #fff;
  background: var(--primary);
  border: none;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
}

.account-page button[type="submit"]:hover {
  background: var(--primary-dark);
}

.account-page button.btn-secondary {
  align-self: flex-start;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}

.account-page button.btn-secondary:hover {
  background: var(--bg-subtle);
}

.account-page p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text);
  margin: var(--space-md) 0;
  line-height: 1.5;
}

.account-page p .muted {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.account-page p a {
  color: var(--primary);
  text-decoration: none;
}

.account-page p a:hover {
  text-decoration: underline;
}