/* SPDX-License-Identifier: AGPL-3.0-only
 * SPDX-FileCopyrightText: 2021-2026 DALICC - Verein zur Foerderung der Rechtssicherheit in der Datenbewirtschaftung (ZVR 1249185710)
 */
/* The registration policy page and the sign-up pages.
 *
 * The "?" control: a round button next to an option, and a paragraph under it that
 * shows while the pointer rests on the control, while the button has keyboard focus,
 * and while it is open (aria-expanded="true", set by registration.js on a click).
 * The paragraph stays in the document either way, because it is the button's
 * description for assistive technology.
 */

.registration-lede {
  max-width: 72ch;
}

.registration-group {
  margin: 0 0 28px;
  padding: 16px 18px 8px;
  border: 1px solid var(--c-rule-strong);
  background: var(--c-surface);
}

.registration-group legend {
  padding: 0 6px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.option-row,
.option-label {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: baseline;
  margin: 0 0 12px;
}

.option-row input[type="checkbox"],
.option-row input[type="radio"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.option-row label,
.option-label label {
  margin: 0;
  font-weight: 400;
  text-transform: none;
}

.option-recommended {
  color: var(--c-slate-dark);
  font-weight: 600;
}

.help-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  flex: 1 1 100%;
  gap: 6px;
}

.option-row .help-toggle,
.option-label .help-toggle {
  flex: 0 1 auto;
}

.help-toggle__button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--c-rule-strong);
  border-radius: 50%;
  background: var(--c-surface-alt);
  color: var(--c-ink);
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
}

.help-toggle__button:hover,
.help-toggle__button:focus-visible,
.help-toggle__button[aria-expanded="true"] {
  background: var(--c-slate);
  color: var(--c-white);
}

.help-toggle__text {
  display: none;
  flex: 1 1 100%;
  max-width: 68ch;
  margin: 4px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--c-slate);
  background: var(--c-surface-alt);
  color: var(--c-slate-dark);
}

.option-row .help-toggle__text,
.option-label .help-toggle__text {
  order: 10;
}

.help-toggle:hover .help-toggle__text,
.help-toggle__button:focus-visible + .help-toggle__text,
.help-toggle__button[aria-expanded="true"] + .help-toggle__text {
  display: block;
}

/* The option row wraps, so the opened paragraph takes a line of its own under it. */
.option-row:has(.help-toggle__button[aria-expanded="true"]) .help-toggle,
.option-row:has(.help-toggle:hover) .help-toggle,
.option-row:has(.help-toggle__button:focus-visible) .help-toggle,
.option-label:has(.help-toggle__button[aria-expanded="true"]) .help-toggle,
.option-label:has(.help-toggle:hover) .help-toggle,
.option-label:has(.help-toggle__button:focus-visible) .help-toggle {
  flex: 1 1 100%;
}

.registration-defaults {
  margin-top: 32px;
}

/* The sign-up and identity provider pages. */
.sso-divider {
  margin: 20px 0;
  text-align: center;
  color: var(--c-slate-muted);
}

.sso-button {
  width: 100%;
}

.pending-queue {
  margin: 0 0 32px;
}