/*
 * Alpamayo/PREKIT brand layer for the Keycloak login theme (parent=keycloak.v2).
 *
 * This file is loaded *after* keycloak.v2's own login stylesheet, because
 * theme.properties declares `styles=css/styles.css css/prekit.css` and this
 * theme ships no styles.css of its own, so that first entry resolves up the
 * inheritance chain to the parent's file. The stock v2 sheet therefore still
 * does the layout work (login card grid, logo hook, tooltip, recovery-code
 * columns, social-provider icon handling) and everything below is a brand
 * override on top of it. See theme.properties for why this file must not be
 * renamed to styles.css.
 *
 * Rebranding is done through PatternFly v5's own design tokens wherever one
 * exists, rather than by restyling component selectors. PatternFly resolves
 * those tokens per point release, so a token override survives PatternFly
 * changing the markup or the rule that consumes it; a selector override does
 * not. Component selectors below are only used where PatternFly ships no token
 * for the thing that needed changing, or where a token is declared on the
 * component rather than on the document root and therefore cannot be
 * overridden from there.
 *
 * The palette below is the Alpamayo digital colour mapping, the same one the
 * Workbench UI resolves through @alpamayo-solutions/design's tokens.css. It is
 * duplicated here because a Keycloak theme is a static server-side asset that
 * cannot import the design package at runtime. If the palette changes, mirror
 * the edit here and in the account and admin stylesheets in the same commit.
 *
 * WHITELABEL. The first token block below is regenerated verbatim by
 * node_manager.generators.branding.generate_keycloak_css when a deployment
 * sets `branding.color_*`: it replaces the first `:root` block in this file
 * with the customer's ramps. Everything after that block is expressed as
 * var() over those ramp steps and never as a literal colour, so a whitelabel
 * swap carries the dark scheme and every PatternFly mapping with it. Adding a
 * literal colour below the first block silently breaks that.
 *
 * SCOPE. Covered: the sign-in screen, e-mail verification, password reset and
 * update, the alert/callout states those screens raise (including a failed
 * sign-in), and the shared card/header/form/button/input/link chrome every
 * other login-flow screen is built from, in both colour schemes.
 *
 * The sign-in screen's ORDER is login.ftl's, not this file's: with an
 * identity provider configured, its button is the primary action and the
 * username/password form is folded behind a disclosure (see the
 * "Identity-provider-first sign-in" section at the end of this file).
 *
 * Left deliberately stock:
 *   - The multi-credential screens: "try another way", select-authenticator,
 *     OTP, WebAuthn/passkeys, recovery codes. They inherit the card, button,
 *     input and alert treatment below; their own list/tile chrome is v2 stock.
 *   - The success, warning and info alert variants. Only danger gets a brand
 *     colour, because the branding generator's ramps carry no success/warning/
 *     info entries and guessing at them is worse than letting PatternFly's own
 *     semantic colours stand.
 *
 * Hidden on purpose: the locale selector (see the rule near the header below
 * and ../README.md).
 */

/* Poppins, self-hosted and subset to latin + latin-ext — Keycloak often runs
   with no outbound internet, so this must never point at Google Fonts. */
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* The Alpamayo palette (light). Regenerated as a whole by the branding
   generator — see WHITELABEL in the header. Keep the shape of this block
   identical to generate_keycloak_css's output. */
:root {
  /* Primary Colors */
  --primary-50: #eef6fb;
  --primary-100: #d7ebf7;
  --primary-200: #afd8ef;
  --primary-300: #88c4e8;
  --primary-400: #53abdd;
  --primary-500: #134461;
  --primary-600: #0f374e;
  --primary-700: #0c2c3f;
  --primary-800: #092230;
  --primary-900: #05141d;
  --primary-950: #030c11;
  --primary: #134461;
  --primary-contrast: #ffffff;
  --primary-emphasis: #05141d;

  /* Secondary Colors */
  --secondary-50: #fef6f4;
  --secondary-100: #fdeae6;
  --secondary-200: #fcd6cd;
  --secondary-300: #fbc2b5;
  --secondary-400: #f9a794;
  --secondary-500: #f55632;
  --secondary-600: #e1320a;
  --secondary-700: #b62908;
  --secondary-800: #8c1f06;
  --secondary-900: #541204;
  --secondary-950: #320b02;
  --secondary: #f55632;
  --secondary-contrast: #000000;
  --secondary-emphasis: #541204;

  --surface-50: #f8f8f9;
  --surface-100: #efeff2;
  --surface-200: #dfe0e6;
  --surface-300: #cfd1da;
  --surface-400: #babcca;
  --surface-500: #7b8099;
  --surface-600: #60647d;
  --surface-700: #4e5166;
  --surface-800: #3c3f4e;
  --surface-900: #24252f;
  --surface-950: #15161c;
  --surface: #7b8099;
  --surface-contrast: #000000;
  --surface-emphasis: #24252f;
  --surface-0: #ffffff;

  --danger-50: #fef2f2;
  --danger-100: #fee2e2;
  --danger-200: #fecaca;
  --danger-300: #fca5a5;
  --danger-400: #f87171;
  --danger-500: #ef4444;
  --danger-600: #dc2626;
  --danger-700: #b91c1c;
  --danger-800: #991b1b;
  --danger-900: #7f1d1d;
  --danger-950: #450a0a;
  --danger-contrast: #ffffff;
  --danger-emphasis: #450a0a;
  --danger-default: #ef4444;

  --keycloak-logo-url: url("../img/logo.webp");
  --keycloak-logo-height: 45px;
  --keycloak-logo-width: 100%;

  --border-radius: 6px;
}

/*
 * The roles the rest of this file is written against, named once so both
 * colour schemes are settled from one place. Every value is a var() over a
 * ramp step from the block above, so a whitelabel swap moves these too.
 *
 * The primary button takes --primary-500, the same pairing the Workbench uses
 * (--p-primary-color = --primary-500, contrast = --surface-0): 10.1:1 against
 * white. Alpamayo orange stays where the design system puts it — an accent,
 * here the 4px rule along the top of the card — and is never a control
 * surface: #f55632 under white text measures 3.3:1, below the 4.5:1 a button
 * label needs.
 *
 * --danger-role is --danger-600 rather than --danger-500 for the same reason:
 * PatternFly renders "Invalid username or password." and the field-level
 * validation messages in this colour, and #ef4444 on white measures 3.8:1
 * while #dc2626 measures 4.8:1.
 */
:root {
    --brand-primary: var(--primary-500);
    /* One step lighter, as the Workbench's primary hover
       (--color-primary-emphasis) and the account console's: the darker
       --primary-600 reads as a black button beside a resting one. */
    --brand-primary-hover: var(--primary-400);
    --brand-primary-contrast: var(--primary-contrast);
    --brand-accent: var(--secondary-500);
    --brand-danger: var(--danger-600);

    /* The page sits a step lighter than it used to: the card is what should
       carry the eye, and a near-white blue-tinted ground lets a 1px border do
       the separating instead of a grey contrast step. */
    --brand-page: var(--surface-50);
    --brand-card: var(--surface-0);

    /* The card corner. Not --border-radius: that token is a CONTROL radius and
       `prekit apply-branding` rewrites the whole first :root block, which would
       silently revert anything about the card put there. */
    --card-radius: 12px;
    --brand-divider: var(--surface-200);
    --brand-border: var(--surface-300);
    --brand-text: var(--surface-700);
    --brand-text-muted: var(--surface-600);

    /* The input fill. Light mode matches the card and relies on the border to
       separate the two, which is how the design system draws its inputs. Dark
       mode cannot do that — a fill identical to the card leaves the field
       readable only by its outline — so it lifts one step off the card. */
    --brand-input: var(--surface-0);

    /* keycloak.v2's own stylesheet declares and consumes these three, so
       redefining them here rebrands the logo and the card's accent rule
       without this theme owning any of the surrounding layout. */
    /* No accent rule along the card's top edge. It was the loudest thing on a
       page whose job is one form, and it is the detail that dated the screen;
       the logo above the card already carries the brand. The token stays
       declared because keycloak.v2's stylesheet consumes it unconditionally —
       leaving it undefined would fall back to PatternFly's own colour rather
       than to nothing. */
    --keycloak-card-top-color: transparent;
}

/*
 * The dark palette. keycloak.v2 sets darkMode=true and its template.ftl
 * toggles `pf-v5-theme-dark` on <html> from prefers-color-scheme, so a viewer
 * on a dark OS gets a login page that matches the Workbench it hands them to
 * rather than a light page in front of a dark one. The roles below are the
 * same ramps read from the other end, mirroring the dark block in
 * @alpamayo-solutions/design's tokens.css.
 *
 * Specificity here is not accidental. PatternFly declares its own dark palette
 * as `:where(.pf-v5-theme-dark) { … }`, which scores zero, so a plain `:root`
 * declaration would win over it in dark mode too. `:root.pf-v5-theme-dark`
 * scores above both and is the reason this block takes effect. It is also why
 * every PatternFly token further down is mapped to a --brand-* role rather
 * than to a literal: a literal would leak into dark mode.
 */
:root.pf-v5-theme-dark {
    /* tokens.css maps dark primary to --primary-400 over --surface-900 text.
       That pairing measures 3.3:1, below the 4.5:1 a button label needs, and
       the submit button is the one control on this page a person has to be
       able to read. Dark primary is therefore lifted two steps to
       --primary-300 (6.8:1 over --surface-900), still a step of the same ramp
       and still the "light fill, dark label" shape the Workbench uses. */
    --brand-primary: var(--primary-300);
    --brand-primary-hover: var(--primary-200);
    --brand-primary-contrast: var(--surface-900);

    /* Unchanged: the orange in the logomark does not change between schemes,
       and it is only ever a decorative accent here, never text or a control. */
    --brand-accent: var(--secondary-500);

    /* Lifted two steps for the same contrast reason as the primary: #dc2626
       on a dark card measures 3.0:1, #f87171 measures 5.8:1. */
    --brand-danger: var(--danger-400);

    /* The page is the Workbench's own dark background (--primary-900); the
       card sits one step lighter on the surface ramp, and the input one step
       lighter again, so each stays readable against the one behind it. */
    --brand-page: var(--primary-900);
    --brand-card: var(--surface-900);
    --brand-divider: var(--surface-800);
    --brand-border: var(--surface-600);
    --brand-text: var(--surface-0);
    --brand-text-muted: var(--surface-400);
    --brand-input: var(--surface-800);

    /* logo.webp's wordmark is near-black and would disappear against a dark
       page. logo_dark.webp is the same artwork with the white wordmark. */
    --keycloak-logo-url: url("../img/logo_dark.webp");
}

/*
 * PatternFly v5 global tokens. Everything here is a var() over a --brand-*
 * role, which is what makes the dark scheme fall out of the block above rather
 * than needing a second set of overrides.
 *
 * Several tokens are set twice, once as the plain name and once as the
 * `--dark-*` / `--light-*` variant. That is not redundancy. PatternFly resets
 * this group of globals to their variant form on a list of components that
 * always sit on a light surface — the list includes .pf-v5-c-form-control and
 * .pf-v5-c-alert, both of which this page uses:
 *
 *   .pf-v5-c-accordion, .pf-v5-c-alert, …, .pf-v5-c-form-control, …
 *     { --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100); … }
 *
 * Overriding only the plain name therefore leaves inputs and alerts on stock
 * PatternFly colours. The variant names carry the same meaning in brand terms
 * — `--Color--dark-100` is "body text on a light surface" — so both get the
 * same role.
 */
:root {
    --pf-v5-global--FontFamily--text: 'Poppins', system-ui, sans-serif;
    --pf-v5-global--FontFamily--text--vf: 'Poppins', system-ui, sans-serif;
    --pf-v5-global--FontFamily--heading: 'Poppins', system-ui, sans-serif;
    --pf-v5-global--FontFamily--heading--vf: 'Poppins', system-ui, sans-serif;

    /* --primary-color--100 is what PatternFly resolves for the primary and
       secondary buttons, the focus underline on inputs and the active state;
       --300 is the variant its dark button block switches to. Setting all
       three to the same role keeps both schemes on one definition. */
    --pf-v5-global--primary-color--100: var(--brand-primary);
    --pf-v5-global--primary-color--dark-100: var(--brand-primary);
    --pf-v5-global--primary-color--200: var(--brand-primary-hover);
    --pf-v5-global--primary-color--300: var(--brand-primary);
    --pf-v5-global--active-color--100: var(--brand-primary);

    /* --100 is the danger fill (icons, the error underline on a field); --200
       is the darker variant PatternFly uses for danger *text*, which is what
       "Invalid username or password." and the field-level validation messages
       are rendered in. Both take the single danger role. */
    --pf-v5-global--danger-color--100: var(--brand-danger);
    --pf-v5-global--danger-color--200: var(--brand-danger);

    --pf-v5-global--Color--100: var(--brand-text);
    --pf-v5-global--Color--dark-100: var(--brand-text);
    --pf-v5-global--Color--200: var(--brand-text-muted);
    --pf-v5-global--Color--dark-200: var(--brand-text-muted);

    --pf-v5-global--BorderColor--100: var(--brand-border);
    --pf-v5-global--BorderColor--dark-100: var(--brand-border);
    --pf-v5-global--BorderColor--300: var(--brand-border);

    --pf-v5-global--BackgroundColor--100: var(--brand-card);
    --pf-v5-global--BackgroundColor--light-100: var(--brand-card);

    /* Links on this page are body-coloured and semibold rather than a separate
       accent, and shift toward the primary on hover — the same treatment the
       design system gives inline links. */
    --pf-v5-global--link--Color: var(--brand-text);
    --pf-v5-global--link--Color--dark: var(--brand-text);
    --pf-v5-global--link--Color--hover: var(--brand-primary);
    --pf-v5-global--link--Color--dark--hover: var(--brand-primary);

    /* PatternFly's 3px corner is sharper than the design system's 6px. */
    --pf-v5-global--BorderRadius--sm: var(--border-radius);
}

/*
 * keycloak.v2's page background is a full-bleed Keycloak illustration. PREKIT
 * uses a flat surface, so this replaces the whole shorthand rather than
 * blanking the parent's --keycloak-bg-logo-url, which would leave the rest of
 * the shorthand (fixed attachment, cover sizing) in place for no reason.
 */
.login-pf body {
    background: var(--brand-page);
    height: 100%;
}

/*
 * The card. PatternFly gives the login card a shadow but no corner radius; the
 * design system rounds its cards.
 */
.pf-v5-c-login__main {
    border-radius: var(--card-radius);
    overflow: hidden; /* so the card's contents follow the rounded corners */
    border: 1px solid var(--brand-divider);
    /* Softer and wider than PatternFly's, which is a tight dark drop. The card
       should read as lifted off the page, not stamped onto it. */
    box-shadow: 0 1px 2px rgb(2 13 28 / 4%), 0 8px 24px rgb(2 13 28 / 6%);
}

/*
 * The card fill. PatternFly's dark theme points the login card at its own
 * neutral grey (--BackgroundColor--300, #26292d), a different colour family
 * from the Alpamayo surface ramp, which leaves a warm-grey card sitting on a
 * navy page. Naming the brand surface here settles both schemes from one
 * declaration; the token is declared on .pf-v5-c-login, which is the element
 * PatternFly declares it on.
 */
.pf-v5-c-login {
    --pf-v5-c-login__main--BackgroundColor: var(--brand-card);
}

.pf-v5-c-login__main-footer-band {
    --pf-v5-c-login__main-footer-band--BorderTopColor: var(--brand-divider);
}

/*
 * The realm's displayNameHtml lands in this element, and keycloak.v2 styles it
 * for its own dark photographic background: 29px, uppercase, letter-spaced and
 * white with !important. The PREKIT page is a flat surface, so white text here
 * is invisible in the light scheme.
 *
 * With the realm templates' default displayNameHtml — `<div
 * class="kc-logo-text"><span>PREKIT</span></div>` — this is moot, because the
 * span is hidden and the logo is a background image. It matters for a
 * deployment that sets branding.login_tagline: the realm then adds
 * `prekit-tagline` to that div and the text is shown under the logo (see the
 * "Header" section at the end of this file).
 */
#kc-header-wrapper {
    color: var(--brand-text) !important;
    text-transform: none;
    letter-spacing: normal;
    font-size: 1.25rem;
}

/*
 * keycloak.v2 forces the desktop main header into a 70/30 grid while the
 * locale selector remains a full-width form control. Depending on the
 * inherited PatternFly grid areas, that control can take most of the row and
 * squeeze translated page titles down to a few characters per line. Keep the
 * title and locale in document order instead: the title gets the full card
 * width and the compact locale control sits below it, aligned to the end.
 * Screens without a locale selector keep a single-row header because flex gap
 * only applies between children.
 */
div.pf-v5-c-login__main-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--pf-v5-global--spacer--md, 1rem);
}

/*
 * The language dropdown. The prekit realm speaks English and German and picks
 * one from the browser's Accept-Language; keycloak.v2 renders this selector
 * whenever a realm supports more than one locale. A sign-in page follows the
 * browser and offers no choice, so the selector's container is not shown.
 */
.pf-v5-c-login__main-header-utilities {
    display: none;
}

/*
 * Form controls. --FontSize is declared by PatternFly on .pf-v5-c-form-control
 * itself rather than on the document root, so it can only be overridden on the
 * component.
 */
.pf-v5-c-form-control {
    --pf-v5-c-form-control--FontSize: 0.9rem;
    --pf-v5-c-form-control--Color: var(--brand-text);
    --pf-v5-c-form-control--BackgroundColor: var(--brand-input);
}

/*
 * The page heading and the field labels. PatternFly sets no colour on either,
 * so both fall back to the browser's default text colour: black on a light
 * scheme and white on a dark one, because PatternFly's dark theme also sets
 * `color-scheme: dark`. Readable in both, but neither is the brand body colour.
 */
#kc-page-title,
.pf-v5-c-form__label-text {
    color: var(--brand-text);
}

/*
 * Keyboard focus on a field. PatternFly marks focus with a 2px underline in
 * the primary colour and leaves the ring itself to the browser, so the first
 * field on the sign-in page — which carries autofocus, and therefore matches
 * :focus-visible on load — draws the browser's own accent ring: #005fcc in a
 * light scheme, #99c8ff in a dark one. Neither is an Alpamayo colour and it is
 * the first thing on the page. The offset is negative so the ring sits inside
 * the control's rounded corners, matching PatternFly's own --OutlineOffset.
 */
.pf-v5-c-form-control > :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: -2px;
}

/* "Remember me", and the "sign out other sessions" box on the update-password
   screen. Left alone these are checked in the browser's accent colour. */
.pf-v5-c-check__input {
    accent-color: var(--brand-primary);
}

/*
 * The primary button — the submit control on sign-in, reset and verify.
 * PatternFly declares its background and text colour on .pf-v5-c-button, and
 * its dark theme re-declares both at the same specificity, so a document-root
 * override cannot reach them in both schemes. Declaring them on
 * .pf-v5-c-button.pf-m-primary scores above both and covers light and dark
 * from one place.
 */
.pf-v5-c-button.pf-m-primary {
    --pf-v5-c-button--m-primary--BackgroundColor: var(--brand-primary);
    --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--brand-primary-hover);
    --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--brand-primary-hover);
    --pf-v5-c-button--m-primary--active--BackgroundColor: var(--brand-primary-hover);
    --pf-v5-c-button--m-primary--Color: var(--brand-primary-contrast);
}

/*
 * The password show/hide button, which PatternFly renders as a `pf-m-control`
 * button inside the same input group as the field. Its dark fill is a
 * PatternFly grey that no longer matches the input beside it once the input
 * takes the brand fill above, so both are driven from the same role.
 */
.pf-v5-c-button.pf-m-control {
    --pf-v5-c-button--m-control--BackgroundColor: var(--brand-input);
    --pf-v5-c-button--m-control--hover--BackgroundColor: var(--brand-input);
    --pf-v5-c-button--m-control--focus--BackgroundColor: var(--brand-input);
    --pf-v5-c-button--m-control--active--BackgroundColor: var(--brand-input);
}

.pf-v5-c-button:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/*
 * "Forgot password?", "Back to Login" and the other in-flow links. PatternFly's
 * own colour token is set above; the weight is what separates them from body
 * text, since these links are not a contrasting colour.
 */
.pf-v5-c-login__main-body a,
.pf-v5-c-login__main-footer a {
    font-weight: 600;
}

/*
 * The instruction paragraph on the e-mail-verification and information screens.
 * Those templates come from base/login rather than keycloak.v2, and base marks
 * the paragraph with a bare `instruction` class that no PatternFly rule
 * matches, so it renders with the browser's default heading-sized margins.
 */
.pf-v5-c-login__main-body p.instruction {
    margin: 0 0 var(--pf-v5-global--spacer--md, 1rem);
    color: var(--brand-text);
}

/*
 * Cancel and resend buttons on the screens that come from base/login rather
 * than keycloak.v2 — e-mail verification and update-profile among them. Those
 * templates ask for kcButtonDefaultClass and kcButtonLargeClass, neither of
 * which keycloak.v2 defines, so the button renders with `pf-v5-c-button` and
 * no modifier at all: PatternFly styles only the box, and the colours fall
 * through to the browser's own button chrome. In a dark scheme that is
 * grey-on-grey and close to unreadable. Giving these the secondary treatment
 * is what the same buttons would have had if keycloak.v2 shipped its own copy
 * of the templates.
 */
.pf-v5-c-login__main .pf-v5-c-button:not(.pf-m-primary, .pf-m-secondary, .pf-m-link, .pf-m-control) {
    background-color: transparent;
    color: var(--brand-primary);
    border: 1px solid var(--brand-primary);
    border-radius: var(--border-radius);
}

.pf-v5-c-login__main .pf-v5-c-button:not(.pf-m-primary, .pf-m-secondary, .pf-m-link, .pf-m-control):hover {
    color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}

/*
 * The mobile treatment: the card keeps a 16px inset from both screen edges
 * rather than going flush, so the logo, headings, messages, inputs and actions
 * stay aligned when Safari zooms a focused input. The inset is applied to the
 * outer container, not to individual fields. Nothing else about the login
 * column is touched — keycloak.v2 sizes it with a fixed
 * `grid-template-columns: 34rem` that shrinks to the container below that
 * width on its own.
 */
@media (max-width: 400px) {
    .pf-v5-c-login__container {
        padding-inline: 16px;
    }
}

/*
 * ---------------------------------------------------------------------------
 * Sign-in page shape
 * ---------------------------------------------------------------------------
 *
 * Brings the login page to the same shape the Alpamayo Intelligence sign-in
 * uses: a near-white page, one rounded card carrying a soft shadow, softly
 * rounded controls, and no page heading — the form is self-evidently a sign-in
 * form, and the logo above the card already says whose.
 *
 * Everything here is chrome. The fields, their order, the language selector
 * and the reset-password link are left exactly as Keycloak renders them: they
 * are function, and this is a restyle.
 */

/* Controls: rounder than the 6px control radius, matching the reference. */
.pf-v5-c-form-control,
.pf-v5-c-form-control > input,
.pf-v5-c-form-control > select,
.pf-v5-c-button {
    border-radius: 8px;
}

/*
 * The heading ("Sign in to your account"). Hidden from view, NOT removed: it
 * is the page's only h1, so `display: none` would take the document's heading
 * structure with it and leave a screen-reader user on an unnamed page. This is
 * the standard visually-hidden clip instead.
 */
#kc-page-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/*
 * The help line under the card, as on the reference page.
 *
 * Rendered from CSS because keycloak.v2's template has no slot beneath the
 * card and this is brand chrome rather than content — the alternative is
 * forking template.ftl and owning that fork across Keycloak upgrades for one
 * sentence. It is decorative to assistive technology (no `content` is exposed
 * as text by any screen reader worth the name), which is the right weight for
 * a line that tells a stuck user to phone someone.
 *
 * Localised by :lang(), which resolves against the `lang` attribute Keycloak
 * sets on <html> from the realm locale. English is the default and German
 * overrides it; a locale with no rule here simply shows the English line
 * rather than nothing.
 */
.pf-v5-c-login__main::after {
    content: "Trouble signing in? Contact your Alpamayo representative.";
    display: block;
    padding: 0 2rem 2rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--brand-text-muted);
}

:lang(de) .pf-v5-c-login__main::after {
    content: "Probleme bei der Anmeldung? Wenden Sie sich an Ihren Alpamayo-Kontakt.";
}

/*
 * The login column is deliberately NOT restated here.
 *
 * PatternFly's own rule puts the form in a left column and the brand in a
 * right one at >=1200px (`grid-template-areas: "main header" …`), which is a
 * product-marketing layout PREKIT has nothing to fill. keycloak.v2 already
 * overrides it — its stylesheet declares
 *
 *     .pf-v5-c-login__container { grid-template-columns: 34rem;
 *                                 grid-template-areas: "header" "main" }
 *
 * with no media query, at the same specificity as PatternFly's, and loads
 * after it. Source order therefore settles it: one 34rem column, logo above
 * the card, at every width. The grid areas themselves are already assigned by
 * PatternFly (`.pf-v5-c-login__header{grid-area:header}` and the matching
 * rules for __main and __footer), so nothing here needs to place them either.
 *
 * An earlier version of this file restated the grid as a single column with
 * `max-width: 480px` on the container. That reinstated nothing it needed to,
 * and the max-width collided with PatternFly's `padding-inline: 6.125rem` at
 * xl — leaving 284px of content box for a 34rem track, so the desktop card
 * rendered around 380px instead of 544px. The two-column split it was written
 * to fix was never reachable in the first place.
 *
 * If this page ever does need a different column, change it by naming
 * `--pf-v5-c-login__container--xl--GridTemplateColumns` rather than by
 * re-declaring the grid, and leave the container's max-width and inline
 * padding alone.
 */

/*
 * ---------------------------------------------------------------------------
 * Header: logo, and the deployment's tagline under it
 * ---------------------------------------------------------------------------
 *
 * keycloak.v2 hides the displayNameHtml text (`div.kc-logo-text span
 * { display: none }`) and sizes the div to the logo alone. A deployment that
 * sets `branding.login_tagline` gets `prekit-tagline` on that div from the
 * realm template, and only then is the text shown, in title size, below the
 * logo. Without a tagline the text is the app name, which the logo already
 * says, so it stays hidden.
 *
 * The logo keeps its own height (--keycloak-logo-height, its width following
 * its aspect ratio) at the top of the div; the tagline sits in the padding
 * below it, so a long tagline widens the header rather than shrinking the logo.
 */
div.kc-logo-text.prekit-tagline {
    width: auto;
    height: auto;
    padding-top: calc(var(--keycloak-logo-height) + 0.75rem);
    background-size: auto var(--keycloak-logo-height);
    background-position: center top;
}

div.kc-logo-text.prekit-tagline span {
    display: block;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--brand-text);
}

/*
 * ---------------------------------------------------------------------------
 * Identity-provider-first sign-in
 * ---------------------------------------------------------------------------
 *
 * login.ftl renders the identity-provider buttons first, as primary buttons,
 * then keycloak.v2's own "or" divider, then the username/password form inside
 * a native <details> disclosure (forced open after a failed sign-in). This
 * section styles that markup; without an identity provider none of it is
 * rendered and the form is keycloak.v2's.
 */
.prekit-idp-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pf-v5-global--spacer--sm, 0.5rem);
}

/* Scoped by the list so it outranks PatternFly's `.pf-v5-c-button.pf-m-block
   { display: block }`: under that rule the icon and label sat at the top of
   the button instead of on its centre line. */
.prekit-idp-list a.prekit-idp-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 2.75rem;
    font-weight: 600;
    text-decoration: none;
}

/* A monochrome four-tile mark for the Microsoft (Entra ID) provider, drawn in
   the button's own text colour so it follows both schemes. The realm template
   names that provider `microsoft`; any other provider shows its name only. */
.prekit-idp-icon {
    display: none;
}

#social-microsoft .prekit-idp-icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 21 21%27%3E%3Crect x=%271%27 y=%271%27 width=%279%27 height=%279%27/%3E%3Crect x=%2711%27 y=%271%27 width=%279%27 height=%279%27/%3E%3Crect x=%271%27 y=%2711%27 width=%279%27 height=%279%27/%3E%3Crect x=%2711%27 y=%2711%27 width=%279%27 height=%279%27/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 21 21%27%3E%3Crect x=%271%27 y=%271%27 width=%279%27 height=%279%27/%3E%3Crect x=%2711%27 y=%271%27 width=%279%27 height=%279%27/%3E%3Crect x=%271%27 y=%2711%27 width=%279%27 height=%279%27/%3E%3Crect x=%2711%27 y=%2711%27 width=%279%27 height=%279%27/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The disclosure. Its toggle is drawn as an outlined button so it reads as
   the secondary path next to the filled identity-provider button. */
summary.prekit-email-toggle {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    font-weight: 600;
    color: var(--brand-text);
}

summary.prekit-email-toggle::-webkit-details-marker {
    display: none;
}

summary.prekit-email-toggle:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

summary.prekit-email-toggle:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.prekit-email[open] summary.prekit-email-toggle {
    border-color: transparent;
}

/* Chevron drawn in CSS, so no icon font or inline SVG is needed. */
.prekit-email-chevron {
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid currentColor;
    transition: transform 0.2s;
}

.prekit-email[open] .prekit-email-chevron {
    transform: rotate(90deg);
}

.prekit-email-panel {
    padding-top: var(--pf-v5-global--spacer--md, 1rem);
}

@media (prefers-reduced-motion: reduce) {
    .prekit-email-chevron {
        transition: none;
    }
}

/*
 * Touch targets. On a phone the sign-in fields were 34 px high, the Sign in
 * button 36 px and "Remember me" a 13 px box (rounds 6 and 7). Every control
 * is at least 44 px on a coarse pointer AND on a phone-width screen: the
 * pointer query alone missed phones that report a fine pointer (and touch
 * emulation, which is how the round-7 check measured it). The fields and
 * buttons get it by their height, "Forgot password?" by its line, the
 * checkbox by a larger box inside a label row that is itself 44 px, so a tap
 * on the words checks it too.
 */
@media (pointer: coarse), (max-width: 40rem) {
    .pf-v5-c-form-control > input,
    .pf-v5-c-form-control > select,
    .pf-v5-c-button,
    summary.prekit-email-toggle {
        min-height: 44px;
    }

    .pf-v5-c-helper-text__item a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    label.pf-v5-c-check {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 44px;
        cursor: pointer;
    }

    .pf-v5-c-check__input {
        width: 22px;
        height: 22px;
        margin: 0;
    }

    .pf-v5-c-check__label {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}