/* Diagram geometry for the T-060 figures. Publication type is shared with T-018. */
/* A table keeps to the column at every width and scrolls inside its own wrap. The shared
   column rule caps each block of the article at the measure, and that cap outranks the
   one KPress puts on a table's wrap; on a pane narrower than the measure the wrap then
   grew to its table's full width and ran past the article, which clips it: 184px and
   402px at 390px and 72px at 768px, measured by `preview_site --clips`. Capped at the
   column as well, the wrap is the scroller, as a document's table is on the site's own
   pages (site.css). Print lays a table out at the page's width and is not affected. */
.cert-page.n11-paper > .kpress-table-wrap {
  max-width: min(100%, calc(var(--kpress-measure) + 2 * var(--kpress-column-inset)));
}
/* The credits, their one column and the space before this paper's own, are the
   publication layer's: both papers write them from one component
   (`devtools.paper_front`), and nothing here is theirs. */
.n11-paper figure > svg,
.n11-paper .figure-pair > svg {
  display: block;
  width: 100%;
  height: auto;
}
/* The capacity drawing is one cell and two disks with no lettering, and the ladder a
   short list of rungs drawn for a phone's column, so each is set at a drawing's width,
   centred, as the construction in Figure 1 is, and on a phone takes the column. */
.n11-paper figure > svg:is(.n11-capacity, .n11-ladder) {
  margin-inline: auto;
  max-width: 24rem;
}
.n11-paper .figure-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: center;
}
.n11-paper :is(.figure-pair, figure:has(> svg)) {
  font-size: var(--paper-font-size-support);
}
/* A label with no class of its own is the sans's regular weight, as a note is: weight
   is inherited where the face is not, and without one a label sat at the serif's 400. */
.n11-paper :where(figure > svg, .figure-pair > svg) text {
  font-family: var(--kpress-font-sans);
  font-feature-settings: var(--kpress-font-features-sans);
  font-size: var(--paper-diagram-font-size, var(--paper-font-size-support));
  font-weight: var(--cert-font-weight-sans-light);
}
.n11-paper .n11-diagram-label {
  font-weight: var(--cert-font-weight-sans-bold);
}
.n11-paper .n11-diagram-note {
  font-size: var(--paper-diagram-note-size, var(--paper-font-size-note));
  font-weight: var(--cert-font-weight-sans-light);
}
/* The cover, mask, ladder, capacity, capture and mechanism diagrams are drawn in fixed
   light palettes, ink included. On the dark theme they keep a light ground under them,
   so a label drawn outside a panel stays readable; without it the labels were dark ink
   on the dark page. The roadmap, local and endpoint diagrams are drawn in the theme's
   own tokens and take none, and the construction in Figure 1 carries no lettering and
   takes the theme as the first paper's does (`.trump`, in the publication layer). A
   test holds this list to the diagrams that carry fixed ink. The ground is a token, as
   every colour is (`devtools.check_colour_tokens`). */
:root {
  --n11-diagram-ground: oklch(100% 0 0);
}
:root[data-kpress-resolved-theme="dark"]
  .n11-paper
  :is(
    .n11-cover,
    .n11-mask,
    .n11-ladder,
    .n11-capacity,
    .n11-capture,
    .n11-mechanism-pose,
    .n11-mechanism-row,
    .n11-mechanism-charge,
    .n11-mechanism-symmetry
  ) {
  background: var(--n11-diagram-ground);
}
@media print {
  /* Chromium measures before pagination; fix the same Letter text-column width
     that the PDF uses so viewBox label compensation sees its final scale. */
  .n11-paper figure > svg,
  .n11-paper .figure-pair {
    width: calc(8.5in - 2 * var(--kpress-print-page-margin));
    max-width: none;
  }
}
/* The width a diagram's labels were laid out for, registered as a length, so the label
   script reads it in pixels whatever unit it is written in (`diagram-labels.js`), and an
   unset or `initial` value is 0px, which shrinks nothing. */
@property --paper-diagram-fit-from {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
/* On a phone a diagram takes the column where it reasonably can, as the owner asked on
   2026-10-03 (think-wzc1), judged figure by figure; until then each was held at 680px or
   more and scrolled sideways. A pair stacks. Below `--paper-diagram-fit-from`, the
   narrowest width a diagram's labels were laid out for at the support size, its labels
   shrink with it in proportion (`diagram-labels.js`), so each stays in its box: about
   0.53 of the support size at 390px, which suits a drawing whose labels are short or
   whose shapes carry it. Two keep their width and scroll, since shrunk their lettering
   would not read: the capture tree, whose branch conditions are fractions in the note
   size, and the charge-budget panel, which is mostly lines of set notation. */
@media screen and (max-width: 42rem) {
  .n11-paper .figure-pair {
    grid-template-columns: minmax(0, 1fr);
  }
  .n11-paper .n11-diagram {
    --paper-diagram-fit-from: 680px;
  }
  .n11-paper figure:has(> :is(.n11-capture, .n11-mechanism-charge)) {
    overflow-x: auto;
  }
  .n11-paper :is(.n11-capture, .n11-mechanism-charge) {
    --paper-diagram-fit-from: initial;
    min-width: 680px;
  }
  .n11-paper .n11-capture {
    min-width: 850px;
  }
}