/* Heredity layout. Colours, font, cards and controls use Electricity tokens, plus a few local ones. */
.hr-root { --hr-violet: #b088d9; --hr-yellow: #e6c770; --hr-green: #6fae6a; --hr-blue: #4a7fc9; --hr-red: #d9534f; }
.hr-root .hr-body { width: 100%; max-width: 1050px; margin: 0 auto; padding: 20px 22px 40px; flex-shrink: 0; }
.hr-root .hr-stage { border: 1px solid var(--ec-border); border-radius: 12px; background: var(--ec-deep); padding: 16px; margin: 18px 0; overflow: hidden; }
.hr-root svg { display: block; width: 100%; max-height: 460px; margin: auto; }
.hr-root .hr-stage > svg { min-height: 220px; }

.hr-root .hr-organism, .hr-root .hr-organism-child { fill: var(--ec-mint); }
.hr-root .hr-organism-a { fill: var(--hr-blue); }
.hr-root .hr-organism-b { fill: var(--hr-violet); }
.hr-root .hr-organism-c, .hr-root .hr-organism-e { fill: var(--ec-cream); }
.hr-root .hr-organism-d, .hr-root .hr-organism-f { fill: var(--hr-yellow); }
.hr-root .hr-organism-fading { fill: var(--ec-muted); opacity: 0.5; }
.hr-root .hr-band-0 { fill: var(--ec-mint); }
.hr-root .hr-band-1 { fill: var(--hr-blue); }
.hr-root .hr-band-2 { fill: var(--hr-violet); }
.hr-root .hr-band-3 { fill: var(--ec-cream); }
.hr-root .hr-band-4 { fill: var(--hr-yellow); }
.hr-root .hr-bacterium { fill: var(--ec-mint); }
.hr-root .hr-bacterium-stressed { fill: var(--ec-muted); opacity: 0.4; }
.hr-root .hr-bacterium-variant { fill: var(--hr-yellow); }
.hr-root .hr-bacterium-gone { display: none; }
.hr-root .hr-ear { fill: var(--ec-surface); stroke: var(--ec-border); stroke-width: 2; }
.hr-root .hr-lobe { fill: none; stroke-width: 3; }
.hr-root .hr-lobe-free { stroke: var(--ec-mint); }
.hr-root .hr-lobe-attached { stroke: var(--hr-yellow); }
.hr-root .hr-card { fill: var(--ec-surface); stroke: var(--ec-border); stroke-width: 2; }
.hr-root .hr-card-tall { stroke: var(--ec-mint); }
.hr-root .hr-card-short { stroke: var(--hr-yellow); }
.hr-root .hr-mystery { fill: var(--ec-cream); }

.hr-root .hr-stem { stroke: var(--ec-mint); stroke-width: 4; }
.hr-root .hr-stem-short { stroke: var(--hr-yellow); }
.hr-root .hr-leaf { fill: none; stroke: var(--ec-mint); stroke-width: 3; }
.hr-root .hr-pea-tall { fill: var(--hr-violet); }
.hr-root .hr-pea-short { fill: var(--hr-yellow); }

.hr-root .hr-petal-violet { fill: var(--hr-violet); }
.hr-root .hr-petal-white { fill: var(--ec-surface); stroke: var(--ec-border); stroke-width: 2; }

.hr-root .hr-seed-round { fill: var(--ec-mint); }
.hr-root .hr-seed-wrinkled { fill: var(--hr-yellow); }
.hr-root .hr-seed-ry { fill: var(--hr-yellow); }
.hr-root .hr-seed-rg { fill: var(--hr-green); }
.hr-root .hr-seed-wy { fill: var(--hr-yellow); opacity: 0.7; }
.hr-root .hr-seed-wg { fill: var(--hr-green); opacity: 0.7; }

.hr-root .hr-cell { fill: var(--ec-surface); stroke: var(--ec-border); stroke-width: 1.5; }
.hr-root .hr-cell-example { fill: var(--ec-surface); stroke: var(--ec-cream); stroke-width: 3; }
.hr-root .hr-cell-ry { fill: var(--hr-yellow); opacity: 0.55; stroke: var(--ec-border); }
.hr-root .hr-cell-rg { fill: var(--hr-green); opacity: 0.55; stroke: var(--ec-border); }
.hr-root .hr-cell-wy { fill: var(--hr-yellow); opacity: 0.25; stroke: var(--ec-border); }
.hr-root .hr-cell-wg { fill: var(--hr-green); opacity: 0.25; stroke: var(--ec-border); }

.hr-root .hr-flow-box { fill: var(--ec-surface); stroke: var(--ec-border); stroke-width: 2; }
.hr-root .hr-flow-good { stroke: var(--ec-mint); }
.hr-root .hr-flow-weak { stroke: var(--hr-yellow); }

.hr-root .hr-cell-outline, .hr-root .hr-body-outline { fill: var(--ec-surface); stroke: var(--ec-border); stroke-width: 2; }
.hr-root .hr-chromo-mat { stroke: var(--hr-blue); stroke-width: 5; stroke-linecap: round; }
.hr-root .hr-chromo-pat { stroke: var(--hr-violet); stroke-width: 5; stroke-linecap: round; }
.hr-root .hr-zygote { fill: var(--ec-mint); }
.hr-root .hr-x-chromo { fill: var(--hr-blue); }
.hr-root .hr-y-chromo { fill: var(--hr-violet); }

.hr-root .hr-label, .hr-root .hr-tiny, .hr-root .hr-caption-svg { fill: var(--ec-text); font: 500 15px Manrope, sans-serif; }
.hr-root .hr-tiny { fill: var(--ec-secondary); font-size: 13px; }
.hr-root .hr-tiny-on-dark { fill: var(--ec-deep); font: 700 12px Manrope, sans-serif; }
.hr-root .hr-caption-svg { font: 600 16px Manrope, sans-serif; }

.hr-root .hr-arrow { stroke: var(--ec-light); stroke-width: 2.5; }
.hr-root .hr-arrowhead { fill: var(--ec-light); }
.hr-root .hr-line { stroke: var(--ec-border); stroke-width: 3; }

.hr-root .hr-caption, .hr-root .hr-card-box { background: var(--ec-deep); border: 1px solid var(--ec-border); border-radius: 12px; padding: 20px; margin: 18px 0; }
.hr-root .hr-caption > p:last-child { font-size: 20px; line-height: 1.5; margin: 0; }
.hr-root .hr-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 14px; }
.hr-root .hr-control { display: flex; flex-direction: column; gap: 7px; font-size: 14px; color: var(--ec-secondary); max-width: 100%; min-width: 0; flex: 1; }
.hr-root select { font: inherit; font-size: 16px; color: var(--ec-text); background: var(--ec-surface); border: 1px solid var(--ec-border); border-radius: 10px; padding: 12px; max-width: 100%; width: 100%; min-width: 0; }
.hr-root .hr-note-source { font-size: 13px; color: var(--ec-secondary); line-height: 1.5; margin: 12px 0; }
.hr-root .hr-observe { border-left: 2px solid var(--ec-mint); padding: 10px 16px; color: var(--ec-light); }
.hr-root h2 { font-size: 22px; line-height: 1.4; margin: 8px 0 18px; }
.hr-root h3 { font-size: 18px; line-height: 1.4; }
.hr-root summary { cursor: pointer; font-weight: 600; padding: 3px 0; }
.hr-root .hr-map-links, .hr-root .hr-question-links { display: grid; gap: 6px; }
.hr-root .hr-map-links a, .hr-root .hr-question-links a { padding: 12px; color: var(--ec-light); border-bottom: 1px solid var(--ec-border); line-height: 1.5; text-decoration: none; }
.hr-root .hr-map-links small { float: right; color: var(--ec-muted); }
.hr-root .hr-count { margin-left: auto; font-size: 12px; color: var(--ec-secondary); }
.hr-root .ec-controls > [data-action=next] { margin-left: auto; }
.hr-root .ec-chapter-title { white-space: normal; }
.hr-root .hr-answer { margin-top: 24px; }
.hr-root .hr-answer > .hr-stage svg { max-height: 380px; }
.hr-root .hr-answer p { line-height: 1.7; }

/* Card class alias used by index.js */
.hr-root .hr-card-list { background: var(--ec-deep); border: 1px solid var(--ec-border); border-radius: 12px; padding: 20px; margin: 18px 0; }

@media (max-width: 600px) {
  .hr-root .hr-body { padding: 16px 16px 32px; }
  .hr-root .ec-heading { padding: 20px 16px 0; }
  .hr-root .hr-stage { padding: 8px; }
  .hr-root .hr-card-list, .hr-root .hr-caption { padding: 16px; }
  .hr-root .hr-controls { align-items: stretch; }
  .hr-root .hr-control { flex-basis: 44%; }
  .hr-root .ec-chapter-title { font-size: 12px; }
  .hr-root .hr-caption > p:last-child { font-size: 18px; }
  .hr-root .ec-action { padding: 10px 12px; }
  .hr-root .hr-stage svg { max-height: 340px; }
}
@media (min-width: 1500px) {
  .hr-root .hr-body { max-width: 1280px; }
  .hr-root .hr-stage svg { max-height: 540px; }
  .hr-root .hr-caption > p:last-child { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) { .hr-root * { transition: none !important; } }