/* Teacher: the answers table and the review block. */
/* ---- Table → cards ---------------------------------------------------------------- */
.table-wrap { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-muted); padding: var(--s-3) var(--s-4); background: var(--c-surface-2); white-space: nowrap; }
.table td { padding: var(--s-4); border-top: 1px solid var(--c-line); vertical-align: middle; }
.table tbody tr { transition: background-color var(--dur-fast); }
.table tbody tr:hover { background: var(--c-surface-2); }
.table .t-name a { font-weight: var(--fw-semibold); color: var(--c-text); text-decoration: none; display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); }
.table .t-name a:hover { color: var(--c-accent-text); text-decoration: underline; }
.table .t-sub { font-size: var(--fs-sm); color: var(--c-text-muted); }
.table .t-date { white-space: nowrap; font-size: var(--fs-sm); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.table tr.is-new td:first-child { box-shadow: inset 4px 0 0 var(--c-pending); }
.table tr.is-new .t-name a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-pending); flex: none; }
.t-progress { width: 1%; white-space: nowrap; }
@media (max-width: 899px) {
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table, .table tbody, .table tr, .table td { display: block; }
  .table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s-3); padding: var(--s-4); border-top: 1px solid var(--c-line); }
  .table tbody tr:first-child { border-top: 0; }
  .table td { border: 0; padding: 0; }
  .table td.t-name { grid-column: 1; }
  .table td.t-status { grid-column: 2; grid-row: 1; align-self: center; }
  .table td.t-course, .table td.t-lesson, .table td.t-date, .table td.t-progress { grid-column: 1 / -1; }
  .table td.t-progress { display: none; } /* progress teaser lives in the desktop table only */
  .table td[data-label]::before { content: attr(data-label) " · "; color: var(--c-text-muted); font-size: var(--fs-sm); }
  .table tr.is-new { box-shadow: inset 4px 0 0 var(--c-pending); }
  .table tr.is-new td:first-child { box-shadow: none; }
}
.toolbar-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.fake-select { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 0 var(--s-3) 0 var(--s-4); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); background: var(--c-surface); font-size: var(--fs-sm); }

/* ---- Review (teacher) ---------------------------------------------------------------- */
.review-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
@media (max-width: 639px) { .review-actions .btn { flex: 1 1 100%; } }
.verdict { display: grid; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-lg); border: 1px solid var(--c-line); background: var(--c-surface); }
.verdict--ok { border-color: color-mix(in oklab, var(--c-ok) 40%, transparent); }
.verdict--warn { border-color: color-mix(in oklab, var(--c-warn) 40%, transparent); }
.review-page { max-width: 820px; }
.history-row { display: grid; gap: 4px; padding: var(--s-3); border: 1px solid var(--c-line); border-radius: var(--r-md); }