/* Login page.
   Loaded after base.css and only on this page. Everything here is scoped to
   .login-*, so nothing leaks into the signed-in app shell; the colours,
   radii and shadows are base.css's tokens rather than a second palette. */

.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  /* Two very soft indigo washes over paper. The card below is flat white, so
     the page reads as lit from behind it rather than as a coloured panel. */
  background:
    radial-gradient(900px 480px at 15% -10%, var(--accent-tint), transparent 70%),
    radial-gradient(760px 420px at 100% 110%, var(--accent-dim), transparent 72%),
    var(--paper);
}

.login-shell {
  width: 100%;
  max-width: 396px;
}

.login-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 34px 32px 30px;
}

/* ---------- Brand ---------- */
.login-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin-bottom: 26px;
}
.login-mark { width: 26px; height: 26px; }
.login-wordmark {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}
.login-wordmark-sub {
  color: var(--accent);
  margin-left: 3px;
}

/* ---------- Heading ---------- */
.login-title {
  margin: 0 0 5px;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
}
.login-lede {
  margin: 0 0 22px;
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.45;
}

/* ---------- Messages ---------- */
/* Carries both Django's `messages` (a refused sign-in, a completed logout) and
   the auth form's non-field errors, so both look the same to the reader. */
.login-messages {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.login-message {
  font-size: .82rem;
  line-height: 1.45;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink-soft);
}
.login-message.error {
  border-color: rgba(220, 38, 38, .28);
  background: var(--bad-dim);
  color: #9b1c1c;
}
.login-message.success {
  border-color: rgba(15, 157, 107, .28);
  background: var(--good-dim);
  color: #0a6d4a;
}

/* ---------- Microsoft button ---------- */
/* White with a real border, not the indigo primary: Microsoft's guidance is
   that the mark sits on white or black, and a coloured fill would also make
   SSO and the password submit compete for the same "this is the button" read
   on the environments that show both. */
.login-sso {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .05s;
}
.login-sso:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.login-sso:active { transform: translateY(1px); }
.login-sso:focus-visible { outline: none; box-shadow: var(--ring); }
.login-sso-mark { width: 17px; height: 17px; flex: none; }

.login-hint {
  margin: 10px 0 0;
  font-size: .78rem;
  color: var(--muted);
  text-align: center;
}

/* ---------- Divider ---------- */
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 18px;
  color: var(--muted);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ---------- Password form ---------- */
.login-form { display: grid; gap: 14px; }

.login-field { display: grid; gap: 5px; }
.login-field > span {
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-soft);
}
/* base.css styles input[type="text"] already; the password field is not in
   that selector list, and both want full width here. */
.login-field input {
  width: 100%;
  font-family: inherit;
  font-size: .88rem;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.login-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.login-submit { width: 100%; margin-top: 2px; }

/* ---------- Foot ---------- */
.login-foot {
  margin: 18px 0 0;
  text-align: center;
  font-size: .78rem;
  color: var(--muted);
}