/* Hero diagram (design-direction.md #21). Root class: .mmc-hero-diagram
   P1: field loops hang from the mark's three pole tips; five nodes sit on the outer loop;
   each label sits beside its node. The lines SVG uses viewBox 0 0 520 350, the box keeps
   that exact ratio, and the mark and labels are placed in percentages of the same box, so
   everything stays aligned at any width. Labels size in container query units.
   The whole column is hidden below 690px by base.css's .mm-hero__visual; this file only
   needs to size correctly once that column is visible. */
.mmc-hero-diagram { position: relative; width: 100%; aspect-ratio: 52 / 35; container-type: inline-size; }
.mmc-hd-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mmc-hd-line { fill: none; stroke: var(--mm-rule-tip); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mmc-hd-line--outer { stroke: var(--mm-text); stroke-width: 2; }
.mmc-hd-node { fill: var(--mm-bg); stroke: var(--mm-text); stroke-width: 2; vector-effect: non-scaling-stroke; }
.mmc-hd-mark-wrap { position: absolute; top: 5.714%; left: 50%; width: 28.846%; transform: translateX(-50%); }
.mmc-hd-mark-wrap svg { width: 100%; height: auto; }
.mmc-hd-primary { fill: var(--mm-brand-primary); }
.mmc-hd-secondary { fill: var(--mm-brand-secondary); }
.mmc-hd-labels { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
/* list-style is inherited, so setting it on the <ul> above is not enough on its own: the parent theme's
   compiled style.css carries a directly-matching `ul li{list-style:disc}` rule (confirmed by
   reading css/build/style.css), and a rule that DIRECTLY matches an element always wins over an
   inherited value from an ancestor, regardless of specificity. Repeating list-style:none here,
   scoped to the label's own class, matches the <li> directly and outranks that plain-element
   selector on specificity (one class beats any number of bare elements) -- confirmed empirically:
   without this line the marker rendered for every label, merely hidden behind the diagram artwork
   for the two text-align:right labels (1-2) and plainly visible for the other three (3-5). */
.mmc-hd-label { position: absolute; max-width: 31%; font: 500 clamp(0.8125rem, 3.3cqi, 1rem)/1.3 var(--mm-font-ui); color: var(--mm-text); text-wrap: balance; transform: translateY(-50%); list-style: none; }
.mmc-hd-label--1 { top: 65.257%; right: 68.846%; text-align: right; }
.mmc-hd-label--2 { top: 84.571%; right: 63.846%; text-align: right; }
.mmc-hd-label--3 { top: 89.429%; left: 50%; max-width: none; white-space: nowrap; transform: translateX(-50%); }
.mmc-hd-label--4 { top: 84.571%; left: 63.846%; }
.mmc-hd-label--5 { top: 65.257%; left: 68.846%; }