/* The South African Music Graph: the hub, the entity page and the SVG drawing.
   The cards and the connection list are the page; the drawing is layered on
   top by graph.js and is hidden until it has something to show. */
.mg-intro { max-width: 62ch; color: #475569; }
.mg-count { font-size: .85rem; color: #64748b; }

.mg-filters { display: grid; gap: .6rem; margin-top: 1rem; }
.mg-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.mg-filter .dyk-full__label { margin: 0 .3rem 0 0; }

.mg-group { margin: 1.4rem 0 .6rem; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; color: #64748b; }

.mg-cards { list-style: none; }
.mg-card { padding: .9rem 1rem; border: 1px solid var(--dyk-line); border-radius: var(--dyk-radius); background: #fff; scroll-margin-top: 90px; }
.mg-card__link { font-weight: 700; color: var(--dyk-ink); text-decoration: none; }
.mg-card__link:hover { text-decoration: underline; }
.mg-card__summary { margin: .3rem 0 .5rem; font-size: .875rem; color: #475569; }
.mg-card__meta { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; }

.mg-connections { display: grid; gap: .7rem; padding-left: 1.1rem; }
.mg-connections__note { color: #475569; }
.mg-connections__source { display: block; font-size: .78rem; color: #64748b; }

.mg-relations { display: grid; gap: .35rem; padding-left: 1.1rem; }
.mg-entity__meta { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1rem; }
.mg-portrait { max-width: 320px; margin: 0 0 1.25rem; }
.mg-portrait img { width: 100%; height: auto; border-radius: var(--dyk-radius); }

/* ── The drawing ────────────────────────────────────────────────────────── */
.mg-network { position: relative; margin-bottom: 1rem; }
.mg-network__show { min-height: 44px; padding: .5rem 1.25rem; border: 1px solid var(--dyk-line); border-radius: 999px; background: #fff; font-weight: 700; }
.mg-network__canvas svg { width: 100%; height: auto; max-height: 70vh; background: #f8fafc; border: 1px solid var(--dyk-line); border-radius: var(--dyk-radius); touch-action: manipulation; }
.mg-edge { stroke: #cbd5e1; stroke-width: 1; }
.mg-edge--on { stroke: #7c3aed; stroke-width: 2; }
.mg-node circle { fill: #7c3aed; stroke: #fff; stroke-width: 1.5; cursor: pointer; }
.mg-node text { font-size: 11px; fill: #334155; pointer-events: none; }
.mg-node--on circle { fill: #0f172a; }
.mg-node:focus-visible circle { outline: 2px solid #0f172a; outline-offset: 2px; }
.mg-node--dim { opacity: .25; }

.mg-panel { padding: .9rem 1rem; margin-top: .75rem; border: 1px solid var(--dyk-line); border-radius: var(--dyk-radius); background: #fff; }
.mg-panel h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.mg-panel p { margin: 0 0 .5rem; font-size: .875rem; color: #475569; }

@media (prefers-reduced-motion: reduce) {
  .mg-node circle, .mg-edge { transition: none; }
}

/* Only the best connected nodes are labelled at rest; the others name
   themselves when you point at them, focus them or select them. */
.mg-node text { opacity: 0; transition: opacity .12s ease; }
.mg-node--named text,
.mg-node:hover text,
.mg-node:focus text,
.mg-node--on text { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mg-node text { transition: none; } }