/* ─── Login page — standalone, no Bootstrap ──────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --night:    #0c0c0c;
  --dark-bg:  #111111;
  --card:     #1c1c1c;
  --border:   rgba(255, 255, 255, 0.09);
  --gold:     #d4a843;
  --gold-light: #f0c86a;
  --text:     #f0f0f0;
  --muted:    #888888;
  --r-lg:     10px;
  --r-xl:     16px;
  --r-pill:   999px;
  /* Fonts: defined in templates/partials/_fonts.html (single source of truth) */
}

html, body {
  height: 100%;
  font-family: var(--font-body);
  background: var(--night);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ─── Background — transparent so starfield canvas shows through ──────── */
.login-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

/* ─── Standalone starfield canvas (registration-flow pages) ──────────────
   starfield.js sizes the canvas drawing buffer to innerWidth*devicePixelRatio,
   which also becomes its intrinsic layout size. Without this rule the canvas
   renders in normal flow at ~1600px tall and pushes the content card far
   below the viewport. Pin it as a fixed, behind-content background. */
.starfield-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}

/* ─── Shell ───────────────────────────────────────────────────────────────── */
.login-shell {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

/* ─── Card ────────────────────────────────────────────────────────────────── */
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* ─── Brand ───────────────────────────────────────────────────────────────── */
.login-brand {
  display: block;
  margin-bottom: 1.25rem;
}
.login-logo {
  width: clamp(44px, 8vw, 56px);
  height: auto;
}

/* ─── Signup shell ────────────────────────────────────────────────────────── */
.signup-shell {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
}

/* ─── Signup card ─────────────────────────────────────────────────────────── */
.signup-card {
  width: 100%;
  max-width: 640px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 2.5rem 2rem;
}

/* ─── Signup brandmark ────────────────────────────────────────────────────── */
.signup-brandmark {
  display: block;
  text-align: center;
  margin-bottom: 1.25rem;
}
.signup-brandmark-logo {
  width: clamp(44px, 8vw, 56px);
  height: auto;
}

.signup-heading {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-align: center;
  margin-bottom: 0.4rem;
}
.signup-sub {
  font-size: 0.875rem;
  color: var(--muted);
  text-align: center;
  margin-bottom: 2rem;
}

/* ─── Signup form ─────────────────────────────────────────────────────────── */
.signup-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* Paired rows — holds the two-column positions the form has always had. */
.signup-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  align-items: start;
}

.signup-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.signup-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* Only referral code carries this — every other field on the form is required.
   It is the one signal on the row that has to outrank the label, so it runs at
   full muted contrast rather than below it. */
.signup-optional {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-pill);
  padding: 0.1rem 0.5rem;
}

.signup-field input,
.signup-field select {
  width: 100%;
  background: var(--night);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.65rem 0.9rem;
  outline: none;
  transition: border-color 0.18s;
}
.signup-field input:focus,
.signup-field select:focus {
  border-color: var(--gold);
}
.signup-field input::placeholder { color: rgba(136, 136, 136, 0.5); }

.signup-field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23888888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
}
.signup-field select option { background: var(--card); color: var(--text); }

.signup-hint {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--muted);
}
.signup-hint:empty { display: none; }

.signup-error {
  font-size: 0.75rem;
  line-height: 1.4;
  color: #e88;
}

/* Red border without extra template plumbing — Django adds no error class. */
.signup-field:has(.signup-error) input,
.signup-field:has(.signup-error) select {
  border-color: rgba(220, 80, 60, 0.55);
}

/* ─── Account type + guide ────────────────────────────────────────────────── */
/* The guide toggle sits top-right, opposite the label. Taking <summary> out of
   flow keeps it there while the panel and select stay full width below. */
.signup-field--account { position: relative; }

.account-guide-toggle {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.account-guide-toggle::-webkit-details-marker { display: none; }
.account-guide-toggle:hover { color: var(--gold); }
.account-guide-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
.account-guide-toggle::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.18s;
}
.account-guide[open] .account-guide-toggle::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.account-guide-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  background: var(--night);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1rem 1.1rem;
  margin: 0.15rem 0 0.6rem;
}
.account-guide-title {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.account-guide-column ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.account-guide-column li {
  position: relative;
  padding-left: 0.85rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}
.account-guide-column li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(212, 168, 67, 0.55);
}

/* ─── Terms checkbox ──────────────────────────────────────────────────────── */
.signup-terms {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.15rem;
}
.signup-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.4;
  cursor: pointer;
}
.signup-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 0.1rem;
  background: var(--night);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}
.signup-check input[type="checkbox"]:hover { border-color: rgba(255, 255, 255, 0.25); }
.signup-check input[type="checkbox"]:checked {
  background: var(--gold);
  border-color: var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5L4.5 8.5L11 1.5' stroke='%230c0c0c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.signup-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ─── Messages ────────────────────────────────────────────────────────────── */
.signup-alert {
  border-radius: var(--r-lg);
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.825rem;
  line-height: 1.45;
}
.signup-alert--error,
.signup-alert--warning {
  background: rgba(220, 80, 60, 0.10);
  border: 1px solid rgba(220, 80, 60, 0.30);
  color: #e88;
}
.signup-alert--success,
.signup-alert--info,
.signup-alert--debug {
  background: rgba(212, 168, 67, 0.10);
  border: 1px solid rgba(212, 168, 67, 0.30);
  color: var(--gold-light);
}

/* ─── Heading ─────────────────────────────────────────────────────────────── */
.login-heading {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-align: center;
  margin-bottom: 0.4rem;
}
.login-sub {
  font-size: 0.875rem;
  color: var(--muted);
  text-align: center;
  margin-bottom: 2rem;
}

/* ─── Form ────────────────────────────────────────────────────────────────── */
.login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.login-errors {
  background: rgba(220, 80, 60, 0.10);
  border: 1px solid rgba(220, 80, 60, 0.30);
  border-radius: var(--r-lg);
  padding: 0.75rem 1rem;
  font-size: 0.825rem;
  color: #e88;
}

/* An account awaiting review is not a failed login — it reads as information,
   not as a red error the member is meant to fix. */
.login-notice {
  background: rgba(120, 170, 220, 0.10);
  border: 1px solid rgba(120, 170, 220, 0.28);
  border-radius: var(--r-lg);
  padding: 0.75rem 1rem;
  font-size: 0.825rem;
  color: #bcd6ee;
}
.login-notice p + p {
  margin-top: 0.5rem;
  color: #93b2cd;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.login-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.login-field input {
  width: 100%;
  background: var(--night);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.65rem 0.9rem;
  outline: none;
  transition: border-color 0.18s;
}
.login-field input:focus {
  border-color: var(--gold);
}
.login-field input::placeholder { color: rgba(136, 136, 136, 0.5); }
.login-field-error {
  font-size: 0.75rem;
  color: #e88;
}

/* ─── Actions row ─────────────────────────────────────────────────────────── */
.login-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
}
.login-forgot {
  font-size: 0.8rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.18s;
}
.login-forgot:hover { color: var(--text); }

.login-submit {
  padding: 0.6rem 1.6rem;
  border: none;
  border-radius: var(--r-pill);
  background: var(--text);
  color: var(--night);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: opacity 0.18s, transform 0.18s;
}
.login-submit:hover { opacity: 0.88; transform: translateY(-1px); }
.login-submit:active { transform: translateY(0); }

/* ─── Footer note ─────────────────────────────────────────────────────────── */
.login-footer-note {
  margin-top: 1.75rem;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}
.login-footer-note a {
  color: var(--gold);
  text-decoration: none;
  font-weight: 600;
}
.login-footer-note a:hover { text-decoration: underline; }

.terms-link {
  color: var(--gold);
  text-decoration: none;
  font-weight: 600;
}
.terms-link:hover { text-decoration: underline; color: var(--gold-light); }

/* ─── Gold CTA button ─────────────────────────────────────────────────────── */
.btn-gold {
  display: inline-block;
  padding: 0.6rem 1.6rem;
  border: none;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: var(--night);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.18s, transform 0.18s;
}
.btn-gold:hover { background: var(--gold-light); transform: translateY(-1px); }
.btn-gold:active { transform: translateY(0); }
.btn-gold:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

/* Terminal action of a card form — spans the card rather than floating left. */
.btn-gold--block {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.8rem 1.6rem;
  font-size: 0.9rem;
}

/* ─── Tablet / narrow ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .signup-row { grid-template-columns: 1fr; }
  .account-guide-panel { grid-template-columns: 1fr; gap: 1rem; }
}

/* ─── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 420px) {
  .login-card { padding: 2rem 1.25rem; }
  .login-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .login-submit { width: 100%; text-align: center; }
  .login-forgot { text-align: center; }

  .signup-card { padding: 2rem 1.25rem; }
  /* Long labels and the toggle would collide at this width — stack them. */
  .signup-field--account { padding-top: 1.5rem; }
  .account-guide-toggle { top: 0; left: 0; right: auto; }
  .signup-label--account { margin-top: 0; }
}