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

    /* ---------- MAIN ---------- */
    main {
      display: grid;
      grid-template-columns: 1fr 380px;
      flex: 1;
      min-height: 0;
    }

    /* Graph pane */
    .graph-pane {
      position: relative;
      background:
        radial-gradient(circle at 27% 30%, rgba(123,141,240,0.10), transparent 40%),
        radial-gradient(circle at 73% 30%, rgba(77,196,168,0.10),  transparent 40%),
        radial-gradient(circle at 27% 70%, rgba(212,160,74,0.10), transparent 40%),
        radial-gradient(circle at 73% 70%, rgba(212,114,136,0.10), transparent 40%),
        radial-gradient(circle at 50% 20%, rgba(94,192,224,0.08),  transparent 35%),
        radial-gradient(circle at 27% 50%, rgba(196,85,196,0.08),  transparent 35%),
        radial-gradient(circle at 50% 50%, rgba(212,196,74,0.08),  transparent 35%),
        radial-gradient(circle at 73% 50%, rgba(118,182,196,0.08), transparent 35%),
        var(--bg);
      overflow: hidden;
    }
    .graph-pane svg { width: 100%; height: 100%; display: block; }
    .graph-pane svg { touch-action: none; }

    /* ---- Zoom controls ---- */
    .zoom-controls {
      position: absolute;
      bottom: 14px;
      right: 14px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      z-index: 10;
      opacity: 0;
      transition: opacity 0.25s ease;
      pointer-events: none;
    }
    .graph-pane:hover .zoom-controls,
    .zoom-controls.force-visible { opacity: 1; pointer-events: auto; }
    .zoom-controls button {
      width: 34px; height: 34px;
      display: flex; align-items: center; justify-content: center;
      border: 1px solid var(--border-strong);
      background: var(--surface);
      color: var(--ink);
      font-size: 16px; line-height: 1;
      cursor: pointer;
      border-radius: 0;
      font-family: inherit;
      transition: background 0.12s, color 0.12s;
    }
    .zoom-controls button:first-child { border-radius: 8px 8px 0 0; }
    .zoom-controls button:last-child  { border-radius: 0 0 8px 8px; }
    .zoom-controls button:only-child  { border-radius: 8px; }
    .zoom-controls button:hover { background: var(--ink); color: var(--surface); }
    .zoom-controls .zoom-level-label {
      font-size: 11px; font-weight: 600; text-align: center;
      padding: 3px 0; color: var(--muted); font-variant-numeric: tabular-nums;
      border-left: 1px solid var(--border-strong);
      border-right: 1px solid var(--border-strong);
      background: var(--surface);
    }
    .graph-pane.panning { cursor: grabbing !important; }
    .graph-pane:not(.panning) { cursor: grab; }
    .graph-pane.panning svg { pointer-events: none; }

    .zoom-controls button { 
      border-color: var(--border-strong); 
      background: rgba(255,255,255,0.05);
    }
    .zoom-controls .zoom-level-label {
      border-color: var(--border-strong);
      background: rgba(255,255,255,0.05);
    }