/* Ausgeology · Ecosystems and cycles: this lesson's own blocks.
   Loaded after lesson.css, which holds the shared design system. */
:root {
  --eco-sky: #dcebf3; --eco-sea: #4f9dbf; --eco-sea-2: #2f7fa3; --eco-wet: #c9b68f; --eco-sand: #e7d3a6; --eco-sand-2: #d8bf8a; --eco-soil: #b79a6a;
  --eco-grass: #6f9a3e; --eco-shrub: #4f7a36; --eco-shrub-2: #3d6430; --eco-flower: #e9c43b; --eco-wattle: #c9a826;
  --eco-line: #5a4632; --eco-q: #b4501c;
  --kite-1: #2a78d6; --kite-2: #1baf7a; --kite-3: #eb6834; --kite-4: #8a63c9; --kite-5: #c49a14;
  --pl-bg: #f3f1ea; --pl-water: #cfe6ef; --pl-weed: #3f7a35; --pl-glass: #9fb4bd; --pl-lamp: #3d4852; --pl-beam: #ffd84a; --pl-bubble: #ffffff;
  --cy-sky: #e3eff5; --cy-soil: #b89a6c; --cy-rock: #8f8574; --cy-sea: #6fb0cc; --cy-sed: #9b9180; --cy-leaf: #5b9a3c; --cy-trunk: #6b4a2e; --cy-animal: #9a7b5a;
  --cy-factory: #69737a; --cy-coal: #2b2b2b; --cy-cloud: #ffffff; --cy-volcano: #7a5f52; --cy-arrow: #1f5f8b; --cy-arrow-on: #b4501c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --eco-sky: #1b2a33; --eco-sea: #2c6d89; --eco-sea-2: #1f5670; --eco-wet: #6d5f45; --eco-sand: #8c7a55; --eco-sand-2: #7a6847; --eco-soil: #6a5838;
    --eco-grass: #6f9a3e; --eco-shrub: #4f7a36; --eco-shrub-2: #3d6430; --eco-flower: #c9a830; --eco-wattle: #a8901f; --eco-line: #e7d7c0; --eco-q: #ec8a52;
    --kite-1: #3987e5; --kite-2: #199e70; --kite-3: #d95926; --kite-4: #9a7ad6; --kite-5: #c49a14;
    --pl-bg: #1b2328; --pl-water: #1f3d4a; --pl-weed: #6fae5c; --pl-glass: #5d7680; --pl-lamp: #c3ccd1; --pl-beam: #ffd84a; --pl-bubble: #e8f4f8;
    --cy-sky: #18252d; --cy-soil: #6a5838; --cy-rock: #4f4a42; --cy-sea: #2c6d89; --cy-sed: #575148; --cy-leaf: #5b9a3c; --cy-trunk: #a17d5a; --cy-animal: #a88b6a;
    --cy-factory: #8b959c; --cy-coal: #0d0d0d; --cy-cloud: #c9d3d8; --cy-volcano: #8a6e60; --cy-arrow: #7fb9e4; --cy-arrow-on: #ffb27a;
  }
}
:root[data-theme="dark"] {
  --eco-sky: #1b2a33; --eco-sea: #2c6d89; --eco-sea-2: #1f5670; --eco-wet: #6d5f45; --eco-sand: #8c7a55; --eco-sand-2: #7a6847; --eco-soil: #6a5838;
  --eco-line: #e7d7c0; --eco-q: #ec8a52; --kite-1: #3987e5; --kite-2: #199e70; --kite-3: #d95926; --kite-4: #9a7ad6;
  --pl-bg: #1b2328; --pl-water: #1f3d4a; --pl-weed: #6fae5c; --pl-glass: #5d7680; --pl-lamp: #c3ccd1; --pl-bubble: #e8f4f8;
  --cy-sky: #18252d; --cy-soil: #6a5838; --cy-rock: #4f4a42; --cy-sea: #2c6d89; --cy-sed: #575148; --cy-trunk: #a17d5a; --cy-animal: #a88b6a;
  --cy-factory: #8b959c; --cy-coal: #0d0d0d; --cy-cloud: #c9d3d8; --cy-volcano: #8a6e60; --cy-arrow: #7fb9e4; --cy-arrow-on: #ffb27a;
}

/* ---------- the dune scene ---------- */
.eco-stage { background: var(--eco-sky); }
.eco-stage svg { min-width: 720px; }
.ds-sky { fill: var(--eco-sky); } .ds-sea { fill: var(--eco-sea); } .ds-sea-2 { fill: var(--eco-sea-2); opacity: 0.6; }
.ds-wet { fill: var(--eco-wet); } .ds-sand { fill: var(--eco-sand); } .ds-sand-2 { fill: var(--eco-sand-2); } .ds-soil { fill: var(--eco-soil); }
.ds-grass { fill: none; stroke: var(--eco-grass); stroke-width: 2; stroke-linecap: round; }
.ds-shrub { fill: var(--eco-shrub); } .ds-shrub-2 { fill: var(--eco-shrub-2); } .ds-flower { fill: var(--eco-flower); } .ds-wattle { fill: var(--eco-wattle); }
.ds-salt { fill: #9fb3a0; } .ds-sheoak { fill: #5d7a55; }
.ds-stem { fill: none; stroke: var(--cy-trunk); stroke-width: 3; stroke-linecap: round; }
.ds-lab { font: 700 15px var(--font-body); fill: var(--ink); }
.ds-lab-s { font: 13px var(--font-body); fill: var(--ink-2); }
.ds-wind { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; marker-end: url(#ds-ah); opacity: 0.7; }
.ds-ah { fill: var(--ink-2); }
.tr-line { fill: none; stroke: var(--eco-q); stroke-width: 2; stroke-dasharray: 5 4; }
.tr-q rect { fill: rgba(255, 255, 255, 0.35); stroke: var(--eco-q); stroke-width: 2; }
.tr-q.is-on rect { fill: var(--eco-q); }
.tr-q-t { font: 700 12px var(--font-mono); fill: var(--ink); }
.tr-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tr-chip { font-size: 0.9rem; min-height: 40px; padding: 6px 12px; }
.tr-table { min-width: 680px; }
.tr-table th, .tr-table td { white-space: nowrap; }

/* ---------- kite diagram ---------- */
.kite { stroke: var(--surface); stroke-width: 1; opacity: 0.9; }
.kite.k1 { fill: var(--kite-1); } .kite.k2 { fill: var(--kite-2); } .kite.k3 { fill: var(--kite-3); } .kite.k4 { fill: var(--kite-4); } .kite.k5 { fill: var(--kite-5); }
.kite-key { stroke: var(--ink-2); stroke-width: 3; }

/* ---------- photosynthesis lab ---------- */
.pl-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 18px; align-items: start; }
.pl-stage { background: var(--pl-bg); max-width: 300px; }
.pl-bg { fill: var(--pl-bg); }
.pl-lamp { fill: var(--pl-lamp); }
.pl-beam { fill: var(--pl-beam); }
.pl-beaker { fill: none; stroke: var(--pl-glass); stroke-width: 4; }
.pl-water { fill: var(--pl-water); }
.pl-weed { fill: none; stroke: var(--pl-weed); stroke-width: 4; stroke-linecap: round; }
.pl-funnel { fill: none; stroke: var(--pl-glass); stroke-width: 2.5; }
.pl-bubble { fill: var(--pl-bubble); stroke: var(--pl-glass); stroke-width: 1; }
.pl-t { font: 700 15px var(--font-mono); fill: var(--ink); }
.pl-ctrls { display: grid; gap: 14px; }
.pl-rate { margin: 0; font-size: 1.05rem; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.pl-rate b { font-size: 1.4rem; font-family: var(--font-mono); }
.slider-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; font-weight: 700; font-size: 0.95rem; }
.slider-row input { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); min-height: 32px; }
.slider-row output { font-family: var(--font-mono); font-weight: 700; color: var(--accent); }
@media (max-width: 680px) { .pl-grid { grid-template-columns: 1fr; } .pl-stage { margin: 0 auto; } }

/* ---------- population model ---------- */
.pop-ctrls { display: grid; gap: 12px; margin-bottom: 14px; max-width: 640px; }
.pop-check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.97rem; line-height: 1.4; cursor: pointer; }
.pop-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); flex: none; }

/* ---------- cycle diagram ---------- */
.cy-sky { fill: var(--cy-sky); } .cy-soil { fill: var(--cy-soil); } .cy-rock { fill: var(--cy-rock); } .cy-sea { fill: var(--cy-sea); } .cy-sed { fill: var(--cy-sed); }
.cy-river { fill: none; stroke: var(--cy-sea); stroke-width: 5; stroke-linecap: round; }
.cy-volcano { fill: var(--cy-volcano); }
.cy-trunk { fill: none; stroke: var(--cy-trunk); stroke-width: 4; stroke-linecap: round; }
.cy-leaf { fill: var(--cy-leaf); }
.cy-animal { fill: var(--cy-animal); }
.cy-factory { fill: var(--cy-factory); }
.cy-coal { fill: var(--cy-coal); }
.cy-crop { fill: none; stroke: var(--cy-leaf); stroke-width: 3; stroke-linecap: round; }
.cy-plankton { fill: #2f8f4a; }
.cy-cloud { fill: var(--cy-cloud); opacity: 0.9; }
.cy-arrow { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.cy-arrow-g.is-on .cy-arrow { stroke: var(--cy-arrow-on); stroke-width: 4.5; }
.cy-arrow-g.is-seen .cy-arrow { stroke: var(--cy-arrow); opacity: 0.45; }
.cy-ah-on { fill: var(--cy-arrow-on); } .cy-ah-seen { fill: var(--cy-arrow); opacity: 0.45; }
.cy-lab { font: 700 16px var(--font-body); fill: var(--ink); }
.halo { fill: none !important; stroke: var(--surface); stroke-width: 4.5; stroke-linejoin: round; opacity: 0.9; }

/* ---------- report ---------- */
.rep-view { margin-top: 12px; padding: 16px 18px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 6px; max-width: 72ch; }
.rep-view h4 { margin: 0 0 6px; font-size: 1.15rem; }
.rep-view h5 { margin: 8px 0 0; font-size: 0.95rem; color: var(--accent); }
.rep-view p { margin: 0; line-height: 1.5; }
.cf-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.ucards.dt-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
@media (max-width: 640px) { .ucards.dt-pair { grid-template-columns: 1fr; } }
/* four phases on the start screen */
.st-how.st-how-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .st-how.st-how-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .st-how.st-how-4 { grid-template-columns: minmax(0, 1fr); } }
.p-d i { background: #2f7a4a; }
.phase.p-c i { background: #8a5a12; }
.cy-bolt { fill: none; stroke: #e0b52a; stroke-width: 3; stroke-linejoin: round; }
.cy-zone { font: 600 14px var(--font-body); fill: var(--ink-soft, #555); letter-spacing: 0.04em; text-transform: uppercase; }