/* ================================================================
   compare-lengths.css
   ----------------------------------------------------------------
   Tier 3: Copying and Comparing Lengths — same popup shell as
   meet-tools.css (quiz-overlay / quiz-modal / mt-stage / mt-picker).
   This file only adds cmp-overlay layout hooks; chips and stage
   styling come from meet-tools.css.
   ================================================================ */

.quiz-overlay[id^="cmp"] .quiz-modal { --mt-fig: 250px; }
.quiz-overlay[id^="cmp"] .quiz-question b { color: var(--secondary, #4b3f8f); }
.quiz-overlay[id^="cmp"] .bq-btn,
.quiz-overlay[id^="cmp"] .bq-next-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.quiz-overlay[id^="cmp"] .bq-next-btn { margin-bottom: env(safe-area-inset-bottom, 0px); }
.quiz-overlay[id^="cmp"] .bq-summary-buttons { margin-bottom: env(safe-area-inset-bottom, 0px); }
.quiz-overlay[id^="cmp"] .quiz-modal { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

@media (max-width: 560px) {
    .quiz-overlay[id^="cmp"] .quiz-modal { --mt-fig: 232px; }
}
@media (max-width: 380px) {
    .quiz-overlay[id^="cmp"] .quiz-modal { --mt-fig: 204px; }
}
@media (max-height: 560px) and (orientation: landscape) {
    .quiz-overlay[id^="cmp"] .quiz-modal { --mt-fig: 176px; }
}