/* ===================== TABLES ===================== */
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{padding:var(--sp2) var(--sp3);text-align:left;font-size:11px;font-weight:600;
  color:var(--txd);text-transform:uppercase;letter-spacing:.07em;border-bottom:1px solid var(--bdr);
  cursor:pointer;user-select:none;white-space:nowrap;background:var(--card);position:sticky;top:0;z-index:2}
thead th:hover{color:var(--accent)}
thead th .sa{margin-left:3px;font-size:9px;opacity:.35}
thead th.sorted{color:var(--accent)}
thead th.sorted .sa{opacity:1}
tbody td{padding:var(--sp3);border-bottom:1px solid var(--bdr);vertical-align:middle;line-height:1.45}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--card-h)}
tbody tr:last-child td{border-bottom:none}
.svc-h{cursor:pointer;padding:1px 4px;border-radius:3px}
.svc-h:hover{color:var(--accent)}
.svc-h.sorted{color:var(--accent)}

/* Column picker ───────────────────────────────────────────────
   Which optional columns a list shows. A <details> rather than a modal
   because it is a preference, not a decision: opened, ticked, forgotten.
   The menu is absolute so opening it does not push the table down. */
.colp{position:relative;display:inline-block}
.colp>summary{list-style:none;display:inline-flex;align-items:center;gap:5px}
.colp>summary::-webkit-details-marker{display:none}
.colp>summary::after{content:'▾';font-size:9px;opacity:.5}
.colp[open]>summary{color:var(--accent);border-color:var(--accent)}
.colp-m{position:absolute;right:0;top:calc(100% + 5px);z-index:40;min-width:186px;
  background:var(--card);border:1px solid var(--bdr);border-radius:var(--r2, 8px);
  box-shadow:0 10px 28px rgba(0,0,0,.28);padding:5px}
.colp-i{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:5px;
  font-size:12.5px;color:var(--txm);cursor:pointer;white-space:nowrap}
.colp-i:hover{background:var(--card-h);color:var(--tx)}
.colp-i input{cursor:pointer;margin:0}