/**
 * @file
 * GDRFAD CAPTCHA in this theme: the widget follows the page's appearance, not
 * the OS. Loaded through libraries-extend; the module is not edited.
 *
 * "html .x" (0,1,1) beats the module's @media (prefers-color-scheme: dark)
 * .gdrfad-captcha (0,1,0), and still loses to the state rules
 * (.gdrfad-captcha.is-pass .gdrfad-captcha__check, 0,3,0), so pass / fail /
 * error / attention / cooldown keep their colours.
 */

html:where(.gdrfad-dds) .gdrfad-captcha,
.gdrfad-dds-embedded .gdrfad-captcha {
  --lc-bg: var(--surface-surface);
  --lc-fg: var(--surface-on-surface);
  --lc-muted: var(--surface-on-surface-variant);
  --lc-border: var(--field-outline);
  --lc-accent: var(--primary-primary);
  --lc-pass: var(--success-success);
  --lc-fail: var(--error-error);
  --lc-shadow: var(--elevation-1);
  --lc-radius: var(--radius-xs);
  font-family: var(--font-family), system-ui, sans-serif;
}

/* Literal #fff / #2a2f3a in the module. */
html:where(.gdrfad-dds) .gdrfad-captcha__check,
html:where(.gdrfad-dds) .gdrfad-captcha__fallback-audio-btn,
html:where(.gdrfad-dds) .gdrfad-captcha__fallback-input,
.gdrfad-dds-embedded .gdrfad-captcha__check,
.gdrfad-dds-embedded .gdrfad-captcha__fallback-audio-btn,
.gdrfad-dds-embedded .gdrfad-captcha__fallback-input {
  background: var(--surface-surface);
}

/* White on the dark theme's light green fails contrast. */
html:where(.gdrfad-dds) .gdrfad-captcha__check-path,
.gdrfad-dds-embedded .gdrfad-captcha__check-path {
  stroke: var(--success-on-success);
}

html:where(.gdrfad-dds) .gdrfad-captcha__fallback-submit,
.gdrfad-dds-embedded .gdrfad-captcha__fallback-submit {
  color: var(--primary-on-primary);
}

html:where(.gdrfad-dds) .gdrfad-captcha__fallback-submit:focus-visible,
.gdrfad-dds-embedded .gdrfad-captcha__fallback-submit:focus-visible {
  outline-color: var(--primary-on-primary);
}

/* .gdrfad-captcha__fallback-image stays white in both themes: never override
 * it (the code is drawn dark on white). */

/* The CAPTCHA module's field (fieldset.captcha, its own template): a light
 * card in the design, whatever challenge the site picked. Its title sits
 * inside the card (a floated legend leaves the border line), its note reads
 * as help text, and a typed answer gets a short box. The challenge's own
 * field inside is a design field already. */
html:where(.gdrfad-dds) fieldset.captcha,
.gdrfad-dds-embedded fieldset.captcha {
  min-inline-size: 0;
  margin: 0;
  padding: var(--padding-padding-lg);
  border: 1px solid var(--field-outline);
  border-radius: var(--radius-sm);
  background: var(--surface-surface-container-lowest);
}

html:where(.gdrfad-dds) .captcha__title,
.gdrfad-dds-embedded .captcha__title {
  float: left;
  inline-size: 100%;
  margin: 0 0 var(--gap-gap-sm);
  padding: 0;
  color: var(--surface-on-surface);
  font-size: var(--font-size-body);
  font-weight: 700;
  line-height: var(--line-height-body);
}

html:where(.gdrfad-dds) .captcha__element,
.gdrfad-dds-embedded .captcha__element {
  clear: both;
}

html:where(.gdrfad-dds) .captcha__element .form-text,
.gdrfad-dds-embedded .captcha__element .form-text {
  max-inline-size: 16rem;
}

html:where(.gdrfad-dds) .captcha__description,
.gdrfad-dds-embedded .captcha__description {
  margin: var(--gap-gap-sm) 0 0;
  color: var(--surface-on-surface-variant);
  font-size: var(--font-size-help);
  line-height: var(--line-height-help);
}