/* Checklists de /materiais/ (item 5.23): era o mesmo <style> repetido nas
   duas paginas. Separado de materiais.css porque o button.hero-btn daqui
   nao pode alcancar os botoes do hub. Carregado depois de styles.css, na
   mesma posicao do bloco antigo. */
button.hero-btn { border: 0; cursor: pointer; font-family: var(--font-sans); }
.mt-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.mt-block { margin-top: 44px; }
.mt-block-h { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.mt-block-n {
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--green-ink);
}
.mt-block-h h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.2; color: var(--ink-900);
}
.mt-src { margin-top: 8px; font-size: var(--fs-sm); color: var(--ink-600); }
.mt-src a { color: var(--green-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.mt-list { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--line-ink); }
.mt-item { border-bottom: 1px solid var(--line-ink); }
.mt-item label {
  display: block; position: relative;
  padding: 14px 0 14px 38px;
  color: var(--ink-700); line-height: 1.6; cursor: pointer;
}
.mt-item label strong { color: var(--ink-900); }
/* A caixa e desenhada com borda, e nao com fundo, porque Chrome e Safari
   imprimem SEM fundo por padrao: com background, a folha sairia com uma
   lista sem nenhum quadrado para marcar. */
.mt-item label::before {
  content: ''; position: absolute; left: 0; top: 17px;
  width: 20px; height: 20px;
  border: 2px solid var(--ink-600); border-radius: 5px; background: #fff;
}
.mt-item label:hover::before { border-color: var(--green-ink); }
.mt-check:checked + label::before { border-color: var(--green-ink); background: var(--green-ink); }
.mt-check:checked + label::after {
  content: ''; position: absolute; left: 7px; top: 20px;
  width: 6px; height: 12px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
/* O input real fica em .sr-only, entao o anel de foco tem de aparecer na
   caixa desenhada, senao quem navega por teclado perde a posicao. */
.mt-check:focus-visible + label::before { outline: 2px solid var(--green-ink); outline-offset: 3px; }

.mt-note {
  margin-top: 26px; padding: 16px 18px;
  border-left: 3px solid var(--ink-600);
  background: var(--paper-2);
  font-size: var(--fs-sm); color: var(--ink-700); line-height: 1.6;
}
.mt-note strong { color: var(--ink-900); }
.mt-note + .mt-note { margin-top: 12px; }

/* Impressao: o @media print de styles.css ja tira cabecalho, drawer, barra
   de progresso, rodape, barra fixa, FAB e o proprio [data-print]. Aqui fica
   so o que e desta pagina. */
@media print {
  .page-hero { background: none !important; padding: 0 0 10mm !important; }
  .page-hero::before, .page-hero::after { display: none !important; }
  /* Duas cores que o @media print global NAO alcanca e que sairiam
     invisiveis no papel: o <em> verde do titulo (a regra global cobre
     h1..h4, nao o <em> dentro deles) e o link do breadcrumb, que e quase
     branco porque nasceu para fundo escuro. */
  .page-title em { color: #000 !important; text-shadow: none !important; }
  .breadcrumb a { color: #000 !important; }
  .page-lead { max-width: none; }
  /* A .section--paper e cinza e abre com mais de 100px de respiro, medidos
     na tela. No papel isso e um retangulo de tinta e um terco de folha em
     branco antes do primeiro item. */
  .section--paper { background: transparent !important; padding-top: 0 !important; }
  .mt-actions, .page-cta { display: none !important; }
  .mt-block-h { break-after: avoid; page-break-after: avoid; }
  .mt-item { break-inside: avoid; page-break-inside: avoid; }
  .mt-item label { padding: 7pt 0 7pt 26pt; }
  .mt-item label::before { top: 8pt; width: 13pt; height: 13pt; border-color: #000; background: transparent; }
  .mt-check:checked + label::before { border-color: #000; background: transparent; }
  .mt-check:checked + label::after { left: 4.5pt; top: 9.5pt; width: 4pt; height: 8pt; border-color: #000; }
  .mt-note { background: transparent; border-left-color: #000; }
}