/* ── Quiz styles, shared by quiz-app.html and bonus-quiz.html ──────────────
   Extracted from two near-identical ~310-line inline <style> blocks so a
   future style change only needs to be made once. Each page keeps only the
   rules that are genuinely its own inline (quiz-app.html still has
   .lab-btn/.lab-btn-row, since bonus-quiz has no linked labs). */

/* Score panel in main area */
.quiz-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 20px;
  flex: 1;
  min-width: 120px;
  box-shadow: var(--shadow-sm);
}
.stat-card .label {
  font-size: var(--fs-legal);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.stat-card .value {
  font-size: var(--fs-lg);
  font-weight: 700;
}
.stat-card .value.v-correct { color: var(--green); }
.stat-card .value.v-wrong   { color: var(--red); }
.stat-card .value.v-accent  { color: var(--accent); }

.score-bar-outer {
  height: 5px;
  background: var(--surface);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 28px;
}
.score-bar-outer .fill {
  height: 100%;
  border-radius: 3px;
  background: var(--grad-primary);
  transition: width .4s ease;
}

/* Topic & date filter chips */
.filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.filter-label {
  font-size: var(--fs-legal);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
  align-self: center;
  margin-right: 4px;
}
.filter-chip {
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.filter-chip:hover { border-color: var(--accent); color: var(--text); }
.filter-chip.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }

/* Progress strip — one pip per filtered question */
.progress-strip {
  display: flex;
  gap: 3px;
  margin-bottom: 28px;
  flex-wrap: wrap;
  align-items: center;
}
.progress-pip {
  width: 12px;
  height: 8px;
  border-radius: 2px;
  background: var(--surface2);
  cursor: pointer;
  transition: all .15s;
  border: 1px solid var(--text-dim);
  opacity: 0.85;
  flex-shrink: 0;
}
.progress-pip:hover { background: var(--text-dim); opacity: 1; transform: scaleY(1.4); }
.progress-pip.current { background: var(--accent); border-color: var(--accent); opacity: 1; }
.progress-pip.answered-correct { background: var(--green); border-color: var(--green); opacity: 1; }
.progress-pip.answered-wrong { background: var(--red); border-color: var(--red); opacity: 1; }

/* Question display */
.q-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.q-number {
  font-size: var(--fs-legal);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
}
.q-topic-tag {
  font-size: var(--fs-legal);
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 20px;
  background: var(--accent-bg);
  color: var(--accent);
}
.q-date {
  font-size: var(--fs-legal);
  color: var(--text-dim);
  margin-left: auto;
}
.q-text {
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.7;
  margin-bottom: 24px;
  color: var(--text);
}

/* Options */
.quiz-options { display: flex; flex-direction: column; gap: 10px; }
.quiz-option {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .15s;
  font-size: var(--fs-base);
  line-height: 1.6;
}
.quiz-option:hover { border-color: var(--accent); background: var(--accent-bg); box-shadow: var(--shadow-sm); }
.quiz-option .letter {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface2);
  font-size: var(--fs-legal);
  font-weight: 700;
  margin-top: 2px;
  transition: all .15s;
}
.quiz-option.correct { border-color: var(--green); background: var(--green-bg); box-shadow: var(--shadow-sm); }
.quiz-option.correct .letter { background: var(--green); color: var(--bg); }
.quiz-option.wrong { border-color: var(--red); background: var(--red-bg); box-shadow: var(--shadow-sm); }
.quiz-option.wrong .letter { background: var(--red); color: var(--on-accent); }
.quiz-option.disabled { pointer-events: none; opacity: .45; }
.quiz-option.correct.disabled, .quiz-option.wrong.disabled { opacity: 1; }
.quiz-option.selected { border-color: var(--accent); background: var(--accent-bg); box-shadow: var(--shadow-sm); }
.quiz-option.selected .letter { background: var(--accent); color: var(--bg); }
.q-hint { font-size: var(--fs-legal); color: var(--text-dim); margin: -8px 0 14px; }

/* Explanation */
.quiz-explanation {
  margin-top: 20px;
  padding: 22px 24px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--fs-base);
  line-height: 1.7;
  display: none;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.quiz-explanation.visible { display: block; animation: fadeSlide .3s ease; }
.quiz-explanation .exp-header { font-weight: 700; color: var(--green); margin-bottom: 14px; font-size: var(--fs-md); }
.quiz-explanation .exp-option {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: var(--fs-base);
  line-height: 1.7;
}
.quiz-explanation .exp-option:last-child { margin-bottom: 0; }
.quiz-explanation .exp-option.correct-exp { background: var(--green-bg); border: 1px solid rgba(52,168,83,.15); }
.quiz-explanation .exp-option.wrong-exp { background: var(--surface); border: 1px solid var(--border); }
.quiz-explanation .exp-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: var(--fs-legal);
  font-weight: 700;
  margin-top: 2px;
}
.quiz-explanation .exp-option.correct-exp .exp-icon { background: var(--green); color: var(--on-accent); }
.quiz-explanation .exp-option.wrong-exp .exp-icon { background: var(--red); color: var(--on-accent); }
.quiz-explanation .exp-key { font-weight: 700; color: var(--text); }

/* Long, unbreakable tokens (protoPayload.authenticationInfo.principalEmail,
   cloudaudit.googleapis.com%2Factivity,
   composer.googleapis.com/environment/scheduler/heartbeat_age_in_seconds …)
   must be allowed to break. Option/explanation text sits in a flex child,
   whose automatic minimum size is its min-content width — the longest token —
   so without this the text paints past the rounded border and widens the whole
   page beyond a phone viewport. `anywhere` (not `break-word`) is required:
   only `anywhere` also shrinks the min-content size. */
.q-text,
.quiz-option,
.quiz-explanation .exp-header,
.quiz-explanation .exp-option {
  overflow-wrap: anywhere;
}
.quiz-option > span:last-child,
.quiz-explanation .exp-option > span:last-child {
  min-width: 0;
}

@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Navigation row */
.quiz-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.quiz-nav-btn {
  padding: 9px 22px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.quiz-nav-btn:hover { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.quiz-nav-btn:disabled { opacity: .3; pointer-events: none; }
.quiz-nav-btn.primary { background: var(--grad-primary); border-color: transparent; color: var(--on-accent); box-shadow: var(--shadow-sm); }
.quiz-nav-btn.primary:hover { box-shadow: var(--shadow-md), var(--glow-accent); color: var(--on-accent); }
.page-info { font-size: var(--fs-sm); color: var(--text-dim); font-weight: 500; }

/* Reset button */
.quiz-reset {
  display: inline-block;
  margin-top: 16px;
  padding: 7px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.quiz-reset:hover { border-color: var(--red); color: var(--red); background: var(--red-bg); }
.quiz-reset.confirming, .quiz-reset-inline.confirming {
  border-color: var(--red); color: var(--on-accent); background: var(--red);
}

/* Inline reset button (next to score bar) */
.quiz-reset-inline {
  flex-shrink: 0;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.quiz-reset-inline:hover { border-color: var(--red); color: var(--red); background: var(--red-bg); }

/* Empty state */
.empty-state {
  text-align: center;
  padding: 60px 40px;
  color: var(--text-dim);
}
.empty-state .es-icon { font-size: 2.5rem; margin-bottom: 12px; }
.empty-state h3 { font-size: var(--fs-md); color: var(--text); margin-bottom: 6px; }

/* Keyboard hint */
.kb-hint {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  margin-top: 12px;
}
.kb-hint kbd {
  display: inline-block;
  padding: 1px 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: var(--fs-legal);
}