/* =========================================================
   MENU COM PAINÉIS — js/menu.js
   Computador: o painel ocupa a largura da pílula do menu, logo abaixo dela
   (a posição vem do JS). Fica sólido porque o desfoque não funciona dentro
   de um pai que já é de vidro.
   Celular (≤ 900px): a setinha abre a lista dentro do menu ☰.
   Também: janela de atalhos do teclado (usa o visual da paleta).
   ========================================================= */

.mm-item { display: flex; align-items: center; gap: .1rem; }
.mm-abrir {
  display: grid; place-items: center; width: 1.35rem; height: 1.35rem; padding: 0; border: 0; border-radius: 50%;
  background: none; color: inherit; opacity: .6; cursor: pointer; transition: opacity .15s ease, background-color .15s ease;
}
.mm-abrir svg { width: 10px; height: 10px; fill: none; stroke: var(--cream); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease-out); }
body.on-hero nav .mm-abrir svg { stroke: #fff; }
.mm-abrir:hover, .mm-abrir[aria-expanded="true"] { opacity: 1; background: color-mix(in srgb, var(--gray) 18%, transparent); }
.mm-abrir[aria-expanded="true"] svg { transform: rotate(180deg); }
.mm-abrir:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; opacity: 1; }
/* os links do menu ficam um pouco mais juntos para caber a setinha */
@media (min-width: 901px) { nav.tem-mm .nav-links { gap: 1.25rem; } }

/* ---------- painel ---------- */
.mm-painel {
  position: absolute; z-index: 5; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(220px, 1fr); gap: .75rem;
  padding: .75rem; border-radius: 1.5rem; text-align: left; letter-spacing: -.01em;
  background: rgba(30, 30, 33, .98); border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 28px 70px rgba(0, 0, 0, .45);
  transform-origin: top center;
}
body.light-theme .mm-painel { background: #fffdf8; box-shadow: 0 1px 0 #fff inset, 0 24px 60px rgba(30, 50, 45, .16); }
.mm-painel[hidden] { display: none; }
/* entrada curta, do topo; troca entre painéis sem animar */
@media (prefers-reduced-motion: no-preference) {
  .mm-painel:not(.mm-instante) { transition: opacity .18s var(--ease-out), transform .2s var(--ease-out); @starting-style { opacity: 0; transform: translateY(-6px) scale(.985); } }
  .mm-painel.mm-saindo { opacity: 0; transform: translateY(-4px) scale(.99); transition: opacity .12s ease, transform .12s ease; }
}

.mm-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem; align-content: start; }
.mm-link {
  display: flex; align-items: flex-start; gap: .8rem; padding: .75rem .8rem; border-radius: 1rem;
  color: var(--cream) !important; opacity: 1 !important; text-decoration: none; text-transform: none !important; letter-spacing: -.01em !important;
  transition: background-color .15s ease;
}
.mm-link:hover, .mm-link:focus-visible { background: color-mix(in srgb, var(--gray) 13%, transparent); }
.mm-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mm-ico { flex: none; width: 2.3rem; height: 2.3rem; border-radius: .75rem; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.mm-ico svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mm-txt { display: grid; gap: .15rem; min-width: 0; }
.mm-txt b { font-size: .92rem; font-weight: 600; line-height: 1.25; }
.mm-txt b em { margin-left: .3rem; padding: .08rem .45rem; border-radius: 980px; font-style: normal; font-size: .66rem; font-weight: 600; vertical-align: .1em; color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); }
.mm-txt small { font-size: .8rem; line-height: 1.35; color: var(--gray); }

.mm-lado { display: flex; flex-direction: column; gap: .75rem; padding: 1.1rem 1.15rem; border-radius: 1.1rem; background: color-mix(in srgb, var(--gray) 9%, transparent); }
.mm-rot { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gray); }
.mm-lado p { font-size: .86rem; line-height: 1.5; color: var(--cream); opacity: .85; }
.mm-seta { margin-top: auto; align-self: flex-start; font-size: .88rem !important; font-weight: 500; text-transform: none !important; letter-spacing: -.01em !important; color: var(--accent) !important; opacity: 1 !important; text-decoration: none; }
.mm-seta + .mm-seta { margin-top: -.35rem; }
.mm-seta:hover { text-decoration: underline; text-underline-offset: 3px; }

.mm-passos { list-style: none; counter-reset: p; display: grid; gap: .45rem; }
.mm-passos li { counter-increment: p; display: flex; align-items: center; gap: .6rem; font-size: .88rem; }
.mm-passos li::before { content: counter(p, decimal-leading-zero); width: 1.7rem; height: 1.7rem; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: .68rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }

.mm-term { padding: .75rem .85rem; border-radius: .8rem; font-family: var(--mono); font-size: .78rem; line-height: 1.6; color: #e8e8ea; background: #0d0d0f; }
.mm-term b { color: var(--accent); font-weight: 400; }
.mm-term .o { color: #9a9aa0; }
.mm-term i { display: inline-block; width: .5em; height: 1em; margin-left: .2em; vertical-align: -.15em; background: var(--accent); animation: mm-pisca 1.1s steps(1) infinite; }
@keyframes mm-pisca { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mm-term i { animation: none; } }

.mm-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.mm-chips a { padding: .32rem .7rem; border-radius: 980px; font-size: .8rem !important; text-transform: none !important; letter-spacing: -.005em !important; color: var(--cream) !important; opacity: 1 !important; text-decoration: none; border: 1px solid var(--glass-line); transition: background-color .15s ease, border-color .15s ease; }
.mm-chips a:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }

.mm-atalhos { display: grid; gap: .45rem; }
.mm-atalhos div { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: .85rem; }
.mm-atalhos dt { display: flex; gap: .2rem; }
.mm-atalhos dd { color: var(--gray); text-align: right; }
.mm-atalhos kbd, .atalhos kbd { font: inherit; font-size: .72rem; font-weight: 600; min-width: 1.5rem; padding: .12rem .42rem; text-align: center; border-radius: .4rem; background: color-mix(in srgb, var(--gray) 20%, transparent); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--gray) 30%, transparent); }

/* ---------- celular: lista dentro do menu ☰ ---------- */
@media (max-width: 900px) {
  nav.tem-mm .nav-links { max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain; }
  .mm-item { flex-wrap: wrap; justify-content: space-between; }
  .mm-abrir { width: 2.2rem; height: 2.2rem; opacity: .8; }
  .mm-abrir svg { width: 12px; height: 12px; }
  .mm-painel { position: static; flex-basis: 100%; display: block; padding: .35rem 0 0; border: 0; border-radius: 0; background: none !important; box-shadow: none !important; }
  .mm-painel[hidden] { display: none; }
  .mm-grade, .mm-grade-3 { grid-template-columns: 1fr; }
  .mm-link { padding: .55rem .4rem; }
  .mm-link .mm-txt b { font-size: .95rem; }
  .mm-lado { display: none; }
}

/* ---------- janela de atalhos ---------- */
.atalhos { width: min(460px, 100%); padding: 1.1rem 1.25rem 1.25rem; outline: none; }
.atalhos-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.atalhos-topo h2 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; }
.atalhos-lista { display: grid; gap: .2rem; }
.atalhos-lista div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--border); font-size: .92rem; }
.atalhos-lista div:last-child { border-bottom: 0; }
.atalhos-lista dt { display: flex; align-items: center; gap: .3rem; }
.atalhos-lista dt span { font-size: .75rem; color: var(--gray); }
.atalhos-lista dd { color: var(--gray); text-align: right; }