/* Menu lateral (14/10/2026) — spec docs/superpowers/specs/2026-10-14-menu-lateral-design.md.
   Carregado depois de premium.css. Roupagem do menu (curvas de nível, régua de escala no item
   ativo), ajuste à altura da janela (o menu nunca rola por dentro) e modo recolhido em
   .sidebar[data-menu="recolhido"]. Tudo de layout fica em "screen" ≥ 651px: o dock do
   celular e a impressão não mudam. Não redefine :root; não toca o PIN nem os documentos. */

/* Aberto: o ícone fica 28px da borda (12px da faixa + 16px do botão). Recolhido (19/10/2026):
   faixa de 60px; o ícone e a rosa ficam com x fixo em 20px e 18px (padding-left/margin-left),
   centrados em 30px. Os botões não usam borda para não deslocar o ícone (o vidro usa sombra). */
/* Rosa dos ventos da marca (um <i>): oculta em todo lugar; só o recolhido a mostra (abaixo). */
html body .sidebar .brand > .brand-rosa {
  display: none;
  color: #dbe7df; /* a cor dos ícones do menu */
}

@media screen and (min-width: 651px) {
  html body .sidebar {
    --menu-aberto: 15.5rem;
    --menu-recolhido: 3.75rem;
    width: var(--menu-aberto);
    padding: var(--p-s6) 12px var(--p-s3);
    overflow-x: hidden;
    background-image: linear-gradient(180deg, var(--forest), color-mix(in srgb, var(--forest) 78%, black));
    transition: width 520ms var(--p-spring);
  }
  html body .sidebar + .workspace {
    transition: margin-left 520ms var(--p-spring);
  }
  html body .sidebar + .workspace main#content {
    transition: max-width 520ms var(--p-spring);
  }

  /* Curvas de nível ao pé do menu: atrás dos itens, sem tirar contraste. */
  html body .sidebar::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: var(--menu-aberto);
    height: 15rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 248 240' fill='none' stroke='white' stroke-width='1.1'%3E%3Cpath d='M-10 232C40 204 82 218 122 192S200 152 260 168'/%3E%3Cpath d='M-10 204C36 176 86 190 124 164S198 120 260 136'/%3E%3Cpath d='M-10 176C32 150 90 164 128 136S194 88 260 104'/%3E%3Cpath d='M-10 148C30 126 94 136 132 108S190 58 260 72'/%3E%3Cpath d='M160 118c16-14 50-12 58 4s-16 30-40 26-34-16-18-30z'/%3E%3Cpath d='M172 120c10-7 30-6 34 3s-10 15-23 13-20-9-11-16z'/%3E%3C/svg%3E")
      left bottom / var(--menu-aberto) auto no-repeat;
    opacity: 0.075;
    pointer-events: none;
  }
  html body .sidebar > :is(.brand, nav, .menu-recolher) {
    position: relative;
    z-index: 1;
  }

  /* Marca: no modo recolhido o logo dá lugar à rosa dos ventos (bloco do recolhido, abaixo). */
  html body .sidebar .brand {
    flex: none;
    margin: 0 0 var(--p-s6) 4px;
    overflow: hidden;
    transition: margin 520ms var(--p-spring);
  }
  html body .sidebar .brand img {
    display: block;
    max-width: none;
  }
  html body .sidebar .brand > span {
    white-space: nowrap;
    transition: opacity 200ms ease-out 160ms;
  }

  /* Lista: coluna que encolhe (44px → 34px por item) antes de qualquer rolagem. */
  html body .sidebar nav {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
    gap: 2px;
  }
  html body .sidebar .nav-button {
    flex: 0 1 44px;
    min-height: 34px;
    padding: 0 0.75rem 0 16px;
    gap: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    transition:
      padding 520ms var(--p-spring),
      background-color var(--control-response),
      transform var(--control-response) ease-out;
  }
  html body .sidebar .nav-button svg,
  html body .sidebar .menu-recolher svg {
    width: 20px;
    height: 20px;
    flex: none;
  }
  html body .sidebar .nav-label {
    transition: opacity 200ms ease-out 160ms;
  }

  /* Item ativo: a régua de escala da marca (claro e areia), como sob os títulos. */
  html body .sidebar .nav-button.active::before,
  html body .sidebar .nav-glide {
    background: linear-gradient(
      180deg,
      var(--signal) 0 25%,
      var(--survey) 25% 50%,
      var(--signal) 50% 75%,
      var(--survey) 75% 100%
    );
  }

  /* Recolher/Expandir: no pé do menu, separado por um fio. */
  html body .sidebar .menu-recolher {
    flex: none;
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    min-height: 44px;
    padding: 0 0.75rem 0 16px;
    border: 0;
    border-top: 1px solid #ffffff1f;
    border-radius: 0 0 var(--p-r-control) var(--p-r-control);
    background: transparent;
    color: #b9cfc1;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    transition:
      padding 520ms var(--p-spring),
      color 160ms ease-out,
      background-color 160ms ease-out;
  }
  html body .sidebar nav + .menu-recolher {
    margin-top: auto;
  }
  html body .sidebar .menu-recolher:hover {
    color: #ffffff;
    background: #ffffff0f;
  }
  html body .sidebar .menu-recolher:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: -2px;
  }
  html body .sidebar .menu-recolher-rotulo {
    transition: opacity 200ms ease-out 160ms;
  }
  html body .sidebar .menu-recolher .menu-seta {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 520ms var(--p-spring);
  }

  /* Vidro (19/10/2026): item ativo e toque nos botões do menu. Vem depois do hover, para o toque
     ganhar dele. Transparência reduzida: sem desfoque e com fundo sólido. */
  html body #nav [aria-current],
  html body .sidebar .nav-button:active,
  html body .sidebar .menu-recolher:active {
    background: color-mix(in srgb, white 14%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, white 22%, transparent);
    /* Lista de premium.css (toque: transform 100ms) mais o padding do recolher (520 ms). */
    transition:
      padding 520ms var(--p-spring),
      background-color 180ms ease-out,
      transform 100ms ease-out,
      color 160ms ease-out;
  }
  /* Contraste (prefers-contrast: more) e transparência reduzida: sem desfoque e fundo opaco. */
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    html body #nav [aria-current],
    html body .sidebar .nav-button:active,
    html body .sidebar .menu-recolher:active {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      background: color-mix(in srgb, white 18%, var(--forest));
    }
  }

  /* ---------- Recolhido ---------- */
  html body .sidebar[data-menu="recolhido"] {
    width: var(--menu-recolhido);
  }
  html body .sidebar[data-menu="recolhido"] + .workspace {
    margin-left: 5.75rem; /* 60px da faixa + 32px de respiro, como no aberto */
  }
  /* A área ganha de verdade: o limite do conteúdo sobe o mesmo que o menu cedeu (188px). */
  html body .sidebar[data-menu="recolhido"] + .workspace main#content {
    max-width: calc(1280px + 11.75rem);
  }
  html body .sidebar[data-menu="recolhido"] ~ .toast {
    left: calc(50% + 46px);
  }
  /* Ícone de 20px com x = 12px (faixa) + 8px = 20px: centro em 30px, o meio da faixa de 60px.
     O padding anima (mola de 520 ms, em .nav-button/.menu-recolher): o ícone desliza, não salta. */
  html body .sidebar[data-menu="recolhido"] :is(.nav-button, .menu-recolher) {
    gap: 0;
    padding-right: 0;
    padding-left: 8px;
  }
  html body .sidebar[data-menu="recolhido"] .menu-recolher {
    position: relative;
  }
  html body .sidebar[data-menu="recolhido"] .brand {
    margin: 0 0 var(--p-s6);
  }
  html body .sidebar[data-menu="recolhido"] .brand img {
    display: none;
  }
  html body .sidebar[data-menu="recolhido"] .brand > .brand-rosa {
    display: block;
    line-height: 0;
  }
  /* x fixo: 12px (faixa) + 6px = 18px, de modo que a rosa de 24px fica centrada em 30px. */
  html body .sidebar[data-menu="recolhido"] .brand > .brand-rosa svg {
    display: block;
    margin: 0 0 0 6px;
    width: 24px;
    height: 24px;
  }
  /* Rótulos fora do fluxo e invisíveis: o nome acessível e o balão continuam lendo o texto. */
  html body .sidebar[data-menu="recolhido"] :is(.nav-label, .menu-recolher-rotulo, .brand > span) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 120ms ease-in;
  }
  html body .sidebar[data-menu="recolhido"] .menu-recolher .menu-seta {
    transform: scaleX(-1);
  }

  /* Janelas baixas (notebook com zoom): marca menor, depois sem o subtítulo. */
  @media (max-height: 760px) {
    html body .sidebar {
      padding-top: var(--p-s4);
    }
    html body .sidebar .brand {
      margin-bottom: var(--p-s4);
    }
    html body .sidebar .brand img {
      width: 128px;
      height: 60px;
    }
    html body .sidebar .brand > span {
      margin-top: 0.4rem;
    }
  }
  @media (max-height: 640px) {
    html body .sidebar .brand {
      margin-bottom: var(--p-s3);
    }
    html body .sidebar .brand img {
      width: 112px;
      height: 52px;
    }
    html body .sidebar .brand > span {
      display: none;
    }
  }
}

/* Abertura da página e troca de pessoa sem animação de largura (menu-lateral.js). */
html body .sidebar.menu-sem-transicao,
html body .sidebar.menu-sem-transicao + .workspace,
html body .sidebar.menu-sem-transicao + .workspace main#content,
html body .sidebar.menu-sem-transicao :is(.brand, .brand > span, .nav-label, .menu-recolher-rotulo, .menu-seta) {
  transition: none;
}
/* Padding dos botões (19/10/2026): também não anima na abertura nem na troca de pessoa. */
html body .sidebar.menu-sem-transicao :is(.nav-button, .menu-recolher, #nav [aria-current]) {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  html body .sidebar,
  html body .sidebar + .workspace,
  html body .sidebar + .workspace main#content,
  html body .sidebar :is(.brand, .brand > span, .nav-label, .menu-recolher-rotulo, .menu-seta),
  html body .sidebar[data-menu="recolhido"] :is(.nav-label, .menu-recolher-rotulo, .brand > span),
  html body .sidebar .nav-button,
  html body .sidebar .menu-recolher,
  html body #nav [aria-current],
  html body .sidebar .nav-button:active,
  html body .sidebar .menu-recolher:active,
  html body .menu-balao {
    transition: none;
  }
  /* style.css zera todo transform com !important no movimento reduzido; a seta virada é
     informação (o rótulo está oculto no recolhido), não movimento. */
  html body .sidebar[data-menu="recolhido"] .menu-recolher .menu-seta {
    transform: scaleX(-1) !important;
  }
}

/* Celular e impressão: sem botão de recolher. */
@media (max-width: 650px), print {
  html body .sidebar .menu-recolher {
    display: none;
  }
}

/* Lista "Mais" (celular): o item atual herdava o texto branco do menu escuro e sumia. */
html body #navigation-modal .module-link[aria-current] {
  color: var(--forest);
  background: color-mix(in srgb, var(--signal) 32%, var(--p-surface));
}
html body #navigation-modal .module-link[aria-current] strong {
  color: var(--forest);
}

/* Balão com o nome do item (só no modo recolhido; posição definida em menu-lateral.js). */
html body .menu-balao {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--p-line-soft);
  border-radius: 8px;
  background: var(--p-surface);
  color: var(--forest);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: var(--p-shadow-2);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 120ms ease-out,
    transform 260ms var(--p-spring);
}
html body .menu-balao.visivel {
  opacity: 1;
  transform: none;
}
@media (max-width: 650px), print {
  html body .menu-balao {
    display: none;
  }
}