/* Shared progressive-enhancement chrome for Fuse / mark.js / Sortable / Tippy.
 * Prefer tl-* prefixes — never collide with app .tip / .lab short names. */

mark.tl-mark,
.tl-mark {
  background: color-mix(in srgb, var(--accent, #0e7490) 28%, transparent);
  color: inherit;
  padding: 0 .08em;
  border-radius: 2px;
}

.tl-sort-ghost { opacity: .45; }
.tl-sort-chosen { cursor: grabbing; }
.tl-sort-drag { opacity: .92; }

.tippy-box[data-theme~='tl'] {
  background: #0f172a;
  color: #f8fafc;
  font-size: .82rem;
  line-height: 1.45;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .28);
}
.tippy-box[data-theme~='tl'] .tippy-content { padding: 8px 10px; }
.tippy-box[data-theme~='tl'][data-placement^='top'] > .tippy-arrow::before { border-top-color: #0f172a; }
.tippy-box[data-theme~='tl'][data-placement^='bottom'] > .tippy-arrow::before { border-bottom-color: #0f172a; }
.tippy-box[data-theme~='tl'][data-placement^='left'] > .tippy-arrow::before { border-left-color: #0f172a; }
.tippy-box[data-theme~='tl'][data-placement^='right'] > .tippy-arrow::before { border-right-color: #0f172a; }

[data-tl-tip],
[data-tippy-content] { cursor: help; }
[data-tl-tip]:focus-visible,
[data-tippy-content]:focus-visible {
  outline: 2px solid var(--accent, #0e7490);
  outline-offset: 2px;
}

.tl-lab-search { margin: 0 0 12px; }
.tl-lab-search input {
  font: inherit;
  font-size: .92rem;
  width: 100%;
  max-width: 340px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--ink, #191919) 16%, transparent);
  border-radius: 8px;
  background: #fff;
}
.tl-lab-search input:focus-visible {
  outline: 2px solid var(--accent, #0e7490);
  outline-offset: 2px;
}

.tl-drag-hint {
  font-size: .85rem;
  color: var(--muted, #64748b);
  margin: .35rem 0 .75rem;
}

@media (prefers-reduced-motion: reduce) {
  .tl-sort-ghost, .tl-sort-chosen, .tl-sort-drag { transition: none !important; }
}