/* One palette. A page that wants another sets these, and nothing else. */
  :root{
    --bg:#fafafa;        /* the page */
    --fg:#24292f;        /* what is read */
    --mut:#57606a;       /* said quietly: captions, summaries, meta */
    --faint:#8b949e;     /* said more quietly still: counts, sources, timestamps */
    --line:#e2e5e9;      /* every hairline */
    --card:#fff;         /* a raised surface */
    --acc:#0366d6;       /* a link */
    --soft:#f6f8fa;      /* an inset panel, a table head, a struck row */
    --ok:#1a7f37;        /* it passed */
    --ok-bg:#e6ffec;
    --bad:#a40e26;       /* it did not */
    --bad-bg:#ffebe9;
    --warn:#9a6700;      /* look at this */
    --warn-bg:#fff8c5;
    color-scheme:light;  /* scrollbars and form controls, so they match the page */
  }
  /* Three states, not two. The reader's system decides unless the page has been told otherwise,
     and `data-theme` on <html> is that telling: `appearance=` writes it before first paint and the
     control below rewrites it. The media query steps aside for an explicit light so that a reader
     on a dark desktop can still ask one page to stay light. */
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){color-scheme:dark;
--bg:#0d1117; --fg:#e6edf3; --mut:#9198a1; --faint:#6e7681;
--line:#30363d; --card:#161b22; --acc:#4493f8; --soft:#1c2128;
--ok:#3fb950; --ok-bg:#12261e; --bad:#f85149; --bad-bg:#25171c;
--warn:#d29922; --warn-bg:#272115;
    }
  }
  :root[data-theme="dark"]{color-scheme:dark;
--bg:#0d1117; --fg:#e6edf3; --mut:#9198a1; --faint:#6e7681;
--line:#30363d; --card:#161b22; --acc:#4493f8; --soft:#1c2128;
--ok:#3fb950; --ok-bg:#12261e; --bad:#f85149; --bad-bg:#25171c;
--warn:#d29922; --warn-bg:#272115;
  }
  /* A figure carries its own white, inside the SVG, where no stylesheet can reach it — and it
     should: the axes and labels are dark ink, and taking the paper away would leave them on a dark
     page unreadable. So the page does not take it away, it turns the lamp down. `brightness(.85)`
     makes the paper #d9d9d9, which still reads as paper and stops being a light source.

     Measured at that value: inside the figure, ink/paper 14.9, axis/paper 7.2, a plotted line
     4.4 — all still clear (a line is a graphical object, which wants 3). Against the card it sits
     on, 12.3. It is a mitigation and not a fix; the fix would be figures that are not drawn on
     white in the first place, and that is the report author's to choose. */
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) figure img,
    :root:not([data-theme="light"]) .card-thumb img,
    :root:not([data-theme="light"]) iframe.pinax-pdf,
    :root:not([data-theme="light"]) .card-thumb-pdf{filter:brightness(.85)}
  }
  :root[data-theme="dark"] figure img,
  :root[data-theme="dark"] .card-thumb img,
  :root[data-theme="dark"] iframe.pinax-pdf,
  :root[data-theme="dark"] .card-thumb-pdf{filter:brightness(.85)}
  /* The control itself. Out of the flow, out of the way, and out of print.

     Measured, and the measurement changed it. The pill's fill is --card on a --bg page: 1.04:1 in
     light, 1.09:1 in dark, which is invisible — so the border is what says a control is there, and
     it has to carry the 3:1 WCAG 1.4.11 asks of a boundary. --line gives 1.21 and 1.55, --faint
     2.95 (missing in light), --mut 6.12 and 6.50. The opacity:.75 this started with was not free
     either: composited, it took the label from 6.39/5.94 down to 3.62/3.88, under the 4.5 text
     wants. The quiet belongs in --mut, which is the role for it, not in a transparency. */
  .pinax-appearance{position:fixed;top:.55rem;right:.55rem;z-index:99;font:600 12px/1 system-ui,sans-serif;
    color:var(--mut);background:var(--card);border:1px solid var(--mut);border-radius:999px;
    padding:.42rem .72rem;cursor:pointer}
  .pinax-appearance:hover,.pinax-appearance:focus-visible{color:var(--fg);border-color:var(--fg)}
  @media print{.pinax-appearance{display:none}}
  body{font-family:system-ui,sans-serif;max-width:1180px;margin:2rem auto;padding:0 1rem;line-height:1.5;background:var(--bg);color:var(--fg)}
  h1,h2{border-bottom:1px solid var(--line);padding-bottom:.2rem}
  nav{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:.6rem .9rem;margin:1rem 0}
  nav a{display:block;text-decoration:none;color:var(--acc)}
  .desc{background:var(--soft);padding:.6rem .8rem;border-radius:6px;margin:.6rem 0}
  .desc p:first-child{margin-top:0}.desc p:last-child{margin-bottom:0}
  .desc table{border-collapse:collapse;margin:.5rem 0}
  .desc th,.desc td{border:1px solid var(--line);padding:.15rem .5rem;font-size:.9rem}
  section.section{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:.85rem 1.15rem;margin:0 0 1.4rem;box-shadow:0 1px 2px rgba(27,31,36,.04)}
  section.section>h2{margin-top:0}
  .figgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}
  .figgrid-single{grid-template-columns:minmax(0,560px);justify-content:center}
  .figgrid-wide{grid-template-columns:1fr}
  figure.pinax-table{overflow-x:auto}
  .pinax-table table{border-collapse:collapse;width:100%;font-size:.9em}
  .pinax-table th,.pinax-table td{border:1px solid var(--line);padding:.25rem .5rem;text-align:left}
  .pinax-table thead th{background:var(--soft);font-weight:600}
  .pinax-table tbody tr:nth-child(even){background:var(--soft)}
  .pinax-benchmark{margin:0 0 1.4rem}
  .pinax-verdict{font-weight:700;font-size:1.05rem;padding:.55rem .9rem;border-radius:8px;margin:0 0 .8rem}
  .pinax-verdict-pass{background:var(--ok-bg);border:1px solid var(--ok);color:var(--ok)}
  .pinax-verdict-fail{background:var(--bad-bg);border:1px solid var(--bad);color:var(--bad)}
  .pinax-checks{border-collapse:collapse;width:100%;font-size:.9em}
  .pinax-checks th,.pinax-checks td{border:1px solid var(--line);padding:.25rem .5rem;text-align:left}
  .pinax-checks thead th{background:var(--soft);font-weight:600}
  .pinax-checks tr.pinax-pass{background:var(--ok-bg)}
  .pinax-checks tr.pinax-fail{background:var(--bad-bg)}
  .pinax-checks .pinax-badge{font-weight:700}
  .pinax-checks tr.pinax-pass .pinax-badge{color:var(--ok)}
  .pinax-checks tr.pinax-fail .pinax-badge{color:var(--bad)}
  .pinax-checks .pinax-src{color:var(--faint);font:11px ui-monospace,SFMono-Regular,Menlo,monospace}
  .pinax-checks tr.pinax-more td{color:var(--mut);font-style:italic;background:var(--soft)}
  .pinax-checks .pinax-codelink{color:var(--mut);font-size:11px;text-decoration:none;border-bottom:1px dotted var(--line)}
  .pinax-checks .pinax-codelink:hover{color:var(--acc);border-bottom-color:var(--acc)}
  .pinax-code{margin:.6rem 0}
  .pinax-code-cap{color:var(--mut);font-size:.9em;margin-bottom:.2rem}
  .pinax-code pre{margin:0;padding:.6rem .8rem;border-radius:8px;overflow:auto;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
  .pinax-code-src{background:var(--soft);border:1px solid var(--line)}
  .pinax-code-out{background:var(--soft);border:1px solid var(--line);border-top:none;color:var(--mut)}
  .pinax-code-out::before{content:"⇒ ";color:var(--faint)}
  figure{margin:0;border:1px solid var(--line);border-radius:8px;padding:.5rem;background:var(--card)}
  figure img{width:100%;height:auto}
  /* #fff below, twice, and deliberately: a PDF is a white page. It is not a surface of
     this theme, so it does not follow the theme. */
  figure iframe.pinax-pdf{width:100%;height:460px;border:1px solid var(--line);border-radius:4px;background:#fff}
  a.pinax-open{display:inline-block;font-size:.85rem;margin-top:.3rem;color:var(--acc);text-decoration:none}
  a.pinax-dl{display:inline-block;font-size:.8rem;margin:.3rem .5rem 0 0;color:var(--acc);text-decoration:none;border:1px solid var(--line);border-radius:6px;padding:.05rem .45rem}
  a.pinax-dl:hover{background:var(--soft)}
  figcaption{font-size:.9rem;color:var(--mut);margin-top:.4rem}
  .diag{border-left:4px solid var(--bad);padding-left:.8rem}
  .pinax-eq{display:block}
  h3.facet{color:var(--mut);margin:1rem 0 .3rem;font-size:1.05rem;font-weight:600}
  .pinax-meta{color:var(--mut);margin:-.4rem 0 1rem;font-size:.95rem}
  .pinax-search{margin:0 0 1.2rem;--pagefind-ui-scale:.8;--pagefind-ui-primary:var(--fg);--pagefind-ui-border-radius:8px}
  .pinax-filters{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 1rem}
  .pinax-chip{font:inherit;font-size:.82rem;color:var(--mut);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.15rem .7rem;cursor:pointer}
  .pinax-chip:hover{background:var(--soft)}
  .pinax-chip.is-on{background:var(--fg);border-color:var(--fg);color:var(--card)}
  .card-tags{margin-top:.45rem;display:flex;flex-wrap:wrap;gap:.25rem}
  .card-tag{font-size:.74rem;color:var(--mut);background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:0 .45rem}
  .pinax-stats{display:flex;flex-wrap:wrap;gap:.5rem;margin:-.4rem 0 1.4rem}
  .pinax-stat{border:1px solid var(--line);border-radius:8px;padding:.45rem .8rem;background:var(--soft);min-width:5.5rem}
  .pinax-stat .stat-value{display:block;font-size:1.35rem;font-weight:600;color:var(--fg);line-height:1.15}
  .pinax-stat .stat-label{display:block;font-size:.8rem;color:var(--mut)}
  .pinax-subtitle{color:var(--mut);font-size:.95rem;margin:-.2rem 0 .8rem;font-weight:500}
  .nfig{color:var(--faint);font-weight:normal;font-size:.85em}
  nav .nfig{color:var(--faint)}
  .bibliography li{margin:.3rem 0;font-size:.92rem}
  .pinax-bm-on{color:var(--warn)}
  .pinax-comments{margin:.6rem 0;border-left:3px solid var(--line);padding-left:.8rem}
  .pinax-cmt{margin:.4rem 0;font-size:.92rem}
  .pinax-cmt .author{font-weight:600;color:var(--acc)}
  .pinax-cmt p:first-child{margin-top:0;display:inline}
  .pinax-cmt p:last-child{margin-bottom:0}
  .pinax-top{margin:0 0 1rem;font-size:.95rem}
  .pinax-top a{color:var(--acc);text-decoration:none}
  .pinax-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.2rem;margin:1.2rem 0}
  .pinax-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card);text-decoration:none;color:inherit;box-shadow:0 1px 2px rgba(27,31,36,.04);transition:box-shadow .15s,transform .15s}
  .pinax-card:hover{box-shadow:0 4px 14px rgba(27,31,36,.12);transform:translateY(-2px)}
  .card-thumb{aspect-ratio:4/3;background:var(--soft);display:flex;align-items:center;justify-content:center;overflow:hidden}
  .card-thumb img{width:100%;height:100%;object-fit:contain}
  .card-thumb-empty{min-height:150px}
  .card-thumb-pdf{width:100%;height:100%;border:0;background:#fff;pointer-events:none}
  .card-body{padding:.7rem .9rem}
  .card-title{font-weight:600;font-size:1.05rem}
  .card-status{display:inline-block;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn);border-radius:6px;padding:0 .35rem;margin-left:.4rem;vertical-align:middle}
  .card-summary{color:var(--mut);font-size:.9rem;margin-top:.2rem}
  .card-sections{margin-top:.5rem;font-size:.85rem;color:var(--mut)}
  .card-sections .sec-item{padding:.1rem 0}
  .card-sections .sec-name{font-weight:600;color:var(--mut)}
  .card-meta{color:var(--faint);font-size:.82rem;margin-top:.45rem}
  .pinax-toc{list-style:none;padding:0;margin:1.2rem 0}
  .pinax-toc>li{padding:.5rem 0;border-bottom:1px solid var(--line)}
  .pinax-toc a{font-weight:600;color:var(--acc);text-decoration:none}
  .pinax-toc .toc-summary{color:var(--mut);font-weight:400}
  .pinax-toc .toc-meta{color:var(--faint);font-size:.85rem}
  details.pinax-group{margin:1rem 0;border:1px solid var(--line);border-radius:8px;background:var(--card);padding:.2rem .6rem}
  details.pinax-group>summary{font-weight:700;font-size:1.1rem;cursor:pointer;padding:.5rem .2rem;list-style-position:inside}
  details.pinax-group[open]>summary{border-bottom:1px solid var(--line);margin-bottom:.4rem}
  details.pinax-group .grp-count{color:var(--faint);font-weight:400;font-size:.85rem}
  .part-desc{color:var(--mut);font-size:.93rem;line-height:1.55;margin:.1rem .2rem .7rem;max-width:70ch}
  .part-desc p{margin:.3rem 0}
  nav details.pinax-group{margin:.3rem 0;padding:.1rem .5rem;background:var(--bg)}
  nav details.pinax-group>summary{font-size:.98rem;padding:.25rem .2rem}
/* pinax.css — styling for the interactive comment layer (notes 01 §4).
   Inlined into the gallery by the GalleryTheme when interactive features are enabled.

   Every colour here is a token from the gallery's palette, and that is not housekeeping: this
   file is loaded into the same document as the theme's own stylesheet, so the tokens are in
   scope and the dark block that redefines them reaches these rules too. Spelled as hex, they
   did not — the comment bar stayed white on a dark page, which is what a reader saw and
   reported. The form controls follow through `color-scheme`, which `:root` declares.

   `color: var(--bg)` on the save button is deliberate and not a mistake for `--card`: it is the
   label on a filled accent, so it has to invert with the page. White on the dark accent measures
   3.1:1, under what text needs; `--bg` gives 5.4 in light and 6.1 in dark. */

#pinax-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  margin: 0.6rem 0;
  font-size: 0.85rem;
}
#pinax-bar button,
#pinax-bar .pinax-file {
  font: inherit;
  cursor: pointer;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.2rem 0.55rem;
  color: var(--fg);
}
#pinax-bar button:hover,
#pinax-bar .pinax-file:hover {
  background: var(--line);
}
#pinax-bar button.on {
  background: var(--warn-bg);
  border-color: var(--warn);
}
#pinax-bar .pinax-file input {
  display: none;
}
#pinax-bar .pinax-note {
  color: var(--faint);
  font-size: 0.82rem;
}

#pinax-bar .pinax-status {
  color: var(--mut);
  margin-left: auto;
}

/* per-node controls injected by the JS */
.pinax-ctl {
  font: inherit;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0 0.25rem;
  opacity: 0.65;
}
.pinax-ctl:hover {
  opacity: 1;
}
h2 .pinax-ctl,
figcaption .pinax-ctl {
  font-size: 0.85rem;
}

/* a comment turn typed in the browser but not yet exported to comments.toml */
.pinax-cmt.local {
  border-left: 2px solid var(--warn);
  padding-left: 0.5rem;
}
.pinax-cmt .unsaved {
  color: var(--warn);
  font-size: 0.8em;
  margin-left: 0.3rem;
}
.pinax-cmt .del {
  cursor: pointer;
  color: var(--bad);
  margin-left: 0.4rem;
  opacity: 0.6;
}
.pinax-cmt .del:hover {
  opacity: 1;
}

/* the inline editor */
.pinax-editor {
  margin: 0.4rem 0;
}
.pinax-editor textarea {
  width: 100%;
  min-height: 3.5rem;
  font: inherit;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.4rem;
}
.pinax-editor .row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.3rem;
}
.pinax-editor input.author {
  font: inherit;
  width: 7rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.15rem 0.4rem;
}
.pinax-editor button {
  font: inherit;
  cursor: pointer;
  border-radius: 6px;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--line);
  background: var(--soft);
}
.pinax-editor button.save {
  background: var(--acc);
  border-color: var(--acc);
  color: var(--bg);
}

/* bookmark-only filter: hide non-bookmarked sections */
body.pinax-filter section.section:not(.bookmarked) {
  display: none;
}