/* Teoria · Imagem e medida: /teoria/imagem/ e /teoria/imagem/escala/.
   Só o que falta em site.css e teoria.css: figura com contornos sobrepostos, trios de imagens,
   imagens em pixel, tabelas, e os instrumentos (peso do pixel, calibração, régua fora do plano). */

/* abertura com figura */
.im-hero .wrap{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.im-hero .toc{margin-top:22px}
.im-hero .nivel{margin-top:18px}
.im-hero figure.fig{margin:0}

/* texto da página de trilha */
.im-texto{max-width:44rem;display:grid;gap:16px}
.im-texto p{color:var(--ink-2);font-size:17px;line-height:1.65}
.im-texto strong{color:var(--ink);font-weight:650}
.im-bloco{display:grid;gap:28px;min-width:0}
.im-bloco>.head{margin-bottom:0}
.im-larga{max-width:60rem;min-width:0}
.im-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,48px);align-items:start}
@media (max-width:960px){.im-duo{grid-template-columns:minmax(0,1fr)}}

/* imagem com contornos em SVG por cima, nas coordenadas de pixel da própria imagem */
.sobre{position:relative}
.sobre>svg,.fig .frame.sobre>svg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;display:block}
.sobre img.escuro{filter:brightness(.5)}
.sobre .viav,.sobre .inv{stroke-width:2.8;stroke-linejoin:round}
.sobre .inv{stroke-dasharray:10 7}
.px img{image-rendering:crisp-edges;image-rendering:pixelated}

/* três quadros lado a lado */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-width:0}
.trio>div{display:grid;gap:8px;align-content:start;min-width:0}
.trio .q{font:500 12.5px/1.4 var(--mono);color:var(--ink-3)}
.trio .q b{color:var(--ink);font-weight:600}
@media (max-width:640px){.trio{grid-template-columns:minmax(0,1fr)}}
.quinteto{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;min-width:0}
.quinteto>div{display:grid;gap:6px;align-content:start;min-width:0}
.quinteto .q{font:500 12px/1.35 var(--mono);color:var(--ink-3)}
.quinteto .q b{display:block;color:var(--ink);font-weight:600;font-size:13px}
@media (max-width:700px){.quinteto{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:420px){.quinteto{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* desenhos e gráficos em SVG (complementam .grafico de teoria.css) */
.grafico .ctn{fill:none;stroke:var(--accent-strong);stroke-width:2.4;stroke-linejoin:round}
.grafico .ctn.fraco{stroke:var(--ink-2);stroke-width:1.6;stroke-dasharray:5 4}
.grafico .fer{stroke:var(--seed);stroke-width:3.2;stroke-linecap:round}
.grafico .fer-p{fill:var(--seed)}
.grafico .num{font:700 26px var(--sans);fill:var(--ink);paint-order:stroke;stroke:var(--stage);stroke-width:6px;stroke-linejoin:round;text-anchor:middle}
.grafico .caixa-z{fill:none;stroke:var(--accent-strong);stroke-width:2;vector-effect:non-scaling-stroke}
.grafico .grade-px{stroke:rgba(237,242,244,.28);stroke-width:1;vector-effect:non-scaling-stroke}
.grafico .px-borda{fill:none;stroke:var(--seed-ink);stroke-width:2;vector-effect:non-scaling-stroke}
.grafico .iso{fill:none;stroke:var(--accent-strong);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.grafico .neutro-f{fill:var(--ink-3);opacity:.6}
.grafico .lim{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:6 4;fill:none}
.grafico .lim2{stroke:var(--ink-3);stroke-width:1.2;stroke-dasharray:3 4;fill:none}
.grafico .rot-claro{fill:var(--ink-2)}
.grafico .rot-seed{fill:var(--seed-ink)}
.grafico .faixa-seed{fill:var(--seed);opacity:.13}
.grafico .faixa-acc{fill:var(--accent);opacity:.14}
.grafico .px-on{fill:var(--seed-tint);stroke:var(--seed);stroke-width:1}
.grafico .px-off{fill:none;stroke:var(--line);stroke-width:1}
.grafico .perfil-l{stroke:var(--ink);stroke-width:2;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}
.grafico .perfil-p{fill:var(--ink)}
.grafico .regua{fill:#e9e9e1}
.grafico .traco{stroke:#14191b;stroke-width:1.4}
.grafico .traco.cm{stroke-width:2}
.grafico .regua-t{font:600 12px var(--mono);fill:#14191b}
.grafico .clique{fill:none;stroke:var(--seed);stroke-width:2}
.grafico .clique-n{fill:var(--seed-tint);fill-opacity:.55;stroke:var(--seed);stroke-width:1.3;stroke-dasharray:4 3}
.grafico .cota{stroke:var(--accent);stroke-width:1.6;fill:none}
.grafico .cota-f{fill:var(--accent)}
.grafico .raio{stroke:var(--ink-3);stroke-width:1.2;fill:none}
.grafico .raio.r{stroke:var(--accent)}
.grafico .raio.s{stroke:var(--seed)}
.grafico .plano{stroke:var(--line);stroke-width:2}
.grafico .forte{fill:var(--ink);font-weight:600}
.grafico .t-acc{fill:var(--accent-strong)}
.grafico .t-seed{fill:var(--seed-ink)}
.grafico .acc.fino{stroke-width:1.4}
.grafico .whisk{stroke-width:1.6;fill:none}
.grafico .whisk.ok{stroke:var(--accent)}
.grafico .whisk.fora{stroke:var(--seed-ink)}
.grafico .dot-ok{fill:var(--accent-strong)}
.grafico .dot-fora{fill:var(--seed-ink)}
@media (max-width:640px){.grafico.txt-m text{font-size:16px}}

/* tabelas de números */
.tab-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-panel);background:var(--stage)}
table.tab{border-collapse:collapse;width:100%;font:500 14px/1.4 var(--mono);font-variant-numeric:tabular-nums}
.tab th,.tab td{padding:9px 14px;text-align:right;border-bottom:1px solid var(--line-soft);white-space:nowrap}
.tab th{font:600 11px/1.35 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);background:var(--surface);vertical-align:bottom}
.tab td{color:var(--ink-2)}
.tab th:first-child,.tab td:first-child{text-align:left;color:var(--ink)}
.tab tbody tr:last-child td{border-bottom:0}
.tab td.alto{color:var(--seed-ink)}

/* instrumentos */
.lab .pre{display:flex;flex-wrap:wrap;gap:8px}
.lab .pre .chip{min-height:34px}
.lab .pre .chip[aria-pressed="false"]{opacity:1;border-style:solid;color:var(--ink-3)}
.lab .pre .chip[aria-pressed="true"]{border-color:var(--seed);background:var(--seed-tint);color:var(--ink)}
.lab .pre .chip:hover{color:var(--ink);border-color:var(--ink-3)}
.lab .ctl label{min-width:min(100%,230px)}
.lab .ctl label span.v{display:flex;justify-content:space-between;gap:10px}
.lab .ctl output{font:600 14px var(--mono);color:var(--ink)}
.lab .num b.alto{color:var(--seed-ink)}
.lab .num b.ok{color:var(--accent-strong)}
.lab .diz{font-size:15.5px;line-height:1.55;color:var(--ink);border-left:3px solid var(--seed);padding:4px 0 4px 14px;margin:0}
.lab .acoes{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.lab .acoes .data{margin:0}
.lab .plot{border-radius:4px;background:var(--stage);border:1px solid var(--line-soft)}
.lab .plot svg{background:transparent}
#cal-svg text,#pl-svg text{font-size:15px}
#pl-svg text.tinta{font-size:16px}
.lab .lgd{display:flex;flex-wrap:wrap;gap:6px 16px;font:500 12.5px/1.3 var(--mono);color:var(--ink-3)}
.lab .lgd i{display:inline-block;width:14px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.lab .lgd i.acc{background:var(--accent)}
.lab .lgd i.seed{background:var(--seed)}
.lab .lgd i.borda{background:#4a2412;border:2px solid var(--seed-ink)}
.lab .lgd i.faixa{background:var(--accent);opacity:.35}
.lab .lgd i.linha{height:0;border-top:2px solid var(--accent-strong);border-radius:0}
.lab select{max-width:100%}

/* cartões de aprofundamento: quatro numa linha no computador */
.im-bloco .subpaginas{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1040px){.im-bloco .subpaginas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.im-bloco .subpaginas{grid-template-columns:minmax(0,1fr)}}
.im-svg{padding:12px 14px}
.fig .frame.im-svg.estreito svg{max-width:460px;margin-inline:auto}
.lab .acoes p.data{font-size:13.5px}
.fig .frame.im-par{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:1px;background:var(--line)}
.fig .frame.im-par>*{background:var(--stage);min-width:0}
.fig .frame.im-par .im-svg{display:flex;align-items:center}
@media (max-width:640px){.fig .frame.im-par{grid-template-columns:minmax(0,1fr)}}

/* lista de leituras e animações da trilha */
.im-ver{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}