/* Sign-in page only (2026-09-17).

   WHY THIS IS NOT IN app.css. Everything under /static except this file and
   login.js needs a signed-in principal, which test_dashboard.Surface.
   test_static_needs_principal pins deliberately - the app's stylesheet and script
   are not handed to strangers. The login page is by definition read before anyone
   is signed in, so it gets its own small public file rather than opening up the
   app's.

   The tokens below are copied from app.css, which remains the original. Only the
   ones this page uses are here. If the palette changes there, change it here too;
   the two are compared by eye, not by code, which is the price of the split. */
:root{
  --ground:#F2F5F4; --surface:#FFFFFF; --sunk:#E8EDEB; --ink:#16201E; --muted:#5B6966; --faint:#8A9794;
  --line:#D7DFDC; --accent:#0E5A60; --focus:#0E5A60;
  --err:#B42318; --err-bg:#FDECEA;
  --shadow:0 1px 2px rgba(22,32,30,.06),0 4px 14px rgba(22,32,30,.05);
  /* System fonts only: a web-font service would learn every viewer's IP address. */
  --display:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#0E1413; --surface:#161F1D; --sunk:#1C2725; --ink:#E4ECEA; --muted:#98A7A4; --faint:#6E7D7A;
    --line:#27332F; --accent:#62B8BD; --focus:#62B8BD;
    --err:#FF8A7A; --err-bg:#3A1C19;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#0E1413; --surface:#161F1D; --sunk:#1C2725; --ink:#E4ECEA; --muted:#98A7A4; --faint:#6E7D7A;
  --line:#27332F; --accent:#62B8BD; --focus:#62B8BD;
  --err:#FF8A7A; --err-bg:#3A1C19;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font:400 15px/1.5 var(--body);
  -webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}

.login-wrap{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.login-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:22px clamp(16px,4vw,26px);display:flex;flex-direction:column;gap:14px}
.brand{display:flex;align-items:center;gap:9px}
.brand h1{font:700 19px/1.2 var(--display);margin:0}
/* The same recording dot the app wears in its header. */
.rec{width:9px;height:9px;border-radius:50%;background:var(--err);flex:none}
.login-intro{margin:0;color:var(--muted);font-size:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:500;color:var(--muted)}
.field input{appearance:none;width:100%;border:1px solid var(--line);background:var(--sunk);color:var(--ink);
  border-radius:8px;padding:10px 12px;font-size:15px}
.field input:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus);
  background:var(--surface)}
.login-err{margin:0;padding:10px 12px;border-radius:8px;background:var(--err-bg);color:var(--err);font-size:13px}
.login-submit{appearance:none;justify-content:center;width:100%;border:1px solid var(--accent);background:var(--accent);
  color:var(--surface);border-radius:8px;padding:10px 14px;font-size:14px;font-weight:500;cursor:pointer}
.login-submit:hover{filter:brightness(1.08)}
.login-submit[disabled]{opacity:.5;cursor:not-allowed;filter:none}
.login-foot{margin:0;color:var(--faint);font-size:12px;line-height:1.5}