/* ============================================================
   ÍNDICE E GAVETA — compartilhados pelas duas páginas.

   O índice tem papéis diferentes em cada página:
   · home    — coluna lateral no desktop, gaveta no celular (mesmo
               elemento, dois papéis). O posicionamento dele mora em
               home.html, dentro do @media 940.
   · receita — gaveta sempre, em qualquer largura, alcançável só pelo
               hambúrguer do celular. Usa `.gaveta-fixa`, aqui embaixo.

   A APARÊNCIA (rótulo, raízes, capítulos, itens, hambúrguer, véu) é
   a mesma nos dois lugares e mora só aqui. O HTML vem de
   NAV.htmlIndice(), em navegar.js — mesma dupla, uma fonte cada.
   ============================================================ */

/* ---- lista do índice ---- */
.painel::-webkit-scrollbar { width: 6px; }
.painel::-webkit-scrollbar-thumb { background: var(--linha); border-radius: 3px; }
.painel-rot { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); margin-bottom: 14px; }

.raiz {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 12px; margin-bottom: 4px;
  border: 0; border-radius: 10px; background: transparent; color: var(--ink);
  font-family: inherit; font-size: 17px; font-weight: 600; text-align: left; cursor: pointer;
}
.raiz:hover { background: var(--bg-fundo); }
.raiz[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.raiz.fav[aria-pressed="true"] { background: var(--marca); color: var(--sobre-marca); }
.raiz .coracao { width: 18px; height: 18px; }
.raiz-n { margin-left: auto; font-size: 14px; font-weight: 500; opacity: .7; }

.cap { margin-top: 2px; }
.cap-cab {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 12px; border: 0; border-radius: 10px; background: transparent; color: inherit;
  font-family: inherit; font-size: 16px; font-weight: 600; text-align: left; cursor: pointer;
}
.cap-cab:hover { background: var(--bg-fundo); }
.cap-cab[data-ativo="true"] { color: var(--marca); }
.cap-seta { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; opacity: .6; transition: transform .18s ease; }
.cap-cab[aria-expanded="true"] .cap-seta { transform: rotate(90deg); }
.cap-n { margin-left: auto; font-size: 14px; font-weight: 500; color: var(--faint); }
.cap-itens { padding: 2px 0 10px 26px; }
/* Grid, não flex: o tempo precisa formar COLUNA. Com margin-left:auto
   cada linha empurrava o número para um lugar diferente, conforme o
   título quebrasse ou tivesse coração. Coluna fixa + tabular-nums e
   os números ficam alinhados um debaixo do outro. */
.cap-item {
  display: grid; grid-template-columns: 1fr 14px 46px; gap: 8px; align-items: baseline;
  padding: 8px 10px; border-radius: 8px;
  font-size: 15.5px; color: var(--muted); text-decoration: none;
}
.cap-item:hover { background: var(--bg-fundo); color: var(--ink); }
/* A receita que está aberta agora. Sem fundo nem borda: só peso e cor,
   o suficiente para achar onde se está numa lista de dezenas. */
.cap-item.aqui { color: var(--ink); font-weight: 600; }
.cap-item-nome { line-height: 1.35; }
.cap-item-fav { grid-column: 2; justify-self: center; color: var(--marca); line-height: 1; }
.cap-item-tempo {
  grid-column: 3; text-align: right;
  font-size: 14px; font-weight: 600; color: var(--tempo);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cap-item .coracao { width: 13px; height: 13px; }

/* ---- peças da gaveta ---- */
.hamburguer {
  display: none; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--linha); border-radius: 10px; background: transparent;
  color: var(--ink); cursor: pointer; place-items: center;
}
.hamburguer svg { width: 22px; height: 22px; }
.gaveta-topo { display: none; align-items: center; gap: 8px; margin-bottom: 22px; }
.gaveta-x {
  margin-left: auto; width: 44px; height: 44px;
  border: 0; border-radius: 10px; background: transparent;
  color: var(--faint); font-family: inherit; font-size: 26px; line-height: 1; cursor: pointer;
}
.veu {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(0,0,0,.45); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .2s ease;
}
.veu.visivel { opacity: 1; }

/* ---- gaveta de papel único (página de receita) ----
   Fica fora da tela em qualquer largura. No desktop o hambúrguer não
   aparece, então ela simplesmente nunca é chamada — não precisa de
   display:none nem de malabarismo de media query. */
.gaveta-fixa {
  position: fixed; z-index: 50; inset: 0 0 0 auto;
  width: min(340px, 88vw);
  padding: 20px 20px calc(30px + env(safe-area-inset-bottom));
  background: var(--bg); border-left: 1px solid var(--linha);
  overflow-y: auto; overscroll-behavior: contain;
  box-shadow: 0 0 40px rgba(0,0,0,.16);
  /* Sem `visibility`: um elemento invisível não é renderizado e o
     transform não parte de lugar nenhum. Quem cuida de foco e leitor
     de tela é o atributo `inert`, no JS. */
  transform: translateX(100%);
  transition: transform .24s ease;
}
.gaveta-fixa.aberta { transform: translateX(0); }

/* ---- celular: o hambúrguer assume ---- */
@media (max-width: 940px) {
  /* Encostado na direita, e a gaveta abre do mesmo lado em que o dedo
     tocou. Abrir da esquerda faz o conteúdo fugir do polegar. */
  .hamburguer { display: grid; margin-left: auto; }
  .topo-dir { display: none; }
  .gaveta-topo { display: flex; }
}
@media (max-width: 640px) {
  .cap-cab, .raiz { padding: 13px 12px; }
  .cap-item { padding: 11px 10px; }
}