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

/* generic structural / outline shapes */
.lp-root .lp-body-outline, .lp-root .lp-tube-outline, .lp-root .lp-stomach, .lp-root .lp-leaf, .lp-root .lp-leaf-small,
.lp-root .lp-amoeba, .lp-root .lp-fish-body, .lp-root .lp-ribcage, .lp-root .lp-lung, .lp-root .lp-alveolus,
.lp-root .lp-vessel-wall, .lp-root .lp-xylem-tube, .lp-root .lp-phloem-tube, .lp-root .lp-dialyser,
.lp-root .lp-cuff, .lp-root .lp-soil, .lp-root .lp-gauge, .lp-root .lp-villus-big, .lp-root .lp-lung-zone,
.lp-root .lp-tissue-zone, .lp-root .lp-capsule, .lp-root .lp-glomerulus, .lp-root .lp-tubule,
.lp-root .lp-guard-cell, .lp-root .lp-host, .lp-root .lp-organism, .lp-root .lp-lymph-vessel {
  fill: var(--ec-surface); stroke: var(--ec-border); stroke-width: 2;
}
.lp-root .lp-diaphragm { fill: var(--ec-deep); stroke: var(--ec-mint); stroke-width: 2; }
.lp-root .lp-capillary-wall { fill: none; stroke: var(--lp-red); stroke-width: 3; }
.lp-root .lp-vein, .lp-root .lp-septum, .lp-root .lp-mucus { fill: none; stroke: var(--ec-mint); stroke-width: 2; }
.lp-root .lp-decay { fill: var(--ec-muted); }
.lp-root .lp-zone-dim { opacity: 0.35; }

/* pores, pipes, tubes */
.lp-root .lp-pore { fill: var(--ec-deep); }
.lp-root .lp-ring { stroke: var(--ec-border); stroke-width: 2; }
.lp-root .lp-constrict { fill: none; stroke: var(--ec-cream); stroke-width: 4; }
.lp-root .lp-water-column { fill: var(--lp-blue); }

/* dots / particles */
.lp-root .lp-molecule, .lp-root .lp-o2-dot, .lp-root .lp-filtrate, .lp-root .lp-sugar { fill: var(--ec-mint); }
.lp-root .lp-molecule-fast { fill: var(--ec-cream); }
.lp-root .lp-hcl { fill: var(--lp-red); opacity: 0.8; }
.lp-root .lp-pepsin { fill: var(--ec-cream); }
.lp-root .lp-co2-dot { fill: var(--ec-secondary); }
.lp-root .lp-o2-dot-moved, .lp-root .lp-co2-dot-moved { fill: var(--lp-blue); }
.lp-root .lp-waste-store { fill: var(--ec-muted); }

/* fat / emulsification */
.lp-root .lp-fat, .lp-root .lp-fat-small { fill: var(--lp-yellow); stroke: var(--ec-border); stroke-width: 1; }

/* amoeba */
.lp-root .lp-pseudopod { fill: none; stroke: var(--ec-mint); stroke-width: 5; stroke-linecap: round; }
.lp-root .lp-food, .lp-root .lp-food-particle { fill: var(--lp-yellow); }
.lp-root .lp-vacuole { fill: var(--ec-deep); stroke: var(--ec-mint); stroke-width: 2; stroke-dasharray: 4 3; }
.lp-root .lp-egest { stroke: var(--ec-cream); stroke-width: 3; fill: none; }
.lp-root .lp-bolus { fill: var(--lp-yellow); }

/* respiration branch + energy products */
.lp-root .lp-glucose { fill: var(--ec-mint); }
.lp-root .lp-pyruvate { fill: var(--ec-cream); }
.lp-root .lp-product { fill: var(--ec-secondary); }
.lp-root .lp-product-aerobic { fill: var(--ec-mint); }

/* gills / breathing */
.lp-root .lp-mouth { fill: var(--ec-deep); stroke: var(--ec-cream); stroke-width: 2; }
.lp-root .lp-gill { stroke: var(--ec-border); stroke-width: 3; }
.lp-root .lp-gill-flow { stroke: var(--lp-blue); }

/* blood / heart */
.lp-root .lp-plasma { fill: var(--ec-deep); }
.lp-root .lp-rbc { fill: var(--lp-red); }
.lp-root .lp-wbc { fill: var(--ec-cream); }
.lp-root .lp-platelet { fill: var(--ec-mint); }
.lp-root .lp-atrium.lp-right, .lp-root .lp-ventricle.lp-right { fill: var(--lp-blue); opacity: 0.55; }
.lp-root .lp-atrium.lp-left, .lp-root .lp-ventricle.lp-left { fill: var(--lp-red); opacity: 0.55; }
.lp-root .lp-ventricle.lp-mixed { fill: #9a6fae; opacity: 0.55; }
.lp-root .lp-fibre { stroke: var(--ec-cream); stroke-width: 2; }
.lp-root .lp-clot { fill: var(--lp-red); opacity: 0.7; }
.lp-root .lp-cut { stroke: var(--lp-red); stroke-width: 4; fill: none; }
.lp-root .lp-needle { stroke: var(--ec-cream); stroke-width: 3; }

/* xylem / phloem / plant excretion */
.lp-root .lp-source { fill: var(--lp-green); }
.lp-root .lp-sink { fill: var(--ec-muted); }

/* nephron */
.lp-root .lp-urine { fill: var(--ec-cream); }

/* text */
.lp-root .lp-label, .lp-root .lp-gas-label, .lp-root .lp-tiny, .lp-root .lp-caption-svg { fill: var(--ec-text); font: 500 15px Manrope, sans-serif; }
.lp-root .lp-tiny { fill: var(--ec-secondary); font-size: 13px; }
.lp-root .lp-tiny-on-dark { fill: var(--ec-deep); font: 600 12px Manrope, sans-serif; }
.lp-root .lp-caption-svg { font: 600 16px Manrope, sans-serif; }
.lp-root .lp-emoji-svg { font-size: 34px; fill: var(--ec-cream); }
.lp-root .lp-stop-num { fill: var(--ec-deep); font: 700 14px Manrope, sans-serif; }
.lp-root .lp-stop-label { fill: var(--ec-secondary); font: 500 13px Manrope, sans-serif; }
.lp-root .lp-stop-label-current { fill: var(--ec-text); font-weight: 700; }

/* arrows */
.lp-root .lp-arrow { stroke: var(--ec-light); stroke-width: 2.5; }
.lp-root .lp-arrow-in, .lp-root .lp-arrow-reabsorb { stroke: var(--ec-mint); }
.lp-root .lp-arrow-out { stroke: var(--ec-secondary); }
.lp-root .lp-arrow-aerobic { stroke: var(--ec-mint); }
.lp-root .lp-arrow-anaerobic { stroke: var(--ec-secondary); }
.lp-root .lp-arrow-deox { stroke: var(--lp-blue); }
.lp-root .lp-arrow-ox { stroke: var(--lp-red); }
.lp-root .lp-arrow-flow { stroke: var(--lp-green); }
.lp-root .lp-arrowhead { fill: var(--ec-light); }

/* journey primitive */
.lp-root .lp-stop { fill: var(--ec-deep); stroke: var(--ec-border); stroke-width: 2; }
.lp-root .lp-stop-current { fill: var(--ec-mint); stroke: var(--ec-cream); }
.lp-root .lp-stop-done { fill: var(--ec-surface); stroke: var(--ec-mint); }
.lp-root .lp-line { stroke: var(--ec-border); stroke-width: 3; }
.lp-root .lp-line-done { stroke: var(--ec-mint); }
.lp-root .lp-journey-note { color: var(--ec-light); font-size: 16px; line-height: 1.6; text-align: center; padding: 0 8px; }
.lp-root .lp-journey-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.lp-root .lp-journey-controls button { font-size: 13px; padding: 8px 10px; }

/* villi zoom */
.lp-root .lp-villus { fill: var(--ec-border); }
.lp-root .lp-villus-lit { fill: var(--ec-mint); }

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

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