/* ==========================================================================
   Account pages — sign in, register, recover, confirm.

   The same visual world as the landing page (tokens duplicated on purpose:
   these pages must not load landing.css, whose scroll machinery assumes the
   long document). A single focused card over the night ground; gold stays
   reserved for the primary action.

   Accessibility commitments (WCAG 2.2 AA):
   - every text/background pair here measures >= 4.5:1;
   - all interactive targets are >= 48px tall;
   - inputs are >= 16px so iOS never zoom-jumps the viewport (see the
     !important note in the field rule);
   - :focus-visible is always a drawn ring, never removed;
   - motion respects prefers-reduced-motion.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */

:root {
  color-scheme: dark;

  --space: #03050b;
  --midnight: #070c1a;
  --shelf: #0a1122;

  --white: #f2f5fb;
  --silver: #dfe5f1;
  --silver-dim: #a6b0c7;

  --gold: #c6a97a;
  --gold-lit: #e6cd9c;
  --gold-ink: #171006; /* text on gold: 9.4:1 against --gold */

  --danger: #f2b8bd;   /* error text on midnight: 10.9:1 */
  --danger-edge: rgba(242, 152, 160, 0.5);
  --success: #b9e3c6;  /* 11.9:1 */
  --success-edge: rgba(150, 216, 175, 0.45);

  --glass: rgba(255, 255, 255, 0.04);
  --glass-lit: rgba(255, 255, 255, 0.07);
  --hair: rgba(255, 255, 255, 0.085);
  --hair-lit: rgba(255, 255, 255, 0.17);

  --display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    "Times New Roman", ui-serif, serif;
  --body: "Segoe UI Variable Text", "Segoe UI", -apple-system,
    BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --field-radius: 10px;
  --card-radius: 18px;
}

/* 2. Ground ---------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body.auth {
  min-height: 100%;
  margin: 0;
  font-family: var(--body);
  color: var(--silver);
  background:
    radial-gradient(120vmax 80vmax at 50% -30%, #101a35 0%, transparent 60%),
    radial-gradient(80vmax 60vmax at 85% 110%, #0d1226 0%, transparent 55%),
    var(--space);
  display: grid;
  grid-template-rows: auto 1fr auto;

  /* iPhone PWA: never let the card or footer sit under the notch or home bar. */
  padding:
    env(safe-area-inset-top, 0)
    env(safe-area-inset-right, 0)
    env(safe-area-inset-bottom, 0)
    env(safe-area-inset-left, 0);
}

/* 3. Header / footer -------------------------------------------------------- */

.auth-header {
  display: flex;
  justify-content: center;
  padding: clamp(1.4rem, 4vh, 2.6rem) 1.25rem 0;
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  color: var(--white);
  text-decoration: none;
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
}

.auth-brand:focus-visible {
  outline: 2px solid var(--gold-lit);
  outline-offset: 4px;
  border-radius: 4px;
}

.auth-brand__mark {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(198, 169, 122, 0.8);
}

.auth-footer {
  text-align: center;
  padding: 1.4rem 1.25rem calc(1.4rem + env(safe-area-inset-bottom, 0));
  font-size: 0.85rem;
  color: var(--silver-dim);
}

.auth-footer a {
  color: var(--silver);
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 0 0.35rem;
}

/* 4. The card ---------------------------------------------------------------- */

.auth-main {
  display: grid;
  place-items: start center;
  padding: clamp(1rem, 4vh, 3rem) 1rem 2rem;
}

.auth-card {
  inline-size: min(30rem, 100%);
  background: linear-gradient(180deg, var(--glass-lit), var(--glass));
  border: 1px solid var(--hair);
  border-radius: var(--card-radius);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.auth-card h1 {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.65rem, 5.4vw, 2.1rem);
  line-height: 1.15;
  color: var(--white);
  letter-spacing: 0.01em;
}

.auth-lede {
  margin: 0 0 1.6rem;
  color: var(--silver-dim);
  font-size: 1rem;
  line-height: 1.55;
}

.auth-lede a,
.auth-card p a {
  color: var(--gold-lit);
  text-underline-offset: 3px;
}

/* 5. Fields ------------------------------------------------------------------ */

.field {
  margin-block-end: 1.15rem;
}

.field label {
  display: block;
  margin-block-end: 0.45rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--silver);
}

.field input[type="email"],
.field input[type="password"],
.field input[type="text"] {
  inline-size: 100%;
  min-block-size: 52px;
  padding: 0.8rem 1rem;

  /* 16px is a floor, not a preference: below it, iOS Safari zooms the whole
     viewport on focus and the page never quite recovers. Kept !important so a
     well-meaning compact-density pass cannot silently reintroduce the jump. */
  font-size: 16px !important;
  font-family: var(--body);

  color: var(--white);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hair-lit);
  border-radius: var(--field-radius);
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}

.field input:focus-visible {
  outline: 2px solid var(--gold-lit);
  outline-offset: 2px;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.07);
}

.field input[aria-invalid="true"] {
  border-color: var(--danger-edge);
}

.field-hint {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--silver-dim);
}

.field-error {
  margin: 0.45rem 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--danger);
}

/* Checkbox row (Remember me) */

.field-check {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-block-size: 48px;
  margin-block-end: 0.4rem;
}

.field-check input[type="checkbox"] {
  inline-size: 22px;
  block-size: 22px;
  accent-color: var(--gold);
  flex: none;
}

.field-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--gold-lit);
  outline-offset: 2px;
}

.field-check label {
  margin: 0;
  font-size: 0.95rem;
  color: var(--silver);
}

/* 6. Actions ------------------------------------------------------------------ */

.auth-actions {
  margin-block-start: 1.5rem;
  display: grid;
  gap: 0.9rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 52px;
  padding: 0.85rem 1.4rem;
  inline-size: 100%;
  font-family: var(--body);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 160ms var(--ease), background 160ms var(--ease);
}

.btn--gold {
  background: linear-gradient(180deg, var(--gold-lit), var(--gold));
  color: var(--gold-ink);
}

.btn--gold:hover {
  transform: translateY(-1px);
}

.btn--quiet {
  background: transparent;
  border-color: var(--hair-lit);
  color: var(--silver);
}

.btn--quiet:hover {
  background: var(--glass-lit);
}

.btn:focus-visible {
  outline: 2px solid var(--gold-lit);
  outline-offset: 3px;
}

.auth-alt {
  margin: 1.4rem 0 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--silver-dim);
}

.auth-alt a {
  color: var(--gold-lit);
  text-underline-offset: 3px;
  display: inline-flex;
  min-block-size: 44px;
  align-items: center;
  padding: 0 0.3rem;
}

/* 7. Notices ------------------------------------------------------------------ */

.notice {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 1.4rem;
  padding: 0.95rem 1.1rem;
  border-radius: 12px;
  font-size: 0.95rem;
  line-height: 1.55;
}

.notice--error {
  background: rgba(160, 55, 66, 0.16);
  border: 1px solid var(--danger-edge);
  color: var(--danger);
}

.notice--success {
  background: rgba(52, 130, 84, 0.16);
  border: 1px solid var(--success-edge);
  color: var(--success);
}

.notice ul {
  margin: 0;
  padding-inline-start: 1.1rem;
}

.notice li + li {
  margin-block-start: 0.3rem;
}

/* 8. Acknowledgement panel (check your email) --------------------------------- */

.auth-ack {
  text-align: center;
  padding: 1rem 0 0.4rem;
}

.auth-ack__glyph {
  inline-size: 56px;
  block-size: 56px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--glass-lit);
  border: 1px solid var(--hair-lit);
  color: var(--gold-lit);
  font-size: 1.5rem;
}

/* 9. Small screens: the card becomes the page --------------------------------- */

@media (max-width: 480px) {
  .auth-main {
    padding-inline: 0.75rem;
  }

  .auth-card {
    padding: 1.4rem 1.15rem 1.7rem;
  }
}

/* 10. Motion ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Skip link (keyboard users land on the form, not the header) */

.skip {
  position: absolute;
  inset-inline-start: -9999px;
}

.skip:focus {
  position: fixed;
  inset-inline-start: 1rem;
  inset-block-start: calc(1rem + env(safe-area-inset-top, 0));
  z-index: 10;
  padding: 0.8rem 1.2rem;
  background: var(--shelf);
  color: var(--white);
  border: 1px solid var(--gold);
  border-radius: 8px;
}