/* Shared chrome and layout primitives for the product page and documentation. */
body {
  --pad: clamp(20px, 4vw, 48px);
  background-image: none;
  color-scheme: dark;
  font-size: 15px;
  line-height: 1.7;
  scrollbar-color: var(--line-3) var(--bg);
}
a { text-underline-offset: 5px; }
:is(a, button, summary, pre):focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
:is(section, article, [id]) { scroll-margin-top: 88px; }
.site-wrap, .home-wrap { width: min(var(--maxw), 100%); margin-inline: auto; padding-inline: var(--pad); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 16px; z-index: 100; padding: 10px 16px; background: var(--accent); color: var(--bg); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.site-nav { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line-2); }
.nav-inner { display: flex; align-items: center; min-height: 64px; gap: 24px; }
.site-brand { display: inline-flex; align-items: center; font-weight: 600; font-size: 17px; min-height: 44px; flex-shrink: 0; }
.site-brand img { margin-right: 10px; }
.site-brand span { color: var(--accent); }
.site-links { display: flex; gap: 24px; margin-right: auto; margin-left: 24px; }
.site-links a { display: flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--text-2); }
.site-links a:hover { color: var(--text); text-decoration: underline; }
.site-links a[aria-current] { color: var(--accent); }
.site-nav .ver { color: var(--text-3); font-size: 12px; }
.nav-download { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; color: var(--accent); white-space: nowrap; }
.nav-download:hover { color: var(--text); }
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--accent); font-size: 13px; }
.text-link:hover { color: var(--text); text-decoration: underline; }
.section-title { display: flex; gap: 28px; align-items: center; margin-bottom: 36px; }
.ascii-rule { flex: 1; min-width: 20px; border-top: 1px dashed var(--line-3); }

@media (max-width: 760px) {
  .nav-inner { gap: 16px; min-height: 60px; }
  .site-links { margin-left: auto; margin-right: 0; gap: 16px; }
  .site-nav .ver, .section-link { display: none !important; }
  .nav-download { font-size: 12px; }
  .section-title { margin-bottom: 26px; gap: 16px; }
}