/* =============================================================================
 * Innova Route : sign-in pages (Keycloak login theme "innova")
 *
 * The layout is the one of /activation (apps/web/src/features/activation): a single column on the
 * page background, 28rem wide, the product name as a small muted line above the title, the title
 * in medium weight, body text muted, buttons the width of the column, the privacy link at the
 * foot. No card, no photograph, no logo. Keycloak keeps its markup and its scripts; the three
 * templates this theme overrides (template.ftl, field.ftl, footer.ftl) only add what the page
 * frame needs, and everything else is dressed here.
 *
 * The values are the ones of packages/ui/src/styles/tokens.css (docs/20-design-tokens.md):
 * Tailwind v4's neutral scale for the chrome, blue only for the focus ring, red only for an error.
 * They are copied, not imported, because this stylesheet is served by Keycloak, not by the web app:
 * when a token changes there, change it here (the comment on each says which one).
 *
 * Rules kept from the design system: weights 400 and 500 only; no capitals; no coloured stripe on
 * one side of a box; light and dark from one light-dark() declaration (the OS preference decides,
 * as in the app); a visible 2px focus ring; motion off when the person asks for less; controls
 * 44px high, 56px where the pointer is a finger (the driver's tablet and every phone); fields at
 * 16px so a phone does not zoom the page when one takes focus.
 *
 * The only host this page asks anything of, besides Keycloak itself, is Adobe's font kit, linked
 * from template.ftl as the web app links it. Until the kit answers, and when it is blocked or the
 * tablet is offline, the metric-matched fallbacks below keep the layout where the real face
 * would put it.
 *
 * À valider dans Paper : the design tool was unreachable when this was written.
 * ========================================================================== */

/* --- Metric-matched fallbacks (tokens.css §2): local faces only, nothing is downloaded. ------- */
@font-face {
  font-family: "AGN Fallback HelveticaNeue";
  font-style: normal;
  font-weight: 351 450;
  src: local("Helvetica Neue"), local("HelveticaNeue");
  size-adjust: 93.63%;
  ascent-override: 106.59%;
  descent-override: 31.93%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "AGN Fallback HelveticaNeue";
  font-style: normal;
  font-weight: 451 550;
  src: local("Helvetica Neue Medium"), local("HelveticaNeue-Medium");
  size-adjust: 95.47%;
  ascent-override: 104.54%;
  descent-override: 31.32%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "AGN Fallback Roboto";
  font-style: normal;
  font-weight: 351 450;
  src: local("Roboto"), local("Roboto-Regular");
  size-adjust: 96.09%;
  ascent-override: 103.86%;
  descent-override: 31.12%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "AGN Fallback Roboto";
  font-style: normal;
  font-weight: 451 550;
  src: local("Roboto Medium"), local("Roboto-Medium");
  size-adjust: 99.12%;
  ascent-override: 100.69%;
  descent-override: 30.17%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "AGN Fallback Arial";
  font-style: normal;
  font-weight: 351 450;
  src: local("Arial"), local("Liberation Sans");
  size-adjust: 93.83%;
  ascent-override: 106.36%;
  descent-override: 31.87%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "AGN Fallback Arial";
  font-style: normal;
  font-weight: 451 550;
  src: local("Arial"), local("Liberation Sans");
  size-adjust: 97.95%;
  ascent-override: 101.89%;
  descent-override: 30.53%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light dark;

  /* tokens.css §2: --chrome-* is Tailwind's neutral scale; --signal-* its blue; --danger-* its red */
  --chrome-50: oklch(98.5% 0 0);
  --chrome-100: oklch(97% 0 0);
  --chrome-200: oklch(92.2% 0 0);
  --chrome-300: oklch(87% 0 0);
  --chrome-400: oklch(70.8% 0 0);
  --chrome-500: oklch(55.6% 0 0);
  --chrome-700: oklch(37.1% 0 0);
  --chrome-800: oklch(26.9% 0 0);
  --chrome-900: oklch(20.5% 0 0);
  --chrome-950: oklch(14.5% 0 0);
  --signal-400: oklch(70.7% 0.165 254.624);
  --signal-600: oklch(54.6% 0.245 262.881);
  --danger-50: oklch(97.1% 0.013 17.38);
  --danger-400: oklch(70.4% 0.191 22.216);
  --danger-600: oklch(57.7% 0.245 27.325);
  --danger-700: oklch(50.5% 0.213 27.518);
  --danger-950: oklch(25.8% 0.092 26.042);

  /* tokens.css semantic layer */
  --background: light-dark(var(--chrome-50), var(--chrome-950));
  --card: light-dark(white, var(--chrome-900));
  --foreground: light-dark(var(--chrome-900), var(--chrome-100));
  --muted-foreground: light-dark(var(--chrome-700), var(--chrome-300));
  --faint-foreground: light-dark(var(--chrome-500), var(--chrome-400));
  --muted: light-dark(var(--chrome-100), var(--chrome-800));
  --accent: light-dark(var(--chrome-200), var(--chrome-700));
  --border: color-mix(in oklch, var(--foreground) 13%, transparent);
  --border-strong: color-mix(in oklch, var(--foreground) 23%, transparent);
  --ring: light-dark(var(--signal-600), var(--signal-400));
  --destructive: light-dark(var(--danger-600), var(--danger-400));
  --destructive-soft: light-dark(var(--danger-50), var(--danger-950));
  --status-warning: light-dark(oklch(55.5% 0.163 48.998), oklch(82.8% 0.189 84.429)); /* amber-700 / amber-400 */
  --radius-control: 0.5rem;
  --control-h: 2.75rem; /* tokens.css --control-h-comfortable: the smallest safe touch target */

  --font-sans:
    "akzidenz-grotesk-next-pro", "AGN Fallback HelveticaNeue", "AGN Fallback Roboto",
    "AGN Fallback Arial", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", "DejaVu Sans Mono", "Liberation Mono", monospace;
  --fw-regular: 400;
  --fw-medium: 500;

  /* The type roles the activation page uses (tokens.css §2): size, leading and tracking go together. */
  --fs-caption: 0.75rem;
  --lh-caption: 1.617;
  --tr-caption: 0.006em;
  --fs-body: 0.875rem;
  --lh-body: 1.521;
  --tr-body: 0.003em;
  --fs-body-lg: 1rem;
  --lh-body-lg: 1.62;
  --tr-body-lg: -0.008em;
  --fs-heading-lg: 1.5rem;
  --lh-heading-lg: 1.283;
  --tr-heading-lg: -0.012em;

  /* Keycloak v2 (PatternFly 5) reads these: point them at the tokens. */
  --pf-v5-global--FontFamily--text: var(--font-sans);
  --pf-v5-global--FontFamily--heading: var(--font-sans);
  --pf-v5-global--FontFamily--monospace: var(--font-mono);
  --pf-v5-global--FontWeight--normal: var(--fw-regular);
  --pf-v5-global--FontWeight--bold: var(--fw-medium);
  --pf-v5-global--link--Color: var(--foreground);
  --pf-v5-global--link--Color--hover: var(--foreground);
  --pf-v5-global--BackgroundColor--100: var(--card);
  --pf-v5-global--BackgroundColor--200: var(--muted);
  --pf-v5-global--Color--100: var(--foreground);
  --pf-v5-global--Color--200: var(--muted-foreground);
  --pf-v5-global--BorderColor--100: var(--faint-foreground);
  --pf-v5-global--danger-color--100: var(--destructive);
  --pf-v5-global--active-color--100: var(--foreground);
  --pf-v5-global--BorderRadius--sm: var(--radius-control);
}

/* A finger, not a pointer: the driver's tablet and every phone get the driver's 56px control
 * (tokens.css --control-h-driver) and 16px text. */
@media (pointer: coarse) {
  :root {
    --control-h: 3.5rem;
    --fs-body: 1rem;
    --lh-body: 1.62;
    --tr-body: -0.008em;
    --fs-caption: 0.875rem;
  }
}

/* PatternFly's own dark switch (a class template.ftl toggles) must not fight light-dark(). */
html.pf-v5-theme-dark {
  color-scheme: dark;
}

html,
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}

body#keycloak-bg {
  background: var(--background);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.innova-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- the page: /activation's column ------------------------------------------------------- */

.innova-page {
  min-height: 100dvh;
  display: flex;
}

.innova-main {
  box-sizing: border-box;
  width: 100%;
  max-width: 28rem; /* Tailwind max-w-md, as /activation */
  margin-inline: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
}
@media (min-width: 40rem) {
  .innova-main {
    padding: 2rem;
  }
}

.innova-header {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* The product name: a small muted line, not a logo and not capitals (activation.tsx). */
.innova-brand,
#kc-header-wrapper {
  margin: 0;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--tr-caption);
  font-weight: var(--fw-regular);
  color: var(--muted-foreground);
  text-transform: none;
  text-align: start;
  white-space: normal;
}

.innova-title,
#kc-page-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-heading-lg);
  line-height: var(--lh-heading-lg);
  letter-spacing: var(--tr-heading-lg);
  font-weight: var(--fw-medium);
  text-transform: none;
  color: var(--foreground);
  text-wrap: balance;
}

.innova-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.innova-body p,
.innova-body li {
  margin: 0;
  text-wrap: pretty;
}
.innova-body p {
  color: var(--muted-foreground);
}
.innova-body ol,
.innova-body ul {
  margin: 0;
  padding-inline-start: 1.25rem;
  color: var(--muted-foreground);
}
.innova-body li + li {
  margin-block-start: 0.5rem;
}
.innova-body li > ul,
.innova-body li > ol {
  margin-block-start: 0.25rem;
}
.innova-body li > ul > li + li {
  margin-block-start: 0.125rem;
}
/* The inner blocks of a page that Keycloak wraps in a div: the same rhythm as the page. */
#kc-logout-confirm,
#kc-info-message,
#kc-error-message {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#kc-totp-settings {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  list-style-position: outside;
}
#kc-totp-settings > li + li {
  margin-block-start: 0;
}
#kc-totp-settings > li > * + * {
  margin-block-start: 0.5rem;
}
#kc-totp-supported-apps {
  list-style: none;
  padding-inline-start: 0;
}

/* The recovery codes, two to a row as Keycloak lays them out. */
#kc-recovery-codes-list {
  columns: 2;
}
#certificate_subjectDN {
  overflow-wrap: anywhere;
}

.innova-required {
  font-size: var(--fs-caption);
}

b,
strong,
label,
.pf-v5-c-form__label-text,
.pf-v5-c-alert__title {
  font-weight: var(--fw-medium);
}

/* ---- links: the privacy link's treatment (activation.tsx), in the foreground ---------------- */

a,
a:visited {
  color: var(--foreground);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
@media (hover: hover) and (pointer: fine) {
  a:hover {
    color: var(--foreground);
    text-decoration-color: currentColor;
  }
}

.innova-footer {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--tr-caption);
  color: var(--muted-foreground);
}
.innova-footer nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.5rem;
}
.innova-footer a,
.innova-footer a:visited {
  color: var(--muted-foreground);
  text-decoration-color: var(--border);
  /* A finger finds a 12px line of text only if its target is taller: pad it, keep the look. */
  display: inline-block;
  padding-block: 0.5rem;
}
@media (hover: hover) and (pointer: fine) {
  .innova-footer a:hover {
    color: var(--muted-foreground);
    text-decoration-color: currentColor;
  }
}

/* ---- messages ----------------------------------------------------------------------------- */

.pf-v5-c-alert,
.innova-alert {
  --pf-v5-c-alert--BorderTopColor: transparent;
  --pf-v5-c-alert--BorderTopWidth: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  padding: 0.75rem 1rem;
  background: var(--muted);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  box-shadow: none;
}
.pf-v5-c-alert::before,
.pf-v5-c-alert::after {
  display: none; /* PatternFly's one-sided coloured stripe: not in this design system */
}
.pf-v5-c-alert.pf-m-danger {
  background: var(--destructive-soft);
  border-color: color-mix(in oklch, var(--destructive) 40%, transparent);
}
.innova-alert-icon {
  flex: none;
  margin-block-start: 0.1rem;
  color: var(--muted-foreground);
}
.pf-m-danger .innova-alert-icon {
  color: var(--destructive);
}
/* A required action (« Choisissez un mot de passe pour activer votre compte ») is a warning in
 * Keycloak's words and an instruction in ours: the amber of the status tokens, not the error red. */
.pf-m-warning .innova-alert-icon {
  color: var(--status-warning);
}
.pf-v5-c-alert .pf-v5-c-alert__title {
  padding: 0;
  color: var(--foreground);
  font-weight: var(--fw-regular);
  overflow-wrap: anywhere;
}
.pf-v5-c-alert .pf-v5-c-alert__icon {
  display: none; /* PatternFly's font icon: replaced by the inline SVG above */
}

/* ---- fields ------------------------------------------------------------------------------- */

form,
.pf-v5-c-form {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pf-v5-c-form__group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.pf-v5-c-form__group-label {
  padding: 0;
}
.pf-v5-c-form__label {
  display: block;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--foreground);
}
.pf-v5-c-form__label-required {
  color: var(--foreground);
  margin-inline-start: 0.125rem;
}

.pf-v5-c-form-control,
.pf-v5-c-form-control.pf-m-readonly {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--control-h);
  padding: 0;
  background: var(--card);
  color: var(--foreground);
  border: 1px solid var(--faint-foreground);
  border-radius: var(--radius-control);
  --pf-v5-c-form-control--before--BorderColor: transparent;
  --pf-v5-c-form-control--after--BorderWidth: 0;
}
.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
  display: none; /* PatternFly draws the field's border and its focus underline here; the box has its own */
}
.pf-v5-c-form-control > input,
.pf-v5-c-form-control > select,
.pf-v5-c-form-control > textarea {
  box-sizing: border-box;
  flex: 1;
  min-width: 0;
  min-height: calc(var(--control-h) - 2px);
  padding: 0 0.75rem;
  background: transparent;
  color: var(--foreground);
  border: 0;
  border-radius: inherit;
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg); /* 16px: a phone does not zoom the page when a field takes focus */
  font-weight: var(--fw-regular);
  line-height: 1.25;
}
.pf-v5-c-form-control > input:focus,
.pf-v5-c-form-control > input:focus-visible {
  outline: none; /* the box shows the one ring */
}
.pf-v5-c-form-control:focus-within,
.pf-v5-c-input-group:focus-within {
  outline: 2px solid var(--ring);
  outline-offset: 2px; /* tokens.css --focus-ring-width / --focus-ring-offset */
  border-radius: var(--radius-control);
}
/* A password field and its show button share one ring, drawn around both. */
.pf-v5-c-input-group .pf-v5-c-form-control:focus-within,
.pf-v5-c-input-group .pf-v5-c-button:focus-visible {
  outline: none;
}
.pf-v5-c-form-control.pf-m-readonly {
  background: var(--muted);
}
.pf-v5-c-form-control.pf-m-error,
.pf-v5-c-form-control:has(> input[aria-invalid="true"]) {
  border-color: var(--destructive);
}
.pf-v5-c-form-control__utilities {
  display: flex;
  align-items: center;
  padding-inline-end: 0.75rem;
  color: var(--destructive);
}

/* The error sits right under its field; a helper link (« Mot de passe oublié ? ») comes after it. */
.pf-v5-c-form__group > .pf-v5-c-form__group-label { order: 0; }
.pf-v5-c-form__group > .pf-v5-c-input-group,
.pf-v5-c-form__group > .pf-v5-c-form-control { order: 1; }
.pf-v5-c-form__group > .pf-v5-c-form__helper-text:has(.pf-m-error),
.pf-v5-c-form__group > .pf-v5-c-helper-text__item-text { order: 2; }
.pf-v5-c-form__group > .pf-v5-c-form__helper-text { order: 3; }

.pf-v5-c-form__helper-text {
  margin: 0;
  font-size: var(--fs-body);
}
.pf-v5-c-helper-text__item-text,
.kc-feedback-text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.pf-v5-c-helper-text__item.pf-m-error .pf-v5-c-helper-text__item-text,
.pf-m-error .pf-v5-c-helper-text__item-text,
.pf-m-error.kc-feedback-text {
  color: var(--destructive);
}

/* A password field with its show button: one box, two cells. */
.pf-v5-c-input-group {
  display: flex;
  align-items: stretch;
}
.pf-v5-c-input-group__item.pf-m-fill {
  flex: 1;
  min-width: 0;
}
.pf-v5-c-input-group__item.pf-m-fill > .pf-v5-c-form-control {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  border-inline-end-width: 0;
  height: 100%;
}
.pf-v5-c-input-group__item:not(.pf-m-fill) > .pf-v5-c-button {
  height: 100%;
  min-width: var(--control-h);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
}
html[dir="rtl"] .pf-v5-c-input-group__item:not(.pf-m-fill) > .pf-v5-c-button {
  border-radius: var(--radius-control) 0 0 var(--radius-control);
}

.pf-v5-c-check {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--control-h);
}
.pf-v5-c-check__label {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--foreground);
}
.pf-v5-c-check__input {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--foreground);
}

/* ---- buttons: the Button of @innova/ui — monochrome primary, grey secondary ----------------- */

.pf-v5-c-button,
button.pf-v5-c-button,
a.pf-v5-c-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--control-h);
  padding: 0 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.15;
  letter-spacing: var(--tr-body);
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 80ms ease;
}
.pf-v5-c-button::after {
  display: none; /* PatternFly draws the border with a pseudo-element; ours is on the box */
}
.pf-v5-c-button.pf-m-block {
  display: flex;
  width: 100%;
}

.pf-v5-c-button.pf-m-primary,
.pf-v5-c-button.pf-m-primary:visited {
  background: var(--foreground);
  color: var(--background);
}
.pf-v5-c-button.pf-m-primary:hover {
  background: color-mix(in oklab, var(--foreground) 90%, var(--background));
  color: var(--background);
}
.pf-v5-c-button.pf-m-primary:active {
  background: color-mix(in oklab, var(--foreground) 80%, var(--background));
}

.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-secondary:visited {
  background: var(--accent);
  color: var(--foreground);
}
.pf-v5-c-button.pf-m-secondary:hover {
  background: color-mix(in oklab, var(--accent) 80%, var(--background));
  color: var(--foreground);
}

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

.pf-v5-c-button.pf-m-link,
.pf-v5-c-button.pf-m-link:visited {
  background: transparent;
  color: var(--foreground);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
}

.pf-v5-c-button:disabled,
.pf-v5-c-button.pf-m-disabled {
  opacity: 0.5;
  cursor: default;
}

/* The invitation page (innova-invitation.ftl) puts two bare buttons in a form: dress them the same. */
form[action*="login-actions"] > button[type="submit"]:not(.pf-v5-c-button) {
  box-sizing: border-box;
  min-height: var(--control-h);
  width: 100%;
  padding: 0 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: var(--accent);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  cursor: pointer;
}
form[action*="login-actions"] > button[name="accept"][value="yes"] {
  background: var(--foreground);
  color: var(--background);
}

/* The one way forward on an information or error page (« Retour à l'application »): a real target. */
#kc-info-message p > a,
#kc-error-message p > a,
#kc-info-wrapper a:only-child {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--control-h);
  padding: 0 1rem;
  background: var(--accent);
  border-radius: var(--radius-control);
  text-decoration: none;
}
#kc-info-message p:has(> a),
#kc-error-message p:has(> a) {
  margin-block-start: 0.5rem;
}

/* ---- focus: tokens.css's one ring, for every control -------------------------------------- */

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
@media (forced-colors: active) {
  :focus-visible,
  .pf-v5-c-form-control:focus-within {
    outline-color: CanvasText;
  }
}

/* ---- two-factor setup, recovery codes, choices -------------------------------------------- */

#kc-totp-secret-qr-code {
  display: block;
  width: 11rem;
  height: 11rem;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.5rem;
  border-radius: var(--radius-control);
  background: white; /* a QR code needs a light ground to scan, in dark mode too */
}
#kc-totp-secret-key,
code,
kbd,
samp,
.kc-recovery-codes-list,
#kc-recovery-codes-list {
  font-family: var(--font-mono);
}
#kc-totp-secret-key {
  display: block;
  padding: 0.75rem;
  background: var(--muted);
  border-radius: var(--radius-control);
  color: var(--foreground);
  font-size: var(--fs-body-lg);
  overflow-wrap: anywhere;
  user-select: all;
}

.kc-recovery-codes-list,
#kc-recovery-codes-list {
  list-style: none;
  margin: 0;
  padding: 1rem;
  background: var(--muted);
  border-radius: var(--radius-control);
  color: var(--foreground);
}

/* Several ways to sign in, several authenticators: a column of large rows, like the kiosk's tasks. */
.pf-v5-c-data-list,
.select-auth-container {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 0;
  background: transparent;
}
.pf-v5-c-data-list__item {
  background: var(--card);
  border: 1px solid var(--faint-foreground);
  border-radius: var(--radius-control);
  min-height: var(--control-h);
}
.pf-v5-c-data-list__item::before {
  display: none;
}
.pf-v5-c-data-list__item:hover {
  background: var(--muted);
}
.pf-v5-c-data-list__item-row {
  min-height: var(--control-h);
  align-items: center;
}
.pf-v5-c-data-list__cell,
.select-auth-box-headline {
  color: var(--foreground);
  font-weight: var(--fw-medium);
}
.select-auth-box-desc {
  color: var(--muted-foreground);
  font-weight: var(--fw-regular);
}

.pf-v5-c-tile {
  background: var(--card);
  color: var(--foreground);
  border: 1px solid var(--faint-foreground);
  border-radius: var(--radius-control);
}
.pf-v5-c-tile::before,
.pf-v5-c-tile::after {
  display: none;
}
.pf-v5-c-tile.pf-m-selected {
  border-color: var(--foreground);
  outline: 1px solid var(--foreground);
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0;
}

/* ---- narrow screens and reduced motion ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}