/* ------------------------------------------------------------------
   Application notes: blog posts (overrides/blog-post.html, wrapper
   .post) and the blog index (overrides/blog.html, .notes). Shared
   tokens, header, footer, .strip, h1, figure, figcaption and table
   defaults live in datasheet.css. Every rule here is scoped under
   .post or .notes so it cannot leak into the other pages, except the
   site-wide scroll padding below (harmless on pages without anchors)
   and the prose rules written :is(.post .prose, .doc-prose), which the
   user docs (docs.css) share; :is() keeps their specificity unchanged.
   Application-note mode: prose is the product.
   ------------------------------------------------------------------ */
html { scroll-padding-top: 24px; }

/* document grid: content column + sticky contents sidebar */
.post { --measure: 40rem;   /* ~68 characters of Literata at 19px */
  display: grid; grid-template-columns: minmax(0, var(--measure)) 1fr; gap: 0 88px; }
.post .doc__head { grid-column: 1 / -1; }
:is(.post, .doc-prose) strong { font-weight: 650; }

/* title block additions: AND-gate document mark, byline */
.post .strip .glyph { width: 27px; height: 16px; vertical-align: -2px; margin-right: 8px; color: var(--ink); }
.post .byline { font: 400 15.5px/1.4 var(--sans); color: var(--ink-2); margin: 0 0 28px; }
.post .byline b { color: var(--ink); font-weight: 600; }

/* abstract box (also the excerpt on the blog index) */
.post .abstract, .notes .abstract { border: 1px solid var(--rule); margin: 0 0 36px; }
.post .abstract__h, .notes .abstract__h { background: var(--fill); border-bottom: 1px solid var(--rule); padding: 6px 16px; font: 650 15px/1.4 var(--sans); }
.post .prose .abstract p, .notes .abstract p { margin: 0; padding: 14px 16px 16px; font: 400 17.5px/1.62 var(--serif); }

/* prose */
.post .prose { font: 400 19px/1.72 var(--serif); counter-reset: sec; }
:is(.post .prose, .doc-prose) code { font-size: 0.84em; padding: 0.08em 0.3em; overflow-wrap: anywhere; }  /* long paths and 40-digit hashes must wrap on phones */
:is(.post .prose, .doc-prose) > p, :is(.post .prose, .doc-prose) li { hyphens: auto; }
:is(.post .prose, .doc-prose) p { margin: 0 0 1.05em; }
/* numbered sections; the contents sidebar numbers them the same way */
.post .prose > h2 { counter-increment: sec; font: 700 26px/1.25 var(--sans); font-stretch: 90%; margin: 2.1em 0 0.6em; display: flex; gap: 14px; align-items: baseline; }
.post .prose > h2::before { content: counter(sec); color: var(--mask); font-stretch: 75%; min-width: 1.3em; }
:is(.post .prose, .doc-prose) ul { padding-left: 1.3em; margin: 0 0 1.1em; }
:is(.post .prose, .doc-prose) li { margin-bottom: 0.4em; }
:is(.post .prose, .doc-prose) li::marker { color: var(--mask); }

/* figures, listings, tables */
.post figure { margin: 2em 0 2.2em; }
.post .frame { border: 1px solid var(--rule); padding: 18px 14px 10px; }
.post .frame svg { display: block; width: 100%; height: auto; }
.post figcaption, .post .cap { font: 400 15px/1.45 var(--sans); color: var(--ink-2); margin-top: 10px; max-width: none; }
.post figcaption b, .post .cap b { color: var(--ink); font-weight: 650; }
.post .prose .cap--top { margin: 0 0 8px; }
.post .chart text { font-family: var(--sans); fill: var(--ink); }
.post .chart .ax { font-size: 14.5px; fill: var(--ink-2); }
.post .chart .k { font-size: 15.5px; }
.post .chart .tot { paint-order: stroke; stroke: var(--paper); stroke-width: 6px; font-size: 23px; font-weight: 750; font-stretch: 85%; }
.post .chart .bar { font-size: 16.5px; font-weight: 600; }
.post .chart .grid { stroke: var(--rule-soft); stroke-width: 1; }
/* Figure 1 bar segments, coloured like the Figures 2-4 timelines below */
.post .chart .sg.build { fill: var(--series-build); }
.post .chart .sg.obs { fill: var(--series-obs); }
.post .chart .sg.else { fill: var(--series-else); }
.post .chart .sg.hung { fill: var(--series-hung); }
.post .chart .sg.sleep { fill: var(--series-sleep); }
/* value labels sit on a segment: fixed ink, because the series colours are fixed;
   a label placed off the bars would need theme ink instead */
.post .chart .v { font-size: 15px; font-weight: 600; fill: var(--series-on-light); }
.post .chart .v.on-dark { fill: var(--series-on-dark); }

/* Figures 2-4: per-trial timelines. HTML bars (not SVG) so labels keep their
   size on phones; segment positions are % of the axis span, measured from
   the source charts. Colours match Figure 1. */
.post .tl { padding: 18px 18px 14px; font-family: var(--sans); }
.post .tl__row { margin-bottom: 16px; }
.post .prose .tl__lab { margin: 0; font: 400 15.5px/1.3 var(--sans); color: var(--ink-2); }
.post .tl__lab b { color: var(--ink); font-weight: 650; }
.post .tl__tot { margin-left: 8px; color: var(--ink); font-weight: 750; font-stretch: 85%; font-size: 18px; }
.post .tl__track { position: relative; height: 30px; margin-top: 16px;
  background: repeating-linear-gradient(to right, var(--rule-soft) 0 1px, transparent 1px var(--grid)); }
.post .tl__track .s { position: absolute; top: 0; bottom: 0; }
.post .prose .tl__note { margin: 5px 0 0; font: 400 14px/1.3 var(--sans); color: var(--ink-2); }
.post .s.build, .post .sw.build { background: var(--series-build); }
.post .s.obs, .post .sw.obs { background: var(--series-obs); }
.post .s.else, .post .sw.else { background: var(--series-else); }
.post .s.hung, .post .sw.hung { background: var(--series-hung); }
.post .s.sleep, .post .sw.sleep { background: var(--series-sleep); }
.post .s.hunt, .post .sw.hunt { background: repeating-linear-gradient(135deg, var(--mask) 0 2px, var(--hatch) 2px 6px); }
.post .mk-tri { position: absolute; top: -12px; width: 0; height: 0; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid var(--ink); }
.post .mk-dot { position: absolute; top: -13px; height: 9px; min-width: 9px; border-radius: 5px; background: var(--mask); }
.post .tl__key .mk-tri, .post .tl__key .mk-dot { position: static; display: inline-block; transform: none; flex: none; }
.post .tl__key .mk-tri { margin: 0 2px; }
.post .tl__key .mk-dot { width: 9px; margin: 0 2px; }
.post .tl__axis { position: relative; height: 22px; border-top: 1px solid var(--ink); font: 400 13.5px/1 var(--sans); color: var(--ink-2); }
.post .tl__axis span { position: absolute; top: 6px; transform: translateX(-50%); }
.post .tl__axis span::before { content: ""; position: absolute; left: 50%; top: -6px; height: 4px; border-left: 1px solid var(--ink); }
.post .prose .tl__axh { margin: 4px 0 12px; text-align: center; font: 400 13.5px/1.3 var(--sans); color: var(--ink-2); }
.post .prose .tl__key { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--rule-soft);
  display: flex; flex-wrap: wrap; gap: 5px 22px; font: 400 14.5px/1.35 var(--sans); }
.post .prose .tl__key li { margin: 0; display: flex; align-items: center; gap: 8px; hyphens: manual; }
.post .tl__key .sw { flex: none; width: 18px; height: 11px; }

/* code listings: diff, checksum and prompt variants */
:is(.post, .doc-prose) pre { margin: 0; background: var(--fill-2); border: 1px solid var(--rule); padding: 14px 16px; overflow-x: auto;
  font: 14px/1.6 var(--mono); color: var(--ink); }
:is(.post .prose, .doc-prose) pre code { all: unset; }
:is(.post, .doc-prose) pre, :is(.post, .doc-prose) code { font-variant-ligatures: none; }  /* JetBrains Mono would draw == as one glyph */
.post pre .p { color: var(--ink-2); user-select: none; }
.post pre .c { color: var(--ink-2); }
.post pre .hl { background: var(--diff-add); display: inline-block; min-width: 100%; }
.post pre .del { background: var(--diff-del); display: inline-block; min-width: 100%; }
.post pre .add { background: var(--diff-add); display: inline-block; min-width: 100%; }
.post pre.prompt { white-space: pre-wrap; font-size: 13.5px; }  /* soft-wrap only; the download keeps exact line breaks */
.post pre.sum { padding: 8px 14px; margin: 0 0 1.3em; font-size: 13.5px; }

/* key-value tables (th scope=row) inside notes */
:is(.post .prose, .doc-prose) table { font: 400 15.5px/1.45 var(--sans); }
:is(.post .prose, .doc-prose) th, :is(.post .prose, .doc-prose) td { padding: 7px 12px; }
.post th[scope="row"] { background: var(--fill-2); font-weight: 600; width: 9em; }

/* details = a collapsible "Note" box */
.post details { border: 1px solid var(--rule); margin: 1.6em 0 2em; }
.post summary { cursor: pointer; list-style: none; background: var(--fill); padding: 9px 16px; font: 650 16px/1.4 var(--sans); display: flex; gap: 12px; align-items: center; }
.post summary::-webkit-details-marker { display: none; }
.post summary::before { content: ""; width: 0; height: 0; border-left: 7px solid var(--mask); border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: transform .15s; }
.post details[open] summary::before { transform: rotate(90deg); }
.post details[open] summary { border-bottom: 1px solid var(--rule); }
@media (prefers-reduced-motion: reduce) { .post summary::before { transition: none; } }
.post .details__body { padding: 16px 18px 4px; font-size: 17.5px; line-height: 1.65; }
.post .details__body table { margin-bottom: 16px; }
.post .details__body h3 { font: 700 18px/1.3 var(--sans); margin: 1.6em 0 0.5em; }
.post .details__body figure { margin: 1em 0 1.4em; }

/* blockquote = quoted bug report, set apart as a different voice */
.post blockquote { margin: 0 0 1.1em; padding: 4px 0 4px 20px; border-left: 4px solid var(--rule-soft); font: 400 16.5px/1.6 var(--sans); color: var(--quote-ink); }

/* contents sidebar */
.post .toc { position: sticky; top: 24px; align-self: start; margin-top: 4px; font: 400 15px/1.4 var(--sans); }
.post .toc p { margin: 0; }
.post .toc .toc__h { font-weight: 650; margin: 0 0 10px; }
.post .toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule-soft); }
.post .toc li { margin: 0; }
.post .toc ol a { display: grid; grid-template-columns: 1.6em 1fr; padding: 5px 0 5px 14px; color: var(--ink-2); text-decoration: none; margin-left: -1px; border-left: 2px solid transparent; }
.post .toc ol a:hover { color: var(--ink); }
.post .toc ol a.on { color: var(--ink); border-left-color: var(--mask); }
.post .toc__refs { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--rule-soft); color: var(--ink-2); font-size: 14px; }
.post .toc__refs p { margin: 0 0 6px; }
.post .toc__refs a { color: inherit; text-decoration: none; }
.post .toc__refs a:hover { color: var(--ink); text-decoration: underline; }
.post .toc .toc__dl { margin-top: 12px; }
.post .toc .toc__dl a { color: var(--mask); text-decoration: underline; }

/* ---- Blog index: the application-notes register ---- */
.notes { margin-top: 28px; }
.note-entry { border: 1px solid var(--rule); padding: 22px 26px 18px; margin-bottom: 24px; max-width: 820px; }
.note-entry__meta { margin: 0 0 10px; font: 400 14px/1.4 var(--sans); color: var(--ink-2); }
.note-entry__meta b { font: 700 15px/1 var(--sans); color: var(--mask); font-stretch: 85%; margin-right: 10px; }
.note-entry__t { font: 700 26px/1.2 var(--sans); font-stretch: 88%; margin: 0 0 16px; max-width: 28ch; }
.note-entry__t a { color: var(--ink); text-decoration: none; }
.note-entry__t a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
/* the blog plugin prepends the post title to each excerpt; the entry already shows it */
.note-entry__x > h2:first-child { display: none; }
.note-entry__x .abstract { margin-bottom: 14px; }
.note-entry__more { margin: 0; font: 600 15px/1.4 var(--sans); }
.note-entry__none { color: var(--ink-2); font-family: var(--sans); }
.notes__pages { font-family: var(--sans); display: flex; gap: 16px; }

@media (max-width: 960px) {
  .post { grid-template-columns: minmax(0, 1fr); }
  .post .toc { display: none; }
}
@media (max-width: 600px) {
  .post .prose { font-size: 18px; line-height: 1.68; }
  .post .prose > h2 { font-size: 23px; }
  .post th[scope="row"] { width: 6.5em; }
  .post .frame { padding: 10px 4px 6px; }
  .post .frame.tl { padding: 14px 12px 10px; }
  .note-entry { padding: 16px 16px 14px; }
  .note-entry__t { font-size: 22px; }
}