/* Capability figures.

   Every capability block carries its own diagram, inserted as
   <span class="capfig"> immediately before the end of the description.
   A span is used rather than a div so it stays valid inside a p, td, dd or li.

   The default set has had its own style block stripped, so those figures take
   their colours from the host template through the same --fig-* custom
   properties as the main figure. The blueprint and isometric sets keep their
   own styling on purpose, which is what makes those variants worth having. */

.capfig {
  display: block;
  margin: 18px 0 2px;
  max-width: 750px;
}

.capfig svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Stroke-only geometry must not fill.

   An SVG path fills with black unless told otherwise. The line-art capability
   figures had their own style block stripped so they would inherit the host
   template's palette, and that block was what carried fill: none. Without it,
   any curved path closed itself and filled solid, which made the figures look
   cut out. Template rules like `svg .thin` set stroke only, so they never
   overrode it.

   These selectors are more specific than the template's own, so they win, and
   they are declared for the whole page rather than just .capfig so the main
   approach figure is covered by the same safety net. */
svg.fig .thin,
svg.fig .traj,
svg.fig .grid,
svg.fig .hatch,
svg.fig .hidden,
.capfig svg .thin,
.capfig svg .traj {
  fill: none;
}

/* Templates define thin, traj, craft, axis and label, but not always zone.
   Give it a sensible default drawn from the same palette. */
.capfig svg .zone {
  fill: var(--fig-traj, #1c3557);
  fill-opacity: 0.10;
  stroke: var(--fig-traj, #1c3557);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

/* Never let a figure force a narrow column wider than it should be. */
@media (max-width: 700px) {
  .capfig { max-width: 100%; }
}