/* The login page stylesheet (feature fix-csp-inline-style-blocks-page-styling).
   ----------------------------------------------------------------------------
   This file REPLACES the inline `<style>` block that `loginPage()` used to
   embed (lib/web-auth.js). The page is served under a STRICT CSP
   (`style-src 'self'`, no `unsafe-inline`), so inline CSS is BLOCKED by the
   browser — the login page rendered completely unstyled (Times New Roman,
   8px body margin) on the public hostname. Moving the rules into a served
   stylesheet keeps the CSP strict while the page renders as intended.

   It is deliberately SELF-CONTAINED: the login page loads ONLY this sheet
   (never styles.css, which carries the app-shell/panel layout and would fight
   the centred login card). The tokens below mirror the light/dark pairs in
   styles.css so the page follows the device colour scheme identically. */

:root {
  color-scheme: light dark;
  --bg: light-dark(#f8fafc, #0e1726);
  --fg: light-dark(#12243d, #e8eef8);
  --card: light-dark(#ffffff, #17253c);
  --border: light-dark(#c7d5e8, #2c405c);
  --accent: light-dark(#1d4ed8, #2f5fd0);
  --danger: light-dark(#b91c1c, #ff9c9c);
}

/* The system preference is the default; an explicit `data-theme` on
   <html>/<body> overrides it (same convention as styles.css). */
:root[data-theme="light"],
body[data-theme="light"] { color-scheme: light; }

:root[data-theme="dark"],
body[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  padding: 20px;
}

main { width: 100%; max-width: 380px; }

h1 { font-size: 1.4rem; margin: 0 0 4px; }

.sub { margin: 0 0 20px; opacity: 0.75; font-size: 0.95rem; }

form {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

label { font-size: 0.95rem; }

/* BOTH login fields (M14: username + password) share one rule, so the two
   inputs render identically sized — the username must not look like a hint. */
input[type="password"],
input[type="text"] {
  font-size: 1.1rem; /* >= 16px stops iOS Safari from zooming on focus */
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  width: 100%;
  min-height: 44px;
}

button {
  font-size: 1.05rem;
  padding: 12px;
  border-radius: 8px;
  border: 0;
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}

.login-error { color: var(--danger); margin: 0; font-weight: 600; }

.note { font-size: 0.8rem; opacity: 0.7; margin: 16px 0 0; }