/* 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 .brand-lockup{
  --logo-h:44px; display:flex; width:fit-content; 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)}

/* ── availability ──
   Three places, and this line is always present (unlike .brainstatus, which stays silent when
   healthy — see the note in Login.cshtml for why the two rules differ). ONE dot, graded through
   three states, because colour is carrying the state here rather than a second element:

     .free   green   there is room; the quietest treatment, --faint text like .brainstatus
     .last   gold    the last place — the only state where hesitating costs you the session,
                     so it borrows the brand gold rather than inventing an amber
     .busy   red     a stop, not a caution. Reuses --bad, the same red as the offline dot.

   The dot reuses the 7px/50% geometry of .brainstatus .d exactly, so the two lines sit on the
   same optical rhythm when both render. The colour is decoration: the sentence carries the
   state, and the dot is aria-hidden. */
.sitestatus{display:flex; align-items:center; justify-content:center; gap:8px;
  margin:14px 0 0; font-size:12px; letter-spacing:.03em; color:var(--faint)}
.sitestatus .d{width:7px; height:7px; border-radius:50%; flex:none; background:var(--good)}
.sitestatus.last{color:#d8ba7d}
.sitestatus.last .d{background:var(--gold)}
.sitestatus.busy{color:var(--bad)}
.sitestatus.busy .d{background:var(--bad)}
/* Only the full state carries a <b> ("Site busy"), so the rule is scoped to it rather than left
   open on .sitestatus where it would match nothing in the other two states. */
.sitestatus.busy b{font-weight:600; color:#e07a55}

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

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