/* Chrome around the knowledge-graph d3 diagram (js/knowledge-graph-viz.js).
   Extracted from knowledge-graph/index.html so /our-data/ can show the same
   diagram without a second copy of the rules. Every colour is a theme token,
   so the frame follows the page into light mode with no overrides here. */

.graph-frame {
    max-width: 1180px;
    margin: 0 auto;
    position: relative;
    background: var(--navy-light);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    overflow: hidden;
}

#kgraph { display: block; width: 100%; height: 640px; cursor: grab; }
#kgraph:active { cursor: grabbing; }

.graph-hint {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.78rem;
    color: var(--text-lighter);
    pointer-events: none;
    white-space: nowrap;
}

.graph-legend {
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    padding: 0.55rem 0.8rem;
    border-radius: 10px;
    /* --panel-veil is declared per page (it is a translucent wash over that
       page's own surface); fall back to the card token where it is absent. */
    background: var(--panel-veil, var(--surface-card, var(--navy-light)));
    border: 1px solid var(--border-light);
    backdrop-filter: blur(8px);
    font-size: 0.78rem;
    color: var(--text-light);
}

.graph-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.graph-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.graph-note {
    max-width: 1180px;
    margin: 0.7rem auto 0;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-lighter);
}

@media (max-width: 768px) {
    #kgraph { height: 520px; }
}