/* Ausgeology · Life through deep time: this lesson's own blocks.
   Loaded after lesson.css, which holds the shared design system. */
:root {
  --dt-hadean: #7b3b5c; --dt-archean: #b8456b; --dt-proterozoic: #c9567f; --dt-phan: #6f9fb5;
  --dt-edi: #e3a25f; --dt-pal: #8fb98a; --dt-mes: #5fb3a9; --dt-cen: #f2d16b;
  --dt-band-ink: #ffffff; --dt-band-ink-2: #1a2124;
  --fs-sand: #d9b48a; --fs-sand-2: #c99a6b; --fs-shale: #8d8a84; --fs-dark: #2f3236; --fs-lime: #d8d3c4; --fs-cave: #c8a982;
  --fs-line: #5a4632; --fs-shell: #7c6a55; --fs-shell-2: #93806a; --fs-bone: #efe3c8; --fs-bone-line: #8a7556;
  --fs-grap: #e8ecef; --fs-lam: #a69b84; --fs-lam-2: #c3b9a3; --fs-hollow: rgba(60, 44, 28, 0.28);
  --cf-ask: #fff4e0; --cf-ask-line: #d99a00;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dt-hadean: #8e4a6c; --dt-archean: #b8456b; --dt-proterozoic: #b04f74; --dt-phan: #4f7f95;
    --dt-edi: #b97d3e; --dt-pal: #5f8a5b; --dt-mes: #3f8a81; --dt-cen: #b59a3c;
    --fs-sand: #8f7556; --fs-sand-2: #7a6146; --fs-shale: #5a5853; --fs-dark: #1d1f22; --fs-lime: #77736a; --fs-cave: #7f6a50;
    --fs-line: #e7d7c0; --fs-shell: #3e3326; --fs-shell-2: #4d4030; --fs-bone: #cdbf9f; --fs-bone-line: #4a3d2a;
    --fs-grap: #d5dade; --fs-lam: #5b5446; --fs-lam-2: #6e6656; --fs-hollow: rgba(0, 0, 0, 0.35);
    --cf-ask: #3a2c10; --cf-ask-line: #ffcc4d;
  }
}
:root[data-theme="dark"] {
  --dt-hadean: #8e4a6c; --dt-archean: #b8456b; --dt-proterozoic: #b04f74; --dt-phan: #4f7f95;
  --dt-edi: #b97d3e; --dt-pal: #5f8a5b; --dt-mes: #3f8a81; --dt-cen: #b59a3c;
  --fs-sand: #8f7556; --fs-sand-2: #7a6146; --fs-shale: #5a5853; --fs-dark: #1d1f22; --fs-lime: #77736a; --fs-cave: #7f6a50;
  --fs-line: #e7d7c0; --fs-shell: #3e3326; --fs-shell-2: #4d4030; --fs-bone: #cdbf9f; --fs-bone-line: #4a3d2a;
  --fs-grap: #d5dade; --fs-lam: #5b5446; --fs-lam-2: #6e6656; --fs-hollow: rgba(0, 0, 0, 0.35);
  --cf-ask: #3a2c10; --cf-ask-line: #ffcc4d;
}

/* ---------- deep-time ribbon ---------- */
.dt-ribbon { margin: 14px 0 4px; }
.dt-ribbon svg { display: block; width: 100%; height: auto; overflow: visible; }
.dt-band rect { stroke: var(--surface); stroke-width: 1.5; }
.dt-band.hadean rect { fill: var(--dt-hadean); } .dt-band.archean rect { fill: var(--dt-archean); }
.dt-band.proterozoic rect { fill: var(--dt-proterozoic); } .dt-band.phan rect { fill: var(--dt-phan); }
.dt-band.edi rect { fill: var(--dt-edi); } .dt-band.pal rect { fill: var(--dt-pal); }
.dt-band.mes rect { fill: var(--dt-mes); } .dt-band.cen rect { fill: var(--dt-cen); }
.dt-band-t { font: 700 13px var(--font-body); fill: var(--dt-band-ink); pointer-events: none; }
.dt-band.edi .dt-band-t, .dt-band.pal .dt-band-t, .dt-band.cen .dt-band-t, .dt-band.mes .dt-band-t { fill: var(--dt-band-ink-2); }
.dt-tick { stroke: var(--viz-axis); stroke-width: 1.5; }
.dt-tick-t { font: 12px var(--font-mono); fill: var(--viz-muted); }
.dt-stalk { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.7; }
.dt-dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.dt-dot-t { font: 700 11px var(--font-mono); fill: var(--accent); pointer-events: none; }
.dt-mk { cursor: pointer; }
.dt-mk:hover .dt-dot, .dt-mk:focus .dt-dot { stroke-width: 3; }
.dt-mk:focus { outline: none; }
.dt-mk:focus-visible .dt-dot { stroke: var(--focus); stroke-width: 3.5; }
.dt-mk.is-on .dt-dot { fill: var(--accent); }
.dt-mk.is-on .dt-dot-t { fill: var(--accent-ink); }
.dt-mk.is-on .dt-stalk { stroke: var(--accent); stroke-dasharray: none; opacity: 1; stroke-width: 1.5; }
.dt-out { min-height: 5.2em; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); display: grid; gap: 6px; }
.dt-out p { margin: 0; line-height: 1.5; }
.dt-when { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.dt-when b { font-size: 1.05rem; }
.dt-when span { font-family: var(--font-mono); font-size: 0.86rem; color: var(--ink-2); }
.dt-clock { padding: 1px 8px; border-radius: 999px; background: var(--surface); }
.dt-out .src { font-size: 0.82rem; color: var(--ink-2); }
.dt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.dt-chip { display: inline-flex; align-items: center; gap: 8px; text-align: left; font-size: 0.92rem; padding: 6px 12px 6px 6px; min-height: 40px; }
.dt-chip-n { min-width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; font: 700 0.74rem var(--font-mono); border: 1.5px solid currentColor; }
.dt-chip[data-off] { opacity: 0.6; }

/* ---------- case file ---------- */
.cf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; position: relative; }
.cf-list::before { content: ""; position: absolute; left: 47px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.cf-list > li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; position: relative; }
.cf-y { font: 700 0.8rem var(--font-mono); text-align: center; padding: 6px 4px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--line); position: relative; z-index: 1; line-height: 1.25; }
.cf-ask .cf-y { border-color: var(--cf-ask-line); background: var(--cf-ask); }
.cf-card { padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 8px; }
.cf-ask .cf-card { background: var(--cf-ask); border-color: var(--cf-ask-line); }
.cf-card h4 { margin: 0; font-size: 1.02rem; line-height: 1.35; }
.cf-card h4:focus { outline: none; }
.cf-card p { margin: 0; line-height: 1.5; }
.cf-card .src { font-size: 0.82rem; color: var(--ink-2); }
.cf-picks { flex-direction: column; align-items: stretch; }
.cf-picks .rpick { text-align: left; border-radius: 12px; padding: 8px 12px; line-height: 1.35; }
.rpick.is-chosen { border-color: var(--accent); background: var(--accent-soft); }
.cf-then { display: grid; gap: 8px; padding-top: 8px; border-top: 1px dashed var(--cf-ask-line); }
.cf-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cf-nav [hidden] { display: none; }
@media (max-width: 560px) {
  .cf-list::before { left: 31px; }
  .cf-list > li { grid-template-columns: 64px minmax(0, 1fr); gap: 8px; }
  .cf-y { font-size: 0.72rem; padding: 5px 2px; }
}

/* ---------- fossil drawings ---------- */
.fs-slab { stroke: var(--fs-line); stroke-width: 1; stroke-opacity: 0.35; }
.fs-rock-sand { fill: var(--fs-sand); } .fs-rock-shale { fill: var(--fs-shale); } .fs-rock-dark { fill: var(--fs-dark); }
.fs-rock-lime { fill: var(--fs-lime); } .fs-rock-cave { fill: var(--fs-cave); }
.fs-imprint { fill: var(--fs-sand-2); stroke: var(--fs-line); stroke-width: 1.4; }
.fs-hollow { fill: var(--fs-hollow); stroke: none; }
.fs-rib { fill: none; stroke: var(--fs-line); stroke-width: 1.2; stroke-linecap: round; opacity: 0.85; }
.fs-mid { stroke: var(--fs-line); stroke-width: 2; stroke-linecap: round; }
.fs-shell { fill: var(--fs-shell); stroke: var(--fs-line); stroke-width: 1.2; stroke-linejoin: round; }
.fs-shell-2 { fill: var(--fs-shell-2); stroke: var(--fs-line); stroke-width: 1; stroke-linejoin: round; }
.fs-edge { fill: none; stroke: var(--fs-line); stroke-width: 1.1; stroke-linecap: round; opacity: 0.8; }
.fs-eye { fill: var(--fs-shell-2); stroke: var(--fs-line); stroke-width: 1.2; }
.fs-coil { fill: none; stroke: var(--fs-line); stroke-width: 2.2; stroke-linecap: round; }
.fs-grap { fill: none; stroke: var(--fs-grap); stroke-width: 2; stroke-linecap: round; }
.fs-grap-t { fill: none; stroke: var(--fs-grap); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.fs-bone { fill: var(--fs-bone); stroke: var(--fs-bone-line); stroke-width: 1.4; stroke-linejoin: round; }
.fs-root { fill: var(--fs-bone); stroke: var(--fs-bone-line); stroke-width: 1.2; opacity: 0.75; }
.fs-tooth { fill: var(--fs-bone); stroke: var(--fs-bone-line); stroke-width: 1; }
.fs-shine { fill: none; stroke: #ffffff; stroke-width: 3; stroke-linecap: round; opacity: 0.35; }
.fs-lam { fill: var(--fs-lam); stroke: var(--fs-line); stroke-width: 0.6; stroke-opacity: 0.5; }
.fs-lam-2 { fill: var(--fs-lam-2); stroke: var(--fs-line); stroke-width: 0.6; stroke-opacity: 0.5; }

/* ---------- specimen tray ---------- */
.sp-tray { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.sp-pick { display: grid; gap: 4px; padding: 6px 6px 8px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; text-align: center; line-height: 1.25; }
.sp-pick svg { width: 100%; height: auto; display: block; }
.sp-pick[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.sp-pick:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sp-view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; margin-top: 14px; align-items: start; }
.sp-big svg { width: 100%; height: auto; display: block; border-radius: 12px; }
.sp-big .small { margin: 4px 0 0; text-align: center; }
.sp-card { display: grid; gap: 8px; }
.sp-card h4 { margin: 0; font-size: 1.15rem; }
.sp-dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; }
.sp-dl dt { font-weight: 700; font-size: 0.9rem; color: var(--ink-2); }
.sp-dl dd { margin: 0; line-height: 1.45; }
.sp-card .src { font-size: 0.82rem; color: var(--ink-2); margin: 0; }
@media (max-width: 720px) { .sp-view { grid-template-columns: 1fr; } .sp-dl { grid-template-columns: 1fr; gap: 2px; } .sp-dl dd { margin-bottom: 6px; } }

/* ---------- which way up ---------- */
.wu-card svg { width: 100%; height: auto; display: block; border-radius: 10px; background: var(--surface-2); }
.wu-card.is-done { border-color: var(--good); }
.wu-sand { fill: var(--fs-sand); } .wu-sand-2 { fill: var(--fs-sand-2); } .wu-mud { fill: var(--fs-shale); } .wu-gravel { fill: var(--fs-shell-2); }
.wu-line { fill: none; stroke: var(--fs-line); stroke-width: 1.3; stroke-linecap: round; }
.wu-line-f { fill: none; stroke: var(--fs-line); stroke-width: 1; opacity: 0.7; }
.wu-grain { fill: var(--fs-line); opacity: 0.75; }
.wu-crack { fill: var(--fs-sand-2); stroke: var(--fs-line); stroke-width: 1.2; }

/* ---------- diagrams drawn in lesson.js ---------- */
.mu-glass { fill: var(--sp-atm-soft); stroke: var(--ink-2); stroke-width: 2; }
.mu-water { fill: var(--sp-hyd); opacity: 0.55; }
.mu-pipe { fill: none; stroke: var(--ink-2); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.mu-pipe-in { fill: none; stroke: var(--sp-atm-soft); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.mu-cool { fill: var(--accent-soft); stroke: var(--ink-2); stroke-width: 2; }
.mu-heat { fill: var(--ochre); }
.mu-flame { fill: #f0a020; }
.mu-spark { fill: none; stroke: var(--focus); stroke-width: 3; stroke-linejoin: round; }
.mu-elec { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.mu-flow { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 6 5; marker-end: url(#mu-arrow); }
.mu-arrowhead { fill: var(--accent); }
.mu-lab { font: 700 17px var(--font-body); fill: var(--ink); }
.mu-lab-s { font: 15px var(--font-body); fill: var(--ink-2); }
.mu-on { opacity: 1; } .mu-off { opacity: 0.38; }
.mu-product { fill: var(--ochre); opacity: 0.7; }
.mu-gas { fill: var(--accent); opacity: 0.6; }
.ff-sea { fill: var(--sp-hyd); opacity: 0.35; }
.ff-mud { fill: var(--fs-shale); }
.ff-mud-2 { fill: var(--fs-lime); }
.ff-sand { fill: var(--fs-sand); }
.ff-rock { fill: var(--fs-sand-2); }
.ff-shell { fill: var(--fs-shell-2); stroke: var(--fs-line); stroke-width: 1.2; }
.ff-soft { fill: #d98a8a; stroke: var(--fs-line); stroke-width: 1; opacity: 0.85; }
.ff-mineral { fill: #a7c7d6; stroke: var(--fs-line); stroke-width: 1; }
.ff-air { fill: var(--sp-atm-soft); }
.ff-lab { font: 700 16px var(--font-body); fill: var(--ink); }
.halo { fill: none !important; stroke: var(--surface); stroke-width: 4; stroke-linejoin: round; opacity: 0.85; }
.ff-line { fill: none; stroke: var(--fs-line); stroke-width: 1; opacity: 0.5; }
.ff-arrow { fill: none; stroke: var(--ink); stroke-width: 2; marker-end: url(#ff-arrow); }
.ff-arrowhead { fill: var(--ink); }
.ff-water-lab { font: 700 16px var(--font-body); fill: var(--sp-hyd); }

/* two cards side by side: a picture and its text */
.ucards.dt-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
@media (max-width: 640px) { .ucards.dt-pair { grid-template-columns: 1fr; } }