/* CompuServe · 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; }
}

/* CompuServe reference: cyan glyphs, yellow rules, black dialog, gray stipple. */
body:has(ak-flow-executor), :host(ak-flow-executor) {
  --skin-bg: #aaa;
  --skin-pattern: repeating-conic-gradient(#111 0 25%, #aaa 0 50%);
  --skin-pattern-size: 3px 3px;
  --skin-panel: #000;
  --skin-text: #55ffff;
  --skin-muted: #a8b8b8;
  --skin-input: #000;
  --skin-input-text: #55ffff;
  --skin-button: #000;
  --skin-button-text: #ffff55;
  --skin-button-hover: #00aaaa;
  --skin-button-hover-text: #000;
  --skin-font: 'SuDOS', 'Courier New', monospace;
  --skin-font-size: 24px;
  --skin-label-weight: 400;
  --skin-focus: #ffff55;
  --skin-page-text: #ffff55;
  --skin-error: #ff7777;
  --skin-width: 570px;
  --skin-panel-border: 6px solid #ffff55;
  --skin-padding: 30px 34px 30px;
  --skin-mobile-padding: 24px 22px;
  --skin-logo-height: 96px;
  --skin-input-border: 1px solid #55ffff;
  --skin-button-border: 3px double #55ffff;
  --skin-window-shadow: 12px 12px #000;
}
body:has(ak-flow-executor)::before {
  border-top: 20px solid #00aaaa;
  border-bottom: 20px solid #0000aa;
  box-sizing: border-box;
}
ak-flow-executor::part(branding) {
  border: 1px solid #ffff55;
  padding: 16px 0;
  margin-bottom: 28px;
}
:host([part~="challenge"]) .pf-c-form-control { border-width: 0 0 2px; padding-inline: 0; }
:host([part~="challenge"]) .pf-c-button.pf-m-primary { width: 150px; justify-self: center; }
:host([part~="challenge"]) .pf-c-form__label-required { color: #ffff55; }
@media (max-width: 600px) {
  ak-flow-executor::part(main) { max-width: calc(100vw - 42px); }
}