/*
 * A geometria que o Bootstrap não tem — etapa 1 do layout do Figma
 * (`docs/cruds/layout-figma.md`, decisão 117).
 *
 * A regra deste arquivo: **só geometria** — tamanho, proporção, forma,
 * posição, grade. Cor, fonte, sombra e gradiente são da etapa 2, o tema; se
 * alguma regra aqui precisar de cor, ela vem de `var(--bs-…)` e nunca de um
 * código escrito à mão. Classe nova nasce só quando uma tela precisa dela, com
 * nome genérico em inglês, sem prefixo.
 *
 * Carregado DEPOIS de `tema/dist/ctc.css`: onde as duas falam do mesmo
 * seletor, esta vence — é o caso do container.
 */

/* A largura do Figma: 1440 com 40 de margem, em vez dos 1320 centrados do
   `container-xl`. Vai na mesma tag do container, não o substitui. */
.shell {
    max-width: 1440px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
@media (min-width: 992px) {
    .shell {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

/* O botão redondo de ícone da barra do topo (busca e sino): 38px no desenho.
   O `min-height` anula o mínimo que o tema dá a todo `.btn`. */
.icon-btn {
    width: 2.375rem;
    height: 2.375rem;
    min-height: 2.375rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* O quadrado de ícone das listas e das seções de material. */
.icon-box {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
}
.icon-box-lg {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
}

/* O rótulo pequeno acima do título de cada tela. O caixa-alta e o tamanho são
   utilitários do Bootstrap; o espaçamento entre letras, que ele não tem, é o
   que justifica a classe. O Figma usa 1,32px em 11px nos cartões e 1,54px no
   cabeçalho da página: 12% a 14%. */
.eyebrow {
    letter-spacing: .12em;
}

/* A barra de progresso fina do desenho: 5px nos cartões pequenos, contra os
   6 da barra comum (o tema define a comum). */
.progress-thin {
    height: .3125rem;
}

/* A barra de abas do celular, fixa embaixo, e a folga que ela exige no fim da
   página para não cobrir o último bloco, nem ser coberto pelo botão do
   assistente, que flutua logo acima dela (5,5rem do fundo, 3,25rem de
   altura). A barra fica uma camada acima do botão (1030), que já ficou por
   cima de uma lista aberta dela.

   O fundo do `<main>` é daqui e não de `py-4`: utilitário do Bootstrap é
   `!important`, e o `pb-4` dele anulava esta folga — o fim de toda página
   ficava atrás da barra. Com a barra, a folga vai até acima do botão do
   assistente (5,5 + 3,25 + 1rem); em tela grande, `py-lg-5` manda. */
.tabbar {
    z-index: 1031;
}
main.shell {
    padding-bottom: 1.5rem;
}
main.tabbar-space {
    padding-bottom: calc(9.75rem + env(safe-area-inset-bottom));
}

/* A rosca de percentual da Certificação: só o tamanho — o traço e a cor vêm
   dos atributos do SVG, com as variáveis do tema. */
.ring {
    width: 8rem;
    height: 8rem;
    flex-shrink: 0;
}