@layer components {
/* Shared controls are complete in the published CSS, including their motion. */
.coline-tabs { display: flex; gap: 12px; min-width: 0; }
.coline-tabs[data-orientation="horizontal"] { flex-direction: column; }
.coline-tabs-list {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-start; width: fit-content; max-width: 100%; gap: 2px;
  padding: 3px; border-radius: calc(var(--radius) + 16px); color: var(--muted-foreground);
}
.coline-tabs-raised {
  background: color-mix(in oklch, var(--muted) 70%, transparent);
  border: 1px solid rgb(0 0 0 / 4%); box-shadow: inset 0 1px 2px rgb(0 0 0 / 6%);
}
.dark .coline-tabs-raised { background: rgb(255 255 255 / 4%); border-color: rgb(255 255 255 / 4%); box-shadow: inset 0 1px 3px rgb(0 0 0 / 30%); }
.coline-tabs-trigger {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center;
  flex: 1; gap: 6px; min-height: 30px; padding: 4px 8px; border: 1px solid transparent;
  border-radius: 12px; font-size: 14px; font-weight: 500; white-space: nowrap;
  color: var(--muted-foreground); background: transparent; cursor: pointer;
  transition: color 150ms cubic-bezier(.23,1,.32,1);
}
.coline-tabs-trigger[data-state="active"] { color: var(--foreground); }
.coline-tabs-trigger:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.coline-tabs-trigger:disabled { opacity: .45; cursor: default; }
.coline-tabs-trigger svg { width: 16px; height: 16px; flex-shrink: 0; pointer-events: none; }
.coline-tabs-indicator {
  pointer-events: none; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--background); border: 1px solid rgb(0 0 0 / 6%);
  box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
}
.dark .coline-tabs-indicator { background: rgb(255 255 255 / 7%); border-color: rgb(255 255 255 / 6%); box-shadow: 0 1px 3px rgb(0 0 0 / 30%), inset 0 1px 0 rgb(255 255 255 / 4%); }
.coline-tabs-list[data-orientation="vertical"] { flex-direction: column; border-radius: 16px; }
.coline-tabs-list[data-orientation="vertical"] .coline-tabs-trigger { width: 100%; justify-content: flex-start; border-radius: 12px; }
.coline-tabs-line { border-radius: 0; background: transparent; }
.coline-tabs-line .coline-tabs-trigger { border-radius: 0; }
.coline-tabs-line .coline-tabs-trigger[data-state="active"]::after { content: ""; position: absolute; inset: auto 8px -3px; height: 2px; background: currentColor; }
.coline-tabs-content { min-width: 0; flex: 1; outline: none; }
.coline-tabs-content[data-state="active"] { animation: coline-content-in 160ms cubic-bezier(.23,1,.32,1); }
.coline-tabs-content[data-state="inactive"] { display: none; }
@keyframes coline-content-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
.coline-button { transition: color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out, transform 120ms cubic-bezier(.23,1,.32,1), box-shadow 150ms ease-out; }
.coline-button:active:not(:disabled):not([data-variant="link"]) { transform: scale(.97); }
.coline-button:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.coline-button:disabled { cursor: not-allowed; }
.coline-dialog-overlay[data-state="open"] { animation: coline-overlay-in 180ms ease-out; }
.coline-dialog-overlay[data-state="closed"] { animation: coline-overlay-in 120ms ease-out reverse; }
.coline-dialog-content { color: var(--popover-foreground); transform-origin: bottom center; }
.coline-dialog-content[data-state="open"] { animation: coline-dialog-in 220ms cubic-bezier(.23,1,.32,1); }
.coline-dialog-content[data-state="closed"] { animation: coline-dialog-in 140ms ease-out reverse; overflow: hidden; }
@keyframes coline-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes coline-dialog-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (min-width: 640px) {
  .coline-dialog-content { transform-origin: center; }
  @keyframes coline-dialog-in { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
}
@media (hover: hover) and (pointer: fine) { .coline-tabs-trigger:hover { color: var(--foreground); } }
@media (prefers-reduced-motion: reduce) {
  .coline-tabs-content, .coline-button, .coline-dialog-content, .coline-dialog-overlay,
  [data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-sub-content"],
  [data-slot="popover-content"], [data-slot="select-content"], [data-slot="tooltip-content"] {
    animation-duration: 1ms !important; transition-duration: 0s !important;
  }
  .coline-button:active:not(:disabled) { transform: none; }
}

}
@layer components {
  .coline-filter-menu { justify-content: space-between; gap: 10px; border-radius: 12px; font-size: 13px; }
  .coline-filter-menu > svg { width: 14px; height: 14px; opacity: .6; }
}