/* Full-page protein metabolic network (protein_metabolic_network.html) -- restructured as a
 * linear stack of full-width tp-ui-panel cards (Pathways / Network / Selected reaction /
 * Catalyzed reactions), matching the detail-page shape used by protein.html and binder.html,
 * instead of a cramped sidebar-plus-graph shell. Reuses .metabolic-network-shell/.metabolic-map-*
 * (toolbar + canvas, from protein-detail.css -- exclusive to this page, the embedded preview on
 * protein.html has no interactive graph) and .metabolism-reaction-table/.pathway-reaction-row
 * (from metabolism-overview.css -- the same reaction-row component metabolism_pathway.html uses).
 */

.protein-metabolic-network-summary {
    margin-top: 0;
}

#metabolic-network-cy {
    min-height: clamp(520px, 70vh, 820px);
}

/* The section card already provides the bordered/surfaced frame -- drop the inspector's own
   box styling (shared with the embedded preview's score cards) here so it doesn't nest a
   second box inside the "Selected reaction" card. */
.protein-metabolic-network-page .metabolic-inspector {
    border: 0;
    padding: 0;
    background: none;
}

/* .pathway-reaction-row (metabolism-overview.css) is a static, non-interactive list item on
   the pathway-detail page it was built for -- here each row is clickable (selects the matching
   node in the network above), so the affordance and selected-state highlight are scoped to
   this page only, not the shared component. */
.protein-metabolic-network-page .pathway-reaction-row {
    cursor: pointer;
}

.protein-metabolic-network-page .pathway-reaction-row:focus-visible {
    outline: 2px solid var(--tp-color-brand-300);
    outline-offset: -1px;
}

.protein-metabolic-network-page .pathway-reaction-row.is-active {
    border-color: var(--tp-color-brand-300);
    background: var(--tp-color-brand-050);
}

/* Brief background flash on the "Selected reaction" card whenever a new node/row is picked, so
   it's obvious where the info landed even after the scrollIntoView above has already put it in
   view -- snaps to a warm tint, then eases back down to the card's normal surface color. */
@keyframes tp-metabolic-selected-flash {
    from { background-color: color-mix(in srgb, var(--tp-color-brand-500) 24%, var(--tp-color-surface)); }
    to { background-color: var(--tp-color-surface); }
}

#section-selected.is-flashing {
    animation: tp-metabolic-selected-flash 1400ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    #section-selected.is-flashing {
        animation: none;
    }
}

/* Line swatches for the network legend's edge entries (connected reaction / cross-pathway). */
.metabolic-legend-line {
    display: inline-block;
    width: 16px;
    height: 0;
    border-top: 1.6px solid var(--tp-color-text-primary);
}

.metabolic-legend-line--cross {
    border-top-style: dashed;
}