/* ux-navigation.css — shared chrome additions loaded via partials/footer.html
   on every opted-in page (after legal.css and page-local styles).

   Scope is intentionally narrow:
   1. URL-target scroll offsets, so deep links (#anchors) are not covered by
      the sticky topbar.
   2. Keyboard focus visibility for topbar navigation links.
   3. Compact responsive topbar on narrow viewports — all nav entries stay
      visible and wrapped; only spacing, logo height, and tap sizing shrink.
   4. The "Sign in" header button (a.signin): outlined, matching
      .btn-secondary in legal.css, next to the filled "Join open beta" CTA.
   5. A right-edge overflow affordance for horizontally scrolling comparison
      tables (.vs-table-wrap) on narrow viewports.

   Selectors are scoped to the .topbar / .vs-table-wrap surfaces so unrelated
   page content is not affected. */

:target {
  scroll-margin-top: 96px;
}

.topbar nav a.signin,
.topbar nav a.signin:visited {
  color: var(--fg);
  -webkit-text-fill-color: var(--fg);
  /* Outline as an inset shadow, not a border, so the button is exactly as
     tall as the borderless CTA next to it. */
  box-shadow: inset 0 0 0 1px var(--border);
  border-radius: 6px;
  font-weight: 500;
  white-space: nowrap;
  /* Same height as the CTA on every page family (home, downloads, legal.css):
     stretch to the nav row instead of hardcoding one page's button metrics. */
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  padding-left: 14px;
  padding-right: 14px;
}

.topbar nav a.signin:hover {
  color: var(--fg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 32%, var(--border));
}

.topbar nav a:focus-visible {
  outline: 2px solid var(--accent, #7fb2d2);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (max-width: 760px) {
  :target {
    scroll-margin-top: 128px;
  }

  /* Compact header. Higher-specificity, later-loaded variants of the
     legal.css / home / downloads topbar rules; height stays content-driven
     and the nav keeps flex-wrap so no link is hidden. */
  .topbar .topbar-inner {
    min-height: 0;
    height: auto;
    padding: 8px 0 10px;
    gap: 8px;
  }

  .topbar a.lockup img {
    height: 30px;
    width: auto;
  }

  .topbar nav {
    gap: 2px 12px;
    font-size: 0.875rem;
    line-height: 1.25;
  }

  .topbar nav a {
    padding: 5px 8px;
  }

  .topbar .topbar-inner nav a.cta {
    min-height: 0;
    padding: 6px 12px;
  }
}

/* Comparison tables declare min-width: 560px inside .vs-table-wrap
   (overflow-x: auto). Below a 599px viewport the wrap is always narrower
   than the table, so a right-edge fade is a truthful "more to the right"
   affordance. Above that width the table may fit, so no fade is drawn. */
@media (max-width: 599px) {
  .vs-table-wrap {
    background-image: linear-gradient(
      to right,
      transparent,
      color-mix(in srgb, var(--bg) 88%, transparent)
    );
    background-repeat: no-repeat;
    background-position: right;
    background-size: 28px 100%;
  }
}