/* ----------------------------------------------- the shared table --
 *
 * Sorting in the headings, and a strip underneath saying what is on screen,
 * how much to show and how to reach the rest. Every control is a link, so the
 * whole thing works before a line of script has run.
 *
 * One file, loaded by the portal's own pages and by every tool — they all
 * reach it at /static/css/table.css, the same way they reach portal.js.
 *
 * It sets no colours of its own. Every one here is a variable the loading
 * stylesheet has already defined, so the table comes out blue in Fleet and
 * green in StockFlow without this file knowing either of them exists.
 *
 * It used to be pasted into each stylesheet instead, which is how Fleet's
 * lists went out with headings that had no rules at all: eleven arrows drawn
 * at whatever size an SVG takes when nothing says otherwise, which is the
 * width of the column. A component with a copy per tool is a component that is
 * missing from the next tool.
 */

.th-sort { padding: 0 !important; }
.th-sort a {
  display: flex; align-items: center; gap: 5px;
  padding: 11px 14px; text-decoration: none; color: inherit;
}
.th-sort a:hover { color: var(--brand-dark); }
.th-sort svg { width: 11px; height: 11px; flex-shrink: 0; }
/* The idle arrows are a hint that the column can be sorted, not a claim that
   it is — so they stay out of the way until the heading is under the pointer. */
.th-sort .th-idle { opacity: 0; transition: opacity 0.12s ease; }
.th-sort a:hover .th-idle { opacity: 0.45; }
.th-sort.on a { color: var(--brand-dark); }
.th-sort.num a { justify-content: flex-end; }

.table-foot {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 11px 2px; margin-top: 10px;
  font-size: 12.5px; color: var(--ink-faint);
}
.tf-count { font-variant-numeric: tabular-nums; }
.tf-sizes { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.tf-label { margin-right: 3px; }
.tf-size, .tf-page {
  display: inline-block; padding: 3px 9px; border-radius: 7px;
  border: 1px solid transparent; text-decoration: none; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.tf-size:hover, .tf-page:hover { border-color: var(--border); color: var(--brand-dark); }
.tf-size.on, .tf-page.on {
  background: var(--tint); color: var(--brand-dark); font-weight: 700;
  border-color: transparent;
}
/* A page that is not there to go to. Still rendered, so the row does not jump
   about as you move through it. */
.tf-page.off { opacity: 0.35; pointer-events: none; }
.tf-pages { display: flex; align-items: center; gap: 3px; }
.tf-gap { padding: 0 2px; }

/* While a new view of the table is being fetched. Dimmed rather than blanked:
   what is on screen is still what was asked for a moment ago, and replacing it
   with a spinner would be a worse answer than a slightly faded true one. */
.table-busy { opacity: 0.55; transition: opacity 0.12s ease; pointer-events: none; }
.tf-pages.loading a { opacity: 0.5; pointer-events: none; }

@media (max-width: 720px) {
  .table-foot { gap: 10px; }
  .tf-sizes { margin-left: 0; }
}