/* Quiz and flashcard screens: header with clock, feedback line, navigation, question dots. */

.quiz-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
}

.quiz-count {
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 600;
}

.clock {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
}

.clock-low {
  background: var(--warn-bg);
  color: var(--warn);
  border-color: var(--warn);
}

.feedback {
  font-weight: 600;
  padding: 10px 12px;
  border-radius: var(--radius);
}

.feedback-right {
  background: var(--ok-bg);
  color: var(--ok);
}

.feedback-wrong {
  background: var(--error-bg);
  color: var(--error);
}

.quiz-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}

.quiz-nav .btn-wide {
  grid-column: 1 / -1;
}

.quiz-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: var(--fs-small);
  cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease);
}

.dot:hover {
  border-color: var(--action);
}

.dot-done {
  background: var(--bg);
  border-color: var(--muted);
}

.dot-current {
  background: var(--action);
  border-color: var(--action);
  color: var(--action-text);
}