/* The quick quiz on the CONSOLE (PresenterView). Prefix .qz-c-.
   docs/class-app/quizzes/DESIGN.md, "The surfaces".

   Phone first: every control here is at least 44px tall, and the wide console
   (1025px and up) only lines the new blocks up with the slide's measure at the
   foot of this file. Bars are SOLID `--primary-color` or `--primary-light`,
   the poll's own results look, never the brand gradient: a filled bar is a
   solid shape, and the ramp belongs on hairlines. */

/* ── The lock ─────────────────────────────────────── */
/* WHILE A RUN IS ON THE SCREENS the deck controls are disabled, and this line
   says why wherever one of them sits. Amber, the break's colour: a room-wide
   overlay the lecturer put up, not a fault. */
.qz-c-lock {
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-md);
  background: var(--warning-light);
  color: var(--warning-color);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

/* On the full-screen overlay, at the foot of the slide: the close button holds
   the top corner and the two arrows hold the sides. Solid, because the ground
   behind it is the overlay's near-black. */
.qz-c-lock--overlay {
  position: absolute;
  inset-block-end: var(--cl-fs-pad-block-end, var(--space-md));
  inset-inline: var(--space-md);
  z-index: 4;
  inline-size: fit-content;
  max-inline-size: calc(100% - 2 * var(--space-md));
  margin-inline: auto;
  background: var(--bg-surface);
  text-align: center;
}

/* The disabled deck controls read as disabled. `.cl-nav` and `.cl-thumb` carry
   no `:disabled` look of their own, because until the quiz nothing disabled
   them. */
.qz-c-locked .cl-nav:disabled,
.qz-c-locked .cl-thumb:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.qz-c-locked .cl-nav:disabled:hover,
.qz-c-locked .cl-nav:disabled:active {
  background: var(--primary-light);
  border-color: var(--primary-border);
  color: var(--primary-color);
}

.qz-c-locked .cl-nav--overlay:disabled,
.qz-c-locked .cl-nav--overlay:disabled:hover,
.qz-c-locked .cl-nav--overlay:disabled:active {
  background: transparent;
  color: #fff;
  opacity: 0.3;
}

/* ── The countdown picker ─────────────────────────── */
/* The break control's pills (`.cl-pill`), at the 44px a phone needs: these are
   pressed once, right before a press that reaches every screen. */
.qz-c-countdown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.qz-c-countdown__pill {
  min-inline-size: 44px;
  min-block-size: 44px;
}

.qz-c-countdown__none {
  font-family: var(--font-body);
  padding-inline: var(--space-md);
}

.qz-c-countdown__unit {
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* ── The start slide's panel ──────────────────────── */
.qz-c-start {
  border-color: var(--primary-border);
}

.qz-c-start__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.qz-c-start__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.qz-c-start__row + .qz-c-start__row {
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--border-light);
}

.qz-c-start__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.qz-c-start__name {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--text-color);
  overflow-wrap: anywhere;
}

.qz-c-start__meta,
.qz-c-start__empty {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.qz-c-start__go {
  align-self: flex-start;
  min-block-size: 44px;
}

/* ── "בוחן מהרשימה" ───────────────────────────────── */
/* `StagedPicker`'s root sets no display of its own; this one stacks its row
   over the countdown of the staged quiz. */
.qz-c-pick {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* ── The run panel ────────────────────────────────── */
.qz-c-run {
  border-color: var(--primary-border);
}

.qz-c-run__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.qz-c-run__status.is-open {
  border-color: rgba(20, 129, 79, 0.22);
  background: rgba(20, 129, 79, 0.08);
  color: #14814f;
}

.qz-c-run__status.is-closed {
  border-color: rgba(160, 92, 6, 0.24);
  background: rgba(160, 92, 6, 0.08);
  color: #a05c06;
}

.qz-c-run__status.is-revealed {
  border-color: var(--primary-border);
  background: var(--primary-light);
  color: var(--primary-color);
}

.qz-c-run__title {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-color);
  overflow-wrap: anywhere;
}

.qz-c-run__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-lg);
}

.qz-c-run__clock {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  color: var(--text-color);
  white-space: nowrap;
}

.qz-c-run__clock.is-up {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--warning-color);
}

.qz-c-run__finished {
  margin: 0;
  font-size: 15px;
  color: var(--text-color);
}

/* Answered, per question: a chip each, the count over a thin solid bar. */
.qz-c-counts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: var(--space-sm);
}

.qz-c-counts__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px var(--space-sm);
  padding: 6px 10px 8px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.qz-c-counts__item.is-current {
  border-color: var(--primary-color);
}

.qz-c-counts__label {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.qz-c-counts__value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--text-color);
}

.qz-c-counts__track {
  grid-column: 1 / -1;
  display: block;
  block-size: 3px;
  border-radius: var(--radius-full);
  background: var(--border-light);
  overflow: hidden;
}

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

/* THE THREE CONTROLS SIT IN FIXED CELLS. Arming "סיום הבוחן" lengthens its
   label, and in a wrapping row that pushed it onto a line of its own and slid
   "הצגת התשובות" under the finger about to confirm. On a phone the end button
   owns the second line outright; from 768px all three share one. */
.qz-c-run__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.qz-c-run__btn {
  min-block-size: 44px;
  padding-inline: var(--space-md);
}

.qz-c-run__end {
  grid-column: 1 / -1;
}

/* ── More time ────────────────────────────────────── */
/* The break control's row (`.cl-break-ctl` in app.css) at the 44px a phone
   needs: a title, the pills, and the one press. It wraps rather than scrolls,
   so at 390px the button drops to a line of its own. */
.qz-c-extend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--border-light);
}

.qz-c-extend__title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--text-tertiary);
  flex: none;
}

.qz-c-extend__pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.qz-c-extend__pill {
  min-inline-size: 44px;
  min-block-size: 44px;
}

.qz-c-extend__other {
  font-family: var(--font-body);
  padding-inline: var(--space-md);
}

.qz-c-extend__unit {
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* `.cl-pill` has no disabled look of its own: nothing disabled one before. */
.qz-c-extend .cl-pill:disabled,
.qz-c-extend .cl-pill:disabled:hover {
  opacity: 0.45;
  cursor: default;
  border-color: var(--border-light);
  color: var(--text-secondary);
}

.qz-c-extend .cl-pill.is-on:disabled,
.qz-c-extend .cl-pill.is-on:disabled:hover {
  border-color: var(--primary-color);
  background: var(--primary-color);
  color: #fff;
}

/* The labels fade with the pills they name, or a closed run's row reads
   "דקות" louder than the minutes themselves. */
.qz-c-extend.is-disabled .qz-c-extend__title,
.qz-c-extend.is-disabled .qz-c-extend__unit {
  opacity: 0.45;
}

.qz-c-extend__custom {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.qz-c-extend__custom-label {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* 16px stays: under it iOS Safari zooms the page on focus (`.cl-input`). */
.qz-c-extend__input {
  inline-size: 5.5rem;
  min-block-size: 44px;
  padding: 8px 10px;
  font-family: var(--font-mono);
  text-align: center;
}

.qz-c-extend__go {
  min-block-size: 44px;
  padding-inline: var(--space-md);
}

/* ── The review ───────────────────────────────────── */
.qz-c-review-nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
}

.qz-c-review-nav__btn {
  min-block-size: 44px;
  padding-inline: var(--space-md);
}

.qz-c-review-nav__step {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
  text-align: center;
}

.qz-c-review,
.qz-c-summary,
.qz-c-roster {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--border-light);
}

.qz-c-review__kicker {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

.qz-c-review__prompt {
  font-size: 16px;
  color: var(--text-color);
}

.qz-c-review__tally,
.qz-c-review__accepted,
.qz-c-review__none,
.qz-c-review__other {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

.qz-c-review__accepted {
  font-size: 14px;
  color: var(--text-color);
}

.qz-c-review__answer {
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  font-family: var(--font-mono);
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* The forms past the first three, counted rather than named (`KEY_SHOWN`). */
.qz-c-review__accepted-more {
  font-size: 13px;
  color: var(--text-secondary);
}

/* The class results: the poll's rows (`.cl-poll__row` in slides.css), a solid
   light bar behind the label and the right answer bordered. */
.qz-c-review__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qz-c-review__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  font-size: 15px;
  color: var(--text-color);
  overflow: hidden;
}

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

.qz-c-review__bar {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: var(--primary-light);
  transition: inline-size 0.4s ease;
  pointer-events: none;
}

.qz-c-review__place,
.qz-c-review__label,
.qz-c-review__mark,
.qz-c-review__count {
  position: relative;
}

.qz-c-review__place {
  flex: none;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-tertiary);
}

.qz-c-review__label {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.qz-c-review__mark {
  flex: none;
  padding: 1px var(--space-sm);
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  font-size: 12px;
  color: var(--primary-color);
}

.qz-c-review__count {
  flex: none;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.qz-c-review__explain {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--primary-light);
  font-size: 14px;
  color: var(--text-color);
}

.qz-c-review__explain-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

/* ── The summary step ─────────────────────────────── */
.qz-c-summary {
  gap: var(--space-md);
}

.qz-c-summary__facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm) var(--space-md);
}

.qz-c-summary__fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.qz-c-summary__fact dt {
  font-size: 12px;
  color: var(--text-secondary);
}

.qz-c-summary__fact dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  color: var(--text-color);
  text-align: start;
}

.qz-c-summary__none {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.qz-c-histo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qz-c-histo__row {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr) 2.5rem;
  align-items: center;
  gap: var(--space-sm);
}

.qz-c-histo__band {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.qz-c-histo__track {
  display: block;
  block-size: 8px;
  border-radius: var(--radius-full);
  background: var(--border-light);
  overflow: hidden;
}

.qz-c-histo__fill {
  display: block;
  block-size: 100%;
  background: var(--primary-color);
}

.qz-c-histo__count {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-color);
  text-align: center;
}

/* ── The roster ───────────────────────────────────── */
/* Three columns that fit a 390px phone: the name takes what is left and wraps
   rather than pushing the two numbers off the screen. */
.qz-c-roster__title {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
}

.qz-c-roster__total {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
}

.qz-c-roster__table {
  display: flex;
  flex-direction: column;
}

.qz-c-roster__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.5rem 4.5rem;
  align-items: center;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-block-end: 1px solid var(--border-light);
  font-size: 15px;
  color: var(--text-color);
}

.qz-c-roster__row:last-child {
  border-block-end: none;
}

.qz-c-roster__row--head {
  padding-block: var(--space-xs);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-tertiary);
}

.qz-c-roster__row--head > :not(:first-child) {
  text-align: center;
}

.qz-c-roster__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-inline-size: 0;
}

.qz-c-roster__who {
  overflow-wrap: anywhere;
}

.qz-c-roster__row.is-finished .qz-c-roster__who {
  color: var(--text-secondary);
}

.qz-c-roster__tag,
.qz-c-roster__done {
  flex: none;
  padding: 0 6px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.qz-c-roster__done {
  border-color: rgba(20, 129, 79, 0.22);
  background: rgba(20, 129, 79, 0.08);
  color: #14814f;
}

/* "הוגש": the seat pressed "סיום והגשה". Blue rather than green, so it reads
   apart from "הושלם" at a glance; the word says which it is either way. */
.qz-c-roster__done--submitted {
  border-color: var(--primary-border);
  background: var(--fsp-hover-bg);
  color: var(--primary-color);
}

.qz-c-roster__num {
  font-family: var(--font-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}

.qz-c-roster__empty {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

/* ── Wider screens ────────────────────────────────── */
@media (min-width: 768px) {
  .qz-c-run__actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .qz-c-run__end {
    grid-column: auto;
  }

  .qz-c-summary__facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* EVERY NEW BLOCK ON THE SLIDE'S OWN MEASURE, centred, the way app.css lines up
   the console's own blocks at this width (`--cl-measure`, set on `.cl-console`).
   The lock lines inside cards and inside the deck picker are not listed: they
   take their container's width. */
@media (min-width: 1025px) {
  .cl-console__main > .qz-c-lock,
  .qz-c-start,
  .qz-c-run,
  .qz-c-pick {
    inline-size: var(--cl-measure);
    margin-inline: auto;
  }
}