/* ============================================================================
   servo documentation — editorial design system
   ----------------------------------------------------------------------------
   Serif display, sans body, mono code. Rules and whitespace do the structural
   work; there are no cards, pills, or shadows anywhere in this file.

   Two palettes, hand-tuned as equals rather than one derived from the other.
   Dark is declared twice: once under prefers-color-scheme (guarded so an
   explicit light choice still wins) and once under [data-theme="dark"] so the
   toggle wins in both directions. Every colour has its base definition on bare
   :root, so nothing depends on a media query having matched.

   The accent is spent sparingly and almost only on interaction: links, hover,
   and current-item marks. Structural rules stay neutral. That restraint is the
   design, not an oversight — a second accent-coloured element on a page is
   usually a mistake here.
   ========================================================================= */

:root {
  /* ground and ink */
  --bg:            #ffffff;
  --bg-subtle:     #f5f6f8;
  --bg-inset:      #eef0f3;
  --surface:       #ffffff;

  --text:          #0e1116;
  --text-muted:    #474f57;
  --text-faint:    #79818a;

  --rule:          #e3e6ea;
  --rule-strong:   #c6ccd3;

  --accent:        #1b4d89;
  --accent-hover:  #123a69;
  --accent-soft:   #ebf1f8;

  /* syntax */
  --syn-comment:   #79818a;
  --syn-keyword:   #8a3d6b;
  --syn-type:      #1b4d89;
  --syn-string:    #0f6e4f;
  --syn-number:    #a35200;
  --syn-func:      #0e1116;
  --syn-error:     #b3261e;

  /* type */
  --font-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino,
                  Georgia, "Times New Roman", serif;
  --font-body:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

  /* measure and frame */
  --measure:    34rem;   /* body text column — narrow, editorial */
  --measure-wide: 52rem; /* landing sections */
  --header-h:   4rem;
  --sidebar-w:  14rem;
  --toc-w:      13rem;

  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0b0d10;
    --bg-subtle:   #0f1114;
    --bg-inset:    #14171b;
    --surface:     #14171b;

    --text:        #e7eaed;
    --text-muted:  #99a1a9;
    --text-faint:  #6c747c;

    --rule:        #22262b;
    --rule-strong: #363c43;

    --accent:       #7fb2e5;
    --accent-hover: #a3c9ef;
    --accent-soft:  #11202f;

    --syn-comment: #6c747c;
    --syn-keyword: #d59ac2;
    --syn-type:    #7fb2e5;
    --syn-string:  #6fbf9b;
    --syn-number:  #e0a56a;
    --syn-func:    #e7eaed;
    --syn-error:   #f08a80;

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:          #0b0d10;
  --bg-subtle:   #0f1114;
  --bg-inset:    #14171b;
  --surface:     #14171b;

  --text:        #e7eaed;
  --text-muted:  #99a1a9;
  --text-faint:  #6c747c;

  --rule:        #22262b;
  --rule-strong: #363c43;

  --accent:       #7fb2e5;
  --accent-hover: #a3c9ef;
  --accent-soft:  #11202f;

  --syn-comment: #6c747c;
  --syn-keyword: #d59ac2;
  --syn-type:    #7fb2e5;
  --syn-string:  #6fbf9b;
  --syn-number:  #e0a56a;
  --syn-func:    #e7eaed;
  --syn-error:   #f08a80;

  color-scheme: dark;
}

/* ---------------------------------------------------------------- base ---- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

img, svg { max-width: 100%; height: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--rule-strong);
  padding: .6rem 1rem; font-size: .875rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ------------------------------------------------------------ masthead ---- */

.site-header {
  position: sticky; top: 0; z-index: 20;
  height: var(--header-h);
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--bg); }
}
.site-header__inner {
  max-width: 76rem; margin: 0 auto; height: 100%;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0 1.75rem;
}

.brand {
  display: flex; align-items: baseline; gap: .1rem;
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--text);
}
.brand:hover { color: var(--text); text-decoration: none; }
.brand__badge {
  font-family: var(--font-body); font-size: .58rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-faint); vertical-align: super; margin-left: .3rem;
}

.site-nav { display: flex; gap: 1.45rem; margin-left: 1.25rem; }
.site-nav a {
  font-size: .875rem; color: var(--text-muted);
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.site-nav a:hover,
.site-nav a.is-current {
  color: var(--text); text-decoration: none; border-bottom-color: var(--accent);
}

.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.search-open, .theme-toggle, .nav-toggle {
  display: inline-flex; align-items: center; gap: .45rem;
  background: none; border: 1px solid transparent; border-radius: 0;
  color: var(--text-muted); cursor: pointer;
  font-family: var(--font-body); font-size: .8rem;
  padding: .4rem .6rem;
}
.search-open:hover, .theme-toggle:hover, .nav-toggle:hover {
  color: var(--text); border-color: var(--rule);
}
.search-open svg, .theme-toggle svg, .nav-toggle svg {
  width: 1rem; height: 1rem; stroke: currentColor; fill: none;
}
.search-open kbd {
  font-family: var(--font-mono); font-size: .68rem;
  border: 1px solid var(--rule); padding: 0 .3rem;
  color: var(--text-faint);
}
.nav-toggle { display: none; }

.theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle__moon { display: block; }
}

/* ------------------------------------------------------------- reading ---- */

.layout {
  max-width: 76rem; margin: 0 auto;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
  gap: 3.5rem;
  padding: 0 1.75rem;
  align-items: start;
}

.sidebar {
  position: sticky; top: var(--header-h);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto; overscroll-behavior: contain;
  padding: 2.5rem 0 3rem;
  font-size: .875rem;
}
.sidebar__intro {
  display: block; color: var(--text-muted);
  padding: .3rem 0; margin-bottom: 1.5rem;
  font-family: var(--font-display); font-size: 1rem;
}
.sidebar__intro:hover, .sidebar__intro.is-current { color: var(--text); text-decoration: none; }

.sidebar__section { margin-bottom: 1.75rem; }
.sidebar__title {
  display: flex; align-items: baseline; gap: .55rem;
  font-family: var(--font-display); font-size: .95rem; font-weight: 600;
  color: var(--text); margin: 0 0 .5rem;
  padding-bottom: .4rem; border-bottom: 1px solid var(--rule);
  letter-spacing: -.005em;
}
.sidebar__part {
  font-family: var(--font-mono); font-size: .7rem;
  color: var(--text-faint); letter-spacing: .06em;
}
.sidebar__nav ul { list-style: none; margin: 0; padding: 0; }
.sidebar__nav li { margin: 0; }
.sidebar__nav li a {
  display: grid; grid-template-columns: 1.6rem 1fr; gap: .3rem;
  padding: .26rem 0; color: var(--text-muted);
  font-size: .85rem; line-height: 1.5;
}
.sidebar__nav li a:hover { color: var(--text); text-decoration: none; }
.sidebar__nav li a.is-current { color: var(--text); font-weight: 600; }
.sidebar__nav li a.is-current .sidebar__num { color: var(--accent); }
.sidebar__num {
  font-family: var(--font-mono); font-size: .72rem;
  color: var(--text-faint); font-variant-numeric: tabular-nums;
}

.sidebar__section-label {
  font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .14em; color: var(--text-faint);
  margin: 2rem 0 .6rem; padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.sidebar__aux { list-style: none; margin: 0; padding: 0; }
.sidebar__aux li a {
  display: block; padding: .26rem 0;
  color: var(--text-muted); font-size: .85rem;
}
.sidebar__aux li a:hover { color: var(--text); text-decoration: none; }
/* The reference sidebar lists unnumbered pages as .sidebar__aux links, so the
   current-page marker has to work here too, not only in the numbered grid. */
.sidebar__aux li a.is-current { color: var(--text); font-weight: 600; }

.content { min-width: 0; padding: 2.5rem 0 5rem; }

/* on-this-page rail */
.toc {
  position: sticky; top: var(--header-h);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto; overscroll-behavior: contain;
  padding: 2.5rem 0 3rem; font-size: .82rem;
}
.toc__label {
  font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .14em; color: var(--text-faint); margin: 0 0 .7rem;
}
.toc__list { list-style: none; margin: 0; padding: 0; }
.toc__list li { margin: 0 0 .35rem; }
.toc__list a { color: var(--text-muted); display: block; line-height: 1.45; }
.toc__list a:hover { color: var(--text); text-decoration: none; }
.toc__list a.is-active { color: var(--text); font-weight: 600; }
.toc__list .toc-h3 a { padding-left: .85rem; font-size: .78rem; }

.toc__inner { }
.toc__title, .toc__label {
  font-size: .68rem; font-weight: 650; text-transform: uppercase;
  letter-spacing: .14em; color: var(--text-faint); margin: 0 0 .7rem;
}
/* Nested headings are indented by the generator adding .toc--h3 to the li. */

/* "Edit this page" — deliberately quiet, below the pager. */
.page-foot {
  margin-top: 2rem; padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-size: .8rem;
}
.page-foot a { color: var(--text-faint); }
.page-foot a:hover { color: var(--accent); }

.icon-link { font-size: .8rem; color: var(--text-muted); padding: .4rem .6rem; }
.icon-link:hover { color: var(--text); text-decoration: none; }

/* --------------------------------------------------------------- prose ---- */

.prose { max-width: var(--measure); }

.breadcrumb {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .13em;
  color: var(--text-faint); margin-bottom: 1.6rem;
  display: flex; gap: .5rem; flex-wrap: wrap;
}
.breadcrumb a { color: var(--text-faint); }
.breadcrumb a:hover { color: var(--accent); }

.prose h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 4.5vw, 2.85rem); line-height: 1.13;
  letter-spacing: -.02em; margin: 0 0 1.75rem;
}
.prose > h1 + p {
  font-size: 1.15rem; line-height: 1.7; color: var(--text-muted);
}
.prose h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.5rem; line-height: 1.25; letter-spacing: -.012em;
  margin: 3rem 0 1rem; padding-top: 1.3rem;
  border-top: 1px solid var(--rule);
}
.prose h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.16rem; line-height: 1.35;
  margin: 2.1rem 0 .6rem;
}
.prose h4 {
  font-size: .95rem; font-weight: 650; margin: 1.6rem 0 .5rem;
  letter-spacing: .01em;
}
.prose h2:first-child, .prose h3:first-child { margin-top: 0; border-top: none; padding-top: 0; }

/* site.js appends a "#" link to every h2/h3 that kramdown gave an id. Kept out
   of the way until the heading is hovered or the link itself is focused, so it
   never competes with the heading in normal reading. */
.heading-anchor {
  margin-left: .45rem; color: var(--text-faint);
  font-family: var(--font-mono); font-size: .7em; font-weight: 400;
  opacity: 0; transition: opacity .12s ease;
  border-bottom: none;
}
.prose h2:hover .heading-anchor,
.prose h3:hover .heading-anchor,
.heading-anchor:focus-visible { opacity: 1; }
.heading-anchor:hover { color: var(--accent); text-decoration: none; }
@media (hover: none) { .heading-anchor { opacity: .45; } }

.prose p { margin: 0 0 1.3rem; }
.prose strong { font-weight: 650; color: var(--text); }
.prose em { font-style: italic; }

.prose a { border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.prose a:hover { text-decoration: none; border-bottom-color: var(--accent); }

.prose ul, .prose ol { margin: 0 0 1.3rem; padding-left: 1.2rem; }
.prose li { margin: .38rem 0; }
.prose li > ul, .prose li > ol { margin: .35rem 0; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li { position: relative; padding-left: 1.3rem; }
.prose ul > li::before {
  content: "\2022"; position: absolute; left: .3rem;
  color: var(--text-faint);
}
.prose ol { list-style: decimal; }
.prose ol > li::marker { color: var(--text-faint); }

blockquote {
  margin: 0 0 1.5rem; padding: 0 0 0 1.3rem;
  border-left: 2px solid var(--rule-strong);
  color: var(--text-muted);
}
blockquote p:last-child { margin-bottom: 0; }

hr { border: none; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

/* --------------------------------------------------------------- table ---- */

.table-wrap { overflow-x: auto; margin: 0 0 1.5rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.prose th, .prose td {
  text-align: left; padding: .55rem .9rem .55rem 0;
  border-bottom: 1px solid var(--rule); vertical-align: top;
}
.prose th {
  font-size: .68rem; font-weight: 650; text-transform: uppercase;
  letter-spacing: .12em; color: var(--text-faint);
  border-bottom-color: var(--rule-strong); white-space: nowrap;
}
.prose tbody tr:last-child td { border-bottom: none; }

/* ---------------------------------------------------------------- code ---- */

code {
  font-family: var(--font-mono);
  font-size: .875em;
  font-variant-ligatures: none;
}
.prose :not(pre) > code {
  background: var(--bg-subtle);
  border: 1px solid var(--rule);
  padding: .06em .32em;
}

.code-wrap { position: relative; margin: 0 0 1.5rem; }
.prose pre, .highlight pre, pre.highlight {
  font-family: var(--font-mono);
  font-size: .8125rem; line-height: 1.7;
  background: var(--bg-subtle);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 1.05rem 1.2rem;
  overflow-x: auto;
  margin: 0;
}
pre code { background: none; border: none; padding: 0; font-size: inherit; }
.highlighter-rouge { margin: 0 0 1.5rem; }
.code-wrap .highlighter-rouge { margin: 0; }

.copy-code, [data-copy] {
  position: absolute; top: .5rem; right: .5rem;
  background: var(--bg); border: 1px solid var(--rule);
  color: var(--text-faint); cursor: pointer;
  font-family: var(--font-body); font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .25rem .5rem; opacity: 0; transition: opacity .12s ease;
}
.code-wrap:hover .copy-code, .copy-code:focus-visible,
.code-wrap:hover [data-copy], [data-copy]:focus-visible { opacity: 1; }
.copy-code:hover, [data-copy]:hover { color: var(--text); border-color: var(--rule-strong); }
.copy-code.is-done, [data-copy].is-done { color: var(--accent); border-color: var(--accent); }

/* rouge tokens — one set, driven by the syntax vars above */
.highlight .c, .highlight .c1, .highlight .cm, .highlight .cs,
.highlight .cd { color: var(--syn-comment); font-style: italic; }
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp,
.highlight .kr, .highlight .kc { color: var(--syn-keyword); }
.highlight .kt, .highlight .nc, .highlight .nn { color: var(--syn-type); }
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb, .highlight .sc,
.highlight .sd, .highlight .se, .highlight .sh, .highlight .si, .highlight .sx,
.highlight .sr { color: var(--syn-string); }
.highlight .m, .highlight .mi, .highlight .mf, .highlight .mh, .highlight .mo,
.highlight .il { color: var(--syn-number); }
.highlight .nf, .highlight .fm { color: var(--syn-func); font-weight: 600; }
.highlight .nb, .highlight .bp { color: var(--syn-type); }
.highlight .o, .highlight .ow { color: var(--text-muted); }
.highlight .nt { color: var(--syn-keyword); }
.highlight .na { color: var(--syn-number); }
.highlight .err { color: var(--syn-error); }
.highlight .gd { color: var(--syn-error); }
.highlight .gi { color: var(--syn-string); }

/* Terminal output — servo's most distinctive asset, given its own frame
   rather than being rendered as one more code block. */
.terminal, .language-console .highlight, .language-term .highlight {
  font-family: var(--font-mono); font-size: .78rem; line-height: 1.7;
  background: var(--bg-subtle); color: var(--text-muted);
  border: 1px solid var(--rule); border-left: 2px solid var(--rule-strong);
  padding: 1.05rem 1.2rem; overflow-x: auto; white-space: pre;
  margin: 0 0 1.5rem;
}

/* ------------------------------------------------------------- diagram ---- */

.mermaid-figure {
  margin: 0 0 1.75rem;
  border: 1px solid var(--rule);
  background: var(--bg-subtle);
  padding: 1.6rem 1rem;
  text-align: center;
  overflow-x: auto;
}
.mermaid-figure svg { max-width: 100%; height: auto; }
/* Hide the raw source until mermaid has drawn it, so a slow CDN shows nothing
   rather than a flash of unrendered flowchart syntax. */
.mermaid-figure .mermaid:not([data-processed]) { visibility: hidden; }
.mermaid-figure.is-fallback .mermaid {
  visibility: visible; text-align: left; white-space: pre;
  font-family: var(--font-mono); font-size: .78rem; color: var(--text-muted);
}
.mermaid-figure figcaption {
  font-size: .78rem; color: var(--text-faint);
  margin-top: .9rem; font-style: italic;
}

/* --------------------------------------------------------------- pager ---- */

.pager {
  display: flex; justify-content: space-between; gap: 2rem;
  margin-top: 3.5rem; padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}
.pager__link { display: block; max-width: 20rem; }
.pager__link:hover { text-decoration: none; }
.pager__link--next { margin-left: auto; text-align: right; }
.pager__dir {
  display: block; font-size: .66rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--text-faint); margin-bottom: .15rem;
}
.pager__title {
  font-family: var(--font-display); font-size: 1.02rem;
  color: var(--text); line-height: 1.35;
}
.pager__link:hover .pager__title { color: var(--accent); }

/* --------------------------------------------------------------- home ---- */

.home { }
.sheet { max-width: var(--measure-wide); margin: 0 auto; padding: 0 1.75rem; }

/* padding-block only: the horizontal gutter belongs to .sheet, and a
   `padding` shorthand here would silently reset it to zero. */
.hero { padding-block: 6.5rem 4.5rem; border-bottom: 1px solid var(--rule); }
.hero__eyebrow {
  font-size: .7rem; font-weight: 650; text-transform: uppercase;
  letter-spacing: .16em; color: var(--text-faint); margin: 0 0 1.2rem;
}
.hero__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.6rem, 6.6vw, 4.5rem); line-height: 1.03;
  letter-spacing: -.026em; margin: 0 0 1.6rem; max-width: 15ch;
}
.hero__lede {
  font-size: 1.22rem; line-height: 1.65; color: var(--text-muted);
  max-width: 38rem; margin: 0 0 2rem;
}
.hero__lede strong { color: var(--text); font-weight: 600; }
.hero__negative {
  font-family: var(--font-mono); font-size: .8rem;
  color: var(--text-faint); margin: 0 0 2.2rem;
}
.hero__install {
  font-family: var(--font-mono); font-size: .84rem;
  color: var(--text-muted); background: var(--bg-subtle);
  border: 1px solid var(--rule); border-left: 2px solid var(--rule-strong);
  padding: .68rem 1rem; margin: 0 0 2.2rem; max-width: 34rem;
  overflow-x: auto; white-space: nowrap;
}
.hero__install::before { content: "$ "; color: var(--text-faint); }
.hero__cta { display: flex; align-items: baseline; gap: 1.9rem; flex-wrap: wrap; }
.cta {
  font-family: var(--font-display); font-size: 1.05rem;
  color: var(--text); border-bottom: 1px solid var(--accent); padding-bottom: 3px;
}
.cta:hover { color: var(--accent); text-decoration: none; }
.cta--quiet { border-bottom-color: var(--rule-strong); color: var(--text-muted); }
.cta--quiet:hover { color: var(--text); border-bottom-color: var(--text-muted); }

.band { padding: 4rem 0; border-bottom: 1px solid var(--rule); }
.band__inner { max-width: var(--measure-wide); margin: 0 auto; padding: 0 1.75rem; }
.section-eyebrow {
  font-size: .7rem; font-weight: 650; text-transform: uppercase;
  letter-spacing: .16em; color: var(--text-faint); margin: 0 0 1rem;
}
.section-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.55rem, 3vw, 2.05rem); line-height: 1.2;
  letter-spacing: -.016em; margin: 0 0 1.1rem; max-width: 24ch;
}
.section-lede { max-width: var(--measure); color: var(--text-muted); margin: 0 0 1.1rem; }
.section-lede strong { color: var(--text); font-weight: 600; }

/* Two-column comparison. `align-items: start` matters: the default `stretch`
   would equalise the columns, and the whole point of this one is that the two
   sides are not the same length. The divider is a rule on the second column
   rather than a separate element, so it lands exactly between them. */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2.25rem; margin-top: 1.5rem; align-items: start;
}
.split > figure:nth-child(2) { border-left: 1px solid var(--rule); padding-left: 2.25rem; }
.split figure, .solo { margin: 0; }

/* The shared premise above the comparison. Its caption rule runs the full
   width to tie it to both columns, but the code sits at its natural measure —
   the block is 54 characters wide and a full-bleed panel of mostly empty
   background would read as a mistake rather than as restraint. */
.solo { margin-top: 2.25rem; }
.solo > .highlight, .solo > .highlighter-rouge { max-width: var(--measure); }

.split figcaption, .solo figcaption {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-faint); margin-bottom: .7rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--rule);
}
/* The line count is the comparison's actual finding, so it is set as data:
   mono, and the one place tabular figures matter on this page. */
.fig-count {
  font-family: var(--font-mono); font-size: .7rem;
  letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums;
  white-space: nowrap; flex: none;
}

/* landing table of contents — parts numbered in roman, chapters as a list */
.toc-parts { margin-top: 2.5rem; }
.part { margin-bottom: 2.75rem; }
.part:last-child { margin-bottom: 0; }
.part__head {
  display: flex; align-items: baseline; gap: 1rem;
  padding-bottom: .55rem; margin-bottom: .85rem;
  border-bottom: 1px solid var(--rule);
}
.part__num {
  font-family: var(--font-mono); font-size: .78rem;
  color: var(--text-faint); letter-spacing: .06em; min-width: 2.5ch;
}
.part__title {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 600;
  margin: 0; letter-spacing: -.01em;
}
.part__summary {
  font-size: .84rem; color: var(--text-faint);
  margin-left: auto; text-align: right; max-width: 26rem;
}
.part ol { list-style: none; margin: 0; padding: 0; }
.part li { border-bottom: 1px solid var(--rule); }
.part li:last-child { border-bottom: none; }
.chapter {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem;
  padding: .72rem 0; align-items: baseline; color: var(--text);
}
.chapter:hover { text-decoration: none; }
.chapter:hover .chapter__title { color: var(--accent); }
.chapter__num {
  font-family: var(--font-mono); font-size: .78rem;
  color: var(--text-faint); font-variant-numeric: tabular-nums;
}
/* Reference pages are looked up, not numbered, so their rows on the landing
   page collapse the numeral column the tutorial's chapter rows reserve. */
.chapter--plain { grid-template-columns: minmax(0, 1fr); }
.chapter__title {
  display: block; font-family: var(--font-display);
  font-size: 1.04rem; font-weight: 600; line-height: 1.35;
}
.chapter__blurb {
  display: block; font-size: .86rem; color: var(--text-faint);
  margin-top: .12rem; line-height: 1.5;
}

/* -------------------------------------------------------------- search ---- */

.search-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(3px);
  display: flex; justify-content: center; padding-top: 12vh;
}
.search-overlay[hidden] { display: none; }
.search-panel {
  width: min(38rem, calc(100vw - 2rem)); height: fit-content;
  max-height: 70vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--rule-strong);
}
.search-input {
  font-family: var(--font-body); font-size: 1rem;
  padding: .95rem 1.1rem; border: none; border-bottom: 1px solid var(--rule);
  background: none; color: var(--text); width: 100%;
}
.search-input:focus { outline: none; }
.search-input::placeholder { color: var(--text-faint); }
.search-results { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.search-results li { border-bottom: 1px solid var(--rule); }
.search-results li:last-child { border-bottom: none; }
.search-results a { display: block; padding: .7rem 1.1rem; color: var(--text); }
.search-results a:hover, .search-results li.is-active a {
  background: var(--bg-subtle); text-decoration: none;
}
/* site.js builds each row as .r-title + .r-crumb (section and snippet share
   the crumb), and wraps query matches in <mark>. These names are the contract;
   the stylesheet follows the markup, not the other way round. */
.search-results .r-title {
  display: block; font-family: var(--font-display);
  font-size: .98rem; font-weight: 600; line-height: 1.35;
}
.search-results .r-crumb {
  display: block; font-size: .8rem; color: var(--text-faint);
  margin-top: .12rem; line-height: 1.5;
}
.search-results mark {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--text); padding: 0 .12em;
}
.search-empty { padding: 1.1rem; color: var(--text-faint); font-size: .9rem; }

/* -------------------------------------------------------------- footer ---- */

.site-footer {
  border-top: 1px solid var(--rule);
  padding: 2.5rem 0; font-size: .82rem; color: var(--text-faint);
}
.site-footer__inner {
  max-width: 76rem; margin: 0 auto; padding: 0 1.75rem;
  display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: baseline;
}
.site-footer__inner > div:first-child { max-width: 32rem; }
.site-footer strong { font-family: var(--font-display); font-weight: 600; color: var(--text); }
.site-footer .muted { color: var(--text-faint); }
.site-footer__links { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-left: auto; }
.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--accent); }

/* --prev needs no rule: it takes the default left alignment. Named in the
   markup anyway so the pair reads symmetrically and either can be targeted. */

/* --------------------------------------------------------- page shell ---- */

/* Preface, comparison and limitations render no sidebar, so the narrow
   editorial measure buys nothing here — it only pushes wide content (the
   comparison table especially) into a column half the width of the page.
   These pages get the landing page's measure instead. .prose caps itself
   at --measure, so it has to be released as well as widened. */
.page-shell { max-width: 60rem; margin: 0 auto; padding: 0 1.75rem; }
.page-shell .content { max-width: var(--measure-wide); margin: 0 auto; width: 100%; }
.page-shell .prose { max-width: none; }

/* ---------------------------------------------------------- responsive ---- */

@media (max-width: 68rem) {
  .layout { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); gap: 2.75rem; }
  .toc { display: none; }
}
@media (max-width: 54rem) {
  :root { --header-h: 3.5rem; }
  .layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* The hamburger is rendered only where a #sidebar exists (see default.html),
     so the primary nav must stay reachable on every other page. It scrolls
     horizontally rather than disappearing. */
  .nav-toggle { display: inline-flex; }
  .site-nav {
    margin-left: .5rem; gap: 1rem; font-size: .82rem;
    overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { white-space: nowrap; }
  .sidebar {
    position: fixed; inset: var(--header-h) 0 auto 0; z-index: 15;
    max-height: calc(100vh - var(--header-h));
    background: var(--bg); border-bottom: 1px solid var(--rule);
    padding: 1.5rem 1.75rem 2rem; display: none;
  }
  .sidebar.is-open { display: block; }
  /* Backdrop site.js inserts behind the open mobile sidebar; clicking it closes. */
  .nav-scrim {
    position: fixed; inset: 0; z-index: 14;
    background: color-mix(in srgb, var(--text) 30%, transparent);
  }
  /* Stacked, so the divider has to turn with the axis: a left rule on a
     full-width column would sit down its outer edge and read as a quote. */
  .split { grid-template-columns: 1fr; }
  .split > figure:nth-child(2) {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--rule); padding-top: 2.25rem;
  }
  /* The measure cap only exists to stop a wide empty panel; once the column
     is narrow it would shrink the block below the width it already has. */
  .solo > .highlight, .solo > .highlighter-rouge { max-width: none; }
  .hero { padding-block: 4rem 3rem; }
  .part__summary { display: none; }
  .pager { flex-direction: column; gap: 1.25rem; }
  .pager__link--next { margin-left: 0; text-align: left; }
}
@media (max-width: 34rem) {
  body { font-size: 1rem; }
  .site-header__inner { gap: .8rem; padding: 0 1rem; }
  .search-open span, .search-open kbd { display: none; }
  .brand__badge { display: none; }
  .icon-link { display: none; }   /* GitHub lives in the footer too */
}

@media print {
  .site-header, .sidebar, .toc, .pager, .search-overlay,
  .copy-code, [data-copy], .heading-anchor, .nav-scrim { display: none; }
  .layout { grid-template-columns: 1fr; }
  .prose { max-width: none; }
}