/* ix-heal2.css — interactive healing-appendix figure (assets/js/ix-heal2.js): Fig. 22 radar.
   Figure content always sits on the light card: every color here is a fixed light-theme value.
   Type: 12px for every in-chart label, 14px for tooltip body and the radar model titles; nothing else.
   Inter for labels, JetBrains Mono (uppercase, .08em) for tooltip heads. */

.ih2 { color: #1d1f22; font-family: var(--sans); }
.ih2 svg { display: block; overflow: visible; font-family: var(--sans); }

/* ---- svg text ---- */
.ih2 .ih2-tick { fill: #6b6f75; font: 400 12px var(--sans); font-variant-numeric: tabular-nums; }
.ih2 .ih2-lab { fill: #44484f; font: 500 12px var(--sans); }
.ih2 .ih2-halo { paint-order: stroke; stroke: #fdfdfd; stroke-width: 4px; stroke-linejoin: round; }
.ih2 .ih2-tickbg { fill: #fdfdfd; fill-opacity: .88; }
.ih2 .ih2-gridl { stroke: #ecebe7; shape-rendering: crispEdges; }
.ih2 .ih2-hd { stroke: #fdfdfd; stroke-width: 1.6; }

/* ---- plot boxes (focusable) ---- */
.ih2-plot { position: relative; width: 100%; border-radius: 8px; outline: none; -webkit-tap-highlight-color: transparent; }
.ih2-plot:focus-visible { box-shadow: 0 0 0 2px #2e6f95; }
/* vertical swipes scroll the page; taps drive the chart */
.ih2-plot svg, .ih2-ov { touch-action: pan-y pinch-zoom; }

/* ---- method chips (legend + toggles) ---- */
.ih2-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; }
.ih2-chip {
  appearance: none; display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 6px 12px 6px 10px;
  border: 1px solid #e3e0da; border-radius: 999px; background: #fdfdfd; color: #44484f;
  font: 500 12px/1 var(--sans); white-space: nowrap; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ih2-chip svg { width: 18px; height: 10px; flex: none; overflow: visible; }
.ih2-chip.q { color: #a13040; font-weight: 700; }
.ih2-chip.fixed { cursor: default; border-color: transparent; background: transparent; padding-left: 4px; padding-right: 8px; }
.ih2-chip[aria-pressed="false"] { background: #f4f2ee; color: #8f9298; border-color: #ebe8e2; }
.ih2-chip[aria-pressed="false"] svg { opacity: .28; }
button.ih2-chip:hover { border-color: #c9c6c0; }
.ih2-chip:focus-visible { outline: 2px solid #2e6f95; outline-offset: 2px; }

/* ---- tooltip rows ---- */
.ih2 .vtip { font: 400 var(--fs-s, 13px)/1.45 var(--sans); max-width: 300px; }
.ih2 .vtip .tt { font: 600 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.vtip .ih2-row { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: baseline; }
.vtip .ih2-row b { font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
.vtip .ih2-row .ih2-v2 { color: #6b6f75; font-variant-numeric: tabular-nums; text-align: right; }
.vtip .ih2-row.q .ih2-n { color: #a13040; font-weight: 600; }
.vtip .ih2-row.ref { border-top: 1px solid #ece8e0; margin-top: 3px; padding-top: 3px; }
.vtip .ih2-row.hd { font: 600 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #6b6f75; }
.vtip .ih2-n { color: #44484f; white-space: nowrap; }
.vtip .ih2-k { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 7px; vertical-align: 3px; }
.vtip .ih2-k.dash { height: 0; border-top: 2px dashed #8a8d92; border-radius: 0; }

/* ---- Fig. 22 radar ---- */
.ih2-radars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }
.ih2-radars.stack { grid-template-columns: minmax(0, 1fr); }
.ih2-rt { margin: 0 0 2px; font: 600 var(--fs-s, 13px)/1.3 var(--sans); color: #1d1f22; text-align: center; }
.ih2-poly { transition: opacity .2s ease, stroke-width .2s ease, fill-opacity .2s ease; }
.ih2-blab { transition: fill .15s ease; }
.ih2-blab.on { fill: #1d1f22; font-weight: 650; }

/* fetch failure: neutral data label in place of the chart */
.ih2-fail { padding: 22px 0; text-align: center; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #6b6f75; }

@media (prefers-reduced-motion: reduce) {
  .ih2-poly, .ih2-chip { transition: none; }
}
@media (max-width: 600px) {
  .ih2-chip { padding: 6px 10px 6px 8px; gap: 6px; }
}