/* Auth screens (sign in / sign up / forgot / reset password) — standalone,
   split brand panel + form, no site nav/footer. */

body.auth-body {
  margin: 0;
  background: var(--warm-white);
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  color: var(--forest);

  /* De-emphasised text colours. Secondary text used to be --forest under an
     opacity ramp (.5–.75), which lands between 2.9:1 and 6:1 on the warm-white
     panel — most of it under the 4.5:1 floor. These two are solid colours that
     pass, so opacity stays for disabled states only. */
  --auth-muted: #4a5c50; /* 6.6:1 — subtitles, body secondary */
  --auth-subtle: #5f7267; /* 4.7:1 — hints, fine print, dividers, placeholders */
}

.auth-shell {
  min-height: 100vh;
  /* dvh excludes the mobile browser chrome, which 100vh does not: on iOS the
     submit button otherwise sits under the URL bar. */
  min-height: 100dvh;
  display: flex;
}

.auth-brand {
  width: 42%;
  min-width: 420px;
  background: var(--forest);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px;
}

.auth-brand-bg {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background: linear-gradient(
    160deg,
    var(--forest) 0%,
    var(--teal) 45%,
    var(--aqua) 75%,
    var(--golden) 100%
  );
}

.auth-brand-logo {
  position: relative;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 26px;
  color: #fff;
}

.auth-brand-quote {
  position: relative;
}

.auth-quote-text {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.4;
  color: #fff;
  max-width: 380px;
}

.auth-quote-byline {
  font-size: 13px;
  color: var(--warm-white);
  opacity: 0.65;
  margin-top: 16px;
}

.auth-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fluid side padding. A flat 40px plus a fixed-width card needed 460px of
     panel, so every phone clipped the form off the right edge. */
  padding: 72px clamp(16px, 5vw, 40px) 40px;
  position: relative;
}

.auth-card {
  /* width was a fixed 380px — the card could not shrink, so the submit button,
     the "forgot password" link and the signup terms ran off-screen below
     460px. max-width keeps the desktop measure identical. */
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Language switcher. The auth shell has no nav and no footer, so this is the
   only way off a page you cannot read. Sits top-right of the form panel. */
.auth-langs {
  position: absolute;
  top: 20px;
  right: clamp(16px, 5vw, 40px);
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13.5px;
  font-weight: 600;
}

.auth-lang {
  display: inline-flex;
  align-items: center;
  /* 44px min target — the nav's version is a 21px-tall text link. */
  min-height: 44px;
  padding: 0 10px;
  color: var(--auth-subtle);
  text-decoration: none;
  border-radius: 8px;
}

.auth-lang:hover {
  color: var(--teal-hover);
  background: rgba(26, 56, 40, 0.05);
}

.auth-lang.is-current {
  color: var(--forest);
  cursor: default;
}

.auth-lang + .auth-lang {
  border-left: 1px solid var(--border);
}

.auth-card-centered {
  align-items: center;
  text-align: center;
}

.auth-heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

/* An <h1> now, so every auth screen has one — it used to be a <div>, which
   left login and signup with no heading at all in the accessibility tree. */
.auth-title {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.2;
  color: var(--forest);
}

.auth-subtitle {
  font-size: 14px;
  color: var(--auth-muted);
  line-height: 1.55;
}

.auth-oauth {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--forest);
  background: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.auth-oauth-btn:hover {
  border-color: rgba(26, 56, 40, 0.35);
  box-shadow: var(--shadow-sm);
  color: var(--forest);
}

.auth-oauth-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 11px Montserrat;
}

.auth-oauth-icon-google {
  background: #fff;
  border: 1px solid rgba(26, 56, 40, 0.25);
}

.auth-oauth-icon-facebook {
  background: #1877f2;
  color: #fff;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--forest);
}

.auth-divider span {
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-divider em {
  color: var(--auth-subtle);
  font-style: normal;
  white-space: nowrap;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-field-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--forest);
}

.auth-hint {
  font-size: 12px;
  color: var(--auth-subtle);
  line-height: 1.4;
}

.auth-input {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background-color: #fff;
  /* 16px stops iOS Safari zooming the viewport on focus, which on the old
     14px left the form scrolled sideways and half off-screen. */
  font-size: 16px;
  color: var(--forest);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.auth-input::placeholder {
  color: var(--auth-subtle);
}

.auth-input:focus {
  border-color: var(--teal-hover);
}

/* `outline: none` used to be the whole story here, replaced by a border-colour
   shift and a 3px shadow at 1.15:1 — invisible. A real ring, on every focusable
   thing in the flow, not just inputs. */
.auth-input:focus-visible,
.auth-submit-btn:focus-visible,
.auth-oauth-btn:focus-visible,
.auth-resend-btn:focus-visible,
.auth-lang:focus-visible,
.auth-forgot a:focus-visible,
.auth-switch a:focus-visible,
.auth-switch-link:focus-visible {
  outline: 2px solid var(--teal-hover);
  outline-offset: 2px;
}

.auth-forgot {
  text-align: right;
  margin-top: -10px;
}

/* --teal on warm-white is 3.73:1 and these are 12.5px; --teal-hover is 5.47:1
   and reads as the same colour. */
.auth-forgot a,
.auth-switch a,
.auth-switch-link,
.auth-resend-btn {
  font-size: 12.5px;
  color: var(--teal-hover);
  font-weight: 700;
  text-decoration: none;
}

.auth-submit-btn {
  padding: 13px 0;
  /* white on --teal is 4.07:1 at 14.5px, under the 4.5:1 floor for body-size
     text. --teal-hover carries the same hue at 5.95:1. */
  background: var(--teal-hover);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, transform 0.1s;
}

.auth-submit-btn:hover {
  background: #115856;
}

.auth-submit-btn:active {
  transform: scale(0.98);
}

.auth-switch {
  font-size: 13px;
  color: var(--forest);
  text-align: center;
}

.auth-fineprint {
  font-size: 12px;
  color: var(--auth-subtle);
  text-align: center;
  line-height: 1.5;
  margin-top: -6px;
}

/* The left bar carries the same "something is wrong" signal without relying on
   red alone; role="alert" on the element announces it. */
.auth-error {
  color: #b3261e;
  font-size: 13px;
  background: rgba(179, 38, 30, 0.08);
  border-left: 3px solid #b3261e;
  border-radius: 0 8px 8px 0;
  padding: 10px 12px;
  text-align: left;
}

.auth-notice-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(27, 140, 138, 0.12);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-resend-form {
  margin: 0;
}

.auth-resend-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

@media (max-width: 760px) {
  .auth-brand {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-submit-btn:active {
    transform: none;
  }
}