/* Visual explanations used by the AI drug discovery guide. */
.article-updated { margin: 0.65rem 0 0; color: #59616a; font-size: 0.875rem; }

.article-body .discovery-visual {
    --discovery-ink: #183c36;
    --discovery-accent: #196751;
    margin: 2rem 0;
    padding: clamp(1rem, 3vw, 1.75rem);
    border: 1px solid #d4e5de;
    border-radius: 16px;
    background: #f4f8f5;
    color: var(--discovery-ink);
    font-size: 0.95rem;
    line-height: 1.55;
}

.discovery-visual figcaption {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.discovery-visual .discovery-eyebrow {
    color: var(--discovery-accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.discovery-visual figcaption > strong {
    color: var(--discovery-ink);
    font-size: clamp(1.2rem, 3vw, 1.45rem);
    line-height: 1.3;
    letter-spacing: -0.025em;
}

.discovery-visual figcaption > span:last-child,
.discovery-visual .discovery-note {
    color: #4e625b;
    font-size: 0.875rem;
}

.article-body .discovery-cycle {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.discovery-cycle li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 1rem 0.8rem;
    border: 1px solid #d4e5de;
    border-radius: 10px;
    background: #fff;
    font-size: 0.875rem;
}

.discovery-cycle li:not(:last-child)::after {
    content: "→";
    position: absolute;
    right: -0.7rem;
    top: 1rem;
    z-index: 1;
    color: var(--discovery-accent);
    font-size: 1.1rem;
    font-weight: 700;
}

.discovery-visual .discovery-step {
    color: var(--discovery-accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.discovery-cycle strong { font-size: 1rem; }

.article-body .discovery-return {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 1rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid #c7dcd2;
    color: var(--discovery-accent);
    font-size: 0.875rem;
    font-weight: 600;
}

.discovery-return > span { font-size: 1.6rem; line-height: 1; }

.discovery-candidates {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.discovery-candidate {
    min-width: 0;
    border: 1px solid #d4e5de;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.article-body .discovery-candidate-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 1rem 0.8rem;
    border-bottom: 1px solid #e0eae4;
    font-weight: 700;
}

.discovery-letter {
    display: grid;
    place-items: center;
    flex: 0 0 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: #e4f0e8;
    color: var(--discovery-accent);
    font-size: 0.85rem;
}

.discovery-candidate dl {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 1rem 0.8rem;
}

.discovery-candidate dt { margin-bottom: 0.3rem; color: #4e625b; font-size: 0.8rem; }
.discovery-candidate dd { width: fit-content; margin: 0; padding: 0.2rem 0.55rem; border-radius: 5px; font-size: 0.85rem; font-weight: 600; }
.discovery-positive { background: #e4f2e8; color: #23613a; }
.discovery-concern { background: #fff0dc; color: #865016; }
.discovery-unknown { background: #edf0f4; color: #4d5b6e; }

.discovery-candidate details {
    border-top: 1px solid #e0eae4;
    font-size: 0.875rem;
}

.discovery-candidate summary {
    min-height: 48px;
    padding: 0.85rem 0.8rem;
    color: var(--discovery-accent);
    cursor: pointer;
    font-weight: 600;
}

.discovery-candidate summary:hover { background: #edf6ef; }
.discovery-candidate summary:focus-visible { outline: 3px solid #196751; outline-offset: -3px; }
.discovery-candidate details[open] summary { background: #edf6ef; }
.article-body .discovery-candidate details p { margin: 0; padding: 0.8rem; }
.article-body .discovery-visual .discovery-note { margin: 1rem 0 0; }

.article-body .discovery-evidence {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.discovery-evidence li {
    position: relative;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.8rem;
    margin: 0;
    padding-bottom: 1.25rem;
}

.discovery-evidence li:last-child { padding-bottom: 0; }

.discovery-evidence li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: calc(1rem - 1px);
    top: 2rem;
    bottom: 0;
    border-left: 2px solid #b6d0c4;
}

.discovery-evidence-marker {
    display: grid;
    place-items: center;
    height: 2rem;
    border-radius: 50%;
    background: var(--discovery-accent);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
}

.discovery-evidence li > div { padding-top: 0.15rem; }
.discovery-evidence strong { color: var(--discovery-ink); }
.article-body .discovery-evidence p { margin: 0.3rem 0; font-size: 0.9rem; }
.discovery-limit { display: block; color: #52645d; font-size: 0.825rem; }

@media (max-width: 640px) {
    .article-body .discovery-cycle { grid-template-columns: 1fr; gap: 1rem; }
    .discovery-cycle li { padding: 1rem; }
    .discovery-cycle li:not(:last-child)::after { content: "↓"; top: auto; right: 1rem; bottom: -1.05rem; }
    .discovery-candidates { grid-template-columns: 1fr; gap: 1rem; }
    .discovery-candidate dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
    .discovery-candidate dt { min-height: 2.5em; }
}

@media (max-width: 380px) {
    .discovery-candidate dl { grid-template-columns: 1fr; }
    .discovery-candidate dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
    .discovery-candidate dt { min-height: 0; margin-bottom: 0; }
}