/* ============================================================
 * NOTEBOOK LAYER — the two model notebooks and the laboratory.
 * Builds on site-tokens.css + editorial.css (masthead, .page grid,
 * .on-this-page, .thread-head, .ed-figure, .btn, details, .dive-pager,
 * .colophon). No new colours except the code tokens and chart roles
 * listed in :root. Spec: _design/audits/design-spec.md.
 * ============================================================ */

:root {
  --nb-measure: 38em;          /* prose: about 70 characters of the body face at 18px */
  --nb-block: 720px;           /* figures, code, tables, callouts */
  --code-ground: var(--paper-callout);   /* #f5f5f5 */
  --code-comment: #6b6969;     /* 5.0:1 on the code ground */
  --code-string: #17675a;      /* teal slot, darkened: 6.2:1 */
  --code-number: #234f8c;      /* blue slot, darkened: 7.5:1 */
}

/* D1 alternative body face: one switch, nothing else changes */
.nb.nb--serif { --f-body: "Source Serif 4", Georgia, serif; --body-tracking: -0.005em; }
.nb.nb--serif .nb-section > p, .nb.nb--serif .nb-section > ul, .nb.nb--serif .nb-section > ol { font-size: 17px; line-height: 1.7; }

/* ---------- page header (replaces the knitr title block) ---------- */
.nb-header { max-width: 1280px; margin: 0 auto; padding: 104px 80px 56px; }
.nb-header-inner { max-width: 856px; }
.nb-crumbs { font-family: var(--ui); font-size: 13px; color: var(--muted); margin: 0 0 28px; }
.nb-crumbs a { color: var(--ink-soft); border-bottom: 1px solid var(--rule); text-decoration: none; }
.nb-crumbs a:hover { color: var(--accent-deep); border-bottom-color: var(--accent-deep); }
.nb-title {
  font-family: var(--f-h1); font-weight: 400; font-size: 52px; line-height: 1.06;
  letter-spacing: -1.2px; margin: 0 0 18px; color: var(--ink); max-width: 17em; text-wrap: balance;
}
.nb-byline { font-family: var(--f-byline); font-size: 14px; color: var(--muted); margin: 0 0 32px; max-width: 46em; text-wrap: balance; }
.nb-byline a { color: var(--accent-deep); border-bottom: 0; }
.nb-lead { font-family: var(--f-lead); font-size: 19px; line-height: 1.65; color: var(--ink-soft); margin: 0; max-width: 680px; }
.nb-lead p { margin: 0 0 12px; }
.nb-header .btn-row { margin-top: 32px; }

/* ---------- grid: same .page / .on-this-page as the home page ---------- */
.nb .on-this-page { margin-top: 0; }
/* the sidebar takes part of the empty gutter beside the 720px column, so entries stop wrapping */
@media (min-width: 1100px) { .nb .page:has(> .on-this-page) { grid-template-columns: minmax(0, 1fr) clamp(200px, 18vw, 252px); } }
.nb .otp-link { text-wrap: balance; }
.otp-list .otp-group { margin-top: 14px; }
.nb .otp-link { display: flex; align-items: baseline; }
.otp-n { font-family: var(--ui); font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; display: inline-block; min-width: 2.1em; flex: none; }
.otp-n:empty { display: none; }
.otp-link.active .otp-n { color: var(--accent); }
.otp-tools { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--rule); }
.otp-tool {
  font-family: var(--ui); font-size: 13.5px; color: var(--ink-soft); background: none; border: 0; padding: 4px 0;
  cursor: pointer; border-bottom: 1px solid var(--rule);
}
.otp-tool:hover { color: var(--accent-deep); border-bottom-color: var(--accent-deep); }
.otp-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

details.nb-otp-mobile { display: block; margin-top: 36px; border-top: 1px solid var(--ink-soft); border-bottom: 1px solid var(--rule); padding: 0; }
details.nb-otp-mobile > summary { font-family: var(--ui); font-size: 15px; font-weight: 500; padding: 12px 0; color: var(--ink); letter-spacing: 0; }
details.nb-otp-mobile > summary::after { font-size: 18px; }
details.nb-otp-mobile .otp-list { margin: 0 0 14px; }
@media (min-width: 1100px) { details.nb-otp-mobile { display: none; } }

/* ---------- sections: numbered heads reuse .thread-head ---------- */
.nb .page main > * { max-width: var(--nb-block); }
.masthead nav a[aria-current] { color: var(--ink); box-shadow: inset 0 -1px 0 var(--accent); }
.nb-section { margin: 0 0 88px; scroll-margin-top: 88px; }
.nb-section .thread-head { margin-bottom: 28px; }
.nb .thread-head h2 { font-family: var(--f-h2); font-weight: 400; font-size: 32px; line-height: 1.2; margin: 0; letter-spacing: -0.3px; color: var(--ink); text-wrap: balance; }
.nb h3 { font-family: var(--f-h3); font-weight: 500; font-size: 23px; line-height: 1.3; letter-spacing: -0.2px; margin: 48px 0 14px; color: var(--ink); scroll-margin-top: 88px; }
.nb h3 .secnum { color: var(--muted); font-weight: 400; margin-right: 0.45em; font-variant-numeric: lining-nums; }
/* a numbered heading that wraps hangs its second line under the title, not under the number */
.nb h3:has(> .secnum) { display: flex; align-items: baseline; text-wrap: balance; }
.nb h3 > .secnum { flex: none; }
.nb h4 { font-family: var(--f-h3); font-style: italic; font-weight: 500; font-size: 19px; margin: 32px 0 8px; color: var(--ink-soft); }

/* ---------- prose ---------- */
.nb-section > p, .nb-section > ul, .nb-section > ol, .nb-section > blockquote {
  font-family: var(--f-body); font-size: 18px; line-height: 1.65; letter-spacing: var(--body-tracking);
  color: var(--ink); max-width: var(--nb-measure); margin: 0 0 18px;
}
.nb-section > ul, .nb-section > ol { padding-left: 1.4em; }
.nb-section li { margin-bottom: 6px; }
.nb-section li > p { margin: 0 0 6px; }
.nb-section > blockquote { border-left: 2px solid var(--rule); padding-left: 18px; color: var(--ink-soft); }
.nb-section a:not(.btn) { color: var(--accent-deep); border-bottom: 0; text-decoration: none; }
.nb-section a:not(.btn):hover { text-decoration: underline; text-underline-offset: 3px; }
.nb-section p code, .nb-section li code, table.nb-table code { font-family: var(--mono); font-size: 0.8em; background: var(--code-ground); padding: 0.1em 0.3em; letter-spacing: 0; font-variant-ligatures: none; }
.nb .katex { font-size: 1.12em; white-space: nowrap; }
.nb .katex-display { max-width: var(--nb-measure); margin: 26px 0; padding: 4px 0; overflow-x: auto; overflow-y: hidden; }
.nb .katex-display > .katex { font-size: 1.18em; }
.nb .katex-display .tag { font-size: 0.82em; color: var(--muted); }
@media (max-width: 600px) {
  /* phones: the equation number moves under the equation instead of overlapping it */
  .nb .katex-display > .katex > .katex-html { display: block; }
  .nb .katex-display > .katex > .katex-html > .tag { position: static; display: block; text-align: right; margin-top: 2px; }
  .nb .katex-display > .katex > .katex-html > .tag > .strut { display: none; } /* a multi-line equation's strut would push the number far below */
}
.nb p:has(> .math.display:only-child) { margin: 0; }
.math-var { font-family: KaTeX_Math, var(--serif); font-style: italic; font-size: 1.08em; white-space: nowrap; }  /* a state such as ¬A ¬B C never breaks */
.nb a.footnote-ref, .nb sup.fn a { font-family: var(--ui); font-size: 0.68em; color: var(--accent-deep); border: 0; padding: 0 1px; text-decoration: none; }
.nb a.footnote-ref sup { font-size: 1em; }

/* ---------- callouts: a cap rule and a small-caps label, no fill ---------- */
.nb-note { max-width: var(--nb-block); margin: 30px 0; padding: 12px 0 14px; border-top: 1px solid var(--ink-soft); border-bottom: 1px solid var(--rule); }
.nb-note .nb-note-label { font-family: var(--f-figlabel); font-size: 16px; letter-spacing: 0.02em; color: var(--ink); margin: 0 0 6px; }
.nb-note p, .nb-note li { font-family: var(--f-refs); font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 10px; max-width: none; letter-spacing: 0; }
.nb-note p:last-child { margin-bottom: 0; }
.nb-note ul, .nb-note ol { margin: 0 0 10px; padding-left: 1.3em; }
.nb-note--key { border-top: 3px solid var(--accent); }

/* ---------- code (pandoc's highlighting classes, so knitr and Quarto both work) ---------- */
.nb div.sourceCode, .nb pre.nb-code { max-width: var(--nb-block); margin: 22px 0; background: var(--code-ground); overflow: visible; }
.nb pre.sourceCode, .nb pre.nb-code {
  margin: 0; padding: 14px 18px; background: var(--code-ground); border: 0; border-radius: 0;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.6; color: var(--ink); tab-size: 2;
  overflow-x: auto; white-space: pre; font-variant-ligatures: none; box-shadow: none;
}
.nb pre code { font-family: inherit; font-size: inherit; background: none; padding: 0; white-space: inherit; }
.nb pre.sourceCode code > span { display: inline; }
.nb pre.sourceCode code > span > a:first-child:empty { display: none; }
.nb pre.sourceCode:focus-visible, .nb pre.nb-out:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nb code span.co { color: var(--code-comment); font-style: italic; }
.nb code span.kw, .nb code span.cf { color: var(--accent-deep); }
.nb code span.st, .nb code span.ss, .nb code span.ch { color: var(--code-string); }
.nb code span.dv, .nb code span.fl, .nb code span.cn, .nb code span.bn { color: var(--code-number); }
.nb code span.fu { color: var(--ink); font-weight: 500; }
.nb code span.op, .nb code span.at, .nb code span.sp { color: var(--ink-soft); }
.nb code span.va, .nb code span.ot, .nb code span.ex { color: var(--ink); }
.nb pre.nb-out {
  max-width: var(--nb-block); margin: -22px 0 22px; padding: 10px 18px 10px 16px; background: none;
  border-left: 2px solid var(--rule); font-family: var(--mono); font-size: 13px; line-height: 1.55; color: var(--ink-soft);
  white-space: pre; overflow-x: auto; font-variant-ligatures: none;
}
.nb pre.nb-out { margin-top: -22px; }
.nb pre.nb-out:first-child, details.nb-fold + pre.nb-out { margin-top: 0; }
.nb .cell { max-width: var(--nb-block); }
.nb .cell > .sourceCode + pre.nb-out { margin-top: -22px; }

details.nb-fold { max-width: var(--nb-block); margin: 22px 0; padding: 0; border-bottom: 0; }
details.nb-fold > summary {
  font-family: var(--ui); font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--ink-soft); text-transform: none;
  padding: 8px 0 8px 22px; display: block; border-top: 1px solid var(--rule);
}
details.nb-fold > summary::after { content: none; }
/* plain inline flow, so a long label wraps under itself and the line count never splits */
details.nb-fold > summary::before { content: "+"; display: inline-block; font-size: 18px; line-height: 1; color: var(--muted); width: 12px; margin: 0 10px 0 -22px; }
details.nb-fold[open] > summary::before { content: "\2212"; color: var(--accent); }
details.nb-fold > summary:hover { color: var(--accent-deep); }
details.nb-fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
details.nb-fold .nb-fold-meta { color: var(--muted); white-space: nowrap; }
details.nb-fold > summary { word-spacing: 0.12em; }
details.nb-fold > summary code { font-family: var(--mono); font-size: 0.86em; word-spacing: 0; letter-spacing: 0; font-variant-ligatures: none; background: none; padding: 0; }
details.nb-fold > div.sourceCode { margin-top: 0; }

/* ---------- tables: booktabs ---------- */
.nb-table-wrap { max-width: var(--nb-block); margin: 30px 0; overflow-x: auto; }
table.nb-table { border-collapse: collapse; width: 100%; font-family: var(--ui); font-size: 15px; line-height: 1.4; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
table.nb-table caption { caption-side: top; text-align: left; font-size: 13px; color: var(--ink-soft); line-height: 1.55; padding: 0 0 10px; }
table.nb-table .th-short { display: none; }
@media (max-width: 600px) {
  /* wide tables scroll sideways on phones; keep the caption in view and within the screen */
  table.nb-table caption { position: sticky; left: 0; max-width: calc(100vw - 48px); }
  /* short column names, as in the phone charts, so wide tables fit the screen */
  table.nb-table .th-long { display: none; }
  table.nb-table .th-short { display: inline; }
}
table.nb-table caption .tag, .nb-figure figcaption .tag { font-family: var(--ui); font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; font-size: 10.5px; color: var(--accent); margin-right: 8px; }
table.nb-table thead tr { border-top: 1px solid var(--ink-soft); border-bottom: 1px solid var(--ink-soft); }
table.nb-table tbody tr:last-child { border-bottom: 1px solid var(--rule); }
table.nb-table tbody tr.nb-group-start { border-top: 1px solid var(--rule-light); }
table.nb-table tfoot tr { border-bottom: 1px solid var(--ink-soft); }
table.nb-table th, table.nb-table td { padding: 6px 14px; text-align: left; vertical-align: baseline; }
@media (max-width: 600px) { table.nb-table th, table.nb-table td { padding-left: 8px; padding-right: 8px; } }
table.nb-table th:first-child, table.nb-table td:first-child { padding-left: 0; }
table.nb-table th:last-child, table.nb-table td:last-child { padding-right: 0; }
table.nb-table thead th { font-size: 13px; font-weight: 600; color: var(--ink-soft); padding-top: 8px; padding-bottom: 7px; }
table.nb-table tbody th, table.nb-table tfoot th { font-weight: 400; }
table.nb-table .num { text-align: right; }
table.nb-table td.num { white-space: nowrap; }  /* a range such as 11.45–12.36 never breaks at its dash */
@media (max-width: 600px) {
  table.nb-table th, table.nb-table td { padding-left: 9px; padding-right: 9px; }
  table.nb-table th:first-child, table.nb-table td:first-child { padding-left: 0; }
  table.nb-table th:last-child, table.nb-table td:last-child { padding-right: 0; }
}
table.nb-table tbody code { font-size: 0.88em; background: none; padding: 0; }   /* plain mono in cells, so it sits flush with its column */
table.nb-table tfoot th, table.nb-table tfoot td { font-weight: 600; }

/* ---------- figures: the home page's .ed-figure, sized to the content ---------- */
.nb-figure { max-width: var(--nb-block); margin: 36px 0 40px; }
.nb-figure .plate { aspect-ratio: auto; padding: 18px 18px 12px; background: var(--viz-surface); display: block; position: relative; }
.nb-figure .plate img { display: block; width: 100%; height: auto; }
.nb-figure figcaption { max-width: var(--nb-block); }
/* table view twin under each chart */
.nb-figure:has(+ details.nb-datatable) { margin-bottom: 0; }
details.nb-datatable { max-width: var(--nb-block); margin: 10px 0 40px; padding: 0; border-bottom: 0; }
details.nb-datatable > summary { font-family: var(--ui); font-size: 13px; font-weight: 400; color: var(--ink-soft); padding: 4px 0; justify-content: flex-start; letter-spacing: 0; text-transform: none; }
details.nb-datatable > summary::after { content: none; }
details.nb-datatable > summary::before { content: "+"; color: var(--muted); width: 14px; display: inline-block; }
details.nb-datatable[open] > summary::before { content: "\2212"; color: var(--accent); }
details.nb-datatable .nb-table-wrap { margin: 8px 0 0; max-height: 320px; overflow-y: auto; }

/* ---------- notes, appendix, footer ---------- */
.nb section.footnotes { max-width: var(--nb-block); margin-top: 64px; padding-top: 14px; border-top: 1px solid var(--ink-soft); }
.nb section.footnotes hr { display: none; }
.nb section.footnotes::before { content: "Notes"; display: block; font-family: var(--f-h3); font-weight: 500; font-size: 19px; margin: 0 0 10px; color: var(--ink); }
.nb section.footnotes ol { margin: 0; padding-left: 1.4em; font-family: var(--f-refs); font-size: 15.4px; line-height: 1.55; color: var(--ink-soft); }
.nb section.footnotes li::marker { font-family: var(--ui); font-size: 13px; color: var(--muted); }
.nb section.footnotes li p { margin: 0 0 6px; }
.nb section.footnotes a.footnote-back { color: var(--accent-deep); border: 0; font-family: var(--ui); text-decoration: none; }
.nb-appendix .thread-head .numeral { font-style: normal; }
.nb-appendix > p { font-size: 16.5px; }

/* ---------- phone ---------- */
@media (max-width: 900px) {
  .nb-header { padding: 48px 24px 40px; }
  .nb-title { font-size: 38px; letter-spacing: -0.6px; }
  .nb-lead { font-size: 18px; }
}
@media (max-width: 640px) {
  .nb-title { font-size: 32px; line-height: 1.1; }
  .nb-section .thread-head { padding-left: 40px; }
  .nb-section .thread-head .numeral { font-size: 34px; }
  .nb .thread-head h2 { font-size: 26px; }
  .nb h3 { font-size: 20px; margin-top: 40px; }
  .nb-section > p, .nb-section > ul, .nb-section > ol { font-size: 17px; }
  .nb div.sourceCode { margin-left: -24px; margin-right: -24px; }
  .nb pre.sourceCode { font-size: 12.5px; padding: 12px 24px; }
  .nb pre.nb-out { font-size: 12px; }
  .nb-figure .plate { padding: 12px 10px 8px; }
  .nb .btn-row .btn { flex: 1 1 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
.nb-glyphs { white-space: nowrap; }
.nb-glyphs > span { display: inline-block; width: 16px; text-align: center; }
/* long inline code (file paths) may break anywhere rather than push the page wider on phones */
.nb-section p code, .nb-section li code, .nb-note code, figcaption code, caption code { overflow-wrap: anywhere; }