/* The header the manual and the API reference share (internal/jam/docheader).

   Its colours come from whichever page it sits on: Scalar's variables on
   the API reference, so it follows Scalar's light and dark switch, else
   the manual's, which follow the reader's own setting, else the manual's
   light palette. The faces are the app's Source Sans and Source Serif,
   which both pages already load. */

.doc-top {
  position: sticky;
  top: 0;
  z-index: 100;
  box-sizing: border-box;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.25rem;
  font-family: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--scalar-background-1, var(--m-page, hsl(240 5% 98.5%)));
  color: var(--scalar-color-1, var(--m-ink, hsl(240 5% 15%)));
  border-bottom: 1px solid var(--scalar-border-color, var(--m-line, hsl(240 5% 90%)));
}

/* The mark, as the app's header draws it: the mascot, then the
   wordmark masked in the text colour so it follows light and dark. */
.doc-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: inherit;
  text-decoration: none;
  flex: none;
}
.doc-brand__mascot { display: block; height: 30px; width: auto; flex: none; }
.doc-brand__word {
  display: block;
  flex: none;
  width: 60px;
  height: 24px;
  transform: translateY(3px);
  background: currentColor;
  mask: url("/static/brand/jelly-wordmark.svg") center / contain no-repeat;
}
.doc-brand__title {
  font-family: "Source Serif 4", ui-serif, Georgia, serif;
  font-size: 1.0625rem;
  font-weight: 600;
  white-space: nowrap;
  padding-left: 0.6rem;
  border-left: 1px solid var(--scalar-border-color, var(--m-line, hsl(240 5% 90%)));
}
.doc-brand:hover .doc-brand__title { color: var(--scalar-color-accent, var(--m-accent, hsl(342 75% 55%))); }

.doc-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.9375rem;
  white-space: nowrap;
}
.doc-links a {
  color: var(--scalar-color-2, var(--m-muted, hsl(240 5% 38%)));
  text-decoration: none;
}
.doc-links a:hover { color: var(--scalar-color-1, var(--m-ink, hsl(240 5% 15%))); text-decoration: underline; }
.doc-links .doc-home { color: var(--scalar-color-accent, var(--m-accent, hsl(342 75% 55%))); font-weight: 600; }

/* A phone keeps the mark and the links that matter most: a page marks
   the rest doc-wide. */
@media (max-width: 720px) {
  .doc-top { padding: 0 0.875rem; }
  .doc-links { gap: 0.875rem; }
  .doc-links .doc-wide { display: none; }
  .doc-brand__title { font-size: 0.9375rem; }
}
@media (max-width: 420px) {
  .doc-brand__word { display: none; }
  .doc-brand__title { border-left: 0; padding-left: 0; }
}
/* The smallest phones: the title alone says which document this is,
   and the links close up, so that nothing overlaps at 320px. */
@media (max-width: 360px) {
  .doc-top { padding: 0 0.625rem; gap: 0.625rem; }
  .doc-brand__mascot { display: none; }
  .doc-links { gap: 0.625rem; font-size: 0.875rem; }
}