/* elementos.css — as famílias de elementos. Porte fiel de
   design-system/elementos.css; a prosa completa mora em guia/ do repositório
   de origem. Depende de tokens/ e sistema.css. */

/* superfície — o que pousa na mesa. Sem contorno: o que a separa da mesa é
   ser outra claridade. position:relative é o que faz a camada de sombra
   achar a caixa. */
.superficie{position:relative;background-color:var(--superficie);padding:24px;border-radius:var(--raio)}
.superficie--alta{background-color:var(--superficie-alta)}
.poco{background-color:var(--poco);border-radius:var(--raio)}

/* vidro — a superfície misturada sobre a cena, SEM fosco: backdrop-filter é
   emissão, e blur de fundo não existe num render com canal alpha. */
.vidro{background-color:color-mix(in srgb,var(--superficie) 95%,transparent);border-radius:var(--raio);padding:24px}

/* sombra — CAMADA, não propriedade: ela tem entrada própria e chega por
   último. Sem fundo, atrás de tudo. */
.sombra{position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:var(--raio);box-shadow:var(--sombra)}

/* janela de sistema — escura sempre, nos dois modos */
.janela{position:relative;background-color:var(--janela-campo);border-radius:var(--raio)}
.janela__cromo{border-radius:var(--raio) var(--raio) 0 0;background-color:var(--janela-cromo);height:56px;padding:0 24px;display:flex;align-items:center;gap:16px}
.janela__sinal{width:24px;height:24px;flex:none;background-color:var(--janela-tinta-secundaria);-webkit-mask:url('assets/marca/vk.svg') center / contain no-repeat;mask:url('assets/marca/vk.svg') center / contain no-repeat}
.janela__titulo{margin-left:16px;font-family:var(--voz-sistema);font-size:var(--rotulo-corpo);line-height:var(--rotulo-entrelinha);color:var(--janela-tinta-secundaria)}
.janela__campo{padding:32px;font-family:var(--voz-sistema);font-size:var(--metadado-corpo);line-height:var(--metadado-entrelinha);color:var(--janela-tinta-cheia)}
.janela__eco{color:var(--janela-tinta-secundaria)}
.janela__cursor{display:inline-block;width:16px;height:32px;background-color:var(--janela-tinta-cheia);vertical-align:text-bottom}
.janela--peca .janela__cromo{height:var(--janela-peca-cromo-altura);padding:0 var(--janela-peca-cromo-margem);gap:var(--janela-peca-cromo-vao)}
.janela--peca .janela__sinal{width:var(--janela-peca-sinal);height:var(--janela-peca-sinal)}
.janela--peca .janela__titulo{margin-left:var(--janela-peca-cromo-vao);font-size:var(--terminal-eco-corpo);line-height:var(--terminal-eco-entrelinha)}
.janela--peca .janela__campo{padding:var(--janela-peca-campo-margem)}

/* medida — nome escrito, barra de matéria no berço de rebaixo, valor */
.medida{display:grid;grid-template-columns:1fr 3fr auto;gap:16px;align-items:center}
.medida__nome{font-family:var(--voz-funcional);font-size:var(--corpo-corpo);line-height:var(--corpo-entrelinha);color:var(--anel-texto)}
.medida__trilho{background-color:var(--rebaixo);height:16px}
.medida__barra{background-color:var(--materia);height:16px;display:flex;align-items:center;justify-content:flex-end}
.medida__valor{font-family:var(--voz-sistema);font-size:var(--metadado-corpo);line-height:var(--metadado-entrelinha);text-align:right}
/* tolerância — a barra de erro mora DENTRO da barra, encostada na ponta */
.medida__desvio{display:flex;align-items:center}
.medida__desvio__marca{width:1px;height:16px;background-color:var(--sobre-materia)}
.medida__desvio__fio{flex:1;height:1px;background-color:var(--sobre-materia)}
.medida__rodadas{font-family:var(--voz-sistema);font-size:var(--rotulo-corpo);line-height:var(--rotulo-entrelinha);color:var(--tinta-secundaria)}

/* cota — o instrumento de planta baixa: duas marcas, um fio, e o que se mede */
.cota{display:flex;align-items:center;gap:8px}
.cota__marca{width:1px;height:8px;background-color:var(--tinta-traco)}
.cota__fio{flex:1;height:1px;background-color:var(--tinta-traco)}
.cota__rotulo{font-family:var(--voz-sistema);font-size:var(--rotulo-corpo);line-height:var(--rotulo-entrelinha);color:var(--tinta-secundaria)}

/* escala — a régua declarada como elemento, não como frase */
.escala{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.escala__regua{height:1px;background-color:var(--tinta-traco)}
.escala__valor{font-family:var(--voz-sistema);font-size:var(--rotulo-corpo);line-height:var(--rotulo-entrelinha);color:var(--tinta-secundaria)}

/* marca — ponto colorido mais nome escrito: a cor nunca fala sozinha */
.marca{display:inline-flex;align-items:center;gap:8px}
.marca__ponto{width:8px;height:8px;background-color:var(--materia)}
.marca__nome{font-family:var(--voz-sistema);font-size:var(--metadado-corpo);line-height:var(--metadado-entrelinha);color:var(--anel-texto)}

/* campo — rótulo genérico em cima, dado embaixo */
.campo{display:grid;gap:4px}
.campo__valor{font-family:var(--voz-sistema);font-size:var(--metadado-corpo);line-height:var(--metadado-entrelinha)}

/* revisão — o bloco de revisão da prancha; metadado, nunca conteúdo */
.revisao{display:flex;flex-wrap:wrap;gap:16px;font-family:var(--voz-sistema);font-size:var(--rotulo-corpo);line-height:var(--rotulo-entrelinha);color:var(--tinta-secundaria)}
.revisao__campo{display:flex;gap:8px}

/* diff — o leito é matéria, o sinal vai escrito */
.diff{display:grid}
.diff__linha{display:grid;grid-template-columns:auto 1fr auto;gap:8px;font-family:var(--voz-sistema);font-size:var(--metadado-corpo);line-height:var(--metadado-entrelinha);color:var(--janela-tinta-cheia)}
.diff__sinal{color:var(--tinta-secundaria)}
.diff__texto{color:var(--tinta-cheia)}
.diff__linha--entrou{background-color:var(--estado-materia-passou)}
.diff__linha--saiu{background-color:var(--estado-materia-falhou)}
.diff__sinal--materia{color:var(--sobre-materia)}
.diff__texto--materia{color:var(--sobre-materia)}
.diff__trecho{font-family:var(--voz-sistema);font-size:var(--metadado-corpo);line-height:var(--metadado-entrelinha);color:var(--tinta-traco);padding-top:8px}
.diff__nota{font-family:var(--voz-sistema);font-size:var(--metadado-corpo);line-height:var(--metadado-entrelinha);color:var(--tinta-secundaria);white-space:nowrap;text-align:right}
.diff__linha--entrou .diff__nota,.diff__linha--saiu .diff__nota{color:var(--sobre-materia);opacity:.72}

/* pipe — a saída de um vira a entrada do outro; o glifo do Unix nomeia */
.pipe{display:grid;grid-template-columns:auto auto auto;gap:8px;align-items:center}
.pipe__glifo{font-family:var(--voz-sistema);font-size:var(--metadado-corpo);line-height:var(--metadado-entrelinha);color:var(--tinta-secundaria)}

/* estado de saída — o 0 e o 1 do Unix; só existe DENTRO da janela */
.saida-codigo{font-family:var(--voz-sistema);font-size:var(--metadado-corpo);line-height:var(--metadado-entrelinha);color:var(--janela-tinta-secundaria)}

/* fluxo — o tail: a última linha é a que está chegando */
.fluxo{display:grid;gap:0}
.fluxo__linha{font-family:var(--voz-sistema);font-size:var(--metadado-corpo);line-height:var(--metadado-entrelinha);color:var(--janela-tinta-secundaria)}
.fluxo__linha--chegando{color:var(--janela-tinta-cheia)}

/* corte — mostrar o dentro de uma coisa: camadas de matéria empilhadas */
.corte{display:grid}
.corte__camada{background-color:var(--materia);display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:0 16px}
.corte__nome{font-family:var(--voz-sistema);font-size:var(--metadado-corpo);line-height:var(--metadado-entrelinha);color:var(--sobre-materia)}
.corte__medida{font-family:var(--voz-sistema);font-size:var(--rotulo-corpo);line-height:var(--rotulo-entrelinha);color:var(--sobre-materia)}
.corte__marca-de-corte{height:1px;background-color:var(--tinta-traco)}

/* múltiplos — a mesma figura repetida, ESCALA COMPARTILHADA declarada fora */
.multiplos{display:grid;gap:24px}
.multiplos__celula{display:grid;gap:8px}
.multiplos__nome{font-family:var(--voz-sistema);font-size:var(--rotulo-corpo);line-height:var(--rotulo-entrelinha);color:var(--tinta-secundaria)}
.multiplos__trilho{background-color:var(--rebaixo);height:8px}
.multiplos__barra{background-color:var(--materia);height:8px}

/* cta — a marca colorida com o pictograma, o rótulo na superfície */
.cta{display:grid;gap:var(--cta-vao);justify-items:start}
.cta__barra{position:relative;display:flex;align-items:stretch;height:var(--cta-barra-altura)}
.cta__marca{width:var(--cta-marca);display:grid;place-items:center;border-radius:var(--raio) 0 0 var(--raio);background-color:var(--materia);color:var(--sobre-materia)}
.cta__marca svg{width:var(--cta-pictograma);height:var(--cta-pictograma);display:block}
.cta__marca--youtube{background-color:#ff0000;color:#ffffff}
.cta__rotulo{width:var(--cta-rotulo-largura);display:flex;align-items:center;padding:0 var(--cta-margem);border-radius:0 var(--raio) var(--raio) 0;background-color:var(--superficie);font-family:var(--voz-funcional);font-size:var(--acao-corpo);line-height:var(--acao-entrelinha);font-weight:var(--acao-peso);color:var(--tinta-cheia)}

/* lista — a lista falada: ícone sólido mais caixa de vidro, sobre a cena */
.lista{display:grid}
.lista--faixa{grid-auto-flow:column;gap:var(--lista-vao-faixa)}
.lista--pilha{gap:var(--lista-vao-pilha);justify-items:start}
.lista__item{position:relative;display:flex;align-items:stretch}
.lista--faixa .lista__item{height:var(--lista-altura-faixa)}
.lista__icone{position:relative;overflow:hidden;width:var(--lista-icone);flex:none;display:grid;place-items:center;border-radius:var(--raio) 0 0 var(--raio);background-color:var(--materia);color:var(--sobre-materia)}
.lista__icone svg{width:var(--lista-pictograma);height:var(--lista-pictograma);display:block}
.lista__icone--objeto{background-color:var(--rebaixo)}
.lista__icone--objeto .objeto{width:var(--lista-pictograma)}
.lista__icone--artefato{background-color:#f0eee6}
.lista__icone--artefato img{width:56px;height:56px;display:block}
.lista__rotulo{position:relative;overflow:hidden;width:var(--lista-rotulo-largura,max-content);display:flex;align-items:center;padding:0 var(--lista-margem);border-radius:0 var(--raio) var(--raio) 0;background-color:color-mix(in srgb,var(--superficie) 95%,transparent);font-family:var(--voz-funcional);font-size:var(--item-corpo);line-height:var(--item-entrelinha);font-weight:var(--item-peso);color:var(--tinta-cheia);white-space:nowrap}
.lista__miolo{position:relative;overflow:hidden;width:var(--lista-miolo-largura,max-content);display:grid;gap:4px;align-content:center;padding:20px var(--lista-margem);border-radius:0 var(--raio) var(--raio) 0;background-color:color-mix(in srgb,var(--superficie) 95%,transparent)}
.lista__contexto{font-family:var(--voz-funcional);font-size:var(--deck-peca-corpo);line-height:var(--deck-peca-entrelinha);font-weight:var(--deck-peca-peso);color:var(--tinta-secundaria);white-space:nowrap}
.lista__texto{font-family:var(--voz-funcional);font-size:var(--item-corpo);line-height:var(--item-entrelinha);font-weight:var(--item-peso);color:var(--tinta-cheia);white-space:nowrap}
.lista__destaque{color:var(--anel-texto)}
.lista__face{position:absolute;left:0;right:0;height:var(--lista-face);pointer-events:none}
.lista__face--luz{top:0}
.lista__face--sombra{bottom:0}
.lista__icone .lista__face--luz{background-color:var(--materia-luz)}
.lista__icone .lista__face--sombra{background-color:var(--materia-sombra)}
.lista__rotulo .lista__face--luz,.lista__miolo .lista__face--luz{background-color:var(--lista-face-luz)}
.lista__rotulo .lista__face--sombra,.lista__miolo .lista__face--sombra{background-color:var(--lista-face-sombra)}
.lista__icone--artefato .lista__face--luz{background-color:#fffffe}
.lista__icone--artefato .lista__face--sombra{background-color:#d3d1ca}

/* patrocínio — logo · benefício · QR, clara sempre. O módulo do QR é a unidade */
.patrocinio{display:flex;width:max-content;align-items:center;gap:80px}
.patrocinio__logo{align-self:stretch}
.patrocinio__texto{display:grid;text-align:center;white-space:nowrap}
.patrocinio__beneficio{font-family:var(--voz-funcional);font-size:var(--acao-corpo);line-height:var(--acao-entrelinha);font-weight:var(--acao-peso);color:var(--tinta-cheia)}
.patrocinio__rodape{font-family:var(--voz-funcional);font-size:var(--deck-peca-corpo);line-height:var(--deck-peca-entrelinha);font-weight:var(--deck-peca-peso);color:var(--tinta-secundaria)}
.patrocinio__fio{height:12px;display:grid;align-content:center}
.patrocinio__qr{padding:16px;border-radius:var(--raio);background-color:var(--superficie-alta)}
.patrocinio__codigo{display:block}

/* objeto — geometria sem tinta; a pintura chega pela classe do produto */
.objeto{display:block}
.objeto svg{display:block;width:100%;height:auto}
.objeto .topo{fill:var(--obj-topo)}
.objeto .frente{fill:var(--obj-frente)}
.objeto .base{fill:var(--obj-base)}
.objeto .reentrancia{fill:var(--obj-reentrancia)}
.objeto .vinco{fill:none;stroke:var(--obj-vinco);stroke-width:1;vector-effect:non-scaling-stroke}
.objeto .led{fill:var(--materia)}
.objeto .marca{fill:var(--obj-marca)}
.objeto .tela{fill:var(--janela-campo)}

/* realce de sintaxe — nomeado por PAPEL, nunca por cor */
.sintaxe-texto{color:var(--sintaxe-texto)}
.sintaxe-eco{color:var(--sintaxe-eco)}
.sintaxe-comentario{color:var(--sintaxe-comentario)}
.sintaxe-palavra-chave{color:var(--sintaxe-palavra-chave)}
.sintaxe-identificador{color:var(--sintaxe-identificador)}
.sintaxe-literal{color:var(--sintaxe-literal)}
.sintaxe-numero{color:var(--sintaxe-numero)}
.sintaxe-atencao{color:var(--sintaxe-atencao)}
.sintaxe-ok{color:var(--sintaxe-ok)}

/* ligado — núcleo + halo. Três inquilinos: o led, o cursor, o sinal VK.
   Um ligado por peça; o estado padrão de tudo é apagado. */
.ligado{background-color:var(--casa);box-shadow:var(--emissao-halo)}
.ligado--sinal{filter:var(--emissao-halo-svg)}
.ligado--led .led{fill:var(--casa);filter:var(--emissao-halo-svg)}
@keyframes pulso-do-ligado{0%,100%{opacity:1}50%{opacity:0.25}}
.ligado--pulsa{animation:pulso-do-ligado 1200ms ease-in-out infinite}