/*
 * modern-login-auth.css — pre-auth screens: theme switcher, device-activation,
 * brand panel, PIN/keypad, user picker, sync/progress. Shared by ModernLogin and
 * ModernDeviceAuth (they share the brand panel), so it is a GLOBAL sheet rather
 * than a single component's `.razor.css`. Its responsive rules live in
 * modern-responsive.css (@media at the original 11076/11109), which loads later.
 *
 * Phase 6 split (final peel): moved verbatim off the (post-tranche-9) end of
 * modern-base.css (was lines 130-EOF). Loaded via index.html AFTER
 * modern-base.css (now just the global shell base) and BEFORE modern-pos.css —
 * source order is load-bearing. Do not reorder the <link> tags. Tokens resolve
 * from modern-tokens.css imported by modern-base.css.
 */

.scale-modern-switcher {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px;
  border-radius: var(--scale-radius-round);
  background: var(--scale-bar-bg);
  border: var(--scale-hairline) solid var(--scale-separator);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--scale-shadow-hairline);
  font-family: var(--scale-font-sans);
}

.scale-modern-switcher__group {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px;
  border-radius: var(--scale-radius-round);
  background: rgba(120, 120, 128, 0.16);
}

.scale-modern-switcher__button {
  min-height: 30px;
  min-width: 72px;
  padding: 5px 12px;
  border-radius: var(--scale-radius-round);
  color: var(--scale-text-mute);
  font-size: var(--scale-type-footnote-size);
  font-weight: 700;
  line-height: var(--scale-leading-mid);
  letter-spacing: 0;
  transition: background var(--scale-duration-toggle) ease, color var(--scale-duration-toggle) ease;
}

.scale-modern-switcher__button.is-active {
  color: var(--scale-text);
  background: var(--scale-panel);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.10), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}

.scale-modern-device-auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(380px, 44%) minmax(520px, 1fr);
  background: var(--scale-bg);
  overflow: hidden;
}

.scale-modern-login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(380px, 44%) minmax(520px, 1fr);
  background: var(--scale-bg);
  overflow: hidden;
}

.scale-modern-brand-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 44px 50px 40px;
  color: var(--scale-text-on-primary) !important;
  background: var(--scale-brand-gradient);
}
/* (dark-theme gradient now lives in --scale-brand-gradient's dark block) */

.scale-modern-brand-panel::before {
  content: "";
  position: absolute;
  right: -105px;
  top: -68px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: 36px solid rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.scale-modern-brand-panel::after {
  content: "";
  position: absolute;
  left: -112px;
  bottom: -150px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(208, 139, 62, 0.34), rgba(208, 139, 62, 0) 67%);
  pointer-events: none;
}

.scale-modern-brand-panel__glow {
  position: absolute;
  right: 70px;
  top: 275px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

.scale-modern-brand-panel__content {
  position: relative;
  z-index: 1;
}

.scale-modern-brand-panel__body {
  position: relative;
  z-index: 1;
  margin-block: auto;
}

.scale-modern-logo {
  width: 64px;
  height: auto;
  display: block;
}

.scale-modern-brand-panel__eyebrow {
  margin-bottom: 12px;
  color: var(--scale-accent);
  font-size: var(--scale-fs-11);
  font-weight: 700;
  line-height: var(--scale-leading-mid);
  letter-spacing: var(--scale-tracking-caps);
  text-transform: uppercase;
}

.scale-modern-brand-panel__title {
  max-width: 420px;
  margin: 0;
  color: var(--scale-text-on-primary);
  font-size: var(--scale-fs-42) !important;
  font-weight: var(--scale-type-large-title-weight);
  letter-spacing: var(--scale-tracking-tight);
  line-height: var(--scale-leading-tight);
}

.scale-modern-brand-panel__title em {
  color: var(--scale-accent);
  font-family: var(--scale-font-display);
  font-style: italic;
  font-weight: 500;
}

.scale-modern-brand-panel__subtitle,
.scale-modern-brand-panel__footer {
  max-width: 350px;
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--scale-type-footnote-size);
  font-weight: 700;
  line-height: var(--scale-leading-mid);
}

.scale-modern-brand-panel__subtitle {
  margin: 16px 0 0;
}

.scale-modern-auth-form-panel {
  min-width: 0;
  display: flex;
  /* Centre the form in the panel. Was `align-items: flex-start` with a hard-coded 180px top
     padding, which pinned the card near the top and left the rest of the column empty. The
     padding is now symmetric so it only acts as a minimum gutter when the form is taller
     than the viewport. */
  align-items: center;
  justify-content: center;
  padding: 64px 56px;
  background: var(--scale-bg);
}

.scale-modern-auth-form {
  width: min(480px, 100%);
}

.scale-modern-auth-form__eyebrow {
  display: none;
  margin: 0;
  color: var(--scale-text-soft);
  font-size: var(--scale-type-footnote-size);
  font-weight: 700;
  line-height: var(--scale-leading-mid);
  letter-spacing: var(--scale-tracking-caps);
  text-transform: uppercase;
}

.scale-modern-auth-form__title {
  margin: 0 0 4px;
  color: var(--scale-text);
  font-size: var(--scale-type-title-2-size);
  font-weight: var(--scale-type-title-2-weight);
  letter-spacing: var(--scale-tracking-mid);
  line-height: var(--scale-leading-snug);
}

.scale-modern-auth-form__copy {
  margin: 0 0 24px;
  color: var(--scale-text-mute);
  font-size: var(--scale-type-footnote-size);
  font-weight: var(--scale-type-footnote-weight);
  line-height: var(--scale-leading-mid);
}

.scale-modern-section {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
}

.scale-modern-section__header {
  padding: 0 8px 7px;
  color: var(--scale-text-soft);
  font-size: var(--scale-type-caption-2-size);
  font-weight: 700;
  line-height: var(--scale-leading-mid);
  letter-spacing: var(--scale-tracking-caps);
  text-transform: uppercase;
}

.scale-modern-section__body {
  overflow: hidden;
  border-radius: var(--scale-radius-card);
  background: var(--scale-panel);
  box-shadow: var(--scale-shadow-hairline);
}

.scale-modern-section__footer {
  padding: 6px 16px 0;
  color: var(--scale-text-soft);
  font-size: var(--scale-type-caption-2-size);
  font-weight: var(--scale-type-footnote-weight);
  line-height: var(--scale-leading-mid);
}

.scale-modern-input-row,
.scale-modern-status-row {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
}

.scale-modern-status-row + .scale-modern-status-row {
  border-top: var(--scale-hairline) solid var(--scale-separator);
  margin-left: 0;
  padding-left: 16px;
}

.scale-modern-input-icon,
.scale-modern-status-icon {
  flex: 0 0 auto;
  color: var(--scale-text-mute);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.scale-modern-status-icon {
  display: none;
}

.scale-modern-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--scale-text);
  font-family: var(--scale-font-mono) !important;
  font-size: var(--scale-type-footnote-size);
  font-weight: 600;
  line-height: var(--scale-leading-body);
  letter-spacing: 0.06em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.scale-modern-login-panel {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--scale-bg);
}

.scale-modern-login-card {
  width: min(420px, 100%);
}

.scale-modern-login-picker {
  width: min(560px, 100%);
}

.scale-modern-login-title {
  margin: 0 0 4px;
  color: var(--scale-text);
  font-size: var(--scale-type-title-1-size);
  font-weight: var(--scale-type-title-1-weight);
  letter-spacing: var(--scale-tracking-tight);
  line-height: var(--scale-leading-snug);
}

.scale-modern-login-copy {
  margin: 0 0 24px;
  color: var(--scale-text-mute);
  font-size: var(--scale-type-callout-size);
  font-weight: var(--scale-type-callout-weight);
  line-height: 1.45;
}

.scale-modern-user-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.scale-modern-user-card {
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 12px !important;
  border-radius: 14px !important;
  background: var(--scale-panel) !important;
  color: var(--scale-text) !important;
  box-shadow: var(--scale-shadow-tile);
  text-align: left;
}

.scale-modern-user-card--new {
  background: transparent !important;
  border: 1px dashed var(--scale-border-strong) !important;
  box-shadow: none;
}

.scale-modern-user-avatar,
.scale-modern-new-avatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: var(--scale-radius-round);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--scale-primary);
  color: var(--scale-text-on-primary);
  font-size: var(--scale-type-headline-size);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.scale-modern-new-avatar {
  background: var(--scale-primary-soft);
  color: var(--scale-primary);
  font-size: var(--scale-fs-28);
  font-weight: 700;
}

.scale-modern-user-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.scale-modern-user-meta strong {
  overflow: hidden;
  color: var(--scale-text);
  font-size: var(--scale-type-callout-size);
  font-weight: 700;
  line-height: var(--scale-leading-mid);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scale-modern-user-meta span {
  overflow: hidden;
  color: var(--scale-text-mute);
  font-size: var(--scale-type-footnote-size);
  font-weight: var(--scale-type-footnote-weight);
  line-height: var(--scale-leading-mid);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scale-modern-user-chevron {
  color: var(--scale-text-soft);
  font-size: var(--scale-fs-20);
  line-height: 1;
}

.scale-modern-login-footnote {
  margin: 18px 0 0;
  color: var(--scale-text-soft);
  font-size: var(--scale-type-footnote-size);
  font-weight: var(--scale-type-footnote-weight);
  text-align: center;
}

.scale-modern-login-footnote button {
  color: var(--scale-primary);
  font-size: inherit;
  font-weight: 700;
}

.scale-modern-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
  color: var(--scale-primary) !important;
  font-size: var(--scale-type-callout-size);
  font-weight: 600;
}

.scale-modern-login-username-section {
  margin-bottom: 20px;
}

.scale-modern-login-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--scale-text);
  font-family: var(--scale-font-sans) !important;
  font-size: var(--scale-type-body-size);
  font-weight: 500;
  line-height: var(--scale-leading-body);
}

.scale-modern-login-input::placeholder {
  color: var(--scale-text-soft);
  opacity: 1;
}

.scale-modern-pin-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  color: var(--scale-text);
  font-size: var(--scale-type-headline-size);
  font-weight: var(--scale-type-headline-weight);
  letter-spacing: var(--scale-tracking-snug);
  line-height: var(--scale-leading-mid);
}

.scale-modern-pin-header span:last-child {
  color: var(--scale-text-soft);
  font-size: var(--scale-type-footnote-size);
  font-weight: var(--scale-type-footnote-weight);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.scale-modern-pin-dots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.scale-modern-pin-dot {
  height: 18px;
  border-radius: var(--scale-radius-round);
  background: rgba(120, 120, 128, 0.18);
  box-shadow: inset 0 0 0 var(--scale-hairline) var(--scale-separator);
}

.scale-modern-pin-dot.is-filled {
  background: var(--scale-primary);
  box-shadow: none;
}

.scale-modern-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 22px;
}

.scale-modern-key {
  height: var(--scale-keypad-key-height);
  border-radius: var(--scale-keypad-radius) !important;
  background: var(--scale-panel) !important;
  color: var(--scale-text) !important;
  border: var(--scale-hairline) solid var(--scale-border) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--scale-font-sans) !important;
  font-size: var(--scale-fs-26);
  font-weight: 600;
  letter-spacing: var(--scale-tracking-mid);
  transition: opacity 100ms ease, transform 80ms ease;
}

.scale-modern-key:active {
  opacity: 0.55;
  transform: scale(0.97);
}

.scale-modern-key:disabled {
  opacity: 0.45;
  cursor: default;
}

.scale-modern-key--function {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none;
  font-size: var(--scale-type-title-3-size);
  font-weight: 600;
}

.scale-modern-input::placeholder {
  color: var(--scale-text-soft);
  opacity: 1;
}

.scale-modern-valid-check {
  color: var(--scale-success);
}

.scale-modern-status-row__label {
  flex: 1;
  color: var(--scale-text);
  font-size: var(--scale-type-footnote-size);
  font-weight: var(--scale-type-footnote-weight);
}

.scale-modern-status-row__value {
  color: var(--scale-text-mute);
  font-size: var(--scale-type-footnote-size);
  font-weight: var(--scale-type-footnote-weight);
}

.scale-modern-alert {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: var(--scale-radius-card);
  background: color-mix(in srgb, var(--scale-danger) 10%, var(--scale-panel));
  color: var(--scale-danger);
  font-size: var(--scale-type-footnote-size);
  font-weight: 700;
  line-height: var(--scale-leading-mid);
}

/* Scoped with `.scale-modern-shell` (0-2-1) on purpose: the shell's button reset
   `.scale-modern-shell button { color: inherit; background: none }` (modern-base.css,
   0-1-1) beats a bare single-class rule, so the ENABLED button lost its fill and its
   white label. The `:disabled` rule below is already 0-2-0 and out-specifies the reset,
   which is why only the enabled state (i.e. once a device key is typed) looked wrong. */
.scale-modern-shell .scale-modern-primary-button {
  width: 100%;
  min-height: 50px;
  border-radius: var(--scale-radius-cta);
  background: var(--scale-primary);
  color: var(--scale-text-on-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--scale-type-footnote-size);
  font-weight: 700;
  line-height: var(--scale-leading-mid);
  letter-spacing: var(--scale-tracking-snug);
  transition: opacity var(--scale-duration-press) ease, background var(--scale-duration-toggle) ease;
}

.scale-modern-shell .scale-modern-primary-button:hover {
  background: var(--scale-primary);
  color: var(--scale-text-on-primary);
}

.scale-modern-primary-button:disabled {
  color: var(--scale-text-mute);
  background: rgba(120, 120, 128, 0.16);
  cursor: default;
}

.scale-modern-secondary-button {
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  border-radius: var(--scale-radius-tinted-btn);
  color: var(--scale-primary);
  font-size: var(--scale-type-footnote-size);
  font-weight: 700;
}

.scale-modern-sync-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--scale-overlay);
}

.scale-modern-sync-card {
  width: min(480px, 100%);
  padding: 28px;
  border-radius: var(--scale-radius-sheet);
  background: var(--scale-panel);
  box-shadow: var(--scale-shadow-sheet);
}

.scale-modern-sync-card__title {
  margin: 0 0 6px;
  color: var(--scale-text);
  font-size: var(--scale-type-title-2-size);
  font-weight: var(--scale-type-title-2-weight);
  letter-spacing: var(--scale-tracking-mid);
  line-height: var(--scale-leading-snug);
}

.scale-modern-sync-card__subtitle {
  margin: 0 0 20px;
  color: var(--scale-text-mute);
  font-size: var(--scale-type-callout-size);
  font-weight: var(--scale-type-callout-weight);
}

.scale-modern-progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: var(--scale-radius-round);
  background: var(--scale-primary-soft);
}

.scale-modern-progress-fill {
  height: 100%;
  min-width: 4px;
  border-radius: var(--scale-radius-round);
  background: var(--scale-primary);
  transition: width 240ms var(--scale-ease-out-ios);
}

.scale-modern-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  color: var(--scale-text-soft);
  font-size: var(--scale-type-footnote-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.scale-modern-shake {
  animation: scale-modern-shake 320ms ease;
}