/* All eight login themes share one clear-left / 50% right treatment.
   Wallpaper color filters and authenticated dashboard styles remain untouched. */
body:has(.auth-shell) #appearance-background::after {
  background: transparent;
}

body:has(.auth-shell) .auth-story {
  background: transparent;
  box-shadow: none;
  text-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body:has(.auth-shell) .auth-story::before,
body:has(.auth-shell) .auth-story::after {
  content: none;
  background: none;
  box-shadow: none;
}
body:not([data-theme="amber-connections"]):has(.auth-shell) .auth-story :is(.brand, .story-label, h1, p, .story-bottom) {
  text-shadow: 0 1px 3px #000, 0 2px 6px #000;
}
body[data-theme="amber-connections"]:has(.auth-shell) .auth-story :is(.brand, .story-label, h1, p, .story-bottom) {
  text-shadow: 0 1px 3px #fffaf2, 0 2px 6px #fffaf2;
}

/* Use a single 50%-alpha theme color, including the stacked mobile layout. */
body:has(.auth-shell) .auth-form-side {
  background: color-mix(in srgb, var(--bg) 50%, transparent);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body:has(.auth-shell) .auth-form-wrap {
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* All themes use the same unframed form; these are decorative wrapper layers,
   not the input/button borders or the desktop column divider. */
body:has(.auth-shell) .auth-form-wrap::before,
body:has(.auth-shell) .auth-form-wrap::after {
  content: none;
  border: 0;
  background: none;
  box-shadow: none;
}

/* Keep controls opaque and text legible without adding another panel veil. */
body:has(.auth-shell) .auth-form-side :is(.field input, .field select, .language-control select) {
  background-color: var(--surface);
}
body:not([data-theme="amber-connections"]):has(.auth-shell) .auth-form-side {
  --muted: color-mix(in srgb, var(--ink) 82%, var(--bg));
  --faint: color-mix(in srgb, var(--ink) 70%, var(--bg));
}
body:not([data-theme="amber-connections"]):has(.auth-shell) .auth-form-side :is(h2, .auth-kicker, .auth-description, .field > label, .auth-bottom-note) {
  text-shadow: 0 1px 3px #0009;
}
body[data-theme="amber-connections"]:has(.auth-shell) .auth-form-side {
  --ink: #38281c;
  --muted: #5f4937;
  --faint: #79634e;
}
body[data-theme="amber-connections"]:has(.auth-shell) .auth-form-side :is(h2, .auth-kicker, .auth-description, .field > label, .auth-bottom-note) {
  text-shadow: 0 1px 3px #fffaf2cc;
}