/* Shared with the main site's typography, header spacing and automatic theme. */
:root { color-scheme: light dark; --ink: #333; --muted: #626b73; --green: #1677a6; --line: #dce0e3; --paper: #f8f9fa; --surface: #fff; --soft: #edf5fa; --accent: #cbeeff; }
/* Match the three reference columns: 266px + 850px + 200px. */
:root { --reference-width: 1316px; --header-width: 1180px; --header-gutter: 32px; }
body[data-lang] { --header-width: calc(var(--reference-width) - 50px); --header-gutter: 25px; }
.layout { max-width: var(--reference-width); }
body { font-family: 'Roboto', sans-serif; }
h1 { font-family: inherit; font-weight: 700; }
.site-header { position: static; display: block; height: auto; min-height: 0; padding: 0; border: 0; background: var(--paper); }
.site-header .header-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; width: min(var(--header-width), calc(100% - 2 * var(--header-gutter))); min-height: 0; padding: 20px 0; margin: auto; }
.site-header .brand { margin: 0; color: #2c3e50; text-decoration: none; gap: 10px; }
.site-header .brand strong { font-size: 24px; line-height: 1.6; letter-spacing: 0; }
.site-header .brand img { width: 30px; height: 30px; object-fit: contain; }
.site-nav { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-left: auto; }
.site-nav a { font-size: 16px; font-weight: 500; color: #2c3e50; }
.site-nav a[aria-current] { text-decoration: underline; text-underline-offset: 5px; }
.reference-toolbar { display: flex; align-items: center; gap: 20px; padding: 12px max(25px, calc((100% - var(--reference-width)) / 2 + 25px)); border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 5; min-height: 68px; }
.reference-toolbar .languages { margin-right: auto; }
.reference-toolbar #search-open { margin-left: 0; }
body[data-lang] #sidebar, body[data-lang] .toc { top: 68px; max-height: calc(100vh - 68px); }
.lead, main > p, main > ul, summary, .toc > span, .aside-note p { color: var(--muted); }
.portal-choice, .language-card, .topic-filter input, #search-input, #search-open, .languages [aria-current], .skip { background: var(--surface); color: var(--ink); }
#menu { color: var(--ink); }
#toast { background: var(--ink); color: var(--paper); }
@media (prefers-color-scheme: dark) {
  :root { --ink: #d1d5db; --muted: #b4bbc2; --green: #83c4eb; --line: #343b40; --paper: #121416; --surface: #1e2327; --soft: #1b303d; --accent: #26485c; }
  .site-header .brand, h1, h2, h3 { color: #f3f4f6; }
  .site-nav a { color: #e5e7eb; }
  .site-nav a:hover { color: #68cfff; }
  .site-header .brand img { filter: invert(1) hue-rotate(180deg); }
  .selected { background: var(--soft)!important; color: var(--green)!important; }
  .quick-links { background: var(--surface); border-color: var(--line); }
  .quick-links a + a { border-color: var(--line); }
  .quick-links span, .catalog b { color: var(--muted); }
  .brand-sub, .sidebar-title span { border-color: var(--line); }
  .callout { background: var(--soft); border-color: #31536a; color: var(--ink); }
  .warning, .warning-note { background: #352b1d; border-color: #9f7834; }
  .badge, .extension { background: #19394c; color: #a3d9f7; }
  .partial, .state, .noop { background: #3b321d; color: #f3d38c; }
  .rejected { background: #442920; color: #ffbaa2; }
  .catalog small { color: #f3d38c; }
  .code { background: #18252e; border-color: #3a5262; }
  .copy { background: #263e4e; }
  dialog::backdrop { background: #0009; }
}
@media (max-width: 760px) {
  .site-header .header-inner { width: calc(100% - 36px); padding-block: 18px; gap: 14px; }
  .site-nav { margin-left: 0; gap: 8px 18px; }
  .reference-toolbar { padding: 10px 18px; gap: 10px; flex-wrap: wrap; }
  .reference-toolbar .languages { order: 0; width: 100%; margin: 0; }
  .reference-toolbar #menu { display: block; }
  .reference-toolbar #search-open { margin-left: auto; }
  body[data-lang] #sidebar { top: var(--sidebar-top, 97px); max-height: calc(100vh - var(--sidebar-top, 97px)); }
  html { scroll-padding-top: 120px; }
}
@media print {
  :root { color-scheme: light; --ink: #111; --muted: #444; --green: #111; --line: #ddd; --paper: #fff; --surface: #fff; --soft: #f4f4f4; }
  .site-header, .reference-toolbar { display: none; }
}