/* The front door's styles (home.html). A file rather than a <style> block
   because the site's Content-Security-Policy has no 'unsafe-inline' in
   style-src; the note at the top of home.html says why and what guards it. */

:root {
  --navy: #0b1e3f;
  --navy-dark: #060f1f;
  --ink: #1a2734;
  --muted: #5b6b7a;
  --faint: #8a98a8;
}
* { box-sizing: border-box; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--navy);
  color: var(--ink);
  margin: 0; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 20px;
}
/* The mark is the white one, so it needs the navy behind it. It is large on
   purpose: this is the only thing on the page until somebody acts. */
.mark { width: min(340px, 72vw); height: auto; display: block; margin-bottom: 34px; }
.pane {
  background: #fff; border-radius: 14px; padding: 34px 36px 30px;
  width: min(420px, 100%); box-shadow: 0 18px 48px rgba(0,0,0,0.28);
  text-align: center;
}
h1 { font-size: 20px; margin: 0 0 6px; color: var(--navy); font-weight: 600; }
p.lead { color: var(--muted); font-size: 14px; margin: 0 0 26px; line-height: 1.5; }
button.signin {
  width: 100%; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--navy); color: #fff;
  font: inherit; font-size: 15px; font-weight: 600;
  padding: 13px 18px;
  transition: background 140ms ease;
}
button.signin:hover:not(:disabled) { background: var(--navy-dark); }
button.signin:disabled { opacity: 0.6; cursor: default; }
button.signin:focus-visible { outline: 3px solid #4ba9dd; outline-offset: 2px; }
.note { font-size: 12.5px; color: var(--faint); margin: 22px 0 0; line-height: 1.55; }
.state { font-size: 13.5px; color: var(--muted); margin: 18px 0 0; line-height: 1.5; min-height: 1em; }
.state.bad { color: #b03a2e; }
/* Small, quiet, and readable aloud, as it is on the console's sign in. It is
   a fact about the deployment, not a thing anybody is meant to act on, until
   the two halves disagree - and then it is the only state with a colour. */
.version {
  font-size: 11.5px; color: var(--faint); margin: 20px 0 0;
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.version[data-drift="true"] { color: #b06a00; font-weight: 600; }
.version .why { font-weight: 400; opacity: 0.8; }