/* login.css — the styles of public/login.html, moved out of the page (Sep 30, 2026)
   so the page carries no style block. Linked by public/login.html in the
   place the block was; the order of stylesheets decides which rule wins. */
:root{
  color-scheme:dark;
  --bg:#0B0E12; --card:#141920; --well:#10151B;
  --line:#1E2630; --line-strong:#2A333F;
  --ink:#E9EDF2; --ink-2:#939DAA; --ink-3:#6E7884;
  --brand:#F0A81E; --brand-ink:#0B0E12; --brand-hi:#F2BE52;
  --brand-wash:#221A09; --brand-line:#453612;
  --bad:#D8524A; --bad-text:#EE8C82; --bad-wash:#221110; --bad-line:#4A2320;
  --focus:#7FB2E8;
  --r-card:16px; --r-ctl:11px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
/* The light screen. ms-theme.js cannot run here, so the six lines at the
   bottom of this file do its one job: read the remembered choice and set
   this attribute before the first paint. Same key, same values. */
:root[data-mode="light"]{
  color-scheme:light;
  --bg:#F5F7F9; --card:#FFFFFF; --well:#FAFBFC;
  --line:#E3E8ED; --line-strong:#D3DAE1;
  --ink:#121820; --ink-2:#5C6773; --ink-3:#7B858F;
  --brand:#8A5A00; --brand-ink:#FFFFFF; --brand-hi:#6E4800;
  --brand-wash:#FDF6E7; --brand-line:#EDDCB4;
  --bad:#A32015; --bad-text:#8E1C12; --bad-wash:#FDF1EF; --bad-line:#F2CCC6;
  --focus:#1F5FA8;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:13.5px;
  display:grid;place-items:center;-webkit-font-smoothing:antialiased}
.box{width:352px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);padding:30px 28px 26px;
  box-shadow:0 12px 34px -12px rgba(0,0,0,.55)}
:root[data-mode="light"] .box{box-shadow:0 12px 30px -10px rgba(16,24,40,.22)}
.mark{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;
  letter-spacing:-.02em;margin-bottom:5px}
.mark .g{width:26px;height:26px;border-radius:8px;background:var(--brand);
  display:grid;place-items:center;color:var(--brand-ink);flex:none}
.mark .g svg{width:17px;height:17px;display:block}
.sub{color:var(--ink-2);font-size:12.5px;line-height:1.5;margin-bottom:24px}
/* ⚠ With the tagline gone the wordmark carries the gap on its own. */
.box > .mark{margin-bottom:24px}
label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin:0 0 6px}
input{width:100%;height:38px;padding:0 12px;background:var(--well);
  border:1px solid var(--line-strong);border-radius:var(--r-ctl);color:var(--ink);
  font:inherit;font-size:13.5px;margin-bottom:15px}
input::placeholder{color:var(--ink-3)}
input:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px rgba(127,178,232,.25)}
:root[data-mode="light"] input:focus{box-shadow:0 0 0 3px rgba(31,95,168,.18)}
button{width:100%;height:40px;border:1px solid transparent;border-radius:var(--r-ctl);
  background:var(--brand);color:var(--brand-ink);font:inherit;font-size:13.5px;
  font-weight:700;cursor:pointer;margin-top:5px}
button:hover{background:var(--brand-hi)}
button[disabled]{opacity:.5;cursor:default}
.err{display:none;margin-top:15px;padding:10px 12px;border-radius:var(--r-ctl);
  background:var(--bad-wash);border:1px solid var(--bad-line);color:var(--bad-text);
  font-size:12.5px;font-weight:600}
.foot{margin-top:20px;text-align:center;color:var(--ink-3);font-size:11.5px;line-height:1.5}

/* ---------- MOBILE (added Aug 23) ---------- */
@media (max-width:600px){
  body{padding:16px;overflow-x:hidden}
  .box{width:min(352px,100%)}
  /* ⚠ 16px or the phone zooms the whole page in when the field is tapped. */
  input{height:44px;font-size:16px}
  button{height:46px;font-size:14px}
}

/* ⭐ Sep 28, 2026 — SEE WHAT YOU TYPED. John: "we need a password viewer when
   typing it in on the log in screen." An eye inside each password box shows
   the letters; press it again to hide them. */
.pwwrap{position:relative}
.pwwrap input{padding-right:46px}
button.eye{position:absolute;top:0;right:0;width:42px;height:38px;margin:0;padding:0;
  background:transparent;border:0;border-radius:0 var(--r-ctl) var(--r-ctl) 0;color:var(--ink-2);
  display:grid;place-items:center;font-weight:400}
button.eye:hover{background:transparent;color:var(--ink)}
button.eye:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
button.eye svg{width:18px;height:18px}
@media (max-width:600px){ button.eye{height:44px;width:46px} }