/* ==========================================================================
   Material Academy — Sign in / Create account
   --------------------------------------------------------------------------
   A split page: the photographs on one side, the form on the other. Same
   family as the admin console sign-in, so the two entrances to the site
   look like they belong to one organisation, but warmer — this one faces
   people who have not paid yet.

   Requires assets/css/tokens.css.
   ========================================================================== */

/* This page loads only tokens.css (custom properties, no rules) and this
   file, so there is no global reset to inherit. Without border-box every
   width:100% input added its own padding and border on top and pushed the
   page 46px wide at 390px. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }

.auth {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--paper);
  font-family: var(--font-sans);
  color: var(--ink-900);
}
@media (min-width: 64rem) {
  .auth { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
}

/* ==========================================================================
   1. The photographic side
   ========================================================================== */
.auth__aside {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: none;                       /* the form is the job on small screens */
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-9) var(--space-8);
  color: #fff;
}
@media (min-width: 64rem) {
  .auth__aside { display: flex; position: sticky; top: 0; height: 100vh; height: 100svh; }
}

/* Each photograph is its own layer so they can cross-fade. Only the first is
   eager; the rest are fetched in the background well before their turn. */
.auth__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1600ms var(--ease-out);
}
.auth__photo.is-showing { opacity: 1; }

/* Navy wash. The photographs are busy dockyard scenes and white text needs a
   floor under it; measured at 8.9:1 against the lightest point of the set. */
.auth__aside::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(195deg, rgba(10, 24, 38, 0.66) 0%, rgba(10, 24, 38, 0.90) 72%),
    linear-gradient(0deg, rgba(107, 68, 21, 0.20), rgba(107, 68, 21, 0.20));
}

.auth__brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}
.auth__brand img { width: 40px; height: 40px; }

.auth__pitch { position: relative; max-width: 32ch; }
.auth__kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #e8c893;
  margin-bottom: var(--space-3);
}
.auth__title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: #fff;
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}
.auth__points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.auth__points li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
/* Tick drawn from two borders rather than an icon request. */
.auth__tick {
  flex: none;
  position: relative;
  width: 18px; height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  background: rgba(232, 200, 147, 0.22);
}
.auth__tick::after {
  content: "";
  position: absolute;
  inset-block-start: 4px;
  inset-inline-start: 6px;
  width: 4px; height: 8px;
  border-inline-end: 2px solid #e8c893;
  border-block-end: 2px solid #e8c893;
  transform: rotate(42deg);
}

/* Which photograph is showing, as small marks rather than a carousel widget. */
.auth__dots { position: relative; display: flex; gap: var(--space-2); }
.auth__dot {
  width: 26px; height: 3px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.28);
  transition: background-color 600ms var(--ease-out);
}
.auth__dot.is-showing { background: #e8c893; }

/* ==========================================================================
   2. The form side
   ========================================================================== */
.auth__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-7) var(--gutter) var(--space-9);
}
@media (min-width: 64rem) { .auth__main { padding-block: var(--space-9); } }

.auth__card { width: 100%; max-width: 34rem; }

/* A small brand line for narrow screens, where the aside is hidden. */
.auth__mobile-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
  color: var(--brand-900);
  text-decoration: none;
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}
.auth__mobile-brand img { width: 34px; height: 34px; }
@media (min-width: 64rem) { .auth__mobile-brand { display: none; } }

/* ---------- Tabs --------------------------------------------------------- */
.auth__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding: var(--space-1);
  margin-bottom: var(--space-7);
  background: var(--paper-sunken);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
}
.auth__tab {
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--ink-700);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background-color 260ms var(--ease-out), color 260ms var(--ease-out),
              box-shadow 260ms var(--ease-out);
}
.auth__tab:hover { color: var(--brand-900); }
.auth__tab[aria-selected="true"] {
  background: var(--brand-800);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.auth__tab:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 2px;
}

.auth__h1 {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--brand-900);
  margin: 0 0 var(--space-2);
}
.auth__sub {
  margin: 0 0 var(--space-7);
  color: var(--ink-700);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

/* ---------- Fields ------------------------------------------------------- */
.auth__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-4);
}
@media (min-width: 34rem) { .auth__grid { grid-template-columns: 1fr 1fr; } }
.auth__field { margin-bottom: var(--space-5); min-width: 0; }
.auth__field--wide { grid-column: 1 / -1; }

.auth__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--brand-800);
  margin-bottom: var(--space-2);
}
.auth__optional {
  font-weight: var(--weight-regular);
  color: var(--ink-600);
  font-size: var(--text-xs);
}

.auth__input {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--ink-900);
  background: var(--paper-raised);
  border: 1px solid var(--border-control);
  border-radius: var(--radius);
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
select.auth__input {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-600) 50%),
    linear-gradient(135deg, var(--ink-600) 50%, transparent 50%);
  background-position: right 18px center, right 12px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-inline-end: var(--space-8);
}
.auth__input:hover { border-color: var(--border-brand); }
.auth__input:focus {
  outline: none;
  border-color: var(--accent-700);
  box-shadow: 0 0 0 3px rgba(138, 90, 28, 0.18);
}
.auth__input:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 1px;
}
/* Marked wrong only after it has actually been judged, never while typing. */
.auth__input[aria-invalid="true"] {
  border-color: var(--error);
  background: var(--error-bg);
}
.auth__hint { display: block; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--ink-600); line-height: var(--leading-snug); }
.auth__error {
  display: none;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: #b42318;
}
.auth__error.is-shown { display: block; }

/* Password visibility toggle sits inside the field. */
.auth__pw-wrap { position: relative; }
.auth__pw-wrap .auth__input { padding-inline-end: 3.25rem; }
.auth__pw-toggle {
  position: absolute;
  inset-block: 1px;
  inset-inline-end: 1px;
  width: 3rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: none;
  color: var(--ink-600);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.auth__pw-toggle:hover { color: var(--brand-800); }
.auth__pw-toggle:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: -2px;
}

/* ---------- Strength meter ----------------------------------------------- */
.auth__meter { margin-top: var(--space-3); }
.auth__meter-track {
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--paper-sunken);
  overflow: hidden;
}
.auth__meter-fill {
  height: 100%;
  width: 0%;
  border-radius: var(--radius-pill);
  background: var(--error);
  transition: width 320ms var(--ease-out), background-color 320ms var(--ease-out);
}
.auth__meter-label { display: block; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--ink-600); }

/* The rules, ticked off as they are met. */
.auth__rules {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  gap: var(--space-1) var(--space-3);
}
.auth__rules li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--ink-600);
  transition: color 200ms var(--ease-out);
}
.auth__rules li::before {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--border-control);
  transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.auth__rules li.is-met { color: #15803d; }
.auth__rules li.is-met::before { background: #15803d; border-color: #15803d; }

/* ---------- Consent ------------------------------------------------------ */
.auth__consent {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--ink-700);
}
.auth__consent input {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 2px;
  accent-color: var(--brand-800);
}
.auth__consent a { color: var(--brand-700); }

/* ---------- Submit ------------------------------------------------------- */
.auth__submit {
  width: 100%;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--brand-800);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background-color 240ms var(--ease-out), transform 240ms var(--ease-out),
              box-shadow 240ms var(--ease-out);
}
.auth__submit:hover:not(:disabled) {
  background: var(--accent-700);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(107, 68, 21, 0.28);
}
.auth__submit:active:not(:disabled) { transform: translateY(0); }
.auth__submit:disabled { opacity: 0.55; cursor: not-allowed; }

/* Spinner drawn in CSS so a slow submit needs no extra request. */
.auth__spinner {
  width: 17px; height: 17px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: authSpin 700ms linear infinite;
}
@keyframes authSpin { to { transform: rotate(360deg); } }

.auth__foot { margin-top: var(--space-6); font-size: var(--text-sm); color: var(--ink-600); text-align: center; }
.auth__foot a { color: var(--brand-700); }
.auth__foot--split { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); justify-content: space-between; text-align: start; }

/* ---------- Messages ----------------------------------------------------- */
.auth__msg {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
  border: 1px solid;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
.auth__msg--error   { background: var(--error-bg);   border-color: var(--error);   color: #7a1c1c; }
.auth__msg--success { background: var(--success-bg); border-color: var(--success); color: #14532d; }
.auth__msg--info    { background: var(--brand-50);   border-color: var(--border-brand); color: var(--brand-900); }
.auth__msg ul { margin: var(--space-2) 0 0; padding-inline-start: var(--space-5); }
.auth__msg[hidden] { display: none; }

/* ---------- reCAPTCHA ---------------------------------------------------- */
.auth__captcha { margin-bottom: var(--space-5); }
.auth__captcha[hidden] { display: none; }
/* The widget is a fixed 304px; let it shrink rather than overflow a phone. */
@media (max-width: 22rem) {
  .auth__captcha .g-recaptcha { transform: scale(0.86); transform-origin: 0 0; }
}

/* ---------- Phone field -------------------------------------------------- */
/* intl-tel-input injects its own wrapper; make it fill the grid cell. */
.auth__field .iti { width: 100%; display: block; }
.auth__field .iti__flag-container { z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  .auth__photo { transition: none; }
  .auth__submit:hover:not(:disabled) { transform: none; }
  .auth__spinner { animation-duration: 2s; }
  .auth__meter-fill, .auth__rules li, .auth__rules li::before { transition: none; }
}