/* UI pass v2 — the sign-in page (app/templates/login.html), linked only under
   the instance flag. Every rule is scoped under html[data-ui="v2"], and uses
   the tokens ui-v2.css defines: no palette of its own. It restyles the
   classes the page already carries, so the markup is the same with the flag
   on or off. Solid surfaces, one 1px edge per box, 6px controls, 8px card,
   no gradient, blur, glow or idle motion (docs/ui-v2.md). */

html[data-ui="v2"] body.login-bg,
html[data-ui="v2"].dark body.login-bg {
  background: var(--bg-primary);
  animation: none;
  color: var(--text-primary);
}
html[data-ui="v2"] .login-bg .orb,
html[data-ui="v2"] .login-bg .grid-overlay { display: none; }
html[data-ui="v2"] .login-bg .card-enter,
html[data-ui="v2"] .login-bg .card-enter-delay { animation: none; }

/* Brand: the mark tile and the name */
html[data-ui="v2"] .login-bg .card-enter > .inline-flex {
  border-radius: 8px;
  box-shadow: none;
}
html[data-ui="v2"] .login-bg .login-title {
  color: var(--text-heading);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-title);
}
html[data-ui="v2"] .login-bg h1.login-title { font-size: var(--fs-title); line-height: var(--lh-title); }
html[data-ui="v2"] .login-bg h2.login-title { font-size: var(--fs-section); line-height: var(--lh-section); letter-spacing: var(--tr-section); }
html[data-ui="v2"] .login-bg .login-subtitle { color: var(--text-secondary); }
html[data-ui="v2"] .login-bg p.login-subtitle.text-sm { font-size: var(--fs-ui); line-height: var(--lh-ui); }
html[data-ui="v2"] .login-bg p.login-subtitle.text-xs { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-tertiary); }
html[data-ui="v2"] .login-bg .login-footer { color: var(--text-tertiary); font-size: var(--fs-meta); }

/* Card */
html[data-ui="v2"] .login-bg .login-card,
html[data-ui="v2"].dark .login-bg .login-card {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 24px;
}

/* Labels and inputs */
html[data-ui="v2"] .login-bg .login-label {
  color: var(--text-secondary);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-meta);
  text-transform: none;
}
html[data-ui="v2"] .login-bg .login-input,
html[data-ui="v2"].dark .login-bg .login-input {
  background: var(--bg-card);
  border: 1px solid var(--border-input);
  border-radius: 6px;
  color: var(--text-primary);
  box-shadow: none;
  transition: none;
}
html[data-ui="v2"] .login-bg input.login-input {
  height: 40px;
  padding: 0 12px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
html[data-ui="v2"] .login-bg .login-input::placeholder,
html[data-ui="v2"].dark .login-bg .login-input::placeholder { color: var(--text-muted); }
html[data-ui="v2"] .login-bg .login-input:focus,
html[data-ui="v2"].dark .login-bg .login-input:focus {
  background: var(--bg-card);
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  box-shadow: none;
}
/* Backup codes: read-only boxes on the inset surface */
html[data-ui="v2"] .login-bg div.login-input,
html[data-ui="v2"].dark .login-bg div.login-input {
  background: var(--bg-inset);
  border-color: var(--border-primary);
  font-family: var(--font-mono);
  font-size: var(--fs-ui);
}
html[data-ui="v2"] .login-bg .font-mono { font-family: var(--font-mono); color: var(--text-primary); }

/* Buttons: the one solid accent button per step, and the quiet text button */
html[data-ui="v2"] .login-bg .login-card button.w-full.font-semibold,
html[data-ui="v2"].dark .login-bg .login-card button.w-full.font-semibold,
html[data-ui="v2"]:not(.dark) .login-bg .login-card button.w-full.font-semibold {
  height: 40px;
  padding: 0 16px;
  border-radius: 6px;
  color: var(--on-accent);
  font-size: var(--fs-ui);
  font-weight: var(--fw-semibold);
  box-shadow: none;
  transform: none;
  transition: none;
}
html[data-ui="v2"] .login-bg .login-card button.w-full.font-semibold:hover:not(:disabled) {
  background: var(--accent-hover) !important;  /* over the element's inline accent */
}
html[data-ui="v2"] .login-bg .login-card button.w-full.font-semibold:focus-visible,
html[data-ui="v2"] .login-bg .login-card button.w-full.font-medium:focus-visible,
html[data-ui="v2"] .login-bg .login-theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: none;
}
html[data-ui="v2"] .login-bg .login-card button.w-full.font-medium {
  color: var(--text-secondary) !important;  /* over the element's inline tertiary */
  font-size: var(--fs-ui);
}
html[data-ui="v2"] .login-bg .login-card .loading-spinner-sm {
  border-color: var(--on-accent);
  border-right-color: transparent;
}

/* MFA: the lock glyph is plain, the QR sits on white with one edge */
html[data-ui="v2"] .login-bg .login-card svg.w-10 { width: 24px; height: 24px; color: var(--text-secondary) !important; }
html[data-ui="v2"] .login-bg .login-card .bg-white.rounded-xl {
  background: #FFFFFF;
  border: 1px solid var(--border-primary);
  border-radius: 8px;
}

/* Error banner */
html[data-ui="v2"] .login-bg .login-error,
html[data-ui="v2"].dark .login-bg .login-error {
  background: var(--danger-fill);
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--danger);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  text-align: left;
}

/* Theme toggle */
html[data-ui="v2"] .login-bg .login-theme-toggle,
html[data-ui="v2"].dark .login-bg .login-theme-toggle {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-button);
  color: var(--text-secondary);
  box-shadow: none;
  transition: none;
}
html[data-ui="v2"] .login-bg .login-theme-toggle:hover,
html[data-ui="v2"].dark .login-bg .login-theme-toggle:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}