/* ════════════════════════════════════════════════════════════════════
   DS · NAVIGATOR · índice fixo + scroll-spy + progresso + panorama
   Chrome de navegação para a página do Design System (42 seções).
   Usa os tokens de tokens.css / forja.css. Tudo aditivo.
   ════════════════════════════════════════════════════════════════════ */

/* offset de âncora (nav do site no topo) + rolagem suave */
html { scroll-behavior: smooth; }
section.wrap { scroll-margin-top: 96px; }

/* ── barra de progresso de leitura ── */
#dsnav-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 1200;
  background: transparent; pointer-events: none; }
#dsnav-progress i { display: block; height: 100%; width: 0;
  background: var(--ouro-revelado); box-shadow: 0 0 12px var(--amarelo-60); }

/* ── botão flutuante de índice (mostra a seção atual) ── */
#dsnav-fab { position: fixed; bottom: 26px; right: 26px; z-index: 1190;
  display: flex; align-items: center; gap: 13px; padding: 13px 18px;
  background: rgba(19,17,9,0.92); border: 1px solid var(--linha-bronze);
  color: var(--bronze-claro); cursor: pointer; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  transition: border-color .2s, color .2s; max-width: 320px; }
#dsnav-fab:hover { color: var(--amarelo); border-color: var(--amarelo-40); }
#dsnav-fab .ic { display: grid; gap: 3.5px; flex: none; }
#dsnav-fab .ic i { display: block; width: 16px; height: 1.5px; background: currentColor; }
#dsnav-fab .txt { display: grid; gap: 2px; text-align: left; min-width: 0; }
#dsnav-fab .lab { font-family: var(--voz-sagrada); font-size: 9.5px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--bronze); }
#dsnav-fab .cur { font-family: var(--voz-sagrada); font-size: 12.5px; letter-spacing: 0.04em;
  color: var(--bege); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px){ #dsnav-fab .txt { display: none; } #dsnav-fab { padding: 14px; } }

/* ── backdrop + gaveta do índice ── */
#dsnav-backdrop { position: fixed; inset: 0; z-index: 1195; background: rgba(0,0,0,0.55);
  opacity: 0; visibility: hidden; transition: opacity .25s; pointer-events: none; }
#dsnav-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 364px; max-width: 86vw; z-index: 1196;
  background: linear-gradient(180deg, var(--preto-2), var(--preto)); border-left: 1px solid var(--bronze);
  box-shadow: -30px 0 70px rgba(0,0,0,0.6); transform: translateX(102%);
  transition: transform .34s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; }
/* DESKTOP: gaveta aberta = índice lateral persistente, sem véu escuro nem
   bloqueio de cliques. O conteúdo RECUA (não fica coberto): o documento ganha
   padding-right igual à largura da gaveta, com transição suave. */
body.dsnav-open #dsnav-backdrop { opacity: 0 !important; visibility: hidden !important; }
body.dsnav-open #dsnav-drawer { transform: translateX(0) !important; }
body.dsnav-open { --dsnav-w: 364px; }
@media (min-width: 769px){
  body.dsnav-open { padding-right: var(--dsnav-w); }
  /* o chrome fixed (rail + overlays de grão/vinheta) é ancorado na viewport e não
     segue o padding do body: recua junto para não ficar sob a gaveta. */
  body.dsnav-open .rail,
  body.dsnav-open .ember-field,
  body.dsnav-open::before,
  body.dsnav-open::after { right: var(--dsnav-w); }
}
/* o FAB é coberto pela gaveta aberta: some enquanto ela está aberta e reaparece ao fechar. */
body.dsnav-open #dsnav-fab { opacity: 0; visibility: hidden; pointer-events: none; }

/* MOBILE: a gaveta lateral espremeria a leitura, então vira um overlay modal
   de largura quase total, com véu escuro que captura o toque para fechar. O JS
   fecha a gaveta ao navegar para a seção (só no mobile). */
@media (max-width: 768px){
  #dsnav-backdrop { pointer-events: auto; }
  #dsnav-drawer { width: 88vw; max-width: 380px; }
  body.dsnav-open #dsnav-backdrop { opacity: 1 !important; visibility: visible !important; }
}
#dsnav-drawer .hd { display: flex; align-items: center; justify-content: space-between;
  padding: 24px 26px; border-bottom: 1px solid var(--linha-bronze); flex: none; }
#dsnav-drawer .hd h4 { font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--amarelo); margin: 0; }
#dsnav-drawer .hd .cl { color: var(--bronze); cursor: pointer; font-size: 15px; padding: 4px 8px;
  font-family: var(--voz-sagrada); letter-spacing: 0.1em; background: none; border: 0; }
#dsnav-drawer .hd .cl:hover { color: var(--amarelo); }
#dsnav-drawer .bd { overflow-y: auto; padding: 6px 0 48px; flex: 1; }
.dsnav-grp { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 12px; color: var(--bronze); padding: 22px 26px 8px; }
.dsnav-lnk { display: flex; align-items: center; gap: 12px; padding: 11px 26px; min-height: 44px;
  font-family: var(--voz-sagrada); font-size: 13px; letter-spacing: 0.03em; color: var(--fg2);
  text-decoration: none; border-left: 1px solid transparent; }
.dsnav-lnk .ix { font-size: 10px; color: var(--bronze); min-width: 22px; flex: none; }
.dsnav-lnk:hover { color: var(--bege); background: rgba(246,195,36,0.04); }
.dsnav-lnk.active { color: var(--amarelo); border-left-color: var(--amarelo); background: rgba(246,195,36,0.06); }
.dsnav-lnk.active .ix { color: var(--amarelo); }

/* ── panorama (sticker sheet) após o hero ── */
#dsnav-overview .dsov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 2px; background: var(--linha-fraca); border: 1px solid var(--linha-fraca); }
.dsov-col { background: var(--preto-2); padding: 26px 26px 30px; }
.dsov-col h4 { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 14px; color: var(--bronze); margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--linha-fraca); }
.dsov-col a { display: flex; gap: 11px; align-items: baseline; padding: 6px 0;
  font-family: var(--voz-sagrada); font-size: 13px; letter-spacing: 0.02em; color: var(--fg2); text-decoration: none; }
.dsov-col a .ix { font-size: 10px; color: var(--bronze); min-width: 20px; flex: none; }
.dsov-col a:hover { color: var(--amarelo); }
.dsov-col a:hover .ix { color: var(--amarelo); }

/* faixa de categoria no corpo da página (separa grupos de seções; lida pelo ds-navigator p/ agrupar o índice) */
.ds-group-label { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: 0.05em; font-size: clamp(13px,1.5vw,16px); color: var(--bronze); display: flex; align-items: center; gap: 20px; padding: 6px 0; }
.ds-group-label::before, .ds-group-label::after { content: ""; height: 1px; background: var(--linha-bronze); flex: 1; }

@media (prefers-reduced-motion: reduce){ html { scroll-behavior: auto; } #dsnav-drawer { transition: none; } }