/* The catalogue graph (#844): drawn by graph.js over the still picture, which it hides once the graph stands. Colours, type and spacing come from
   the custom properties `page.css` puts on :root (#915), whose defaults are the browser's own light and dark, so the graph reads in both and a store's theme restyles it. A perspective's colour is a fill set by the script. */
.graph-host.with-graph > figure.picture { display: none; }
.graph { margin: 1rem 0; }
.graph-tools { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; margin-bottom: .4rem; }
.graph-steps { display: flex; gap: .3rem; }
.graph-steps button[aria-pressed="true"] { font-weight: 600; border-width: 2px; }
.graph-message { border-left: 4px solid var(--color-alert); padding-left: var(--space-small); margin: .4rem 0; }
.graph-svg { display: block; width: 100%; height: max(34rem, 75vh); max-width: none; border: 1px solid var(--color-rule); cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; background: var(--color-background); }
.graph-svg.is-panning { cursor: grabbing; }
.graph-svg .backdrop { fill: transparent; }
.graph-svg text { font: 13px var(--font-body); fill: var(--color-text); }
.graph-svg .type-word { font-size: 11px; opacity: .7; }
.graph-svg .node { cursor: pointer; outline: none; }
.graph-svg .node .circle { stroke: var(--color-text); stroke-width: 1; }
.graph-svg .node.is-type .circle { stroke-width: 3.5; }
.graph-svg .node .halo { fill: none; stroke: var(--color-text); stroke-width: 1.5; stroke-dasharray: 2 3; }
.graph-svg .node:focus .circle, .graph-svg .node:focus-visible .circle { stroke: var(--color-focus); stroke-width: 4.5; }
.graph-svg .node.is-centre text { font-weight: 700; }
.graph-svg .line .stroke { fill: none; stroke: var(--color-text); stroke-width: 1.4; opacity: .75; }
.graph-svg .line .hit { fill: none; stroke: transparent; stroke-width: 12; }
.graph-svg .arrowhead { fill: var(--color-text); }
.kind-generic .stroke { stroke-dasharray: none; }
.kind-partitive .stroke { stroke-dasharray: 7 4; }
.kind-associative .stroke { stroke-dasharray: 1.5 4; stroke-linecap: round; }
.kind-hierarchical .stroke { stroke-dasharray: 10 3 2 3; }
.graph-svg .line-words { display: none; paint-order: stroke; stroke: var(--color-background); stroke-width: 4px; font-size: 12px; }
.graph-svg .line:hover .line-words, .graph-svg .line.lit .line-words { display: block; }
.graph.is-lit .node:not(.lit), .graph.is-lit .line:not(.lit) { opacity: .18; }
.graph.is-lit .line.lit .stroke { opacity: 1; stroke-width: 2.4; }
.graph-key { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; list-style: none; padding: 0; margin: .6rem 0 0; font-size: .9rem; }
.graph-key .swatch { display: inline-block; width: .9rem; height: .9rem; border-radius: 50%; border: 1px solid var(--color-text); vertical-align: -.1rem; }
.graph-key .swatch.is-type { border-width: 3px; }
.graph-key .line-sample { vertical-align: middle; }
.graph-key .line-sample .stroke { stroke: var(--color-text); stroke-width: 1.6; }
/* The filters (#845): a form the page ships hidden and the script shows. */
.graph-filters { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; margin: .6rem 0; }
.graph-filters[hidden] { display: none; }
.graph-filters fieldset { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin: 0; padding: .2rem .6rem; border: 1px solid var(--color-rule); }
.graph-filters legend { font-size: .85rem; padding: 0 .3rem; }
/* Dragging a circle (#846). */
.graph-svg.is-dragging, .graph-svg.is-dragging .node { cursor: grabbing; }
.graph-hint { margin: 0; font-size: .85rem; opacity: .8; }
.graph-hint[hidden] { display: none; }