/* A moldura permanente: faixa Oxford, área principal, rodapé; e as duas formas do símbolo. */
.fh-simbolo { display: inline-block; height: auto; }
.fh-simbolo-mask {
  display: inline-block;
  width: 100px; height: 60px;
  background: currentColor;
  -webkit-mask: url("../../assets/brand/simbolo-1cor.svg") center / contain no-repeat;
  mask: url("../../assets/brand/simbolo-1cor.svg") center / contain no-repeat;
}

.faixa {
  position: sticky; top: 0; z-index: var(--z-faixa);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-4);
  height: var(--faixa-h); padding: 0 var(--gutter);
  background: var(--capa); color: var(--capa-ink);
  box-shadow: 0 1px 0 var(--capa-edge);
}
.faixa__marca { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--capa-ink); text-decoration: none; }
.faixa__simbolo { flex: none; }
.faixa__wordmark { font-weight: var(--fw-regular); font-size: var(--fs-15); letter-spacing: 0.01em; white-space: nowrap; }
.faixa__wordmark b { font-weight: var(--fw-bold); color: var(--gold); }
.faixa__contexto { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.faixa__nav { display: flex; gap: var(--s-1); }
.faixa__link { padding: var(--s-2) var(--s-3); border-radius: var(--radius-control); color: var(--capa-ink-soft); text-decoration: none; font-size: var(--fs-15); white-space: nowrap; transition: background-color var(--t-state) var(--ease), color var(--t-state) var(--ease); }
.faixa__link:hover { color: var(--capa-ink); background: rgba(244, 237, 228, 0.08); }
.faixa__link.is-on { color: var(--capa-ink); box-shadow: inset 0 -2px 0 var(--gold); border-radius: 0; }
.faixa__link:focus-visible { outline-color: var(--gold); }
.faixa__sessao { display: inline-flex; align-items: center; gap: var(--s-3); }
.faixa__quem { color: var(--capa-ink-soft); font-size: var(--fs-12); max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Visitante na demonstração: o que ele está lendo, dito na moldura. Sem sessão não há nome de
   quem entrou, e o lugar é o mesmo. Na tela estreita fica só a primeira palavra (o rodapé
   continua dizendo a frase inteira, e ele não some em nenhuma largura). */
.faixa__demo { color: var(--capa-ink-soft); font-size: var(--fs-12); white-space: nowrap; }
.faixa .fh-btn--capa:focus-visible, .faixa a:focus-visible { outline-offset: 2px; }

.app-main { view-transition-name: app-main; min-height: calc(100dvh - var(--faixa-h) - 48px); }
.app-main:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.rodape { display: flex; justify-content: center; padding: var(--s-5) var(--gutter); color: var(--ink-muted); font-size: var(--fs-12); line-height: var(--lh-12); text-align: center; }

/* Folha genérica de tela (átrio, configurações, avisos) */
.folha { max-width: var(--folha-max); margin: 0 auto; padding: var(--s-6) var(--gutter) var(--s-8); }
.folha--estreita { max-width: 44rem; }
.aviso { max-width: 44rem; margin: var(--s-8) auto; padding: 0 var(--gutter); display: grid; gap: var(--s-3); }

/* Matriz de QA (laboratório) */
.qa__controles { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-bottom: var(--s-5); }
.qa__resumo { font-size: var(--fs-19); line-height: var(--lh-19); color: var(--ink-strong); margin-bottom: var(--s-4); }
.qa__resumo--problemas { color: var(--alert); }
.qa__tabela td { font-size: var(--fs-12); }
.qa__detalhe { color: var(--ink-soft); overflow-wrap: anywhere; }
.qa__linha--erro td, .qa__linha--excecao td, .qa__linha--sumiu td { color: var(--alert); }
.qa__linha--vazio td { color: var(--gold-text); }
.qa__linha--indisponivel td { color: var(--ink-muted); }
.qa--so-problemas .qa__linha--ok, .qa--so-problemas .qa__linha--indisponivel { display: none; }

@media (max-width: 1023px) {
  .faixa { grid-template-columns: auto minmax(0, 1fr) auto; }
  .faixa__contexto { display: none; }
  .faixa__quem { display: none; }
  .faixa__nav { grid-column: 2; justify-content: flex-end; }
}
@media (max-width: 599px) {
  .faixa__demo-cauda { display: none; }
  .faixa__wordmark { display: none; }
  .faixa__marca { margin-right: var(--s-2); }
  .faixa__link { padding-inline: var(--s-2); font-size: var(--fs-12); }
}

/* Como ler (v2): a página de método */
.comoler__topo { display: grid; gap: var(--s-3); justify-items: start; margin-bottom: var(--s-5); }
.comoler__topo h1 { font-size: var(--fs-28); line-height: var(--lh-28); }
.comoler__frase { font-size: var(--fs-19); line-height: var(--lh-19); color: var(--ink); max-width: var(--measure); }
.comoler__indice ul { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.comoler__indice a { display: inline-block; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--rule); background: var(--paper); color: var(--ink); text-decoration: none; font-size: var(--fs-12); letter-spacing: 0.04em; }
.comoler__indice a:hover { border-color: var(--gold); color: var(--ink-strong); }
.comoler__secao { scroll-margin-top: calc(var(--faixa-h) + var(--s-4)); }
.comoler__lista { display: grid; gap: var(--s-3); }
.comoler__item { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); gap: var(--s-2) var(--s-5); padding: var(--s-3) 0; border-top: 1px solid var(--rule-soft); }
.comoler__item:first-child { border-top: 0; }
.comoler__item dt { font-weight: var(--fw-semibold); color: var(--ink-strong); }
.comoler__oque { color: var(--ink); }
.comoler__como { margin-top: var(--s-1); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-muted); max-width: none; }
@media (max-width: 767px) { .comoler__item { grid-template-columns: minmax(0, 1fr); } }

/* Como ler: o índice fica preso sob a faixa enquanto a folha rola */
.comoler__indice { position: sticky; top: var(--faixa-h); z-index: 2; background: var(--ground); padding: var(--s-3) 0; }
/* Modo apresentação (tecla F): a moldura sai de cena e fica só a folha. A barra some junto,
   mas as setas continuam virando a folha (o ouvinte é do documento, não da barra). */
body.is-apresentando .faixa, body.is-apresentando .fh-barra, body.is-apresentando .rodape { display: none; }
body.is-apresentando .app-main { min-height: 100dvh; }

/* Link de pular para o conteúdo: invisível até receber foco */
.fh-skip { position: absolute; left: -9999px; top: var(--s-2); z-index: 100; padding: var(--s-2) var(--s-3); border-radius: var(--radius-control); background: var(--paper); color: var(--ink-strong); text-decoration: none; }
.fh-skip:focus { left: var(--s-3); outline: 2px solid var(--gold); }