/* The sign-in and set-up pages (/login, /enrol): the page's own look (its colour tokens, Geist, the Tables brand and
   logo), one narrow column, centred across and a fixed way down from the top, so the card does not move when a message
   appears. Self-contained: a stranger on the internet may fetch this file and the one font it names (SIGN_IN_FILES),
   never the screens' own stylesheet, so nothing here comes from there. Scoped to body.auth. Kept in a file, not a <style> block: the
   Content-Security-Policy allows no inline style. */

@font-face{font-family:Geist;src:url(/static/fonts/Geist-Variable.woff2) format('woff2');font-weight:100 900;font-display:swap}

body.auth{
  color-scheme:light dark;
  --bg:#F3F4F6;--surface:#FBFBFC;--line:#E1E4E8;--line-2:#CDD1D7;--field:#878D96;
  --text:#17181B;--text-2:#4C5058;--text-3:#646973;
  --accent:#2747B0;--on-accent:#F7F8FB;--accent-soft:#E5EAF7;--accent-text:#2747B0;--ring:rgba(39,71,176,.20);
  --warn:#9C3D2C;--shadow:0 1px 2px rgba(23,24,27,.04);
  --r-lg:16px;--r-md:12px;--pill:999px;
}
@media (prefers-color-scheme: dark){
  body.auth{
    --bg:#111317;--surface:#191B20;--line:#2A2D34;--line-2:#3A3E46;--field:#666B74;
    --text:#ECEEF1;--text-2:#A9AEB7;--text-3:#8C919B;
    --accent:#3D5FCC;--on-accent:#F7F8FB;--accent-soft:#1E2A4A;--accent-text:#8FA8F2;--ring:rgba(143,168,242,.28);
    --warn:#F0A08E;--shadow:none;
  }
}

html{background:#F3F4F6}
@media (prefers-color-scheme: dark){html{background:#111317}}
body.auth,body.auth *,body.auth *::before,body.auth *::after{box-sizing:border-box}
body.auth *{margin:0;padding:0}
body.auth [hidden]{display:none !important}
body.auth{margin:0;min-height:100vh;min-height:100dvh;display:flex;align-items:flex-start;justify-content:center;
  padding:calc(env(safe-area-inset-top,0px) + 144px) 20px calc(env(safe-area-inset-bottom,0px) + 24px);
  background:var(--bg);color:var(--text);font-family:Geist,-apple-system,system-ui,sans-serif;font-size:15px;line-height:1.4;
  letter-spacing:-.005em;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
body.auth button,body.auth input{font:inherit;color:inherit}
body.auth :focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
body.auth .i{width:18px;height:18px;flex:none;display:inline-block;vertical-align:middle}

body.auth .authwrap{width:100%;max-width:390px}
body.auth .authbrand{font-size:20px;font-weight:650;letter-spacing:-.02em;margin:0 4px 16px;display:flex;align-items:center;gap:10px}
body.auth .authlogo{width:36px;height:36px;border-radius:9px;flex:none}
body.auth .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
body.auth .authcard{padding:24px 22px}
body.auth .authic{width:44px;height:44px;border-radius:var(--pill);background:var(--accent-soft);color:var(--accent-text);
  display:grid;place-items:center;margin-bottom:16px}
body.auth .authic .i{width:24px;height:24px}
body.auth .h1{font-size:28px;font-weight:650;letter-spacing:-.03em;line-height:1.1}
body.auth .sub{font-size:14px;color:var(--text-2);margin:6px 0 20px;line-height:1.45}

body.auth .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;padding:0 18px;
  border:1px solid var(--line-2);border-radius:var(--pill);font-size:16px;font-weight:580;cursor:pointer;
  background:var(--surface);color:var(--text);-webkit-tap-highlight-color:transparent}
body.auth .btn.primary{background:var(--accent);border-color:transparent;color:var(--on-accent)}
body.auth .btn[disabled]{opacity:.5;cursor:default}
body.auth .form{display:flex;flex-direction:column;gap:14px;margin-top:4px}
body.auth .fld{display:flex;flex-direction:column;gap:6px;min-width:0}
body.auth .fld label{font-size:13.5px;font-weight:560;color:var(--text-2)}
body.auth .inp{height:46px;width:100%;border:1px solid var(--field);border-radius:var(--r-md);background:var(--surface);padding:0 14px;
  font-size:16px;color:var(--text);-webkit-appearance:none;appearance:none;min-width:0}
body.auth .inp:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
body.auth .inp.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}
body.auth .form .btn{margin-top:6px}

body.auth .status{min-height:22px;margin-top:14px;font-size:14.5px;color:var(--text);line-height:1.4}
body.auth .status.bad{color:var(--warn);font-weight:540}       /* a refusal or a failure (passkeys.js), in the page's red */
body.auth .foot{font-size:13px;color:var(--text-3);margin:16px 4px 0;text-align:center;text-wrap:balance}
body.auth .foot a{color:var(--accent-text);font-weight:550;text-decoration:underline;text-underline-offset:2px}