/* The quick quiz on the PROJECTOR (DisplayView). Prefix .qz-d-.
   docs/class-app/quizzes/DESIGN.md, "The surfaces". */

/*
   READ FROM THE BACK OF A ROOM. Large type, few words, high contrast, and never
   a name. Every size here is `cqw` against the 1920 canvas with a clamp floor,
   like the rest of the display: `.cl-stage__canvas` registers the inline axis
   only, so `cqh` does not resolve here (class-app/CLAUDE.md), and the floors are
   what keep this legible when the same canvas is scaled into the presenter's
   preview. Every vertical size is in cqw for the same reason.

   THE FRAME IS THE SLIDE'S. QuizDisplayOverlay wears `slide slide--display`, so
   the 6cqw / 7cqw display padding keeps all four corners clear: the 10x mark
   top left and the chevron bottom right (both drawn by the overlay), and the
   head-count badge DisplayView pins over the bottom left. NOTHING HERE IS
   POSITIONED INTO A CORNER, and nothing should be: the bottom left belongs to
   `.cl-display__badge`.

   BARS ARE SOLID. `--primary-color` on a right answer and on every bar that has
   no wrong answer to be told apart from; `--qz-d-tint`, the same blue at a
   third of its strength, on an option that is not right. Never the brand
   gradient on a filled bar: the ramp belongs on thin lines, which is where it
   appears here (the eyebrow ticks and the hairline under a title).

   THE BUDGET is the 1920x1080 canvas less the padding: 1651 x 850px of content,
   and `.slide` clips silently rather than scrolling. The long-text guards below
   (line clamps, capped code blocks, ellipsised answers) cap each part, and do
   not cap the sum: a code block over six two-line options is past it. So the
   screen showing is also measured, and scaled down whole when it is over
   (`--qz-d-fit`, set by QuizDisplayOverlay), rather than cut off at the bottom.
*/

.qz-d {
  --qz-d-tint: rgba(0, 113, 227, 0.32);
  /* `safe` because a screen still over budget, in the frame before it is
     measured, must lose its last line, never its first: plain `center` clips an
     overflowing column at BOTH ends, and the top is the question the room is
     looking at. */
  justify-content: safe center;
}

/* The three screens paint above the corner marks, which are positioned.

   THE FIT. Scaled from the top edge, where an over-budget screen sits, so the
   whole of it lands inside the content box: `--qz-d-fit` is the budget over the
   screen's natural height, and absent (1) whenever it fits. */
.qz-d-progress,
.qz-d-review,
.qz-d-summary {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  transform: scale(var(--qz-d-fit, 1));
  transform-origin: top center;
}

.qz-d-progress,
.qz-d-summary {
  align-items: center;
  gap: 1.6cqw;
  text-align: center;
}

/* Narrower than the canvas, so a bar's length can be read against its label
   without a sweep of the eyes across the whole wall. */
.qz-d-review {
  align-self: center;
  inline-size: min(100%, 78cqw);
  gap: 1.2cqw;
}

/* ── Shared lines ──────────────────────────────── */

/* The deck's eyebrow restated: mono, spaced, with the brand tick before it. */
.qz-d-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9cqw;
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.4cqw, 27px);
  letter-spacing: 0.12em;
  line-height: 1.3;
  color: var(--text-tertiary);
}

.qz-d-eyebrow::before {
  content: '';
  flex: none;
  inline-size: 2.6cqw;
  block-size: 2px;
  border-radius: 2px;
  background: var(--tpl-brand);
}

/* Smaller than a slide title on purpose: the title names the quiz, and the
   figures under it are what the room came to read. Two lines at most, since the
   module allows a 120-character title. */
.qz-d-title {
  max-inline-size: 72cqw;
  font-family: var(--font-display);
  font-size: clamp(22px, 3.4cqw, 65px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--text-color);
  text-wrap: balance;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* "הבוחן נסגר", "הזמן נגמר": a state, said once and plainly. */
.qz-d-state {
  font-family: var(--font-display);
  font-size: clamp(20px, 3.2cqw, 61px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--text-color);
}

.qz-d-empty {
  text-align: center;
  font-size: clamp(14px, 1.7cqw, 33px);
  color: var(--text-tertiary);
}

.qz-d-meta {
  text-align: center;
  font-size: clamp(13px, 1.55cqw, 30px);
  color: var(--text-secondary);
}

.qz-d-meta__sep {
  padding-inline: 0.5em;
  color: var(--text-tertiary);
}

/* The right answer's mark. A shape AND a word, so it survives a washed-out
   projector and a viewer who cannot tell the two blues apart. */
.qz-d-tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3em 0.8em;
  border-radius: var(--radius-full);
  background: var(--primary-color);
  color: #fff;
  font-family: var(--font-body);
  font-size: clamp(11px, 1.2cqw, 23px);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.qz-d-tag__icon {
  flex: none;
  inline-size: 1.1em;
  block-size: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── While the quiz is open or closed ──────────── */

/* THE READING: how many have finished. The display face at 300 rather than
   mono at 500, for the reason the break clock gives: Departure Mono is a pixel
   face, and at this size its digits are squares. */
.qz-d-progress__figures {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1.4cqw;
}

.qz-d-progress__done,
.qz-d-progress__total {
  font-family: var(--font-display);
  font-size: clamp(48px, 8cqw, 154px);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--primary-color);
}

/* The denominator is the context, not the reading. */
.qz-d-progress__total {
  color: var(--text-secondary);
}

.qz-d-progress__of,
.qz-d-progress__unit {
  font-size: clamp(16px, 2.4cqw, 46px);
  color: var(--text-secondary);
}

/* The ballot indicator's track, at the size of this screen. The fill grows from
   the inline-start edge, the RIGHT one in this RTL page. */
.qz-d-progress__track {
  inline-size: min(100%, 44cqw);
  block-size: clamp(6px, 0.8cqw, 15px);
  border-radius: var(--radius-full);
  background: var(--primary-border);
  overflow: hidden;
}

.qz-d-progress__fill {
  display: block;
  block-size: 100%;
  background: var(--primary-color);
  transition: inline-size 0.4s ease;
}

/* The countdown. Second to the finished count, so it is smaller than it and in
   ink rather than in blue; otherwise the break clock's three decisions: the
   display face, weight 300, tabular figures, and no gradient on a numeral. */
.qz-d-clock {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.6cqw, 108px);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text-color);
}

/* Answered per question. Question 1 sits on the right, where an RTL reader
   starts, and the row wraps rather than shrinking a 40-question quiz into
   slivers. */
.qz-d-answered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8cqw;
  max-inline-size: 100%;
}

.qz-d-answered__label {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.2cqw, 23px);
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

.qz-d-answered__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1cqw;
}

.qz-d-answered__cell {
  inline-size: 6cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35cqw;
  padding: 0.6cqw 0.5cqw 0.7cqw;
  border: 1px solid var(--primary-border);
  border-radius: 0.8cqw;
  background: var(--primary-light);
}

.qz-d-answered__number {
  font-family: var(--font-mono);
  font-size: clamp(10px, 1cqw, 19px);
  line-height: 1;
  color: var(--text-tertiary);
}

.qz-d-answered__count {
  font-family: var(--font-mono);
  font-size: clamp(16px, 2.2cqw, 42px);
  font-weight: 500;
  line-height: 1;
  color: var(--text-color);
}

.qz-d-answered__track {
  inline-size: 100%;
  block-size: clamp(3px, 0.35cqw, 7px);
  border-radius: var(--radius-full);
  background: var(--primary-border);
  overflow: hidden;
}

.qz-d-answered__fill {
  display: block;
  block-size: 100%;
  background: var(--primary-color);
  transition: inline-size 0.4s ease;
}

/* Past twelve questions the cells halve, so the module's 40 still fit in two
   rows: 21 cells to a row at this width. */
.qz-d-answered__list.is-dense {
  gap: 0.6cqw;
}

.qz-d-answered__list.is-dense .qz-d-answered__cell {
  inline-size: 3.4cqw;
  gap: 0.25cqw;
  padding: 0.4cqw 0.3cqw 0.5cqw;
}

.qz-d-answered__list.is-dense .qz-d-answered__number {
  font-size: clamp(9px, 0.8cqw, 15px);
}

.qz-d-answered__list.is-dense .qz-d-answered__count {
  font-size: clamp(12px, 1.4cqw, 27px);
}

/* ── One question's results ────────────────────── */

/* The question again, as context for the results under it: the room read it on
   its phones. Three lines at most and a capped code block, because the module
   allows 1200 characters of prompt and 4000 of code, and the results are what
   this screen is for. */
.qz-d-prompt {
  text-align: center;
  font-size: clamp(16px, 2.2cqw, 42px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-color);
}

.qz-d-prompt .qz-rich__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Centred and shrink-wrapped, and cut rather than scrolled: a scrollbar on the
   venue screen is a control nobody in the room can use. */
.qz-d-prompt .qz-rich__code {
  align-self: center;
  max-block-size: 12cqw;
  overflow: hidden;
  font-size: clamp(11px, 1.3cqw, 25px);
  font-weight: 400;
}

.qz-d-explain {
  align-self: center;
  max-inline-size: 66cqw;
  text-align: center;
  font-size: clamp(13px, 1.6cqw, 31px);
  line-height: 1.4;
  color: var(--text-secondary);
}

.qz-d-explain .qz-rich__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* NEVER `min-block-size: 0` HERE. The review column shrinks to the canvas, and
   a results block allowed to shrink with it keeps painting its content at full
   height: its last line, the answer count, lands on the explanation under it,
   and the fit scales the collision down rather than undoing it. Left at their
   content height, the parts stack, and the fit shrinks the stack. */
.qz-d-choice,
.qz-d-text,
.qz-d-order {
  display: flex;
  flex-direction: column;
  gap: 1.1cqw;
}

/* Single and multiple choice. Each row is its own grid on the SAME template, so
   the bars start at one edge down the whole list, and the figure column is a
   fixed width so "100%" and "5%" do not move the bar beside them. */
.qz-d-choice__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8cqw;
}

.qz-d-choice__row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 9.5cqw;
  align-items: center;
  gap: 1.6cqw;
  padding: 0.7cqw 1.4cqw;
  border: 2px solid var(--border-light);
  border-radius: 0.9cqw;
  background: var(--bg-surface);
}

.qz-d-choice__row.is-correct {
  border-color: var(--primary-color);
}

.qz-d-choice__option {
  display: flex;
  align-items: center;
  gap: 1cqw;
  min-inline-size: 0;
  font-size: clamp(15px, 1.9cqw, 36px);
  line-height: 1.25;
  color: var(--text-color);
}

/* Once the key is known, the right answer is the ink and the rest step back. */
.qz-d-choice__list.has-key .qz-d-choice__row:not(.is-correct) .qz-d-choice__option {
  color: var(--text-secondary);
}

.qz-d-choice__row.is-correct .qz-d-choice__option {
  font-weight: 500;
}

/* Next to its text, not pushed to the far edge of the column. */
.qz-d-choice__text {
  flex: 0 1 auto;
  min-inline-size: 0;
}

.qz-d-choice__text .qz-rich__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.qz-d-choice__text .qz-rich__code {
  max-block-size: 6cqw;
  overflow: hidden;
  padding: 0.3cqw 0.6cqw;
  font-size: clamp(10px, 1.1cqw, 21px);
  font-weight: 400;
}

.qz-d-choice__track {
  block-size: clamp(10px, 1.6cqw, 31px);
  border-radius: 0.4cqw;
  background: var(--primary-light);
  overflow: hidden;
}

/* Solid blue until the key says which options are wrong; then those take the
   tint. Grows from the inline-start edge, the right one here. */
.qz-d-choice__fill {
  display: block;
  block-size: 100%;
  background: var(--primary-color);
  transition: inline-size 0.4s ease;
}

.qz-d-choice__list.has-key .qz-d-choice__row:not(.is-correct) .qz-d-choice__fill {
  background: var(--qz-d-tint);
}

.qz-d-choice__figure {
  display: flex;
  align-items: baseline;
  gap: 0.8cqw;
  white-space: nowrap;
}

.qz-d-choice__pct {
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.9cqw, 36px);
  font-weight: 500;
  color: var(--text-color);
}

.qz-d-choice__count {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.3cqw, 25px);
  color: var(--text-tertiary);
}

/* Six to eight options: tighter rows, so the module's eight still leave room
   for the question above them and the explanation below. */
.qz-d-choice__list.is-dense {
  gap: 0.5cqw;
}

.qz-d-choice__list.is-dense .qz-d-choice__row {
  padding-block: 0.4cqw;
}

.qz-d-choice__list.is-dense .qz-d-choice__option {
  font-size: clamp(13px, 1.55cqw, 30px);
}

/* Free text. Pills in a wrapping cloud, largest group first, the counts beside
   them; a student's answer is cut with an ellipsis rather than allowed to run a
   500-character line across the wall. */
.qz-d-text__groups {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8cqw 1cqw;
}

.qz-d-text__group {
  display: inline-flex;
  align-items: center;
  gap: 0.9cqw;
  max-inline-size: 100%;
  padding: 0.5cqw 1.3cqw;
  border: 2px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  font-size: clamp(14px, 1.8cqw, 35px);
  line-height: 1.25;
  color: var(--text-color);
}

.qz-d-text__group.is-correct {
  border-color: var(--primary-color);
  background: var(--primary-light);
}

.qz-d-text__answer {
  min-inline-size: 0;
  max-inline-size: 34cqw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qz-d-text__count {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.8em;
  font-weight: 500;
  color: var(--text-secondary);
}

.qz-d-text__more {
  text-align: center;
  font-size: clamp(13px, 1.5cqw, 29px);
  color: var(--text-tertiary);
}

/* One line, whatever the length of the key. */
.qz-d-text__key {
  text-align: center;
  font-size: clamp(14px, 1.7cqw, 33px);
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qz-d-text__key-label {
  margin-inline-end: 0.4em;
  color: var(--text-secondary);
}

.qz-d-text__key-answer {
  font-weight: 500;
}

/* Ordering. The head row and every item row share one template, so the two
   captions stand over the columns they name. Every row is a right answer, so
   every bar is the solid one. */
.qz-d-order__head,
.qz-d-order__row {
  display: grid;
  grid-template-columns: 4.2cqw minmax(0, 1.25fr) minmax(0, 1fr) 7cqw;
  align-items: center;
  column-gap: 1.4cqw;
}

.qz-d-order__head {
  padding-inline: calc(1.4cqw + 2px);
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.15cqw, 22px);
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

.qz-d-order__head > :first-child {
  grid-column: 1 / 3;
}

.qz-d-order__head > :last-child {
  grid-column: 3 / 5;
}

.qz-d-order__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8cqw;
}

.qz-d-order__row {
  padding: 0.7cqw 1.4cqw;
  border: 2px solid var(--border-light);
  border-radius: 0.9cqw;
  background: var(--bg-surface);
}

/* Both sides in cqw: a circle needs two equal lengths, and cqh is not one. */
.qz-d-order__position {
  justify-self: center;
  display: grid;
  place-items: center;
  inline-size: 3cqw;
  block-size: 3cqw;
  border: 2px solid var(--primary-color);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.5cqw, 29px);
  font-weight: 500;
  line-height: 1;
  color: var(--primary-color);
}

.qz-d-order__text {
  min-inline-size: 0;
  font-size: clamp(15px, 1.9cqw, 36px);
  line-height: 1.25;
  color: var(--text-color);
}

.qz-d-order__text .qz-rich__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.qz-d-order__text .qz-rich__code {
  max-block-size: 6cqw;
  overflow: hidden;
  padding: 0.3cqw 0.6cqw;
  font-size: clamp(10px, 1.1cqw, 21px);
}

.qz-d-order__track {
  block-size: clamp(10px, 1.6cqw, 31px);
  border-radius: 0.4cqw;
  background: var(--primary-light);
  overflow: hidden;
}

.qz-d-order__fill {
  display: block;
  block-size: 100%;
  background: var(--primary-color);
  transition: inline-size 0.4s ease;
}

.qz-d-order__pct {
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.9cqw, 36px);
  font-weight: 500;
  color: var(--text-color);
  white-space: nowrap;
}

.qz-d-order__list.is-dense {
  gap: 0.5cqw;
}

.qz-d-order__list.is-dense .qz-d-order__row {
  padding-block: 0.4cqw;
}

.qz-d-order__list.is-dense .qz-d-order__text {
  font-size: clamp(13px, 1.55cqw, 30px);
}

.qz-d-order__list.is-dense .qz-d-order__position {
  inline-size: 2.4cqw;
  block-size: 2.4cqw;
  font-size: clamp(11px, 1.25cqw, 24px);
}

/* ── The summary ───────────────────────────────── */

.qz-d-summary__figures {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 1.4cqw 5.4cqw;
}

.qz-d-summary__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5cqw;
}

.qz-d-summary__value {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4cqw, 84px);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text-color);
}

.qz-d-summary__figure--lead .qz-d-summary__value {
  font-size: clamp(40px, 6.4cqw, 123px);
  color: var(--primary-color);
}

.qz-d-summary__caption {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.3cqw, 25px);
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

/* THE HISTOGRAM READS LEFT TO RIGHT, low scores to high, as the numeric results
   do: a number line ascends to the right in Hebrew textbooks too. */
.qz-d-hist {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1cqw;
  min-block-size: 0;
}

.qz-d-hist__caption {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.2cqw, 23px);
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

.qz-d-hist__bars {
  list-style: none;
  direction: ltr;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.6cqw;
}

.qz-d-hist__bar {
  inline-size: 10cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5cqw;
}

/* Reserved even at zero, so an empty band does not lower its column's baseline. */
.qz-d-hist__count {
  min-block-size: 1em;
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.6cqw, 31px);
  font-weight: 500;
  line-height: 1;
  color: var(--text-color);
}

/* A DEFINITE HEIGHT, which is what lets the fill's percentage resolve; 11cqw
   keeps a two-line title, the figures and the chart inside the canvas. */
.qz-d-hist__track {
  inline-size: 100%;
  block-size: 11cqw;
  display: flex;
  align-items: flex-end;
  border-radius: 0.5cqw;
  background: var(--primary-light);
  overflow: hidden;
}

.qz-d-hist__fill {
  inline-size: 100%;
  background: var(--primary-color);
  transition: block-size 0.4s ease;
}

.qz-d-hist__label {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.3cqw, 25px);
  color: var(--text-secondary);
}