/* reactor.css — /upgrade only: one version charging in the forge.
 *
 * Lifted verbatim from apex/apex.css lines 189-250 when the page moved into the Astro build,
 * with two rules changed rather than carried over (决定 2026-09-08, CONSTITUTION §7): the
 * finished package marker was a solid block of --fg with the page colour knocked out of it,
 * and the state chip was a 999px pill. Neither survives anywhere else on the site, so neither
 * survives here. Everything else — the ring, the ticks, the breathing core — is unchanged.
 *
 * It defines no colours of its own: every value is a token from tokens.css.
 */
.upg{display:grid; gap:22px; margin-top:8px}
.ver{border:1px solid var(--line); border-radius:var(--r-2xl); background:var(--paper); padding:clamp(22px,3.5vw,40px); box-shadow:var(--shadow-1)}
.ver-head{display:grid; grid-template-columns:auto 1fr; align-items:center; gap:clamp(18px,4vw,44px)}
.ver .reactor{width:clamp(176px,26vw,264px); height:auto; display:block}
.ver:not(.lead) .reactor{width:clamp(140px,18vw,184px)}
.ver-meta h2{font-weight:400; font-size:clamp(1.5rem,3.2vw,2.2rem); letter-spacing:-.01em; line-height:1.2; margin-top:6px; max-width:none}
.ver-meta dl{display:grid; grid-template-columns:auto 1fr; gap:4px 16px; margin-top:14px; font-size:15px}
.ver-meta dt{color:var(--dim)} .ver-meta dd{margin:0}
.reactor .rim{fill:none; stroke:var(--line); stroke-width:1}
.reactor .ticks circle{fill:none; stroke:var(--line-2); stroke-width:7; stroke-dasharray:1.2 7.8}
.reactor .ticks{transform-origin:100px 100px; animation:reactor-turn 120s linear infinite}
.reactor .track{fill:none; stroke:var(--line); stroke-width:8}
.reactor .charge{fill:none; stroke:var(--brand); stroke-width:8; stroke-linecap:round; transform:rotate(-90deg); transform-origin:100px 100px; transition:stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1)}
.reactor .seg{fill:none; stroke:var(--line); stroke-width:9}
.reactor .seg.on{stroke:var(--brand-600)}
.reactor .core,.reactor .halo{opacity:var(--o,1); animation:reactor-breathe 5s ease-in-out infinite}
.reactor .core{fill:var(--brand)}
.reactor .num{font-size:40px; fill:var(--fg); letter-spacing:-.02em}
.reactor .unit{font-size:18px; fill:var(--dim)}
.ver.done .reactor .charge{stroke:var(--brand-ink)}
.reactor .num.full{font-size:30px; letter-spacing:-.03em}
html[dir="rtl"] .reactor .charge{transform:rotate(-90deg) scale(1,-1)}   /* the charge runs the reading direction */
@keyframes reactor-turn{to{transform:rotate(360deg)}}
@keyframes reactor-breathe{0%,100%{opacity:var(--o,1)} 50%{opacity:calc(var(--o,1) * .72)}}

/* ── 0.2.10 矢志不渝 — the shi reactor: ten double armour plates, a campaign arrow on the
   charge ring, the Loulan mark at the top. The ticks march on; the core never wavers. ── */
.reactor.shi .plate{fill:none; stroke:var(--line); stroke-width:9}
.reactor.shi .plate2{fill:none; stroke:var(--line); stroke-width:2.5}
.reactor.shi .plate.on{stroke:var(--brand-600)}
.reactor.shi .plate2.on{stroke:var(--brand)}
.reactor.shi .shi-target{fill:none; stroke:var(--line-2); stroke-width:1.5}
.reactor.shi.full .shi-target{fill:var(--brand-600); stroke:var(--brand-ink)}
.reactor.shi .shi-arrow{transform-origin:100px 100px; transform:rotate(var(--deg,0deg)); transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.reactor.shi .shi-arrow path{fill:var(--brand-ink)}
html[dir="rtl"] .reactor.shi .shi-arrow{transform:scale(-1,1) rotate(var(--deg,0deg))}
.reactor.shi .core,.reactor.shi .halo{animation:none}   /* the will does not waver */
.pk-h{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); font-weight:500; margin-top:28px; padding-top:20px; border-top:1px solid var(--line)}
.pks{list-style:none; padding:0; margin:10px 0 0; display:grid}
.pk{display:grid; grid-template-columns:2.1rem 1fr auto 7rem 3.2rem; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:15px}
.pk:last-child{border-bottom:0}
.pk-id{display:inline-grid; place-items:center; width:1.8rem; height:1.8rem; border-radius:50%; border:1px solid var(--line-2); font-size:12px; color:var(--dim)}
.pk.progress .pk-id{border-color:var(--brand-ink); color:var(--brand-ink)} .pk.done .pk-id{border-color:var(--brand-ink); color:var(--brand-ink); background:var(--brand-soft)}
.pk-name{min-width:0; overflow-wrap:anywhere}
.pk-state{font-size:12px; color:var(--dim); border:1px solid var(--line); border-radius:var(--r-xs); padding:2px 10px; white-space:nowrap}
.pk.progress .pk-state{color:var(--brand-ink); border-color:var(--ring); background:var(--brand-soft)} .pk.hold .pk-state{opacity:.7; text-decoration:line-through}
.pk-bar{height:4px; border-radius:2px; background:var(--line); overflow:hidden}
.pk-bar i{display:block; height:100%; background:var(--brand); border-radius:2px}
.pk.done .pk-bar i{background:var(--brand-ink)}
.pk-pct{font-size:13px; color:var(--dim); text-align:end}
.up-updated{margin-top:4px; color:var(--dim); font-size:13px; text-align:center}
.up-stale{color:#b0473c}
@media (prefers-color-scheme:dark){.up-stale{color:#e08277}}
.up-fine{text-align:center; max-width:none}
@media (max-width:760px){
  .ver-head{grid-template-columns:1fr; justify-items:center; text-align:center}
  .ver-meta dl{justify-content:center; text-align:start}
  .pk{grid-template-columns:2.1rem 1fr auto; gap:10px}
  .pk-bar{grid-column:2 / 3; margin-top:-2px} .pk-pct{grid-column:3 / 4}
}
@media (prefers-reduced-motion:reduce){.reactor .ticks,.reactor .core,.reactor .halo{animation:none} .reactor .charge{transition:none} .reactor.shi .shi-arrow{transition:none}}