#masterquiz-content {
  #mq-config, #mq-quiz, #mq-results { display: none; }
  &.screen-config #mq-config,
  &.screen-quiz #mq-quiz,
  &.screen-results #mq-results { display: block; }
}

#mq-results:not(.has-incorrect) {
  #mq-incorrect-section,
  #mq-retake-missed { display: none; }
}

#mq-results:not(.has-correct) {
  #mq-correct-section { display: none; }
}

.mq-domain-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .75rem;
}

.mq-domain-filters > label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--mono);
  font-size: var(--text-xs);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .45rem .75rem;
  min-height: 44px;
  cursor: pointer;
  transition: all var(--dur-fast);
}

.mq-domain-filters > label:has(input:checked) {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
}

.mq-config-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
}

.mq-select:focus {
  outline: none;
  border-color: var(--accent);
}

.mq-priority-label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
}

.mq-stats {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
  margin-bottom: 1rem;
  min-height: 1.2em;
}

.mq-quiz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}


.mq-domain-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: .1rem .45rem;
  margin-bottom: .5rem;
}

.mq-stem {
  font-size: var(--text-lg);
  line-height: 1.6;
  margin-bottom: 1rem;
  border-left: 3px solid var(--accent);
  padding-left: .7rem;
}

.mq-options {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1rem;
}

.mq-options > button {
  font-family: var(--mono);
  font-size: var(--text-sm);
  background: var(--surface);
  border: 2px solid var(--border);
  color: var(--text);
  padding: .7rem 1rem;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--box-shadow-sm);
  transition: all var(--dur-fast);
  min-height: 44px;
}

.mq-options > button:hover:not(.locked) {
  border-color: var(--accent-dim);
}

.mq-options > button.selected {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
}

.mq-options > button.correct {
  border-color: var(--correct-border);
  background: var(--correct-bg);
  color: var(--correct);
}

.mq-options > button.incorrect {
  border-color: var(--error-border);
  background: var(--error-bg);
  color: var(--error);
}

.mq-options > button.correct::before {
  content: '\2713\a0';
}

.mq-options > button.incorrect::before {
  content: '\2717\a0';
}

.mq-options > button.locked {
  cursor: default;
  pointer-events: none;
}

#mq-quiz {
  &.answered-correct .mq-stem { border-left-color: var(--correct); }
  &.answered-incorrect .mq-stem { border-left-color: var(--error); }
}

#mq-verdict {
  font-family: var(--mono);
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: .5rem;
  color: transparent;
  white-space: nowrap;
  height: 1lh;

  #mq-quiz.answered-correct & {
    color: var(--correct);
    &::before { content: '\200A\2713\200ACorrect.'; }
  }

  #mq-quiz.answered-incorrect & {
    color: var(--error);
    &::before { content: '\200A\2717\202FIncorrect.'; }
  }
}

.mq-equiv-highlight {
  color: var(--accent);
  font-weight: 700;
}

.mq-pin-label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--text-xs);
  color: var(--text-dim);
  margin-top: .5rem;
  cursor: pointer;
}

.mq-results-score {
  font-family: var(--mono);
  font-size: var(--text-xl);
  font-weight: 700;
  text-align: center;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  border-radius: 6px;
}

.mq-score-correct {
  color: var(--correct);
  background: var(--correct-bg);
}

.mq-score-yellow {
  color: var(--warn);
  background: var(--warn-bg);
}

.mq-score-red {
  color: var(--error);
  background: var(--error-bg);
}

.mq-result-row {
  border-bottom: 1px solid var(--border);
  padding: .25rem 0;
}

.mq-result-row:last-child {
  border-bottom: none;
}

.mq-result-summary {
  display: block;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-size: var(--text-sm);
  color: var(--text);
  padding: .5rem .25rem;
  cursor: pointer;
  transition: color var(--dur-fast);
}

.mq-result-summary:hover {
  color: var(--accent);
}

.mq-result-detail {
  padding: .75rem 1rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0 0 6px 6px;
  margin-top: -1px;
}

.mq-result-stem {
  font-size: var(--text-sm);
  margin-bottom: .75rem;
  line-height: 1.6;
}

.mq-result-comparison {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: .75rem;
}

.mq-result-opt {
  font-family: var(--mono);
  font-size: var(--text-xs);
  padding: .35rem .6rem;
  border-radius: 4px;
  background: var(--surface2);
}

.mq-result-opt.correct {
  background: var(--correct-bg);
  color: var(--correct);
  border-left: 3px solid var(--correct-border);
}

.mq-result-opt.incorrect {
  background: var(--error-bg);
  color: var(--error);
  border-left: 3px solid var(--error-border);
}

.mq-result-save {
  margin-top: .5rem;
}

@media (max-width:600px) {

  .mq-progress-row {
    flex-direction: column;
    align-items: stretch;
    gap: .35rem;
  }

  .mq-quiz-header {
    flex-direction: column;
    align-items: stretch;
  }
}