/* Artific login theme. Hand-written from the design system's tokens (frontend/design/tokens/) --
   no Tailwind, no PatternFly: this theme's parent is "base", which carries no styling of its
   own, so every visual rule here is this theme's. Light mode only, per frontend/design/README.md
   "The look, in numbers". The layout and its numbers are frontend/design/mockups/Inloggen.dc.html:
   the split sign-in page (1a), the side-path card (2a to 6e) and the phone column below 48rem
   (m1 to m6). */

@import url("tokens/colors.css");
@import url("tokens/shape.css");
@import url("tokens/typography.css");

@font-face {
  font-family: "Switzer";
  src: url("../fonts/Switzer-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../fonts/Switzer-VariableItalic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Italic-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Squircle corners are progressive enhancement on top of border-radius, same as the platform
   (frontend/design/README.md "Radii (squircle)"): browsers without corner-shape keep the plain
   rounded rectangle set below. */
@supports (corner-shape: squircle) {
  .af-card,
  .af-button,
  .af-input,
  .af-alert,
  .af-icon-tile,
  .af-social-button {
    corner-shape: squircle;
  }
}

:root {
  color-scheme: only light;
  --radius-control: var(--radius-md);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--color-white);
  color: var(--color-primary-950);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  -webkit-font-smoothing: antialiased;
}

p {
  margin: 0;
}

a {
  color: var(--color-primary-600);
  font-weight: 500;
  text-decoration: none;
}
a:hover {
  color: var(--color-primary-700);
  text-decoration: underline;
}
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

/* --- Icons: Font Awesome Pro Light, one file per glyph ---------------------------------------
   resources/img/icons/*.svg are the `@fortawesome/pro-light-svg-icons` path data verbatim, the
   same glyphs frontend/src/components/icon.tsx draws. A mask paints them in currentColor, so the
   theme needs neither an icon font nor inline path data in every template. */

.af-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--af-icon) center / contain no-repeat;
  mask: var(--af-icon) center / contain no-repeat;
}
.af-icon-arrow-left { --af-icon: url("../img/icons/arrow-left.svg"); }
.af-icon-arrow-right-from-bracket { --af-icon: url("../img/icons/arrow-right-from-bracket.svg"); }
.af-icon-circle-check { --af-icon: url("../img/icons/circle-check.svg"); }
.af-icon-circle-exclamation { --af-icon: url("../img/icons/circle-exclamation.svg"); }
.af-icon-circle-info { --af-icon: url("../img/icons/circle-info.svg"); }
.af-icon-circle-xmark { --af-icon: url("../img/icons/circle-xmark.svg"); }
.af-icon-clock { --af-icon: url("../img/icons/clock.svg"); }
.af-icon-envelope { --af-icon: url("../img/icons/envelope.svg"); }
.af-icon-key { --af-icon: url("../img/icons/key.svg"); }
.af-icon-lock { --af-icon: url("../img/icons/lock.svg"); }
.af-icon-mobile { --af-icon: url("../img/icons/mobile.svg"); }
.af-icon-shield-check { --af-icon: url("../img/icons/shield-check.svg"); }
.af-icon-user-pen { --af-icon: url("../img/icons/user-pen.svg"); }
.af-icon-user-plus { --af-icon: url("../img/icons/user-plus.svg"); }

/* --- The two shells -------------------------------------------------------------------------- */

/* The phone column (m1 to m6) is the default: white, the logo top left, one column of 24px
   gutters, the certification at the foot. 48rem up, each shell draws its own frame. */
.af-split,
.af-page {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 3.875rem 1.5rem 1.75rem;
  gap: 1.5rem;
}

.af-brand {
  display: none;
}

/* Not positioned on the phone: the locale switch is absolutely placed and must resolve against
   .af-split, the same box it resolves against on .af-page, or it sits 3.875rem lower here than on
   every other page. From 48rem the half is the frame the switch sits in. */
.af-split-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1.5rem;
}

.af-logo {
  align-self: flex-start;
  height: 1.5rem;
  width: auto;
  user-select: none;
}

.af-card,
.af-split-main .af-content {
  flex: 1;
  width: 100%;
}

.af-certification {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-gray-400);
}

@media (min-width: 48rem) {
  .af-phone-only {
    display: none;
  }

  /* 1a: the brand panel and the form, half and half. */
  .af-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 0;
    gap: 0;
  }
  .af-brand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3.5rem;
    background: var(--color-primary-500);
    color: var(--color-white);
  }
  .af-brand-wordmark {
    align-self: flex-start;
    height: 2.25rem;
    width: auto;
    user-select: none;
  }
  .af-brand-copy {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    max-width: 28.75rem;
  }
  .af-brand-tagline {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.05;
  }
  .af-brand-lead {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--color-primary-50);
  }
  .af-brand-certification {
    justify-content: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-primary-50);
  }
  .af-split-main {
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 3.5rem;
  }
  .af-split-main .af-content {
    flex: none;
    max-width: 25rem;
    gap: 1.25rem;
  }

  /* 2a to 6e: the logo, one centred card on gray-50, the certification below. */
  .af-page {
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    background: var(--color-gray-50);
  }
  .af-page .af-logo {
    align-self: center;
    height: 1.625rem;
  }
  .af-card {
    flex: none;
    max-width: 27.5rem;
    padding: 2rem;
    border-radius: var(--radius-xl);
    background: var(--color-white);
    box-shadow: var(--shadow-lg);
  }
}

/* --- What every page puts in the column ------------------------------------------------------ */

.af-content {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.af-head {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.af-icon-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.875rem;
  font-size: 1.25rem;
  background: var(--color-primary-50);
  color: var(--color-primary-600);
}
.af-tone-success {
  background: color-mix(in srgb, var(--color-green-500) 12%, var(--color-white));
  color: var(--color-green-700);
}
.af-tone-warning {
  background: var(--color-secondary-50);
  color: var(--color-secondary-700);
}
.af-tone-danger {
  background: color-mix(in srgb, var(--color-red-500) 10%, var(--color-white));
  color: var(--color-red-600);
}

.af-title {
  margin: 0;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.2;
}

.af-lead,
.af-head .af-instruction {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-gray-600);
  text-wrap: pretty;
}

.af-back-link {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--color-gray-600);
}
.af-back-link:hover {
  color: var(--color-primary-950);
}
.af-back-link-below {
  align-self: center;
}

.af-required-note {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-gray-500);
}
.af-required-mark {
  margin-left: 0.125rem;
  color: var(--color-red-500);
}

/* The account a multi-step flow is for, with the way to start again as someone else (3b, 4a). */
.af-user-chip {
  display: flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.625rem;
  max-width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
}
.af-user-chip #kc-attempted-username {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.af-user-chip a {
  color: var(--color-gray-500);
}
.af-user-initial {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  background: var(--color-primary-500);
  color: var(--color-white);
  font-size: 0.6875rem;
}

/* --- Form controls, matching Button/Input/Label/Error one to one ---------------------------- */

form {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin: 0;
}

.af-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0;
}

.af-label {
  display: block;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-primary-950);
}

.af-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.af-label-row a {
  font-size: 0.8125rem;
}

.af-input-wrapper {
  position: relative;
}

.af-input {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-control);
  background: var(--color-white);
  color: var(--color-primary-950);
  font-family: var(--font-body);
  font-size: 0.875rem;
  transition: border-color 200ms var(--ease-default);
}
.af-input::placeholder {
  color: var(--color-gray-400);
}
.af-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.af-input[aria-invalid="true"] {
  border-color: var(--color-red-400);
}

/* The six digits as one field (4a, 4b, 4d): the mockup's boxes, without a script splitting a code
   across inputs that autofill and paste would then have to stitch back together. */
.af-code-input {
  min-height: 3.5rem;
  font-family: var(--font-mono);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.5em;
  text-align: center;
}

/* Room for the toggle, taken from the wrapper and not from [type="password"]: the script flips
   the field to type="text" to reveal it, and a rule keyed on the type would drop the padding at
   exactly the moment the icon is still sitting there. */
.af-input-wrapper:has(.af-password-toggle) .af-input {
  padding-right: 3rem;
}

.af-password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 3rem;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-gray-400);
  cursor: pointer;
}
.af-password-toggle:hover {
  color: var(--color-gray-600);
}
/* 576x512 artwork: the width is what is set, the height follows, the way the platform sizes its
   own `font-awesome-icon` in the field's end slot. */
.af-password-toggle-icon {
  display: block;
  width: 1.25rem;
  height: auto;
}
.af-password-toggle-icon[hidden] {
  display: none;
}

.af-help-text {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-gray-500);
}

.af-error-text {
  display: block;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-red-600);
}

/* The realm's password rules under the new password (5c), as help: stated, not checked live. */
.af-rules {
  display: grid;
  gap: 0.375rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
  color: var(--color-gray-500);
}
.af-rules li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.af-rules li::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-full);
  background: var(--color-gray-300);
}

.af-checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  font-size: 0.8125rem;
}
.af-checkbox-row input[type="checkbox"],
.af-checkbox-row input[type="radio"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--color-primary-500);
}
.af-checkbox-row label {
  color: var(--color-primary-950);
}

.af-form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.af-form-actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0.25rem 0 0;
}
/* A cancel-aia escape hatch (update-password, update-profile, config-totp, verify-email) sits
   next to the primary submit; give both equal width instead of stacking full-width buttons. */
form .af-form-actions:has(button.af-button-secondary) {
  flex-direction: row;
}
form .af-form-actions:has(button.af-button-secondary) .af-button {
  width: auto;
  flex: 1;
}

.af-link-row {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  font-size: 0.8125rem;
}
.af-quiet-link {
  color: var(--color-gray-600);
}

.af-instruction {
  margin: 0;
  color: var(--color-gray-700);
  font-size: 0.875rem;
  line-height: 1.6;
}

.af-trace {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-gray-400);
}

.af-actions-list {
  margin: 0;
  padding-left: 1.25rem;
}

/* 4d: the code beside the key to type over. */
.af-steps {
  display: grid;
  gap: 0.875rem;
}
.af-step-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary-950);
}
.af-totp-pair {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.af-qr {
  flex-shrink: 0;
  width: 9.25rem;
  height: 9.25rem;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.875rem;
}
.af-totp-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-gray-500);
}
.af-totp-details {
  margin: 0;
  padding-left: 1rem;
}
.af-secret {
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-sm);
  background: var(--color-gray-100);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-primary-950);
  overflow-wrap: anywhere;
}

/* --- Button: primary solid, and the dark outline the side paths use for a second way --------- */

.af-button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  padding: 0.625rem 1rem;
  border: 1px solid var(--color-primary-500);
  border-radius: var(--radius-control);
  background: var(--color-primary-500);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 200ms var(--ease-default),
    border-color 200ms var(--ease-default);
}
.af-button:hover {
  background: var(--color-primary-600);
  border-color: var(--color-primary-600);
  color: var(--color-white);
  text-decoration: none;
}
.af-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.af-button-secondary {
  background: transparent;
  color: var(--color-gray-600);
  border-color: var(--color-gray-300);
}
.af-button-secondary:hover {
  background: var(--color-gray-50);
  color: var(--color-gray-700);
  border-color: var(--color-gray-400);
}

/* The realm's own visible identity providers (1a): a letter tile, never a vendor's mark drawn by
   hand, because the list is the realm's and its names are not known here. */
.af-social {
  display: grid;
  gap: 0.625rem;
}
.af-social-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-control);
  background: var(--color-white);
  color: var(--color-gray-900);
  font-size: 0.875rem;
  font-weight: 600;
}
.af-social-button:hover {
  background: var(--color-gray-50);
  color: var(--color-gray-900);
  text-decoration: none;
}
.af-social-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.3125rem;
  box-shadow: inset 0 0 0 1px var(--color-gray-300);
  color: var(--color-gray-700);
  font-size: 0.6875rem;
  font-weight: 800;
}

.af-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--color-gray-400);
}
.af-divider::before,
.af-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-gray-200);
}

/* --- Alert: a tinted block, an icon, the message ---------------------------------------------- */

.af-alert {
  display: flex;
  gap: 0.625rem;
  margin: 0;
  padding: 0.75rem 0.875rem;
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  background: var(--color-primary-50);
  color: var(--color-gray-800);
}
.af-alert .af-icon {
  margin-top: 0.1875rem;
}
.af-alert strong {
  font-weight: 600;
}
.af-alert-error {
  background: color-mix(in srgb, var(--color-red-500) 8%, var(--color-white));
  color: var(--color-red-700);
}
.af-alert-success {
  background: color-mix(in srgb, var(--color-green-500) 10%, var(--color-white));
  color: var(--color-green-800);
}
.af-alert-warning {
  background: var(--color-secondary-50);
  color: var(--color-secondary-800);
}

/* --- Locale switcher: the supported languages as their codes, no menu and no script --------- */

.af-locale {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
}
.af-locale-code {
  color: var(--color-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.af-locale-code:hover {
  color: var(--color-primary-950);
  text-decoration: none;
}
.af-locale-current {
  color: var(--color-primary-950);
}
.af-locale-separator {
  color: var(--color-gray-200);
}

/* --- Touch targets: 44 x 44 CSS px, the drawn size unchanged ----------------------------------
   On a phone or any coarse pointer the small controls keep their drawn size and gain a 44 px hit
   area, so the layout and the type do not move. The password toggle needs none: it is 3rem wide
   and as tall as its field (2.75rem at least). */

@media (pointer: coarse), (max-width: 47.99rem) {
  /* The text links keep their size and gain a transparent hit area from a pseudo-element: the
     sign-in page's "forgot password", the way back, and the "change" link in the account chip. */
  .af-label-row a,
  .af-back-link,
  .af-user-chip a {
    position: relative;
  }
  .af-label-row a::after,
  .af-back-link::after {
    content: "";
    position: absolute;
    inset: -0.75rem 0;
  }
  /* Sideways reach stays under the chip's 0.625rem gap to the name, so the name is not covered. */
  .af-user-chip a::after {
    content: "";
    position: absolute;
    inset: -1rem -0.5rem;
  }

  /* The language codes: a 2.75rem box each, the letters where they were drawn. The box is
     centred on its code, so the switch moves out by half the extra size on each side and the
     separator closes the gap the boxes leave. */
  .af-locale {
    top: 0.78rem;
    right: 0.65rem;
    gap: 0;
  }
  .af-locale-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
  .af-locale-separator {
    margin: 0 -0.5rem;
  }
}