/* Step-by-step explainers (/explainers/) and the 4.6-billion-year timeline (/deep-time/).
   Loaded from those pages only. Works without JavaScript: every step and every event is plain HTML. */

/* ---------- Explainers ---------- */
.xp-svg { display: block; width: 100%; height: auto; border-radius: 14px; }
.xp-toc ol { list-style: none; margin: 18px 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.xp-toc a { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px 0 6px; border-radius: 999px; text-decoration: none; color: var(--ember); background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(43, 52, 66, .2); font-size: .95rem; }
.xp-toc a span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ember); color: #fff; font-size: .8rem; font-weight: 600; }
.xp-toc a:hover, .xp-toc a[aria-current="step"] { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ember); }
.xp-toc a[aria-current="step"] span { background: var(--rock); }

.xp-steps { list-style: none; margin: 18px 0 0; padding: 0; }
.xp-step { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: start; padding: 28px 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 16px); }
.xp-fig { margin: 0; }
.xp-fig figcaption { margin-top: 8px; font-size: .9rem; color: var(--mist); }
.xp-text h2 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); outline: none; }
.xp-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.xp-nav .btn { text-decoration: none; }
.xp-count { font-size: .9rem; color: var(--mist); font-variant-numeric: tabular-nums; }
.xp-recap { margin: 28px 0 8px; padding: 20px 22px; }
.xp-recap p { margin: 0; }
@media (max-width: 820px) {
  .xp-step { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px 0; }
}

/* Stepper mode (added by js/explainers.js): one step at a time. */
.xp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 10px 0 0; }
.xp-dots { display: flex; gap: 6px; }
.xp-dots button { width: 14px; height: 14px; padding: 0; border-radius: 50%; border: 1.5px solid var(--ember); background: transparent; cursor: pointer; }
.xp-dots button[aria-current="step"] { background: var(--rock); border-color: var(--rock); }
.xp-dots button:focus-visible { outline: 2px solid var(--rock); outline-offset: 2px; }
.xp-stepper .xp-step.xp-off { display: none; }
.xp-stepper .xp-step { border-top: 0; }
@media print { .xp-stepper .xp-step.xp-off { display: grid; } .xp-bar, .xp-nav { display: none; } }

/* Index */
.xp-cards { margin-top: 18px; }
.xp-card .xp-thumb { display: block; margin: -6px -6px 10px; }
.xp-card .xp-thumb svg { display: block; width: 100%; height: auto; border-radius: 14px; }
.xp-wide { margin: 18px 0; min-height: 0; }

/* ---------- The 4.6-billion-year timeline ---------- */
.dt-chips { flex-wrap: wrap; margin: 18px 0 10px; }
.dt-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dt-tools .btn { min-width: 42px; justify-content: center; font-size: 1.1rem; }
.dt-range { font-size: .92rem; }
.dt-scroll { overflow-x: auto; overflow-y: hidden; border-radius: 16px; background: #f5f6f8; box-shadow: inset 0 0 0 1px var(--line); cursor: grab; overscroll-behavior-x: contain; }
.dt-scroll:focus-visible { outline: 2px solid var(--rock); outline-offset: 2px; }
.dt-scroll.dt-dragging { cursor: grabbing; user-select: none; }
.dt-track { position: relative; min-width: 100%; }
.dt-axis { position: absolute; left: 0; right: 0; height: 1px; background: var(--steel); }
.dt-tick { position: absolute; width: 1px; height: 8px; background: var(--steel); }
.dt-tick span { position: absolute; top: 10px; left: 0; transform: translateX(-50%); font-size: .75rem; color: var(--mist); white-space: nowrap; }
.dt-eon { position: absolute; height: 20px; border-radius: 4px; background: #e2e6eb; font-size: .72rem; color: #5b6573; overflow: hidden; white-space: nowrap; padding: 2px 6px; box-sizing: border-box; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.dt-eon:nth-child(odd) { background: #d3d9e0; }
.dt-mark { position: absolute; transform: translateX(-7px); display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: var(--paper); cursor: pointer; white-space: nowrap; text-align: left; }
.dt-mark i { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--steel); box-shadow: 0 0 0 2px #fff; }
.dt-mark span { font-size: .82rem; line-height: 1.2; background: rgba(255, 255, 255, .9); padding: 2px 6px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(43, 52, 66, .14); }
.dt-mark:hover span, .dt-mark[aria-pressed="true"] span { box-shadow: inset 0 0 0 1.5px var(--rock); }
.dt-mark[aria-pressed="true"] i { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--rock); }
.dt-mark:focus-visible { outline: 2px solid var(--rock); outline-offset: 3px; border-radius: 8px; }
.dt-stem { position: absolute; width: 1px; background: rgba(43, 52, 66, .22); }
.dt-impact i, .dt-key.dt-impact i { background: var(--rock); }
.dt-solar i, .dt-key.dt-solar i { background: #2b3442; }
.dt-earth i, .dt-key.dt-earth i { background: #8f98a5; }
.dt-meteorite i, .dt-key.dt-meteorite i { background: #f7b98f; }
.dt-science i, .dt-key.dt-science i { background: #5b6573; }
.dt-mission i, .dt-key.dt-mission i { background: #c3c9d2; }
.dt-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0; font-size: .88rem; color: var(--mist); }
.dt-key { display: inline-flex; align-items: center; gap: 6px; }
.dt-key i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dt-detail { margin: 6px 0 28px; padding: 18px 20px; min-height: 96px; }
.dt-detail h3 { margin: 4px 0 6px; }
.dt-detail p { margin: 0 0 8px; }

.dt-all-head { margin-top: 34px; }
.dt-period { margin-top: 26px; }
.dt-list { list-style: none; margin: 10px 0 0; padding: 0 0 0 22px; border-left: 2px solid var(--line); }
.dt-item { position: relative; padding: 10px 0 14px; scroll-margin-top: calc(var(--header-h) + 16px); }
.dt-item::before { content: ""; position: absolute; left: -30px; top: 16px; width: 14px; height: 14px; border-radius: 50%; background: var(--steel); box-shadow: 0 0 0 3px #fff; }
.dt-item.dt-impact::before { background: var(--rock); }
.dt-item.dt-earth::before { background: #8f98a5; }
.dt-item.dt-meteorite::before { background: #f7b98f; }
.dt-item.dt-science::before { background: #5b6573; }
.dt-item.dt-mission::before { background: #c3c9d2; }
.dt-item:target { background: rgba(234, 88, 12, .06); border-radius: 10px; }
.dt-when { display: block; font-size: .85rem; color: var(--mist); font-weight: 600; }
.dt-item h3 { font-size: 1.08rem; margin: 2px 0 4px; }
.dt-item p { margin: 0 0 6px; }
.dt-links { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .92rem; }
.dt-kind { display: block; margin-top: 4px; font-size: .78rem; color: var(--mist); text-transform: uppercase; letter-spacing: .1em; }
.dt-hint { font-size: .88rem; margin: 0 0 8px; }