.trinity-forms-form { max-width: 640px; }
.trinity-forms-form .trinity-forms-field { margin: 0 0 1rem; }
.trinity-forms-form .trinity-forms-field > label,
.trinity-forms-form .trinity-forms-field > legend { display: block; font-weight: 600; margin-bottom: .25rem; }
/* Choice groups are a fieldset named by its legend. Undo the browser's frame so it
   looks exactly like every other field. */
.trinity-forms-form fieldset.trinity-forms-field { border: 0; padding: 0; margin-inline: 0; min-inline-size: 0; }
/* Some themes make every fieldset a grid (Twenty Twenty-One); kept below the
   layout rules (side labels, errors above) in specificity so those still win. */
fieldset.trinity-forms-field { display: block; }
/* Themes size a bare legend as a heading (Twenty Twenty-One: 24px); a question
   should read like the other questions. */
.trinity-forms-form fieldset.trinity-forms-field > legend { padding: 0; float: none; inline-size: 100%; font-size: inherit; line-height: inherit; text-transform: none; letter-spacing: normal; }

/* Field widths.

   Flex rather than grid: fields are a plain sequence of siblings with no per-row
   wrapper, so they have to flow and wrap on their own. calc() subtracts the gap,
   otherwise two halves come to 100% + gap and the second one wraps.

   Under 480px everything goes full width — side-by-side inputs on a phone are how
   you end up with a two-character-wide postcode box. */
.trinity-forms-form { display: flex; flex-wrap: wrap; gap: 0 1rem; align-items: flex-start; }
.trinity-forms-form > * { flex: 0 0 100%; }
.trinity-forms-form .trinity-forms-w-50 { flex-basis: calc(50% - 0.5rem); }
.trinity-forms-form .trinity-forms-w-33 { flex-basis: calc(33.333% - 0.667rem); }
.trinity-forms-form .trinity-forms-w-25 { flex-basis: calc(25% - 0.75rem); }
@media (max-width: 480px) {
    .trinity-forms-form .trinity-forms-w-50,
    .trinity-forms-form .trinity-forms-w-33,
    .trinity-forms-form .trinity-forms-w-25 { flex-basis: 100%; }
}

/* A form that is closed, full, scheduled or login-gated shows its message instead.
   Quiet by design: it is an explanation, not an error the reader caused. */
.trinity-forms-closed {
    padding: 1rem 1.25rem;
    border-inline-start: 3px solid #c3c4c7;
    background: rgba(0, 0, 0, .03);
}
.trinity-forms-closed p:last-child { margin-bottom: 0; }
.trinity-forms-form .trinity-forms-field input[type="text"],
.trinity-forms-form .trinity-forms-field input[type="email"],
.trinity-forms-form .trinity-forms-field input[type="number"],
.trinity-forms-form .trinity-forms-field input[type="url"],
.trinity-forms-form .trinity-forms-field input[type="tel"],
.trinity-forms-form .trinity-forms-field input[type="date"],
.trinity-forms-form .trinity-forms-field input[type="time"],
.trinity-forms-form .trinity-forms-field select,
.trinity-forms-form .trinity-forms-field textarea {
    width: 100%;
    padding: .5rem .65rem;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    font: inherit;
    box-sizing: border-box;
}
.trinity-forms-form .trinity-forms-field textarea { min-height: 6rem; resize: vertical; }
/* Choice fields shipped unstyled, so option spacing came entirely from the theme
   (often a body line-height of 2). Own the layout instead of inheriting it. */
.trinity-forms-form .trinity-forms-checkbox-group,
.trinity-forms-form .trinity-forms-radio-group { display: grid; gap: .25rem; }
.trinity-forms-form .trinity-forms-checkbox,
.trinity-forms-form .trinity-forms-radio,
/* Consent is a direct child label, so it needs to outrank the field-label rule above. */
.trinity-forms-form .trinity-forms-field > label.trinity-forms-consent {
    display: flex;
    align-items: flex-start;
    gap: .5em;
    line-height: 1.4;
    margin: 0;
    font-weight: normal;
}
/* A native checkbox is a fixed ~13px whatever the font size, so it drifts off the
   text as soon as a theme sets a large body size. Size it in em and drop it by half
   the leading — (1.4em line - 1em control) / 2 — so it centres on the label's FIRST
   line at any size, while flex-start keeps a wrapped label hanging-indented rather
   than running back under the control. */
.trinity-forms-form .trinity-forms-checkbox input,
.trinity-forms-form .trinity-forms-radio input,
.trinity-forms-form .trinity-forms-consent input {
    flex: none;
    /* Required, and easy to miss: form controls do not inherit font-size, so without
       this every em below resolves against the browser's own ~13px control font
       rather than the label's. */
    font: inherit;
    width: 1em;
    height: 1em;
    margin: .2em 0 0;
}
.trinity-forms-form .trinity-forms-field.has-error input,
.trinity-forms-form .trinity-forms-field.has-error select,
.trinity-forms-form .trinity-forms-field.has-error textarea { border-color: #b32d2e; }
/* Error red at 6.3:1 on white (was #d63638, 4.7:1, too close to the line for small text). */
.trinity-forms-form .trinity-forms-field-error { color: #b32d2e; font-size: .875em; margin-top: .25rem; }
.trinity-forms-form .trinity-forms-required { color: #b32d2e; margin-inline-start: 2px; }
.trinity-forms-form .trinity-forms-help { color: #50575e; font-size: .875em; display: block; margin-top: .25rem; }
.trinity-forms-form .trinity-forms-actions { margin-top: 1rem; }
/* Next is the step's main action, so it wears the Submit look (2.23.1: it had no
   rule at all and showed as a bare browser button). Previous and Save & continue
   are secondary: outlined, in the form's text colour. */
.trinity-forms-form .trinity-forms-submit,
.trinity-forms-form .trinity-forms-next {
    background: #2271b1; color: #fff; border: 0; padding: .6rem 1.2rem;
    border-radius: 4px; font-weight: 600; cursor: pointer;
}
.trinity-forms-form .trinity-forms-submit:disabled,
.trinity-forms-form .trinity-forms-next:disabled { opacity: .6; cursor: wait; }
.trinity-forms-form .trinity-forms-messages { margin-top: 1rem; }
.trinity-forms-form .trinity-forms-messages.trinity-forms-error { color: #b32d2e; }
/* Success green at 5.5:1 on white (the old #00a32a was 3.4:1). */
.trinity-forms-form .trinity-forms-messages.trinity-forms-success { color: #007a1f; }
/* On a dark theme (Twenty Twenty-One's dark mode, any theme with light text) the
   fixed colours above fall to about 2:1 (QA 2 Nov, ar-news). Mixed half and half
   with the theme's own text colour they stay dark on light themes and turn light
   on dark ones, 4.5:1 or better either way. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .trinity-forms-form .trinity-forms-messages.trinity-forms-success { color: color-mix(in srgb, #007a1f 50%, currentColor); }
    .trinity-forms-form .trinity-forms-messages.trinity-forms-error,
    .trinity-forms-form .trinity-forms-field-error,
    .trinity-forms-form .trinity-forms-required { color: color-mix(in srgb, #b32d2e 50%, currentColor); }
    .trinity-forms-form .trinity-forms-help { color: color-mix(in srgb, currentColor 75%, transparent); }
}
.trinity-forms-confirmation { padding: 1rem; background: #edfaef; color: #1d2327; border-inline-start: 4px solid #00a32a; margin: 1rem 0; }
table.trinity-forms-submissions { width: 100%; border-collapse: collapse; }
table.trinity-forms-submissions th, table.trinity-forms-submissions td { padding: .5rem; border-bottom: 1px solid #ddd; text-align: start; }

/* --- Phase 4 field types ---------------------------------------------------- */

/* Image choices: the picture IS the label for a real radio/checkbox, so the input
   stays in the DOM (keyboard, screen readers, browser validation) and is only
   visually replaced by the selected state on the card. */
.trinity-forms-image-choices { display: flex; flex-wrap: wrap; gap: .75rem; }
.trinity-forms-image-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: .6rem;
    border: 2px solid #dcdcde;
    border-radius: 6px;
    cursor: pointer;
    max-width: 10rem;
}
.trinity-forms-image-choice img { max-width: 100%; height: auto; display: block; border-radius: 3px; }
.trinity-forms-image-choice:has(input:checked) { border-color: #2271b1; }
/* :has() is not everywhere yet, so keep the radio visible as the fallback cue
   rather than hiding it and leaving no selected state at all. */
@supports selector(:has(*)) {
    .trinity-forms-image-choice input { position: absolute; opacity: 0; pointer-events: none; }
}
.trinity-forms-image-choice:focus-within { outline: 2px solid #2271b1; outline-offset: 2px; }

/* List field */
table.trinity-forms-list { width: 100%; border-collapse: collapse; margin-bottom: .5rem; }
table.trinity-forms-list th,
table.trinity-forms-list td { padding: .25rem; text-align: start; }
table.trinity-forms-list th { font-size: .85em; font-weight: 600; }
table.trinity-forms-list input { width: 100%; }
.trinity-forms-list-actions { width: 2.5rem; }
.trinity-forms-list-remove,
.trinity-forms-list-add {
    background: none;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    padding: .25rem .6rem;
    cursor: pointer;
    font: inherit;
}
.trinity-forms-list-remove { line-height: 1; }

/* Pricing */
.trinity-forms-price { margin: 0; font-weight: 600; }
.trinity-forms-total { font-size: 1.25em; font-weight: 700; }

/* Chained selects: levels stack, each labelled, so "State" is never an unlabelled
   dropdown that appeared out of nowhere. */
.trinity-forms-chained { display: grid; gap: .5rem; }
.trinity-forms-chained-level label { display: block; font-size: .875em; font-weight: 600; margin-bottom: .15rem; }
.trinity-forms-chained select:disabled { opacity: .6; }

/* --- Form layout options ---------------------------------------------------- */

/* Side labels. A grid on the field wrapper rather than floats, so a wrapped label
   and a tall control still line up and the label column stays consistent down the
   form. Below 600px they always go back on top — a 30% label column on a phone
   leaves an unusable input beside it. */
.trinity-forms-labels-left .trinity-forms-field,
.trinity-forms-labels-right .trinity-forms-field {
    display: grid;
    grid-template-columns: 30% 1fr;
    gap: .25rem .75rem;
    align-items: start;
}
.trinity-forms-labels-left .trinity-forms-field > label,
.trinity-forms-labels-left .trinity-forms-field > legend { text-align: end; padding-top: .55rem; }
.trinity-forms-labels-right .trinity-forms-field { grid-template-columns: 1fr 30%; }
.trinity-forms-labels-right .trinity-forms-field > label,
.trinity-forms-labels-right .trinity-forms-field > legend { order: 2; padding-top: .55rem; }
/* A legend is drawn in the fieldset's frame, not as a grid cell. Floated, it is an
   ordinary box again and takes the label column. */
.trinity-forms-labels-left fieldset.trinity-forms-field > legend,
.trinity-forms-labels-right fieldset.trinity-forms-field > legend { float: inline-start; inline-size: auto; }

/* Help, errors and everything that is not the label span the control column, so
   they line up under the input rather than under the label. */
.trinity-forms-labels-left .trinity-forms-field > :not(label):not(legend),
.trinity-forms-labels-right .trinity-forms-field > :not(label):not(legend) { grid-column: 2; }
.trinity-forms-labels-right .trinity-forms-field > :not(label):not(legend) { grid-column: 1; }

@media (max-width: 600px) {
    .trinity-forms-labels-left .trinity-forms-field,
    .trinity-forms-labels-right .trinity-forms-field { display: block; }
    .trinity-forms-labels-left .trinity-forms-field > label,
    .trinity-forms-labels-left .trinity-forms-field > legend { text-align: start; padding-top: 0; }
    .trinity-forms-labels-left fieldset.trinity-forms-field > legend,
    .trinity-forms-labels-right fieldset.trinity-forms-field > legend { float: none; inline-size: 100%; }
}

/* Hidden labels stay in the DOM for screen readers — the placeholder is not an
   accessible name, whatever it looks like. */
.trinity-forms-labels-hidden .trinity-forms-field > label,
.trinity-forms-labels-hidden .trinity-forms-field > legend {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Errors above the control instead of below it. */
.trinity-forms-errors-above .trinity-forms-field { display: flex; flex-direction: column; }
.trinity-forms-errors-above .trinity-forms-field > label,
.trinity-forms-errors-above .trinity-forms-field > legend { order: 1; }
.trinity-forms-errors-above .trinity-forms-field-error { order: 2; margin: 0 0 .25rem; }

.trinity-forms-optional { color: #50575e; font-weight: normal; font-size: .875em; }

/* Sub-labels on composite fields (name, address). */
.trinity-forms-sub-label { display: block; font-size: .8125em; color: #50575e; font-weight: normal; }
.trinity-forms-sub-label-above { margin-bottom: .15rem; }
.trinity-forms-sub-label-below { margin-top: .15rem; }

/* Validation summary. Loud on purpose — it only appears when a submit failed. */
.trinity-forms-summary {
    border-inline-start: 4px solid #b32d2e;
    background: rgba(214, 54, 56, .06);
    padding: .85rem 1rem;
    margin: 0 0 1rem;
    flex-basis: 100%;
}
.trinity-forms-summary p { margin: 0 0 .4rem; font-weight: 600; }
.trinity-forms-summary ul { margin: 0; margin-inline-start: 1.1rem; padding: 0; }
.trinity-forms-summary a { color: inherit; text-decoration: underline; }
/* Focus moves here after a failed submit; the frame shows where it went. */
.trinity-forms-summary:focus { outline: 2px solid #b32d2e; outline-offset: 2px; }

.trinity-forms-submit-image { background: none; border: 0; padding: 0; cursor: pointer; }
.trinity-forms-submit-image img { display: block; max-width: 100%; height: auto; }

/* Save & continue: in-page email prompt (replaces window.prompt). */
.trinity-forms-form .trinity-forms-resume-ask { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .75rem; }
.trinity-forms-form .trinity-forms-resume-ask label { flex-basis: 100%; font-weight: 600; }
.trinity-forms-form .trinity-forms-resume-ask input[type="email"] { flex: 1 1 14rem; min-width: 0; }
.trinity-forms-form .trinity-forms-resume-ask input[aria-invalid="true"] { border-color: #b32d2e; }
.tf-view-notice { padding: .5rem .75rem; margin: 0 0 1rem; border-inline-start: 4px solid #00a32a; background: #f0f6f0; color: #1d2327; }

/* Repeater rows (Pro field). */
.trinity-forms-repeater-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; padding: .5rem 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.trinity-forms-repeater-cell { display: flex; flex-direction: column; flex: 1 1 10rem; min-width: 0; }
.trinity-forms-repeater-add { margin-top: .5rem; }

/* ---------------------------------------------------------------------------
   Polished defaults (2.8.0). Every control the same height, border, fill and
   focus ring, whatever its type, so a form looks like one piece out of the box.
   Themes can restyle freely: these are low-specificity, and the accent is one
   variable (--trinity-forms-accent) a theme or a Custom CSS rule can change.
   --------------------------------------------------------------------------- */
.trinity-forms-form {
    --trinity-forms-accent: #4f46e5;
    /* 3.3:1 against a white field: the edge of a text box is how a visitor finds
       it (WCAG 1.4.11). The old #d0d5dd was 1.5:1. */
    --trinity-forms-border: #868e9c;
    --trinity-forms-radius: 8px;
    /* Fields are white by default, so the browser's own parts of them (the open
       dropdown list, scrollbars, date pickers) must be drawn light too. Without
       this a dark theme gets a dark dropdown list inside a white select. */
    color-scheme: light;
}
.trinity-forms-form .trinity-forms-field input[type="text"],
.trinity-forms-form .trinity-forms-field input[type="email"],
.trinity-forms-form .trinity-forms-field input[type="number"],
.trinity-forms-form .trinity-forms-field input[type="url"],
.trinity-forms-form .trinity-forms-field input[type="tel"],
.trinity-forms-form .trinity-forms-field input[type="date"],
.trinity-forms-form .trinity-forms-field input[type="time"],
.trinity-forms-form .trinity-forms-field input[type="password"],
.trinity-forms-form .trinity-forms-field select,
.trinity-forms-form .trinity-forms-field textarea {
    min-height: 2.75rem;
    padding: .55rem .8rem;
    border: 1px solid var(--trinity-forms-border);
    border-radius: var(--trinity-forms-radius);
    background-color: #fff;
    /* Never inherit the text colour: the field is white, and a dark theme's light
       body text made typed text invisible (2.10.3). Order: the field's own colour,
       then the form's text colour (the Text colour control and the Dark preset set
       it), then dark ink. */
    color: var(--trinity-forms-field-color, var(--trinity-forms-text, #101828));
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.trinity-forms-form .trinity-forms-field select option {
    color: var(--trinity-forms-field-color, var(--trinity-forms-text, #101828));
    background-color: var(--trinity-forms-field-bg, #fff);
}
.trinity-forms-form .trinity-forms-field input::placeholder,
.trinity-forms-form .trinity-forms-field textarea::placeholder {
    /* 5:1 on white; the old #98a2b3 (2.6:1) was too faint to read. */
    color: var(--trinity-forms-placeholder, #667085);
    opacity: 1;
}
.trinity-forms-form .trinity-forms-field input:focus,
.trinity-forms-form .trinity-forms-field select:focus,
.trinity-forms-form .trinity-forms-field textarea:focus {
    outline: none;
    border-color: var(--trinity-forms-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--trinity-forms-accent) 20%, transparent);
}
/* Selects: the browser draws them grey and a different height from text inputs. */
.trinity-forms-form .trinity-forms-field select:not([multiple]) {
    appearance: none;
    -webkit-appearance: none;
    padding-inline-end: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
    background-size: 16px 16px;
}
/* Name and address: their parts side by side instead of stacked. */
.trinity-forms-form .trinity-forms-name,
.trinity-forms-form .trinity-forms-address {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
.trinity-forms-form .trinity-forms-address-line1,
.trinity-forms-form .trinity-forms-address-line2 { grid-column: 1 / -1; }
.trinity-forms-form .trinity-forms-subfield { display: flex; flex-direction: column; min-width: 0; }
.trinity-forms-form .trinity-forms-sub-label { margin-top: .3rem; font-size: .8125em; color: #667085; }
.trinity-forms-form .trinity-forms-sub-label-above { margin: 0 0 .3rem; }
@media (max-width: 480px) {
    .trinity-forms-form .trinity-forms-name,
    .trinity-forms-form .trinity-forms-address { grid-template-columns: 1fr; }
}
/* Choices: marks drawn in the accent colour, a little more air between options. */
.trinity-forms-form .trinity-forms-checkbox-group,
.trinity-forms-form .trinity-forms-radio-group { gap: .5rem; }
.trinity-forms-form input[type="checkbox"],
.trinity-forms-form input[type="radio"],
.trinity-forms-form input[type="range"] { accent-color: var(--trinity-forms-accent); }
/* The slider used to be the browser's ~130px default. */
.trinity-forms-form .trinity-forms-range { display: flex; align-items: center; gap: .75rem; }
.trinity-forms-form .trinity-forms-range input[type="range"] { flex: 1; min-width: 0; }
.trinity-forms-form .trinity-forms-range-value {
    min-width: 3.5rem; padding: .2rem .5rem; text-align: center; font-variant-numeric: tabular-nums;
    border: 1px solid var(--trinity-forms-border); border-radius: 999px; font-size: .875em;
}
.trinity-forms-form .trinity-forms-field > label,
.trinity-forms-form .trinity-forms-field > legend { margin-bottom: .4rem; }
.trinity-forms-form .trinity-forms-field { margin-bottom: 1.25rem; }
.trinity-forms-form .trinity-forms-submit,
.trinity-forms-form .trinity-forms-next {
    min-height: 2.75rem;
    padding: .65rem 1.4rem;
    border-radius: var(--trinity-forms-radius);
    background: var(--trinity-forms-accent);
    font: inherit;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
    transition: filter .15s ease, transform .05s ease;
}
.trinity-forms-form .trinity-forms-submit:hover,
.trinity-forms-form .trinity-forms-next:hover { filter: brightness(1.08); }
.trinity-forms-form .trinity-forms-submit:active,
.trinity-forms-form .trinity-forms-next:active,
.trinity-forms-form .trinity-forms-prev:active,
.trinity-forms-form .trinity-forms-save-progress:active { transform: translateY(1px); }
.trinity-forms-form .trinity-forms-submit:focus-visible,
.trinity-forms-form .trinity-forms-next:focus-visible,
.trinity-forms-form .trinity-forms-prev:focus-visible,
.trinity-forms-form .trinity-forms-save-progress:focus-visible {
    outline: 2px solid var(--trinity-forms-accent); outline-offset: 2px;
}
/* Star rating: hidden radios, stars filled up to the chosen one, hover preview. */
.trinity-forms-form .trinity-forms-rating { display: inline-flex; gap: .15rem; }
.trinity-forms-form .trinity-forms-star { position: relative; cursor: pointer; line-height: 1; }
.trinity-forms-form .trinity-forms-star input {
    position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.trinity-forms-form .trinity-forms-star-icon {
    display: block; font-size: 1.75rem; color: #868e9c; transition: color .1s ease, transform .1s ease;
}
/* Both states at 3:1 or more on white, so an empty and a filled star can be told
   apart from the page and from each other without the hover. */
.trinity-forms-form .trinity-forms-star:has(input:checked) .trinity-forms-star-icon,
.trinity-forms-form .trinity-forms-star:has(~ .trinity-forms-star input:checked) .trinity-forms-star-icon { color: #d97706; }
.trinity-forms-form .trinity-forms-rating:hover .trinity-forms-star .trinity-forms-star-icon { color: #868e9c; }
.trinity-forms-form .trinity-forms-rating:hover .trinity-forms-star:hover .trinity-forms-star-icon,
.trinity-forms-form .trinity-forms-rating:hover .trinity-forms-star:has(~ .trinity-forms-star:hover) .trinity-forms-star-icon { color: #d97706; }
.trinity-forms-form .trinity-forms-star:hover .trinity-forms-star-icon { transform: scale(1.12); }
.trinity-forms-form .trinity-forms-star input:focus-visible + .trinity-forms-star-icon {
    outline: 2px solid var(--trinity-forms-accent); outline-offset: 2px; border-radius: 4px;
}
.trinity-forms-sr {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------------
   Form styles (2.10.0). The Layout tab writes these variables on the form
   element; each falls back to the look forms had before, so a form with no
   style settings is unchanged.
   --------------------------------------------------------------------------- */
.trinity-forms-form { font-size: var(--trinity-forms-font-size, inherit); color: var(--trinity-forms-text, inherit); }
.trinity-forms-form .trinity-forms-field { margin-bottom: var(--trinity-forms-gap, 1rem); }
.trinity-forms-form .trinity-forms-field > label,
.trinity-forms-form .trinity-forms-field > legend { color: var(--trinity-forms-label, inherit); }
.trinity-forms-form .trinity-forms-field input[type="text"],
.trinity-forms-form .trinity-forms-field input[type="email"],
.trinity-forms-form .trinity-forms-field input[type="number"],
.trinity-forms-form .trinity-forms-field input[type="url"],
.trinity-forms-form .trinity-forms-field input[type="tel"],
.trinity-forms-form .trinity-forms-field input[type="date"],
.trinity-forms-form .trinity-forms-field input[type="time"],
.trinity-forms-form .trinity-forms-field input[type="password"],
.trinity-forms-form .trinity-forms-field select,
.trinity-forms-form .trinity-forms-field textarea {
    background-color: var(--trinity-forms-field-bg, #fff);
    /* Not "--…-border-width": WordPress core sets border-style:solid on any element
       whose inline style contains "border-width", which framed the whole form. */
    border-width: var(--trinity-forms-stroke, 1px);
    font-size: inherit;
}
.trinity-forms-form .trinity-forms-submit,
.trinity-forms-form .trinity-forms-next {
    border-radius: var(--trinity-forms-button-radius, var(--trinity-forms-radius));
    color: var(--trinity-forms-button-text, #fff);
}
/* Secondary buttons: same size and shape as Submit, no fill, so the step's main
   action stays the obvious one. currentColor for the text and a half-strength
   mix of it for the edge keeps them readable on light and dark themes alike. */
/* The class is doubled on purpose: Twenty Twenty-One fills every button through
   button:not(:hover):not(:active):not(.has-background), which outranks a plain
   two-class rule and made Previous a second Submit. */
.trinity-forms-form .trinity-forms-actions .trinity-forms-prev.trinity-forms-prev,
.trinity-forms-form .trinity-forms-actions .trinity-forms-save-progress.trinity-forms-save-progress {
    min-height: 2.75rem;
    /* 1px less than Submit's padding: the edge makes up the difference, so the
       two sit at the same height side by side. */
    padding: calc(.65rem - 1px) calc(1.4rem - 1px);
    border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
    border-radius: var(--trinity-forms-button-radius, var(--trinity-forms-radius));
    background: transparent;
    color: var(--trinity-forms-text, inherit);
    font: inherit;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .15s ease, transform .05s ease;
}
.trinity-forms-form .trinity-forms-actions .trinity-forms-prev.trinity-forms-prev:hover,
.trinity-forms-form .trinity-forms-actions .trinity-forms-save-progress.trinity-forms-save-progress:hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
}
.trinity-forms-form .trinity-forms-prev:disabled,
.trinity-forms-form .trinity-forms-save-progress:disabled { opacity: .6; cursor: wait; }
/* Buttons in a row with an even gap (the markup's spaces made it uneven), wrapping
   on a phone. Flex follows the writing direction, so in Arabic Previous sits on
   the right. [hidden] must still hide them: a display rule here would beat it. */
.trinity-forms-form .trinity-forms-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.trinity-forms-form .trinity-forms-actions > [hidden] { display: none; }
.trinity-forms-form .trinity-forms-actions > .trinity-forms-resume-ask { flex-basis: 100%; margin-top: 0; }

/* Choice limits (2.10.0): a full option is shown but cannot be picked. */
.trinity-forms-form .is-disabled { opacity: .55; cursor: not-allowed; }
.trinity-forms-form .trinity-forms-option-note { font-size: .8125em; color: #667085; }

/* Style presets that need more than variables (2.11.0: Dark and Theme colours are free). */
/* Dark: the form sits on its own dark card, so it reads on a light theme too. */
.trinity-forms-form.trinity-forms-style-dark {
    color-scheme: dark;
    background: #101828;
    padding: 1.5rem;
    border-radius: 14px;
}
.trinity-forms-form.trinity-forms-style-dark .trinity-forms-help,
.trinity-forms-form.trinity-forms-style-dark .trinity-forms-sub-label,
.trinity-forms-form.trinity-forms-style-dark .trinity-forms-optional { color: #98a2b3; }
.trinity-forms-form.trinity-forms-style-dark .trinity-forms-field input,
.trinity-forms-form.trinity-forms-style-dark .trinity-forms-field select,
.trinity-forms-form.trinity-forms-style-dark .trinity-forms-field textarea { color: var(--trinity-forms-text, #f2f4f7); box-shadow: none; }
.trinity-forms-form.trinity-forms-style-dark .trinity-forms-messages.trinity-forms-success { color: #6ce9a6; }
.trinity-forms-form.trinity-forms-style-dark .trinity-forms-required,
.trinity-forms-form.trinity-forms-style-dark .trinity-forms-field-error,
.trinity-forms-form.trinity-forms-style-dark .trinity-forms-messages.trinity-forms-error { color: #fda29b; }
/* Theme colours: the field colours come from the theme, which may be dark, so let
   the browser draw native parts (dropdown lists) to match the page, not light. */
.trinity-forms-form.trinity-forms-style-theme { color-scheme: normal; }

/* ---------------------------------------------------------------------------
   Accessibility and right-to-left (TF-26).
   --------------------------------------------------------------------------- */
/* Every button and link in a form shows where the keyboard is. The theme's own
   focus style wins where it has one; this is the floor. */
.trinity-forms-form button:focus-visible,
.trinity-forms-form a:focus-visible,
.trinity-forms-form input[type="checkbox"]:focus-visible,
.trinity-forms-form input[type="radio"]:focus-visible,
.trinity-forms-form input[type="range"]:focus-visible,
.trinity-forms-form input[type="file"]:focus-visible {
    outline: 2px solid var(--trinity-forms-accent, #4f46e5);
    outline-offset: 2px;
}
.trinity-forms-form .trinity-forms-field.has-error input[aria-invalid="true"],
.trinity-forms-form .trinity-forms-field.has-error select[aria-invalid="true"],
.trinity-forms-form .trinity-forms-field.has-error textarea[aria-invalid="true"] { border-width: 2px; }
/* Signature: the pad on its own line, buttons under it, and the type-it-instead box. */
.trinity-forms-form canvas.trinity-forms-signature-pad { display: block; }
.trinity-forms-form .trinity-forms-signature-typed { margin-top: .5rem; }
.trinity-forms-form .trinity-forms-signature-typed label { display: block; font-size: .875em; margin: .5rem 0 .25rem; }
.trinity-forms-form .trinity-forms-signature-typed input { max-width: 400px; }
.trinity-forms-form .trinity-forms-signature-clear,
.trinity-forms-form .trinity-forms-signature-type { margin-top: .5rem; margin-inline-end: .5rem; }

/* Right to left. The dropdown chevron sits at the start edge, and values that are
   always written left to right (addresses, numbers, phone numbers) stay that way
   inside an Arabic or Hebrew form, aligned to the field's start. */
.trinity-forms-form:dir(rtl) .trinity-forms-field select:not([multiple]) { background-position: left .8rem center; }
[dir="rtl"] .trinity-forms-form .trinity-forms-field select:not([multiple]) { background-position: left .8rem center; }
.trinity-forms-form .trinity-forms-field input[type="email"],
.trinity-forms-form .trinity-forms-field input[type="url"],
.trinity-forms-form .trinity-forms-field input[type="tel"],
.trinity-forms-form .trinity-forms-field input[type="number"] { direction: ltr; }
[dir="rtl"] .trinity-forms-form .trinity-forms-field input[type="email"],
[dir="rtl"] .trinity-forms-form .trinity-forms-field input[type="url"],
[dir="rtl"] .trinity-forms-form .trinity-forms-field input[type="tel"],
[dir="rtl"] .trinity-forms-form .trinity-forms-field input[type="number"] { text-align: right; }
[dir="rtl"] .trinity-forms-form .trinity-forms-field input[type="email"]::placeholder,
[dir="rtl"] .trinity-forms-form .trinity-forms-field input[type="url"]::placeholder,
[dir="rtl"] .trinity-forms-form .trinity-forms-field input[type="tel"]::placeholder { direction: rtl; }

@media (prefers-reduced-motion: reduce) {
    .trinity-forms-form *,
    .trinity-forms-form *::before { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
    .trinity-forms-form .trinity-forms-star:has(input:checked) .trinity-forms-star-icon,
    .trinity-forms-form .trinity-forms-star:has(~ .trinity-forms-star input:checked) .trinity-forms-star-icon { color: Highlight; }
    .trinity-forms-form .trinity-forms-field input:focus,
    .trinity-forms-form .trinity-forms-field select:focus,
    .trinity-forms-form .trinity-forms-field textarea:focus { outline: 2px solid Highlight; }
}