/* AutoScore — baseline global de controles HTML.
   Composição pertence aos componentes; módulos podem apenas especializar. */

:where(
    input:not([type]),
    input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
    input[type="url"], input[type="password"], input[type="number"], input[type="date"],
    input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"],
    select, textarea
) {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: var(--control-height);
    padding: var(--control-padding-block) var(--control-padding-inline);
    border: 1px solid var(--control-border-color);
    border-radius: var(--control-radius);
    background: var(--control-background);
    color: var(--control-color);
    font: inherit;
    font-size: var(--control-font-size);
    line-height: var(--control-line-height);
    transition: var(--control-transition);
}

:where(textarea) {
    min-height: 7.5rem;
    resize: vertical;
}

:where(select) {
    cursor: pointer;
}

:where(option, optgroup) {
    font: inherit;
    color: var(--control-color);
    background: var(--control-background);
}

:where(input[type="search"]) {
    appearance: auto;
}

:where(input[type="color"]) {
    box-sizing: border-box;
    width: 3rem;
    min-width: 3rem;
    height: var(--control-height);
    padding: 0.25rem;
    border: 1px solid var(--control-border-color);
    border-radius: var(--control-radius);
    background: var(--control-background);
    cursor: pointer;
}

:where(input[type="color"])::-webkit-color-swatch-wrapper { padding: 0; }
:where(input[type="color"])::-webkit-color-swatch,
:where(input[type="color"])::-moz-color-swatch { border: 0; border-radius: calc(var(--control-radius) - 2px); }

:where(input[type="range"]) {
    width: 100%;
    min-height: 2rem;
    padding: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}
:where(input[type="range"])::-webkit-slider-runnable-track { height: 0.35rem; border-radius: 999px; background: var(--color-gray-300); }
:where(input[type="range"])::-webkit-slider-thumb { width: 1.1rem; height: 1.1rem; margin-top: -0.375rem; border: 2px solid var(--color-primary); border-radius: 50%; background: var(--color-white); appearance: none; }
:where(input[type="range"])::-moz-range-track { height: 0.35rem; border-radius: 999px; background: var(--color-gray-300); }
:where(input[type="range"])::-moz-range-thumb { width: 0.9rem; height: 0.9rem; border: 2px solid var(--color-primary); border-radius: 50%; background: var(--color-white); }

:where(input[type="file"]) {
    box-sizing: border-box;
    max-width: 100%;
    color: var(--control-color);
    font: inherit;
    cursor: pointer;
}
:where(input[type="file"])::file-selector-button {
    min-height: 2.25rem;
    margin-inline-end: 0.625rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--control-border-color);
    border-radius: var(--control-radius);
    background: var(--control-background-hover);
    color: var(--control-color);
    font: inherit;
    cursor: pointer;
}
:where(input[type="file"])::file-selector-button:hover { border-color: var(--control-border-hover); }

:where(input[type="checkbox"], input[type="radio"]) {
    appearance: none;
    box-sizing: border-box;
    width: 1.125rem;
    min-width: 1.125rem;
    height: 1.125rem;
    min-height: 1.125rem;
    padding: 0;
    margin: 0;
    border: 2px solid var(--color-gray-500);
    background: var(--control-background);
    display: inline-grid;
    place-content: center;
    vertical-align: middle;
    cursor: pointer;
}
:where(input[type="checkbox"]) { border-radius: 0.25rem; }
:where(input[type="radio"]) { border-radius: 50%; }
:where(input[type="checkbox"], input[type="radio"])::before { content: ""; display: block; transform: scale(0); }
:where(input[type="checkbox"])::before { width: 0.5rem; height: 0.25rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) scale(0); }
:where(input[type="radio"])::before { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
:where(input[type="checkbox"], input[type="radio"]):checked { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-white); }
:where(input[type="checkbox"]):checked::before { transform: rotate(-45deg) scale(1); }
:where(input[type="radio"]):checked::before { transform: scale(1); }
:where(input[type="checkbox"]):indeterminate { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-white); }
:where(input[type="checkbox"]):indeterminate::before { width: 0.55rem; height: 2px; background: currentColor; transform: scale(1); }

:where(input[type="button"], input[type="submit"], input[type="reset"]) {
    box-sizing: border-box;
    min-height: 2.5rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--control-border-color);
    border-radius: var(--control-radius);
    background: var(--control-background);
    color: var(--control-color);
    font: inherit;
    cursor: pointer;
}
:where(input[type="submit"]) { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-white); }

:where(button) { font: inherit; line-height: inherit; }

:where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select, textarea, input[type="color"], input[type="file"], input[type="button"], input[type="submit"], input[type="reset"]
):hover:not(:disabled):not([readonly]) { border-color: var(--control-border-hover); }

:where(
    input:not([type="hidden"]), select, textarea, button
):focus { outline: 0; }
:where(
    input:not([type="hidden"]), select, textarea, button
):focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; box-shadow: var(--control-focus-ring); }

:where(input, select, textarea):disabled { background: var(--control-background-disabled); color: var(--control-disabled-color); opacity: var(--control-disabled-opacity); cursor: not-allowed; }
:where(input, select, textarea)[readonly] { background: var(--control-background-readonly); }
:where(input, select, textarea)::placeholder { color: var(--control-placeholder-color); opacity: 1; }
:where(input, select, textarea):required:invalid,
:where(.invalid input, .invalid select, .invalid textarea),
:where([aria-invalid="true"]) { border-color: var(--control-invalid-border); box-shadow: var(--control-invalid-ring); }
:where(input, select, textarea):valid:not(:placeholder-shown):not([type="hidden"]) { border-color: var(--control-valid-border); }
:where(input, select, textarea):-webkit-autofill { -webkit-text-fill-color: var(--control-color); box-shadow: 0 0 0 1000px var(--control-background) inset; }
::selection { background: var(--control-selection-background); }

:where(fieldset) { min-width: 0; border: 1px solid var(--control-border-color); border-radius: var(--control-radius); padding: 1rem; }
:where(legend) { padding-inline: 0.35rem; color: var(--control-color); font-weight: 600; }
:where(label) { color: inherit; }
:where(output) { color: var(--control-color); }
:where(progress, meter) { width: 100%; min-height: 0.75rem; accent-color: var(--color-primary); }
:where(input[type="hidden"]) { display: none !important; }

@media (prefers-contrast: more), (forced-colors: active) {
    :where(input[type="checkbox"], input[type="radio"]) { appearance: auto; forced-color-adjust: auto; }
    :where(input, select, textarea, button) { border: 1px solid CanvasText; }
}