/* ==========================================================================
   auth.css - sign in / create account / reset (page-wp-login.php) and the
   student registration page (page-student-registration.php). 2026-10-21.

   One shell for both: a dark brand panel (template-parts/auth-brand.php) on
   the left from 1024px, the form on a quiet light page on the right. Same
   palette, type and pill buttons as the home page (home.css).

   The login markup keeps the class names its inline JS drives - .em-tab-btn
   and .em-form-panel (.active), .em-alert (.show), .em-btn-submit
   (.loading), .em-pwd-strength (.show), .input-error - so those are styled
   here under the same names. Input metrics (48px, 12px radius, 1.5px border,
   42px icon gutter) copy the registration form's rules in style.css so the
   two pages' fields are identical.
   ========================================================================== */

body.ema-auth-page {
  --auth-accent: #388E3C;
  --auth-green: #2e7d32;
  --auth-soft: #e8f5e9;
  --auth-tint: #f5faf5;
  --auth-ink: #0d1f0d;
  --auth-muted: #5a6b5a;
  --auth-line: #dfe9df;
  --auth-dark: #0b1a0c;
  --auth-error: #c62828;

  margin: 0;
  padding: 0;
  min-height: 100vh;
  background:
    radial-gradient(50% 40% at 80% 0%, rgba(56, 142, 60, .08), transparent 70%),
    var(--auth-tint);
  color: var(--auth-ink);
  font-family: var(--font-base, "Poppins", system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;

  /* The theme's overflow-x: hidden on body makes body a scroll container, which
     stops the sticky brand panel from sticking (same trap as article.css).
     `clip` hides the overflow without that side effect; `hidden` is the
     fallback for browsers that lack it. */
  overflow-x: hidden;
  overflow-x: clip;
}

.ema-auth,
.ema-auth *,
.ema-auth *::before,
.ema-auth *::after {
  box-sizing: border-box;
}

:where(.ema-auth) a {
  color: inherit;
  text-decoration: none;
}

:where(.ema-auth) h1,
:where(.ema-auth) h2,
:where(.ema-auth) p,
:where(.ema-auth) ul {
  margin: 0;
  padding: 0;
}

.ema-auth button {
  font: inherit;
}

/* --- Shell ----------------------------------------------------------------- */

.ema-auth {
  display: grid;
  min-height: 100vh;
}

.ema-auth-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px var(--gutter, 16px) 28px;
}

.ema-auth-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ema-auth-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--auth-line);
  border-radius: 999px;
  background: #fff;
  font-size: .85rem;
  font-weight: 500;
  color: var(--auth-muted);
  transition: color .2s ease, border-color .2s ease;
}

.ema-auth-back:hover {
  border-color: var(--auth-accent);
  color: var(--auth-green);
}

.ema-auth-form {
  width: 100%;
  max-width: 420px;
  margin: auto;
  padding: 40px 0 24px;
}

.ema-auth--wide .ema-auth-form {
  max-width: 600px;
}

/* Plain text, not flex: as flex items the loose words and the full stop
   after a link each get their own gap. */
.ema-auth-legal {
  max-width: 420px;
  margin: 0 auto;
  font-size: .78rem;
  line-height: 1.6;
  text-align: center;
  color: var(--auth-muted);
}

.ema-auth-legal i {
  color: var(--auth-accent);
}

.ema-auth-legal a {
  font-weight: 600;
  color: var(--auth-green);
}

.ema-auth-legal a:hover {
  text-decoration: underline;
}

/* --- Logo ------------------------------------------------------------------ */

.ema-auth-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.ema-auth-logo-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #43a047, #1b5e20);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(56, 142, 60, .35);
}

.ema-auth-logo--compact {
  color: var(--auth-green);
}

/* --- Brand panel ------------------------------------------------------------ */

.ema-auth-brand {
  display: none;
}

/* --- Tabs ------------------------------------------------------------------ */

.ema-auth .em-tab-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 32px;
  padding: 4px;
  border-radius: 14px;
  background: #e9f1e9;
}

.ema-auth .em-tab-btn {
  min-height: 42px;
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--auth-muted);
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.ema-auth .em-tab-btn:hover {
  color: var(--auth-ink);
}

.ema-auth .em-tab-btn.active {
  background: #fff;
  color: var(--auth-green);
  box-shadow: 0 1px 2px rgba(13, 31, 13, .06), 0 4px 12px rgba(13, 31, 13, .06);
}

/* --- Panels + headings ------------------------------------------------------ */

.ema-auth .em-form-panel {
  display: none;
}

.ema-auth .em-form-panel.active {
  display: block;
  animation: ema-auth-in .3s ease;
}

@keyframes ema-auth-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.ema-auth .em-card-header {
  margin-bottom: 24px;
}

.ema-auth .em-card-title,
.ema-auth .em-reg-card-title {
  margin: 0;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--auth-ink);
}

.ema-auth .em-card-sub,
.ema-auth .em-reg-card-sub {
  margin: 8px 0 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--auth-muted);
}

/* --- Alerts ------------------------------------------------------------------ */

.ema-auth .em-alert {
  display: none;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: .88rem;
  line-height: 1.5;
}

.ema-auth .em-alert.show {
  display: flex;
}

.ema-auth .em-alert i {
  margin-top: 2px;
}

.ema-auth .em-alert-error {
  background: #fdecea;
  border: 1px solid #f5c6c2;
  color: #a12020;
}

.ema-auth .em-alert-success {
  background: var(--auth-soft);
  border: 1px solid #c8e0c9;
  color: var(--auth-green);
}

/* --- Fields ------------------------------------------------------------------- */

.ema-auth .em-form-group {
  margin-bottom: 18px;
}

.ema-auth .em-form-row-2 {
  display: grid;
  gap: 0 12px;
}

.ema-auth .em-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.ema-auth .em-form-label {
  display: block;
  margin-bottom: 7px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--auth-ink);
}

.ema-auth .em-input-wrap {
  position: relative;
}

.ema-auth .em-input-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: #8fa48f;
  pointer-events: none;
  transition: color .2s ease;
}

.ema-auth .em-input-wrap:focus-within .em-input-icon {
  color: var(--auth-accent);
}

.ema-auth .em-input {
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 16px 0 42px;
  border: 1.5px solid var(--auth-line);
  border-radius: 12px;
  background: #fff;
  color: var(--auth-ink);
  font: inherit;
  font-size: 16px; /* 16px stops iOS zooming into the field */
  box-shadow: none;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.ema-auth .em-input-wrap:has(.em-pwd-toggle) .em-input {
  padding-right: 46px;
}

.ema-auth .em-input::placeholder {
  color: #9aab9a;
}

.ema-auth .em-input:hover {
  border-color: #c9d9c9;
}

.ema-auth .em-input:focus {
  border-color: var(--auth-accent);
  box-shadow: 0 0 0 4px rgba(56, 142, 60, .12);
}

.ema-auth .em-input.input-error {
  border-color: var(--auth-error);
  box-shadow: 0 0 0 4px rgba(198, 40, 40, .08);
}

.ema-auth .em-input--otp {
  letter-spacing: .4em;
  font-weight: 600;
}

/* Browser autofill paints fields pale blue; keep them white like the rest. */
.ema-auth input:-webkit-autofill,
.ema-auth input:-webkit-autofill:hover,
.ema-auth input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--auth-ink);
  box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 9999s ease 0s;
}

.ema-auth .em-pwd-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8fa48f;
  cursor: pointer;
}

.ema-auth .em-pwd-toggle:hover {
  background: var(--auth-tint);
  color: var(--auth-green);
}

.ema-auth .em-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 22px;
  font-size: .88rem;
  color: var(--auth-muted);
  cursor: pointer;
}

.ema-auth .em-checkbox-label input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--auth-accent);
  cursor: pointer;
}

.ema-auth .em-forgot-link,
.ema-auth .em-switch-row button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--auth-green);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}

.ema-auth .em-forgot-link:hover,
.ema-auth .em-switch-row button:hover {
  text-decoration: underline;
}

.ema-auth .em-forgot-link:disabled {
  color: var(--auth-muted);
  cursor: default;
  text-decoration: none;
}

/* Strength meter */
.ema-auth .em-pwd-strength {
  display: none;
  align-items: center;
  gap: 12px;
  margin: -6px 0 18px;
}

.ema-auth .em-pwd-strength.show {
  display: flex;
}

.ema-auth .em-strength-bar {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: #e6eee6;
  overflow: hidden;
}

.ema-auth .em-strength-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  transition: width .3s ease, background .3s ease;
}

.ema-auth .em-strength-text {
  min-width: 56px;
  font-size: .78rem;
  font-weight: 600;
  text-align: right;
}

/* --- Submit --------------------------------------------------------------- */

.ema-auth .em-btn-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  margin-top: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--auth-accent);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(56, 142, 60, .28);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* Arrow after the label: the icon is first in the markup (the JS swaps it
   for the spinner in place), so it is moved visually, not in the DOM. */
.ema-auth .em-btn-submit > i {
  order: 2;
}

.ema-auth .em-btn-submit > span:last-child {
  order: 1;
}

.ema-auth .em-btn-submit:hover {
  background: var(--auth-green);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(56, 142, 60, .32);
}

.ema-auth .em-btn-submit.loading {
  opacity: .8;
  pointer-events: none;
}

.ema-auth .em-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ema-auth-spin .7s linear infinite;
}

@keyframes ema-auth-spin {
  to { transform: rotate(360deg); }
}

.ema-auth .em-resend {
  margin-top: 14px;
  text-align: center;
}

.ema-auth .em-switch-row {
  margin-top: 26px;
  font-size: .88rem;
  text-align: center;
  color: var(--auth-muted);
}

.ema-auth .em-switch-row button {
  font-size: .88rem;
}

/* --- Student registration (Tutor form, tutor/dashboard/registration.php) ---- */

/* The shell's brand panel replaces the form's own pitch rail. */
.ema-auth .em-reg-aside {
  display: none;
}

.ema-auth .em-reg-layout {
  display: block;
}

.ema-auth .em-reg-card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* The form element carries 24px of padding from an ID-level rule; inside
   the shell it would indent every field past the heading. */
.ema-auth #tutor-registration-form.em-reg-form {
  padding: 0;
}

.ema-auth .em-reg-card-head {
  margin-bottom: 26px;
  padding: 0;
  border: 0;
}

.ema-auth .em-reg-section {
  margin: 4px 0 14px;
}

.ema-auth .em-reg-grid--3 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ema-auth .em-reg-grid--3 > :nth-child(3) {
  grid-column: 1 / -1;
}

.ema-auth .em-reg-wrap .em-reg-input {
  background: #fff;
  font-size: 16px;
}

.ema-auth .em-reg-wrap .em-reg-input:focus {
  box-shadow: 0 0 0 4px rgba(56, 142, 60, .12);
}

.ema-auth .em-reg-wrap .em-reg-submit {
  width: 100%;
  min-height: 52px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(56, 142, 60, .28);
}

.ema-auth .em-reg-signin {
  text-align: center;
}

/* --- Breakpoints --------------------------------------------------------- */

@media (min-width: 480px) {
  .ema-auth .em-form-row-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 479px) {
  .ema-auth .em-reg-grid--3,
  .ema-auth .em-reg-grid--2 {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) {
  .ema-auth-main {
    padding: 24px 40px 32px;
  }
}

@media (min-width: 1024px) {
  .ema-auth {
    grid-template-columns: minmax(380px, 0.85fr) minmax(0, 1.15fr);
    padding: 16px;
    gap: 16px;
  }

  .ema-auth-main {
    padding: 8px 32px 16px;
  }

  /* The brand panel carries the logo; up here the top bar is only the
     way back, aligned right. */
  .ema-auth-logo--compact {
    visibility: hidden;
  }

  .ema-auth-brand {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    height: calc(100vh - 32px);
    min-height: 600px;
    padding: 40px 44px;
    overflow: hidden;
    border-radius: 28px;
    background:
      radial-gradient(70% 60% at 100% 0%, rgba(102, 187, 106, .30), transparent 60%),
      radial-gradient(50% 40% at 0% 100%, rgba(56, 142, 60, .22), transparent 70%),
      linear-gradient(160deg, #0b1a0c, #12301a);
    color: #fff;
  }

  /* Faint dot grid, the same texture as the home hero. */
  .ema-auth-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
  }

  .ema-auth-brand > * {
    position: relative;
  }

  .ema-auth-brand .ema-auth-logo {
    color: #fff;
  }

  .ema-auth-headline {
    font-size: clamp(2.2rem, 1.4rem + 2vw, 3.2rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.03em;
    color: #fff;
  }

  .ema-auth-headline span {
    color: #81c784;
  }

  .ema-auth-lede {
    margin-top: 14px;
    font-size: 1rem;
    color: rgba(255, 255, 255, .68);
  }

  .ema-auth-perks {
    display: grid;
    gap: 16px;
    margin-top: 32px;
    list-style: none;
  }

  .ema-auth-perks li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
  }

  .ema-auth-perk-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .06);
    color: #a5d6a7;
    font-size: 1.05rem;
    flex-shrink: 0;
  }

  .ema-auth-perks strong {
    display: block;
    font-size: .95rem;
    font-weight: 600;
  }

  .ema-auth-perks small {
    display: block;
    margin-top: 2px;
    font-size: .82rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .6);
  }

  .ema-auth-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    align-self: flex-start;
    padding: 10px 12px 10px 10px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .ema-auth-chip-fx {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .1);
    font-size: .78rem;
    font-style: italic;
    font-weight: 700;
    color: #a5d6a7;
  }

  .ema-auth-chip code {
    font-family: ui-monospace, Consolas, monospace;
    font-size: .85rem;
    color: #c5e1a5;
    background: none;
  }

  .ema-auth-chip-ok {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--auth-accent);
    color: #fff;
    font-size: .8rem;
  }
}

/* Short laptop screens: tighten the panel rather than clip the list. */
@media (min-width: 1024px) and (max-height: 760px) {
  .ema-auth-brand {
    padding: 32px 40px;
  }

  .ema-auth-perks {
    gap: 12px;
    margin-top: 22px;
  }

  .ema-auth-perks small {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ema-auth *,
  .ema-auth *::before,
  .ema-auth *::after {
    animation: none !important;
    transition: none !important;
  }
}