/* ═══════════════════════════════════════════════════════
   Login — the dashboard sign-in card

   Panel, inputs, buttons and the error banner are the shared primitives in
   ui.css (docs/specs/design-system.md). This sheet holds the centred page,
   the wordmark and the card's own rhythm.
   ═══════════════════════════════════════════════════════ */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg-page);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  color: var(--text-primary);
}
.login-card {
  max-width: 400px;
  border-radius: var(--radius-xl);
  padding: 40px 36px 32px;
}
.login-head { text-align: center; margin-bottom: 28px; }
.login-brand { display: inline-flex; flex-direction: column; line-height: 1.04; }
.login-brand-name { color: var(--text-primary); font-size: 26px; font-weight: 700; letter-spacing: -0.5px; }
/* Matches the line above in size and weight, and spans exactly its width. The
   width match is structural, not tuned: .login-brand is a column flexbox, so
   this row stretches to the width "Partners Dental" sets and space-between
   distributes the nine letters across it. Same construction as .nav-brand. */
.login-brand-solutions { display: flex; justify-content: space-between; color: var(--red); font-size: 26px; font-weight: 700; }
.login-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.login-label { display: block; font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 6px; }
.login-section-label {
  font-size: var(--type-caption);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 9px;
}
.login-input { width: 100%; height: 40px; margin-bottom: 10px; }
.login-btn { width: 100%; height: 40px; margin-top: 4px; }
/* Type and colour come from .pds-hint; this only places it under the button. */
.login-hint { margin: 8px 0 0; text-align: center; }
/* Outlined rather than filled: it sits beside a filled brand button, and
   Google's guidelines want their mark on a light surface. */
.login-btn-google { width: 100%; height: 40px; gap: 10px; font-size: 14px; font-weight: 500; }
.login-divider { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 12px; margin: 20px 0; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-hairline); }
/* A plain rule, not a second "or": the lab floor is a different audience, not
   another way for the same person to sign in. */
.login-rule { height: 1px; background: var(--border-hairline); margin: 26px 0 18px; }
.login-error { border-radius: var(--radius-md); font-size: 13px; margin-bottom: 12px; }