/* Sign-in page.
   Tokens, gradient, panel treatment, button and focus ring are lifted verbatim from
   ask.css so the two pages read as one product. If you retune the palette there,
   retune it here — they are duplicated, not shared. */

:root{
  --ground:#17110f; --ground-2:#211813; --panel:#241a15; --panel-2:#2c211a;
  --line:#3a2c22; --line-soft:#31251d;
  --gold:#e4b24a; --gold-soft:#c9992f; --gold-ghost:rgba(228,178,74,.14);
  --text:#f3ece4; --muted:#b9a89c; --faint:#8c7c70;
  --rose:#d3633e;
  /* Status dot. Same values as ask.css so the login pill and the avatar's pill agree.
     These were used before they were defined — an undefined custom property makes the whole
     `background` declaration invalid, so the dot rendered with no colour at all. */
  --good:#4fb477; --bad:#d3633e;
  --r:14px; --ease:cubic-bezier(.4,.14,.2,1);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:radial-gradient(120% 90% at 78% -8%, #241812 0%, var(--ground) 46%, #100b0a 100%);
  color:var(--text); font-family:var(--sans); line-height:1.55; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* Centred both ways. min-height:100dvh over 100vh so mobile browser chrome doesn't
   push the panel off-centre when the URL bar collapses. */
.signin{
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:30px; padding:32px 20px;
}

/* ── the panel ── */
.panel{
  width:100%; max-width:392px;
  background:var(--ground-2); border:1px solid var(--line); border-radius:18px;
  padding:34px 30px 30px;
  box-shadow:0 24px 60px -28px rgba(0,0,0,.85);
}
/* The logo replaces the old "Sign in" heading at the top of the panel. */
.panel-logo{
  height:44px; width:auto; display:block; margin:0 auto 30px;
}

/* ── fields ── */
.field{margin:0 0 18px}
.field label{
  display:block; font-size:12.5px; color:var(--muted); margin:0 0 7px; font-weight:500;
}
/* The recessed "well" treatment from ask.css's .inputrow. */
.field input{
  width:100%; font-family:inherit; font-size:15px; color:var(--text);
  background:var(--ground); border:1.5px solid rgba(201,153,47,.4); border-radius:12px;
  padding:12px 13px; outline:none;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.4);
  transition:border-color .16s var(--ease);
}
.field input::placeholder{color:var(--faint)}
.field input:focus{border-color:var(--gold)}
/* Chrome paints its own autofill background; force ours back. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--ground) inset;
  caret-color:var(--text);
}
.field input[aria-invalid="true"],
.field input.input-validation-error{border-color:var(--rose)}

/* ── validation ── */
.err{display:block; color:var(--rose); font-size:12.5px; margin-top:6px; min-height:0}
.err:empty{display:none}
.alert{
  color:#f0c3ac; background:rgba(211,99,62,.1); border:1px solid rgba(211,99,62,.42);
  border-radius:11px; padding:11px 13px; font-size:13.5px; margin:0 0 20px;
}
.alert:empty{display:none}
/* With asp-validation-summary="ModelOnly" the div isn't rendered at all when clean. Switch it
   to "All" and it renders as .validation-summary-valid with a <ul> inside — not :empty, so it
   would show as an empty red box. Hide that case explicitly. */
.alert.validation-summary-valid{display:none}
.alert ul{margin:0; padding-left:18px}
.alert li{list-style:none}
.alert li:only-child{margin:0}

/* ── button (verbatim from ask.css .act.primary) ── */
button.act{
  width:100%; margin-top:6px;
  font-family:inherit; cursor:pointer; border-radius:11px; border:1px solid var(--line);
  background:var(--panel-2); color:var(--text); padding:13px 18px; font-size:15px; font-weight:500;
  transition:.16s var(--ease); display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
button.act:hover:not(:disabled){border-color:var(--gold-soft); background:#33261d}
button.act:disabled{opacity:.42; cursor:not-allowed}
button.act.primary{background:var(--gold); color:#231705; border-color:var(--gold); font-weight:600}
button.act.primary:hover:not(:disabled){background:#efc064; border-color:#efc064}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:6px}

/* Visually hidden, still read aloud. Not display:none — that removes it from the a11y tree. */
.vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}

/* ── brain status ──
   Same red/green semantics as the avatar's .statuspill on the Ask page: --bad offline,
   --good online. Quiet by design — it's information, not an alarm. */
.brainstatus{display:flex; align-items:center; justify-content:center; gap:8px;
  margin:22px 0 0; font-size:12px; letter-spacing:.03em; color:var(--faint)}
.brainstatus .d{width:7px; height:7px; border-radius:50%; flex:none; background:var(--bad)}
.brainstatus.online .d{background:var(--good)}
.brainstatus.offline{color:#c9a79a}
.brainstatus-note{margin:8px 0 0; text-align:center; font-size:11.5px; line-height:1.5; color:var(--faint)}

@media (max-width:420px){
  .panel{padding:28px 22px 24px}
  .panel-logo{height:38px; margin-bottom:26px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}