/*
 * Painel · estilos da calibração da trava pelo celular (I7) — pacote C5.
 * Mesmas regras do painel.css: só layout, tudo com var(--token); nada de cor escrita à mão, de @font-face ou de @import.
 * Este arquivo é só do pacote: o painel.css fica para o que é de todos.
 */

/* Uma coluna estreita, pensada para o celular na mão de quem está ao lado da mesa. */
.cal-pagina { max-width: 560px; width: 100%; }
.cal-sub { display: flex; align-items: center; gap: var(--espaco-3); font-size: 14px; line-height: 20px; color: var(--texto-2); }
.cal-sub .ui-progresso { flex: 1; }

/* Carregando */
.cal-esqueleto-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--espaco-3); }
.cal-linha-100 { width: 100%; }
.cal-linha-85 { width: 85%; }
.cal-linha-70 { width: 70%; }

/* A pergunta do passo e a dica logo abaixo */
.cal-q { margin: 0; font: 700 22px/28px var(--font-titulo); }
.cal-dica { margin: 0; color: var(--texto-2); font-size: 15px; line-height: 22px; }

/* O ajuste de ângulo: −5, −1, o valor, +1, +5. Cabe em 360 px sem rolagem. */
.cal-ajuste { display: grid; grid-template-columns: 1fr 1fr minmax(84px, 1.4fr) 1fr 1fr; gap: var(--espaco-2); align-items: stretch; }
.cal-passo { min-height: 56px; min-width: 0; padding: 0 var(--espaco-1); font-size: 18px; font-weight: 700; justify-content: center; }
.cal-valor-caixa { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--raio-2); background: var(--superficie-funda); padding: var(--espaco-1); }
.cal-valor { font: 700 32px/36px var(--font-titulo); color: var(--texto); }
.cal-valor-rotulo { font-size: 13px; line-height: 18px; color: var(--texto-2); }
.cal-valor-vivo { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--espaco-1); }
.cal-valor-vivo output { font: 700 56px/56px var(--font-titulo); }

.cal-servo { margin: 0; min-height: 20px; font-size: 14px; line-height: 20px; color: var(--texto-2); }

/* Ajuda do passo */
.cal-ajuda { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--linha); padding-top: var(--espaco-2); }
.cal-ajuda a { display: flex; align-items: center; gap: var(--espaco-2); min-height: var(--alvo-toque); color: var(--link); font-weight: 500; }