/* A tela de peso por pergunta. Um tema por vez, e por isso ela é curta de propósito:
 * duas ou três linhas cabem num celular sem rolagem, que é a razão de existir uma tela
 * por tema em vez de uma lista de todos. */

.pesos-tema__topo {
    margin-bottom: 1.25rem;
}

.pesos-tema__nome {
    font-size: 1.25rem;
    margin: 0 0 0.25rem;
}

.pesos-tema__pontos {
    margin: 0;
    color: var(--muted, #9bb0ab);
    font-size: 0.95rem;
}

.pesos-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.1rem;
}

.peso-linha {
    background: var(--panel-elevated, #131d1b);
    border-radius: 10px;
    padding: 0.9rem 1rem;
}

.peso-enunciado {
    margin: 0 0 0.7rem;
    line-height: 1.4;
}

.peso-controle {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

/* O número dos pontos resultantes. Largura fixa para o valor não empurrar o deslizante a
 * cada arrasto — um controle que se move enquanto se mexe nele é difícil de mirar. */
.peso-resultado {
    min-width: 3.2rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

@media (max-width: 640px) {
    /* Aqui o deslizante ocupa o que sobra: a linha não tem nome de tema à esquerda como a
     * árvore de `/temas` tem, então não há por que apertá-lo. */
    .peso-controle .slider-shell {
        width: auto;
        flex: 1 1 auto;
    }
}

/* A largura da tela, e ela é a do questionário (`perguntas.css`, `.quiz-layout`): as duas
 * se alternam dentro do mesmo passo do fluxo, e larguras diferentes fazem o texto saltar
 * de lugar de uma para a outra.
 *
 * Sem isto o `#pesosSlot` era o único bloco da página sem largura dita. `.app-body > main`
 * não o alcança — aqui não há `<main>`, o slot é filho direto do corpo —, então o tema, os
 * enunciados e os deslizantes iam de ponta a ponta do monitor, colados na margem esquerda,
 * enquanto a abertura logo acima já estava centralizada em 680 px. Quanto mais larga a
 * tela, mais longe um do outro. O `max-width` (e não `width`) é pelo mesmo motivo escrito
 * em `.quiz-layout`. */
.pesos-slot {
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
    padding: 20px 20px 40px;
}