/* FlowToolKitButtonStyles */

.flowForm {}

.form-template-container .slds-progress-bar__value {
    background: var(--lwc-brandAccessible,initial) !important;
    border-radius: 20px;
}
.form-template-container .slds-progress-bar {
    border-radius: 20px;
}

.flowForm .slds-spinner_container {
    width: calc(100% + 2.1rem);
    margin-left: -1.05rem;
    z-index: 5 !important;
}

.flowForm .parallax {
    min-height: 100px;
    width: 100%;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.flowForm .slds-tabs_scoped__content,
.flowForm .slds-vertical-tabs__content {
    padding-right: 1.25rem;
    padding-left: 0.75rem;
    padding-bottom: 10px;
}
.flowForm .slds-vertical-tabs__content {
    min-height: 500px;
    overflow-x: auto;
}

.flowForm .slds-vertical-tabs {
    overflow-x: scroll;
}
.flowForm .slds-vertical-tabs .slds-vertical-tabs__nav {
    width: max-content;
}
.flowForm .slds-vertical-tabs .slds-vertical-tabs__nav .slds-vertical-tabs__nav-item .slds-vertical-tabs__right-icon {
    margin-left: var(--lwc-spacingXSmall, 0.5rem);
}


.flowForm .slds-accordion__summary-action,
.flowForm .slds-scope .slds-accordion__summary-action {
    margin-top: unset;
    margin-bottom: unset;
    padding-bottom: unset;
    padding-top: unset;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.flowForm .slds-accordion__summary,
.flowForm .slds-scope .slds-accordion__summary {
    box-shadow: unset;
    border-radius: unset;
    margin-bottom: 0px;
    margin-top: 0px;
    min-height: 40px;
    /*max-height: 60px;*/
}
.flowForm .slds-accordion__section,
.flowForm .slds-scope .slds-accordion__section {
    padding-top: unset;
    padding-bottom: unset;
}
.flowForm .slds-accordion .slds-accordion__content,
.flowForm .slds-scope .slds-accordion .slds-accordion__content {
    padding-top: unset;
    padding-bottom: unset;
    margin-bottom: unset;
}

.slds-button,
.slds-scope .slds-button {
    white-space: nowrap !important;
}

.slds-col--padded {
    padding: unset;
}

.forceCommunityFlowCommunity {
    border: unset;
}

.quick-actions-panel .flowruntimeBody,
.forceCommunityFlowCommunity .flowruntimeBody {
    padding-left: unset !important;
    padding-right: unset !important;
    margin-top: unset !important;
}

.flowruntimeBody.flowruntimeBody__lwc {
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
}

.flowForm .flowruntimeBody.flowruntimeBody__lwc {
    padding-left: 1.05rem !important;
    padding-right: 1.05rem !important;
}

/**These are overrides for Standard Flow Components to align with form builder components**/
flowruntime-display-text-lwc > .slds-rich-text-editor__output {
    /*margin-left: -1rem;
    margin-right: -1rem;
    width: calc(100% + 2rem);
    display: block;*/
}

/*flowruntime-screen-field flowruntime-record-field record_flexipage-record-field {
    padding-left: 0.60rem;
    padding-right: 0.60rem;
}*/


lightning-lookup-address label {
    display: none !important;
}

.flowForm lightning-input-address lightning-lookup-address .input-container,
.flowForm lightning-input-address lightning-textarea .textarea-container,
.flowForm lightning-input-address lightning-input .slds-form-element__control,
.flowForm lightning-input-address lightning-picklist .slds-form-element {
    margin-bottom: var(--lwc-spacingXSmall, 0.5rem);
    padding: unset;
}

.runtime_platform_actionsQuickActionWrapper .slds-card__header {
    display: none !important;
}
.quick-actions-panel .flowruntimeBody .slds-modal__content {
    overflow-y : scroll;
}
.quick-actions-panel .flowruntimeBody .slds-modal__container {
    width : 95%;
    margin-top: 10px;
}
.quick-actions-panel .flowruntimeBody .customBackdrop {
    width: 104%;
    left: -2%;
}

.form-template-buttons .flow-tool-kit-buttons .slds-docked-form-footer {
    z-index: 1001;
}

.flow-tool-kit-buttons .slds-docked-form-footer {
    z-index: 1002;
}

.slds-modal__container .flowruntimeBody .slds-docked-form-footer,
.quick-actions-panel .flowruntimeBody .slds-docked-form-footer,
lightning-modal-body .slds-docked-form-footer {
    position: static;
    border-radius: 0 0 10px 10px;
}

.pausedFlowModal .slds-docked-form-footer {
    position: absolute;
    bottom: unset;
}

.ftk-iframe-context .slds-docked-form-footer,
.ftk-iframe-context .flow-form-docked-buttons {
    position: static;
}
.ftk-iframe-context .docked-buttons-info-dialog {
    position: static;
    bottom: unset;
}

.slds-dueling-list__column_responsive .slds-dueling-list__options {
    height: unset !important;
    min-height: 10rem;
    max-height: 23rem;
}

/**Hide help text icon whenever Label is Hidden**/
.cUnite_HideLabel lightning-helptext,
.cUnite_HideLabel lightning-helptext[lightning-combobox_combobox],
.cUnite_HideLabel lightning-helptext[lightning-groupedcombobox_groupedcombobox],
.cUnite_HideLabel lightning-helptext[lightning-duallistbox_duallistbox] {
    display : none;
}

/* #654: validation belongs below its control. Native SLDS and FTK-owned
   messages retain their normal layout and stay visible during focus. The old
   8px absolute overlays and focus/checkbox hiding rules are intentionally gone. */
.flowForm .slds-form-element__help:empty {
    /* Retain zero layout space for the same empty helpers previously taken
       out of flow. Only populated messages should increase field height. */
    display: none;
}

.slds-rich-text-editor .slds-p-around_small {
    padding:0 5px 5px 0;
}

c-flow-form-checkbox .slds-checkbox_toggle {
    margin-top: 4px;
    margin-bottom: 4px;
}

/**This is to fix the modal aura action not working with color**/
.siteforcePanelsContainer .modal-header .title {
    color: unset;
}

.slds-popover {
    z-index: 90;
}

.flowForm lightning-static-map .slds-iframe-container {
    margin-top: 5px;
}
/**reCaptcha when enabled**/
.grecaptcha-badge {
    z-index: 9000;
}

.slds-combobox-addon_middle .slds-combobox__input {
    border-radius: 0;
}

/* #661: a disabled lookup's combobox input carries more specific SLDS disabled rules (grey fill, inset ring), so it needs its own selector to match the other read-only fields */
.flowForm .slds-input[disabled],
.flowForm .slds-combobox__input.slds-combobox__input-value[disabled] {
    background-color: rgb(254, 254, 254);
    box-shadow: none;
}

.iconButtonPicklist .slds-form-element__icon {
    padding-top : 0;
}

.iconButtonPicklist .small .slds-button__icon {
    width: var(--lwc-squareIconSmallBoundary,1.5rem);
    height: var(--lwc-squareIconSmallBoundary,1.5rem);
    line-height: var(--lwc-lineHeightReset,1);
}

.iconButtonPicklist .medium .slds-button__icon {
    width: var(--lwc-squareIconMediumBoundary,2rem);
    height: var(--lwc-squareIconMediumBoundary,2rem);
    line-height: var(--lwc-lineHeightReset,1);
}

.iconButtonPicklist .large .slds-button__icon {
    width: var(--lwc-squareIconLargeBoundary,3rem);
    height: var(--lwc-squareIconLargeBoundary,3rem);
    line-height: var(--lwc-lineHeightReset,1);
}

.iconButtonPicklist .activeValue .slds-button__icon {
    filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.3));
    fill: var(--iconfillcolor,currentColor);;
}

.flowForm
.visual-picker[FlowToolKit-formSectionPicker_formSectionPicker] input:not(:disabled)[FlowToolKit-formSectionPicker_formSectionPicker] ~ label:hover[FlowToolKit-formSectionPicker_formSectionPicker]
.visual-picker__figure[FlowToolKit-formSectionPicker_formSectionPicker] {
    cursor: pointer;
    outline: 0;
    border: 2px solid var(--lwc-brandPrimary,#1b96ff);
    -webkit-box-shadow: 0 0 0 1px var(--lwc-brandPrimary,#1b96ff) inset;
    box-shadow: 0 0 0 1px var(--lwc-brandPrimary,#1b96ff) inset;
}

.flowForm .slds-icon_container.slds-visual-picker__text-check,
.flowForm .visual-picker input:checked ~ label .visual-picker__text:after {
    z-index: 1;
}


.flowForm .fixedSpinner .slds-spinner {
    position:fixed;
}

.flowForm iframe {
    width: 100%;
}


.finderHeaderShadow .slds-tabs_default__nav {
    z-index:1;
    position: relative;
    box-shadow: 0 0.1875rem 0.0625rem -0.125rem rgb(0 0 0 / 12%), 0 0.25rem 0.5rem 0.0625rem rgb(0 0 0 / 12%);
}

.flowForm .slds-modal__container .slds-theme_error {
    color: var(--slds-g-color-on-error-1, white); /* SLDS 2 gives the error theme a pale container (#758 summary in the review Edit window); SLDS 1 keeps the dark one */
}

.flowForm .slds-form-element__row {
    margin-bottom: 0;
}

.flowForm .slds-progress {
    max-width: 100%;
}

.flowForm .slds-checkbox .slds-checkbox__label {
    display: flex;
}
.flowForm .flowForm_Basic_Checkbox .slds-checkbox .slds-checkbox__label {
    display: initial;
}

.flowForm .slds-checkbox .slds-checkbox__label .slds-form-element__label {
    display: inline-block;
    padding-top: unset;
}

.flowForm c-flow-form-multiselect-checkbox .slds-checkbox .slds-checkbox__label .slds-checkbox_faux {
    margin-top : 2px;
}

/**#788: an LWR site draws the chosen joined button in a fixed color and its theme ignores the toggle's checked hooks, so a brand is laid over both. With no brand the layer is clear and the site's own color shows.**/
webruntime-app .flowForm .slds-radio_button [type="radio"]:checked:not(:disabled) + .slds-radio_button__label,
webruntime-app .flowForm .slds-checkbox_toggle [type="checkbox"]:checked:not(:disabled) + .slds-checkbox_faux_container .slds-checkbox_faux {
    background-image: linear-gradient(var(--ftk-color-primary, transparent), var(--ftk-color-primary, transparent));
}
webruntime-app .flowForm .slds-radio_button [type="radio"]:checked:not(:disabled) + .slds-radio_button__label:hover {
    background-image: linear-gradient(var(--ftk-color-primary-hover, var(--_ftk-color-primary-hover, var(--ftk-color-primary, transparent))), var(--ftk-color-primary-hover, var(--_ftk-color-primary-hover, var(--ftk-color-primary, transparent))));
}
/**The toggle's 1px border is the site brand too; an outline set over it follows the same rule**/
webruntime-app .flowForm .slds-checkbox_toggle [type="checkbox"]:checked:not(:disabled) + .slds-checkbox_faux_container .slds-checkbox_faux {
    outline: 1px solid var(--ftk-color-primary, transparent);
    outline-offset: -1px;
}
webruntime-app .flowForm .slds-radio_button [type="radio"]:checked:not(:disabled) + .slds-radio_button__label .slds-radio_faux {
    color: var(--ftk-color-on-primary, inherit);
}

/**These are for grouped picklist buttons**/
.flowForm .input_group_end {
    padding-left: 1px;
}

.flowForm .input_group_end .slds-input,
.flowForm .input_group_end .slds-button {
    border-radius : 0 0.25rem 0.25rem 0;
}
.flowForm .input_group_start {
    padding-right : 1px;
}
.flowForm .input_group_start .slds-input,
.flowForm .input_group_start .slds-button {
    border-radius : 0.25rem 0 0 0.25rem;
}
.flowForm .input_group_middle {
    padding-left : 1px;
    padding-right : 1px;
}
.flowForm .input_group_middle .slds-input,
.flowForm .input_group_middle .slds-button {
    border-radius :  0;
}
.flowForm .slds-combobox-addon_middle .slds-combobox__input {
    border-radius: 0;
}

.quick-actions-panel .flow-form-docked-buttons,
.quick-actions-panel .docked-buttons-info-dialog {
    position: absolute !important;
}

.flowForm .slds-checkbox_toggle .slds-required {
    display: none !important;
}

.flowForm .slds-has-error .slds-checkbox_toggle .slds-checkbox_faux {
    box-shadow: 0px 0px 1px 2px red !important;
}

.flowForm .slds-checkbox abbr.slds-required {
    /*display: none !important;*/
}

/* Hide the scrollbar for webkit-based browsers (Chrome, Safari) */
.flowForm .calculatedDataTable ::-webkit-scrollbar {
    width: 0rem; /* You can adjust this to make it as narrow as possible */
}

/* Optional: Style the thumb and track for webkit-based browsers */
.flowForm .calculatedDataTable ::-webkit-scrollbar-thumb,
.flowForm .calculatedDataTable ::-webkit-scrollbar-track {
    background: transparent; /* Make the thumb transparent */
}

/* For Firefox */
.flowForm .calculatedDataTable {
    scrollbar-width: none; /* Hide the scrollbar in Firefox */
}

.flowForm .calculatedDataTable .slds-scrollable_x,
.flowForm .calculatedDataTable .slds-scrollable--x {
    overflow-x: hidden;
}

/**Stretch Radio Buttons**/
.flowForm lightning-radio-group.slds-form-element,
.flowForm .slds-radio_button-group,
.flowForm .slds-radio_button-group .slds-radio_button,
.flowForm .slds-radio_button-group .slds-radio_button .slds-radio_button__label {
    width:100%
}

.flowForm .slds-radio_button-group .slds-radio_button .slds-radio_button__label {
    text-align:center;
}

/* #772: a button-style radio group shows its error like an input: the group gets the error outline, and the message sits under the buttons instead of on top of the last one */
.flowForm .slds-has-error .slds-radio_button-group {
    border-color: var(--slds-g-color-error-1, #ba0517);
    box-shadow: 0 0 0 1px var(--slds-g-color-error-1, #ba0517) inset;
}
/* #776: the same for the package's own radio and multi-select options, whose message sits in an empty wrapper after the options; absolute, it landed on top of the last option */
.flowForm .ftk-choice-error .slds-form-element__help,
.flowForm lightning-radio-group .slds-form-element__help {
    position: static;
    max-width: none;
    padding-left: 0;
}

.flowForm .custom-lookup .slds-input__icon-group {
    display: none;
}

.flowForm .slds-form-element__label {
    line-height: 1.5;
    /* #204: theme Label Color - formSectionTheme injects --labelColor on the section host; this global rule reaches every label under .flowForm. #878: with no theme color the Style Editor's Field labels color applies, as it does on the package's own labels; else inherit (the standard label color). */
    color: var(--labelColor, var(--ftk-color-label, inherit));
}

/* #457: captions, not labels - deliberately outside the --labelColor tint that .slds-form-element__label applies */
.flowForm .flow-form-affix {
    line-height: 1.5;
    font-size: 0.65rem;
    color: var(--slds-g-color-neutral-base-60, #939393);
}

.flowForm .flow-form-image-upload {
    .slds-file-selector__dropzone label {
        width: 100%;
        height: var(--slds-c-textarea-sizing-min-height,50px);
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        margin: auto;
    }

    .slds-file-selector.slds-file-selector_files,
    .slds-file-selector__dropzone,
    .slds-file-selector__dropzone slot {
        width: 100%;
    }
}

.flow-form-lone-button-menu button {
    height: var(--slds-c-button-line-height, var(--slds-c-button-line-height, var(--lwc-lineHeightButton, 1.875rem)));
    border-radius: var(--lwc-buttonBorderRadius, .25rem);
}

.is-mobile-grouped .fix_button-group-flexbox {
    width: 100%;
}
/* Tuck the caret back against the full-width stretched button on mobile. */
.is-mobile-grouped lightning-button-menu {
    left: -1.75rem;
}
/* Paint the caret to match the brand-outline grouped button (button-menu has no brand-outline variant). */
.is-mobile-grouped lightning-button-menu button {
    color: var(--lwc-brandAccessible, #0176d3);
    border-color: var(--lwc-brandAccessible, #0176d3);
}

.flowForm-Stage-Indicator .slds-path__action {
    display: none;
}

.flowForm_small-button button {
    height: 100%;
}

.flowForm-Stage-Indicator .slds-progress_vertical .slds-progress__item.slds-is-completed .slds-progress__marker_icon svg {
    fill:var(--slds-c-button-success-color-background,#45c65a);
}

.flowForm lightning-lookup-mobile .slds-listbox,
.flowForm lightning-lookup-mobile .slds-listbox .slds-listbox-item,
.flowForm lightning-lookup-mobile lightning-pill,
.flowForm lightning-lookup-mobile lightning-pill .slds-pill {
    width:100% !important;
}
.flowForm lightning-lookup-mobile lightning-pill .slds-pill .slds-pill__remove {
    visibility: hidden;
}
.flowForm lightning-lookup-mobile lightning-pill .slds-pill {
    padding:0.25rem;
}
.flowForm lightning-lookup-mobile .slds-faux-input {
    height: 2rem;
}

/* #661: a picked record switches lightning-record-picker to the SLDS read-only "selection" look (grey fill, light border, inset double ring); match the other inputs. Global tokens, not the --slds-c-input hooks: .slds-input[readonly] sets those hooks to transparent on this input */
.flowForm lightning-record-picker .slds-combobox_container.slds-has-selection .slds-combobox__input-value {
    background-color: var(--slds-g-color-neutral-base-100, rgb(255, 255, 255));
    border-color: var(--slds-g-color-neutral-base-50, rgb(116, 116, 116));
    box-shadow: none;
}
.flowForm lightning-record-picker .slds-combobox_container.slds-has-selection .slds-combobox__input-value:focus {
    border-color: var(--slds-g-color-brand-base-50, rgb(1, 118, 211));
    box-shadow: 0 0 3px var(--slds-g-color-brand-base-50, rgb(1, 118, 211));
    outline: 0;
}


.section .flowruntime-section-column:first-child .header-adjust-padding,
.section .flowruntime-section-column:first-child .flowForm{
    padding-right: 0.75rem;
}
.section .flowruntime-section-column:last-child .header-adjust-padding,
.section .flowruntime-section-column:last-child .flowForm {
    padding-left: 0.75rem;
}
.section .flowruntime-section-column:not(:first-child):not(:last-child) .header-adjust-padding,
.section .flowruntime-section-column:not(:first-child):not(:last-child) .flowForm {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.form-template .flowForm,
.form-template .flowFormTable,
.form-template .header-adjust-padding {
    width: 100% !important;
    margin-left: unset !important;
}

.form-template .flowDiv .flow-form-adjust-width {
    width: calc(100% + 2.10rem) !important;
    margin-left: -1.05rem !important;
}

.form-template .flowForm .slds-modal {
    width: auto !important;          /* Reset width to its default or desired value */
    margin-left: initial !important; /* Reset margin-left to its default or desired value */
}

.form-template .flowruntimeBody.flowruntimeBody__lwc {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/*Not Sure Why this Is Here*/
.slds-scope lightning-modal-base {
    /*z-index: 9002 !important;*/
}

/**
 * Issue #117 - Combobox/picklist with long option labels overflowing.
 * The lightning-layout-item wrapping the combobox is a flex child of
 * .slds-grid (outerGridClass) and gets `slds-grow` (flex: 1 1 auto).
 * With flex-basis: auto, the column starts at the combobox's intrinsic
 * content width (the longest option label) and refuses to shrink past it,
 * so the form section overflows.
 *
 * Two-part fix:
 *   1. Force flex-basis to 0 so the column starts from 0 and only takes
 *      available space (after prepend/append siblings). This lets the
 *      built-in slds-truncate on the combobox button actually engage.
 *   2. Set min-width: 0 so the flex item is allowed to shrink below its
 *      content's intrinsic min-width.
 *
 * Note on the :has() selector: lightning-combobox is rendered through a
 * <slot>, so it is a grandchild of lightning-layout-item - :has() must
 * use descendant (no `>`), not direct-child.
 */
.flowForm lightning-combobox {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    display: block;
}

.flowForm .slds-grid > lightning-layout-item:has(lightning-combobox) {
    flex: 1 1 0 !important;
    min-width: 0;
    max-width: 100%;
}

/**
 * Issue #106 - Inline labels squish on long text.
 * SLDS sets the inline-label column to max-width: calc(33% - 1.25rem)
 * and flex-basis: calc(33% - 1.25rem) (responsive >= 48em width). In
 * narrow form columns 33% is small, so long labels squish, clip, or
 * push prepend addons onto their own line.
 *
 * Override with a fixed-width column. Tune via
 * --flowtoolkit-inline-label-width on a parent (.flowForm root, a
 * section wrapper, or :root).
 *
 * Specificity (0,3,0) matches SLDS's strongest selector for this rule;
 * !important guarantees we win regardless of source-order changes
 * across SLDS releases. Both _horizontal and --horizontal variants are
 * covered for SLDS dialect compatibility.
 */
.flowForm .slds-form-element_horizontal .slds-form-element__label,
.flowForm .slds-form-element--horizontal .slds-form-element__label {
    max-width: calc(var(--flowtoolkit-inline-label-width,33%) - 1.25rem) !important;
    flex-basis: calc(var(--flowtoolkit-inline-label-width,33%) - 1.25rem) !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

/**
 * Issue #106 - Companion override for the input control. SLDS pairs the
 * floated 33% label with `padding-inline-start: 70%` on the control to
 * push the input right of the floated label. With our fixed-width label
 * column the 70% gap leaves a huge empty space - match the control's
 * inline-start padding to our label width so the input sits flush with
 * the right edge of the label column.
 */

.flowForm .slds-form-element_horizontal .slds-form-element__control,
.flowForm .slds-form-element--horizontal .slds-form-element__control {
    padding-inline-start: var(--flowtoolkit-inline-label-width, 33%) !important;
}

/* Delayed fade-in masks the brief paint window before the framework applies disableClose inline style. */
.slds-modal__close {
    opacity: 0;
    animation: flowtoolkit-modal-close-fade-in 300ms ease-out 1000ms forwards;
}
@keyframes flowtoolkit-modal-close-fade-in {
    to { opacity: 1; }
}
/* Hide lightning-modal's X when disableClose is on; un-prefixed because the modal renders outside any LWC shadow root. */
.slds-modal__close[style*="pointer-events:none"],
.slds-modal__close[style*="pointer-events: none"] {
    display: none !important;
}

/* BEGIN GENERATED NATIVE CONTROLS */
/* Opt-in line-height bridge for native controls in the synthetic-shadow
   runtime, using the same scoped stylesheet path as existing FTK overrides.
   Native shadow DOM hosts continue to rely on their public styling hooks.
   Activation classes disappear when the last size override is cleared. */
.form-template-container.ftk-input-height-override lightning-record-picker.ftk-scale-field .slds-input,
.form-template-container.ftk-input-height-override lightning-input .slds-input {
    line-height: var(--_ftk-control-input-height);
}
.form-template-container.ftk-button-height-override lightning-button:not(.slds-datepicker lightning-button) .slds-button {
    line-height: var(--slds-c-button-line-height, var(--_ftk-control-action-line-height));
}

/* Only FTK field comboboxes opt in; rich-text font menus retain toolbar sizing. */
.form-template-container.ftk-input-height-override lightning-combobox.ftk-scale-field .slds-input,
.form-template-container.ftk-input-height-override lightning-combobox.ftk-scale-field .slds-input_faux {
    line-height: var(--_ftk-control-input-height);
}
.form-template-container.ftk-button-height-override lightning-file-upload .slds-file-selector__button,
.form-template-container.ftk-button-height-override .flow-form-image-upload .slds-file-selector__button {
    line-height: var(--slds-c-button-line-height, var(--_ftk-control-action-line-height));
}

/* Foundation coverage for native synthetic-shadow controls. Each axis opts in
   independently; clearing it restores the host stylesheet. These selectors
   are confined to the form and never style the live editor. */
.form-template-container.ftk-control-scale-override lightning-textarea .slds-textarea {
    line-height: var(--ftk-line-height, 1.5);
}
.form-template-container.ftk-input-height-override lightning-input-field .slds-input {
    line-height: var(--_ftk-control-input-height);
}
.form-template-container.ftk-control-scale-override lightning-file-upload .slds-file-selector__button,
.form-template-container.ftk-control-scale-override .flow-form-image-upload .slds-file-selector__button {
    padding-inline: var(--ftk-input-padding-x, calc(1rem * var(--ftk-control-scale, 1)));
    line-height: var(--_ftk-control-action-line-height);
}
.form-template-container.ftk-icon-size-override lightning-button-icon:not(lightning-helptext lightning-button-icon):not(.slds-datepicker lightning-button-icon) .slds-button,
.form-template-container.ftk-icon-size-override lightning-button-menu > .slds-dropdown-trigger > .slds-button {
    --_ftk-icon-target: var(--ftk-icon-button-size, var(--ftk-control-height, calc(var(--_ftk-icon-base-size, 2rem) * var(--ftk-control-scale, 1))));
    width: var(--_ftk-icon-target);
    height: var(--_ftk-icon-target);
}
.form-template-container.ftk-control-scale-override .iconButtonPicklist .slds-button {
    width: calc(1.625rem * var(--ftk-control-scale, 1));
    height: calc(1.625rem * var(--ftk-control-scale, 1));
}
.form-template-container.ftk-control-scale-override .iconButtonPicklist .slds-button__icon {
    width: calc(1.5rem * var(--ftk-control-scale, 1));
    height: calc(1.5rem * var(--ftk-control-scale, 1));
}
.form-template-container.ftk-control-scale-override .slds-checkbox .slds-checkbox_faux {
    width: var(--_ftk-choice-mark-size);
    height: var(--_ftk-choice-mark-size);
}
.form-template-container.ftk-attestation-size-override .slds-checkbox-button {
    width: var(--ftk-attestation-target-size, var(--ftk-control-height, calc(2rem * var(--ftk-control-scale, 1))));
    height: var(--ftk-attestation-target-size, var(--ftk-control-height, calc(2rem * var(--ftk-control-scale, 1))));
}
.form-template-container.ftk-control-scale-override .slds-checkbox_toggle .slds-checkbox_faux {
    width: calc(3rem * var(--ftk-control-scale, 1));
    height: calc(1.5rem * var(--ftk-control-scale, 1));
    border-radius: calc(1rem * var(--ftk-control-scale, 1));
}
.form-template-container.ftk-control-scale-override .slds-checkbox_toggle input:not(:checked) + .slds-checkbox_faux_container .slds-checkbox_faux::after,
.form-template-container.ftk-control-scale-override .slds-checkbox_toggle input:checked + .slds-checkbox_faux_container .slds-checkbox_faux::before {
    width: calc(1.25rem * var(--ftk-control-scale, 1));
    height: calc(1.25rem * var(--ftk-control-scale, 1));
    top: calc(0.0625rem * var(--ftk-control-scale, 1));
}
.form-template-container.ftk-control-scale-override .slds-checkbox_toggle input:not(:checked) + .slds-checkbox_faux_container .slds-checkbox_faux::after {
    left: calc(0.0625rem * var(--ftk-control-scale, 1));
}
.form-template-container.ftk-control-scale-override .slds-checkbox_toggle input:checked + .slds-checkbox_faux_container .slds-checkbox_faux::before {
    left: auto;
    right: calc(0.0625rem * var(--ftk-control-scale, 1));
}
.form-template-container.ftk-control-scale-override .slds-checkbox_toggle input:checked + .slds-checkbox_faux_container .slds-checkbox_faux::after {
    left: calc(0.6rem * var(--ftk-control-scale, 1));
    right: auto;
    top: calc(0.25rem * var(--ftk-control-scale, 1));
    width: calc(0.45rem * var(--ftk-control-scale, 1));
    height: calc(0.7rem * var(--ftk-control-scale, 1));
}
.form-template-container.ftk-control-scale-override .slds-radio input:checked + .slds-radio__label .slds-radio_faux::after {
    width: calc(0.5rem * var(--ftk-control-scale, 1));
    height: calc(0.5rem * var(--ftk-control-scale, 1));
}
.form-template-container.ftk-font-scale-override .slds-form-element__label:not(.ftk-label-size-default):not([class*="slds-text-"]) {
    font-size: var(--ftk-font-size, calc(0.8125rem * var(--ftk-font-scale, 1)));
}
.form-template-container.ftk-border-scale-override lightning-record-picker.ftk-scale-field .slds-input,
.form-template-container.ftk-border-scale-override lightning-input .slds-input,
.form-template-container.ftk-border-scale-override lightning-input-field .slds-input,
.form-template-container.ftk-border-scale-override lightning-combobox.ftk-scale-field .slds-input_faux,
.form-template-container.ftk-border-scale-override lightning-textarea .slds-textarea,
.form-template-container.ftk-border-scale-override lightning-dual-listbox .slds-dueling-list__options,
.form-template-container.ftk-border-scale-override .slds-checkbox .slds-checkbox_faux {
    border-width: var(--ftk-border-width, calc(1px * var(--ftk-border-scale, 1)));
}
.form-template-container lightning-dual-listbox .slds-dueling-list__options {
    border-color: var(--ftk-color-border, var(--slds-g-color-border-base-4, #747474));
}

.form-template-container .slds-radio__label .slds-form-element__label,
.form-template-container .slds-checkbox__label .slds-form-element__label,
.form-template-container .slds-listbox__option {
    color: var(--ftk-color-option, inherit);
}
/* The native button group (a required button picklist on one row) takes the joined padding once that token is saved. */
.form-template-container.ftk-joined-padding-override lightning-radio-group .slds-radio_button .slds-radio_faux {
    padding-inline: var(--ftk-joined-choice-padding-inline);
}
.form-template-container.ftk-control-scale-override lightning-slider .slds-slider__range::-webkit-slider-thumb {
    width: calc(1rem * var(--ftk-control-scale, 1));
    height: calc(1rem * var(--ftk-control-scale, 1));
}
.form-template-container.ftk-control-scale-override lightning-slider .slds-slider__range::-moz-range-thumb {
    width: calc(1rem * var(--ftk-control-scale, 1));
    height: calc(1rem * var(--ftk-control-scale, 1));
}
.form-template-container.ftk-control-scale-override lightning-slider .slds-slider__range {
    height: calc(1rem * var(--ftk-control-scale, 1));
}
.form-template-container.ftk-control-font-override .slds-checkbox_on,
.form-template-container.ftk-control-font-override .slds-checkbox_off {
    font-size: calc(0.625rem * var(--ftk-control-scale, 1));
}

.form-template-container.ftk-control-font-override lightning-record-picker.ftk-scale-field .slds-input,
.form-template-container.ftk-control-font-override lightning-input-field .slds-input,
.form-template-container.ftk-control-font-override lightning-dual-listbox,
.form-template-container.ftk-control-font-override .slds-listbox__option:not(.slds-datepicker .slds-listbox__option),
.form-template-container.ftk-control-font-override .slds-radio__label .slds-form-element__label,
.form-template-container.ftk-control-font-override .slds-checkbox__label .slds-form-element__label {
    font-size: var(--ftk-font-size, calc(0.8125rem * var(--ftk-control-scale, 1)));
}
.form-template-container.ftk-icon-size-override lightning-button-icon:not(lightning-helptext lightning-button-icon):not(.slds-datepicker lightning-button-icon) .slds-button__icon {
    width: calc(0.875rem * var(--ftk-control-scale, 1));
    height: calc(0.875rem * var(--ftk-control-scale, 1));
}

.form-template-container.ftk-icon-size-override lightning-button-icon:not(lightning-helptext lightning-button-icon):not(.slds-datepicker lightning-button-icon) .slds-button_icon-bare {
    --_ftk-icon-base-size: 1.625rem;
}

.form-template-container.ftk-control-scale-override lightning-button:not(.slds-datepicker lightning-button) .slds-button {
    padding-inline-start: var(--ftk-input-padding-x, calc(var(--slds-c-button-spacing-inline-start, 1rem) * var(--ftk-control-scale, 1)));
    padding-inline-end: var(--ftk-input-padding-x, calc(var(--slds-c-button-spacing-inline-end, 1rem) * var(--ftk-control-scale, 1)));
}

/* Calendar popovers keep their compact platform geometry and typography. */
.form-template-container .slds-datepicker { font-size: var(--ftk-calendar-font-size, 0.8125rem); }

/* A button-only text refinement must not activate input, label, choice, or
   calendar sizing. Clearing it restores the original shared typography. */
.form-template-container.ftk-button-font-override lightning-button:not(.slds-datepicker lightning-button) .slds-button,
.form-template-container.ftk-button-font-override lightning-file-upload .slds-file-selector__button,
.form-template-container.ftk-button-font-override .flow-form-image-upload .slds-file-selector__button {
    font-size: var(--ftk-button-font-size);
}

/* SLDS 2 hardcodes pill-shaped action buttons instead of reading the public
   radius hook. Reuse the resolved hook only when an FTK radius is supplied. */
.form-template-container.ftk-button-radius-override lightning-button:not(.slds-datepicker lightning-button) .slds-button,
.form-template-container.ftk-button-radius-override .slds-file-selector__button {
    border-radius: var(--slds-c-button-radius-border);
}

/* Time input adornments use the same scale as their containing field. */
.form-template-container.ftk-control-scale-override lightning-timepicker .slds-input__icon {
    width: calc(0.875rem * var(--ftk-control-scale, 1));
    height: calc(0.875rem * var(--ftk-control-scale, 1));
    margin-top: calc(-0.4375rem * var(--ftk-control-scale, 1));
    right: calc(0.75rem * var(--ftk-control-scale, 1));
}
.form-template-container.ftk-control-scale-override lightning-timepicker .slds-input__icon svg {
    width: 100%;
    height: 100%;
}

/* Reserve text space for the scaled date/time affordance. */
.form-template-container.ftk-control-scale-override lightning-datepicker input.slds-input,
.form-template-container.ftk-control-scale-override lightning-timepicker input.slds-input {
    padding-inline-end: calc(2rem * var(--ftk-control-scale, 1));
}

/* Address rows are owned by the native compound control. They keep its compact
   layout at the default field spacing, so saving the default changes nothing,
   and open up by the same step as other field rows above it; never below zero.
   The final row keeps the surrounding field's existing outer spacing. */
.form-template-container lightning-input-address .slds-form-element__row:not(:last-child) {
    margin-bottom: max(0px, calc(0.5rem * (var(--ftk-spacing-scale, 1) - 1) + var(--ftk-field-gap, 0px)));
}

/* Body rich text has its own SLDS line-height instead of inheriting the form. */
.form-template-container .ftk-rich-text-content .slds-rich-text-editor__output {
    line-height: var(--ftk-line-height, 1.5);
}
.form-template-container textarea.slds-textarea {
    line-height: var(--ftk-line-height, 1.5);
}
/* Explicit placeholder color wins; otherwise follow an authored input text
   color so a dark background + light text keeps placeholders readable too. */
.form-template-container.ftk-placeholder-color-override input.slds-input::placeholder,
.form-template-container.ftk-placeholder-color-override textarea.slds-textarea::placeholder {
    color: var(--ftk-input-placeholder-color, var(--ftk-color-text, var(--slds-g-color-neutral-base-50, #747474)));
    opacity: 1;
}

/* A combobox uses a button for its placeholder. Selected choices keep their
   independent choice text color; rich-text toolbar menus are excluded. */
.form-template-container.ftk-placeholder-color-override lightning-combobox.ftk-scale-field .slds-input_faux[data-value=""] {
    color: var(--ftk-input-placeholder-color, var(--ftk-color-text, inherit));
}
/* END GENERATED NATIVE CONTROLS */