.tabs { display: flex; flex-wrap: wrap; gap: .5rem; border-bottom: 1px solid var(--line); }
.tabs button { font: inherit; color: inherit; padding: .65rem 1rem; background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer; }
.tabs .is-on { font-weight: 700; border-bottom-color: currentColor; }
.tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
table { width: 100%; border-collapse: collapse; }
td, th { padding: .5rem; border-bottom: 1px solid var(--line, #ddd); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; max-width: 100%; }
.table-wrap table { min-width: 36rem; }
#session-detail { margin-top: 1rem; }
#spark { display: block; max-width: 100%; height: auto; margin-block: 1rem; }
#spark path { fill: none; stroke: #2e4057; stroke-width: 2; }
#student-wrong, details ul { padding-left: 1.5rem; }
#msg:empty { display: none; }
#app > .row { align-items: end; flex-wrap: wrap; }
#app > .row .field { flex: 1 1 9rem; }
#app > section > .row { margin-block: .75rem; }
@media (max-width: 540px) {
  .tabs button { flex: 1; padding-inline: .5rem; }
  #session-detail { padding: .75rem; }
}