/* Folha — toda tela é uma folha de laudo: superfície única sobre o fundo.
A régua de tinta que existia no topo foi removida em 14/09/2026 (pedido do
usuário): quem dá estrutura ao topo é a régua do masthead, e a barra preta
cravava atrás do scrim quando havia modal aberto. */
/* 1040px não é gosto: é onde todo nome de exame da fila passa a caber em uma
linha e a tabela encurta 14%. De 1040 para cima nada melhora — só espalha o
masthead. Prosa não sofre porque cada bloco de texto tem o seu próprio teto
(.intro e .sg-expl param em 62ch). */
.folha {
max-width: 1040px;
margin: 28px auto 0;
background: var(--surface);
border-radius: var(--r-lg);
padding: 44px 52px 52px;
}
@media (max-width: 45rem) {
.folha { margin: 24px 0 0; padding: 28px 20px 44px; }
}
/* Calha — a margem vazia ao lado da folha é a porta para a tela vizinha, e é
clicável inteira: de topo a rodapé, sem mira. O markup e a razão de ela ser
filha direta de estão em shared/_calha.
A largura é a metade que sobra do teto da folha, e por isso `%` e não `vw`:
`vw` conta a barra de rolagem e a calha ficaria alguns pixels fora de
registro com o `margin: auto` da folha. Assim as duas bordas coincidem. */
.calha {
/* Abaixo da barra, não atrás dela: a margem continua clicável inteira, só que
a partir do teto. O token mora em barra.css, que é de quem é a medida. */
position: fixed; inset-block: var(--barra-h) 0;
inline-size: calc(50% - 520px);
display: grid; align-content: center; justify-items: center; gap: 10px;
text-align: center;
color: var(--ink-faint);
transition: color .12s ease;
}
/* A mira encosta na folha, não no meio da margem: o olho sai da última coluna
da tabela e encontra a seta ali, a um palmo — centrada, ela ficava a meia
margem de distância de tudo e parecia solta no branco.
Quem vai para o lado é a COLUNA (`justify-content`), não os itens dentro dela
(`justify-items`, que segue em `center`). Alinhar os itens encostava a borda
esquerda do rótulo na borda esquerda do chevron, e como o rótulo é mais largo
que o glifo os dois saíam fora de prumo. Com a coluna inteira deslocada, o
texto continua centrado sob o chevron.
A folga é `min(48px, 20%)` e não um número seco: 48px é o respiro certo na
margem larga, mas a margem mínima em que a calha existe tem 56px de vão — lá
um padding fixo comeria a coluna toda. A porcentagem conta sobre a própria
calha, então encolhe junto com ela. */
.calha--esq { inset-inline-start: 0; justify-content: end; padding-inline-end: min(48px, 20%); }
/* Experimento (15/09/2026): a vizinha da esquerda não fica parada na janela —
ela rola junto com a folha, como se as duas páginas estivessem na mesma
mesa. Para isso a calha deixa de ser fixa e passa a medir o DOCUMENTO
(absoluta dentro do , que é o bloco que contém).
A coluna vira flex porque o grid centrado colava a mira no meio da PÁGINA, e
porque `sticky` só viaja quando o bloco que contém é o container — o que
vale no flex e não na área de grid. A mira nasce no meio da primeira janela
(o padding) e gruda lá: a porta continua no mesmo lugar de sempre, seja qual
for a rolagem. O rótulo gruda um degrau abaixo, senão os dois empilhavam no
mesmo pixel.
E sem a máscara: a folha vizinha que rola precisa ter fim de folha, não uma
dissolução a 470px que deixaria a margem vazia depois do primeiro rolar. */
.calha--esq {
position: absolute; inset-block: var(--barra-h) 0;
display: flex; flex-direction: column;
align-items: flex-end; justify-content: flex-start;
padding-block-start: calc(50vh - var(--barra-h));
}
.calha--esq .calha-seta { position: sticky; inset-block-start: 50vh; }
.calha--esq .calha-rot { position: sticky; inset-block-start: calc(50vh + 47px); }
.calha--esq .vizinha { mask-image: none; }
.calha--dir { inset-inline-end: 0; justify-content: start; padding-inline-start: min(48px, 20%); }
/* Quem acende é o conteúdo, não a calha: pintar o fundo de uma área desse
tamanho dava um bloco de cor maior que meia tela para dizer uma coisa
pequena. O ponteiro já vira mão em toda a faixa — é ele que conta o tamanho
do alvo. A seta só confirma, e escorrega para o lado da viagem. */
.calha:is(:hover, :focus-visible) { color: var(--accent); }
.calha-seta {
position: relative; /* na frente do desenho da vizinha */
font-size: 46px; line-height: .8;
transition: translate .12s ease;
}
.calha--dir:is(:hover, :focus-visible) .calha-seta { translate: 4px 0; }
.calha--esq:is(:hover, :focus-visible) .calha-seta { translate: -4px 0; }
/* O rótulo é a placa da porta, não uma legenda da folha: fica na margem, fora
da leitura, e só precisa ser lido quando o olho já foi até lá. Por isso saiu
do mono caps das outras legendas (.section-rule, .weekline) — tracking e
caixa alta gritam de longe — e virou sans minúsculo, apagado.
O teto é a própria calha, e não uma contagem de caracteres. Em sans
minúsculo "Fila de exames" cabe em uma linha em toda a faixa onde a calha
existe — abaixo de 72rem ela some. O `balance` é para o rótulo que vier
depois: quem passa `name` mais longo ganha duas linhas repartidas em vez de
uma palavra órfã embaixo. */
.calha-rot {
position: relative; /* na frente do desenho da vizinha */
font-size: 11.5px; letter-spacing: .01em;
opacity: .65;
text-wrap: balance;
max-inline-size: 100%; padding-inline: 6px;
}
/* A folha vizinha, no fundo da calha. Ela está estacionada fora da tela e o
que se vê é a borda dela — a mesma direção em que a travessia desliza
(controls.css). Quem desenha o miolo é shared/_vizinha: a página de
verdade, com as classes de verdade e sem dado nenhum dentro.
`absolute` e não `fixed`: a calha já é fixa, então ela é o bloco que contém
— e é a largura DELA que as porcentagens abaixo medem. Com `fixed` aqui,
`52%` mediria a janela e a folha vizinha atravessava a folha da tela.
Nada de sombra: profundidade aqui é régua, como no resto do app. */
.calha-vizinha {
position: absolute; inset-block: 28px 0; /* 28px = a margem de topo da folha */
pointer-events: none; /* quem clica é a calha inteira */
display: flex; overflow: hidden;
background: color-mix(in oklab, var(--surface-2) 72%, var(--bg));
border: 1px solid color-mix(in oklab, var(--line) 55%, transparent);
border-radius: var(--r-lg);
transition: translate .12s ease;
}
/* O véu — a vizinha está fora do facho de luz. Sem ele a lateral era papel
branco aceso dos dois lados da folha, e duas folhas acesas na margem
cansam a vista e roubam a atenção da única que está sendo trabalhada.
Apagar o desenho não resolvia (some a informação); apagar a LUZ resolve.
Ele passa NA FRENTE do desenho, não atrás: assim a vizinha continua sendo
papel com a luz baixada, e não um papel de outra cor.
E o véu é o PRÓPRIO FUNDO da tela, não preto: véu neutro sobre o gelo
azulado do app deixava um cinza que não é cor de nenhuma parte deste
sistema — e cinza estranho no canto do olho chama mais atenção do que a
folha branca que ele veio consertar. Com `--bg` a vizinha se mistura na
cor que já está em volta dela: quanto mais longe da folha, mais ela é só
fundo. Um valor só serve aos dois temas, porque o token já é o par.
As paradas são em px e não em %: o quadro avança 240px fora da tela, então
em % o fim da rampa cairia fora da janela e o que se veria seria só o
começo dela. */
.calha-vizinha::after {
content: ""; position: absolute; inset: 0; border-radius: inherit;
--veu-perto: color-mix(in oklab, var(--bg) 12%, transparent);
--veu-longe: color-mix(in oklab, var(--bg) 68%, transparent);
/* o par da esquerda, que corre no sentido contrário: forte encostado na
folha, fraco na beira da janela */
--veu-mais: color-mix(in oklab, var(--bg) 96%, transparent);
--veu-menos: color-mix(in oklab, var(--bg) 8%, transparent);
}
/* A mistura é mais forte quanto mais longe da folha: a luz continua vindo de
onde está o trabalho, e a vizinha se dissolve em direção à borda da janela
em vez de terminar numa laje de cor. */
.calha--dir .calha-vizinha::after { background: linear-gradient(to right, var(--veu-perto) 0, var(--veu-longe) 250px); }
/* Na esquerda a luz vem do outro lado. A folha de trabalho está à DIREITA da
vizinha, e é encostado nela que a vizinha precisa sumir: o véu é mais forte
na borda que toca a folha e abre para a borda da janela, onde a vizinha
pode aparecer inteira. Invertido (véu forte na beira da tela) a vizinha
nascia acesa colada na folha e apagada no vazio — o contrário do que a
atenção pede. */
.calha--esq .calha-vizinha::after { background: linear-gradient(to left, var(--veu-mais) 0, var(--veu-menos) 488px); }
/* A alameda entre as duas folhas: a vizinha começa depois da mira e não
encosta na folha. Encostada — e mais ainda enfiada por baixo dela — a
travessia deixava de ser uma porta na margem e virava pilha de papel
cobrindo a tela; o vão é o que mantém a folha em foco sozinha no meio.
`min()` porque a calha vai de 56px (onde ela morre) a meia tela:
porcentagem sozinha cola a vizinha no chevron na margem estreita, e um
número seco joga o desenho fora da tela na margem larga. O -240px é o que
sai pela borda: folha vizinha não tem fim visível. */
.calha--dir .calha-vizinha { inset-inline: min(100%, 546px) -240px; rotate: 2.5deg; transform-origin: left center; }
.calha--esq .calha-vizinha { inset-inline: -240px min(100%, 20px); }
/* A miniatura é a folha vizinha em tamanho natural — 1040px de teto e o mesmo
padding da folha, para o título dela nascer na mesma linha do título desta
tela. Não há escala nenhuma: quem corta é o overflow do quadro, como corta
a borda da janela. Escalar quebraria justamente o que faz a tela ser
reconhecida de longe, que é a altura da linha e o corpo do texto.
A tinta é UMA cor da família do fundo — `--line-strong`, a régua forte —, e
não a tinta de texto de cada classe. Duas razões: tinta cheia a 20% dá um
cinza neutro que não pertence a esta paleta e por isso pisca no canto do
olho, e a folha vizinha não é para ser lida, é para ser reconhecida. Uma
cor só, na matiz do que está em volta, é a diferença entre desenho de
fundo e página apagada.
O `color` fixo também corta a herança do hover da calha: quem acende no
hover é a mira, e uma vizinha azul seria outra tela, não a mesma com mais
luz. Os tokens abaixo são a mini-API dos componentes que pintam FUNDO
(botão, stat, barra de gráfico): sem eles sobrariam ilhas de cor sólida
que o `color` não alcança.
`opacity` e não uma cor com alpha porque o que se quer é baixar o conjunto
de uma vez. (No `color` ainda vale a regra antiga: `opacity: light-dark(…)`
seria declaração inválida — o light-dark() só existe dentro de valor de
cor.)
Ela se dissolve para baixo em px e não em % da própria altura, senão a
dissolução mudaria de lugar a cada tamanho de janela. */
.vizinha {
flex: none; align-self: flex-start;
width: 1040px; padding: 44px 52px 0;
/* a calha centraliza o texto dela (seta e rótulo) e a vizinha é filha: sem
isto o título do masthead nasce centrado sobre a linha de baixo, fora do
prumo da página que ele deveria estar imitando */
text-align: start;
color: var(--line-strong);
opacity: var(--tinta, .8);
--surface-2: color-mix(in oklab, currentColor 16%, transparent);
--btn-bg: transparent; --btn-color: currentColor;
--stat-color: currentColor;
--chart-marcados: currentColor; --chart-faltantes: currentColor;
mask-image: linear-gradient(to bottom, #000 0 210px, transparent 470px);
transition: opacity .12s ease;
}
/* Uma cor só, de ponta a ponta: as classes de dentro são as do app e cada uma
traz a sua tinta de texto. `:where()` para não subir a especificidade e
para não estilizar componente de fora — a regra é a do topo de
application.css. */
.vizinha :where(*) { color: inherit; }
/* Na calha da esquerda o quadro avança 240px fora da tela (o -240px acima), e
sem o empurrão de volta o que sobraria na faixa visível é o meio da folha
vizinha. Os dois lados mostram o rosto da tela — título, busca, primeira
coluna —, que é o que faz reconhecer a vizinha pela palavra. Nada de
espelhar: texto espelhado é sujeira. */
.calha--esq .vizinha { translate: 240px 0; }
/* Onde mora dado — nome, telefone, contagem, hora — vai barra. A régua da
miniatura é só o que está escrito na view: título, rótulo de coluna, nome
de botão, legenda de seção. Assim o fundo nunca mostra uma pessoa que não
está naquela lista. A barra herda a cor do texto que ela substitui. */
.vizinha-b {
display: inline-block; vertical-align: middle;
height: 8px; border-radius: 2px;
background: currentColor; opacity: .5;
}
.vizinha-b--fina { height: 6px; opacity: .3; }
/* O campo de busca sem o : dentro de um não entra campo, que
ganharia foco no Tab. */
.vizinha-campo {
display: block; height: 41px;
border-radius: var(--r);
background: currentColor; opacity: .12;
}
/* Entre 72rem e 88rem a calha existe mas a margem não comporta uma folha: o
que caberia é uma tira de 30 a 60px, que lê como borda suja e não como
vizinha esperando. Aí o desenho sai e ficam a seta e o rótulo, que é a
calha que o app já tinha. */
@media (max-width: 88rem) {
.calha-vizinha { display: none; }
}
/* Ela se inclina para dentro no hover, no tempo do chevron: a folha que
espera dá um passo à frente. */
.calha--dir:is(:hover, :focus-visible) .calha-vizinha { translate: -100px 0; }
.calha:is(:hover, :focus-visible) .vizinha { --tinta: 1; }
@media (prefers-reduced-motion: reduce) {
.calha--dir:is(:hover, :focus-visible) .calha-vizinha { translate: none; }
}
/* 1040 da folha + 56 de calha de cada lado. Abaixo disso não há margem onde a
calha caiba, e quem faz a travessia volta a ser o botão do masthead. */
@media (max-width: 72rem) {
.calha { display: none; }
}
/* A régua do masthead era tinta cheia (--ink) e virou --line-strong em
15/09/2026: preto nessa espessura lê como barra, não como filete, e competia
com o dado, que é o que a folha tem de mais escuro. Os três pesos de régua
continuam existindo, agora todos dentro da mesma escala de cinza — --line na
linha de lista, --line-strong na seção e na estrutura — e a tinta fica
reservada ao texto. O 3px preto do