/* "Our Concept" knowledge-graph map. Used by the standalone /our-concept page
   and the docs "Our Concept" section. Reuses editorial.css palette + fonts so
   it matches the rest of the site (and the docs page in particular). */

:root {
    --v-integrate: #2563eb;
    --v-activate:  #e11d48;
    --v-express:   #9333ea;
    --v-tell:      #0d9488;
    --v-settle:    #6b7280;
    --v-emphasize: #d97706;
}

.cm-map { margin: 28px 0 8px; border: 1px solid var(--ink-line-soft); background: var(--page-bg); }
.cm-map svg { display: block; width: 100%; height: auto; }

/* coloured channel edges (solid) */
.cm-edge { stroke-width: 2.5; fill: none; opacity: 0.9; }
/* black dotted spokes = milsiz's hold on every entity; artist-first is heaviest */
.cm-spoke { stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0.1 10; }
.cm-spoke-emph { stroke-width: 4; stroke-dasharray: 0.1 11; }

.cm-node rect { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
.cm-n-name { font-family: var(--font-display); font-weight: 600; font-size: 19px; fill: var(--ink); }
.cm-n-role { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; fill: var(--ink-3); }
.cm-hub rect { fill: var(--ink); stroke: var(--ink); }
.cm-hub .cm-n-name { fill: #fff; font-size: 22px; }
.cm-hub .cm-n-role { fill: rgba(255,255,255,0.7); }
/* the wish — a basic action anyone can take, drawn in the express hue */
.cm-action rect { fill: #fff; stroke: var(--v-express); stroke-width: 1.5; }
.cm-action .cm-n-name { fill: var(--v-express); font-size: 16px; }
.cm-action .cm-n-role { fill: var(--v-express); opacity: 0.8; }

/* paint-order halo so coloured edges don't cut through the labels */
.cm-ch-name, .cm-ch-verb { paint-order: stroke; stroke: var(--page-bg); stroke-width: 5px; stroke-linejoin: round; }
.cm-ch-name { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; }
.cm-ch-verb { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; }
.cm-ch-link { cursor: pointer; }
.cm-ch-link:hover .cm-ch-name { text-decoration: underline; }

/* Legend — two rows of three on desktop. */
.cm-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 32px; margin-top: 32px; }
@media (max-width: 760px) { .cm-legend { grid-template-columns: 1fr; gap: 18px; } }
.cm-legend-item { display: flex; gap: 13px; align-items: baseline; }
.cm-legend-swatch { flex: none; width: 28px; height: 0; border-top: 4px solid var(--ink); margin-top: 11px; }
.cm-legend-verb { font-family: var(--font-mono); font-size: 17px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; display: block; margin-bottom: 4px; }
.cm-legend-desc { font-family: var(--font-body); font-size: 15px; color: var(--ink-2); line-height: 1.5; }