/* ==========================================================================
   AI explained: the pages that are not the chapters: the glossary (a term page and the index), the guides, the about page. Loaded after style.css
   and nav.css by technical/ and by every page below the version folder. Tokens only, as in DESIGN.md.
     - a term page: the list of all terms at the left edge, the heading with its icon, the place in the kitchen, definition, related terms, detail, references
     - the glossary: filter, A to Z (default) or by topic, cards with icons
     - the guides: a pinboard of notes, and a long guide with a list of its parts at the left edge
     - the about page
   ========================================================================== */

/* ---------- A page with a list at its left edge: a term (all terms) and a guide (its parts) ---------- */
/* The list sits against the left edge of the window, outside the text. The text is centred in the window, and where the window is too narrow for both, it
   takes what is left beside the list. Below 960px the list is a closed box above the text. */
.stage:has(.side-layout) { padding-inline: 0; }
.side-layout {
  --side-w: 296px; --text-w: 780px;
  display: grid; grid-template-columns: minmax(var(--side-w), 1fr) minmax(0, var(--text-w)) minmax(0, 1fr); align-items: start; padding-top: 15px;
}
.side-layout-guide { --text-w: 860px; }
.side-layout > .side { grid-column: 1; align-self: start; position: sticky; top: calc(var(--bar-h) + 16px); width: var(--side-w); padding-left: var(--gutter); box-sizing: content-box; max-width: calc(100% - var(--gutter)); }
.side-layout > .page { grid-column: 2; max-width: none; margin: 0; padding-top: clamp(4px, 2vh, 20px); padding-inline: clamp(20px, 3vw, 40px); }
/* The box is a plain frame. Its content sits in .gl-side-body, a div of our own that gets the height: a <details> keeps its content in a box of its own in current
   browsers, and a flex column set on the <details> never reached the list inside, which is why the list of terms could not scroll. */
.gl-side-box { border: 1px solid var(--rule-strong); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.gl-side-body {
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  max-height: calc(100vh - var(--bar-h) - 32px - 48px); max-height: calc(100dvh - var(--bar-h) - 32px - 48px);
}
.gl-side-box > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 46px; padding: 0 14px; cursor: pointer; list-style: none; flex: none;
  font: 600 var(--fs-md)/1.3 var(--sans); border-bottom: 1px solid transparent;
}
.gl-side-box > summary::-webkit-details-marker { display: none; }
.gl-side-box[open] > summary { border-bottom-color: var(--rule); }
.gl-side-tools { display: grid; gap: 8px; padding: 8px 10px 6px; flex: none; }
.gl-side-tools .gl-view { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gl-side-tools .gl-chip { justify-content: center; min-height: 34px; padding-inline: 8px; }
.gl-side-tools input {
  width: 100%; min-height: 36px; padding: 0 12px; border: 1px solid var(--rule-strong); border-radius: var(--r-pill); background: var(--paper);
  color: var(--ink); font: 400 var(--fs-md)/1 var(--sans);
}
.gl-side-tools input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
/* The list of terms takes the room the box has left, so the box is always as high as the window allows and does not change size while you type. */
.gl-side-terms { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 240px; }
.gl-side-page { flex: none; border-bottom: 1px solid var(--rule); }
.gl-side-sub { margin: 0; padding: 10px 14px 2px; font: 500 var(--fs-2xs)/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--clay-ink); }
.gl-side-page .gd-side-nav { padding: 4px 6px 8px; overflow: visible; }
.gl-side-page .gd-side-list a { padding-block: 5px; }
.gl-side-list { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 6px 12px; scrollbar-width: thin; }
.gl-side-group { margin-top: 8px; }
.gl-side-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 4px; font: 500 var(--fs-2xs)/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.gl-side-letter { font-size: var(--fs-sm); color: var(--clay-ink); border-bottom: 1px solid var(--rule); margin-bottom: 2px; }
.gl-side-list ul, .gd-side-list { margin: 0; padding: 0; list-style: none; }
.gl-side-list li, .gd-side-list li { margin: 0; }
.gl-side-list a, .gd-side-list a {
  display: block; padding: 5px 10px 5px 12px; border-left: 3px solid transparent; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font: 400 var(--fs-md)/1.35 var(--sans); color: var(--ink-2); text-decoration: none;
}
.gl-side-list a:hover, .gd-side-list a:hover { background: var(--paper-2); color: var(--ink); }
.gl-side-list a:focus-visible, .gd-side-list a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.gl-side-list a[aria-current], .gd-side-list a[aria-current] { background: var(--zt, var(--clay-soft)); border-left-color: var(--zc, var(--clay)); color: var(--ink); font-weight: 650; }
.gl-side-empty { padding: 4px 16px 14px; font: italic 400 var(--fs-sm)/1.4 var(--serif); color: var(--ink-3); }
/* The parts of a guide, and the one button under them. */
.gd-side-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 6px 6px; scrollbar-width: thin; }
.gd-side-list a { display: grid; grid-template-columns: 22px 1fr; gap: 6px; padding-block: 7px; }
.gd-side-list a > span:only-child { grid-column: 1 / -1; }
.gd-side-n { font: 500 var(--fs-xs)/1.9 var(--mono); color: var(--ink-3); }
.gd-side-foot { flex: none; padding: 10px 12px 12px; border-top: 1px solid var(--rule); }
.gd-side-all { width: 100%; justify-content: center; gap: 8px; }
.gd-side-all svg { width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease); }
.gd-side-all:hover svg { transform: translateX(2px); }
@media (min-width: 960px) {
  .gl-side-box > summary { pointer-events: none; cursor: default; }
}
@media (max-width: 1371px) and (min-width: 960px) {
  .side-layout { grid-template-columns: var(--side-w) minmax(0, 1fr); }
  .side-layout > .side { padding-left: var(--gutter); }
  .side-layout > .page { grid-column: 2; max-width: var(--text-w); margin-inline: auto; width: 100%; }
}
@media (max-width: 959px) {
  .side-layout { display: block; padding-inline: max(var(--gutter), var(--inset-l)) max(var(--gutter), var(--inset-r)); padding-top: 28px; } /* clear of the version tab that hangs from the top bar */
  .side-layout > .side { position: static; width: auto; max-width: none; padding-left: 0; margin-bottom: 20px; }
  .side-layout > .page { padding-inline: 0; margin: 0 auto; max-width: var(--text-w); }
  /* Room under the last line for the button back to the top, so it does not cover the link to the next term. */
  .side-layout > .page, .page-glossary { padding-bottom: 80px; }
  /* The open box never grows taller than the window: it scrolls inside, and the list of terms has a height of its own (a short window shows part of it). */
  .gl-side-body { max-height: calc(100vh - var(--bar-h) - 32px); max-height: calc(100dvh - var(--bar-h) - 32px); }
  .gl-side-terms { min-height: 0; flex: none; }
  .gl-side-list { flex: none; min-height: 180px; max-height: 50vh; max-height: 50dvh; }
  .gd-side-nav { max-height: 60vh; max-height: 60dvh; }
  .gl-side-page .gd-side-nav { max-height: none; }
  /* A closed box says it opens: a chevron at the right end of its heading. */
  .gl-side-box > summary::after {
    content: ""; flex: none; width: 9px; height: 9px; margin: -4px 4px 0 0; border: solid var(--ink-3); border-width: 0 2px 2px 0; transform: rotate(45deg);
    transition: transform var(--dur-fast) var(--ease);
  }
  .gl-side-box[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
  .gl-side-box > summary { height: 52px; }
  .gl-side-box > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--r-lg); }
}
/* Touch: every row of the lists and every button is a target of 40px or more, and a field is 16px so that a phone does not zoom into it. */
@media (max-width: 959px), (pointer: coarse) {
  .gl-side-list a, .gd-side-list a, .gl-side-page .gd-side-list a { padding-block: 10px; }
  .gl-side-tools .gl-chip { min-height: 40px; }
  .gl-side-tools input, .gl-tools .gl-search input { font-size: 16px; }
  .gl-side-tools input { min-height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .gl-side-box > summary::after { transition: none; } }

.term-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.term-head-text { min-width: 0; }
.term-icon { flex: none; width: 84px; height: 84px; overflow: visible; }
.term-aka { margin-top: 10px; font: 400 var(--fs-md)/1.4 var(--serif); color: var(--ink-3); }
.term-aka em { font-style: italic; color: var(--ink-2); }
.page-eyebrow a { color: inherit; }
@media (max-width: 560px) { .term-icon { width: 56px; height: 56px; } }

/* ---------- The glossary ------------------------------------------------------------------------- */
.page-glossary { max-width: 1120px; }
.gl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.gl-search { width: min(380px, 100%); }
/* nav.css hides every .search-field below 900px (the top bar's search turns into a button); the filter of the glossary is not that field and stays. */
.gl-tools .gl-search { display: flex; }
.gl-view, .gl-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-filter { margin-top: 14px; }
.gl-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 13px; border: 1px solid var(--rule-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2); cursor: pointer; font: 500 var(--fs-sm)/1 var(--sans);
  transition: background-color var(--dur-fast), border-color var(--dur-fast);
}
.gl-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.gl-chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.gl-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gl-chip .zdot { width: 9px; height: 9px; }
.gl-list { margin-top: 8px; }
.gl-group-n { margin-left: 4px; font: 500 var(--fs-xs)/1 var(--mono); color: var(--ink-3); }
.gl-letter { margin: 32px 0 6px; font: 600 var(--fs-4xl)/1 var(--serif); color: var(--clay-ink); }
.gl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.gl-grid li { margin: 0; }
.gl-card {
  display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 14px; align-items: start; height: 100%; padding: 14px 16px 14px 14px; color: inherit; text-decoration: none;
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r-lg); border-left: 4px solid var(--zm);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.gl-card:hover { border-color: var(--zc); box-shadow: var(--shadow); transform: translateY(-1px); }
.gl-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gl-icon-host { display: block; width: 56px; height: 56px; padding: 4px; border-radius: var(--r-md); background: var(--zt); }
.gl-icon { display: block; width: 48px; height: 48px; overflow: visible; }
.gl-card-text { display: grid; gap: 4px; min-width: 0; }
.gl-card b { font: 600 var(--fs-lg)/1.25 var(--serif); overflow-wrap: anywhere; }
.gl-card-line {
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font: 400 var(--fs-md)/1.45 var(--sans); color: var(--ink-3);
}
.gloss-empty { margin-top: 24px; color: var(--ink-3); }
@media (max-width: 560px) { .gl-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 959px), (pointer: coarse) { .gl-chip { min-height: 40px; } }

/* ---------- The guides: a pinboard of notes ------------------------------------------------------- */
.page-guides { max-width: 1080px; }
.page-guide { max-width: none; }
.note-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 34px 28px; margin: 40px 0 0; padding: 0; list-style: none; }
.note-grid li { margin: 0; }
.note-card {
  position: relative; display: grid; align-content: start; gap: 8px; height: 100%; min-height: 220px; padding: 30px 24px 20px; isolation: isolate;
  color: inherit; text-decoration: none; transform: rotate(var(--tilt, 0deg)); transform-origin: 50% 20%;
  transition: transform var(--dur-base) var(--ease);
}
.note-card > .sk-bg { position: absolute; inset: -3px; z-index: -1; width: calc(100% + 6px); height: calc(100% + 6px); overflow: visible; pointer-events: none; }
.note-card:hover, .note-card:focus-visible { transform: rotate(0deg) translateY(-4px); }
.note-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.note-tape {
  position: absolute; top: -11px; left: 50%; width: 88px; height: 22px; transform: translateX(-50%) rotate(-3deg);
  background: color-mix(in srgb, var(--zm) 75%, transparent); border: 1px solid color-mix(in srgb, var(--zc) 35%, transparent); border-radius: 2px;
}
.note-icon { width: 52px; height: 52px; overflow: visible; margin-bottom: 2px; }
.note-title { font: 600 var(--fs-2xl)/1.2 var(--serif); letter-spacing: -0.01em; }
.note-hint { font: 400 var(--fs-md)/1.5 var(--serif); color: var(--ink-2); }
.note-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: auto; padding-top: 10px; font: 500 var(--fs-2xs)/1.3 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--zc); }
@media (prefers-reduced-motion: reduce) { .note-card, .note-card:hover, .note-card:focus-visible { transition: none; } .note-card:hover, .note-card:focus-visible { transform: rotate(var(--tilt, 0deg)); } }

/* ---------- A long guide ------------------------------------------------------------------------------- */
.gd-top { margin-bottom: 36px; }
.gd-expect { position: relative; isolation: isolate; padding: 20px 24px; }
.gd-expect > .sk-bg { position: absolute; inset: -2px; z-index: -1; width: calc(100% + 4px); height: calc(100% + 4px); overflow: visible; pointer-events: none; }
.gd-expect .eyebrow { color: var(--zc); }
.gd-expect ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.gd-expect li { position: relative; padding-left: 24px; font: 400 var(--fs-base)/1.5 var(--serif); color: var(--ink); }
.gd-expect li::before { content: ""; position: absolute; left: 3px; top: 0.35em; width: 7px; height: 12px; border: solid var(--zc); border-width: 0 2px 2px 0; transform: rotate(40deg); }
.gd-body { max-width: 760px; margin-inline: auto; }
.bd-sub { margin-top: 18px; }
.bd-sub h3 { margin-bottom: 8px; font: 600 var(--fs-md)/1.3 var(--sans); color: var(--ink); }
.gd-section, .bd-section, .gd-terms { scroll-margin-top: calc(-1 * var(--stick-h, 0px)); } /* the offset under the bar is the page's scroll-padding-top, which also leaves room for a pinned heading; a part's top takes that room back */
.gd-section { padding-top: 8px; margin-top: 36px; }
.gd-section:first-child { margin-top: 0; }
.gd-section h2 { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; font: 600 var(--fs-3xl)/1.2 var(--serif); letter-spacing: -0.01em; }
.gd-n { flex: none; display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; background: var(--clay-soft); color: var(--clay-ink); font: 600 0.6em/1 var(--sans); }
.gd-section > p { margin-top: 12px; font: 400 var(--fs-lg)/1.68 var(--serif); color: var(--ink-2); }
.gd-section > p:first-of-type { margin-top: 0; }
.gd-section .bd-list { margin-top: 14px; }
.gd-section .bd-list li { font-size: var(--fs-lg); line-height: 1.6; }
.gd-section a.link-btn { white-space: nowrap; }
@media (max-width: 560px) { .gd-section a.link-btn { white-space: normal; } } /* a long term wraps instead of widening the page */
.gd-steps { margin: 16px 0 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 10px; }
.gd-steps li { counter-increment: step; position: relative; display: grid; gap: 2px; padding: 12px 14px 12px 52px; border: 1px solid var(--rule-strong); border-radius: var(--r-md); background: var(--surface); }
.gd-steps li::before {
  content: counter(step); position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); color: var(--paper); font: 600 var(--fs-sm)/1 var(--sans);
}
.gd-steps b { font: 650 var(--fs-md)/1.4 var(--sans); }
.gd-steps span { font: 400 var(--fs-base)/1.55 var(--serif); color: var(--ink-2); }
.gd-table { margin-top: 18px; }
.tbl { min-width: 560px; }
.tbl td { color: var(--ink-2); }
.code { margin: 18px 0 0; border: 1px solid var(--rule-strong); border-radius: var(--r-md); background: var(--paper-2); overflow: hidden; }
.code figcaption { padding: 7px 14px; border-bottom: 1px solid var(--rule); font: 500 var(--fs-xs)/1.3 var(--mono); letter-spacing: 0.04em; color: var(--ink-3); background: var(--paper-3); }
.code pre { margin: 0; padding: 14px 16px; overflow-x: auto; font: 400 var(--fs-sm)/1.6 var(--mono); color: var(--ink); tab-size: 2; }
.code pre code { padding: 0; border: 0; background: none; font: inherit; overflow-wrap: normal; }
.gd-callout { display: grid; gap: 4px; margin-top: 18px; padding: 14px 16px; border-left: 4px solid var(--clay); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--clay-soft); }
.gd-callout b { font: 650 var(--fs-md)/1.4 var(--sans); color: var(--clay-ink); }
.gd-callout span { font: 400 var(--fs-base)/1.55 var(--serif); color: var(--ink); }
.gd-section .bd-section { margin-top: 20px; }
.gd-terms { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--rule-strong); }
.gd-terms h2 { margin-bottom: 12px; font: 600 var(--fs-xl)/1.3 var(--serif); }
@media (max-width: 860px) { .gd-section h2 { font-size: var(--fs-2xl); } .gd-section > p { font-size: var(--fs-base); } }

/* ---------- About ------------------------------------------------------------------------------------------ */
.page-about { max-width: 1000px; }

@media print { .side, .gl-tools, .gl-filter, .gd-side, .read-progress { display: none; } .side-layout { display: block; } }

/* The parts of a term page: each is set off from the one above by space and a thin line, and its heading is larger, so the page reads as parts. */
.page-entry .bd-section { margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--rule-strong); }
.page-entry .bd-section:first-child { margin-top: 28px; padding-top: 0; border-top: 0; }
.page-entry .bd-section > h2 { margin-bottom: 14px; font: 600 var(--fs-2xl)/1.25 var(--serif); letter-spacing: -0.01em; color: var(--ink); }
.page-entry .bd-section.is-hit > h2 { margin-inline: -10px; padding-inline: 10px; border-radius: var(--r-md); animation: gd-hit 1.6s ease-out; }
@media (prefers-reduced-motion: reduce) { .page-entry .bd-section.is-hit > h2 { animation: none; background-color: var(--clay-soft); } }
/* The definition of a main term: the line, then the longer text, with room between them. */
.page-entry .bd .def + p { margin-top: 12px; }

/* ---------- One layout for every guide ------------------------------------------------------------------ */
/* Smooth scrolling on a guide: the list at the left, the numbers of the sources and the links on the headings. Not when the reader asked for less motion. */
@media (prefers-reduced-motion: no-preference) { html:has(.page-guide) { scroll-behavior: smooth; } }
.gd-audience { margin: 0 0 14px; font: 400 var(--fs-md)/1.55 var(--sans); color: var(--ink-3); }
.gd-audience b { color: var(--ink-2); font-weight: 600; }
.gd-section h2 .gd-h { min-width: 0; }
.gd-section h2 .gd-anchor {
  align-self: center; margin-left: 2px; padding: 2px 6px; border-radius: var(--r-sm); color: var(--ink-3); text-decoration: none;
  font: 500 0.5em/1 var(--mono); opacity: 0; transition: opacity var(--dur-fast), background-color var(--dur-fast);
}
.gd-section h2:hover .gd-anchor, .gd-section h2 .gd-anchor:focus-visible { opacity: 1; }
.gd-section h2 .gd-anchor:hover { background: var(--paper-2); color: var(--ink); }
.gd-section h2 .gd-anchor:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
@media (hover: none) { .gd-section h2 .gd-anchor { display: none; } }
/* "In short": the plain-words line a beginner can read first. */
.gd-section > p.gd-short {
  margin: 0 0 16px; padding: 11px 16px 12px; border-left: 3px solid var(--zc, var(--clay)); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--paper-2);
  font: 500 var(--fs-md)/1.55 var(--sans); color: var(--ink);
}
.gd-short-label { display: block; margin-bottom: 3px; font: 500 var(--fs-2xs)/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--clay-ink); }
.gd-view { margin-top: 20px; }
.gd-view .patterns { grid-template-columns: minmax(0, 1fr); }
.gd-view .flows { grid-template-columns: minmax(0, 1fr); }
.gd-view .checklist { grid-template-columns: minmax(0, 1fr); }
.gd-view-compare-table, .gd-view-protocols { margin-inline: calc(-1 * clamp(0px, 4vw, 60px)); }
@media (max-width: 959px) { .gd-view-compare-table, .gd-view-protocols { margin-inline: calc(-1 * var(--gutter)); } } /* no further out than the gutter, or the page scrolls sideways */
.reading-intro { margin: 0 0 8px; font: italic 400 var(--fs-md)/1.45 var(--serif); color: var(--ink-3); }
/* The sources a part rests on, and the list of all of them at the end. */
.gd-section > p.gd-src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 18px; font: 500 var(--fs-2xs)/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.gd-src-label { margin-right: 2px; }
.gd-src-n {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border: 1px solid var(--rule-strong); border-radius: var(--r-pill);
  color: var(--ink-2); font: 500 var(--fs-xs)/1 var(--mono); letter-spacing: 0; text-decoration: none; transition: background-color var(--dur-fast), color var(--dur-fast);
}
.gd-src-n:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.gd-src-n:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gd-terms-note { margin: -4px 0 14px; font: 400 var(--fs-md)/1.5 var(--sans); color: var(--ink-3); }
.gd-sources { margin: 0; padding: 0; list-style: none; counter-reset: src; display: grid; gap: 0; }
.gd-sources li {
  counter-increment: src; position: relative; display: grid; grid-template-columns: 30px 82px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: start;
  padding: 10px 8px 10px 0; border-top: 1px solid var(--rule); scroll-margin-top: 8px;
}
.gd-sources li:first-child { border-top: 0; }
.gd-sources li::before { content: counter(src); grid-row: span 2; justify-self: end; padding-top: 2px; font: 500 var(--fs-sm)/1.4 var(--mono); color: var(--clay-ink); }
.gd-sources .link-type { grid-row: span 2; align-self: start; justify-self: start; margin-top: 2px; text-transform: uppercase; border: 1px solid var(--rule); }
.gd-sources .link-type-video { background: var(--t-control); color: var(--z-control); border-color: transparent; }
.gd-sources .link-type-paper { background: var(--t-model); color: var(--z-model); border-color: transparent; }
.gd-sources .link-type-docs, .gd-sources .link-type-spec, .gd-sources .link-type-standard { background: var(--t-orch); color: var(--z-orch); border-color: transparent; }
.gd-sources .link-type-course, .gd-sources .link-type-book { background: var(--t-know); color: var(--z-know); border-color: transparent; }
.gd-sources .link-type-guide, .gd-sources .link-type-blog, .gd-sources .link-type-definition { background: var(--t-tools); color: var(--z-tools); border-color: transparent; }
.gd-sources .link-type-law { background: var(--t-ops); color: var(--z-ops); border-color: transparent; }
.gd-sources a { font: 500 var(--fs-md)/1.35 var(--sans); overflow-wrap: anywhere; }
.gd-sources .link-meta { font: 400 var(--fs-sm)/1.4 var(--sans); color: var(--ink-3); }
.gd-sources li:target, .gd-sources li.is-hit { background: var(--clay-soft); border-radius: var(--r-sm); }
@media (max-width: 560px) { .gd-sources li { grid-template-columns: 26px minmax(0, 1fr); } .gd-sources .link-type { grid-row: auto; grid-column: 2; margin-bottom: 2px; } .gd-sources li::before { grid-row: span 3; } }
/* The part you jumped to flashes once: a wash of colour behind its heading that fades. */
@keyframes gd-hit { from { background-color: color-mix(in srgb, var(--clay) 30%, transparent); } to { background-color: transparent; } }
.gd-section.is-hit > h2, .gd-section-plain.is-hit > h2 { margin-inline: -10px; padding-inline: 10px; border-radius: var(--r-md); animation: gd-hit 1.6s ease-out; }
.gd-section > h2:focus, .gd-section-plain > h2:focus { outline: none; }
.gd-section > h2:focus-visible, .gd-section-plain > h2:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) { .gd-section.is-hit > h2, .gd-section-plain.is-hit > h2 { animation: none; background-color: var(--clay-soft); } }
.gd-section-plain { scroll-margin-top: calc(-1 * var(--stick-h, 0px)); }
/* How far you have read: a thin line along the lower edge of the top bar. */
.read-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; opacity: 0; transition: opacity var(--dur-base); z-index: 2; }
.read-progress.is-on { opacity: 1; }
.read-progress > span { display: block; width: 100%; height: 100%; background: var(--clay); border-radius: 0 3px 3px 0; transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
@media (forced-colors: active) { .read-progress > span { background: Highlight; } }

/* ---------- Touch: the small things in a guide get a hit area of 40px or more, without changing how the page looks ---------- */
@media (pointer: coarse) {
  .gd-src-n { position: relative; min-width: 32px; height: 32px; }
  .gd-src-n::after { content: ""; position: absolute; inset: -5px; }
  .gd-section > p.gd-src { gap: 8px; }
  .page-guide .chips { gap: 4px 6px; }
  .page-guide .chip { min-height: 40px; }
  /* a whole row of the list of sources is the link */
  .page-guide .links li { position: relative; }
  .gd-sources a::after, .page-guide .links a::after { content: ""; position: absolute; inset: 0; }
  .gd-sources .link-meta a, .page-guide .links .link-meta a { position: relative; z-index: 1; }
  .checklist-meta .link-btn { padding: 11px 6px; margin: -11px 0; }
  .gd-side-all { min-height: 44px; }
  .proto-link { display: inline-block; padding: 8px 4px; margin: -8px -4px; }
}

/* ---------- The heading you are in stays in view (stickhead.js) ------------------------------------------------ */
/* A part's heading sticks under the top bar while its part is on the screen and is pushed out by the next heading. Its paper and rule are drawn behind it, so it
   does not move or change size when it sticks. */
.gd-section > h2, .gd-section-plain > h2, .bd > .bd-section > h2, .about > div > h2 {
  position: sticky; top: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 8px); z-index: calc(var(--z-bar) - 5); isolation: isolate;
}
.gd-section > h2::before, .gd-section-plain > h2::before, .bd > .bd-section > h2::before, .about > div > h2::before {
  content: ""; position: absolute; inset: -16px -14px -12px; z-index: -1; pointer-events: none; opacity: 0;
  background: var(--paper); border-bottom: 1px solid var(--rule);
}
.gd-section > h2.is-stuck::before, .gd-section-plain > h2.is-stuck::before, .bd > .bd-section > h2.is-stuck::before, .about > div > h2.is-stuck::before { opacity: 1; }
/* a jump to something inside a part (a source, a note), or the focus moving to a link, lands below the pinned heading */
html { scroll-padding-top: calc(var(--bar-h) + 16px + var(--stick-h, 0px)); }
@media (max-width: 700px) {
  .gd-section > h2, .gd-section-plain > h2, .bd > .bd-section > h2, .about > div > h2 { font-size: var(--fs-2xl); }
}
@media print { .gd-section > h2, .gd-section-plain > h2, .bd > .bd-section > h2, .about > div > h2 { position: static; } .ch-stick { display: none; } }