/* A focused teacher workspace: identity and navigation stay in view.
   Corners, spacing and type come from the scales in tokens.css. */
html:has(.teacher-review[open]) { overflow: hidden; scrollbar-gutter: auto; }
.teacher-review { --tr-pad: clamp(var(--sp-16), 2.5vw, var(--sp-32)); position: fixed; inset: 0; box-sizing: border-box; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; overflow: hidden; scrollbar-gutter: auto; border: 0; border-radius: 0; background: var(--bg); color: var(--fg); font: 400 var(--fs-14)/1.5 var(--font-body); }
.teacher-review:not([open]) { display: none; }
.teacher-review[open] { display: block; }
.teacher-review::backdrop { background: var(--bg); }
.teacher-review *, .teacher-review *::before, .teacher-review *::after { box-sizing: border-box; }
.tr-shell { display: grid; grid-template-areas: "header" "body" "notice" "footer"; grid-template-rows: auto minmax(0, 1fr) auto auto; width: 100%; height: 100%; min-width: 0; min-height: 0; }
.tr-header { grid-area: header; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); min-width: 0; padding: var(--sp-16) var(--tr-pad); border-bottom: 1px solid var(--border); background: var(--card); }
.tr-identity { min-width: 0; }
.tr-context { margin: 0; color: var(--fg-muted); font-size: var(--fs-13); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-identity h2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin: 0; overflow: hidden; overflow-wrap: anywhere; color: var(--fg); font: 650 clamp(1.125rem, 1.8vw, 1.375rem)/1.3 var(--font-head); letter-spacing: -.015em; }
.teacher-review button, .teacher-review select { min-height: 44px; }
.teacher-review button { font-family: var(--font-body); }
.tr-close { display: inline-flex; align-items: center; justify-content: center; flex: none; gap: var(--sp-8); min-width: 44px; min-height: 44px; padding: var(--sp-8) var(--sp-16); border: 1px solid var(--border-strong); border-radius: var(--r-btn); background: var(--card); color: var(--fg); font-size: var(--fs-14); cursor: pointer; }
.tr-close svg, .tr-question-link > svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tr-close:hover { background: var(--surface-hover); }
.tr-body { grid-area: body; min-width: 0; min-height: 0; padding: var(--sp-24) var(--tr-pad) var(--sp-32); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable both-edges; scroll-padding-block: var(--sp-16); }
.tr-body > :is(.tr-summary, .tr-question-view, .tr-loading, .tr-error, .tr-empty) { width: 100%; max-width: 76rem; margin-inline: auto; }
.tr-summary { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--sp-24); }
.tr-summary-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-24); min-width: 0; }
.tr-summary-head h3, .tr-summary-counts { grid-column: 1; }
.tr-summary-head h3 { margin: 0; color: var(--fg); font: 650 var(--fs-18)/1.4 var(--font-head); }
.tr-summary-counts { margin: var(--sp-4) 0 0; color: var(--fg-muted); font-size: var(--fs-14); font-variant-numeric: tabular-nums; }
.tr-start { grid-column: 2; grid-row: 1 / 3; justify-self: end; min-height: 44px; padding: var(--sp-8) var(--sp-16); border: 1px solid transparent; border-radius: var(--r-btn); background: var(--action); color: var(--action-ink); font-size: var(--fs-14); font-weight: 600; cursor: pointer; }
.tr-start:disabled { opacity: .5; cursor: default; }
/* A table container: the rows inside keep its corner at their outer ends, one
   pixel in from the border. */
.tr-question-list { grid-column: 1 / -1; min-width: 0; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--card); }
.tr-question-link { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto 1.125rem; align-items: center; gap: var(--sp-16); width: 100%; min-width: 0; min-height: 68px; margin: 0; padding: .75rem var(--sp-16); border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; color: var(--fg); font: 400 var(--fs-14)/1.5 var(--font-body); text-align: left; cursor: pointer; }
.tr-question-link:first-child { border-radius: calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0; }
.tr-question-link:last-child { border-bottom: 0; border-radius: 0 0 calc(var(--r-card) - 1px) calc(var(--r-card) - 1px); }
.tr-question-link:only-child { border-radius: calc(var(--r-card) - 1px); }
.tr-question-link:hover { background: var(--surface-hover); }
.tr-question-link[aria-current="true"] { background: var(--accent-soft); }
.tr-question-number { display: grid; place-items: center; min-height: 2.25rem; border-radius: var(--r-xs); background: var(--bg-soft); color: var(--fg-muted); font-size: var(--fs-13); font-weight: 600; font-variant-numeric: tabular-nums; }
.tr-question-copy { display: grid; gap: var(--sp-4); min-width: 0; }
.tr-question-copy strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-size: var(--fs-14); font-weight: 600; line-height: 1.45; }
.tr-question-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-muted); font-size: var(--fs-13); }
.tr-question-state { color: var(--fg-muted); font-size: var(--fs-13); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-question-state.is-reviewed, .tr-question-link:not(.needs-review) .tr-question-state { color: var(--c-grass-deep); }
.tr-question-link > svg { color: var(--fg-muted); }
.tr-question-title { max-width: 70ch; margin: 0 0 var(--sp-16); color: var(--fg); font: 650 clamp(1.125rem, 1.8vw, 1.5rem)/1.45 var(--font-head); overflow-wrap: anywhere; }
.tr-question-context { min-width: 0; margin: 0 0 var(--sp-8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-muted); font-size: var(--fs-13); }
.tr-attempt-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-8) var(--sp-16); margin: 0 0 var(--sp-16); padding: var(--sp-8) var(--sp-16); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--card); }
.tr-attempt-bar label { display: flex; align-items: center; gap: var(--sp-8); min-width: 0; max-width: 100%; margin: 0; color: var(--fg-muted); font-size: var(--fs-13); }
.tr-attempt-bar .select-wrap { flex: 0 1 22rem; width: min(22rem, 100%); min-width: 0; max-width: 100%; }
.teacher-review .tr-attempt-bar select { width: 100%; min-height: 44px; padding: var(--sp-8) var(--sp-32) var(--sp-8) .75rem; font: 400 var(--fs-13)/1.5 var(--font-body); }
.tr-attempt-bar audio { width: min(22rem, 100%); max-width: 100%; height: 40px; }
.tr-attempt-bar .cls-listen { margin: 0 0 0 auto; min-height: 44px; }
.tr-answer { min-width: 0; margin: 0; padding: 0; list-style: none; }
.teacher-review .cls-attempt-item { display: block; min-width: 0; margin: 0; padding: var(--sp-24); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--card); }
.teacher-review .cls-attempt-item:has(> .rv-evidence) { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(20rem, .85fr); gap: var(--sp-24) clamp(var(--sp-24), 3vw, var(--sp-48)); }
.teacher-review .rv-head { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8); margin: 0; padding: 0 0 var(--sp-16); border-bottom: 1px solid var(--border); }
.teacher-review .rv-ord { font-size: var(--fs-14); }
.teacher-review .rv-when { font-size: var(--fs-13); }
.teacher-review .rv-state { margin-left: auto; padding: var(--sp-4) 0; border: 0; font: 500 var(--fs-13)/1.5 var(--font-body); }
.teacher-review .rv-evidence { grid-column: 1; min-width: 0; }
/* The student's words stay in view while the teacher works down the key
   points and the decision beside them, so a quote can be checked against the
   transcript without scrolling back up. Two columns only. */
@media (min-width: 961px) {
  .teacher-review .rv-evidence { position: sticky; top: 0; align-self: start; max-height: calc(100dvh - 12rem); overflow: auto; }
}
.teacher-review .rv-decision { grid-column: 2; min-width: 0; padding-left: clamp(var(--sp-24), 2.5vw, var(--sp-32)); border-left: 1px solid var(--border); }
.teacher-review .rv-label { margin: 0 0 var(--sp-8); color: var(--fg-muted); font: 600 var(--fs-13)/1.5 var(--font-body); text-transform: none; letter-spacing: 0; }
.teacher-review .rv-said { margin: 0 0 var(--sp-16); padding: var(--sp-16); border-left: 2px solid var(--border-strong); background: var(--field); color: var(--fg); font: 400 var(--fs-16)/1.7 var(--font-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.teacher-review .rv-missed { margin: 0 0 var(--sp-16); color: var(--fg-muted); font-size: var(--fs-14); line-height: 1.6; }
.teacher-review .rv-missed li + li { margin-top: var(--sp-8); }
.teacher-review .rv-aifb { margin: 0 0 var(--sp-16); color: var(--fg-muted); font-size: var(--fs-14); line-height: 1.6; overflow-wrap: anywhere; }
.teacher-review .rv-suggested { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8); margin: 0; padding: var(--sp-16); border: 0; border-radius: var(--r-sm); background: var(--bg-soft); }
.teacher-review .rv-suggested .rv-label { margin: 0; }
.teacher-review .rv-figure { font: 600 var(--fs-18)/1.4 var(--font-body); font-variant-numeric: tabular-nums; }
.teacher-review .rv-verdict { color: var(--fg-muted); font-size: var(--fs-13); }
/* In the figure's place on a hand-marked answer. An instruction, so it keeps the
   foreground colour a muted verdict would drop. */
.rv-hand-marked { color: var(--fg); font-size: var(--fs-13); line-height: 1.5; }
.teacher-review .rv-decision-title { margin: 0 0 var(--sp-16); color: var(--fg); font: 650 1.0625rem/1.4 var(--font-head); }
.teacher-review .rv-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-16); margin: 0 0 var(--sp-16); padding: 0; border: 0; }
.teacher-review .rv-mark-input, .teacher-review .rv-fb-input { min-height: 44px; padding: var(--sp-8) .75rem; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--field); color: var(--fg); font: 400 var(--fs-14)/1.5 var(--font-body); }
.teacher-review .rv-mark-input { width: min(10rem, 100%); max-width: 100%; font-variant-numeric: tabular-nums; }
.teacher-review .rv-fb-input { width: 100%; min-height: 9rem; resize: vertical; }
.teacher-review .rv-acts { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-8); }
.teacher-review .rv-acts .btn-mini { min-height: 44px; padding: var(--sp-8) .75rem; font-size: var(--fs-13); }
.teacher-review .rv-undo { margin-left: 0; }
.tr-footer { grid-area: footer; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--sp-16); min-width: 0; padding: var(--sp-8) var(--tr-pad); border-top: 1px solid var(--border); background: var(--card); }
.teacher-review .tr-footer button { min-height: 44px; padding: var(--sp-8) .75rem; font-size: var(--fs-13); white-space: nowrap; }
.tr-summary-button { grid-column: 1; justify-self: start; }
.tr-draft-state { grid-column: 1 / -1; min-width: 0; margin: 0; color: var(--fg-muted); font-size: var(--fs-13); line-height: 1.4; text-align: center; overflow-wrap: anywhere; }
.tr-pagination { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: var(--sp-8); min-width: 0; }
.tr-pagination > span { min-width: 4rem; color: var(--fg-muted); font-size: var(--fs-13); text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tr-jump { grid-column: 3; display: flex; align-items: center; justify-self: end; gap: var(--sp-8); width: 100%; max-width: 22rem; min-width: 0; margin: 0; color: var(--fg-muted); font-size: var(--fs-13); white-space: nowrap; }
.tr-jump .select-wrap { flex: 1; width: 100%; min-width: 0; max-width: none; }
.teacher-review .tr-jump select { width: 100%; min-width: 0; min-height: 44px; padding: var(--sp-8) var(--sp-32) var(--sp-8) .75rem; font: 400 var(--fs-13)/1.5 var(--font-body); }
.tr-notice { grid-area: notice; margin: 0; padding: var(--sp-8) var(--tr-pad); border-top: 1px solid var(--border); background: var(--accent-soft); color: var(--c-accent-ink); font-size: var(--fs-13); line-height: 1.5; overflow-wrap: anywhere; }
.tr-notice:empty, .tr-notice[hidden] { display: none; }
.tr-notice.is-error { background: var(--card); color: var(--c-alert); }
.tr-loading, .tr-error, .tr-empty { margin-block: 0; padding: var(--sp-24); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--card); color: var(--fg-muted); font-size: var(--fs-14); line-height: 1.6; }
.tr-error { color: var(--c-alert); }
.teacher-review :is(button, input, textarea, select):focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: 2px; box-shadow: none; }
.teacher-review :is(h2, h3)[tabindex="-1"]:focus { outline: 0; box-shadow: none; }
.teacher-review .tr-question-link:focus-visible { outline-offset: -3px; }
.teacher-review :is(button, select):disabled { cursor: default; opacity: .5; }
.teacher-review [hidden] { display: none !important; }
@media (max-width: 960px) {
  .teacher-review .cls-attempt-item:has(> .rv-evidence) { grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); }
  .teacher-review .rv-evidence, .teacher-review .rv-decision { grid-column: 1; }
  .teacher-review .rv-decision { padding: var(--sp-24) 0 0; border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 700px) {
  .teacher-review { --tr-pad: var(--sp-16); }
  .tr-body { padding-top: var(--sp-16); padding-bottom: var(--sp-24); scrollbar-gutter: stable; }
  .tr-summary { grid-template-columns: minmax(0, 1fr); gap: var(--sp-16); }
  .tr-summary-head { grid-template-columns: minmax(0, 1fr); }
  .tr-start { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--sp-16); }
  .tr-question-link { grid-template-columns: 2rem minmax(0, 1fr) 1.125rem; gap: var(--sp-4) .75rem; padding: .75rem; }
  .tr-question-number { grid-column: 1; grid-row: 1 / 3; min-height: 2rem; }
  .tr-question-copy { grid-column: 2; grid-row: 1; }
  .tr-question-state { grid-column: 2; grid-row: 2; }
  .tr-question-link > svg { grid-column: 3; grid-row: 1 / 3; }
  .teacher-review .cls-attempt-item { padding: var(--sp-16); }
  .tr-footer { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .tr-pagination { grid-column: 1; justify-self: stretch; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--sp-8); }
  .teacher-review .tr-footer button { padding-inline: var(--sp-8); }
  .teacher-review .tr-pagination button { min-width: 0; white-space: normal; }
  .tr-jump { grid-column: 1 / -1; justify-self: stretch; max-width: none; }
}
@media (max-width: 380px) {
  .tr-header { gap: var(--sp-8); padding-block: var(--sp-8); }
  .tr-close { padding-inline: var(--sp-8); }
  .tr-pagination > span { min-width: 3.25rem; }
  .tr-question-link { gap: var(--sp-4) var(--sp-8); padding-inline: var(--sp-8); }
}
@media (pointer: coarse) {
  .teacher-review :is(.rv-mark-input, .rv-fb-input, select) { font-size: var(--fs-16); }
}
@media (prefers-reduced-motion: no-preference) {
  .tr-question-link, .tr-close { transition: background-color 100ms ease; }
}

/* --- Review, second pass: evidence, findings, release, history, corrections ---
   Unscoped where the compact demo card shares them, scoped to .teacher-review
   where only the full-screen workspace needs them. Every status carries a word;
   colour only repeats it. */
.rv-side-label { margin-top: 0; }
.rv-audio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); margin: 0 0 var(--sp-16); }
.rv-audio-el { display: block; width: 100%; max-width: 30rem; height: 40px; }
.rv-audio-status { flex-basis: 100%; margin: 0; color: var(--c-alert); font-size: var(--fs-13); line-height: 1.5; }
/* Evidence in the transcript: a tint and an underline, so it survives greyscale
   and a printout, with the key point's number beside it. The mark keeps its
   2px corner and .1em inset: it is a highlight on a run of text, not a surface,
   and a larger corner would curl the ends of the underline. */
.rv-quote { padding: 0 .1em; border-radius: 2px; background: color-mix(in oklch, var(--c-gold) 20%, transparent); color: inherit; box-shadow: inset 0 -2px 0 color-mix(in oklch, var(--c-gold-deep) 65%, transparent); font-style: normal; }
.rv-quote-ref { margin-left: .15em; color: var(--c-gold-deep); font: 600 var(--fs-13)/1 var(--font-body); font-style: normal; }
.rv-criteria { margin: 0 0 var(--sp-16); }
.rv-criteria-list { display: grid; gap: var(--sp-8); margin: 0; padding: 0; list-style: none; }
.rv-criterion { padding: var(--sp-8) var(--sp-16); border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: var(--r-sm); background: var(--card); }
.rv-criterion.is-met { border-left-color: var(--c-grass); }
.rv-criterion.is-partial { border-left-color: var(--c-gold); }
.rv-criterion.is-missing { border-left-color: var(--c-berry); }
/* Dashed as well as a different colour: "the teacher decides this one" should
   not depend on telling two hues apart. */
.rv-criterion.is-unsure { border-left-style: dashed; border-left-color: var(--c-grape); }
.rv-criterion-head { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; align-items: baseline; gap: var(--sp-8); }
.rv-criterion-num { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: var(--r-xs); background: var(--bg-soft); color: var(--fg-muted); font: 600 var(--fs-13)/1 var(--font-body); font-variant-numeric: tabular-nums; }
.rv-criterion-point { color: var(--fg); font-size: var(--fs-14); line-height: 1.45; overflow-wrap: anywhere; }
.rv-criterion-status { color: var(--fg-muted); font: 600 var(--fs-13)/1.45 var(--font-body); text-align: right; }
.rv-criterion.is-met .rv-criterion-status { color: var(--c-grass-deep); }
.rv-criterion.is-partial .rv-criterion-status { color: var(--c-gold-deep); }
.rv-criterion.is-missing .rv-criterion-status { color: var(--c-berry-deep); }
.rv-criterion.is-unsure .rv-criterion-status { color: var(--fg); }
/* Indented by the number's column and the gap after it, so the quote lines up
   with the key point's words. */
.rv-criterion-quote { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-8); margin: var(--sp-4) 0 0 calc(1.5rem + var(--sp-8)); color: var(--fg-muted); font-size: var(--fs-13); line-height: 1.55; overflow-wrap: anywhere; }
.rv-criterion-quote q { color: var(--fg); font-style: italic; }
.rv-quote-missing { color: var(--c-alert); }
.rv-note { margin: 0 0 var(--sp-16); color: var(--fg-muted); font-size: var(--fs-13); line-height: 1.55; overflow-wrap: anywhere; }
.rv-note.rv-confidence, .rv-note.rv-needs-review { padding: var(--sp-8) var(--sp-16); border-left: 3px solid var(--c-gold); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: color-mix(in oklch, var(--c-gold) 10%, var(--card)); color: var(--fg); }
.rv-note.rv-confidence { margin-top: var(--sp-8); }
.rv-standing { margin: 0 0 var(--sp-16); color: var(--fg); font-size: var(--fs-13); line-height: 1.5; }
.rv-standing:focus { outline: 0; }
.rv-standing:focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: 2px; }
.rv-hint { margin: var(--sp-8) 0 0; color: var(--fg-muted); font-size: var(--fs-13); line-height: 1.5; }
.rv-history { margin: var(--sp-16) 0 0; padding-top: var(--sp-16); border-top: 1px solid var(--border); color: var(--fg-muted); font-size: var(--fs-13); line-height: 1.5; }
.rv-history-latest { margin: 0; overflow-wrap: anywhere; }
.rv-history-all > summary { display: inline-flex; align-items: center; min-height: 32px; color: var(--c-accent-ink); cursor: pointer; }
.rv-history-all ul { margin: var(--sp-8) 0 0; padding-left: var(--sp-16); }
/* A log of one-line entries: --sp-4 apart, like the lines of a list. */
.rv-history-all li + li { margin-top: var(--sp-4); }
.rv-fix { margin: var(--sp-16) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.rv-fix > summary { display: flex; align-items: center; min-height: 44px; color: var(--fg); font: 600 var(--fs-13)/1.4 var(--font-body); cursor: pointer; }
.rv-fix-body { display: grid; gap: var(--sp-16); padding: 0 0 var(--sp-8); }
.rv-fix-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-8); }
.rv-fix-row > label { display: grid; flex: 1 1 14rem; gap: var(--sp-8); min-width: 0; margin: 0; }
.rv-fix-row .select-wrap { width: 100%; }
.rv-move-select { width: 100%; min-height: 44px; }
/* The three new states, beside the four in styles.css. Held is gold for the
   reason the redo is: it is waiting on somebody, here the teacher. */
/* An answer saved after its due date. A chip on the time's line, in the
   overdue colour the class page uses, quieter than the state beside it. */
.rv-late { display: inline-block; padding: 0 var(--sp-8); border: 1px solid color-mix(in oklch, var(--c-overdue) 40%, transparent); border-radius: var(--r-pill); color: var(--c-overdue); font: 500 var(--fs-13)/1.5 var(--font-sans); white-space: nowrap; }
.rv-state.is-held { color: var(--c-gold-deep); border-color: color-mix(in oklch, var(--c-gold) 45%, transparent); }
.rv-state.is-void { color: var(--fg-muted); border-style: dashed; }
.rv-state.is-excused { color: var(--c-accent-ink); border-color: color-mix(in oklch, var(--c-teal) 45%, transparent); }
.teacher-review .rv-state.is-void { text-decoration: line-through; }
.teacher-review .rv-criterion-quote .rv-jump { min-height: 36px; padding: var(--sp-4) .75rem; font-size: var(--fs-13); }
.teacher-review .rv-decision .rv-suggested { margin-bottom: var(--sp-8); }
.teacher-review .rv-decision-title { margin-top: var(--sp-24); }
.teacher-review .rv-history-all > summary { min-height: 44px; }
.tr-release-held { grid-column: 2; justify-self: end; margin-top: var(--sp-8); min-height: 44px; padding: var(--sp-8) var(--sp-16); font-size: var(--fs-14); }
/* The class page's "Release N approved", beside the count of answers to review. */
.cls-card-progress > .cls-section-header .cls-release-held { flex: none; margin-left: auto; min-height: 36px; padding: var(--sp-4) .75rem; font-size: var(--fs-13); white-space: nowrap; }
.cls-card-progress > .cls-section-header .cls-release-held:not([hidden]) + .cls-work-settings { margin-left: 0; }
@container class-card (max-width: 20rem) {
  .cls-card-progress > .cls-section-header .cls-release-held { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin: var(--sp-8) 0 0; }
}
@media (pointer: coarse) {
  .cls-card-progress > .cls-section-header .cls-release-held { min-height: 44px; }
  .teacher-review .rv-criterion-quote .rv-jump { min-height: 44px; }
}
@media (max-width: 700px) {
  .tr-release-held { grid-column: 1; justify-self: start; }
  .rv-criterion-head { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .rv-criterion-status { grid-column: 2; text-align: left; }
  .rv-criterion-quote { margin-left: 0; }
}