/* Sign-in page only.
   Deliberately anonymous: no product name, no domain vocabulary, no class name that hints at what
   this application holds. Anything reachable without a session should be indistinguishable from a
   generic password prompt. The signed-in pages use a different stylesheet that is not web-servable. */

:root {
  --bg:#fbfbfa; --panel:#ffffff; --ink:#14161a; --muted:#6b7280; --line:#e3e6ea;
  --bad:#c02617; --bad-bg:#fdeceb; --bad-line:#f4c3bd; --focus:#1750c4;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0d0f12; --panel:#14171c; --ink:#e7e9ee; --muted:#868e9c; --line:#272d36;
    --bad:#ff7a6b; --bad-bg:#2a1512; --bad-line:#5a251d; --focus:#7aa8ff;
  }
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--ink); min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  font:15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* <main> is the flex item, so it needs the width; .box centres inside it. Without `main{width:100%}`
   the item sizes to its content, .box's `width:100%` has nothing to resolve against, and the field
   collapses to ~90px while the page picks up a horizontal scrollbar. */
main { width:100%; }
.box { width:100%; max-width:320px; margin:0 auto; padding:24px 16px; }

form { display:flex; flex-direction:column; gap:10px; }
label { font-size:13px; color:var(--muted); }
input {
  font:inherit; width:100%; padding:11px 12px; border-radius:8px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink);
}
input:focus { outline:2px solid var(--focus); outline-offset:1px; }
button {
  font:inherit; font-weight:600; padding:11px 14px; border-radius:8px; cursor:pointer;
  border:1px solid var(--ink); background:var(--ink); color:var(--bg);
}
button[disabled], input[disabled] { opacity:.45; cursor:not-allowed; }

.msg {
  padding:9px 12px; border-radius:8px; font-size:13px; margin:0 0 12px;
  color:var(--bad); background:var(--bad-bg); border:1px solid var(--bad-line);
}
.note { font-size:12px; color:var(--muted); margin:12px 0 0; }