/*
 * VERIDIA Wetstock: the sign-in screens.
 *
 * VERIDIA InsureX's login stylesheet (TBLDC/VERIDIA-Insurex,
 * infra/docker/keycloak-themes/veridia-insurex/login/resources/css/veridia.css), kept as it is, with
 * its reasons, so that the two applications' front doors are one design; then Wetstock's own: the
 * forecourt photograph in the panel, with the logo and copy over it, and the one-time code's boxes.
 * InsureX's panel (a drawn lattice and its copy) is the only part left out.
 *
 * Colours are InsureX's, copied by value from its console's tokens: the navy of the rail, the blue
 * of the primary action, and the inks measured for contrast. Wetstock adds one, `--wet-cool`, the
 * light blue of the headline's second line over the photograph.
 */

/*
 * ── The face, SHIPPED ─────────────────────────────────────────────────────────────────
 *
 * This theme asked for a typeface and shipped nothing. A machine that happened to have it
 * installed used it; everyone else — which on Windows and Android is nearly everyone — got
 * Segoe UI or Roboto. So the sign-in page and the console were visibly different products,
 * and the cause was invisible: the stack named the right face and no file backed it.
 *
 * One variable woff2, Latin subset, 44.6 KB. Google serves IBM Plex Sans as a variable font,
 * so a single file carries 400 and 600 rather than two files carrying one each — which is
 * why this costs about what one static weight would have.
 *
 * The cost was weighed rather than assumed. This is the ONE page every reader loads before
 * they can do anything, on a product specified to work at 150 kbps, where 44.6 KB is around
 * two and a half seconds on a first visit and nothing on every visit after. `font-display:
 * swap` means the form is readable immediately in the fallback and the face arrives when it
 * arrives; nobody waits on it to sign in.
 *
 * `font-weight: 400 600` is the variable range, not a typo. Declaring a range lets the
 * browser instance any weight between, and the two the design system uses are inside it.
 */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin.woff2') format('woff2');
  /*
   * Latin only. Portuguese needs ã õ ç é â ê ô à, all inside U+0000-00FF, so the extended
   * subsets Google also offers would be bytes this page never renders.
   */
  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

:root {
  --veridia-rail-base: #132038;
  --veridia-rail-raised: #1b2b49;
  --veridia-accent: #14459e;
  --veridia-accent-lift: #5b8dee;
  --veridia-ink: #eef1f6;
  --veridia-ink-muted: #9fb0c9;
  /*
   * #6d7f99 was the first value and it failed: measured on the live page it gave 3.89:1 on
   * the card and 3.98:1 on the rail, against the 4.5:1 WCAG AA asks for text this size. It
   * was carrying the descriptor, the support line and the colophon — three pieces of small
   * grey text, which is exactly where a palette quietly fails and nobody files a bug.
   * #7c8ca3 measures 4.64:1 on the card and 4.75:1 on the rail.
   */
  --veridia-ink-faint: #7c8ca3;
  --veridia-card: #16223a;
  --veridia-line: rgba(160, 185, 225, 0.16);
  --veridia-radius: 10px;
  /*
   * The same face the console loads, and now actually delivered — see the `@font-face`
   * above. IBM Plex Sans leads because it is the platform typeface as of 15 Sep 2026; the
   * rest of the stack is what renders in the moment before the file arrives, and on a
   * machine that blocks web fonts entirely.
   *
   * This read `'Inter', 'IBM Plex Sans', …` and shipped neither.
   */
  --veridia-font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
}

/*
 * The environment. Painted on `html` as well as `body` because PatternFly sets its own
 * background on the login body, and a page that is navy only down to the fold shows the
 * host's colour underneath on a tall screen.
 */
html,
body.veridia-login {
  background: var(--veridia-rail-base);
  color: var(--veridia-ink);
  font-family: var(--veridia-font);
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.veridia-shell {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 100vh;
}

/* ── The panel: the forecourt ──────────────────────────────────────────────────────── */

.veridia-panel {
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--veridia-line);
}

/* ── The authentication panel ───────────────────────────────────────────────────────── */

.veridia-auth {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(2rem, 4vw, 4rem) 1.5rem;
}

.veridia-card {
  width: 100%;
  max-width: 460px; /* §23 — 430–500px. */
  background: var(--veridia-card);
  border: 1px solid var(--veridia-line);
  border-radius: var(--veridia-radius);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.85);
}

/*
 * The descriptor under the logo on the card (phones): small, with the tracking eased, so it
 * reads as the subtitle it is rather than outweighing the name above it.
 */
.veridia-descriptor {
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--veridia-ink-faint);
}

.veridia-main-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

/*
 * The title carries `pf-v5-c-title pf-m-3xl` from the parent, which is 28px at 400 weight and
 * beat a single-class rule on specificity. The id is used deliberately so the size is settled
 * rather than dependent on stylesheet order, and `min-width: 0` lets it wrap beside the locale
 * control instead of pushing it off the card.
 */
/*
 * `--pf-v5-c-title--FontFamily` is Red Hat Display, and the heading was the one element on the
 * page still wearing Keycloak's brand face while everything around it took ours. Setting the
 * variable rather than the property means the title component keeps working as a component.
 */
.veridia-login .pf-v5-c-title {
  --pf-v5-c-title--FontFamily: var(--veridia-font);
}

.veridia-login #kc-page-title,
.veridia-login .veridia-title {
  margin: 0;
  min-width: 0;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: #fff;
}

/*
 * PatternFly's login LAYOUT, neutralised inside our card. `kcLoginContainer` is already off
 * the card (see template.ftl); these are the pieces that remain on the inner elements and
 * would otherwise contribute a second set of paddings on top of the card's own.
 */
.veridia-card .pf-v5-c-login__main,
.veridia-card .pf-v5-c-login__main-header,
.veridia-card .pf-v5-c-login__main-body,
.veridia-card .pf-v5-c-login__main-footer {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  border: 0;
}

/*
 * Scoped to `.veridia-card` so it outranks the neutralising rule above, which sets
 * `margin: 0` on this same element at two classes. Written flat, it lost, and the heading sat
 * hard against the first field label with no gap at all.
 */
.veridia-card .veridia-main-header {
  margin-bottom: 1.5rem;
}

.veridia-card .pf-v5-c-login__main-footer:empty {
  display: none;
}

/*
 * The locale switcher. Restyled, never removed: pt-MZ is primary and English is the
 * fallback, and a reader who needs the other one needs it on this page rather than after
 * signing in.
 */
.veridia-locale select {
  appearance: none;
  /* `background` and not `background-color`: PatternFly paints a caret as a background IMAGE
     on selects, and a colour alone leaves it drawn over our own arrowless control. */
  background: transparent none;
  border: 1px solid var(--veridia-line);
  border-radius: 6px;
  color: var(--veridia-ink-muted);
  font: inherit;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  /* Bounded so the language menu cannot crowd the heading beside it: at its natural width
     "Português (Moçambique)" took 162px of a 379px row. */
  max-width: 10rem;
  text-overflow: ellipsis;
}
.veridia-locale select option {
  color: #101720;
}

/* ── Form controls: PatternFly's components, driven by PatternFly's own variables ───── */

/*
 * The first draft of this block restyled PatternFly by out-specifying it — `border`,
 * `background`, `min-height` on `.pf-v5-c-form-control`. Opening the page showed why that
 * does not work: PatternFly v5 draws an input's box with TWO pseudo-elements (`::before` is
 * the 1px frame, `::after` the thick bottom accent), so a `border` on the element itself is
 * invisible underneath them, and every state — hover, focus, error, success, readonly,
 * disabled — is a separate rule that would each need out-specifying in turn.
 *
 * So this drives the variables the component reads instead. That is PatternFly's intended
 * extension point: set them once on the body scope and every state follows, including the
 * ones this theme never renders. The names below were read off the live page rather than
 * from documentation.
 *
 * WHERE these are set matters, and the first attempt got it wrong. PatternFly declares each
 * variable on the COMPONENT'S OWN selector (`.pf-v5-c-form-control { --...--BackgroundColor }`),
 * so the value is set on the element itself. A declaration on an ancestor — `.veridia-login`,
 * say — is only inherited, and an element's own declaration always wins over an inherited one
 * however far up the more general rule sits. The page looked untouched: PatternFly's warm grey
 * fields on a navy card. These therefore match the component selector, one class deeper.
 *
 * The neutral underline is switched off while the ERROR, SUCCESS and WARNING underlines are
 * left alone — hence the `:not()` chain below rather than a blanket zero. A field in error
 * still shows its red rule.
 */
.veridia-login .pf-v5-c-form-control {
  /* The field itself. */
  --pf-v5-c-form-control--BackgroundColor: rgba(9, 14, 24, 0.6);
  --pf-v5-c-form-control--Color: var(--veridia-ink);
  --pf-v5-c-form-control--FontSize: 0.9375rem;
  --pf-v5-c-form-control--PaddingTop: 0.625rem;
  --pf-v5-c-form-control--PaddingBottom: 0.625rem;
  --pf-v5-c-form-control--PaddingLeft: 0.75rem;
  --pf-v5-c-form-control--PaddingRight: 0.75rem;
  --pf-v5-c-form-control--m-placeholder--Color: var(--veridia-ink-faint);

  /* `::before` — the frame. PatternFly ships it transparent on all four sides. */
  --pf-v5-c-form-control--before--BorderTopColor: var(--veridia-line);
  --pf-v5-c-form-control--before--BorderRightColor: var(--veridia-line);
  --pf-v5-c-form-control--before--BorderLeftColor: var(--veridia-line);
  --pf-v5-c-form-control--before--BorderBottomColor: var(--veridia-line);
  --pf-v5-c-form-control--before--BorderBottomWidth: 1px;

  --pf-v5-c-form-control--m-disabled--BackgroundColor: #1b2740;
  --pf-v5-c-form-control--m-disabled--Color: var(--veridia-ink-faint);
  --pf-v5-c-form-control--m-readonly--BackgroundColor: #1b2740;

  border-radius: 8px;
  min-height: 44px;
}

/*
 * `::after` — the accent rule. Off at rest and on hover; focus is the outline ring below.
 * Excluded for the three status modifiers, which is how the red error rule and the green
 * success rule keep working: those are the one signal on this page a reader cannot afford to
 * lose to a restyle.
 */
.veridia-login .pf-v5-c-form-control:not(.pf-m-error):not(.pf-m-success):not(.pf-m-warning) {
  --pf-v5-c-form-control--after--BorderBottomWidth: 0;
  --pf-v5-c-form-control--after--BorderBottomColor: transparent;
  --pf-v5-c-form-control--hover--after--BorderBottomColor: transparent;
  --pf-v5-c-form-control--focus--after--BorderBottomWidth: 0;
}

/* Buttons. `BorderRadius` is 0 in PatternFly; the product's controls are rounded. */
.veridia-login .pf-v5-c-button {
  --pf-v5-c-button--BorderRadius: 8px;
  --pf-v5-c-button--FontSize: 0.9375rem;
  --pf-v5-c-button--FontWeight: 600;

  --pf-v5-c-button--m-primary--BackgroundColor: var(--veridia-accent);
  --pf-v5-c-button--m-primary--Color: #fff;
  --pf-v5-c-button--m-primary--hover--BackgroundColor: #1a53bd;
  --pf-v5-c-button--m-primary--hover--Color: #fff;
  --pf-v5-c-button--m-primary--focus--BackgroundColor: #1a53bd;
  --pf-v5-c-button--m-primary--focus--Color: #fff;
  --pf-v5-c-button--m-primary--active--BackgroundColor: #10387f;
  --pf-v5-c-button--m-primary--active--Color: #fff;

  --pf-v5-c-button--m-secondary--Color: var(--veridia-accent-lift);
  --pf-v5-c-button--m-secondary--after--BorderColor: var(--veridia-line);
  --pf-v5-c-button--m-secondary--hover--Color: var(--veridia-accent-lift);
  --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--veridia-accent-lift);
  --pf-v5-c-button--m-link--Color: var(--veridia-accent-lift);

  /*
   * `m-control` is the password visibility toggle sitting in the input group. PatternFly's
   * dark palette gives it #36373a — a warm grey that reads as a foreign part pasted onto the
   * card. It is made to match the field it belongs to.
   */
  --pf-v5-c-button--m-control--BackgroundColor: rgba(9, 14, 24, 0.6);
  --pf-v5-c-button--m-control--Color: var(--veridia-ink-muted);
  --pf-v5-c-button--m-control--hover--BackgroundColor: rgba(9, 14, 24, 0.9);
  --pf-v5-c-button--m-control--hover--Color: var(--veridia-ink);
  --pf-v5-c-button--m-control--focus--BackgroundColor: rgba(9, 14, 24, 0.9);
  --pf-v5-c-button--m-control--focus--Color: var(--veridia-ink);
  --pf-v5-c-button--m-control--active--BackgroundColor: rgba(9, 14, 24, 0.9);
  --pf-v5-c-button--m-control--active--Color: var(--veridia-ink);
  --pf-v5-c-button--m-control--after--BorderBottomColor: var(--veridia-line);
  --pf-v5-c-button--m-control--hover--after--BorderBottomColor: var(--veridia-line);
  --pf-v5-c-button--m-control--focus--after--BorderBottomColor: var(--veridia-accent-lift);
  --pf-v5-c-button--m-control--after--BorderTopColor: var(--veridia-line);
  --pf-v5-c-button--m-control--after--BorderRightColor: var(--veridia-line);
  --pf-v5-c-button--m-control--BorderRadius: 0;
}

/*
 * The input group: the field and its toggle are one control, so the rounding belongs to the
 * pair rather than to each. PatternFly rounds neither.
 */
.veridia-login .pf-v5-c-input-group__item:first-child .pf-v5-c-form-control {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.veridia-login .pf-v5-c-input-group__item:last-child .pf-v5-c-button.pf-m-control {
  border-start-end-radius: 8px;
  border-end-end-radius: 8px;
}

.veridia-login .pf-v5-c-form__label,
.veridia-login .pf-v5-c-form__label-text,
.veridia-login label {
  color: var(--veridia-ink-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

/*
 * Focus is a visible ring, not a removed outline. Drawn with `outline` rather than a border
 * change so it cannot be mistaken for hover, and so it survives forced-colours mode where a
 * box-shadow would not. PatternFly's own `--OutlineOffset: -2px` draws inside the control;
 * this sits outside it, where it is visible against the card.
 */
.veridia-login :is(input, select, button, a):focus-visible {
  outline: 2px solid var(--veridia-accent-lift);
  outline-offset: 2px;
  border-radius: 6px;
}

.veridia-login .pf-v5-c-check__label {
  color: var(--veridia-ink-muted);
  font-size: 0.875rem;
}

/* The primary action (§18) — full width and taller than PatternFly's default. */
.veridia-login .pf-v5-c-button.pf-m-primary,
.veridia-login input[type='submit'] {
  width: 100%;
  min-height: 46px;
  letter-spacing: 0.01em;
}

@media (prefers-reduced-motion: reduce) {
  .veridia-login * {
    transition: none !important;
    animation: none !important;
  }
}

.veridia-login a {
  color: var(--veridia-accent-lift);
  text-decoration: none;
}
.veridia-login a:hover {
  text-decoration: underline;
}

/* ── The alert (§27) ────────────────────────────────────────────────────────────────── */

/*
 * `min-height` rather than nothing: §27 asks that an error not shift the layout. Reserving the
 * space means the card is the same height before and after a failed attempt, so the button
 * does not move out from under a cursor that is already travelling towards it.
 */
.veridia-alert {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  margin: 0 0 1.25rem;
  padding: 0.75rem 0.875rem;
  border-radius: 8px;
  border: 1px solid;
  font-size: 0.875rem;
  line-height: 1.5;
}

.veridia-alert--error {
  background: rgba(180, 35, 45, 0.14);
  border-color: rgba(226, 90, 100, 0.45);
  color: #ffc9cd;
}

/*
 * PatternFly sets the alert's text in its status red at weight 900. Measured on the page that
 * is 4.64:1 — it passes, but it is the loudest thing on a screen whose whole manner is calm,
 * and a failed sign-in is not an emergency. The ICON keeps the status colour, because that is
 * what carries the meaning for anyone scanning rather than reading; the sentence is set in the
 * alert's own tint at a normal weight, which measures higher, not lower.
 */
.veridia-login .veridia-alert .pf-v5-c-alert__title,
.veridia-login .veridia-alert .kc-feedback-text {
  color: inherit;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.5;
}

.veridia-login .veridia-alert .pf-v5-c-alert__icon {
  color: #e25a64;
}
.veridia-login .veridia-alert--warning .pf-v5-c-alert__icon {
  color: #e9aa3c;
}
.veridia-login .veridia-alert--success .pf-v5-c-alert__icon {
  color: #46be82;
}
.veridia-login .veridia-alert--info .pf-v5-c-alert__icon {
  color: var(--veridia-accent-lift);
}
.veridia-alert--warning {
  background: rgba(170, 110, 20, 0.14);
  border-color: rgba(233, 170, 60, 0.4);
  color: #f6d9a5;
}
.veridia-alert--success {
  background: rgba(25, 120, 75, 0.14);
  border-color: rgba(70, 190, 130, 0.4);
  color: #b6ebd0;
}
.veridia-alert--info {
  background: rgba(20, 69, 158, 0.18);
  border-color: rgba(91, 141, 238, 0.4);
  color: #cfe0ff;
}

/* ── Assurance, support, colophon ───────────────────────────────────────────────────── */

.veridia-assurance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--veridia-ink-muted);
}

.veridia-assurance-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.veridia-assistance {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--veridia-line);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: center;
  color: var(--veridia-ink-faint);
}

/* §12 — present, and clearly subordinate. */
.veridia-colophon {
  margin: 0;
  font-size: 0.75rem;
  color: var(--veridia-ink-faint);
  text-align: center;
}

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

/* ── Responsive (§26) ───────────────────────────────────────────────────────────────── */

/*
 * The panel is DROPPED below the breakpoint rather than shrunk: the photograph is decoration,
 * and on a phone's data it is the first thing that should stop being downloaded. A background
 * image on an element that is `display: none` is never fetched.
 *
 * The brand, the descriptor, the controls and the colophon all survive, which is §26's list.
 */
@media (max-width: 1024px) {
  .veridia-shell {
    grid-template-columns: 1fr;
  }
  .veridia-panel {
    display: none;
  }
  .veridia-auth {
    min-height: 100vh;
  }
}

@media (max-width: 480px) {
  .veridia-card {
    padding: 1.5rem 1.25rem;
    border-radius: 0;
    /* No border at all, not just none at the sides: full-bleed, a remaining top rule reads as
       a stray line across the screen rather than as the edge of a card. */
    border: 0;
  }
  .veridia-auth {
    padding: 0 0 1.5rem;
  }
  .veridia-colophon {
    padding: 0 1.25rem;
  }
}

/*
 * Forced colours: keep the meaning, drop the decoration. A high-contrast reader gets the
 * system's palette, and the photograph, which carries no information, gets out of the way.
 */
@media (forced-colors: active) {
  .wet-panel {
    background-image: none;
  }
  .veridia-card {
    border: 1px solid CanvasText;
  }
}

/* ══ Wetstock ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* The headline's second line, over the photograph's sky: light enough to read on it. */
  --wet-cool: #8fd0ff;
  --wet-on-photo: #e6edf8;
}

/*
 * The panel: the forecourt at dusk, the copy over it. Shaded where the text sits (a soft dark
 * behind the logo and headline, which cross bright cloud, and a fade to navy under the
 * capabilities), and left alone in between, where the station and the sunset are.
 */
.wet-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  padding: clamp(2.5rem, 4.4vw, 4.5rem);
  background: #13274f url('../img/forecourt.jpg') 72% 58% / cover no-repeat;
}

.wet-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(85% 42% at 18% 30%, rgba(6, 16, 40, 0.62), rgba(6, 16, 40, 0) 100%),
    linear-gradient(
      to bottom,
      rgba(8, 20, 48, 0.6) 0%,
      rgba(8, 20, 48, 0.42) 34%,
      rgba(8, 20, 48, 0.12) 50%,
      rgba(8, 20, 48, 0) 60%,
      rgba(8, 20, 48, 0) 72%,
      rgba(6, 12, 28, 0.75) 100%
    );
}

.wet-top,
.wet-caps {
  position: relative;
}

.wet-top {
  text-shadow: 0 1px 18px rgba(4, 10, 26, 0.55);
}

.wet-logo {
  display: block;
  height: 64px;
  width: auto;
}

.wet-descriptor {
  margin: 0.85rem 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c3d0e4;
}

.wet-rule {
  width: 44px;
  height: 2px;
  margin: 2.4rem 0 1.5rem;
  border-radius: 2px;
  background: var(--wet-cool);
}

.wet-headline {
  margin: 0 0 1.1rem;
  font-size: clamp(2.1rem, 3.3vw, 3.2rem);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: #fff;
}

.wet-headline span {
  display: block;
  color: var(--wet-cool);
}

.wet-support {
  margin: 0;
  max-width: 30rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--wet-on-photo);
}

.wet-caps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wet-caps li {
  padding: 0 1rem;
  border-left: 1px solid rgba(200, 220, 255, 0.18);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--wet-on-photo);
}

.wet-caps li:first-child {
  padding-left: 0;
  border-left: 0;
}

.wet-caps li::before {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  margin-bottom: 1rem;
  background: var(--wet-cool);
  opacity: 0.7;
}

.wet-caps svg {
  display: block;
  width: 24px;
  height: 24px;
  margin-bottom: 0.7rem;
  color: var(--wet-cool);
}

/* The logo is on the photograph where there is one, and on the card where there is not. */
.wet-card-brand {
  display: none;
}

/* A field's label clear of the field, and of the focus ring drawn 2px outside it. */
.veridia-login .pf-v5-c-form__group-label {
  padding-bottom: 0.45rem;
}

.wet-hint {
  margin: 1.25rem 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--veridia-ink-muted);
}

.veridia-assistance .wet-privacy {
  display: inline-block;
  margin-top: 0.5rem;
}

/* ── The one-time code, one digit to a box (js/otp-boxes.js) ───────────────────────── */

.wet-otp {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}

.wet-otp-digit {
  width: 100%;
  min-width: 0;
  max-width: 3.25rem;
  height: 3.5rem;
  padding: 0;
  border: 1px solid var(--veridia-line);
  border-radius: 8px;
  background: rgba(9, 14, 24, 0.6);
  color: var(--veridia-ink);
  font: 600 1.5rem/1 var(--veridia-font);
  font-variant-numeric: tabular-nums;
  text-align: center;
  caret-color: var(--veridia-accent-lift);
}

.wet-otp-digit:focus {
  border-color: var(--veridia-accent-lift);
}

.wet-otp-digit--error {
  border-color: rgba(226, 90, 100, 0.7);
  box-shadow: inset 0 -2px 0 #e25a64;
}

.wet-otp[aria-busy='true'] .wet-otp-digit {
  opacity: 0.6;
}

/* Keycloak's own field, still in the form and still posted, out of sight. */
.wet-otp-source {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap;
  border: 0 !important;
}

@media (max-width: 1024px) {
  .wet-panel {
    display: none;
  }
  .wet-card-brand {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--veridia-line);
  }
  .wet-card-brand img {
    align-self: flex-start;
    height: 54px;
    width: auto;
  }
}

@media (max-width: 380px) {
  .wet-otp {
    gap: 0.35rem;
  }
  .wet-otp-digit {
    height: 3rem;
    font-size: 1.25rem;
  }
}