/* Windows for Workgroups · Authentik 2026.5.8 · native flow skin */
/* Shaped Unison: retain Authentik's readable cards over the starfield. */
body:has(ak-flow-executor)::before {
  background-image: var(--ak-global--background-image, none);
}
@media (max-width: 35rem), (max-height: 17.5rem) {
  ak-flow-executor.pf-c-login {
    --ak-c-login--BackgroundColorOverlay: transparent !important;
    --ak-c-flow-executor__locale-select--Color: #e4e9ef !important;
  }
  ak-flow-executor::part(main) {
    margin-inline: 1rem;
  }
  ak-flow-executor::part(footer) {
    color: #e4e9ef !important;
  }
  ak-flow-executor::part(locale-select) {
    --ak-c-flow-executor__locale-select--Color: #e4e9ef !important;
    --ak-c-locale-select--label--Color: #e4e9ef !important;
    color: #e4e9ef !important;
  }
}

/* Hide generic and stage-provided headings in every flow card. */
ak-flow-executor {
  --su-login-flow-title-display: none;
}
:host(ak-flow-card) .pf-c-login__main-header {
  display: var(--su-login-flow-title-display, block);
}

/* Preserve the artwork; use a smaller rendered height to compact the card. */
:host(ak-flow-executor) img.branding-logo {
  height: 144px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Application continuation copy is a paragraph, not the flow-card heading.
   Restrict it to the installed authentication flows, keeping recovery prose. */
ak-flow-executor[slug="default-authentication-flow"],
ak-flow-executor[slug="default-source-authentication"] {
  --su-login-prelude-display: none;
}
:host(ak-stage-identification) form.pf-c-form:has(input[name="uidField"]) > p:first-child,
:host(ak-stage-identification) form.pf-c-form > p:first-child:has(+ p) {
  display: var(--su-login-prelude-display, block);
}

/* Authentik appends its vendor credit after any custom footer links. */
ak-brand-links [part="list"] [part="list-item"][data-kind="text"]:last-child {
  display: none;
}

/* Half-transparent theme-colored panel; controls retain full opacity. */
ak-flow-executor::part(main) {
  background-color: color-mix(in srgb, var(--ak-c-login__main--BackgroundColor) 50%, transparent);
}

@font-face { font-family: 'SuDOS'; src: url('https://skins.shapedunison.com/assets/VT323-Latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
/* Native flow-only skin layer. Existing compact heading rules precede this file. */
body:has(ak-flow-executor) {
  background: var(--skin-bg, #c0c7c8) !important;
  color-scheme: light;
}
body:has(ak-flow-executor)::before {
  background: var(--skin-bg, #c0c7c8) !important;
  background-image: var(--skin-pattern, none) !important;
  background-size: var(--skin-pattern-size, auto) !important;
}
ak-flow-executor, :host(ak-flow-executor) {
  --pf-global--FontFamily--sans-serif: var(--skin-font, Arial, sans-serif);
  --pf-global--FontFamily--heading--sans-serif: var(--skin-font, Arial, sans-serif);
  --pf-global--FontFamily--monospace: var(--skin-font, monospace);
  --pf-global--Color--100: var(--skin-text, #111);
  --pf-global--Color--200: var(--skin-muted, #444);
  --ak-c-login__main--Color: var(--skin-text, #111);
  --ak-c-login__main--BackgroundColor: var(--skin-panel, #fff);
  --ak-c-login--BackgroundColorOverlay: transparent;
  --ak-c-login--MaxWidth: var(--skin-width, 460px);
  --pf-c-form-control--BackgroundColor: var(--skin-input, #fff);
  --pf-c-form-control--Color: var(--skin-input-text, #111);
  --pf-c-form-control--placeholder--Color: var(--skin-muted, #444);
  --pf-c-form-control--FontSize: var(--skin-font-size, 16px);
  --pf-c-form-control--BorderRadius: 0;
  --pf-c-button--m-primary--BackgroundColor: var(--skin-button, #c0c7c8);
  --pf-c-button--m-primary--Color: var(--skin-button-text, #111);
  --pf-c-button--BorderRadius: 0;
  --pf-c-form__label--FontSize: var(--skin-font-size, 16px);
  --ak-c-flow-executor__locale-select--Color: var(--skin-page-text, #111);
  font-family: var(--skin-font, Arial, sans-serif);
  color: var(--skin-text, #111);
}
:host(ak-flow-executor) {
  box-sizing: border-box;
  padding: 48px 20px;
  min-height: 100svh;
}
ak-flow-executor::part(main) {
  box-sizing: border-box;
  position: relative;
  width: var(--skin-width, 460px);
  max-width: calc(100vw - 40px);
  margin-inline: auto;
  padding: var(--skin-padding, 38px 28px 28px);
  border: var(--skin-panel-border, 3px solid #000080);
  border-radius: 0;
  background: var(--skin-panel, #fff) !important;
  color: var(--skin-text, #111);
  box-shadow: var(--skin-window-shadow, none);
  filter: none;
  backdrop-filter: none;
}
ak-flow-executor::part(branding) {
  display: flex;
  justify-content: center;
  padding: 0 0 24px;
  margin: 0;
  background: transparent;
}
:host(ak-flow-executor) img.branding-logo {
  height: var(--skin-logo-height, 96px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: none;
}
ak-flow-executor::part(locale-select) {
  color: var(--skin-page-text, #111) !important;
  --ak-c-flow-executor__locale-select--Color: var(--skin-page-text, #111);
  --ak-c-locale-select--label--Color: var(--skin-page-text, #111);
}
:host(ak-flow-card) .pf-c-login__main-body {
  padding: 0;
  color: var(--skin-text, inherit);
  font-family: var(--skin-font, inherit);
}
:host(ak-flow-card) { padding: 0; }
:host([part~="challenge"]),
:host(ak-flow-input-password),
:host(ak-stage-authenticator-validate-code) {
  font-family: var(--skin-font, inherit);
  color: var(--skin-text, inherit);
}
:host([part~="challenge"]) form.pf-c-form {
  gap: 20px;
  font-family: var(--skin-font, inherit);
  font-size: var(--skin-font-size, 16px);
}
:host([part~="challenge"]) .pf-c-form__group { gap: 8px; }
:host([part~="challenge"]) .pf-c-form__group.pf-m-action { margin-top: 0; }
:host([part~="challenge"]) .pf-c-form__label,
:host([part~="challenge"]) .pf-c-form__label-text {
  color: var(--skin-text, inherit);
  font: var(--skin-label-weight, 400) var(--skin-font-size, 16px)/1.25 var(--skin-font, monospace);
}
:host([part~="challenge"]) .pf-c-form-control,
:host(ak-flow-input-password) .pf-c-form-control,
:host(ak-stage-authenticator-validate-code) .pf-c-form-control {
  box-sizing: border-box;
  min-height: 40px;
  height: auto;
  padding: 8px 10px;
  color: var(--skin-input-text, #111);
  background: var(--skin-input, #fff);
  border: var(--skin-input-border, 1px solid #111);
  border-radius: 0;
  box-shadow: var(--skin-input-shadow, none);
  font: 400 var(--skin-font-size, 16px)/1.25 var(--skin-font, monospace);
  caret-color: currentColor;
}
:host([part~="challenge"]) .pf-c-form-control::placeholder,
:host(ak-flow-input-password) .pf-c-form-control::placeholder {
  color: var(--skin-muted, #444);
  opacity: 1;
}
:host([part~="challenge"]) .pf-c-button.pf-m-primary {
  min-height: 40px;
  padding: 8px 18px;
  color: var(--skin-button-text, #111);
  background: var(--skin-button, #c0c7c8);
  border: var(--skin-button-border, 2px outset #c0c7c8);
  border-radius: 0;
  box-shadow: var(--skin-button-shadow, none);
  font: var(--skin-label-weight, 400) var(--skin-font-size, 16px)/1.25 var(--skin-font, monospace);
  transition: none;
}
:host([part~="challenge"]) .pf-c-button.pf-m-primary::after { border: 0; }
:host([part~="challenge"]) .pf-c-button.pf-m-primary:hover {
  color: var(--skin-button-hover-text, var(--skin-button-text));
  background: var(--skin-button-hover, var(--skin-button));
}
:host([part~="challenge"]) .pf-c-button.pf-m-primary:active { transform: translate(1px, 1px); }
:host([part~="challenge"]) .pf-c-form-control:focus-visible,
:host([part~="challenge"]) .pf-c-button:focus-visible,
:host(ak-flow-input-password) .pf-c-form-control:focus-visible,
:host(ak-flow-input-password) .pf-c-button:focus-visible,
:host(ak-stage-authenticator-validate-code) .pf-c-form-control:focus-visible {
  outline: 2px solid var(--skin-focus, #000080);
  outline-offset: 3px;
}
:host([part~="challenge"]) .pf-c-form-control[aria-invalid="true"],
:host(ak-flow-input-password) .pf-c-form-control[aria-invalid="true"],
:host(ak-stage-authenticator-validate-code) .pf-c-form-control[aria-invalid="true"] {
  border-color: var(--skin-error, #b90000);
}
:host([part~="challenge"]) .pf-c-button:disabled,
:host([part~="challenge"]) .pf-c-form-control:disabled { opacity: .6; }
:host(ak-flow-input-password) .pf-c-button.pf-m-control {
  color: var(--skin-input-text, inherit);
  background: var(--skin-input, transparent);
  border-radius: 0;
}
@media (max-width: 600px) {
  :host(ak-flow-executor) { padding: 48px 16px 24px; }
  ak-flow-executor::part(main) {
    width: calc(100vw - 32px);
    max-width: 460px;
    padding: var(--skin-mobile-padding, 38px 22px 24px);
  }
}
@media (prefers-reduced-motion: reduce) {
  :host([part~="challenge"]) .pf-c-button.pf-m-primary:active { transform: none; }
}

/* Windows for Workgroups reference: flat white dialog, blue frame, gray buttons. */
body:has(ak-flow-executor), :host(ak-flow-executor) {
  --skin-bg: #c0c7c8;
  --skin-panel: #fff;
  --skin-text: #000;
  --skin-muted: #454545;
  --skin-input: #fff;
  --skin-input-text: #000;
  --skin-button: #c0c7c8;
  --skin-button-text: #000;
  --skin-button-hover: #d4dada;
  --skin-font: Arial, Helvetica, sans-serif;
  --skin-font-size: 15px;
  --skin-label-weight: 700;
  --skin-focus: #000080;
  --skin-page-text: #111;
  --skin-width: 580px;
  --skin-panel-border: 3px solid #000080;
  --skin-padding: 44px 24px 24px;
  --skin-mobile-padding: 38px 18px 22px;
  --skin-logo-height: 88px;
  --skin-input-border: 1px solid #000;
  --skin-button-border: 1px solid #000;
  --skin-button-shadow: inset 2px 2px #fff, inset -2px -2px #7c8383;
  --skin-window-shadow: 0 0 0 1px #000;
}
ak-flow-executor::part(main) {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 24px;
}
ak-flow-executor::part(branding) { padding: 0; align-items: center; }
:host(ak-flow-executor) [part="main"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  height: 22px;
  background: linear-gradient(to right, #c0c7c8 0 21px, #fff 21px 22px, #000080 22px);
  border-bottom: 1px solid #000080;
}
:host(ak-flow-executor) [part="main"]::after {
  content: "";
  position: absolute;
  top: 11px;
  left: 7px;
  width: 12px;
  height: 2px;
  border: 1px solid #000;
  background: #fff;
}
:host(ak-flow-executor) [part="challenge"] { min-width: 0; }
:host([part~="challenge"]) .pf-c-button.pf-m-primary {
  width: 108px;
  justify-self: end;
  min-height: 34px;
  padding: 6px 18px;
}
:host([part~="challenge"]) .pf-c-form-control { min-height: 34px; padding: 6px 8px; }
@media (max-width: 600px) {
  ak-flow-executor::part(main) { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
  :host(ak-flow-executor) img.branding-logo { height: 74px; }
}