/* The top bar. On computers it inverts against whatever passes under it, so it reads over every scene. */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--bar-h);
  padding: max(14px, env(safe-area-inset-top, 0px)) max(var(--margin), env(safe-area-inset-right, 0px)) 14px max(var(--margin), env(safe-area-inset-left, 0px));
  color: #fff;
  mix-blend-mode: difference;
}
.topbar a { color: inherit; }
/* The logo's size is in the page head. These only apply while it moves. */
.logo-ink.moving svg { will-change: transform; }
.logo-dust { position: absolute; pointer-events: none; }
.logo-lit { pointer-events: none; -webkit-mask: linear-gradient(105deg, transparent 38%, #000 50%, transparent 62%) 0 0 / 300% 100% no-repeat; mask: linear-gradient(105deg, transparent 38%, #000 50%, transparent 62%) 0 0 / 300% 100% no-repeat; }
.topbar-nav { display: flex; gap: clamp(14px, 2vw, 28px); }
.topbar-nav a { text-decoration: none; font-size: 15px; font-weight: 500; }
.topbar-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.topbar-end { display: flex; align-items: center; gap: 10px; }
.topbar .nv-btn { background: #fff; color: #000; }
.topbar .nv-theme { background: none; color: #fff; }

/* Inversion fails over mid-greys, so scenes full of them get a frosted band instead. */
.topbar.over-scene {
  mix-blend-mode: normal;
  color: var(--ink);
  background: color-mix(in srgb, var(--ground) 68%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.topbar.over-scene .nv-btn { background: var(--ink); color: var(--ground); }
.topbar.over-scene .nv-theme { color: var(--ink); }
.topbar.over-scene .topbar-menu summary span { background: var(--ink); }

.topbar-menu { display: none; position: relative; }
.topbar-menu summary { display: grid; place-content: center; gap: 6px; width: 44px; height: 44px; cursor: pointer; list-style: none; }
.topbar-menu summary::-webkit-details-marker { display: none; }
.topbar-menu summary span { display: block; width: 22px; height: 2px; background: #fff; }
.topbar-menu nav {
  position: absolute;
  right: 0;
  top: 54px;
  display: grid;
  min-width: 190px;
  padding: 8px;
  border-radius: 16px;
  background: #fff;
  color: #000;
}
.topbar-menu nav a { padding: 12px 14px; text-decoration: none; font-weight: 500; }

@media (max-width: 760px) {
  .topbar-nav { display: none; }
  .topbar-menu { display: block; }
  .topbar .nv-theme { width: 40px; }
}