/* Teoria · Cor e classe (/teoria/classe/). Só complementa o teoria.css. */

/* seis sementes reais com a cor média */
.sementes6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--line)}
.sementes6 .s{background:var(--stage);display:grid;align-content:start}
.sementes6 img{display:block;width:100%;height:auto;aspect-ratio:1}
.sementes6 .sw{height:26px;border-top:1px solid var(--line)}
.sementes6 .v{padding:8px 8px 10px;display:grid;gap:2px;font:500 12px/1.35 var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.sementes6 .v b{font-weight:600;color:var(--ink-2)}
.sementes6 .cl{font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding-bottom:6px;margin-bottom:2px}
.sementes6 .cl.viav{color:var(--viable);border-bottom:2px solid var(--viable)}
.sementes6 .cl.inv{color:var(--inviable);border-bottom:2px dashed var(--inviable)}
@media (max-width:720px){.sementes6{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* tabela de números */
.tab-wrap{overflow-x:auto;border:1px solid var(--line-soft);border-radius:var(--r-panel)}
table.tab{border-collapse:collapse;width:100%;font:500 13.5px/1.4 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-2)}
table.tab th,table.tab td{padding:9px 12px;text-align:right;border-bottom:1px solid var(--line-soft);white-space:nowrap}
table.tab th{color:var(--ink-3);font-weight:600;font-size:12px;letter-spacing:.04em}
table.tab th:first-child,table.tab td:first-child{text-align:left}
table.tab tr:last-child td{border-bottom:0}
table.tab .px{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin-right:8px;border:1px solid var(--line)}
.tab-cap{font-size:14px;line-height:1.5;color:var(--ink-3)}

/* figura da matiz: semente real + rosa das matizes */
.grafico .rosa{fill:var(--ink-3);opacity:.75}
.grafico .seta-ar{stroke:var(--seed);stroke-width:2.6;stroke-dasharray:7 5}
.grafico .seta-ci{stroke:var(--accent);stroke-width:3}
.grafico text.grande{font-size:24px;font-weight:600;fill:var(--ink)}

/* esquema: mesma cor média, posições diferentes */
.grafico .emb{stroke:var(--line);stroke-width:1.5}
.grafico .verm{fill:#b8323f}
.grafico .palido{fill:#e9dcc0}
.grafico .rotulo{font-size:13px;fill:var(--ink-2)}
.grafico .rotulo.rv{fill:var(--viable)}
.grafico .rotulo.ri{fill:var(--inviable)}
.grafico .moldura{fill:none;stroke-width:2}
.grafico .moldura.mv{stroke:var(--viable)}
.grafico .moldura.mi{stroke:var(--inviable);stroke-dasharray:8 5}

/* instrumentos */
.lab canvas.toque{touch-action:pan-y;cursor:grab}
.lab .num b.ac{color:var(--accent)}
.lab .num b.sd{color:var(--seed-ink)}
.lab .leg .k{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:-1px;margin:0 4px 0 2px}
.lab .leg .k.viav{background:var(--viable)}
.lab .leg .k.inv{border:1.5px solid var(--inviable)}
.lab .leg .k.conf{border:1.5px solid var(--seed)}
.lab .btn.small{align-self:end}