/* =============================================================================
 * Nöttaker — login.css
 * -----------------------------------------------------------------------------
 * Page-scoped layout for the standalone login screen, externalized from the
 * inline <style> block in src/views/login.php so the Content-Security-Policy can
 * keep style-src 'self' (no inline styles). Tokens only: no raw hex, no
 * off-scale spacing/radius. Load AFTER tokens.css/base.css/components.css since
 * it references their custom properties.
 * =========================================================================== */

/* Page-scoped layout for the standalone login screen. Tokens only:
   no raw hex, no off-scale spacing/radius. */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
}
/* The focused login surface IS a card at the --focus padding tier (§16.7); the
   box recipe comes from the shared .card.card--focus, this carries only width. */
.login-card {
  width: 100%;
  max-width: 32rem;
}
/* Masthead: kicker -> wordmark, bracketed by rules (§16.7). */
.login-masthead { margin-bottom: var(--space-6); }
.login-masthead .kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--kicker-size);
  font-weight: var(--kicker-weight);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.login-masthead .rule-top {
  height: var(--rule-masthead);
  background: var(--text-primary);
  margin-bottom: var(--space-2);
}
.login-masthead .rule-bottom {
  height: var(--rule-hairline);
  background: var(--border);
  margin-top: var(--space-3);
}
.login-wordmark {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  line-height: var(--text-3xl-lh);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  color: var(--text-primary);
  margin: 0;
}
/* The accent "terminal dot" on the wordmark — spot ink, not a fill. */
.login-wordmark .dot { color: var(--accent); }
/* Match the app masthead wordmark's mobile compaction (§16.13): text-3xl -> 2xl. */
@media (max-width: 767.98px) {
  .login-wordmark {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl-lh);
  }
}

/* Error notice: semantic danger as a TEXT label on a tinted bg, never
   color alone (§16.10). */
.login-error {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  border: var(--rule-hairline) solid var(--border);
  border-left: var(--rule-masthead) solid var(--danger);
  background: var(--surface-2);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
}
.login-error .label {
  font-family: var(--font-mono);
  font-size: var(--kicker-size);
  font-weight: var(--kicker-weight);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--danger);
  flex: 0 0 auto;
}

/* Primary action — the shared .btn.btn--primary.btn--block (§16.13); the ONE
   solid-accent element on the screen (§16.7). No bespoke paint recipe here. */
/* Self-hosted "G" mark drawn with the accent-on text color; no external img,
   no emoji in chrome. */
.g-mark {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
}

.login-foot {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--rule-hairline) solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--kicker-size);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}