/*
 * Captive forms: base styles for the kit's data-form-* hooks.
 *
 * Import once in the site's global CSS (or copy and adjust). Layout,
 * spacing and type rules are wrapped in :where(), so they have no
 * specificity and any site rule wins. Colours are re-applied at (0,5,0) at
 * the end of this file ("Colour guard"), so a theme's global label,
 * heading, link, input and button colours can't repaint a form; restyle
 * colours through the variables below.
 * Colours come from the site's palette (client-site spec section 18) through
 * the variables below; set them once in :root from the site's tokens. A
 * form's own token picks in Studio (design.buttonToken, design.accentToken)
 * arrive as --captive-form-button and --captive-form-accent on [data-form].
 *
 * A site with the sections kit (site-kit/sections) maps its palette once:
 * each default below reads the matching --captive-section-* variable first.
 * Without that kit those are unset and the old defaults apply unchanged.
 */

:root {
  /* Checked boxes and the focus ring: the accent as ink first when the sections kit maps one (a light accent such as gold is too faint on white). */
  --captive-form-accent: var(--captive-section-accent-ink, var(--captive-section-accent, var(--color-brand-primary, #1e3a8a)));
  --captive-form-button: var(--captive-section-button, var(--captive-form-accent));
  --captive-form-button-text: var(--captive-section-button-text, var(--color-white, #ffffff));
  --captive-form-text: inherit;
  --captive-form-muted: var(--captive-section-muted, var(--color-gray-600, #52525b));
  --captive-form-border: var(--captive-section-border-strong, var(--color-gray-300, #d4d4d8));
  --captive-form-field-bg: var(--captive-section-bg, var(--color-white, #ffffff));
  --captive-form-error: #b91c1c;
  --captive-form-radius: 6px;
  --captive-form-gap: 1.25rem;
  --captive-form-font: inherit;
}

:where([data-form]) {
  box-sizing: border-box;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  --_ink: var(--captive-form-text);
  font: inherit;
  font-family: var(--captive-form-font);
  /* The honeypot is positioned against this. */
  position: relative;
  /* Unset unless a surface around the form says it is dark (the sections kit does), so native pickers and file buttons match. */
  color-scheme: var(--captive-form-scheme);
  /*
   * Field boundaries (WCAG 1.4.11, 3:1): inputs, selects, textareas,
   * checkboxes and radios, choice chips, scale cells, file rows, the
   * signature pad. The field's own text colour (currentColor, resolved on
   * each field) mixed 85% with the field background: for any text that
   * reads at 4.5:1 on that background, the mix reaches 3:1 on it
   * (site-kit/sections/__tests__/contrast-matrix.test.ts proves the 85%).
   * --captive-form-field-border overrides it; --captive-form-border stays
   * for hairlines (table rules, the divider, the progress track).
   */
  --_edge: var(--captive-form-field-border, color-mix(in srgb, currentColor 85%, var(--captive-form-field-bg)));
}
:where([data-form][data-width="narrow"]) { max-width: 560px; }
:where([data-form][data-width="full"]) { max-width: none; }
:where([data-form][data-align="left"]) { margin-inline: 0 auto; }
:where([data-form][data-density="compact"]) { --captive-form-gap: 0.75rem; }
:where([data-form][data-density="relaxed"]) { --captive-form-gap: 1.75rem; }
:where([data-form] *, [data-form] *::before, [data-form] *::after) { box-sizing: border-box; }

/* Pages and progress */
:where([data-form-page]) { outline: none; }
:where([data-form-page-title]) { margin: 0 0 var(--captive-form-gap); font-size: 1.25rem; }
:where([data-form-progress]) {
  height: 6px;
  margin-bottom: var(--captive-form-gap);
  border-radius: 999px;
  background: var(--captive-form-border);
  overflow: hidden;
}
:where([data-form-progress-bar]) {
  display: block;
  height: 100%;
  background: var(--captive-form-accent);
  transition: width 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  :where([data-form-progress-bar]) { transition: none; }
}

/* Blocks: a six-column grid, so half, third and two-thirds share a row on wide screens. */
:where([data-form-blocks]) {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--captive-form-gap);
}
:where([data-form-block]) { grid-column: span 6; min-width: 0; margin: 0; padding: 0; border: 0; }
@media (min-width: 640px) {
  :where([data-form-block][data-width="half"]) { grid-column: span 3; }
  :where([data-form-block][data-width="third"]) { grid-column: span 2; }
  :where([data-form-block][data-width="two_thirds"]) { grid-column: span 4; }
}
:where([data-form-block][data-logic-hidden]) { opacity: 0.45; outline: 1px dashed var(--captive-form-border); }

:where([data-form-label]) { display: block; margin: 0 0 0.375rem; padding: 0; font-weight: 600; }
:where([data-form-required]) { --_ink: var(--captive-form-error); }
:where([data-form-help]) { margin: 0 0 0.5rem; --_ink: var(--captive-form-muted); font-size: 0.875em; }
:where([data-form-error]) { margin: 0.375rem 0 0; --_ink: var(--captive-form-error); font-size: 0.875em; }

@media (min-width: 640px) {
  :where([data-form][data-label-position="left"] [data-form-block]:not([role="group"])) {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) 2fr;
    column-gap: 1rem;
    align-items: start;
  }
  :where([data-form][data-label-position="left"] [data-form-block]:not([role="group"]) > :not([data-form-label])) { grid-column: 2; }
}

/*
 * Rows line up: on wide screens every block takes four row tracks (label,
 * help, control, error) and a question ([data-form-field]) lays its parts on
 * them through subgrid, so side-by-side inputs share one line whatever the
 * labels, help, required marks or errors beside them. The tracks carry no
 * gap (an empty help or error row collapses), so the space between rows of
 * blocks is each block's bottom margin. Without subgrid, blocks stack as above.
 */
@media (min-width: 640px) {
  @supports (grid-template-rows: subgrid) {
    :where([data-form-blocks]) { row-gap: 0; margin-bottom: calc(-1 * var(--captive-form-gap)); }
    :where([data-form-block]) { grid-row: span 4; margin-bottom: var(--captive-form-gap); }
    :where([data-form-field]) { display: grid; grid-template-rows: subgrid; }
    :where([data-form-field] > [data-form-label]) { grid-row: 1; align-self: end; }
    :where([data-form-field] > [data-form-help]) { grid-row: 2; }
    :where([data-form-field] > :not([data-form-label], [data-form-help], [data-form-error])) { grid-row: 3; }
    :where([data-form-field] > [data-form-error]) { grid-row: 4; }
    :where([data-form][data-label-position="left"] [data-form-field]:not([role="group"]) > [data-form-label]) { grid-row: 2 / 4; align-self: start; }
  }
}

/* Inputs */
:where([data-form-input]) {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--_edge);
  border-radius: var(--captive-form-radius);
  background: var(--captive-form-field-bg);
  font: inherit;
}
:where(textarea[data-form-input]) { min-height: 7rem; resize: vertical; }
:where([data-form-input]:focus-visible, [data-form] input:focus-visible, [data-form] button:focus-visible) {
  outline: 2px solid var(--captive-form-accent);
  outline-offset: 2px;
}
:where([data-form-block][data-invalid] [data-form-input]) { border-color: var(--captive-form-error); }
:where([data-form-affixed]) { display: flex; align-items: center; gap: 0.5rem; }
:where([data-form-affix]) { --_ink: var(--captive-form-muted); }
:where([data-form] input[type="radio"], [data-form] input[type="checkbox"]) {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  flex: none;
  accent-color: var(--captive-form-accent);
  /* Drawn by the kit (a native box keeps the browser's grey, which a dark surface hides): the field edge, filled in the accent when checked. */
  appearance: none;
  border: 1px solid var(--_edge);
  border-radius: 0.25rem;
  background: var(--captive-form-field-bg);
  cursor: pointer;
}
:where([data-form] input[type="radio"]) { border-radius: 50%; }
:where([data-form] input[type="radio"]:checked, [data-form] input[type="checkbox"]:checked) {
  border-color: var(--captive-form-accent);
  background: var(--captive-form-accent);
  box-shadow: inset 0 0 0 0.2rem var(--captive-form-field-bg);
}
@media (forced-colors: active) {
  :where([data-form] input[type="radio"], [data-form] input[type="checkbox"]) { appearance: auto; }
}

/* Choices */
:where([data-form-options]) { display: grid; gap: 0.5rem; }
:where([data-form-option]) { display: flex; align-items: center; gap: 0.625rem; cursor: pointer; }
:where([data-form-other]) { display: grid; gap: 0.5rem; }
:where([data-form-block][data-type="multi_select"] [data-form-options]) { display: flex; flex-wrap: wrap; }
:where([data-form-block][data-type="multi_select"] [data-form-option]) {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--_edge);
  border-radius: 999px;
}
:where([data-form-block][data-type="multi_select"] [data-form-option][data-checked]) { border-color: var(--captive-form-accent); }
:where([data-form-matrix]) { overflow-x: auto; }
:where([data-form-matrix] table) { width: 100%; border-collapse: collapse; }
:where([data-form-matrix] th, [data-form-matrix] td) { padding: 0.5rem; text-align: center; border-bottom: 1px solid var(--captive-form-border); }
:where([data-form-matrix] th[scope="row"]) { text-align: start; font-weight: 400; }
:where([data-form-ranking]) { display: grid; gap: 0.5rem; margin: 0; padding-inline-start: 1.5rem; }
:where([data-form-rank-item]) { display: flex; align-items: center; gap: 0.5rem; }
:where([data-form-rank-label]) { flex: 1; }
:where([data-form-rank-move]) {
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 1px solid var(--_edge);
  border-radius: var(--captive-form-radius);
  background: transparent;
  cursor: pointer;
}

/* Scales: rating, linear scale, NPS, CSAT */
:where([data-form-scale]) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
:where([data-form-scale-options]) { display: flex; flex-wrap: wrap; gap: 0.375rem; }
:where([data-form-scale-label]) { --_ink: var(--captive-form-muted); font-size: 0.875em; }
:where([data-form-scale] [data-form-option]) {
  position: relative;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  border: 1px solid var(--_edge);
  border-radius: var(--captive-form-radius);
}
:where([data-form-scale] [data-form-option] input) { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
:where([data-form-scale] [data-form-option][data-checked]) { border-color: var(--captive-form-accent); background: var(--captive-form-accent); --_ink: var(--captive-form-button-text); }
:where([data-form-scale] [data-form-option]:focus-within) { outline: 2px solid var(--captive-form-accent); outline-offset: 2px; }
:where([data-form-scale="rating"] [data-form-option]) { border: 0; font-size: 1.5rem; --_ink: var(--captive-form-muted); }
:where([data-form-scale="rating"] [data-form-option][data-filled], [data-form-scale="rating"] [data-form-option][data-checked]) { background: none; --_ink: var(--captive-form-accent); }

/* Dates, consent, files, signature, payment */
:where([data-form-range]) { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; }
:where([data-form-range] [data-form-option]) { flex-direction: column; align-items: stretch; gap: 0.25rem; }
:where([data-form-consent]) { align-items: flex-start; }
:where([data-form-notice], [data-form-processing-note]) { margin: 0; --_ink: var(--captive-form-muted); font-size: 0.875em; }
:where([data-form-unavailable]) { margin: 0.5rem 0 0; --_ink: var(--captive-form-muted); font-size: 0.875em; }
:where([data-form-files]) { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
:where([data-form-file]) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--_edge);
  border-radius: var(--captive-form-radius);
  font-size: 0.875em;
}
:where([data-form-file-name]) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where([data-form-file-size]) { --_ink: var(--captive-form-muted); }
:where([data-form-file-remove]) { border: 0; background: none; padding: 0 0.25rem; font-size: 1.125rem; line-height: 1; --_ink: var(--captive-form-muted); cursor: pointer; }
:where([data-form-uploading]) { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0 0; --_ink: var(--captive-form-muted); font-size: 0.875em; }
:where([data-form-upload-progress]) { flex: 1; accent-color: var(--captive-form-accent); }
:where([data-form-upload-error]) { margin: 0.5rem 0 0; --_ink: var(--captive-form-error); font-size: 0.875em; }
:where([data-form-signature] canvas) {
  display: block;
  border: 1px solid var(--_edge);
  border-radius: var(--captive-form-radius);
  background: var(--captive-form-field-bg);
}
:where([data-form-payment-amount]) { margin: 0.5rem 0; }
:where([data-form-product]) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
:where([data-form-quantity] input) { width: 5rem; }

/* Layout blocks */
:where([data-form-heading]) { margin: 0; }
:where([data-form-richtext] > :first-child) { margin-top: 0; }
:where([data-form-richtext] > :last-child) { margin-bottom: 0; }
:where([data-form-image]) { display: block; max-width: 100%; height: auto; border-radius: var(--captive-form-radius); }
:where(figure[data-form-block] figcaption) { margin-top: 0.375rem; --_ink: var(--captive-form-muted); font-size: 0.875em; font-weight: 400; }
:where([data-form-embed]) { position: relative; aspect-ratio: 16 / 9; }
:where([data-form-embed] iframe) { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
:where(hr[data-form-block]) { border: 0; border-top: 1px solid var(--captive-form-border); }

/* Navigation and states */
:where([data-form-password], [data-form-turnstile]:not(:empty), [data-form-processing-note]) { margin-top: var(--captive-form-gap); }
:where([data-form-status]) { margin-top: var(--captive-form-gap); }
:where([data-form-status]:empty) { margin: 0; }
:where([data-form-message]) { margin: 0; --_ink: var(--captive-form-error); }
:where([data-form-nav]) { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; margin-top: var(--captive-form-gap); }
:where([data-form-submit]) { margin-inline-start: auto; }
:where([data-form-submit], [data-form-back], [data-form-signature-clear]) {
  min-height: 2.75rem;
  padding: 0.625rem 1.25rem;
  border: 1px solid var(--captive-form-button);
  border-radius: var(--captive-form-radius);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
:where([data-form-submit]) { background: var(--captive-form-button); --_ink: var(--captive-form-button-text); }
:where([data-form-back], [data-form-signature-clear]) { background: transparent; --_ink: var(--captive-form-button); }
:where([data-form-submit]:disabled, [data-form-back]:disabled, [data-form-signature-clear]:disabled) { opacity: 0.6; cursor: default; }
:where([data-form-thanks], [data-form-closed], [data-form-reset-notice]) { outline: none; }
:where([data-form-reset-notice]) { margin-bottom: var(--captive-form-gap); }
:where([data-form-visually-hidden]) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ───────────────── Colour guard ───────────────── */
/*
 * A rebuilt site keeps its theme's global rules (h1..h6 { color: #111 },
 * input[type="text"] { color: #666; border: 1px solid #ddd },
 * .elementor-kit-15 button { background-color }, Elementor's field rule
 * .elementor-kit-N input:focus:not([type="button"]):not([type="submit"]),
 * (0,4,1)), and they outrank every :where() rule above. So the colour
 * properties, and only those, are re-applied here at specificity (0,5,0):
 * [data-form] repeated five times (repeating a simple selector raises
 * specificity). Layout, spacing and fonts stay at zero, so a form keeps the
 * site's typography.
 *
 * Text colour: every part sets --_ink (above) and the first rule gives the
 * form and everything in it color: var(--_ink). A part without its own
 * inherits its parent's, and the form root's --captive-form-text default
 * (inherit) leaves --_ink unset, so the form takes the colour around it,
 * as before, now past the theme's label, heading and link colours.
 *
 * Restyle through the --captive-form-* variables (any specificity: the
 * guard reads them). data-captive-colors="site" on <html>, <body> or a
 * wrapper turns the guard off inside it; id="captive-colors" on an element
 * around the form raises the text-colour guard to (1,5,0) for a theme whose
 * rules carry an id (site-kit/sections/styles.css has the same two hooks).
 */
:where([data-form], [data-form] *) {
  color: var(--_ink);
}

:where([data-form], [data-form] *):where(:not([data-captive-colors="site"], [data-captive-colors="site"] *)):is([data-form][data-form][data-form][data-form][data-form], [data-form][data-form][data-form][data-form][data-form] *) {
  color: var(--_ink);
}

#captive-colors :where([data-form], [data-form] *):is([data-form][data-form][data-form][data-form][data-form], [data-form][data-form][data-form][data-form][data-form] *) {
  color: var(--_ink);
}

/* Elements a theme paints that the kit leaves unfilled, then the kit's own fills and edges, in the order above. */

:where([data-form] :is(label, legend, fieldset, a, mark, caption)):where(:not([data-captive-colors="site"], [data-captive-colors="site"] *)):is([data-form][data-form][data-form][data-form][data-form], [data-form][data-form][data-form][data-form][data-form] *) {
  background-color: transparent;
  border-color: transparent;
}

:where([data-form] :is(table, th, td)):where(:not([data-captive-colors="site"], [data-captive-colors="site"] *)):is([data-form][data-form][data-form][data-form][data-form], [data-form][data-form][data-form][data-form][data-form] *) {
  background-color: transparent;
  border-color: var(--captive-form-border);
}

:where([data-form-richtext] a):where(:not([data-captive-colors="site"], [data-captive-colors="site"] *)):is([data-form][data-form][data-form][data-form][data-form], [data-form][data-form][data-form][data-form][data-form] *) {
  text-decoration-line: underline;
}

:where([data-form-progress]):where(:not([data-captive-colors="site"], [data-captive-colors="site"] *)):is([data-form][data-form][data-form][data-form][data-form], [data-form][data-form][data-form][data-form][data-form] *) {
  background-color: var(--captive-form-border);
}

:where([data-form-progress-bar]):where(:not([data-captive-colors="site"], [data-captive-colors="site"] *)):is([data-form][data-form][data-form][data-form][data-form], [data-form][data-form][data-form][data-form][data-form] *) {
  background-color: var(--captive-form-accent);
}

:where([data-form-block][data-logic-hidden]):where(:not([data-captive-colors="site"], [data-captive-colors="site"] *)):is([data-form][data-form][data-form][data-form][data-form], [data-form][data-form][data-form][data-form][data-form] *) {
  outline-color: var(--captive-form-border);
}

:where([data-form-input]):where(:not([data-captive-colors="site"], [data-captive-colors="site"] *)):is([data-form][data-form][data-form][data-form][data-form], [data-form][data-form][data-form][data-form][data-form] *) {
  border-color: var(--_edge);
  background-color: var(--captive-form-field-bg);
}

:where([data-form-input]:focus-visible, [data-form] input:focus-visible, [data-form] button:focus-visible):where(:not([data-captive-colors="site"], [data-captive-colors="site"] *)):is([data-form][data-form][data-form][data-form][data-form], [data-form][data-form][data-form][data-form][data-form] *) {
  outline-color: var(--captive-form-accent);
}

:where([data-form-block][data-invalid] [data-form-input]):where(:not([data-captive-colors="site"], [data-captive-colors="site"] *)):is([data-form][data-form][data-form][data-form][data-form], [data-form][data-form][data-form][data-form][data-form] *) {
  border-color: var(--captive-form-error);
}

:where([data-form] input[type="radio"], [data-form] input[type="checkbox"], [data-form-upload-progress]):where(:not([data-captive-colors="site"], [data-captive-colors="site"] *)):is([data-form][data-form][data-form][data-form][data-form], [data-form][data-form][data-form][data-form][data-form] *) {
  accent-color: var(--captive-form-accent);
}

:where([data-form] input[type="radio"], [data-form] input[type="checkbox"]):where(:not([data-captive-colors="site"], [data-captive-colors="site"] *)):is([data-form][data-form][data-form][data-form][data-form], [data-form][data-form][data-form][data-form][data-form] *) {
  border-color: var(--_edge);
  background-color: var(--captive-form-field-bg);
}

:where([data-form] input[type="radio"]:checked, [data-form] input[type="checkbox"]:checked):where(:not([data-captive-colors="site"], [data-captive-colors="site"] *)):is([data-form][data-form][data-form][data-form][data-form], [data-form][data-form][data-form][data-form][data-form] *) {
  border-color: var(--captive-form-accent);
  background-color: var(--captive-form-accent);
}

:where([data-form-block][data-type="multi_select"] [data-form-option]):where(:not([data-captive-colors="site"], [data-captive-colors="site"] *)):is([data-form][data-form][data-form][data-form][data-form], [data-form][data-form][data-form][data-form][data-form] *) {
  border-color: var(--_edge);
}

:where([data-form-block][data-type="multi_select"] [data-form-option][data-checked]):where(:not([data-captive-colors="site"], [data-captive-colors="site"] *)):is([data-form][data-form][data-form][data-form][data-form], [data-form][data-form][data-form][data-form][data-form] *) {
  border-color: var(--captive-form-accent);
}

:where([data-form-rank-move]):where(:not([data-captive-colors="site"], [data-captive-colors="site"] *)):is([data-form][data-form][data-form][data-form][data-form], [data-form][data-form][data-form][data-form][data-form] *) {
  border-color: var(--_edge);
  background-color: transparent;
}

:where([data-form-scale] [data-form-option]):where(:not([data-captive-colors="site"], [data-captive-colors="site"] *)):is([data-form][data-form][data-form][data-form][data-form], [data-form][data-form][data-form][data-form][data-form] *) {
  border-color: var(--_edge);
}

:where([data-form-scale] [data-form-option][data-checked]):where(:not([data-captive-colors="site"], [data-captive-colors="site"] *)):is([data-form][data-form][data-form][data-form][data-form], [data-form][data-form][data-form][data-form][data-form] *) {
  border-color: var(--captive-form-accent);
  background-color: var(--captive-form-accent);
}

:where([data-form-scale] [data-form-option]:focus-within):where(:not([data-captive-colors="site"], [data-captive-colors="site"] *)):is([data-form][data-form][data-form][data-form][data-form], [data-form][data-form][data-form][data-form][data-form] *) {
  outline-color: var(--captive-form-accent);
}

:where([data-form-scale="rating"] [data-form-option][data-filled], [data-form-scale="rating"] [data-form-option][data-checked]):where(:not([data-captive-colors="site"], [data-captive-colors="site"] *)):is([data-form][data-form][data-form][data-form][data-form], [data-form][data-form][data-form][data-form][data-form] *) {
  background-color: transparent;
}

:where([data-form-file]):where(:not([data-captive-colors="site"], [data-captive-colors="site"] *)):is([data-form][data-form][data-form][data-form][data-form], [data-form][data-form][data-form][data-form][data-form] *) {
  border-color: var(--_edge);
}

:where([data-form-file-remove]):where(:not([data-captive-colors="site"], [data-captive-colors="site"] *)):is([data-form][data-form][data-form][data-form][data-form], [data-form][data-form][data-form][data-form][data-form] *) {
  background-color: transparent;
}

:where([data-form-signature] canvas):where(:not([data-captive-colors="site"], [data-captive-colors="site"] *)):is([data-form][data-form][data-form][data-form][data-form], [data-form][data-form][data-form][data-form][data-form] *) {
  border-color: var(--_edge);
  background-color: var(--captive-form-field-bg);
}

:where(hr[data-form-block]):where(:not([data-captive-colors="site"], [data-captive-colors="site"] *)):is([data-form][data-form][data-form][data-form][data-form], [data-form][data-form][data-form][data-form][data-form] *) {
  border-color: var(--captive-form-border);
}

:where([data-form-submit], [data-form-back], [data-form-signature-clear]):where(:not([data-captive-colors="site"], [data-captive-colors="site"] *)):is([data-form][data-form][data-form][data-form][data-form], [data-form][data-form][data-form][data-form][data-form] *) {
  border-color: var(--captive-form-button);
}

:where([data-form-submit]):where(:not([data-captive-colors="site"], [data-captive-colors="site"] *)):is([data-form][data-form][data-form][data-form][data-form], [data-form][data-form][data-form][data-form][data-form] *) {
  background-color: var(--captive-form-button);
}

:where([data-form-back], [data-form-signature-clear]):where(:not([data-captive-colors="site"], [data-captive-colors="site"] *)):is([data-form][data-form][data-form][data-form][data-form], [data-form][data-form][data-form][data-form][data-form] *) {
  background-color: transparent;
}