/* Shared Salt Tab nav for the legacy /data pages — mirrors the React site's
   consolidated 5-menu structure. Pure CSS (uses <details>), no JS needed.
   Scoped to .topnav-links so it rides on top of each page's existing bar. */
:root {
  --stx-ink: #1c1830;
  --stx-ink-soft: #4b4668;
  --stx-faint: #7a7596;
  --stx-bg: #ffffff;
  --stx-border: #e4e0ef;
  --stx-gold: #b8862b;
  --stx-violet: #5b3fb8;
}
:root[data-theme="dark"] {
  --stx-ink: #ece9f7;
  --stx-ink-soft: #b7b2cf;
  --stx-faint: #8a85a6;
  --stx-bg: #171426;
  --stx-border: #2e2a44;
  --stx-gold: #e0b455;
  --stx-violet: #a58bef;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --stx-ink: #ece9f7; --stx-ink-soft: #b7b2cf; --stx-faint: #8a85a6;
    --stx-bg: #171426; --stx-border: #2e2a44; --stx-gold: #e0b455; --stx-violet: #a58bef;
  }
}

.topnav-links { align-items: center; gap: 4px !important; }
.topnav-links .stxnav-home { font-weight: 700; color: var(--stx-violet) !important; }
.topnav-links .stxnav-group { position: relative; }
.topnav-links .stxnav-group > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 8px; border-radius: 8px; color: var(--stx-ink-soft); white-space: nowrap;
}
.topnav-links .stxnav-group > summary::-webkit-details-marker { display: none; }
.topnav-links .stxnav-group > summary::after { content: '▾'; font-size: 10px; opacity: 0.7; }
.topnav-links .stxnav-group[open] > summary { color: var(--stx-ink); }
.topnav-links .stxnav-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 230px;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--stx-bg); border: 1px solid var(--stx-border); border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.20);
}
.topnav-links .stxnav-panel a {
  display: block; padding: 9px 11px; border-radius: 9px; color: var(--stx-ink) !important;
  font-weight: 600; text-decoration: none; white-space: nowrap;
}
.topnav-links .stxnav-panel a:hover { background: color-mix(in srgb, var(--stx-gold) 15%, transparent); }

@media (max-width: 860px) {
  .topnav-links .stxnav-group { width: 100%; }
  .topnav-links .stxnav-panel { position: static; box-shadow: none; border: none; min-width: 0; padding: 0 0 4px 12px; }
}