/* Shared form/table layer. Loaded after legacy styles and intentionally conservative. */
:root {
    --ui-control-height: 42px;
    --ui-radius: 12px;
    --ui-radius-sm: 9px;
    --ui-focus: color-mix(in srgb, var(--accent) 35%, transparent);
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.page-content :where(input, select, textarea, button, a):focus-visible {
    outline: 3px solid var(--ui-focus);
    outline-offset: 2px;
}

.page-content :where(input, select, textarea) {
    color: var(--text);
}

.page-content :where(input, select, textarea)::placeholder {
    color: var(--muted);
    opacity: .85;
}

.page-content .form-group :where(input, select, textarea) {
    min-height: var(--ui-control-height);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.page-content .form-group :where(input, select, textarea):focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--ui-focus);
    outline: 0;
}

.ui-table {
    border-collapse: separate;
    border-spacing: 0;
}

.ui-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--c-1);
    border-bottom-width: 2px;
    white-space: nowrap;
}

.ui-table tbody tr {
    transition: background-color .12s ease;
}

.ui-table tbody tr:hover {
    background: color-mix(in srgb, var(--accent) 4%, var(--c-1));
}

.ui-table td,
.ui-table th {
    line-height: 1.35;
}

.is-client-hidden {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}