/* OTP web sign-in pages. Sizes and type scale come from ncert/tokens.css; colours, fonts, border widths and dark mode
   (prefers-color-scheme, no script) from organizations/tokens.css, loaded after it, so these pages follow the device
   like the dashboard they lead to (TD-AUTH-01).
   The card's width is this page's layout constant, defined once here, as dashboard.css keeps its own panel widths.
   A column, so a bar above the card (the environment or number-change banner) spans the top and the card stays centred. */
.signin { --signin-card-width: 420px; }
.signin { margin: 0; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-md); box-sizing: border-box; background: var(--bg); color: var(--ink);
  font-family: var(--font-ui); font-size: var(--type-body-fontSize); line-height: var(--type-body-lineHeight); }
/* Staging's environment banner (static/environment/banner.css) spans the top too. */
.signin > .env-banner { align-self: stretch; }
.signin-card { margin-block: auto; width: 100%; max-width: var(--signin-card-width); padding: var(--space-xl) var(--space-lg); box-sizing: border-box;
  background: var(--card); border: var(--border-hairline) solid var(--line); border-radius: var(--radius-lg); }
.signin-brand { margin: 0 0 var(--space-lg); font-weight: var(--type-titleSmall-fontWeight); color: var(--accent); }
.signin-brand span { color: var(--muted); font-weight: var(--type-body-fontWeight); }
.signin h1 { margin: 0 0 var(--space-xs); font-family: var(--font-heading); font-size: var(--type-headline-fontSize); line-height: var(--type-headline-lineHeight);
  font-weight: var(--type-headline-fontWeight); }
.signin-muted { margin: 0 0 var(--space-lg); color: var(--muted); }
.signin-form { display: flex; flex-direction: column; gap: var(--space-md); margin: 0 0 var(--space-md); }
.signin-field { display: flex; flex-direction: column; gap: var(--space-xs); }
.signin-field label { font-weight: var(--type-label-fontWeight); font-size: var(--type-label-fontSize); }
.signin-field input { min-height: var(--size-touchMin); padding: 0 var(--space-md); box-sizing: border-box;
  font: inherit; color: var(--ink); background: var(--field); border: var(--border-hairline) solid var(--line); border-radius: var(--radius-sm); }
/* Keep the outline-offset: the ring passes 3:1 against the page around the control, not against the pill's own fill
   (2.96:1 light, 1.75:1 dark with no offset). The offset reuses the ring width, so a wider ring widens the gap. */
.signin-field input:focus-visible, .signin-button:focus-visible, .signin-link-button:focus-visible, .signin a:focus-visible {
  outline: var(--border-fieldFocus) solid var(--accent); outline-offset: var(--border-fieldFocus); }
.signin-button { min-height: var(--size-button); border: 0; border-radius: var(--radius-pill); cursor: pointer;
  font: inherit; font-weight: var(--type-label-fontWeight); color: var(--onPill); background: var(--pill); }
.signin-link-button { min-height: var(--size-touchMin); border: 0; background: none; cursor: pointer; font: inherit;
  color: var(--accent); text-decoration: underline; }
.signin-error { margin: 0 0 var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm);
  background: var(--errorBg); color: var(--error); }
.signin-error p, .signin-field-error { margin: 0; }
/* Why this browser was signed out (TD-AUTH-29): information, not an error. */
.signin-notice { margin: 0 0 var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm);
  background: var(--soft); color: var(--ink); }
.signin-notice p { margin: 0; }
.signin-field-error { color: var(--error); font-size: var(--type-bodySmall-fontSize); }
.signin-dev { margin: 0; color: var(--muted); font-size: var(--type-caption-fontSize); }
.signin-footnote { margin: 0; font-size: var(--type-bodySmall-fontSize); }
.signin a { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .signin * { transition: none; } }