/**
 * O CANTO DE COMANDO DAS TELAS DO AR.
 *
 * O mesmo menu na escalação, nas notícias e na projeção: um botão de três
 * barras no canto de cima à esquerda que abre a lista de para onde ir.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * POR QUE ELE MORA NUM ARQUIVO SÓ
 *
 * Ele nasceu dentro de `noticias.css`. Quando a projeção virou tela do ar,
 * copiar essas cem linhas para a folha dela criaria dois menus com o mesmo
 * nome e desenhos que divergem na primeira correção. Aqui é um só.
 *
 * Tudo em `cqh` — 1% da altura da ÁREA de 1280×720 —, como o resto das telas
 * do ar: o menu tem de abrir do mesmo tamanho na janela e em tela cheia. Quem
 * declara o contêiner é a área de cada tela (`.et-noticias`, `.et-proj`).
 * ─────────────────────────────────────────────────────────────────────────────
 */

.et-hud {
	position: absolute;
	top: 1.6cqh;

	/*
	 * ═════════════════════════════════════════════════════════════════════════
	 * O CANTO É A CAMADA DE CIMA DA TELA — "coloca ela por cima de tudo
	 * inclusive".
	 *
	 * Ele estava em 20, e dentro dele mora o modal da classificação, em 60. O 60
	 * parecia bastante e não era: um `z-index` só vale entre IRMÃOS. O modal
	 * disputa com o que mais estiver dentro do canto; o canto é que disputa com
	 * o resto da tela — e em 20 ele perdia para o cartão do confronto do
	 * pré-jogo, que é o que no print aparecia com os dois escudos desenhados por
	 * cima da tabela.
	 *
	 * Subir o número do modal não resolveria nada, e é o engano fácil aqui.
	 * Quem tinha de subir era o pai.
	 *
	 * 9000 e não um número gigante: as camadas das telas do ar vão até 60, e as
	 * do EDITOR — as caixas de diálogo do pré-jogo e do pós-jogo, o recorte de
	 * foto — vivem acima de 9990. Essas têm de continuar por cima do menu: são
	 * janelas abertas por quem está trabalhando na tela, e um menu por cima
	 * delas esconderia o botão de salvar.
	 * ═════════════════════════════════════════════════════════════════════════
	 */
	z-index: 9000;

	display: flex;
	align-items: center;
	gap: 1.2cqh;
}

.et-hud--esq {
	left: 1.6cqh;
}

.et-menu {
	position: relative;
}

/*
 * ═════════════════════════════════════════════════════════════════════════════
 * O BOTÃO DO MENU — UM DESENHO SÓ PARA TODAS AS TELAS DA LIVE.
 *
 * "Eu quero que o menu ali em cima siga o padrão das outras páginas da live."
 *
 * ── O QUE ESTAVA ACONTECENDO.
 *
 * Esta folha desenhava um quadrado CLARO de 5,6cqh com fundo
 * `color-mix(currentColor 12%, #fff)`. As telas do acervo — Tabelas, Giro,
 * Elenco, Meu Timbu — não gostaram dele e cada uma escreveu o seu por cima
 * (`.ac-palco .et-menu__abrir`, `.ac-mtp .et-menu__abrir`): 4,2cqh,
 * transparente, discreto.
 *
 * Como a correção morava lá e não aqui, a projeção e as notícias — que não têm
 * `.ac-palco` nem `.ac-mtp` em volta — continuavam com o quadrado claro. Era
 * isso no print: o mesmo menu com duas aparências conforme a tela, e nenhuma
 * delas errada por si.
 *
 * ── O PADRÃO É O DELAS, e passa a morar aqui.
 *
 * Quem tinha razão eram as telas do acervo: o botão fica SOBRE a imagem que vai
 * ao ar, e um quadrado claro de 5,6cqh é um objeto na transmissão. Transparente
 * e a 32% ele só aparece para quem vai usá-lo.
 *
 * As folhas de lá continuam escrevendo o mesmo — elas também trazem a paleta de
 * `hover` delas, que é própria de cada palco. O que não é mais dever delas é
 * CONSERTAR este botão: quem chegar com uma tela nova já nasce igual.
 *
 * `tela-editor.css` (pré-jogo e pós-jogo) segue com o desenho próprio dele, em
 * pixels: aquela tela é editor, o menu ali é ferramenta de trabalho e não
 * enfeite sobre a imagem.
 * ═════════════════════════════════════════════════════════════════════════════
 */
.et-menu__abrir {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.2cqh;
	height: 4.2cqh;
	padding: 0;
	/* A borda nasce transparente para o `hover` poder acendê-la sem mexer na
	   caixa — uma borda que aparece do nada empurra o que está ao lado. */
	border: 1px solid transparent;
	border-radius: 1cqh;
	background: transparent;
	color: inherit;
	cursor: pointer;
	/*
	 * Discreto por padrão: ele fica sobre a imagem que vai ao ar, e só precisa
	 * ser visto por quem for usá-lo.
	 */
	opacity: 0.32;
	transition: opacity 0.15s, background 0.12s, border-color 0.12s;
}

.et-menu__abrir:hover,
.et-menu__abrir:focus-visible,
.et-menu__abrir[aria-expanded="true"] {
	opacity: 1;
}

/*
 * E SEM FUNDO, O `hover` PRECISA DE UM: a 100% de opacidade sobre a imagem, três
 * barras soltas somem em cima de qualquer coisa clara. As telas do acervo põem
 * aqui a cor delas; esta é a reserva, feita da própria tinta da tela.
 */
.et-menu__abrir:hover,
.et-menu__abrir:focus-visible {
	background: color-mix(in srgb, currentColor 8%, transparent);
	border-color: color-mix(in srgb, currentColor 22%, transparent);
}

.et-menu__abrir[aria-expanded="true"] {
	background: color-mix(in srgb, currentColor 14%, transparent);
	border-color: color-mix(in srgb, currentColor 30%, transparent);
}

/* As três barras, desenhadas com a própria caixa e duas sombras. */
.et-menu__barras,
.et-menu__barras::before,
.et-menu__barras::after {
	display: block;
	width: 2cqh;
	height: 0.3cqh;
	border-radius: 999px;
	background: currentColor;
}

.et-menu__barras {
	position: relative;
}

.et-menu__barras::before,
.et-menu__barras::after {
	content: "";
	position: absolute;
	left: 0;
}

.et-menu__barras::before { top: -0.7cqh; }
.et-menu__barras::after  { top: 0.7cqh; }

.et-menu__lista {
	position: absolute;
	top: calc(100% + 0.8cqh);
	left: 0;
	min-width: 26cqh;
	display: flex;
	flex-direction: column;
	padding: 0.6cqh;
	gap: 0.2cqh;
	border-radius: 1.2cqh;
	background: #fff;
	/*
	 * ═════════════════════════════════════════════════════════════════════════
	 * QUEM PINTA O FUNDO RESPONDE PELA TINTA.
	 *
	 * "O menu tá com a fonte clara."
	 *
	 * Os itens eram `color: inherit`, e esta lista é uma ILHA BRANCA por cima da
	 * tela de quem a abriu. Enquanto todas as telas do ar eram claras, herdar
	 * dava certo por coincidência. Numa tela de fundo vinho — a tabela, o giro,
	 * o sorteio — a tinta herdada é o creme, e o menu virava creme sobre branco:
	 * nada sumiu, estava tudo escrito e invisível.
	 *
	 * ─────────────────────────────────────────────────────────────────────────
	 * E ESTE CONSERTO JÁ EXISTIU UMA VEZ, NA TELA ERRADA.
	 *
	 * A tela do jogo ao vivo é branca sobre vermelho, e bateu nisto primeiro
	 * ("sumiu tudo do menu do painel"). Foi consertada LÁ, com um seletor que
	 * devolvia a tinta só naquela tela — e a lápide de lá já dizia a regra
	 * certa: "toda ilha de fundo próprio precisa devolver a tinta". A regra
	 * estava escrita no lugar errado, então o defeito voltou na tela seguinte
	 * que mudou de cor.
	 *
	 * Agora ele mora onde o fundo é pintado. Nenhuma tela precisa lembrar disso
	 * de novo, e a próxima que ficar escura já nasce com o menu legível.
	 * ═════════════════════════════════════════════════════════════════════════
	 */
	color: #16181d;
	box-shadow: 0 0.6cqh 2.4cqh rgba(0, 0, 0, 0.22);
}

.et-menu__lista[hidden] {
	display: none;
}

.et-menu__item {
	display: block;
	/*
	 * `border-box` OU A LINHA VAZA PARA FORA DA CAIXA.
	 *
	 * O item é `width: 100%` mais 1,6cqh de folga de cada lado. Num `<button>`
	 * isso não aparece — o navegador já dá `border-box` a botões —, mas os
	 * itens que são LINK ou a linha marcada (um `<span>`) nascem `content-box`:
	 * a largura vira 100% + a folga, e o fundo do item passa por baixo da borda
	 * arredondada da lista. Só se vê quando o item tem fundo, que é o caso da
	 * linha marcada e de qualquer item sob o cursor.
	 */
	box-sizing: border-box;
	width: 100%;
	padding: 1.2cqh 1.6cqh;
	border: 0;
	border-radius: 0.8cqh;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 2.6cqh;
	font-weight: 700;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.et-menu__item:hover,
.et-menu__item:focus-visible {
	background: color-mix(in srgb, currentColor 12%, transparent);
}

/*
 * O ITEM QUE É UM FORMULÁRIO — hoje, só o «Começar transmissão».
 *
 * O `<form>` é embrulho e nada mais: quem desenha é o `<button>` de dentro, que
 * já é um `.et-menu__item` como os outros. Sem estas linhas, o formulário
 * entraria na lista com a margem que o navegador dá a ele e abriria um degrau
 * no meio dos itens.
 */
.et-menu__forma {
	display: block;
	margin: 0;
	padding: 0;
}

/* -----------------------------------------------------------------------------
   O TÍTULO DE UM GRUPO DENTRO DA LISTA

   O menu tem três famílias no mesmo lugar: o que sempre existe (painel, home,
   tela cheia), para ONDE IR (a projeção, os jogos, o Meu Timbu) e o que só
   existe NESTA TELA (criar flyer no pré e no pós, trocar de projeção na
   projeção). Sem as linhas separando, "Náutico x Sport" apareceria como se
   fosse mais um destino, ao lado de "Home".
   ----------------------------------------------------------------------------- */

.et-menu__titulo {
	display: block;
	margin-top: 0.6cqh;
	padding: 0.8cqh 1.6cqh 0.2cqh;
	border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	font-size: 1.9cqh;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.6;
}

/* A que está na tela não é um destino: é onde se está. */
.et-menu__item.is-atual {
	background: color-mix(in srgb, currentColor 10%, transparent);
	cursor: default;
}

.et-menu__item.is-atual::after {
	content: " ✓";
	font-weight: 700;
}

.et-menu__item--novo {
	margin-top: 0.6cqh;
	border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	border-radius: 0 0 0.8cqh 0.8cqh;
}

/* -----------------------------------------------------------------------------
   OS ÍCONES DO MENU

   Do tamanho da letra, sem receber clique (o clique é do item), e um pouco mais
   apagados que o texto: eles apoiam a leitura, não competem com ela.
   ----------------------------------------------------------------------------- */

.et-menu__item {
	display: flex;
	align-items: center;
	gap: 0.6em;
}

.et-menu__item .et-ic {
	width: 1.05em;
	height: 1.05em;
	flex: 0 0 auto;
	opacity: 0.75;
	pointer-events: none;
}

/* -----------------------------------------------------------------------------
   A LISTA NÃO PODE PASSAR DA TELA

   Com os destinos, a lista cresceu: painel, home, tela cheia, a projeção, até
   cinco jogos, o Meu Timbu e o que a tela tem de próprio. Numa instalação com
   muitos jogos isso passa dos 720px da área — e o que passa não é cortado nem
   rolado: fica FORA da caixa que vai ao ar, invisível e sem aviso.

   O teto é 84cqh: sobra o canto de cima, onde mora o botão, e a folga de baixo.
   Passando disso a lista rola dentro de si mesma, e a barra fica DENTRO do
   menu, não na página — que continua parada, como uma tela do ar deve ficar.
   ----------------------------------------------------------------------------- */

.et-menu__lista {
	max-height: 84cqh;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* -----------------------------------------------------------------------------
   A LINHA DE ONDE JÁ SE ESTÁ

   Ela não é link: o servidor a manda como `<span>`, porque clicar nela só
   recarregaria a página que está no ar. O desenho tem de dizer isso antes do
   clique — daí o fundo mais forte, o visto no fim e o cursor de seta.
   ----------------------------------------------------------------------------- */

.et-menu__item.is-atual {
	cursor: default;
}

/* -----------------------------------------------------------------------------
   O RÓTULO

   Ele tem caixa própria para que a tela possa trocar as palavras ("Gerando…")
   sem apagar o ícone ao lado. `min-width: 0` para que um nome de jogo comprido
   encolha em vez de esticar a lista para fora da área.
   ----------------------------------------------------------------------------- */

.et-menu__rotulo {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}