/* id3 login theme.
   One stylesheet for every Keycloak login page: the page frame (header, panel, footer), the form components and
   the classes theme.properties maps the kc*Class properties to, so pages still inherited from the base theme get
   the same look. PatternFly and the parent's login.css are not loaded (stylesCommon is empty).

   Colours, type, spacing, radii and motion come from the frontend-library 2.0 theme of the id3 home page:
   css/ka-theme.css, loaded first, holds its --ka-* variables and page styles (reset, body text, focus ring,
   selection, scrollbars, reduced motion). It is generated by tools/ka-theme; do not copy its values here.
   The components follow the library's Button, TextField, Banner, Link and Checkbox, one size step larger
   (14px labels, 48px fields with 16px text, 52px buttons), as approved for the login panel. */

:root {
  /* The theme's colours under their id3 names */
  --id3-bg: var(--ka-color-bg);
  --id3-surface: var(--ka-color-surface);
  --id3-surface-2: var(--ka-color-surface-raised);
  --id3-border: var(--ka-color-border);
  --id3-border-strong: var(--ka-color-border-strong);
  --id3-primary: var(--ka-color-primary);
  --id3-primary-hover: var(--ka-tone-info-hover);
  --id3-primary-active: var(--ka-tone-info-pressed);
  --id3-on-primary: var(--ka-tone-info-on-solid);
  --id3-text: var(--ka-color-fg1);
  --id3-text-2: var(--ka-color-fg2);
  --id3-text-muted: var(--ka-color-fg3);
  --id3-error: var(--ka-color-danger);
  --id3-error-text: var(--ka-tone-danger-on-surface);
  --id3-success: var(--ka-color-success);
  --id3-success-text: var(--ka-tone-success-on-surface);
  --id3-warning: var(--ka-color-warning);
  --id3-well: var(--ka-color-input-bg);
  --id3-hair: var(--ka-color-border);
  --id3-radius: var(--ka-radius-sm);
  --id3-input-radius: var(--ka-radius-sm);
  --id3-panel-radius: var(--ka-radius-md);
  --id3-font: var(--ka-font-sans);
  --id3-mono: var(--ka-font-mono);
  --id3-transition: var(--ka-motion-fast) var(--ka-motion-standard);

  /* The approved login sizes, larger than the library's controls (lg is 44px) */
  --id3-control-h: 48px;
  --id3-button-h: 52px;

  /* The logo and the panel share one column whose left edge moves right with the window: the 480px panel is
     centred at about 30% of the width (158px from the left at 1280px, 338px at 1920px), on the dark side of the
     fade and clear of the scene on the right */
  --id3-col-left: max(64px, calc(28vw - 200px));

  /* Icons, drawn with the text color through a mask (stroke icons on a 24px grid) */
  --id3-i-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --id3-i-eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 5.1A10.6 10.6 0 0 1 12 5c6.5 0 10 7 10 7a17.6 17.6 0 0 1-3.2 4.2'/%3E%3Cpath d='M6.6 6.6C3.8 8.4 2 12 2 12s3.5 7 10 7a10 10 0 0 0 5.4-1.6'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");
  --id3-i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.5h.01'/%3E%3C/svg%3E");
  --id3-i-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.8'/%3E%3C/svg%3E");
  --id3-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8.5'/%3E%3C/svg%3E");
  --id3-i-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  --id3-i-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5L2.5 20h19L12 3.5z'/%3E%3Cpath d='M12 10v4.5'/%3E%3Cpath d='M12 17.5h.01'/%3E%3C/svg%3E");
  --id3-i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5'/%3E%3Cpath d='M12 7.5h.01'/%3E%3C/svg%3E");
  --id3-i-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M11 18l-6-6 6-6'/%3E%3C/svg%3E");
  --id3-i-restart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12a8.5 8.5 0 1 0 2.8-6.3'/%3E%3Cpath d='M3.5 4v5h5'/%3E%3C/svg%3E");
  --id3-i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  --id3-i-mobile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E");
  --id3-i-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M10.8 12.2L20 3'/%3E%3Cpath d='M17 6l3 3'/%3E%3Cpath d='M14.5 8.5l2 2'/%3E%3C/svg%3E");
  --id3-i-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Cpath d='M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E");
  --id3-i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  --id3-i-microsoft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Crect x='1' y='1' width='9' height='9' fill='%23f25022'/%3E%3Crect x='11' y='1' width='9' height='9' fill='%237fba00'/%3E%3Crect x='1' y='11' width='9' height='9' fill='%2300a4ef'/%3E%3Crect x='11' y='11' width='9' height='9' fill='%23ffb900'/%3E%3C/svg%3E");
}

/* ---------- Base (the reset, body text and focus ring are in ka-theme.css) ---------- */

html {
  min-height: 100%;
  background: var(--id3-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100%;
  -moz-osx-font-smoothing: grayscale;
}

[hidden] {
  display: none !important;
}

/* Links: the library's Link (info tone) */
:where(.id3-panel) a {
  color: var(--ka-tone-info-on-surface);
  text-decoration-line: underline;
  text-decoration-thickness: var(--ka-line-thin);
  text-underline-offset: var(--ka-offset-underline);
  text-decoration-color: var(--ka-tone-info-line);
  border-radius: var(--ka-radius-xs);
  transition: color var(--id3-transition), text-decoration-color var(--id3-transition);
}

:where(.id3-panel) a:hover {
  text-decoration-color: currentColor;
}

:where(.id3-panel) p {
  margin: 0;
  font-size: var(--ka-text-md);
  line-height: var(--ka-leading-md);
  color: var(--id3-text-2);
}

:where(.id3-panel) p + p {
  margin-top: var(--ka-space-4);
}

:where(.id3-panel) :is(ul, ol) {
  margin: 0;
  padding-left: var(--ka-space-7);
  color: var(--id3-text-2);
}

:where(.id3-panel) hr {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: var(--ka-line-thin) solid var(--id3-hair);
}

:where(.id3-panel) h2 {
  margin: 0;
  font-size: var(--ka-text-lg);
  line-height: var(--ka-leading-lg);
  font-weight: var(--ka-weight-semibold);
}

:where(.id3-panel) form {
  margin: 0;
}

.id3-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;
}

/* ---------- Icons ---------- */

.id3-icon {
  display: inline-block;
  flex: none;
  width: var(--ka-icon-xl);
  height: var(--ka-icon-xl);
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: var(--id3-icon) center / contain no-repeat;
  mask: var(--id3-icon) center / contain no-repeat;
}

.id3-icon--eye { --id3-icon: var(--id3-i-eye); }
.id3-icon--eye-off { --id3-icon: var(--id3-i-eye-off); }
.id3-icon--alert { --id3-icon: var(--id3-i-alert); }
.id3-icon--ok { --id3-icon: var(--id3-i-ok); }
.id3-icon--check { --id3-icon: var(--id3-i-check); }
.id3-icon--warning { --id3-icon: var(--id3-i-warning); }
.id3-icon--info { --id3-icon: var(--id3-i-info); }
.id3-icon--back { --id3-icon: var(--id3-i-back); }
.id3-icon--restart { --id3-icon: var(--id3-i-restart); }
.id3-icon--lock { --id3-icon: var(--id3-i-lock); }
.id3-icon--mobile { --id3-icon: var(--id3-i-mobile); }
.id3-icon--key { --id3-icon: var(--id3-i-key); }
.id3-icon--list { --id3-icon: var(--id3-i-list); }
.id3-icon--chevron { --id3-icon: var(--id3-i-chevron); }

/* A brand mark in its own colors, not tinted */
.id3-icon--microsoft {
  background: var(--id3-i-microsoft) center / contain no-repeat;
  -webkit-mask: none;
  mask: none;
}

/* ---------- Page frame ---------- */

.id3-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--id3-bg);
}

.id3-bg__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The live racked stands (js/id3-live-background.js) over their poster. The scene keeps the point 80% across in
   view on screens narrower than 16:9, so the poster is cropped the same way and the switch does not jump. */
.id3-bg--live .id3-bg__img {
  object-position: 80% 50%;
}

.id3-bg__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--ka-motion-slow) var(--ka-motion-standard);
}

.id3-bg__canvas.is-live {
  opacity: 1;
}

/* The tenant photo fades into the theme background on the left, so the panel reads the same on every photo */
.id3-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--id3-bg) 95%, transparent) 0%,
    color-mix(in srgb, var(--id3-bg) 86%, transparent) 36%,
    color-mix(in srgb, var(--id3-bg) 40%, transparent) 68%,
    color-mix(in srgb, var(--id3-bg) 12%, transparent) 100%
  );
}

.id3-page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.id3-header {
  flex: none;
  display: flex;
  align-items: center;
  padding: var(--ka-space-9) var(--ka-space-10) var(--ka-space-9) var(--id3-col-left);
}

.id3-header__logo {
  display: block;
  width: auto;
  height: 64px;
  max-width: min(360px, 70vw);
  object-fit: contain;
  object-position: left center;
}

/* The panel starts at the column's left edge, under the logo */
.id3-main {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  padding: var(--ka-space-4) var(--ka-space-8) var(--ka-space-8) var(--id3-col-left);
}

/* The library's glass material, with the hairline edge of its framed materials and a lift over the photo */
.id3-panel {
  display: flex;
  flex-direction: column;
  gap: var(--ka-space-8);
  width: 480px;
  max-width: 100%;
  padding: var(--ka-space-10) 44px;
  color: var(--ka-material-glass-fg);
  background: var(--ka-material-glass-bg);
  -webkit-backdrop-filter: var(--ka-material-glass-filter);
  backdrop-filter: var(--ka-material-glass-filter);
  border: var(--ka-line-thin) solid var(--ka-material-solid-edge);
  border-radius: var(--id3-panel-radius);
  box-shadow: var(--ka-material-glass-highlight), var(--ka-elevation-2);
}

.id3-panel__head {
  display: flex;
  flex-direction: column;
  gap: var(--ka-space-3);
}

/* The library's heading (title text, semibold, tight tracking) at the approved 30px */
.id3-title {
  margin: 0;
  font-size: 30px;
  font-weight: var(--ka-weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--ka-tracking-tight);
  color: var(--id3-text);
  overflow-wrap: anywhere;
}

.id3-subtitle {
  margin: 0;
  font-size: var(--ka-text-md);
  line-height: var(--ka-leading-md);
  color: var(--id3-text-2);
}

.id3-required-note {
  margin: 0;
  font-size: var(--ka-text-sm);
  line-height: var(--ka-leading-sm);
  color: var(--id3-text-muted);
}

.id3-required {
  color: var(--id3-text-muted);
}

.id3-panel__info {
  font-size: var(--ka-text-md);
  line-height: var(--ka-leading-md);
  color: var(--id3-text-2);
}

.id3-help {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ka-space-2) var(--ka-space-4);
  margin: 0;
  padding-top: var(--ka-space-6);
  border-top: var(--ka-line-thin) solid var(--id3-hair);
  font-size: var(--ka-text-md);
  line-height: var(--ka-leading-md);
  color: var(--id3-text-muted);
}

.id3-help b {
  font-weight: var(--ka-weight-semibold);
  color: var(--id3-text);
}

/* The contacts wrap to the next line together, not one at a time */
.id3-help__contacts {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--ka-space-2) var(--ka-space-4);
  min-width: 0;
}

/* As the home page's footer: faint text, neutral links */
.id3-footer {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ka-space-2) var(--ka-space-6);
  padding: var(--ka-space-6) var(--ka-space-8) var(--ka-space-7);
  font-size: var(--ka-text-sm);
  line-height: var(--ka-leading-sm);
  color: var(--id3-text-muted);
  text-align: center;
}

.id3-footer a {
  color: var(--id3-text-2);
  text-decoration-line: underline;
  text-decoration-thickness: var(--ka-line-thin);
  text-underline-offset: var(--ka-offset-underline);
  text-decoration-color: var(--id3-border-strong);
  border-radius: var(--ka-radius-xs);
  transition: color var(--id3-transition), text-decoration-color var(--id3-transition);
}

.id3-footer a:hover {
  color: var(--id3-text);
  text-decoration-color: currentColor;
}

/* ---------- Attempted username (password, OTP and re-authentication steps) ---------- */

.id3-username {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ka-space-5);
  min-height: var(--id3-control-h);
  padding: var(--ka-space-3) var(--ka-space-3) var(--ka-space-3) var(--ka-space-6);
  background: var(--id3-well);
  border: var(--ka-line-thin) solid var(--id3-border);
  border-radius: var(--id3-input-radius);
}

.id3-username__name {
  min-width: 0;
  margin: 0;
  font-size: var(--ka-text-md);
  font-weight: var(--ka-weight-medium);
  color: var(--id3-text);
  overflow-wrap: anywhere;
}

.id3-username__restart {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--ka-space-3);
  padding: var(--ka-space-3) var(--ka-space-4);
  font-size: var(--ka-text-sm);
}

.id3-username__restart .id3-icon {
  width: var(--ka-icon-md);
  height: var(--ka-icon-md);
}

/* ---------- Alerts: the library's Banner (tone tint, icon in the tone's ink) ---------- */

.id3-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ka-space-4);
  margin: 0;
  padding: var(--ka-space-5) var(--ka-space-6);
  border-radius: var(--ka-radius-sm);
  font-size: var(--ka-text-md);
  line-height: var(--ka-leading-md);
  color: var(--id3-text);
  background: var(--ka-tone-info-tint);
}

.id3-alert .id3-icon {
  width: var(--ka-icon-md);
  height: var(--ka-icon-md);
  margin-top: calc((var(--ka-leading-md) - var(--ka-icon-md)) / 2);
  color: var(--ka-tone-info-ink);
}

.id3-alert__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.id3-alert--error { background: var(--ka-tone-danger-tint); }
.id3-alert--error .id3-icon { color: var(--ka-tone-danger-ink); }

.id3-alert--success { background: var(--ka-tone-success-tint); }
.id3-alert--success .id3-icon { color: var(--ka-tone-success-ink); }

.id3-alert--warning { background: var(--ka-tone-warning-tint); }
.id3-alert--warning .id3-icon { color: var(--ka-tone-warning-ink); }

/* Big round status mark (info and error pages) */
.id3-status {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--ka-radius-circle);
  background: var(--ka-tone-success-tint);
  color: var(--ka-tone-success-ink);
}

.id3-status .id3-icon {
  width: var(--ka-icon-xxl);
  height: var(--ka-icon-xxl);
}

.id3-status--error {
  background: var(--ka-tone-danger-tint);
  color: var(--ka-tone-danger-ink);
}

.id3-status--info {
  background: var(--ka-tone-info-tint);
  color: var(--ka-tone-info-ink);
}

/* ---------- Forms: the library's TextField ---------- */

.id3-form {
  display: flex;
  flex-direction: column;
  gap: var(--ka-space-7);
  margin: 0;
}

.id3-field {
  display: flex;
  flex-direction: column;
  gap: var(--ka-space-3);
  min-width: 0;
  margin: 0;
}

.id3-field__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ka-space-5);
}

.id3-field__control {
  display: flex;
  flex-direction: column;
  gap: var(--ka-space-3);
  min-width: 0;
}

/* Label wrapper of base-theme fields: the label with its required mark */
.id3-field__label {
  display: block;
  line-height: var(--ka-leading-md);
}

.id3-field__group {
  display: block;
}

/* Label and a link on one line above the input ("Forgot password?"); the link follows the input in the DOM so
   the keyboard goes from the password straight to its reveal button */
.id3-field--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--ka-space-5);
  row-gap: var(--ka-space-3);
}

.id3-field--split > .id3-label {
  grid-row: 1;
  grid-column: 1;
}

.id3-field--split > .id3-field__aside {
  grid-row: 1;
  grid-column: 2;
}

.id3-field--split > :not(.id3-label):not(.id3-field__aside) {
  grid-column: 1 / -1;
}

/* The required mark of base-theme labels, faint as in the library */
.required {
  color: var(--id3-text-muted);
}

fieldset.id3-tiles {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

fieldset.id3-tiles > legend {
  margin-bottom: var(--ka-space-3);
  padding: 0;
}

/* The library's field label (semibold, default text colour) at 14px */
.id3-label {
  display: inline;
  margin: 0;
  font-size: var(--ka-text-md);
  font-weight: var(--ka-weight-semibold);
  line-height: var(--ka-leading-md);
  color: var(--id3-text);
}

.id3-field__group-title {
  margin: var(--ka-space-3) 0 0;
  font-size: var(--ka-text-lg);
  line-height: var(--ka-leading-lg);
  font-weight: var(--ka-weight-semibold);
  color: var(--id3-text);
}

.id3-link {
  font-size: var(--ka-text-md);
  line-height: var(--ka-leading-md);
}

.id3-input {
  display: block;
  width: 100%;
  height: var(--id3-control-h);
  margin: 0;
  padding: 0 var(--ka-space-6);
  font: var(--ka-weight-regular) var(--ka-text-lg) var(--id3-font);
  color: var(--id3-text);
  background-color: var(--id3-well);
  border: var(--ka-line-thin) solid var(--id3-border);
  border-radius: var(--id3-input-radius);
  outline: none;
  transition: border-color var(--id3-transition), box-shadow var(--id3-transition), background-color var(--id3-transition);
}

.id3-input::placeholder {
  color: var(--id3-text-muted);
  opacity: 1;
}

/* Edge's own reveal and clear buttons, next to the theme's */
.id3-input::-ms-reveal,
.id3-input::-ms-clear {
  display: none;
}

.id3-input:hover {
  border-color: var(--id3-border-strong);
}

.id3-input:focus {
  outline: none;
  border-color: var(--id3-primary);
  box-shadow: 0 0 0 var(--ka-line-thick) var(--ka-color-primary-tint-strong);
}

.id3-input[aria-invalid="true"] {
  border-color: var(--id3-error);
}

.id3-input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 var(--ka-line-thick) var(--ka-color-danger-tint);
}

.id3-input:disabled,
.id3-input[readonly] {
  border-style: dashed;
  cursor: not-allowed;
}

.id3-input:disabled {
  opacity: var(--ka-opacity-disabled);
}

/* Browser autofill keeps the dark field instead of its light default: an opaque fill of the field's colour on
   the panel (input-bg is the surface darkened by 22% black) */
.id3-input:-webkit-autofill,
.id3-input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--id3-text);
  caret-color: var(--id3-text);
  -webkit-box-shadow: inset 0 0 0 1000px color-mix(in srgb, var(--id3-surface) 78%, black);
  box-shadow: inset 0 0 0 1000px color-mix(in srgb, var(--id3-surface) 78%, black);
  transition: background-color 9999s ease-out 0s;
}

.id3-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--id3-text);
  -webkit-box-shadow: inset 0 0 0 1000px color-mix(in srgb, var(--id3-surface) 78%, black), 0 0 0 var(--ka-line-thick) var(--ka-color-primary-tint-strong);
  box-shadow: inset 0 0 0 1000px color-mix(in srgb, var(--id3-surface) 78%, black), 0 0 0 var(--ka-line-thick) var(--ka-color-primary-tint-strong);
}

textarea.id3-input {
  height: auto;
  min-height: 96px;
  padding: var(--ka-space-4) var(--ka-space-6);
  line-height: var(--ka-leading-lg);
  resize: vertical;
}

/* A select with the library's chevron. A background image cannot read a variable, so the chevron's colour is
   --ka-color-fg3 written out (#BCCAD2); regenerate it with the theme if fg3 changes. */
select.id3-input {
  padding-right: var(--ka-space-10);
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BCCAD2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ka-space-5) center;
  background-size: var(--ka-icon-lg);
}

select.id3-input[multiple] {
  height: auto;
  padding: var(--ka-space-3) var(--ka-space-4);
  background-image: none;
}

select.id3-input option {
  color: var(--id3-text);
  background: var(--id3-surface);
}

.id3-input--code {
  font-family: var(--id3-mono);
  font-size: 18px;
  letter-spacing: 0.2em;
}

/* Input with the show-password button inside it */
.id3-input-wrap {
  position: relative;
  display: block;
}

.id3-input-wrap .id3-input {
  padding-right: 50px;
}

.id3-reveal {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: var(--id3-control-h);
  height: var(--id3-control-h);
  padding: 0;
  color: var(--id3-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--id3-input-radius);
  cursor: pointer;
  transition: color var(--id3-transition);
}

.id3-reveal .id3-icon {
  width: var(--ka-icon-xl);
  height: var(--ka-icon-xl);
}

.id3-reveal:hover {
  color: var(--id3-text);
}

/* The ring inside the field, as the library's field buttons */
.id3-reveal:focus-visible {
  outline-offset: calc(-1 * var(--ka-offset-focus) - var(--ka-line-thick));
}

/* The library's field messages: medium weight in the tone's text colour; the icon says error or match without
   relying on colour */
.id3-field__error,
.id3-field__msg {
  display: flex;
  align-items: flex-start;
  gap: var(--ka-space-3);
  margin: 0;
  font-size: var(--ka-text-sm);
  font-weight: var(--ka-weight-medium);
  line-height: var(--ka-leading-sm);
  color: var(--id3-error-text);
}

.id3-field__error::before,
.id3-field__msg::before {
  content: "";
  flex: none;
  width: var(--ka-icon-sm);
  height: var(--ka-icon-sm);
  margin-top: calc((var(--ka-leading-sm) - var(--ka-icon-sm)) / 2);
  background-color: currentColor;
  -webkit-mask: var(--id3-i-alert) center / contain no-repeat;
  mask: var(--id3-i-alert) center / contain no-repeat;
}

.id3-field__msg--ok {
  color: var(--id3-success-text);
}

.id3-field__msg--ok::before {
  -webkit-mask-image: var(--id3-i-ok);
  mask-image: var(--id3-i-ok);
}

.id3-field__help {
  font-size: var(--ka-text-sm);
  line-height: var(--ka-leading-sm);
  color: var(--id3-text-muted);
}

/* ---------- Checkboxes and radio buttons: the library's Checkbox and Radio ---------- */

.id3-check {
  display: flex;
  align-items: flex-start;
  gap: var(--ka-space-4);
  font-size: var(--ka-text-md);
  line-height: var(--ka-leading-md);
  color: var(--id3-text);
}

.id3-check__input {
  flex: none;
  display: inline-grid;
  place-content: center;
  width: var(--ka-icon-md);
  height: var(--ka-icon-md);
  margin: calc((var(--ka-leading-md) - var(--ka-icon-md)) / 2) 0 0;
  background: var(--id3-well);
  border: var(--ka-line-thin) solid var(--ka-color-control-edge);
  border-radius: var(--ka-radius-xs);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--id3-transition), border-color var(--id3-transition);
}

.id3-check__input[type="radio"] {
  border-radius: var(--ka-radius-pill);
}

.id3-check:hover .id3-check__input:not(:disabled) {
  border-color: var(--id3-text-2);
}

.id3-check__input[type="checkbox"]:checked {
  background: var(--id3-primary);
  border-color: var(--id3-primary);
}

.id3-check__input[type="checkbox"]:checked::before {
  content: "";
  width: var(--ka-icon-xs);
  height: var(--ka-icon-xs);
  background-color: var(--ka-color-fg-on-primary);
  -webkit-mask: var(--id3-i-tick) center / contain no-repeat;
  mask: var(--id3-i-tick) center / contain no-repeat;
}

.id3-check__input[type="radio"]:checked {
  border-color: var(--id3-primary);
}

.id3-check__input[type="radio"]:checked::before {
  content: "";
  width: var(--ka-space-4);
  height: var(--ka-space-4);
  border-radius: var(--ka-radius-circle);
  background: var(--id3-primary);
}

.id3-check__input[aria-invalid="true"] {
  border-color: var(--id3-error);
}

.id3-check__input:disabled {
  opacity: var(--ka-opacity-disabled);
  cursor: not-allowed;
}

.id3-check__label {
  margin: 0;
  font-weight: var(--ka-weight-regular);
  cursor: pointer;
}

.id3-check__label--disabled {
  opacity: var(--ka-opacity-disabled);
  cursor: not-allowed;
}

.id3-form__options,
.id3-form__settings {
  display: flex;
  flex-direction: column;
  gap: var(--ka-space-5);
}

.id3-form__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--ka-space-5);
}

/* ---------- Buttons: the library's Button (primary and secondary) at the approved 52px ---------- */

.id3-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ka-space-4);
  min-height: var(--id3-button-h);
  margin: 0;
  padding: 0 var(--ka-space-6);
  font: var(--ka-weight-medium) var(--ka-text-lg) / var(--ka-leading-lg) var(--id3-font);
  text-align: center;
  text-decoration: none;
  white-space: normal;
  border: var(--ka-line-thin) solid transparent;
  border-radius: var(--id3-radius);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--id3-transition), border-color var(--id3-transition), color var(--id3-transition);
}

.id3-btn:hover {
  text-decoration: none;
}

.id3-btn--primary {
  color: var(--id3-on-primary);
  background-color: var(--id3-primary);
}

.id3-btn--primary:hover {
  color: var(--id3-on-primary);
  background-color: var(--id3-primary-hover);
}

.id3-btn--primary:active {
  background-color: var(--id3-primary-active);
}

/* The library's secondary button: the surface with a hairline, darkened or lightened on hover and press */
.id3-btn--outline {
  color: var(--id3-text);
  background-color: var(--id3-surface);
  border-color: var(--id3-border);
}

.id3-btn--outline:hover {
  color: var(--id3-text);
  background-image: linear-gradient(var(--ka-color-hover), var(--ka-color-hover));
  border-color: var(--id3-border-strong);
}

.id3-btn--outline:active {
  background-image: linear-gradient(var(--ka-color-pressed), var(--ka-color-pressed));
}

.id3-btn--block {
  width: 100%;
}

.id3-btn:disabled,
.id3-btn[aria-disabled="true"],
.id3-btn--busy {
  opacity: var(--ka-opacity-disabled);
  cursor: progress;
  pointer-events: none;
}

.id3-back {
  display: inline-flex;
  align-items: center;
  gap: var(--ka-space-4);
  width: fit-content;
  font-size: var(--ka-text-md);
  line-height: var(--ka-leading-md);
}

.id3-back .id3-icon {
  width: var(--ka-icon-md);
  height: var(--ka-icon-md);
}

.id3-actions {
  display: flex;
  flex-direction: column;
  gap: var(--ka-space-5);
}

/* ---------- Identity providers ---------- */

.id3-social {
  display: flex;
  flex-direction: column;
  gap: var(--ka-space-6);
}

.id3-social > hr {
  display: none;
}

.id3-social > h2,
.id3-social__divider {
  display: flex;
  align-items: center;
  gap: var(--ka-space-5);
  margin: 0;
  font-size: var(--ka-text-sm);
  font-weight: var(--ka-weight-regular);
  line-height: var(--ka-leading-sm);
  color: var(--id3-text-muted);
}

.id3-social > h2::before,
.id3-social > h2::after,
.id3-social__divider::before,
.id3-social__divider::after {
  content: "";
  flex: 1;
  height: var(--ka-line-thin);
  background: var(--id3-hair);
}

.id3-social__list {
  display: grid;
  gap: var(--ka-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.id3-social__list--grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.id3-social__icon {
  width: var(--ka-icon-lg);
  height: var(--ka-icon-lg);
}

.id3-social__name {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---------- Choice tiles (select authenticator, OTP devices): secondary-button surfaces ---------- */

.id3-choices {
  display: flex;
  flex-direction: column;
  gap: var(--ka-space-4);
}

.id3-choice {
  display: flex;
  align-items: center;
  gap: var(--ka-space-6);
  width: 100%;
  margin: 0;
  padding: var(--ka-space-6);
  font: inherit;
  text-align: left;
  color: var(--id3-text);
  background-color: var(--id3-surface);
  border: var(--ka-line-thin) solid var(--id3-border);
  border-radius: var(--id3-input-radius);
  cursor: pointer;
  transition: border-color var(--id3-transition), background-color var(--id3-transition);
}

.id3-choice:hover {
  background-image: linear-gradient(var(--ka-color-hover), var(--ka-color-hover));
  border-color: var(--id3-border-strong);
}

.id3-choice:active {
  background-image: linear-gradient(var(--ka-color-pressed), var(--ka-color-pressed));
}

.id3-choice__icon {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--ka-color-primary-ink);
}

.id3-choice__icon .id3-icon {
  width: var(--ka-icon-xl);
  height: var(--ka-icon-xl);
}

.id3-choice__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--ka-space-1);
  min-width: 0;
}

.id3-choice__title {
  font-size: var(--ka-text-lg);
  font-weight: var(--ka-weight-medium);
  line-height: var(--ka-leading-lg);
}

.id3-choice__desc {
  font-size: var(--ka-text-sm);
  line-height: var(--ka-leading-sm);
  color: var(--id3-text-muted);
}

.id3-choice__fill {
  display: none;
}

.id3-choice__arrow {
  flex: none;
  color: var(--id3-text-muted);
}

/* OTP devices: a radio button drawn as a tile */
.id3-tiles {
  display: flex;
  flex-direction: column;
  gap: var(--ka-space-4);
}

.id3-tile__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.id3-tile {
  display: flex;
  align-items: center;
  gap: var(--ka-space-5);
  padding: var(--ka-space-5) var(--ka-space-6);
  font-size: var(--ka-text-md);
  font-weight: var(--ka-weight-medium);
  color: var(--id3-text);
  background: var(--id3-well);
  border: var(--ka-line-thin) solid var(--id3-border);
  border-radius: var(--id3-input-radius);
  cursor: pointer;
  transition: border-color var(--id3-transition), background-color var(--id3-transition);
}

.id3-tile:hover {
  border-color: var(--id3-border-strong);
}

.id3-tile__header,
.id3-tile__icon {
  display: inline-flex;
  align-items: center;
  gap: var(--ka-space-5);
}

.id3-tile__icon {
  color: var(--ka-color-primary-ink);
}

.id3-tile__input:checked + .id3-tile {
  border-color: var(--id3-primary);
  background: var(--ka-color-primary-tint);
}

.id3-tile__input:focus-visible + .id3-tile {
  outline: var(--ka-line-thick) solid var(--ka-color-focus);
  outline-offset: var(--ka-offset-focus);
}

/* ---------- Authenticator app setup ---------- */

.id3-steps {
  display: flex;
  flex-direction: column;
  gap: var(--ka-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: id3-step;
}

.id3-steps > li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ka-space-4);
  padding-left: 38px;
  color: var(--id3-text-2);
  counter-increment: id3-step;
}

.id3-steps > li::before {
  content: counter(id3-step);
  position: absolute;
  top: -3px;
  left: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: var(--ka-text-sm);
  font-weight: var(--ka-weight-semibold);
  color: var(--ka-color-primary-ink);
  background: var(--ka-color-primary-tint);
  border-radius: var(--ka-radius-circle);
}

.id3-steps ul {
  margin: 0;
  padding-left: 18px;
}

/* The QR code needs its white quiet zone whatever the theme */
.id3-qr {
  display: block;
  width: 180px;
  height: 180px;
  padding: var(--ka-space-4);
  background: white;
  border-radius: var(--ka-radius-sm);
}

.id3-secret {
  display: block;
  padding: var(--ka-space-4) var(--ka-space-5);
  font-family: var(--id3-mono);
  font-size: var(--ka-text-md);
  letter-spacing: var(--ka-tracking-wide);
  color: var(--id3-text);
  overflow-wrap: anywhere;
  background: var(--id3-well);
  border: var(--ka-line-thin) solid var(--id3-hair);
  border-radius: var(--id3-input-radius);
}

/* ---------- Signing out of other applications ---------- */

.id3-client-list {
  display: flex;
  flex-direction: column;
  gap: var(--ka-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.id3-client-list li {
  padding: var(--ka-space-4) var(--ka-space-6);
  font-size: var(--ka-text-md);
  color: var(--id3-text-2);
  background: var(--id3-well);
  border: var(--ka-line-thin) solid var(--id3-hair);
  border-radius: var(--id3-input-radius);
}

.id3-trace {
  font-size: var(--ka-text-sm);
  color: var(--id3-text-muted);
  overflow-wrap: anywhere;
}

/* ---------- Short desktop windows ---------- */

@media (max-height: 700px) and (min-width: 768px) {
  .id3-header {
    padding-top: var(--ka-space-7);
    padding-bottom: var(--ka-space-7);
  }

  .id3-header__logo {
    height: 48px;
  }
}

/* ---------- Phone ---------- */

@media (max-width: 767px) {
  .id3-bg::after {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--id3-bg) 30%, transparent) 0%,
      color-mix(in srgb, var(--id3-bg) 86%, transparent) 30%,
      color-mix(in srgb, var(--id3-bg) 97%, transparent) 100%
    );
  }

  /* Over the live stands the fade stays light above, behind and below the panel, so the rig shows around it, and
     turns dark only in the footer's band at the bottom */
  .id3-bg--live::after {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--id3-bg) 10%, transparent) 0%,
      color-mix(in srgb, var(--id3-bg) 20%, transparent) 50%,
      color-mix(in srgb, var(--id3-bg) 40%, transparent) 74%,
      color-mix(in srgb, var(--id3-bg) 88%, transparent) 86%,
      color-mix(in srgb, var(--id3-bg) 95%, transparent) 100%
    );
  }

  .id3-header {
    padding: var(--ka-space-7);
  }

  .id3-header__logo {
    height: 40px;
  }

  .id3-main {
    align-items: flex-start;
    padding: 48px var(--ka-space-6) var(--ka-space-6);
  }

  .id3-panel {
    width: 100%;
    gap: var(--ka-space-7);
    padding: 26px 22px;
  }

  .id3-title {
    font-size: var(--ka-text-xxl);
  }

  .id3-footer {
    flex-direction: column;
    gap: var(--ka-space-1);
    padding: var(--ka-space-6);
    font-size: var(--ka-text-xs);
    line-height: var(--ka-leading-xs);
  }

  /* The support contact is already in the panel */
  .id3-footer__support {
    display: none;
  }

  .id3-social__list--grid {
    grid-template-columns: minmax(0, 1fr);
  }
}