/* Tables: wrap/fit, sticky thead, info-icons, sortable headers. */
.table-wrap {
  overflow-x: auto;
  margin: 0 0 1.6rem;
  border: 1px solid var(--border);
  border-radius: 12px;
}
/* overflow-x:auto alone forces overflow-y to compute as auto too (CSS Overflow
   spec), which turns .table-wrap into its own scroll container and breaks
   thead th's position:sticky against the page. tables.js adds .fits when
   a table needs no horizontal scroll, setting both axes to visible so sticky
   works against the page; narrow viewports keep overflow-x and lose sticky. */
.table-wrap.fits { overflow-x: visible; overflow-y: visible; }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 0.94rem; }
th, td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
thead th {
  background: var(--navy);
  color: #fff;
  font-weight: 650;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  position: sticky;
  top: var(--nav-h, 4.5rem); /* nav.js sets --nav-h to the live nav height */
  z-index: 40; /* above table body, below .top-nav (z-index: 100) */
  overflow: visible;
}
/* When the wrap must scroll horizontally, it becomes the sticky containing
   block (overflow-x:auto → overflow-y:auto). Keep top:0 there — using the
   nav offset covers the first body row(s). Page-pin sticky only applies with
   .fits (overflow visible); see syncTableFit in tables.js. */
.table-wrap:not(.fits) thead th { top: 0; }
thead th:first-child { border-top-left-radius: 11px; }
thead th:last-child { border-top-right-radius: 11px; }
/* While pinned under the nav (.stuck from tables.js), square the top corners. */
thead.stuck th:first-child { border-top-left-radius: 0; }
thead.stuck th:last-child { border-top-right-radius: 0; }
tbody tr:nth-child(even) { background: var(--card-bg); }
tbody tr:last-child td { border-bottom: none; }

/* ---------- Floating header for side-scrolling tables ----------
   Opt-in per table with .table-wrap[data-float-head]. A wrap that scrolls
   sideways can't pin its thead to the page (see the .fits note above), so
   tables.js clones the header row into this fixed bar and parks it under the
   nav instead. The bar is a scroll container in its own right — JS mirrors the
   wrap's scrollLeft onto it, which both keeps the columns aligned and lets a
   sticky first column inside the clone pin exactly as it does in the table.
   Non-interactive on purpose: the clone is aria-hidden and doesn't forward
   clicks, so don't opt a sortable table in — its headers would go dead. */
.table-float-head {
  position: fixed;
  z-index: 90; /* above the in-table sticky cells, below .top-nav (100) */
  overflow: hidden;
  pointer-events: none;
  display: none;
  box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.45);
}
.table-float-head.is-visible { display: block; }
.table-float-head table { table-layout: fixed; }
@media print { .table-float-head { display: none !important; } }

/* Header info icons + tooltips.
   Glyph is an inline <svg><use href="#report-info-icon"> (sprite injected by
   tables.js) so it works under file:// — CSS mask-image of an external SVG
   is blocked by CORS on that protocol. */
a.info-icon {
  text-decoration: none;
  border-bottom: none;
  cursor: pointer;
  color: inherit;
}
a.info-icon:hover { opacity: 1; }
.info-icon {
  display: inline-flex;
  align-items: center;
  color: rgba(255,255,255,0.75);
  text-transform: none;
  letter-spacing: normal;
  margin-left: 0.35rem;
  cursor: help;
  position: relative;
  vertical-align: middle;
  line-height: 1;
}
.info-icon-glyph {
  display: block;
  width: 12px;
  height: 12px;
  flex: none;
  fill: currentColor;
  overflow: visible;
  pointer-events: none;
}
.info-icon:hover, .info-icon:focus { color: #fff; }
.info-icon .tooltip {
  display: none;
  position: absolute;
  top: 150%;
  left: 50%;
  transform: translateX(-50%);
  width: 230px;
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  border: 1px solid var(--tooltip-border);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: normal;
  padding: 0.65rem 0.8rem;
  border-radius: 8px;
  box-shadow: var(--shadow);
  z-index: 50;
  white-space: normal;
}
thead th:first-child .info-icon .tooltip { left: 0; transform: none; }
thead th:last-child .info-icon .tooltip { left: auto; right: 0; transform: none; }
/* Sticky th stacking contexts need a lift so tooltips clear sibling headers. */
thead th:hover, thead th:focus-within { z-index: 60; }
.info-icon:hover .tooltip, .info-icon:focus .tooltip,
.info-icon:focus-within .tooltip { display: block; }

/* Sortable headers — opt-in via class="sortable" (+ optional data-sort).
   Neutral state: stacked up/down chevrons (sortable). Active: emphasize one.
   .tsortable shares this look for tables.js/tasks-table.js: tasks.html's
   task table pairs a summary row with a hidden detail row (one record = two
   <tr>s), which the generic initSortableTable in js/tables.js can't sort
   correctly (it treats every <tr> as an independent record), so that table
   uses .tsortable + its own sort logic in js/tasks-table.js instead of
   .sortable — same CSS, no double-wiring. */
thead th.sortable,
thead th.tsortable {
  cursor: pointer;
  user-select: none;
}
thead th.sortable:hover, thead th.tsortable:hover,
thead th.sortable:focus-visible, thead th.tsortable:focus-visible { background: var(--thead-hover-bg); }
thead th.sortable .sort-arrow,
thead th.tsortable .sort-arrow {
  display: inline-block;
  position: relative;
  width: 0.7em;
  height: 1em;
  margin-left: 0.35rem;
  vertical-align: -0.15em;
  opacity: 0.55;
}
thead th.sortable .sort-arrow::before, thead th.tsortable .sort-arrow::before,
thead th.sortable .sort-arrow::after, thead th.tsortable .sort-arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-left: 0.28em solid transparent;
  border-right: 0.28em solid transparent;
}
thead th.sortable .sort-arrow::before, thead th.tsortable .sort-arrow::before {
  top: 0.08em;
  border-bottom: 0.32em solid currentColor;
}
thead th.sortable .sort-arrow::after, thead th.tsortable .sort-arrow::after {
  bottom: 0.08em;
  border-top: 0.32em solid currentColor;
}
thead th.sortable.sort-asc .sort-arrow, thead th.tsortable.sort-asc .sort-arrow,
thead th.sortable.sort-desc .sort-arrow, thead th.tsortable.sort-desc .sort-arrow {
  opacity: 1;
}
thead th.sortable.sort-asc .sort-arrow::after, thead th.tsortable.sort-asc .sort-arrow::after,
thead th.sortable.sort-desc .sort-arrow::before, thead th.tsortable.sort-desc .sort-arrow::before {
  opacity: 0.28;
}