/* Внешний интерфейс: сначала телефон (большинство учеников), потом шире. */
:root { --pico-font-size: 106.25%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
.container { max-width: 46rem; }
.site-header { display: flex; justify-content: space-between; align-items: center; padding-block: .75rem; }
.brand { font-weight: 700; text-decoration: none; }
.lang a { margin-left: .5rem; text-decoration: none; padding: .1rem .4rem; border-radius: .3rem; }
.lang a[aria-current] { background: var(--pico-primary-background); color: var(--pico-primary-inverse); }
.site-footer { padding-block: 1rem; text-align: center; }
.muted { color: var(--pico-muted-color); }
.error { color: var(--pico-del-color); }
.ok { color: var(--pico-ins-color); }
.center { text-align: center; }
h1 { font-size: 1.6rem; }

/* выбор: класс, предмет, количество — «пилюли» */
.choice-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice-row legend { width: 100%; }
.pill { margin: 0; }
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill span { display: inline-block; padding: .55rem 1rem; border: 1px solid var(--pico-muted-border-color);
  border-radius: 2rem; cursor: pointer; }
.pill input:checked + span { background: var(--pico-primary-background); color: var(--pico-primary-inverse);
  border-color: var(--pico-primary-background); }
.pill input:focus-visible + span { outline: 2px solid var(--pico-primary-focus); }
.pill small { opacity: .7; margin-left: .25rem; }
.topics label.topic { display: flex; gap: .5rem; align-items: flex-start; width: 100%; margin-bottom: .45rem; line-height: 1.35; }
.topics label.topic input { flex: none; margin-top: .15rem; }
.available { margin: 1rem 0; }
button.start { width: 100%; font-size: 1.15rem; padding-block: .9rem; }

/* вопрос */
.quiz-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .9rem; }
.timer strong { font-variant-numeric: tabular-nums; }
.timer.low strong { color: var(--pico-del-color); }
.progress-label { margin: .5rem 0 .25rem; font-weight: 600; }
.question .stem { font-size: 1.15rem; font-weight: 500; }
.answers { display: grid; gap: .6rem; margin: 0; }
button.answer { display: flex; gap: .75rem; align-items: center; width: 100%; text-align: left; margin: 0;
  padding: .9rem 1rem; font-size: 1.05rem; background: var(--pico-card-background-color);
  color: var(--pico-color); border: 1px solid var(--pico-muted-border-color); min-height: 3.5rem; }
button.answer:hover { border-color: var(--pico-primary-border); }
button.answer.chosen { border: 2px solid var(--pico-primary-border); background: var(--pico-primary-focus); }
.letter { flex: none; display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  border: 1px solid currentColor; font-weight: 600; font-size: .9rem; }
.quiz-nav { display: flex; justify-content: space-between; gap: .5rem; margin-top: 1rem; }
.quiz-nav a { margin: 0; }
.qnum { display: inline-block; min-width: 2rem; text-align: center; }
.big { font-size: 1.3rem; }

/* результат */
.result-summary .score { font-size: 2rem; font-weight: 700; margin: .25rem 0; }
.result-summary .pct { font-size: 1.2rem; opacity: .75; margin-left: .5rem; }
.result-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.result-actions form { margin: 0; }
.result-actions button, .result-actions a { margin: 0; width: auto; }
.share { word-break: break-all; }
.review.bad-q { border-left: 4px solid var(--pico-del-color); }
.review.ok-q { border-left: 4px solid var(--pico-ins-color); }
.review-options { list-style: none; padding: 0; }
.review-options li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .35rem .5rem; border-radius: .4rem; }
.review-options li.correct { background: color-mix(in srgb, var(--pico-ins-color) 18%, transparent); }
.review-options li.wrong { background: color-mix(in srgb, var(--pico-del-color) 18%, transparent); }
.review-options .tag { opacity: .8; font-style: italic; }

@media (min-width: 768px) {
  h1 { font-size: 2rem; }
  button.start { width: auto; padding-inline: 3rem; }
}
.unit { margin: .6rem 0 .2rem; }
.unit-head { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .35rem; }
.unit-head input { flex: none; margin-top: .15rem; }
.unit .topics { padding-left: 1.6rem; }
.all-topics { margin-bottom: .5rem; }
.quarter-topics { margin: -.25rem 0 1rem; }
.quarter-topics ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.quarter-topics li { margin: 0; }
.final-info { margin: .5rem 0 1rem; }
.final-info progress { margin: .25rem 0; }