/*
 * Saanraan public UI kit preview layout layer.
 * Owns /ui-kit preview containers, sample layout helpers, and preview-only states.
 */
/*
 * Public runtime UI-KIT preview layer.
 * Uses the public kit profile loaded by sr_stylesheet_tag().
 * Keeps only sample layout helpers local to this preview stylesheet.
 */

.community-ui-kit {
    display: grid;
    gap: calc(var(--spacing) * 5);
    margin-inline: auto;
    max-width: 1280px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 6) calc(var(--spacing) * 8);
}

@media (min-width: 64rem) {
    .community-ui-kit {
        padding-inline: calc(var(--spacing) * 8);
    }
}

.community-ui-kit-summary {
    margin-bottom: 0;
}

.community-ui-kit-summary .card-header {
    align-items: center;
}

.community-ui-kit-subtitle {
    margin: 0 0 calc(var(--spacing) * 4);
    color: var(--color-default-500);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
}

.community-ui-kit-samples {
    display: grid;
    gap: 0;
    padding: 0;
}

.community-ui-kit-section,
.ui-kit-sample-section {
    min-width: 0;
}

.community-ui-kit-section {
    scroll-margin-top: 1rem;
}

.community-ui-kit-section-title {
    margin: 0 0 calc(var(--spacing) * 3);
    color: var(--color-body-color);
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    font-weight: var(--font-weight-bold);
}



.community-ui-kit .table-list {
    background: transparent;
}

.community-ui-kit .table-list th,
.community-ui-kit .table-list td {
    border-inline-width: 0;
    border-top-width: 0;
    text-align: inherit;
    vertical-align: middle;
}

.community-ui-kit .table-list thead th {
    border-bottom: 1px solid var(--color-default-300);
}

.community-ui-kit .table-list tbody td {
    border-bottom: 1px solid var(--color-default-300);
}

.community-ui-kit .table-list tbody tr:last-child td {
    border-bottom-width: 0;
}

.ui-kit-preview-frame {
    border: 0;
    display: block;
    width: 100%;
}

.ui-kit-preview-frame-admin-form {
    min-height: 50rem;
}

.member-avatar-palette-item,
.member-avatar-preview-item {
    align-items: center;
    display: inline-flex;
    gap: calc(var(--spacing) * 2);
}

.member-avatar-palette-item {
    border: 1px solid var(--color-default-300);
    border-radius: var(--radius);
    padding: calc(var(--spacing) * 2);
}

.member-avatar-preview-text {
    display: grid;
    gap: calc(var(--spacing) * .5);
    min-width: 0;
}

.member-avatar-preview-text strong {
    color: var(--color-default-900);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
}

.member-avatar-preview-text code {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
}

/* UI-KIT sample layout helpers */
.ui-kit-grid { display: grid; }
.ui-kit-grid-1 { grid-template-columns: minmax(0, 1fr); }
.ui-kit-cluster { display: flex; }
.ui-kit-inline-cluster { display: inline-flex; }
.ui-kit-block-flow { display: block; }
.ui-kit-state-hidden { display: none !important; }
.ui-kit-align-items-center { align-items: center; }
.ui-kit-align-items-start { align-items: flex-start; }
.ui-kit-distribute-center { justify-content: center; }
.ui-kit-distribute-between { justify-content: space-between; }
.ui-kit-distribute-end { justify-content: flex-end; }
.ui-kit-stack-layout { flex-direction: column; }
.ui-kit-cluster-reverse { flex-direction: row-reverse; }
.ui-kit-wrap { flex-wrap: wrap; }
.ui-kit-flex-fill { flex: 1 1 0; }
.ui-kit-preserve-size { flex-shrink: 0; }
.ui-kit-position-context { position: relative; }
.ui-kit-position-absolute { position: absolute; }
.ui-kit-state-disabled-pointer { pointer-events: none; }
.ui-kit-state-transparent { opacity: 0; }
.ui-kit-position-top-0 { top: 0; }
.ui-kit-position-top-half { top: 50%; }
.ui-kit-position-right-3 { right: calc(var(--spacing) * 3); }
.ui-kit-position-right-9 { right: calc(var(--spacing) * 9); }
.ui-kit-position-top-2 { top: calc(var(--spacing) * 2); }
.ui-kit-position-top-neg-1 { top: calc(var(--spacing) * -1); }
.ui-kit-position-end-3 { inset-inline-end: calc(var(--spacing) * 3); }
.ui-kit-position-end-6 { inset-inline-end: calc(var(--spacing) * 6); }
.ui-kit-position-end-neg-1 { inset-inline-end: calc(var(--spacing) * -1); }
.ui-kit-position-start-0 { inset-inline-start: 0; }
.ui-kit-position-start-3 { inset-inline-start: calc(var(--spacing) * 3); }
.ui-kit-position-end-0 { inset-inline-end: 0; }
.ui-kit-position-block-0 { top: 0; bottom: 0; }
.ui-kit-center-y { transform: translateY(-50%); }
.ui-kit-origin-start-top { transform-origin: top left; }
.ui-kit-fill-width { width: 100%; }
.ui-kit-fill-width-sm { width: 100%; }
.ui-kit-fill-height { height: 100%; }
.ui-kit-width-11-25 { width: calc(var(--spacing) * 11.25); }
.ui-kit-action-width { width: 1%; }
.ui-kit-width-44 { width: calc(var(--spacing) * 44); }
.ui-kit-min-width-44 { min-width: calc(var(--spacing) * 44); }
.ui-kit-height-7-5 { height: calc(var(--spacing) * 7.5); }
.ui-kit-height-10 { height: calc(var(--spacing) * 10); }
.ui-kit-auto-height { height: auto !important; }
.ui-kit-icon-size-4 { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); }
.ui-kit-icon-size-5-5 { width: calc(var(--spacing) * 5.5); height: calc(var(--spacing) * 5.5); }
.ui-kit-icon-size-2-75 { width: calc(var(--spacing) * 2.75); height: calc(var(--spacing) * 2.75); }
.ui-kit-icon-size-3 { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); }
.ui-kit-icon-size-3-25 { width: calc(var(--spacing) * 3.25); height: calc(var(--spacing) * 3.25); }
.ui-kit-icon-size-3-5 { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); }
.ui-kit-icon-size-3-75 { width: calc(var(--spacing) * 3.75); height: calc(var(--spacing) * 3.75); }
.ui-kit-icon-size-4-25 { width: calc(var(--spacing) * 4.25); height: calc(var(--spacing) * 4.25); }
.ui-kit-icon-size-4-5 { width: calc(var(--spacing) * 4.5); height: calc(var(--spacing) * 4.5); }
.ui-kit-icon-size-5 { width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); }
.ui-kit-icon-size-6 { width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); }
.ui-kit-icon-size-6-25 { width: calc(var(--spacing) * 6.25); height: calc(var(--spacing) * 6.25); }
.ui-kit-icon-size-7 { width: calc(var(--spacing) * 7); height: calc(var(--spacing) * 7); }
.ui-kit-icon-size-7-5 { width: calc(var(--spacing) * 7.5); height: calc(var(--spacing) * 7.5); }
.ui-kit-icon-size-8 { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); }
.ui-kit-icon-size-8-75 { width: calc(var(--spacing) * 8.75); height: calc(var(--spacing) * 8.75); }
.ui-kit-icon-size-9 { width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 9); }
.ui-kit-icon-size-10-5 { width: calc(var(--spacing) * 10.5); height: calc(var(--spacing) * 10.5); }
.ui-kit-icon-size-11-25 { width: calc(var(--spacing) * 11.25); height: calc(var(--spacing) * 11.25); }
.ui-kit-icon-size-15 { width: calc(var(--spacing) * 15); height: calc(var(--spacing) * 15); }
.ui-kit-icon-size-20 { width: calc(var(--spacing) * 20); height: calc(var(--spacing) * 20); }
.ui-kit-text-start { text-align: start; }
.ui-kit-text-center { text-align: center; }
.ui-kit-text-end { text-align: end; }
.ui-kit-hidden { display: none !important; }
.ui-kit-text-nowrap { white-space: nowrap; }
.ui-kit-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-kit-list-disc { list-style: disc; }
.ui-kit-caption-below { caption-side: bottom; }
.ui-kit-radius-base { border-radius: var(--radius); }
.ui-kit-radius-md { border-radius: var(--radius-md); }
.ui-kit-radius-full { border-radius: 9999px; }
.ui-kit-radius-none { border-radius: 0; }
.ui-kit-radius-e-none { border-start-end-radius: 0; border-end-end-radius: 0; }
.ui-kit-radius-s-none { border-start-start-radius: 0; border-end-start-radius: 0; }
.ui-kit-radius-s-sm { border-start-start-radius: var(--radius-sm); border-end-start-radius: var(--radius-sm); }
.ui-kit-radius-e-sm { border-start-end-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm); }
.ui-kit-radius-t-sm { border-start-start-radius: var(--radius-sm); border-start-end-radius: var(--radius-sm); }
.ui-kit-radius-t-none { border-start-start-radius: 0; border-start-end-radius: 0; }
.ui-kit-radius-b-none { border-end-start-radius: 0; border-end-end-radius: 0; }
.ui-kit-radius-t-lg { border-start-start-radius: var(--radius-lg); border-start-end-radius: var(--radius-lg); }
.ui-kit-radius-s-md { border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); }
.ui-kit-frame { border: 1px solid var(--color-default-300); }
.ui-kit-divider-top { border-top: 1px solid var(--color-default-300); }
.ui-kit-divider-bottom { border-bottom: 1px solid var(--color-default-300); }
.ui-kit-divider-bottom-none { border-bottom-width: 0; }
.ui-kit-divider-bottom-strong { border-bottom-width: 2px; border-bottom-style: solid; }
.ui-kit-accent-line { border-inline-start-width: 3px; border-inline-start-style: solid; }
.ui-kit-divider-inline-none { border-inline-width: 0; }
.ui-kit-line-solid { border-width: 1px; border-style: solid; }
.ui-kit-line-default-300 { border-color: var(--color-default-300); }
.ui-kit-line-default-500 { border-color: var(--color-default-500); }
.ui-kit-line-default-600 { border-color: var(--color-default-600); }
.ui-kit-line-primary { border-color: var(--color-primary); }
.ui-kit-line-secondary-soft { border-color: color-mix(in oklab, var(--color-secondary) 20%, transparent); }
.ui-kit-line-success { border-color: var(--color-success); }
.ui-kit-line-success-soft { border-color: color-mix(in oklab, var(--color-success) 20%, transparent); }
.ui-kit-line-info { border-color: var(--color-info); }
.ui-kit-line-warning { border-color: var(--color-warning); }
.ui-kit-line-secondary { border-color: var(--color-secondary); }
.ui-kit-line-danger { border-color: var(--color-danger) !important; }
.ui-kit-line-dark { border-color: var(--color-dark); }
.ui-kit-line-light { border-color: var(--color-light); }
.ui-kit-line-white { border-color: var(--color-white); }
.ui-kit-line-transparent { border-color: transparent; }
.ui-kit-ink-inverse { color: var(--color-white); }
.ui-kit-children-inverse > * { color: var(--color-white); }
.ui-kit-ink-primary { color: var(--color-primary); }
.ui-kit-ink-secondary { color: var(--color-secondary); }
.ui-kit-ink-success { color: var(--color-success); }
.ui-kit-ink-info { color: var(--color-info); }
.ui-kit-ink-warning { color: var(--color-warning); }
.ui-kit-ink-danger { color: var(--color-danger); }
.ui-kit-ink-dark { color: var(--color-dark); }
.ui-kit-ink-light { color: var(--color-light); }
.ui-kit-ink-strong { color: var(--color-default-900); }
.ui-kit-ink-default-400 { color: var(--color-default-400); }
.ui-kit-ink-default-500 { color: var(--color-default-500); }
.ui-kit-ink-default-600 { color: var(--color-default-600); }
.ui-kit-ink-default-700 { color: var(--color-default-700); }
.ui-kit-ink-purple { color: var(--color-secondary); }
.ui-kit-ink-black { color: #000000; }
.ui-kit-ink-sky-700 { color: #0369a1; }
.ui-kit-hint { color: var(--color-default-600); }
.ui-kit-surface-primary { background-color: var(--color-primary); }
.ui-kit-surface-primary-soft { background-color: color-mix(in oklab, var(--color-primary) 15%, transparent); }
.ui-kit-surface-primary-muted { background-color: color-mix(in oklab, var(--color-primary) 90%, transparent); }
.ui-kit-surface-secondary { background-color: var(--color-secondary); }
.ui-kit-surface-secondary-soft { background-color: color-mix(in oklab, var(--color-secondary) 15%, transparent); }
.ui-kit-surface-success { background-color: var(--color-success); }
.ui-kit-surface-success-faint { background-color: color-mix(in oklab, var(--color-success) 10%, transparent); }
.ui-kit-surface-success-soft { background-color: color-mix(in oklab, var(--color-success) 15%, transparent); }
.ui-kit-surface-info { background-color: var(--color-info); }
.ui-kit-surface-info-faint { background-color: color-mix(in oklab, var(--color-info) 10%, transparent); }
.ui-kit-surface-info-soft { background-color: color-mix(in oklab, var(--color-info) 15%, transparent); }
.ui-kit-surface-warning { background-color: var(--color-warning); }
.ui-kit-surface-warning-faint { background-color: color-mix(in oklab, var(--color-warning) 10%, transparent); }
.ui-kit-surface-warning-soft { background-color: color-mix(in oklab, var(--color-warning) 15%, transparent); }
.ui-kit-surface-danger { background-color: var(--color-danger); }
.ui-kit-surface-danger-soft { background-color: color-mix(in oklab, var(--color-danger) 15%, transparent); }
.ui-kit-surface-dark { background-color: var(--color-dark); }
.ui-kit-surface-dark-soft { background-color: color-mix(in oklab, var(--color-dark) 15%, transparent); }
.ui-kit-surface-light { background-color: var(--color-light); }
.ui-kit-surface-light-faint { background-color: color-mix(in oklab, var(--color-light) 20%, transparent); }
.ui-kit-surface-light-soft { background-color: color-mix(in oklab, var(--color-light) 15%, transparent); }
.ui-kit-surface-light-muted { background-color: color-mix(in oklab, var(--color-light) 40%, transparent); }
.ui-kit-surface-white { background-color: var(--color-white); }
.ui-kit-surface-white-soft { background-color: color-mix(in oklab, var(--color-white) 25%, transparent); }
.ui-kit-surface-transparent { background-color: transparent !important; }
.alert {
    align-items: center;
    border: 1px solid color-mix(in oklab, currentColor 10%, transparent);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px color-mix(in oklab, currentColor 6%, transparent);
    display: flex;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--text-sm--line-height);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
}
.alert-block { display: block; }
.alert a { color: inherit; }
.alert-primary { background-color: color-mix(in oklab, var(--color-primary) 15%, transparent); color: var(--color-primary); }
.alert-secondary { background-color: color-mix(in oklab, var(--color-secondary) 15%, transparent); color: var(--color-secondary); }
.alert-success { background-color: color-mix(in oklab, var(--color-success) 15%, transparent); color: var(--color-success); }
.alert-danger { background-color: color-mix(in oklab, var(--color-danger) 15%, transparent); color: var(--color-danger); }
.alert-warning { background-color: color-mix(in oklab, var(--color-warning) 15%, transparent); color: var(--color-warning); }
.alert-info { background-color: color-mix(in oklab, var(--color-info) 15%, transparent); color: var(--color-info); }
.alert-light { background-color: var(--color-light); color: var(--color-default-700); }
.alert-dark { background-color: color-mix(in oklab, var(--color-dark) 10%, transparent); color: var(--color-dark); }
.alert-solid { border-color: color-mix(in oklab, currentColor 10%, transparent); color: var(--color-white); }
.alert-solid.alert-primary { background-color: var(--color-primary); color: var(--color-white); }
.alert-solid.alert-secondary { background-color: var(--color-secondary); color: var(--color-white); }
.alert-solid.alert-success { background-color: var(--color-success); color: var(--color-slate-950); }
.alert-solid.alert-danger { background-color: var(--color-danger); color: var(--color-white); }
.alert-solid.alert-warning { background-color: var(--color-warning); color: var(--color-white); }
.alert-solid.alert-info { background-color: var(--color-info); color: var(--color-white); }
.alert-solid.alert-light { background-color: var(--color-light); color: var(--color-default-900); }
.alert-solid.alert-dark { background-color: var(--color-dark); color: var(--color-white); }
.alert .alert-close-leading:is(.btn-ghost-default, .btn-ghost-light) { color: inherit; }
.alert-primary:where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *) { background-color: color-mix(in oklab, var(--color-primary) 18%, var(--color-card)); color: color-mix(in oklab, var(--color-primary) 84%, var(--color-white)); }
.alert-secondary:where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *) { background-color: color-mix(in oklab, var(--color-secondary) 18%, var(--color-card)); color: color-mix(in oklab, var(--color-secondary) 84%, var(--color-white)); }
.alert-success:where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *) { background-color: color-mix(in oklab, var(--color-success) 18%, var(--color-card)); color: color-mix(in oklab, var(--color-success) 84%, var(--color-white)); }
.alert-danger:where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *) { background-color: color-mix(in oklab, var(--color-danger) 18%, var(--color-card)); color: color-mix(in oklab, var(--color-danger) 84%, var(--color-white)); }
.alert-warning:where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *) { background-color: color-mix(in oklab, var(--color-warning) 18%, var(--color-card)); color: color-mix(in oklab, var(--color-warning) 84%, var(--color-white)); }
.alert-info:where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *) { background-color: color-mix(in oklab, var(--color-info) 18%, var(--color-card)); color: color-mix(in oklab, var(--color-info) 84%, var(--color-white)); }
.alert-light:where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *) { background-color: color-mix(in oklab, var(--color-default-600) 18%, var(--color-card)); color: color-mix(in oklab, var(--color-default-600) 84%, var(--color-white)); }
.alert-dark:where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *) { background-color: color-mix(in oklab, var(--color-default-700) 18%, var(--color-card)); color: color-mix(in oklab, var(--color-default-700) 84%, var(--color-white)); }
.alert:where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *) {
    border-color: color-mix(in oklab, currentColor 10%, transparent);
}
.alert-solid.alert-primary:where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *),
.alert-solid.alert-secondary:where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *),
.alert-solid.alert-danger:where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *),
.alert-solid.alert-info:where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *),
.alert-solid.alert-dark:where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *) {
    color: var(--color-white);
}
.alert-solid.alert-success:where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *),
.alert-solid.alert-warning:where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *),
.alert-solid.alert-light:where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *) {
    color: var(--color-slate-950);
}
.alert .ui-kit-hint:where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *) {
    color: var(--color-default-700);
}
.ui-kit-surface-default-100 { background-color: var(--color-default-100); }
.ui-kit-surface-default-200 { background-color: var(--color-default-200) !important; }
.ui-kit-surface-subtle { background-color: var(--color-default-100); }
.ui-kit-weight-medium { font-weight: var(--font-weight-medium); }
.ui-kit-weight-semibold { font-weight: var(--font-weight-semibold); }
.ui-kit-weight-bold { font-weight: var(--font-weight-bold); }
.ui-kit-type-xs { font-size: var(--text-xs); line-height: var(--text-xs--line-height); }
.ui-kit-type-sm { font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
.ui-kit-type-base { font-size: var(--text-base); line-height: var(--text-base--line-height); }
.ui-kit-type-md { font-size: var(--text-md); line-height: var(--text-md--line-height); }
.ui-kit-type-lg { font-size: var(--text-lg); line-height: var(--text-lg--line-height); }
.ui-kit-type-xl { font-size: var(--text-xl); line-height: var(--text-xl--line-height); }
.ui-kit-type-2xl { font-size: var(--text-2xl); line-height: var(--text-2xl--line-height); }
.ui-kit-typography-list {
    display: grid;
    gap: calc(var(--spacing) * 4);
}
.ui-kit-type-row {
    display: grid;
    gap: calc(var(--spacing) * 2);
    min-width: 0;
    padding-block-end: calc(var(--spacing) * 4);
    border-bottom: 1px solid var(--color-default-300);
}
.ui-kit-type-row:last-child {
    padding-block-end: 0;
    border-bottom: 0;
}
.ui-kit-type-label {
    color: var(--text-muted);
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line-height);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}
.ui-kit-type-row :is(p, code) {
    min-width: 0;
    overflow-wrap: anywhere;
}
.ui-kit-gap-1 { gap: calc(var(--spacing) * 1); }
.ui-kit-gap-1-5 { gap: calc(var(--spacing) * 1.5); }
.ui-kit-gap-2 { gap: calc(var(--spacing) * 2); }
.ui-kit-gap-2-5 { gap: calc(var(--spacing) * 2.5); }
.ui-kit-gap-3 { gap: calc(var(--spacing) * 3); }
.ui-kit-gap-4 { gap: calc(var(--spacing) * 4); }
.ui-kit-gap-9 { gap: calc(var(--spacing) * 9); }
.ui-kit-gap-x-4 { column-gap: calc(var(--spacing) * 4); }
.ui-kit-gap-base { gap: var(--spacing-base, 20px); }
.ui-kit-inline-space-2 > * + * { margin-inline-start: calc(var(--spacing) * 2); }
.ui-kit-inline-space-4 > * + * { margin-inline-start: calc(var(--spacing) * 4); }
.ui-kit-separate-x > * + * { border-inline-start-width: 1px; border-inline-start-style: solid; }
.ui-kit-separate-default-300 > * + * { border-color: var(--color-default-300); }
.ui-kit-stack-0-5 > * + * { margin-top: calc(var(--spacing) * .5); }
.ui-kit-stack-1 > * + * { margin-top: calc(var(--spacing) * 1); }
.ui-kit-stack-2 > * + * { margin-top: calc(var(--spacing) * 2); }
.ui-kit-stack-3 > * + * { margin-top: calc(var(--spacing) * 3); }
.ui-kit-stack-4 > * + * { margin-top: calc(var(--spacing) * 4); }
.ui-kit-stack-6 > * + * { margin-top: calc(var(--spacing) * 6); }
.ui-kit-space-after-0 { margin-bottom: 0 !important; }
.ui-kit-space-after-1-25 { margin-bottom: calc(var(--spacing) * 1.25); }
.ui-kit-space-after-2 { margin-bottom: calc(var(--spacing) * 2); }
.ui-kit-space-after-2-5 { margin-bottom: calc(var(--spacing) * 2.5); }
.ui-kit-space-after-3 { margin-bottom: calc(var(--spacing) * 3); }
.ui-kit-space-after-4, .ui-kit-space-after-base { margin-bottom: var(--spacing-base, 20px); }
.ui-kit-space-before-0-5 { margin-top: calc(var(--spacing) * .5); }
.ui-kit-space-before-0 { margin-top: 0; }
.ui-kit-space-before-1 { margin-top: calc(var(--spacing) * 1); }
.ui-kit-space-before-2 { margin-top: calc(var(--spacing) * 2); }
.ui-kit-space-before-3 { margin-top: calc(var(--spacing) * 3); }
.ui-kit-space-before-4 { margin-top: calc(var(--spacing) * 4); }
.ui-kit-space-before-5 { margin-top: calc(var(--spacing) * 5); }
.ui-kit-space-before-base { margin-top: var(--spacing-base, 20px); }
.ui-kit-space-after-5 { margin-bottom: calc(var(--spacing) * 5); }
.ui-kit-block-space-4 { margin-block: calc(var(--spacing) * 4); }
.ui-kit-block-space-base { margin-block: var(--spacing-base, 20px); }
.ui-kit-outer-space-3 { margin: calc(var(--spacing) * 3); }
.ui-kit-leading-auto { margin-inline-start: auto; }
.ui-kit-start-margin-2 { margin-inline-start: calc(var(--spacing) * 2); }
.ui-kit-pad-1 { padding: calc(var(--spacing) * 1) !important; }
.ui-kit-pad-2 { padding: calc(var(--spacing) * 2); }
.ui-kit-pad-4 { padding: calc(var(--spacing) * 4); }
.ui-kit-pad-5 { padding: calc(var(--spacing) * 5); }
.ui-kit-pad-6 { padding: calc(var(--spacing) * 6); }
.ui-kit-inline-pad-0-75 { padding-inline: calc(var(--spacing) * .75); }
.ui-kit-inline-pad-2-25 { padding-inline: calc(var(--spacing) * 2.25); }
.ui-kit-inline-pad-2 { padding-inline: calc(var(--spacing) * 2); }
.ui-kit-inline-pad-3 { padding-inline: calc(var(--spacing) * 3); }
.ui-kit-inline-pad-4 { padding-inline: calc(var(--spacing) * 4); }
.ui-kit-inline-pad-6 { padding-inline: calc(var(--spacing) * 6); }
.ui-kit-block-pad-2 { padding-block: calc(var(--spacing) * 2); }
.ui-kit-block-pad-0-5 { padding-block: calc(var(--spacing) * .5); }
.ui-kit-block-pad-3 { padding-block: calc(var(--spacing) * 3); }
.ui-kit-pad-after-0 { padding-bottom: 0; }
.ui-kit-end-pad-3 { padding-inline-end: calc(var(--spacing) * 3); }
.ui-kit-end-pad-10 { padding-inline-end: calc(var(--spacing) * 10); }
.ui-kit-start-pad-8 { padding-inline-start: calc(var(--spacing) * 8); }
.ui-kit-transition { transition-property: color, background-color, border-color, opacity, transform; transition-duration: .15s; }
.ui-kit-transition-all { transition-property: all; transition-duration: .15s; }
.ui-kit-transition-colors { transition-property: color, background-color, border-color; transition-duration: .15s; }
.ui-kit-duration-100 { transition-duration: .1s; }
.ui-kit-duration-300 { transition-duration: .3s; }
.ui-kit-duration-500 { transition-duration: .5s; }
.ui-kit-easing-in-out { transition-timing-function: var(--ease-in-out); }
.ui-kit-focus-plain:focus { outline: none; }
@media (hover: hover) {
    .ui-kit-hover-surface-primary:hover { background-color: var(--color-primary-hover); }
    .ui-kit-hover-surface-danger:hover { background-color: var(--color-danger-hover); }
    .ui-kit-hover-ink-primary:hover { color: var(--color-primary); }
    .ui-kit-hover-ink-default-700:hover { color: var(--color-default-700); }
}
.btn-choice-primary { --btn-choice-color: var(--color-primary); --btn-choice-hover-bg: color-mix(in oklab, var(--btn-choice-color) 12%, transparent); border-color: var(--btn-choice-color); color: var(--btn-choice-color); background-color: transparent; --btn-focus-color: var(--btn-choice-color); }
.btn-choice-secondary { --btn-choice-color: var(--color-secondary); --btn-choice-hover-bg: color-mix(in oklab, var(--btn-choice-color) 12%, transparent); border-color: var(--btn-choice-color); color: var(--btn-choice-color); background-color: transparent; --btn-focus-color: var(--btn-choice-color); }
.btn-choice-success { --btn-choice-color: var(--color-success); --btn-choice-hover-bg: color-mix(in oklab, var(--btn-choice-color) 12%, transparent); border-color: var(--btn-choice-color); color: var(--btn-choice-color); background-color: transparent; --btn-focus-color: var(--btn-choice-color); }
.btn-choice-danger { --btn-choice-color: var(--color-danger); --btn-choice-hover-bg: color-mix(in oklab, var(--btn-choice-color) 12%, transparent); border-color: var(--btn-choice-color); color: var(--btn-choice-color); background-color: transparent; --btn-focus-color: var(--btn-choice-color); }
.btn-choice-warning { --btn-choice-color: var(--color-warning); --btn-choice-hover-bg: color-mix(in oklab, var(--btn-choice-color) 12%, transparent); border-color: var(--btn-choice-color); color: var(--btn-choice-color); background-color: transparent; --btn-focus-color: var(--btn-choice-color); }
.btn-choice-info { --btn-choice-color: var(--color-info); --btn-choice-hover-bg: color-mix(in oklab, var(--btn-choice-color) 12%, transparent); border-color: var(--btn-choice-color); color: var(--btn-choice-color); background-color: transparent; --btn-focus-color: var(--btn-choice-color); }
.btn-choice-dark { --btn-choice-color: var(--color-dark); --btn-choice-hover-bg: color-mix(in oklab, var(--btn-choice-color) 12%, transparent); border-color: var(--btn-choice-color); color: var(--btn-choice-color); background-color: transparent; --btn-focus-color: var(--btn-choice-color); }
.btn-choice-light { --btn-choice-color: var(--color-default-600); --btn-choice-hover-bg: var(--color-default-100); border-color: var(--color-default-300); color: var(--color-default-700); background-color: var(--color-white); --btn-focus-color: var(--color-default-500); }
.btn-choice-light:where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *) { --btn-choice-hover-bg: var(--color-default-200); background-color: var(--color-default-100); border-color: var(--color-default-300); color: var(--color-default-700); }
.btn-group, .filtering-toggle-group { align-items: stretch; display: inline-flex; gap: 0; max-width: 100%; vertical-align: middle; }
.filtering-toggle-group { overflow-x: auto; }
.filtering-toggle-item { display: inline-flex; min-width: 0; }
.filtering-toggle-item > .btn { min-width: 0; }
[class*=btn-choice-]:is(.btn-group-middle, .btn-group-end) { border-inline-start-color: var(--btn-choice-border-color, var(--btn-choice-color, currentColor)); }
.btn-choice-light:is(.btn-group-middle, .btn-group-end) { --btn-choice-border-color: var(--color-default-300); }
@media (hover: hover) {
    [class*=btn-choice-]:hover { background-color: var(--btn-choice-hover-bg); color: var(--btn-choice-color); }
}
[class*=btn-choice-]:is(:focus, :focus-visible, :active) { background-color: var(--btn-choice-hover-bg); color: var(--btn-choice-color); }
input.form-choice-toggle-input[type=checkbox] + [class*=btn-choice-],
input.form-choice-toggle-input[type=radio] + [class*=btn-choice-] { align-items: center; gap: calc(var(--spacing) * 1.25); }
input.form-choice-toggle-input[type=checkbox] + [class*=btn-choice-]::before,
input.form-choice-toggle-input[type=radio] + [class*=btn-choice-]::before { align-items: center; background-color: color-mix(in oklab, currentColor 8%, transparent); border: 1.25px solid currentColor; box-sizing: border-box; content: ""; display: inline-flex; flex: 0 0 auto; height: .6875rem; justify-content: center; line-height: 1; opacity: .78; width: .6875rem; }
input.form-choice-toggle-input[type=checkbox] + [class*=btn-choice-]::before { border-radius: calc(var(--radius) * .35); font-size: .5625rem; font-weight: var(--font-weight-bold); }
input.form-choice-toggle-input[type=radio] + [class*=btn-choice-]::before { border-radius: 9999px; }
input.form-choice-toggle-input[type=checkbox]:checked + [class*=btn-choice-]::before { background-color: var(--color-white); border-color: var(--color-white); color: var(--btn-choice-color, var(--color-primary)); content: "✓"; opacity: 1; }
input.form-choice-toggle-input[type=radio]:checked + [class*=btn-choice-]::before { background: radial-gradient(circle at center, var(--btn-choice-color, var(--color-primary)) 0 32%, var(--color-white) 36% 100%); border-color: var(--color-white); opacity: 1; }
input.form-choice-toggle-input[type=checkbox]:checked + .btn-choice-light::before { color: var(--color-dark); }
input.form-choice-toggle-input[type=radio]:checked + .btn-choice-light::before { background: radial-gradient(circle at center, var(--color-dark) 0 32%, var(--color-white) 36% 100%); }
input.form-choice-toggle-input[type=checkbox]:checked + .btn-choice-light:where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *)::before { background-color: var(--color-slate-950); border-color: var(--color-slate-950); color: var(--color-white); }
input.form-choice-toggle-input[type=radio]:checked + .btn-choice-light:where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *)::before { background: radial-gradient(circle at center, var(--color-slate-950) 0 32%, var(--color-white) 36% 100%); border-color: var(--color-slate-950); }
input:checked + [class*=btn-choice-],
[class*=btn-choice-]:has(> .form-choice-toggle-input:checked),
[class*=btn-choice-].is-active,
[class*=btn-choice-][aria-pressed=true] { z-index: 2; background-color: var(--btn-choice-color, var(--color-primary)); border-color: var(--btn-choice-color, var(--color-primary)); color: var(--color-white); }
@media (hover: hover) {
    input:checked + [class*=btn-choice-]:hover,
    [class*=btn-choice-]:has(> .form-choice-toggle-input:checked):hover,
    [class*=btn-choice-].is-active:hover,
    [class*=btn-choice-][aria-pressed=true]:hover { background-color: var(--btn-choice-color, var(--color-primary)); color: var(--color-white); }
}
input:checked + [class*=btn-choice-]:is(:focus, :focus-visible, :active),
[class*=btn-choice-]:has(> .form-choice-toggle-input:checked):is(:focus, :focus-visible, :active),
[class*=btn-choice-].is-active:is(:focus, :focus-visible, :active),
[class*=btn-choice-][aria-pressed=true]:is(:focus, :focus-visible, :active) { background-color: var(--btn-choice-color, var(--color-primary)); color: var(--color-white); }
input:checked + .btn-choice-light,
.btn-choice-light:has(> .form-choice-toggle-input:checked),
.btn-choice-light.is-active,
.btn-choice-light[aria-pressed=true] { background-color: var(--color-dark); border-color: var(--color-dark); color: var(--color-white); }
@media (hover: hover) {
    input:checked + .btn-choice-light:hover,
    .btn-choice-light:has(> .form-choice-toggle-input:checked):hover,
    .btn-choice-light.is-active:hover,
    .btn-choice-light[aria-pressed=true]:hover { background-color: var(--color-dark); border-color: var(--color-dark); color: var(--color-white); }
}
input:checked + .btn-choice-light:is(:focus, :focus-visible, :active),
.btn-choice-light:has(> .form-choice-toggle-input:checked):is(:focus, :focus-visible, :active),
.btn-choice-light.is-active:is(:focus, :focus-visible, :active),
.btn-choice-light[aria-pressed=true]:is(:focus, :focus-visible, :active) { background-color: var(--color-dark); border-color: var(--color-dark); color: var(--color-white); }
input:checked + .btn-choice-light:where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *),
.btn-choice-light:has(> .form-choice-toggle-input:checked):where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *),
.btn-choice-light.is-active:where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *),
.btn-choice-light[aria-pressed=true]:where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *) { background-color: var(--color-white); border-color: var(--color-white); color: var(--color-slate-950); }
@media (hover: hover) {
    input:checked + .btn-choice-light:where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *):hover,
    .btn-choice-light:has(> .form-choice-toggle-input:checked):where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *):hover,
    .btn-choice-light.is-active:where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *):hover,
    .btn-choice-light[aria-pressed=true]:where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *):hover { background-color: var(--color-white); border-color: var(--color-white); color: var(--color-slate-950); }
}
input:checked + .btn-choice-light:where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *):is(:focus, :focus-visible, :active),
.btn-choice-light:has(> .form-choice-toggle-input:checked):where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *):is(:focus, :focus-visible, :active),
.btn-choice-light.is-active:where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *):is(:focus, :focus-visible, :active),
.btn-choice-light[aria-pressed=true]:where([data-theme=dark], [data-theme=dark] *, [data-color-scheme=dark], [data-color-scheme=dark] *):is(:focus, :focus-visible, :active) { background-color: var(--color-white); border-color: var(--color-white); color: var(--color-slate-950); }
input:focus-visible + [class*=btn-choice-],
[class*=btn-choice-]:has(> .form-choice-toggle-input:focus-visible) { z-index: 3; box-shadow: 0 0 0 3px color-mix(in oklab, var(--btn-choice-color, var(--color-primary)) 14%, transparent); }
.form-checkbox:focus-visible,
.form-radio:focus-visible,
.form-switch:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--form-choice-color, var(--color-primary)) 12%, transparent); }
.form-checkbox:checked { border-color: var(--form-choice-color, var(--color-primary)); background-color: var(--form-choice-color, var(--color-primary)); }
.form-checkbox.form-choice-outline:checked { background-color: var(--color-card); background-image: none; border-color: var(--form-choice-color, var(--color-primary)); color: var(--form-choice-color, var(--color-primary)); }
.form-checkbox.form-choice-outline:checked::before { background-color: currentColor; content: ""; height: .625rem; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 5l3 3 7-7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 5l3 3 7-7'/%3E%3C/svg%3E") center / contain no-repeat; width: .625rem; }
.form-radio:checked { border-color: var(--form-choice-color, var(--color-primary)); background-color: var(--form-choice-color, var(--color-primary)); }
.form-switch { --form-switch-width: 2.75rem; --form-switch-height: 1.5rem; --form-switch-thumb: 1rem; --form-switch-pad: .1875rem; appearance: none; width: var(--form-switch-width); height: var(--form-switch-height); flex: 0 0 auto; vertical-align: middle; border: 1px solid var(--color-default-400); border-radius: 999px; background-color: var(--color-default-300); background-image: radial-gradient(circle, var(--color-white) 0 calc(var(--form-switch-thumb) / 2), transparent calc(var(--form-switch-thumb) / 2 + 1px)); background-position: left var(--form-switch-pad) center; background-repeat: no-repeat; background-size: var(--form-switch-thumb) var(--form-switch-thumb); transition: background-color .15s, background-position .15s, border-color .15s; }
.form-switch:checked { border-color: var(--form-choice-color, var(--color-primary)); background-color: var(--form-choice-color, var(--color-primary)); background-position: right var(--form-switch-pad) center; }
.form-switch:disabled { cursor: not-allowed; opacity: .5; }
.form-switch-lg { --form-switch-width: 3.25rem; --form-switch-height: 1.75rem; --form-switch-thumb: 1.25rem; --form-switch-pad: .1875rem; }
.form-choice-md { width: 1.25rem; height: 1.25rem; }
.form-choice-lg { width: 1.5625rem; height: 1.5625rem; }
.form-choice-primary { --form-choice-color: var(--color-primary); }
.form-choice-secondary { --form-choice-color: var(--color-secondary); }
.form-choice-success { --form-choice-color: var(--color-success); }
.form-choice-info { --form-choice-color: var(--color-info); }
.form-choice-warning { --form-choice-color: var(--color-warning); }
.form-choice-danger { --form-choice-color: var(--color-danger); }
.form-choice-dark { --form-choice-color: var(--color-dark); }
.form-choice-light { --form-choice-color: var(--color-choice-light-active, #718cb0); }
.form-switch-light { --form-choice-color: var(--color-choice-light-active, #718cb0); }
.form-choice-muted { background-color: var(--color-default-200); }
.form-choice-invalid { border-color: var(--color-danger) !important; --form-choice-color: var(--color-danger); }
.form-range {
    appearance: none;
    width: 100%;
    height: calc(var(--spacing) * 9.25);
    padding: 0;
    background: transparent;
    accent-color: var(--color-primary);
    cursor: pointer;
}
.form-range:focus { outline: none; }
.form-range:disabled {
    cursor: not-allowed;
    opacity: .5;
}
.form-range::-webkit-slider-runnable-track {
    height: .375rem;
    background-color: var(--color-default-100);
    border-radius: 999px;
}
.form-range::-webkit-slider-thumb {
    appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: -.375rem;
    border: 0;
    border-radius: 999px;
    background-color: var(--color-primary);
    box-shadow: none;
}
.form-range:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 14%, transparent);
}
.form-range::-moz-range-track {
    height: .375rem;
    background-color: var(--color-default-100);
    border-radius: 999px;
}
.form-range::-moz-range-thumb {
    width: 1.125rem;
    height: 1.125rem;
    border: 0;
    border-radius: 999px;
    background-color: var(--color-primary);
    box-shadow: none;
}
.form-range:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 14%, transparent);
}
.input-group {
    width: 100%;
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
}
.input-group > * { min-width: 0; }
.input-group > :not(:first-child) { margin-inline-start: -1px; }
.input-group > .form-input,
.input-group > .form-select,
.input-group > .form-textarea,
.input-group > input:not([type="checkbox"]):not([type="radio"]),
.input-group > select,
.input-group > textarea {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    width: 1%;
    border-color: var(--color-default-300);
}
.input-group > .form-textarea,
.input-group > textarea { min-height: calc(var(--spacing) * 14); }
.input-group > .form-input:focus,
.input-group > .form-select:focus,
.input-group > .form-textarea:focus,
.input-group > input:not([type="checkbox"]):not([type="radio"]):focus,
.input-group > select:focus,
.input-group > textarea:focus { z-index: 3; }
.input-group-text {
    min-height: calc(var(--spacing) * 9.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: 0;
    color: var(--color-default-600);
    background-color: var(--color-default-100);
    border: 1px solid var(--color-default-300);
    line-height: inherit;
    white-space: nowrap;
}
.input-group > .btn {
    z-index: 2;
    flex: 0 0 auto;
    min-height: calc(var(--spacing) * 9.25);
    border-color: var(--color-default-300);
    border-radius: 0;
}
.input-group > .dropdown {
    z-index: 2;
    display: flex;
    flex: 0 0 auto;
}
.input-group > .dropdown > .btn {
    min-height: calc(var(--spacing) * 9.25);
    border-color: var(--color-default-300);
    border-radius: 0;
}
.input-group > :first-child {
    border-start-start-radius: var(--radius);
    border-end-start-radius: var(--radius);
}
.input-group > :last-child {
    border-start-end-radius: var(--radius);
    border-end-end-radius: var(--radius);
}
.input-group > :not(:first-child) {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}
.input-group > :not(:last-child) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}
.input-group > .dropdown:first-child > .btn {
    border-start-start-radius: var(--radius);
    border-end-start-radius: var(--radius);
}
.input-group > .dropdown:not(:first-child) > .btn {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}
.input-group > .dropdown:not(:last-child) > .btn {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}
.input-group > .dropdown:last-child > .btn {
    border-start-end-radius: var(--radius);
    border-end-end-radius: var(--radius);
}
.ui-kit-row-odd-default:nth-child(odd) { background-color: var(--color-default-100); }
.ui-kit-disabled-pointer-lock:disabled { pointer-events: none; }
.ui-kit-disabled-dim:disabled { opacity: .5; }
.ui-kit-children-ink-inverse > * { color: var(--color-white) !important; }
.ui-kit-disabled-cursor { cursor: not-allowed; }
.ui-kit-group { position: relative; }
.ui-kit-fill-primary-soft { fill: color-mix(in oklab, var(--color-primary) 15%, transparent); }
.ui-kit-fill-secondary-soft { fill: color-mix(in oklab, var(--color-secondary) 15%, transparent); }
.ui-kit-fill-success-soft { fill: color-mix(in oklab, var(--color-success) 15%, transparent); }
.ui-kit-fill-info-soft { fill: color-mix(in oklab, var(--color-info) 15%, transparent); }
.ui-kit-fill-warning-soft { fill: color-mix(in oklab, var(--color-warning) 15%, transparent); }
.ui-kit-fill-danger-soft { fill: color-mix(in oklab, var(--color-danger) 15%, transparent); }
.ui-kit-fill-dark-soft { fill: color-mix(in oklab, var(--color-dark) 15%, transparent); }
.ui-kit-fill-light-soft { fill: color-mix(in oklab, var(--color-light) 15%, transparent); }
.ui-kit-fill-purple-soft { fill: color-mix(in oklab, var(--color-secondary) 15%, transparent); }
.ui-kit-fill-xx { fill: currentColor; }
.password-active-show { display: none; }
.password-active .password-active-hide { display: none; }
.password-active .password-active-show { display: block; }
.ui-kit-removing-shift.removing { transform: translateX(calc(var(--spacing) * 5)); }
.ui-kit-removing-fade.removing { opacity: 0; }
.form-floating-control {
    display: block;
    width: 100%;
    padding: calc(var(--spacing) * 4);
    color: var(--color-body-color);
    background-color: var(--color-default-100);
    border: 1px solid var(--color-default-500);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
}
.form-floating-control::placeholder { color: transparent; }
.form-floating-control:focus,
.form-floating-control:not(:placeholder-shown) {
    padding-top: calc(var(--spacing) * 6);
    padding-bottom: calc(var(--spacing) * 2);
    border-color: var(--color-default-500);
    outline: none;
}
.form-floating-label {
    pointer-events: none;
    position: absolute;
    inset-inline-start: calc(var(--spacing) * 3);
    top: calc(var(--spacing) * 3.5);
    color: var(--color-default-400);
    transition: all .1s ease-in-out;
    transform-origin: top left;
}
.form-floating-control:focus + .form-floating-label,
.form-floating-control:not(:placeholder-shown) + .form-floating-label {
    top: calc(var(--spacing) * 1.5);
    color: var(--color-default-500);
    font-size: var(--text-xs);
}

.ui-kit-column-1 { grid-column: span 1 / span 1; }
.ui-kit-column-2 { grid-column: span 2 / span 2; }

@media (min-width: 48rem) {
    .ui-kit-show-md { display: block; }
    .ui-kit-hide-md { display: none; }
    .ui-kit-cluster-md { display: flex; }
    .ui-kit-grid-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-kit-grid-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ui-kit-grid-md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ui-kit-grid-md-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .ui-kit-column-md-2 { grid-column: span 2 / span 2; }
    .ui-kit-column-md-3 { grid-column: span 3 / span 3; }
    .ui-kit-column-md-4 { grid-column: span 4 / span 4; }
    .ui-kit-column-md-6 { grid-column: span 6 / span 6; }
    .ui-kit-column-md-12 { grid-column: span 12 / span 12; }
    .ui-kit-gap-md-0 { gap: 0; }
    .ui-kit-align-items-md-center { align-items: center; }
    .ui-kit-distribute-md-between { justify-content: space-between; }
    .ui-kit-distribute-md-end { justify-content: flex-end; }
    .ui-kit-width-md-80 { width: calc(var(--spacing) * 80); }
    .ui-kit-radius-md-none { border-radius: 0; }
    .ui-kit-radius-md-s-sm { border-start-start-radius: var(--radius-sm); border-end-start-radius: var(--radius-sm); }
    .ui-kit-radius-md-e-sm { border-start-end-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm); }
    .ui-kit-radius-md-s-none { border-start-start-radius: 0; border-end-start-radius: 0; }
    .ui-kit-radius-md-e-none { border-start-end-radius: 0; border-end-end-radius: 0; }
    .ui-kit-radius-md-xl { border-radius: var(--radius-xl); }
    .ui-kit-line-md { border: 1px solid var(--color-default-300); }
    .ui-kit-end-pad-md-2 { padding-inline-end: calc(var(--spacing) * 2); }
    .ui-kit-inline-margin-md-auto { margin-inline: auto; }
    .ui-kit-space-before-md-0 { margin-top: 0; }
    .ui-kit-auto-height-md { height: auto; }
    .ui-kit-max-height-md-none { max-height: none; }
    .ui-kit-max-width-md-lg { max-width: var(--container-lg); }
    .ui-kit-shadow-md-subtle { box-shadow: var(--shadow-sm); }
}
@media (min-width: 40rem) {
    .ui-kit-inline-margin-sm-auto { margin-inline: auto; }
    .ui-kit-space-before-sm-0 { margin-top: 0; }
    .ui-kit-auto-height-sm { height: auto; }
    .ui-kit-max-height-sm-none { max-height: none; }
    .ui-kit-max-width-sm-lg { max-width: var(--container-lg); }
}
@media (min-width: 64rem) {
    .ui-kit-grid-lg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-kit-grid-lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ui-kit-column-lg-2 { grid-column: span 2 / span 2; }
    .ui-kit-gap-lg-9 { gap: calc(var(--spacing) * 9); }
    .ui-kit-gap-lg-base { gap: var(--spacing-base, 20px); }
    .ui-kit-nowrap-lg { flex-wrap: nowrap; }
    .ui-kit-distribute-lg-start { justify-content: flex-start; }
    .ui-kit-width-lg-half { width: 50%; }
    .ui-kit-end-pad-lg-7-5 { padding-inline-end: calc(var(--spacing) * 7.5); }
    .ui-kit-inline-margin-lg-auto { margin-inline: auto; }
    .ui-kit-space-before-lg-0 { margin-top: 0; }
    .ui-kit-auto-height-lg { height: auto; }
    .ui-kit-max-height-lg-none { max-height: none; }
    .ui-kit-max-width-lg-lg { max-width: var(--container-lg); }
    .ui-kit-radius-lg-xl { border-radius: var(--radius-xl); }
    .ui-kit-line-lg { border: 1px solid var(--color-default-300); }
    .ui-kit-shadow-lg-subtle { box-shadow: var(--shadow-sm); }
}
@media (min-width: 80rem) {
    .ui-kit-grid-xl-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-kit-grid-xl-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ui-kit-grid-xl-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ui-kit-column-xl-2 { grid-column: span 2 / span 2; }
    .ui-kit-inline-margin-xl-auto { margin-inline: auto; }
    .ui-kit-space-before-xl-0 { margin-top: 0; }
    .ui-kit-auto-height-xl { height: auto; }
    .ui-kit-max-height-xl-none { max-height: none; }
    .ui-kit-max-width-xl-lg { max-width: var(--container-lg); }
    .ui-kit-max-width-xl-xl { max-width: var(--container-xl); }
    .ui-kit-radius-xl-xl { border-radius: var(--radius-xl); }
    .ui-kit-line-xl { border: 1px solid var(--color-default-300); }
    .ui-kit-shadow-xl-subtle { box-shadow: var(--shadow-sm); }
}
:where(.overlay.overlay-open, .overlay.open) :is(.ui-kit-modal-open-sm-mt, .ui-kit-modal-open-md-mt, .ui-kit-modal-open-lg-mt, .ui-kit-modal-open-xl-mt) {
    margin-top: calc(var(--spacing) * 10);
}

.ui-kit-theme-toggle {
    min-width: 110px;
}

.ui-kit-sidebar-toggle {
    display: none;
    margin-right: 0.75rem;
    color: var(--ui-body-color);
}

.ui-kit-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 95;
}

.ui-kit-page-no-sidebar .ui-kit-sidebar,
.ui-kit-page-no-sidebar .ui-kit-sidebar-backdrop,
.ui-kit-page-no-sidebar .ui-kit-sidebar-toggle {
    display: none;
}

.ui-kit-page-no-sidebar .ui-kit-main-content {
    margin-left: 0;
}






/* README markdown readability */
#readme-content {
    color: #374151;
    line-height: 1.8;
}

#readme-content :is(h1, h2, h3, h4, h5, h6) {
    color: #111827;
    margin-top: 1.4em;
    margin-bottom: 0.6em;
    line-height: 1.35;
}

#readme-content :is(p, li, blockquote, td, th) {
    color: #374151;
}

#readme-content a {
    color: #1d4ed8;
    text-decoration: underline;
}

#readme-content code {
    background: #e5e7eb;
    color: #1f2937;
    border-radius: 4px;
    padding: 0.15em 0.4em;
}

#readme-content pre {
    background: #111827;
    color: #e5e7eb;
    border: 1px solid #374151;
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
}

#readme-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

#readme-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

#readme-content th,
#readme-content td {
    border: 1px solid #d1d5db;
    padding: 0.6rem 0.7rem;
}

[data-theme='dark'] #readme-content {
    color: #d1d5db;
}

[data-theme='dark'] #readme-content :is(h1, h2, h3, h4, h5, h6) {
    color: #f3f4f6;
}

[data-theme='dark'] #readme-content :is(p, li, blockquote, td, th) {
    color: #d1d5db;
}

[data-theme='dark'] #readme-content a {
    color: #93c5fd;
}

[data-theme='dark'] #readme-content code {
    background: #374151;
    color: #e5e7eb;
}

[data-theme='dark'] #readme-content pre {
    background: #0f172a;
    color: #e5e7eb;
    border-color: #475569;
}

[data-theme='dark'] #readme-content th,
[data-theme='dark'] #readme-content td {
    border-color: #475569;
}

[data-theme='dark'] #readme-content :is(strong, b) {
    color: #f8fafc !important;
}

[data-theme='dark'] #readme-content :is(span, em) {
    color: inherit;
}

[data-theme='dark'] #readme-content li::marker {
    color: #94a3b8;
}

[data-theme='dark'] .ui-kit-title {
    color: #ffffff;
}

@media (max-width: 1024px) {
    .ui-kit-sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    .ui-kit-sidebar.is-open {
        transform: translateX(0);
    }

    .ui-kit-sidebar-backdrop.is-open {
        opacity: 1;
        visibility: visible;
    }

    .ui-kit-main-content {
        margin-left: 0;
    }

    .ui-kit-top-navbar {
        padding: 0 1rem;
    }

    .ui-kit-sample-body {
        padding: 1rem;
    }

    .ui-kit-sidebar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body.ui-kit-sidebar-open {
        overflow: hidden;
    }
}

/* Modal overlay tweaks */
.overlay {
    z-index: var(--admin-z-overlay, 5000) !important;
}

.overlay.size-full {
    background-color: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}

/* Dropdown visibility fallback */
.ui-kit-sample-body .dropdown-menu {
    display: none;
    opacity: 0;
    visibility: hidden;
    position: fixed;
    left: 0;
    top: 0;
    margin-top: 0;
}

.ui-kit-sample-body :where(.dropdown.dropdown-open, .dropdown.open) > .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.ui-kit-sample-body .dropdown-menu-profile-preview {
    display: block !important;
    left: auto !important;
    margin-top: 0;
    opacity: 1 !important;
    position: static !important;
    top: auto !important;
    visibility: visible !important;
}

/* Semantic sample states */
.filtering { align-items: end; background-color: var(--color-default-50); border: 1px solid var(--color-default-200); border-radius: var(--radius); display: flex; gap: calc(var(--spacing) * 3); margin: 0; padding: calc(var(--spacing) * 4); }
.filtering-fields { align-items: start; display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: calc(var(--spacing) * 3); min-width: 0; }
.filtering-field { display: grid; gap: calc(var(--spacing) * 2.25); min-inline-size: 0; min-width: 0; width: fit-content; }
.filtering-field-fill { flex: 1 1 18rem; width: auto; }
.filtering-field > :is(.form-label, .filtering-label) { color: var(--text-muted); display: block; font-size: var(--type-meta-size); font-weight: var(--font-weight-medium); line-height: var(--type-meta-line-height); margin: 0; min-width: 0; padding: 0; }
.filtering-field > :is(.form-input, .form-textarea, .filtering-input) { max-width: 100%; width: min(16rem, 100vw); }
.filtering-plain > .filtering-fields > .filtering-field:has(:is(input[name=q], textarea[name=q])) { width: 100%; }
.filtering-plain > .filtering-fields > .filtering-field:has(:is(input[name=q], textarea[name=q])) > :is(.form-input, .form-textarea, .filtering-input) { width: 100%; }
.filtering-field-fill > :is(.form-input, .form-textarea, .filtering-input) { width: 100%; }
.filtering-field > :is(.form-select) { max-width: min(16rem, 100%); width: max-content; }
.filtering-actions { align-items: end; display: flex; gap: calc(var(--spacing) * 3); margin-inline-start: auto; }
.filtering-plain { flex-wrap: wrap; }
.filtering-plain > .filtering-fields { flex: 1 1 auto; min-width: 0; width: 100%; }
.filtering-plain > .filtering-header, .filtering-plain > .admin-summary-stats { flex: 1 0 100%; margin: 0; }
.filtering-card { align-items: stretch; display: block; padding: 0; }
.filtering-card > .filtering-fields { padding: calc(var(--spacing) * 4) calc(var(--spacing) * 4) 0; }
.filtering-body { border-top: 1px solid var(--color-default-200); display: grid; gap: calc(var(--spacing) * 3); margin-top: calc(var(--spacing) * 3); padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4) 0; }
.filtering-body[hidden] { display: none; }
.filtering-body > .filtering-field { align-items: center; display: grid; gap: calc(var(--spacing) * 2) calc(var(--spacing) * 3); grid-template-columns: minmax(5.5rem, 8rem) minmax(0, 1fr); width: 100%; }
.filtering-body > .filtering-field > :is(.form-input, .form-select, .form-textarea, .filtering-input, .btn-group, .filtering-toggle-group, .admin-select-badge-list) { min-width: 0; width: 100%; }
.filtering-card > .filtering-actions { align-items: start; margin-inline-start: 0; padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4) calc(var(--spacing) * 4); }
.filtering-toggle::before { content: "expand_more"; font-family: "Material Symbols Outlined"; font-size: 1.25rem; font-weight: 400; line-height: 1; }
.filtering-toggle[aria-expanded=true]::before { content: "expand_less"; }
.filtering-actions > :is(.filtering-submit) { margin-inline-start: auto; }
@media (max-width: 767px) {
    .filtering { align-items: stretch; flex-wrap: wrap; }
    .filtering-fields, .filtering-field { width: 100%; }
    .filtering-field > :is(.form-input, .form-select, .form-textarea, .filtering-input, .btn-group, .filtering-toggle-group, .admin-select-badge-list) { width: 100%; }
    .filtering-body > .filtering-field { align-items: stretch; grid-template-columns: minmax(0, 1fr); }
    .filtering-actions { flex-wrap: wrap; margin-inline-start: 0; width: 100%; }
    .filtering-actions > :is(.filtering-submit) { margin-inline-start: 0; }
}
.admin-select-badge-list { display: grid; gap: calc(var(--spacing) * 1.5); min-width: 0; }
.admin-select-badge-list-select { max-width: 24rem; }
.admin-select-badge-list-remove { flex: 0 0 auto; }
.validation-field { position: relative; }
.validation-status-icon {
    position: absolute;
    top: 50%;
    right: calc(var(--spacing) * 3);
    display: none !important;
    transform: translateY(-50%);
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
}
.validation-status-icon-select { right: calc(var(--spacing) * 9); }
.validation-danger-label { color: var(--color-danger); }
.validation-status-icon-success,
.validation-success-icon,
.validation-success-note { color: var(--color-success); }
.validation-status-icon-danger,
.validation-error-icon,
.validation-error-note,
.validation-error-message { color: var(--color-danger); }
.validation-static-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    display: flex;
    align-items: center;
    padding-inline-end: calc(var(--spacing) * 3);
    pointer-events: none;
}
.validation-static-icon-select { inset-inline-end: calc(var(--spacing) * 6); }
.validation-addon {
    align-items: center;
    background-color: var(--color-default-100);
    border: 1px solid var(--color-default-300);
    border-start-start-radius: var(--radius-md);
    border-end-start-radius: var(--radius-md);
    color: var(--color-default-600);
    display: inline-flex;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    padding-inline: calc(var(--spacing) * 3);
}
.validation-success-note,
.validation-error-note { margin-top: calc(var(--spacing) * 1); font-size: 0.6875rem; }
.validation-error-message {
    display: none !important;
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
}
.validation-error-message-wide { width: 100%; margin-top: calc(var(--spacing) * 2); }

.form-input-action {
    align-items: center;
    color: var(--color-default-500);
    display: inline-flex;
    height: calc(var(--spacing) * 6);
    justify-content: center;
    position: absolute;
    right: calc(var(--spacing) * 3);
    top: 50%;
    transform: translateY(-50%);
    transition: color var(--default-transition-duration) var(--default-transition-timing-function);
    width: calc(var(--spacing) * 6);
}
.form-input-action:hover { color: var(--color-default-700); }

.alert-removable { transition: opacity 300ms var(--default-transition-timing-function), transform 300ms var(--default-transition-timing-function); }
.alert-removable.removing { opacity: 0; transform: translateX(calc(var(--spacing) * 5)); }
.alert-link-line { display: block; }
.alert-strong-bottom { border-bottom-width: 2px; border-bottom-style: solid; }
.alert-divider-success { border-color: color-mix(in oklab, var(--color-success) 20%, transparent); margin-block: calc(var(--spacing) * 4); }
.alert-divider-secondary { border-color: color-mix(in oklab, var(--color-secondary) 20%, transparent); margin-block: calc(var(--spacing) * 4); }
.alert-close-leading { line-height: normal; margin-inline-start: auto; }
.alert-close-pill { border-radius: 9999px; }

.overlay-closed { display: none !important; opacity: 0; pointer-events: none; }
.overlay-closed-static { display: none !important; pointer-events: none; }
.overlay.overlay-open.overlay-closed,
.overlay.open.overlay-closed { display: block !important; opacity: 1 !important; pointer-events: auto !important; }
.overlay.overlay-open.overlay-closed-static,
.overlay.open.overlay-closed-static { display: block !important; pointer-events: auto !important; }
.tabs-hidden-until-md { display: none !important; }
@media (min-width: 48rem) {
    .tabs-hidden-until-md { display: initial !important; }
}

.modal-radius-md,
.modal-radius-lg,
.modal-radius-xl { border-radius: var(--radius-xl); }
.modal-border-md,
.modal-border-lg,
.modal-border-xl { border: 1px solid var(--color-default-300); }

/* Public button interactive state guarantee. */
@media (hover: hover) {
    :is(.btn-light, .btn-surface, .btn-surface-default, .btn-surface-default-soft, .btn-subtle-light):hover { background-color: color-mix(in oklab, var(--color-default-500) 18%, var(--color-card)); color: var(--color-default-950); }
    :is(.btn-solid-secondary, .btn-solid-secondary-muted, .btn-solid-secondary-contrast):hover { background-color: var(--color-secondary-hover); border-color: var(--color-secondary-hover); color: var(--color-white); }
    :is(.btn-solid-success, .btn-solid-success-strong, .btn-solid-success-contrast):hover { background-color: var(--color-success-hover); border-color: var(--color-success-hover); color: var(--color-slate-950); }
    .btn-solid-danger:hover { background-color: var(--color-danger-hover); border-color: var(--color-danger-hover); color: var(--color-white); }
    .btn-solid-warning:hover { background-color: var(--color-warning-hover); border-color: var(--color-warning-hover); color: var(--color-slate-950); }
    :is(.btn-solid-info, .btn-solid-info-strong, .btn-solid-info-muted):hover { background-color: var(--color-info-hover); border-color: var(--color-info-hover); color:var(--color-white); }
    .btn-solid-dark:hover { background-color: color-mix(in oklab, var(--color-dark) 72%, #000); border-color: color-mix(in oklab, var(--color-dark) 72%, #000); color: var(--color-white); }
    .btn-solid-light:hover { background-color: color-mix(in oklab, var(--color-default-500) 24%, var(--color-card)); border-color: color-mix(in oklab, var(--color-default-500) 24%, var(--color-card)); color: var(--color-default-950); }
    :is(.btn-outline-default, .btn-outline-light):hover { background-color: color-mix(in oklab, var(--color-default-500) 18%, var(--color-card)); border-color: var(--color-default-300); color: var(--color-default-950); }
    :is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info, .btn-outline-dark):hover { background-color: var(--btn-outline-color, currentColor); border-color: var(--btn-outline-color, currentColor); color: var(--btn-outline-on-color, var(--color-white)); }
    :is(.btn-soft-default, .btn-soft-light):hover { background-color: color-mix(in oklab, var(--color-default-500) 24%, var(--color-card)); border-color: transparent; color: var(--color-default-950); }
    .btn-soft-primary:hover { background-color: color-mix(in oklab, var(--color-primary) 24%, transparent); border-color: transparent; }
    .btn-soft-secondary:hover { background-color: color-mix(in oklab, var(--color-secondary) 24%, transparent); border-color: transparent; }
    .btn-soft-success:hover { background-color: color-mix(in oklab, var(--color-success) 24%, transparent); border-color: transparent; }
    .btn-soft-danger:hover { background-color: color-mix(in oklab, var(--color-danger) 24%, transparent); border-color: transparent; }
    .btn-soft-warning:hover { background-color: color-mix(in oklab, var(--color-warning) 24%, transparent); border-color: transparent; }
    .btn-soft-info:hover { background-color: color-mix(in oklab, var(--color-info) 24%, transparent); border-color: transparent; }
    .btn-soft-dark:hover { background-color: color-mix(in oklab, var(--color-dark) 36%, transparent); border-color: transparent; color: var(--color-default-950); }
    :is(.btn-ghost-default, .btn-ghost-light):hover { background-color: var(--color-default-100); color: var(--color-default-900); }
    .btn-ghost-primary:hover { background-color: color-mix(in oklab, var(--color-primary) 12%, transparent); }
    .btn-ghost-secondary:hover { background-color: color-mix(in oklab, var(--color-secondary) 12%, transparent); }
    .btn-ghost-success:hover { background-color: color-mix(in oklab, var(--color-success) 12%, transparent); }
    .btn-ghost-danger:hover { background-color: color-mix(in oklab, var(--color-danger) 12%, transparent); }
    .btn-ghost-warning:hover { background-color: color-mix(in oklab, var(--color-warning) 12%, transparent); }
    .btn-ghost-info:hover { background-color: color-mix(in oklab, var(--color-info) 12%, transparent); }
    .btn-ghost-dark:hover { background-color: color-mix(in oklab, var(--color-dark) 26%, transparent); color: var(--color-default-950); }
}
:is(.btn-light, .btn-surface, .btn-surface-default, .btn-surface-default-soft, .btn-subtle-light):active { background-color: color-mix(in oklab, var(--color-default-500) 18%, var(--color-card)); color: var(--color-default-950); }
:is(.btn-solid-secondary, .btn-solid-secondary-muted, .btn-solid-secondary-contrast):active { background-color: var(--color-secondary-hover); border-color: var(--color-secondary-hover); color: var(--color-white); }
:is(.btn-solid-success, .btn-solid-success-strong, .btn-solid-success-contrast):active { background-color: var(--color-success-hover); border-color: var(--color-success-hover); color: var(--color-slate-950); }
.btn-solid-danger:active { background-color: var(--color-danger-hover); border-color: var(--color-danger-hover); color: var(--color-white); }
.btn-solid-warning:active { background-color: var(--color-warning-hover); border-color: var(--color-warning-hover); color: var(--color-slate-950); }
:is(.btn-solid-info, .btn-solid-info-strong, .btn-solid-info-muted):active { background-color: var(--color-info-hover); border-color: var(--color-info-hover); color:var(--color-white); }
.btn-solid-dark:active { background-color: color-mix(in oklab, var(--color-dark) 72%, #000); border-color: color-mix(in oklab, var(--color-dark) 72%, #000); color: var(--color-white); }
.btn-solid-light:active { background-color: color-mix(in oklab, var(--color-default-500) 24%, var(--color-card)); border-color: color-mix(in oklab, var(--color-default-500) 24%, var(--color-card)); color: var(--color-default-950); }
:is(.btn-outline-default, .btn-outline-light):active { background-color: color-mix(in oklab, var(--color-default-500) 18%, var(--color-card)); border-color: var(--color-default-300); color: var(--color-default-950); }
:is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info, .btn-outline-dark):active { background-color: var(--btn-outline-color, currentColor); border-color: var(--btn-outline-color, currentColor); color: var(--btn-outline-on-color, var(--color-white)); }
:is(.btn-soft-default, .btn-soft-light):active { background-color: color-mix(in oklab, var(--color-default-500) 24%, var(--color-card)); border-color: transparent; color: var(--color-default-950); }
.btn-soft-primary:active { background-color: color-mix(in oklab, var(--color-primary) 24%, transparent); border-color: transparent; }
.btn-soft-secondary:active { background-color: color-mix(in oklab, var(--color-secondary) 24%, transparent); border-color: transparent; }
.btn-soft-success:active { background-color: color-mix(in oklab, var(--color-success) 24%, transparent); border-color: transparent; }
.btn-soft-danger:active { background-color: color-mix(in oklab, var(--color-danger) 24%, transparent); border-color: transparent; }
.btn-soft-warning:active { background-color: color-mix(in oklab, var(--color-warning) 24%, transparent); border-color: transparent; }
.btn-soft-info:active { background-color: color-mix(in oklab, var(--color-info) 24%, transparent); border-color: transparent; }
.btn-soft-dark:active { background-color: color-mix(in oklab, var(--color-dark) 36%, transparent); border-color: transparent; color: var(--color-default-950); }
:is(.btn-ghost-default, .btn-ghost-light):active { background-color: var(--color-default-100); color: var(--color-default-900); }
.btn-ghost-primary:active { background-color: color-mix(in oklab, var(--color-primary) 12%, transparent); }
.btn-ghost-secondary:active { background-color: color-mix(in oklab, var(--color-secondary) 12%, transparent); }
.btn-ghost-success:active { background-color: color-mix(in oklab, var(--color-success) 12%, transparent); }
.btn-ghost-danger:active { background-color: color-mix(in oklab, var(--color-danger) 12%, transparent); }
.btn-ghost-warning:active { background-color: color-mix(in oklab, var(--color-warning) 12%, transparent); }
.btn-ghost-info:active { background-color: color-mix(in oklab, var(--color-info) 12%, transparent); }
.btn-ghost-dark:active { background-color: color-mix(in oklab, var(--color-dark) 26%, transparent); color: var(--color-default-950); }

/* Examples respond to their own available width, including foreign shells. */
.ui-kit-card-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

.ui-kit-compositions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 2rem; align-items: start; }
.ui-kit-compositions > * { min-width: 0; }
.ui-kit-editorial-example { padding-block: 1.5rem; }
.ui-kit-editorial-example h3 { font-size: 1.625rem; line-height: 1.4; margin-block: 1rem; }
.ui-kit-editorial-example p { color: var(--sr-muted, var(--color-default-600)); margin-block: 1rem; }
.ui-kit-list-example { list-style: none; padding: 0; margin: 0; }
.ui-kit-list-example li { display: flex; align-items: baseline; gap: 1rem; justify-content: space-between; padding-block: 1rem; border-bottom: 1px solid var(--sr-border, var(--color-default-300)); }
.ui-kit-list-example a { color: var(--sr-text, var(--color-default-900)); }