/* Shared table behaviour (POLISH lane, 2026-09-23). Opt in by adding
 * class="tdi-table" to a <table>. What an adopting table gets:
 *
 *   1. A sticky <thead> -- headers stay visible on a long scroll.
 *   2. Sortable-header styling for any <th> a page marks data-sort-key
 *      (app/tables.js wires the click/keyboard behaviour and aria-sort;
 *      this file only draws it -- see that file's own header for why
 *      sorting itself stays split between the two).
 *   3. Rows that become cards under 600px, one field per line, labelled
 *      from each <td>'s own data-label attribute:
 *        <td data-label="State">${esc(c.state)}</td>
 *      A row-renderer that opts into .tdi-table adds this once per cell,
 *      alongside the text it already writes -- not inferred by walking the
 *      DOM at runtime (which breaks the moment a column is reordered or a
 *      cell is conditionally omitted). A cell with no data-label (a row's
 *      lead/identifying column, usually) gets no label prefix, so it reads
 *      as the card's title instead of "Name: …".
 *
 * No JS is required for #1 or #3 -- a plain <table class="tdi-table"> with
 * data-label on its cells already gets the responsive card layout. #2 needs
 * app/tables.js.
 */
.tdi-table {
  width: 100%;
  border-collapse: collapse;
}
.tdi-table th,
.tdi-table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
}
.tdi-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel2);
  color: var(--faint);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
}
.tdi-table tbody tr:hover { background: var(--panel2); }

/* ---- sortable headers (app/tables.js) ---- */
.tdi-table th[data-sort-key] button {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;   /* WCAG 2.5.8 target size */
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}
.tdi-table th[data-sort-key] button:hover { color: var(--text); }
.tdi-table th[data-sort-key] button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.tdi-table .sort-ic {
  width: 9px;
  height: 9px;
  flex: none;
  opacity: .4;
}
.tdi-table th[aria-sort="ascending"] .sort-ic,
.tdi-table th[aria-sort="descending"] .sort-ic {
  opacity: 1;
  color: var(--gold);
}
.tdi-table th[aria-sort="ascending"] .sort-ic { transform: rotate(180deg); }

/* ---- rows become cards under 600px ---- */
@media (max-width: 600px) {
  .tdi-table, .tdi-table tbody, .tdi-table tr, .tdi-table td {
    display: block;
    width: 100%;
  }
  /* Visually hidden, not display:none: display:none would drop the header
     out of the accessibility tree entirely, where this keeps it there for a
     screen reader while sighted readers see the data-label prefix on each
     card row instead. This adds no width either, so it cannot cause the
     horizontal scroll this same lane's brief asks to rule out at 390px.
     display:block above (this same media query, on table/tbody/tr/td) is
     itself enough to strip their implicit table/row/cell ARIA roles in
     Chromium and Firefox -- an element only keeps a table-related implicit
     role while it keeps display:table* -- regardless of this visually-
     hidden technique. app/tables.js's applyRoles() sets role="table" /
     "rowgroup" / "row" / "columnheader" / "rowheader" / "cell" explicitly on
     every .tdi-table so header/cell association survives the switch to
     cards; see its own comment for where it is called. */
  .tdi-table thead {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  /* checker review_render #13: a <caption> defaults to display:table-caption,
     which this query's own table/tbody/tr/td -> display:block never touches
     -- caption keeps trying to lay out as a table-caption box against a now
     block-level table, which some browsers (measured: a 390px phone) render
     as a near-zero-width column, wrapping the caption text one word per
     line. Unlike the header (hidden above so its th/scope association still
     reaches a screen reader, never meant to be READ as a heading), a
     caption's whole job is to be read as this table's own heading text, so
     it is kept visible and simply reflowed as a normal block instead. Any
     page's own more specific caption styling (colour, size, padding -- e.g.
     org.html's unconditional `.tdi-table caption` rule) still applies; only
     `display` is set here, since that is the one property nothing else on
     an adopting page had ever needed to touch before this bug.  */
  .tdi-table caption { display: block; }
  .tdi-table tr {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--panel);
  }
  .tdi-table tr:hover { background: var(--panel); }  /* the hover row-tint above only makes sense as a table row */
  .tdi-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    text-align: right;
    border-bottom: 1px solid var(--border);
    padding: var(--space-2) 0;
  }
  .tdi-table td:last-child { border-bottom: 0; }
  .tdi-table td[data-label]::before {
    content: attr(data-label);
    color: var(--faint);
    font-size: var(--text-xs);
    text-align: left;
    font-weight: 600;
    flex: none;
    margin-right: var(--space-3);
  }
}