/* brztt.css — a moldura comum da casa (tokens, foco, voltar, movimento). Regras em DESIGN.md na raiz do repositório.
   Cada página liga este arquivo antes do próprio <style> e só redefine --accent (a cor da área). */
/* Fontes da casa, servidas daqui (site/fonts/, latin em woff2), uma por papel (DESIGN.md, Tipografia): DM Sans para título e
   interface, Source Serif 4 para texto corrido, JetBrains Mono para rótulo, data e dado. Variáveis: um arquivo cobre todos os pesos. */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url(/fonts/dm-sans-latin.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 100 1000; font-display: swap; src: url(/fonts/dm-sans-italic-latin.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url(/fonts/jetbrains-mono-latin.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap; src: url(/fonts/source-serif-4-latin.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 200 900; font-display: swap; src: url(/fonts/source-serif-4-italic-latin.woff2) format("woff2"); }

:root {
  --bg: #ffffff;
  --ink: #121212;
  --muted: #6a6762;   /* texto secundário: 5,6:1 sobre branco */
  --faint: #7a7671;   /* texto fraco em 12 px: 4,5:1 sobre branco */
  --line: #e7e5e2;
  --sheet: #efedea;
  --hot: #ff7a1a;     /* laranja da casa: só o ponto, a seta e o acendimento; nunca texto sozinho */
  --laranja: var(--hot);
  --hover: rgba(18, 18, 18, .06);
  --accent: var(--ink);
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --gutter: clamp(16px, 4vw, 40px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121211; --ink: #f1efec; --muted: #a29e98; --faint: #8d8982;
    --line: #2a2927; --sheet: #1d1c1b; --hover: rgba(255, 255, 255, .08); color-scheme: dark;
  }
}

* { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Foco de teclado: sempre em tinta, nunca no laranja (2,6:1 não se vê). */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Voltar ao nível acima (regra da casa, 16/10/2026): canto de cima à esquerda, seta laranja e a palavra em tinta.
   Marcação: <a class="voltar" href="/vinho"><span class="volta" aria-hidden="true"></span>vinho</a> */
.voltar {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 12px/1 var(--mono); color: var(--ink); text-decoration: none;
  padding: 8px 10px; margin: -8px 0 -8px -10px; border-radius: 8px;
  transition: background-color .2s, color .2s;
}
.voltar:hover { background: var(--hover); }
.volta { position: relative; display: inline-block; width: 12px; height: 8px; }
.volta::after { content: ""; position: absolute; right: 0; top: 50%; width: 100%; height: 1.5px; margin-top: -0.75px; background: var(--hot); transition: width .28s ease; }
.volta::before { content: ""; position: absolute; left: 1.5px; top: 50%; width: 6px; height: 6px; border-left: 1.5px solid var(--hot); border-bottom: 1.5px solid var(--hot); transform: translateY(-50%) rotate(45deg); transition: left .28s ease; }
.voltar:hover .volta::after, .voltar:focus-visible .volta::after, .nm:hover .volta::after, .nm:focus-visible .volta::after { width: 22px; }
.voltar:hover .volta::before, .voltar:focus-visible .volta::before, .nm:hover .volta::before, .nm:focus-visible .volta::before { left: -8.5px; }
@media print { .voltar { display: none; } }
/* Canto da moldura: o voltar e, ao lado, o idioma da navegação (ADR 0011: seletor em toda página; cada link leva à mesma
   página naquela língua, ou à área, ou à frente; ferramentas/idiomas.py). Marcação: <span class="canto"><a class="voltar">…</a><nav class="idiomas">…</nav></span>
   O idioma em que a página está leva aria-current. */
.canto { display: inline-flex; align-items: center; gap: 14px; }
.idiomas { display: inline-flex; gap: 2px; font: 500 12px/1 var(--mono); }
.idiomas a { color: var(--faint); text-decoration: none; padding: 8px 6px; margin: -8px 0; border-radius: 8px; transition: background-color .2s, color .2s; }
.idiomas a:hover { color: var(--ink); background: var(--hover); }
.idiomas a[aria-current] { color: var(--ink); }
@media print { .canto, .idiomas { display: none; } }
/* Etiqueta ao lado de um link cujo destino só existe em português, nos índices em outra língua (ADR 0011). */
.so-pt { display: inline-block; margin-left: 8px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; font: 500 12px/1.2 var(--mono); letter-spacing: 0.02em; color: var(--muted); white-space: nowrap; vertical-align: 0.12em; }
.go .so-pt { margin-left: 0; }

/* Movimento: quem pediu menos movimento no sistema não vê transição nem animação em página alguma. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Menu lateral e cabeçalho único (ADR 0013; js/menu.js monta, DESIGN.md descreve). Medidas do aihero.dev/skills: linhas de 33px,
   recuo por nível de 10, 28 e 46px, texto apagado que acende em tinta no caminho até a página atual, e a página atual com fundo.
   O ponto da área fica num tom claro da cor dela e só ganha a cor cheia na área atual, ao passar o mouse e no trilho recolhido. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: menu-surge .22s ease both; mix-blend-mode: normal; }
::view-transition-group(menu-side), ::view-transition-group(menu-top),
::view-transition-new(menu-side), ::view-transition-new(menu-top) { animation: none; }
/* A imagem velha some quando há par; o Chrome não aplica :not(:only-child) aqui, então ela some sempre e o :only-child,
   abaixo, a devolve quando a página nova não tem menu (sem isso, a faixa velha esticada aparecia sob a nova: linha dupla). */
::view-transition-old(menu-side), ::view-transition-old(menu-top) { animation: none; opacity: 0; }
/* Da frente para uma área o menu entra pela esquerda; de volta, sai por ela. */
::view-transition-new(menu-side):only-child { animation: menu-side-entra .5s cubic-bezier(.2, .7, .2, 1) both; }
::view-transition-old(menu-side):only-child { opacity: 1; animation: menu-side-sai .3s ease both; }
::view-transition-new(menu-top):only-child { animation: menu-surge .3s ease both; }
::view-transition-old(menu-top):only-child { opacity: 1; animation: menu-some .2s ease both; }
@keyframes menu-surge { from { opacity: 0; } }
@keyframes menu-some { to { opacity: 0; } }
@keyframes menu-side-entra { from { transform: translateX(-100%); } }
@keyframes menu-side-sai { to { transform: translateX(-100%); } }
/* Da frente para uma área, o menu abre inteiro e o conteúdo da frente anda para a direita a largura dele, caindo onde começa o
   da área, que aparece por cima; de volta, o da frente vem da direita, da largura que o menu tinha (recolhido, a do trilho).
   js/menu.js e a frente marcam o tipo da troca. */
@media (min-width: 761px) {
  html:active-view-transition-type(da-frente)::view-transition-old(root) { animation: menu-empurra .5s var(--menu-ease) both; }
  html:active-view-transition-type(da-frente)::view-transition-new(root) { animation: menu-surge .25s ease .3s both; }
  html:active-view-transition-type(para-frente)::view-transition-old(root) { animation: menu-some .2s ease both; }
  html:active-view-transition-type(para-frente)::view-transition-new(root) { animation: menu-recua .5s var(--menu-ease) both; }
  html:active-view-transition-type(menu-recolhido) { --menu-volta: var(--menu-rail); }
}
@keyframes menu-empurra { to { transform: translateX(var(--menu-w)); } }
@keyframes menu-recua { from { transform: translateX(var(--menu-volta, var(--menu-w))); } }
/* O nome fica parado enquanto o menu abre por baixo dele: só a imagem nova, sem cruzar com a velha (na frente, o ponto pode
   estar aberto em marca-texto). O fio acompanha o menu.
   Nome e fio ficam acima dos outros grupos: na volta, a faixa branca da frente cobria o nome. */
::view-transition-group(menu-marca), ::view-transition-new(menu-marca) { animation: none; }
::view-transition-old(menu-marca) { animation: none; opacity: 0; }
::view-transition-group(menu-marca), ::view-transition-group(menu-fio) { z-index: 10; }
::view-transition-group(menu-fio) { animation-duration: .5s; animation-timing-function: var(--menu-ease); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* --abre: do fio do cabeçalho ao primeiro rótulo de seção; --abre-lista: ao começo da lista, abaixo
   desse rótulo (26 px). A frente e os índices das áreas leem os dois, para o conteúdo começar na mesma altura em toda a casa.
   --menu-top é a altura da faixa e --marca o tamanho do brztt., iguais na frente e nas áreas. */
:root { --menu-top: 72px; --marca: 30px; --menu-w: 272px; --menu-rail: 56px; --menu-ease: cubic-bezier(.2, .7, .2, 1); --abre: 40px; --abre-lista: calc(var(--abre) + 26px); }
@media (max-width: 760px) { :root { --menu-top: 60px; --marca: 26px; } }
/* Fio de baixo da faixa: elemento próprio, para acompanhar o menu na transição em vez de saltar com a faixa. */
.menu-fio { view-transition-name: menu-fio; position: fixed; z-index: 9001; left: 0; right: 0; top: calc(var(--menu-top) - 1px); height: 1px;
  background: var(--line); pointer-events: none; }
/* O cabeçalho antigo dos índices só guarda o voltar e o idioma, que o menu substitui: com menu, não ocupa altura. */
html.menu .hd:has(> .canto:only-child) { display: none; }
/* A faixa fixa cobre o alto: o que recebe foco ou é alvo de âncora para abaixo dela. A frente repete a regra no próprio estilo. */
html.menu { scroll-padding-top: var(--menu-top); }
html.menu body { margin-top: 0; padding-top: var(--menu-top); margin-left: var(--menu-w); transition: margin-left .32s var(--menu-ease); }
html.menu.menu-rec body { margin-left: var(--menu-rail); }
html.menu-parado body, html.menu-parado .menu-side, html.menu-parado .menu-side * { transition: none !important; }
html.menu .canto { display: none !important; }
.menu-top { view-transition-name: menu-top; position: fixed; z-index: 9000; inset: 0 0 auto 0; height: var(--menu-top); background: var(--bg);
  display: flex; align-items: center; gap: 14px; padding: 0 18px 0 20px;
  font: 400 12px var(--mono); color: var(--ink); }
/* O nome igual ao da frente: o ponto de .17em pousa no pé da letra. */
.menu-marca { display: inline-flex; align-items: flex-end; height: 1em; font: 800 var(--marca)/1 var(--sans); letter-spacing: -.05em; color: inherit; text-decoration: none; white-space: nowrap; }
.menu-marca i { flex: none; width: .17em; height: .17em; margin: 0 0 .12em .03em; border-radius: 99em; background: var(--hot); }
.menu-trilha { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; }
.menu-trilha a { color: var(--muted); text-decoration: none; transition: color .2s; }
.menu-trilha a:hover { color: var(--ink); }
.menu-sep { color: var(--faint); }
.menu-trilha b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.menu-ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.menu-esp { flex: 1; }
/* Idioma no pé do menu (ADR 0016): os três na linha, no tamanho dos outros endereços; recolhido, some com os rótulos. */
.menu-side nav.idiomas { position: static !important; display: flex !important; justify-self: stretch; gap: 2px; padding: 0 4px; margin: 0; font: 500 12px/1 var(--mono); transition: opacity .2s .08s; }
.menu-side nav.idiomas a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 6px; margin: 0; border-radius: 6px; color: var(--faint); text-decoration: none; }
.menu-side nav.idiomas a:hover { color: var(--ink); background: var(--hover); }
.menu-side nav.idiomas a[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hot); text-underline-offset: 6px; }
html.menu-rec .menu-side nav.idiomas { opacity: 0; pointer-events: none; transition-delay: 0s; }
.menu-cel { display: none; }
.menu-side { view-transition-name: menu-side; position: fixed; z-index: 8999; top: var(--menu-top); bottom: 0; left: 0; width: var(--menu-w);
  display: flex; flex-direction: column; background: transparent; border-right: 1px solid var(--line); overflow: hidden auto; padding: 4px 8px 20px;
  font: 400 13.5px/1.3 var(--sans); transition: width .32s var(--menu-ease);
  scrollbar-width: none; }
.menu-side::-webkit-scrollbar { display: none; }
.menu-side > * { flex: none; }
.menu-grupo { font: 500 12px var(--mono); color: var(--faint); padding: 20px 10px 8px; white-space: nowrap; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 33px; padding: 7px 10px; border-radius: 6px;
  border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--muted); text-decoration: none; white-space: nowrap;
  transition: background-color .2s, color .2s; }
.menu-item:hover { background: var(--hover); color: var(--ink); }
.menu-item.menu-na { color: var(--ink); }
.menu-item[aria-current="page"] { background: var(--hover); font-weight: 500; color: var(--ink); }
.menu-item:has(> .menu-ponto) { font-size: 15px; font-weight: 400; }
.menu-item:not(.menu-breve):has(> .menu-ponto) { color: var(--faint); }
.menu-item:not(.menu-breve):is(:hover, .menu-na):has(> .menu-ponto) { color: var(--ink); }
.menu-item.menu-na:has(> .menu-ponto), .menu-item[aria-current="page"]:has(> .menu-ponto) { font-weight: 600; }
/* Ao passar o mouse, a palavra já fica como ficará depois do clique: tinta e o mesmo peso da página atual (endereços de fora não têm estado atual). */
.menu-side a.menu-item:not([target], .menu-breve):hover { font-weight: 500; }
.menu-side a.menu-item:not([target], .menu-breve):hover:has(> .menu-ponto) { font-weight: 600; }
.menu-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.menu-item .menu-ponto { margin: 0 3.5px; background: color-mix(in srgb, var(--c) 30%, var(--bg)); transition: background-color .25s, transform .3s var(--menu-ease); }
.menu-item:is(.menu-na, :hover) .menu-ponto, html.menu-rec .menu-item .menu-ponto { background: var(--c); }
.menu-item:hover .menu-ponto { transform: scale(1.25); }
.menu-breve { cursor: default; }
.menu-breve:hover { background: none; color: var(--muted); }
.menu-breve:hover .menu-ponto { background: color-mix(in srgb, var(--c) 30%, var(--bg)); transform: none; }
html.menu-rec .menu-breve .menu-ponto { background: var(--c); }
.menu-breve small { font: 400 12px var(--mono); }
.menu-alterna { margin-bottom: 6px; }
.menu-alterna svg { width: 16px; height: 16px; flex: none; transition: transform .32s var(--menu-ease); }
html.menu-rec .menu-alterna svg { transform: scaleX(-1); }
.menu-linha { position: relative; }
.menu-linha > .menu-item { padding-right: 38px; }
.menu-abre { position: absolute; right: 6px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 26px; height: 26px; border: 0; background: none;
  cursor: pointer; color: var(--faint); border-radius: 6px; }
.menu-abre:hover { color: var(--ink); background: var(--hover); }
.menu-abre svg, .menu-div svg { width: 14px; height: 14px; flex: none; transition: transform .28s var(--menu-ease); }
.menu-abre[aria-expanded="true"] svg, .menu-div[aria-expanded="true"] svg { transform: rotate(90deg); }
.menu-div svg { color: var(--faint); }
/* Divisões das subáreas (degustações, textos, guias, fichas): rótulo em mono, como os grupos (DESIGN.md, Tipografia). */
.menu-div { color: var(--faint); }
.menu-div .menu-nome { font: 400 12px var(--mono); }
.menu-sub, .menu-dsub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--menu-ease), opacity .25s; }
.menu-sub { opacity: 0; }
.menu-sub.aberta, .menu-dsub.aberta { grid-template-rows: 1fr; opacity: 1; }
.menu-sub > div, .menu-dsub > div { overflow: hidden; min-height: 0; }
.menu-sub > div > div { padding: 1px 0 4px; }
.menu-sub .menu-item { min-height: 32px; font-size: 13px; padding: 7px 8px 7px 28px; }
.menu-sub .menu-dsub .menu-item { padding-left: 46px; }
.menu-sub .menu-div[aria-expanded="true"] { color: var(--muted); }
.menu-pe { margin-top: auto; padding-top: 28px; }
.menu-pe .menu-grupo { border-top: 1px solid var(--line); padding-top: 14px; }
.menu-pe .menu-item { min-height: 32px; font-size: 13px; }
.menu-seta { display: grid; color: var(--muted); }
.menu-seta svg, .menu-ico { width: 16px; height: 16px; flex: none; }
.menu-seta svg { width: 14px; height: 14px; }
.menu-troca { display: grid; flex: 1; min-width: 0; }
.menu-troca > span { grid-area: 1 / 1; overflow: hidden; text-overflow: ellipsis; transition: opacity .2s, transform .25s var(--menu-ease); }
.menu-troca > span + span { opacity: 0; transform: translateY(4px); font: 400 12px var(--mono); }
.menu-pe .menu-item:is(:hover, :focus-visible) .menu-troca > span:first-child { opacity: 0; transform: translateY(-4px); }
.menu-pe .menu-item:is(:hover, :focus-visible) .menu-troca > span + span { opacity: 1; transform: none; }
.menu-side :is(.menu-nome, .menu-abre, small, .menu-seta, .menu-grupo, .menu-troca, kbd) { transition: opacity .2s .08s; }
html.menu-rec .menu-side { width: var(--menu-rail); }
html.menu-rec .menu-side :is(.menu-nome, .menu-abre, small, .menu-seta, .menu-grupo, .menu-troca, kbd) { opacity: 0; pointer-events: none; transition-delay: 0s; }
html.menu-rec .menu-side .menu-sub { grid-template-rows: 0fr; opacity: 0; }
.menu-veu { display: none; }
/* Nome e busca dentro do menu (ADR 0015). No computador, "brztt." encabeça o menu com a lupa e o recolher à direita; recolhido,
   vira "b." e, ao passar o mouse, dá lugar ao botão de abrir, com o cursor de arrastar para os lados. A faixa de cima fica com
   o caminho (o idioma desceu para o pé do menu, ADR 0016). No celular o nome segue na faixa de cima e a busca é a linha "buscar" da gaveta. */
.menu-cab { display: none; }
.menu-busca kbd { margin-left: auto; font: 400 12px var(--mono); color: var(--faint); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
@media (min-width: 761px) {
  html.menu .menu-side { top: 0; padding-top: 0; }
  :is(.menu-top, html.menu .menu-fio) { left: var(--menu-w); transition: left .32s var(--menu-ease); }
  html.menu-rec :is(.menu-top, .menu-fio) { left: var(--menu-rail); }
  html.menu-parado :is(.menu-top, .menu-fio) { transition: none !important; }
  /* O nome fica no mesmo lugar na frente e nas áreas (x 18, no meio da faixa) e não se mexe na troca entre elas. */
  :is(.hd .nm, .menu-cab .menu-marca) { view-transition-name: menu-marca; }
  :is(.menu-top > .menu-marca, .menu-trilha > .menu-sep:first-child) { display: none; }
  .menu-cab { display: flex; position: relative; align-items: center; gap: 2px; height: var(--menu-top); margin: 0 0 6px; padding-left: 10px; }
  .menu-cab .menu-marca { flex: 1; min-width: 0; overflow: hidden; transition: opacity .2s .08s; }
  .menu-cab .menu-item { width: auto; min-height: 0; margin: 0; flex: none; padding: 7px 9px; transition: opacity .2s, background-color .2s, color .2s; }
  .menu-cab .menu-item svg { width: 16px; height: 16px; }
  .menu-rztt { display: inline-block; vertical-align: top; overflow: hidden; max-width: 3em; transition: max-width .32s var(--menu-ease), opacity .2s; }
  html:not(.menu-rec) .menu-side > .menu-busca { display: none; }
  html.menu-rec .menu-cab .menu-lupa { display: none; }
  html.menu-rec .menu-rztt { max-width: 0; opacity: 0; }
  html.menu-rec .menu-cab .menu-alterna { position: absolute; left: 50%; top: 50%; translate: -50% -50%; opacity: 0; }
  html.menu-rec .menu-cab:is(:hover, :has(:focus-visible)) .menu-alterna { opacity: 1; }
  html.menu-rec .menu-cab:is(:hover, :has(:focus-visible)) .menu-marca { opacity: 0; }
  html.menu-rec .menu-cab:hover, html.menu-rec .menu-cab:hover * { cursor: ew-resize; }
}
@media (max-width: 760px) { .menu-busca kbd { display: none; } }
/* Janela da busca, no meio da tela: campo, e embaixo as páginas recentes ou os resultados por área, com o trecho em uma linha. */
.menu-janela { position: fixed; inset: 0; z-index: 9600; display: none; background: color-mix(in srgb, var(--ink) 12%, transparent); }
html.menu-buscando { overflow: hidden; }
html.menu-buscando .menu-janela { display: block; animation: menu-surge .15s ease both; }
.menu-jcaixa { position: absolute; left: 50%; top: min(20vh, 140px); translate: -50% 0; width: min(576px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 40px - min(20vh, 140px))); display: flex; flex-direction: column; background: var(--bg);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .05);
  animation: menu-sobe .18s var(--menu-ease) both; }
@keyframes menu-sobe { from { transform: translateY(6px) scale(.99); opacity: 0; } }
.menu-jtopo { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px 20px; }
.menu-jtopo input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font: 400 15px var(--sans); padding: 4px 0; }
.menu-jtopo input::placeholder { color: var(--faint); }
.menu-jtopo input::-webkit-search-cancel-button { display: none; }
.menu-jtopo button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; background: none; border-radius: 6px; color: var(--muted); cursor: pointer; }
.menu-jtopo button:hover { background: var(--hover); color: var(--ink); }
.menu-jtopo svg { width: 16px; height: 16px; }
.menu-jlista { overflow: auto; padding: 0 8px 14px; }
.menu-jg { padding: 14px 12px 6px; font: 500 12px var(--mono); color: var(--faint); }
.menu-jlista a { display: flex; align-items: center; gap: 14px; min-height: 38px; padding: 6px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font: 400 14px var(--sans); }
.menu-jlista a:is(:hover, .menu-jsel) { background: var(--hover); }
.menu-jlista .menu-ponto { margin: 0 3px; background: var(--c); }
.menu-jlista b { font-weight: 400; flex: none; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-jlista a span:not(.menu-ponto) { flex: 1; min-width: 0; font-size: 12.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-jlista mark { background: none; color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--hot); }
.menu-jnada { padding: 14px 12px; font: 400 12px var(--mono); color: var(--faint); }
@media (max-width: 760px) { .menu-jlista a span:not(.menu-ponto) { display: none; } }
/* Dica com o atalho, ao lado do botão (como a "Alternar barra lateral Ctrl+Shift+S" do Claude). */
.menu-dica { position: fixed; z-index: 9800; display: none; align-items: center; gap: 8px; padding: 5px 6px 5px 10px; border-radius: 8px;
  background: var(--ink); color: var(--bg); font: 500 12px var(--sans); white-space: nowrap; pointer-events: none; translate: 0 -50%; }
.menu-dica.vis { display: flex; }
.menu-dica kbd { font: 500 12px var(--sans); background: color-mix(in srgb, var(--bg) 18%, transparent); border-radius: 5px; padding: 2px 6px; }
@media (max-width: 760px) {
  html.menu body, html.menu.menu-rec body { margin-left: 0; }
  .menu-top { padding-left: 6px; }
  .menu-cel { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: inherit; border-radius: 8px; }
  .menu-cel svg { width: 20px; height: 20px; }
  .menu-side, html.menu-rec .menu-side { width: min(86vw, 320px); transform: translateX(-100%); transition: transform .32s var(--menu-ease); background: var(--bg); }
  html.menu-rec .menu-side :is(.menu-nome, .menu-abre, small, .menu-seta, .menu-grupo, .menu-troca, kbd) { opacity: 1; pointer-events: auto; }
  html.menu-rec .menu-side .menu-sub.aberta { grid-template-rows: 1fr; opacity: 1; }
  html.menu-rec .menu-item .menu-ponto { background: color-mix(in srgb, var(--c) 30%, var(--bg)); }
  html.menu-rec .menu-item.menu-na .menu-ponto { background: var(--c); }
  .menu-alterna { display: none; }
  html.menu-gaveta .menu-side { transform: none; }
  .menu-veu { display: block; position: fixed; inset: var(--menu-top) 0 0 0; z-index: 8998; background: rgba(18, 18, 18, .3); opacity: 0; pointer-events: none; transition: opacity .3s; }
  html.menu-gaveta .menu-veu { opacity: 1; pointer-events: auto; }
  html.menu-rec .menu-side nav.idiomas { opacity: 1; pointer-events: auto; }
  .menu-trilha .menu-pai { display: none; }
}
@media print { .menu-top, .menu-fio, .menu-side, .menu-veu, .menu-janela, .menu-dica { display: none !important; } html.menu body { margin: 0 !important; padding: 0 !important; } }