@layer components {
  .manual { padding-block: calc(var(--header-height) + var(--space-7)) var(--space-section); }
  .manual__head { display: grid; gap: var(--space-4); justify-items: start; margin-block-end: var(--space-8); }
  .manual__title { font-size: var(--step-4); }
  .manual__layout { display: grid; gap: var(--space-7); }
  @media (min-width: 60em) {
    .manual__layout { grid-template-columns: var(--manual-toc-w) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
    .manual__nav { position: sticky; inset-block-start: var(--space-5); max-height: calc(100svh - 2 * var(--space-5)); overflow-y: auto; scrollbar-width: thin; }
    .manual__toc-title { pointer-events: none; }
    .manual__toc-title::after { display: none; }
  }

  /* contents */
  .manual__toc { border-radius: var(--radius-card); background: var(--color-surface-2); padding: var(--space-4) var(--space-5); }
  .manual__toc-title {
    display: flex; justify-content: space-between; align-items: center; min-height: var(--tap); cursor: pointer; list-style: none;
    font: 500 var(--font-size-small) / 1 var(--font-body); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted);
  }
  .manual__toc-title::-webkit-details-marker { display: none; }
  .manual__toc-title::after { content: "+"; font: 300 var(--step-1) / 1 var(--font-display); transition: transform var(--duration-2) var(--ease-out); }
  .manual__toc[open] .manual__toc-title::after { transform: rotate(45deg); }
  .manual__toc-list, .manual__toc-list ol { list-style: none; margin: 0; padding: 0; }
  .manual__toc-part { margin-block-start: var(--space-4); }
  .manual__toc-part > a { font-weight: 600; }
  .manual__toc a { display: flex; gap: var(--space-3); align-items: baseline; padding-block: var(--space-1); text-decoration: none; font-size: var(--font-size-small); line-height: var(--line-heading); }
  .manual__toc a:hover { text-decoration: underline; }
  .manual__toc ol a { color: var(--color-text-muted); }
  .manual__toc-num { font: 500 var(--font-size-small) / 1 var(--font-mono); color: var(--color-text-muted); opacity: 0.7; min-width: 1.6em; }

  /* chapters */
  .manual__content { display: grid; gap: var(--space-8); min-width: 0; }
  .manual__part { display: grid; gap: var(--space-5); scroll-margin-block-start: var(--space-6); }
  .manual__part-title { font-size: var(--step-3); margin-block-end: var(--space-2); }
  .manual__ch { display: grid; gap: var(--space-4); padding-block-start: var(--space-6); border-block-start: 1px solid var(--color-border); scroll-margin-block-start: var(--space-6); }
  .manual__ch-title { display: flex; gap: var(--space-4); align-items: baseline; font-size: var(--step-2); font-weight: 500; }
  .manual__num { font: 300 var(--step-2) / 1 var(--font-display); color: var(--color-text-muted); min-width: 1.6em; }
  .manual__body { color: var(--color-text-muted); }
  .manual__body b, .manual__body strong { color: var(--color-text); font-weight: 600; }
  .manual__body li::marker { color: var(--color-text-muted); }
  .manual__term { color: var(--color-text); text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
  .manual__term:hover { text-decoration-style: solid; }
  /* display colors as they look on the screen: on a black chip */
  .manual__body b[class^="c-"] { display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-1); background: var(--ink-950); font: 600 var(--font-size-small) / var(--line-body) var(--font-mono); letter-spacing: var(--tracking-nav); }
  .manual__body b.c-white { color: var(--white); }

  /* glossary */
  .manual__gl-intro { color: var(--color-text-muted); max-width: var(--measure); }
  .manual__gl-group { display: grid; gap: var(--space-3); padding-block-start: var(--space-5); }
  .manual__gl-title { font-size: var(--step-1); }
  .manual__gl-list { display: grid; gap: var(--space-3); margin: 0; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }
  .manual__gl-item { padding: var(--space-4) var(--space-5); border-radius: var(--radius-2); background: var(--color-surface); border: 1px solid var(--color-border); scroll-margin-block-start: var(--space-6); transition: box-shadow var(--duration-2) var(--ease-out); }
  .manual__gl-item:target { box-shadow: 0 0 0 var(--focus-ring) var(--color-focus); }
  .manual__gl-item dt { font-weight: 600; }
  .manual__gl-item dd { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--font-size-small); line-height: var(--line-body); }

  /* interactive illustrations (src/figures.js) on paper */
  .mfig { --fig-fg: var(--color-text); --fig-dim: color-mix(in oklch, var(--color-text) 45%, transparent); --fig-panel: var(--color-surface-2); --fig-jet: var(--color-surface);
    --fig-air: oklch(62% 0.11 240); --fig-lift: oklch(58% 0.15 155); --fig-weight: oklch(62% 0.16 45); --fig-thrust: oklch(56% 0.12 230); --fig-drag: oklch(55% 0.2 340); --fig-warn: oklch(62% 0.17 60); --fig-path: oklch(55% 0.2 340);
    margin: var(--space-2) 0; padding: var(--space-4) var(--space-5) var(--space-5); border-radius: var(--radius-2); background: var(--color-surface); border: 1px solid var(--color-border); }
  .mfig svg { display: block; width: 100%; height: auto; font-family: var(--font-body); }
  .mfig__ctl { display: grid; gap: var(--space-2); margin-block-start: var(--space-3); }
  .mfig__row { display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr minmax(5rem, 9rem); align-items: center; gap: var(--space-3); font-size: var(--font-size-small); color: var(--color-text-muted); }
  .mfig__row input { width: 100%; min-height: var(--tap); accent-color: var(--color-text); }
  .mfig__row output { font: 600 var(--font-size-small) / 1.2 var(--font-mono); color: var(--color-text); text-align: end; }
  .mfig__cap { margin-block-start: var(--space-3); font-size: var(--font-size-small); color: var(--color-text-muted); }
  .mfig__cap b { color: var(--color-text); }
  @media (max-width: 34em) { .mfig__row { grid-template-columns: 1fr auto; } .mfig__row input { grid-column: 1 / -1; grid-row: 2; } }
  /* the one-line idea that opens a chapter, and the "when you fly" takeaway that closes it */
  .manual__body .m-lead { font-size: var(--step-1); line-height: var(--line-heading); color: var(--color-text); }
  .manual__body .m-take { padding: var(--space-4) var(--space-5); border-radius: var(--radius-2); background: var(--color-surface-2); border-inline-start: 3px solid var(--color-text); color: var(--color-text); }
  /* labeled screenshots, wider than the text column */
  .manual__body .mshot { margin: var(--space-2) 0; }
  .manual__body .mshot img { display: block; width: 100%; height: auto; border-radius: var(--radius-2); }
  .mfig__seg { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-3); }
  .mfig__seg button { min-height: var(--tap); padding-inline: var(--space-4); border-radius: var(--radius-pill, 999px); border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text); font: 500 var(--font-size-small) var(--font-body); cursor: pointer; }
  .mfig__seg button[aria-pressed="true"] { background: var(--color-text); border-color: var(--color-text); color: var(--color-surface); }
}