/*
 * The portal's own chrome: the sticky bar and banner around each reference, and
 * the entry and not-found pages. Scalar styles itself.
 *
 * On a reference page the colours come from Scalar's theme variables, so the bar
 * follows Scalar's light and dark modes; the fallbacks are what the entry page,
 * which loads no Scalar, uses.
 *
 * The bar's height is FIXED and handed to Scalar as
 * `--scalar-custom-header-height`, which is how Scalar offsets its own sticky
 * sidebar and scroll targets below a page header. A bar that wrapped onto a
 * second line would sit over Scalar's content, so it never wraps: at narrow
 * widths the `.portal-wide` words drop out instead. The full banner is an
 * ordinary block that scrolls away.
 */

/* The page-wide constants. */
:root {
  --portal-bar-height: 48px;
  --scalar-custom-header-height: var(--portal-bar-height);
  --portal-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/*
 * The colours are declared on `body`, not `:root`, because that is where
 * Scalar's theme classes (`light-mode`, `dark-mode`) put its variables: read at
 * the root they are undefined, and every page would take the light fallbacks.
 */
body {
  --portal-bg: var(--scalar-background-1, #fff);
  --portal-bg-2: var(--scalar-background-2, #f6f6f6);
  --portal-fg: var(--scalar-color-1, #1b1b1b);
  --portal-fg-2: var(--scalar-color-2, #555);
  --portal-border: var(--scalar-border-color, #e0e0e0);
  --portal-accent: var(--scalar-color-accent, #0b57d0);
  --portal-warn-bg: #fff4d6;
  --portal-warn-fg: #5c4100;
}

body.dark-mode {
  --portal-warn-bg: #3a2f10;
  --portal-warn-fg: #f5dc9a;
}

/* The entry and not-found pages load no Scalar, so they follow the system. */
@media (prefers-color-scheme: dark) {
  body.portal-entry {
    --portal-bg: #151515;
    --portal-bg-2: #1f1f1f;
    --portal-fg: #e8e8e8;
    --portal-fg-2: #b0b0b0;
    --portal-border: #333;
    --portal-accent: #8ab4f8;
    --portal-warn-bg: #3a2f10;
    --portal-warn-fg: #f5dc9a;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--portal-bg);
  color: var(--portal-fg);
  font-family: var(--portal-font);
  line-height: 1.5;
}

.portal-bar {
  position: sticky;
  top: 0;
  /* Above Scalar's scrolling content, below its modals (z-index 10000). */
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--portal-bar-height);
  padding: 0 16px;
  overflow: hidden;
  white-space: nowrap;
  background: var(--portal-bg);
  border-bottom: 1px solid var(--portal-border);
  font-family: var(--portal-font);
  font-size: 14px;
}

.portal-bar a {
  color: var(--portal-fg);
  text-decoration: none;
}

.portal-bar a:hover,
.portal-bar a:focus-visible {
  text-decoration: underline;
}

.portal-brand {
  font-weight: 600;
}

.portal-switch {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--portal-border);
  border-radius: 6px;
}

.portal-switch a {
  padding: 2px 10px;
  border-radius: 4px;
  color: var(--portal-fg-2);
}

.portal-switch a[aria-current="page"] {
  background: var(--portal-bg-2);
  color: var(--portal-fg);
  font-weight: 600;
}

.portal-download {
  margin-left: auto;
}

.portal-marker {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--portal-warn-bg);
  color: var(--portal-warn-fg);
  font-size: 12px;
  font-weight: 600;
}

.portal-banner {
  padding: 12px 16px;
  background: var(--portal-warn-bg);
  color: var(--portal-warn-fg);
  font-size: 14px;
}

.portal-banner p {
  margin: 0;
  max-width: 72rem;
}

.portal-banner p + p {
  margin-top: 4px;
}

.portal-release {
  font-size: 13px;
}

.portal-noscript {
  display: block;
  padding: 16px;
}

.portal-page {
  max-width: 56rem;
  margin: 0 auto;
  padding: 32px 16px 48px;
}

.portal-page h1 {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.2;
}

.portal-page a {
  color: var(--portal-accent);
}

.portal-lead {
  margin: 0 0 20px;
  color: var(--portal-fg-2);
}

.portal-page .portal-banner {
  border-radius: 8px;
}

.portal-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 16px;
  margin: 24px 0;
  padding: 0;
  list-style: none;
}

.portal-card {
  padding: 16px 20px;
  border: 1px solid var(--portal-border);
  border-radius: 8px;
  background: var(--portal-bg-2);
}

.portal-card h2 {
  margin: 0 0 8px;
  font-size: 20px;
}

.portal-card p {
  margin: 0 0 12px;
}

.portal-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.portal-footnote {
  color: var(--portal-fg-2);
  font-size: 14px;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}

@media (max-width: 640px) {
  .portal-wide {
    display: none;
  }

  .portal-bar {
    gap: 10px;
    padding: 0 12px;
  }
}