/* muscles.dev stylesheet.
   One sheet for the site and the docs. System fonts only, no scripts, no external requests.
   Light theme by default, dark theme through prefers-color-scheme. */

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --surface: #f4f5f7;
  --surface-2: #e9ebef;
  --fg: #15191f;
  --muted: #5b6471;
  --line: #dde1e6;
  --line-strong: #c5cbd3;
  --accent: #1f4fc8;
  --accent-soft: #e8eefb;
  --ink: #15191f;
  --ink-fg: #ffffff;
  --ink-muted: #b4bcc8;
  --ink-line: #2d343d;
  --code-bg: #f4f5f7;
  --code-fg: #15191f;
  --kw: #1f4fc8;
  --str: #0f6b4f;
  --num: #8a4b00;
  --ok-fg: #146c43;
  --ok-bg: #e3f3ea;
  --plan-fg: #7c4400;
  --plan-bg: #fbf0da;
  --focus: #1f4fc8;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Ubuntu, Cantarell, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
  --radius: 6px;
  --radius-lg: 10px;
  --measure: 42rem;
  --wide: 74rem;
  --gutter: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1115;
    --surface: #151920;
    --surface-2: #1d222b;
    --fg: #e7eaef;
    --muted: #9aa3b1;
    --line: #262c35;
    --line-strong: #39414c;
    --accent: #8db2ff;
    --accent-soft: #172442;
    --ink: #e7eaef;
    --ink-fg: #0e1115;
    --ink-muted: #5b6471;
    --ink-line: #c5cbd3;
    --code-bg: #151920;
    --code-fg: #e7eaef;
    --kw: #8db2ff;
    --str: #7fdca0;
    --num: #f1c178;
    --ok-fg: #7fdca0;
    --ok-bg: #0f2a1a;
    --plan-fg: #f1c178;
    --plan-bg: #2b2110;
    --focus: #8db2ff;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1115;
  --surface: #151920;
  --surface-2: #1d222b;
  --fg: #e7eaef;
  --muted: #9aa3b1;
  --line: #262c35;
  --line-strong: #39414c;
  --accent: #8db2ff;
  --accent-soft: #172442;
  --ink: #e7eaef;
  --ink-fg: #0e1115;
  --ink-muted: #5b6471;
  --ink-line: #c5cbd3;
  --code-bg: #151920;
  --code-fg: #e7eaef;
  --kw: #8db2ff;
  --str: #7fdca0;
  --num: #f1c178;
  --ok-fg: #7fdca0;
  --ok-bg: #0f2a1a;
  --plan-fg: #f1c178;
  --plan-bg: #2b2110;
  --focus: #8db2ff;
}
:root[data-theme="light"] { color-scheme: light; }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent-soft); }

p, li, dd, figcaption, summary, blockquote { text-wrap: pretty; }
h1, h2, h3, h4 { color: var(--fg); font-weight: 650; letter-spacing: -0.015em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); line-height: 1.12; letter-spacing: -0.025em; margin-bottom: 1.1rem; }
h2 { font-size: clamp(1.45rem, 1.15rem + 1vw, 1.9rem); line-height: 1.2; margin: 2.75rem 0 0.9rem; }
h3 { font-size: 1.15rem; line-height: 1.35; margin: 1.75rem 0 0.5rem; }
h4 { font-size: 1rem; margin: 1.25rem 0 0.4rem; }
h1:first-child, h2:first-child, h3:first-child { margin-top: 0; }
/* A heading that is a whole sentence is set smaller, so it does not run to many lines on a phone. */
h1.sentence { font-size: clamp(1.5rem, 1.05rem + 1.7vw, 2.25rem); line-height: 1.2; letter-spacing: -0.02em; text-wrap: wrap; }
h2.sentence { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1.3; font-weight: 600; }
p, ul, ol, dl { margin: 0 0 1rem; }
li { margin-bottom: 0.35rem; }
li > ul, li > ol { margin-top: 0.35rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
strong { font-weight: 650; }
small { font-size: 0.875em; }

.lead { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); line-height: 1.5; color: var(--muted); max-width: var(--measure); }
.muted { color: var(--muted); }
.prose { max-width: var(--measure); }
.prose-wide { max-width: none; }
.prose > :last-child { margin-bottom: 0; }

/* Small label set in monospace capitals. Used above headings and in cards. */
.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.75rem;
}
.eyebrow .dot {
  display: inline-block;
  width: 0.5em; height: 0.5em;
  border-radius: 50%;
  background: var(--ok-fg);
  margin-right: 0.5em;
  vertical-align: 0.05em;
}

/* Code */
code, kbd, samp, pre { font-family: var(--mono); font-size: 0.9em; }
code {
  background: var(--code-bg);
  color: var(--code-fg);
  border: 1px solid var(--line);
  padding: 0.08em 0.35em;
  border-radius: 4px;
  overflow-wrap: anywhere;
}
pre {
  /* The shadow at an edge shows that the block scrolls sideways; the covers scroll with the text and hide it at the ends. */
  background:
    linear-gradient(to right, var(--code-bg) 40%, transparent) left center / 44px 100% no-repeat local,
    linear-gradient(to left, var(--code-bg) 40%, transparent) right center / 44px 100% no-repeat local,
    linear-gradient(to right, rgba(0, 0, 0, 0.22), transparent) left center / 14px 100% no-repeat scroll,
    linear-gradient(to left, rgba(0, 0, 0, 0.22), transparent) right center / 14px 100% no-repeat scroll,
    var(--code-bg);
  color: var(--code-fg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  overflow-x: auto;
  line-height: 1.5;
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
  tab-size: 2;
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; overflow-wrap: normal; }
.kw { color: var(--kw); font-weight: 600; }
.str { color: var(--str); }
.num { color: var(--num); }
.cm { color: var(--muted); font-style: italic; }

/* Tables */
.table-wrap {
  overflow-x: auto; margin: 0 0 1.5rem; border: 1px solid var(--line); border-radius: var(--radius);
  /* The shadow at an edge shows that the table scrolls sideways, as on a code block. */
  background:
    linear-gradient(to right, var(--bg) 40%, transparent) left center / 44px 100% no-repeat local,
    linear-gradient(to left, var(--bg) 40%, transparent) right center / 44px 100% no-repeat local,
    linear-gradient(to right, rgba(0, 0, 0, 0.22), transparent) left center / 14px 100% no-repeat scroll,
    linear-gradient(to left, rgba(0, 0, 0, 0.22), transparent) right center / 14px 100% no-repeat scroll,
    var(--bg);
}
.table-wrap > table { margin: 0; }
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; margin: 0 0 1.5rem; }
th, td { text-align: left; vertical-align: top; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--line); }
th { background: var(--surface); font-weight: 600; white-space: nowrap; font-size: 0.85rem; letter-spacing: 0.01em; }
tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }

/* Skip link */
.skip {
  position: absolute; left: -999px; top: 0.5rem; z-index: 20;
  background: var(--ink); color: var(--ink-fg);
  padding: 0.5rem 1rem; border-radius: var(--radius); text-decoration: none; font-weight: 600;
}
.skip:focus { left: 0.5rem; }

/* Page frame: header, main, footer share one width and gutter. */
header.site, main, footer.site { padding-left: var(--gutter); padding-right: var(--gutter); }
.bar { max-width: var(--wide); margin: 0 auto; }
main { max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding-top: 2.5rem; padding-bottom: 4rem; }
@media (min-width: 48rem) { :root { --gutter: 32px; } main { padding-top: 3.5rem; } }

/* Header */
header.site { border-bottom: 1px solid var(--line); background: var(--bg); }
header.site .bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.25rem 1.5rem; min-height: 4rem; padding: 0.5rem 0;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: var(--fg); text-decoration: none;
  font-family: var(--sans); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em;
  padding: 0.35rem 0;
}
.brand:hover { text-decoration: none; color: var(--fg); }
.brand .mark { width: 22px; height: 22px; flex: none; color: var(--fg); }
nav.main { display: flex; flex-wrap: wrap; gap: 0 0.25rem; margin-left: -0.6rem; }
nav.main a {
  color: var(--muted); text-decoration: none; font-weight: 500; font-size: 0.95rem;
  padding: 0.45rem 0.6rem; border-radius: var(--radius);
}
nav.main a:hover { color: var(--fg); background: var(--surface); }
nav.main a[aria-current="page"] { color: var(--fg); font-weight: 600; }
@media (max-width: 40rem) {
  header.site .bar { gap: 0 1rem; }
  nav.main { width: 100%; margin-left: -0.6rem; padding-bottom: 0.25rem; }
  nav.main a { padding: 0.35rem 0.6rem; font-size: 0.9rem; }
}

/* Buttons */
.button, .button-secondary {
  display: inline-block; text-decoration: none; font-weight: 600; font-size: 1rem; line-height: 1.2;
  padding: 0.75rem 1.2rem; border-radius: var(--radius); border: 1px solid transparent;
}
.button { background: var(--ink); color: var(--ink-fg); border-color: var(--ink); }
.button:hover { background: var(--accent); border-color: var(--accent); color: #ffffff; text-decoration: none; }
.button-secondary { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.button-secondary:hover { border-color: var(--fg); text-decoration: none; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; margin: 1.75rem 0 0; }
.actions p { margin: 0; }
.actions .quiet { color: var(--muted); font-size: 0.95rem; }

/* Hero */
.hero { padding: 0.5rem 0 1rem; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.hero-grid > * { min-width: 0; }
.hero .lead { margin-bottom: 0; }
@media (min-width: 60rem) {
  .hero { padding: 1.5rem 0 2rem; }
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 4rem; }
  /* The eyebrow starts level with the top edge of the card beside it. */
  .hero-grid > .prose { padding-top: 0.25rem; }
}

/* A code sample: a labelled window with a query and its result. */
.sample { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; margin: 0; display: flex; flex-direction: column; }
.sample-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.6rem 1rem; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--muted);
}
.sample-head .method { color: var(--fg); font-weight: 600; }
.sample pre { border: 0; border-radius: 0; margin: 0; background: var(--bg); padding: 1rem 1.1rem; flex: none; }
/* Long SQL lines wrap inside the card: clipped code hides the point of the example, and a sideways scroller would take the swipe. */
.sample pre, .sample pre code { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible; }
.sample .result { border-top: 1px solid var(--line); background: var(--surface); }
.sample .result table { font-family: var(--mono); font-size: 0.78rem; margin: 0; }
.sample .result th { background: var(--surface-2); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; }
.sample .result td { white-space: nowrap; }
.sample .result .table-wrap { border: 0; border-radius: 0; margin: 0; }
.sample figcaption { padding: 0.75rem 1rem 0.85rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
/* On a phone the result table fits the card: cells wrap (a timestamp breaks after its date) and
   the type is a little smaller, so no column is cut off at the edge. */
@media (max-width: 30rem) {
  .sample .result table { font-size: 0.68rem; }
  .sample .result th, .sample .result td { padding: 0.45rem 0.4rem; white-space: normal; }
  .sample .result td.n, .sample .result th.n { white-space: nowrap; }
  .sample figcaption { font-size: 0.85rem; }
}
.sample .cm { font-style: normal; }

/* The hero carousel: five sample cards stacked in one grid cell, so the block is as tall as the
   tallest card and the dots never move. A shorter card keeps its own height, so a short example is
   a short card rather than a card with an empty pane. Without a checked radio, one 50 s animation cycle shows
   each card for 10 s with a short cross-fade; the dots follow the same cycle. A checked radio
   (a click on a dot) stops every animation and shows that card for good. The radios are visually
   hidden and stay focusable, so the dots work from the keyboard. */
.carousel { display: grid; gap: 0.75rem; }
.carousel-pick { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.slides { display: grid; }
.slide {
  grid-area: 1 / 1; align-self: start;
  visibility: hidden; opacity: 0;
  animation: slide-cycle 50s linear infinite;
}
.slide:nth-child(1) { visibility: visible; opacity: 1; animation-delay: -50s; }
.slide:nth-child(2) { animation-delay: -40s; }
.slide:nth-child(3) { animation-delay: -30s; }
.slide:nth-child(4) { animation-delay: -20s; }
.slide:nth-child(5) { animation-delay: -10s; }
@keyframes slide-cycle {
  0%, 18% { opacity: 1; visibility: visible; }
  20%, 98% { opacity: 0; visibility: hidden; }
  100% { opacity: 1; visibility: visible; }
}
.carousel-dots { display: flex; justify-content: flex-end; gap: 0.25rem; order: -1; }
.carousel-dot {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.75rem; height: 1.75rem; padding: 0 0.5rem; border-radius: 999px; cursor: pointer;
  color: var(--line-strong);
  animation: carousel-dot-cycle 50s linear infinite;
}
/* The mark grows into a pill while its card shows, so the active dot is clear at a glance. */
.carousel-dot::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 999px; background: currentColor; animation: inherit; animation-name: carousel-pill-cycle; }
.carousel-dot:hover { color: var(--muted); }
.carousel-dot:nth-child(1) { color: var(--fg); animation-delay: -50s; }
.carousel-dot:nth-child(2) { animation-delay: -40s; }
.carousel-dot:nth-child(3) { animation-delay: -30s; }
.carousel-dot:nth-child(4) { animation-delay: -20s; }
.carousel-dot:nth-child(5) { animation-delay: -10s; }
@keyframes carousel-dot-cycle {
  0%, 19.9% { color: var(--fg); }
  20%, 100% { color: var(--line-strong); }
}
@keyframes carousel-pill-cycle {
  0%, 19.9% { width: 1.4rem; }
  20%, 100% { width: 0.6rem; }
}
/* A reader who points at or tabs into the card keeps the card they are reading. */
.carousel:hover .slide, .carousel:hover .carousel-dot, .carousel:hover .carousel-dot::before,
.carousel:focus-within .slide, .carousel:focus-within .carousel-dot, .carousel:focus-within .carousel-dot::before { animation-play-state: paused; }
/* A checked radio stops the cycle and pins its card. */
.carousel-pick:checked ~ .slides .slide { animation: none; visibility: hidden; opacity: 0; }
.carousel-pick:checked ~ .carousel-dots .carousel-dot { animation: none; color: var(--line-strong); }
.carousel-pick:checked ~ .carousel-dots .carousel-dot::before { animation: none; width: 0.6rem; }
#ex1:checked ~ .slides .slide:nth-child(1), #ex2:checked ~ .slides .slide:nth-child(2),
#ex3:checked ~ .slides .slide:nth-child(3), #ex4:checked ~ .slides .slide:nth-child(4),
#ex5:checked ~ .slides .slide:nth-child(5) { visibility: visible; opacity: 1; }
#ex1:checked ~ .carousel-dots .carousel-dot:nth-child(1), #ex2:checked ~ .carousel-dots .carousel-dot:nth-child(2),
#ex3:checked ~ .carousel-dots .carousel-dot:nth-child(3), #ex4:checked ~ .carousel-dots .carousel-dot:nth-child(4),
#ex5:checked ~ .carousel-dots .carousel-dot:nth-child(5) { color: var(--fg); }
#ex1:checked ~ .carousel-dots .carousel-dot:nth-child(1)::before, #ex2:checked ~ .carousel-dots .carousel-dot:nth-child(2)::before,
#ex3:checked ~ .carousel-dots .carousel-dot:nth-child(3)::before, #ex4:checked ~ .carousel-dots .carousel-dot:nth-child(4)::before,
#ex5:checked ~ .carousel-dots .carousel-dot:nth-child(5)::before { width: 1.4rem; }
#ex1:focus-visible ~ .carousel-dots .carousel-dot:nth-child(1), #ex2:focus-visible ~ .carousel-dots .carousel-dot:nth-child(2),
#ex3:focus-visible ~ .carousel-dots .carousel-dot:nth-child(3), #ex4:focus-visible ~ .carousel-dots .carousel-dot:nth-child(4),
#ex5:focus-visible ~ .carousel-dots .carousel-dot:nth-child(5) { outline: 2px solid var(--focus); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
  .slide, .carousel-dot, .carousel-dot::before { animation: none; }
  .carousel-dot:nth-child(1)::before { width: 1.4rem; }
}

/* Sections on marketing pages */
.section { padding: 3rem 0 0; }
.section + .section { margin-top: 3rem; border-top: 1px solid var(--line); }
.section-head { max-width: 52rem; margin-bottom: 1.75rem; }
.section-head h2 { margin: 0 0 0.6rem; }
.section-head p { margin: 0; color: var(--muted); font-size: 1.05rem; }

/* Three-up columns */
.cols { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); margin: 0 0 1.5rem; }
@media (min-width: 46rem) { .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.cols > div { border-top: 1px solid var(--line-strong); padding-top: 1rem; }
.cols h3 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.cols p { margin: 0; color: var(--muted); font-size: 0.98rem; }
.cols p a { color: var(--accent); }
.cols .idx { display: block; font-family: var(--mono); font-size: 0.75rem; color: var(--muted); letter-spacing: 0.08em; margin-bottom: 0.75rem; font-weight: 500; }

/* A list of uses, drawn as a two-column grid of short rows. */
.uses { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.25rem 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 46rem) { .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.uses li { margin: 0; padding: 0.85rem 0 0.85rem 1.6rem; border-bottom: 1px solid var(--line); position: relative; }
.uses li::before {
  content: ""; position: absolute; left: 0; top: 1.35rem;
  width: 0.55rem; height: 0.55rem; border-radius: 2px; background: var(--accent);
}

/* Panels */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem; margin: 2rem 0; }
.panel h2, .panel h3 { margin-top: 0; }
.panel p:last-child, .panel ul:last-child { margin-bottom: 0; }
.panel.inverse { background: var(--ink); color: var(--ink-fg); border-color: var(--ink); }
.panel.inverse h2, .panel.inverse h3, .panel.inverse strong { color: var(--ink-fg); }
.panel.inverse a { color: var(--ink-fg); }
.panel.inverse .eyebrow { color: var(--ink-muted); }
.panel.inverse .button { background: var(--ink-fg); color: var(--ink); border-color: var(--ink-fg); }
.panel.inverse .button:hover { background: var(--accent); color: #ffffff; border-color: var(--accent); }
.panel.inverse .button-secondary { color: var(--ink-fg); border-color: var(--ink-line); }
.panel.inverse .button-secondary:hover { border-color: var(--ink-fg); }
.panel.offer { padding: 2rem 1.5rem; }
.panel.offer .panel-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.panel.offer .panel-grid > * { min-width: 0; }
.panel.offer .lead { color: inherit; }
@media (min-width: 60rem) {
  .panel.offer { padding: 3rem; }
  .panel.offer .panel-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 3rem; }
}

/* Page head (features, beta, docs) */
.page-head { padding-bottom: 2rem; border-bottom: 1px solid var(--line); margin-bottom: 2rem; }
.page-head .lead { margin-top: 0; }
.page-head p:last-child { margin-bottom: 0; }

/* The short list of main features at the top of the features page. */
.mainlist { list-style: none; padding: 0; margin: 0 0 0.5rem; display: grid; gap: 0 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) { .mainlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mainlist li { margin: 0; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.mainlist a { font-weight: 600; text-decoration: none; }
.mainlist a:hover { text-decoration: underline; }
.mainlist span { display: block; color: var(--muted); font-size: 0.95rem; }

/* Compact feature rows: a title with its badge, then one sentence. */
.rows { list-style: none; padding: 0; margin: 0 0 1.5rem; border-top: 1px solid var(--line); }
.feature-grid + .rows { margin-top: 1.25rem; }
.rows li { margin: 0; padding: 0.7rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.15rem 1.5rem; scroll-margin-top: 1rem; }
.rows h3 { margin: 0; font-size: 1rem; line-height: 1.4; display: flex; justify-content: space-between; align-items: flex-start; gap: 0.2rem 0.75rem; }
.rows h3 .badge { flex: none; margin-top: 0.15em; }
/* On a wide screen the label, the badge and the text are three columns of the row, so the badges
   line up down the list and from one list to the next. The title spans the first two. */
@media (min-width: 52rem) {
  .rows li { grid-template-columns: minmax(0, 19rem) 6.5rem minmax(0, 1fr); gap: 0.15rem 1.25rem; }
  .rows p { max-width: 43rem; }
  .rows h3 { grid-column: 1 / 3; display: grid; grid-template-columns: subgrid; justify-items: start; }
}
.rows p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.rows p a { color: var(--accent); }
/* A command that must stay on one line, such as one with a double hyphen. */
code.nb { white-space: nowrap; }
/* A name in the first column of a reference table stays on one line. */
.prose-wide table.names-first td:first-child { white-space: nowrap; }
/* Function names in an inventory are set in monospace without the chip border. */
.names code { background: none; border: 0; padding: 0; }
.rows details { margin: 0; }
.prose details.families { background: none; border: 0; padding: 0; }
.prose details.families summary { font-size: 1rem; }

/* Group navigation on the features page */
.groupnav { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; list-style: none; margin: 2rem 0 1rem; }
.groupnav li { margin: 0; }
.groupnav a {
  display: inline-block; padding: 0.35rem 0.8rem; border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--fg); text-decoration: none; font-size: 0.9rem; font-weight: 500;
}
.groupnav a:hover { background: var(--surface); border-color: var(--fg); }

/* Feature groups and cards */
.group { padding-top: 2.5rem; margin-top: 1.5rem; border-top: 1px solid var(--line); scroll-margin-top: 1rem; }
.group h2 { margin: 0 0 0.5rem; }
/* The main list follows the page head, which already draws a rule. */
.group#main { border-top: 0; margin-top: 0; padding-top: 1rem; }
.group + .muted, .feature-grid + .muted { margin-top: 2rem; }
.group > .prose { color: var(--muted); margin-bottom: 1.5rem; }
.feature-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
/* A group with one card gives it the whole row. */
.feature-grid > .feature:only-child { grid-column: 1 / -1; }
.feature {
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg);
  padding: 1.25rem 1.35rem; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.6rem;
  scroll-margin-top: 1rem;
}
.feature-grid > .feature { margin: 0; }
.feature h3 { margin: 0; font-size: 1.1rem; line-height: 1.3; }
/* The badge sits above the title on every card, so card tops line up. */
.feature > .badge { align-self: flex-start; margin-bottom: -0.1rem; }
.feature p { margin: 0; }
.feature p:not(.example) { color: var(--fg); font-size: 0.98rem; }
.example {
  color: var(--muted); font-size: 0.93rem; line-height: 1.55;
  background: var(--surface); border-left: 2px solid var(--line-strong); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.7rem 0.9rem; margin-top: auto;
}
.example strong { color: var(--fg); font-weight: 600; }

/* Badges */
.badge {
  display: inline-block; font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2;
  padding: 0.3em 0.6em; border-radius: 4px; white-space: nowrap; vertical-align: middle;
}
.badge.available { color: var(--ok-fg); background: var(--ok-bg); }
.badge.planned { color: var(--plan-fg); background: var(--plan-bg); }
.lead .badge, p .badge { vertical-align: 0.1em; }
h2 .badge { font-size: 0.65rem; vertical-align: 0.2em; }

.todo { border: 1px dashed var(--plan-fg); color: var(--plan-fg); background: var(--plan-bg); padding: 1rem 1.25rem; border-radius: var(--radius); font-weight: 600; }

/* On a phone a command wraps instead of being cut off. A hex dump keeps its columns and scrolls, with the edge shadow as the hint. */
@media (max-width: 40rem) {
  .prose pre:not(.hex), .prose pre:not(.hex) code { white-space: pre-wrap; overflow-wrap: anywhere; }
}

/* Docs pages: the prose block carries the page. */
main > .prose:not(.page-head) > h1 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.4rem); padding-bottom: 1rem; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; }
.prose h2 { font-size: 1.35rem; margin-top: 2.5rem; padding-top: 0.25rem; }
.prose h2 + ul, .prose h2 + p { margin-top: 0.5rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: 0.5rem; }
.prose li::marker { color: var(--muted); }
.prose h2[id], .prose h3[id] { scroll-margin-top: 1rem; }
/* A page with a list of its sections: the text keeps its measure, and on a wide screen the list
   sits to the right of it and stays in view while the page scrolls. */
.with-toc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 4rem; align-items: start; }
.with-toc > .prose { min-width: 0; }
.toc { display: none; }
@media (min-width: 64rem) {
  .with-toc { grid-template-columns: minmax(0, var(--measure)) minmax(12rem, 18rem); }
  .toc { display: block; position: sticky; top: 1.5rem; font-size: 0.9rem; line-height: 1.45; }
  .toc > strong { display: block; font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.6rem; }
  .toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--line); }
  .toc li { margin: 0; }
  .toc a { display: block; padding: 0.3rem 0 0.3rem 1rem; margin-left: -1px; border-left: 1px solid transparent; color: var(--muted); text-decoration: none; }
  .toc a:hover { color: var(--fg); border-left-color: var(--fg); text-decoration: none; }
}
/* A prose block whose tables may be wider than the text. */
.prose.wide-tables { max-width: none; }
.prose.wide-tables > :not(.table-wrap) { max-width: var(--measure); }
.prose.wide-tables > .table-wrap { max-width: 60rem; }
.sidenav { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; padding: 0; margin: 0 0 1.5rem; list-style: none; }
.sidenav li { margin: 0; }
/* A contents list with sub-sections, in two columns on a wide screen. */
.contents { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 0 0 2rem; background: var(--surface); max-width: 60rem; }
.contents ol { list-style: none; }
.contents > strong { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; }
.contents > ol { list-style: none; padding: 0; margin: 0; }
@media (min-width: 48rem) { .contents > ol { column-count: 2; column-gap: 2rem; } }
.contents li { margin: 0; padding: 0.15rem 0; break-inside: avoid; }
.contents ol ol { display: block; padding-left: 1rem; font-size: 0.92rem; }
.contents ol ol li { padding: 0.05rem 0; }
.contents a { text-decoration: none; }
.contents a:hover { text-decoration: underline; }

/* Footer */
footer.site { border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 0.9rem; }
footer.site .bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; padding: 1.5rem 0; }
footer.site .bar > span { flex: 1 1 100%; }
footer.site a { color: var(--muted); text-decoration: none; }
footer.site a:hover { color: var(--fg); text-decoration: underline; }
@media (min-width: 48rem) {
  footer.site .bar { padding: 2rem 0; }
  footer.site .bar > span { flex: 1 1 auto; }
}

.feature.flagship { grid-column: 1 / -1; }
.feature pre { overflow-x: auto; }

/* Diagrams on the architecture page: one SVG file per theme, chosen by <picture>, drawn 400 units
   wide so the type scales to about 0.8 on a 360 px phone and about 1.7 at the full column width. */
.diagram { margin: 1.5rem 0 1.25rem; }
.diagram img { display: block; width: 100%; height: auto; }

/* Fold-outs for the engineering detail under each diagram. */
.prose details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 0.6rem 1rem; margin: 0 0 2rem; }
.prose summary { cursor: pointer; font-weight: 600; color: var(--fg); padding: 0.2rem 0; }
.prose details[open] summary { margin-bottom: 0.75rem; border-bottom: 1px solid var(--line); padding-bottom: 0.6rem; }
.prose details > :last-child { margin-bottom: 0.4rem; }

/* Byte-layout tables on the storage format page: the short columns stay on one line and the
   meaning column keeps a readable width. On a phone each row becomes a grid of the four short
   cells with the meaning under them, so nothing is cut off at the edge. */
.bytes td:not(:last-child), .bytes th { white-space: nowrap; }
.bytes td:last-child { min-width: 16rem; }
@media (max-width: 40rem) {
  .bytes tr { display: grid; grid-template-columns: 4.4rem 4.8rem 5rem minmax(0, 1fr); }
  .bytes th, .bytes td, .bytes td:not(:last-child) { display: block; white-space: normal; border-bottom: 0; padding: 0.5rem 0.25rem; }
  .bytes td:first-child, .bytes th:first-child { padding-left: 0.8rem; }
  .bytes tr { border-bottom: 1px solid var(--line); }
  .bytes tbody tr:last-child { border-bottom: 0; }
  .bytes thead th:last-child { display: none; }
  .bytes td:last-child { grid-column: 1 / -1; min-width: 0; padding: 0 0.8rem 0.6rem; color: var(--muted); }
}

/* Storage format page: a code token breaks only when it would overflow the line, so a phone does not split words. */
.format code { overflow-wrap: break-word; }
/* The other tables of the storage format page scroll sideways on a phone instead of squeezing their last column. */
.format .table-wrap:not(.bytes) td:last-child { min-width: 16rem; }

/* The other tables of the storage format page stack on a phone: the short cells in a row, the long last
   cell under them, so nothing is cut off and nothing scrolls. */
@media (max-width: 40rem) {
  .stack tr, .stack-2 tr, .stack-1 tr { display: grid; border-bottom: 1px solid var(--line); }
  .stack tr { grid-template-columns: 3rem 8.5rem minmax(0, 1fr); }
  .stack-2 tr { grid-template-columns: 4rem minmax(0, 1fr); }
  .stack-1 tr { grid-template-columns: minmax(0, 1fr); }
  .stack th, .stack td, .stack-2 th, .stack-2 td, .stack-1 th, .stack-1 td { display: block; border-bottom: 0; padding: 0.5rem 0.25rem; white-space: normal; }
  .stack td:first-child, .stack th:first-child, .stack-2 td:first-child, .stack-2 th:first-child, .stack-1 td, .stack-1 th { padding-left: 0.8rem; }
  .stack thead th:last-child, .stack-2 thead th:last-child, .stack-1 thead th:last-child { display: none; }
  .format .stack td:last-child, .format .stack-2 td:last-child, .format .stack-1 td:last-child { grid-column: 1 / -1; min-width: 0; padding: 0 0.8rem 0.6rem; color: var(--muted); }
  .stack tbody tr:last-child, .stack-2 tbody tr:last-child, .stack-1 tbody tr:last-child { border-bottom: 0; }
}

/* Theme toggle */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; padding: 0; flex: none;
  color: var(--muted); background: none; border: 1px solid transparent; border-radius: 6px; cursor: pointer;
}
.theme-toggle:hover { color: var(--fg); border-color: var(--line); }
.brand { order: 1; }
.theme-toggle { order: 2; margin-left: auto; }
nav.main { order: 3; flex-basis: 100%; }
@media (min-width: 48rem) {
  nav.main { order: 2; flex-basis: auto; margin-left: auto; }
  .theme-toggle { order: 3; margin-left: 0; }
}

/* Documentation pages: a menu beside the page, collapsed above it on a phone. */
.docs-main { min-width: 0; }
.docs-nav { margin-bottom: 1.5rem; font-size: 0.92rem; }
.docs-nav ul { list-style: none; margin: 0; padding: 0; }
.docs-nav li { margin: 0; }
.docs-nav a { display: block; padding: 0.25rem 0; color: var(--muted); text-decoration: none; }
.docs-nav a:hover { color: var(--fg); }
.docs-nav a[aria-current="page"] { color: var(--fg); font-weight: 600; }
.docs-nav summary { padding: 0.25rem 0; color: var(--muted); cursor: pointer; }
.docs-menu > summary { font-weight: 600; color: var(--fg); }
.docs-ref > ul { margin-left: 0.25rem; padding-left: 0.75rem; border-left: 1px solid var(--line); }
@media (min-width: 64rem) {
  .docs-layout { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 0 3rem; align-items: start; }
  .docs-nav { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow-y: auto; margin: 0; }
  .docs-menu > summary { display: none; }
}
.prose ul.doc-links, .doc-links { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.25rem 1.5rem; }
.doc-links li { margin: 0; }

/* Reference tables: names stay on one line, and the description takes the wrapping. */
.prose-wide td:first-child, .prose-wide td:first-child code { white-space: nowrap; }
.prose-wide td:last-child { min-width: 16rem; }
.prose-wide table { font-size: 0.86rem; }
.prose-wide th, .prose-wide td { padding: 0.5rem 0.6rem; }
/* A reference page uses the whole window, so the description column fits without scrolling. */
main.docs-wide { max-width: 100rem; }
body:has(main.docs-wide) header.site .bar, body:has(main.docs-wide) footer.site .bar { max-width: 100rem; }
@media (min-width: 64rem) {
  main.docs-wide { grid-template-columns: 11.5rem minmax(0, 1fr); gap: 0 2rem; }
}
.prose-wide td:not(:first-child) code { white-space: normal; overflow-wrap: anywhere; }
.prose-wide td:last-child { overflow-wrap: anywhere; }