/* Tela de demonstração (linguagem C · Sistema): painel sem borda, raio 8, poucos dados, um só sinal por quadro.
   Serve à vitrine (celular) e ao criativo de anúncio (ampliada com zoom). A polaridade vem do data-theme do próprio painel.
   Três tipos, montados por gerar.mjs: lista (linhas com código e estado), leitura (mensagem ou arquivo → campos) e painel (números e barras). */
.tl { display: grid; gap: 16px; margin: 0; padding: 20px; border-radius: var(--radius-panel); background: var(--bg); color: var(--ink); font: 400 15px/1.35 var(--font-sans); }
.tl-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tl-titulo { font-size: 19px; font-weight: 500; line-height: 1.15; letter-spacing: -.02em; }
.tl-cab .a-rotulo { font-size: 11px; white-space: nowrap; }

/* estado: etiqueta mono; a da linha ativa é Grafite, ou o sinal (vermelho) quando é o dado do quadro */
.tl-cod { font: 500 12px/1 var(--font-mono); letter-spacing: .04em; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.tl-st { font: 500 10px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); text-align: right; }
.tl-tag { justify-self: end; padding: 6px 8px; border-radius: var(--radius-tag); background: var(--ink); color: var(--bg); font: 500 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.tl-tag.sinal { background: var(--signal); color: var(--on-signal); }

/* lista: linhas separadas por espaço; a ativa ganha um realce de tinta, nunca contorno */
.tl-linhas { list-style: none; margin: 0 -8px; padding: 0; display: grid; }
.tl-linhas li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px; border-radius: var(--radius-control); }
.tl-linhas .ativa { background: color-mix(in srgb, var(--ink) 6%, transparent); }

/* leitura: o que chegou e o que foi lido */
.tl-msg { padding: 12px 14px; border-radius: 8px 8px 8px 2px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.tl-arq { font: 500 12px/1.3 var(--font-mono); color: var(--ink-muted); }
.tl-campos { display: grid; gap: 10px; margin: 0; }
.tl-campos div { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.tl-campos dt { font: 500 10px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.tl-campos dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.tl-fim { display: flex; justify-content: flex-end; }

/* painel: números grandes e barras (trilha em Trilho, barra em tinta, a ativa pode ser o sinal) */
.tl-nums { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.tl-nums p { display: grid; gap: 6px; }
.tl-n { font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.tl-barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tl-barras li { display: grid; grid-template-columns: 112px minmax(0, 1fr) 44px; align-items: center; gap: 10px; font-size: 14px; }
.tl-barras svg { display: block; width: 100%; height: 8px; }
.tl-barras rect { fill: var(--ink); }
.tl-barras .trilho { fill: var(--line); }
.tl-barras .sinal { fill: var(--signal); }
.tl-barras .tl-cod { text-align: right; }

/* células: as quatro células do S viram os números do quadro (a de cima, à direita, pode ser o sinal).
   Geometria do símbolo (célula 47,92%, vão 4,16%, raio da meia-pílula 23,96%); as medidas seguem a largura do quadro (cqw). */
.tl-s { position: relative; aspect-ratio: 1; container-type: inline-size; }
.tl-s > p { position: absolute; display: flex; flex-direction: column; justify-content: space-between; width: 47.92%; margin: 0; padding: 4.6cqw; overflow: hidden; background: var(--grafite); color: var(--texto-claro); }
.tl-s .a-rotulo { font-size: max(9px, 2.6cqw); color: var(--aco-claro); }
.tl-s .c1 { left: 0; top: 0; height: 47.92%; border-radius: 23.96cqw 0 0 23.96cqw; align-items: flex-end; text-align: right; }
.tl-s .c2 { left: 52.08%; top: 0; height: 23.96%; }
.tl-s .c3 { left: 0; top: 76.04%; height: 23.96%; }
.tl-s .c4 { left: 52.08%; top: 52.08%; height: 47.92%; border-radius: 0 23.96cqw 23.96cqw 0; }
.tl-s .sinal { background: var(--signal); color: var(--on-signal); }
.tl-s .sinal .a-rotulo { color: var(--on-signal); }
.tl-v b { font-weight: 500; font-variant-numeric: tabular-nums; }
.tl-s :is(.c1, .c4) b { display: inline-block; font-size: 17cqw; line-height: .8; letter-spacing: -0.06em; white-space: nowrap; }
.tl-s .c4 b { font-size: 11.5cqw; letter-spacing: -0.045em; }
.tl-s :is(.c2, .c3) b { font-size: 4.9cqw; line-height: 1.05; letter-spacing: -0.02em; white-space: nowrap; }
.tl-v small { font-size: 4.2cqw; color: var(--aco-claro); }
.tl-s .c1 small { margin-left: .35em; }
.tl-s .c4 small { display: block; margin-top: 2.4cqw; font-size: max(11px, 3.3cqw); line-height: 1.3; }