/* /clinical-trial-software: one meaning read by every part, the three
   layers that must agree, the seams a split toolchain carries, the loop the
   model runs through, and arms changing mid-study. Page-only figures. */

/* ── three layers: documents, decisions, software ── */
.layers { margin-top: 44px; }
.layer { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 24px 36px; align-items: center; padding: 28px 30px; border: 1px solid var(--edge); border-radius: 16px; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(30, 120, 220, 0.12), transparent 70%), #070b12; }
.layer > * { min-width: 0; }
.layer h3 { margin: 0; font: 500 28px/1.15 var(--font-display); letter-spacing: -0.015em; color: var(--fg); text-wrap: balance; }
.layer p { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.layer .frag { margin: 0; }
.ptr { display: grid; }
.ptr__doc { margin: 0; padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--card); font: 400 18px/1.45 var(--font-display); color: var(--fg); }
.ptr__doc small, .ptr__node small { display: block; margin-bottom: 8px; font: 500 9.5px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); }
.ptr__doc mark { padding: 0 3px; border-radius: 4px; background: rgba(92, 200, 255, 0.16); box-shadow: inset 0 -1px 0 rgba(92, 200, 255, 0.7); color: #fff; }
.ptr__line { justify-self: start; width: 1px; height: 28px; margin-left: 28px; background: linear-gradient(180deg, rgba(92, 200, 255, 0.2), #5cc8ff); box-shadow: 0 0 8px rgba(92, 200, 255, 0.6); }
.ptr__node { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; padding: 14px 16px; border: 1px solid rgba(92, 200, 255, 0.45); border-radius: 12px; background: rgba(92, 200, 255, 0.08); }
.ptr__node small { flex-basis: 100%; margin-bottom: 2px; color: #9fd8ff; }
.ptr__node b { font: 500 13.5px var(--font-mono); color: #fff; }
.ptr__node code { margin-left: auto; font: 500 11px var(--font-mono); color: #9fd8ff; }
.mods { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mods li { display: flex; align-items: baseline; gap: 14px; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--card); }
.mods b { flex: none; width: 104px; font: 500 10.5px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #9fd8ff; }
.mods span { min-width: 0; font-size: 13.5px; color: var(--fg); }
html.kit [data-switch-panel].is-active .mods li { animation: kitIn 520ms var(--ease-out) both; }
html.kit [data-switch-panel].is-active .mods li:nth-child(2) { animation-delay: 300ms; }
html.kit [data-switch-panel].is-active .mods li:nth-child(3) { animation-delay: 380ms; }
html.kit [data-switch-panel].is-active .mods li:nth-child(4) { animation-delay: 460ms; }
html.kit [data-switch-panel].is-active .mods li:nth-child(5) { animation-delay: 540ms; }

/* ── seams: five vendors against one model ── */
.seams { margin-top: 44px; }
.seams > .kit-tabs { max-width: 520px; }
.seams__stage { margin-top: 14px; padding: 40px 30px 28px; border: 1px solid var(--edge); border-radius: 16px; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(30, 120, 220, 0.12), transparent 70%), #070b12; }
.seams__row { display: flex; align-items: center; }
.seams__box { flex: 1 1 0; min-width: 0; padding: 18px 8px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--card); font-size: 14px; font-weight: 500; color: var(--fg); text-align: center; overflow-wrap: anywhere; }
.seams__seam { position: relative; flex: 0 0 48px; height: 2px; background: repeating-linear-gradient(90deg, #ff8a82 0 4px, transparent 4px 8px); }
.seams__seam small { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); font: 600 8.5px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #ff8a82; }
.seams__panel--one .seams__row { gap: 10px; }
.seams__panel--one .seams__box { border-color: rgba(92, 200, 255, 0.4); }
.seams__bus { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 12px; margin-top: 28px; padding: 14px; border: 1px solid rgba(92, 200, 255, 0.5); border-radius: 12px; background: rgba(92, 200, 255, 0.1); box-shadow: 0 0 60px -20px rgba(92, 200, 255, 0.6); }
/* One drop from the centre of each of the five parts. */
.seams__bus::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 0.5px), rgba(92, 200, 255, 0.6) calc(10% - 0.5px) calc(10% + 0.5px), transparent calc(10% + 0.5px) 20%); }
.seams__bus b { font: 500 19px var(--font-display); color: #fff; }
.seams__bus span { font: 500 10px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #9fd8ff; }
.seams__sum { margin: 24px 0 0; font-size: 14px; color: var(--muted); }
.seams__sum b { margin-right: 8px; font: 500 34px/1 var(--font-display); }
.seams__sum.is-bad b { color: #ff8a82; }
.seams__sum.is-good b { color: var(--live); }
.seams__note { margin: 16px 0 0; font-size: 13px; color: var(--faint); }

/* ── the loop: four movements around one model ── */
.cycle { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 32px 56px; align-items: center; margin-top: 44px; }
.cycle__ring { position: relative; width: min(100%, 380px); aspect-ratio: 1; justify-self: center; }
.cycle__ring svg { position: absolute; inset: 20%; width: 60%; height: 60%; overflow: visible; }
.cycle__ring circle { fill: none; stroke: rgba(92, 200, 255, 0.3); stroke-width: 1; stroke-dasharray: 2 5; }
.cycle__dot { position: absolute; inset: 0; transform: rotate(calc((var(--switch-turn, 0) * 4 + var(--switch-i, 0)) * 90deg)); transition: transform 900ms cubic-bezier(0.77, 0, 0.175, 1); pointer-events: none; }
.cycle__dot i { position: absolute; left: 50%; top: 20%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #b6f6ff; box-shadow: 0 0 0 4px rgba(158, 242, 255, 0.16), 0 0 16px rgba(158, 242, 255, 0.9); }
.cycle__core { position: absolute; inset: 33%; display: grid; place-content: center; gap: 4px; border-radius: 50%; background: radial-gradient(circle, rgba(92, 200, 255, 0.18), transparent 70%); text-align: center; }
.cycle__core b { font: 500 20px/1.1 var(--font-display); color: #fff; }
.cycle__core small { font: 500 8.5px/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #9fd8ff; }
.cycle__node { position: absolute; transform: translate(-50%, -50%); padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(7, 11, 18, 0.94); color: var(--muted); font: 500 11px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease, box-shadow 200ms ease; }
.cycle__node b { font-weight: 500; }
.cycle__node--0 { left: 50%; top: 8%; }
.cycle__node--1 { left: 90%; top: 50%; }
.cycle__node--2 { left: 50%; top: 92%; }
.cycle__node--3 { left: 10%; top: 50%; }
.cycle__node:hover { color: #fff; border-color: rgba(92, 200, 255, 0.5); }
.cycle__node.is-active { border-color: rgba(92, 200, 255, 0.75); background: rgba(13, 38, 60, 0.96); color: #fff; box-shadow: 0 0 30px -6px rgba(92, 200, 255, 0.7); }
.cycle__node:focus-visible { outline: 2px solid #9fd8ff; outline-offset: 3px; }
.cycle__panel { max-width: 560px; }
.cycle__n { margin: 0; font: 500 11px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #9fd8ff; }
.cycle__panel h3 { margin: 10px 0 0; font: 500 clamp(26px, 2.6vw, 34px)/1.12 var(--font-display); letter-spacing: -0.015em; color: var(--fg); text-wrap: balance; }
.cycle__panel > p:not(.cycle__n) { margin: 12px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.cycle__panel .frag { margin-top: 22px; }
html:not(.kit) .cycle__panel + .cycle__panel { margin-top: 36px; }

/* ── while it runs: the homepage's running-study figure ── */
#running .rt-flow { margin-top: 44px; }

@media (max-width: 980px) {
  .layer, .cycle { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .layer { padding: 22px 20px; }
  .seams__stage { padding: 26px 18px 22px; }
  .seams__row { flex-direction: column; align-items: stretch; }
  .seams__box { padding: 13px 10px; }
  .seams__seam { flex: 0 0 26px; width: 2px; height: 26px; align-self: center; background: repeating-linear-gradient(180deg, #ff8a82 0 4px, transparent 4px 8px); }
  .seams__seam small { left: 12px; bottom: auto; top: 50%; transform: translateY(-50%); }
  .seams__panel--one .seams__row { gap: 8px; }
  .seams__bus { margin-top: 14px; }
  .seams__bus::before { display: none; }
  .cycle__ring { width: min(100%, 330px); }
  .cycle__node { padding: 8px 11px; font-size: 10px; }
  .mods b { width: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .cycle__dot { transition: none; }
}

/* ══ The page's own world: the orrery. The study model at the center, the
   platform's parts on turning orbits that stay upright, an amendment pulse,
   faint rings running down the page, round and generous corners. ══ */
.page-orrery { --orb: rgba(92, 200, 255, 0.3); }
.page-orrery main { background-image: repeating-radial-gradient(circle at 50% 500px, transparent 0 119px, rgba(92, 200, 255, 0.03) 119px 120px); }

.orrery-hero { padding: 108px 0 56px; }
.orrery { position: relative; width: min(100%, 800px); aspect-ratio: 1; margin: 0 auto; container-type: inline-size; animation: heroUp 0.9s var(--ease-out) both; }
.orrery::before { content: ""; position: absolute; inset: 20%; border-radius: 50%; background: radial-gradient(circle, rgba(30, 120, 220, 0.22), transparent 70%); }
.orrery__ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.orrery__ring--1 { width: 72%; height: 72%; border: 1px dashed var(--orb); }
.orrery__ring--2 { width: 90%; height: 90%; border: 1px solid rgba(92, 200, 255, 0.15); }
.orrery__pulse { position: absolute; left: 5%; top: 5%; width: 90%; height: 90%; border: 2px solid rgba(182, 246, 255, 0.7); border-radius: 50%; box-shadow: 0 0 30px rgba(92, 200, 255, 0.45), inset 0 0 30px rgba(92, 200, 255, 0.25); pointer-events: none; }
.orrery__pulse.is-on { animation: orreryPulse 2.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes orreryPulse { from { opacity: 0.9; transform: scale(0.4); } to { opacity: 0; transform: scale(1); } }
.orrery__orbit { position: absolute; inset: 0; animation: orreryTurn 160s linear infinite; }
.orrery__orbit--2 { animation-duration: 240s; animation-direction: reverse; }
@keyframes orreryTurn { to { transform: rotate(360deg); } }
.orrery__body { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))); }
.orrery__orbit--1 .orrery__body { --r: 36cqw; }
.orrery__orbit--2 .orrery__body { --r: 45cqw; }
.orrery__spin { position: absolute; left: 0; top: 0; width: 0; height: 0; animation: orreryTurn 160s linear infinite reverse; }
.orrery__orbit--2 .orrery__spin { animation-duration: 240s; animation-direction: normal; }
.orrery__label { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 14px; border: 1px solid rgba(92, 200, 255, 0.45); border-radius: 999px; background: rgba(7, 14, 24, 0.94); white-space: nowrap; transform: translate(-50%, -50%); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.orrery__label b { font: 500 13.5px var(--font-ui); color: #fff; }
.orrery__ver { display: grid; }
.orrery__ver i { grid-area: 1 / 1; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; font: 600 10px var(--font-mono); font-style: normal; color: var(--label); }
.orrery__ver .is-new { border-color: rgba(110, 231, 183, 0.45); background: rgba(110, 231, 183, 0.14); color: var(--live); }
.orrery__core { position: absolute; left: 50%; top: 50%; width: 54%; text-align: center; transform: translate(-50%, -50%); }
.orrery__model { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 5px 12px; border: 1px solid rgba(92, 200, 255, 0.45); border-radius: 999px; background: rgba(92, 200, 255, 0.08); font: 500 10px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: #9fd8ff; }
.orrery__model i { width: 7px; height: 7px; border-radius: 50%; background: #5cc8ff; box-shadow: 0 0 8px #5cc8ff; }
.orrery__core .page-title { max-width: none; margin: 0 auto; font-size: clamp(28px, 5.2cqw, 46px); }
.orrery__core .page-lede { max-width: 40ch; margin: 16px auto 0; font-size: 15.5px; }
.orrery__core .page-actions { justify-content: center; margin-top: 22px; }
.orrery__chips { display: none; }

/* sections open on an orbit dot */
.page-orrery .section-head .kicker { display: inline-flex; align-items: center; gap: 10px; }
.page-orrery .section-head .kicker::before { content: ""; width: 12px; height: 12px; border: 1px solid #5cc8ff; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 6px #5cc8ff; }
.page-orrery .layer, .page-orrery .seams__stage, .page-orrery .story, .page-orrery .related a { border-radius: 24px; }
.page-orrery .kit-tabs { border-radius: 20px; }
.page-orrery .seams__box, .page-orrery .mods li { border-radius: 999px; }

@media (max-width: 1000px) {
  .orrery { width: min(100%, 660px); }
}
@media (max-width: 760px) {
  .orrery { width: 100%; aspect-ratio: auto; }
  .orrery::before, .orrery__ring, .orrery__orbit, .orrery__pulse { display: none; }
  .orrery__core { position: static; width: auto; text-align: left; transform: none; }
  .orrery__core .page-actions { justify-content: flex-start; }
  .orrery__core .page-title { font-size: clamp(34px, 9vw, 44px); }
  .orrery__core .page-lede { margin-left: 0; }
  .orrery__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 0; padding: 0; list-style: none; }
  .orrery__chips li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border: 1px solid rgba(92, 200, 255, 0.4); border-radius: 999px; font-size: 12.5px; color: #fff; }
  .orrery__chips span { padding: 1px 6px; border-radius: 999px; background: rgba(110, 231, 183, 0.14); font: 600 9.5px var(--font-mono); color: var(--live); }
  .page-orrery .seams__box { border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) { .orrery__orbit, .orrery__spin, .orrery__pulse.is-on { animation: none; } }