/* Scientific miniatures occupy only the existing space beside the numbers. */
#research .card {
    transform: none;
}

#research .research-toggle {
    position: relative;
    display: inline-block;
    width: 54px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: left;
    vertical-align: top;
    cursor: pointer;
}

/* Extend the hit area without changing the number's line box. */
#research .research-toggle::before {
    content: "";
    position: absolute;
    inset: -12px -4px;
}

#research .research-toggle:not(:disabled)::after {
    content: "+";
    position: absolute;
    right: 3px;
    color: var(--text-dim);
}

#research .research-toggle[aria-pressed="true"]::after { content: "−"; }
#research .research-toggle:disabled { cursor: default; }
#research .research-toggle:focus-visible {
    outline: 1px solid var(--accent-dim);
    outline-offset: 6px;
}

#research .research-visual {
    position: absolute;
    top: 12px;
    right: 26px;
    width: calc(100% - 118px);
    max-width: 240px;
    height: 50px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 300ms ease;
    fill: none;
    stroke: var(--text-dim);
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#research .card[data-research-open] .research-visual { opacity: 0.85; }
#research .research-accent { stroke: var(--accent-dim); }
#research .research-fill { fill: var(--accent-dim); fill-opacity: 0.18; }
#research .research-dim { opacity: 0.45; }

#research .research-specialist {
    stroke: var(--text-dim);
    fill: var(--text-dim);
    fill-opacity: 0;
    transition: stroke 300ms ease 200ms, fill 300ms ease 200ms, fill-opacity 300ms ease 200ms;
}
#research .card[data-research-open] .research-specialist {
    stroke: var(--accent-dim);
    fill: var(--accent-dim);
    fill-opacity: 0.2;
}

#research .research-flow {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 350ms ease;
}
#research .card[data-research-open] .research-flow {
    stroke-dashoffset: 0;
    transition-delay: var(--step, 150ms);
}

#research .research-variant {
    opacity: 0.7;
    transition: opacity 300ms ease;
}
#research .card[data-research-open] .research-variant { opacity: 0.18; transition-delay: 500ms; }
#research .card[data-research-open] .research-survivor { opacity: 1; transition-delay: 400ms; }

#research .research-description {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    #research .card,
    #research .card::before,
    #research .research-visual,
    #research .research-visual * {
        transition: none !important;
        animation: none !important;
    }
}