/* O widget `grade` (FeitoWeb.Widgets.Layout, docs/telas.md §2). As colunas de 12 do formulário, do painel e da
   ficha (.grade e .c1…c12); no celular, cada coluna ocupa a linha. Trazido da casca na etapa 1 (26/10/2026). Regra
   (docs/telas.md §4, o teste test/feito_web/widgets_regra_test.exs): cor só por token (var(--…), com a cor de hoje
   como reserva); cor nova é token novo, no style.css (claro) e no temas.css (escuro e acrílico). Ligado no layout
   raiz logo depois do style.css (FeitoWeb.Widgets.folhas/0): as camadas da casca (visual.css, componentes.css,
   navegacao.css, temas.css, fonte.css e a escala gerada por `mix casca.escala`) vestem por cima, como vestem tudo.
   Mudou este arquivo: `mix casca.escala` (o ./servidor faz sozinho). */

/* — de style.css */
.grade { display: grid; gap: 12px 16px; grid-template-columns: repeat(12, 1fr); }
.c2 { grid-column: span 2; } .c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; }
.c6 { grid-column: span 6; } .c8 { grid-column: span 8; } .c12 { grid-column: span 12; }
@media (max-width: 760px) { .grade > * { grid-column: span 12 !important; } }

/* as larguras que a casca não tinha (o widget aceita de 1 a 12) */
.c1 { grid-column: span 1; } .c7 { grid-column: span 7; } .c9 { grid-column: span 9; }
.c10 { grid-column: span 10; } .c11 { grid-column: span 11; }