/* ============================================================
   Table — データ表（記録の一覧）
   カタログ地の仕様表（.tbl, base/catalog.css）とは別物のプロダクト部品。
   数字は静かな主役＝明朝・等幅(tnum)・右寄せ。行は罫で分け、ホバーで淡く沈む。
   見出しクリック（＋Space/Enter）で並べ替え、aria-sort を反映。配線は js/catalog.js。
   ============================================================ */

.dtable-wrap {
  width: 100%; max-width: 380px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden;
}
.dtable { width: 100%; border-collapse: collapse; font-size: 13px; }

.dtable thead th {
  text-align: left; font-size: 11px; letter-spacing: .08em; color: var(--ash); font-weight: 700;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink) 3%, var(--surface));
  white-space: nowrap;
}
.dtable th.num, .dtable td.num { text-align: right; }
.dtable td.num { font-family: var(--font-serif); font-feature-settings: "tnum"; color: var(--ink); }

.dtable tbody td { padding: 12px 14px; color: var(--ink); border-bottom: 1px solid var(--page-line); }
.dtable tbody tr:last-child td { border-bottom: none; }
.dtable tbody tr { transition: background var(--dur-fast) var(--ease); }
.dtable tbody tr:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }

/* 並べ替え可能な見出し */
.dtable th.sortable { cursor: pointer; user-select: none; transition: color var(--dur-fast) var(--ease); }
.dtable th.sortable:hover { color: var(--ink); }
.dtable th .si {
  display: inline-block; width: 0; height: 0; margin-left: 6px; vertical-align: middle;
  opacity: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  transition: opacity var(--dur-fast) var(--ease);
}
.dtable th[aria-sort="ascending"] .si  { opacity: .85; border-bottom: 5px solid currentColor; }
.dtable th[aria-sort="descending"] .si { opacity: .85; border-top: 5px solid currentColor; }