/*
 * Field Notes companion pages on the current Splitrule site (November 6, 2026). The site sheet /holding.css draws the
 * Kit 3 base, the top row and the footer for body.holding-page. This sheet adds the reading column, the figures, the
 * tables and the trade explorer for body.notes-page. Colors come from the site sheet's variables.
 */
.notes-page {
  --accent: var(--purple-text); --bg: var(--paper); --bg0: var(--paper);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --column: 46rem;
}
.notes-page > main { order: 2; padding: 2.5rem max(var(--page-gutter), calc((100% - 1120px) / 2)) 3.5rem; }
.notes-page > main > *, .notes-page .note > *, .notes-page .note-body > * { max-width: var(--column); }
.notes-page .note-body > .note-wide, .notes-page .note > .note-wide, .notes-page > main > .note-wide { max-width: none; }

/* Heading block */
.notes-page .eyebrow, .notes-page .kicker { display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 .25rem; color: var(--purple-text); font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.notes-page .eyebrow:hover { text-decoration: underline; }
.notes-page h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); margin: 0 0 1rem; max-width: 22ch; }
.notes-page .note-deck { color: #dcdcdc; font-size: 1.25rem; line-height: 1.5; margin: 0 0 1rem; }
.notes-page .note-byline { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; color: var(--muted); font-size: .9375rem; margin: 0 0 2rem; }
.notes-page .subnav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.notes-page .subnav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.notes-page .subnav a[aria-current="page"] { color: var(--ink); text-decoration: none; box-shadow: inset 0 -2px var(--purple); }

/* Contents */
.notes-page .note-contents { margin: 0 0 2.5rem; padding: 1.25rem 1.5rem; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.notes-page .note-contents-title { margin: 0 0 .5rem; color: var(--muted); font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.notes-page .note-contents ol { margin: 0; padding-left: 1.5rem; columns: 2 18rem; column-gap: 2.5rem; }
.notes-page .note-contents li { break-inside: avoid; }
.notes-page .note-contents li + li { margin-top: 0; }
.notes-page .note-contents a { display: inline-block; padding: .3rem 0; }

/* Reading text */
.notes-page .note-body p, .notes-page > main > p { margin: 0 0 1rem; line-height: 1.6; }
.notes-page .note-body h2, .notes-page > main > h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); margin: 3rem 0 1rem; padding-top: 2rem; border-top: 1px solid var(--line); scroll-margin-top: 1rem; }
.notes-page .note-body h3, .notes-page > main > h3 { margin: 2rem 0 .75rem; scroll-margin-top: 1rem; }
.notes-page .note-body h4 { font: 600 1.0625rem/1.3 SourceSans3, Arial, sans-serif; margin: 1.5rem 0 .5rem; }
.notes-page [id] { scroll-margin-top: 1rem; }
.notes-page .note-body ul, .notes-page .note-body ol, .notes-page > main > ul, .notes-page > main > ol { margin: 0 0 1.25rem; padding-left: 1.5rem; line-height: 1.55; }
.notes-page .note-body li + li, .notes-page > main > ul > li + li, .notes-page > main > ol > li + li { margin-top: .5rem; }
.notes-page li::marker { color: var(--muted); }
.notes-page b, .notes-page strong { font-weight: 600; }
.notes-page code { font-family: var(--mono); font-size: .875em; padding: .1em .35em; background: var(--raised); border: 1px solid var(--line); border-radius: 3px; overflow-wrap: anywhere; }
.notes-page pre { overflow-x: auto; padding: 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.notes-page pre code { padding: 0; border: 0; background: none; }
.notes-page blockquote { margin: 0 0 1rem; padding: .25rem 0 .25rem 1.25rem; border-left: 3px solid var(--purple); color: #dcdcdc; }
.notes-page hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.notes-page .note-body a, .notes-page > main a { overflow-wrap: anywhere; }

/* Figures */
.notes-page figure { margin: 1.5rem 0 2rem; }
.notes-page figure img, .notes-page .note-body img, .notes-page > main img { display: block; max-width: 100%; height: auto; border-radius: 6px; background: #fff; }
.notes-page figcaption { margin-top: .75rem; color: var(--muted); font-size: .9375rem; line-height: 1.5; }
.notes-page .panel { margin: 0 0 2rem; padding: 1.5rem; }
.notes-page .panel figure { margin: 0 0 1rem; }
.notes-page details { margin: 0 0 1rem; }
.notes-page details > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--ink); }
.notes-page details > summary::marker { color: var(--muted); }
.notes-page .source-list, .notes-page .article-references { line-height: 1.5; }
.notes-page .date { color: var(--muted); font-size: .875rem; }

/* Tables in the text: they scroll inside their own box, never the page. */
.notes-page .table-scroll { overflow-x: auto; margin: 1.25rem 0 1.75rem; border: 1px solid var(--line); border-radius: 6px; }
.notes-page .note-body table, .notes-page > main table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums lining-nums; font-size: .9375rem; }
.notes-page .note-body th, .notes-page .note-body td, .notes-page > main th, .notes-page > main td { padding: .6rem .75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.notes-page .note-body thead th, .notes-page > main thead th { color: var(--muted); font-size: .8125rem; font-weight: 600; background: var(--panel); }
.notes-page .note-body tbody tr:last-child td { border-bottom: 0; }

/* Field Notes band: the homepage's markup and rules (holding.css); only its place in the page is set here. */
.notes-page > .notes-band { order: 3; }
.notes-page .subnav a[href^="https://"]::after { content: "\00a0\2197" / ""; }
.notes-page > .site-footer { order: 4; }

/* Not found */
.notes-page .not-found { padding-block: 2rem 3rem; }
.notes-page .not-found .actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin-top: 1.5rem; }

/* Forms, shared by both explorers */
.notes-page button, .notes-page select, .notes-page input[type="search"], .notes-page input[type="text"] { font: inherit; color: var(--ink); }
.notes-page .tx button, .notes-page .tx select, .notes-page .tx input, .notes-page #data-explorer button, .notes-page #data-explorer select, .notes-page .dx-download {
  min-height: 44px; padding: 0 .9rem; border: 1px solid var(--control); border-radius: var(--radius); background: #0b0b0b; color: var(--ink); font: inherit; }
.notes-page .tx button, .notes-page #data-explorer button { cursor: pointer; background: transparent; border-color: #8f8f8f; font-weight: 600; }
.notes-page .tx button:hover:not(:disabled), .notes-page #data-explorer button:hover { background: #151515; }
.notes-page .tx button:disabled { opacity: .45; cursor: default; }
.notes-page .tx select, .notes-page .tx input { width: 100%; }
.notes-page .tx .tx-primary { background: var(--purple); border-color: var(--purple); color: #fff; }
.notes-page .tx .tx-primary:hover:not(:disabled) { background: #7656d6; }
.notes-page .tx :focus-visible, .notes-page #data-explorer :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Trade explorer */
.notes-page .tx { margin: 1.5rem 0 2rem; max-width: none; }
.notes-page .tx-tabs { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0 0 1.25rem; border-bottom: 1px solid var(--line); }
.notes-page .tx .tx-tabs button { min-height: 44px; padding: 0 .1rem; border: 0; border-radius: 0; background: none; color: var(--muted); box-shadow: none; }
.notes-page .tx .tx-tabs button:hover { background: none; color: var(--ink); }
.notes-page .tx .tx-tabs button[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -3px var(--purple); }
.notes-page .tx-search, .notes-page .tx-browse { display: grid; gap: .5rem; max-width: 46rem; margin: 0 0 .5rem; }
.notes-page .tx-search > label, .notes-page .tx-browse > label { font-weight: 600; }
.notes-page .tx-search-row { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: .5rem; }
.notes-page .tx-hint { margin: 0; color: var(--muted); font-size: .9375rem; }
.notes-page .tx-status { min-height: 1.5rem; margin: .75rem 0; color: var(--muted); max-width: 46rem; }
.notes-page .tx-status.tx-error { color: var(--amber); }
.notes-page .tx-h { font-size: 1.125rem; margin: 1.5rem 0 .75rem; }
.notes-page .tx-results { max-width: 60rem; }
.notes-page .tx-result-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.notes-page .tx-result-list li { margin: 0; border-bottom: 1px solid var(--line); }
.notes-page .tx .tx-result { display: grid; gap: .2rem; width: 100%; min-height: 44px; padding: .75rem .5rem; border: 0; border-radius: 0; background: none; text-align: left; font-weight: 400; }
.notes-page .tx .tx-result:hover { background: #111; }
.notes-page .tx-result-title { font-weight: 600; color: var(--purple-text); text-decoration: underline; text-underline-offset: .2em; }
.notes-page .tx-result-sub { color: #dcdcdc; }
.notes-page .tx-result-meta { color: var(--muted); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.notes-page .tx-unknown, .notes-page .tx-result-title.tx-unknown { color: var(--muted); font-style: italic; text-decoration: none; }
.notes-page .tx-entity { max-width: 60rem; }
.notes-page .tx-kicker { margin: 0; color: var(--purple-text); font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.notes-page .tx-entity-title { font-size: clamp(1.25rem, 2.2vw, 1.625rem); margin: .25rem 0 .5rem; }
.notes-page .tx .tx-link { display: inline; min-height: 0; padding: 0; border: 0; background: none; color: var(--purple-text); font-weight: 400; text-align: left; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.notes-page .tx .tx-link:hover { background: none; text-decoration-thickness: 2px; }
.notes-page .tx .tx-link.tx-unknown { color: var(--muted); }
.notes-page .tx-filters { margin: 1.5rem 0 1rem; padding: 0 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.notes-page .tx-filters[open] { padding-bottom: 1rem; }
.notes-page .tx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem 1rem; }
.notes-page .tx-grid label { display: flex; flex-direction: column; gap: .3rem; font-size: .9375rem; font-weight: 600; color: #dcdcdc; }
.notes-page .tx-grid .tx-span { grid-column: 1 / -1; }
.notes-page .tx-summary { margin: 1rem 0; padding: 1rem 1.25rem; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.notes-page .tx-summary .tx-h { margin-top: 0; }
.notes-page .tx-summary dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .75rem 1.5rem; margin: .75rem 0 0; }
.notes-page .tx-summary dl > div { min-width: 0; }
.notes-page .tx-summary dt { color: var(--muted); font-size: .875rem; }
.notes-page .tx-summary dd { margin: .1rem 0 0; font-weight: 600; overflow-wrap: anywhere; }
.notes-page .tx-mono { font-family: var(--mono); font-size: .875em; overflow-wrap: anywhere; }
.notes-page .tx-table-wrap { overflow-x: auto; margin: 1rem 0 .5rem; border: 1px solid var(--line); border-radius: 6px; }
.notes-page .tx-table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
.notes-page .tx-table caption { caption-side: top; text-align: left; padding: .75rem .75rem .5rem; color: var(--muted); font-size: .875rem; }
.notes-page .tx-table th, .notes-page .tx-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--line); text-align: right; vertical-align: top; white-space: nowrap; }
.notes-page .tx-table thead th { color: var(--muted); font-size: .8125rem; font-weight: 600; background: var(--panel); }
.notes-page .tx-table .tx-l { text-align: left; }
.notes-page .tx-table .tx-wide { white-space: normal; min-width: 16rem; max-width: 26rem; }
.notes-page .tx-table .tx-wide .tx-link { display: block; }
.notes-page .tx-table .tx-wide .tx-sub { margin-top: .2rem; font-size: .875rem; color: var(--muted); }
.notes-page .tx-table tbody tr:last-child td { border-bottom: 0; }
.notes-page .tx-empty { padding: 1rem; margin: 0; color: var(--muted); }
.notes-page .tx-pager, .notes-page .tx-actions { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: .75rem 0; }

/* The totals explorer keeps its own script; this aligns it with the site. */
.notes-page #data-explorer { max-width: none; }
.notes-page #data-explorer fieldset { border-color: var(--line); background: var(--panel); }
.notes-page #data-explorer .dx-option { border-color: #8f8f8f; }
.notes-page #data-explorer .dx-option:has(input:checked) { border-color: var(--purple-text); background: var(--purple-soft); }
.notes-page #data-explorer .dx-summary { border-top-color: var(--line); }


@media (max-width: 700px) {
  .notes-page > main { padding-block: 1.75rem 2.5rem; }
  .notes-page h1 { font-size: clamp(1.75rem, 8.5vw, 2.25rem); }
  .notes-page .note-deck { font-size: 1.125rem; }
  .notes-page .note-contents { padding: 1rem 1.1rem; }
  .notes-page .panel { padding: 1rem; }
  .notes-page .tx-search-row { grid-template-columns: minmax(0, 1fr); }
  /* Each trade row becomes a labelled block, so nothing scrolls sideways on a phone. */
  .notes-page .tx-table-wrap { overflow: visible; border: 0; }
  .notes-page .tx-table, .notes-page .tx-table tbody, .notes-page .tx-table tr, .notes-page .tx-table td { display: block; width: 100%; }
  .notes-page .tx-table thead { display: none; }
  .notes-page .tx-table caption { display: block; padding: 0 0 .5rem; }
  .notes-page .tx-table tr { padding: .75rem 0; border-top: 1px solid var(--line); }
  .notes-page .tx-table td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .75rem; padding: .2rem 0; border: 0; text-align: left; white-space: normal; }
  .notes-page .tx-table td::before { content: attr(data-label); color: var(--muted); font-size: .875rem; }
  .notes-page .tx-table td.tx-wide { display: block; min-width: 0; max-width: none; padding-bottom: .4rem; }
  .notes-page .tx-table td.tx-wide::before { content: none; }
  .notes-page .tx-table td.tx-wide .tx-link:first-child { font-weight: 600; }
  .notes-page .tx-summary dl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem 1rem; }
  .notes-page .tx-summary dl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Methods index and attribution */
.notes-page .notes-listings { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0 0 1.5rem; border-bottom: 1px solid var(--line); }
.notes-page .notes-listings a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--muted); text-decoration: none; }
.notes-page .notes-listings a:hover { color: var(--ink); }
.notes-page .notes-listings a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -3px var(--purple); }
.notes-page .notes-list { list-style: none; margin: 0; padding: 0; }
.notes-page .notes-list li { padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.notes-page .notes-list li + li { margin-top: 0; }
.notes-page .notes-list h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin: 0 0 .4rem; padding: 0; border: 0; }
.notes-page .notes-list h2 a { color: var(--ink); text-decoration: none; }
.notes-page .notes-list h2 a:hover { text-decoration: underline; }
.notes-page .notes-list p { margin: 0 0 .4rem; color: #dcdcdc; line-height: 1.5; }
.notes-page .notes-list time { color: var(--muted); font-size: .875rem; }
.notes-page .attribution { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); }

/* In-page link rows (the map's section links) */
.notes-page > main > nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0 0 1.5rem; }
.notes-page > main > nav a { display: inline-flex; align-items: center; min-height: 44px; }
.notes-page .subnav { align-items: center; border-bottom: 1px solid var(--line); }

/* The totals explorer's tables scroll sideways inside themselves, as its script expects (sticky caption and first column). */
.notes-page #data-explorer table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; font-size: .9375rem; }
.notes-page #data-explorer th, .notes-page #data-explorer td { padding: .5rem .65rem; border-bottom: 1px solid var(--line); white-space: nowrap; text-align: right; }
.notes-page #data-explorer th:first-child, .notes-page #data-explorer td:first-child { text-align: left; }
.notes-page #data-explorer thead th { color: var(--muted); font-size: .8125rem; font-weight: 600; }

/* Lists inside the explorer are interface rows, not reading lists. */
.notes-page .note-body .tx-result-list { margin: 0; padding: 0; }
.notes-page .note-body .tx-result-list li + li { margin-top: 0; }

/* The reading column limits the text, not the explorers: the body spans the page and its children keep 46rem. */
.notes-page .note > .note-body { max-width: none; }
.notes-page .note-body > .note-wide { max-width: none; width: 100%; }
/* Links placed straight inside a disclosure (the map's source notes) get a full touch target. */
.notes-page details > a { display: inline-flex; align-items: center; min-height: 44px; }
.notes-page > main > .note { max-width: none; }
.notes-page .tx-entity { max-width: none; }