/* 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;
}

/* 720px rather than 640: the diagram gained universities, patents, angels
   and service providers, and at the old height their labels collided. */
#kgraph { display: block; position: relative; width: 100%; height: 720px; cursor: grab; }
#kgraph:active { cursor: grabbing; }

/* The ambient field (js/knowledge-graph-viz.js draws it): anonymous nodes and
   fine edges under the labelled slice, standing in for the scale of the full
   graph. Sized by the frame; the SVG stacks over it via position:relative. */
.graph-field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; transition: opacity 0.25s ease; }

.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;
    z-index: 2;
}

/* ── The three views ─────────────────────────────────────────────────────
   data-view on .graph-frame picks one; everything else fades and sinks.
   The graph's own layers ease out together; an isometric panel rises in.
   One timing for all of it, so the swap reads as a single motion. */
.graph-frame > #kgraph,
.graph-frame > .graph-field,
.graph-frame > .graph-hint,
.graph-frame > .graph-intel {
    transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.21, 1), transform 0.6s cubic-bezier(0.22, 0.61, 0.21, 1);
}
.graph-frame:not([data-view="graph"]) > #kgraph,
.graph-frame:not([data-view="graph"]) > .graph-hint,
.graph-frame:not([data-view="graph"]) > .graph-intel {
    opacity: 0;
    transform: scale(0.985);
    pointer-events: none;
}
/* The field stays, faded: the same graph sits underneath every view — that
   is the point of the intelligence layer. */
.graph-frame:not([data-view="graph"]) > .graph-field {
    opacity: 0.3;
    pointer-events: none;
}
.graph-view {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.4rem 2.4rem 2rem;
    opacity: 0;
    transform: translateY(14px) scale(0.985);
    transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.21, 1), transform 0.6s cubic-bezier(0.22, 0.61, 0.21, 1);
    pointer-events: none;
}
.graph-view img { max-width: 100%; max-height: 100%; }
.graph-frame[data-view="city"] > .graph-view[data-view="city"],
.graph-frame[data-view="arch"] > .graph-view[data-view="arch"] {
    opacity: 1;
    transform: none;
}

/* The pill switch, top right. */
.graph-switch {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: var(--panel-veil, var(--surface-card, var(--navy-light)));
    border: 1px solid var(--border-light);
    backdrop-filter: blur(8px);
    z-index: 3;
}
.graph-switch button {
    border: 0;
    background: none;
    cursor: pointer;
    padding: 0.32rem 0.75rem;
    border-radius: 999px;
    font-family: var(--font-sans, 'DM Sans', sans-serif);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-light);
    transition: background 0.2s ease, color 0.2s ease;
}
.graph-switch button:hover { color: var(--white); }
.graph-switch button[aria-pressed="true"] {
    background: var(--navy-lighter);
    color: var(--white);
}

/* ── The intelligence pane ───────────────────────────────────────────────
   A grayscale readout down the frame's right edge — type set small and
   quiet, thin rules, no colour. It answers hover; below 1024px there is no
   hover worth answering and it hides. */
.graph-intel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 15%;
    padding: 3.4rem 1.1rem 1.1rem;
    overflow: hidden;
    border-left: 1px solid var(--border-light);
    background: var(--panel-veil, var(--surface-card, var(--navy-light)));
    backdrop-filter: blur(8px);
    z-index: 2;
}
.gi-head {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-lighter);
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 0.8rem;
}
.gi-rest { margin: 0 0 0.6rem; font-size: 0.8rem; line-height: 1.5; color: var(--text-light); }
.gi-faint { color: var(--text-lighter); font-size: 0.72rem; }
.gi-node {
    font-family: var(--font-display, 'Source Sans 3', system-ui, sans-serif);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--white);
}
.gi-type {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-lighter);
    margin: 0.2rem 0 0.4rem;
}
.gi-sec { margin: 0; padding: 0.55rem 0 0.15rem; border-top: 1px solid var(--border-light); }
.gi-sec:first-of-type { border-top: 0; }
.gi-sec h3 {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-lighter);
    margin: 0 0 0.3rem;
}
.gi-sec p { margin: 0 0 0.3rem; font-size: 0.78rem; line-height: 1.45; color: var(--text-light); }
.gi-note {
    position: absolute;
    left: 1.1rem;
    right: 1.1rem;
    bottom: 0.9rem;
    margin: 0;
    font-size: 0.64rem;
    line-height: 1.4;
    color: var(--text-lighter);
}
/* New readout eases in on every hover. */
.gi-live { animation: gi-in 0.28s ease; }
@keyframes gi-in {
    from { opacity: 0.4; transform: translateX(5px); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 1023px) {
    .graph-intel { display: none; }
}

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

@media (max-width: 768px) {
    #kgraph { height: 520px; }
    /* The hint speaks to a mouse. */
    .graph-hint { display: none; }
    .graph-switch button { padding: 0.3rem 0.55rem; font-size: 0.68rem; }
    .graph-view { padding: 1.2rem 0.8rem 1rem; }
}