:where([data-webtzm-form], .form-page-preview, .form-page-preview__body) {
    --wtzm-form-accent: #0068e8;
    --wtzm-form-accent-strong: #004fb8;
    --wtzm-form-accent-soft: #eaf3ff;
    /* Text on the accent fill. White on the light accent; on the paler dark-mode accent white fell
       to about 2:1, so dark mode sets the canvas ink instead. */
    --wtzm-form-on-accent: #ffffff;
    --wtzm-form-ink: #172033;
    --wtzm-form-muted: #64748b;
    --wtzm-form-line: #cbd5e1;
    --wtzm-form-line-strong: #94a3b8;
    --wtzm-form-surface: #ffffff;
    --wtzm-form-subtle: #f8fafc;
    --wtzm-form-disabled: #f1f5f9;
    --wtzm-form-success: #067647;
    --wtzm-form-success-soft: #ecfdf3;
    --wtzm-form-danger: #b42318;
    --wtzm-form-danger-soft: #fff1f0;
    --wtzm-form-warning: #92400e;
    --wtzm-form-warning-soft: #fffbeb;
    color: var(--wtzm-form-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

:where([data-webtzm-form], .form-page-preview__body),
:where([data-webtzm-form], .form-page-preview__body) *,
:where([data-webtzm-form], .form-page-preview__body) *::before,
:where([data-webtzm-form], .form-page-preview__body) *::after {
    box-sizing: border-box;
}

[data-webtzm-form] {
    display: grid;
    inline-size: 100%;
    max-inline-size: 46rem;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.125rem;
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 1px solid var(--wtzm-form-line);
    border-radius: 16px;
    margin-inline: auto;
    color: var(--wtzm-form-ink);
    background: var(--wtzm-form-surface);
    box-shadow: 0 20px 54px rgb(15 23 42 / .08);
}

.form-page-preview {
    min-inline-size: 0;
    overflow: hidden;
    border: 1px solid var(--wtzm-form-line, #cbd5e1);
    border-radius: 12px;
    background: var(--wtzm-form-surface, #ffffff);
}

.form-page-preview__browser {
    min-inline-size: 0;
    padding: .75rem;
    background: var(--wtzm-form-subtle, #f8fafc);
}

.form-page-preview__bar {
    display: flex;
    min-inline-size: 0;
    align-items: center;
    gap: .375rem;
}

.form-page-preview__bar > span {
    inline-size: .5rem;
    block-size: .5rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--wtzm-form-line, #cbd5e1);
}

.form-page-preview__bar strong {
    min-inline-size: 0;
    margin-inline-start: .5rem;
    color: var(--wtzm-form-muted, #64748b);
    font-size: .75rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.form-page-preview__body {
    display: grid;
    min-inline-size: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: clamp(1rem, 4vw, 1.5rem);
    border-block-start: 1px solid var(--wtzm-form-line);
    background: var(--wtzm-form-surface);
}

.form-page-preview__header {
    display: grid;
    gap: .3rem;
    padding-block-end: .25rem;
}

.form-page-preview__header strong {
    font-size: clamp(1.05rem, 3vw, 1.3rem);
    font-weight: 700;
    letter-spacing: -.015em;
}

.form-page-preview__header p {
    margin: 0;
    color: var(--wtzm-form-muted);
    font-size: .875rem;
    line-height: 1.6;
}

.form-page-preview__page-label {
    margin: 0;
    padding-block-start: .75rem;
    border-block-start: 1px solid var(--wtzm-form-line);
    color: var(--wtzm-form-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.form-page-preview__page-label small {
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.form-page-preview__page-label + .wtzm-page-break {
    padding-block-start: 0;
    border-block-start: 0;
}

.form-page-preview__fields {
    display: grid;
    min-inline-size: 0;
    gap: 1rem;
}

:where([data-webtzm-form] [data-wtzm-field], .form-page-preview__field, .form-page-preview__body [data-wtzm-field]) {
    display: grid;
    min-inline-size: 0;
    gap: .45rem;
    margin: 0;
}

:where([data-webtzm-form] [data-wtzm-field][hidden], .form-page-preview__field[hidden]),
:where([data-webtzm-form], .form-page-preview__body) input[type="hidden"] {
    display: none;
}

:where([data-webtzm-form] [data-wtzm-field] > label:not(.wtzm-choice), [data-webtzm-form] [data-wtzm-field] > fieldset > legend, .form-page-preview__field > span:first-child, .form-page-preview__field > legend, .form-page-preview__body [data-wtzm-field] > label:not(.wtzm-choice), .form-page-preview__body [data-wtzm-field] > fieldset > legend) {
    min-inline-size: 0;
    padding: 0;
    color: var(--wtzm-form-ink);
    font-size: .875rem;
    font-weight: 650;
    line-height: 1.4;
}

:where([data-webtzm-form], .form-page-preview__body) fieldset {
    min-inline-size: 0;
    padding: 0;
    border: 0;
    margin: 0;
}

.wtzm-required {
    margin-inline-start: .2rem;
    color: var(--wtzm-form-danger);
    font-weight: 750;
}

:where([data-webtzm-form], .form-page-preview__body)
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="range"]), textarea, select):not(.wtzm-sr) {
    display: block;
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: 44px;
    border: 1px solid var(--wtzm-form-line);
    border-radius: 8px;
    padding: .65rem .8rem;
    color: var(--wtzm-form-ink);
    background-color: var(--wtzm-form-surface);
    box-shadow: 0 1px 2px rgb(15 23 42 / .035);
    font: inherit;
    font-size: .9rem;
    line-height: 1.35;
    outline: 0;
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

:where([data-webtzm-form], .form-page-preview__body) textarea {
    min-block-size: 7.5rem;
    resize: vertical;
}

:where([data-webtzm-form], .form-page-preview__body)
:is(input, textarea)::placeholder {
    color: var(--wtzm-form-muted);
    opacity: .82;
}

:where([data-webtzm-form], .form-page-preview__body) select {
    appearance: none;
    padding-inline-end: 2.7rem;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
        calc(100% - 1.15rem) calc(50% - .125rem),
        calc(100% - .85rem) calc(50% - .125rem);
    background-repeat: no-repeat;
    background-size: .32rem .32rem;
}

:where([data-webtzm-form], .form-page-preview__body) :is(option, optgroup) {
    color: var(--wtzm-form-ink);
    background-color: var(--wtzm-form-surface);
}

:where([data-webtzm-form], .form-page-preview__body) option:disabled {
    color: var(--wtzm-form-muted);
}

:where([data-webtzm-form], .form-page-preview__body)
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="range"]), textarea, select):focus-visible {
    border-color: var(--wtzm-form-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wtzm-form-accent) 18%, transparent);
}

:where([data-webtzm-form], .form-page-preview__body)
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="range"]), textarea, select):disabled {
    color: var(--wtzm-form-muted);
    background: var(--wtzm-form-disabled);
    box-shadow: none;
    cursor: not-allowed;
    opacity: .82;
}

:where([data-webtzm-form], .form-page-preview__body)
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="range"]), textarea, select):is([aria-invalid="true"], :user-invalid) {
    border-color: var(--wtzm-form-danger);
    background-color: var(--wtzm-form-danger-soft);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wtzm-form-danger) 12%, transparent);
}

[data-webtzm-form] [data-wtzm-field][data-wtzm-validation-state="success"]
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="range"]), textarea, select) {
    border-color: color-mix(in srgb, var(--wtzm-form-success) 52%, var(--wtzm-form-line));
}

.wtzm-choice-grid,
.form-page-preview__choice-row {
    display: grid;
    min-inline-size: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: .55rem;
}

.wtzm-choice-grid:has(> :only-child) > .wtzm-choice,
.form-page-preview__field--choices > .form-page-preview__inline-choice {
    inline-size: 100%;
    max-inline-size: 20rem;
}

.wtzm-choice,
.form-page-preview__inline-choice,
.form-page-preview__choice-row > label {
    display: grid;
    min-block-size: 44px;
    min-inline-size: 0;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    align-items: center;
    gap: .7rem;
    padding: .65rem .75rem;
    border: 1px solid var(--wtzm-form-line);
    border-radius: 8px;
    color: var(--wtzm-form-ink);
    background: var(--wtzm-form-surface);
    font-size: .875rem;
    font-weight: 550;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

:where(.wtzm-choice, .form-page-preview__inline-choice, .form-page-preview__choice-row > label):hover {
    border-color: var(--wtzm-form-line-strong);
    background: var(--wtzm-form-subtle);
}

:where(.wtzm-choice, .form-page-preview__inline-choice, .form-page-preview__choice-row > label):has(input:checked) {
    border-color: color-mix(in srgb, var(--wtzm-form-accent) 55%, var(--wtzm-form-line));
    background: var(--wtzm-form-accent-soft);
}

:where(.wtzm-choice, .form-page-preview__inline-choice, .form-page-preview__choice-row > label):has(input:focus-visible) {
    border-color: var(--wtzm-form-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wtzm-form-accent) 18%, transparent);
}

:where(.wtzm-choice, .form-page-preview__inline-choice, .form-page-preview__choice-row > label):has(input:disabled) {
    color: var(--wtzm-form-muted);
    background: var(--wtzm-form-disabled);
    cursor: not-allowed;
    opacity: .82;
}

:where(.wtzm-choice, .form-page-preview__inline-choice, .form-page-preview__choice-row > label) > input {
    display: grid;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    min-inline-size: 1.25rem;
    min-block-size: 1.25rem;
    appearance: none;
    place-items: center;
    border: 2px solid var(--wtzm-form-line-strong);
    padding: 0;
    margin: 0;
    background: var(--wtzm-form-surface);
    cursor: inherit;
    outline: 0;
}

:where(.wtzm-choice, .form-page-preview__inline-choice) > input[type="checkbox"] {
    border-radius: 8px;
}

.form-page-preview__choice-row > label > input[type="radio"],
.wtzm-choice > input[type="radio"] {
    border-radius: 999px;
}

:where(.wtzm-choice, .form-page-preview__inline-choice, .form-page-preview__choice-row > label) > input::after {
    content: "";
    display: block;
    opacity: 0;
}

:where(.wtzm-choice, .form-page-preview__inline-choice) > input[type="checkbox"]::after {
    inline-size: .34rem;
    block-size: .64rem;
    border: solid #ffffff;
    border-width: 0 .13rem .13rem 0;
    transform: translateY(-.05rem) rotate(45deg);
}

:where(.wtzm-choice, .form-page-preview__choice-row > label) > input[type="radio"]::after {
    inline-size: .48rem;
    block-size: .48rem;
    border-radius: 999px;
    background: #ffffff;
}

:where(.wtzm-choice, .form-page-preview__inline-choice, .form-page-preview__choice-row > label) > input:checked {
    border-color: var(--wtzm-form-accent);
    background: var(--wtzm-form-accent);
}

:where(.wtzm-choice, .form-page-preview__inline-choice, .form-page-preview__choice-row > label) > input:checked::after {
    opacity: 1;
}

:where([data-webtzm-form] [data-wtzm-field], .form-page-preview__field)[aria-invalid="true"] :where(.wtzm-choice, .form-page-preview__inline-choice, .form-page-preview__choice-row > label) {
    border-color: color-mix(in srgb, var(--wtzm-form-danger) 60%, var(--wtzm-form-line));
}

.wtzm-field-help,
.form-page-preview__file-note {
    color: var(--wtzm-form-muted);
    font-size: .75rem;
    font-weight: 450;
    line-height: 1.55;
}

/* The help line under a label is a paragraph, which a page's own stylesheet may give margins; it takes none, so the
   gap above and below it is the field's own. */
p.wtzm-field-help {
    margin: 0;
}

.wtzm-field-error,
.form-page-preview__error {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin: 0;
    color: var(--wtzm-form-danger);
    font-size: .78rem;
    font-weight: 650;
    line-height: 1.45;
}

.wtzm-field-error::before,
.form-page-preview__error::before {
    /* UAT 2026-10-28 OBS-97: the mark is decoration. The second declaration gives it an empty
       alternative text, so a screen reader names the error "This field is required." and not
       "! This field is required."; an engine without the syntax keeps the first. */
    content: "!";
    content: "!" / "";
    display: grid;
    inline-size: 1rem;
    block-size: 1rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 999px;
    margin-block-start: .05rem;
    color: #ffffff;
    background: var(--wtzm-form-danger);
    font-size: .65rem;
    line-height: 1;
}

.wtzm-submit,
[data-preview-submit] {
    display: inline-flex;
    min-block-size: 44px;
    inline-size: fit-content;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 1px solid var(--wtzm-form-accent);
    border-radius: 8px;
    padding: .7rem 1.15rem;
    color: var(--wtzm-form-on-accent);
    background: var(--wtzm-form-accent);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--wtzm-form-accent) 20%, transparent);
    cursor: pointer;
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.wtzm-submit:is(:hover, :focus-visible),
[data-preview-submit]:is(:hover, :focus-visible) {
    border-color: var(--wtzm-form-accent-strong);
    background: var(--wtzm-form-accent-strong);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wtzm-form-accent) 20%, transparent);
    outline: 0;
}

.wtzm-submit:active,
[data-preview-submit]:active {
    transform: translateY(1px);
}

.wtzm-submit:disabled,
[data-preview-submit]:disabled {
    border-color: var(--wtzm-form-line);
    color: var(--wtzm-form-muted);
    background: var(--wtzm-form-disabled);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.wtzm-submit[data-processing] {
    cursor: wait;
}

.wtzm-submit__spinner {
    inline-size: 1rem;
    block-size: 1rem;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-inline-start-color: transparent;
    border-radius: 999px;
    animation: wtzm-submit-spin .75s linear infinite;
}

@keyframes wtzm-submit-spin {
    to { transform: rotate(360deg); }
}

[data-wtzm-send-status],
.form-page-preview__send-status {
    display: flex;
    min-block-size: 44px;
    align-items: center;
    gap: .55rem;
    padding: .7rem .8rem;
    border: 1px solid var(--wtzm-form-line);
    border-radius: 8px;
    margin: 0;
    color: var(--wtzm-form-muted);
    background: var(--wtzm-form-subtle);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.45;
}

[data-wtzm-send-status]:empty {
    display: none;
}

:where([data-wtzm-send-status], .form-page-preview__send-status)[data-status-tone="sending"] {
    border-color: color-mix(in srgb, var(--wtzm-form-accent) 35%, var(--wtzm-form-line));
    color: var(--wtzm-form-accent-strong);
    background: var(--wtzm-form-accent-soft);
}

:where([data-wtzm-send-status], .form-page-preview__send-status)[data-status-tone="success"] {
    border-color: color-mix(in srgb, var(--wtzm-form-success) 35%, var(--wtzm-form-line));
    color: var(--wtzm-form-success);
    background: var(--wtzm-form-success-soft);
}

:where([data-wtzm-send-status], .form-page-preview__send-status):is([data-status-tone="review"], [data-status-tone="error"]) {
    border-color: color-mix(in srgb, var(--wtzm-form-danger) 35%, var(--wtzm-form-line));
    color: var(--wtzm-form-danger);
    background: var(--wtzm-form-danger-soft);
}

/* The preview frame reads the same tokens as the form inside it; declared only on the body, the
   frame fell back to its light literals and drew a white browser around a dark form. */
:where([data-theme="dark"], .dark) :where([data-webtzm-form], .form-page-preview, .form-page-preview__body) {
    --wtzm-form-accent: #7cb6ff;
    --wtzm-form-accent-strong: #9ac7ff;
    --wtzm-form-accent-soft: #17375e;
    --wtzm-form-on-accent: #0c1524;
    --wtzm-form-ink: #edf4ff;
    --wtzm-form-muted: #aab8cc;
    --wtzm-form-line: #30415b;
    --wtzm-form-line-strong: #526984;
    --wtzm-form-surface: #17243a;
    --wtzm-form-subtle: #111c30;
    --wtzm-form-disabled: #202d43;
    --wtzm-form-success: #75d9b9;
    --wtzm-form-success-soft: #16382f;
    --wtzm-form-danger: #ff9aa5;
    --wtzm-form-danger-soft: #3b2028;
    color-scheme: dark;
}

@media (max-width: 30rem) {
    [data-webtzm-form] {
        gap: 1rem;
        padding: 1rem;
        border-radius: 12px;
    }

    .form-page-preview__body {
        padding: 1rem;
    }

    .wtzm-submit,
    [data-preview-submit] {
        inline-size: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where([data-webtzm-form], .form-page-preview__body) *,
    :where([data-webtzm-form], .form-page-preview__body) *::before,
    :where([data-webtzm-form], .form-page-preview__body) *::after {
        scroll-behavior: auto;
        transition: none;
    }

    .wtzm-submit__spinner {
        animation-duration: 1.5s;
    }
}

/* Webtzm Form phase 3B-2 (docs/hosted-form-implementation-plan.md): what the field markup in
   assets/field-markup.js draws beyond the older kinds - a linear scale, a star rating, an "Other" answer,
   and the heading and text block that only display. Every colour is a token the page or the theme sets, so a
   hosted page's preset and a pasted form's own palette change them with everything else. */

.wtzm-sr {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.wtzm-scale {
    display: grid;
    min-inline-size: 0;
    grid-template-columns: repeat(auto-fit, minmax(2.75rem, 1fr));
    gap: .4rem;
}

.wtzm-scale__option {
    position: relative;
    display: grid;
    min-block-size: 44px;
    min-inline-size: 0;
    place-items: center;
    border: 1px solid var(--wtzm-form-line);
    border-radius: 8px;
    color: var(--wtzm-form-ink);
    background: var(--wtzm-form-surface);
    font-size: .875rem;
    font-weight: 650;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.wtzm-scale__option:hover {
    border-color: var(--wtzm-form-line-strong);
    background: var(--wtzm-form-subtle);
}

.wtzm-scale__option:has(input:checked) {
    border-color: var(--wtzm-form-accent);
    color: var(--wtzm-form-on-accent);
    background: var(--wtzm-form-accent);
}

.wtzm-scale__option:has(input:focus-visible) {
    border-color: var(--wtzm-form-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wtzm-form-accent) 30%, transparent);
}

.wtzm-scale__option > input,
.wtzm-rating__star > input {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.wtzm-scale__ends {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: .45rem 0 0;
    color: var(--wtzm-form-muted);
    font-size: .75rem;
    line-height: 1.4;
}

.wtzm-scale__ends > span:last-child {
    text-align: end;
}

.wtzm-rating {
    --wtzm-rating-unfilled: var(--wtzm-form-line-strong);
    --wtzm-rating-filled: var(--wtzm-rating-fill, var(--wtzm-form-accent));
    display: flex;
    flex-wrap: wrap;
    gap: .125rem;
}

.wtzm-rating__star {
    position: relative;
    display: grid;
    inline-size: 44px;
    block-size: 44px;
    place-items: center;
    border-radius: 8px;
    cursor: pointer;
}

.wtzm-rating__glyph {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    background: var(--wtzm-rating-unfilled);
    clip-path: polygon(50% 2%, 62% 36%, 98% 37%, 69% 58%, 80% 93%, 50% 72%, 20% 93%, 31% 58%, 2% 37%, 38% 36%);
    transition: background-color 150ms ease;
}

.wtzm-rating__star:has(input:checked) .wtzm-rating__glyph,
.wtzm-rating__star:has(~ .wtzm-rating__star input:checked) .wtzm-rating__glyph {
    background: var(--wtzm-rating-filled);
}

.wtzm-rating__star:has(input:focus-visible) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wtzm-rating-filled) 35%, transparent);
}

@media (hover: hover) {
    .wtzm-rating:hover .wtzm-rating__glyph {
        background: var(--wtzm-rating-unfilled);
    }

    .wtzm-rating:hover .wtzm-rating__star:hover .wtzm-rating__glyph,
    .wtzm-rating:hover .wtzm-rating__star:has(~ .wtzm-rating__star:hover) .wtzm-rating__glyph {
        background: var(--wtzm-rating-filled);
    }
}

@media (forced-colors: active) {
    .wtzm-rating__glyph {
        background: GrayText;
    }

    .wtzm-rating__star:has(input:checked) .wtzm-rating__glyph,
    .wtzm-rating__star:has(~ .wtzm-rating__star input:checked) .wtzm-rating__glyph {
        background: Highlight;
    }

    .wtzm-scale__option:has(input:checked) {
        outline: 2px solid Highlight;
    }
}

.wtzm-other {
    display: grid;
    grid-column: 1 / -1;
    min-inline-size: 0;
    gap: .55rem;
}

.wtzm-block-heading {
    margin: .5rem 0 0;
    color: var(--wtzm-form-ink);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}

.wtzm-block-text {
    color: var(--wtzm-form-ink);
    font-size: .9rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.wtzm-block-text p {
    margin: 0;
}

.wtzm-block-text :is(p + p, p + ul, ul + p, ul + ul) {
    margin-top: .75em;
}

.wtzm-block-text ul {
    margin: 0;
    padding-inline-start: 1.25em;
}

.wtzm-block-text li + li {
    margin-top: .25em;
}

.wtzm-block-text a {
    color: var(--wtzm-form-accent-strong);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Webtzm Form phase 3B-3 (docs/hosted-form-implementation-plan.md): pages. Without script a page break is a
   section heading with a rule above it, so the form reads as one long page. With script (assets/enhance.js) the
   form is split into pages: the rule goes, because the pager says where the visitor is, and the break's title stays
   as the heading of the page it starts. */

.wtzm-page-break {
    display: grid;
    min-inline-size: 0;
    gap: .35rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--wtzm-form-line);
}

.wtzm-page-break .wtzm-block-heading {
    margin: 0;
}

.wtzm-page-break__title:focus {
    outline: 0;
}

.wtzm-page-break__title:focus-visible,
.wtzm-pager__count:focus-visible {
    outline: 2px solid var(--wtzm-form-accent-strong);
    outline-offset: 4px;
    border-radius: 4px;
}

.wtzm-page-break__about {
    margin: 0;
    color: var(--wtzm-form-muted);
    font-size: .9rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

[data-wtzm-paged] .wtzm-page-break {
    padding-block-start: 0;
    border-block-start: 0;
}

.wtzm-page {
    display: grid;
    min-inline-size: 0;
    gap: inherit;
}

.wtzm-page[hidden],
.wtzm-page-break[hidden],
.wtzm-pager__nav [hidden] {
    display: none;
}

.wtzm-pager {
    display: grid;
    min-inline-size: 0;
    gap: .5rem;
}

.wtzm-pager__count {
    margin: 0;
    color: var(--wtzm-form-muted);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.4;
    scroll-margin-block-start: 1rem;
}

.wtzm-pager__bar {
    appearance: none;
    -webkit-appearance: none;
    inline-size: 100%;
    block-size: .5rem;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    color: var(--wtzm-form-accent-strong);
    background: var(--wtzm-form-line);
}

.wtzm-pager__bar::-webkit-progress-bar {
    border-radius: 999px;
    background: var(--wtzm-form-line);
}

.wtzm-pager__bar::-webkit-progress-value {
    border-radius: 999px;
    background: var(--wtzm-form-accent-strong);
    transition: inline-size 200ms ease;
}

.wtzm-pager__bar::-moz-progress-bar {
    border-radius: 999px;
    background: var(--wtzm-form-accent-strong);
}

.wtzm-pager__nav {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}

.wtzm-pager__nav > :is(.wtzm-pager__next, .wtzm-submit) {
    margin-inline-start: auto;
}

.wtzm-pager__back {
    display: inline-flex;
    min-block-size: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--wtzm-form-line-strong);
    border-radius: 8px;
    padding: .7rem 1.15rem;
    color: var(--wtzm-form-ink);
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.wtzm-pager__back:is(:hover, :focus-visible) {
    border-color: var(--wtzm-form-ink);
    background: var(--wtzm-form-subtle);
}

.wtzm-pager__back:focus-visible {
    outline: 2px solid var(--wtzm-form-accent-strong);
    outline-offset: 2px;
}

@media (max-width: 30rem) {
    .wtzm-pager__nav > * {
        flex: 1 1 8rem;
    }

    .wtzm-pager__nav > :is(.wtzm-pager__next, .wtzm-submit) {
        margin-inline-start: 0;
    }

    .wtzm-pager__nav :is(.wtzm-submit, .wtzm-pager__back) {
        inline-size: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wtzm-pager__bar::-webkit-progress-value,
    .wtzm-pager__back {
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wtzm-scale__option,
    .wtzm-rating__glyph {
        transition: none;
    }
}

/* Webtzm Form phase 3C (docs/hosted-form-implementation-plan.md): a slider, one agreement box, a ranking and a choice
   grid, drawn by assets/field-markup.js. Tokens only, so a hosted page's preset and a pasted form's own palette change
   them with everything else. The older rules above leave a range input alone (it has no box of its own). */

.wtzm-slider {
    display: grid;
    min-inline-size: 0;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .25rem .75rem;
}

.wtzm-slider__value {
    grid-column: 1 / -1;
    color: var(--wtzm-form-ink);
    font-size: 1.125rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1.3;
}

.wtzm-slider[data-wtzm-pending] .wtzm-slider__value {
    color: var(--wtzm-form-muted);
    font-size: .875rem;
    font-weight: 550;
}

.wtzm-slider__end {
    color: var(--wtzm-form-muted);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

.wtzm-slider > input[type="range"] {
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: 44px;
    margin: 0;
    accent-color: var(--wtzm-form-accent);
    background: transparent;
    cursor: pointer;
}

.wtzm-slider[data-wtzm-pending] > input[type="range"] {
    accent-color: var(--wtzm-form-line-strong);
}

.wtzm-slider > input[type="range"]:focus-visible {
    outline: 2px solid var(--wtzm-form-accent-strong);
    outline-offset: 2px;
}

.wtzm-consent__link {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.5;
}

.wtzm-consent__link a {
    color: var(--wtzm-form-accent-strong);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wtzm-ranking {
    display: grid;
    min-inline-size: 0;
    gap: .55rem;
}

.wtzm-ranking__pick {
    display: grid;
    min-inline-size: 0;
    grid-template-columns: 3rem minmax(0, 1fr);
    align-items: center;
    gap: .7rem;
}

.wtzm-ranking__pick > label {
    color: var(--wtzm-form-muted);
    font-size: .8125rem;
    font-weight: 650;
}

.wtzm-ranking__list {
    display: grid;
    min-inline-size: 0;
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wtzm-ranking__item {
    display: grid;
    min-block-size: 44px;
    min-inline-size: 0;
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem;
    padding: .25rem .35rem .25rem .75rem;
    border: 1px solid var(--wtzm-form-line);
    border-radius: 8px;
    color: var(--wtzm-form-ink);
    background: var(--wtzm-form-surface);
    font-size: .875rem;
    font-weight: 550;
    line-height: 1.4;
}

[data-wtzm-ranking-ui]:has(input[data-wtzm-pending]) .wtzm-ranking__item {
    border-style: dashed;
    color: var(--wtzm-form-muted);
}

.wtzm-ranking__number {
    color: var(--wtzm-form-muted);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.wtzm-ranking__name {
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.wtzm-ranking__moves {
    display: flex;
    gap: .25rem;
}

.wtzm-ranking__move {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border: 1px solid var(--wtzm-form-line);
    border-radius: 8px;
    color: var(--wtzm-form-ink);
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.wtzm-ranking__move > svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.wtzm-ranking__keep {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    justify-self: start;
    padding: .5rem 1rem;
    border: 1px solid var(--wtzm-form-line);
    border-radius: 8px;
    color: var(--wtzm-form-ink);
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: .875rem;
    font-weight: 650;
}

.wtzm-ranking__keep[hidden] {
    display: none;
}

.wtzm-ranking__move:disabled {
    color: var(--wtzm-form-muted);
    cursor: not-allowed;
    opacity: .45;
}

.wtzm-ranking__move:not(:disabled):hover,
.wtzm-ranking__keep:hover {
    border-color: var(--wtzm-form-line-strong);
    background: var(--wtzm-form-subtle);
}

.wtzm-ranking__move:focus-visible,
.wtzm-ranking__keep:focus-visible {
    outline: 2px solid var(--wtzm-form-accent-strong);
    outline-offset: 2px;
}

.wtzm-grid {
    display: grid;
    min-inline-size: 0;
    gap: 1rem;
    margin-block-start: .5rem;
}

.wtzm-grid__row {
    display: grid;
    min-inline-size: 0;
    gap: .45rem;
}

.wtzm-grid__row > legend {
    padding: 0;
    margin-block-end: .45rem;
    color: var(--wtzm-form-ink);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.wtzm-grid__choices {
    display: grid;
    min-inline-size: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr));
    gap: .4rem;
}