/* Compact classroom tables share alignment, scrolling and quiet row feedback.
   Layout spacing is on the 8/16/24/32/48 scale and corners come from tokens.css.
   The dense tables keep their 6px cell inset (.375rem) and the sort buttons
   their 2px one: every header, row and search-empty line is aligned on those,
   and the column widths below are measured against them. */
#t-class-scroll { padding: var(--sp-24) clamp(var(--sp-16), 2vw, var(--sp-32)) var(--sp-32); }
#t-class-detail > .cls-head, #t-class-detail > .cls-grid { width: 100%; max-width: none; }
#t-class-detail > .cls-head { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-16); margin-bottom: var(--sp-16); }
.cls-head .cls-head-name { gap: var(--sp-8); }
.cls-head .cls-title { font-size: clamp(1.4rem, 2vw, 1.85rem); line-height: 1.25; }
.cls-head-name > .icon-btn { flex: none; width: 36px; height: 36px; border-color: transparent; background: transparent; box-shadow: none; }
.cls-head-name > .icon-btn:hover { background: var(--surface-hover); border-color: var(--border); }
.cls-head .cls-head-code { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: var(--sp-8) var(--sp-16); }
.cls-head .cls-code-row { flex: none; gap: var(--sp-8); margin: 0; flex-wrap: nowrap; }
.cls-head .cls-code { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8); min-height: 40px; padding: var(--sp-8) .75rem; color: var(--fg); background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--r-btn); letter-spacing: 0; }
.cls-head .cls-copy-label { display: inline; margin: 0; color: var(--fg-muted); font: 500 var(--fs-13)/1.4 var(--font-body); letter-spacing: 0; }
.cls-head .cls-code-value { font: 700 var(--fs-16)/1.4 var(--font-mono); letter-spacing: .12em; }
.cls-head .cls-code svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--fg-muted); }
.cls-head .cls-code:hover { border-color: var(--c-accent-ink); }
.cls-head .cls-code-row > .btn-quiet { min-height: 40px; }
.cls-head .cls-code-hint { margin: 0; max-width: none; text-align: left; font-size: var(--fs-13); }
/* The join address, copyable: accent text with a copy icon rather than an
   underline, and a target no smaller than 24px. The negative margin puts the
   text where it would be without the hover inset. */
.cls-head .cls-join-link { display: inline-flex; align-items: center; gap: var(--sp-4); min-height: 24px; margin: 0 calc(-1 * var(--sp-4)); padding: 0 var(--sp-4); border: 0; border-radius: var(--r-xs); background: none; color: var(--c-accent-ink); font: inherit; font-weight: 600; cursor: pointer; }
.cls-head .cls-join-link:hover { background: var(--surface-hover); }
.cls-head .cls-join-link:focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: 1px; }
.cls-head .cls-join-link svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#t-class-detail .cls-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-16); }
#t-class-detail .cls-card { container: class-card / inline-size; min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--sp-16); }
.cls-section-header { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-8); margin-bottom: var(--sp-8); }
.cls-section-header .cls-card-head { flex: 1; margin: 0; font: 650 var(--fs-16)/1.4 var(--font-head); color: var(--fg); letter-spacing: -.015em; }
.cls-section-header > button { min-height: 36px; }
.cls-section-count { color: var(--fg-muted); font-size: var(--fs-13); font-variant-numeric: tabular-nums; }
.cls-info { position: relative; flex: none; z-index: 5; }
.cls-info > summary { display: grid; place-items: center; width: 36px; height: 36px; list-style: none; cursor: pointer; color: var(--fg-muted); border: 1px solid transparent; border-radius: var(--r-btn); }
.cls-info > summary::-webkit-details-marker { display: none; }
.cls-info > summary:hover, .cls-info[open] > summary { background: var(--surface-hover); color: var(--fg); }
.cls-info svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.cls-info-content { position: absolute; right: 0; top: calc(100% + var(--sp-8)); width: min(360px, calc(100vw - 3rem)); padding: var(--sp-16); background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.cls-info-content p { margin: 0; color: var(--fg-muted); font: 400 var(--fs-13)/1.6 var(--font-body); }
.cls-info-content p + p { margin-top: var(--sp-8); }
.cls-info > summary:focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: 2px; box-shadow: none; }
.cls-roster-tools { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--sp-8); margin-bottom: var(--sp-8); }
.cls-roster-search, .cls-progress-search { width: min(14rem, 100%); height: 36px; min-height: 36px; padding-block: var(--sp-4); font-size: var(--fs-13); }
.cls-card-roster .cls-roster-search { flex: 0 1 20rem; width: 20rem; max-width: 20rem; min-width: 0; }
.cls-add-toggle, .cls-print-cards { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8); flex: none; min-height: 36px; padding-inline: .75rem; white-space: nowrap; font-size: var(--fs-13); }
.cls-add-chevron { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.cls-add-toggle[aria-expanded="true"] .cls-add-chevron { transform: rotate(180deg); }
.cls-card-roster .cls-add-panel { display: block; max-width: none; margin: 0; padding: 0; border: 0; }
.cls-card-roster .cls-add-panel[hidden] { display: none; }
.cls-add-panel::after { content: ""; display: block; height: var(--sp-8); }
.cls-add-fields { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--sp-8); padding: var(--sp-8); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--field); }
.cls-add-field { display: grid; flex: 1 1 14rem; gap: var(--sp-8); min-width: 0; max-width: 22rem; color: var(--fg-muted); font: 500 var(--fs-13)/1.5 var(--font-body); }
.cls-card-roster .cls-add-panel input { flex: none; width: 100%; max-width: none; min-width: 0; }
.cls-add-panel :is(input, button) { height: 36px; min-height: 36px; padding-block: var(--sp-4); font-size: var(--fs-13); line-height: 1.4; }
.cls-card-progress .review-tools { justify-content: flex-start; gap: 0; margin-bottom: var(--sp-8); }
.cls-card-progress > .cls-section-header .cls-card-head { flex: 0 0 auto; }
.cls-card-progress > .cls-section-header .review-summary { flex: 0 1 auto; min-width: 0; margin: 0; color: var(--fg-muted); font: 400 var(--fs-13)/1.5 var(--font-body); }
.cls-card-progress > .cls-section-header .cls-work-settings { flex: none; margin-left: auto; min-height: 36px; padding: var(--sp-4) .75rem; font-size: var(--fs-13); white-space: nowrap; }
/* Search and its options share one field; the native popover never moves rows.
   A field, so it takes the input corner; the halves inside sit one pixel in. */
.cls-work-search { display: flex; align-items: stretch; width: min(26rem, 100%); min-width: 0; min-height: 36px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--field); }
.cls-work-search:focus-within { border-color: var(--c-accent-ink); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-accent-ink) 20%, transparent); }
.cls-work-search .cls-progress-search { flex: 1 1 0; width: 0; min-width: 0; height: 34px; min-height: 34px; margin: 0; padding: var(--sp-4) .75rem; border: 0; border-radius: calc(var(--r-sm) - 1px) 0 0 calc(var(--r-sm) - 1px); background: transparent; box-shadow: none; }
.cls-work-search .cls-progress-search:focus-visible { outline: none; box-shadow: none; }
.cls-search-options-button { display: inline-flex; align-items: center; justify-content: center; flex: none; gap: var(--sp-4); min-width: 36px; min-height: 34px; margin: 0; padding: 0 .75rem; border: 0; border-left: 1px solid var(--border); border-radius: 0 calc(var(--r-sm) - 1px) calc(var(--r-sm) - 1px) 0; background: transparent; color: var(--fg-muted); box-shadow: none; font: 500 var(--fs-13)/1.4 var(--font-body); white-space: nowrap; cursor: pointer; }
.cls-search-options-button svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.cls-search-options-button:hover, .cls-search-options-button[aria-expanded="true"] { background: var(--surface-hover); color: var(--fg); }
.cls-search-options-button.has-filter { background: var(--accent-soft); color: var(--c-accent-ink); }
.cls-search-options-button:focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: -3px; }
.cls-search-options { position: fixed; inset: auto; box-sizing: border-box; width: min(18rem, calc(100vw - var(--sp-24))); max-height: calc(100dvh - var(--sp-24)); margin: 0; padding: var(--sp-16); overflow: auto; overscroll-behavior: contain; border: 1px solid var(--border-strong); border-radius: var(--r-card); background: var(--card); color: var(--fg); box-shadow: var(--shadow-pop); font: 400 var(--fs-13)/1.5 var(--font-body); }
.cls-search-options:popover-open { display: grid; gap: var(--sp-8); }
.cls-search-options:not(:popover-open) { display: none; }
.cls-search-option { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); align-items: center; gap: var(--sp-8); margin: 0; color: var(--fg-muted); }
.cls-search-option > .select-wrap { width: 100%; min-width: 0; max-width: none; }
.cls-search-option select { min-height: 36px; padding: var(--sp-4) var(--sp-32) var(--sp-4) .75rem; border-color: var(--border); border-radius: var(--r-sm); background: var(--field); color: var(--fg); font: 400 var(--fs-13)/1.5 var(--font-body); }
.cls-search-options > button { justify-self: end; min-height: 36px; padding: var(--sp-4) .75rem; font-size: var(--fs-13); }
.cls-results-settings { width: 100vw; scrollbar-gutter: auto; }
.cls-results-settings .modal-body { width: min(28rem, calc(100vw - var(--sp-24))); max-height: calc(100dvh - var(--sp-24)); padding: var(--sp-24); overflow: auto; scrollbar-gutter: stable; border: 1px solid var(--border); border-radius: var(--r-card); text-align: left; }
.cls-results-settings .modal-title { margin: 0 0 var(--sp-16); font-size: var(--fs-18); line-height: 1.4; }
.cls-settings-section { display: grid; gap: var(--sp-8); }
.cls-settings-label { color: var(--fg); font: 600 var(--fs-13)/1.5 var(--font-body); }
.cls-settings-section > .select-wrap { width: 100%; max-width: none; }
.cls-settings-section select { min-height: 40px; padding-block: var(--sp-8); background: var(--field); font: 400 var(--fs-14)/1.5 var(--font-body); }
.cls-settings-note { margin: 0; color: var(--fg-muted); font: 400 var(--fs-13)/1.6 var(--font-body); }
.cls-settings-note + .cls-settings-note { margin-top: var(--sp-8); }
.cls-results-settings .modal-actions { justify-content: flex-end; margin-top: var(--sp-16); }
.cls-results-settings .modal-actions > .btn { flex: 0 0 auto; min-width: 5rem; min-height: 40px; padding: var(--sp-8) var(--sp-16); }
.cls-search-empty { margin: 0; padding: var(--sp-8) .375rem; color: var(--fg-muted); font: 400 var(--fs-13)/1.5 var(--font-body); }
.cls-search-empty[hidden], :is(.cls-card-roster, .cls-card-progress) .cls-result-row[hidden] { display: none; }
/* Only the data region scrolls. A short list uses its natural height.
   Positioned, so the visually hidden labels in the rows are clipped with the
   table: their containing block used to be the page, and on a phone they
   pushed it about 50px wider than the screen. */
.cls-table-scroll { position: relative; max-width: 100%; max-height: min(26rem, 60vh); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scroll-padding-top: 2.25rem; border-block: 1px solid var(--border); }
.cls-table-scroll:focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: 2px; }
.cls-table-scroll > .cls-results-list { width: 100%; max-width: none; margin: 0; padding: 0; }
.cls-table-cell { display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
.cls-truncate { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cls-truncate:focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: -2px; border-radius: var(--r-xs); }
/* A one-line label that follows the pointer, smaller than a popover, so it
   takes the input corner rather than the card's. */
.cls-text-tooltip { position: fixed; z-index: 10000; max-width: min(24rem, calc(100vw - var(--sp-24))); padding: var(--sp-8) .75rem; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--card); color: var(--fg); box-shadow: var(--shadow-pop); font: 400 var(--fs-13)/1.5 var(--font-body); overflow-wrap: anywhere; white-space: normal; pointer-events: none; }
.cls-card-roster .cls-roster-list { min-width: 37rem; }
.cls-card-roster .cls-result-row { display: grid; grid-template-columns: minmax(11rem, 1fr) 13rem 11rem; align-items: center; gap: var(--sp-8); min-height: 44px; padding: 0 .375rem; border-bottom: 1px solid var(--border); background: var(--card); }
:is(.cls-card-roster, .cls-card-progress) .cls-result-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 var(--fs-13)/1.5 var(--font-body); }
.cls-card-progress .cls-results-list:not(.is-skeleton) { min-width: 35rem; }
.cls-card-progress .cls-result-row.is-figures { grid-template-columns: minmax(9rem, 1fr) 6rem 5.5rem 12rem; align-items: center; gap: var(--sp-8); min-height: 44px; padding: 0 .375rem; background: var(--card); }
.cls-card-progress .cls-results-list.has-audio { min-width: 39rem; }
.cls-card-progress .cls-results-list.has-audio .cls-result-row.is-figures { grid-template-columns: minmax(9rem, 1fr) 6rem 5.5rem 12rem 3.75rem; }
.cls-card-progress .cls-result-row.is-figures > .cls-result-name { grid-column: 1; grid-row: auto; }
.cls-card-progress .cls-result-score { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column: auto; grid-row: auto; gap: var(--sp-16); font-variant-numeric: tabular-nums; }
.cls-card-progress .cls-result-row.is-head .cls-result-score { display: grid; }
.cls-card-progress :is(.cls-score-part, .cls-result-pending, .cls-empty) { min-width: 0; font: 500 var(--fs-13)/1.5 var(--font-body); font-variant-numeric: tabular-nums; }
.cls-card-progress .cls-empty { color: var(--fg-muted); opacity: 1; }
.cls-card-progress .cls-result-row.is-figures > :is(.cls-result-pending, .cls-empty, .cls-col-head:not(.cls-result-name)), .cls-card-progress .cls-score-part { text-align: right; }
.cls-card-progress .cls-result-row .cls-score-part::before { content: none; }
.cls-card-progress .cls-attempts-toggle { width: 100%; min-height: 36px; padding: var(--sp-4) var(--sp-8); font-size: var(--fs-13); font-variant-numeric: tabular-nums; text-align: right; }
.cls-card-progress .cls-listen-slot { display: none; grid-column: auto; grid-row: auto; width: auto; }
.cls-card-progress .has-audio .cls-listen-slot { display: grid; }
.cls-card-progress .cls-listen { min-height: 36px; margin: 0; padding-inline: var(--sp-4); }
:is(.cls-card-roster, .cls-card-progress) .cls-result-row:not(.is-head):is(:hover, :focus-within) { background: var(--surface-hover); }
:is(.cls-card-roster, .cls-card-progress) .cls-result-row.is-head { position: sticky; top: 0; z-index: 3; min-height: 36px; padding-block: 0; background: var(--card); border-bottom: 1px solid var(--border-strong); }
:is(.cls-card-roster, .cls-card-progress) .is-head :is(.cls-col-head, .cls-result-name) { color: var(--fg-muted); font: 500 var(--fs-13)/1.5 var(--font-body); letter-spacing: 0; text-transform: none; }
.cls-card-roster .cls-roster-head > :not(:first-child) { text-align: left; }
/* Keep student identity visible when a narrow screen pans to the figures. */
:is(.cls-card-roster, .cls-card-progress) .cls-result-row > .cls-result-name { position: sticky; left: 0; z-index: 1; align-self: stretch; display: flex; align-items: center; background: inherit; }
:is(.cls-card-roster, .cls-card-progress) .cls-result-row > .cls-result-name.cls-truncate { display: block; align-content: center; }
/* Notice and consent details are disclosed beside the menu, keeping each row
   on one line. Popovers live in the top layer, outside the table's clipping. */
.cls-card-roster .cls-consent-cell { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; padding-block: var(--sp-4); }
.cls-card-roster .cls-notice-seen { color: var(--fg-muted); font: 400 var(--fs-13)/1.4 var(--font-body); }
.cls-card-roster .cls-consent-wrap { flex: 1 1 0; min-width: 0; width: auto; margin: 0; }
.cls-card-roster .cls-consent { width: 100%; min-height: 36px; padding-block: var(--sp-4); background: var(--field); color: var(--fg-muted); border-color: var(--border); border-radius: var(--r-sm); font-size: var(--fs-13); }
.cls-recording-details { display: flex; flex: none; }
.cls-card-roster .cls-recording-info { display: inline-flex; align-items: center; justify-content: center; width: 36px; min-height: 36px; padding: 0; color: var(--fg-muted); background: transparent; border-color: transparent; }
.cls-card-roster .cls-recording-info:is(:hover, [aria-expanded="true"]) { color: var(--fg); background: var(--surface-hover); }
.cls-recording-info svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.cls-recording-panel { position: fixed; inset: auto; margin: 0; padding: var(--sp-16); overflow: auto; border: 1px solid var(--border-strong); border-radius: var(--r-card); background: var(--card); color: var(--fg); box-shadow: var(--shadow-pop); font: 400 var(--fs-13)/1.5 var(--font-body); overflow-wrap: anywhere; }
/* Each label sits right on top of its value, one --sp-4 apart; the next label
   starts a new group --sp-8 further down. */
.cls-recording-panel:popover-open { display: grid; gap: var(--sp-4); }
.cls-recording-name { font-weight: 600; }
.cls-recording-label { margin-top: var(--sp-8); color: var(--fg-muted); font-size: var(--fs-13); }
.cls-recording-note { margin-top: var(--sp-8); color: var(--fg-muted); font-size: var(--fs-13); }
.cls-recording-panel > button { justify-self: end; min-height: 36px; margin-top: var(--sp-8); }
@media (pointer: coarse), (max-width: 640px) {
  .cls-card-roster .cls-recording-info { width: 44px; min-height: 44px; }
  .cls-recording-panel > button { min-height: 44px; }
}
/* PIN column: dots or digits, Show/Hide, New PIN, and a lock badge that wraps
   under the digits when there is one, rather than widening every row for it. */
/* Its header is plain text rather than a sort button, so product.css's centring
   of a second header column shows; the dots and buttons below start at the left. */
.cls-card-roster .cls-result-row.is-head > .cls-pin-head { text-align: left; }
.cls-card-roster .cls-pin { justify-content: flex-start; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8); padding-block: var(--sp-4); }
.cls-pin-value { flex: none; min-width: 2.75rem; color: var(--fg-muted); font: 700 var(--fs-13)/1.5 var(--font-mono); letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.cls-pin-value.is-shown { color: var(--fg); }
.cls-card-roster .cls-pin .btn-mini { flex: none; padding-inline: var(--sp-8); font-size: var(--fs-13); }
.cls-card-roster .cls-pin-toggle { min-width: 3.25rem; }
.cls-pin-badge { display: inline-flex; align-items: center; min-height: 1.375rem; padding: 0 var(--sp-8); border: 1px solid var(--border); border-radius: var(--r-pill); font: 600 var(--fs-13)/1.4 var(--font-body); white-space: nowrap; cursor: help; }
/* Amber for a pause that ends by itself, red for a lock only the teacher can
   clear — the same split .t-pill makes between "off" and "failing". */
.cls-pin-badge.is-paused { color: var(--c-gold-deep); border-color: color-mix(in oklch, var(--c-gold) 45%, transparent); background: color-mix(in oklch, var(--c-gold) 10%, transparent); }
.cls-pin-badge.is-locked { color: var(--c-alert); border-color: color-mix(in oklch, var(--c-berry) 45%, transparent); background: color-mix(in oklch, var(--c-berry) 8%, transparent); }
.cls-card-roster .cls-bulk { border: 0; padding: var(--sp-8) 0 0; margin: 0; }
.cls-card-roster .cls-bulk > summary { min-height: 36px; display: flex; align-items: center; font-size: var(--fs-13); color: var(--fg-muted); }
.cls-card-assignments .cls-assign-table { display: table; table-layout: fixed; width: 100%; min-width: 52rem; max-width: none; margin: 0; border-collapse: separate; border-spacing: 0; }
.cls-card-assignments .cls-assign-table thead { display: table-header-group; }
.cls-card-assignments .cls-assign-table tbody { display: table-row-group; }
.cls-card-assignments .cls-assign-table tr { display: table-row; }
.cls-card-assignments .cls-assign-table thead th { position: sticky; top: 0; z-index: 3; height: 36px; font: 500 var(--fs-13)/1.5 var(--font-body); text-transform: none; letter-spacing: 0; color: var(--fg-muted); padding: 0 .375rem; background: var(--card); border-bottom: 1px solid var(--border-strong); }
.cls-card-assignments .cls-assign-table tbody :is(th, td) { height: 44px; vertical-align: middle; padding: 0 .375rem; border-top: 0; border-bottom: 1px solid var(--border); font: 500 var(--fs-13)/1.5 var(--font-body); background: var(--card); }
.cls-card-assignments .cls-assign-table tbody tr:last-child > :is(th, td) { border-bottom: 0; }
.cls-card-assignments .cls-assign-table tbody tr:is(:hover, :focus-within) > :is(th, td) { background: var(--surface-hover); }
.cls-card-assignments .cls-assign-table tr > :first-child { position: sticky; left: 0; z-index: 1; }
.cls-card-assignments .cls-assign-table thead tr > :first-child { z-index: 4; }
.cls-assigned-activity { display: flex; align-items: center; min-width: 0; gap: var(--sp-8); text-align: left; }
.cls-assigned-activity > .cls-truncate { flex: 1; }
.cls-activity-icon { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; background: var(--bg-soft); border-radius: var(--r-xs); color: var(--fg-muted); }
.cls-activity-icon svg { width: 16px; height: 16px; }
.cls-card-assignments .cls-assign-table .col-count { width: 6.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.cls-card-assignments .cls-assign-table .col-due { width: 13.5rem; text-align: left; }
.cls-card-assignments .cls-assign-table .col-rubric { width: 9rem; text-align: left; }
.cls-card-assignments .cls-assign-table .col-mode { width: 8.75rem; text-align: left; }
.cls-card-assignments .col-mode > .select-wrap { width: 100%; max-width: none; }
.cls-card-assignments .cls-assign-table :is(th,td):last-child { width: 2.75rem; padding-right: .125rem; }
.cls-card-assignments .cls-mode { min-height: 36px; width: 100%; padding-block: var(--sp-4); background: var(--field); border-color: var(--border); font-size: var(--fs-13); }
.cls-card-assignments .cls-assign-picker { margin: 0; padding: 0; }
.cls-card-assignments .cls-assign-form { margin: 0 0 var(--sp-8); padding: var(--sp-8); background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-sm); }
.cls-assign-picker[hidden] { display: none; }
.cls-assign-picker .cls-assign-note { margin: 0 0 var(--sp-8); max-width: none; }
.cls-assigned-activity > .hand-marked-badge { flex: none; margin-left: 0; }
.cls-assign-picker .select-wrap { flex: 1; min-width: 0; }
.cls-assign-picker select { width: 100%; min-height: 36px; }
.cls-assign-form > button { min-height: 36px; flex: none; }
.cls-card-assignments .cls-none, .cls-card-roster .cls-none { padding: var(--sp-8) 0; }
#t-class-detail .cls-card .icon-btn { box-shadow: none; border-color: transparent; background: transparent; width: 36px; height: 36px; display: inline-grid; place-items: center; }
#t-class-detail .cls-card .icon-btn:hover { background: var(--bg-soft); border-color: var(--border); }
.cls-sort-button { appearance: none; display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--sp-4); width: 100%; min-width: 0; min-height: 36px; padding: 0 .125rem; background: transparent; border: 0; border-radius: var(--r-xs); box-shadow: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
.cls-sort-button:is(:hover, :focus-visible) { background: var(--surface-hover); color: var(--fg); }
.cls-sort-button:focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: -2px; }
.cls-sort-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A drawn glyph the size of the text, centred on it, always after the label: the
   text arrows sat on a different baseline from the words and swapped sides by column. */
.cls-sort-arrow { flex: none; display: inline-flex; align-items: center; width: .875rem; height: .875rem; opacity: .45; }
.cls-sort-arrow svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[aria-sort="ascending"] .cls-sort-arrow, [aria-sort="descending"] .cls-sort-arrow { color: var(--c-accent-ink); opacity: 1; }
.cls-card-progress .is-head > :not(.cls-result-name) .cls-sort-button, .cls-card-progress .cls-score-part .cls-sort-button, .col-count .cls-sort-button { justify-content: flex-end; }
/* Review content stays readable within the visible card even beside a wide table. */
.cls-card-progress .cls-attempts { position: sticky; left: 0; box-sizing: border-box; width: min(100%, calc(100cqi - 1rem)); max-width: 60rem; margin: var(--sp-8) 0; padding: var(--sp-16); }
#t-class-detail .cls-danger { margin-top: var(--sp-8); }
.cls-empty-state { min-height: min(65vh, 560px); padding: var(--sp-48) var(--sp-24); gap: 0; }
.cls-empty-state > :not(:first-child):not(:empty) { margin-top: 0; }
#t-empty-create-status:not(:empty) { margin-top: var(--sp-16); }
.cls-empty-state .cls-empty-icon { display: block; width: 56px; height: 56px; margin: 0 0 var(--sp-24); padding: 0; stroke-width: 1.6; color: var(--fg-muted); }
.cls-empty-state h2 { margin: 0 0 var(--sp-24); }
.cls-empty-create { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8); min-height: 48px; padding: .75rem var(--sp-24); line-height: 1.4; }
.cls-empty-create svg { position: static; display: block; width: 18px; height: 18px; margin: 0; flex: none; }
@media(max-width:640px) {
  #t-class-scroll { padding-top: var(--sp-16); }
  .cls-section-header .cls-info { order: 1; }
  .cls-section-header > button { order: 2; }
  .cls-empty-state { min-height: 55vh; }
}
@container class-card (max-width: 38rem) {
  .cls-work-search { width: 100%; }
  .cls-card-assignments .cls-assign-table { min-width: 50rem; }
}
@container class-card (max-width: 27rem) {
  .cls-card-roster > .cls-section-header { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0 var(--sp-8); }
  .cls-card-roster > .cls-section-header .cls-card-head { grid-column: 1; grid-row: 1; }
  .cls-card-roster > .cls-section-header .cls-section-count { grid-column: 1; grid-row: 2; }
  .cls-card-roster > .cls-section-header .cls-info { grid-column: 2; grid-row: 1 / 3; }
  .cls-card-roster > .cls-section-header .cls-add-toggle { grid-column: 3; grid-row: 1 / 3; }
  .cls-card-roster > .cls-section-header .cls-print-cards { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-top: var(--sp-8); }
  :is(.cls-card-roster, .cls-card-progress) .cls-result-row > .cls-result-name { position: static; left: auto; }
  .cls-card-assignments .cls-assign-table tbody tr > :first-child { position: static; left: auto; }
  .cls-card-assignments .cls-assign-table thead tr > :first-child { left: auto; }
  .cls-add-field { flex-basis: 100%; max-width: none; }
}
@container class-card (max-width: 20rem) {
  .cls-search-options-button { width: 44px; padding-inline: 0; }
  .cls-search-options-button > span { display: none; }
  .cls-card-progress > .cls-section-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--sp-8); }
  .cls-card-progress > .cls-section-header .cls-card-head { grid-column: 1; grid-row: 1; }
  .cls-card-progress > .cls-section-header .review-summary { grid-column: 1; grid-row: 2; }
  .cls-card-progress > .cls-section-header .cls-work-settings { grid-column: 2; grid-row: 1 / 3; align-self: center; margin-left: 0; }
}
@media (hover: hover) and (pointer: fine) {
  #t-class-detail :is(.cls-student-remove, .cls-unassign) { opacity: .3; }
  #t-class-detail :is(.cls-result-row, .cls-assign-table tr):is(:hover, :focus-within) :is(.cls-student-remove, .cls-unassign) { opacity: 1; }
}
@media (pointer: coarse) {
  .cls-table-scroll { scroll-padding-top: 2.75rem; }
  .cls-sort-button, .cls-info > summary, .cls-card-progress .cls-attempts-toggle, .cls-roster-search, .cls-progress-search, .cls-add-toggle, .cls-add-panel :is(input, button), .cls-card-roster .cls-consent, .cls-card-roster .cls-pin .btn-mini, .cls-card-assignments .cls-mode, .cls-section-header > button, .cls-assign-picker select, .cls-assign-form > button { min-height: 44px; }
  .cls-work-search .cls-progress-search, .cls-search-options-button { min-height: 44px; height: 44px; }
  .cls-card-progress > .cls-section-header .cls-work-settings, .cls-search-option select, .cls-search-options > button, .cls-settings-section select, .cls-results-settings .modal-actions > .btn { min-height: 44px; }
  #t-class-detail .cls-card .icon-btn { width: 44px; height: 44px; }
  :is(.cls-card-roster, .cls-card-progress) .cls-result-row { min-height: 48px; }
  .cls-card-progress .cls-result-row.is-figures { min-height: 48px; }
  .cls-card-assignments .cls-assign-table tbody :is(th,td) { height: 48px; }
}
@media(prefers-reduced-motion:no-preference) {
  .cls-add-chevron { transition: transform 150ms var(--ease-out); }
  :is(.cls-card-roster, .cls-card-progress) .cls-result-row, .cls-assign-table :is(th, td), #t-class-detail :is(.cls-student-remove, .cls-unassign) { transition: background-color 100ms ease, opacity 100ms ease; }
  .cls-info[open] .cls-info-content { animation: class-help-in 150ms var(--ease-out); }
  @keyframes class-help-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
}

/* The class code is text to read out and a button to copy it, side by side.
   The code no longer looks pressable, because it is not the button. */
.cls-head .cls-code { cursor: auto; }
.cls-head .cls-code:hover { border-color: var(--border-strong); color: var(--fg); }
.cls-head .cls-code-value { user-select: all; }
.cls-head .cls-code-copy { display: inline-flex; align-items: center; gap: var(--sp-8); }
.cls-head .cls-code-copy.is-copied { border-color: var(--c-accent-ink); color: var(--c-accent-ink); }
@media (max-width: 640px) {
  .cls-head .cls-code-row { flex-wrap: wrap; max-width: 100%; }
}

/* What tells two same-named activities apart, under the name, only when needed.
   Indented by the icon and its gap, so it lines up with the name. */
.cls-activity-detail { display: block; margin: 0 0 0 calc(28px + var(--sp-8)); color: var(--fg-muted); font: 400 var(--fs-13)/1.4 var(--font-body); }

.cls-export-results { display: inline-flex; align-items: center; gap: var(--sp-4); }

/* Archive is a secondary group at the end of the same scrolling class list.
   The archived rows keep the class list's own gap between rows. */
.cls-archive-list { flex: none; margin-top: var(--sp-16); padding-top: var(--sp-8); border-top: 1px solid var(--border); }
.cls-archive-toggle { display: flex; align-items: center; gap: var(--sp-8); width: 100%; min-height: 44px; padding: var(--sp-8) .75rem; border: 0; border-radius: var(--r-btn); background: transparent; color: var(--fg-muted); font: 600 var(--fs-13)/1.4 var(--font-body); text-align: left; cursor: pointer; }
.cls-archive-toggle:is(:hover, :focus-visible) { background: var(--surface-hover); color: var(--fg); }
.cls-archive-toggle svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.cls-archive-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.cls-archive-count { margin-left: auto; font-weight: 400; font-variant-numeric: tabular-nums; }
#t-archived-classes { display: grid; gap: var(--sp-4); }
@media (prefers-reduced-motion: no-preference) { .cls-archive-toggle svg { transition: transform 220ms var(--ease-out); } }
/* Lifecycle actions remain below the work. */
.cls-lifecycle-body { padding-block: var(--sp-16); }
.cls-lifecycle-body > .cls-hint { margin: 0 0 var(--sp-16); max-width: 70ch; }
.cls-lifecycle-actions { display: flex; gap: var(--sp-8); flex-wrap: wrap; }
.cls-lifecycle-actions button { min-height: 44px; }
.cls-archive-state { margin: 0; color: var(--c-accent-ink); font-weight: 600; }
.cls-head .cls-restore { align-self: flex-start; min-height: 44px; }
.cls-delete-dialog .cls-export-results { margin-bottom: var(--sp-16); }
.cls-archive-assignments { margin: var(--sp-8) 0 0; padding-left: var(--sp-24); }
.cls-archive-assignments li + li { margin-top: var(--sp-8); }
.cls-delete-dialog { width: min(38rem, calc(100vw - 2rem)); height: auto; max-height: calc(100dvh - 2rem); overflow-y: auto; background: var(--card); border-radius: var(--r-card); }
.cls-delete-dialog .modal-body { position: static; width: 100%; margin: 0; text-align: left; box-shadow: none; }
.cls-delete-dialog .modal-title { overflow-wrap: anywhere; }
.cls-delete-counts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-8) var(--sp-16); padding-block: var(--sp-16); border-block: 1px solid var(--border); }
.cls-delete-counts dt { color: var(--fg-muted); }
.cls-delete-counts dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.cls-delete-label { display: block; margin: var(--sp-16) 0 var(--sp-8); overflow-wrap: anywhere; }
.cls-delete-status { min-height: 1.4em; font-size: var(--fs-14); }
.cls-delete-status.is-error { color: var(--c-alert); }
.cls-delete-dialog .modal-actions { flex-wrap: wrap; }
.cls-delete-dialog :is(button, input) { min-height: 44px; }
@media (max-width: 480px) {
  .cls-delete-dialog .modal-actions > button { flex: 1 1 auto; }
  .cls-delete-dialog .modal-actions > .btn-danger { flex-basis: 100%; }
}