@24vlh/vds 0.1.0 → 0.1.1

package/dist/components/forms.css

@@ -1,1831 +1 @@
-/************************************************************
- * VLAH DESIGN SYSTEM (VDS) - Forms
- *
- *  Responsibilities:
- *    - Provide two parallel form architectures:
- *         A) Legacy VDS form controls: input, textarea, select,
- *            segmented controls, toggles, switches, radio/checkbox, input groups
- *         B) UFAL (Unified Form Abstraction Layer): form-control,
- *            wrapper elements, adaptive surfaces, loading/error states,
- *            prefix/suffix architecture, file/drop zones, and layout primitives
- *
- *    - Supply semantic/interactive states:
- *         focus, hover, disabled, readonly, error, success, warning, info,
- *         dirty, loading, validated, invalidated
- *
- *    - Define full visual contract for:
- *         control sizing tokens, label/caption hierarchy,
- *         density modes, inline/stack layouts, and responsive adaptations
- *
- *  System Notes:
- *    - 100% token-driven: spacing, radii, borders, typography, motion
- *    - No JS assumptions; all behaviours (loading shimmer, validation highlights)
- *      are CSS-based
- *    - Legacy and UFAL architectures MUST co-exist in v1; no cross-overwrites
- ************************************************************/
-
-/* ---------------------------------------------------------
-   1. FORM TOKEN DEFINITIONS
---------------------------------------------------------- */
-
-[data-vds-form],
-.vds-form {
-    --form-flow-gap-xs: var(--space-1);
-    --form-flow-textarea-min-height: 5rem;
-
-    --size-9: 2.75rem;
-    --size-10: 3.00rem;
-    --size-11: 3.25rem;
-
-    --control-min-height: var(--size-10);
-
-    --control-height-md: 40px;
-}
-
-[data-vds-form] .form--a .form-control,
-.vds-form .form--a .form-control {
-    --control-min-height: var(--size-11);
-}
-
-[data-vds-form] .form--c .form-control,
-.vds-form .form--c .form-control {
-    --control-min-height: var(--size-9);
-}
-
-/* ---------------------------------------------------------
-   2. BASE FORM RESET
---------------------------------------------------------- */
-
-input,
-select,
-textarea,
-button {
-    font-family: inherit;
-    font-size: 100%;
-    line-height: inherit;
-    color: inherit;
-}
-
-input,
-select,
-textarea {
-    background-clip: padding-box;
-}
-
-input:focus,
-select:focus,
-textarea:focus {
-    outline: none;
-}
-
-/* ---------------------------------------------------------
-   3. DENSITY LAYERS (A/B/C)
---------------------------------------------------------- */
-
-.form--a .input,
-.form--a .select,
-.form--a .textarea {
-    padding: var(--space-4);
-    font-size: var(--text-md);
-}
-
-.form--a .form-check {
-    font-size: var(--text-md);
-}
-
-.form--a .segmented__option {
-    padding: var(--space-3) var(--space-5);
-    font-size: var(--text-md);
-}
-
-.form--a .file-upload__control {
-    padding: var(--space-5);
-}
-
-.form--c .input,
-.form--c .select,
-.form--c .textarea {
-    padding: var(--space-2);
-    font-size: var(--text-xs);
-}
-
-.form--c .form-check {
-    font-size: var(--text-xs);
-}
-
-.form--c .segmented__option {
-    padding: var(--space-1) var(--space-3);
-    font-size: var(--text-xs);
-}
-
-.form--c .file-upload__control {
-    padding: var(--space-3);
-}
-
-/* ---------------------------------------------------------
-   4. FIELD WRAPPER
---------------------------------------------------------- */
-
-.form-field {
-    display: flex;
-    flex-direction: column;
-    gap: var(--form-flow-gap-xs);
-    width: 100%;
-}
-
-.form-field--disabled {
-    opacity: 0.7;
-    pointer-events: none;
-}
-
-.form-label {
-    font-weight: 500;
-    color: var(--color-text);
-}
-
-.form-label--required::after {
-    content: " *";
-    color: var(--color-danger);
-    font-weight: 600;
-}
-
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-cancel-button {
-    -webkit-appearance: none;
-            appearance: none;
-}
-
-.form-label--sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    border: 0;
-}
-
-.form-help {
-    font-size: var(--text-xs);
-    color: var(--color-text-muted);
-}
-
-.form-error {
-    font-size: var(--text-xs);
-    color: var(--color-danger);
-}
-
-.form-field--error .form-label {
-    color: var(--color-danger);
-}
-
-.form-field--error .input,
-.form-field--error .select,
-.form-field--error .textarea {
-    border-color: var(--color-danger);
-}
-
-.form-field--error .input-group {
-    border-color: var(--color-danger);
-}
-
-.form-field--error .segmented {
-    border-color: var(--color-danger);
-}
-
-.form-field--error .slider {
-    box-shadow: 0 0 0 var(--border-width-strong) var(--color-danger-soft);
-}
-
-.form-field--error .file-upload__control {
-    border-color: var(--color-danger);
-    background-color: var(--color-danger-soft);
-}
-
-/* ---------------------------------------------------------
-   5. BASE INPUT
---------------------------------------------------------- */
-
-.input {
-    width: 100%;
-    padding: var(--space-3) var(--space-3);
-
-    border: var(--border-width) solid var(--color-border-subtle);
-    border-radius: var(--radius-md);
-    background-color: var(--color-surface);
-    color: var(--color-text);
-
-    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
-}
-
-.input:focus {
-    border-color: var(--color-accent);
-}
-
-.input:focus-visible {
-    border-color: var(--focus-ring-color);
-    box-shadow: 0 0 0 var(--border-width-strong) var(--focus-ring-color);
-}
-
-.input:hover {
-    border-color: var(--color-border-strong);
-}
-
-.input:disabled,
-.input--disabled {
-    background-color: var(--color-muted-bg);
-    color: var(--color-text-muted);
-    cursor: not-allowed;
-}
-
-.input[readonly],
-.input--readonly {
-    background-color: var(--color-surface-subtle);
-    color: var(--color-text-muted);
-    border-style: dashed;
-}
-
-.input::-moz-placeholder {
-    color: var(--color-placeholder);
-    opacity: 1;
-}
-
-.input::placeholder {
-    color: var(--color-placeholder);
-    opacity: 1;
-}
-
-/* ---------------------------------------------------------
-   5A. INPUT WITH ICONS
-   Pattern:
-   <div class="input-icon input-icon--left">
-     <span class="input-icon__icon">...</span>
-     <input class="input">
-   </div>
---------------------------------------------------------- */
-
-.input-icon {
-    position: relative;
-    display: flex;
-    align-items: center;
-    width: 100%;
-}
-
-.input-icon .input {
-    width: 100%;
-}
-
-.input-icon--left .input {
-    padding-left: var(--space-8);
-}
-
-.input-icon--right .input {
-    padding-right: var(--space-8);
-}
-
-.input-icon--both .input {
-    padding-left: var(--space-8);
-    padding-right: var(--space-8);
-}
-
-.input-icon__icon {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--icon-sm);
-    height: var(--icon-sm);
-    color: var(--color-text-muted);
-}
-
-.input-icon--left .input-icon__icon {
-    left: var(--space-3);
-}
-
-.input-icon--right .input-icon__icon {
-    right: var(--space-3);
-}
-
-/* ---------------------------------------------------------
-   6. TEXTAREA
---------------------------------------------------------- */
-
-.textarea {
-    width: 100%;
-    resize: vertical;
-    min-height: var(--form-flow-textarea-min-height);
-    padding: var(--space-3);
-
-    border: var(--border-width) solid var(--color-border-subtle);
-    border-radius: var(--radius-md);
-    background-color: var(--color-surface);
-    color: var(--color-text);
-
-    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
-}
-
-.textarea:focus {
-    border-color: var(--color-accent);
-}
-
-.textarea:focus-visible {
-    border-color: var(--focus-ring-color);
-    box-shadow: 0 0 0 var(--border-width-strong) var(--focus-ring-color);
-}
-
-.textarea:hover {
-    border-color: var(--color-border-strong);
-}
-
-.textarea:disabled,
-.textarea--disabled {
-    background-color: var(--color-muted-bg);
-    color: var(--color-text-muted);
-    cursor: not-allowed;
-}
-
-.textarea[readonly],
-.textarea--readonly {
-    background-color: var(--color-surface-subtle);
-    color: var(--color-text-muted);
-    border-style: dashed;
-}
-
-.textarea::-moz-placeholder {
-    color: var(--color-placeholder);
-    opacity: 1;
-}
-
-.textarea::placeholder {
-    color: var(--color-placeholder);
-    opacity: 1;
-}
-
-/* ---------------------------------------------------------
-   7. SELECT (NATIVE + CUSTOM DROPDOWN ICON)
---------------------------------------------------------- */
-
-.select {
-    width: 100%;
-    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
-
-    -webkit-appearance: none;
-
-       -moz-appearance: none;
-
-            appearance: none;
-    background-color: var(--color-surface);
-    color: var(--color-text);
-
-    border: var(--border-width) solid var(--color-border-subtle);
-    border-radius: var(--radius-md);
-
-    position: relative;
-    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
-
-    background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
-    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
-    background-position: calc(100% - var(--space-3)) center,
-    calc(100% - var(--space-2)) center;
-    background-size: 0.4rem 0.4rem;
-    background-repeat: no-repeat;
-    padding-right: var(--space-6);
-}
-
-.select:focus {
-    border-color: var(--color-accent);
-}
-
-.select:focus-visible {
-    border-color: var(--focus-ring-color);
-    box-shadow: 0 0 0 var(--border-width-strong) var(--focus-ring-color);
-}
-
-.select:hover {
-    border-color: var(--color-border-strong);
-}
-
-.select:disabled,
-.select--disabled {
-    background-color: var(--color-muted-bg);
-    color: var(--color-text-muted);
-    cursor: not-allowed;
-    background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
-    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
-}
-
-/* ---------------------------------------------------------
-   8. CHECKBOXES & RADIOS
---------------------------------------------------------- */
-
-.form-check {
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-    margin-bottom: var(--space-3);
-    cursor: pointer;
-    font-size: var(--text-sm);
-}
-
-.form-check-group .form-check:last-child {
-    margin-bottom: 0;
-}
-
-.form-check--disabled {
-    opacity: 0.7;
-    cursor: not-allowed;
-}
-
-.form-check input {
-    width: 1.15rem;
-    height: 1.15rem;
-    cursor: pointer;
-}
-
-.checkbox {
-    -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none;
-    border: var(--border-width) solid var(--color-border-subtle);
-    border-radius: var(--radius-sm);
-    background-color: var(--color-surface);
-    cursor: pointer;
-    position: relative;
-    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
-}
-
-.checkbox:hover {
-    border-color: var(--color-border-strong);
-}
-
-.checkbox:focus-visible {
-    box-shadow: 0 0 0 var(--border-width-strong) var(--focus-ring-color);
-    outline: none;
-}
-
-.checkbox:checked {
-    border-color: var(--color-accent);
-    background-color: var(--color-accent-soft);
-}
-
-.checkbox:checked::after {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 0.55rem;
-    height: 0.55rem;
-    transform: translate(-50%, -50%);
-    background-color: var(--color-accent);
-    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 8 7 12 13 4'/%3E%3C/svg%3E");
-            mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 8 7 12 13 4'/%3E%3C/svg%3E");
-    -webkit-mask-size: cover;
-            mask-size: cover;
-}
-
-.checkbox:disabled {
-    background-color: var(--color-muted-bg);
-    border-color: var(--color-muted-border);
-    cursor: not-allowed;
-}
-
-.checkbox--error {
-    border-color: var(--color-danger);
-}
-
-.checkbox--warning {
-    border-color: var(--color-warning);
-}
-
-.checkbox--success {
-    border-color: var(--color-success);
-}
-
-.checkbox--info {
-    border-color: var(--color-info);
-}
-
-.radio {
-    -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none;
-    border: var(--border-width) solid var(--color-border-subtle);
-    border-radius: 50%;
-    background-color: var(--color-surface);
-    cursor: pointer;
-    position: relative;
-    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
-}
-
-.radio:hover {
-    border-color: var(--color-border-strong);
-}
-
-.radio:focus-visible {
-    box-shadow: 0 0 0 var(--border-width-strong) var(--focus-ring-color);
-    outline: none;
-}
-
-.radio:checked {
-    border-color: var(--color-accent);
-    background-color: var(--color-accent-soft);
-}
-
-.radio:checked::after {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 0.55rem;
-    height: 0.55rem;
-    background-color: var(--color-accent);
-    border-radius: 50%;
-    transform: translate(-50%, -50%);
-}
-
-.radio:disabled {
-    background-color: var(--color-muted-bg);
-    border-color: var(--color-muted-border);
-    cursor: not-allowed;
-}
-
-.radio--error {
-    border-color: var(--color-danger);
-}
-
-.radio--warning {
-    border-color: var(--color-warning);
-}
-
-.radio--success {
-    border-color: var(--color-success);
-}
-
-.radio--info {
-    border-color: var(--color-info);
-}
-
-/* ---------------------------------------------------------
-   9. SWITCHES
-   Pattern: <input type="checkbox" class="switch">
---------------------------------------------------------- */
-
-.switch {
-    -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none;
-    border: var(--border-width) solid var(--color-border-subtle);
-    border-radius: 50%;
-    background-color: var(--color-surface);
-    cursor: pointer;
-    position: relative;
-    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
-    width: 1.15rem;
-    height: 1.15rem;
-}
-
-.switch::after {
-    content: "";
-    position: absolute;
-    top: 22%;
-    left: 22%;
-    width: 0.55rem;
-    height: 0.55rem;
-    background-color: var(--color-accent);
-    border-radius: 50%;
-    transform: translate(-50%, -50%);
-    opacity: 0;
-}
-
-.switch:checked {
-    background-color: var(--color-accent-strong);
-    border: var(--border-width) solid var(--color-accent);
-}
-
-.switch:checked::after {
-    opacity: 1;
-    transform: scale(1);
-    background-color: var(--color-accent);
-}
-
-.switch:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-.switch:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 var(--border-width-strong) var(--focus-ring-color);
-}
-
-.switch--error {
-    background-color: var(--color-danger-soft);
-}
-
-.switch--warning {
-    background-color: var(--color-warning-soft);
-}
-
-.switch--success {
-    background-color: var(--color-success-soft);
-}
-
-.switch--info {
-    background-color: var(--color-info-soft);
-}
-
-.switch--error:checked {
-    background-color: var(--color-danger);
-}
-
-.switch--warning:checked {
-    background-color: var(--color-warning);
-}
-
-.switch--success:checked {
-    background-color: var(--color-success);
-}
-
-.switch--info:checked {
-    background-color: var(--color-info);
-}
-
-/* ---------------------------------------------------------
-   10. INPUT GROUPS (ICONS + ADDONS)
---------------------------------------------------------- */
-
-.input-group {
-    display: flex;
-    align-items: center;
-    border: var(--border-width) solid var(--color-border-subtle);
-    border-radius: var(--radius-md);
-    background-color: var(--color-surface);
-    overflow: hidden;
-}
-
-.input-group .input {
-    border: none;
-    flex: 1;
-    box-shadow: none;
-}
-
-.input-group-addon {
-    padding: 0 var(--space-3);
-    display: flex;
-    align-items: center;
-    color: var(--color-text-muted);
-    background-color: var(--color-surface);
-    border-right: var(--border-width) solid var(--color-border-subtle);
-}
-
-.input-group-addon + .input {
-    padding-left: var(--space-2);
-}
-
-.input-group-icon {
-    display: flex;
-    align-items: center;
-    padding: 0 var(--space-3);
-    color: var(--color-text-muted);
-}
-
-.input-group-icon .icon {
-    width: var(--icon-sm);
-    height: var(--icon-sm);
-}
-
-.input-group--error {
-    border-color: var(--color-danger);
-}
-
-.input-group--warning {
-    border-color: var(--color-warning);
-}
-
-.input-group--success {
-    border-color: var(--color-success);
-}
-
-.input-group--info {
-    border-color: var(--color-info);
-}
-
-.input-group--disabled {
-    opacity: 0.7;
-    pointer-events: none;
-}
-
-.input-group:focus-within {
-    border-color: var(--focus-ring-color);
-    box-shadow: 0 0 0 var(--border-width-strong) var(--focus-ring-color);
-}
-
-.input-group:hover {
-    border-color: var(--color-border-strong);
-}
-
-/* ---------------------------------------------------------
-   11. SEGMENTED CONTROL
---------------------------------------------------------- */
-
-.segmented {
-    display: flex;
-    width: 100%;
-    border: var(--border-width) solid var(--color-border-subtle);
-    border-radius: var(--radius-md);
-    overflow: hidden;
-    height: 2.5rem;
-    height: var(--control-height-md, 2.5rem);
-    background-color: var(--color-surface);
-}
-
-.segmented__option {
-    flex: 1 1 0;
-    text-align: center;
-    -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none;
-    border: none;
-    font: inherit;
-    line-height: inherit;
-    padding: var(--space-2) var(--space-4);
-    cursor: pointer;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--color-text-muted);
-    background: var(--color-surface);
-    height: 100%;
-    transition: background-color 0.2s, color 0.2s;
-}
-
-.segmented__option:not(:last-child) {
-    border-right: var(--border-width) solid var(--color-border-subtle);
-}
-
-.segmented__option:hover {
-    background-color: var(--color-surface-subtle);
-    color: var(--color-text);
-}
-
-.segmented__option:focus-visible {
-    outline: none;
-    box-shadow: inset 0 0 0 var(--border-width-strong) var(--focus-ring-color);
-}
-
-.segmented__option--active {
-    background-color: var(--color-accent);
-    color: var(--color-on-accent);
-    font-weight: 600;
-    position: relative;
-    z-index: 1;
-}
-
-.segmented__option--active + .segmented__option {
-    border-left-color: transparent;
-}
-
-.segmented--disabled {
-    opacity: 0.6;
-    pointer-events: none;
-}
-
-.segmented__option--disabled {
-    cursor: not-allowed;
-    opacity: 0.7;
-}
-
-.segmented__option-icon {
-    width: var(--icon-sm);
-    height: var(--icon-sm);
-    margin-right: var(--space-2);
-}
-
-.segmented--error {
-    border-color: var(--color-danger);
-}
-
-.segmented--warning {
-    border-color: var(--color-warning);
-}
-
-.segmented--success {
-    border-color: var(--color-success);
-}
-
-.segmented--info {
-    border-color: var(--color-info);
-}
-
-.segmented--loading .segmented__option {
-    position: relative;
-    overflow: hidden;
-}
-
-.segmented--loading .segmented__option::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-image: linear-gradient(
-            90deg,
-            var(--color-muted-bg),
-            var(--color-surface),
-            var(--color-muted-bg)
-    );
-    background-size: 200% 100%;
-    animation: input-loading-shimmer 1.5s infinite;
-}
-
-/* ---------------------------------------------------------
-   12. SLIDER
---------------------------------------------------------- */
-
-.slider {
-    width: 100%;
-    -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none;
-    height: var(--border-width-strong);
-    background-color: var(--slider-track-bg);
-    border-radius: var(--radius-sm);
-    cursor: pointer;
-}
-
-.slider:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 var(--border-width-strong) var(--focus-ring-color);
-}
-
-.slider:disabled {
-    cursor: not-allowed;
-    opacity: 0.7;
-}
-
-.slider::-webkit-slider-thumb {
-    -webkit-appearance: none;
-            appearance: none;
-    width: 1rem;
-    height: 1rem;
-    background: var(--slider-thumb-bg);
-    border-radius: 50%;
-    cursor: pointer;
-}
-
-.slider::-moz-range-thumb {
-    width: 1rem;
-    height: 1rem;
-    background: var(--slider-thumb-bg);
-    border-radius: 50%;
-    cursor: pointer;
-}
-
-.slider--error {
-    box-shadow: 0 0 0 var(--border-width-strong) var(--color-danger-soft);
-}
-
-.slider--error:focus-visible {
-    box-shadow: 0 0 0 var(--border-width-strong) var(--color-danger);
-    outline: none;
-}
-
-.slider--warning {
-    box-shadow: 0 0 0 var(--border-width-strong) var(--color-warning-soft);
-}
-
-.slider--warning:focus-visible {
-    box-shadow: 0 0 0 var(--border-width-strong) var(--color-warning);
-    outline: none;
-}
-
-.slider--success {
-    box-shadow: 0 0 0 var(--border-width-strong) var(--color-success-soft);
-}
-
-.slider--success:focus-visible {
-    box-shadow: 0 0 0 var(--border-width-strong) var(--color-success);
-    outline: none;
-}
-
-.slider--info {
-    box-shadow: 0 0 0 var(--border-width-strong) var(--color-info-soft);
-}
-
-.slider--info:focus-visible {
-    box-shadow: 0 0 0 var(--border-width-strong) var(--color-info);
-    outline: none;
-}
-
-/* ---------------------------------------------------------
-   13. FILE UPLOAD (CUSTOM)
---------------------------------------------------------- */
-
-.file-upload {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-}
-
-.file-upload input {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-}
-
-.file-upload__control {
-    border: var(--border-width) dashed var(--color-border-subtle);
-    border-radius: var(--radius-md);
-    padding: var(--space-4);
-    text-align: center;
-    color: var(--color-text-soft);
-    cursor: pointer;
-    background-color: var(--color-surface);
-    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
-}
-
-.file-upload__control:hover {
-    border-color: var(--color-border-strong);
-    background-color: var(--color-surface-subtle);
-}
-
-.file-upload__control:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 var(--border-width-strong) var(--focus-ring-color);
-}
-
-.file-upload__control--dragover {
-    border-color: var(--color-accent);
-    background-color: var(--color-accent-soft);
-}
-
-.file-upload__control--disabled {
-    opacity: 0.7;
-    cursor: not-allowed;
-}
-
-.file-upload__control--error {
-    border-color: var(--color-danger);
-    background-color: var(--color-danger-soft);
-    color: var(--color-danger-strong);
-}
-
-.file-upload__control--warning {
-    border-color: var(--color-warning);
-    background-color: var(--color-warning-soft);
-    color: var(--color-warning-strong);
-}
-
-.file-upload__control--success {
-    border-color: var(--color-success);
-    background-color: var(--color-success-soft);
-    color: var(--color-success-strong);
-}
-
-.file-upload__control--info {
-    border-color: var(--color-info);
-    background-color: var(--color-info-soft);
-    color: var(--color-info-strong);
-}
-
-.file-upload__control--loading {
-    background-image: linear-gradient(
-            90deg,
-            var(--color-muted-bg),
-            var(--color-surface),
-            var(--color-muted-bg)
-    );
-    background-size: 200% 100%;
-    animation: input-loading-shimmer 1.5s infinite;
-}
-
-/* ---------------------------------------------------------
-   14. FORM GRID / FORM ROWS
---------------------------------------------------------- */
-
-.form-row {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--space-4);
-}
-
-.form-row--two {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    grid-gap: var(--space-4);
-    gap: var(--space-4);
-}
-
-.form-grid {
-    display: grid;
-    grid-gap: var(--space-4);
-    gap: var(--space-4);
-}
-
-.form-grid--two {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.form-grid--three {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.form-grid--four {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-
-@media (max-width: 768px) {
-    .form-grid--two,
-    .form-grid--three,
-    .form-grid--four {
-        grid-template-columns: 1fr;
-    }
-}
-
-/* ---------------------------------------------------------
-   15. VALIDATION STATES (INPUT / SELECT / TEXTAREA)
---------------------------------------------------------- */
-
-.input--error,
-.select--error,
-.textarea--error {
-    border-color: var(--color-danger);
-}
-
-.input--error:focus-visible,
-.select--error:focus-visible,
-.textarea--error:focus-visible {
-    box-shadow: 0 0 0 var(--border-width-strong) var(--color-danger-soft);
-}
-
-.input--success,
-.select--success,
-.textarea--success {
-    border-color: var(--color-success);
-}
-
-.input--success:focus-visible,
-.select--success:focus-visible,
-.textarea--success:focus-visible {
-    box-shadow: 0 0 0 var(--border-width-strong) var(--color-success-soft);
-}
-
-.input--warning,
-.select--warning,
-.textarea--warning {
-    border-color: var(--color-warning);
-}
-
-.input--warning:focus-visible,
-.select--warning:focus-visible,
-.textarea--warning:focus-visible {
-    box-shadow: 0 0 0 var(--border-width-strong) var(--color-warning-soft);
-}
-
-.input--info,
-.select--info,
-.textarea--info {
-    border-color: var(--color-info);
-}
-
-.input--info:focus-visible,
-.select--info:focus-visible,
-.textarea--info:focus-visible {
-    box-shadow: 0 0 0 var(--border-width-strong) var(--color-info-soft);
-}
-
-/* ---------------------------------------------------------
-   16. FIELD META (HELP, ERROR, COUNTER, ICONS, LAYOUT)
---------------------------------------------------------- */
-
-.form-meta {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: var(--form-flow-gap-xs);
-    margin-top: var(--space-1);
-}
-
-.form-meta--stacked {
-    flex-direction: column;
-    align-items: flex-start;
-}
-
-.form-meta--inline {
-    flex-direction: row;
-    align-items: center;
-}
-
-.form-meta__messages {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-1);
-    min-width: 0;
-}
-
-.form-counter {
-    margin-left: auto;
-    font-size: var(--text-xs);
-    font-family: var(--font-family-mono), monospace;
-    color: var(--color-text-muted);
-    white-space: nowrap;
-}
-
-.form-counter--warning {
-    color: var(--color-warning);
-}
-
-.form-counter--danger {
-    color: var(--color-danger);
-}
-
-.form-field--error .form-counter {
-    color: var(--color-danger);
-}
-
-.form-control-with-icon {
-    position: relative;
-    display: inline-flex;
-    width: 100%;
-}
-
-.form-control-with-icon .input,
-.form-control-with-icon .select,
-.form-control-with-icon .textarea {
-    width: 100%;
-    padding-right: calc(var(--space-8) + var(--space-1));
-}
-
-.form-status-icon {
-    position: absolute;
-    right: var(--space-3);
-    top: 50%;
-    transform: translateY(-50%);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--icon-sm);
-    height: var(--icon-sm);
-    color: var(--color-text-muted);
-    pointer-events: none;
-}
-
-.form-field--error .form-status-icon {
-    color: var(--color-danger);
-}
-
-.form-field--success .form-status-icon {
-    color: var(--color-success);
-}
-
-.form-field--warning .form-status-icon {
-    color: var(--color-warning);
-}
-
-.form-field--info .form-status-icon {
-    color: var(--color-info);
-}
-
-.form-field--success .form-label {
-    color: var(--color-success);
-}
-
-.form-field--success .input,
-.form-field--success .select,
-.form-field--success .textarea,
-.form-field--success .input-group {
-    border-color: var(--color-success);
-}
-
-.form-field--warning .form-label {
-    color: var(--color-warning);
-}
-
-.form-field--warning .input,
-.form-field--warning .select,
-.form-field--warning .textarea,
-.form-field--warning .input-group {
-    border-color: var(--color-warning);
-}
-
-.form-field--info .form-label {
-    color: var(--color-info);
-}
-
-.form-field--info .input,
-.form-field--info .select,
-.form-field--info .textarea,
-.form-field--info .input-group {
-    border-color: var(--color-info);
-}
-
-.form-field--horizontal {
-    display: grid;
-    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
-    grid-column-gap: var(--space-4);
-    -moz-column-gap: var(--space-4);
-         column-gap: var(--space-4);
-    align-items: flex-start;
-}
-
-.form-field__label {
-    padding-top: var(--space-1);
-}
-
-.form-field__control {
-    display: flex;
-    flex-direction: column;
-    gap: var(--form-flow-gap-xs);
-}
-
-@media (max-width: 768px) {
-    .form-field--horizontal {
-        grid-template-columns: 1fr;
-    }
-
-    .form-field__label {
-        padding-top: 0;
-    }
-}
-
-.input--loading,
-.select--loading,
-.textarea--loading {
-    background-image: linear-gradient(
-            90deg,
-            var(--color-muted-bg),
-            var(--color-surface),
-            var(--color-muted-bg)
-    );
-    background-size: 200% 100%;
-    animation: input-loading-shimmer 1.5s infinite;
-}
-
-@keyframes input-loading-shimmer {
-    0% {
-        background-position: -150% 0;
-    }
-    100% {
-        background-position: 150% 0;
-    }
-}
-
-/* ---------------------------------------------------------
-   17. FORMS INSIDE MODALS / PANELS
---------------------------------------------------------- */
-
-.modal .form-field {
-    margin-bottom: var(--space-3);
-}
-
-/* ---------------------------------------------------------
-   18. FORM-LEVEL MESSAGES (top of form)
---------------------------------------------------------- */
-
-.form-message {
-    width: 100%;
-    padding: var(--space-4) var(--space-6);
-    border-radius: var(--radius-md);
-    border: var(--border-width) solid var(--color-border-subtle);
-    background-color: var(--color-surface-subtle);
-    font-size: var(--text-sm);
-    display: flex;
-    align-items: flex-start;
-    gap: var(--space-3);
-}
-
-.form-message__icon {
-    width: 1.25rem;
-    height: 1.25rem;
-    flex-shrink: 0;
-    stroke: currentColor;
-    fill: none;
-}
-
-.form-message__content {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-1);
-}
-
-.form-message--neutral {
-    border-color: var(--color-muted-border);
-    background-color: var(--color-muted-bg);
-    color: var(--color-text-muted);
-}
-
-.form-message--error {
-    background-color: var(--semantic-error-bg-strong, var(--color-danger-soft));
-    border-color: var(--semantic-error-border-strong, var(--color-danger));
-    color: var(--semantic-error-text-strong, var(--color-danger-strong));
-}
-
-.form-message--info {
-    background-color: var(--semantic-info-bg-strong, var(--color-info-soft));
-    border-color: var(--semantic-info-border-strong, var(--color-info));
-    color: var(--semantic-info-text-strong, var(--color-info-strong));
-}
-
-.form-message--success {
-    background-color: var(--semantic-success-bg-strong, var(--color-success-soft));
-    border-color: var(--semantic-success-border-strong, var(--color-success));
-    color: var(--semantic-success-text-strong, var(--color-success-strong));
-}
-
-.form-message--warning {
-    background-color: var(--semantic-warning-bg-strong, var(--color-warning-soft));
-    border-color: var(--semantic-warning-border-strong, var(--color-warning));
-    color: var(--semantic-warning-text-strong, var(--color-warning-strong));
-}
-
-/* ---------------------------------------------------------
-   19. FIELD-LEVEL STATE MESSAGES (below inputs)
---------------------------------------------------------- */
-
-.form-field-message {
-    font-size: var(--text-xs);
-    margin-top: var(--space-1);
-    display: flex;
-    align-items: center;
-    gap: var(--space-1);
-}
-
-.form-field-message--neutral {
-    color: var(--color-text-muted);
-}
-
-.form-field-message--error {
-    color: var(--semantic-error-text-strong, var(--color-danger-strong));
-}
-
-.form-field-message--warning {
-    color: var(--semantic-warning-text-strong, var(--color-warning-strong));
-}
-
-.form-field-message--info {
-    color: var(--semantic-info-text-strong, var(--color-info-strong));
-}
-
-.form-field-message--success {
-    color: var(--semantic-success-text-strong, var(--color-success-strong));
-}
-
-.form-field-message__icon {
-    width: 1rem;
-    height: 1rem;
-    stroke: currentColor;
-    fill: none;
-    flex-shrink: 0;
-}
-
-/* ---------------------------------------------------------
-   20. HORIZONTAL CHECKBOXES / RADIOS
---------------------------------------------------------- */
-
-.form-check-inline {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-2);
-    margin-right: var(--space-6);
-    cursor: pointer;
-}
-
-.form-check-group {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-1);
-    align-items: flex-start;
-}
-
-.form-check-group--horizontal {
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: var(--space-6);
-    align-items: center;
-}
-
-.form-check-group--horizontal .form-check {
-    margin-right: var(--space-6);
-    margin-bottom: var(--space-2);
-}
-
-/* -----------------------------------------------
-   21. FORM SECTION STATES
-   Add semantic state styling for entire sections.
-   Intended for wrapping form-row or form-grid.
------------------------------------------------- */
-
-.form-section--error {
-    padding: var(--space-3);
-    border-left: var(--border-width-strong) solid var(--semantic-error-border-strong, var(--color-danger));
-    background-color: transparent;
-    background-color: var(--semantic-error-bg-strong, transparent);
-}
-
-.form-section--warning {
-    padding: var(--space-3);
-    border-left: var(--border-width-strong) solid var(--semantic-warning-border-strong, var(--color-warning));
-    background-color: transparent;
-    background-color: var(--semantic-warning-bg-strong, transparent);
-}
-
-.form-section--success {
-    padding: var(--space-3);
-    border-left: var(--border-width-strong) solid var(--semantic-success-border-strong, var(--color-success));
-    background-color: transparent;
-    background-color: var(--semantic-success-bg-strong, transparent);
-}
-
-.form-section--info {
-    padding: var(--space-3);
-    border-left: var(--border-width-strong) solid var(--semantic-info-border-strong, var(--color-info));
-    background-color: transparent;
-    background-color: var(--semantic-info-bg-strong, transparent);
-}
-
-.form-section--error:not(:last-child),
-.form-section--warning:not(:last-child),
-.form-section--success:not(:last-child),
-.form-section--info:not(:last-child) {
-    margin-bottom: var(--space-4);
-}
-
-/* -----------------------------------------------
-   22. ARIA hooks for validation
------------------------------------------------- */
-
-.input[aria-invalid="true"],
-.select[aria-invalid="true"],
-.textarea[aria-invalid="true"] {
-    border-color: var(--color-danger);
-}
-
-.input[aria-invalid="true"]:focus-visible,
-.select[aria-invalid="true"]:focus-visible,
-.textarea[aria-invalid="true"]:focus-visible {
-    box-shadow: 0 0 0 var(--border-width-strong) var(--color-danger-soft);
-}
-
-/* ----------------------------------------------------------
-   23. Base form control primitive (UFAL)
-   ---------------------------------------------------------- */
-
-.form-control {
-    display: block;
-    width: 100%;
-    min-height: var(--control-min-height);
-
-    margin: 0;
-    box-sizing: border-box;
-}
-
-.form-control-wrapper {
-    position: relative;
-    width: 100%;
-    display: flex;
-    align-items: center;
-}
-
-.form-control-wrapper > .form-control {
-    flex: 1 1 auto;
-}
-
-/* ----------------------------------------------------------
-   23A. State modifiers
-   ---------------------------------------------------------- */
-
-.form-control--loading {
-    cursor: progress;
-    opacity: 0.55;
-    pointer-events: none;
-}
-
-.form-control--disabled {
-    opacity: 0.45;
-    pointer-events: none;
-}
-
-.form-control--readonly {
-    opacity: 0.75;
-    cursor: default;
-}
-
-.form-control--error {
-    box-shadow: 0 0 0 var(--border-width-strong) var(--color-danger);
-}
-
-.form-control--warning {
-    box-shadow: 0 0 0 var(--border-width-strong) var(--color-warning);
-}
-
-.form-control--success {
-    box-shadow: 0 0 0 var(--border-width-strong) var(--color-success);
-}
-
-.form-control--info {
-    box-shadow: 0 0 0 var(--border-width-strong) var(--color-info);
-}
-
-.form-control--password {
-    padding-right: calc(var(--space-8) + var(--space-2));
-}
-
-.form-control-wrapper[data-icon="right"] .form-control--password {
-    padding-right: calc(var(--space-8) + var(--space-2));
-}
-
-.form-control--password:focus {
-    border-color: var(--color-accent);
-}
-
-.form-control--password::-moz-placeholder {
-    color: var(--color-placeholder);
-}
-
-.form-control--password::placeholder {
-    color: var(--color-placeholder);
-}
-
-/* ----------------------------------------------------------
-   23B. Icon-inside-input patterns
-   ---------------------------------------------------------- */
-
-.form-control-wrapper[data-icon="left"] .form-control {
-    padding-left: calc(var(--space-7) + var(--space-2));
-}
-
-.form-control-wrapper[data-icon="left"] .form-control-icon {
-    position: absolute;
-    left: var(--space-2);
-    display: flex;
-    align-items: center;
-}
-
-.form-control-wrapper[data-icon="right"] .form-control {
-    padding-right: calc(var(--space-7) + var(--space-2));
-}
-
-.form-control-wrapper[data-icon="right"] .form-control-icon {
-    position: absolute;
-    right: var(--space-2);
-    display: flex;
-    align-items: center;
-}
-
-.form-control-icon {
-    font-size: var(--text-md);
-    color: var(--color-text-muted);
-    pointer-events: none;
-}
-
-/* ----------------------------------------------------------
-   23C. Loading overlay animation
-   ---------------------------------------------------------- */
-
-.form-control--loading::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    border-radius: inherit;
-    background: var(--color-surface-subtle);
-    animation: formControlLoading 1.5s ease-in-out infinite;
-}
-
-@keyframes formControlLoading {
-    0% {
-        opacity: .35;
-    }
-    50% {
-        opacity: .6;
-    }
-    100% {
-        opacity: .35;
-    }
-}
-
-/* ----------------------------------------------------------
-   23D. File upload primitives (UFAL)
-   ---------------------------------------------------------- */
-
-/* Base dashed file control (rarely exposed directly; internal primitive) */
-
-.form-control--file {
-    position: relative;
-    padding: var(--space-3);
-    border: var(--border-width) dashed var(--color-border-subtle);
-    border-radius: var(--radius-md);
-    background-color: var(--color-surface);
-    color: var(--color-text-muted);
-    cursor: pointer;
-    transition: border-color .2s, background-color .2s;
-}
-
-.form-control--file[type="file"] {
-    padding: 0;
-    border: none;
-    background: none;
-    position: static;
-    opacity: 1;
-}
-
-/* ----------------------------------------------------------
-   23E. UFAL Drop Surface (corrected)
-   ---------------------------------------------------------- */
-
-.form-control-file-surface {
-    position: relative; /* ★ FIX: contain absolute input */
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-    align-items: center;
-    justify-content: center;
-    padding: var(--space-6);
-
-    border: var(--border-width) dashed var(--color-border-subtle);
-    border-radius: var(--radius-md);
-    background-color: var(--color-surface);
-    cursor: pointer;
-
-    transition: border-color .2s, background-color .2s;
-}
-
-.form-control-file-surface input[type="file"] {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    opacity: 0;
-    cursor: pointer;
-}
-
-.form-control-file-surface:hover {
-    border-color: var(--color-border-strong);
-    background-color: var(--color-surface-subtle);
-}
-
-.form-control-file-surface--dragover {
-    border-color: var(--color-accent);
-    background-color: var(--color-accent-soft);
-}
-
-.form-control-file-surface--disabled {
-    opacity: .65;
-    cursor: not-allowed;
-}
-
-.form-control-file-surface--error {
-    border-color: var(--color-danger);
-    background-color: var(--color-danger-soft);
-}
-
-.form-control-file-surface--warning {
-    border-color: var(--color-warning);
-    background-color: var(--color-warning-soft);
-}
-
-.form-control-file-surface--success {
-    border-color: var(--color-success);
-    background-color: var(--color-success-soft);
-}
-
-.form-control-file-surface--info {
-    border-color: var(--color-info);
-    background-color: var(--color-info-soft);
-}
-
-/* ----------------------------------------------------------
-   23F. Inline “button-as-trigger” upload
-   ---------------------------------------------------------- */
-
-.file-upload-inline {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-2);
-}
-
-.file-upload-inline__input {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-}
-
-.file-upload-inline__label {
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-}
-
-/* ----------------------------------------------------------
-   23G. Shared inner patterns
-   ---------------------------------------------------------- */
-
-.file-upload,
-.file-upload * {
-    box-sizing: border-box;
-}
-
-.file-upload {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-    width: 100%;
-}
-
-/* Loading shimmer on drop surface */
-
-.form-control-file-surface.form-control--loading::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    border-radius: inherit;
-    background-image: linear-gradient(
-            90deg,
-            var(--color-muted-bg),
-            var(--color-surface),
-            var(--color-muted-bg)
-    );
-    background-size: 200% 100%;
-    animation: input-loading-shimmer 1.5s infinite;
-}
-
-.form-control-file-icon {
-    font-size: var(--text-lg);
-    color: var(--color-text-muted);
-}
-
-.form-control-file-label {
-    font-size: var(--text-sm);
-    color: var(--color-text);
-}
-
-.form-control-file-hint {
-    font-size: var(--text-xs);
-    color: var(--color-text-muted);
-}
-
-.slider--error:focus-visible,
-.input[aria-invalid="true"]:focus-visible,
-.select[aria-invalid="true"]:focus-visible,
-.textarea[aria-invalid="true"]:focus-visible,
-.form-control--error:focus-visible {
-    box-shadow: 0 0 0 var(--border-width-strong) var(--semantic-error-border-strong, var(--color-danger));
-}
-
-.checkbox:checked,
-.radio:checked,
-.switch:checked {
-    background-color: var(--accent-soft-surface, var(--color-accent-soft));
-    border-color: var(--accent-soft-border, var(--color-accent));
-    box-shadow: 0 0 0 1px transparent;
-    box-shadow: 0 0 0 1px var(--accent-soft-shadow, transparent);
-    color: var(--accent-soft-on, var(--color-on-accent));
-}
-
-.checkbox:checked::after,
-.radio:checked::after,
-.switch:checked::after {
-    background-color: var(--accent-soft-border, var(--color-accent));
-}
-
-.checkbox:checked:hover,
-.radio:checked:hover,
-.switch:checked:hover {
-    background-color: var(--accent-soft-surface-strong, var(--accent-soft-surface));
-    border-color: var(--accent-soft-border, var(--color-accent));
-}
-
-.checkbox:checked:disabled,
-.radio:checked:disabled,
-.switch:checked:disabled {
-    background-color: var(--color-surface-subtle);
-    border-color: var(--color-border-subtle);
-    opacity: 0.6;
-}
+.vds-form,[data-vds-form]{--form-flow-gap-xs:var(--space-1);--form-flow-textarea-min-height:5rem;--size-9:2.75rem;--size-10:3.00rem;--size-11:3.25rem;--control-min-height:var(--size-10);--control-height-md:40px}.vds-form .form--a .form-control,[data-vds-form] .form--a .form-control{--control-min-height:var(--size-11)}.vds-form .form--c .form-control,[data-vds-form] .form--c .form-control{--control-min-height:var(--size-9)}button,input,select,textarea{color:inherit;font-family:inherit;font-size:100%;line-height:inherit}input,select,textarea{background-clip:padding-box}input:focus,select:focus,textarea:focus{outline:none}.form--a .input,.form--a .select,.form--a .textarea{font-size:var(--text-md);padding:var(--space-4)}.form--a .form-check{font-size:var(--text-md)}.form--a .segmented__option{font-size:var(--text-md);padding:var(--space-3) var(--space-5)}.form--a .file-upload__control{padding:var(--space-5)}.form--c .input,.form--c .select,.form--c .textarea{font-size:var(--text-xs);padding:var(--space-2)}.form--c .form-check{font-size:var(--text-xs)}.form--c .segmented__option{font-size:var(--text-xs);padding:var(--space-1) var(--space-3)}.form--c .file-upload__control{padding:var(--space-3)}.form-field{display:flex;flex-direction:column;gap:var(--form-flow-gap-xs);width:100%}.form-field--disabled{opacity:.7;pointer-events:none}.form-label{color:var(--color-text);font-weight:500}.form-label--required:after{color:var(--color-danger);content:" *";font-weight:600}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button{-webkit-appearance:none;appearance:none}.form-label--sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.form-help{color:var(--color-text-muted)}.form-error,.form-help{font-size:var(--text-xs)}.form-error,.form-field--error .form-label{color:var(--color-danger)}.form-field--error .input,.form-field--error .input-group,.form-field--error .segmented,.form-field--error .select,.form-field--error .textarea{border-color:var(--color-danger)}.form-field--error .slider{box-shadow:0 0 0 var(--border-width-strong) var(--color-danger-soft)}.form-field--error .file-upload__control{background-color:var(--color-danger-soft);border-color:var(--color-danger)}.input{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text);padding:var(--space-3) var(--space-3);transition:border-color .2s,background-color .2s,box-shadow .2s;width:100%}.input:focus{border-color:var(--color-accent)}.input:focus-visible{border-color:var(--focus-ring-color);box-shadow:0 0 0 var(--border-width-strong) var(--focus-ring-color)}.input:hover{border-color:var(--color-border-strong)}.input--disabled,.input:disabled{background-color:var(--color-muted-bg);color:var(--color-text-muted);cursor:not-allowed}.input--readonly,.input[readonly]{background-color:var(--color-surface-subtle);border-style:dashed;color:var(--color-text-muted)}.input::-moz-placeholder{color:var(--color-placeholder);opacity:1}.input::placeholder{color:var(--color-placeholder);opacity:1}.input-icon{align-items:center;display:flex;position:relative;width:100%}.input-icon .input{width:100%}.input-icon--left .input{padding-left:var(--space-8)}.input-icon--both .input,.input-icon--right .input{padding-right:var(--space-8)}.input-icon--both .input{padding-left:var(--space-8)}.input-icon__icon{align-items:center;color:var(--color-text-muted);display:inline-flex;height:var(--icon-sm);justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:var(--icon-sm)}.input-icon--left .input-icon__icon{left:var(--space-3)}.input-icon--right .input-icon__icon{right:var(--space-3)}.textarea{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text);min-height:var(--form-flow-textarea-min-height);padding:var(--space-3);resize:vertical;transition:border-color .2s,background-color .2s,box-shadow .2s;width:100%}.textarea:focus{border-color:var(--color-accent)}.textarea:focus-visible{border-color:var(--focus-ring-color);box-shadow:0 0 0 var(--border-width-strong) var(--focus-ring-color)}.textarea:hover{border-color:var(--color-border-strong)}.textarea--disabled,.textarea:disabled{background-color:var(--color-muted-bg);color:var(--color-text-muted);cursor:not-allowed}.textarea--readonly,.textarea[readonly]{background-color:var(--color-surface-subtle);border-style:dashed;color:var(--color-text-muted)}.textarea::-moz-placeholder{color:var(--color-placeholder);opacity:1}.textarea::placeholder{color:var(--color-placeholder);opacity:1}.select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-surface);background-image:linear-gradient(45deg,transparent 50%,var(--color-text-muted) 50%),linear-gradient(135deg,var(--color-text-muted) 50%,transparent 50%);background-position:calc(100% - var(--space-3)),calc(100% - var(--space-2));background-repeat:no-repeat;background-size:.4rem .4rem;border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text);padding:var(--space-3) var(--space-4) var(--space-3) var(--space-3);padding-right:var(--space-6);position:relative;transition:border-color .2s,background-color .2s,box-shadow .2s;width:100%}.select:focus{border-color:var(--color-accent)}.select:focus-visible{border-color:var(--focus-ring-color);box-shadow:0 0 0 var(--border-width-strong) var(--focus-ring-color)}.select:hover{border-color:var(--color-border-strong)}.select--disabled,.select:disabled{background-color:var(--color-muted-bg);background-image:linear-gradient(45deg,transparent 50%,var(--color-text-muted) 50%),linear-gradient(135deg,var(--color-text-muted) 50%,transparent 50%);color:var(--color-text-muted);cursor:not-allowed}.form-check{align-items:center;cursor:pointer;display:flex;font-size:var(--text-sm);gap:var(--space-2);margin-bottom:var(--space-3)}.form-check-group .form-check:last-child{margin-bottom:0}.form-check--disabled{cursor:not-allowed;opacity:.7}.form-check input{cursor:pointer;height:1.15rem;width:1.15rem}.checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-sm);cursor:pointer;position:relative;transition:border-color .2s,background-color .2s,box-shadow .2s}.checkbox:hover{border-color:var(--color-border-strong)}.checkbox:focus-visible{box-shadow:0 0 0 var(--border-width-strong) var(--focus-ring-color);outline:none}.checkbox:checked{background-color:var(--color-accent-soft);border-color:var(--color-accent)}.checkbox:checked:after{background-color:var(--color-accent);content:"";height:.55rem;left:50%;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m3 8 4 4 6-8'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m3 8 4 4 6-8'/%3E%3C/svg%3E");-webkit-mask-size:cover;mask-size:cover;position:absolute;top:50%;transform:translate(-50%,-50%);width:.55rem}.checkbox:disabled{background-color:var(--color-muted-bg);border-color:var(--color-muted-border);cursor:not-allowed}.checkbox--error{border-color:var(--color-danger)}.checkbox--warning{border-color:var(--color-warning)}.checkbox--success{border-color:var(--color-success)}.checkbox--info{border-color:var(--color-info)}.radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:50%;cursor:pointer;position:relative;transition:border-color .2s,background-color .2s,box-shadow .2s}.radio:hover{border-color:var(--color-border-strong)}.radio:focus-visible{box-shadow:0 0 0 var(--border-width-strong) var(--focus-ring-color);outline:none}.radio:checked{background-color:var(--color-accent-soft);border-color:var(--color-accent)}.radio:checked:after{background-color:var(--color-accent);border-radius:50%;content:"";height:.55rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:.55rem}.radio:disabled{background-color:var(--color-muted-bg);border-color:var(--color-muted-border);cursor:not-allowed}.radio--error{border-color:var(--color-danger)}.radio--warning{border-color:var(--color-warning)}.radio--success{border-color:var(--color-success)}.radio--info{border-color:var(--color-info)}.switch{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:50%;cursor:pointer;height:1.15rem;position:relative;transition:border-color .2s,background-color .2s,box-shadow .2s;width:1.15rem}.switch:after{background-color:var(--color-accent);border-radius:50%;content:"";height:.55rem;left:22%;opacity:0;position:absolute;top:22%;transform:translate(-50%,-50%);width:.55rem}.switch:checked{background-color:var(--color-accent-strong);border:var(--border-width) solid var(--color-accent)}.switch:checked:after{background-color:var(--color-accent);opacity:1;transform:scale(1)}.switch:disabled{cursor:not-allowed;opacity:.5}.switch:focus-visible{box-shadow:0 0 0 var(--border-width-strong) var(--focus-ring-color);outline:none}.switch--error{background-color:var(--color-danger-soft)}.switch--warning{background-color:var(--color-warning-soft)}.switch--success{background-color:var(--color-success-soft)}.switch--info{background-color:var(--color-info-soft)}.switch--error:checked{background-color:var(--color-danger)}.switch--warning:checked{background-color:var(--color-warning)}.switch--success:checked{background-color:var(--color-success)}.switch--info:checked{background-color:var(--color-info)}.input-group{align-items:center;background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:flex;overflow:hidden}.input-group .input{border:none;box-shadow:none;flex:1}.input-group-addon{align-items:center;background-color:var(--color-surface);border-right:var(--border-width) solid var(--color-border-subtle);color:var(--color-text-muted);display:flex;padding:0 var(--space-3)}.input-group-addon+.input{padding-left:var(--space-2)}.input-group-icon{align-items:center;color:var(--color-text-muted);display:flex;padding:0 var(--space-3)}.input-group-icon .icon{height:var(--icon-sm);width:var(--icon-sm)}.input-group--error{border-color:var(--color-danger)}.input-group--warning{border-color:var(--color-warning)}.input-group--success{border-color:var(--color-success)}.input-group--info{border-color:var(--color-info)}.input-group--disabled{opacity:.7;pointer-events:none}.input-group:focus-within{border-color:var(--focus-ring-color);box-shadow:0 0 0 var(--border-width-strong) var(--focus-ring-color)}.input-group:hover{border-color:var(--color-border-strong)}.segmented{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:flex;height:2.5rem;height:var(--control-height-md,2.5rem);overflow:hidden;width:100%}.segmented__option{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-surface);border:none;color:var(--color-text-muted);cursor:pointer;display:inline-flex;flex:1 1 0;font:inherit;height:100%;justify-content:center;line-height:inherit;padding:var(--space-2) var(--space-4);text-align:center;transition:background-color .2s,color .2s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.segmented__option:not(:last-child){border-right:var(--border-width) solid var(--color-border-subtle)}.segmented__option:hover{background-color:var(--color-surface-subtle);color:var(--color-text)}.segmented__option:focus-visible{box-shadow:inset 0 0 0 var(--border-width-strong) var(--focus-ring-color);outline:none}.segmented__option--active{background-color:var(--color-accent);color:var(--color-on-accent);font-weight:600;position:relative;z-index:1}.segmented__option--active+.segmented__option{border-left-color:transparent}.segmented--disabled{opacity:.6;pointer-events:none}.segmented__option--disabled{cursor:not-allowed;opacity:.7}.segmented__option-icon{height:var(--icon-sm);margin-right:var(--space-2);width:var(--icon-sm)}.segmented--error{border-color:var(--color-danger)}.segmented--warning{border-color:var(--color-warning)}.segmented--success{border-color:var(--color-success)}.segmented--info{border-color:var(--color-info)}.segmented--loading .segmented__option{overflow:hidden;position:relative}.segmented--loading .segmented__option:after{animation:input-loading-shimmer 1.5s infinite;background-image:linear-gradient(90deg,var(--color-muted-bg),var(--color-surface),var(--color-muted-bg));background-size:200% 100%;bottom:0;content:"";left:0;position:absolute;right:0;top:0}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--slider-track-bg);border-radius:var(--radius-sm);cursor:pointer;height:var(--border-width-strong);width:100%}.slider:focus-visible{box-shadow:0 0 0 var(--border-width-strong) var(--focus-ring-color);outline:none}.slider:disabled{cursor:not-allowed;opacity:.7}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--slider-thumb-bg);border-radius:50%;cursor:pointer;height:1rem;width:1rem}.slider::-moz-range-thumb{background:var(--slider-thumb-bg);border-radius:50%;cursor:pointer;height:1rem;width:1rem}.slider--error{box-shadow:0 0 0 var(--border-width-strong) var(--color-danger-soft)}.slider--error:focus-visible{box-shadow:0 0 0 var(--border-width-strong) var(--color-danger);outline:none}.slider--warning{box-shadow:0 0 0 var(--border-width-strong) var(--color-warning-soft)}.slider--warning:focus-visible{box-shadow:0 0 0 var(--border-width-strong) var(--color-warning);outline:none}.slider--success{box-shadow:0 0 0 var(--border-width-strong) var(--color-success-soft)}.slider--success:focus-visible{box-shadow:0 0 0 var(--border-width-strong) var(--color-success);outline:none}.slider--info{box-shadow:0 0 0 var(--border-width-strong) var(--color-info-soft)}.slider--info:focus-visible{box-shadow:0 0 0 var(--border-width-strong) var(--color-info);outline:none}.file-upload input{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.file-upload__control{background-color:var(--color-surface);border:var(--border-width) dashed var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text-soft);cursor:pointer;padding:var(--space-4);text-align:center;transition:border-color .2s,background-color .2s,box-shadow .2s}.file-upload__control:hover{background-color:var(--color-surface-subtle);border-color:var(--color-border-strong)}.file-upload__control:focus-visible{box-shadow:0 0 0 var(--border-width-strong) var(--focus-ring-color);outline:none}.file-upload__control--dragover{background-color:var(--color-accent-soft);border-color:var(--color-accent)}.file-upload__control--disabled{cursor:not-allowed;opacity:.7}.file-upload__control--error{background-color:var(--color-danger-soft);border-color:var(--color-danger);color:var(--color-danger-strong)}.file-upload__control--warning{background-color:var(--color-warning-soft);border-color:var(--color-warning);color:var(--color-warning-strong)}.file-upload__control--success{background-color:var(--color-success-soft);border-color:var(--color-success);color:var(--color-success-strong)}.file-upload__control--info{background-color:var(--color-info-soft);border-color:var(--color-info);color:var(--color-info-strong)}.file-upload__control--loading{animation:input-loading-shimmer 1.5s infinite;background-image:linear-gradient(90deg,var(--color-muted-bg),var(--color-surface),var(--color-muted-bg));background-size:200% 100%}.form-row{display:flex;flex-wrap:wrap;gap:var(--space-4)}.form-row--two{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid,.form-row--two{grid-gap:var(--space-4);display:grid;gap:var(--space-4)}.form-grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid--three{grid-template-columns:repeat(3,minmax(0,1fr))}.form-grid--four{grid-template-columns:repeat(4,minmax(0,1fr))}@media (max-width:768px){.form-grid--four,.form-grid--three,.form-grid--two{grid-template-columns:1fr}}.input--error,.select--error,.textarea--error{border-color:var(--color-danger)}.input--error:focus-visible,.select--error:focus-visible,.textarea--error:focus-visible{box-shadow:0 0 0 var(--border-width-strong) var(--color-danger-soft)}.input--success,.select--success,.textarea--success{border-color:var(--color-success)}.input--success:focus-visible,.select--success:focus-visible,.textarea--success:focus-visible{box-shadow:0 0 0 var(--border-width-strong) var(--color-success-soft)}.input--warning,.select--warning,.textarea--warning{border-color:var(--color-warning)}.input--warning:focus-visible,.select--warning:focus-visible,.textarea--warning:focus-visible{box-shadow:0 0 0 var(--border-width-strong) var(--color-warning-soft)}.input--info,.select--info,.textarea--info{border-color:var(--color-info)}.input--info:focus-visible,.select--info:focus-visible,.textarea--info:focus-visible{box-shadow:0 0 0 var(--border-width-strong) var(--color-info-soft)}.form-meta{align-items:flex-start;display:flex;gap:var(--form-flow-gap-xs);justify-content:space-between;margin-top:var(--space-1)}.form-meta--stacked{align-items:flex-start;flex-direction:column}.form-meta--inline{align-items:center;flex-direction:row}.form-meta__messages{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}.form-counter{color:var(--color-text-muted);font-family:var(--font-family-mono),monospace;font-size:var(--text-xs);margin-left:auto;white-space:nowrap}.form-counter--warning{color:var(--color-warning)}.form-counter--danger,.form-field--error .form-counter{color:var(--color-danger)}.form-control-with-icon{display:inline-flex;position:relative;width:100%}.form-control-with-icon .input,.form-control-with-icon .select,.form-control-with-icon .textarea{padding-right:calc(var(--space-8) + var(--space-1));width:100%}.form-status-icon{align-items:center;color:var(--color-text-muted);display:inline-flex;height:var(--icon-sm);justify-content:center;pointer-events:none;position:absolute;right:var(--space-3);top:50%;transform:translateY(-50%);width:var(--icon-sm)}.form-field--error .form-status-icon{color:var(--color-danger)}.form-field--success .form-status-icon{color:var(--color-success)}.form-field--warning .form-status-icon{color:var(--color-warning)}.form-field--info .form-status-icon{color:var(--color-info)}.form-field--success .form-label{color:var(--color-success)}.form-field--success .input,.form-field--success .input-group,.form-field--success .select,.form-field--success .textarea{border-color:var(--color-success)}.form-field--warning .form-label{color:var(--color-warning)}.form-field--warning .input,.form-field--warning .input-group,.form-field--warning .select,.form-field--warning .textarea{border-color:var(--color-warning)}.form-field--info .form-label{color:var(--color-info)}.form-field--info .input,.form-field--info .input-group,.form-field--info .select,.form-field--info .textarea{border-color:var(--color-info)}.form-field--horizontal{grid-column-gap:var(--space-4);align-items:flex-start;-moz-column-gap:var(--space-4);column-gap:var(--space-4);display:grid;grid-template-columns:minmax(0,12rem) minmax(0,1fr)}.form-field__label{padding-top:var(--space-1)}.form-field__control{display:flex;flex-direction:column;gap:var(--form-flow-gap-xs)}@media (max-width:768px){.form-field--horizontal{grid-template-columns:1fr}.form-field__label{padding-top:0}}.input--loading,.select--loading,.textarea--loading{animation:input-loading-shimmer 1.5s infinite;background-image:linear-gradient(90deg,var(--color-muted-bg),var(--color-surface),var(--color-muted-bg));background-size:200% 100%}@keyframes input-loading-shimmer{0%{background-position:-150% 0}to{background-position:150% 0}}.modal .form-field{margin-bottom:var(--space-3)}.form-message{align-items:flex-start;background-color:var(--color-surface-subtle);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:flex;font-size:var(--text-sm);gap:var(--space-3);padding:var(--space-4) var(--space-6);width:100%}.form-message__icon{stroke:currentColor;fill:none;flex-shrink:0;height:1.25rem;width:1.25rem}.form-message__content{display:flex;flex-direction:column;gap:var(--space-1)}.form-message--neutral{background-color:var(--color-muted-bg);border-color:var(--color-muted-border);color:var(--color-text-muted)}.form-message--error{background-color:var(--semantic-error-bg-strong,var(--color-danger-soft));border-color:var(--semantic-error-border-strong,var(--color-danger));color:var(--semantic-error-text-strong,var(--color-danger-strong))}.form-message--info{background-color:var(--semantic-info-bg-strong,var(--color-info-soft));border-color:var(--semantic-info-border-strong,var(--color-info));color:var(--semantic-info-text-strong,var(--color-info-strong))}.form-message--success{background-color:var(--semantic-success-bg-strong,var(--color-success-soft));border-color:var(--semantic-success-border-strong,var(--color-success));color:var(--semantic-success-text-strong,var(--color-success-strong))}.form-message--warning{background-color:var(--semantic-warning-bg-strong,var(--color-warning-soft));border-color:var(--semantic-warning-border-strong,var(--color-warning));color:var(--semantic-warning-text-strong,var(--color-warning-strong))}.form-field-message{align-items:center;display:flex;font-size:var(--text-xs);gap:var(--space-1);margin-top:var(--space-1)}.form-field-message--neutral{color:var(--color-text-muted)}.form-field-message--error{color:var(--semantic-error-text-strong,var(--color-danger-strong))}.form-field-message--warning{color:var(--semantic-warning-text-strong,var(--color-warning-strong))}.form-field-message--info{color:var(--semantic-info-text-strong,var(--color-info-strong))}.form-field-message--success{color:var(--semantic-success-text-strong,var(--color-success-strong))}.form-field-message__icon{stroke:currentColor;fill:none;flex-shrink:0;height:1rem;width:1rem}.form-check-inline{align-items:center;cursor:pointer;display:inline-flex;gap:var(--space-2);margin-right:var(--space-6)}.form-check-group{align-items:flex-start;display:flex;flex-direction:column;gap:var(--space-1)}.form-check-group--horizontal{align-items:center;flex-direction:row;flex-wrap:wrap;gap:var(--space-6)}.form-check-group--horizontal .form-check{margin-bottom:var(--space-2);margin-right:var(--space-6)}.form-section--error{background-color:transparent;background-color:var(--semantic-error-bg-strong,transparent);border-left:var(--border-width-strong) solid var(--semantic-error-border-strong,var(--color-danger));padding:var(--space-3)}.form-section--warning{background-color:transparent;background-color:var(--semantic-warning-bg-strong,transparent);border-left:var(--border-width-strong) solid var(--semantic-warning-border-strong,var(--color-warning));padding:var(--space-3)}.form-section--success{background-color:transparent;background-color:var(--semantic-success-bg-strong,transparent);border-left:var(--border-width-strong) solid var(--semantic-success-border-strong,var(--color-success));padding:var(--space-3)}.form-section--info{background-color:transparent;background-color:var(--semantic-info-bg-strong,transparent);border-left:var(--border-width-strong) solid var(--semantic-info-border-strong,var(--color-info));padding:var(--space-3)}.form-section--error:not(:last-child),.form-section--info:not(:last-child),.form-section--success:not(:last-child),.form-section--warning:not(:last-child){margin-bottom:var(--space-4)}.input[aria-invalid=true],.select[aria-invalid=true],.textarea[aria-invalid=true]{border-color:var(--color-danger)}.input[aria-invalid=true]:focus-visible,.select[aria-invalid=true]:focus-visible,.textarea[aria-invalid=true]:focus-visible{box-shadow:0 0 0 var(--border-width-strong) var(--color-danger-soft)}.form-control{box-sizing:border-box;display:block;margin:0;min-height:var(--control-min-height);width:100%}.form-control-wrapper{align-items:center;display:flex;position:relative;width:100%}.form-control-wrapper>.form-control{flex:1 1 auto}.form-control--loading{cursor:progress;opacity:.55;pointer-events:none}.form-control--disabled{opacity:.45;pointer-events:none}.form-control--readonly{cursor:default;opacity:.75}.form-control--error{box-shadow:0 0 0 var(--border-width-strong) var(--color-danger)}.form-control--warning{box-shadow:0 0 0 var(--border-width-strong) var(--color-warning)}.form-control--success{box-shadow:0 0 0 var(--border-width-strong) var(--color-success)}.form-control--info{box-shadow:0 0 0 var(--border-width-strong) var(--color-info)}.form-control--password,.form-control-wrapper[data-icon=right] .form-control--password{padding-right:calc(var(--space-8) + var(--space-2))}.form-control--password:focus{border-color:var(--color-accent)}.form-control--password::-moz-placeholder{color:var(--color-placeholder)}.form-control--password::placeholder{color:var(--color-placeholder)}.form-control-wrapper[data-icon=left] .form-control{padding-left:calc(var(--space-7) + var(--space-2))}.form-control-wrapper[data-icon=left] .form-control-icon{align-items:center;display:flex;left:var(--space-2);position:absolute}.form-control-wrapper[data-icon=right] .form-control{padding-right:calc(var(--space-7) + var(--space-2))}.form-control-wrapper[data-icon=right] .form-control-icon{align-items:center;display:flex;position:absolute;right:var(--space-2)}.form-control-icon{color:var(--color-text-muted);font-size:var(--text-md);pointer-events:none}.form-control--loading:after{animation:formControlLoading 1.5s ease-in-out infinite;background:var(--color-surface-subtle);border-radius:inherit;bottom:0;content:"";left:0;position:absolute;right:0;top:0}@keyframes formControlLoading{0%{opacity:.35}50%{opacity:.6}to{opacity:.35}}.form-control--file{background-color:var(--color-surface);border:var(--border-width) dashed var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text-muted);cursor:pointer;padding:var(--space-3);position:relative;transition:border-color .2s,background-color .2s}.form-control--file[type=file]{background:none;border:none;opacity:1;padding:0;position:static}.form-control-file-surface{align-items:center;background-color:var(--color-surface);border:var(--border-width) dashed var(--color-border-subtle);border-radius:var(--radius-md);cursor:pointer;display:flex;flex-direction:column;gap:var(--space-2);justify-content:center;padding:var(--space-6);position:relative;transition:border-color .2s,background-color .2s}.form-control-file-surface input[type=file]{bottom:0;cursor:pointer;left:0;opacity:0;position:absolute;right:0;top:0}.form-control-file-surface:hover{background-color:var(--color-surface-subtle);border-color:var(--color-border-strong)}.form-control-file-surface--dragover{background-color:var(--color-accent-soft);border-color:var(--color-accent)}.form-control-file-surface--disabled{cursor:not-allowed;opacity:.65}.form-control-file-surface--error{background-color:var(--color-danger-soft);border-color:var(--color-danger)}.form-control-file-surface--warning{background-color:var(--color-warning-soft);border-color:var(--color-warning)}.form-control-file-surface--success{background-color:var(--color-success-soft);border-color:var(--color-success)}.form-control-file-surface--info{background-color:var(--color-info-soft);border-color:var(--color-info)}.file-upload-inline{align-items:center;display:inline-flex;gap:var(--space-2)}.file-upload-inline__input{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.file-upload-inline__label{align-items:center;cursor:pointer;display:inline-flex;justify-content:center}.file-upload,.file-upload *{box-sizing:border-box}.file-upload{display:flex;flex-direction:column;gap:var(--space-2);width:100%}.form-control-file-surface.form-control--loading:after{animation:input-loading-shimmer 1.5s infinite;background-image:linear-gradient(90deg,var(--color-muted-bg),var(--color-surface),var(--color-muted-bg));background-size:200% 100%;border-radius:inherit;bottom:0;content:"";left:0;position:absolute;right:0;top:0}.form-control-file-icon{color:var(--color-text-muted);font-size:var(--text-lg)}.form-control-file-label{color:var(--color-text);font-size:var(--text-sm)}.form-control-file-hint{color:var(--color-text-muted);font-size:var(--text-xs)}.form-control--error:focus-visible,.input[aria-invalid=true]:focus-visible,.select[aria-invalid=true]:focus-visible,.slider--error:focus-visible,.textarea[aria-invalid=true]:focus-visible{box-shadow:0 0 0 var(--border-width-strong) var(--semantic-error-border-strong,var(--color-danger))}.checkbox:checked,.radio:checked,.switch:checked{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-color:var(--accent-soft-border,var(--color-accent));box-shadow:0 0 0 1px transparent;box-shadow:0 0 0 1px var(--accent-soft-shadow,transparent);color:var(--accent-soft-on,var(--color-on-accent))}.checkbox:checked:after,.radio:checked:after,.switch:checked:after{background-color:var(--accent-soft-border,var(--color-accent))}.checkbox:checked:hover,.radio:checked:hover,.switch:checked:hover{background-color:var(--accent-soft-surface-strong,var(--accent-soft-surface));border-color:var(--accent-soft-border,var(--color-accent))}.checkbox:checked:disabled,.radio:checked:disabled,.switch:checked:disabled{background-color:var(--color-surface-subtle);border-color:var(--color-border-subtle);opacity:.6}