/*
 * f022 tier 2 -- Bestiaire theme for the Authelia portal (4.39).
 * f029: Bestiaire v6 "plus pop", family `authelia` (the barn owl: blue foot
 * #00a4dc for action, green head #4cc38a for decoration).
 *
 * Linked into every portal page by the authelia-bestiaire nginx sidecar
 * (files/authelia/bestiaire-nginx.conf, switch: authelia_theme_css_enabled),
 * which also serves this file from the portal's own origin at
 * /_bestiaire/theme.css. Same elements, same order, Authelia's HTML untouched.
 *
 * What Authelia's CSP allows, and so what this file may use:
 *   - this file itself: style-src 'self';
 *   - fonts and images from the same origin only (font-src 'self'): no Google
 *     Fonts @import, no data: URI. Archivo is therefore self-hosted under
 *     /_bestiaire/fonts/ (bin/fetch-authelia-font, OFL-1.1).
 *   The v6 print motifs (halftone, rays) are CSS gradients only: no image,
 *   no new file. No two-colour band on any card (the user's decision,
 *   2026-09-26).
 *
 * Dark only: every built-in Authelia theme gets the dark Bestiaire palette
 * (the tokens block below), and tier 1 keeps `theme: dark`.
 *
 * Why it wins without !important: Authelia's stylesheet is Tailwind v4, whose
 * utilities live in cascade layers (@layer base/utilities); an unlayered rule
 * like every rule here beats any layered one, whatever its specificity.
 *
 * ⚠ It follows Authelia's internal markup (ids, data-slot / data-variant
 * attributes, a few Tailwind class tokens, and the child order of the stage
 * wrappers). Re-check the login page after an Authelia update; the worst case
 * is a portal that looks half-themed, never one that stops working: nothing
 * here hides or moves a control out of reach.
 */

/* ---- Archivo, self-hosted ---------------------------------------------------
 * The variable font, both axes: 400 to 900 and the 62.5% width of the display
 * titles all come from this one file. The latin subset only (unicode-range
 * below): anything outside it falls back to system-ui. swap: the stock font
 * shows while the 93 KiB load, never blank text on the login form. */

@font-face {
  font-family: "Archivo";
  src: url("/_bestiaire/fonts/archivo-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  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;
}

/* ---- Bestiaire v6, dark, family `authelia` ---------------------------------
 * Literal values of tokens.json v6. Prefixed --bst- so they can never collide
 * with Authelia's own tokens (it has an --accent of its own). */

:root {
  --bst-ground: #101010;
  --bst-surface: #1c1c1c;
  --bst-surface-raised: #262626;
  --bst-text: #f4efe4;
  --bst-text-soft: #b0aa9f;
  --bst-border: #34373b;
  --bst-edge: #34373b;
  --bst-line: #7a7f87;
  --bst-ink: #000000;
  --bst-on-fill: #101010;
  --bst-accent: #00a4dc;
  --bst-accent-text: #00a4dc;
  --bst-pop: #4cc38a;
  --bst-shade: #4cc38a;
  --bst-danger: #ff6b5e;
  --bst-danger-text: #ff6b5e;
  --bst-focus: #ffd23f;
  --bst-texture: #ffffff14;
  --bst-rays: #4cc38a59;
  --bst-shadow-sm: 3px 3px 0 var(--bst-line);
  --bst-shadow-action: 3px 3px 0 var(--bst-pop);
  --bst-shadow-md: 5px 5px 0 var(--bst-shade);
  --bst-shadow-lg: 8px 8px 0 var(--bst-shade);
  --bst-shadow-pop: 5px 5px 0 var(--bst-accent), 10px 10px 0 var(--bst-pop);
  --bst-shadow-pop-ring: 0 0 0 2px var(--bst-edge), 5px 5px 0 2px var(--bst-accent), 10px 10px 0 2px var(--bst-pop);
  --bst-display-shadow: .05em .05em 0 var(--bst-accent), .1em .1em 0 var(--bst-pop);
  --bst-ease: .12s ease-out;
}

/* ---- Authelia's tokens, the Bestiaire palette over every built-in theme -- */

html[data-theme],
html [data-theme] {
  --background: #101010;
  --foreground: #f4efe4;
  --card: #1c1c1c;
  --card-foreground: #f4efe4;
  --popover: #1c1c1c;
  --popover-foreground: #f4efe4;
  --primary: #00a4dc;
  --primary-foreground: #101010;
  --secondary: #4cc38a;
  --secondary-foreground: #101010;
  --muted: #262626;
  --muted-foreground: #b0aa9f;
  --accent: #262626;
  --accent-foreground: #f4efe4;
  --success: #4cc38a;
  --success-foreground: #101010;
  --info: #00a4dc;
  --info-foreground: #101010;
  --destructive: #ff6b5e;
  --warning: #ffd23f;
  /* Authelia's own dark value is a near-black meant for text ON the warning
   * fill, but its only use is the Caps Lock alert, whose ground is a 10% tint
   * over the card: 1.2:1. The text colour there reads at 12:1. */
  --warning-foreground: #f4efe4;
  --border: #34373b;
  --input: #7a7f87;
  --ring: #ffd23f;
  --radius: 6px;
  --custom-icon: #f4efe4;
  --custom-loading-bar: #00a4dc;
  --divider: #34373b;
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --default-font-family: var(--font-sans);
  color-scheme: dark;
}

/* The ground and its halftone: the doigt page's 1.4px dot every 13px. On the
 * root only, so it covers the whole canvas once; the body stays transparent
 * (two layers would double the dots). Panels are solid over it. */
html {
  background:
    radial-gradient(var(--bst-texture) 1.4px, transparent 1.5px) 0 0 / 13px 13px,
    var(--bst-ground);
}

body {
  background: transparent;
  color: var(--bst-text);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.55;
}

/* ---- Header ---------------------------------------------------------------- */

#language-button {
  height: 40px;
  box-sizing: border-box;
  gap: 8px;
  padding: 0 12px;
  background: var(--bst-surface);
  border: 2px solid var(--bst-line);
  border-radius: 6px;
  box-shadow: var(--bst-shadow-sm);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  transition: transform var(--bst-ease), box-shadow var(--bst-ease);
}

#language-button:hover {
  transform: translate(-1px, -1px);
}

#language-button:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}

#language-button svg {
  color: var(--bst-text-soft);
  stroke-width: 1.75;
}

#language-button span {
  padding-left: 0;
}

#language-button:focus-visible,
#account-menu:focus-visible {
  outline: 3px solid var(--bst-focus);
  outline-offset: 2px;
  box-shadow: none;
}

/* ---- The owl's stage ----------------------------------------------------------
 * The first child of each stage's column holds the logo image and nothing
 * else. It carries the rays (a static print motif, never under text) and the
 * mark stands bare on them: no contour, no shadow on the mark. */

#first-factor-stage > div > div > div:nth-child(1),
#reset-password-step1-stage > div > div > div:nth-child(1),
#reset-password-step2-stage > div > div > div:nth-child(1),
#second-factor-stage > div > div > div:nth-child(1),
#openid-consent-decision-stage > div > div > div:nth-child(1) {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
}

/* Away from a card (second factor, consent) the rays sit on the ground, in an
 * ellipse the size of the stage that fades out before its edges: nothing is
 * clipped and nothing reaches the title below. */
#first-factor-stage > div > div > div:nth-child(1)::before,
#reset-password-step1-stage > div > div > div:nth-child(1)::before,
#reset-password-step2-stage > div > div > div:nth-child(1)::before,
#second-factor-stage > div > div > div:nth-child(1)::before,
#openid-consent-decision-stage > div > div > div:nth-child(1)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-conic-gradient(from 0deg, var(--bst-rays) 0deg 7deg, transparent 7deg 17deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 72%);
  mask-image: radial-gradient(closest-side, #000 30%, transparent 72%);
  pointer-events: none;
}

#first-factor-stage img[alt="Logo"],
#reset-password-step1-stage img[alt="Logo"],
#reset-password-step2-stage img[alt="Logo"],
#second-factor-stage img[alt="Logo"],
#openid-consent-decision-stage img[alt="Logo"] {
  width: 80px;
  height: 80px;
  margin: 0 auto;
}

/* ---- Titles ------------------------------------------------------------------
 * The login, second-factor and consent titles are the view's display-card:
 * 900 at 62.5% width, caps by CSS, the blue then green double offset (it
 * scales with the size: 2.4 and 4.8px at 48px). */

#first-factor-stage h5,
#reset-password-step1-stage h5,
#reset-password-step2-stage h5,
#second-factor-stage h5,
#openid-consent-decision-stage h5 {
  margin: 0 0 24px;
  font-size: 48px;
  line-height: .92;
  font-weight: 900;
  font-stretch: 62.5%;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--bst-text);
  text-shadow: var(--bst-display-shadow);
}

/* Consent: the greeting is the display, "Demande de consentement" a heading. */
#openid-consent-decision-stage h5 {
  margin-bottom: 12px;
}

#openid-consent-decision-stage h6,
#second-factor-stage h6 {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
  font-stretch: 75%;
  color: var(--bst-text);
}

/* ---- Login card: the moment of the view ---------------------------------------
 * Authelia has no element around "logo + title + form", so the card is drawn
 * by the three wrappers themselves: the stage (rays on the raised surface),
 * the title, the form. All three are positioned so they
 * paint in document order: each one covers the bottom offsets of the one
 * above, and the blue then green double offset reads as one card.
 *
 * The two reset-password steps (2026-10-14) are the same card: their stage
 * (layouts/Minimal) has the login's three wrappers in the same order, and
 * without it they were the one portal screen left half-themed -- stock title,
 * stock see-through fields over the halftone, the system's buttons. */

/* The stage's contour is a 2px ring outside it (no border), and its offsets
 * are that ringed shape moved (spread 2px, 12px corners), so the top right
 * reads as a two-step staircase like the bottom left. No band on top (the
 * user's decision, 2026-09-26): the ring is the card's top edge. The title
 * and the form keep real 2px contours, pulled out 2px on each side (and 12px
 * bottom corners) so their outer edge meets the ring's: a ring on them would
 * draw its top over the piece above. */
#first-factor-stage > div > div > div:nth-child(1),
#reset-password-step1-stage > div > div > div:nth-child(1),
#reset-password-step2-stage > div > div > div:nth-child(1) {
  min-height: 150px;
  padding: 24px 0;
  overflow: hidden;
  background: var(--bst-surface-raised);
  border: 0;
  border-radius: 10px 10px 0 0;
  box-shadow: var(--bst-shadow-pop-ring);
}

/* Inside the card the rays fill the stage, as a large square clipped by it
 * (the stage is a panel section: its edges are real edges). */
#first-factor-stage > div > div > div:nth-child(1)::before,
#reset-password-step1-stage > div > div > div:nth-child(1)::before,
#reset-password-step2-stage > div > div > div:nth-child(1)::before {
  inset: auto;
  left: 50%;
  top: 50%;
  width: 600px;
  height: 600px;
  transform: translate(-50%, -50%);
}

#first-factor-stage > div > div > div:nth-child(2),
#reset-password-step1-stage > div > div > div:nth-child(2),
#reset-password-step2-stage > div > div > div:nth-child(2) {
  position: relative;
  box-sizing: border-box;
  width: auto;
  margin: 0 -2px;
  padding: 28px 32px 0;
  background: var(--bst-surface);
  border: 2px solid var(--bst-edge);
  border-top: 0;
  border-bottom: 0;
  box-shadow: var(--bst-shadow-pop);
}

#first-factor-stage > div > div > div:nth-child(3),
#reset-password-step1-stage > div > div > div:nth-child(3),
#reset-password-step2-stage > div > div > div:nth-child(3) {
  position: relative;
  box-sizing: border-box;
  margin: 0 -2px;
  padding: 0 32px 32px;
  background: var(--bst-surface);
  border: 2px solid var(--bst-edge);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  box-shadow: var(--bst-shadow-pop);
  text-align: left;
}

#form-login > .grid {
  gap: 16px;
}

/* The reset forms' grid adds its own my-4 on top of the title's 24px. */
#form-reset-password-username > .grid,
#form-reset-password > .grid {
  margin: 0;
  gap: 16px;
}

/* The two reset titles are sentences (« Réinitialiser le mot de passe »,
 * « Entrez un nouveau mot de passe »): the same display, smaller, so each
 * holds on two balanced lines (at 40px the second one took three). */
#reset-password-step1-stage h5,
#reset-password-step2-stage h5 {
  font-size: 36px;
}

/* The "remember me" and "reset password" rows pull themselves into the grid
 * gap with -my-2; the design spaces every row evenly. */
#form-login [class~="-my-2"] {
  margin-top: 0;
  margin-bottom: 0;
}

/* ---- Fields: labels above the input, no floating ------------------------- */

[data-slot="floating-input"] {
  height: 40px;
  box-sizing: border-box;
  margin-top: 23px;
  padding: 0 16px;
  background: var(--bst-surface);
  color: var(--bst-text);
  border: 2px solid var(--bst-line);
  border-radius: 6px;
  font-size: 16px;
  box-shadow: none;
}

[data-slot="floating-input"]:focus {
  border-color: var(--bst-line);
  outline: 3px solid var(--bst-focus);
  outline-offset: 2px;
  box-shadow: none;
}

[data-slot="floating-input"][aria-invalid="true"] {
  border-color: var(--bst-danger-text);
  box-shadow: 3px 3px 0 var(--bst-danger);
}

/* Tailwind v4 moves elements with the `translate` property, not `transform`:
 * both are reset. */
[data-slot="floating-input"] + label {
  top: 0;
  left: 0;
  transform: none;
  translate: none;
  font-size: 14px;
  line-height: 17px;
  font-weight: 700;
  color: var(--bst-text);
}

[data-slot="floating-input"].pr-10 {
  padding-right: 48px;
}

/* The password visibility toggle, centred on the 40px input, not on the
 * input + label block. Not a button of the system: no outline, no offset. */
.relative > .relative + button[aria-pressed] {
  top: auto;
  bottom: 4px;
  right: 4px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 4px;
  color: var(--bst-text-soft);
  transform: none;
  translate: none;
}

.relative > .relative + button[aria-pressed]:focus-visible {
  outline: 3px solid var(--bst-focus);
  outline-offset: 0;
}

/* The system's other field (data-slot="input": the reset-password steps, the
 * settings dialogs, the password re-authentication). Stock, it is see-through
 * (`dark:bg-input/30`, and --input is the line grey here, so the halftone
 * showed through it) and 56px tall. Now the login's field: solid surface, 2px
 * line contour, 40px, the yellow focus ring, red contour and offset when
 * invalid. `disabled` keeps Authelia's 50% opacity (the reset form without a
 * valid token). */
[data-slot="input"] {
  height: 40px;
  box-sizing: border-box;
  padding: 0 16px;
  background: var(--bst-surface);
  color: var(--bst-text);
  border: 2px solid var(--bst-line);
  border-radius: 6px;
  font-size: 16px;
  box-shadow: none;
}

[data-slot="input"]::placeholder {
  color: var(--bst-text-soft);
  opacity: 1;
}

[data-slot="input"]:focus-visible {
  border-color: var(--bst-line);
  outline: 3px solid var(--bst-focus);
  outline-offset: 2px;
  box-shadow: none;
}

[data-slot="input"][aria-invalid="true"] {
  border-color: var(--bst-danger-text);
  box-shadow: 3px 3px 0 var(--bst-danger);
}

[data-slot="input"].pr-10 {
  padding-right: 48px;
}

/* Its labels on the reset steps: above the field, like the login's. (The
 * settings dialogs' labels are sr-only and stay so.) */
#reset-password-step1-stage [data-slot="label"],
#reset-password-step2-stage [data-slot="label"] {
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 17px;
  font-weight: 700;
  color: var(--bst-text);
}

/* Its visibility toggle, already centred on the field by Authelia: the
 * login toggle's size, colour and focus ring. */
.relative > [data-slot="input"] + button[aria-pressed] {
  right: 4px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 4px;
  color: var(--bst-text-soft);
}

.relative > [data-slot="input"] + button[aria-pressed]:focus-visible {
  outline: 3px solid var(--bst-focus);
  outline-offset: 0;
}

/* ---- Remember me ------------------------------------------------------------ */

[data-slot="checkbox"] {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  background: var(--bst-surface);
  border: 2px solid var(--bst-line);
  border-radius: 4px;
  box-shadow: none;
}

[data-slot="checkbox"][data-checked] {
  background: var(--bst-accent);
  border-color: var(--bst-ink);
  color: var(--bst-on-fill);
}

[data-slot="checkbox"]:focus-visible {
  outline: 3px solid var(--bst-focus);
  outline-offset: 2px;
  box-shadow: none;
}

label[for="remember-checkbox"] {
  font-weight: 400;
  color: var(--bst-text);
}

/* ---- Buttons ------------------------------------------------------------------
 * Sentence case (Authelia sets upper-case), 700, 2px contour. Hover lifts by
 * 1px and never recolours; press moves by the offset and drops it. */

[data-slot="button"],
button[data-variant] {
  text-transform: none;
  letter-spacing: normal;
  font-size: 15px;
  font-weight: 700;
  border-radius: 6px;
  transition: transform var(--bst-ease), box-shadow var(--bst-ease), background-color var(--bst-ease);
}

/* Primary, one per view: the blue foot, ink contour, green offset. */
[data-slot="button"][data-variant="default"] {
  height: 40px;
  background: var(--bst-accent);
  color: var(--bst-on-fill);
  border: 2px solid var(--bst-ink);
  box-shadow: var(--bst-shadow-action);
}

/* Secondary (consent's "Refuser", the reset-password pages' "Annuler", which
 * Authelia draws as a second filled primary): surface, grey contour, grey
 * offset. */
button[data-variant="outline"],
button[data-variant="secondary"],
[data-slot="button"]#cancel-button {
  height: 40px;
  background: var(--bst-surface);
  color: var(--bst-text);
  border: 2px solid var(--bst-line);
  box-shadow: var(--bst-shadow-sm);
}

[data-slot="button"][data-variant="default"]:hover,
button[data-variant="outline"]:hover,
button[data-variant="secondary"]:hover {
  transform: translate(-1px, -1px);
}

[data-slot="button"][data-variant="default"]:hover {
  background: var(--bst-accent);
}

button[data-variant="outline"]:hover,
button[data-variant="secondary"]:hover,
[data-slot="button"]#cancel-button:hover {
  background: var(--bst-surface);
}

[data-slot="button"][data-variant="default"]:active,
button[data-variant="outline"]:active,
button[data-variant="secondary"]:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}

/* Ghost: no fill, no contour, no offset. The secondary-colour ones ("Se
 * déconnecter", "Changer d'utilisateur", "Méthodes", "Réessayer") take the
 * text colour, not the green -- the owl's green is decoration, never an
 * action -- and the raised surface on hover. `data-variant` does not carry
 * the colour, only Authelia's class does: the other ghosts keep theirs, so
 * the settings dialogs' remove and cancel buttons stay red, their verify and
 * next buttons blue, and the settings bar's menu button ink on the blue. */
button[data-variant="ghost"] {
  background: transparent;
  box-shadow: none;
}

button[data-variant="ghost"][class~="text-secondary"] {
  color: var(--bst-text);
}

button[data-variant="ghost"][class~="text-secondary"]:hover {
  background: var(--bst-surface-raised);
}

[data-slot="button"]:focus-visible,
button[data-variant]:focus-visible {
  outline: 3px solid var(--bst-focus);
  outline-offset: 2px;
}

/* ---- Links ------------------------------------------------------------------
 * "Réinitialiser le mot de passe ?" and "Gérer les appareils": text colour,
 * 600, a 2px blue underline -- the stock blue link on grey read at 2.9:1. */

#reset-password-button,
#register-link {
  font-size: 15px;
  line-height: 1.55;
  font-weight: 600;
  color: var(--bst-text);
  text-decoration: underline;
  text-decoration-color: var(--bst-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

#reset-password-button {
  padding: 4px 0 0;
}

#reset-password-button:hover,
#register-link:hover {
  color: var(--bst-accent-text);
}

#reset-password-button:focus-visible,
#register-link:focus-visible {
  outline: 3px solid var(--bst-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- Footer ----------------------------------------------------------------- */

a[href="https://www.authelia.com"] {
  padding-top: 20px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--bst-text-soft);
}

a[href="https://www.authelia.com"]:focus-visible {
  outline: 3px solid var(--bst-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- Second factor ----------------------------------------------------------
 * The method panel is already a bordered box: a panel of the system, green
 * offset. */

#second-factor-stage [class~="rounded-[10px]"] {
  background: var(--bst-surface);
  border: 2px solid var(--bst-edge);
  box-shadow: var(--bst-shadow-md);
}

/* Authelia hardcodes this one blue (#5858ff, 3.9:1 on the card). */
#second-factor-stage [class~="text-[#5858ff]"] {
  color: var(--bst-text-soft);
}

/* IBM Plex Mono is NOT self-hosted (a second font file for six digits): a
 * viewer who has it installed gets it, everyone else the system monospace. */
#otp-input input {
  background: var(--bst-surface);
  color: var(--bst-text);
  border: 2px solid var(--bst-line);
  border-radius: 6px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

#otp-input input:focus {
  outline: 3px solid var(--bst-focus);
  outline-offset: 2px;
}

/* ---- Cards, dialogs, sheets, toasts ------------------------------------------
 * The consent card is alone on its screen: it is the moment (the double
 * offset). Any other card is a panel (green offset), dialogs and sheets are
 * menus (8px green offset). */

[data-slot="card"] {
  border: 2px solid var(--bst-edge);
  box-shadow: var(--bst-shadow-md);
}

#openid-consent-decision-stage [data-slot="card"] {
  box-shadow: var(--bst-shadow-pop);
}

[data-slot="dialog-content"],
[data-slot="sheet-content"] {
  border: 2px solid var(--bst-edge);
  box-shadow: var(--bst-shadow-lg);
}

/* Toasts ("Nom d'utilisateur ou mot de passe incorrect") are the system's
 * alert: raised surface, 2px edge, a 6px left rule in the state's fill
 * (Authelia's own --toast-accent, from the tokens above), text in the text
 * colour. Warning and error, where someone has to act, also take the fill as
 * contour and a 3px offset; info and success keep the rule only. */
[data-slot="toast"] {
  background: var(--bst-surface-raised);
  color: var(--bst-text);
  border: 2px solid var(--bst-edge);
  border-left: 6px solid var(--toast-accent);
  border-radius: 6px;
  box-shadow: none;
  font-size: 14px;
}

[data-slot="toast"] svg {
  color: var(--toast-accent);
}

[data-slot="toast-title"] {
  font-weight: 700;
}

[data-slot="toast"][data-type="error"],
[data-slot="toast"][data-type="warning"] {
  border-color: var(--toast-accent);
  box-shadow: 3px 3px 0 var(--toast-accent);
}

/* Inline alerts (the login form's Caps Lock warning). Authelia's alert is a
 * two-column grid whose first column is 0 wide when there is no icon; the
 * message is a bare text child, so it lands in that column and wraps one word
 * per line (stock 4.39.28 does it too). Without an icon it is a plain block.
 * Same look as the toasts: 2px edge, a 6px left rule in the state's colour. */
[data-slot="alert"] {
  border-width: 2px;
  border-left-width: 6px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.45;
}

[data-slot="alert"]:not(:has(> svg)) {
  display: block;
}

[data-slot="alert-title"] {
  font-weight: 700;
}

/* ---- Reduced motion: no lift, no press, no transition ------------------------ */

@media (prefers-reduced-motion: reduce) {
  #language-button,
  [data-slot="button"],
  button[data-variant] {
    transition: none;
  }

  #language-button:hover,
  #language-button:active,
  [data-slot="button"]:hover,
  [data-slot="button"]:active,
  button[data-variant]:hover,
  button[data-variant]:active {
    transform: none;
  }
}

/* ---- Phones ----------------------------------------------------------------- */

@media (max-width: 480px) {
  #first-factor-stage h5,
  #second-factor-stage h5,
  #openid-consent-decision-stage h5 {
    font-size: 40px;
  }

  #reset-password-step1-stage h5,
  #reset-password-step2-stage h5 {
    font-size: 32px;
  }

  #first-factor-stage > div > div > div:nth-child(1),
  #reset-password-step1-stage > div > div > div:nth-child(1),
  #reset-password-step2-stage > div > div > div:nth-child(1) {
    min-height: 128px;
  }

  #first-factor-stage > div > div > div:nth-child(2),
  #reset-password-step1-stage > div > div > div:nth-child(2),
  #reset-password-step2-stage > div > div > div:nth-child(2) {
    padding: 24px 24px 0;
  }

  #first-factor-stage > div > div > div:nth-child(3),
  #reset-password-step1-stage > div > div > div:nth-child(3),
  #reset-password-step2-stage > div > div > div:nth-child(3) {
    padding: 0 24px 24px;
  }

  /* Six 40px OTP boxes and their margins need 288px; the stock p-8 leaves
   * 258px in a 390px phone, so the sixth box wrapped and the fixed-height
   * method area overflowed onto its title (already so in f022). */
  #second-factor-stage [class~="rounded-[10px]"] {
    padding: 24px 12px;
  }
}