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

/* generic structural / outline shapes */
.rp-root .rp-cell, .rp-root .rp-bread, .rp-root .rp-amoeba, .rp-root .rp-leishmania, .rp-root .rp-plasmodium,
.rp-root .rp-planaria, .rp-root .rp-planaria-piece, .rp-root .rp-hydra-body, .rp-root .rp-tube, .rp-root .rp-microscope-field,
.rp-root .rp-plant-piece, .rp-root .rp-potato, .rp-root .rp-leaf-shape, .rp-root .rp-stem-piece, .rp-root .rp-water,
.rp-root .rp-callus, .rp-root .rp-plantlet, .rp-root .rp-seed-coat, .rp-root .rp-body-outline, .rp-root .rp-testis,
.rp-root .rp-ovary, .rp-root .rp-uterus, .rp-root .rp-cervix, .rp-root .rp-vagina, .rp-root .rp-uterine-wall,
.rp-root .rp-uterus-big, .rp-root .rp-health-card, .rp-root .rp-recap-card, .rp-root .rp-filament,
.rp-root .rp-style-big, .rp-root .rp-ovary-big, .rp-root .rp-petal, .rp-root .rp-sepal {
  fill: var(--ec-surface); stroke: var(--ec-border); stroke-width: 2;
}
.rp-root .rp-organism, .rp-root .rp-organism-young { fill: var(--ec-mint); }
.rp-root .rp-organism-fading { fill: var(--ec-muted); opacity: 0.6; }
.rp-root .rp-cut { stroke: var(--rp-red); stroke-width: 3; }
.rp-root .rp-dna, .rp-root .rp-dna-icon, .rp-root .rp-dna-icon-double { fill: none; stroke: var(--ec-mint); stroke-width: 3; }
.rp-root .rp-apparatus { fill: none; stroke: var(--ec-cream); stroke-width: 2; stroke-dasharray: 4 3; }
.rp-root .rp-bacterium { fill: var(--ec-mint); }
.rp-root .rp-bacterium-dying { fill: var(--ec-muted); opacity: 0.4; }
.rp-root .rp-bacterium-variant { fill: var(--rp-yellow); }
.rp-root .rp-bacterium-gone { display: none; }
.rp-root .rp-cell-bud, .rp-root .rp-hydra-bud { fill: var(--rp-yellow); }
.rp-root .rp-cell-young { fill: var(--ec-mint); }
.rp-root .rp-mould-dot { fill: var(--ec-secondary); }
.rp-root .rp-nucleus { fill: var(--ec-cream); }
.rp-root .rp-flagellum { stroke: var(--ec-cream); stroke-width: 3; }
.rp-root .rp-axis-guide { stroke: var(--ec-muted); stroke-width: 1.5; stroke-dasharray: 3 3; }
.rp-root .rp-filament-grown { fill: var(--ec-mint); }
.rp-root .rp-cell-mass { fill: var(--ec-mint); }
.rp-root .rp-planaria-developing { fill: var(--ec-surface); stroke: var(--ec-mint); }
.rp-root .rp-tentacle, .rp-root .rp-tentacle-small { stroke: var(--ec-mint); stroke-width: 2.5; }
.rp-root .rp-new-plant, .rp-root .rp-new-plant-dot, .rp-root .rp-shoot-grown { stroke: var(--ec-mint); fill: var(--ec-mint); stroke-width: 2; }
.rp-root .rp-eye { fill: var(--rp-yellow); }
.rp-root .rp-sprout, .rp-root .rp-root-grown { stroke: var(--ec-mint); stroke-width: 3; fill: none; }
.rp-root .rp-leaf-bud { fill: var(--rp-yellow); }
.rp-root .rp-leaf-small { fill: var(--ec-mint); opacity: 0.7; }
.rp-root .rp-hypha, .rp-root .rp-hypha-new { stroke: var(--ec-border); stroke-width: 2; }
.rp-root .rp-sporangium { fill: var(--rp-yellow); stroke: var(--ec-border); }
.rp-root .rp-spore { fill: var(--ec-cream); }
.rp-root .rp-spore-falling { fill: var(--ec-cream); }
.rp-root .rp-recap-active { stroke: var(--ec-mint); }
.rp-root .rp-gamete-male { fill: var(--rp-blue); }
.rp-root .rp-gamete-female { fill: var(--rp-pink); }
.rp-root .rp-zygote, .rp-root .rp-zygote-flower, .rp-root .rp-zygote-human { fill: var(--ec-mint); }
.rp-root .rp-anther { fill: var(--rp-yellow); stroke: var(--ec-border); }
.rp-root .rp-style, .rp-root .rp-filament { stroke: var(--ec-border); stroke-width: 2; }
.rp-root .rp-stigma, .rp-root .rp-stigma-big { fill: var(--rp-pink); }
.rp-root .rp-ovule, .rp-root .rp-ovule-big { fill: var(--ec-cream); }
.rp-root .rp-pollen-grain { fill: var(--rp-yellow); }
.rp-root .rp-pollen-tube { stroke: var(--ec-mint); stroke-width: 3; fill: none; }
.rp-root .rp-male-cell { fill: var(--rp-blue); }
.rp-root .rp-transform-a { fill: var(--ec-surface); stroke: var(--ec-border); stroke-width: 2; }
.rp-root .rp-transform-active { stroke: var(--ec-mint); }
.rp-root .rp-transform-b { fill: var(--rp-yellow); stroke: var(--ec-border); stroke-width: 2; }
.rp-root .rp-cotyledon { fill: var(--rp-yellow); opacity: 0.8; }
.rp-root .rp-plumule, .rp-root .rp-radicle { stroke: var(--ec-mint); stroke-width: 3; }
.rp-root .rp-vasdeferens, .rp-root .rp-urethra, .rp-root .rp-oviduct { fill: none; stroke: var(--ec-border); stroke-width: 3; }
.rp-root .rp-seminalvesicle, .rp-root .rp-prostate { fill: var(--rp-yellow); }
.rp-root .rp-sperm { fill: var(--ec-cream); }
.rp-root .rp-sperm-tail { stroke: var(--ec-cream); stroke-width: 1.5; }
.rp-root .rp-egg { fill: var(--rp-pink); }
.rp-root .rp-egg-moving { fill: var(--rp-pink); }
.rp-root .rp-egg-fading { fill: var(--ec-muted); opacity: 0.5; }
.rp-root .rp-embryo { fill: var(--ec-mint); }
.rp-root .rp-placenta-disc { fill: var(--rp-yellow); opacity: 0.6; stroke: var(--ec-border); }
.rp-root .rp-villus-line { stroke: var(--ec-mint); stroke-width: 2; }
.rp-root .rp-lining { fill: none; stroke: var(--rp-pink); stroke-width: 8; opacity: 0.6; }
.rp-root .rp-lining-shedding { stroke: var(--rp-red); stroke-dasharray: 6 4; }
.rp-root .rp-menstrual-flow { fill: var(--rp-red); }
.rp-root .rp-health-card-good { stroke: var(--ec-mint); }

/* text */
.rp-root .rp-label, .rp-root .rp-tiny, .rp-root .rp-caption-svg { fill: var(--ec-text); font: 500 15px Manrope, sans-serif; }
.rp-root .rp-tiny { fill: var(--ec-secondary); font-size: 13px; }
.rp-root .rp-caption-svg { font: 600 16px Manrope, sans-serif; }

/* arrows */
.rp-root .rp-arrow { stroke: var(--ec-light); stroke-width: 2.5; }
.rp-root .rp-arrow-in { stroke: var(--ec-mint); }
.rp-root .rp-arrow-out { stroke: var(--ec-secondary); }
.rp-root .rp-arrow-self { stroke: var(--rp-blue); }
.rp-root .rp-arrow-cross { stroke: var(--rp-pink); }
.rp-root .rp-arrowhead { fill: var(--ec-light); }
.rp-root .rp-line { stroke: var(--ec-border); stroke-width: 3; }

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

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