/* MINIMAP.CSS — extracted from agent_vocabulary.html (Phase 1)
   See docs/data-model.md for component ownership. */

    /* ---- Minimap ---- */
    .minimap {
      position: absolute;
      bottom: 14px;
      left: 14px;
      width: 150px;
      height: 105px;
      background: var(--surface);
      border: 1px solid var(--border-strong);
      border-radius: 8px;
      z-index: 10;
      overflow: hidden;
      opacity: 0;
      transition: opacity 0.25s ease;
      pointer-events: none;
      box-shadow: 0 2px 10px rgba(0,0,0,0.10);
      user-select: none;
    }
    .graph-pane:hover .minimap,
    .minimap.force-visible { opacity: 1; pointer-events: auto; }
    .minimap canvas { width: 100%; height: 100%; display: block; }
    .minimap-viewport {
      position: absolute; z-index: 2;
      border: 2px solid var(--pre-action, #7b8df0);
      background: rgba(123,141,240,0.06);
      pointer-events: none; border-radius: 2px;
      top: 0; left: 0; width: 0; height: 0;
    }
    .minimap-drag-trigger {
      position: absolute; z-index: 3;
      top: 0; left: 0; width: 100%; height: 100%;
      cursor: crosshair;
    }
    .minimap {
      background: rgba(255,255,255,0.05);
      border-color: var(--border-strong);
    }
    .minimap-viewport {
      border-color: var(--pre-action, #7b8df0);
      background: rgba(123,141,240,0.06);
    }
    .build-mode .minimap { opacity: 1; pointer-events: auto; }

    .legend {
      position: absolute;
      top: 12px;
      left: 12px;
      background: rgba(36,36,46,0.92);
      backdrop-filter: blur(4px);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 0;
      font-size: 12px;
      color: var(--muted);
      line-height: 1.7;
      max-width: 320px;
      transition: box-shadow 0.15s;
    }
    .legend:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
    .legend-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      cursor: pointer;
      user-select: none;
    }
    .legend-header .label {
      font-family: "Charter", Georgia, serif;
      font-weight: 600;
      font-size: 12px;
      color: var(--ink);
      flex: 1;
    }
    .legend-toggle {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 11px;
      color: var(--muted);
      padding: 0 2px;
      transition: transform 0.15s;
      line-height: 1;
      font-family: inherit;
    }
    .legend.collapsed .legend-toggle { transform: rotate(-90deg); }
    .legend-body {
      padding: 0 10px 10px;
    }
    .legend.collapsed .legend-body { display: none; }
    .legend strong {
      color: var(--ink);
      font-family: "Charter", Georgia, serif;
      font-weight: 600;
      font-size: 12px;
    }
    .legend .swatch {
      display: inline-block;
      width: 16px;
      text-align: center;
      color: var(--ink);
      font-weight: 600;
    }

    /* SVG nodes + edges.

       Phase-8 §white-on-white bug fix: hardcoded fallback colors below
       each var(--*)-backed color so the node readability is structurally
       guaranteed even if the cascade breaks upstream (e.g. base.css
       :root tokens get invalidated by a future lint / strip /
       cache-busted reload). The hardcoded colors match the dark-theme
       variable values one-for-one; in light theme (currently inactive
       per Phase-9 DARK-MODE-ONLY) the hardcoded colors still produce a
       readable diagram because the page bg (`--bg` #1a1a22) is dark
       anyway — text reads as light-on-dark whether or not the cascade
       resolves. Chrome / Firefox / Safari all accept the
       `var(... , <fallback>)` syntax so the literal-fallback path
       here stays clean and grep-friendly. */
    .node-bg {
      fill: var(--surface, #1c1c24);
      stroke: var(--ink, #e8e8ec);
      stroke-width: 1.6;
      cursor: pointer;
      transition: r 0.15s, stroke-width 0.15s;
    }
    .node-label {
      font-family: "Charter", "Iowan Old Style", Georgia, serif;
      font-size: 12.5px;
      text-anchor: middle;
      pointer-events: none;
      fill: var(--ink, #e8e8ec);
      font-weight: 600;
    }
    .node-num {
      font-family: ui-sans-serif, system-ui, sans-serif;
      font-size: 9px;
      text-anchor: middle;
      pointer-events: none;
      fill: var(--muted, #b8b8c0);
      font-weight: 700;
      letter-spacing: 0.05em;
    }
    .node.active .node-bg {
      stroke-width: 3.2;
      filter: drop-shadow(0 2px 6px rgba(26,26,26,0.22));
    }
    .node.dimmed .node-bg { opacity: 0.22; }
    .node.dimmed .node-label { opacity: 0.30; }
    .node.dimmed .node-num { opacity: 0.30; }
    .node.search-match .node-bg {
      stroke-width: 3;
    }

    .edge {
      stroke: currentColor;
      stroke-width: 1.9;
      fill: none;
      cursor: default;
      opacity: 0.6;
      transition: opacity 0.15s, stroke-width 0.15s;
    }
    .edge:hover { opacity: 1; stroke-width: 2.4; }
    .edge.active { opacity: 1; stroke-width: 2.8; }
    .edge.dimmed { opacity: 0.10; }
    .edge-label {
      font-family: ui-sans-serif, system-ui, sans-serif;
      font-size: 10px;
      text-anchor: middle;
      pointer-events: none;
      fill: currentColor;
      opacity: 0.7;
      letter-spacing: 0.03em;
      font-weight: 600;
    }
    .edge-label.dimmed { opacity: 0.10; }
    .edge-label.active { opacity: 1; font-weight: 700; }

    .cluster-label {
      font-family: "Charter", Georgia, serif;
      font-style: italic;
      font-size: 13px;
      fill: var(--muted);
      text-anchor: middle;
      pointer-events: none;
      letter-spacing: 0.06em;
      text-transform: lowercase;
    }