/* The site navigation, for every page.
 *
 * A sidebar at desktop width, a top bar with a menu button below it. Loaded by
 * everything and loaded last, so where a page also carries performance.css
 * these rules win. Both palettes define their tokens on `.viz-root`, which
 * every page has on <body>, so one copy works against either.
 *
 * Why it moved. Thirteen links in a fixed-height row could not wrap without
 * breaking the header, so they scrolled inside it -- and everything past the
 * ninth sat off the edge behind a scrollbar that was deliberately hidden.
 * Down the side there is room for all of them, with the group headings that
 * make thirteen legible as five.
 *
 * The page content is moved over with padding on <body> rather than by wrapping
 * every template in a flex row: fifteen templates carry their own top-level
 * layout and rewrapping them all is a much larger change with much more to go
 * wrong. `:not(.embed)` keeps an embedded report full width, and `.pipe-page`
 * and the one template with no body class both still match.
 */

/* ------------------------------------------------------------------ */
/* Narrow: a top bar, with the links behind a button.                   */
/* ------------------------------------------------------------------ */

.site-head {
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-head-inner {
  align-items: center;
  display: flex;
  gap: 16px;
  /* performance.css sets `height: 58px` here -- a fixed height, from when this
     was a single row that could not be allowed to grow. It has to be undone
     explicitly: `min-height` does not override `height`, so on every page
     carrying that stylesheet the open menu was clipped to 58px and showed the
     wordmark and one group heading. */
  height: auto;
  min-height: 58px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1080px;
  padding: 0 22px;
}

.wordmark {
  color: var(--text-primary);
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.nav-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  font-size: 13.5px;
  padding: 6px 12px;
}

.site-nav {
  display: none;
  flex-direction: column;
  gap: 2px;
}

body.nav-open .site-nav {
  display: flex;
  flex-basis: 100%;
  padding: 6px 0 14px;
}

.nav-group {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-top: 12px;
  padding: 0 2px 2px;
}

.nav-group:first-child { margin-top: 2px; }

.site-nav a {
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 7px;
}

.site-nav a:hover { color: var(--text-primary); background: var(--surface-2, rgba(0,0,0,0.04)); }

/* Where you are. Not colour alone -- the weight and the rule carry it for
   anyone who cannot see the colour, and aria-current for anyone not looking. */
.site-nav a.active {
  color: var(--text-primary);
  font-weight: 600;
  background: var(--surface-2, rgba(0,0,0,0.05));
  box-shadow: inset 2px 0 0 var(--series-1, var(--brand-orange));
}

.head-badge {
  color: var(--text-secondary);
  font-size: 13px;
  white-space: nowrap;
}

/* The report pages keep their own h1 block, which used to carry the only way
   back. With navigation beside it that link is redundant. */
.site-head + .dash-wrap .dash-back,
.site-head ~ .dash-wrap .dash-back { display: none; }

@media (max-width: 640px) {
  .head-badge { display: none; }
  .site-head-inner { padding: 0 14px; gap: 12px; }
}

/* ------------------------------------------------------------------ */
/* Wide: a fixed sidebar, and the page moved over to clear it.          */
/* ------------------------------------------------------------------ */

@media (min-width: 1080px) {
  body.viz-root:not(.embed),
  body:not([class]) {
    padding-left: 224px;
  }

  .site-head {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 224px;
    border-bottom: none;
    border-right: 1px solid var(--border);
    overflow-y: auto;
    z-index: 20;
  }

  .site-head-inner {
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    height: auto;
    max-width: none;
    min-height: 0;
    padding: 20px 14px 24px;
  }

  /* The page's own name belongs on the bar, not stranded in a column of
     links. */
  .head-badge { display: none; }

  .wordmark {
    font-size: 16px;
    padding: 0 10px 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
  }

  .nav-toggle { display: none; }

  /* Always open at this width, whatever the narrow-screen toggle last did. */
  .site-nav,
  body.nav-open .site-nav {
    display: flex;
    flex-direction: column;
    padding: 0;
  }
}