/* Shared sidebar sizing, independent of each construction editor's field layout. */
.panel #configForm input:is(:not([type]), [type="text"], [type="number"], [type="email"], [type="search"], [type="date"]) {
    box-sizing: border-box;
    height: calc(30.625px * var(--menu-density));
    min-height: calc(30.625px * var(--menu-density));
    padding-block: 0;
}

.panel #configForm select,
.proposal-measures-dialog select {
    font-weight: 400;
    font-size: calc(13.333px * var(--menu-density));
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    height: calc(30.625px * var(--menu-density));
    min-height: calc(30.625px * var(--menu-density));
    padding-block: 0;
    padding-inline: calc(10px * var(--menu-density)) calc(28px * var(--menu-density));
    text-align: left;
    text-align-last: left;
    background-image: url('/assets/icons/night/menu-dropdown.png');
    background-repeat: no-repeat;
    background-position: right calc(10px * var(--menu-density)) center;
    background-size: calc(12px * var(--menu-density));
}

body[data-theme="day"] .panel #configForm select,
body[data-theme="day"] .proposal-measures-dialog select {
    background-image: url('/assets/icons/day/menu-dropdown.png');
}

.panel #configForm .direction-control select {
    padding-right: calc(78px * var(--menu-density));
}

.panel .menu-field-legend,
.panel .landing-rails-label-row,
.panel .straight-count-field > .steps-suggestion {
    translate: 0 calc(-2px * var(--menu-density) - 1px);
}

.panel #straightFlightEditor {
    row-gap: calc(5px * var(--menu-density));
    padding-top: calc(7px * var(--menu-density));
    padding-bottom: calc(8px * var(--menu-density));
}

.panel #straightFlightEditor > .menu-field {
    margin-block: 0 calc(7px * var(--menu-density));
}

.panel #straightFlightEditor .straight-handrail-side {
    padding-bottom: calc(5px * var(--menu-density));
}

.panel .straight-flight-editor .straight-count-reset {
    top: calc(21.3125px * var(--menu-density));
}

.topbar-actions > .save-files-menu > summary,
.topbar-actions > .view-menu-toggle {
    text-transform: uppercase;
}

.panel #configForm button:is(.floor-walls-editor-toggle, .landing-geometry-editor-button,
    .flight-add-button, .main-more-toggle, .section-more-toggle, .flight-tab) {
    box-sizing: border-box;
    height: calc(30.625px * var(--menu-density));
    min-height: calc(30.625px * var(--menu-density));
    padding-block: 0;
    font-size: calc(13.333px * var(--menu-density));
}
.panel #configForm .flight-add-button {font-size: 0; width: calc(30.625px * var(--menu-density));}
.panel #configForm .components-editor-launchers {margin-top: calc(18px * var(--menu-density));}
.panel #configForm .landing-geometry-row {margin-bottom: calc(6px * var(--menu-density));}
.panel #configForm :is(input,select,button).is-manual {color: #ef4444;}

/* Suggestions share the floating label baseline, not a separate grid row. */
.panel #configForm .menu-field:has(> .steps-suggestion.is-visible) {
    display: block;
    padding-top: calc(6px * var(--menu-density));
}
.panel #configForm .menu-field:has(> .steps-suggestion.is-visible) > .menu-field-legend,
.panel #configForm .menu-field > .steps-suggestion {
    position: absolute;
    top: calc(6px * var(--menu-density) + .5px);
    transform: translateY(-50%);
    translate: 0 calc(-2px * var(--menu-density) - 1px);
    padding-inline: calc(3px * var(--menu-density));
    font-size: calc(10px * var(--menu-density));
    line-height: calc(12px * var(--menu-density));
    white-space: nowrap;
}
.panel #configForm .menu-field > .steps-suggestion {
    right: calc(10px * var(--menu-density));
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Keep the native select and its keyboard behavior; decorate supported pickers. */
@supports (appearance: base-select) {
    .panel #configForm select:is(#flightLandingRailsInput, [name="landingRails"]),
    .panel #configForm select:is(#flightLandingRailsInput, [name="landingRails"])::picker(select) {
        appearance: base-select;
        -webkit-appearance: base-select;
    }
    .panel #configForm select:is(#flightLandingRailsInput, [name="landingRails"]) {
        display: flex;
        align-items: center;
        gap: calc(8px * var(--menu-density));
        background-image: none;
        padding-right: calc(10px * var(--menu-density));
        --landing-rail-icon: var(--landing-rail-none, url('/assets/icons/menu/landing-rail-none.svg'));
    }
    .panel #configForm select:is(#flightLandingRailsInput, [name="landingRails"])::picker-icon {
        margin-left: auto;
    }
    .panel #configForm select:is(#flightLandingRailsInput, [name="landingRails"])::picker(select) {
        background: var(--field);
        color: var(--text);
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 4px;
        font: inherit;
    }
    .panel #configForm select:is(#flightLandingRailsInput, [name="landingRails"]) option {
        display: flex;
        align-items: center;
        gap: calc(8px * var(--menu-density));
        min-height: calc(30.625px * var(--menu-density));
        padding: 2px 8px;
        font-weight: 400;
        --landing-rail-icon: var(--landing-rail-none, url('/assets/icons/menu/landing-rail-none.svg'));
    }
    .panel #configForm select:is(#flightLandingRailsInput, [name="landingRails"])::before,
    .panel #configForm select:is(#flightLandingRailsInput, [name="landingRails"]) option::before {
        content: '';
        flex: 0 0 calc(20px * var(--menu-density) * 32 / 28);
        width: calc(20px * var(--menu-density) * 32 / 28);
        height: calc(20px * var(--menu-density) * 32 / 28);
        background: radial-gradient(circle at var(--landing-cp-x, 18.75%) var(--landing-cp-y, 81.25%),
            var(--accent) calc(20px * var(--menu-density) * 4 / 28),
            currentColor calc(20px * var(--menu-density) * 4 / 28));
        mask: var(--landing-rail-icon) center / contain no-repeat;
        -webkit-mask: var(--landing-rail-icon) center / contain no-repeat;
    }
    .panel #configForm select:is(#flightLandingRailsInput, [name="landingRails"]):has(option[value="one"]:checked),
    .panel #configForm select:is(#flightLandingRailsInput, [name="landingRails"]) option[value="one"] {
        --landing-rail-icon: var(--landing-rail-one, url('/assets/icons/menu/landing-rail-one.svg'));
    }
    .panel #configForm select:is(#flightLandingRailsInput, [name="landingRails"]):has(option[value="straight"]:checked),
    .panel #configForm select:is(#flightLandingRailsInput, [name="landingRails"]) option[value="straight"] {
        --landing-rail-icon: var(--landing-rail-straight, url('/assets/icons/menu/landing-rail-straight.svg'));
    }
    .panel #configForm select:is(#flightLandingRailsInput, [name="landingRails"]):has(option[value="corner"]:checked),
    .panel #configForm select:is(#flightLandingRailsInput, [name="landingRails"]) option[value="corner"] {
        --landing-rail-icon: var(--landing-rail-corner, url('/assets/icons/menu/landing-rail-corner.svg'));
    }
    .panel #configForm select:is(#flightLandingRailsInput, [name="landingRails"]) option::checkmark {
        order: 2;
        margin-left: auto;
    }
    .panel #configForm select:is(#flightLandingRailsInput, [name="landingRails"]) option:is(:checked, :hover) {
        background: color-mix(in srgb, #269f90 16%, var(--field));
    }
}