/* Rare Earth hypothesis lesson. All rules scoped under .rer-* */
.rer-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rer-note { font-size: 13px; color: var(--dim); text-align: center; }
.rer-hero img { width: 320px; max-width: 100%; max-height: 34vh; object-fit: contain; display: block; filter: drop-shadow(0 18px 30px rgba(123,92,253,.35)); }

/* ---------- timeline ---------- */
.rer-tl { width: 100%; padding: 18px 16px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.rer-tlbar { display: flex; height: 18px; border-radius: 9px; overflow: hidden; }
.rer-seg { display: block; height: 100%; }
.rer-seg.a { width: 18%; background: #c2412a; }
.rer-seg.b { width: 69%; background: linear-gradient(90deg, #2fa36f, #3FD69A); }
.rer-seg.c { width: 13%; background: linear-gradient(90deg, #3FD69A, var(--gold)); }
.rer-tlmarks { position: relative; height: 40px; margin-top: 6px; }
.rer-tlmarks span { position: absolute; top: 0; transform: translateX(-50%); font-size: 13px; font-weight: 700; color: var(--text); width: 80px; text-align: center; line-height: 1.2; }
.rer-tlmarks span[style="left:0"] { transform: none; text-align: left; }
.rer-tlmarks span.now { transform: translateX(-100%); text-align: right; color: var(--gold); }
.rer-tlmarks span.lo { top: 20px; color: var(--mint); }
.rer-tlnote { font-size: 13px; color: var(--dim); text-align: center; margin-top: 4px; }

/* ---------- the list ---------- */
.rer-kitbox { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rer-kit { width: min(100%, 340px); height: auto; display: block; overflow: visible; }
.rer-f { transition: opacity .35s, filter .35s; opacity: .55; }
.rer-f.seen { opacity: .85; }
.rer-f.lit { opacity: 1; filter: drop-shadow(0 0 6px rgba(252,192,80,.9)); }
.rer-f.fld path { fill: none; stroke: var(--violet-bright); stroke-width: 1.6; stroke-dasharray: 3 3; }
.rer-f.plate .crack { fill: none; stroke: #ffcf8a; stroke-width: 1.4; opacity: .8; }
.rer-f.moon .orb { fill: none; stroke: rgba(200,200,220,.35); stroke-dasharray: 2 3; }
.rer-f.moon circle { fill: #d8d4cc; }
.rer-f.jup circle { fill: #d9b98a; }
.rer-f.jup .band { stroke: #a8835a; stroke-width: 3; }
.rer-jobs { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.rer-jr { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line-strong); font-size: 15px; cursor: pointer; }
.rer-jr b { font-weight: 700; }
.rer-jr i { font-style: normal; font-size: 13px; font-weight: 700; color: var(--gold); }
.rer-jr.open { background: var(--surface); border-color: var(--line); cursor: default; line-height: 1.3; font-size: 14px; }
.rer-jr.open b { color: var(--gold); }

/* ---------- the tilt machine ---------- */
.rer-tilt { width: min(100%, 350px); height: auto; display: block; overflow: visible; }
.rer-grid line { stroke: var(--line); stroke-width: 1; }
.rer-grid text { fill: var(--dim); font: 700 13px var(--sans); text-anchor: end; }
.rer-grid text.t { text-anchor: middle; }
.rer-sys .orb { fill: none; stroke: rgba(200,200,220,.35); stroke-dasharray: 2 3; }
.rer-moon { fill: #d8d4cc; }
.rer-earth .ax { stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.rer-deg { fill: var(--gold); font: 700 16px var(--sans); text-anchor: middle; }
.rer-ln { fill: none; stroke-width: 2.2; stroke-linejoin: round; transition: opacity .4s; }
.rer-ln.moon { stroke: var(--gold); }
.rer-ln.m93 { stroke: #ff8a7a; }
.rer-ln.m11 { stroke: var(--mint); }
.rer-ln.dim { opacity: .3; }

/* ---------- two lists ---------- */
.rer-two { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rer-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.rer-card span { font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
.rer-card ul { margin: 0; padding-left: 18px; font-size: 15px; font-weight: 600; line-height: 1.4; }
.rer-card em { font-style: normal; font-size: 13px; color: var(--dim); margin-top: 4px; }
.rer-card b { font-size: 16px; color: var(--gold); }
.rer-card.them ul { color: #c9b6ff; }
.rer-card b.q { color: var(--faint); }

@media (max-height: 700px) {
  .rer-hero img { max-height: 28vh; }
  .rer-kit { width: min(100%, 290px); }
  .rer-tilt { width: min(100%, 310px); }
}