/* Casca do eyye. Medidas do canvas (DOCS/canvas/project/Shell*.dc.html), tudo em tokens.
   A/B lado a lado e barra de cores: proposta 1 v2 do canvas de comparação (2026-10-07). */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--chrome-bg); color: var(--chrome-text); font-family: var(--font-ui); }
button, select, input { font: inherit; }
:focus-visible { outline: 2px solid var(--chrome-accent); outline-offset: 2px; }

.casca { position: relative; height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; background: var(--chrome-bg); color: var(--chrome-text); font-family: var(--font-ui); }
[hidden] { display: none !important; }
.cresce { flex-grow: 1; }
.muted { color: var(--chrome-muted); }

/* ── visibilidade por contexto ── */
@media (max-width: 767px) { .so-desk { display: none !important; } }
@media (min-width: 768px) { .so-mob { display: none !important; } }
.casca:not([data-mode="ajustar"]) .so-ajustar,
.casca:not([data-mode="auditar"]) .so-auditar,
.casca[data-barra="tipo"] .so-cor,
.casca:not([data-barra="tipo"]) .so-tipo { display: none !important; }

/* ── topo ── */
.topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-16); padding: var(--s-12) var(--s-24); background: var(--chrome-surface); border-bottom: 1px solid var(--chrome-line); }
.marca { font-size: var(--fs-16); line-height: var(--lh-16); font-weight: 700; letter-spacing: -0.02em; }

.seg { display: flex; gap: var(--s-4); padding: var(--s-4); background: var(--chrome-bg); border-radius: var(--r-8); }
.seg button { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 400; padding: var(--s-8) var(--s-12); border: 0; border-radius: var(--r-4); background: transparent; color: var(--chrome-muted); cursor: pointer; }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--chrome-surface); color: var(--chrome-text); font-weight: 600; }
.seg button:disabled { cursor: not-allowed; opacity: 0.4; }
.seg--modo { align-self: stretch; margin-block: calc(var(--s-12) * -1); gap: var(--s-32); padding: 0; border-radius: 0; background: transparent; }
.seg--modo button { display: flex; align-items: center; padding: 0; border-bottom: 2px solid transparent; border-radius: 0; font-size: var(--fs-16); line-height: var(--lh-16); font-weight: 500; }
.seg--modo button:hover { color: var(--chrome-text); }
.seg--modo button[aria-pressed="true"] { border-bottom-color: var(--chrome-text); background: transparent; } /* modos: abas de texto, sublinhado no ativo, sem caixa */
.seg--cheio { flex-grow: 1; }
.seg--cheio button { flex: 1 1 0; }
/* alvo da edição: a mesma cor do anel da coluna e da borda do seletor */
.seg--alvo button { font-family: var(--font-mono); padding: var(--s-8) var(--s-16); }
.seg--alvo button[aria-pressed="true"] { background: var(--chrome-accent); color: var(--chrome-on-accent); font-weight: 700; }

.btn { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 600; padding: var(--s-8) var(--s-16); border: 1px solid var(--chrome-line); border-radius: var(--r-8); background: var(--chrome-surface); color: var(--chrome-text); cursor: pointer; }
.btn--accent { border-color: var(--chrome-accent); background: var(--chrome-accent); color: var(--chrome-on-accent); }
/* no topo só o Exportar tem fundo; Copiar link é botão de texto */
.topo .btn:not(.btn--accent) { border-color: transparent; background: transparent; padding-inline: var(--s-12); }
.topo .btn:not(.btn--accent):hover { background: var(--chrome-bg); }
/* Distribuição de cor, no grupinho do Claro/Escuro: branco e do tamanho de um item de segmentado (a linha é cinza), sem contorno */
.btn--dist { display: flex; align-items: center; gap: var(--s-8); padding: var(--s-8) var(--s-12); border: 0; border-radius: var(--r-4); background: var(--chrome-surface); }

.tag { font-family: var(--font-mono); font-size: var(--fs-12); line-height: var(--lh-12); padding: var(--s-4) var(--s-8); border: 0; border-radius: var(--r-4); background: var(--chrome-bg); color: inherit; }
.tag--muted { color: var(--chrome-muted); }
.tag--ink { background: var(--chrome-ink); color: var(--chrome-on-ink); }
.tag--alvo { background: var(--chrome-accent); color: var(--chrome-on-accent); }

/* ── faixa: comparar · visão (mora na linha das abas da tela, ver .telas-abas) ── */
.faixa { flex: 1 1 auto; align-self: center; display: flex; align-items: center; gap: var(--s-16); font-size: var(--fs-12); line-height: var(--lh-12); white-space: nowrap; }
.faixa .divisor { width: 1px; height: var(--s-24); background: var(--chrome-line); }
.visao-ctl { display: flex; align-items: center; gap: var(--s-8); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--chrome-muted); }

/* ── menus: lista no estilo da casca (Visão, esquema do sorteio, raio) ── */
.menu { position: relative; }
.visao-ctl .menu-btn { display: flex; align-items: center; justify-content: space-between; gap: var(--s-8); min-width: calc(var(--s-96) + var(--s-32)); padding: var(--s-8) var(--s-12); border: 0; border-radius: var(--r-8); background: var(--chrome-surface); color: var(--chrome-text); font-size: var(--fs-12); line-height: var(--lh-12); cursor: pointer; }
.menu-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu-lista { position: absolute; right: 0; top: calc(100% + var(--s-8)); z-index: 6; width: max-content; min-width: 100%; margin: 0; padding: var(--s-8); list-style: none; display: flex; flex-direction: column; gap: var(--s-4); border: 0; border-radius: var(--r-12); background: var(--chrome-surface); color: var(--chrome-text); box-shadow: var(--shadow-flutua); font-size: var(--fs-12); line-height: var(--lh-12); }
.menu--cima .menu-lista { top: auto; bottom: calc(100% + var(--s-8)); }
.menu-lista [role="option"] { display: flex; align-items: center; gap: var(--s-12); padding: var(--s-8) var(--s-12); border: 0; border-radius: var(--r-8); white-space: nowrap; cursor: pointer; }
.menu-lista [role="option"]:hover, .menu-lista [role="option"]:focus { background: var(--chrome-bg); outline: none; }
.menu-lista [role="option"]:focus-visible { outline: 2px solid var(--chrome-accent); outline-offset: 2px; }
.menu-lista [aria-selected="true"], .menu-lista [aria-selected="true"]:hover, .menu-lista [aria-selected="true"]:focus { background: var(--chrome-ink); color: var(--chrome-on-ink); }
.menu-lista [aria-selected="true"] .muted { color: var(--chrome-on-ink-muted); }
.menu-titulo { padding: var(--s-4) var(--s-4) var(--s-8); color: var(--chrome-muted); }
.raio-amostra { flex: 0 0 auto; width: var(--s-16); height: var(--s-16); border: 2px solid currentColor; border-radius: calc(var(--s-4) * var(--a, 1)); }

/* ── placar ── */
.placar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-24); margin-top: var(--s-12); padding: var(--s-16) var(--s-24); background: var(--chrome-surface); border-block: 1px solid var(--chrome-line); }
.placar-item { display: flex; align-items: baseline; gap: var(--s-12); }
.placar-n { font-size: var(--fs-40); line-height: var(--lh-40); font-weight: 700; letter-spacing: -0.02em; }
.placar-sub { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--chrome-muted); }
.placar .divisor { width: 1px; height: var(--s-48); background: var(--chrome-line); }
.passa { color: var(--pin-pass); }
.falha { color: var(--pin-fail); }
.fraco { color: var(--pin-warn); }

/* ── corpo ── */
.corpo { flex: 1 1 0; min-height: 0; display: flex; align-items: stretch; }
.palco-area { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding: var(--s-12) var(--s-24) 0; }
/* no Ajustar a barra flutua sobre o palco: a página vai até o pé e ganha folga no fim pra rolar o último bloco pra cima da barra (pílula + respiro da barra + distância do pé) */
.casca[data-mode="ajustar"] .colunas { padding-bottom: calc(var(--h-barra, calc(var(--h-pilula) + var(--s-24))) + var(--s-64)); } /* --h-barra vem do dobrar(), a barra pode ter 1 a 3 linhas */
.palco { flex: 1 1 0; min-height: 0; position: relative; overflow-x: hidden; overflow-y: auto; }
/* tela e tema da tela de teste: abas presas ao palco (no desktop o palco vira um painel branco e a aba ativa encosta nele) */
.telas-abas { container-type: inline-size; display: flex; flex-wrap: wrap-reverse; align-items: end; gap: var(--s-8) var(--s-16); } /* uma linha só; se nem enxuta couber, a faixa sobe e as abas ficam presas ao palco */
.so-aperto { display: none; }
.rot-suporte { align-self: center; font-size: var(--fs-12); line-height: var(--lh-12); }
.telas-abas .rot-faixa { font-weight: 500; } /* rótulos no peso das abas: em 400 pareciam finos ao lado delas */
/* ritmo da linha, medido até a borda da caixa (o botão ativo é branco): rótulo → controle 8; entre grupos e em volta dos divisores 16 */
.rot-suporte { margin-right: calc(var(--s-8) * -1); } /* 16 do gap - 8 = 8 até a aba */
.faixa > .rot-faixa { margin-right: calc(var(--s-12) * -1); } /* 16 - 12 + 4 do .seg = 8 */
.faixa .seg + .divisor { margin-left: calc(var(--s-4) * -1); } /* 4 do .seg + 16 - 4 = 16 */
.tela-acoes { align-self: center; display: flex; align-items: center; } /* Distribuição + Claro/Escuro: 4 até o primeiro item, o mesmo vão de dentro do .seg */
/* a linha aperta em degraus: 1) saem os rótulos Suporte, Visualizar e Visão (o olho fica no lugar); 2) Distribuição e Claro/Escuro viram ícone com dica. Cortes = largura medida da linha no degrau anterior (1224 · 1094; enxuta, 893) + 16 de folga */
@container (width < 1240px) { .rot-faixa { display: none; } .so-aperto { display: block; } }
@container (width < 1110px) {
  .telas-abas .rot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@container (width < 909px) { .faixa { order: 1; flex-basis: 100%; } .divisor--abas { display: none; } .tela-acoes { margin-left: auto; } } /* nem enxuta cabe: a faixa sobe inteira e abas + tema ficam juntos no pé, como era antes */
.telas-lista { display: flex; gap: var(--s-4); }
.telas-lista button { padding: var(--s-12) var(--s-24); border: 0; border-radius: var(--r-12) var(--r-12) 0 0; background: transparent; color: var(--chrome-muted); font-family: inherit; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 500; cursor: pointer; }
.telas-lista button:hover { color: var(--chrome-text); }
.telas-lista button[aria-selected="true"] { background: var(--chrome-surface); color: var(--chrome-text); font-weight: 600; }
.seg--tema button { display: flex; align-items: center; gap: var(--s-8); }
@media (min-width: 768px) {
  .palco { border-radius: var(--r-12) var(--r-12) 0 0; background: var(--chrome-surface); }
  .casca[data-screen="site"] .palco { border-top-left-radius: 0; } /* aba ativa é a primeira: o canto encosta reto */
  .visao { padding: var(--s-24) var(--s-24) 0; }
}
.filtros { position: absolute; }

.auditor { flex: 0 0 var(--w-auditor); overflow-y: auto; padding: var(--s-24) var(--s-24) var(--s-48); display: flex; flex-direction: column; gap: var(--s-16); background: var(--chrome-surface); border-left: 1px solid var(--chrome-line); }
.auditor-cab, .lista-cab { display: flex; flex-direction: column; gap: var(--s-4); font-size: var(--fs-12); line-height: var(--lh-12); }
.lista-cab { padding-top: var(--s-16); border-top: 1px solid var(--chrome-line); }
.titulo { font-size: var(--fs-16); line-height: var(--lh-16); font-weight: 600; }
.lista { display: flex; flex-direction: column; gap: var(--s-16); }
.lista:empty { display: none; }
.cartao, .linha-falha { font: inherit; color: inherit; text-align: left; border: 0; background: transparent; }
button.cartao, button.linha-falha { cursor: pointer; width: 100%; }
.cartao { display: flex; gap: var(--s-12); padding: var(--s-12); border-radius: var(--r-8); background: var(--pin-fail-soft); }
.cartao--aviso { background: var(--pin-warn-soft); }
.cartao--neutro { background: var(--chrome-bg); }
.cartao-txt { display: flex; flex-direction: column; gap: var(--s-4); font-size: var(--fs-12); line-height: var(--lh-12); }
.cartao-txt strong { font-weight: 600; }
.cartao-v { display: flex; align-items: center; gap: var(--s-8); }
.auditor-outra { margin: 0; font-size: var(--fs-12); line-height: var(--lh-12); }
.mono { font-family: var(--font-mono); }
.selo { flex: 0 0 var(--s-24); height: var(--s-24); border-radius: var(--r-12); background: var(--pin-fail); color: var(--pin-on-fail); font-family: var(--font-mono); font-size: var(--fs-12); line-height: var(--s-24); text-align: center; }
.selo--aviso { border-radius: var(--r-4); background: var(--pin-warn); color: var(--pin-on-warn); }
.selo--ok { background: var(--pin-pass); }
.link { font-size: var(--fs-12); line-height: var(--lh-12); align-self: flex-start; padding: var(--s-8) 0; border: 0; background: transparent; color: var(--chrome-accent); text-decoration: underline; cursor: pointer; }

/* ── palco: colunas A e B (rolagem junta = o próprio .palco) ── */
.visao { position: relative; }
.colunas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-32); align-items: start; padding-bottom: var(--s-24); }
.casca[data-view="ab"] .colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* cabeçalho da coluna só na comparação; com uma variante só, ele aparece apenas pra avisar de fonte local ausente */
.casca:not([data-view="ab"]) .coluna-cab:not(:has(.tag[data-cab-fonte])) { display: none; }
.casca:not([data-view="ab"]) .coluna-cab > :not([data-cab-fonte]) { display: none; }
.coluna { min-width: 0; border-radius: var(--r-12) var(--r-12) 0 0; background: var(--chrome-surface); }
.coluna-cab { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--s-12); padding: var(--s-12) var(--s-16); border-radius: var(--r-12) var(--r-12) 0 0; background: var(--chrome-surface); font-size: var(--fs-12); line-height: var(--lh-12); }
.coluna-cab .link { padding: 0; }
.casca[data-mode="ajustar"] .coluna[data-alvo], .casca[data-mode="ajustar"] .par-item[data-alvo] .fone { outline: 2px solid var(--chrome-accent); outline-offset: var(--s-4); }
.casca[data-mode="ajustar"] .coluna, .casca[data-mode="ajustar"] .par-item { cursor: pointer; }
.tela { container-type: inline-size; background: var(--t-bg); color: var(--t-text); font-family: var(--t-body); font-weight: var(--t-body-w, 400); letter-spacing: var(--t-track, 0); filter: var(--filtro, none); }

.par { display: flex; justify-content: center; gap: var(--s-48); padding: var(--s-16) var(--s-16) var(--s-32); }
.par-item { display: flex; flex-direction: column; align-items: center; gap: var(--s-16); min-width: 0; }
.par-item .coluna-cab { position: static; border: 0; background: transparent; padding: 0; }
.fone { position: relative; zoom: var(--fone-zoom, 1); width: var(--phone-w); max-width: 100%; height: var(--fone-h, var(--phone-h)); border-radius: var(--r-phone); overflow-y: auto; scrollbar-width: none; box-shadow: 0 0 0 var(--s-8) var(--chrome-ink), var(--shadow-phone); }
.fone > .tela { min-height: var(--phone-h); } /* a tela tem a altura do aparelho real mesmo com o celular encurtado (caberFone): a Distribuição não muda com a janela */

/* pinos do auditor dentro das telas */
.tela { position: relative; }
.pinos { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.pin { position: absolute; pointer-events: auto; width: var(--s-24); height: var(--s-24); border-radius: var(--r-12); background: var(--pin-fail); color: var(--pin-on-fail); font-family: var(--font-mono); font-size: var(--fs-12); line-height: var(--s-24); text-align: center; box-shadow: 0 0 0 2px var(--pin-on-fail); z-index: 1; }

/* kit: abas (Cor · Componentes · Tipografia), índice dos componentes e tokens recolhidos; estado em ui.kit */
.kit-abas { position: sticky; top: var(--h-cab, 0); z-index: 1; }
.kit-abas [role="tab"][aria-selected="true"] { color: var(--t-primary); font-weight: 600; box-shadow: inset 0 calc(var(--s-4) * -1) 0 var(--t-primary); }
.kit-abas [role="tab"]:focus-visible, .kit-indice button:focus-visible, .kit-ver:focus-visible { outline: 2px solid var(--t-primary); outline-offset: 2px; }
.kit-comp { display: flex; gap: var(--s-64); align-items: flex-start; }
.kit-comp[hidden] { display: none; }
.kit-blocos { flex: 1 1 0; min-width: 0; max-width: var(--w-kit-texto); display: flex; flex-direction: column; gap: var(--s-64); }
.kit-bloco { scroll-margin-top: calc(var(--h-cab, 0px) + var(--s-48) + var(--s-24)); }
.kit-indice { display: none; flex: 0 0 var(--w-kit-indice); flex-direction: column; gap: var(--s-4); position: sticky; top: calc(var(--h-cab, 0px) + var(--s-48) + var(--s-24)); }
.kit-indice button { padding: var(--s-8) var(--s-12); border: 0; border-radius: calc(var(--r-8) * var(--t-raio)); background: transparent; color: var(--t-muted); font: inherit; font-size: var(--fs-16); line-height: var(--lh-16); text-align: left; cursor: pointer; }
.kit-indice button:hover { background: var(--t-surface); color: var(--t-text); }
.kit-ver svg { transition: transform 0.15s; }
.kit-ver[aria-expanded="true"] svg { transform: rotate(90deg); }
@container (min-width: 880px) { .kit-indice { display: flex; } }

/* ── barra de cores (Ajustar), no estilo do Realtime Colors ── */
/* a barra tem o tamanho do conteúdo, centralizada no pé (pílulas de largura fixa); encolhe só quando a janela aperta */
.barra { position: absolute; left: 0; right: 0; width: fit-content; max-width: calc(100% - var(--s-24) * 2); margin-inline: auto; bottom: var(--s-24); z-index: 3; display: flex; align-items: flex-end; gap: var(--s-8); padding: var(--s-8); border-radius: var(--r-16); background: var(--chrome-vidro); -webkit-backdrop-filter: blur(var(--blur-vidro)); backdrop-filter: blur(var(--blur-vidro)); box-shadow: var(--shadow-flutua); font-size: var(--fs-12); line-height: var(--lh-12);  transition: background-color var(--dur-curta) ease-out; }
.barra-alvo { display: flex; flex-direction: column; } /* rótulo 16 + seg 32 = altura da pílula */
.barra .seg button { padding: var(--s-4) var(--s-12); }
.barra-chaves, .barra-ferramentas { flex: none; display: flex; align-items: flex-end; gap: var(--s-8); }
.pilulas { flex: none; display: flex; gap: var(--s-8); }
.pilula { position: relative; flex: none; width: var(--w-pilula); min-width: 0; }
/* nada encolhe nem corta texto: quando a barra não cabe numa linha, o dobrar() (app.js) escolhe um destes arranjos */
.barra-chaves { grid-area: chaves; }
.pilulas { grid-area: pilulas; }
.barra-ferramentas { grid-area: ferr; }
.barra[data-dobra] { display: grid; justify-items: center; justify-content: center; } /* dobrada, cada linha centraliza */
.barra[data-dobra="1"] { grid-template-areas: "chaves pilulas" "ferr ferr"; }
.barra[data-dobra="2"], .barra[data-dobra="3"] { grid-template-areas: "pilulas pilulas" "chaves ferr"; }
.casca[data-barra="tipo"] .barra:is([data-dobra="2"], [data-dobra="3"]) { grid-template-areas: "pilulas" "chaves"; } /* no Tipo não há ferramentas: a chave centraliza sozinha */
.barra[data-dobra="3"] .pilulas--tipo { grid-template-columns: repeat(4, minmax(var(--w-pilula), max-content)); }
.barra[data-dobra="3"] .pilulas--tipo .pilula:nth-child(-n+2) { grid-column: span 2; }
.pilula-cor { width: 100%; height: var(--h-pilula); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: var(--s-8) var(--s-12); border: 0; border-radius: var(--r-12); background: var(--pc); color: var(--po); text-align: left; cursor: pointer; }
.pilula-cor[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--chrome-surface), 0 0 0 4px var(--chrome-accent); }
.pilula-nome { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 600; }
.pilula-hex { font-family: var(--font-mono); font-size: var(--fs-12); line-height: var(--lh-12); }
.pilula .selo { position: absolute; top: calc(var(--s-8) * -1); right: calc(var(--s-8) * -1); min-width: var(--s-24); padding: 0 var(--s-4); box-shadow: 0 0 0 2px var(--chrome-surface); pointer-events: none; }
.cadeado { position: absolute; right: var(--s-8); bottom: var(--s-8); display: flex; padding: var(--s-4); border: 0; border-radius: var(--r-8); background: transparent; color: var(--po); opacity: 0.6; cursor: pointer; }
.cadeado[aria-pressed="true"] { opacity: 1; }
.cadeado:hover { opacity: 1; }
.barra-btn { display: flex; align-items: center; gap: var(--s-8); height: var(--h-pilula); padding: 0 var(--s-12); border: 0; border-radius: var(--r-12); background: var(--chrome-bg); color: var(--chrome-text); font-size: var(--fs-12); line-height: var(--lh-12); text-align: left; cursor: pointer; }
.barra-btn > span { display: flex; flex-direction: column; }
.barra-btn--icone { padding: 0 var(--s-12); }
.barra-btn:disabled { cursor: not-allowed; opacity: 0.4; }
.barra-btn--off { border-style: dashed; color: var(--chrome-muted); cursor: not-allowed; }

.barra-grupo { display: flex; }
.barra-btn--junto { border-radius: var(--r-12) 0 0 var(--r-12); }
.barra-btn--junto-dir { border-left: 0; border-radius: 0 var(--r-12) var(--r-12) 0; }

/* barra no modo Tipo: título e corpo largos, os 3 controles de ritmo estreitos */
.pilulas--tipo { display: grid; grid-template-columns: repeat(2, calc(var(--w-pilula) * 2)) repeat(3, minmax(var(--w-pilula), max-content)); } /* ritmo cresce até caber o valor ("Compacta · 48…16") */
.pilulas--tipo .pilula { width: auto; } /* no Tipo quem manda é a grade */
.pilula-tipo { --pc: var(--chrome-bg); --po: var(--chrome-text); }
.pilula-tipo .pilula-hex { color: var(--chrome-muted); }
/* texto do Tipo nunca corta: nome de fonte longo ou "local ausente" quebram linha e a fileira cresce junto */
.pilula-tipo .pilula-cor { height: 100%; min-height: var(--h-pilula); text-align: left; }
.pilula-tipo .pilula-nome, .pilula-tipo .pilula-hex { white-space: normal; overflow-wrap: anywhere; }

/* seletor de uma pílula */
/* o seletor encosta no topo da barra e, aberto, os dois ficam brancos: uma peça só. A sombra dele sobe e é cortada rente à barra, pra não cair na emenda */
.seletor { position: absolute; z-index: 4; width: var(--w-seletor); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--s-16); padding: var(--s-16); border: 0; border-radius: var(--r-16) var(--r-16) 0 0; background: var(--chrome-surface); box-shadow: var(--shadow-sheet); clip-path: inset(calc(var(--s-48) * -1) calc(var(--s-48) * -1) 0); font-size: var(--fs-12); line-height: var(--lh-12); }
.casca:has(.seletor:not([hidden])) .barra { background: var(--chrome-surface); }
.seletor-cab { display: flex; align-items: center; gap: var(--s-8); }
.seletor-cab strong { font-size: var(--fs-16); line-height: var(--lh-16); }
.fechar { display: flex; padding: var(--s-4); border: 0; border-radius: var(--r-4); background: transparent; color: var(--chrome-muted); cursor: pointer; }
.seletor-cor { display: flex; gap: var(--s-8); align-items: stretch; }
.seletor-cor input[type="color"] { flex: 1 1 0; min-width: 0; height: var(--s-48); padding: 0; border: 0; border-radius: var(--r-8); background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.seletor-cor input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.seletor-cor input[type="color"]::-webkit-color-swatch { border: 0; border-radius: var(--r-8); box-shadow: inset 0 0 0 1px var(--chrome-line); }
.seletor-cor input[type="color"]::-moz-color-swatch { border: 0; border-radius: var(--r-8); }
.seletor-cor input[type="text"] { box-sizing: content-box; width: 7ch; padding: var(--s-8) var(--s-12); border: 1px solid var(--chrome-line); border-radius: var(--r-8); background: var(--chrome-surface); color: var(--chrome-text); font-family: var(--font-mono); font-size: var(--fs-12); line-height: var(--lh-12); text-transform: uppercase; }
.seletor-cor input[aria-invalid="true"] { color: var(--pin-fail); border-color: var(--pin-fail); }
.seletor-pares { display: flex; flex-direction: column; gap: var(--s-8); }
.seletor-par { display: flex; align-items: center; gap: var(--s-8); padding: var(--s-8) var(--s-12); border-radius: var(--r-8); background: var(--chrome-bg); }
.seletor-par--falha { background: var(--pin-fail-soft); }
.seletor-par .selo { flex-basis: var(--s-24); }

/* ── dica (tooltip) ── */
.dica { position: absolute; z-index: 7; max-width: var(--w-dica); padding: var(--s-8) var(--s-12); border-radius: var(--r-8); background: var(--chrome-ink); color: var(--chrome-on-ink); font-size: var(--fs-12); line-height: var(--lh-12); pointer-events: none; }
[data-dica] { cursor: help; }
button[data-dica], .pilula[data-dica] { cursor: pointer; }

/* ── exportar ── */
.modal { width: min(var(--w-modal), calc(100% - var(--s-32))); max-height: calc(100% - var(--s-48)); padding: var(--s-24); border: 0; border-radius: var(--r-16); background: var(--chrome-surface); color: var(--chrome-text); box-shadow: var(--shadow-flutua); font-family: var(--font-ui); }
.modal[open] { display: flex; flex-direction: column; gap: var(--s-16); }
.modal::backdrop { background: var(--chrome-veu); }
.modal-cab { display: flex; align-items: center; gap: var(--s-8); }
.modal-cab strong { font-size: var(--fs-16); line-height: var(--lh-16); }
.modal-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-12); font-size: var(--fs-12); line-height: var(--lh-12); }
.abas { display: flex; gap: var(--s-24); overflow-x: auto; }
.abas button { flex: 0 0 auto; padding: 0 0 var(--s-8); border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--chrome-muted); font-size: var(--fs-16); line-height: var(--lh-16); cursor: pointer; }
.abas button[aria-selected="true"] { border-bottom-color: var(--chrome-text); color: var(--chrome-text); font-weight: 600; }
.codigo { position: relative; min-height: 0; border-radius: var(--r-12); background: var(--chrome-bg); }
.codigo pre { margin: 0; max-height: var(--h-codigo); overflow: auto; padding: var(--s-16) var(--s-24); font-family: var(--font-mono); font-size: var(--fs-12); line-height: var(--lh-12); }
.codigo-copiar { position: absolute; top: var(--s-12); right: var(--s-12); }
.exp-painel { display: flex; flex-direction: column; gap: var(--s-16); min-height: 0; }
[data-exportar] .modal-cab { gap: var(--s-16); }
.menu--esq .menu-lista { left: 0; right: auto; }
.menu-btn--campo { display: flex; align-items: center; justify-content: space-between; gap: var(--s-8); width: calc(var(--s-96) * 2 + var(--s-48)); padding: var(--s-8) var(--s-12); border: 0; border-radius: var(--r-8); background: var(--chrome-bg); color: var(--chrome-text); font-size: var(--fs-12); line-height: var(--lh-12); cursor: pointer; }
.menu-lista--desc [role="option"] { flex-direction: column; align-items: flex-start; gap: 0; }
.a11y-moldura { padding: var(--s-16); border-radius: var(--r-12); background: var(--chrome-bg); }
.a11y-previa { display: block; width: 100%; height: var(--h-codigo); border: 0; border-radius: var(--r-8); background: var(--chrome-surface); box-shadow: var(--shadow-flutua); }
.btn--exp-analise { align-self: flex-start; border-color: transparent; background: var(--chrome-bg); }

/* distribuição de cor: mosaico por variante */
.tela--medir { position: absolute; top: 0; left: -200vw; visibility: hidden; pointer-events: none; }
.dist-nota { margin: 0; font-size: var(--fs-12); line-height: var(--lh-12); }
.mosaicos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-24); }
.mosaico-fig { margin: 0; display: flex; flex-direction: column; gap: var(--s-8); }
.mosaico { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-8); overflow: hidden; box-shadow: inset 0 0 0 1px var(--chrome-line); }
.mosaico-bloco { position: absolute; box-sizing: border-box; padding: var(--s-8); display: flex; flex-direction: column; gap: var(--s-4); overflow: hidden; font-size: var(--fs-12); line-height: var(--lh-12); box-shadow: inset 0 0 0 1px var(--chrome-line); }

/* ── aviso (link copiado) ── */
.aviso { position: absolute; left: 50%; top: calc(var(--s-48) + var(--s-24)); transform: translateX(-50%); padding: var(--s-8) var(--s-16); border-radius: var(--r-8); background: var(--chrome-ink); color: var(--chrome-on-ink); font-size: var(--fs-12); line-height: var(--lh-12); z-index: 6; pointer-events: none; }
.aviso:empty { display: none; }

/* ── 375: header compacto + bottom sheet; A e B empilhadas ── */
@media (max-width: 767px) {
  .topo { flex-wrap: nowrap; gap: var(--s-8); padding: var(--s-8) var(--s-16); }
  .tela-select { font-size: var(--fs-12); line-height: var(--lh-12); padding: var(--s-12) var(--s-8); border: 0; background: transparent; color: var(--chrome-text); cursor: pointer; }
  .placar-mini { font-family: var(--font-mono); font-size: var(--fs-12); line-height: var(--lh-12); white-space: nowrap; }
  .icone { display: flex; padding: var(--s-12); border: 0; background: transparent; color: var(--chrome-text); cursor: pointer; }
  /* a folha flutua sobre o pé: o palco reserva a faixa da folha recolhida, pra nada da tela ficar escondido atrás dela */
  .palco-area, .casca[data-mode="ajustar"] .palco-area { padding: 0 0 var(--h-folha-espiada); }
  .colunas, .casca[data-view="ab"] .colunas, .casca[data-mode="ajustar"] .colunas { grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: 0; }
  .coluna { border: 0; border-radius: 0; }
  .coluna-cab { border-radius: 0; }
  .casca[data-mode="ajustar"] .coluna[data-alvo] { outline: 0; }
  .casca[data-mode="ajustar"] .coluna[data-alvo] .coluna-cab { box-shadow: inset 0 calc(var(--s-4) * -1) 0 var(--chrome-accent); }
  .folha { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; background: var(--chrome-surface); border-radius: var(--r-16) var(--r-16) 0 0; box-shadow: var(--shadow-sheet); padding: 0 var(--s-16) var(--s-16); display: flex; flex-direction: column; gap: var(--s-12); transition: translate var(--dur-folha) var(--curva-move); }
  /* recolhida: só a alça e as abas de modo ficam à vista (a altura vem de --h-folha-espiada); arrastando, segue o dedo sem transição */
  .casca[data-folha="espiada"] .folha { translate: 0 calc(100% - var(--h-folha-espiada)); }
  .folha[data-arrasto] { transition: none; }
  /* no modo Tipo a folha cresce (lista de fontes): teto de 3/4 da tela, rola por dentro, alça e abas de modo grudadas no topo */
  .folha { max-height: 75%; overflow-y: auto; overscroll-behavior: contain; }
  .alca { position: sticky; top: 0; z-index: 2; flex: none; display: flex; justify-content: center; height: calc(var(--s-24) + var(--s-12)); margin: 0 calc(var(--s-16) * -1) calc(var(--s-12) * -1); padding: var(--s-12) 0 0; border: 0; background: var(--chrome-surface); cursor: pointer; touch-action: none; } /* 24 de alça + os 12 do vão, que ela engole: a aba gruda logo abaixo */
  .alca span { width: 40px; height: var(--s-4); border-radius: 2px; background: var(--chrome-line); transition: background-color var(--dur-curta) var(--curva-entra); }
  .alca:hover span, .alca:active span { background: var(--chrome-muted); }
  .folha > .seg--abas { position: sticky; top: calc(var(--s-24) + var(--s-12)); z-index: 2; flex: none; }
  .folha-linha { display: flex; align-items: center; gap: var(--s-12); font-size: var(--fs-12); line-height: var(--lh-12); }
  .folha .barra-btn { height: auto; padding: var(--s-8); margin-left: auto; }
  .folha .folha-dist { flex: 1 1 auto; justify-content: center; margin-left: 0; padding: var(--s-12); font-size: var(--fs-16); line-height: var(--lh-16); font-weight: 600; }
  /* Distribuição no celular: o seletor Por papel / Por família desce para a 2ª linha e os mosaicos A e B empilham */
  [data-distribuicao] .modal-cab { flex-wrap: wrap; }
  [data-exportar] .modal-cab { flex-wrap: wrap; }
  [data-exportar] .modal-cab .seg { order: 1; flex-basis: 100%; }
  [data-exportar] .modal-cab .seg button { flex: 1 1 0; }
  [data-distribuicao] .modal-cab .seg { order: 1; flex-basis: 100%; }
  [data-distribuicao] .modal-cab .seg button { flex: 1 1 0; }
  .mosaicos { grid-template-columns: minmax(0, 1fr); }
  .folha-papeis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-8); font-size: var(--fs-12); line-height: var(--lh-12); }
  .folha-papel { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
  .folha-papel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .folha-papel input[type="color"] { width: 100%; height: var(--s-48); padding: 0; border: 0; border-radius: var(--r-8); background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
  .folha-papel input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
  .folha-papel input[type="color"]::-webkit-color-swatch { border: 0; border-radius: var(--r-8); box-shadow: inset 0 0 0 1px var(--chrome-line); }
  .folha-papel input[type="color"]::-moz-color-swatch { border: 0; border-radius: var(--r-8); }
  .linha-falha { display: flex; gap: var(--s-12); align-items: center; font-size: var(--fs-12); line-height: var(--lh-12); }
  .linha-falha .cresce { min-width: 0; }
  [data-falhas-mob] { gap: var(--s-8); }
  .seg--abas { display: flex; } /* cada aba do tamanho do texto + a sobra dividida: em colunas iguais "Acessibilidade" não cabia (117 em 109px) */
  .seg--abas button { flex: 1 1 auto; }
  .folha .visao-ctl .menu-btn { background: var(--chrome-bg); } /* sem contorno: na folha branca o botão se separa pelo fundo */
  .seg--abas button { font-size: var(--fs-16); line-height: var(--lh-16); padding: var(--s-12); }
}

/* ── seletor de tipo (popover no desktop, folha no celular) ── */
.tipo-busca { width: 100%; box-sizing: border-box; padding: var(--s-8) var(--s-12); border: 1px solid var(--chrome-line); border-radius: var(--r-8); background: var(--chrome-surface); color: var(--chrome-text); font: inherit; font-size: var(--fs-16); line-height: var(--lh-16); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.chip { padding: var(--s-4) var(--s-12); border: 1px solid var(--chrome-line); border-radius: var(--r-16); background: var(--chrome-surface); color: var(--chrome-muted); font-size: var(--fs-12); line-height: var(--lh-12); cursor: pointer; }
.chip[aria-pressed="true"] { border-color: var(--chrome-ink); background: var(--chrome-ink); color: var(--chrome-on-ink); }
.fontes { display: flex; flex-direction: column; gap: var(--s-4); max-height: var(--h-lista-fontes); overflow-y: auto; overscroll-behavior: contain; }
.fonte { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-8); padding: var(--s-8) var(--s-12); border: 0; border-radius: var(--r-8); background: transparent; color: var(--chrome-text); font-size: var(--fs-16); line-height: var(--lh-16); text-align: left; cursor: pointer; }
.fonte:hover, .fonte:focus-visible { background: var(--chrome-bg); }
.fonte[aria-selected="true"] { background: var(--chrome-bg); box-shadow: inset 0 0 0 1px var(--chrome-accent); }
.fonte[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.fonte-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fonte small { flex: none; font-family: var(--font-ui); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--chrome-muted); }
.tipo-nota { margin: 0; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--chrome-muted); }
.tipo-rot { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 600; color: var(--chrome-muted); }
.tipo-bloco { display: flex; flex-direction: column; gap: var(--s-8); }
.tipo-bloco--pe { padding-top: var(--s-12); border-top: 1px solid var(--chrome-line); }
.upload { display: flex; align-items: center; justify-content: center; padding: var(--s-16); border: 1px dashed var(--chrome-line); border-radius: var(--r-8); color: var(--chrome-text); font-size: var(--fs-16); line-height: var(--lh-16); cursor: pointer; }
.upload:focus-within { outline: 2px solid var(--chrome-accent); outline-offset: 2px; }
.upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tipo-regua { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4) var(--s-16); margin: 0; font-family: var(--font-mono); font-size: var(--fs-12); line-height: var(--lh-12); }
.tipo-regua dt { color: var(--chrome-muted); }
.tipo-regua dd { margin: 0; }
.folha-tipo { display: flex; flex-direction: column; gap: var(--s-12); }
.folha-tipo .seg button { padding: var(--s-8) var(--s-4); }

/* ── colar cores ou tokens ── */
.importar-texto { width: 100%; box-sizing: border-box; min-height: calc(var(--s-96) + var(--s-48)); resize: vertical; padding: var(--s-12); border: 0; border-radius: var(--r-8); background: var(--chrome-bg); color: var(--chrome-text); font-family: var(--font-mono); font-size: var(--fs-12); line-height: var(--lh-12); }
/* desktop: painel sobre o botão Colar, sem véu (no celular segue modal) */
.modal--pop:not(:modal) { position: absolute; inset: auto; z-index: 5; width: calc(var(--w-seletor) + var(--s-64)); margin: 0; overflow-y: auto; overscroll-behavior: contain; }
.modal--pop:not(:modal) .importar-texto { min-height: var(--s-96); }
.importar-previa { display: flex; flex-direction: column; gap: var(--s-8); }
.importar-previa:empty { display: none; }
.importar-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-12); font-size: var(--fs-12); line-height: var(--lh-12); }
.importar-linha .tipo-rot { min-width: var(--s-96); }
.importar-cores { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: var(--s-4); }
.importar-cor { width: var(--s-24); height: var(--s-24); border-radius: var(--r-4); background: var(--c); }


/* ── moodboard (sem contorno: separa por fundo) ── */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mood { display: flex; flex-wrap: wrap; gap: var(--s-24); min-height: 0; overflow-y: auto; }
.mood-imgs { flex: 1 1 calc(var(--s-96) * 3); min-width: 0; display: flex; flex-direction: column; gap: var(--s-12); }
.mood-solta { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-4); padding: var(--s-24) var(--s-16); border-radius: var(--r-12); background: var(--chrome-bg); text-align: center; font-size: var(--fs-16); line-height: var(--lh-16); cursor: pointer; }
.mood-solta[hidden] { display: none; }
.mood-solta:focus-within, .mood-solta[data-sobre] { outline: 2px solid var(--chrome-accent); outline-offset: 2px; }
.mood-solta input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mood-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-12); }
.mood-grade:empty { display: none; }
.mood-img { position: relative; margin: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.mood-img img { width: 100%; height: var(--s-96); object-fit: cover; border-radius: var(--r-8); }
.mood-tirar { position: absolute; top: var(--s-4); right: var(--s-4); display: flex; padding: var(--s-4); border: 0; border-radius: var(--r-4); background: var(--chrome-surface); color: var(--chrome-text); cursor: pointer; }
.mood-cores { flex: 1 1 calc(var(--s-96) * 4); min-width: 0; display: flex; flex-direction: column; gap: var(--s-16); padding: var(--s-16); border-radius: var(--r-12); background: var(--chrome-bg); }
.mood-extraidas { display: flex; flex-wrap: wrap; gap: var(--s-12); }
.mood-extraidas:empty::before { content: 'Suba uma imagem para ver a paleta.'; color: var(--chrome-muted); font-size: var(--fs-12); line-height: var(--lh-12); }
.mood-cor { display: flex; flex-direction: column; gap: var(--s-4); font-size: var(--fs-12); line-height: var(--lh-12); }
.mood-amostra { display: block; width: var(--s-32); height: var(--s-32); border-radius: var(--r-8); background: var(--c); }
.mood-papeis { display: flex; flex-direction: column; gap: var(--s-8); }
.mood-papel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); min-width: 0; margin: 0; padding: 0; border: 0; }
.mood-papel legend { float: left; width: var(--s-96); padding: 0; }
.mood-opcoes { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.mood-op { position: relative; display: flex; border-radius: var(--r-8); cursor: pointer; }
.mood-op:first-child { margin-right: var(--s-8); } /* o 1º mantém a cor atual */
.mood-op input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mood-op:has(input:checked) { box-shadow: 0 0 0 2px var(--chrome-bg), 0 0 0 4px var(--chrome-accent); }
.mood-op:has(input:focus-visible) { outline: 2px solid var(--chrome-accent); outline-offset: var(--s-4); }
.mood-mostrar { display: flex; align-items: center; gap: var(--s-8); font-size: var(--fs-16); line-height: var(--lh-16); }

/* ── movimento e estados (proposta B do canvas de movimento, 2026-10-08): só a casca anima; o palco e as telas testadas nunca ── */

/* indicador do selecionado: um .ind por grupo [data-grupo], posto pelo indicadores() (app.js) atrás do botão ativo; desliza entre as opções */
[data-ind] { position: relative; }
[data-ind] > button { position: relative; z-index: 1; }
.ind { position: absolute; top: 0; left: 0; width: var(--ind-w, 0); height: var(--ind-h, 0); translate: var(--ind-x, 0) var(--ind-y, 0); border-radius: var(--r-4); background: var(--chrome-surface); pointer-events: none; }
[data-ind-anima] > .ind { transition: translate var(--dur-curta) var(--curva-entra), width var(--dur-curta) var(--curva-entra); }
[data-ind] > button[aria-pressed="true"], [data-ind] > button[aria-selected="true"] { background: transparent; }
.seg--modo > .ind { top: auto; bottom: 0; height: 2px; translate: var(--ind-x, 0) 0; border-radius: 0; background: var(--chrome-text); }
.seg--modo[data-ind] > button[aria-pressed="true"] { border-bottom-color: transparent; }
.seg--alvo > .ind { background: var(--chrome-accent); }
.telas-lista > .ind { border-radius: var(--r-12) var(--r-12) 0 0; }

/* hover (só com mouse) = camada --chrome-sobre; pressionado = --chrome-aperto, entra em --dur-toque e solta em --dur-curta */
[data-ind] > button, .btn, .menu-btn, .barra-btn, .menu-lista [role="option"] { transition: color var(--dur-curta) var(--curva-entra), background-color var(--dur-curta) var(--curva-entra), box-shadow var(--dur-curta) var(--curva-entra), opacity var(--dur-curta) var(--curva-entra); }
.pilula { transition: translate var(--dur-curta) var(--curva-entra); }
.pilula-cor { transition: box-shadow var(--dur-curta) var(--curva-entra); }
@media (hover: hover) {
  [data-ind]:not(.seg--modo) > button:not([aria-pressed="true"], [aria-selected="true"], :disabled):hover,
  .btn--dist:hover, .menu-btn:hover, .barra-btn:not(:disabled, .barra-btn--off):hover { color: var(--chrome-text); box-shadow: inset 0 0 0 999px var(--chrome-sobre); }
  .topo .btn--accent:hover { box-shadow: inset 0 0 0 999px var(--chrome-aperto); }
  .pilula:hover { translate: 0 var(--sobe-pilula); }
}
[data-ind]:not(.seg--modo) > button:not([aria-pressed="true"], [aria-selected="true"], :disabled):active,
.btn:active, .menu-btn:active, .barra-btn:not(:disabled, .barra-btn--off):active, .menu-lista [role="option"]:not([aria-selected="true"]):active { box-shadow: inset 0 0 0 999px var(--chrome-aperto); transition-duration: var(--dur-toque); }
.topo .btn--accent:active { box-shadow: inset 0 0 0 999px var(--chrome-aperto), inset 0 0 0 999px var(--chrome-aperto); transition-duration: var(--dur-toque); } /* no accent uma camada só quase não aparece */
.seg--modo > button:not([aria-pressed="true"]):active { opacity: 0.72; transition-duration: var(--dur-toque); }
.pilula:active { translate: 0 0; transition-duration: var(--dur-toque); }
.pilula-cor:active { box-shadow: inset 0 0 0 999px var(--chrome-aperto); transition-duration: var(--dur-toque); }
.pilula-cor[aria-expanded="true"]:active { box-shadow: inset 0 0 0 999px var(--chrome-aperto), 0 0 0 2px var(--chrome-surface), 0 0 0 4px var(--chrome-accent); }
/* foco: o anel não vaza pro vizinho do segmentado nem pro palco (a aba encosta nele) */
[data-ind]:not(.seg--modo) > button:focus-visible { outline-offset: 0; }
.telas-lista > button:focus-visible { outline-offset: -2px; }

/* menus: a seta gira e a lista nasce do botão */
.menu-btn svg { transition: transform var(--dur-curta) var(--curva-entra); }
.menu-lista { transition: opacity var(--dur-curta) var(--curva-entra), translate var(--dur-curta) var(--curva-entra); }
@starting-style { .menu-lista { opacity: 0; translate: 0 calc(var(--s-4) * -1); } }
@starting-style { .menu--cima .menu-lista { opacity: 0; translate: 0 var(--s-4); } }

/* troca de modo (desktop): document.startViewTransition no escolher(); os nomes só existem durante a transição (html.vt) */
html.vt .topo { view-transition-name: topo; }
html.vt .placar { view-transition-name: placar; }
html.vt .telas-abas { view-transition-name: abas; }
html.vt .palco { view-transition-name: palco; }
html.vt .auditor { view-transition-name: auditor; }
html.vt .barra { view-transition-name: barra; }
::view-transition { pointer-events: none; } /* o clique atravessa pro DOM novo, que já está no lugar */
::view-transition-group(*) { animation-duration: var(--dur-painel); animation-timing-function: var(--curva-move); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-curta); }
/* o topo não muda entre modos: sem crossfade (o sublinhado desliza no DOM vivo) e por cima, pro placar descer de trás dele */
::view-transition-group(topo) { z-index: 1; }
::view-transition-old(topo) { animation: none; opacity: 0; }
::view-transition-new(topo) { animation: none; }
/* palco e linha das abas mudam de tamanho: o retrato novo entra de uma vez, recortado e nunca escalado (crossfade dava dupla
   exposição, porque as colunas se reorganizam com a largura). O grupo do palco tem o branco do palco: a borda do painel é que desliza */
::view-transition-group(palco), ::view-transition-group(abas) { overflow: clip; }
::view-transition-group(palco) { background: var(--chrome-surface); border-radius: var(--r-12) var(--r-12) 0 0; }
::view-transition-old(palco), ::view-transition-new(palco), ::view-transition-old(abas), ::view-transition-new(abas) { inset: 0 auto auto 0; width: auto; height: auto; object-fit: none; animation: none; }
::view-transition-old(palco), ::view-transition-old(abas) { opacity: 0; }
/* cada painel pela sua borda: sai em --dur-curta, entra em --dur-painel um pouco depois */
/* (entrada com keyframes próprios: o reverse inverteria a curva também) */
@keyframes vt-pe { to { translate: 0 calc(100% + var(--s-24)); } }
@keyframes vt-do-pe { from { translate: 0 calc(100% + var(--s-24)); } }
@keyframes vt-direita { to { translate: 100% 0; } }
@keyframes vt-da-direita { from { translate: 100% 0; } }
@keyframes vt-cima { to { translate: 0 calc(-100% - var(--s-12)); } }
@keyframes vt-de-cima { from { translate: 0 calc(-100% - var(--s-12)); } }
::view-transition-old(barra):only-child { animation: vt-pe var(--dur-curta) var(--curva-sai) both; }
::view-transition-new(barra):only-child { animation: vt-do-pe var(--dur-painel) var(--curva-entra) calc(var(--dur-curta) / 2) both; }
::view-transition-old(placar):only-child { animation: vt-cima var(--dur-curta) var(--curva-sai) both; }
::view-transition-new(placar):only-child { animation: vt-de-cima var(--dur-painel) var(--curva-entra) calc(var(--dur-curta) / 4) both; }
::view-transition-old(auditor):only-child { animation: vt-direita var(--dur-curta) var(--curva-sai) both; }
::view-transition-new(auditor):only-child { animation: vt-da-direita var(--dur-painel) var(--curva-entra) calc(var(--dur-curta) / 2) both; }

/* reduzir movimento: o JS nem chama a View Transition; aqui some o que desliza (as mudanças de cor ficam) */
@media (prefers-reduced-motion: reduce) {
  .ind, .folha, .pilula, .menu-lista, .menu-btn svg { transition: none !important; }
  .pilula:hover { translate: none; }
}