/* =============================================================
   Theme tokens — single point of truth.
   Swap a theme by overriding these CSS custom properties under
   :root (or under [data-theme="dark"] etc.). All component rules
   reference tokens, never raw colors.
   ============================================================= */
:root {
  --color-bg:            #b7c5d0;
  --color-sidebar-bg:    #a5bdd3;
  --color-toc-bg:        #a5bdd3;
  --color-code-bg:       #dddfe8;
  --color-fg:            #000000;
  --color-fg-muted:      #565656;
  --color-accent:        #276b8f;
  --color-accent-fg:     #ffffff;
  --color-link:          #258ac7;
  --color-link-hover:    #348ebe;
  --color-header-bg:     #7ea2c0;
  --color-header-fg:     #131052;
  --color-rule:          #bababa;

  --font-sans:          system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:          "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --space-1:            0.25rem;
  --space-2:            0.5rem;
  --space-3:            0.75rem;
  --space-4:            1rem;
  --space-5:            1.5rem;
  --space-6:            2rem;

  --sidebar-width:      18rem;
  --header-height:      3rem;
  --content-max:        56rem;
  --radius:             4px;
}

/* =============================================================
   Reset / base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-fg);
  background: var(--color-bg);
}
a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); text-decoration: underline; }

/* =============================================================
   Header
   ============================================================= */
.site-header {
  position: sticky; top: 0; z-index: 10;
  height: var(--header-height);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-4);
  background: var(--color-header-bg);
  color: var(--color-header-fg);
  box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}
.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-header-fg);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.site-header .brand-icon {
  width: 1.75rem;
  height: 1.75rem;
  display: block;
}
.site-header .header-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 var(--space-4);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-header-fg);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.92;
}
.site-header .header-title:empty { display: none; }

/* Hamburger label — visible only on mobile */
.sidebar-toggle-checkbox { display: none; }
.sidebar-toggle-label {
  display: none;
  cursor: pointer;
  width: 1.5rem; height: 1.25rem;
  flex-direction: column; justify-content: space-between;
}
.sidebar-toggle-label span {
  display: block; height: 2px; background: var(--color-header-fg); border-radius: 1px;
}

/* =============================================================
   Layout — desktop default: sidebar + main side-by-side
   ============================================================= */
.site-sidebar {
  position: fixed;
  top: var(--header-height);
  left: 0;
  width: var(--sidebar-width);
  height: calc(100vh - var(--header-height));
  overflow-y: auto;
  padding: var(--space-4);
  background: var(--color-sidebar-bg);
  border-right: 1px solid var(--color-rule);
}
.site-main {
  margin-left: var(--sidebar-width);
  padding: var(--space-5) var(--space-6);
}
.site-main .page {
  max-width: var(--content-max);
  margin: 0 auto;
}
.site-footer {
  margin-left: var(--sidebar-width);
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--color-rule);
  color: var(--color-fg-muted);
  font-size: 0.9rem;
}

/* =============================================================
   Sidebar navigation
   ============================================================= */
.sidebar-nav details { margin: 0 0 var(--space-3); }
.sidebar-nav summary {
  cursor: pointer;
  font-weight: 600;
  padding: var(--space-2) 0;
  list-style: none;
}
.sidebar-nav summary::-webkit-details-marker { display: none; }
.sidebar-nav summary::before {
  content: "\25B8"; /* ▸ */
  display: inline-block;
  width: 1em;
  transition: transform 0.15s ease;
}
.sidebar-nav details[open] > summary::before {
  transform: rotate(90deg);
}
.sidebar-nav ul { list-style: none; padding: 0; margin: 0 0 0 var(--space-3); }
.sidebar-nav li { padding: var(--space-1) 0; line-height: 1.3; }
.sidebar-nav li.current > a { font-weight: 600; color: var(--color-fg); }
.sidebar-nav li.muted { color: var(--color-fg-muted); font-style: italic; }
.sidebar-nav .sidebar-link {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) 0;
  font-weight: 600;
}
.sidebar-nav .sidebar-link.current > a { color: var(--color-fg); }

/* =============================================================
   Article typography
   ============================================================= */
.page h1, .page h2, .page h3, .page h4, .page h5, .page h6 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  line-height: 1.2;
}
.page h1 { font-size: 2.2rem; }
.page h2 { font-size: 1.75rem; border-bottom: 1px solid var(--color-rule); padding-bottom: var(--space-2); }
.page h3 { font-size: 1.4rem; }
.page h4 { font-size: 1.2rem; }
.page h5 { font-size: 1rem; }
.page h6 { font-size: 1rem; font-style: italic; }
.page p, .page ul, .page ol { margin: 0 0 var(--space-4); }
.page hr { border: 0; border-top: 1px solid var(--color-rule); margin: var(--space-5) 0; }
.page blockquote {
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-left: 3px solid var(--color-accent);
  color: var(--color-fg-muted);
  background: var(--color-toc-bg);
}
.page table {
  border-collapse: collapse;
  margin: 0 0 var(--space-4);
  width: 100%;
}
.page th, .page td {
  border: 1px solid var(--color-rule);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: top;
}
.page th { background: var(--color-toc-bg); }
.page img { max-width: 100%; height: auto; }
.page code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--color-code-bg);
  padding: 0.1em 0.35em;
  border-radius: var(--radius);
}
.page pre {
  background: var(--color-code-bg);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  overflow-x: auto;
  margin: 0 0 var(--space-4);
}
.page pre code { background: transparent; padding: 0; font-size: 0.88em; }

/* Code blocks with line numbers (codehilite linenums="..."): Pygments emits a
   two-column table (td.linenos | td.code). The wrapper is the single rounded
   box AND the horizontal scroll container; the line-number column is pinned
   with position:sticky so it stays put while the code scrolls sideways. */
.page div.highlight:has(.highlighttable) {
  background: var(--color-code-bg);
  border-radius: var(--radius);
  overflow: auto;
  margin: 0 0 var(--space-4);
}
.page .highlighttable { width: 100%; border-collapse: separate; border-spacing: 0; }
.page .highlighttable td { padding: 0; vertical-align: top; }
.page .highlighttable pre { margin: 0; border-radius: 0; background: transparent; }
.page .highlighttable td.linenos {
  position: sticky;
  left: 0;
  width: 1%;
  white-space: nowrap;
  background: var(--color-code-bg);   /* opaque so scrolled code passes behind it */
  border-right: 1px solid var(--color-rule);
}
.page .highlighttable td.linenos pre {
  padding: var(--space-3);
  text-align: right;
  color: var(--color-fg-muted);
  user-select: none;            /* keep line numbers out of copied text */
}
.page .highlighttable td.code { width: 100%; }
.page .highlighttable td.code pre { padding: var(--space-3) var(--space-4); }
/* the highlighted line (hl_lines) spans the full width of the code column */
.page .highlight .hll { display: block; }

/* attr_list helpers used in the source markdown */
.size-big   { font-size: 1.15em; }
.size-small { font-size: 0.85em; line-height: 1.4; color: var(--color-fg-muted); }

/* =============================================================
   Buttons (inline `.btn` links inside an optional `.btn-row`)
   ============================================================= */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-5);
}
.btn-row > p { margin: 0; }
.page a.btn {
  display: inline-block;
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--color-accent);
  border-radius: 0.5rem;
  background: var(--color-bg);
  color: var(--color-accent);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}
.page a.btn:hover {
  background: var(--color-accent);
  color: var(--color-accent-fg);
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.page a.btn:active { transform: translateY(1px); }
.page a.btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-fg);
}
.page a.btn-primary:hover {
  background: var(--color-link-hover);
  border-color: var(--color-link-hover);
  color: var(--color-accent-fg);
}

/* =============================================================
   Landing-page components: hero, card grid, callout grid
   ============================================================= */
.hero {
  margin: 0 0 var(--space-6);
  padding: var(--space-5) 0 var(--space-4);
  border-bottom: 1px solid var(--color-rule);
}
.hero h1 {
  font-size: 2.6rem;
  margin: 0 0 var(--space-3);
  line-height: 1.1;
}
.hero .hero-tagline {
  font-size: 1.2rem;
  color: var(--color-fg-muted);
  max-width: 40rem;
  margin: 0 0 var(--space-4);
}
.hero .btn-row { margin-bottom: 0; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
}
.card {
  background: var(--color-toc-bg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}
.card h3 { margin: 0 0 var(--space-2); font-size: 1.15rem; }
.card h3 a { color: var(--color-fg); }
.card h3 a:hover { color: var(--color-link); text-decoration: none; }
.card p:last-child { margin-bottom: 0; }
.card .card-muted { color: var(--color-fg-muted); font-style: italic; }

.callout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
}
.callout {
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}
.callout p { margin: 0 0 var(--space-2); }
.callout p:last-child { margin-bottom: 0; }
.callout .callout-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-fg-muted);
}
.callout .callout-title { font-size: 1.1rem; font-weight: 600; }
.callout .callout-meta  { font-size: 0.85rem; color: var(--color-fg-muted); }

@media (max-width: 800px) {
  .card-grid, .callout-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2.1rem; }
  .hero .hero-tagline { font-size: 1.05rem; }
}

/* =============================================================
   API reference entries (core-library-documentation page)

   Each function or predefined variable is wrapped in
   `<div class="api-entry" id="name" markdown="1">` and contains
   a `tea`-fenced signature followed by a prose description.
   The wrapper provides the bordered-block look; the inner
   `.highlight` fence is flattened so it reads as one element.
   ============================================================= */
.api-entry {
  border-left: 3px solid var(--color-accent);
  background: var(--color-toc-bg);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-3);
  scroll-margin-top: calc(var(--header-height) + var(--space-3));
}
.api-entry > .highlight {
  background: transparent;
  margin: 0 0 var(--space-2);
  padding: 0;
  border-radius: 0;
}
.api-entry > .highlight pre {
  background: transparent;
  padding: 0;
  margin: 0;
}
.api-entry > .highlight pre code { font-size: 0.95em; }
.api-entry > p { margin: 0 0 var(--space-2); }
.api-entry > p:last-child { margin-bottom: 0; }
.api-entry:target,
.api-entry:has(:target) {
  border-left-width: 5px;
  background: var(--color-bg);
  box-shadow: 0 0 0 1px var(--color-accent);
}
/* Inner alias anchor for combined entries (e.g. _sqrt next to sqrt) —
   zero-height block so scroll-margin-top is honored when the fragment
   targets the alias. */
.api-anchor {
  display: block;
  height: 0;
  visibility: hidden;
  scroll-margin-top: calc(var(--header-height) + var(--space-3));
}
.api-entry.is-deprecated {
  border-left-color: var(--color-fg-muted);
  background: transparent;
}
.api-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.1em 0.5em;
  border-radius: var(--radius);
  background: var(--color-fg-muted);
  color: var(--color-bg);
  margin-right: var(--space-2);
  vertical-align: 0.15em;
}
.api-tag-deprecated { background: #b85a00; }

/* Lead-in prose under a category h3 (e.g. the Buffer Support
   preamble) — slightly softer so it reads as section context,
   not an entry. */
.api-lead {
  color: var(--color-fg-muted);
  margin: 0 0 var(--space-4);
}

/* =============================================================
   Page-level ToC (rendered above the article body)
   ============================================================= */
.toc {
  background: var(--color-toc-bg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-5);
  font-size: 0.85rem;
  line-height: 1.25;
}
.toc-title { font-weight: 600; margin: 0; font-size: 0.9rem; cursor: pointer; }
.toc ul { list-style: none; padding: 0; margin: 0; }
.toc li { padding: 0.1rem 0; }
/* ToC levels are normalized: the shallowest heading on the page is l1. */
.toc-l1 { padding-left: 0 !important; }
.toc-l2 { padding-left: var(--space-3) !important; }
.toc-l3 { padding-left: var(--space-4) !important; }
.toc-l4 { padding-left: var(--space-5) !important; }
.toc-l5 { padding-left: var(--space-6) !important; }

/* Collapsible ToC — outer wrapper is open by default,
   each per-section group starts closed. */
.toc details > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.toc details > summary::-webkit-details-marker { display: none; }
.toc details > summary::before {
  content: "▸";
  display: inline-block;
  width: 1em;
  margin-right: 0.15em;
  color: var(--color-fg-muted);
  transition: transform 0.12s ease;
}
.toc details[open] > summary::before { transform: rotate(90deg); }

/* Top-level leaves (no children) get a muted en-dash in the arrow
   column so they line up with the collapsible siblings. */
.toc-l1:not(.has-children)::before {
  content: "\2013";
  display: inline-block;
  width: 1em;
  margin-right: 0.15em;
  color: var(--color-fg-muted);
}

/* When the outer wrap is open, give the list a small top gap. */
.toc-wrap[open] > .toc-list { margin-top: var(--space-1); }

/* =============================================================
   Footer
   ============================================================= */
.site-footer a { color: var(--color-link); }

/* =============================================================
   Mobile layout — collapse sidebar behind a toggle
   ============================================================= */
@media (max-width: 800px) {
  .sidebar-toggle-label { display: flex; }
  .site-sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 9;
    width: min(80vw, var(--sidebar-width));
  }
  .sidebar-toggle-checkbox:checked ~ .site-sidebar {
    transform: translateX(0);
  }
  .site-main, .site-footer {
    margin-left: 0;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* Utility: keep a short token (e.g. "C++") from breaking across lines. */
.nowrap {
  white-space: nowrap;
}