/* Sign-in card, centred on the app background. */
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: var(--bg-app); padding: var(--sp-6); }
.login-card {
  width: min(380px, 100%); background: var(--bg-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-raised);
  padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-5);
}
.login-brand { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-2); }
.login-mark {
  width: 40px; height: 40px; border-radius: var(--r-md); background: var(--nav-bg); color: var(--gold);
  display: grid; place-items: center; font-weight: 700; font-size: var(--fs-md); letter-spacing: -0.5px;
}
.login-wordmark { display: flex; flex-direction: column; line-height: var(--lh-sm); }
.login-wordmark strong { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.login-wordmark span { font-size: var(--fs-sm); color: var(--text-2); }
.login-card h1 { margin: 0; font-size: var(--fs-xl); line-height: 28px; font-weight: var(--fw-semibold); }
.login-card label {
  font-size: var(--fs-sm); color: var(--text-2); font-weight: var(--fw-semibold);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.login-card .input { font-weight: var(--fw-regular); color: var(--text); }
.login-error { color: var(--red); font-size: var(--fs-sm); line-height: var(--lh-sm); min-height: var(--lh-sm); margin-top: calc(-1 * var(--sp-2)); }
.login-card .btn-primary { width: 100%; height: var(--control-h-lg); }
/* UX-140: Password -> Sign in is 24px (the card's 12px gap + 12px). */
.login-card #login-submit { margin-top: var(--sp-5); }

/* UX-142: the one error slot above Email, a pale-red banner; empty it is gone (no placeholder height, no gap). */
.login-wrap { --login-alert-bg: #FDE8E7; --login-alert-border: #F3C7C5; }
.login-card .login-error.login-banner {
  display: flex; align-items: flex-start; gap: var(--sp-4); min-height: 0; margin: 0; padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--login-alert-border); border-radius: var(--r-md); background: var(--login-alert-bg);
  color: var(--red); font-size: 13px; line-height: 18px; font-weight: var(--fw-regular);
}
.login-card .login-error.login-banner::before {
  content: ''; flex: none; width: 16px; height: 16px; margin-top: 1px; background: currentColor;
  -webkit-mask: var(--login-info-ic) center / 16px 16px no-repeat; mask: var(--login-info-ic) center / 16px 16px no-repeat;
}
.login-card .login-error.login-banner:empty { display: none; }
.login-wrap {
  --login-info-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='none' stroke='black' stroke-width='1.4'/%3E%3Cpath d='M8 7.2v4' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='4.9' r='.9' fill='black'/%3E%3C/svg%3E");
}
.login-card .btn-primary .spinner { margin-right: var(--sp-2); }

/* B-086: the firm's wordmark (white text + gold emblem) on a dark brand panel across the top of the card,
   so the white text stays readable whatever the page theme. */
.login-brand-panel {
  margin: calc(-1 * var(--sp-8)) calc(-1 * var(--sp-8)) var(--sp-2); padding: var(--sp-7) var(--sp-8) var(--sp-6);
  border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--nav-bg);
  flex-direction: column; align-items: flex-start; gap: var(--sp-3);
}
.login-logo { display: block; width: 220px; max-width: 100%; height: auto; }
.login-brand-sub {
  color: var(--gold); font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* B-082: Sign in with Microsoft. Our own four-square mark in our own colour tokens. UX-140 (sprint P): above Email
   when connected, under Sign in when not; invisible until the status is known so nothing jumps. */
.login-ms { display: flex; flex-direction: column; gap: var(--sp-5); }
.login-ms:not([data-loaded='1']) { visibility: hidden; }
.login-or {
  display: flex; align-items: center; gap: var(--sp-4); color: var(--text-muted);
  font-size: var(--fs-sm); line-height: var(--lh-sm);
}
.login-or::before, .login-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.login-card .login-ms-btn {
  width: 100%; height: var(--control-h-lg); display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-4); background: var(--bg-surface); border: 1px solid var(--border-strong); color: var(--text);
  font-weight: var(--fw-semibold); box-shadow: var(--shadow-button);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.login-card .login-ms-btn:not(.is-off):hover { background: var(--bg-hover); }
.login-card .login-ms-btn:not(.is-off):active { background: var(--border); }
.login-card .login-ms-btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
/* Not connected: the whole button (mark, label, pill) at 40%, still focusable for its tooltip. */
.login-card .login-ms-btn.is-off { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.login-ms-icon { display: inline-flex; width: 16px; height: 16px; }
.login-ms-mark { width: 16px; height: 16px; display: block; }
.login-ms-tile-1 { fill: var(--red); }
.login-ms-tile-2 { fill: var(--green); }
.login-ms-tile-3 { fill: var(--blue-bright); }
.login-ms-tile-4 { fill: var(--yellow-icon); }
.login-ms-status {
  padding: 2px 6px; border-radius: var(--r-pill); background: var(--bg-hover); color: var(--text-2);
  font-size: var(--fs-xs); line-height: 14px; font-weight: var(--fw-semibold);
}