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

.oe-root .oe-ground, .oe-root .oe-soil, .oe-root .oe-soil-surface, .oe-root .oe-soil-cover { fill: var(--oe-brown); opacity: 0.5; }
.oe-root .oe-tree, .oe-root .oe-tree-big { fill: var(--oe-green); }
.oe-root .oe-trunk { stroke: var(--oe-brown); stroke-width: 4; }
.oe-root .oe-insect { fill: var(--oe-yellow); }
.oe-root .oe-bird { fill: var(--ec-cream); }
.oe-root .oe-frog { fill: var(--oe-green); }
.oe-root .oe-sun, .oe-root .oe-sun-small { fill: var(--oe-yellow); }
.oe-root .oe-water { fill: var(--oe-blue); opacity: 0.5; }
.oe-root .oe-garden, .oe-root .oe-field, .oe-root .oe-tank, .oe-root .oe-tank-outline { fill: var(--ec-surface); stroke: var(--ec-border); stroke-width: 2; }
.oe-root .oe-tank-cloudy { fill: var(--ec-muted); opacity: 0.4; stroke: var(--ec-border); stroke-width: 2; }
.oe-root .oe-organism { fill: var(--ec-mint); }
.oe-root .oe-food { fill: var(--oe-yellow); }
.oe-root .oe-bubble { fill: var(--ec-cream); opacity: 0.7; }
.oe-root .oe-waterplant { fill: var(--oe-green); }
.oe-root .oe-plant-stem { stroke: var(--oe-green); stroke-width: 3; fill: none; }
.oe-root .oe-chlorophyll { fill: var(--oe-green); opacity: 0.6; }
.oe-root .oe-sugar, .oe-root .oe-pesticide-dot { fill: var(--oe-yellow); }
.oe-root .oe-goat { fill: var(--oe-brown); }
.oe-root .oe-cut { stroke: var(--oe-red); stroke-width: 3; }
.oe-root .oe-category { fill: var(--ec-mint); opacity: 0.6; }
.oe-root .oe-dead-leaf { fill: var(--oe-brown); opacity: 0.7; }
.oe-root .oe-microbe { fill: var(--ec-mint); }
.oe-root .oe-microbe-blocked { fill: var(--oe-red); opacity: 0.6; }
.oe-root .oe-pile { fill: var(--ec-muted); }
.oe-root .oe-predator-x { fill: var(--oe-red); opacity: 0.5; }
.oe-root .oe-slot { fill: var(--ec-surface); stroke: var(--ec-border); stroke-width: 2; }
.oe-root .oe-chain-node { fill: var(--ec-surface); stroke: var(--ec-border); stroke-width: 2; }
.oe-root .oe-chain-active { stroke: var(--ec-mint); }
.oe-root .oe-trophic-0 { fill: #a7c957; }
.oe-root .oe-trophic-1 { fill: #6fae6a; }
.oe-root .oe-trophic-2 { fill: var(--oe-brown); }
.oe-root .oe-trophic-3 { fill: var(--oe-yellow); }
.oe-root .oe-trophic-generic { fill: var(--ec-surface); stroke: var(--ec-border); stroke-width: 2; }
.oe-root .oe-ray { stroke: var(--oe-yellow); stroke-width: 1.5; opacity: 0.6; }
.oe-root .oe-energy-bar { fill: var(--oe-yellow); }
.oe-root .oe-flow-band { fill: var(--ec-surface); stroke: var(--ec-border); stroke-width: 2; }
.oe-root .oe-web-producer { fill: var(--oe-green); }
.oe-root .oe-web-consumer { fill: var(--oe-yellow); }
.oe-root .oe-web-predator { fill: var(--oe-red); opacity: 0.75; }
.oe-root .oe-o-atom { fill: var(--oe-blue); }
.oe-root .oe-ozone-layer { fill: var(--ec-mint); opacity: 0.5; }
.oe-root .oe-ozone-thin { opacity: 0.2; }
.oe-root .oe-cfc-rise { stroke: var(--oe-red); stroke-width: 2; fill: none; stroke-dasharray: 4 3; }
.oe-root .oe-fridge { fill: var(--ec-surface); stroke: var(--ec-border); stroke-width: 2; }
.oe-root .oe-fridge-clean { stroke: var(--ec-mint); }
.oe-root .oe-agreement { fill: var(--ec-cream); opacity: 0.3; stroke: var(--ec-cream); stroke-width: 2; }
.oe-root .oe-item-organic { fill: var(--oe-green); }
.oe-root .oe-item-plastic { fill: var(--oe-red); opacity: 0.6; }
.oe-root .oe-item-cloth { fill: var(--oe-yellow); opacity: 0.6; }
.oe-root .oe-key, .oe-root .oe-lock { fill: var(--ec-cream); }
.oe-root .oe-plastic-item { fill: var(--oe-red); opacity: 0.6; }
.oe-root .oe-house, .oe-root .oe-truck { fill: var(--ec-surface); stroke: var(--ec-border); stroke-width: 2; }
.oe-root .oe-bin-green { fill: var(--oe-green); opacity: 0.6; }
.oe-root .oe-bin-gray { fill: var(--oe-gray); opacity: 0.6; }
.oe-root .oe-compost { fill: var(--oe-brown); }
.oe-root .oe-recycle { fill: var(--ec-mint); opacity: 0.6; }
.oe-root .oe-cup-glass { fill: var(--oe-blue); opacity: 0.5; }
.oe-root .oe-cup-plastic { fill: var(--oe-red); opacity: 0.5; }
.oe-root .oe-cup-clay { fill: var(--oe-brown); }
.oe-root .oe-cup-paper { fill: var(--ec-cream); opacity: 0.7; }
.oe-root .oe-device { fill: var(--ec-muted); }
.oe-root .oe-magnifier { fill: none; stroke: var(--ec-cream); stroke-width: 3; }

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

.oe-root .oe-arrow { stroke: var(--ec-light); stroke-width: 2.5; }
.oe-root .oe-arrow-dim { stroke: var(--ec-muted); opacity: 0.5; }
.oe-root .oe-arrow-energy { stroke: var(--oe-yellow); }
.oe-root .oe-arrow-cycle { stroke: var(--ec-mint); }
.oe-root .oe-arrow-uv { stroke: var(--oe-red); }
.oe-root .oe-arrowhead { fill: var(--ec-light); }
.oe-root .oe-arrowhead-x { fill: var(--oe-red); }
.oe-root .oe-line { stroke: var(--ec-border); stroke-width: 2; }

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

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