/* Portfolio kit — interactive-table styles (pair of kit/table.js; opt-in per
   page, so non-table pages pay nothing). Tokens only — nothing new invented.
   The global :focus-visible rule in base.css covers the injected buttons. */
.th-sort { display: inline-flex; align-items: center; gap: 0.35em; width: 100%; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: inherit; cursor: pointer; }
.th-sort:hover { color: var(--accent); }
.th-arrow::before { content: "\2195"; opacity: 0.35; font-size: 0.85em; font-family: var(--mono); }
[aria-sort="ascending"] .th-arrow::before { content: "\2191"; opacity: 1; color: var(--accent); }
[aria-sort="descending"] .th-arrow::before { content: "\2193"; opacity: 1; color: var(--accent); }
.table-filter { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.6rem; }
.table-filter input { max-width: 14rem; }
.table-filter-count { font-size: 0.85em; color: var(--ink-soft); font-variant-numeric: tabular-nums; font-family: var(--mono); }
/* Touch devices get a taller sort target (>=24px floor); desktop keeps its density. */
/* 44px, not 28: a sort control is a tap target on touch. The header TEXT stays
   small on purpose (uppercase mono at 0.7rem is the table style and is legible);
   what was wrong was the target, not the type. Raised 2026-08-22. */
@media (pointer: coarse) { .th-sort { min-height: 44px; } }