/* /real-time-clinical-trials: a visit caught before its form opens, the
   definition, read/decide/prove, the scheduler, the schedule-of-activities
   checks, the guardrails, the pipeline and the inputs. Page-only figures. */

/* ── the definition ── */
.rt-def { max-width: 860px; margin-top: 36px; }
.rt-def__lead { margin: 0; font: 400 clamp(22px, 2.3vw, 30px)/1.4 var(--font-display); color: var(--fg); text-wrap: pretty; }
.rt-def__lead strong { font-weight: 500; color: #fff; }
.rt-def > p:not(.rt-def__lead) { max-width: 66ch; margin: 18px 0 0; font-size: 16px; line-height: 1.65; color: var(--muted); }
.rt-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 48px; }
.rt-stats .stat__num { font-size: 34px; }

/* one deviation, found two ways */
.lag { margin-top: 48px; }
.lag__row { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 16px; padding: 38px 0 26px; }
.lag__row + .lag__row { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.lag__label { font: 500 11px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #9fd8ff; }
.lag__track { position: relative; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); }
.lag__run { position: absolute; left: 3%; width: 69%; top: -1px; height: 4px; border-radius: 4px; background: repeating-linear-gradient(90deg, rgba(242, 196, 109, 0.75) 0 6px, rgba(242, 196, 109, 0.15) 6px 10px); transform-origin: left center; font-style: normal; }
.lag.is-armed .lag__run[data-at]:not(.is-on) { opacity: 1; transform: scaleX(0); }
.lag .lag__run[data-at].is-on { transition: transform 1.9s cubic-bezier(0.65, 0, 0.35, 1); }
.lag__run small { position: absolute; left: 50%; top: 11px; transform: translateX(-50%); font: 500 9px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: #f2c46d; }
.lag__dot { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid #9aa3b2; border-radius: 50%; background: #070b12; font-style: normal; }
.lag__dot small { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); font: 500 9px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: var(--muted); }
.lag__dot.is-event { border-color: #f2c46d; }
.lag__dot.is-late { border-color: #ff8a82; box-shadow: 0 0 12px rgba(255, 107, 107, 0.55); }
.lag__dot.is-late small { color: #ff8a82; }
.lag__dot.is-now { border-color: #6ee7b7; background: #6ee7b7; box-shadow: 0 0 14px rgba(110, 231, 183, 0.8); }
.lag__track .lag__dot.is-now small { left: 0; bottom: auto; top: 18px; transform: none; color: #6ee7b7; }
.lag__dot:first-of-type small, .lag__dot.is-event small { left: 0; transform: none; }
.lag__track .lag__dot.is-late:last-child small { left: auto; right: 0; bottom: auto; top: 18px; transform: none; }
.lag__note { margin: 10px 0 0; font-size: 15px; color: #b9f5dc; }

/* the comparison as a switch */
.flip { margin-top: 48px; }
.flip > .kit-tabs { max-width: 560px; }
.flip__rows { margin: 14px 0 0; overflow: hidden; border: 1px solid var(--edge); border-radius: 14px; background: rgba(7, 11, 18, 0.6); }
.flip__row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px 24px; padding: 15px 22px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.flip__row:first-child { border-top: 0; }
.flip__row dt { font-weight: 600; color: var(--fg); }
.flip__row dd { margin: 0; font-size: 14.5px; line-height: 1.5; }
.flip__row dd small { display: block; margin-bottom: 4px; font: 500 9px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--label); }
.flip__old { color: var(--muted); }
.flip__new { color: #cfeaff; }
html.kit .flip__row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); transition: background-color 400ms ease; }
html.kit .flip__row dd { grid-column: 2; grid-row: 1; transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.4s; }
html.kit .flip__row dd small { display: none; }
html.kit .flip__new { opacity: 0; transform: translateY(6px); visibility: hidden; }
html.kit .flip[data-switch-current="realtime"] .flip__old { opacity: 0; transform: translateY(-6px); visibility: hidden; }
html.kit .flip[data-switch-current="realtime"] .flip__new { opacity: 1; transform: none; visibility: visible; transition-delay: 0.05s, 0.05s, 0s; }
html.kit .flip[data-switch-current="realtime"] .flip__row { background: linear-gradient(90deg, rgba(92, 200, 255, 0.05), transparent 60%); }

/* ── read, decide, prove ── */
.layers { margin-top: 44px; }
.layer { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); 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 > div > p { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.layer .frag { margin: 0; }
.seal__doc { margin: 0; padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--card); font: 400 17px/1.45 var(--font-display); color: var(--fg); }
.seal__doc small { display: block; margin-bottom: 8px; font: 500 9.5px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); }
.seal__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; }
.seal__line { display: block; width: 1px; height: 24px; 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); }
.seal__node { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
.seal__node div { padding: 10px 12px; border: 1px solid rgba(92, 200, 255, 0.4); border-radius: 10px; background: rgba(92, 200, 255, 0.07); }
.seal__node dt { font: 500 9px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #9fd8ff; }
.seal__node dd { margin: 4px 0 0; font: 500 12px var(--font-mono); color: #fff; }
.moments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.moments li { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--card); }
.moments small { font: 500 9px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); }
.moments b { font: 500 18px/1.2 var(--font-display); color: #fff; }
.moments span { font-size: 12.5px; color: var(--muted); }
html.kit [data-switch-panel].is-active .moments li { animation: momentLit 1.2s var(--ease-out) both; }
html.kit [data-switch-panel].is-active .moments li:nth-child(2) { animation-delay: 0.45s; }
html.kit [data-switch-panel].is-active .moments li:nth-child(3) { animation-delay: 0.9s; }
html.kit [data-switch-panel].is-active .moments li:nth-child(4) { animation-delay: 1.35s; }
@keyframes momentLit { 0% { opacity: 0; transform: translateY(8px); } 35% { opacity: 1; transform: none; border-color: rgba(92, 200, 255, 0.7); box-shadow: 0 0 30px -8px rgba(92, 200, 255, 0.8); } 100% { opacity: 1; transform: none; } }

/* ── the scheduler ── */
.engine { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 56px; align-items: start; margin-top: 44px; }
.engine__list { margin: 0; padding: 0; list-style: none; }
.engine__list li { padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.engine__list li:first-child { border-top: 0; padding-top: 0; }
.engine__list p { display: flex; justify-content: space-between; gap: 12px; margin: 0; font: 500 10px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--label); }
.engine__list p em { font-style: normal; color: #9fd8ff; white-space: nowrap; }
.engine__list h3 { margin: 6px 0 0; font: 500 21px/1.25 var(--font-display); color: var(--fg); }
.engine__list li > span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.engine .console { position: sticky; top: 110px; margin: 0; }
.console__live { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #6ee7b7; box-shadow: 0 0 8px rgba(110, 231, 183, 0.9); vertical-align: 1px; animation: consolePulse 1.6s ease-in-out infinite; }
@keyframes consolePulse { 50% { opacity: 0.35; } }
.console__log { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font: 400 12px var(--font-mono); }
.console__log li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 2px 12px; padding: 8px 10px; border-radius: 6px; }
.console__log li.is-on { background: rgba(255, 255, 255, 0.02); }
.console__log time { grid-row: span 2; font-variant-numeric: tabular-nums; color: #5c6b80; }
.console__log span { color: #dbe6f1; }
.console__log em { font-style: normal; color: #9fd8ff; }
.console__log .is-sys { color: #6c7a8d; }
.console__log .is-flag span { color: #ff8a82; }
.console__log .is-flag em { color: #f2c46d; }
.engine__note { max-width: 70ch; margin: 28px 0 0; padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: 12px; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ── deviations: the schedule of activities checks itself ── */
.dev { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 32px 48px; align-items: start; margin-top: 44px; }
.dev > * { min-width: 0; }
.soa { margin: 0; }
.soa__grid { display: grid; grid-template-columns: 84px repeat(5, minmax(0, 1fr)); gap: 6px; align-items: center; }
.soa__v { position: relative; display: grid; gap: 2px; padding: 6px 4px; border-radius: 8px; text-align: center; }
.soa__v b { font: 500 11px var(--font-mono); color: #fff; }
.soa__v small { font: 500 8.5px var(--font-mono); letter-spacing: 0.04em; color: var(--label); white-space: nowrap; }
.soa__v--late { transition: background-color 400ms ease; }
.soa__day { position: absolute; left: 0; right: 0; top: 100%; width: max-content; margin: 2px auto 0; padding: 2px 6px; border-radius: 6px; background: #f2c46d; font: 600 9px var(--font-mono); font-style: normal; white-space: nowrap; color: #1a1205; z-index: 1; }
.soa__f { font: 500 11px var(--font-mono); color: var(--muted); }
.soa__c { position: relative; display: grid; place-items: center; height: 34px; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 8px; background: rgba(255, 255, 255, 0.015); }
.soa__c.is-req::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #5cc8ff; box-shadow: 0 0 8px rgba(92, 200, 255, 0.6); }
.soa__c.is-late { background: rgba(242, 196, 109, 0.05); }
.soa__x { position: absolute; inset: -1px; border-radius: inherit; }
.soa__x--extra { border: 1.5px solid #ff8a82; background: rgba(255, 69, 58, 0.12); }
.soa__x--extra::before { content: "ECG"; position: absolute; inset: 0; display: grid; place-items: center; font: 600 9px var(--font-mono); color: #ff8a82; }
.soa__x--miss { border: 1.5px dashed #ff8a82; background: rgba(7, 11, 18, 0.7); }
.soa__x--miss::before { content: "missing"; position: absolute; inset: 0; display: grid; place-items: center; font: 600 8.5px var(--font-mono); color: #ff8a82; }
.soa__found { display: grid; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.soa__found li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 10px 12px; border: 1px solid rgba(255, 69, 58, 0.3); border-radius: 10px; background: rgba(255, 69, 58, 0.05); }
.soa__found li:nth-child(2) { border-color: rgba(242, 196, 109, 0.35); background: rgba(242, 196, 109, 0.05); }
.soa__found b { font-size: 13.5px; font-weight: 600; color: #fff; }
.soa__found span { font: 500 10px var(--font-mono); letter-spacing: 0.06em; color: var(--muted); }
.dev__lead { margin: 0; font: 400 21px/1.45 var(--font-display); color: var(--fg); text-wrap: pretty; }
.cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.cats li { padding: 7px 12px; border: 1px solid rgba(92, 200, 255, 0.35); border-radius: 999px; background: rgba(92, 200, 255, 0.06); font-size: 13px; color: #dceffd; }
.dev__note { margin: 20px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* ── guardrails: each rule with what it refuses and what it shows ── */
.guards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 44px; }
.guard { position: relative; display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--line-soft); border-radius: 16px; background: var(--card); overflow: hidden; }
.guard__n { margin: 0; font: 500 10px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #9fd8ff; }
.guard h3 { margin: 8px 0 0; font: 500 21px/1.22 var(--font-display); color: var(--fg); text-wrap: balance; }
.guard__pair { display: grid; gap: 6px; margin-top: 16px; }
.guard__pair span { position: relative; padding: 8px 10px 8px 30px; border-radius: 8px; font: 500 11px var(--font-mono); }
.guard__pair span::before { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-weight: 700; }
.guard__pair .is-no { border: 1px solid rgba(255, 69, 58, 0.25); color: rgba(255, 170, 164, 0.75); text-decoration: line-through; text-decoration-color: rgba(255, 138, 130, 0.6); }
.guard__pair .is-no::before { content: "✕"; color: #ff8a82; }
.guard__pair .is-yes { border: 1px solid rgba(110, 231, 183, 0.4); background: rgba(110, 231, 183, 0.06); color: #c9f7e6; }
.guard__pair .is-yes::before { content: "✓"; color: var(--live); }
.guard > p:last-child { margin: 14px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.guard.is-in .guard__pair .is-yes { animation: kitIn 520ms var(--ease-out) both; animation-delay: calc(var(--d, 0ms) + 420ms); }

/* ── the pipeline as a track the scroll scrubs through ── */
.scrub { position: relative; margin-top: 48px; padding-bottom: 130px; }
.scrub__nodes { position: static; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.scrub__nodes::before, .scrub__nodes::after { content: ""; position: absolute; left: 8px; right: calc(100% / 8 - 8px); top: 8px; height: 2px; border-radius: 2px; }
.scrub__nodes::before { background: rgba(255, 255, 255, 0.08); }
.scrub__nodes::after { background: linear-gradient(90deg, #5cc8ff, #6ee7b7); box-shadow: 0 0 10px rgba(92, 200, 255, 0.6); transform: scaleX(var(--p, 0)); transform-origin: left center; }
.scrub__node { display: grid; justify-items: start; gap: 6px; }
.scrub__dot { position: relative; z-index: 1; width: 16px; height: 16px; border: 2px solid rgba(92, 200, 255, 0.45); border-radius: 50%; background: #070b12; transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; }
.scrub__node.is-done .scrub__dot { border-color: #5cc8ff; background: #5cc8ff; }
.scrub__node.is-active .scrub__dot { border-color: #fff; background: #fff; transform: scale(1.25); box-shadow: 0 0 0 5px rgba(92, 200, 255, 0.16), 0 0 22px rgba(92, 200, 255, 0.9); }
.scrub__node.is-human .scrub__dot { border-color: rgba(110, 231, 183, 0.7); }
.scrub__node.is-human.is-active .scrub__dot { border-color: #6ee7b7; background: #6ee7b7; box-shadow: 0 0 0 5px rgba(110, 231, 183, 0.16), 0 0 22px rgba(110, 231, 183, 0.9); }
.scrub__n { margin-top: 6px; font: 500 10px var(--font-mono); letter-spacing: 0.12em; color: #5c6b80; }
.scrub__node h3 { margin: 0; font: 400 18px var(--font-display); color: var(--muted); transition: color 0.3s ease; }
.scrub__node.is-active h3, .scrub__node.is-done h3 { color: var(--fg); }
.scrub__node p { position: absolute; left: 0; bottom: 0; width: min(740px, 100%); margin: 0; font: 400 clamp(19px, 1.8vw, 24px)/1.45 var(--font-display); color: var(--fg); opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; }
.scrub__node.is-active p { opacity: 1; transform: none; }
html:not(.gs) .scrub { padding-bottom: 0; }
html:not(.gs) .scrub__node p { position: static; opacity: 1; transform: none; font: 400 14px/1.55 var(--font-ui); color: var(--muted); }

/* the census, played: every element sorted into one verdict */
.census { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 56px; align-items: start; margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--line-soft); }
.census h3 { margin: 0; font: 500 24px/1.25 var(--font-display); color: var(--fg); text-wrap: balance; }
.census p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.census__sort { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; max-width: 480px; margin: 22px 0 0; }
.census__el { display: block; aspect-ratio: 1; border-radius: 4px; background: #1a2433; transition: background-color 0.5s ease, box-shadow 0.5s ease, opacity 0.4s ease, transform 0.4s ease; }
.census__go { display: none; }
.census__sort:has(.census__go.is-on) .v-p, .census__sort:not(.is-armed) .v-p { background: #5cc8ff; box-shadow: 0 0 8px rgba(92, 200, 255, 0.5); }
.census__sort:has(.census__go.is-on) .v-s, .census__sort:not(.is-armed) .v-s { background: #6ee7b7; }
.census__sort:has(.census__go.is-on) .v-d, .census__sort:not(.is-armed) .v-d { background: #ff8a82; }
.census__sort:has(.census__go.is-on) .v-u, .census__sort:not(.is-armed) .v-u { background: #f2c46d; }
.census__keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin: 0; }
.census__keys div { position: relative; padding-left: 20px; }
.census__keys div::before { content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; border-radius: 2px; }
.census__keys div:nth-child(1)::before { background: #5cc8ff; }
.census__keys div:nth-child(2)::before { background: #6ee7b7; }
.census__keys div:nth-child(3)::before { background: #ff8a82; }
.census__keys div:nth-child(4)::before { background: #f2c46d; }
.census__keys dt { font-weight: 600; color: var(--fg); }
.census__keys dd { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }

/* ── inputs: spokes into one model, beside the list ── */
.sources { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 32px 56px; align-items: center; margin-top: 44px; }
.hub { margin: 0; }
.hub svg { width: 100%; height: auto; overflow: visible; }
.hub__spoke { stroke: rgba(92, 200, 255, 0.55); stroke-width: 1.4; stroke-dasharray: 3 9; animation: hubFlow 1.6s linear infinite; transition: stroke 0.3s ease; }
@keyframes hubFlow { to { stroke-dashoffset: -24; } }
.hub__core { fill: #082843; stroke: rgba(92, 200, 255, 0.6); stroke-width: 1.5; filter: drop-shadow(0 0 22px rgba(5, 142, 255, 0.45)); }
.hub__core-t { fill: #fff; font: 400 17px var(--font-display); }
.hub__node circle { fill: #0a0f17; stroke: rgba(255, 255, 255, 0.18); stroke-width: 1.2; transition: stroke 0.3s ease, fill 0.3s ease; }
.hub__node text { fill: #dbe6f1; font: 500 9.5px var(--font-mono); letter-spacing: 0.04em; }
.sources__list { margin: 0; padding: 0; list-style: none; }
.sources__list li { padding: 14px 16px; border-top: 1px solid rgba(255, 255, 255, 0.07); border-radius: 10px; transition: background-color 0.3s ease; outline: none; }
.sources__list li:first-child { border-top: 0; }
.sources__list h3 { margin: 0; font: 500 19px/1.25 var(--font-display); color: var(--fg); transition: color 0.3s ease; }
.sources__list p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.sources__list li:hover, .sources__list li:focus-visible { background: rgba(110, 231, 183, 0.06); }
.sources__list li:focus-visible { box-shadow: inset 0 0 0 1px rgba(110, 231, 183, 0.6); }
.sources__list li:hover h3, .sources__list li:focus-visible h3 { color: #6ee7b7; }
.sources:has(li:nth-child(1):is(:hover, :focus-visible)) .hub__spoke:nth-of-type(1),
.sources:has(li:nth-child(2):is(:hover, :focus-visible)) .hub__spoke:nth-of-type(2),
.sources:has(li:nth-child(3):is(:hover, :focus-visible)) .hub__spoke:nth-of-type(3),
.sources:has(li:nth-child(4):is(:hover, :focus-visible)) .hub__spoke:nth-of-type(4),
.sources:has(li:nth-child(5):is(:hover, :focus-visible)) .hub__spoke:nth-of-type(5),
.sources:has(li:nth-child(6):is(:hover, :focus-visible)) .hub__spoke:nth-of-type(6) { stroke: #6ee7b7; stroke-width: 2.4; }
.sources:has(li:nth-child(1):is(:hover, :focus-visible)) .hub__node:nth-of-type(1) circle,
.sources:has(li:nth-child(2):is(:hover, :focus-visible)) .hub__node:nth-of-type(2) circle,
.sources:has(li:nth-child(3):is(:hover, :focus-visible)) .hub__node:nth-of-type(3) circle,
.sources:has(li:nth-child(4):is(:hover, :focus-visible)) .hub__node:nth-of-type(4) circle,
.sources:has(li:nth-child(5):is(:hover, :focus-visible)) .hub__node:nth-of-type(5) circle,
.sources:has(li:nth-child(6):is(:hover, :focus-visible)) .hub__node:nth-of-type(6) circle { stroke: #6ee7b7; fill: rgba(110, 231, 183, 0.12); }

@media (max-width: 980px) {
  .rt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layer, .engine, .dev, .census, .sources { grid-template-columns: 1fr; }
  .engine .console { position: static; }
  .guards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub { max-width: 360px; margin: 0 auto; }
}
@media (max-width: 900px) {
  .scrub { padding-bottom: 0; }
  .scrub__nodes { position: relative; grid-template-columns: 1fr; gap: 22px; padding-left: 26px; }
  .scrub__nodes::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
  .scrub__nodes::after { display: none; }
  .scrub__node { position: relative; }
  .scrub__dot { position: absolute; left: -26px; top: 2px; }
  .scrub__n { margin-top: 0; }
  .scrub__node p { position: static; opacity: 1; transform: none; font: 400 14.5px/1.55 var(--font-ui); color: var(--muted); }
  .scrub__node h3 { color: var(--fg); }
}
@media (max-width: 640px) {
  .layer { padding: 22px 20px; }
  .lag__row { grid-template-columns: 1fr; gap: 26px; padding: 26px 0 30px; }
  .lag__run small { display: none; }
  /* Too narrow for three labels above one track: the first drops below it. */
  .story__bar + .lag__row .lag__dot.is-event small { bottom: auto; top: 18px; }
  .flip__row, html.kit .flip__row { grid-template-columns: 1fr; gap: 4px; padding: 14px 16px; }
  html.kit .flip__row dd { grid-column: 1; grid-row: 2; }
  .seal__node, .moments { grid-template-columns: 1fr; }
  .soa__grid { grid-template-columns: 64px repeat(5, minmax(0, 1fr)); gap: 4px; }
  .soa__v small { display: none; }
  .soa__f { font-size: 9.5px; }
  .soa__c { height: 28px; }
  .guards, .census__keys { grid-template-columns: 1fr; }
}
html[data-motion="paused"] .guard *, html[data-motion="paused"] .moments li { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .hub__spoke, .console__live { animation: none; }
  .guard *, .moments li { animation: none; }
}

/* ══ The page's own world: the monitoring board. Rows on hairlines whose
   statuses flip in, a clock that ticks, amber for time, a 60-second sweep,
   and sections that open on a time ruler. ══ */
.page-board { --time: #f2c46d; --board-line: rgba(242, 196, 109, 0.2); --board-row: rgba(255, 255, 255, 0.07); }
.page-board main { background-image: linear-gradient(180deg, rgba(242, 196, 109, 0.025), transparent 520px); }

/* the hero: title and clock, then the board */
.board-hero { padding: 136px 0 72px; }
.board-hero__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 64px; align-items: end; }
.board-hero .page-title { max-width: none; font-size: clamp(48px, 6vw, 92px); }
.board-clock { display: grid; justify-items: end; gap: 6px; padding-bottom: 6px; animation: heroUp 0.8s var(--ease-out) 0.1s both; }
.board-clock small { display: flex; align-items: center; gap: 8px; font: 600 10px var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--time); }
.board-clock small i { width: 8px; height: 8px; border-radius: 50%; background: var(--time); box-shadow: 0 0 10px var(--time); animation: boardBlink 1.6s ease-in-out infinite; }
@keyframes boardBlink { 50% { opacity: 0.25; } }
.board-clock b { font: 400 clamp(56px, 6.4vw, 104px)/0.9 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; color: #fff; }
.board-clock span { font: 500 12px var(--font-mono); color: var(--muted); }
.board-clock em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--time); }
.board { margin: 52px 0 0; border: 1px solid var(--board-line); background: #06090e; animation: heroUp 0.9s var(--ease-out) 0.2s both; }
.board__head, .board__rows li { display: grid; grid-template-columns: 100px 140px minmax(0, 1fr) 120px 170px 110px; gap: 0 18px; align-items: center; padding: 0 20px; }
.board__head { min-height: 40px; border-bottom: 1px solid var(--board-line); font: 600 9.5px var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(242, 196, 109, 0.8); }
.board__rows { margin: 0; padding: 0; list-style: none; }
.board__rows li { min-height: 52px; border-bottom: 1px solid var(--board-row); font: 400 14px var(--font-mono); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.82); }
.board__rows li > span:nth-child(2) { font-family: var(--font-ui); color: #fff; }
.board__rows li > span:last-child { color: var(--muted); }
.board__st { justify-self: start; padding: 4px 10px; border-radius: 4px; font: 600 11px var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; }
.board__rows .is-late .board__st { background: rgba(242, 196, 109, 0.14); color: var(--time); }
.board__rows .is-due .board__st { background: rgba(242, 196, 109, 0.14); color: var(--time); animation: boardBlink 1.6s ease-in-out infinite; }
.board__rows .is-due > span:nth-child(4) { color: var(--time); }
.board__rows .is-ok .board__st { background: rgba(110, 231, 183, 0.12); color: var(--live); }
.board__rows .is-esc .board__st { background: rgba(255, 69, 58, 0.14); color: #ff8a82; }
.board__rows .is-soon .board__st { background: rgba(255, 255, 255, 0.06); color: var(--muted); }
/* a row arrives like a flap turning over */
.board.is-armed .board__rows li[data-at]:not(.is-on) { opacity: 0; transform: perspective(600px) rotateX(-70deg); }
.board .board__rows li[data-at] { transform-origin: top; transition: transform 0.6s var(--ease-out), opacity 0.3s ease; }
.board__sweep { height: 2px; background: rgba(242, 196, 109, 0.1); }
.board__sweep i { display: block; height: 100%; background: var(--time); box-shadow: 0 0 10px var(--time); transform-origin: left; animation: boardSweep 60s linear infinite; }
@keyframes boardSweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.board__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 12px 20px; font: 500 10px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--label); }

/* sections open on a time ruler, labelled in amber */
.page-board .section-head { max-width: none; padding-top: 26px; background: repeating-linear-gradient(90deg, rgba(242, 196, 109, 0.5) 0 1px, transparent 1px 60px) top left / 100% 12px no-repeat, repeating-linear-gradient(90deg, rgba(242, 196, 109, 0.22) 0 1px, transparent 1px 12px) top left / 100% 6px no-repeat; }
.page-board .section-head > * { max-width: 760px; }
.page-board .section-head .kicker { color: var(--time); }
.page-board .kit-tabs > [data-switch-tab] > i { background: linear-gradient(90deg, rgba(242, 196, 109, 0.4), var(--time)); }
.page-board .story__bar b { color: var(--time); }

@media (max-width: 980px) {
  .board-hero__top { grid-template-columns: 1fr; }
  .board-clock { justify-items: start; }
  .board__head, .board__rows li { grid-template-columns: 76px minmax(0, 1fr) 96px 130px; padding: 0 14px; }
  .board__head span:nth-child(3), .board__head span:nth-child(6), .board__rows li > :nth-child(3), .board__rows li > :nth-child(6) { display: none; }
}
@media (max-width: 640px) {
  .board-hero { padding-top: 112px; }
  .board__head, .board__rows li { grid-template-columns: 62px minmax(0, 1fr) 112px; gap: 0 10px; }
  .board__head span:nth-child(4), .board__rows li > :nth-child(4) { display: none; }
  .board__rows li { font-size: 12.5px; }
  .board__st { padding: 3px 7px; font-size: 9.5px; }
}
html[data-motion="paused"] .board__sweep i, html[data-motion="paused"] .board-clock small i { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .board__sweep i, .board-clock small i, .board__rows .is-due .board__st { animation: none; }
  .board .board__rows li[data-at] { transition: opacity 0.2s ease; transform: none; }
}