/* The bar and the foot of the service's own pages (site.py writes them): sign-in,
   the API reference, the edge's other pages. Tokens from the design system, and
   none of its component classes: the API reference is Swagger's page, and Swagger
   has a .btn of its own. The site (site/) has its own copy, and they may differ. */

/* In-page links scroll rather than jump, on every page of ours, and land clear of the
   sticky bar; for anyone who asked for less motion they jump. */
html { scroll-behavior: smooth }
[id] { scroll-margin-top: 76px }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }

/* Its own box model: the docs page has no reset, and padding must not widen the bar. */
.site-bar, .site-bar *, .site-foot, .site-foot * { box-sizing: border-box }
.site-wrap { max-width: 1320px; margin: 0 auto; padding: 0 24px }
@media (max-width: 600px) { .site-wrap { padding: 0 16px } }

/* ---- the bar ---- */
.site-bar { position: sticky; top: 0; z-index: 40; background: var(--bg-base);
            border-bottom: 1px solid var(--border-divider); font-family: var(--font-sans) }
.site-bar .site-wrap { display: flex; align-items: center; gap: 28px; height: 60px }
.site-bar a { text-decoration: none }
.site-bar .site-lockup { display: flex; align-items: center; gap: 11px; color: var(--fg-primary) }
.site-mark svg { width: 24px; height: 24px; display: block }
.site-type { line-height: 0 }
.site-type svg { height: 17px; width: auto; display: block }

.site-nav { display: flex; align-items: center; gap: 4px; margin-left: auto }
.site-bar .site-link { padding: 6px 10px; border-radius: var(--radius-lg); white-space: nowrap;
                       color: var(--fg-secondary); font-size: var(--text-sm); font-weight: var(--weight-medium);
                       transition: color 150ms cubic-bezier(0, 0, .2, 1), background-color 150ms cubic-bezier(0, 0, .2, 1) }
.site-bar .site-link:hover { color: var(--fg-primary); background: var(--surface-hover) }
/* The page you are on. */
.site-bar .site-link[aria-current="page"] { color: var(--primary-ink); background: var(--primary-bg) }

.site-end { display: flex; align-items: center; gap: 12px }
.site-theme { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; cursor: pointer;
              border: 0; border-radius: var(--radius-lg); background: none; color: var(--fg-secondary);
              transition: color 150ms cubic-bezier(0, 0, .2, 1), background-color 150ms cubic-bezier(0, 0, .2, 1) }
.site-theme:hover { color: var(--fg-primary); background: var(--surface-hover) }
.site-moon { display: none }
:root[data-theme="dark"] .site-moon { display: block }
:root[data-theme="dark"] .site-sun { display: none }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-moon { display: block }
  :root:not([data-theme="light"]) .site-sun { display: none }
}
.site-bar :focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px }

@media (prefers-reduced-motion: reduce) { .site-bar *, .site-bar *::before, .site-bar *::after { transition: none !important } }
/* Narrow: two links and the theme fit beside the lockup; the bar only tightens. */
@media (max-width: 600px) { .site-bar .site-wrap { gap: 12px } .site-bar .site-link { padding: 6px 8px } }
@media (max-width: 400px) { .site-type svg { height: 15px } }

/* ---- the foot ---- */
.site-foot { padding: 32px 0 56px; color: var(--fg-tertiary); font: var(--text-sm)/1.55 var(--font-sans) }
.site-foot .site-wrap { display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: baseline; justify-content: space-between }
.site-note { margin: 0; max-width: 70ch }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px }
.site-foot .site-wrap a { color: var(--fg-secondary); text-decoration: none }
.site-foot .site-wrap a:hover { color: var(--fg-primary) }
/* A link in the page's note is a link in a sentence, and looks like one. */
.site-foot .site-note a { color: var(--fg-accent); text-decoration: underline; text-underline-offset: 2px }
.site-foot .site-note a:hover { color: var(--fg-primary) }