/* Panspermia lesson. All rules scoped under .psm-* */
.psm-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.psm-note { font-size: 13px; color: var(--dim); text-align: center; }
.psm-photo img { width: 100%; max-width: 340px; max-height: 32vh; object-fit: cover; border-radius: 14px; display: block; }

/* ---------- the solar system ---------- */
.psm-sys { width: min(100%, 340px); height: auto; display: block; overflow: visible; }
.psm-orb { fill: none; stroke: rgba(169,155,255,.3); stroke-width: 1; stroke-dasharray: 2 3; transform-origin: 150px 112px; transform: scaleY(.62); }
.psm-earth circle { fill: #4aa3ff; stroke: #bfe2ff; stroke-width: 1.2; }
.psm-mars circle { fill: #e0764f; }
.psm-earth text, .psm-mars text { font: 700 14px var(--sans); text-anchor: middle; }
.psm-earth text { fill: #8fcbff; }
.psm-mars text { fill: #ff9f7a; }
.psm-imp circle { fill: #cfc6b8; }
.psm-flash { fill: #ffdca0; }
.psm-rocks circle { fill: #d9b38c; }
.psm-rocks circle.landed { fill: var(--gold); filter: drop-shadow(0 0 4px var(--gold)); }
.psm-badges { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.psm-badges div { padding: 8px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.psm-badges b { display: block; font-size: 14px; }
.psm-badges div:first-child b { color: #ff9f7a; }
.psm-badges div:last-child b { color: #8fcbff; }
.psm-badges span { display: block; font-size: 13px; color: var(--dim); margin-top: 2px; }
.psm-clock { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.psm-clock span { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.psm-clock em { font-style: normal; font-size: 14px; font-weight: 700; color: var(--gold); }
.psm-clock b { font: 600 20px var(--mono); color: var(--gold); font-variant-numeric: tabular-nums; }

/* ---------- the rock ---------- */
.psm-rock { width: min(100%, 330px); height: auto; display: block; overflow: visible; }
.psm-body { fill: #5a4a3e; }
.psm-skin { fill: #7a6250; transition: fill .5s; }
.psm-mid { fill: #8f7560; }
.psm-core { fill: #a88b72; }
.psm-rock.rayed .psm-skin { fill: #b98a3a; }
.psm-body { stroke: transparent; stroke-width: 5; transition: stroke .6s; }
.psm-rock.burnt .psm-body { stroke: #140f0c; }
.psm-rays line { stroke: #ffe28a; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 3px #ffd060); }
.psm-fire path { fill: #ff8a3a; filter: drop-shadow(0 0 6px #ff6a1a); }
.psm-bug rect { fill: var(--mint); stroke: #d8fff0; stroke-width: 1.4; filter: drop-shadow(0 0 4px rgba(63,214,154,.9)); transition: fill .3s; }
.psm-rock.fried .psm-bug rect { fill: #555; stroke: #888; filter: none; }
.psm-labs text { fill: #fff; font: 700 13px var(--sans); text-anchor: middle; paint-order: stroke; stroke: rgba(0,0,0,.55); stroke-width: 3px; }

/* ---------- the ledger ---------- */
.psm-ledger { width: 100%; display: flex; flex-direction: column; gap: 7px; }
.psm-lr { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 15px; font-weight: 600; }
.psm-lr i { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; }
.psm-lr.ok i { background: rgba(63,214,154,.18); color: var(--mint); }
.psm-lr.q i { background: rgba(252,192,80,.18); color: var(--gold); }
.psm-lr.no i { background: rgba(216,85,85,.2); color: #ff8a8a; }

/* ---------- moving the question ---------- */
.psm-move { display: flex; align-items: center; gap: 18px; font-size: 28px; color: var(--dim); }
.psm-pl { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 700; color: #fff; }
.psm-pl.mars { background: radial-gradient(circle at 35% 30%, #ffb08a, #c2512a 60%, #5a2210); }
.psm-pl.earth { background: radial-gradient(circle at 35% 30%, #bfe2ff, #2f7fd0 55%, #1b3f73); }

@media (max-height: 700px) {
  .psm-photo img { max-height: 26vh; }
  .psm-sys, .psm-rock { width: min(100%, 280px); }
  .psm-pl { width: 76px; height: 76px; }
}