/*
 * login.css — the branded front door, served before Google sign-in.
 *
 * Standalone: this stylesheet fully styles login.html on its own (no
 * dashboard.css dependency). The login page is a calm centered surface, so it
 * does NOT inherit dashboard.css's 100dvh / overflow:hidden app-shell rules.
 *
 * Palette + type are the SAME hex as dashboard.css and council.css so the front
 * door reads as one continuous dark-academia space:
 *   navy bg #0a0e14 · gold accent #d4a934 · ink #e4e8ed · muted #7a8694
 *   Georgia serif headings · Segoe UI / system sans for support text.
 */

:root {
  --da-bg:            #0a0e14;
  --da-bg-deep:       #06090d;   /* landing's deepest navy, used at edges */
  --da-surface:       #0d1117;
  --da-text:          #e4e8ed;
  --da-muted:         #7a8694;
  --da-dim:           #2a3340;
  --da-border:        #1a2230;
  --da-accent:        #d4a934;
  --da-gold-glow:     rgba(212,169,52,.15);
  --da-gold-soft:     rgba(212,169,52,.42);
  --da-panel-border:  rgba(212,169,52,.32);
  --da-panel-bg:      rgba(13,17,23,.62);
  --da-serif:         Georgia, 'Times New Roman', serif;
  --da-sans:          'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
}

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

html, body { min-height: 100%; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  position: relative;
  overflow: hidden;                /* keep the starfield from spilling scrollbars */
  background:
    radial-gradient(ellipse 90% 65% at 50% -12%, rgba(212,169,52,.07), transparent 60%),
    radial-gradient(ellipse 120% 90% at 50% 120%, rgba(212,169,52,.04), transparent 60%),
    linear-gradient(180deg, var(--da-bg) 0%, var(--da-bg-deep) 100%);
  color: var(--da-text);
  font-family: var(--da-serif);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================ */
/* Starfield — pure CSS, layered radial dots, slow drift        */
/* Stepping INTO Stew: a faint echo of the landing's deep field */
/* ============================================================ */
.starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat;
  background-image:
    radial-gradient(1px 1px at 20% 30%,  rgba(228,232,237,.55), transparent 60%),
    radial-gradient(1px 1px at 75% 18%,  rgba(228,232,237,.40), transparent 60%),
    radial-gradient(1px 1px at 40% 70%,  rgba(228,232,237,.45), transparent 60%),
    radial-gradient(1px 1px at 88% 62%,  rgba(212,169,52,.45),  transparent 60%),
    radial-gradient(1px 1px at 12% 85%,  rgba(228,232,237,.35), transparent 60%),
    radial-gradient(1px 1px at 60% 45%,  rgba(228,232,237,.30), transparent 60%),
    radial-gradient(2px 2px at 33% 22%,  rgba(212,169,52,.30),  transparent 60%),
    radial-gradient(1px 1px at 67% 88%,  rgba(228,232,237,.40), transparent 60%);
  background-size: 320px 320px, 280px 280px, 360px 360px, 300px 300px,
                   340px 340px, 260px 260px, 420px 420px, 380px 380px;
  opacity: .7;
  animation: star-drift 120s linear infinite;
}
@keyframes star-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position:
           320px 640px, -280px 560px, 360px -720px, -300px 600px,
           340px 680px, -260px 520px, 420px -840px, -380px 760px; }
}

/* ============================================================ */
/* The card                                                     */
/* ============================================================ */
.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  text-align: center;
  padding: 2.75rem 2.5rem 2.5rem;
  background: var(--da-panel-bg);
  border: 1px solid var(--da-panel-border);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(212,169,52,.06) inset;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.login-eyebrow {
  display: inline-block;
  font-family: var(--da-sans);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--da-accent);
  background: var(--da-gold-glow);
  border: 1px solid var(--da-gold-soft);
  border-radius: 3px;
  padding: 3px 10px;
  margin-bottom: 1.4rem;
}

.login-brand {
  font-family: var(--da-serif);
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--da-accent);
  margin-bottom: 0.75rem;
  text-indent: 0.18em;             /* optical-center the tracked letters */
}

.login-promise {
  font-family: var(--da-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--da-text);
  max-width: 30ch;
  margin: 0 auto 2.1rem;
}

/* ---- Google sign-in button ---- */
.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.8rem 1.25rem;
  background: #ffffff;
  color: #1f1f1f;
  text-decoration: none;
  font-family: var(--da-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid #dadce0;
  border-radius: 6px;
  cursor: pointer;
  transition: box-shadow .15s ease, background .15s ease, transform .05s ease;
}
.google-btn:hover { background: #f8f9fa; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.google-btn:active { transform: translateY(1px); }
.google-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--da-gold-soft);
}
.google-btn .g-logo { width: 18px; height: 18px; flex-shrink: 0; display: block; }

/* ============================================================ */
/* "Last used" pill — returning-user hint (client-side only)    */
/* A subtle uppercase chip revealed by JS next to whichever      */
/* sign-in method was used last. Tasteful + low-contrast so it    */
/* never competes with the button label; sits in-flow as a        */
/* trailing chip on the same line as the label.                   */
/* Hidden by default via the [hidden] attribute until JS reveals it.*/
/* ============================================================ */
.last-used-pill {
  /* In-flow trailing chip — sits just after the button label on one line.
     The button labels carry white-space:nowrap so the row never wraps. */
  flex: 0 0 auto;
  font-family: var(--da-sans);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  /* Sits inside the (light/gold) buttons, so it reads as a dim dark chip. */
  color: rgba(26, 20, 7, 0.72);
  background: rgba(6, 9, 13, 0.08);
  border: 1px solid rgba(6, 9, 13, 0.20);
  border-radius: 999px;
  padding: 2px 7px;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;   /* purely a hint — never intercept the button click */
}
/* The Google button is a gap-flex (gap:0.75rem spaces the pill from the label).
   The email button has no gap, so its pill carries its own small left margin. */
.last-used-pill--on-gold {
  color: rgba(26, 20, 7, 0.78);
  background: rgba(26, 20, 7, 0.09);
  border-color: rgba(26, 20, 7, 0.28);
  margin-left: 0.55rem;
}
/* Keep the button labels on a single line so the trailing pill never forces a wrap. */
.google-btn > span:not(.last-used-pill),
.email-btn-label { white-space: nowrap; }
/* Belt-and-suspenders: ensure the [hidden] pill is never shown even if a
   global rule sets display on spans. */
.last-used-pill[hidden] { display: none; }

/* ============================================================ */
/* Divider between Google and the email form                    */
/* "or" rule — BYOC: email is a first-class peer to Google.     */
/* ============================================================ */
.login-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.35rem 0 1.15rem;
  color: var(--da-muted);
  font-family: var(--da-sans);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--da-border), transparent);
}

/* ============================================================ */
/* Email + password form — glassy/dim, gold focus               */
/* ============================================================ */
.email-form { text-align: left; }

.field-label {
  display: block;
  font-family: var(--da-sans);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--da-muted);
  margin: 0.6rem 0 0.32rem;
}

.field-input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font-family: var(--da-sans);
  font-size: 0.92rem;
  color: var(--da-text);
  /* Dim, near-translucent surface — the glassy in-card field, not a bright box. */
  background: rgba(6, 9, 13, 0.55);
  border: 1px solid var(--da-border);
  border-radius: 7px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field-input::placeholder { color: var(--da-dim); }
.field-input:hover { border-color: var(--da-panel-border); }
.field-input:focus {
  outline: none;
  border-color: var(--da-gold-soft);
  background: rgba(6, 9, 13, 0.72);
  box-shadow: 0 0 0 3px var(--da-gold-glow);
}

/* Primary email-submit button — gold, matches the invite accept button family. */
.email-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 1.05rem;
  padding: 0.78rem 1.25rem;
  background: var(--da-accent);
  color: #1a1407;
  font-family: var(--da-sans);
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid var(--da-accent);
  border-radius: 6px;
  cursor: pointer;
  transition: filter .15s ease, transform .05s ease, box-shadow .15s ease;
}
.email-btn:hover { filter: brightness(1.08); box-shadow: 0 2px 14px var(--da-gold-glow); }
.email-btn:active { transform: translateY(1px); }
.email-btn:disabled { opacity: .55; cursor: default; filter: none; }
.email-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--da-gold-soft); }

.email-status {
  font-family: var(--da-sans);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--da-muted);
  min-height: 1.1em;
  margin-top: 0.85rem;
  text-align: center;
}
.email-status.err { color: #d49090; }
.email-status.ok  { color: #7ed4a0; }

.email-toggle {
  margin-top: 1rem;
  text-align: center;
  font-family: var(--da-sans);
  font-size: 0.78rem;
  color: var(--da-muted);
}
/* Text-button that reads as an inline link without being an <a>. */
.linkish {
  background: none;
  border: none;
  padding: 0;
  margin-left: 0.3rem;
  font: inherit;
  color: var(--da-accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.linkish:hover { filter: brightness(1.12); }
.linkish:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--da-gold-soft); border-radius: 3px; }

/* ---- Reassurance line ---- */
.login-reassure {
  margin-top: 1.5rem;
  font-family: var(--da-sans);
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--da-muted);
}
.login-reassure strong { color: var(--da-text); font-weight: 600; }

/* ============================================================ */
/* Responsive                                                   */
/* ============================================================ */
@media (max-width: 480px) {
  .login-card { padding: 2.25rem 1.5rem 2rem; border-radius: 14px; }
  .login-brand { font-size: 2.1rem; }
  .login-promise { font-size: 0.94rem; }
}

@media (prefers-reduced-motion: reduce) {
  .starfield { animation: none; }
}