/* Проверум — палитра и то, что есть только здесь.
 *
 * Предмет — измерение, поэтому цвет спокойный и точный: индиго вместо
 * привычного «бизнес-синего», много воздуха, никаких градиентов на пол-экрана.
 * Тест — это сосредоточенность, и страница не должна с ней спорить.
 *
 * Янтарный ровно один и только для результата: он появляется там, где человек
 * видит свою цифру. Если красить им кнопки, он перестанет отмечать главное.
 */

:root {
    --c-ink: #1e1b2e;
    --c-text: #262238;
    --c-muted: #635d7a;

    --c-bg: #f8f7fb;
    --c-surface: #ffffff;
    --c-surface-2: #f0eef7;
    --c-border: #e2dff0;
    --c-border-strong: #cbc6e2;

    --c-primary: #4a3f8f;
    --c-primary-dark: #383070;
    --c-primary-soft: #eeecf9;

    --c-link: #4a3f8f;
    --c-link-hover: #383070;
    --c-focus: #4a3f8f;
    --c-accent: #4a3f8f;

    --c-ok: #15803d;
    --c-ok-soft: #e9f4ec;
    --c-err: #b42318;
    --c-err-soft: #fdecea;

    --c-result: #b06d12;
    --c-result-soft: #fdf3e4;
}

/* ── Первый экран ─────────────────────────────────────────────────────────*/
.hero { padding: var(--s-9) 0 var(--s-8); background: var(--c-surface); border-bottom: 1px solid var(--c-border); }
.hero h1 { max-width: 20ch; }
.hero .lead { max-width: 62ch; font-size: 1.12rem; }

/* ── Карточка теста ───────────────────────────────────────────────────────*/
.test {
    display: flex; flex-direction: column;
    height: 100%;
    padding: var(--s-5);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}
.test-tag {
    align-self: flex-start;
    font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--c-primary-dark); background: var(--c-primary-soft);
    padding: 3px 9px; border-radius: 999px;
    margin-bottom: var(--s-3);
}
.test h3 { margin-bottom: var(--s-2); }
.test p { color: var(--c-muted); font-size: .96rem; flex: 1; }
.test-meta { font-size: .88rem; color: var(--c-muted); border-top: 1px solid var(--c-border); padding-top: var(--s-3); }
.test-soon { opacity: .72; }

/* ── Сам тест на чтение ───────────────────────────────────────────────────*/
.reader {
    font-size: 1.12rem;
    line-height: 1.75;
    max-width: 62ch;
}
.reader p { margin-bottom: var(--s-4); }

.timer {
    display: inline-flex; align-items: baseline; gap: 6px;
    font-family: var(--mono);
    font-size: 1.5rem;
    color: var(--c-primary);
    font-variant-numeric: tabular-nums;
}
.timer small { font-size: .8rem; color: var(--c-muted); }

/* Итог — единственное место с янтарным. */
.result {
    padding: var(--s-6);
    background: var(--c-result-soft);
    border: 1px solid var(--c-result);
    border-radius: var(--radius);
}
.result-num {
    font-size: 2.6rem; font-weight: 800; line-height: 1;
    color: var(--c-result);
    font-variant-numeric: tabular-nums;
}

.scale { display: grid; gap: 6px; margin-top: var(--s-4); }
.scale-row { display: grid; grid-template-columns: 8.5em 1fr auto; gap: var(--s-3); align-items: center; font-size: .92rem; }
.scale-bar { height: 8px; border-radius: 999px; background: var(--c-surface-2); overflow: hidden; }
.scale-fill { height: 100%; background: var(--c-primary); opacity: .35; }
.scale-row.is-you .scale-fill { background: var(--c-result); opacity: 1; }
.scale-row.is-you { font-weight: 700; color: var(--c-ink); }

/* ── Вопросы ──────────────────────────────────────────────────────────────*/
.q { padding: var(--s-4) 0; border-bottom: 1px solid var(--c-border); }
.q:last-of-type { border-bottom: 0; }
.q-title { font-weight: 600; margin-bottom: var(--s-3); }
.q label { display: flex; gap: var(--s-3); align-items: flex-start; font-weight: 400; padding: 7px 0; cursor: pointer; }
.q input { width: 20px; height: 20px; min-height: 0; flex: 0 0 auto; margin-top: 2px; }