@layer htmxo {
.htmxo-sortable-table thead th { cursor: pointer; }
.htmxo-sortable-table thead th[colspan] { cursor: default; text-align: center; border-bottom: none; }
/* Body cells with a hyperscript handler are clickable too (htmx-attr cells
   already get cursor:pointer from the global rule in htmxo_utility_styles). */
.htmxo-sortable-table tbody td[_] { cursor: pointer; }
}
/* Master/detail paired-row rules — INTENTIONALLY UNLAYERED so they beat
   Pico's unlayered tr/td defaults. The sortable_table_js convention pairs
   a primary row `tr#row-<key>` with a hidden detail row `tr#detail-<key>`. */
.htmxo-sortable-table tbody tr[id^="row-"]:hover {
    background: var(--pico-table-row-stripped-background-color);
}
.htmxo-sortable-table tbody tr[id^="row-"][onclick] > td { cursor: pointer; }
.htmxo-sortable-table tbody tr[id^="detail-"] > td { padding: 0; border: none; }
/* Hover linking (`link=`): the rows holding the hovered item are tinted and
   outlined; a shown row that holds it in a collapsed group gets a dashed
   outline, labelled on its top edge by the first cell's note. Neither moves
   the layout or covers the row's own text. */
table[data-htmxo-link] > tbody > tr[data-htmxo-linked] { outline: 2px solid var(--htmxo-accent, Highlight); outline-offset: -2px; }
table[data-htmxo-link] > tbody > tr[data-htmxo-linked=""] > td { background-color: var(--htmxo-linked-row, color-mix(in srgb, var(--htmxo-accent, Highlight) 18%, transparent)); }
table[data-htmxo-link] > tbody > tr[data-htmxo-linked="inside"] { outline-style: dashed; }
table[data-htmxo-link] > tbody > tr > td[data-htmxo-linked-note] { position: relative; }
table[data-htmxo-link] > tbody > tr > td[data-htmxo-linked-note]::after { content: attr(data-htmxo-linked-note); position: absolute; z-index: 1; inset-inline-start: .5rem; top: 0; transform: translateY(-50%); padding: 0 .5em; border: 1px dashed var(--htmxo-accent, Highlight); border-radius: 1em; background: var(--pico-background-color, Canvas); color: var(--pico-color, CanvasText); font-size: .7em; line-height: 1.5; white-space: nowrap; pointer-events: none; }
