.ws-harm-explanation { font-size: .85rem; }
.ws-harm-cards { display: grid; gap: 1.2rem; margin-top: 1rem; }
.ws-harm-card { container-type: inline-size; min-width: 0; padding: clamp(.65rem, 2vw, 1.1rem); border: 1px solid var(--ws-border); border-radius: 10px; }
.workshop .ws-harm-card h3 { margin: 0 0 .55rem; font-size: 1.12rem; line-height: 1.25; }
.ws-harm-takeaway { max-width: 42rem; margin-bottom: .9rem; }
.ws-harm-takeaway strong { color: #9b416f; font-size: 1.15em; font-variant-numeric: tabular-nums; }
.ws-harm-chart { min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; border-radius: 4px; }
.ws-harm-chart:focus-visible { outline: 3px solid var(--ws-blue); outline-offset: 3px; }
.ws-harm-svg { display: block; width: 100%; min-width: 620px; height: auto; overflow: visible; }
.ws-harm-ribbon { opacity: .35; }
.ws-harm-ribbon:hover { opacity: .65; }
.ws-harm-label { font: 14px Figtree, Arial, sans-serif; fill: var(--ws-ink); paint-order: stroke; stroke: white; stroke-width: 4px; stroke-linejoin: round; }
.ws-harm-percent { font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ws-harm-column { font: 12px Figtree, Arial, sans-serif; font-weight: 600; fill: var(--ws-muted); }
.workshop .ws-harm-footnote { margin: .45rem 0 0; }
.ws-harm-scroll-hint { display: none; }
@container (max-width: 619px) {
  .ws-harm-scroll-hint { display: block; margin-bottom: .4rem; }
}
