/* Responsive data tables (spec §1.1): one look for sessions, processing documents, quality and summary tables.
   Semantic <table> from 768px; stacked cards below it (labels come from td[data-label]). Tokens only. */
.responsive-table, .sessions-table, .doc-table, .quality-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); }
.table-wrap, .table-card { min-width: 0; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; box-shadow: var(--shadow-1); }
.table-card > .table-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--color-border); }
caption { text-align: left; padding: var(--space-3) var(--space-4); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
:is(.responsive-table, .sessions-table, .doc-table, .quality-table) :is(th, td) { text-align: left; vertical-align: middle; padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--color-border); }
:is(.responsive-table, .sessions-table, .doc-table, .quality-table) thead th { position: sticky; top: 0; z-index: 1; background: var(--color-surface-muted); color: var(--color-text-secondary); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; padding-block: var(--space-2); }
:is(.responsive-table, .sessions-table, .doc-table, .quality-table) tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); }
:is(.responsive-table, .sessions-table, .doc-table, .quality-table) tbody tr:hover { background: var(--color-surface-hover); }
:is(.responsive-table, .sessions-table, .doc-table, .quality-table) tbody tr:last-child > * { border-bottom: 0; }
.sessions-table tbody tr { height: 3.5rem; }
.sessions-table td:last-child, .responsive-table td.cell--action { text-align: right; width: 1%; white-space: nowrap; }
.sessions-table td > span + span { display: block; }
.cell-primary { display: block; font-weight: 600; color: var(--color-text); overflow-wrap: anywhere; }
.cell-secondary { display: block; color: var(--color-text-muted); font-size: var(--text-xs); }
.doc-table th[scope='row'] { font-weight: 600; }
.quality-table { margin: var(--space-2) 0; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); }
.quality-table :is(th, td) { padding: var(--space-2) var(--space-3); }
.flag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }

/* Stacked cards below 768px: no horizontal scroll on phones. */
@media (max-width: 767px) {
  .table-wrap, .table-card { border: 0; background: transparent; box-shadow: none; overflow: visible; }
  :is(.responsive-table, .sessions-table, .doc-table) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  :is(.responsive-table, .sessions-table, .doc-table) caption { padding-inline: 0; }
  :is(.responsive-table, .sessions-table, .doc-table) tbody { display: grid; gap: var(--space-2); }
  :is(.responsive-table, .sessions-table, .doc-table) tbody tr { display: grid; gap: var(--space-2); height: auto; padding: var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-1); }
  :is(.responsive-table, .sessions-table, .doc-table) tbody :is(th, td) { display: grid; grid-template-columns: minmax(5.5rem, 35%) minmax(0, 1fr); gap: var(--space-2); align-items: start; padding: 0; border: 0; text-align: left; width: auto; white-space: normal; }
  :is(.responsive-table, .sessions-table, .doc-table) tbody :is(th, td)[data-label]::before { content: attr(data-label); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; padding-top: 2px; }
  :is(.responsive-table, .sessions-table, .doc-table) tbody :is(th, td):not([data-label]) { grid-template-columns: minmax(0, 1fr); }
  .sessions-table td:last-child .btn, .responsive-table td.cell--action .btn { width: 100%; }
}
.sessions-more { padding-top: var(--space-3); }