/* Auth layout: dark brand panel (5 cols) beside an ivory form column (7 cols) */
.auth-body { background: var(--paper); }
.auth { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 100vh; min-height: 100svh; }

/* Brand panel */
.auth-panel {
  --focus-ring: 2px solid var(--gold-500);
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-6);
  padding: var(--space-6) clamp(var(--space-6), 4vw, var(--space-8));
  overflow: hidden; background: var(--teal-950); color: var(--on-dark);
}
.auth-panel > * { position: relative; z-index: 1; }
.auth-panel__wordmark { justify-self: start; align-self: start; min-height: 44px; align-items: center; }
.auth-panel__art { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
/* The route fades out as it approaches the quote, so the text never sits on a gold line */
.auth-panel__art { -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 62%); mask-image: linear-gradient(to bottom, black 30%, transparent 62%); }
@media (max-width: 479px) { .auth-panel__art { -webkit-mask-image: linear-gradient(to bottom, black 8%, transparent 32%); mask-image: linear-gradient(to bottom, black 8%, transparent 32%); } }
@media (min-width: 1024px) { .auth-panel__art { -webkit-mask-image: linear-gradient(to bottom, black 45%, transparent 68%); mask-image: linear-gradient(to bottom, black 45%, transparent 68%); } }
.auth-panel__ring {
  fill: none; stroke: var(--gold-500); stroke-width: 1; stroke-dasharray: 2 10; opacity: .35;
  transform-box: fill-box; transform-origin: center; animation: auth-ring 120s linear infinite;
}
.auth-panel__ring + .auth-panel__ring { opacity: .18; animation-duration: 160s; animation-direction: reverse; }
@keyframes auth-ring { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .auth-panel__ring { animation: none; } }
.auth-panel__planned { fill: none; stroke: var(--line-dark); stroke-width: 1.5; stroke-dasharray: 2 8; stroke-linecap: round; }
.auth-panel__route { fill: none; stroke: var(--gold-500); stroke-width: 2; stroke-linecap: round; }
.auth-panel__star { color: var(--gold-500); }
/* Hidden only until auth.js has set the dash offsets (no flash of a fully drawn route) */
html.js .auth-panel:not([data-drawn]) :is(.auth-panel__route, .auth-panel__star) { opacity: 0; }
.auth-panel__quote { grid-row: 3; align-self: end; display: grid; gap: var(--space-4); max-width: 24rem; margin: 0; }
.auth-panel__quote blockquote { margin: 0; font: 400 clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem) / 1.2 var(--font-display); }
.auth-panel__quote em { font-size: var(--fs-accent); font-style: italic; font-synthesis: none; color: var(--gold-500); }
.auth-panel__quote figcaption { color: var(--gold-500); }

/* Form column */
.auth__main { display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-6); min-width: 0; padding: var(--space-5) var(--gutter) var(--space-6); }
.auth__main:focus { outline: none; }
.auth__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-5); font-size: var(--fs-small); }
.auth__back { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; color: var(--text-muted); }
.auth__back .icon { width: 16px; height: 16px; }
.auth__switch { color: var(--text-muted); }
.auth__legal { text-align: center; color: var(--text-muted); }

.auth-card {
  align-self: center; justify-self: center; width: min(100%, 480px);
  display: grid; gap: var(--space-6);
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.auth-card--wide { width: min(100%, 620px); }
.auth-card__head { display: grid; gap: var(--space-3); }
.auth-card__title { font-size: var(--fs-h2); }
.auth-card__title:focus { outline: none; }
.auth-card__alt { padding-top: var(--space-5); border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--text-muted); }
.auth-form__label-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.auth-form__aside { font-size: var(--fs-small); color: var(--gold-700); }
.auth-form__pair { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 600px) { .auth-form__pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

@media (max-width: 1023px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-panel { position: relative; height: auto; min-height: 280px; grid-template-rows: auto 1fr auto; }
  .auth-panel__quote { max-width: 26rem; }
  .auth-panel__quote blockquote { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem); }
}
@media (max-width: 479px) {
  .auth-panel { min-height: 240px; padding: var(--space-5) var(--gutter); gap: var(--space-4); }
  .auth-card { padding: var(--space-6) var(--space-5); }
}

/* Account → payment → access strip on the register page */
.auth-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.auth-steps li { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 2px solid var(--line); font-size: var(--fs-small); color: var(--text-muted); }
.auth-steps .mono { color: var(--text-muted); }
.auth-steps [aria-current='step'] { border-top-color: var(--gold-500); color: var(--text); font-weight: 500; }
.auth-steps [aria-current='step'] .mono { color: var(--gold-700); }

/* Forgot-password confirmation */
.auth-sent { display: grid; gap: var(--space-5); justify-items: start; }
.auth-sent__mark { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid var(--gold-500); border-radius: 50%; color: var(--gold-600); }
.auth-sent__mark .icon { width: 26px; height: 26px; }
.auth-sent__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.auth-sent__note { font-size: var(--fs-small); color: var(--text-muted); }