/* Tanoda — gyakorló kitöltése. A nyilvános oldal palettájából dolgozik. */

.tnd-quiz { list-style: none; margin: 0; padding: 0; counter-reset: feladat; }
.tnd-quiz__item {
    counter-increment: feladat;
    padding: 16px 18px; margin: 0 0 12px;
    background: var(--tnd-card); border-radius: 12px;
    border-left: 5px solid var(--tnd-line);
}
.tnd-quiz__item.is-right { border-left-color: var(--tnd-type-holiday); }
.tnd-quiz__item.is-wrong { border-left-color: var(--tnd-type-national); }

.tnd-quiz__q { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
.tnd-quiz__q::before { content: counter(feladat) ". "; color: var(--tnd-muted); }

.tnd-quiz__opts { display: flex; flex-direction: column; gap: 8px; }
.tnd-quiz__opt {
    display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
    padding: 10px 12px; border: 1px solid var(--tnd-line-strong); background: var(--tnd-field);
}
.tnd-quiz__opt input { margin-top: 3px; accent-color: var(--tnd-accent); flex: none; }
.tnd-quiz__opt:has(input:checked) { border-color: var(--tnd-accent); box-shadow: inset 0 0 0 1px var(--tnd-accent); }

.tnd-quiz__input {
    font: inherit; font-size: 16px; width: 100%; max-width: 320px;
    padding: 11px 12px; border: 1px solid var(--tnd-line-strong);
    background: var(--tnd-field); color: var(--tnd-ink);
}
.tnd-quiz__input:focus-visible { outline: 0; border-color: var(--tnd-accent); box-shadow: inset 0 0 0 1px var(--tnd-accent); }

.tnd-quiz__verdict { margin: 10px 0 0; font-weight: 700; }
.is-right .tnd-quiz__verdict { color: var(--tnd-type-holiday); }
.is-wrong .tnd-quiz__verdict { color: var(--tnd-type-national); }
.tnd-quiz__why { margin: 4px 0 0; color: var(--tnd-muted); font-size: 14px; line-height: 1.5; }

/* Az eredmény a lap tetején, hogy azonnal látszódjon. */
.tnd-score {
    margin: 0 0 18px; padding: 14px 16px; border-radius: 12px;
    background: var(--tnd-chip-bg); color: var(--tnd-ink); font-size: 16px;
}
.tnd-score.is-ok { background: var(--tnd-type-program-bg); color: var(--tnd-type-program-ink); }
.tnd-score.is-good { background: var(--tnd-type-holiday-bg); color: var(--tnd-type-holiday-ink); }