/*
 * Account entry (/login, /signup, /reset-password, /verify-email, /onboarding,
 * /account-ready) on the landing design.
 *
 * Built to redesign-gated.html: one centred panel on the landing wash, with the
 * Homle logo, the underlined headline, the indeterminate bar while the
 * readiness check runs, and the four-pill trail beneath. The real sign-in
 * controls live INSIDE that panel, because this page is the place where the
 * check resolves into an actual sign-in rather than a link to one.
 *
 * Scoped to `body.account-entry` so nothing here reaches another page. Every
 * data-* hook is load-bearing — auth-entry.js drives the page through them.
 * This file styles; it never renames.
 *
 * One deliberate departure from the handoff: the card is not a magic-link
 * request. This deployment has no magic-link endpoint; it authenticates with
 * email + password plus Google/Apple/Facebook when configured.
 */

body.account-entry {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--homle-cream, #faf7ec);
  color: var(--homle-ink, #201308);
  font-family: var(--homle-body, "DM Sans", system-ui, sans-serif);
}

/* ── The stage ────────────────────────────────────────────────────────── */

body.account-entry .ae-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 24px;
  background:
    radial-gradient(1000px 520px at 82% -4%, oklch(0.92 0.06 25 / .5) 0%, transparent 62%),
    radial-gradient(900px 500px at 8% 104%, oklch(0.93 0.06 190 / .4) 0%, transparent 60%),
    var(--homle-cream, #faf7ec);
}
body.account-entry .ae-panel {
  width: 100%;
  max-width: 560px;
  padding: 44px 44px 38px;
  border-radius: 26px;
  background: var(--homle-paper, #fff);
  box-shadow: 0 24px 60px oklch(0.3 0.05 60 / .1);
}

/* The same Homle logo used across the product now owns the card's visual
   anchor. It remains a simple route home without recreating a page header. */
body.account-entry .ae-logo {
  display: block;
  width: 76px;
  height: 76px;
  margin: 0 auto 26px;
  border-radius: 22px;
  box-shadow: 0 12px 30px oklch(0.53 0.21 25 / .28);
  transition: transform .18s ease, box-shadow .18s ease;
}
body.account-entry .ae-logo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
body.account-entry .ae-logo:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px oklch(0.53 0.21 25 / .34);
}
body.account-entry .ae-logo:focus-visible {
  outline: 3px solid var(--homle-coral, #e24947);
  outline-offset: 5px;
}
body.account-entry .ae-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 20px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--homle-eyebrow, #8b5148);
}
body.account-entry .ae-eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--homle-coral, #e24947);
}

/* The headline text is replaced by auth-entry.js as the mode resolves, so the
   mint underline is a SIBLING of the text node, never a child. textContent on
   the span would delete a child SVG. */
body.account-entry .ae-h {
  position: relative;
  display: inline-block;
  margin: 0 0 16px;
  font-family: var(--homle-display, "Bricolage Grotesque", sans-serif);
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--homle-ink, #201308);
}
body.account-entry .ae-underline {
  display: block;
  width: 74%;
  height: .2em;
  margin: .08em auto 0;
  overflow: visible;
}

body.account-entry .ae-lead {
  max-width: 420px;
  margin: 0 auto 26px;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--homle-muted-2, #61564d);
}

/* Indeterminate bar. Shown only while the check is genuinely outstanding — a
   progress bar under a resolved page is a lie about what is happening. */
body.account-entry .ae-readiness { margin: 0 0 26px; }
body.account-entry .ae-bar {
  height: 8px;
  margin: 0 0 14px;
  border-radius: 999px;
  background: oklch(0.5 0.02 60 / .12);
  overflow: hidden;
}
body.account-entry .ae-bar i {
  display: block;
  height: 100%;
  width: 46%;
  border-radius: 999px;
  background: linear-gradient(90deg, oklch(0.7 0.16 150), oklch(0.83 0.14 190));
  animation: ae-slide 1.8s ease-in-out infinite;
}
@keyframes ae-slide {
  0% { transform: translateX(-60%); }
  100% { transform: translateX(180%); }
}
body.account-entry [data-account-state]:not([data-state="checking"]) .ae-bar { display: none; }

body.account-entry .ae-readiness strong {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 14px;
}
body.account-entry .ae-readiness strong::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--homle-dim, #999189);
  box-shadow: 0 0 0 4px oklch(0.66 0.015 65 / .18);
}
body.account-entry [data-state="ready"] strong::before {
  background: var(--homle-success, #137738);
  box-shadow: 0 0 0 4px oklch(0.5 0.13 150 / .18);
}
body.account-entry [data-state="unavailable"] strong::before,
body.account-entry [data-state="error"] strong::before {
  background: var(--homle-coral-action, #d33a3c);
  box-shadow: 0 0 0 4px oklch(0.58 0.19 25 / .18);
}
body.account-entry .ae-readiness p {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--homle-muted-2, #61564d);
}

/* ── Feedback ─────────────────────────────────────────────────────────── */

body.account-entry .account-feedback {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid oklch(0.2 0.03 60 / .12);
  background: oklch(0.975 0.015 95);
  font-size: 13.5px;
  line-height: 1.5;
  text-align: left;
  color: var(--homle-ink-2, #2a1c10);
}
body.account-entry .account-feedback[data-kind="error"] {
  border-color: oklch(0.58 0.19 25 / .35);
  background: oklch(0.58 0.19 25 / .07);
  color: var(--homle-coral-action, #d33a3c);
}

/* ── Provider buttons ─────────────────────────────────────────────────── */

body.account-entry .account-social { display: grid; gap: 10px; margin: 0 0 4px; }
body.account-entry .account-social > p {
  margin: 0 0 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--homle-muted-2, #61564d);
}
/* Google's brand guidance asks for its mark unmodified on a neutral surface, so
   these are deliberately not restyled into the coral system. */
body.account-entry .account-provider-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 0 18px;
  border: 1.5px solid oklch(0.2 0.03 60 / .16);
  border-radius: 14px;
  background: var(--homle-paper, #fff);
  color: var(--homle-ink, #201308);
  font-family: inherit;
  font-weight: 600;
  font-size: 15.5px;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
body.account-entry .account-provider-button:hover {
  border-color: var(--homle-ink-2, #2a1c10);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px oklch(0.3 0.05 60 / .1);
}
body.account-entry .account-provider-button:focus-visible {
  outline: none;
  border-color: var(--homle-coral, #e24947);
  box-shadow: 0 0 0 4px oklch(0.62 0.19 25 / .12);
}
body.account-entry .account-provider-mark { flex: none; width: 20px; height: 20px; }

/* ── Dividers and the email toggle ────────────────────────────────────── */

body.account-entry .account-choice-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
  font-size: 13px;
  color: var(--homle-dim, #999189);
}
body.account-entry .account-choice-divider::before,
body.account-entry .account-choice-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: oklch(0.2 0.03 60 / .1);
}
body.account-entry .account-choice-divider span { white-space: nowrap; }

body.account-entry .account-email-toggle {
  width: 100%;
  min-height: 54px;
  border: 1.5px solid oklch(0.2 0.03 60 / .16);
  border-radius: 14px;
  background: none;
  color: var(--homle-ink, #201308);
  font-family: inherit;
  font-weight: 600;
  font-size: 15.5px;
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease;
}
body.account-entry .account-email-toggle:hover { border-color: var(--homle-ink-2, #2a1c10); transform: translateY(-1px); }

/* ── Forms ────────────────────────────────────────────────────────────── */

body.account-entry .account-form { text-align: left; }
body.account-entry .account-form fieldset { margin: 0; padding: 0; border: 0; }
body.account-entry .account-form legend {
  padding: 0;
  margin: 0 0 16px;
  font-family: var(--homle-display, "Bricolage Grotesque", sans-serif);
  font-weight: 700;
  font-size: 18px;
}
body.account-entry .account-form > fieldset > p {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--homle-muted-2, #61564d);
}
body.account-entry .account-form label {
  display: block;
  margin-bottom: 16px;
  font-weight: 600;
  font-size: 14px;
  color: var(--homle-ink-2, #2a1c10);
}
body.account-entry .account-form input:not([type="radio"]) {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 54px;
  margin-top: 8px;
  padding: 0 18px;
  border: 1.5px solid oklch(0.2 0.03 60 / .14);
  border-radius: 14px;
  background: var(--homle-paper, #fff);
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  color: var(--homle-ink, #201308);
}
body.account-entry .account-form input::placeholder { color: var(--homle-dim, #999189); }
body.account-entry .account-form input:focus {
  outline: none;
  border-color: var(--homle-coral, #e24947);
  box-shadow: 0 0 0 4px oklch(0.62 0.19 25 / .12);
}
body.account-entry .account-form small {
  display: block;
  margin: -8px 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--homle-muted-2, #61564d);
}
/* The primary action is the landing's dark pill, as the design has it. */
body.account-entry .account-form > fieldset > button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  margin-top: 4px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--homle-ink, #201308);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 14px 30px oklch(0.2 0.03 60 / .28);
  transition: transform .18s ease, box-shadow .18s ease;
}
body.account-entry .account-form > fieldset > button[type="submit"]::after { content: "↗"; font-size: .9em; }
body.account-entry .account-form > fieldset > button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px oklch(0.2 0.03 60 / .34);
}
body.account-entry .account-form > fieldset > button[type="submit"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px oklch(0.62 0.19 25 / .3), 0 14px 30px oklch(0.2 0.03 60 / .28);
}
body.account-entry fieldset[disabled] button[type="submit"] {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
body.account-entry .account-form-link {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  margin: 16px 0 0;
  font-size: 13.5px;
  color: var(--homle-muted-2, #61564d);
}
body.account-entry .account-form-link a { color: var(--homle-eyebrow, #8b5148); }

body.account-entry .account-role {
  display: block;
  margin-bottom: 12px;
  padding: 16px 18px;
  border: 1.5px solid oklch(0.2 0.03 60 / .12);
  border-radius: 16px;
  font-weight: 400;
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease;
}
body.account-entry .account-role:hover { border-color: var(--homle-ink-2, #2a1c10); transform: translateY(-1px); }
body.account-entry .account-role:has(input:checked) {
  border-color: var(--homle-coral, #e24947);
  box-shadow: 0 0 0 4px oklch(0.62 0.19 25 / .1);
}
body.account-entry .account-role strong {
  display: block;
  font-family: var(--homle-display, "Bricolage Grotesque", sans-serif);
  font-weight: 700;
  font-size: 16px;
}

body.account-entry .account-ready-person {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 18px 0;
  text-align: left;
}
body.account-entry .role-account-avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--homle-coral, #e24947);
  color: #fff;
  font-family: var(--homle-display, "Bricolage Grotesque", sans-serif);
  font-weight: 700;
}
body.account-entry .account-ready-panel .account-actions { display: grid; gap: 10px; }

body.account-entry .ae-fine {
  margin: 26px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: oklch(0.5 0.02 60);
}
body.account-entry .account-noscript {
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--homle-muted-2, #61564d);
}

/* ── The step trail ───────────────────────────────────────────────────── */

body.account-entry .ae-crumbs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
body.account-entry .ae-crumbs li {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--homle-paper, #fff);
  box-shadow: 0 8px 22px oklch(0.3 0.05 60 / .07);
  font-size: 13px;
  font-weight: 600;
  color: var(--homle-muted, #564b42);
}
body.account-entry .ae-crumbs li[aria-current] {
  background: var(--homle-ink, #201308);
  color: #fff;
}

/* ── Footer ───────────────────────────────────────────────────────────── */

body.account-entry .account-footer {
  padding: 26px 0;
  background: var(--homle-ink, #201308);
  color: oklch(0.86 0.01 60);
  font-size: 13.5px;
}
body.account-entry .account-footer .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}
body.account-entry .account-footer a { color: #fff; }

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  body.account-entry .account-footer .shell { padding: 0 20px; }
  body.account-entry .ae-stage { padding: 28px 16px 48px; }
  body.account-entry .ae-panel { padding: 30px 22px 26px; border-radius: 22px; }
  body.account-entry .ae-h { font-size: 31px; }
}

@media (prefers-reduced-motion: reduce) {
  body.account-entry .ae-bar i { animation: none; }
  body.account-entry .ae-logo,
  body.account-entry .account-provider-button,
  body.account-entry .account-email-toggle,
  body.account-entry .account-role,
  body.account-entry .account-form > fieldset > button[type="submit"] { transition: none; }
  body.account-entry .ae-logo:hover,
  body.account-entry .account-provider-button:hover,
  body.account-entry .account-email-toggle:hover,
  body.account-entry .account-role:hover,
  body.account-entry .account-form > fieldset > button[type="submit"]:hover { transform: none; }
}