/* ============================================================
   Morley Management Group — Learning Lab access

   The gate in front of the Learning Lab: sign up on one tab, log in
   on the other. Built as a full navy screen because the site header
   is transparent with white links, so anything pale at the top of the
   page would swallow the navigation.
   ============================================================ */

.auth {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(120% 120% at 82% -20%, var(--navy-800) 0%, var(--navy-900) 55%, var(--navy-950) 100%);
  /* Pulled up behind the transparent header in home.css, so the top
     padding has to clear it. */
  margin-top: calc(-1 * var(--header-h));
  padding-block: calc(clamp(2.5rem, 1.8rem + 3vw, 4.5rem) + var(--header-h))
                 clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  min-height: 100svh;
  display: flex;
  align-items: center;
}
.auth::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.auth .shell { position: relative; z-index: 1; width: 100%; }

.auth__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  align-items: center;
}

/* ---- Left: why it is worth the account ---------------------- */
.auth__pitch h1 {
  font-size: var(--step-5);
  font-weight: var(--weight-extra);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  margin: 0 0 var(--space-5);
  max-width: 16ch;
}
.auth__lede {
  font-size: var(--step-1);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  max-width: 52ch;
  margin: 0 0 var(--space-7);
}
.auth__points {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0 0 var(--space-7);
}
.auth__points li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--step-0);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
}
.auth__points .tick { margin-top: 0.35em; }
.auth__note {
  font-size: var(--text-xs);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.58);
  max-width: 46ch;
  margin: 0;
}
.auth__note a { color: var(--copper-300); }

/* ---- Right: the card ---------------------------------------- */
.auth-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--copper-500);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.5rem, 0.9rem + 2.4vw, 2.5rem);
}

/* Confirmation strip for someone arriving straight from Stripe.
   There is no markup for this in the page: auth.js builds and inserts
   it only when the person actually came from a payment, so the source
   carries no hidden placeholder. */
.auth-paid {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--success-100);
  border: 1px solid rgba(31, 122, 74, 0.22);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: 0 0 var(--space-6);
}
.auth-paid__mark {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--success-600);
  display: grid;
  place-items: center;
}
.auth-paid__mark svg { stroke: #fff; }
.auth-paid p {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--navy-900);
}
.auth-paid b { font-weight: var(--weight-bold); }

/* ---- Tabs ---------------------------------------------------- */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 5px;
  background: var(--surface-warm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-6);
}
.auth-tab {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 11px 14px;
  border-radius: var(--radius-pill);
  transition:
    background-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}
.auth-tab:hover { color: var(--navy-900); }
.auth-tab[aria-selected="true"] {
  background: var(--navy-900);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.auth-panel[hidden] { display: none; }
.auth-form { display: flex; flex-direction: column; gap: var(--space-5); }
.auth-form__head { margin: 0 0 calc(-1 * var(--space-2)); }
.auth-form__head h2 {
  font-size: var(--step-2);
  font-weight: var(--weight-extra);
  color: var(--navy-800);
  text-transform: none;
  margin: 0 0 var(--space-2);
}
.auth-form__head p {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
}

/* Two fields on one line where they belong together */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

/* ---- Password ------------------------------------------------ */
.pw { position: relative; }
/* Room for the reveal button so long values never run under it */
.pw input { padding-right: 82px; }
.pw__toggle {
  position: absolute;
  top: 50%; right: 8px;
  transform: translateY(-50%);
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--copper-600);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}
.pw__toggle:hover { color: var(--copper-700); background: rgba(177, 83, 38, 0.08); }

.pw-meter {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}
.pw-meter span {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--border-subtle);
  transition: background-color var(--duration-base) var(--ease-standard);
}
.pw-meter[data-score="1"] span:nth-child(-n+1) { background: var(--danger-600); }
.pw-meter[data-score="2"] span:nth-child(-n+2) { background: var(--copper-400); }
.pw-meter[data-score="3"] span:nth-child(-n+3) { background: var(--copper-500); }
.pw-meter[data-score="4"] span { background: var(--success-600); }
.pw-hint {
  margin: 6px 0 0;
  font-size: var(--text-2xs);
  line-height: 1.5;
  color: var(--text-muted);
}

/* ---- Checkbox ------------------------------------------------ */
.check {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  cursor: pointer;
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--text-body);
}
.check input {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 1px;
  accent-color: var(--copper-500);
  cursor: pointer;
}
.check a { color: var(--copper-600); font-weight: var(--weight-semibold); }
.field.is-invalid .check { color: var(--danger-600); }

.auth-form__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.auth-link {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  color: var(--copper-600);
}
.auth-link:hover { color: var(--copper-700); text-decoration: underline; }

/* ---- Form-level status -------------------------------------- */
.auth-status {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.6;
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.auth-status[hidden] { display: none; }
.auth-status--error {
  color: var(--danger-600);
  background: var(--danger-100);
  border: 1px solid rgba(176, 42, 42, 0.22);
}
.auth-status--pending {
  color: var(--navy-900);
  background: var(--surface-warm);
  border: 1px solid var(--border-subtle);
}
.auth-status b { font-weight: var(--weight-bold); }

.auth__alt {
  margin: var(--space-5) 0 0;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.auth__alt button {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--copper-600);
  padding: 0;
}
.auth__alt button:hover { color: var(--copper-700); text-decoration: underline; }

/* ---- Responsive ---------------------------------------------- */
@media (max-width: 1000px) {
  .auth { min-height: 0; }
  .auth__grid { grid-template-columns: minmax(0, 1fr); }
  .auth__pitch h1 { max-width: 22ch; }
  .auth-card { max-width: 560px; }
}
@media (max-width: 520px) {
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .auth-tab { font-size: var(--text-2xs); padding: 11px 8px; }
}