/* tables.js: an answer's table as a read-only grid. The bar wraps on a
 * phone; the table keeps md.js's own scroll box (transcript.css). */
.text .md-table { margin: var(--sv-space-3) 0; min-width: 0; }
.text .md-table > .table-wrap { margin: 0; }
.md-table-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-1) var(--sv-space-2); margin-bottom: var(--sv-space-1); font-size: var(--ui-meta); color: var(--sv-ink-tertiary); }
.md-table-find {
  flex: 1 1 10rem; min-width: 0; max-width: 16rem; min-height: 28px; padding: 0 var(--sv-space-2);
  border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: calc(var(--sv-radius) * 0.75);
  background: var(--sv-surface); color: var(--sv-ink); font: inherit;
}
.md-table-count { margin-right: auto; font-variant-numeric: tabular-nums; }
.md-table-btn { min-height: 28px; padding: 0 var(--sv-space-2); border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: calc(var(--sv-radius) * 0.75); background: var(--sv-surface); color: var(--sv-ink-secondary); font: inherit; cursor: pointer; }
.md-table-btn:hover { color: var(--sv-ink); background: var(--ws-hover); }
.md-table-find:focus-visible, .md-table-btn:focus-visible, .md-sort:focus-visible { outline: 2px solid var(--sv-ink-tertiary); outline-offset: 1px; }
/* The header's own words are the sort button; the mark says which way. */
.md-sort { all: unset; display: inline-flex; align-items: center; gap: 0.3em; cursor: pointer; font-weight: inherit; text-align: inherit; }
.md-sort-mark::after { content: "↕"; color: var(--sv-ink-tertiary); font-size: 0.85em; opacity: 0.5; }
th[aria-sort="ascending"] .md-sort-mark::after { content: "↑"; opacity: 1; }
th[aria-sort="descending"] .md-sort-mark::after { content: "↓"; opacity: 1; }

/* A long table scrolls in its own box; its header row stays in view there
 * (and in the expanded dialog, where the box fills the screen). */
.text .md-table[data-long] > .table-wrap { max-height: min(70vh, 36rem); overflow: auto; }
.text .md-table thead th { position: sticky; top: 0; z-index: 1; box-shadow: inset 0 -1px var(--sv-hairline); }
/* Two rows or fewer: no filter or count, just Copy (and Expand if wide). */
.md-table-slim > .md-table-bar { justify-content: flex-end; margin-bottom: 2px; }
.md-table-slim .md-table-btn { min-height: 24px; padding: 0 var(--sv-space-1); }
.md-table-bar .md-table-btn { white-space: nowrap; }
/* expanded.js: the table full size. */
.md-pv-full-table { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: var(--sv-space-2) var(--sv-space-3) var(--sv-space-3); overflow: hidden; }
.md-pv-full-table > .md-table { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; }
.md-pv-full-table > .md-table > .table-wrap,
.text.md-pv-full-table > .md-table[data-long] > .table-wrap { flex: 1; min-height: 0; max-height: none; overflow: auto; }
.md-pv-full-table .md-table-btn[aria-label="Expand table"] { display: none; }
.md-pv-full .md-pv-close { margin-left: auto; }