/*
 * NeuroLate over keycloak.v2. The parent draws every page with PatternFly 5 and
 * its own styles.css; this file changes what those look like, not what they
 * are. Every number here is copied from the frontend rather than chosen: the
 * palette from src/styles.css (OKLCH, light on :root, dark on .pf-v5-theme-dark,
 * which the parent toggles from prefers-color-scheme), the shapes from the
 * primitives the application's own forms are built out of --
 *
 *   page      routes/account/route.tsx  min-h-svh, centred, max-w-sm, p-6
 *   brand     components/branding.tsx   Earth size-6 in rounded-md p-2
 *   title     the account pages         text-xl font-bold, centred
 *   field     ui/field.tsx              gap-2 inside, gap-5 between
 *   label     ui/label.tsx              text-sm font-medium
 *   input     ui/input.tsx              h-8 rounded-lg px-2.5, ring-3 on focus
 *   group     ui/input-group.tsx        one border, the toggle inside it
 *   button    ui/button.tsx             h-8 (h-9 blocked), hover at 80%
 *   check     ui/checkbox.tsx           size-4 radius 4px, primary when set
 *   alert     ui/alert.tsx              rounded-lg, tinted, no bar
 *
 * The application's account pages carry no card, so neither does this: the
 * parent's panel is flattened onto the background rather than restyled.
 */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --positive: oklch(0.596 0.145 163.225);
  --info: oklch(0.623 0.214 259.815);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --radius: 0.625rem;
  /* The frontend's radius scale, @theme inline in src/styles.css. */
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);

  /* The tick of a checked box. A data URI cannot read a custom property, so
     --primary-foreground is written out here, once per scheme. */
  --check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");

  /* The parent's hooks, pointed at ours. */
  --keycloak-bg-logo-url: none;
  --keycloak-card-top-color: transparent;

  /* PatternFly's globals, so every component it draws follows without a rule each. */
  --pf-v5-global--FontFamily--sans-serif: "Inter Variable", "Inter", system-ui, sans-serif;
  --pf-v5-global--FontFamily--heading-sans-serif: "Inter Variable", "Inter", system-ui, sans-serif;
  --pf-v5-global--BackgroundColor--100: var(--background);
  --pf-v5-global--BackgroundColor--200: var(--background);
  --pf-v5-global--Color--100: var(--foreground);
  --pf-v5-global--Color--200: var(--muted-foreground);
  --pf-v5-global--BorderColor--100: var(--border);
  --pf-v5-global--BorderRadius--sm: var(--radius);
  --pf-v5-global--primary-color--100: var(--primary);
  --pf-v5-global--primary-color--200: var(--primary);
  --pf-v5-global--link--Color: var(--foreground);
  --pf-v5-global--link--Color--hover: var(--foreground);
  --pf-v5-global--danger-color--100: var(--destructive);
  --pf-v5-global--danger-color--200: var(--destructive);
  --pf-v5-global--success-color--100: var(--positive);
  --pf-v5-global--info-color--100: var(--info);
  --pf-v5-global--active-color--100: var(--ring);
  --pf-v5-global--FontSize--md: 0.875rem;
  --pf-v5-global--FontSize--sm: 0.875rem;
}

.pf-v5-theme-dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --positive: oklch(0.765 0.177 163.223);
  --info: oklch(0.707 0.165 254.624);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23343434' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");

  --pf-v5-global--BackgroundColor--100: var(--background);
  --pf-v5-global--BackgroundColor--200: var(--background);
  --pf-v5-global--BackgroundColor--300: var(--background);
  --pf-v5-global--Color--100: var(--foreground);
  --pf-v5-global--Color--200: var(--muted-foreground);
  --pf-v5-global--BorderColor--100: var(--border);
  --pf-v5-global--primary-color--100: var(--primary);
  --pf-v5-global--primary-color--200: var(--primary);
  --pf-v5-global--primary-color--300: var(--primary);
  --pf-v5-global--link--Color: var(--foreground);
  --pf-v5-global--link--Color--hover: var(--foreground);
  --pf-v5-global--danger-color--100: var(--destructive);
  --pf-v5-global--danger-color--200: var(--destructive);
  --pf-v5-global--success-color--100: var(--positive);
  --pf-v5-global--info-color--100: var(--info);
  --pf-v5-global--active-color--100: var(--ring);
}

/* Page: routes/account/route.tsx is a plain ground and one narrow column. */
.login-pf body,
body#keycloak-bg {
  background: var(--background);
  color: var(--foreground);
  font-size: 0.875rem;
}

/* A page that fits the screen has nothing to scroll, so a phone should not
   rubber-band it about under the finger either. */
html.login-pf {
  overscroll-behavior: none;
}

/* min-h-svh and centred, as the application's column is. The parent's 100vh is
   the viewport with the browser's toolbars retracted, so on a phone the page
   came out taller than the screen and scrolled by that difference. */
.pf-v5-c-login {
  --pf-v5-c-login--m-block--BackgroundColor: var(--background);
  min-height: 100svh;
  align-items: center;
  padding: 1.5rem;
}

/* The parent reserves the column's own width for a side panel this theme does
   not draw -- 98px of padding either side of a 384px grid, which left the form
   at half the width the application gives it. */
.pf-v5-c-login__container {
  --pf-v5-c-login__container--MaxWidth: 24rem;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 24rem;
  padding-inline: 0;
  gap: 1rem;
}

/* Brand: components/branding.tsx -- the Earth mark in a rounded box, and only
   the mark: the page title says the product's name a line below, so the realm
   name the parent prints here is folded away rather than repeated. */
#kc-header {
  margin: 0;
  padding: 0;
}

#kc-header-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
  letter-spacing: normal;
  text-transform: none;
  color: transparent !important;
}

#kc-header-wrapper::before {
  content: "";
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background-color: var(--primary-foreground);
}

#kc-header-wrapper::after {
  content: "";
  position: absolute;
  /* Half the plate, not the 60% the Lucide glyph took: the NL mark is a filled
     monogram rather than a stroked outline, so it carries more weight at a given
     box. Matches `size-5` in `p-2.5` in the application's `branding.tsx`. */
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--foreground);
  -webkit-mask: url("../img/logo.svg") center / contain no-repeat;
  mask: url("../img/logo.svg") center / contain no-repeat;
}

/* No card: the application's account pages sit on the background itself. */
.pf-v5-c-login__main {
  --pf-v5-c-login__main--BackgroundColor: transparent;
  --pf-v5-c-login__main--BoxShadow: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer-band {
  --pf-v5-c-login__main-header--PaddingRight: 0;
  --pf-v5-c-login__main-header--PaddingLeft: 0;
  --pf-v5-c-login__main-body--PaddingRight: 0;
  --pf-v5-c-login__main-body--PaddingLeft: 0;
  --pf-v5-c-login__main-footer-band--PaddingRight: 0;
  --pf-v5-c-login__main-footer-band--PaddingLeft: 0;
  background: transparent;
  border-top: 0;
}

.pf-v5-c-login__main-header {
  display: block;
  padding: 0 0 1.25rem;
}

.pf-v5-c-login__main-body {
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* The page's one line of explanation is printed after the form, in the same
   band as the "New here?" line. The application puts a caption under the title
   instead (the account pages' FieldDescription), so the band carrying prose --
   a bare span rather than the registration block -- is lifted above the form. */
.pf-v5-c-login__main-body > .pf-v5-c-login__main-footer:has(#kc-info-wrapper > span) {
  order: -1;
}

.pf-v5-c-login__main-body
  > .pf-v5-c-login__main-footer:has(#kc-info-wrapper > span)
  .pf-v5-c-login__main-footer-band {
  /* Pulled back against the header's own gap, to the gap-1 the application
     leaves between a title and its caption. */
  margin: -1rem 0 1.25rem;
}

/* gap-6 from the form to the line below it, as on the account pages. */
.pf-v5-c-login__main-footer-band {
  margin-top: 1.5rem;
  padding: 0;
}

#kc-page-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.75rem;
  text-align: center;
  color: var(--foreground);
}

/* The language switch leaves the column and sits in the corner of the page, the
   way a page-level control does -- the title is centred under the mark, and has
   the whole width to be centred in. */
.pf-v5-c-login__main-header-utilities {
  position: fixed;
  top: 1rem;
  inset-inline-end: 1rem;
  padding: 0;
}

.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control {
  --pf-v5-c-form-control--FontSize: 0.8125rem;
  --pf-v5-c-form-control--Color: var(--muted-foreground);
  --pf-v5-c-form-control--PaddingLeft: 0.625rem;
  --pf-v5-c-form-control--PaddingRight: 1.75rem;
  width: max-content;
}

/* Fields: ui/field.tsx -- gap-5 between, gap-2 from label to control. */
.pf-v5-c-form {
  --pf-v5-c-form--GridGap: 1.25rem;
  gap: 1.25rem;
}

.pf-v5-c-form__group-label {
  padding-bottom: 0.5rem !important;
}

.pf-v5-c-form__label-text {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  color: var(--foreground);
}

.pf-v5-c-form__label-required {
  margin-inline-start: 0.25rem;
  color: var(--destructive);
  font-size: 0.875rem;
}

/* Input: ui/input.tsx -- h-8, radius lg, hairline border, a 3px ring on focus.
   PatternFly draws no border on the control itself: ::before carries three
   sides and ::after the underline that thickens on focus. So the box is the
   pseudo-element's, and the ring hangs off it too. */
.pf-v5-c-form-control {
  --pf-v5-c-form-control--BackgroundColor: transparent;
  --pf-v5-c-form-control--Color: var(--foreground);
  --pf-v5-c-form-control--FontSize: 0.875rem;
  --pf-v5-c-form-control--LineHeight: 1.25rem;
  --pf-v5-c-form-control--PaddingTop: 0.25rem;
  --pf-v5-c-form-control--PaddingBottom: 0.25rem;
  --pf-v5-c-form-control--PaddingLeft: 0.625rem;
  --pf-v5-c-form-control--PaddingRight: 0.625rem;
  --pf-v5-c-form-control--before--BorderTopColor: var(--input);
  --pf-v5-c-form-control--before--BorderRightColor: var(--input);
  --pf-v5-c-form-control--before--BorderBottomColor: var(--input);
  --pf-v5-c-form-control--before--BorderLeftColor: var(--input);
  --pf-v5-c-form-control--before--BorderBottomWidth: 1px;
  --pf-v5-c-form-control--after--BorderBottomWidth: 0;
  --pf-v5-c-form-control--hover--after--BorderBottomColor: transparent;
  --pf-v5-c-form-control--focus--after--BorderBottomWidth: 0;
  --pf-v5-c-form-control--focus--after--BorderBottomColor: transparent;
  --pf-v5-c-form-control--m-error--after--BorderBottomWidth: 0;
  min-height: 2rem;
  height: 2rem;
  border-radius: var(--radius-lg);
}

/* ui/input.tsx is text-base below md and text-sm above it: iOS zooms into any
   field set under 16px when it takes focus, and leaves the page zoomed and
   loose under the finger afterwards. The language switch is a field too. */
@media (max-width: 47.98rem) {
  .pf-v5-c-form-control,
  .pf-v5-c-login__main-header-utilities .pf-v5-c-form-control {
    --pf-v5-c-form-control--FontSize: 1rem;
  }
}

.pf-v5-c-form-control::before {
  border-radius: var(--radius-lg);
  transition:
    border-color 150ms,
    box-shadow 150ms;
}

.pf-v5-theme-dark .pf-v5-c-form-control {
  --pf-v5-c-form-control--BackgroundColor: color-mix(in oklch, var(--input) 30%, transparent);
}

/* The ring is the focus style; the browser's own outline would double it. */
.pf-v5-c-form-control > input:focus,
.pf-v5-c-form-control > select:focus,
.pf-v5-c-form-control > textarea:focus {
  outline: none;
}

.pf-v5-c-form-control:focus-within::before {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}

/* A rejected field is a red border and a line of red text under it, as
   ui/field.tsx has it -- the parent's status icon inside the box, and the room
   it reserves for one, are not part of that. */
.pf-v5-c-form-control.pf-m-error {
  --pf-v5-c-form-control--m-error--PaddingRight: 0.625rem;
}

.pf-v5-c-form-control.pf-m-error::before {
  border-color: var(--destructive);
}

.pf-v5-c-form-control.pf-m-error:focus-within::before {
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
}

.pf-v5-c-form-control__icon.pf-m-status {
  display: none;
}

.pf-v5-c-form-control input::placeholder {
  color: var(--muted-foreground);
}

/* Password: ui/input-group.tsx -- one border round the pair and the eye inside
   it as a ghost button, so the toggle reads as part of the field. */
.pf-v5-c-input-group {
  --pf-v5-c-input-group--BackgroundColor: transparent;
  display: flex;
  align-items: center;
  height: 2rem;
  border: 1px solid var(--input);
  border-radius: var(--radius-lg);
  background: transparent;
  transition:
    border-color 150ms,
    box-shadow 150ms;
}

.pf-v5-theme-dark .pf-v5-c-input-group {
  background: color-mix(in oklch, var(--input) 30%, transparent);
}

.pf-v5-c-input-group:focus-within {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}

.pf-v5-c-input-group:has(.pf-m-error) {
  border-color: var(--destructive);
}

.pf-v5-c-input-group:has(.pf-m-error):focus-within {
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
}

.pf-v5-c-input-group .pf-v5-c-form-control {
  --pf-v5-c-form-control--BackgroundColor: transparent;
  height: 100%;
  background: transparent;
}

.pf-v5-c-input-group .pf-v5-c-form-control::before,
.pf-v5-c-input-group .pf-v5-c-form-control:focus-within::before {
  border: 0;
  box-shadow: none;
}

.pf-v5-c-input-group__item {
  background: transparent;
}

/* The parent rules a line between the field and the toggle and boxes the
   toggle in the dark scheme; the application's group has neither. */
.pf-v5-c-input-group > * + * {
  border-inline-start: 0;
}

/* Buttons: ui/button.tsx -- h-8, radius lg, medium weight, hover at 80%, and
   the press that moves a pixel down. */
.pf-v5-c-button {
  --pf-v5-c-button--BorderRadius: var(--radius-lg);
  --pf-v5-c-button--FontSize: 0.875rem;
  --pf-v5-c-button--FontWeight: 500;
  --pf-v5-c-button--PaddingTop: 0;
  --pf-v5-c-button--PaddingBottom: 0;
  --pf-v5-c-button--PaddingLeft: 0.625rem;
  --pf-v5-c-button--PaddingRight: 0.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2rem;
  border: 1px solid transparent;
  transition:
    background-color 150ms,
    color 150ms,
    border-color 150ms,
    opacity 150ms;
}

.pf-v5-c-button:active:not(.pf-m-control):not(.pf-m-link) {
  transform: translateY(1px);
}

/* The submit is the application's size="lg": h-9, and the whole width. */
.pf-v5-c-button.pf-m-block {
  min-height: 2.25rem;
  width: 100%;
}

.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--primary);
  --pf-v5-c-button--m-primary--Color: var(--primary-foreground);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: color-mix(
    in oklch,
    var(--primary) 80%,
    transparent
  );
  --pf-v5-c-button--m-primary--hover--Color: var(--primary-foreground);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--primary);
  --pf-v5-c-button--m-primary--focus--Color: var(--primary-foreground);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--primary);
  --pf-v5-c-button--m-primary--active--Color: var(--primary-foreground);
}

.pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--m-secondary--Color: var(--foreground);
  --pf-v5-c-button--m-secondary--BorderColor: var(--border);
  --pf-v5-c-button--m-secondary--hover--Color: var(--foreground);
  --pf-v5-c-button--m-secondary--hover--BorderColor: var(--border);
  --pf-v5-c-button--m-secondary--hover--BackgroundColor: var(--muted);
  --pf-v5-c-button--m-secondary--focus--Color: var(--foreground);
  --pf-v5-c-button--m-secondary--focus--BorderColor: var(--ring);
  --pf-v5-c-button--m-secondary--active--Color: var(--foreground);
  --pf-v5-c-button--m-secondary--active--BorderColor: var(--border);
  border-color: var(--border);
}

/* "Back to sign in" is a link on the application's forgot-password page, not a
   second button competing with the submit; the parent renders it as a block
   secondary, so it is unmade here. */
a.pf-v5-c-button.pf-m-secondary {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  font-weight: 400;
}

a.pf-v5-c-button.pf-m-secondary::after {
  border: 0;
}

a.pf-v5-c-button.pf-m-secondary:hover {
  background: transparent;
  color: var(--foreground);
  text-decoration: underline;
}

.pf-v5-c-button.pf-m-link {
  --pf-v5-c-button--m-link--Color: var(--muted-foreground);
  --pf-v5-c-button--m-link--hover--Color: var(--foreground);
  --pf-v5-c-button--m-link--focus--Color: var(--foreground);
  --pf-v5-c-button--m-link--active--Color: var(--foreground);
}

/* The eye inside the password field: ui/input-group.tsx draws its button
   borderless and muted, taking the foreground only under the pointer. */
.pf-v5-c-button.pf-m-control {
  --pf-v5-c-button--m-control--Color: var(--muted-foreground);
  --pf-v5-c-button--m-control--BackgroundColor: transparent;
  --pf-v5-c-button--m-control--after--BorderWidth: 0;
  --pf-v5-c-button--m-control--after--BorderColor: transparent;
  --pf-v5-c-button--m-control--hover--Color: var(--foreground);
  --pf-v5-c-button--m-control--hover--BackgroundColor: transparent;
  --pf-v5-c-button--m-control--hover--after--BorderColor: transparent;
  --pf-v5-c-button--m-control--active--after--BorderColor: transparent;
  --pf-v5-c-button--m-control--focus--after--BorderColor: transparent;
  min-height: 1.75rem;
  height: 1.75rem;
  width: 1.75rem;
  margin-inline-end: 0.25rem;
  padding: 0;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  background-color: transparent;
}

.pf-v5-c-button.pf-m-control::after {
  border: 0;
}

.pf-v5-c-button.pf-m-control:hover {
  background-color: var(--muted);
}

/* The way back from a later step to a different address. The parent draws it as
   a lone sync icon named only by a hover tooltip, which a phone never shows, and
   that tooltip, hidden but positioned past the button, widened the page beyond
   the screen. Its text becomes the button and the icon goes: a text button inside
   the field, as ui/input-group.tsx draws one. */
#reset-login.pf-v5-c-button.pf-m-control {
  width: auto;
  padding-inline: 0.5rem;
  color: var(--foreground);
  font-weight: 500;
}

#reset-login .fa-sync-alt,
#reset-login .kc-tooltip-text::after {
  display: none;
}

#reset-login .kc-tooltip-text {
  position: static;
  visibility: visible;
  opacity: 1;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font-size: 0.875rem;
}

.pf-v5-c-button:focus-visible {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}

/* Secondary text and links -- "Forgot password?", "New here?", "Back to sign
   in" -- muted, foreground under the pointer, as the application's aside links. */
.pf-v5-c-login__main-footer-band,
.pf-v5-c-login__main-footer-band-item,
#kc-registration,
#kc-info-wrapper,
.pf-v5-c-form__helper-text,
.pf-v5-c-helper-text__item-text,
.instruction {
  color: var(--muted-foreground);
  font-size: 0.875rem;
}

.pf-v5-c-login__main-footer-band,
.pf-v5-c-login__main-body .instruction {
  text-align: center;
}

#kc-registration a,
#kc-info-wrapper a,
.pf-v5-c-login__main-footer-band a,
.pf-v5-c-helper-text__item-text a,
.pf-v5-c-login__main-body a:not(.pf-v5-c-button) {
  color: var(--foreground);
  font-weight: 500;
  text-decoration: none;
  transition: color 150ms;
}

/* The reset link beside "Remember me" is a field's aside, and the application
   draws one of those in the muted weight of the text it sits in. */
.pf-v5-c-helper-text__item-text a {
  color: var(--muted-foreground);
  font-weight: 400;
}

.pf-v5-c-helper-text__item-text a:hover {
  color: var(--foreground);
}

#kc-registration a:hover,
#kc-info-wrapper a:hover,
.pf-v5-c-login__main-footer-band a:hover,
.pf-v5-c-helper-text__item-text a:hover,
.pf-v5-c-login__main-body a:not(.pf-v5-c-button):hover {
  text-decoration: underline;
}

/* The row under the password carries "Remember me" and the reset link, the way
   ui/field.tsx puts a label and its aside on one line. */
.pf-v5-c-form__helper-text .pf-v5-c-helper-text {
  align-items: center;
}

/* Checkbox: ui/checkbox.tsx -- size-4, radius 4px, filled with the primary and
   ticked in its foreground when set. */
.pf-v5-c-check {
  --pf-v5-c-check--GridGap: 0.5rem;
}

.pf-v5-c-check__input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 1rem;
  height: 1rem;
  margin: 0;
  border: 1px solid var(--input);
  border-radius: 4px;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.75rem;
  transition:
    background-color 150ms,
    border-color 150ms;
}

.pf-v5-theme-dark .pf-v5-c-check__input {
  background-color: color-mix(in oklch, var(--input) 30%, transparent);
}

.pf-v5-c-check__input:checked {
  border-color: var(--primary);
  background-color: var(--primary);
  background-image: var(--check-mark);
}

.pf-v5-c-check__input:focus-visible {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}

.pf-v5-c-check__label {
  font-size: 0.875rem;
  line-height: 1;
  color: var(--foreground);
}

label.pf-v5-c-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Alerts: ui/alert.tsx -- a tinted box in the message's own colour, no bar. */
.pf-v5-c-alert.pf-m-inline {
  --pf-v5-c-alert--BorderRadius: var(--radius-lg);
  --pf-v5-c-alert--BoxShadow: none;
  --pf-v5-c-alert--m-inline--BorderColor: transparent;
  --pf-v5-c-alert--BorderTopWidth: 0;
  --pf-v5-c-alert--m-inline--BorderWidth: 1px;
  --pf-v5-c-alert--m-inline--BorderStyle: solid;
  --pf-v5-c-alert__title--FontSize: 0.875rem;
  --pf-v5-c-alert__title--FontWeight: 400;
  --pf-v5-c-alert__icon--Color: currentColor;
  --pf-v5-c-alert__title--Color: currentColor;
  --pf-v5-c-alert__icon--FontSize: 0.875rem;
  padding: 0.5rem 0.625rem;
  color: var(--foreground);
  background-color: color-mix(in oklch, var(--muted) 60%, transparent);
  border-color: var(--border);
}

.pf-v5-c-alert.pf-m-inline.pf-m-danger {
  color: var(--destructive);
  background-color: color-mix(in oklch, var(--destructive) 5%, transparent);
  border-color: color-mix(in oklch, var(--destructive) 30%, transparent);
}

.pf-v5-c-alert.pf-m-inline.pf-m-success {
  color: var(--positive);
  background-color: color-mix(in oklch, var(--positive) 5%, transparent);
  border-color: color-mix(in oklch, var(--positive) 30%, transparent);
}

.pf-v5-c-alert.pf-m-inline.pf-m-warning {
  color: var(--foreground);
  background-color: color-mix(in oklch, var(--muted) 60%, transparent);
  border-color: var(--border);
}

.pf-v5-c-alert.pf-m-inline.pf-m-info {
  color: var(--info);
  background-color: color-mix(in oklch, var(--info) 5%, transparent);
  border-color: color-mix(in oklch, var(--info) 30%, transparent);
}

/* Field-level errors, which the parent prints under the control rather than in
   an alert: the application's FieldError is the destructive at text-sm. */
.pf-v5-c-helper-text__item.pf-m-error .pf-v5-c-helper-text__item-text,
.kc-feedback-text.pf-m-error,
#input-error,
#input-error-username,
#input-error-password {
  color: var(--destructive);
  font-size: 0.875rem;
}