/* O widget `escolhas` (FeitoWeb.Widgets.Listas, docs/telas.md §2). Os cartões de escolher lado a lado (os
   módulos do catálogo, na tela Módulos): a grade .md-grade e o cartão .md-cartao, que saíram do modulos.css na F6
   (26/10/2026). O passo 2 do cadastro usa os mesmos cartões, com a caixa de marcar (o label.md-cartao, que ficou
   no modulos.css, folha da página do cadastro). 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 modulos.css */
.md-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .7rem; }
.md-cartao { position: relative; display: flex; flex-direction: column; gap: .35rem; margin: 0; padding: .9rem 1rem .85rem;
  border: 1px solid var(--linha); border-radius: .7rem; background: var(--branco); color: var(--tinta);
  font-size: .9rem; font-weight: normal; transition: border-color .2s, box-shadow .2s, transform .2s, background .2s; }
.md-cartao.md-ligado { border-color: var(--verde);
  background: color-mix(in srgb, var(--azul-f) 55%, var(--branco));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--verde) 25%, transparent); }
.md-topo { display: flex; align-items: center; gap: .45rem; color: var(--verde-esc); font-size: .95rem; }
.md-desc { color: var(--suave); font-size: .82rem; line-height: 1.4; }
.md-escopos { color: var(--suave); font-size: .72rem; opacity: .85; }
.md-cartao .btn { align-self: flex-start; margin-top: .35rem; }
@media (prefers-reduced-motion: reduce) { .md-cartao { transition: none; } }