/* Riwaq quiz and library surfaces: the class quiz collection, the question bank, authoring,
   the attempt, marking and review, the report, the learner's result, release settings, and the
   class library (collection, upload, link, topics, storage, one resource). Every colour is a
   shared rw pair from the foundation; layout is by named contract (page gutter, panel inset,
   field stack, row density). Loaded after riwaq-operations.css. An interactive element may shed
   its min width (`min-inline-size: 0`) ONLY where the same rule guarantees the press another
   way — here a large flex-basis in a wrapping row (the editor's answer inputs), `flex-grow`
   filling the remaining space of a non-wrapping row beside fixed 48px controls (the outline's
   question pick beside its move buttons), or `inline-size: 100%` inside a floored grid track
   (the settings fields) — never as a bare reset, so no target falls below
   `--rw-target-min`. That pairing keeps the zero-specificity width-reset trap documented in
   riwaq-bespoke.css disarmed.

   SELECTION IS DRAWN FROM THE ATTRIBUTE THAT ANNOUNCES IT (aria-pressed, aria-checked,
   aria-current), in the forced-colors-safe doubled border and heavier weight the operations
   sheet established — and every pressed rule that grows the 1px border to 3px gives the 2px
   back in padding, so choosing never shifts the row. The bold text widening is the accepted
   switcher vocabulary. */

/* ── The quiz collection ────────────────────────────────────────────────────────────── */

/* The filter row: real buttons with counts, and the bank a quiet link beside them. */
.ic-quizlist__filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-2); }
.ic-quizlist__filter {
    display: inline-flex; align-items: center; gap: var(--rw-label-gap);
    min-block-size: var(--rw-target-min); min-inline-size: var(--rw-target-min);
    padding: var(--rw-space-1) var(--rw-label-gap);
    background: var(--rw-surface); color: var(--rw-ink);
    border: 1px solid var(--rw-control-border); border-radius: var(--rw-radius-control);
    font: inherit; font-size: var(--rw-text-small); cursor: pointer;
}
/* The chosen filter says so in the shared pressed vocabulary; padding gives the 2px back. */
.ic-quizlist__filter[aria-pressed="true"] {
    background: var(--rw-green); color: var(--rw-on-green);
    border: 3px double var(--rw-control-border); font-weight: 700;
    padding: calc(var(--rw-space-1) - 2px) calc(var(--rw-label-gap) - 2px);
}
.ic-quizlist__filtercount { font-variant-numeric: tabular-nums; font-weight: 700; }
.ic-quizlist__bank { display: inline-flex; align-items: center; min-block-size: var(--rw-target-min); min-inline-size: var(--rw-target-min); margin-inline-start: auto; }

/* The row: the title is the press, the facts are one quiet line beneath it.

   THE FACTS ARE SEPARATED BY SPACE, NOT BY A CHARACTER. Each of them is its own sentence and
   several of them already contain a "·" of their own, so a separator drawn between them competes
   with the ones inside them — which is exactly how "0 marks · 0 questions Draft · nothing written
   yet" came to read as a single run-on line. A wrapping flex row with a column gap wider than a
   word space does the whole job: nothing is generated, so nothing is announced, nothing can land
   at the start of a wrapped line, and the order follows the writing direction on its own. */
.ic-quizlist__facts {
    display: flex; flex-wrap: wrap; align-items: baseline;
    column-gap: var(--rw-space-3); row-gap: var(--rw-space-1);
}
.ic-quizlist__title { font-weight: 600; min-inline-size: 0; overflow-wrap: anywhere; }
a.ic-quizlist__title { display: inline-flex; align-items: center; min-block-size: var(--rw-target-min); color: var(--rw-ink); }
.ic-quizlist__worth, .ic-quizlist__counts { color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
.ic-quizlist__state { color: var(--rw-ink-muted); font-size: var(--rw-text-small); font-variant-numeric: tabular-nums; }
/* "Learners cannot see this yet" is who-can-see information, not an error: the info pair. */
.ic-quizlist__hidden { color: var(--rw-info-fg); background: var(--rw-info-bg); padding: var(--rw-space-1) var(--rw-label-gap); border-radius: var(--rw-radius-control); font-size: var(--rw-text-small); }
.ic-quizlist__empty { display: flex; flex-wrap: wrap; gap: var(--rw-space-3); }

/* ── The question bank ──────────────────────────────────────────────────────────────── */

/* The bank's own filter row was deleted when the page adopted `Collection` (F1): the search and
   the copy-into chooser are the collection's filters now, and the shared row in riwaq-operations
   sizes them. The one thing that row did not carry is below, with the other bounded selects. */
.ic-bank__prompt { font-weight: 600; min-inline-size: 0; overflow-wrap: anywhere; }
.ic-bank__meta { color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
/* "The copy in unit 3 is the older wording" is a divergence a teacher must read: warning pair. */
.ic-bank__diverged { color: var(--rw-warning-fg); background: var(--rw-warning-bg); padding: var(--rw-space-1) var(--rw-label-gap); border-radius: var(--rw-radius-control); font-size: var(--rw-text-small); }
.ic-bank__notarget { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); }

/* ── The attempt ────────────────────────────────────────────────────────────────────── */

/* One question per screen reads at the form measure, wherever the shell is wider. */
.ic-attempt { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-4); max-inline-size: var(--rw-form-measure); }
.ic-attempt__bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--rw-label-gap) var(--rw-space-3); }
/* The position line is the document's heading, sized as a line rather than a title —
   anything taller pushes the first option below the fold at 390 (M05). */
.ic-attempt__position { font-size: var(--rw-text-lead); font-weight: 700; margin: 0; }
.ic-attempt__clock { font-variant-numeric: tabular-nums; font-weight: 700; margin: 0; }
/* The bar fills from the inline start (the span's inline-size is the data-driven counted
   style attribute), so it grows toward the reader in both directions. */
.ic-attempt__progress { block-size: var(--rw-space-2); background: var(--rw-ground-2); border-radius: var(--rw-radius-control); }
.ic-attempt__progressfill { display: block; block-size: 100%; background: var(--rw-green); border-radius: inherit; }
.ic-attempt__question { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-3); }
.ic-attempt__prompt { font-size: var(--rw-text-lead); margin: 0; min-inline-size: 0; overflow-wrap: anywhere; max-inline-size: var(--rw-reading-measure); }
.ic-attempt__options { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-2); }
/* Taller than the 48px floor on purpose: a mis-tap on a graded question is not a small
   mistake, so each option is a full-width 52px press (M05). */
.ic-attempt__option {
    display: block; inline-size: 100%; text-align: start;
    min-block-size: calc(var(--rw-target-min) + .25rem);
    padding: var(--rw-space-2) var(--rw-space-3);
    background: var(--rw-surface); color: var(--rw-ink);
    border: 1px solid var(--rw-control-border); border-radius: var(--rw-radius-control);
    font: inherit; cursor: pointer; overflow-wrap: anywhere;
}
/* The chosen answer is drawn from aria-checked — the radio's own announcement — in the
   shared pressed vocabulary, with the border's 2px given back. */
.ic-attempt__option[aria-checked="true"] {
    background: var(--rw-green); color: var(--rw-on-green);
    border: 3px double var(--rw-control-border); font-weight: 700;
    padding: calc(var(--rw-space-2) - 2px) calc(var(--rw-space-3) - 2px);
}
.ic-attempt__saved { color: var(--rw-ink-muted); font-size: var(--rw-text-small); margin: 0; }
.ic-attempt__move { display: flex; flex-wrap: wrap; gap: var(--rw-space-3); }
.ic-attempt__lede { max-inline-size: var(--rw-reading-measure); white-space: pre-wrap; }
.ic-attempt__facts { font-weight: 600; font-variant-numeric: tabular-nums; }
/* Shut is a refusal with a date in it, never an empty state — see the page's own comment. */
.ic-attempt__shut { color: var(--rw-ink-muted); background: var(--rw-ground-2); padding: var(--rw-space-3) var(--rw-space-4); border-radius: var(--rw-radius-control); max-inline-size: var(--rw-reading-measure); }
.ic-attempt__resume { max-inline-size: var(--rw-reading-measure); }
.ic-attempt__left { font-weight: 700; font-variant-numeric: tabular-nums; }
.ic-attempt__spoken { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); }
.ic-attempt__after { display: flex; flex-wrap: wrap; gap: var(--rw-space-3); }
/* Where the learner stands and the one thing to do about it, under the facts and the teacher's
   words. One block in all four states, so the region stops re-shaping itself. */
.ic-attempt__step { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-3); justify-items: start; }
.ic-attempt__after.ic-attempt__step { display: flex; flex-wrap: wrap; align-items: center; }

/* ── Authoring ──────────────────────────────────────────────────────────────────────── */

.ic-quizedit { display: flex; flex-wrap: wrap; align-items: start; gap: var(--rw-space-6); }
.ic-quizedit__outline { flex: 1 1 16rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-3); align-content: start; }
.ic-quizedit__pane { flex: 2 1 24rem; min-inline-size: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-field-stack); }
.ic-quizedit__outlinehead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--rw-label-gap) var(--rw-space-3); }
.ic-quizedit__total { font-weight: 600; font-variant-numeric: tabular-nums; margin: 0; }
.ic-quizedit__saved { color: var(--rw-ink-muted); font-size: var(--rw-text-small); font-variant-numeric: tabular-nums; }
.ic-quizedit__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-1); padding: 0; margin: 0; list-style: none; }
/* The current question carries a start-edge bar drawn on a transparent placeholder, so
   choosing one never shifts the list. */
.ic-quizedit__item { display: flex; align-items: center; gap: var(--rw-space-1); border-inline-start: var(--rw-space-1) solid transparent; min-inline-size: 0; }
.ic-quizedit__item.is-current { border-inline-start-color: var(--rw-accent-border); }
.ic-quizedit__item.is-current .ic-quizedit__pick { font-weight: 700; }
.ic-quizedit__pick {
    flex: 1 1 auto; display: flex; align-items: center; gap: var(--rw-space-2);
    min-block-size: var(--rw-target-min); min-inline-size: 0;
    padding: var(--rw-space-1) var(--rw-space-2);
    background: transparent; color: var(--rw-ink); border: 0; border-radius: var(--rw-radius-control);
    font: inherit; text-align: start; cursor: pointer;
}
.ic-quizedit__num { font-variant-numeric: tabular-nums; font-weight: 600; min-inline-size: 1.5rem; }
.ic-quizedit__kind { color: var(--rw-ink-muted); font-size: var(--rw-text-small); flex: 1 1 auto; min-inline-size: 0; overflow-wrap: anywhere; }
.ic-quizedit__marks { font-variant-numeric: tabular-nums; }
/* An incomplete question's mark cell is flagged in words' colour pair, not colour alone —
   the outline flag sentence below the list carries the words. */
.ic-quizedit__marks[data-quizincomplete="true"] { background: var(--rw-warning-bg); color: var(--rw-warning-fg); padding-inline: var(--rw-label-gap); border-radius: var(--rw-radius-control); font-weight: 700; }
.ic-quizedit__move { display: inline-flex; gap: var(--rw-space-1); }
.ic-quizedit__movebtn {
    display: inline-grid; place-items: center;
    min-block-size: var(--rw-target-min); min-inline-size: var(--rw-target-min);
    background: var(--rw-surface); color: var(--rw-ink);
    border: 1px solid var(--rw-control-border); border-radius: var(--rw-radius-control);
    font: inherit; cursor: pointer;
}
.ic-quizedit__movebtn:disabled { color: var(--rw-ink-muted); border-color: var(--rw-line); cursor: default; }

/* The sheet's handle exists only below the phone breakpoint; above it the outline is
   always drawn, whatever the open flag says — the hide rule lives inside the media query
   on purpose (the page's own contract, so no width is guessed at in C#). */
.ic-quizedit__sheettoggle {
    display: none;
    min-block-size: var(--rw-target-min); min-inline-size: var(--rw-target-min);
    padding: var(--rw-space-1) var(--rw-label-gap);
    background: var(--rw-surface); color: var(--rw-ink);
    border: 1px solid var(--rw-control-border); border-radius: var(--rw-radius-control);
    font: inherit; font-size: var(--rw-text-small); cursor: pointer;
}
@media (max-width: 48rem) {
    .ic-quizedit__sheettoggle { display: inline-flex; align-items: center; }
    .ic-quizedit__list.is-shut { display: none; }
}

/* What blocks the commitment, and who cannot see the draft: word pairs, never colour alone. */
.ic-quizedit__flag { color: var(--rw-warning-fg); background: var(--rw-warning-bg); padding: var(--rw-space-3) var(--rw-space-4); border-inline-start: var(--rw-space-1) solid currentColor; margin: 0; }
.ic-quizedit__hidden { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-2); justify-items: start; color: var(--rw-info-fg); background: var(--rw-info-bg); padding: var(--rw-space-3) var(--rw-space-4); border-inline-start: var(--rw-space-1) solid currentColor; margin: 0; max-inline-size: var(--rw-reading-measure); }
.ic-quizedit__hiddenlink { display: inline-flex; align-items: center; min-block-size: var(--rw-target-min); min-inline-size: var(--rw-target-min); color: inherit; font-weight: 600; }
.ic-quizedit__visible { margin: 0; color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); }
.ic-quizedit__commit { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-2); justify-items: start; }
/* The window a quiz already given is running to, where the commitment was. Margin zero: it is
   a child of the gapped commit stack, which owns the rhythm. */
.ic-quizedit__given { margin: 0; max-inline-size: var(--rw-reading-measure); }
.ic-quizedit__waits { color: var(--rw-ink-muted); font-size: var(--rw-text-small); margin: 0; max-inline-size: var(--rw-reading-measure); }
.ic-quizedit__banked { color: var(--rw-success-fg); background: var(--rw-success-bg); padding: var(--rw-space-2) var(--rw-space-3); border-radius: var(--rw-radius-control); margin: 0; }

/* One answer row: the text takes the room and wraps under stress; the shrink is paired
   with the 14rem basis in a wrapping row, the marking-input discipline. */
/* A fieldset's default min width is min-content, so without the explicit zero it refuses
   to shrink and widens the page when an answer input's 14rem basis outgrows a phone at
   200% text (measured; the qranges fieldset in the operations sheet pays the same). */
.ic-quizedit__answers { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-3); padding: var(--rw-space-4); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-panel); margin: 0; min-inline-size: 0; }
/* A legend sits outside the base sheet's p/h/a/label wrap rule and refuses to shrink:
   "Antwortmöglichkeiten" at 200% text on a phone measured 398px against 320 (de probe). */
.ic-quizedit__legend { font-weight: 600; padding: 0; min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; }
.ic-quizedit__answer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-2); }
.ic-quizedit__answer > .ic-input { flex: 1 1 14rem; min-inline-size: 0; inline-size: auto; }
.ic-quizedit__correct { display: inline-flex; align-items: center; gap: var(--rw-label-gap); min-block-size: var(--rw-target-min); cursor: pointer; }
.ic-quizedit__drop {
    display: inline-grid; place-items: center;
    min-block-size: var(--rw-target-min); min-inline-size: var(--rw-target-min);
    background: var(--rw-surface); color: var(--rw-danger-ink);
    border: 1px solid var(--rw-control-border); border-radius: var(--rw-radius-control);
    font: inherit; cursor: pointer;
}
.ic-quizedit__rules { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-3); }
.ic-quizedit__rule { display: inline-flex; align-items: center; gap: var(--rw-label-gap); min-block-size: var(--rw-target-min); cursor: pointer; }
.ic-quizedit__rulebtn {
    display: inline-flex; align-items: center;
    min-block-size: var(--rw-target-min); min-inline-size: var(--rw-target-min);
    padding: var(--rw-space-1) var(--rw-label-gap);
    background: var(--rw-surface); color: var(--rw-ink);
    border: 1px solid var(--rw-line); border-radius: var(--rw-radius-control);
    font: inherit; font-size: var(--rw-text-small); cursor: pointer;
}
.ic-quizedit__rulebtn[aria-pressed="true"] {
    background: var(--rw-green); color: var(--rw-on-green);
    border: 3px double var(--rw-control-border); font-weight: 700;
    padding: calc(var(--rw-space-1) - 2px) calc(var(--rw-label-gap) - 2px);
}
.ic-quizedit__actions { display: flex; flex-wrap: wrap; gap: var(--rw-space-3); }

/* THE LAST STORED INSTANT AND THE RULE THAT PRODUCED IT, on one line. There is no autosave on
   this screen (F9 section 4), so the time alone would read as a heartbeat; the sentence beside it
   is what stops that and is quiet rather than hidden. */
.ic-quizedit__storing { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--rw-label-gap) var(--rw-space-3); margin: 0; max-inline-size: var(--rw-reading-measure); }
.ic-quizedit__nosave { color: var(--rw-ink-muted); font-size: var(--rw-text-small); flex: 1 1 18rem; min-inline-size: 0; }

/* The open question's own heading, inside the region already labelled "The questions" — a level
   below the section's label rather than a second one beside it. */
.ic-quizedit__questionhead { font-size: var(--rw-text-lead); min-inline-size: 0; }
.ic-quizedit__stale { color: var(--rw-ink-muted); font-size: var(--rw-text-small); margin: 0; max-inline-size: var(--rw-reading-measure); }

/* A frozen quiz says in a word which option counts, on both sides: readonly does nothing at all to
   a checkbox, and a state told only by absence is a state the reader has to infer. */
.ic-quizedit__counts { display: inline-flex; align-items: center; min-block-size: var(--rw-target-min); color: var(--rw-ink-muted); font-size: var(--rw-text-small); font-weight: 600; }

/* The learner preview stands where the outline and the pane stand, and carries no heading of its
   own: the region above it is already named. */
.ic-quizedit__previewlist { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-3); min-inline-size: 0; }

/* The learner-preview card wears the learner's own surface, so what reads badly out of
   context reads badly here first. */
.ic-quizedit__preview { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-2); padding: var(--rw-panel-inset); background: var(--rw-surface); border: 1px solid var(--rw-accent-border); border-radius: var(--rw-radius-panel); min-inline-size: 0; }
.ic-quizedit__previewpos { color: var(--rw-ink-muted); font-size: var(--rw-text-small); margin: 0; }
.ic-quizedit__previewprompt { font-size: var(--rw-text-lead); margin: 0; overflow-wrap: anywhere; max-inline-size: var(--rw-reading-measure); }
.ic-quizedit__previewoptions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-1); margin: 0; padding-inline-start: var(--rw-space-4); }
.ic-quizedit__previewoption { min-inline-size: 0; overflow-wrap: anywhere; }
.ic-quizedit__previewnote { color: var(--rw-ink-muted); margin: 0; }

/* ── Marking and review ─────────────────────────────────────────────────────────────── */

.ic-marking__summary { max-inline-size: var(--rw-reading-measure); }
.ic-marking__kind { color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
.ic-marking__state { font-weight: 600; font-variant-numeric: tabular-nums; }
.ic-marking__state[data-markingstate="waiting"] { color: var(--rw-warning-fg); background: var(--rw-warning-bg); padding: 0 var(--rw-label-gap); border-radius: var(--rw-radius-control); }
.ic-marking__releasenote { max-inline-size: var(--rw-reading-measure); }
.ic-marking__skipped, .ic-review__skipped { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-1); margin: 0; padding-inline-start: var(--rw-space-4); }

/* Moving between questions: one chip per question, the current one in the pressed
   vocabulary drawn from aria-current, its border growth given back in padding. */
.ic-review__questions { display: flex; flex-wrap: wrap; gap: var(--rw-space-2); }
.ic-review__question {
    display: inline-flex; align-items: center; gap: var(--rw-label-gap);
    min-block-size: var(--rw-target-min); min-inline-size: var(--rw-target-min);
    justify-content: center; padding: var(--rw-space-1) var(--rw-label-gap);
    background: var(--rw-surface); color: var(--rw-ink); text-decoration: none;
    border: 1px solid var(--rw-line); border-radius: var(--rw-radius-control);
    font-variant-numeric: tabular-nums;
}
.ic-review__question[aria-current="page"] {
    background: var(--rw-green); color: var(--rw-on-green);
    border: 3px double var(--rw-control-border); font-weight: 700;
    padding: calc(var(--rw-space-1) - 2px) calc(var(--rw-label-gap) - 2px);
    text-decoration: underline; text-underline-offset: var(--rw-space-1);
}
.ic-review__position { font-weight: 600; }
/* The waiting count is a count with its words in the accessible name (see the markup). */
.ic-review__waiting { background: var(--rw-warning-bg); color: var(--rw-warning-fg); padding: 0 var(--rw-label-gap); border-radius: var(--rw-radius-control); font-size: var(--rw-text-small); font-weight: 700; }

/* One learner's answer is a small workspace: name, mark, the words they gave, the edit. */
.ic-review__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-3); padding: var(--rw-space-4); background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-panel); min-inline-size: 0; }
.ic-review__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--rw-label-gap) var(--rw-space-3); }
.ic-review__name { font-weight: 600; min-inline-size: 0; overflow-wrap: anywhere; }
.ic-review__mark { font-variant-numeric: tabular-nums; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--rw-label-gap); }
.ic-review__provisional { background: var(--rw-info-bg); color: var(--rw-info-fg); padding: 0 var(--rw-label-gap); border-radius: var(--rw-radius-control); font-size: var(--rw-text-small); font-weight: 600; }
/* The answer as they gave it, kept apart from the marker's own prose by a quiet start edge. */
.ic-review__answer { margin: 0; padding-inline-start: var(--rw-space-3); border-inline-start: var(--rw-space-1) solid var(--rw-line); white-space: pre-wrap; max-inline-size: var(--rw-reading-measure); min-inline-size: 0; overflow-wrap: anywhere; }
.ic-review__chose { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
.ic-review__matches { color: var(--rw-success-fg); background: var(--rw-success-bg); padding: 0 var(--rw-label-gap); border-radius: var(--rw-radius-control); font-size: var(--rw-text-small); font-weight: 600; margin-inline-start: var(--rw-label-gap); }
/* "Left blank" is a different sentence from a wrong answer, and reads as the record's own words. */
.ic-review__blank { color: var(--rw-ink-muted); margin: 0; }
.ic-review__correctionwas { color: var(--rw-info-fg); background: var(--rw-info-bg); padding: var(--rw-space-2) var(--rw-space-3); border-inline-start: var(--rw-space-1) solid currentColor; margin: 0; max-inline-size: var(--rw-reading-measure); }
.ic-review__edit { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-field-stack); max-inline-size: var(--rw-form-measure); }
.ic-review__editactions { display: flex; flex-wrap: wrap; gap: var(--rw-space-3); }
.ic-review__reach { max-inline-size: var(--rw-reading-measure); }
/* What the control below acts on, said before the figure: pressing Release from a page headed
   with one question releases every eligible paper in the quiz. */
.ic-review__scope { font-weight: 600; max-inline-size: var(--rw-reading-measure); }

/* ── The report ─────────────────────────────────────────────────────────────────────── */

.ic-quizreport__finding { font-weight: 600; margin: 0; max-inline-size: var(--rw-reading-measure); }
/* The report's one answer, and how it was counted, in that order (F4 section 1). It used to be
   the page header's lede, which is the slot for orientation on a first visit. */
.ic-quizreport__headline { font-size: var(--rw-text-lead); font-weight: 700; font-variant-numeric: tabular-nums; margin: 0; max-inline-size: var(--rw-reading-measure); }
.ic-quizreport__calc { color: var(--rw-ink-muted); font-size: var(--rw-text-small); margin: 0; max-inline-size: var(--rw-reading-measure); }
.ic-quizreport__option { font-weight: 400; color: var(--rw-ink-muted); margin-inline-start: var(--rw-label-gap); }
.ic-quizreport__kind { color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
.ic-quizreport__small { color: var(--rw-info-fg); background: var(--rw-info-bg); padding: var(--rw-space-3) var(--rw-space-4); border-inline-start: var(--rw-space-1) solid currentColor; margin: 0; max-inline-size: var(--rw-reading-measure); }

/* ── The learner's result ───────────────────────────────────────────────────────────── */

.ic-result { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-6); }
/* The score leads — the one number the page exists to answer. */
.ic-result__score { font-size: var(--rw-text-heading); font-weight: 700; font-variant-numeric: tabular-nums; margin: 0; }
.ic-result__scale { font-size: var(--rw-text-lead); margin: 0; }
.ic-result__released, .ic-result__submitted { color: var(--rw-ink-muted); font-size: var(--rw-text-small); margin: 0; }
.ic-result__marks { font-weight: 600; font-variant-numeric: tabular-nums; }
.ic-result__note { min-inline-size: 0; overflow-wrap: anywhere; max-inline-size: var(--rw-reading-measure); }
.ic-result__seeabove { color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
.ic-result__kind { color: var(--rw-ink-muted); font-size: var(--rw-text-small); margin-inline-start: var(--rw-label-gap); }
.ic-result__change { display: block; margin-block-start: var(--rw-space-1); }
.ic-result__after { display: flex; flex-wrap: wrap; gap: var(--rw-space-3); }
.ic-result__retake { max-inline-size: var(--rw-reading-measure); }
.ic-result__withheld { font-weight: 600; max-inline-size: var(--rw-reading-measure); }

/* ── Release and access ─────────────────────────────────────────────────────────────── */

.ic-quizset__fields { display: grid; gap: var(--rw-field-stack); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); max-inline-size: var(--rw-form-measure); }
/* A datetime-local's min-content at 200% text is wider than a phone (measured: 448px against
   320) and a grid track does not shrink it on its own. The shed min width is paired with the
   kit's `inline-size: 100%` inside this grid's floored track — the calendar-entry discipline —
   so the press stays full-track and can never fall below the floor. */
.ic-quizset__fields .ic-input { min-inline-size: 0; }
.ic-quizset__decide { display: flex; flex-wrap: wrap; gap: var(--rw-space-3); }

/* ── The class library ──────────────────────────────────────────────────────────────── */

/* The topic list and the rows share one wrapping workspace: a rail beside the list on a
   desk, the same buttons as a wrapping row of chips below it — one list either way. */
.ic-library { display: flex; flex-wrap: wrap; align-items: start; gap: var(--rw-space-6); }
.ic-library__topics { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: var(--rw-space-2); }
.ic-library__body { flex: 1 1 100%; min-inline-size: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-4); align-content: start; }
@media (min-width: 64rem) {
    .ic-library__topics { flex: 0 1 16rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-1); align-content: start; }
    .ic-library__body { flex: 1 1 24rem; }
    .ic-library__topics .ic-library__topic { justify-content: space-between; }
}
.ic-library__topic {
    display: inline-flex; align-items: center; gap: var(--rw-space-2);
    min-block-size: var(--rw-target-min); min-inline-size: var(--rw-target-min);
    padding: var(--rw-space-1) var(--rw-label-gap);
    background: var(--rw-surface); color: var(--rw-ink); text-align: start;
    border: 1px solid var(--rw-control-border); border-radius: var(--rw-radius-control);
    font: inherit; cursor: pointer;
}
.ic-library__topic[aria-pressed="true"] {
    background: var(--rw-green); color: var(--rw-on-green);
    border: 3px double var(--rw-control-border); font-weight: 700;
    padding: calc(var(--rw-space-1) - 2px) calc(var(--rw-label-gap) - 2px);
}
.ic-library__count { font-variant-numeric: tabular-nums; font-weight: 700; }
.ic-library__controls { display: flex; flex-wrap: wrap; align-items: end; gap: var(--rw-field-stack); }
.ic-library__controls > .ic-field { flex: 1 1 14rem; max-inline-size: 24rem; }
.ic-library__note { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); margin: 0; }

/* One file, one row; the audience is its own cell so a staff-only file in a class library
   is unmistakable at a glance. Below the card breakpoint each row is a card and the cells
   stack — a value on its own line is the layout there, not a defect. */
.ic-library__list { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; margin: 0; list-style: none; }
.ic-library__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-1) var(--rw-space-4); padding-block: var(--rw-row-padding-block); border-block-end: 1px solid var(--rw-line); min-inline-size: 0; align-items: center; }
@media (min-width: 48.0625rem) {
    .ic-library__row { grid-template-columns: minmax(0, 1fr) auto auto auto; }
    .ic-library__list--learner .ic-library__row { grid-template-columns: minmax(0, 1fr); }
}
.ic-library__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-1); justify-items: start; min-inline-size: 0; }
.ic-library__title { display: inline-flex; align-items: center; min-block-size: var(--rw-target-min); font-weight: 600; color: var(--rw-ink); min-inline-size: 0; overflow-wrap: anywhere; }
.ic-library__meta, .ic-library__added { color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
.ic-library__added { font-variant-numeric: tabular-nums; }
.ic-library__audience { font-size: var(--rw-text-small); font-weight: 600; }
/* Staff-only wears the warning pair at a glance; the other audiences are ordinary facts. */
.ic-library__audience[data-library-audience="StaffOnly"] { background: var(--rw-warning-bg); color: var(--rw-warning-fg); padding: var(--rw-space-1) var(--rw-label-gap); border-radius: var(--rw-radius-control); justify-self: start; }
/* Processing and a dead link are states of the record, in the warning pair, in words. */
.ic-library__waiting { color: var(--rw-warning-fg); background: var(--rw-warning-bg); padding: var(--rw-space-1) var(--rw-label-gap); border-radius: var(--rw-radius-control); font-size: var(--rw-text-small); justify-self: start; }
.ic-library__notready { color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
.ic-library__open { display: flex; }
.ic-library__filters { display: flex; flex-wrap: wrap; gap: var(--rw-space-2); }
.ic-library__chip {
    display: inline-flex; align-items: center;
    min-block-size: var(--rw-target-min); min-inline-size: var(--rw-target-min);
    padding: var(--rw-space-1) var(--rw-label-gap);
    background: var(--rw-surface); color: var(--rw-ink);
    border: 1px solid var(--rw-control-border); border-radius: var(--rw-radius-control);
    font: inherit; font-size: var(--rw-text-small); cursor: pointer;
}
.ic-library__chip[aria-pressed="true"] {
    background: var(--rw-green); color: var(--rw-on-green);
    border: 3px double var(--rw-control-border); font-weight: 700;
    padding: calc(var(--rw-space-1) - 2px) calc(var(--rw-label-gap) - 2px);
}
/* THE SAME HAND AS THE KIT. Every filter above drew its boundary in the decorative line, which
   fails WCAG 1.4.11; control-border is at least 3.46:1 on every ground. The chosen double border
   is untouched, and the kit's choosable rule supplies the transition, so none is declared here. */
:is(.ic-quizlist__filter, .ic-library__topic, .ic-library__chip):hover:not([aria-pressed="true"]):not(:disabled) { background: var(--rw-surface-hover); }
:is(.ic-quizlist__filter, .ic-library__topic, .ic-library__chip):active:not(:disabled) { translate: 0 1px; box-shadow: var(--rw-press-inset); }
:is(.ic-quizlist__filter, .ic-library__topic, .ic-library__chip):active:not(:disabled):focus-visible { box-shadow: var(--rw-press-inset), var(--rw-focus-bands); }

/* ── Adding: files and links ────────────────────────────────────────────────────────── */

.ic-upload__form, .ic-link__form, .ic-resource__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-field-stack); justify-items: start; max-inline-size: var(--rw-form-measure); }
.ic-upload__form .ic-field, .ic-link__form .ic-field, .ic-resource__form .ic-field { inline-size: 100%; }
/* The three audience pickers are one shape on three pages, so they teach one vocabulary:
   a framed choice whose words say who, with its consequence written under it. */
.ic-upload__audience, .ic-link__audience, .ic-resource__audience { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-2); padding: 0; border: 0; margin: 0; inline-size: 100%; min-inline-size: 0; }
.ic-upload__audience > legend, .ic-link__audience > legend, .ic-resource__audience > legend { font-weight: 600; padding: 0; margin-block-end: var(--rw-space-1); }
.ic-upload__choice, .ic-link__choice, .ic-resource__choice {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--rw-space-3); row-gap: var(--rw-space-1);
    align-items: center; min-block-size: var(--rw-target-min);
    padding: var(--rw-space-2) var(--rw-space-3);
    border: 1px solid var(--rw-line); border-radius: var(--rw-radius-control); cursor: pointer;
}
.ic-upload__choicename { font-weight: 600; }
.ic-upload__choice > span:first-of-type, .ic-link__choice > span:first-of-type, .ic-resource__choice > span:first-of-type { font-weight: 600; }
.ic-upload__choicehint, .ic-link__choicehint, .ic-resource__choicehint { grid-column: 2; color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
/* THE AUDIENCE PICKER WAS NEVER A GRID, AND THE KIT'S OWN COMMENT SAYS WHY.
   `label:has(> input[type="radio"])` in riwaq-components.css scores 0-1-2 — a `:has()`
   argument's specificity counts — so `display: grid` on one page class LOST to it, silently, and
   these three labels have been flex rows since they were written. That rule's own note predicts
   exactly this ("anybody adjusting a checkbox row from a page will lose here and will not be
   told") and predicts the symptom too: a label inherits `overflow-wrap: anywhere` from the base
   sheet, so the name shrank to its narrowest break. Photographed at 320 and at 1280 by the B4 rig
   (b4-upload-chosen-light-320.png, b4-file-nopreview-light-320.png): "Cla / ss" and "Sta / ff /
   onl / y" beside their own consequence instead of above it.

   TWO CLASSES OUTRANK IT, which is the fix `.ic-publish__fields` already took for the same rule
   (riwaq-peopleadmin.css, B1 fix round N-8) — and the kit rule is left alone, because it reaches
   every checkbox and radio in the product and moving it is a kit pass that has to photograph all
   of them. Every cell is placed rather than left to auto-flow, so the row cannot depend on where
   the flow happens to put three items.

   IT REACHES A THIRD PAGE, `LibraryLink`, which this cohort was not asked to touch: the rule is
   shared and the defect is identical there. Recorded in slice-b4-report.md §8, with a re-shoot of
   that page owed. */
.ic-upload__audience .ic-upload__choice,
.ic-link__audience .ic-link__choice,
.ic-resource__audience .ic-resource__choice {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start;
}
.ic-upload__choice > input, .ic-link__choice > input, .ic-resource__choice > input {
    grid-column: 1; grid-row: 1 / span 2; align-self: start; margin-block-start: var(--rw-space-1);
}
.ic-upload__choicename, .ic-link__choicename,
.ic-upload__choice > span:first-of-type, .ic-link__choice > span:first-of-type,
.ic-resource__choice > span:first-of-type { grid-column: 2; grid-row: 1; }
.ic-upload__choicehint, .ic-link__choicehint, .ic-resource__choicehint { grid-row: 2; }
.ic-upload__go, .ic-link__go { display: flex; flex-wrap: wrap; gap: var(--rw-space-3); }
.ic-link__promise { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); margin: 0; }

/* One row per file, one outcome per row; a refused row leads with its refusal's pair and
   keeps its fix beside it. */
.ic-upload__rows { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; margin: 0; list-style: none; }
.ic-upload__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-1) var(--rw-space-3); padding-block: var(--rw-row-padding-block); border-block-end: 1px solid var(--rw-line); min-inline-size: 0; border-inline-start: var(--rw-space-1) solid transparent; padding-inline-start: var(--rw-space-2); }
.ic-upload__row[data-upload-outcome="refused"] { border-inline-start-color: var(--rw-danger-ink); }
.ic-upload__row[data-upload-outcome="added"] { border-inline-start-color: var(--rw-success-ink); }
.ic-upload__name { font-weight: 600; min-inline-size: 0; overflow-wrap: anywhere; }
.ic-upload__meta { color: var(--rw-ink-muted); font-size: var(--rw-text-small); font-variant-numeric: tabular-nums; }
.ic-upload__added { color: var(--rw-success-fg); background: var(--rw-success-bg); padding: 0 var(--rw-label-gap); border-radius: var(--rw-radius-control); font-size: var(--rw-text-small); font-weight: 600; }
.ic-upload__refusal { color: var(--rw-danger-fg); background: var(--rw-danger-bg); padding: var(--rw-space-1) var(--rw-label-gap); border-radius: var(--rw-radius-control); font-size: var(--rw-text-small); min-inline-size: 0; overflow-wrap: anywhere; }
.ic-upload__note { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); margin: 0; }

/* ── One resource ───────────────────────────────────────────────────────────────────── */

/* Two failures, two different truths — each its own pair, none of them the word "error".
   THE THIRD WAS THE OUTAGE, AND IT IS `Banner`'S NOW. B4-24 moved that sentence into
   `Banner Kind="ProviderDown"` and the page kept this class on the paragraph inside it, so
   `.ic-alert--warn`'s background, padding, measure and left rule were drawn twice, one box inside
   the other (re-review RR-4). Removed rather than left unreferenced: an unused band class is the
   next page's temptation to draw a band beside a component that already is one. */
.ic-resource__expired { color: var(--rw-info-fg); background: var(--rw-info-bg); padding: var(--rw-space-3) var(--rw-space-4); border-inline-start: var(--rw-space-1) solid currentColor; margin: 0; max-inline-size: var(--rw-reading-measure); }
.ic-resource__deadlink { color: var(--rw-warning-fg); background: var(--rw-warning-bg); padding: var(--rw-space-3) var(--rw-space-4); border-inline-start: var(--rw-space-1) solid currentColor; margin: 0; max-inline-size: var(--rw-reading-measure); }
/* The file itself, in the page: a picture or a video at the form's width, never wider than the screen. */
.ic-resource__preview { display: block; max-inline-size: min(100%, var(--rw-form-measure)); max-block-size: 70vh; block-size: auto; border-radius: var(--rw-radius-control); border: 1px solid var(--rw-line); background: var(--rw-ground-2); }
.ic-resource__nopreview { color: var(--rw-ink-muted); margin: 0; max-inline-size: var(--rw-reading-measure); }
.ic-resource__waiting { color: var(--rw-warning-fg); background: var(--rw-warning-bg); padding: var(--rw-space-2) var(--rw-space-3); border-radius: var(--rw-radius-control); margin: 0; max-inline-size: var(--rw-reading-measure); }
.ic-resource__ready { color: var(--rw-success-fg); background: var(--rw-success-bg); padding: var(--rw-space-2) var(--rw-space-3); border-radius: var(--rw-radius-control); margin: 0; max-inline-size: var(--rw-reading-measure); }
.ic-resource__opens { color: var(--rw-ink-muted); font-size: var(--rw-text-small); margin: 0; }
/* The address is a structured identifier: it keeps its own LTR order under an RTL page
   (dir="ltr" in the markup) and breaks anywhere rather than widening the page. */
.ic-resource__destination { font-variant-numeric: tabular-nums; min-inline-size: 0; overflow-wrap: anywhere; margin: 0; }
.ic-resource__leaving { max-inline-size: var(--rw-reading-measure); margin: 0; }
.ic-resource__linkchecked { color: var(--rw-ink-muted); font-size: var(--rw-text-small); margin: 0; }
.ic-resource__linkactions { display: flex; flex-wrap: wrap; gap: var(--rw-space-3); }
.ic-resource__homework { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-2); margin: 0; padding-inline-start: var(--rw-space-4); }
/* One homework per row, its title and its facts on their own lines so a long title in any script
   never pushes the due date off the end of a 320px line. */
.ic-resource__hwrow { display: grid; gap: var(--rw-space-1); min-inline-size: 0; }
.ic-resource__hwtitle { font-weight: 600; }
.ic-resource__hwmeta { color: var(--rw-ink-muted); }
.ic-resource__note { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); margin: 0; }
.ic-resource__replace { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-field-stack); justify-items: start; max-inline-size: var(--rw-form-measure); inline-size: 100%; }
.ic-resource__replace .ic-field { inline-size: 100%; }
.ic-resource__versions { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; margin: 0; list-style: none; }
.ic-resource__versions > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--rw-space-1) var(--rw-space-3); padding-block: var(--rw-row-padding-block); border-block-end: 1px solid var(--rw-line); min-inline-size: 0; }
.ic-resource__vnum { font-weight: 700; font-variant-numeric: tabular-nums; }
.ic-resource__vmeta { color: var(--rw-ink-muted); font-size: var(--rw-text-small); min-inline-size: 0; overflow-wrap: anywhere; }
.ic-resource__vnote { flex-basis: 100%; min-inline-size: 0; overflow-wrap: anywhere; max-inline-size: var(--rw-reading-measure); }
.ic-resource__vcurrent { color: var(--rw-success-fg); background: var(--rw-success-bg); padding: 0 var(--rw-label-gap); border-radius: var(--rw-radius-control); font-size: var(--rw-text-small); font-weight: 600; }
/* Ending things live together and apart from the form; the blocked sentence is the
   refusal's own words beside the disabled control, never a greyed button alone. */
.ic-resource__danger { display: flex; flex-wrap: wrap; gap: var(--rw-space-3); }
.ic-resource__blocked { color: var(--rw-warning-fg); background: var(--rw-warning-bg); padding: var(--rw-space-2) var(--rw-space-3); border-inline-start: var(--rw-space-1) solid currentColor; margin: 0; max-inline-size: var(--rw-reading-measure); }

/* ── Topics ─────────────────────────────────────────────────────────────────────────── */

/* The count left the section head it no longer has and became a summary over the rows, so it
   needs the quiet voice that head gave it. Same treatment as every other collection summary. */
.ic-topics__summary { color: var(--rw-ink-muted); margin: 0; }
.ic-topics { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; margin: 0; list-style: none; }
.ic-topics__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-1) var(--rw-space-3); padding-block: var(--rw-row-padding-block); border-block-end: 1px solid var(--rw-line); min-inline-size: 0; }
.ic-topics__position { font-variant-numeric: tabular-nums; font-weight: 700; min-inline-size: 1.5rem; }
.ic-topics__name { font-weight: 600; flex: 1 1 10rem; min-inline-size: 0; overflow-wrap: anywhere; }
.ic-topics__count { color: var(--rw-ink-muted); font-size: var(--rw-text-small); font-variant-numeric: tabular-nums; }
.ic-topics__actions { display: flex; flex-wrap: wrap; gap: var(--rw-space-2); }
.ic-topics__rename { display: flex; flex-wrap: wrap; align-items: end; gap: var(--rw-space-3); flex: 1 1 100%; }
.ic-topics__rename .ic-field { flex: 1 1 14rem; }
.ic-topics__add { display: flex; flex-wrap: wrap; align-items: end; gap: var(--rw-space-3); max-inline-size: var(--rw-form-measure); }
.ic-topics__add .ic-field { flex: 1 1 14rem; }
.ic-topics__confirm { display: flex; flex-wrap: wrap; gap: var(--rw-space-3); }

/* ── Storage ────────────────────────────────────────────────────────────────────────── */

/* The bar is decoration over a stated number (the fill's width is the data-driven counted
   style attribute); the accessible fact is the figure line beside it. */
.ic-storage__bar { display: flex; block-size: var(--rw-space-3); background: var(--rw-ground-2); border-radius: var(--rw-radius-control); }
.ic-storage__fill { background: var(--rw-green); border-radius: inherit; }
.ic-storage__figure { font-weight: 700; font-variant-numeric: tabular-nums; margin: 0; }
/* `__scope` went with F1: the boundary sentence is the page header's lede now, and `PageHeader`
   already sets the muted colour and the reading measure for what it carries. A page-specific
   class over a component that already styles the slot is a second place the voice can drift. */
.ic-storage__promise { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); margin: 0; }
.ic-storage__lines { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; margin: 0; list-style: none; }
.ic-storage__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-1) var(--rw-space-3); padding-block: var(--rw-row-padding-block); border-block-end: 1px solid var(--rw-line); min-inline-size: 0; }
.ic-storage__linename { flex: 1 1 14rem; min-inline-size: 0; overflow-wrap: anywhere; }
.ic-storage__linebytes { font-weight: 600; font-variant-numeric: tabular-nums; }
.ic-storage__largest { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; margin: 0; list-style: none; }
.ic-storage__largest > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--rw-label-gap) var(--rw-space-3); padding-block: var(--rw-space-1); border-block-end: 1px solid var(--rw-line); min-inline-size: 0; }
.ic-storage__largest a { display: inline-flex; align-items: center; min-block-size: var(--rw-target-min); min-inline-size: var(--rw-target-min); font-weight: 600; color: var(--rw-ink); overflow-wrap: anywhere; }
.ic-storage__meta { color: var(--rw-ink-muted); font-size: var(--rw-text-small); }

/* ── Small shared atoms this area owns ──────────────────────────────────────────────── */

/* A select's min-content is its longest option, and a quiz title or a marking rule at 200%
   text is wider than a phone (measured: the editor's kind select at 510px against 320).
   Each of these selects is a full-width field inside a column that already carries
   `min-inline-size: 0`, so the shed min width is paired with `inline-size: 100%` of that
   column — the same discipline as the settings fields — and the native control elides its
   own text inside the box instead of widening the page.

   THE BANK'S ENTRY BECAME THE SHARED FILTER ROW'S at F1. `.ic-bank__controls` went when the page
   adopted `Collection`, and the protection had to go somewhere that still covers its chooser —
   `.ic-collection__filters` is that place, and it now covers every collection whose filters
   include a select rather than only the two pages that spelled their own row. */
.ic-quizedit__pane select.ic-input, .ic-collection__filters select.ic-input,
.ic-library__controls select.ic-input, .ic-upload__form select.ic-input,
.ic-link__form select.ic-input, .ic-resource__form select.ic-input { min-inline-size: 0; }

/* A number entry is a short field: bounding it says "a number goes here" and keeps the
   spin buttons near the digits. Only the quiz screens spell this class today. */
.ic-input--number { inline-size: auto; max-inline-size: 8rem; font-variant-numeric: tabular-nums; }

/* ── THE FOUR STEPS OF A DRAFT QUIZ (owner, 2026-09-24; drawn on the quiz design canvas) ───
   One card per step, the rail above it, and a bar under it with Back on one side and Continue
   on the other. Choices are whole cards with a native radio inside, so the card is the target
   and the radio carries the state and its focus ring. */
.ic-quizwiz__steps {
    list-style: none; margin: 0 0 var(--rw-space-6); padding: 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rw-space-3);
}
.ic-quizwiz__step {
    inline-size: 100%; min-block-size: 3.25rem; box-sizing: border-box;
    display: flex; align-items: center; gap: var(--rw-space-3); text-align: start;
    padding: 0 var(--rw-space-4); cursor: pointer; font: inherit;
    border: 1px solid var(--rw-line); border-radius: var(--rw-radius-control);
    background: transparent; color: var(--rw-ink-muted);
}
span.ic-quizwiz__step { cursor: default; }
.ic-quizwiz__num {
    flex: none; display: inline-grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem;
    border-radius: 999px; border: 1.5px solid currentColor; font-weight: 800; font-size: var(--rw-text-small);
}
.ic-quizwiz__step.is-done { color: var(--rw-ink); }
.ic-quizwiz__step.is-done .ic-quizwiz__num { background: var(--rw-green); border-color: var(--rw-green); color: var(--rw-on-green); }
.ic-quizwiz__step.is-current {
    color: var(--rw-ink); font-weight: 800; background: var(--rw-surface);
    border: 2px solid var(--rw-accent-border); padding: 0 calc(var(--rw-space-4) - 1px);
}
.ic-quizwiz__step.is-current .ic-quizwiz__num { background: var(--rw-accent-fill); border-color: var(--rw-accent-fill); color: var(--rw-accent-ink); }

.ic-quizwiz__card {
    display: flex; flex-direction: column; gap: var(--rw-field-stack);
    max-inline-size: var(--rw-form-measure); padding: var(--rw-panel-inset);
    background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-panel);
}
.ic-quizwiz__title { margin: 0; font-size: var(--rw-text-lead); font-weight: 800; }
.ic-quizwiz__label { display: block; font-weight: 800; margin-block-end: var(--rw-label-gap); }
.ic-quizwiz__group { display: flex; flex-direction: column; gap: var(--rw-space-3); border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.ic-quizwiz__group > legend { padding: 0; }
.ic-quizwiz__short { max-inline-size: 18rem; }

.ic-quizwiz__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rw-space-3); }
.ic-quizwiz__choice {
    display: flex; gap: var(--rw-space-3); align-items: flex-start; cursor: pointer;
    padding: var(--rw-space-4); border: 1px solid var(--rw-control-border); border-radius: var(--rw-radius-control);
    background: var(--rw-ground);
}
.ic-quizwiz__choice input { inline-size: 1.25rem; block-size: 1.25rem; margin: .1rem 0 0; accent-color: var(--rw-accent-fill); flex: none; }
.ic-quizwiz__choice:has(input:checked) { border: 2px solid var(--rw-accent-border); background: var(--rw-surface); padding: calc(var(--rw-space-4) - 1px); }
.ic-quizwiz__choice.is-off { opacity: .6; cursor: not-allowed; }
.ic-quizwiz__ctitle { display: block; font-weight: 800; }
.ic-quizwiz__csub { display: block; font-size: var(--rw-text-small); color: var(--rw-ink-muted); margin-block-start: .15rem; }
.ic-quizwiz__quick, .ic-quizwiz__kinds { display: flex; flex-wrap: wrap; gap: var(--rw-space-2); }
.ic-quizwiz__quick .ic-suw__chip, .ic-quizwiz__kinds .ic-suw__chip {
    min-block-size: 2.75rem; padding: 0 var(--rw-space-4); border: 1px solid var(--rw-control-border);
    border-radius: 999px; background: transparent; color: var(--rw-ink); font: inherit; font-weight: 700; cursor: pointer;
}
.ic-quizwiz__kinds .ic-suw__chip[aria-pressed="true"] {
    background: var(--rw-green); color: var(--rw-on-green); border: 3px double var(--rw-control-border);
    padding: 0 calc(var(--rw-space-4) - 2px);
}
.ic-quizwiz__advanced { border-block-start: 1px solid var(--rw-line); padding-block-start: var(--rw-space-4); }
.ic-quizwiz__advanced > summary { cursor: pointer; font-weight: 800; min-block-size: var(--rw-target-min); display: flex; align-items: center; }
.ic-quizwiz__advancedbody { display: flex; flex-wrap: wrap; gap: var(--rw-space-4); margin-block-start: var(--rw-space-3); }

/* The right answer: a circle beside the option, filled when it counts. */
.ic-quizwiz__correct {
    flex: none; inline-size: 1.75rem; block-size: 1.75rem; box-sizing: border-box; cursor: pointer;
    border-radius: 999px; border: 2px solid var(--rw-control-border); background: transparent;
    margin: .6rem; padding: 0;
}
.ic-quizwiz__correct[aria-pressed="true"] { border: .55rem solid var(--rw-accent-fill); }
.ic-quizwiz__needs {
    font-size: var(--rw-text-small); font-weight: 800; padding: 0 var(--rw-space-2); border-radius: 999px;
    background: var(--rw-warning-bg); color: var(--rw-warning-fg);
}
.ic-quizwiz__bank { display: inline-block; margin-block-start: var(--rw-space-2); }
.ic-quizwiz__delete { color: var(--rw-danger-fg); }

.ic-quizwiz__review { margin: 0; display: grid; border-block-start: 1px solid var(--rw-line); }
.ic-quizwiz__reviewrow {
    display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: var(--rw-space-4); align-items: baseline;
    padding-block: var(--rw-row-padding-block); border-block-end: 1px solid var(--rw-line);
}
.ic-quizwiz__reviewrow dt { color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
.ic-quizwiz__reviewrow dd { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; font-weight: 700; }
.ic-quizwiz__blockers {
    padding: var(--rw-space-4); border-radius: var(--rw-radius-control);
    background: var(--rw-warning-bg); color: var(--rw-warning-fg);
}
.ic-quizwiz__blockerstitle { margin: 0 0 var(--rw-space-2); font-weight: 800; }
.ic-quizwiz__blockers ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rw-space-2); }
.ic-quizwiz__blockers li { display: flex; justify-content: space-between; align-items: center; gap: var(--rw-space-3); }
.ic-quizwiz__blockers .ic-textbtn { color: inherit; font-weight: 800; }

.ic-quizwiz__nav {
    display: flex; align-items: center; justify-content: space-between; gap: var(--rw-space-4);
    max-inline-size: var(--rw-form-measure); margin-block-start: var(--rw-space-6);
    padding-block-start: var(--rw-space-4); border-block-start: 1px solid var(--rw-line);
}
.ic-quizwiz__navend { display: flex; align-items: center; gap: var(--rw-space-4); }
.ic-quizwiz__saved { font-size: var(--rw-text-small); color: var(--rw-ink-muted); }

@media (max-width: 767px) {
    /* Two to a row while a label fits, one to a row when it does not: a step is never narrower
       than its own label. Two fixed columns ran "Spørgsmål" at 200% text 96 px past a 375 px
       phone, and past its own border at any size. */
    .ic-quizwiz__steps { display: flex; flex-wrap: wrap; }
    .ic-quizwiz__steps > li { flex: 1 1 calc(50% - var(--rw-space-3)); min-inline-size: max-content; }
    .ic-quizwiz__choices { grid-template-columns: minmax(0, 1fr); }
    .ic-quizwiz__reviewrow { grid-template-columns: minmax(0, 1fr) auto; }
    .ic-quizwiz__reviewrow dt { grid-column: 1 / -1; }
}