.msm-form-group { min-width: 0; margin-bottom: 14px; }

.msm-label {
    display: block;
    margin-bottom: 5px;
    color: var(--msm-color-text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.msm-input,
.msm-select,
.msm-textarea,
.msm-form-control {
    width: 100%;
    min-height: var(--msm-touch-target);
    padding: 10px 14px;
    border: 1px solid var(--msm-color-border);
    border-radius: var(--msm-radius);
    outline: none;
    background: var(--msm-color-surface-2);
    color: var(--msm-color-text);
    font: inherit;
    font-size: 16px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.msm-textarea { min-height: 96px; resize: vertical; }
.msm-input { padding: 8px 12px; font-size: 13.5px; }

.msm-input:hover,
.msm-select:hover,
.msm-textarea:hover,
.msm-form-control:hover { border-color: var(--msm-color-text-muted); }

.msm-input:focus,
.msm-select:focus,
.msm-textarea:focus,
.msm-form-control:focus {
    border-color: var(--msm-color-primary);
    box-shadow: var(--msm-focus-ring);
}

.msm-input:disabled,
.msm-select:disabled,
.msm-textarea:disabled,
.msm-form-control:disabled,
.msm-input[readonly],
.msm-textarea[readonly] {
    opacity: .55;
    cursor: not-allowed;
}

.msm-input::placeholder,
.msm-textarea::placeholder {
    color: var(--msm-color-text-muted);
    opacity: 1;
}

.msm-select option {
    background: var(--msm-color-surface-2);
    color: var(--msm-color-text);
}

.msm-is-invalid,
.msm-input.msm-is-invalid,
.msm-select.msm-is-invalid,
.msm-textarea.msm-is-invalid,
.msm-form-control.msm-is-invalid,
.msm-input[aria-invalid="true"],
.msm-select[aria-invalid="true"],
.msm-textarea[aria-invalid="true"] {
    border-color: var(--msm-color-danger) !important;
    box-shadow: 0 0 0 2px rgb(239 68 68 / .22) !important;
}

.msm-field-error,
.validation-message {
    display: block;
    margin-top: 4px;
    color: var(--msm-color-danger);
    font-size: 12px;
}

.msm-check,
.msm-radio {
    accent-color: var(--msm-color-primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
    vertical-align: middle;
}

.msm-check:focus-visible,
.msm-radio:focus-visible {
    outline: 2px solid var(--msm-color-primary);
    outline-offset: 2px;
}

.msm-file {
    padding: 6px 8px;
    color: var(--msm-color-text-muted);
    font-size: 13px;
}

.msm-file::file-selector-button {
    margin-right: 10px;
    padding: 6px 12px;
    border: 1px solid var(--msm-color-border);
    border-radius: var(--msm-radius-sm);
    background: var(--msm-color-surface);
    color: var(--msm-color-text);
    cursor: pointer;
    font-size: 13px;
    transition: background .15s ease;
}

.msm-file::file-selector-button:hover { background: var(--msm-color-surface-hover); }

@media (min-width: 700px) {
    .msm-input,
    .msm-select,
    .msm-textarea,
    .msm-form-control { font-size: 13.5px; }
}
