/* The sign-in page and the two static pages dash_security.py sends (setup
   required, refused). Self-contained on purpose: this is one of the two
   files served without a session, so it shares nothing with app.css but
   the colour tokens, which are copied here. */
:root {
  --bg: #f6f7f9; --fg: #1a1d21; --muted: #5b6370; --card: #ffffff;
  --border: #c9ced6; --red: #b91c1c; --accent: #1d4ed8; --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a; --fg: #e8eaed; --muted: #a3aab4; --card: #1d2026;
    --border: #4a505a; --red: #f87171; --accent: #60a5fa; --on-accent: #0b1220;
  }
}
* { box-sizing: border-box; }
html { color-scheme: light dark; }
body {
  margin: 0; padding: 16px; min-height: 100vh; background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 1.45;
  display: flex; align-items: flex-start; justify-content: center;
}
.login {
  width: 100%; max-width: 380px; margin-top: 12vh; padding: 24px;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
}
h1 { font-size: 20px; margin: 0 0 8px; }
p { margin: 0 0 12px; }
.muted { color: var(--muted); font-size: 14px; }
form { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 12px; }
label { font-weight: 600; font-size: 14px; }
input, button { font: inherit; border-radius: 8px; padding: 10px 12px; }
input {
  width: 100%; background: var(--bg); color: var(--fg);
  border: 1px solid var(--border);
}
button {
  margin-top: 8px; border: 1px solid var(--accent); background: var(--accent);
  color: var(--on-accent); font-weight: 600; cursor: pointer;
}
button:disabled { opacity: .6; cursor: default; }
input:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
.message { min-height: 1.45em; margin: 0; color: var(--red); font-weight: 600; }
.message:empty { min-height: 0; }
.setup { margin-top: 12px; font-size: 14px; }
pre {
  margin: 0 0 12px; padding: 10px 12px; overflow-x: auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
}
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) {
  button { transition: opacity .15s; }
}