/* ============================================================
   Quiz — skórka theme'u noraline (Editorial Clarity).

   `show-block.html.twig` i `result-block.html.twig` przyszły żywcem
   z theme'u claude (mają to nawet w komentarzu na górze pliku) i stoją
   na generycznych klasach Tailwinda: text-gray-*, bg-purple-600.
   Obok reszty strony — Fraunces, atrament, bursztyn — czytało się to
   jak wklejka z innego serwisu.

   Nadpisujemy kolory zamiast przepisywać 800 linii markupu. Selektor
   `.quiz-block X` / `.quiz-result-block X` ma specyficzność (0,2,0)
   i bije pojedynczą klasę utility.

   UWAGA: świadomie NIE używamy tu klas arbitralnych Tailwinda
   w rodzaju bg-[var(--nl-ink)]. Skompilowany tailwind-compiled.css
   jest statyczny, więc takie klasy po cichu nic by nie zrobiły
   (CLAUDE.md, pkt 12). Stąd czysty CSS.
   ============================================================ */

.quiz-block,
.quiz-result-block {
    --qz-ink: var(--nl-ink, #1c1233);
    --qz-amber: var(--nl-amber, #f5a623);
    --qz-muted: var(--nl-muted, #5b5375);
    --qz-paper: #f7f4ef;
    --qz-line: rgba(28, 18, 51, 0.14);
}

/* ─── Typografia ─────────────────────────────────────────── */
.quiz-block .text-gray-900,
.quiz-result-block .text-gray-900 { color: var(--qz-ink); }

.quiz-block .text-gray-700,
.quiz-block .text-gray-600,
.quiz-result-block .text-gray-700,
.quiz-result-block .text-gray-600 { color: #3b3054; }

.quiz-block .text-gray-500,
.quiz-block .text-gray-400,
.quiz-result-block .text-gray-500,
.quiz-result-block .text-gray-400 { color: var(--qz-muted); }

/* Nagłówki wyniku w kroju wyświetleniowym theme'u, tak jak reszta strony. */
.quiz-result-block h3,
.quiz-result-block h4 {
    font-family: var(--font-display, "Fraunces", Georgia, serif);
    letter-spacing: -0.01em;
    color: var(--qz-ink);
}

/* ─── Płaszczyzny i linie ────────────────────────────────── */
.quiz-block .bg-gray-50,
.quiz-result-block .bg-gray-50 { background-color: var(--qz-paper); }

.quiz-block .border-gray-200,
.quiz-block .border-gray-100,
.quiz-result-block .border-gray-200,
.quiz-result-block .border-gray-100 { border-color: var(--qz-line); }

/* ─── Akcent: fiolet Tailwinda → atrament ────────────────── */
.quiz-block .text-purple-600,
.quiz-result-block .text-purple-600 { color: var(--qz-ink); }

.quiz-block .bg-purple-600,
.quiz-result-block .bg-purple-600 {
    background-color: var(--qz-ink);
    color: #fff;
}

/* Wyróżniona karta (Top 1) dostaje bursztyn — w tym interfejsie
   bursztyn konsekwentnie znaczy „to jest Twój wynik”. */
.quiz-result-block .border-purple-500 {
    border-color: var(--qz-amber);
    box-shadow: 6px 6px 0 rgba(245, 166, 35, 0.35);
}

/* ─── Karta wyniku ───────────────────────────────────────── */
.quiz-result-block > .bg-white {
    border: 2px solid var(--qz-ink);
    box-shadow: -10px 10px 0 var(--qz-amber);
}

/* ─── Pasek postępu ──────────────────────────────────────── */
.quiz-block .quiz-progress-fill {
    background: linear-gradient(90deg, var(--qz-ink), var(--qz-amber));
    box-shadow: none;
}

/* ─── Skala odpowiedzi ───────────────────────────────────── */
.quiz-block .likert-option {
    border-color: rgba(28, 18, 51, 0.22);
}
.quiz-block .likert-option:hover {
    border-color: var(--qz-ink);
    background: var(--qz-paper);
}
.quiz-block .likert-option:has(input:checked) {
    background: var(--qz-amber);
    border-color: var(--qz-ink);
    color: var(--qz-ink);
    box-shadow: 3px 3px 0 var(--qz-ink);
}
.quiz-block .likert-option .likert-label { opacity: 1; color: inherit; }

.quiz-block .choice-option {
    border-color: rgba(28, 18, 51, 0.22);
}
.quiz-block .choice-option:has(input:checked) {
    background: var(--qz-amber);
    border-color: var(--qz-ink);
    color: var(--qz-ink);
}

/* ─── Przycisk zapisu do newslettera ─────────────────────── */
/* `btn-pill-accent` bierze --color-accent, czyli pomarańcz spoza palety
   noraline. Tokenu nie ruszamy, bo używa go cały serwis — nadpisujemy
   tylko w obrębie quizu. */
.quiz-block .btn-pill-accent,
.quiz-result-block .btn-pill-accent {
    background: var(--qz-ink);
    color: #fff;
    border: 2px solid var(--qz-ink);
    box-shadow: 3px 3px 0 var(--qz-amber);
}
.quiz-block .btn-pill-accent:hover,
.quiz-result-block .btn-pill-accent:hover {
    background: var(--qz-ink);
    box-shadow: 5px 5px 0 var(--qz-amber);
    transform: translate(-1px, -1px);
}