/* workitems.js: the Items mode's styles — a sortable table on our tokens:
 * the head row sorts (the sorted column carries its arrow and aria-sort),
 * rows open their item's detail, a goal's row stands a little taller. The
 * table pans sideways inside its own box; a phone hides nothing. Tokens
 * only. */

.work-items { margin-top: var(--sv-space-3); }
.work-items-note { margin: 0 0 var(--sv-space-2); color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.work-items-wrap { overflow-x: auto; border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: var(--sv-radius); background: var(--sv-surface-raised); }
.work-items-table { width: 100%; border-collapse: collapse; font-size: var(--ui-text); }
.work-items-table th { position: sticky; top: 0; z-index: 2; padding: var(--sv-space-2) var(--sv-space-3); border-bottom: var(--sv-hairline-w) solid var(--sv-hairline-strong); background: var(--sv-surface-raised); color: var(--sv-ink-tertiary); font-size: var(--ui-meta); font-weight: 600; text-align: left; white-space: nowrap; cursor: pointer; user-select: none; }
.work-items-table th.sorted { color: var(--sv-ink); }
.work-items-table th:hover { color: var(--sv-ink); }
.work-items-table td { padding: var(--sv-space-2) var(--sv-space-3); border-bottom: var(--sv-hairline-w) solid var(--sv-hairline); vertical-align: middle; }
.work-items-table tbody tr { cursor: pointer; }
.work-items-table tbody tr:hover { background: var(--ws-hover); }
.work-items-table tbody tr:last-child td { border-bottom: 0; }
.work-item.goal .work-item-title { font-weight: 600; }
.work-item-kind { display: inline-flex; padding: 1px 8px; border-radius: 999px; background: var(--sv-surface-sunken); color: var(--sv-ink-tertiary); font-size: var(--ui-meta); font-weight: 600; }
.work-item-kind.goal { background: color-mix(in srgb, var(--sv-ink) 8%, transparent); color: var(--sv-ink-secondary); }
.work-item-title { display: inline-block; max-width: 26rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; text-decoration: none; vertical-align: bottom; }
.work-item-title:hover { text-decoration: underline; }
.work-items-table .track-kpi { max-width: 9rem; }
.work-items-table .track-kpi-words b { font-size: var(--ui-meta); }
.work-items-table .track-kpi-metric, .work-items-table .track-kpi-period { font-size: 0.6875rem; }
.work-items-table .track-meter { height: 4px; }

/* ---- phone ---- */
@media (max-width: 640px) {
  .work-items-table { font-size: var(--ui-meta); }
  .work-item-title { max-width: 10rem; }
  .work-items-table td { padding: var(--sv-space-2); }
}