/* Aula 5: temas da bancada, produtos de matrizes com legenda, entradas editáveis dentro das
   matrizes, a tabela de lotes e os mapas de cores da parte em ℝⁿ. */

/* A regra .dm-tile span (o rótulo do quadro, em caixa alta) também pegaria a notação dentro de
   small e strong: n³/3 viraria N3/3. */
.dm-tile small span,.dm-tile strong span{font-size:inherit;font-weight:inherit;letter-spacing:0;text-transform:none;color:inherit}
.dm-tile small .m,.dm-tile strong .m{font-size:1.08em;font-weight:400}

.a5-temas{gap:6px}
.a5-temas .dm-seg-btn{font-size:14.5px;padding:7px 15px}

/* Matrizes lado a lado, com o nome embaixo */
.a5-produto-wrap{overflow-x:auto;padding:2px 0 4px}
.a5-produto{display:flex;align-items:center;gap:6px 10px;width:max-content;min-width:100%;font-family:var(--math);font-size:18px}
.a5-produto .op,.a5-fatores .op{font-family:var(--math);font-size:20px;color:var(--ink-2)}
.a5-produto>.dm-desc{font-family:var(--sans);font-size:13.5px;max-width:240px}
.a5-bloco{display:inline-flex;flex-direction:column;align-items:center;gap:2px}
.a5-legenda{font-family:var(--sans);font-size:12px;font-weight:750;color:var(--muted);line-height:1.3}
.a5-legenda .m{font-size:1.25em;color:var(--ink)}
.a5-slot{display:inline-flex}
.a5-fatores{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-family:var(--math)}
.a5-igual{display:inline-flex;align-items:center;gap:6px;font-family:var(--math);font-size:17px}
.a5-igual>.m{font-size:1.05em}
.a5-marca{font-family:var(--sans);font-size:14px;font-weight:800}
.a5-marca .m{font-size:1.05em}
.a5-detalhe{border-top:1px solid var(--line-soft);padding-top:8px}
.a5-detalhe summary{cursor:pointer;font-size:14px;font-weight:750;color:var(--red-dark)}
.a5-detalhe summary .m{color:var(--ink)}
.a5-detalhe .dm-leitura{margin-top:8px;display:grid;gap:6px}
.a5-ordem{display:grid;gap:4px}
.a5-ordem .dm-linha-mx{font-size:16px}
.a5-rtr{gap:10px 18px}

/* Entradas editáveis dentro de uma matriz */
.a5-mx .a5-cel-campo{padding:1px 0}
.a5-campo{width:2.9em;height:1.6em;font-family:var(--math);font-size:.9em;text-align:center;border:1.5px solid var(--red);border-radius:5px;background:#fff7f8;color:var(--ink);padding:0;font-variant-numeric:tabular-nums}
.a5-campo:focus{outline:none;box-shadow:0 0 0 3px #db1e2f33}
.a5-campo.is-certa{border-color:var(--true);background:#e5f2e8;color:var(--true);font-weight:700}
.a5-campo.is-errada{background:var(--red-soft)}

/* Espelho, tabela e controles */
.a5-esp-controles{display:grid;gap:8px}
.a5-tabela{aspect-ratio:5/2}
.a5-ciclos{font:inherit;font-size:15px;padding:7px 10px;border:1.5px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);width:100%;max-width:220px;font-variant-numeric:tabular-nums}
.a5-ciclos:focus{border-color:var(--red);outline:none;box-shadow:0 0 0 3px #db1e2f33}

/* Três mapas de cores lado a lado (ℝⁿ) */
.a5-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.a5-trio figure{display:grid;gap:4px;min-width:0}
.a5-trio figcaption{text-align:center;font-size:13px;font-weight:750;color:var(--muted)}
.a5-trio figcaption .m{font-size:1.25em;color:var(--ink)}

@media(max-width:700px){
 .a5-tabela{aspect-ratio:16/10}
 .a5-produto{font-size:16px}
 .a5-trio{gap:6px}
}