/* ── Login page ──
   Auth card content, rendered inside static/_layout.html.twig's .sp-wrap
   (shared header/footer with every other static page — about, security,
   etc.). Layout/nav/footer styles live in static-layout.css; this file
   only carries the card + Google button + error state. */

.auth-card {
  max-width: 380px;
  margin: 0 auto;
  border: 1px solid var(--border-muted);
  background: var(--bg-surface);
}
.auth-card-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-dim);
  background: var(--bg-elevated);
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted);
}
.auth-card-header .dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--green);
  flex-shrink: 0;
}
.auth-card-title {
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--text-main); text-transform: none;
}
.auth-card-header .path {
  margin-left: auto; color: var(--text-faint);
  text-transform: none; letter-spacing: 0.04em;
}

.auth-card-body {
  padding: 24px 24px 26px;
  display: flex; flex-direction: column; gap: 16px;
}
.auth-card-sub {
  font-size: 10.5px; color: var(--text-muted); margin-top: 4px;
  text-transform: none; letter-spacing: normal; font-weight: 400;
}

/* Error */
.auth-error {
  display: flex; align-items: center; gap: 9px;
  background: var(--red-dim); border: 1px solid var(--red-border);
  padding: 10px 14px;
  font-family: var(--font-mono); font-size: 10px; color: var(--red);
}

/* Google button */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 36px; width: 100%;
  background: transparent; border: 1px solid var(--border-muted);
  color: var(--text-sub); font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.btn-google:hover {
  color: var(--text-main); border-color: var(--text-faint);
}
.btn-google svg { flex-shrink: 0; }

.foot-note {
  text-align: center; font-size: 9.5px; color: var(--text-muted);
}
.foot-note a { color: var(--green); }

@media (max-width: 640px) {
  .btn-google { min-height: 44px; }
}