/* Figures in blog posts.
 *
 * The essays build their own figure CSS into each page, because the corpus publisher emits a
 * complete document. Blog posts are assembled in the browser from a database row, so the markup
 * arrives with the same class names and none of the rules — an SVG that would render at its
 * intrinsic size, a caption in body type, and no way to reach the right-hand third on a phone.
 *
 * These are the essay rules, reduced to what a blog post needs and written so they cannot leak:
 * every selector is inside .pub-figure. Colours are not set here at all — each figure carries its
 * own palette and its own dark-mode block in its <style> element, which is why they survive being
 * inlined into a page that knows nothing about them.
 *
 * Added 2026-09-05 with the first figure to appear on the blog.
 */

.pub-figure {
  width: 100%;
  margin: 2.2em 0;
}

/* Sideways scroll rather than shrink. These figures are drawn on a 960 grid with 11px type; at
 * phone width a proportional scale renders the labels at about four pixels, which is not a small
 * version of the figure — it is an image of a figure. */
.pub-figure .pub-figscroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.pub-figure .pub-figscroll:focus-visible {
  outline: 2px solid #1f6f6b;
  outline-offset: 3px;
}

.pub-figure svg {
  display: block;
  width: 100%;
  height: auto;
  border: none;
  background: none;
}

.pub-figure figcaption {
  margin-top: 0.75em;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #5c7472;
  text-align: left;
}

.pub-figure .pub-figid {
  font: 650 0.74rem/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.1em;
  color: #5c7472;
  margin-right: 0.5em;
}

@media (prefers-color-scheme: dark) {
  .pub-figure figcaption,
  .pub-figure .pub-figid { color: #8fa9a5; }
}

/* Below the width the figure was drawn for, hold it at its natural size and let the wrapper
 * scroll. The caption gains a line saying so, because a horizontal scroll with no affordance is
 * a part of the picture the reader never learns is there. */
@media (max-width: 900px) {
  .pub-figure .pub-figscroll { margin: 0 -12px; padding: 0 12px; }
  .pub-figure .pub-figscroll > svg { width: 960px; max-width: none; }
  .pub-figure figcaption::before {
    content: "Scroll the figure sideways to read it all. ";
    font-style: italic;
  }
}

@media print {
  .pub-figure { margin: 1.6em 0; page-break-inside: avoid; }
  .pub-figure .pub-figscroll { overflow: visible; }
  .pub-figure .pub-figscroll > svg { width: 100%; max-width: 100%; height: auto; }
  .pub-figure figcaption::before { content: ""; }
}