/* #325 — comprehension quiz peer page (Phase C of #289; D8).
 *
 * A full-viewport SIBLING surface of the live view, not a side drawer: it
 * slides in from the right over the live meeting (which stays mounted behind
 * it) and is render-mode-agnostic. Reworked toward Ed's original prototype: a
 * single vertically-scrollable dark page — header (title + subtitle + recall
 * ring) / persistent metrics strip / meeting label / question card with lettered
 * options — with the results on the SAME page as the questions.
 *
 * Design tokens (--surface, --border, --radius-*, --space-*, --amber, --green,
 * the --sig-* signal taxonomy, etc.) come from styles.css / styles-tokens.css.
 * --quiz-accent is the one local alias: the ORi taxonomy magenta reused as the
 * page's pink dot accent so no new palette is introduced. The per-type pill
 * colors are the existing decodable --sig-* taxonomy tokens.
 */

.quiz-page {
  /* pink/magenta accent for the decorative dots = the ORi taxonomy magenta */
  --quiz-accent: var(--sig-decision);
}

/* The regions and the result/challenge blocks are toggled via the `hidden`
 * attribute, but each carries a `display` rule below — and a `display` rule
 * defeats the UA `[hidden] { display: none }`. This restores it inside the page
 * so exactly one region shows at a time (and the completion panel stays hidden
 * behind the card). */
.quiz-page [hidden] { display: none !important; }

#quiz-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 300;
  display: none;
}
#quiz-overlay.open { display: block; }

.quiz-page {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(560px, 100vw);
  max-width: 100vw;
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 301;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--duration-normal) var(--ease-out);
  pointer-events: none;
}
.quiz-page.open {
  transform: translateX(0);
  pointer-events: auto;
}

/* Below the drawer width the page is the whole viewport — a true peer page. */
@media (max-width: 560px) {
  .quiz-page { width: 100vw; border-left: none; }
}

/* A pink/magenta accent dot — decoration, made from the accent, not an icon. */
.quiz-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--quiz-accent);
  flex: none;
}

/* ── Header (sticky): back chevron · title block · recall ring ── */
.quiz-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.quiz-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  padding: var(--space-1);
  margin-left: calc(var(--space-1) * -1);
  border-radius: var(--radius-sm);
  flex: none;
  transition: color var(--duration-fast), background var(--duration-fast);
}
.quiz-back:hover { color: var(--text); background: var(--surface-hi); }
.quiz-titleblock { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.quiz-title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.quiz-subtitle {
  margin: 0;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
}
.quiz-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  flex: none;
}

.quiz-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
}
.quiz-region { display: flex; flex-direction: column; gap: var(--space-4); }

.quiz-hint {
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
  margin: 0;
}

/* Empty / dark state — calm, never an error. */
#quiz-empty {
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  padding-top: var(--space-7);
}
.quiz-empty-mark { color: var(--text-3); opacity: 0.7; }
.quiz-empty-title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
}
#quiz-empty .quiz-hint { max-width: 34ch; }

/* ── Meeting picker (picker-first, B4): choose which meeting(s) to quiz on ── */
.quiz-picker { display: flex; flex-direction: column; gap: var(--space-4); }
.quiz-picker-title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
}
.quiz-pick-list { display: flex; flex-direction: column; gap: var(--space-2); }
.quiz-pick-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-1, color-mix(in srgb, var(--text-2) 18%, transparent));
  border-radius: var(--radius-md);
  cursor: pointer;
}
.quiz-pick-row:hover { border-color: var(--accent, var(--text-2)); }
.quiz-pick-cb { flex: 0 0 auto; accent-color: var(--accent, var(--text-2)); width: 18px; height: 18px; }
.quiz-pick-main { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.quiz-pick-title {
  font-size: var(--fs-sm, var(--fs-md));
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quiz-pick-meta {
  font-size: var(--fs-xs);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.quiz-pick-start {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-sm, var(--fs-md));
  font-weight: 600;
  color: var(--on-accent, #fff);
  background: var(--accent, var(--text));
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.quiz-pick-start:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Recall ring (header, ~56px): green arc + bare green number ── */
.quiz-ring { position: relative; width: 56px; height: 56px; flex: none; }
.quiz-ring-track { stroke: var(--border); }
.quiz-ring-fill {
  stroke: var(--green);
  stroke-linecap: round;
  transition: stroke-dashoffset var(--duration-normal) var(--ease-out);
}
.quiz-ring-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--green);
}

/* ── Persistent metrics strip — three raised tiles, always with the card ── */
#quiz-metrics-strip { display: block; }
.quiz-metrics { display: flex; gap: var(--space-3); }
.quiz-metric {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-hi);
  border: 1px solid var(--border-sub);
  border-radius: var(--radius-md);
}
.quiz-metric-num { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.1; }
.quiz-metric-num.is-recall { color: var(--green); }
.quiz-metric-label {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  line-height: 1.3;
}

/* ── Meeting context label ── */
.quiz-meeting-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
}

/* ── Question card ── */
.quiz-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface-hi);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.quiz-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.quiz-card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}
/* Anchor-concept pill (v0.9 fact rebase) — the Kept concept the question is
 * anchored to. A concept name is a label, not a taxonomy, so this is a single
 * neutral chip (one brand voice; no per-type color), title-case, not shouting. */
.quiz-concept-pill {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-2, color-mix(in srgb, var(--text-2) 8%, transparent));
  border: 1px solid var(--border-1, color-mix(in srgb, var(--text-2) 20%, transparent));
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quiz-stem {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
}
.quiz-options { display: flex; flex-direction: column; gap: var(--space-2); }
.quiz-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.4;
  cursor: pointer;
  transition: border-color var(--duration-fast), background var(--duration-fast);
}
.quiz-option-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-2);
}
.quiz-option-text { min-width: 0; font-weight: 600; }
.quiz-option:hover:not(:disabled) { border-color: var(--accent); }
.quiz-option:disabled { cursor: default; }
.quiz-option.is-answer {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, var(--surface));
}
.quiz-option.is-answer .quiz-option-badge { border-color: var(--green); color: var(--green); }
.quiz-option.is-wrong {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 12%, var(--surface));
}
.quiz-option.is-wrong .quiz-option-badge { border-color: var(--red); color: var(--red); }

.quiz-result { display: flex; flex-direction: column; gap: var(--space-3); }
.quiz-pill {
  align-self: flex-start;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
}
.quiz-pill.is-correct { color: var(--green); background: color-mix(in srgb, var(--green) 15%, transparent); }
.quiz-pill.is-incorrect { color: var(--red); background: color-mix(in srgb, var(--red) 15%, transparent); }
.quiz-reveal { margin: 0; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5; }
.quiz-result-actions { display: flex; justify-content: flex-end; }
.quiz-next {
  padding: var(--space-2) var(--space-5);
  border: none;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.quiz-next:hover { filter: brightness(1.08); }

/* ── Challenge (the amber #283 capture) ── */
.quiz-challenge { display: flex; flex-direction: column; gap: var(--space-2); }
.quiz-challenge-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: none;
  color: var(--amber);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.quiz-challenge-btn .icon { color: var(--amber); }
.quiz-challenge-btn:hover { filter: brightness(1.1); }
.quiz-challenge-form { display: flex; flex-direction: column; gap: var(--space-2); }
.quiz-challenge-reason {
  width: 100%;
  resize: vertical;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
  font-family: inherit;
}
.quiz-challenge-reason:focus { outline: none; border-color: var(--amber); }
.quiz-challenge-send {
  align-self: flex-start;
  padding: var(--space-1) var(--space-4);
  border: 1px solid var(--amber);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--amber) 14%, transparent);
  color: var(--amber);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.quiz-challenge-done { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }

/* ── Completion panel (deck finished; strip stays above it) ── */
.quiz-complete { display: flex; flex-direction: column; gap: var(--space-3); }
.quiz-complete-title { margin: 0; font-size: var(--fs-md); font-weight: 700; color: var(--text); }
.quiz-caveat { margin: 0; font-size: var(--fs-xs); color: var(--text-3); line-height: 1.5; max-width: 44ch; }

/* ── Session-end offer (D8 door 2) ── */
.quiz-offer-toast {
  position: fixed;
  /* Symmetric insets + auto margins centre WITHOUT starving shrink-to-fit —
     left:50% + translateX(-50%) offers the box only the space right of the
     midline (195px at 390px). Same bug as .mic-level-popup (#345 D). */
  left: var(--space-5);
  right: var(--space-5);
  margin-inline: auto;
  width: fit-content;
  bottom: var(--space-5);
  transform: translateY(200%);
  z-index: 260;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  transition: transform var(--duration-normal) var(--ease-out), opacity var(--duration-normal) var(--ease-out);
  pointer-events: none;
}
.quiz-offer-toast.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.quiz-offer-text { font-size: var(--fs-sm); color: var(--text); }
.quiz-offer-open {
  padding: var(--space-1) var(--space-4);
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.quiz-offer-dismiss {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: var(--fs-md);
  line-height: 1;
  cursor: pointer;
  padding: 0 var(--space-1);
}