.trinity-forms-form { max-width: 640px; }
.trinity-forms-form .trinity-forms-field { margin: 0 0 1rem; }
.trinity-forms-form .trinity-forms-field > label { display: block; font-weight: 600; margin-bottom: .25rem; }

/* 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-left: 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: #d63638; }
.trinity-forms-form .trinity-forms-field-error { color: #d63638; font-size: .875em; margin-top: .25rem; }
.trinity-forms-form .trinity-forms-required { color: #d63638; margin-left: 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; }
.trinity-forms-form .trinity-forms-submit {
    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 { opacity: .6; cursor: wait; }
.trinity-forms-form .trinity-forms-messages { margin-top: 1rem; }
.trinity-forms-form .trinity-forms-messages.trinity-forms-error { color: #d63638; }
.trinity-forms-form .trinity-forms-messages.trinity-forms-success { color: #00a32a; }
.trinity-forms-confirmation { padding: 1rem; background: #edfaef; border-left: 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: left; }

/* --- 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: left; }
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 { text-align: right; padding-top: .55rem; }
.trinity-forms-labels-right .trinity-forms-field { grid-template-columns: 1fr 30%; }
.trinity-forms-labels-right .trinity-forms-field > label { order: 2; padding-top: .55rem; }

/* 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),
.trinity-forms-labels-right .trinity-forms-field > :not(label) { grid-column: 2; }
.trinity-forms-labels-right .trinity-forms-field > :not(label) { 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 { text-align: left; padding-top: 0; }
}

/* 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 {
    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 { 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-left: 4px solid #d63638;
    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 0 0 1.1rem; }
.trinity-forms-summary a { color: inherit; }

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