/*
 * Spring sign-in: a living spring landscape behind a pane of refracting glass.
 *
 * js/spring-glass.js renders both in WebGL: the background (a hand-painted spring poster of a
 * Yosemite-Teton composite, img/, graded for the viewer's local time of day) and, under the
 * sign-in card, the glass itself (edge refraction with chromatic dispersion, frost,
 * Fresnel rim, a specular highlight that follows the pointer). With WebGL running, <html> gets
 * .sg-gl and the card's own CSS fill steps aside. Without it (no WebGL, or the script blocked),
 * this file alone draws the still poster and a backdrop-blurred pane.
 *
 * Text contrast never depends on the shader: the pane's interior is tinted and luminance-capped
 * so white text stays at or above 4.5:1 against any part of the light field.
 */

:root {
  --sg-ink: #f4faf7;
  --sg-ink-muted: rgba(232, 244, 238, 0.86);
  --sg-accent: #3ddc97;
  --sg-accent-strong: #27c281;
  --sg-link: #8ef0c2;   /* text links: >= 5:1 on the brightest glass the cap allows */
  --sg-accent-ink: #04140c;
  --sg-glass-tint: rgba(10, 18, 16, 0.82);   /* fallback pane only: 7.1:1 ink, 5.4:1 muted over the brightest art */
  --sg-glass-rim: rgba(255, 255, 255, 0.22);
  --sg-glass-rim-soft: rgba(255, 255, 255, 0.08);
  --sg-radius: 28px;
  --sg-field-radius: 14px;
  --sg-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --sg-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ canvas & fallback field */

html.login-pf, html.login-pf body#keycloak-bg {
  background: #06100c;
}

html.login-pf body#keycloak-bg {
  /* Still fallback (no WebGL): the poster itself, the master that suits the window's shape. */
  background: #9fc3e4 url("../img/spring-wide.jpg") center / cover no-repeat fixed;
  min-height: 100vh;
  min-height: 100svh;   /* exactly the visible screen: no stray scroll on a page that never scrolls */
}

/* With the scene running, the page's own background is the park itself: a blurred copy of the
   live scene over its edge colours (read back by the script), never a flat colour or the daytime
   poster. Safari draws the page under its translucent bars and in overscroll, and takes its tint
   from the page colour: the sky's colour, so the top bar continues the sky. */
html.sg-gl.login-pf {
  position: relative;
  min-height: 100%;
  background:
    var(--sg-snapshot, none) center / cover no-repeat,
    linear-gradient(var(--sg-edge-top, #0b1020), var(--sg-edge-bottom, #0b1020));
  background-color: var(--sg-edge-top, #0b1020);
}
html.sg-gl.login-pf body#keycloak-bg {
  background: transparent;
}

/* The scene is part of the page, not a fixed layer: Safari 26 tints its bars from fixed
   elements touching the screen edges (a canvas has no colour, so the bars went flat), while page
   content shows through them. The script measures the pane against the canvas, so the glass
   stays on the pane when iOS shifts the view for the keyboard or the Passwords sheet. */
#sg-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

html.login-pf .pf-v5-c-login {
  position: relative;
  z-index: 1;
  background: transparent;
  font-family: var(--sg-font);
}

/* ------------------------------------------------------------------ brand */

/* No wordmark above the pane: the title inside it names the product. */
html.login-pf .pf-v5-c-login__header {
  display: none;
}

@media (orientation: portrait) {
  html.login-pf body#keycloak-bg {
    background-image: url("../img/spring-tall.jpg");
  }
}

/* Portrait phones and narrow tablets: the scenery (sky, peaks, falls) owns the top of the screen,
   the pane docks low over the lake and meadow, like a sheet. */
@media (orientation: portrait) and (max-aspect-ratio: 4/5) {
  html.login-pf .pf-v5-c-login {
    align-items: stretch;
    min-height: 100vh;
    min-height: 100svh;
    padding: max(16px, env(safe-area-inset-top)) 0 max(16px, env(safe-area-inset-bottom));
  }
  html.login-pf .pf-v5-c-login__container {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  html.login-pf .pf-v5-c-login__main {
    margin-top: auto;
    align-self: stretch;   /* full width: never shrink to the title's length */
    width: 100%;
  }
}

/* ------------------------------------------------------------------ the pane */

html.login-pf .pf-v5-c-login__main {
  position: relative;
  border-radius: var(--sg-radius);
  border: 0;
  box-shadow: none;
  color: var(--sg-ink);
  /* Fallback glass (no WebGL): frosted, tinted, rimmed. */
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03) 42%, rgba(255, 255, 255, 0.06)),
    var(--sg-glass-tint);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  backdrop-filter: blur(40px) saturate(160%);
  overflow: hidden;
  isolation: isolate;
}

/* Rim: a 1px light edge, brighter on top-left, from a masked gradient border. */
html.login-pf .pf-v5-c-login__main::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.55), var(--sg-glass-rim-soft) 38%, var(--sg-glass-rim-soft) 62%, rgba(255, 255, 255, 0.28));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  z-index: 2;
}

html.login-pf .pf-v5-c-login__main > * {
  position: relative;
  z-index: 3;
}

/* With the shader drawing the glass, the CSS fill and blur step aside (the rim stays). */
html.sg-gl.login-pf .pf-v5-c-login__main {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ------------------------------------------------------------------ type */

html.login-pf .pf-v5-c-login__main-header {
  padding-top: 40px;
  border-top: 0;   /* keycloak.v2's 4px brand bar */
}

html.login-pf #kc-page-title {
  font-family: var(--sg-font-display);
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--sg-ink);
  text-wrap: balance;   /* "Sign in to / Spring Clinic", never a lone last word */
}

html.login-pf .pf-v5-c-login__main-body > p,
html.login-pf .pf-v5-c-login__main-body .pf-v5-c-form__label:not(label) {
  color: var(--sg-ink-muted);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  margin-bottom: 18px;
}

html.login-pf label.pf-v5-c-form__label,
html.login-pf .pf-v5-c-form__label-text {
  color: var(--sg-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

html.login-pf .pf-v5-c-login__main-body a:not(.pf-v5-c-button) {
  color: var(--sg-link);
  text-underline-offset: 3px;
}

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

html.login-pf .pf-v5-c-form-control,
html.login-pf .pf-v5-c-form-control > input {
  --pf-v5-c-form-control--after--BorderBottomColor: transparent;
  --pf-v5-c-form-control--before--BorderStyle: none;
  color: var(--sg-ink);
  font-size: 16px;
  border-radius: var(--sg-field-radius);
}

html.login-pf input.pf-v5-c-form-control,
html.login-pf .pf-v5-c-form-control {
  min-height: 48px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

html.login-pf .pf-v5-c-form-control::before,
html.login-pf .pf-v5-c-form-control::after {
  display: none;
}

html.login-pf .pf-v5-c-form-control:hover {
  border-color: rgba(255, 255, 255, 0.28);
}

html.login-pf .pf-v5-c-form-control:focus-within,
html.login-pf input.pf-v5-c-form-control:focus {
  outline: none;
  border-color: var(--sg-accent);
  background: rgba(0, 0, 0, 0.36);
  box-shadow: 0 0 0 2px var(--sg-accent), 0 0 0 6px rgba(61, 220, 151, 0.22), inset 0 1px 2px rgba(0, 0, 0, 0.35);   /* solid ring: 3.96:1 */
}

html.login-pf .pf-v5-c-form-control::placeholder,
html.login-pf .pf-v5-c-form-control > input::placeholder {
  color: rgba(232, 244, 238, 0.6);
}

/* ------------------------------------------------------------------ buttons */

html.login-pf .pf-v5-c-button {
  min-height: 48px;
  border-radius: var(--sg-field-radius);
  font-family: var(--sg-font);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.005em;
  transition: transform 140ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

/* Primary action: a tinted-glass capsule (white label 6.3:1 on #0e6b41; >= 4.6:1 measured from
   pixels under the glyphs with its highlights, day and night glass). It rests quieter
   until the email looks valid (still readable and clickable: pressing it explains what is
   missing), brightens where the pointer is, and settles into a sending state after submit. */
html.login-pf .pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--after--BorderWidth: 0;
  --sg-btn: #0e6b41;
  --mx: 50%;
  --my: 0%;
  position: relative;
  min-height: 50px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 0;
  background:
    radial-gradient(120px 60px at var(--mx) var(--my), rgba(255, 255, 255, 0.14), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0) 38%),
    var(--sg-btn);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 -10px 18px -10px rgba(170, 255, 214, 0.35),
    0 10px 28px -14px rgba(19, 128, 78, 0.9);
  transition: transform 220ms cubic-bezier(0.3, 1.45, 0.5, 1), background-color 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
}

html.login-pf .pf-v5-c-button.pf-m-primary:hover {
  --sg-btn: #0c6139;
}

/* A link styled as the primary action (Your passkeys' Add a passkey) keeps the white label. */
html.login-pf a.pf-v5-c-button.pf-m-primary,
html.login-pf a.pf-v5-c-button.pf-m-primary:visited { color: #ffffff; text-decoration: none; display: flex; align-items: center; justify-content: center; }

html.login-pf .pf-v5-c-button.pf-m-primary:active {
  transform: scale(0.97);
}

/* The primary action is always the prominent, filled control (it read as a second text field
   when it rested as a clear capsule). Pressing it before the address looks valid explains what
   is missing, inline. */

/* Sending: the code is on its way; no second press. */
html.login-pf .pf-v5-c-button.pf-m-primary.sg-sending {
  --sg-btn: #0b5a36;   /* opaque, deeper: white 7.6:1 (fading it let the day glass wash it out) */
  cursor: progress;
}

/* ------------------------------------------------------------------ inline field errors */

html.login-pf .sg-field-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 2px 0;
  min-height: 20px;
  color: #ffd9d3;              /* >= 5.38:1 on the brightest glass */
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

html.login-pf .sg-field-hint:empty {
  display: none;
}

html.login-pf .sg-field-hint::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ff6b5c url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='7.1' y='3.5' width='1.8' height='6' rx='.9' fill='white'/><circle cx='8' cy='11.9' r='1.05' fill='white'/></svg>") center / 16px no-repeat;
}

html.login-pf input.pf-v5-c-form-control[aria-invalid="true"] {
  border-color: #ff6b5c;
  box-shadow: 0 0 0 3px rgba(255, 107, 92, 0.28), inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

html.login-pf .pf-v5-c-button.pf-m-secondary,
html.login-pf .pf-v5-c-button.pf-m-link {
  --pf-v5-c-button--after--BorderWidth: 0;
  color: var(--sg-ink);
  background: rgba(0, 0, 0, 0.22);   /* darkens the night glass under the label: >= 4.5:1 measured */
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

html.login-pf .pf-v5-c-button.pf-m-secondary:hover,
html.login-pf .pf-v5-c-button.pf-m-link:hover {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.34);
}

html.login-pf .pf-v5-c-button::after {
  display: none;
}

html.login-pf .pf-v5-c-button:focus-visible,
html.login-pf a:focus-visible {
  outline: 2px solid var(--sg-accent);
  outline-offset: 3px;
}

/* The alternative sign-in (passkey) is a quiet link under Continue, not a second button. */
html.login-pf #kc-select-try-another-way-form {
  display: flex;               /* no line box around the link: its 44px target is the whole row */
  justify-content: center;
  margin-top: 8px;
}

html.login-pf #try-another-way.pf-v5-c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 44px;            /* touch target, though it reads as text */
  padding: 0 12px;
  margin: 0 auto;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--sg-link);
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(142, 240, 194, 0.45);
  text-underline-offset: 4px;
}

html.login-pf #try-another-way.pf-v5-c-button:hover {
  background: none;
  text-decoration-color: currentColor;
}

/* ------------------------------------------------------------------ alerts */

html.login-pf .pf-v5-c-alert {
  border-radius: var(--sg-field-radius);
  background: rgba(0, 0, 0, 0.32);
  border: 0;
  box-shadow: none;
  color: var(--sg-ink);
  padding: 10px 12px;
  margin-bottom: 16px;
}

/* Red stays in the icon and the accent bar; the message itself is light so it reads at >= 9:1
   on the brightest glass (red text on dark glass measured 3.35:1). */
html.login-pf .pf-v5-c-alert.pf-m-danger {
  border-left: 0;
  background: rgba(255, 107, 92, 0.16);
}
html.login-pf .pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__icon {
  color: #ff6b5c;
}
html.login-pf .pf-v5-c-alert .pf-v5-c-alert__title {
  color: #ffd9d3;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}
html.login-pf .pf-v5-c-alert.pf-m-success .pf-v5-c-alert__title,
html.login-pf .pf-v5-c-alert.pf-m-info .pf-v5-c-alert__title,
html.login-pf .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__title {
  color: var(--sg-ink);
}

/* ------------------------------------------------------------------ layout */

@media (min-width: 576px) {
  html.login-pf .pf-v5-c-login__main {
    max-width: 440px;
    margin-inline: auto;
  }
  html.login-pf .pf-v5-c-login__main-header,
  html.login-pf .pf-v5-c-login__main-body,
  html.login-pf .pf-v5-c-login__main-footer {
    padding-inline: 40px;
  }
  html.login-pf .pf-v5-c-login__main-body {
    padding-bottom: 22px;   /* + half the link's 44px target ≈ the 40px above the title */
  }
}

@media (max-width: 575px) {
  html.login-pf .pf-v5-c-login__container {
    padding-inline: 16px;
  }
  html.login-pf .pf-v5-c-login__main {
    --sg-radius: 22px;
  }
  html.login-pf .pf-v5-c-login__main-body {
    padding-bottom: 22px;
  }
  html.login-pf #kc-page-title {
    font-size: 24px;   /* phone: a title, not a banner */
  }
}

@media (prefers-reduced-transparency: reduce) {
  html.login-pf .pf-v5-c-login__main,
  html.sg-gl.login-pf .pf-v5-c-login__main {
    background: rgba(10, 18, 16, 0.92);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.login-pf .pf-v5-c-button,
  html.login-pf .pf-v5-c-form-control {
    transition: none;
  }
  html.login-pf .pf-v5-c-button.pf-m-primary:active {
    transform: none;
  }
}

/* ------------------------------------------------------------------ day glass (default)

   By day the pane is clear, milky glass: the shader lifts what lies behind it to a luminance floor
   (never darker than #bcbcbc where text sits) and the ink is dark. At night the script adds
   .sg-dark: smoky glass under a luminance cap and the white ink above. Measured on #bcbcbc:
   ink 9.15:1, muted 5.85:1, links 5.46:1, error text 4.91:1, focus ring 3.32:1. */

html.login-pf:not(.sg-dark) {
  --sg-ink: #0f1d17;
  --sg-ink-muted: #2f3f38;
  --sg-link: #054a2d;
  --sg-focus: #0a6e44;
  --sg-glass-tint: rgba(246, 250, 248, 0.74);   /* fallback pane: dark ink >= 9:1 over the darkest art */
  --sg-glass-rim-soft: rgba(255, 255, 255, 0.22);
  color-scheme: light;
}

html.login-pf:not(.sg-dark) .pf-v5-c-login__main {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.12) 42%, rgba(255, 255, 255, 0.24)),
    var(--sg-glass-tint);
}
html.sg-gl.login-pf:not(.sg-dark) .pf-v5-c-login__main {
  background: transparent;
}

html.login-pf:not(.sg-dark) input.pf-v5-c-form-control,
html.login-pf:not(.sg-dark) .pf-v5-c-form-control {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(15, 29, 23, 0.16);
  box-shadow: inset 0 1px 2px rgba(15, 29, 23, 0.10), 0 1px 0 rgba(255, 255, 255, 0.6);
}
html.login-pf:not(.sg-dark) .pf-v5-c-form-control:hover {
  border-color: rgba(15, 29, 23, 0.28);
}
html.login-pf:not(.sg-dark) .pf-v5-c-form-control:focus-within,
html.login-pf:not(.sg-dark) input.pf-v5-c-form-control:focus {
  background: rgba(255, 255, 255, 0.75);
  border-color: var(--sg-focus);
  box-shadow: 0 0 0 2px var(--sg-focus), 0 0 0 6px rgba(10, 110, 68, 0.16), inset 0 1px 2px rgba(15, 29, 23, 0.10);   /* solid ring: 3.32:1 */
}
html.login-pf:not(.sg-dark) .pf-v5-c-form-control::placeholder,
html.login-pf:not(.sg-dark) .pf-v5-c-form-control > input::placeholder {
  color: rgba(15, 29, 23, 0.55);
}

html.login-pf:not(.sg-dark) .pf-v5-c-button.pf-m-secondary,
html.login-pf:not(.sg-dark) .pf-v5-c-button.pf-m-link {
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(15, 29, 23, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
html.login-pf:not(.sg-dark) .pf-v5-c-button.pf-m-secondary:hover,
html.login-pf:not(.sg-dark) .pf-v5-c-button.pf-m-link:hover {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(15, 29, 23, 0.26);
}

html.login-pf:not(.sg-dark) .pf-v5-c-button:focus-visible,
html.login-pf:not(.sg-dark) a:focus-visible {
  outline-color: var(--sg-focus);
}

html.login-pf:not(.sg-dark) #try-another-way.pf-v5-c-button {
  text-decoration-color: rgba(5, 74, 45, 0.4);
}

html.login-pf:not(.sg-dark) .sg-field-hint {
  color: #8a1c10;
}
html.login-pf:not(.sg-dark) .sg-field-hint::before {
  background-color: #c8321f;
}
html.login-pf:not(.sg-dark) input.pf-v5-c-form-control[aria-invalid="true"] {
  border-color: #c8321f;
  box-shadow: 0 0 0 3px rgba(200, 50, 31, 0.18), inset 0 1px 2px rgba(15, 29, 23, 0.10);
}

html.login-pf:not(.sg-dark) .pf-v5-c-alert {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(15, 29, 23, 0.14);
}
html.login-pf:not(.sg-dark) .pf-v5-c-alert.pf-m-danger {
  /* A red wash over a near-opaque light fill: the bright day glass can't thin the message. */
  background: linear-gradient(rgba(200, 50, 31, 0.08), rgba(200, 50, 31, 0.08)), rgba(255, 255, 255, 0.78);
}
html.login-pf:not(.sg-dark) .pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__icon {
  color: #c8321f;
}
html.login-pf:not(.sg-dark) .pf-v5-c-alert .pf-v5-c-alert__title {
  color: #761407;
}
html.login-pf:not(.sg-dark) .pf-v5-c-alert.pf-m-success .pf-v5-c-alert__title,
html.login-pf:not(.sg-dark) .pf-v5-c-alert.pf-m-info .pf-v5-c-alert__title,
html.login-pf:not(.sg-dark) .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__title {
  color: var(--sg-ink);
}

/* The ink crossfades with the glass when day turns to night. */
html.login-pf #kc-page-title,
html.login-pf label.pf-v5-c-form__label,
html.login-pf .pf-v5-c-login__main-body a,
html.login-pf #try-another-way {
  transition: color 600ms ease, background-color 600ms ease;
}
html.sg-instant.login-pf *,
html.sg-instant.login-pf *::before {
  transition: none !important;   /* the first look is set before paint, not faded into */
}

@media (prefers-reduced-transparency: reduce) {
  html.login-pf:not(.sg-dark) .pf-v5-c-login__main,
  html.sg-gl.login-pf:not(.sg-dark) .pf-v5-c-login__main {
    background: rgba(246, 250, 248, 0.96);
  }
}

/* Edge to edge (viewport-fit=cover): the scene runs under the notch and toolbars, the content keeps
   to the safe area on every side, landscape included. */
html.login-pf .pf-v5-c-login {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* The page box includes its padding, so it is exactly the screen tall (no stray scroll). */
html.login-pf .pf-v5-c-login {
  box-sizing: border-box;
}

/* ------------------------------------------------------------------ choose how to sign in

   One grouped list (like a Settings section): rows separated by hairlines inside a single
   rounded group, an icon in a tinted circle, title and one line of help, a chevron. Each row is a
   real button (select-authenticator.ftl). */

html.login-pf .sg-choices {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.035);   /* night: the cap keeps the pane dark; a light row tint would eat contrast */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
html.login-pf .sg-choices li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
html.login-pf .sg-choices form {
  margin: 0;
}
html.login-pf .sg-choice {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 12px 14px 12px 16px;
  border: 0;
  background: transparent;
  color: var(--sg-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease;
}
html.login-pf .sg-choice:hover {
  background: rgba(255, 255, 255, 0.06);
}
html.login-pf .sg-choice:active {
  background: rgba(255, 255, 255, 0.12);
}
html.login-pf .sg-choice:focus-visible {
  outline: 2px solid var(--sg-accent);
  outline-offset: -4px;
  border-radius: 14px;
}
html.login-pf .sg-choice-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #ffffff;
  background: #13804e;
}
html.login-pf .sg-choice-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
html.login-pf .sg-choice-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
}
html.login-pf .sg-choice-help {
  font-size: 14px;
  line-height: 1.35;
  color: rgba(240, 248, 244, 0.94);
}
html.login-pf:not(.sg-dark) .sg-choice-help {
  color: var(--sg-ink-muted);
}
html.login-pf .sg-choice-chevron {
  flex: none;
  color: var(--sg-ink-muted);
  opacity: 0.8;
}
html.login-pf:not(.sg-dark) .sg-choices {
  background: rgba(255, 255, 255, 0.52);
  box-shadow: inset 0 0 0 1px rgba(15, 29, 23, 0.10);
}
html.login-pf:not(.sg-dark) .sg-choices li + li {
  border-top-color: rgba(15, 29, 23, 0.10);
}
html.login-pf:not(.sg-dark) .sg-choice:hover {
  background: rgba(255, 255, 255, 0.4);
}
html.login-pf:not(.sg-dark) .sg-choice:active {
  background: rgba(15, 29, 23, 0.06);
}
html.login-pf:not(.sg-dark) .sg-choice:focus-visible {
  outline-color: var(--sg-focus);
}
@media (prefers-reduced-motion: reduce) {
  html.login-pf .sg-choice {
    transition: none;
  }
}

/* ---- Passkeys: creating one, the offer after an email code, and Your passkeys ------------- */
.sg-passkey { display: flex; flex-direction: column; align-items: stretch; gap: 14px; text-align: center; }
.sg-passkey-glyph {
  width: 56px; height: 56px; margin: 2px auto 0; fill: none; stroke: var(--sg-ink);
  stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0.92;
}
.sg-passkey-lede { margin: 0; color: var(--sg-ink-muted); font-size: 16px; line-height: 1.45; text-wrap: pretty; }
.sg-passkey-note { margin: 4px 0 0; color: var(--sg-ink-muted); font-size: 13px; line-height: 1.4; text-wrap: pretty; }
.sg-passkey-status {
  margin: 0; padding: 10px 12px; border-radius: var(--sg-field-radius); font-size: 14px; line-height: 1.4;
  color: var(--sg-ink); background: color-mix(in srgb, var(--sg-ink) 10%, transparent);
}
.sg-passkey form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.sg-passkey-quiet {
  appearance: none; background: none; border: 0; padding: 8px; min-height: 44px; cursor: pointer;
  color: var(--sg-link); font: inherit; font-size: 15px; border-radius: 10px;
}
.sg-passkey-quiet:hover { text-decoration: underline; }
.sg-passkey-quiet:focus-visible { outline: 2px solid var(--sg-focus, var(--sg-link)); outline-offset: 2px; }
/* Busy (the system sheet is open): deeper, not faded, so the label keeps its contrast. */
[aria-busy="true"] { pointer-events: none; cursor: progress; }
html.login-pf .pf-v5-c-button.pf-m-primary[aria-busy="true"] { --sg-btn: #0b5a36; }

/* Your passkeys: a grouped list, like Settings. */
.sg-keys { list-style: none; margin: 4px 0 0; padding: 0; text-align: left; border-radius: 18px; overflow: hidden;
  background: color-mix(in srgb, var(--sg-ink) 7%, transparent); }
.sg-key { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; }
.sg-key + .sg-key { border-top: 1px solid color-mix(in srgb, var(--sg-ink) 12%, transparent); }
.sg-key-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--sg-ink) 10%, transparent); }
.sg-key-icon img, .sg-key-icon svg { width: 24px; height: 24px; }
.sg-key-icon svg { fill: none; stroke: var(--sg-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sg-key-name { display: block; font-weight: 600; color: var(--sg-ink); font-size: 16px; overflow-wrap: anywhere; }
.sg-key-meta { display: block; color: var(--sg-ink-muted); font-size: 13px; margin-top: 2px; white-space: nowrap; }
.sg-key > span:nth-child(2) { min-width: 0; }
.sg-key-actions { display: flex; gap: 4px; }
.sg-key-actions button, .sg-key-actions summary {
  appearance: none; background: none; border: 0; cursor: pointer; color: var(--sg-link); font: inherit;
  font-size: 15px; padding: 8px 10px; min-height: 44px; border-radius: 10px; list-style: none;
}
.sg-key-actions summary::-webkit-details-marker { display: none; }
.sg-key-actions button:focus-visible, .sg-key-actions summary:focus-visible { outline: 2px solid var(--sg-focus, var(--sg-link)); outline-offset: 2px; }
.sg-key-actions .sg-danger { color: #ffcdc7; }
/* Night: the moving glass behind the list can turn bright, so Remove sits on its own dark chip
   (worst case, white glass behind it: >= 5:1). */
html.sg-dark .sg-key-actions .sg-danger { background: rgba(48, 10, 8, 0.72); }
html.sg-dark .sg-key-actions button:not(.sg-danger), html.sg-dark .sg-key-actions summary:not(.sg-danger) { color: #b8f7d8; }   /* >= 4.5:1 on the list tint */
:root[data-theme="light"] .sg-key-actions .sg-danger, html:not(.sg-dark) .sg-key-actions .sg-danger { color: #8c1d18; }
.sg-key-edit { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 4px; }
.sg-key-edit input { flex: 1; min-width: 0; }
.sg-keys-empty { padding: 18px 14px; color: var(--sg-ink-muted); text-align: center; }
.sg-banner { margin: 0; padding: 10px 12px; border-radius: var(--sg-field-radius); font-size: 14px;
  background: color-mix(in srgb, var(--sg-accent) 22%, transparent); color: var(--sg-ink); }
@media (prefers-reduced-motion: no-preference) { .sg-key { transition: background-color .2s ease; } }

/* Signed in already on these pages: no "attempted email + restart" row from the stock layout. */
.pf-v5-c-login__main:has(.sg-passkey) .pf-v5-c-form__group:has(#kc-attempted-username),
.pf-v5-c-login__main:has(.sg-passkey) #kc-select-try-another-way-form { display: none; }

/* Code page: the secondary actions sit one even step below Continue and from each other. */
.sg-secondary-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }