/*
  ----------------------------------------
  Forms (for forms using ui_field helpers)
  ----------------------------------------
*/

@layer styles {
    body.ui-date-picker-active::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: var(--z-scrim);
        background: color-mix(in oklch, var(--black) 50%, transparent);
        pointer-events: none;
    }

    body.ui-date-picker-active .ui-date-field-control {
        z-index: var(--z-drawer);
    }

    form:has(.ui-field) {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        max-width: var(--max-w-form);

        /* Wrap multiple fields in a div.form-row for responsive layout  */
        .form-row {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: var(--space-sm);
        }

        /* Wrap a form control and its label, notes, and error in a .ui-field */
        .ui-field {
            display: flex;
            position: relative;
            flex-direction: column;
            gap: var(--space-2xs);
            flex: 1;
            min-width: 16rem;

            label {
                font-weight: 600;
                font-size: calc(var(--ui-field-font-size) - 0.1rem);
                color: var(--ui-field-label-color);
            }

            /* Custom CSS: Prewind has no disabled parent selector. Guide 5.2
               gives a disabled field's label --faint while its value stays
               --midtone; scoped to the text-like controls that show a value. */
            &:has(
                    input:not([type="checkbox"], [type="radio"]):disabled,
                    textarea:disabled,
                    select:disabled
                )
                > label {
                color: var(--faint);
            }

            .ui-field-control {
                position: relative;
                width: 100%;
            }

            /* Text inputs and selects */
            input:not([type="checkbox"], [type="radio"]),
            textarea,
            select {
                width: 100%;
                height: var(--ui-field-height);
                font-size: var(--ui-field-font-size);
                padding: 0 var(--ui-field-padding);
                border: var(--ui-field-border);
                border-radius: var(--ui-field-border-radius);
                background: var(--ui-field-bg);
                color: var(--ui-field-value-color);
                transition: all var(--ui-duration-fast) var(--ui-ease);

                /* Guide 5.2 focus: the 2px ink ring from the field tokens.
                   The negative offset overlaps the 1px ink border so the
                   visible ink band is exactly 2px, not 3px. */
                &:focus {
                    outline: var(--ui-field-focus-outline)
                        var(--ui-field-focus-color);
                    border-color: var(--ui-field-focus-color);
                    outline-offset: calc(-1 * var(--border));
                }

                &::placeholder {
                    color: var(--ui-field-placeholder-color);
                }

                /* Custom CSS: Prewind has no read-only variant. Guide 5.2 gives
                   read-only the quiet --lighter ground with no visible border and
                   a --midtone value. Scoped to [readonly] on controls that
                   natively support it, not :read-only, and never a disabled
                   control, so select, file, hidden, button-like and
                   checkbox/radio controls keep their native semantics. The
                   transparent border preserves the control's 1px geometry. */
                &[readonly]:not(:disabled):not(
                        select,
                        [type="file"],
                        [type="hidden"],
                        [type="range"],
                        [type="color"],
                        [type="submit"],
                        [type="button"],
                        [type="reset"],
                        [type="image"]
                    ) {
                    --ui-field-state-bg: var(--ui-field-bg-readonly);
                    --ui-field-state-text: var(--midtone);
                    background: var(--ui-field-state-bg);
                    border-color: transparent;
                    color: var(--ui-field-state-text);
                }

                /* A focused read-only field still shows the shared 2px ink
                   focus; its specificity matches the rule above so it wins. */
                &[readonly]:not(:disabled):focus {
                    border-color: var(--ui-field-focus-color);
                }

                /* Disabled: guide 5.2 --lighter ground, --hairline border,
                   --midtone value; the label is handled below. The read-only
                   rule excludes disabled, so this border always wins. */
                &:disabled {
                    --ui-field-state-bg: var(--ui-field-bg-disabled);
                    --ui-field-state-text: var(--ui-field-value-color-disabled);
                    background: var(--ui-field-state-bg);
                    border-color: var(--hairline);
                    color: var(--ui-field-state-text);
                    cursor: not-allowed;
                }

                /* Custom CSS: Chrome autofill needs an !important inset fill. Reading the
                   control's state variables keeps the A1 ground and text for
                   filled, read-only, disabled and error controls. */
                &:-webkit-autofill {
                    -webkit-text-fill-color: var(
                        --ui-field-state-text,
                        var(--ui-field-value-color)
                    ) !important;
                    box-shadow: 0 0 0 1000px
                        var(--ui-field-state-bg, var(--ui-field-bg))
                        inset !important;
                }
            }

            /* Select dropdown arrow spacing */
            select {
                padding-right: calc(var(--ui-field-padding) + 0.5rem);
                appearance: none;
                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='%23888' 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 var(--ui-field-padding) center;
                background-size: 1rem;
            }

            textarea {
                height: auto;
                min-height: 5rem;
                padding-top: 0.625rem;
                padding-bottom: 0.625rem;
            }

            /* Checkboxes - modern custom styling */
            input[type="checkbox"] {
                appearance: none;
                width: 1.4rem;
                height: 1.4rem;
                border: var(--ui-field-border);
                border-radius: 3px;
                background-color: var(--white);
                cursor: pointer;
                transition: all var(--ui-duration-fast) var(--ui-ease);
                flex-shrink: 0;
                position: relative;

                &:hover {
                    border-color: var(--brand-1);
                }

                &:focus {
                    outline: none;
                }

                &:checked {
                    background-color: color-mix(
                        in srgb,
                        var(--brand-1) 70%,
                        transparent
                    );
                    border-color: var(--brand-1);

                    /* Checkmark using CSS */
                    &::after {
                        content: "";
                        position: absolute;
                        left: 0.45rem;
                        top: 0rem;
                        width: 0.45rem;
                        height: 1.15rem;
                        border: solid var(--darker);
                        border-width: 0 3.6px 4px 0;
                        transform: rotate(45deg);
                    }
                }

                &:disabled {
                    background-color: var(--lighter);
                    border-color: var(--light);
                    cursor: not-allowed;

                    &:checked {
                        background-color: var(--midtone);
                    }
                }
            }

            /* Radio buttons - modern custom styling */
            input[type="radio"] {
                appearance: none;
                width: 1.125rem;
                height: 1.125rem;
                border: var(--ui-field-border);
                border-radius: 50%;
                background-color: var(--white);
                cursor: pointer;
                transition: all var(--ui-duration-fast) var(--ui-ease);
                flex-shrink: 0;
                position: relative;

                &:hover {
                    border-color: var(--brand-1);
                }

                &:focus {
                    outline: none;
                }

                &:checked {
                    border-color: var(--brand-1);
                    border-width: 2px;

                    /* Large inner dot with white ring */
                    &::after {
                        content: "";
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        width: 0.625rem;
                        height: 0.625rem;
                        border-radius: 50%;
                        background-color: var(--brand-1);
                    }
                }

                &:disabled {
                    background-color: var(--lighter);
                    border-color: var(--light);
                    cursor: not-allowed;

                    &:checked {
                        border-color: var(--midtone);

                        &::after {
                            background-color: var(--midtone);
                        }
                    }
                }
            }

            /* File drop zone */
            .file-drop-zone {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: var(--space-xs);
                width: 100%;
                min-height: 8rem;
                padding: var(--space-md);
                border: var(--ui-field-border);
                border-style: dashed;
                border-radius: var(--ui-field-border-radius);
                background: var(--ui-field-bg);
                color: var(--ui-field-value-color);
                cursor: pointer;
                transition: all var(--ui-duration-fast);

                &:hover {
                    border-color: var(--ui-field-focus-color);
                    background: color-mix(
                        in srgb,
                        var(--ui-field-bg) 97%,
                        var(--ui-field-focus-color)
                    );
                }

                &.dragging {
                    border-color: var(--ui-field-focus-color);
                    background: color-mix(
                        in srgb,
                        var(--ui-field-bg) 95%,
                        var(--ui-field-focus-color)
                    );
                }

                .upload-icon {
                    color: var(--midtone);
                    width: 2.5rem;
                    height: 2.5rem;
                }

                .file-drop-text {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: var(--space-2xs);
                    text-align: center;
                }

                .file-drop-prompt {
                    font-size: var(--ui-field-font-size);
                    color: var(--ui-field-value-color);

                    strong {
                        color: var(--ui-field-focus-color);
                    }
                }

                .file-name {
                    font-size: var(--ui-field-font-size);
                    color: var(--ui-field-value-color);
                    font-weight: 500;
                }
            }

            /* Icons */
            .icon,
            .trailing-icon {
                position: absolute;
                color: var(--ui-field-label-color);
                top: 50%;
                transform: translate(0, -50%);
                z-index: calc(var(--z-raised) + 4);
                width: var(--ui-field-icon-width);
                height: auto;
            }

            .icon {
                left: var(--ui-field-padding);
            }

            /* For inputs with icons, */
            &:has(.icon) input:not([type="date"]) {
                padding-left: calc(
                    2 * var(--ui-field-padding) + var(--ui-field-icon-width) -
                        0.2rem
                );
            }

            /* Trailing icon (right side) */
            .trailing-icon {
                right: var(--ui-field-padding);
            }

            &:has(.trailing-icon) input {
                padding-right: calc(
                    0.625rem + 1rem + 0.5rem
                ); /* icon right + icon width + gap */
            }

            /* Custom CSS: form helpers share compact supporting text; Prewind has
               no text-xs utility for notes. Validation messages follow guide
               5.2's --text-sm error size. */
            span.note {
                font-size: var(--text-xs);
                color: var(--midtone);
                margin-top: -1px;
                margin-bottom: -12px;
            }

            span.error {
                font-size: var(--text-sm);
                color: var(--error);
                margin-top: -1px;
                margin-bottom: -12px;
            }

            /* Error state styling (guide 5.2): white ground, a 2px --error
               border and the message beneath. Disabled and read-only fields
               keep their own treatment, so the error rules are excluded for
               them to avoid state leaks. The state variables also give an
               autofilled error control its white ground and error text. */
            &:has(span.error):not(:has(:disabled)):not(:has([readonly])) {
                --ui-field-state-bg: var(--ui-field-bg);
                --ui-field-state-text: var(--error);

                input:not([type="checkbox"], [type="radio"]),
                textarea,
                select {
                    background: var(--ui-field-state-bg);
                    border-color: var(--error);
                    border-width: var(--border-lg);
                    color: var(--ui-field-state-text);

                    /* Overlap the 2px error border so the ink band stays 2px. */
                    &:focus {
                        outline-color: var(--error);
                        border-color: var(--error);
                        outline-offset: calc(-1 * var(--border-lg));
                    }
                }
                label {
                    color: var(--error);
                }
            }

            /* Labels for an individual checkbox or radio button */
            label:has(input[type="checkbox"], input[type="radio"]) {
                display: flex;
                font-size: var(--text-sm);
                align-items: center;
                gap: var(--space-xs);
                font-weight: 400;
            }

            /* Fieldset and legend for checkbox/radio groups */
            fieldset {
                display: flex;
                flex-direction: column;
                gap: var(--space-xs);
                min-width: 4rem;

                legend {
                    padding-bottom: var(--space-sm);
                    font-size: var(--text-base);
                }
            }
        }
    }

    .form-footer {
        padding: var(--space-sm) 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-sm);
    }

    /* Date inputs: hide the helper's leading icon (the native picker indicator
     already serves that role) and pull the input back to standard padding. */
    .ui-field:has(input[type="date"]) .icon {
        display: none;
    }

    .ui-field:has(input[type="date"]) input {
        padding-left: var(--ui-field-padding);
    }

    .ui-equipment-form input[type="date"],
    .ui-equipment-form input[type="date"]::-webkit-date-and-time-value,
    .ui-vehicle-form input[type="date"],
    .ui-vehicle-form input[type="date"]::-webkit-date-and-time-value {
        text-align: left;
    }

    /* Generic tappable date control for compact PWA forms. The native input
       remains full-size for the picker while a formatted value is displayed. */
    .ui-date-field-control {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: var(--ui-field-height);
        border: var(--ui-field-border);
        border-radius: var(--ui-field-border-radius);
        background: var(--ui-field-bg);
        color: var(--ui-field-value-color);
        transition: all var(--ui-duration-fast) var(--ui-ease);
    }

    .ui-date-field-control:focus-within {
        outline: var(--ui-field-focus-outline) var(--ui-field-focus-color);
        border-color: var(--ui-field-focus-color);
        outline-offset: 0;
    }

    /* Custom CSS: the transparent native input sits above its visible date
       display in the same local stack, one step up from --z-raised. */
    .ui-date-field-display {
        pointer-events: none;
        position: relative;
        z-index: var(--z-raised);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: var(--ui-field-value-color);
        font-size: var(--ui-field-font-size);
        line-height: 1;
        text-align: center;
    }

    .ui-date-field-control input[type="date"] {
        position: absolute;
        inset: 0;
        display: block;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        min-width: 0;
        max-width: 100%;
        min-inline-size: 0;
        inline-size: 100%;
        max-inline-size: 100%;
        padding: 0;
        border: 0;
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        color: transparent;
        cursor: pointer;
        line-height: var(--ui-field-height);
        opacity: 0;
        text-align: center;
        z-index: calc(var(--z-raised) + 1);
    }

    .ui-date-field-control input[type="date"]::-webkit-date-and-time-value {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        text-align: center;
    }

    .ui-date-field-control
        input[type="date"]::-webkit-calendar-picker-indicator {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background: transparent;
        color: transparent;
        opacity: 0;
    }

    .ui-date-field-control input[type="date"]::-webkit-clear-button,
    .ui-date-field-control input[type="date"]::-webkit-inner-spin-button {
        display: none;
    }

    @supports (-webkit-touch-callout: none) {
        .ui-date-field-control input[type="date"] {
            width: 100%;
        }
    }

    .ui-multi-select-control {
        position: relative;
        width: 100%;
    }

    .ui-multi-select-button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-xs);
        width: 100%;
        min-height: var(--ui-field-height);
        padding: 0 var(--ui-field-padding);
        border: var(--ui-field-border);
        border-radius: var(--ui-field-border-radius);
        background: var(--ui-field-bg);
        color: var(--ui-field-value-color);
        font-size: var(--ui-field-font-size);
        line-height: 1.2;
        text-align: left;
        cursor: pointer;
        transition: all var(--ui-duration-fast) var(--ui-ease);
    }

    /* Keyboard-only focus, matching the shared control focus rule so a tap on
       the button never paints the field ring. Custom CSS: Prewind has no
       :focus-visible state. */
    .ui-multi-select-button:focus-visible {
        outline: var(--ui-field-focus-outline) var(--ui-field-focus-color);
        border-color: var(--ui-field-focus-color);
        outline-offset: 0;
    }

    .ui-multi-select-summary {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ui-multi-select-menu {
        position: absolute;
        top: calc(100% + var(--space-2xs));
        right: 0;
        left: 0;
        z-index: var(--z-bar-raised);
        display: flex;
        flex-direction: column;
        max-height: 16rem;
        overflow-y: auto;
        padding: var(--space-2xs);
        border: var(--ui-field-border);
        border-radius: var(--ui-field-border-radius);
        background: var(--ui-field-bg);
        box-shadow: var(--shadow-lg);
    }

    .ui-multi-select-menu[hidden] {
        display: none;
    }

    .ui-multi-select-option {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        min-height: 2.75rem;
        padding: var(--space-2xs) var(--space-xs);
        color: var(--ui-field-value-color);
        font-size: var(--ui-field-font-size);
        line-height: 1.2;
        cursor: pointer;
    }

    .ui-multi-select-option input[type="checkbox"] {
        flex: none;
        width: 1.125rem;
        height: 1.125rem;
        accent-color: var(--brand-1);
    }

    /* Filter forms keep fields and adjacent actions on one shared control height. */
    form.ui-filter-form {
        --ui-field-padding: var(--space-xs);
        --ui-field-font-size: var(--text-base);
        --ui-field-border-radius: var(--rounded-sm);
        gap: var(--space-xs);
    }

    form.ui-filter-form .form-row {
        align-items: flex-end;
        gap: var(--space-2xs);
    }

    form.ui-filter-form .ui-field {
        min-width: 0;
    }

    form.ui-filter-form .ui-filter-form-field-wide {
        flex: 1.35 1 0;
    }

    form.ui-filter-form .ui-filter-form-field-compact {
        flex: 0.7 1 0;
    }

    form.ui-filter-form .ui-filter-form-actions {
        flex: 0 0 auto;
        flex-wrap: nowrap;
    }

    form.ui-filter-form .ui-filter-form-button {
        min-height: var(--ui-field-height);
        gap: var(--space-2xs);
        padding-top: 0;
        padding-bottom: 0;
        font-size: var(--text-base);
        line-height: 1;
        font-weight: var(--font-semibold);
        border-radius: var(--rounded-sm);
    }

    /* Custom CSS: Prewind has no auto-fit grid. Desktop history filters wrap
       independently of the shared entry form's 16rem field minimum. */
    .ui-forms-desktop-filter-fields {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    }

    /* Keep the landing email focus state visible against the brand background. */
    .ui-landing-email-field {
        --ui-field-focus-color: var(--warning);
    }

    /* Flat form reset for full-bleed PWA flows. */
    form.ui-form-flat {
        display: block;
        max-width: none;
        gap: 0;
    }

    /* Custom CSS: configure the existing search field's inherited control tokens
       and full-row basis so search spans the Docs page above the filters, without
       the global form width cap. */
    form.ui-document-search {
        --ui-field-font-size: var(--text-sm);
        --ui-field-height: calc(var(--text-sm) + var(--space-xs) * 2 + var(--space-2xs));
    }

    form.ui-document-search > .ui-field {
        flex: 1 1 100%;
        min-width: 0;
    }

    /* Custom CSS: Prewind has no utility bound to --ui-tap-min; the Docs Refresh
       control and filter chips need the shared 48px target floor. */
    .ui-document-refresh,
    .ui-document-filter-chip {
        min-height: var(--ui-tap-min);
    }

    /* Custom CSS: Prewind has no cross-subtree selector. While the Docs list
       frame shows the true empty state, the page-level Upload action must not
       duplicate the empty-state action. Turbo list-only updates toggle this
       automatically because :has() re-evaluates when the frame swaps. */
    body:has(#project_files_list [data-document-empty]) .ui-document-page-upload {
        display: none;
    }

    /* Custom CSS: the form builder's 16rem field minimum and form cap prevent
       the mobile Forms search and filter menus from using the available width. */
    form.ui-forms-filter-form { max-width: none; }
    form.ui-forms-filter-form .ui-field { min-width: 0; }

    /* Custom CSS: Prewind has no utility bound to the shared --ui-tap-gap token. */
    .ui-forms-filter-chips { gap: var(--ui-tap-gap); }
    /* Custom CSS: chips need the existing 48px minimum, a computed half-row cap
       so short labels keep natural width while two chips share each row,
       expanded/focus states and hidden panels outside the wrapping row;
       Prewind lacks these states and the calc() cap. */
    .ui-forms-filter-chip { min-height: var(--ui-tap-min); max-width: calc((100% - var(--ui-tap-gap)) / 2); }
    .ui-forms-filter-chip[aria-expanded="true"] { border-color: var(--darker); }
    .ui-forms-filter-chip[aria-expanded="true"] svg { transform: rotate(180deg); }
    .ui-forms-filter-chip:focus-visible { outline: 2px solid var(--darker); outline-offset: -2px; }
    /* Custom CSS: Prewind's later layer sets display:flex on these panels, so the
       native hidden state needs a scoped important rule to keep inactive panels
       hidden and only the selected panel in normal flow. */
    .ui-forms-filter-menu[hidden] { display: none !important; }
    .ui-forms-filter-menu .ui-field { width: 100%; }
    .ui-forms-filter-menu .ui-button { font-size: var(--text-base); line-height: 1.3; }

    /* Custom CSS: the form builder's width cap and 16rem field minimum prevent a
       search field and token-height filter control from sharing a phone row. */
    form.ui-journal-filters { max-width: none; }
    form.ui-journal-filters .ui-field { min-width: 0; }
    form.ui-journal-filters .ui-journal-search { flex: 1 1 auto; }
    .ui-journal-filter-toggle { width: var(--ui-field-height); height: var(--ui-field-height); list-style: none; }
    .ui-journal-filter-toggle::-webkit-details-marker { display: none; }

    /* Custom CSS: Prewind cannot express the below-row top: 100% offset or
       the existing 50dvh panel cap. Only the fields scroll inside this overlay;
       the Apply footer stays visible. */
    .ui-journal-filter-options { position: absolute; z-index: var(--z-popover); top: 100%; right: 0; left: 0; max-height: 50dvh; }
    .ui-journal-filter-options .ui-field { width: 100%; }

    /* Avatar upload field */
    .avatar-upload-field {
        align-items: center;

        .avatar-upload-zone {
            cursor: pointer;
            transition: transform var(--ui-duration-fast) var(--ui-ease-move);

            &:hover {
                transform: scale(1.05);
            }

            &.dragging .avatar-upload-circle {
                outline: 2px dashed var(--brand-1);
                outline-offset: 4px;
            }
        }

        .avatar-upload-circle {
            display: flex;
            width: 6rem;
            height: 6rem;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border-radius: var(--rounded-full);
            background: color-mix(in srgb, var(--brand-1) 50%, transparent);
            transition: box-shadow var(--ui-duration-fast) var(--ui-ease);
        }

        .avatar-upload-initials {
            color: var(--white);
            font-size: 2rem;
            font-weight: var(--font-semibold);
            line-height: 1;
            user-select: none;
        }

        .avatar-upload-placeholder {
            width: 6rem;
            height: 6rem;
            opacity: 0.5;
        }

        .avatar-upload-preview {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .avatar-upload-prompt {
            margin-top: var(--space-2xs);
            color: var(--darker);
            font-size: var(--text-sm);
            font-weight: var(--font-semibold);
            cursor: pointer;
        }
    }

    /* Custom CSS: Prewind has no container-responsive grid. Desktop form panes
       stack below the existing 40rem form width; descriptions, email recipients
       and grouped content use the whole row. Controls must fit their grid cell
       instead of inheriting the general form helper's 16rem minimum. */
    form:has(> .ui-desktop-form-fields) {
        container-type: inline-size;
    }

    .ui-desktop-form-fields {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-sm);
    }

    form .ui-desktop-form-fields .ui-field {
        min-width: 0;
    }

    .ui-desktop-form-fields > :not(.form-row),
    .ui-desktop-form-fields > .form-row:has(textarea, input[type="email"]) {
        grid-column: 1 / -1;
    }

    @container (min-width: 40rem) {
        .ui-desktop-form-fields {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    /* Report forms */
    .ui-accident-report-form,
    .ui-report-form,
    .ui-restaking-form,
    .ui-request-survey-form {
        --ui-field-label-color: var(--darker);
        --ui-field-placeholder-color: var(--dark);
        --ui-field-value-color: var(--darker);
    }

    .ui-workspace-desktop-detail .ui-accident-report-form,
    .ui-workspace-desktop-detail .ui-report-form,
    .ui-workspace-desktop-detail .ui-restaking-form,
    .ui-workspace-desktop-detail .ui-request-survey-form {
        width: 100%;
        max-width: none;
    }

    .ui-accident-report-form .ui-field > label,
    .ui-report-form .ui-field > label,
    .ui-restaking-form .ui-field > label,
    .ui-request-survey-form .ui-field > label {
        font-size: var(--text-lg);
        line-height: 1.1;
    }

    .ui-signature-pad {
        --ui-signature-pad-height: 7rem;
    }

    .ui-signature-pad-modes {
        display: flex;
        overflow: hidden;
        border: 1px solid var(--light);
        border-radius: var(--rounded);
        background: var(--white);
    }

    .ui-signature-pad-mode {
        flex: 1 1 0;
        padding: var(--space-xs) var(--space-sm);
        border: 0;
        background: var(--white);
        color: var(--dark);
        cursor: pointer;
        font: inherit;
        font-weight: var(--font-semibold);

        & + & {
            border-left: 1px solid var(--light);
        }

        &[aria-pressed="true"] {
            background: var(--darker);
            color: var(--white);
        }
    }

    .ui-signature-pad-box {
        min-height: var(--ui-signature-pad-height);
    }

    .ui-signature-pad-canvas {
        height: var(--ui-signature-pad-height);
    }

    .ui-signature-pad-placeholder {
        transition: opacity var(--ui-duration-fast) var(--ui-ease);
    }

    .ui-signature-pad.is-signing .ui-signature-pad-placeholder,
    .ui-signature-pad.has-signature .ui-signature-pad-placeholder {
        opacity: 0;
    }

    .ui-signature-image {
        display: block;
        width: 100%;
        min-height: var(--ui-signature-pad-height, 7rem);
        object-fit: contain;
    }

    /* Custom CSS: exclusive form sections need a full-height tap target and the
       native details marker removed; Prewind cannot express either. */
    .ui-form-section-summary {
        min-height: var(--ui-tap-min);
        list-style: none;
    }

    .ui-form-section-summary::-webkit-details-marker {
        display: none;
    }

    .ui-form-section-status.is-error {
        color: var(--error);
        font-weight: var(--font-semibold);
    }
}

@layer components {
    /* Custom CSS: the note helper belongs to the composite attachment field;
       remove its separate border/focus ring and narrow-screen minimum width. */
    .ui-note-sheet-field .ui-field { min-width: 0; }
    .ui-note-sheet-field textarea.ui-note-sheet-textarea {
        border: 0;
        box-shadow: none;
        outline: none;
        background: transparent;
    }
}