/* The table component, style half. Two jobs:
 *
 * 1. Sort affordance for table.sortable — the header text becomes a button
 *    (tables.js), the button inherits the header's own voice, and the state
 *    lives in one glyph: ↕ at rest in dim, ↑ or ↓ in lit when a column is
 *    sorted. aria-sort is the single source of truth; the CSS only reads it.
 *
 * 2. The flat mobile treatment for table.flat — the alternative to the
 *    record-box stack for tables that are numeric grids rather than prose. A
 *    grid of 78 years × 6 figures rendered as 78 labelled boxes reads like a
 *    database printout; kept as a grid it reads like a chart. Below 40rem the
 *    type tightens, the wrapper scrolls sideways if it must, the first column
 *    holds still so a row never loses its name, and a scroll shadow says so.
 *    Tables whose rightmost column is a note or a source keep the record
 *    treatment (table-records.mjs) — rules 04/05 put the citation on screen,
 *    and a sideways scroll would push it off exactly there.
 */

table.sortable thead th .sortbtn{
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;
  font-variant-numeric:inherit;background:none;border:0;padding:0;cursor:pointer}
table.sortable thead th .sortbtn::after{
  content:"\2195";margin-left:.5em;color:var(--dim);opacity:.6}
table.sortable thead th[aria-sort="ascending"] .sortbtn::after{
  content:"\2191";color:var(--lit);opacity:1}
table.sortable thead th[aria-sort="descending"] .sortbtn::after{
  content:"\2193";color:var(--lit);opacity:1}
table.sortable thead th .sortbtn:hover,
table.sortable thead th .sortbtn:focus-visible{color:var(--bone)}
table.sortable thead th .sortbtn:focus-visible{
  outline:1px solid var(--lit);outline-offset:2px}
table.sortable thead th[aria-sort]{color:var(--bone)}

.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:40rem){
  .tblwrap table.flat{font-size:11.5px;min-width:100%}
  .tblwrap table.flat th,.tblwrap table.flat td{padding:5px 7px;white-space:nowrap}
  /* The row's name column holds still while the figures scroll. The background
     must be opaque or the figures slide visibly underneath it. */
  .tblwrap table.flat th:first-child,.tblwrap table.flat td:first-child{
    position:sticky;left:0;background:var(--ground,#0a0a0b);z-index:1}
  /* Scroll shadows, drawn by the wrapper's own background: the two "shadow"
     layers scroll with the content (background-attachment:local) and slide out
     from under the two fixed covers as the table moves. No JS, no listener —
     the browser is told the geometry once and keeps it true. */
  .tblwrap{background:
    linear-gradient(90deg,var(--ground,#0a0a0b) 40%,transparent) left/28px 100% no-repeat local,
    linear-gradient(270deg,var(--ground,#0a0a0b) 40%,transparent) right/28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.55),transparent) left/14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.55),transparent) right/14px 100% no-repeat scroll}
}