/* ---------------------------------------------------------------------------
   Relationship graph (slice 0025).

   Hand-written, not an esbuild sibling: vis-network's own stylesheet is
   deliberately not imported (its weight is icon sprites for the navigation and
   manipulation toolbars, which this view never enables). What it actually
   needs is the stage, the filter rail, and one tooltip rule — all below.

   The stage is a dark panel inset in an otherwise light app: the canvas is
   transparent, so this gradient is what the graph floats on.
   --------------------------------------------------------------------------- */

.graph-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 2rem 2rem;
}

.graph-page__title {
    margin: 0 0 .25rem;
    font-size: 1.6rem;
}

.graph-page__hint {
    margin: 0;
    color: var(--color-4-lighest, #5B5858);
    font-size: .95rem;
}

/* No <kbd> anywhere else in the app yet, so it is styled here rather than in
   main.css — move it up if a second surface ever needs one. */
.graph-page__hint kbd {
    padding: .05rem .3rem;
    border: 1px solid var(--color-2-darker, #DCD9D9);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--color-2, #F5F2F2);
    font-family: inherit;
    font-size: .82em;
}

.graph {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    min-height: 32rem;
    /* Fill what's left of the viewport under the topbar, but never collapse. */
    height: calc(100vh - 18rem);
}

/* --- the stage ---------------------------------------------------------- */

.graph__stage {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 10px;
    border: 1px solid var(--color-31, #BAA898);
    /* A warm ember at the centre fading to ink at the rim, plus a vignette —
       the "scrying pool" the web hangs in. */
    background:
        radial-gradient(ellipse 70% 60% at 50% 42%, #33231F 0%, #221A18 45%, var(--color-5, #1A1D1B) 100%);
    box-shadow:
        inset 0 0 6rem rgba(0, 0, 0, .55),
        inset 0 0 0 1px rgba(238, 224, 203, .06);
    overflow: hidden;
}

.graph__status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 1rem;
    text-align: center;
    color: var(--color-31, #BAA898);
    font-style: italic;
    pointer-events: none;
}

/* vis puts the canvas in a plain div; make sure it fills the stage. */
.graph__stage > div,
.graph__stage canvas {
    width: 100% !important;
    height: 100% !important;
}

/* --- the filter rail ---------------------------------------------------- */

.graph__rail {
    flex: 0 0 15rem;
    overflow-y: auto;
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid var(--color-2-darker, #DCD9D9);
    background: var(--color-2, #F5F2F2);
}

.graph__rail[hidden] { display: none; }

.graph-rail__group + .graph-rail__group { margin-top: 1.25rem; }

.graph-rail__title {
    margin: 0 0 .5rem;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-4-lighest, #5B5858);
}

/* Relations are grouped under the article type they start from. Quieter than
   the section title above it — this is a divider inside a list, not a heading. */
.graph-rail__subtitle {
    margin: .6rem 0 .15rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--color-4-lighest, #5B5858);
}

.graph-rail__subtitle:first-of-type { margin-top: .25rem; }
.graph-rail__subtitle[hidden] { display: none; }

.graph-rail__row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem 0;
    cursor: pointer;
    line-height: 1.3;
}

.graph-rail__check { flex: 0 0 auto; cursor: pointer; }

.graph-rail__swatch {
    flex: 0 0 auto;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}

/* Relations are edges: a short bar rather than a dot, so the legend says which
   half of the picture a colour belongs to. */
.graph-rail__swatch--edge {
    width: .85rem;
    height: .2rem;
    border-radius: 1px;
}

.graph-rail__label {
    font-size: .92rem;
    overflow-wrap: anywhere;
}

.graph-rail__row[hidden] { display: none; }

.graph-rail__empty {
    margin: .25rem 0 0;
    font-size: .85rem;
    font-style: italic;
    color: var(--color-4-lighest, #5B5858);
}

/* --- the one library rule we kept --------------------------------------- */

div.vis-tooltip {
    position: absolute;
    visibility: hidden;
    padding: .35rem .55rem;
    white-space: nowrap;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: .85rem;
    color: var(--color-21, #EEE0CB);
    background-color: rgba(26, 29, 27, .94);
    border: 1px solid var(--color-31, #BAA898);
    border-radius: 5px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
    pointer-events: none;
    z-index: 5;
}

@media (max-width: 60rem) {
    .graph { flex-direction: column; height: auto; }
    .graph__stage { min-height: 26rem; }
    .graph__rail { flex: 0 0 auto; max-height: 14rem; }
}