/* Login card: password form, "or" divider, and OAuth are siblings in a grid. */
.min-h-svh.grid.items-center .grid.gap-6:has(> form):has(img[src*="oauth2"]) > * {
  order: 3;
}

.min-h-svh.grid.items-center .grid.gap-6:has(img[src*="oauth2"]) > div:has(> button img[src*="oauth2"]) {
  order: 1;
  margin-top: 0;
}

.min-h-svh.grid.items-center .grid.gap-6:has(img[src*="oauth2"]) > div.relative:has(.border-t) {
  order: 2;
}

.min-h-svh.grid.items-center .grid.gap-6:has(img[src*="oauth2"]) > form {
  order: 3;
}

.min-h-svh.grid.items-center .grid.gap-6:has(img[src*="oauth2"]) > a {
  order: 4;
}

.min-h-svh.grid.items-center .grid.gap-6:has(img[src*="oauth2"]) > div.relative .text-xs.uppercase {
  text-transform: none;
}

.min-h-svh.grid.items-center .grid.gap-6:has(img[src*="oauth2"]) > div.relative .text-xs.uppercase > span {
  font-size: 0;
}

.min-h-svh.grid.items-center .grid.gap-6:has(img[src*="oauth2"]) > div.relative .text-xs.uppercase > span::after {
  content: "or";
  font-size: 0.75rem;
  letter-spacing: 0;
}

.min-h-svh.grid.items-center button:has(img[src*="oauth2"]) > span.translate-y-px {
  font-size: 0;
}

.min-h-svh.grid.items-center button:has(img[src*="oauth2"]) > span.translate-y-px::after {
  content: "Continue with authentik";
  font-size: 0.875rem;
}

/* Stock OIDC mark is inverted in dark mode; keep the Authentik orange. */
.min-h-svh.grid.items-center button img[src*="oauth2"] {
  filter: none !important;
}