/* =========================================================================
   Trouwen: form controls (UiTextField, UiTextArea, UiToggle, UiChip,
   UiCheckCard, UiRadioCard). Global because the native inputs are rendered by
   Blazor's built-in Input* components. Tokens only.
   ========================================================================= */

/* ---- Text fields ---- */
.ui-field { display: grid; gap: var(--space-2); }
.ui-field + .ui-field { margin-top: var(--space-5); }

.ui-field__label {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}

.ui-field__hint {
  margin-top: calc(-1 * var(--space-1));
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.ui-field__input {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-sm);
  background: var(--color-field-bg);
  color: var(--color-text);
  transition:
    border-color var(--dur-quick) var(--ease-soft),
    box-shadow var(--dur-quick) var(--ease-soft);
}

.ui-field__input--area { resize: vertical; min-height: 7.5rem; line-height: var(--lh-body); }
.ui-field__input::placeholder { color: color-mix(in srgb, var(--color-text-muted) 75%, transparent); }
.ui-field__input:hover { border-color: var(--color-line-strong); }

.ui-field__input:focus-visible,
.ui-field__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

.ui-field__input.invalid,
.ui-field__input[aria-invalid="true"] { border-color: var(--color-error); }

.ui-field__error:empty { display: none; }

.validation-message,
.validation-errors {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  font-size: var(--fs-small);
  color: var(--color-error);
  animation: fade-rise var(--dur-base) var(--ease-soft);
}

.validation-message::before {
  content: "";
  flex: none;
  width: .4rem;
  height: .4rem;
  border-radius: var(--radius-pill);
  background: currentColor;
  transform: translateY(-.1em);
}

/* ---- Shared: visually hidden but focusable native input ---- */
.ui-toggle__input,
.ui-chip__input,
.ui-choice__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

/* ---- Toggle ---- */
.ui-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--tap-min);
  padding-block: var(--space-3);
  cursor: pointer;
}

.ui-toggle + .ui-toggle { border-top: 1px solid var(--color-line); }
.ui-toggle__text { display: grid; gap: var(--space-1); }
.ui-toggle__label { font-weight: var(--fw-medium); }
.ui-toggle__description { font-size: var(--fs-small); color: var(--color-text-muted); }

.ui-toggle__track {
  position: relative;
  flex: none;
  width: 3.25rem;
  height: 1.875rem;
  border-radius: var(--radius-pill);
  background: var(--color-band);
  box-shadow: inset 0 0 0 1px var(--color-field-border);
  transition: background-color var(--dur-base) var(--ease-soft);
}

.ui-toggle__knob {
  position: absolute;
  top: .1875rem;
  left: .1875rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: 0 1px 3px rgb(47 43 39 / 0.18);
  transition: transform var(--dur-base) var(--ease-soft);
}

.ui-toggle__input:checked + .ui-toggle__track { background: var(--color-primary); box-shadow: none; }
.ui-toggle__input:checked + .ui-toggle__track .ui-toggle__knob { transform: translateX(1.375rem); }
.ui-toggle__input:focus-visible + .ui-toggle__track { box-shadow: var(--focus-ring); }

/* ---- Chip ---- */
.ui-chip { position: relative; display: inline-flex; cursor: pointer; }

.ui-chip__face {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--color-band);
  font-size: var(--fs-small);
  transition:
    background-color var(--dur-quick) var(--ease-soft),
    border-color var(--dur-quick) var(--ease-soft);
}

.ui-chip:hover .ui-chip__face { border-color: var(--color-line-strong); }

.ui-chip__check {
  width: 0;
  height: 1rem;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition:
    width var(--dur-base) var(--ease-soft),
    opacity var(--dur-base) var(--ease-soft);
}

.ui-chip__input:checked + .ui-chip__face {
  background: var(--color-selected-bg);
  border-color: var(--color-accent);
}

.ui-chip__input:checked + .ui-chip__face .ui-chip__check { width: 1rem; opacity: 1; }
.ui-chip__input:focus-visible + .ui-chip__face { box-shadow: var(--focus-ring); }

/* ---- Choice cards (check + radio) ---- */
.ui-choice { position: relative; display: block; cursor: pointer; }
.ui-choice + .ui-choice { margin-top: var(--space-3); }

.ui-choice__face {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 4.5rem;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition:
    background-color var(--dur-base) var(--ease-soft),
    border-color var(--dur-base) var(--ease-soft),
    transform var(--dur-quick) var(--ease-soft);
}

.ui-choice:hover .ui-choice__face { border-color: var(--color-line-strong); }
.ui-choice:active .ui-choice__face { transform: scale(.995); }
.ui-choice__text { display: grid; gap: var(--space-1); }

.ui-choice__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
}

.ui-choice__description { font-size: var(--fs-small); color: var(--color-text-muted); }

.ui-choice__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  transition:
    background-color var(--dur-base) var(--ease-soft),
    border-color var(--dur-base) var(--ease-soft);
}

.ui-choice__mark--box { border-radius: var(--radius-sm); }

.ui-choice__mark svg {
  width: 1rem;
  fill: none;
  stroke: var(--color-text-inverse);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(.6);
  transition:
    opacity var(--dur-base) var(--ease-soft),
    transform var(--dur-base) var(--ease-soft);
}

.ui-choice__input:checked + .ui-choice__face {
  background: var(--color-selected-bg);
  border-color: var(--color-accent);
}

.ui-choice__input:checked + .ui-choice__face .ui-choice__mark {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.ui-choice__input:checked + .ui-choice__face .ui-choice__mark svg { opacity: 1; transform: none; }
.ui-choice__input:focus-visible + .ui-choice__face { box-shadow: var(--focus-ring); }

/* ---- Fieldset groups ---- */
.ui-group { border: 0; padding: 0; margin: 0; min-width: 0; }

.ui-group > legend {
  padding: 0;
  margin-bottom: var(--space-4);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}

.ui-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---- Form layout (account pages and other forms) ---- */
.form { display: grid; gap: var(--space-5); }
.form .ui-field + .ui-field { margin-top: 0; }
.form__pair { display: grid; gap: var(--space-5); }
.form__row { padding-top: var(--space-1); }
.form__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; padding-top: var(--space-2); }
.form__footnote { font-size: var(--fs-small); color: var(--color-text-muted); }
.form--boxed {
  margin-top: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.form-notice { margin-bottom: var(--space-5); }
.block { display: block; }

@media (min-width: 36rem) {
  .form__pair { grid-template-columns: 1fr 1fr; }
}

/* ---- Lists of links and details ---- */
.link-list { display: grid; gap: var(--space-2); }

.action-list {
  display: grid;
  margin-top: var(--space-6);
  border-top: 1px solid var(--color-line);
}

.action-list li { border-bottom: 1px solid var(--color-line); }

.action-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: var(--tap-min);
  padding-block: var(--space-4);
  color: var(--color-text);
  background-image: none;
}

.action-list a::after {
  content: "→";
  color: var(--color-accent);
  transition: transform var(--dur-base) var(--ease-soft);
}

.action-list a:hover::after { transform: translateX(var(--space-1)); }

.details { display: grid; gap: var(--space-3); }
.details > div { display: flex; justify-content: space-between; gap: var(--space-4); align-items: baseline; }
.details dt { color: var(--color-text-muted); font-size: var(--fs-small); }
.details dd { margin: 0; text-align: right; }

/* ---- Two-factor setup ---- */
.setup-steps { display: grid; gap: var(--space-7); counter-reset: step; }
.setup-steps > li { display: grid; gap: var(--space-3); counter-increment: step; }

.setup-steps__title {
  font-size: var(--fs-h4);
}

.setup-steps__title::before {
  content: counter(step, decimal-leading-zero) "  ";
  color: var(--color-accent);
  font-variant-numeric: lining-nums tabular-nums;
}

.qr {
  width: min(100%, 13rem);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.qr svg { width: 100%; height: auto; }

.key {
  font-size: var(--fs-small);
  letter-spacing: .08em;
  word-break: break-all;
}

/* ---- Calm single-message pages (not found, no access, unsupported country) ---- */
.calm-page {
  display: grid;
  place-items: center;
  min-height: 80svh;
  padding: calc(var(--header-h) + var(--space-8)) var(--gutter) var(--space-9);
  text-align: center;
}

.calm-page__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  max-width: 36rem;
}

.calm-page__inner > * { animation: fade-rise var(--dur-slow) var(--ease-soft) both; }
.calm-page__inner > :nth-child(2) { animation-delay: var(--stagger); }
.calm-page__inner > :nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.calm-page__inner > :nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
.calm-page .cluster { justify-content: center; }