/* =============================================================================
   login.css — the auth panel, shared by login.php and register.php.

   Extracted from login.php's inline <style> when register.php was added: the two
   pages are the same card with different contents, and keeping two copies of
   ~180 lines of CSS is exactly how this codebase has drifted before. Anything
   that should look identical on both pages belongs here; anything genuinely
   page-specific stays inline on that page.
   ============================================================================= */

/* ---- LOGIN LAYOUT ---- */
.login-wrap {
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px 80px;
}

.login-panel {
  width: 100%;
  max-width: 420px;
  padding: 44px 40px 40px;
}

/* ---- WORDMARK ---- */
.login-wordmark {
  text-align: center;
  margin-bottom: 28px;
}
.login-wordmark .tagline {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-style: italic;
  display: block;
  margin-bottom: 6px;
}
.login-wordmark .apotheosis {
  font-family: var(--font-display);
  font-size: clamp(28px, 8vw, 44px);
  letter-spacing: 0.26em;
  background: linear-gradient(180deg, var(--gold-pale) 0%, var(--gold-bright) 40%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  margin-right: -0.26em;
}

/* ---- HEADING ---- */
.login-heading {
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.30em;
  color: var(--text-muted);
  text-transform: uppercase;
  text-align: center;
  margin: 20px 0 28px;
}

/* ---- FORM ---- */
.field { margin-bottom: 18px; }

.field label {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 7px;
}

.field input {
  width: 100%;
  background: var(--bg-deepest);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-bright);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  -webkit-appearance: none;
}
.field input::placeholder { color: var(--text-faint); }
.field input:focus {
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(212,136,10,0.15);
}
/* Sits under a field to explain it. Used on register.php to head off the
   commonest failure: people typing their display name. */
.field .hint {
  display: block;
  margin-top: 7px;
  font-family: var(--font-body);
  font-size: 12.6px;
  line-height: 1.5;
  color: var(--text-dim);
  font-style: italic;
}

/* ---- ERROR ---- */
.login-error {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(201,48,0,0.14);
  border: 1px solid var(--line-crimson);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  margin-bottom: 18px;
  font-family: var(--font-body);
  font-size: 14.4px;
  color: var(--text-bright);
  font-style: italic;
}
.login-error::before {
  content: "✦";
  color: var(--crimson);
  flex-shrink: 0;
  font-style: normal;
}

/* ---- PRE-LAUNCH NOTICE ---- */
.login-prelaunch {
  background: rgba(245,176,32,0.06);
  border: 1px solid rgba(245,176,32,0.35);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 22px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-bright);
  line-height: 1.55;
}
.login-prelaunch strong {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 8px;
  font-weight: 500;
}
.login-prelaunch .who { color: var(--gold); font-style: italic; }

/* ---- SUBMIT ---- */
.login-submit {
  width: 100%;
  padding: 13px;
  margin-top: 6px;
  font-size: 13px;
  letter-spacing: 0.36em;
  justify-content: center;
}

/* ---- FORGOT-PASSWORD LINK ---- */
.login-forgot {
  text-align: center;
  margin-top: 14px;
  font-size: 13.2px;
}
.login-forgot a { color: var(--gold); }
.login-forgot a:hover { color: var(--gold-bright); }

/* ---- FOOTER NOTE ---- */
.login-note {
  text-align: center;
  margin-top: 22px;
  font-family: var(--font-body);
  font-size: 13.2px;
  color: var(--text-dim);
  font-style: italic;
}
.login-note a { color: var(--gold); }
.login-note a:hover { color: var(--gold-bright); }

/* ---- THE OTHER DOOR -------------------------------------------------------
   The registration route on login.php (and the way back on register.php). It is
   an <a>, not a <button>, and it sits OUTSIDE the <form>: a second control
   inside the form would submit it (a <button> without type does), and the two
   forms don't want the same fields anyway — login needs a password, registering
   does not. The visual difference the second door needs is already in the design
   system: .btn-primary is filled gold, plain .btn is a gold outline. */
.login-alt {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.login-alt .lead {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 14px;
}
.login-alt .btn {
  width: 100%;
  padding: 13px;
  font-size: 13px;
  letter-spacing: 0.28em;
  justify-content: center;
}
.login-alt .sub {
  margin: 11px 0 0;
  font-family: var(--font-body);
  font-size: 13.2px;
  line-height: 1.55;
  color: var(--text-dim);
  font-style: italic;
}

/* ---- OUTCOME PANEL (register.php after POST) ---- */
.login-outcome {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}
.login-outcome p { margin: 0 0 14px; }
.login-outcome p:last-child { margin-bottom: 0; }
.login-outcome .muted { color: var(--text-dim); font-size: 13.6px; }
.login-outcome a { color: var(--gold); }
.login-outcome a:hover { color: var(--gold-bright); }
.login-outcome .steps {
  margin: 0 0 16px;
  padding-left: 20px;
  color: var(--text);
}
.login-outcome .steps li { margin-bottom: 7px; }

/* ---- Phones -----------------------------------------------------------
   The first page a new member ever meets, and it had no responsive rules at
   all. Measured at 320-414px before and after; 600px is the breakpoint most
   of the site already uses.

     - Card padding stayed 40px at every width, so on a 320px phone 80 of the
       card's 257px were padding and the name field was 175px. Now 235px.
     - "Enter the Temple" wrapped onto two lines at 320 AND 375, the two
       commonest widths, purely from letter-spacing.
     - "Forgot your password?" was a 15px-tall tap target on the page whose
       whole job is recovering access. Now 47px, above the 44px minimum.

   Font sizes are deliberately NOT reduced: the inputs are 16px, which is what
   stops iOS zooming the page when a field takes focus. */
@media (max-width: 600px) {
  /* The display wordmark is 52.8px with wide tracking. Its trailing
     letter-spacing sits after the final S and counts toward layout width, so
     it pushed delete-account.php 6px into horizontal scroll even though
     nothing was visibly cut off. Smaller here also buys back vertical space
     above the fold on the page whose whole job is getting you signed in. */
  .login-wordmark .apotheosis { font-size: 38px; letter-spacing: .16em; }
  .login-wordmark .tagline    { font-size: 11px; letter-spacing: .22em; }
  .login-wrap    { padding: 24px 14px 56px; }
  .login-panel   { padding: 30px 20px 26px; }
  .login-submit  { letter-spacing: .10em; padding-left: 10px; padding-right: 10px; }
  .login-forgot  { margin-top: 2px; }
  .login-forgot a { display: inline-block; padding: 13px 10px; }
  /* Same budget as .login-submit — "Create Account" is only one character
     shorter than "Enter the Temple", which wrapped at both 320 and 375. */
  .login-alt          { margin-top: 20px; padding-top: 18px; }
  .login-alt .btn     { letter-spacing: .10em; padding-left: 10px; padding-right: 10px; }
}