/*
 * Shared UI shells and feature-owned primitives.
 * Shared custom primitives provide structure; native controls and Zag provide
 * behavior. Tailwind utilities are optional layout helpers, not components.
 * Native CSS nesting — no build step. Colors use the project token contract.
 */

@layer components {
/* Buttons keep native activation semantics and share the System 13 adapter. */
.kol-ui-button {
    display: inline-flex;
    min-height: var(--kol-ui-size, 2.5rem);
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.55rem var(--kol-ui-btn-p, 1rem);
    border: 1px solid var(--border);
    border-radius: var(--radius, 0.375rem);
    background: transparent;
    color: var(--foreground);
    font: inherit;
    font-size: var(--kol-ui-fontsize, 0.875rem);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.kol-ui-button--small { min-height: var(--kol-ui-size, 2rem); padding: 0.35rem var(--kol-ui-btn-p, 0.75rem); font-size: var(--kol-ui-fontsize, 0.8rem); }
.kol-ui-button--tiny { min-height: var(--kol-ui-size, 1.65rem); padding: 0.2rem var(--kol-ui-btn-p, 0.5rem); font-size: var(--kol-ui-fontsize, 0.7rem); }
.kol-ui-button--square { width: var(--kol-ui-size, 2.5rem); min-width: var(--kol-ui-size, 2.5rem); padding: 0; }
.kol-ui-button--disabled,
.kol-ui-button:disabled,
.kol-ui-button[aria-disabled="true"] { cursor: not-allowed; opacity: 0.55; }
.kol-ui-button:focus-visible,
.kol-ui-link:focus-visible { outline: 2px solid var(--ring, var(--primary)); outline-offset: 2px; }
.kol-ui-link { color: var(--link, var(--primary)); text-decoration: underline; text-underline-offset: 0.18em; }
.kol-ui-link--secondary { color: var(--muted-foreground); }
.kol-ui-link--primary { color: var(--primary); }

/* Native fields stay native; these classes provide only a consistent base. */
:where(input.kol-ui-input, select.kol-ui-select, textarea.kol-ui-textarea, input.kol-ui-file-input) {
    box-sizing: border-box;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--input, var(--border));
    border-radius: var(--radius, 0.375rem);
    background-color: var(--card);
    color: var(--foreground);
    font: inherit;
    line-height: 1.4;
}

textarea.kol-ui-textarea { min-height: 7rem; resize: vertical; }
select.kol-ui-select--ghost { border-color: transparent; background-color: transparent; }
input.kol-ui-input--small,
select.kol-ui-select--small,
input.kol-ui-file-input--small { min-height: 2rem; padding-block: 0.35rem; font-size: 0.8rem; }
:where(input.kol-ui-input, select.kol-ui-select, textarea.kol-ui-textarea, input.kol-ui-file-input):focus-visible {
    border-color: var(--ring, var(--primary));
    outline: 2px solid color-mix(in oklab, var(--ring, var(--primary)) 32%, transparent);
    outline-offset: 1px;
}
input.kol-ui-file-input::file-selector-button {
    margin-inline-end: 0.65rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--border);
    background: var(--muted);
    color: var(--foreground);
    font: inherit;
    cursor: pointer;
}
.kol-ui-checkbox,
.kol-ui-radio { width: 1rem; height: 1rem; accent-color: var(--kol-ui-input-color, var(--primary)); vertical-align: middle; }
.kol-ui-checkbox--small,
.kol-ui-radio--tiny { width: 0.85rem; height: 0.85rem; }
.kol-ui-checkbox--tiny { width: 0.75rem; height: 0.75rem; }
.kol-ui-toggle {
    width: 2.5rem;
    height: 1.35rem;
    appearance: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--muted-foreground);
    vertical-align: middle;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease;
}
.kol-ui-toggle::before {
    display: block;
    width: 0.95rem;
    height: 0.95rem;
    margin: 0.14rem;
    border-radius: 50%;
    background: var(--card);
    content: "";
    transition: transform 140ms ease;
}
.kol-ui-toggle:checked { border-color: var(--primary); background: var(--primary); }
.kol-ui-toggle:checked::before { transform: translateX(1.08rem); }
:dir(rtl).kol-ui-toggle:checked::before { transform: translateX(-1.08rem); }
.kol-ui-toggle:focus-visible { outline: 2px solid var(--ring, var(--primary)); outline-offset: 2px; }
.kol-ui-range { width: 100%; accent-color: var(--kol-ui-range-progress, var(--primary)); }

/* Shared semantic containers. Feature styles can refine their layout. */
.kol-ui-alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0;
    background: color-mix(in oklab, var(--kol-ui-alert-color, var(--link)) 5%, var(--card));
    color: var(--foreground);
}
.kol-ui-alert::before,
.kol-ui-alert::after {
    position: absolute;
    width: 0.55rem;
    height: 0.55rem;
    content: "";
    pointer-events: none;
}
.kol-ui-alert::before {
    inset-block-start: -1px;
    inset-inline-start: -1px;
    border-block-start: 2px solid var(--kol-ui-alert-color, var(--link));
    border-inline-start: 2px solid var(--kol-ui-alert-color, var(--link));
}
.kol-ui-alert::after {
    inset-block-end: -1px;
    inset-inline-start: -1px;
    border-block-end: 2px solid var(--kol-ui-alert-color, var(--link));
    border-inline-start: 2px solid var(--kol-ui-alert-color, var(--link));
}
.kol-ui-alert--info { --kol-ui-alert-color: var(--starless-info, var(--link)); }
.kol-ui-alert--success { --kol-ui-alert-color: var(--starless-success, var(--success, #287a3d)); }
.kol-ui-alert--warning { --kol-ui-alert-color: var(--starless-warning, var(--warning, var(--rating, #b7791f))); }
.kol-ui-alert--danger { --kol-ui-alert-color: var(--starless-danger, var(--destructive, #dc2626)); }
.kol-ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.18rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--muted);
    color: var(--foreground);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
}
.kol-ui-badge--primary { border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); background: color-mix(in oklab, var(--primary) 10%, var(--card)); color: var(--primary); }
.kol-ui-badge--success {
    border-color: color-mix(in oklab, var(--starless-success, var(--success, #287a3d)) 45%, var(--border));
    background: color-mix(in oklab, var(--starless-success, var(--success, #287a3d)) 8%, var(--card));
    color: var(--starless-success, var(--success, #287a3d));
}
.kol-ui-badge--warning {
    border-color: color-mix(in oklab, var(--starless-warning, var(--warning, var(--rating, #b7791f))) 45%, var(--border));
    background: color-mix(in oklab, var(--starless-warning, var(--warning, var(--rating, #b7791f))) 8%, var(--card));
    color: var(--starless-warning, var(--warning, var(--rating, #b7791f)));
}
.kol-ui-badge--danger {
    border-color: color-mix(in oklab, var(--starless-danger, var(--destructive, #dc2626)) 45%, var(--border));
    background: color-mix(in oklab, var(--starless-danger, var(--destructive, #dc2626)) 8%, var(--card));
    color: var(--starless-danger, var(--destructive, #dc2626));
}
.kol-ui-badge--outline { background: transparent; }
.kol-ui-badge--ghost { border-color: transparent; background: transparent; }
.kol-ui-card { border: 1px solid var(--border); border-radius: var(--radius, 0.375rem); background: var(--card); color: var(--card-foreground, var(--foreground)); }
.kol-ui-card--border { border-color: var(--border); }
.kol-ui-card__body { padding: 1rem; }
.kol-ui-card__title { margin: 0; color: inherit; font-size: 1.05rem; font-weight: 700; }
.kol-ui-card__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.kol-ui-menu { margin: 0; padding: 0; list-style: none; }
.kol-ui-menu--small { font-size: 0.85rem; }
.kol-ui-tabs { display: flex; min-width: 0; gap: 0.25rem; }
.kol-ui-tabs--border { border-block-end: 1px solid var(--border); }
.kol-ui-tab { min-height: 2.25rem; padding: 0.45rem 0.8rem; border: 0; border-block-end: 2px solid transparent; background: transparent; color: var(--muted-foreground); font: inherit; cursor: pointer; }
.kol-ui-tab--active,
.kol-ui-tab[aria-selected="true"] { border-block-end-color: var(--primary); color: var(--primary); }
.kol-ui-join { display: inline-flex; align-items: stretch; }
.kol-ui-join__item + .kol-ui-join__item { margin-inline-start: -1px; border-start-start-radius: 0; border-end-start-radius: 0; }
.kol-ui-join__item:not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; }
.kol-ui-table { width: 100%; border-collapse: collapse; color: var(--foreground); text-align: start; }
.kol-ui-table :where(th, td) { padding: 0.55rem 0.75rem; border-block-end: 1px solid var(--border); }
.kol-ui-table th { color: var(--muted-foreground); font-size: 0.8rem; font-weight: 700; }
.kol-ui-table--small :where(th, td) { padding: 0.35rem 0.5rem; }
.kol-ui-carousel { display: flex; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; }
.kol-ui-carousel--horizontal { flex-direction: row; }
.kol-ui-carousel__item { flex: 0 0 auto; scroll-snap-align: start; }
.kol-ui-progress { accent-color: var(--primary); }
.kol-ui-toast { border: 1px solid var(--border); border-radius: var(--radius, 0.375rem); background: var(--card); color: var(--foreground); box-shadow: var(--shadow-md, 0 4px 12px rgb(0 0 0 / 12%)); }
.kol-ui-spinner { display: inline-block; width: 1.25rem; height: 1.25rem; border: 2px solid color-mix(in oklab, currentColor 25%, transparent); border-block-start-color: currentColor; border-radius: 50%; animation: kol-ui-spin 700ms linear infinite; }
.kol-ui-spinner--medium { width: 1.75rem; height: 1.75rem; }
@keyframes kol-ui-spin { to { transform: rotate(1turn); } }

dialog.kol-ui-dialog {
    width: min(40rem, calc(100vw - 2rem));
    max-width: none;
    max-height: min(85vh, 50rem);
    padding: 0;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius, 0.375rem);
    background: var(--card);
    color: var(--foreground);
}
dialog.kol-ui-dialog::backdrop { background: rgb(0 0 0 / 55%); }
.kol-ui-dialog__panel { padding: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
    .kol-ui-button,
    .kol-ui-toggle,
    .kol-ui-toggle::before { transition-duration: 0.01ms; }
    .kol-ui-spinner { animation-duration: 1.8s; }
}
}

.kol-lucide { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex-shrink: 0; }

/* Shared geometry and text treatment now live on literal `tw:*` classes. */
.kol-ui-heading.fade {
    border-color: transparent;
}

.kol-ui-heading.fade::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(to left, var(--border), transparent);
}

.kol-ui-cover {
    display: block;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: var(--muted);
    aspect-ratio: 3 / 4;

    & > img { display: block; width: 100%; height: 100%; object-fit: cover; }
    &.sm { width: 52px; }
    &.lg { width: 100%; }
}

/* Theme-owned shell for PocketBase-backed comments. */
.kol-headless-comments-wrap { color: var(--foreground); }
.kol-headless-comments,
.kol-headless-comments * { box-sizing: border-box; }
.kol-headless-comments { width: 100%; color: var(--foreground); }
.kol-headless-comments__count { margin-block-end: 1rem; color: var(--muted-foreground); font-size: 0.75rem; }
.kol-headless-comments__list, .kol-headless-comments__replies { display: grid; gap: 0.85rem; margin: 0; padding: 0; list-style: none; }
.kol-headless-comments__replies { margin-block-start: 0.85rem; padding-inline-start: 1rem; border-inline-start: 1px solid var(--border); }
.kol-headless-comment { min-width: 0; padding: 1rem; border: 1px solid var(--border); background: color-mix(in oklch, var(--card) 72%, transparent); }
.kol-headless-comment__meta { display: flex; align-items: center; gap: 0.55rem; min-width: 0; color: var(--muted-foreground); font-size: 0.72rem; }
.kol-headless-comment__avatar { width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: 50%; object-fit: cover; }
.kol-headless-comment__author { color: var(--foreground); font-weight: 700; overflow-wrap: anywhere; }
.kol-headless-comment__date { margin-inline-start: auto; direction: ltr; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kol-headless-comment__content { margin-block-start: 0.8rem; font-size: 0.88rem; line-height: 1.8; overflow-wrap: anywhere; }
.kol-headless-comment__content p { margin: 0 0 0.65rem; }
.kol-headless-comment__content p:last-child { margin-block-end: 0; }
.kol-headless-comment__content rich-text-view { display: block; }
.kol-headless-comments__pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-block-start: 1.5rem; color: var(--muted-foreground); font-size: 0.75rem; }
.kol-headless-comments__title, .kol-headless-form__title { color: var(--foreground); }
.kol-headless-reviews { display: grid; gap: 0.8rem; margin-block-end: 2rem; }
.kol-headless-reviews__summary { display: flex; align-items: baseline; gap: 0.35rem; }
.kol-headless-reviews__score { font-size: 2.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.kol-headless-reviews__max, .kol-headless-reviews__count, .kol-headless-reviews__label { color: var(--muted-foreground); font-size: 0.75rem; }
.kol-headless-reviews__count { margin-inline-start: 0.5rem; }
.kol-headless-reviews__row { display: grid; grid-template-columns: minmax(6rem, 0.8fr) minmax(5rem, 1fr) 2.5rem; align-items: center; gap: 0.7rem; font-size: 0.75rem; }
.kol-headless-reviews__bar { height: 0.3rem; overflow: hidden; background: var(--border); }
.kol-headless-reviews__bar > span { display: block; height: 100%; background: var(--rating); }
.kol-headless-reviews__value { text-align: end; font-variant-numeric: tabular-nums; }
.kol-headless-form { display: grid; gap: 0.85rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--border); }
.kol-headless-form__identity, .kol-headless-form__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.65rem; }
.kol-headless-form__user { color: var(--muted-foreground); font-size: 0.78rem; }
.kol-headless-form [data-kol-comments-editor] { display: block; min-height: 7rem; }
.kol-headless-form__status { margin: 0; color: var(--muted-foreground); font-size: 0.75rem; }
.kol-headless-form__status.is-error { color: var(--destructive); }