/* Auth surfaces must pair their own backgrounds with readable theme colors. */
.login-card {
  --auth-surface: #ffffff;
  --auth-soft: #f1f5f9;
  --auth-text: #172033;
  --auth-secondary: #475569;
  --auth-border: #64748b;
  --auth-green: #166534;
  --auth-selected: #ecfdf5;
  --auth-orange: #b45309;
  --auth-purple: #7e22ce;
  --auth-blue: #1d4ed8;
  --auth-focus: #1d4ed8;
  box-sizing: border-box;
  background: var(--auth-surface);
  color: var(--auth-text);
}
[data-theme="dark"] .login-card {
  --auth-surface: #121e22;
  --auth-soft: #203137;
  --auth-text: #f1f5f9;
  --auth-secondary: #cbd5e1;
  --auth-border: #94a3b8;
  --auth-green: #86efac;
  --auth-selected: #153b2c;
  --auth-orange: #fdba74;
  --auth-purple: #d8b4fe;
  --auth-blue: #93c5fd;
  --auth-focus: #93c5fd;
  color-scheme: dark;
}
.login-card .login-sub,
.login-card .helper-text { color: var(--auth-secondary); }
.login-card .input {
  min-height: 44px;
  background: var(--auth-surface);
  color: var(--auth-text);
  border-color: var(--auth-border);
  font-size: 16px; /* Prevent focus zoom on iOS. */
}
.login-card .input::placeholder { color: var(--auth-secondary); opacity: 1; }
.login-card .signup-path-switcher {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--auth-soft);
  border-color: var(--auth-border);
}
.login-card .signup-path-switcher button {
  min-height: 44px;
  padding: 8px;
  color: var(--auth-text);
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}
.login-card .signup-path-switcher button.active {
  background: #166534;
  color: #ffffff;
  box-shadow: inset 0 -3px 0 #f5d878;
}
.login-card .login-role-option {
  --role-accent: var(--auth-green);
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 4px 10px;
  padding: 12px;
  border-color: var(--auth-border);
  border-left-color: var(--role-accent);
  background: var(--auth-surface);
  color: var(--auth-text);
  cursor: pointer;
}
.login-card .login-role-option.role-orange { --role-accent: var(--auth-orange); }
.login-card .login-role-option.role-purple { --role-accent: var(--auth-purple); }
.login-card .login-role-option.role-blue { --role-accent: var(--auth-blue); }
.login-card .login-role-option > strong { font-size: 14px; line-height: 1.4; }
.login-card .login-role-option > small {
  color: var(--auth-secondary);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.login-card .login-role-option.selected {
  background: var(--auth-selected);
  border-color: var(--auth-green);
  border-left-color: var(--role-accent);
  box-shadow: 0 0 0 1px var(--auth-green);
}
.login-card .login-role-option.selected > strong::after {
  content: ' ✓';
  color: var(--auth-green);
}
.login-card .staff-code-gate {
  background: var(--auth-soft);
  color: var(--auth-text);
  border-color: var(--auth-blue);
}
.login-card .staff-code-gate p,
.login-card .staff-code-success small { color: var(--auth-secondary); font-size: 13px; line-height: 1.5; }
.login-card .staff-code-success { background: var(--auth-selected); border-color: var(--auth-green); }
.login-card .staff-code-success span { color: var(--auth-green); font-size: 13px; }
.login-card button:focus-visible,
.login-card .input:focus-visible {
  outline: 3px solid var(--auth-focus);
  outline-offset: 3px;
}
.login-card button:disabled { opacity: 1; cursor: not-allowed; }
.login-card .btn:disabled {
  background: var(--auth-soft);
  color: var(--auth-secondary);
  border: 1px solid var(--auth-border);
}
@media (hover: hover) {
  .login-card .login-role-option:hover:not(:disabled) { background: var(--auth-soft); }
  .login-card .login-role-option.selected:hover:not(:disabled) { background: var(--auth-selected); }
  .login-card .signup-path-switcher button:not(.active):hover { text-decoration: underline; }
}
@media (max-width: 360px) {
  .login-card .signup-path-switcher { grid-template-columns: 1fr; }
  .login-card .staff-code-entry { flex-direction: column; }
}
@media (forced-colors: active) {
  .login-card .login-role-option.selected,
  .login-card .signup-path-switcher button.active { outline: 2px solid Highlight; outline-offset: -3px; }
}