/* tema-linha.css - o tema Linha: o ECG atravessa a tela inteira, de ponta a ponta, na altura do
   olhar, fino e luminoso, como a linha de um monitor cardiaco estendida sobre o mundo. E o
   varrimento de monitor de verdade: a linha e desenhada da esquerda para a direita e uma faixa
   apaga a frente dela, em vez de rolar. Acima da linha, pequenos, a fase e a manchete; abaixo, as
   lesoes numa ou duas linhas corridas. Quando o sangue acaba, a linha fica reta atravessando o
   mundo inteiro.

   O desenho e um canvas de 200 px de alto e da largura do quadro, que so recebe o segmento novo
   de cada quadro. Tudo por token: a cor da linha e o color do proprio canvas, lido pelo JS. */
/* A linha fica em 486 px (a altura do olhar); o texto de cima acaba antes do pico R (50 px), e o
   de baixo comeca depois da onda S. */
.ln { position: absolute; top: 0; right: 0; bottom: 0; left: 0; --ln-y: 486px; --ln-folga: calc(var(--aqua-space-12) + var(--aqua-space-4)); --ln-folga-baixo: calc(var(--aqua-space-8) + var(--aqua-space-2)); }

.ln-canvas {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--ln-y) - 100px);
	height: 200px;
	max-width: none;
	color: var(--aqua-text);
}

/* ---- acima da linha: a fase e a manchete, pequenas, a esquerda; o pulso, a direita ---------- */
.ln-topo {
	position: absolute;
	left: var(--vt-margem);
	bottom: calc(1080px - var(--ln-y) + var(--ln-folga));
	display: flex;
	align-items: baseline;
	gap: var(--aqua-space-4);
	max-width: 1100px;
	white-space: nowrap;
}
.ln-fase { font-size: var(--vt-fs-corpo); font-weight: 600; letter-spacing: -0.01em; line-height: 1; }
.ln-titulo { font-size: var(--vt-fs-corpo); line-height: 1; }
.ln-titulo small { font-size: var(--vt-fs-corpo); color: var(--vt-apagado); }
.ln-pulso {
	position: absolute;
	right: var(--vt-margem);
	bottom: calc(1080px - var(--ln-y) + var(--ln-folga));
	display: flex;
	align-items: baseline;
	gap: var(--aqua-space-2);
}
.ln-pulso b { font-family: var(--aqua-font-mono); font-variant-numeric: tabular-nums; font-size: var(--vt-fs-medio); font-weight: 500; line-height: 1; display: inline-block; }
.ln-pulso b:empty { display: none; }
.ln-pulso span { font-size: var(--vt-fs-meta); color: var(--vt-apagado); }

/* ---- abaixo da linha: as lesoes corridas, a esquerda; o sangue, a direita ------------------- */
.ln-lesoes {
	position: absolute;
	left: var(--vt-margem);
	top: calc(var(--ln-y) + var(--ln-folga-baixo));
	max-width: 900px;
	display: flex;
	flex-wrap: wrap;
	gap: var(--aqua-space-2) var(--aqua-space-6);
}
.ln-lesao { display: inline-flex; align-items: baseline; gap: var(--aqua-space-2); font-size: var(--vt-fs-corpo); line-height: 1.2; }
/* A gravidade e o ponto antes do texto: apagado ate a moderada, perigo na grave, com halo na critica. */
.ln-lesao__ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--vt-fio); align-self: center; flex: none; }
.ln-lesao[data-grau="3"] .ln-lesao__ponto, .ln-lesao[data-grau="4"] .ln-lesao__ponto { background: var(--aqua-danger); }
.ln-lesao[data-grau="4"] .ln-lesao__ponto { box-shadow: 0 0 0 3px rgb(var(--aqua-danger-rgb) / 30%); }
.ln-lesao__meta { font-size: var(--vt-fs-meta); color: var(--vt-apagado); }
.ln-lesao[data-estancado] { color: var(--vt-apagado); }
.ln-lesao[data-estancado] .ln-lesao__ponto { background: var(--vt-fio); box-shadow: none; }
.ln-sangue {
	position: absolute;
	right: var(--vt-margem);
	top: calc(var(--ln-y) + var(--ln-folga-baixo));
	display: flex;
	align-items: baseline;
	gap: var(--aqua-space-2);
}
.ln-sangue b { font-family: var(--aqua-font-mono); font-variant-numeric: tabular-nums; font-size: var(--vt-fs-corpo); font-weight: 500; line-height: 1; color: var(--aqua-danger); }
.ln-sangue span { font-size: var(--vt-fs-meta); color: var(--vt-apagado); }

/* ---- as acoes, na margem de baixo ---------------------------------------------------------- */
.ln-acoes { position: absolute; left: var(--vt-margem); bottom: var(--vt-margem); display: flex; flex-direction: column; gap: var(--aqua-space-3); }

/* ---- o modo simples: a manchete acima da linha, o tempo grande abaixo ---------------------- */
.ln-simples {
	position: absolute;
	left: var(--vt-margem);
	top: calc(var(--ln-y) + var(--ln-folga-baixo));
	display: flex;
	flex-direction: column;
	gap: var(--aqua-space-3);
}
.ln-simples__tempo { font-family: var(--aqua-font-mono); font-size: var(--vt-fs-tempo); font-weight: 500; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ln-simples__linha { font-size: var(--vt-fs-corpo); color: var(--vt-apagado); }