/* The top bar shared by veilit.xyz/dashboard (Revenue) and veilit.xyz/burn (Buyback & burn): the same links in the same
   order on both (Home · Revenue · Buyback & burn · $VEIL), the current page marked with aria-current="page".
   Loaded after each page's own stylesheet; it uses their colour tokens (--fg, --fg-2, --line, --veil, --wrap). */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; border-bottom: 1px solid var(--line); background: rgba(5, 4, 11, 0.72); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); }
.top-in { max-width: var(--wrap); margin: 0 auto; min-height: 64px; display: flex; align-items: center; gap: 20px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.brand { flex: none; display: flex; align-items: center; }
.brand img { height: 24px; width: auto; display: block; }
.top-links { display: flex; align-items: center; gap: 4px; margin-right: auto; min-width: 0; }
/* every state keeps the text: the colour only moves between two readable shades, nothing is hidden or faded out */
.top-links a, .top-links a:visited { flex: none; padding: 8px 12px; border-radius: 10px; color: var(--fg-2); text-decoration: none; font-weight: 500; font-size: .92rem; line-height: 1.2; white-space: nowrap; opacity: 1; visibility: visible;
  transition: color .2s, background-color .2s, box-shadow .2s; }
.top-links a:hover, .top-links a:active { color: var(--fg); background: rgba(255, 255, 255, 0.06); }
.top-links a[aria-current="page"], .top-links a[aria-current="page"]:visited { color: var(--fg); background: rgba(160, 139, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(160, 139, 255, 0.32); }
.top-links a[aria-current="page"]:hover { background: rgba(160, 139, 255, 0.2); }
/* the focus ring is for the keyboard only, never left behind by a click */
.top a:focus { outline: none; }
.top a:focus-visible { outline: 2px solid var(--veil); outline-offset: 2px; }
/* phones: the links move to a second row under the logo and the button, all four still there */
@media (max-width: 640px) {
  .top-in { flex-wrap: wrap; row-gap: 6px; padding-block: 10px 8px; }
  .brand { margin-right: auto; }
  .top-links { order: 3; width: 100%; margin-right: 0; justify-content: space-between; gap: 2px; }
  .top-links a, .top-links a:visited { padding: 7px 9px; font-size: .84rem; }
}
@media (max-width: 360px) {
  .top-links a, .top-links a:visited { padding: 7px 6px; font-size: .8rem; }
}