/* Only the two entry forms share rows; later steps use their own content height. */
.auth-forms { display: grid; grid-template-rows: auto auto auto; gap: 22px; min-width: 0; }
.auth-forms > form { display: grid; grid-area: 1 / 1 / 4 / 2; grid-template-rows: subgrid; min-width: 0; margin: 0; }
#auth[data-stage=entry] .auth-entry-form[hidden] { display: grid !important; visibility: hidden; pointer-events: none; }
.auth-form-heading h2 { margin: 0; line-height: 1.6; }
.auth-form-heading .muted { margin: 8px 0 0; line-height: 1.8; overflow-wrap: anywhere; }
.auth-fields { display: grid; gap: 16px; align-content: start; min-width: 0; }
.auth-fields > div { min-width: 0; }
.auth-fields input, .auth-fields .select-trigger { height: 52px; min-height: 52px; margin: 0; }
.auth-actions { display: grid; gap: 12px; align-content: start; min-width: 0; }
.auth-actions .primary { margin: 0; height: 52px; min-height: 52px; }
.auth-forms .auth-help { color: var(--muted); font-size: 14px; line-height: 1.8; margin: 0; overflow-wrap: anywhere; }
#signup-help, #email-code-status { min-height: 52px; display: flex; align-items: center; }
#signup-resend-status { min-height: 1.8em; }
.auth-layout > aside { justify-content: flex-start; padding-block: 36px; background: #edf0e9; }
/* Solid foreground surfaces keep all text separate from the animated layer. */
.auth-layout { position: relative; isolation: isolate; background: #fff; box-shadow: 0 12px 36px #29332f08; }
.auth-layout > aside h1 { margin-block: 12px 20px; }
.auth-layout > aside ul { margin-block: 12px 0; line-height: 2.1; }
.auth-layout > .card { background: #fff; }
.auth-notice { margin: 20px 0 0; padding: 12px 16px; border: 1px solid #e4c5b8; border-inline-start: 3px solid #94533b; border-radius: 5px; background: #fff7f3; color: #7e3f2b; font-size: 15px; line-height: 1.8; overflow-wrap: anywhere; }
.auth-notice.success { border-color: #c9d8cb; border-inline-start-color: #435b47; background: #f1f6ef; color: #35503b; }
.auth-forms input[readonly] { background: #f2f4ef; color: #5f6a60; }
.auth-forms #email-code { text-align: center; letter-spacing: .22em; font-size: 24px; }
.auth-forms #email-code::placeholder { font-size: 16px; letter-spacing: normal; text-align: center; }
.auth-secondary { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; }
.auth-secondary button { min-height: 44px; font-size: 14px; }
#email-destination { overflow-wrap: anywhere; }
#email-code-status { font-variant-numeric: tabular-nums; }

/* Center the desktop panel in the space between the shared header and footer.
   Content can still grow and scroll on short windows or longer verification steps. */
@media screen and (min-width: 721px) {
  .site-page > main:has(> #auth:not([hidden])) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 32px;
  }
  .site-page > main > #auth { width: 100%; margin-block: 0; flex-shrink: 0; }
}

/* Decorative layer: no pointer interaction, external resources, or layout impact. */
body.site-page { isolation: isolate; }
.auth-background { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.auth-motion-toggle { width: fit-content; min-height: 44px; margin-block-start: 12px; padding: 4px 0; border: 0; background: transparent; color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.auth-motion-toggle:hover:not(:disabled) { background: transparent; color: var(--ink); }
/* The five concentric circles from temporaries/style.css, in the app's sage palette. */
.auth-background { --ripple-size: clamp(720px, 100vw, 1600px); background: #f4f5f1; }
.auth-ripple {
  position: absolute; left: 0; bottom: 0;
  width: var(--ripple-size); height: var(--ripple-size);
  border-radius: 50%; background: #8da995; opacity: .10;
  filter: blur(12px);
  transform: translate(-50%, 50%) scale(.8);
  animation: auth-ripple 22s ease-in-out infinite;
}
.auth-ripple:nth-child(2) { width: calc(var(--ripple-size) * .8); height: calc(var(--ripple-size) * .8); opacity: .13; }
.auth-ripple:nth-child(3) { width: calc(var(--ripple-size) * .6); height: calc(var(--ripple-size) * .6); opacity: .16; }
.auth-ripple:nth-child(4) { width: calc(var(--ripple-size) * .4); height: calc(var(--ripple-size) * .4); opacity: .19; }
.auth-ripple:nth-child(5) { width: calc(var(--ripple-size) * .2); height: calc(var(--ripple-size) * .2); opacity: .22; }
.auth-background[data-paused=true] .auth-ripple { animation-play-state: paused; }
@keyframes auth-ripple {
  0%, 100% { transform: translate(-50%, 50%) scale(.8); }
  50% { transform: translate(-50%, 50%) scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-ripple { animation: none; transform: translate(-50%, 50%) scale(1); }
}
@media (max-width: 720px) {
  .auth-layout > aside { padding: 24px; }
  .auth-forms { gap: 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  .auth-forms > form:not([hidden]) { animation: auth-reveal 160ms ease-out; }
  @keyframes auth-reveal { from { opacity: .55; } to { opacity: 1; } }
}
@media (forced-colors: active), print { .auth-background { display: none; } }