/* Hyke Studio — The documentation's real result pictures and its one request diagram (Decision 307).
 * Loaded by the documentation home, every guide page and the reference. Every picture is a stored copy at a fixed
 * 3:2 size (800×533 or 400×267), so each image carries its width and height and the page never shifts as it loads.
 * The diagram is inline SVG coloured through the theme's own custom properties, so light and dark draw the same
 * picture. Owning section(s): §38 */

/* A same-vehicle strip: the colours or the angles a guide names, each picture labelled with its option. */
/* Wrapping flex, not an auto-fit grid: an auto-fit grid inside the article's content-sized column lays every picture
   on one row and widens the whole article past a phone's width. */
.doc-picture-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 8px; max-width: 700px; }
.doc-picture-strip > .doc-picture-strip-item { flex: 1 1 88px; max-width: 132px; }
/* The fine print under a picture keeps the disclaimer's own small type inside an article, whose paragraphs are larger. */
.doc-body .doc-figure .picture-disclaimer, .doc-body .doc-figure .doc-figure-disclaimer, .docs-kinds-strip .picture-disclaimer { margin: 0; font-family: var(--hs-font-mono); font-size: 10.5px; line-height: 1.5; color: var(--hs-ink-muted); text-align: left; }
.doc-body .doc-picture-label { font-size: 11px; background: none; border: 0; padding: 0; color: var(--hs-ink-muted); }
.doc-picture-strip-item { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.doc-picture-strip-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.doc-picture-label { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); overflow-wrap: anywhere; text-align: center; }
.doc-figure-note, .doc-sample-note { margin: 0; }
.doc-figure .picture-disclaimer, .doc-figure .doc-figure-disclaimer { max-width: 440px; }
.doc-figure--strip .picture-disclaimer, .doc-figure--strip .doc-figure-disclaimer { max-width: 700px; }

/* The request diagram: side by side where its box is wide, stacked where it is narrow. */
.request-diagram { container-type: inline-size; margin: 6px 0 20px; }
.request-diagram svg { display: block; width: 100%; height: auto; }
.request-diagram .request-diagram-wide { max-width: 760px; }
.request-diagram .request-diagram-narrow { display: none; max-width: 340px; }
@container (max-width: 600px) {
  .request-diagram .request-diagram-wide { display: none; }
  .request-diagram .request-diagram-narrow { display: block; }
}
.dg-box { fill: var(--hs-surface); stroke: var(--hs-line); stroke-width: 1; }
.dg-kicker { font-family: var(--hs-font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; fill: var(--hs-amber-ink); }
.dg-code { font-family: var(--hs-font-mono); font-size: 12px; fill: var(--hs-ink-body); }
.dg-option { fill: var(--hs-amber-ink); font-weight: 700; }
.dg-body { font-family: var(--hs-font-sans); font-size: 14.5px; fill: var(--hs-ink-body); }
.dg-label { font-family: var(--hs-font-sans); font-size: 14.5px; font-weight: 600; fill: var(--hs-ink); }
.dg-sub { font-family: var(--hs-font-mono); font-size: 11px; fill: var(--hs-ink-muted); }
.dg-arrow { stroke: var(--hs-ink); stroke-width: 1.5; fill: none; }
.dg-arrow--back { stroke: var(--hs-amber); stroke-width: 2.5; }
.dg-arrow-head { fill: var(--hs-ink); fill: context-stroke; }

/* The documentation home: the kinds strip under the note that names the kinds — six pictures, the aircrafts a plane
   and a helicopter (Decision 366), each as wide as the five-picture strip's were. */
.docs-kinds-strip { margin: -18px 0 0; display: flex; flex-direction: column; gap: 8px; }
.docs-kinds-strip-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; max-width: 746px; }
.docs-kinds-strip-item { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.docs-kinds-strip-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.docs-kinds-strip-kind { font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); text-align: center; }
.docs-kinds-strip .picture-disclaimer { text-align: left; max-width: 620px; }
@media (max-width: 560px) { .docs-kinds-strip-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The reference (Decision 309 (3)): each figure sits under the option, worked example or note it demonstrates.
   The caption leads (what it shows, then the request options), the pictures follow — one picture, or a row each
   labelled with its option. Rows wrap (flex, not an auto-fit grid) so a phone-width panel never widens. The panel's
   one set of fine print sits under its first figure. */
.ref-figure { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.ref-figure-caption { margin: 0; font-size: 13px; line-height: 1.5; color: var(--hs-ink-body); max-width: 640px; }
.ref-figure-request { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-ink-muted); overflow-wrap: anywhere; }
.ref-figure-stage { width: min(100%, 280px); border-radius: 6px; }
.ref-figure-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
/* A transparent picture over a checked backdrop: faint grey squares over the theme's surface, so both themes read. */
.ref-figure-stage--checked {
  background-color: var(--hs-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 0h8v8H0zM8 8h8v8H8z' fill='gray' fill-opacity='.22'/%3E%3C/svg%3E");
  background-size: 16px 16px;
}
/* Wide enough for the seven angles on one row at desktop widths (7 × 136 px + six 8 px gaps). */
.ref-figure-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 8px; max-width: 1000px; }
.ref-figure-strip > .ref-figure-strip-item { flex: 1 1 96px; max-width: 136px; }
.ref-figure-strip-item { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.ref-figure-strip-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
/* Two classes, so the reference's own `li code` size (docs-reference.css) never enlarges a row's labels. */
/* A row's label breaks after its "=" (the template marks the spot), never inside a word. */
.ref-figure .ref-figure-label { font-family: var(--hs-font-mono); font-size: 11px; line-height: 1.4; color: var(--hs-ink-muted); overflow-wrap: break-word; text-align: center; background: none; border: 0; padding: 0; }
.ref-figure:not(.ref-figure--strip) .ref-figure-label { overflow-wrap: anywhere; }
.ref-figure:not(.ref-figure--strip) .ref-figure-label { text-align: left; }
.ref-figure-fine-print { display: flex; flex-direction: column; gap: 2px; max-width: 640px; }
.ref-figure-fine-print .picture-disclaimer { margin: 0; font-family: var(--hs-font-mono); font-size: 10.5px; line-height: 1.5; color: var(--hs-ink-muted); text-align: left; }