/* mastery/students.html: admins' list of every Year 7 Maths student.
   A table on wide screens; each row becomes a card on phones. */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.5; }
.ms-wrap { max-width: 72rem; margin: 0 auto; padding: 1rem; }
.ms-nav { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; margin-bottom: 1rem; }
.ms-home, .ms-link { color: var(--gold); text-decoration: none; font-weight: 600; }
.ms-h1 { font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 .4rem; }
.ms-muted { color: var(--text-muted); }
.ms-sub { display: block; font-size: .85rem; color: var(--text-muted); }
.ms-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ms-tools { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0 .75rem; }
.ms-field { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--text-muted); flex: 1 1 12rem; }
.ms-field input, .ms-field select { min-height: 44px; padding: 0 .6rem; border-radius: .5rem; border: 1px solid var(--border-strong);
  background: var(--bg-card); color: var(--text); font: inherit; font-size: 1rem; }
.ms-field input:focus-visible, .ms-field select:focus-visible, .ms-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.ms-status { color: var(--text-muted); }
.ms-count { margin: .25rem 0 .75rem; font-size: .9rem; }

.ms-table-wrap { overflow-x: auto; }
.ms-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.ms-table th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted);
  padding: .5rem; border-bottom: 1px solid var(--border-strong); }
.ms-table td { padding: .7rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.ms-table tbody tr:hover { background: var(--bg-hover); }
.ms-tag { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 600; margin-top: .15rem; }
.ms-tag--ok { background: rgba(46, 160, 67, .16); color: var(--text); }
.ms-tag--warn { background: rgba(var(--gold-rgb), .22); color: var(--text); }
.ms-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .9rem; border-radius: .5rem;
  border: 1px solid var(--gold); color: var(--text); text-decoration: none; font-weight: 600; white-space: nowrap; }

@media (max-width: 760px) {
  .ms-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ms-table, .ms-table tbody, .ms-table tr, .ms-table td { display: block; width: 100%; }
  .ms-table tr { border: 1px solid var(--border); border-radius: .75rem; padding: .5rem .75rem; margin-bottom: .75rem; background: var(--bg-card); }
  .ms-table td { border: 0; padding: .35rem 0; display: grid; grid-template-columns: 7.5rem 1fr; gap: .5rem; }
  .ms-table td::before { content: attr(data-label); font-size: .8rem; color: var(--text-muted); }
  .ms-table td[data-label="Student"] { grid-template-columns: 1fr; }
  .ms-table td[data-label="Student"]::before, .ms-table td[data-label="Report"]::before { content: none; }
  .ms-table td[data-label="Report"] { grid-template-columns: 1fr; }
}