/* ==========================================================================
    Forms & Inputs
   ========================================================================== */

fieldset {
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-global);
    padding: 15px;
    margin: 0;
}

fieldset.export-controls {
    padding-top: 20px;
    padding-bottom: 20px;
}

legend {
    padding: 0 5px;
    color: var(--color-text-page);
    font-weight: bold;
}

/* Radio Button Groups (Picker Mode, Vary Param) */
.radio-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.radio-group label {
    cursor: pointer;
    padding: 5px 10px;
    border-radius: var(--radius-global);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    border: 1px solid var(--color-bg-button-disabled);
    background-color: var(--color-bg-button-disabled);
    color: var(--color-text-button-disabled);
    text-align: center;
}

.radio-group input[type="radio"] {
    display: none;
}

.radio-group input[type="radio"]:checked + label {
    background-color: var(--color-accent-main);
    border-color: var(--color-text-on-accent);
    color: var(--color-text-on-accent);
}

.radio-group label.disabled-control {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--color-bg-button-disabled) !important;
    border-color: var(--color-bg-button-disabled) !important;
    color: var(--color-text-button-disabled) !important;
}

.radio-group.justify-center {
    justify-content: center;
}
.slider-group .picker-mode-selector label {
    text-align: center;
    width: auto;
}

select {
    padding: 4px 6px;
    background-color: var(--color-bg-input);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-global);
    color: var(--color-text-input);
}

/* Text Inputs */
.color-string-input {
    background-color: var(--color-bg-input);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-global);
    color: var(--color-text-input);
    width: 30ch;
    padding: 4px 8px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.color-string-input:focus,
.color-string-input.drag-over {
    border-color: var(--color-outline-drag-over);
    box-shadow: 0 0 0 1px var(--color-outline-drag-over);
}
.color-string-input.invalid {
    border-color: hsl(0, 70%, 50%);
}

/* Number Inputs */
.slider-value-input {
    -moz-appearance: textfield;
    appearance: textfield;
    background-color: var(--color-bg-input);
    border-radius: var(--radius-global);
    border: 1px solid var(--color-border-input);
    color: var(--color-text-input);
    flex-shrink: 0;
    padding: 4px 6px;
    text-align: right;
    width: var(--slider-value-input-width);
}

.slider-value-input::-webkit-inner-spin-button,
.slider-value-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Range Sliders */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    flex-grow: 1;
    height: var(--slider-track-height);
    background-color: var(--color-bg-slider-track);
    border: 1px solid var(--color-border-slider-track);
    cursor: pointer;
    border-radius: var(--radius-global);
    min-width: 50px;
    padding: 0;
    outline: none;
    opacity: 0.95;
    transition: opacity 0.2s;
    box-sizing: border-box;
}
input[type="range"]:hover {
    opacity: 1;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: var(--slider-thumb-height);
    width: var(--slider-thumb-width);
    border-radius: var(--radius-global);
    cursor: pointer;
    background: var(--color-bg-slider-thumb);
    border: 2px solid var(--color-border-slider-thumb);
    box-shadow: var(--shadow-slider-thumb);
    margin-top: calc((var(--slider-track-height) - var(--slider-thumb-height)) / 2);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

input[type="range"]::-moz-range-thumb {
    appearance: none;
    height: var(--slider-thumb-height);
    width: var(--slider-thumb-width);
    border-radius: var(--radius-global);
    cursor: pointer;
    background: var(--color-bg-slider-thumb);
    border: 2px solid var(--color-border-slider-thumb);
    box-shadow: var(--shadow-slider-thumb);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

input[type="range"]:disabled::-webkit-slider-thumb {
    cursor: not-allowed;
    background-color: var(--color-bg-button-disabled);
    border-color: #555;
}

input[type="range"]:disabled::-moz-range-thumb {
    cursor: not-allowed;
    background-color: var(--color-bg-button-disabled);
    border-color: #555;
}

.disabled-control,
.disabled-control > * {
    cursor: not-allowed !important;
}