/* ==========================================================================
   Auth — page layer (login, register, forgot password)
   --------------------------------------------------------------------------
   The design handoff explicitly did NOT redesign these (SCREEN_MAP.md:46 —
   "apply tokens/fonts/logo; keep their structure"). This layer is built from
   the system's own parts rather than invented: controls are the DS's
   `.ds-field` / `.ds-btn`, and the dark side panel reuses the landing hero's
   wave still, so signing in reads as the same product as the marketing site.

   Photography is banned by the system, which is why the old Unsplash portrait
   in the right column is gone — the wave is the brand's own generative motif,
   not a stock photo.

   Load order: reset.css -> sayohatchi-tokens.css -> sayohatchi-ds.css -> this.
   This page deliberately does NOT load styles.css, design-v2.css or
   sayohatchi-v3.css: those carry the legacy `min-height: 48px` button clamp and
   severity `border-left` traps this repo has been bitten by before.
   ========================================================================== */

.auth-body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--surface-card);
  font-family: var(--font-sans);
  color: var(--text-strong);
  -webkit-font-smoothing: antialiased;
}
.auth-body *,
.auth-body *::before,
.auth-body *::after { box-sizing: border-box; }
.auth-body a { text-decoration: none; }
.auth-body :focus-visible { outline: 2px solid var(--green-700); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */
.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  min-height: 100vh;
  min-height: 100svh;
}

.auth-col {
  display: flex;
  flex-direction: column;
  padding: 26px clamp(20px, 4vw, 56px) 22px;
}

.auth-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.auth-brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; }
.auth-brand img { width: 26px; height: 26px; border-radius: var(--radius-control); }
.auth-brand span { font: 800 16.5px/1 var(--font-sans); letter-spacing: -0.01em; color: var(--text-strong); }

.auth-lang { display: inline-flex; align-items: center; gap: 7px; font: 500 11px/1 var(--font-mono); letter-spacing: 0.13em; }
.auth-lang .is-current { color: var(--text-strong); }
.auth-lang a { color: var(--text-faint); transition: var(--transition-control); }
.auth-lang a:hover { color: var(--text-strong); }

/* The forms are centred in whatever height is left between bar and footer. */
.auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 0; }
.auth-stack { width: 100%; max-width: 392px; }

/* --------------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------------
   js/login.js toggles these with inline `display: none` / `display: flex`, so
   the visible state MUST be flex — a `display: block` here would be overwritten
   to flex on the first toggle and the gap would appear out of nowhere.
   -------------------------------------------------------------------------- */
.auth-form { display: flex; flex-direction: column; gap: 16px; }

.auth-eyebrow {
  margin: 0;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--green-700);
}
.auth-heading {
  margin: 13px 0 0;
  font: 800 clamp(26px, 3.2vw, 32px)/1.12 var(--font-sans);
  letter-spacing: -0.025em;
  color: var(--text-strong);
}
.auth-sub { margin: 9px 0 0; font: 400 14px/1.6 var(--font-sans); color: var(--text-muted); }

/* Label row carrying the "forgot password" link opposite the field name. */
.auth-field-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.auth-field-row .ds-field__label { margin-bottom: 0; }
.auth-field-link { font: 500 12.5px/1 var(--font-sans); color: var(--green-700); }
.auth-field-link:hover { text-decoration: underline; }

/* Password field: the eye button sits inside the control's box, so the input
   needs room on the right for it. */
.auth-input-wrap { position: relative; display: block; }
.auth-input-wrap .ds-field__control { padding-right: 46px; }
.password-toggle-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-muted);
  font-size: 17px;
  cursor: pointer;
  transition: var(--transition-control);
}
.password-toggle-btn:hover { background: var(--hover-quiet-bg); color: var(--text-body); }

/* Inline result of a submit. Not a red fill — the system reserves red fills,
   and a failed sign-in is a fact to state, not an alarm. */
.auth-message {
  padding: 11px 13px;
  border-radius: var(--radius-card);
  border: var(--border-width) solid var(--border-default);
  background: var(--surface-canvas);
  font: 400 13px/1.5 var(--font-sans);
  color: var(--text-body);
}
/* js/login.js writes `auth-message error` / `auth-message success` wholesale via
   el.className — not is-* modifiers, and not additive. These two selectors have
   to match those exact words or a failed sign-in renders unstyled. */
.auth-message.error { background: var(--surface-attention); color: var(--text-strong); }
.auth-message.success { background: var(--surface-selected); color: var(--text-strong); }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.auth-divider::before,
.auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--divider); }

.auth-btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 0 18px;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-button);
  background: var(--surface-card);
  font: 600 13.5px/1 var(--font-sans);
  color: var(--text-body);
  cursor: pointer;
  transition: var(--transition-control);
}
.auth-btn-google:hover { background: var(--surface-canvas); border-color: var(--border-strong); }

.auth-switch { margin: 0; font: 400 13px/1.5 var(--font-sans); color: var(--text-muted); text-align: center; }
.auth-link {
  border: 0;
  padding: 0;
  background: none;
  font: 700 13px/1.5 var(--font-sans);
  color: var(--green-700);
  cursor: pointer;
}
.auth-link:hover { text-decoration: underline; }

/* forgot-password: the "back to sign in" link sits where the brand does on
   login. The controller rewrites its innerHTML, so the arrow glyph inside is
   its content, not a pseudo-element. */
.auth-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font: 600 13px/1 var(--font-sans);
  color: var(--text-body);
  transition: var(--transition-control);
}
.auth-back:hover { color: var(--text-strong); }

/* Success state, shown for every address so the form never discloses whether
   an account exists. */
.auth-success { text-align: center; }
.auth-success .auth-heading { margin-top: 18px; }
.auth-success .auth-sub { margin: 9px auto 22px; max-width: 320px; }
.auth-success-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-avatar);
  background: var(--surface-selected);
  color: var(--green-700);
  font-size: 26px;
}

.auth-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font: 400 12px/1.5 var(--font-sans);
  color: var(--text-faint);
}
.auth-foot a { color: var(--text-faint); transition: var(--transition-control); }
.auth-foot a:hover { color: var(--text-body); }
.auth-foot-links { display: inline-flex; gap: 16px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Dark side panel
   --------------------------------------------------------------------------
   The landing hero's wave still, scrimmed the same way, so the two surfaces
   read as one product. A still rather than the video: this is a page people
   pass through in seconds, and it should not cost them 2 MB to do it.
   -------------------------------------------------------------------------- */
.auth-aside {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(28px, 4vw, 56px);
  background: var(--green-900) url('/assets/hero/hero-wave.jpg') center / cover no-repeat;
}
/* Flat wash, not a gradient — the system bans gradients. Holds the copy
   readable wherever the wave's lime crest happens to fall. */
.auth-aside::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15, 46, 38, 0.62);
}
.auth-aside-body { position: relative; z-index: 1; }

.auth-aside-eyebrow {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* Rotating lines. js/login.js moves `.active` between `.quote-item`s, so they
   are stacked in one grid cell — otherwise the panel would jump by the height
   difference between lines on every rotation. */
.auth-quotes { display: grid; margin-top: 18px; min-height: 3.4em; }
.quote-item {
  grid-area: 1 / 1;
  margin: 0;
  font: 700 clamp(19px, 2vw, 24px)/1.32 var(--font-sans);
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 15ch;
  opacity: 0;
  transition: opacity 220ms var(--ease, ease);
}
.quote-item.active { opacity: 1; }

.auth-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 20px;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.auth-stat-label {
  font: 500 10px/1.3 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.auth-stat-value { margin-top: 7px; font: 700 13.5px/1.3 var(--font-sans); color: #fff; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
/* 860/600 rather than new numbers: this is the same breakpoint ladder
   css/landing.css uses, so the two surfaces change shape together. */
@media (max-width: 860px) {
  /* The side panel is decoration, and on a phone it would push the form —
     the only reason anyone opens this page — below the fold. */
  .auth-layout { grid-template-columns: minmax(0, 1fr); }
  .auth-aside { display: none; }
}

@media (max-width: 600px) {
  .auth-col { padding: 18px 20px 20px; }
  .auth-main { padding: 24px 0; }
  .auth-heading { font-size: 26px; }
  .auth-foot { justify-content: center; text-align: center; }

  /* The eye is a standalone icon button, so it takes the full 44px target.
     `.auth-field-link` and `.auth-link` stay text-sized on purpose: they are
     links inside a sentence, which WCAG 2.5.5 exempts, and padding them to
     44px would break the label row they sit on. */
  .password-toggle-btn { width: 44px; height: 44px; }
  .auth-input-wrap .ds-field__control { padding-right: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .quote-item { transition: none; }
}