/* Trilha Forma (/teoria/forma/ e /teoria/forma/descritores/). Prefixo fz-. Usa os tokens de site.css. */

/* botões de escolha, um só ligado */
.fz-seg .chip{justify-content:center}
.fz-seg .chip[aria-pressed="false"]{opacity:1;border-style:solid;color:var(--ink-3)}
.fz-seg .chip[aria-pressed="true"]{border-color:var(--seed);background:var(--seed-tint);color:var(--ink)}
.fz-seg .chip:hover{color:var(--ink);border-color:var(--ink-3)}
.fz-seg .chip[aria-pressed="true"]:hover{border-color:var(--seed-ink)}

/* legendas de cor no texto */
.fz-sw{display:inline-block;width:18px;height:0;border-top:2.5px solid;vertical-align:middle;margin-right:6px}
.fz-sw.viav{border-color:var(--viable)}
.fz-sw.inv{border-color:var(--inviable);border-top-style:dashed}
.fz-sw.seed{border-color:var(--seed)}
.fz-sw.acc{border-color:var(--accent)}
.fz-sw.ink{border-color:var(--ink-3)}
.fz-sw.tr{border-color:var(--seed);border-top-style:dashed}
.fz-leg{display:flex;flex-wrap:wrap;gap:6px 18px;font:500 13px/1.4 var(--mono);color:var(--ink-3)}

/* animação de abertura */
.fz-anim .frame canvas{aspect-ratio:8/5}
.fz-passos{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fz-passos .btn{margin-left:auto}
@media (max-width:640px){.fz-passos .btn{margin-left:0}}

/* gráficos SVG gerados (texto em unidades do viewBox) */
.grafico.fz-g text{font-size:13px}
.grafico .fz-area-viav{fill:var(--viable);fill-opacity:.12;stroke:none}
.grafico .fz-area-inv{fill:var(--inviable);fill-opacity:.10;stroke:none}
.grafico .fz-med{stroke-width:1.5;stroke-dasharray:2 4;opacity:.85}
.grafico .fz-fino-inv path{fill:none;stroke:var(--inviable);stroke-opacity:.16;stroke-width:1}
.grafico .fz-fino-viav path{fill:none;stroke:var(--viable);stroke-opacity:.16;stroke-width:1}
.grafico .fz-iso{stroke-width:3}
.grafico .fz-iso-fraca{stroke-width:1.4;opacity:.75}
.grafico .fz-ref{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 4;fill:none}
.grafico .fz-ink{stroke:var(--ink-2);fill:none;stroke-width:1.5}
.grafico .fz-pix{fill:var(--surface-2);stroke:var(--line);stroke-width:.6}
.grafico .fz-pix-on{fill:#1d3a3f;stroke:var(--line);stroke-width:.6}
.grafico .fz-ponto{fill:var(--seed)}
.grafico text.fz-t-seed{fill:var(--seed-ink)}
.grafico text.fz-t-acc{fill:var(--accent)}
.grafico text.fz-t-ink{fill:var(--ink-2)}
.fz-tres .frame{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}
.fz-tres .frame>div{background:var(--stage)}
@media (max-width:760px){.fz-tres .frame{grid-template-columns:1fr}}

/* instrumento: recortes em fila */
.fz-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.fz-cel{display:grid;gap:4px;margin:0}
.fz-cel .im{position:relative;aspect-ratio:2/1;border-radius:4px;overflow:hidden;background-image:var(--sprite);background-repeat:no-repeat;background-color:var(--stage);border:1px solid var(--line-soft)}
.fz-cel svg{position:absolute;inset:0;width:100%;height:100%;background:none}
.fz-cel .o{fill:none;stroke-width:1.6}
.fz-cel.c1 .o{stroke:var(--viable)}
.fz-cel.c0 .o{stroke:var(--inviable);stroke-dasharray:4 3}
.fz-cel .h{fill:none;stroke:var(--seed);stroke-width:1.4;stroke-dasharray:3 3;opacity:0;transition:opacity .2s}
.fz-grade.so .fz-cel .h{opacity:1}
.fz-cel .v{font:600 13px/1 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums;display:flex;justify-content:space-between;gap:6px}
.fz-cel .v small{font-weight:500;color:var(--ink-3)}
.fz-cel[hidden]{display:none}

/* página de descritores */
.fz-tab{width:100%;border-collapse:collapse;font-size:14.5px;font-variant-numeric:tabular-nums}
.fz-tab th,.fz-tab td{padding:8px 10px;border-bottom:1px solid var(--line-soft);text-align:right;color:var(--ink-2);vertical-align:top}
.fz-tab th:first-child,.fz-tab td:first-child{text-align:left}
.fz-tab.curta td:first-child{white-space:nowrap}
.fz-tab.txt th,.fz-tab.txt td{text-align:left}
.fz-tab.txt td:first-child{white-space:normal;min-width:7.5em}
.fz-tab thead th{font:600 11.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line)}
.fz-tab td b{color:var(--ink);font-weight:600}
.fz-tab td small{display:block;color:var(--ink-3);font-size:12.5px}
.fz-tab-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-panel);background:var(--surface)}
.fz-tab .ok{color:var(--viable)}
.fz-tab .alto{color:var(--seed-ink)}

.fz-poli{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:820px){.fz-poli{grid-template-columns:1fr}}
.fz-poli canvas{aspect-ratio:9/8}
.fz-ctls{display:grid;gap:14px}
.fz-ctls label{font:500 13px/1.3 var(--mono);color:var(--ink-2);display:grid;gap:6px}
.fz-ctls .h{display:flex;justify-content:space-between;gap:10px}
.fz-ctls input[type=range]{width:100%}
.fz-ctls select{width:100%}
.fz-curva{display:block;width:100%;height:auto}
@media (max-width:560px){.fz-tab{font-size:13px}.fz-tab th,.fz-tab td{padding:6px 7px}}