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

    /* ---------- PATH BREADCRUMB ---------- */
    nav.path {
      background: var(--surface);
      border-top: 1px solid var(--border);
      padding: 9px 26px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      min-height: 46px;
      overflow-x: auto;
      white-space: nowrap;
    }
    nav.path::-webkit-scrollbar { height: 5px; }
    nav.path::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
    nav.path .label {
      color: var(--muted);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-size: 10.5px;
      flex-shrink: 0;
    }
    nav.path .empty-path {
      color: var(--muted);
      font-family: "Charter", Georgia, serif;
      font-style: italic;
    }
    .path-item {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      cursor: pointer;
      padding: 4px 9px;
      border-radius: 6px;
      transition: background 0.15s, color 0.15s;
      font-family: "Charter", Georgia, serif;
      color: var(--ink);
    }
    .path-item:hover { background: var(--bg); }
    .path-item.current {
      background: var(--ink);
      color: var(--surface);
    }
    .path-item .num {
      font-size: 10px;
      opacity: 0.6;
      font-family: ui-sans-serif, sans-serif;
      font-weight: 700;
    }
    .path-arrow {
      color: var(--muted);
      font-family: Georgia, serif;
      font-size: 14px;
      font-weight: 700;
      opacity: 0.9;
    }
    .path-arrow.rel-causes     { color: var(--rel-causes); }
    .path-arrow.rel-blocks     { color: var(--rel-blocks); }
    .path-arrow.rel-leads-to   { color: var(--rel-leads-to); }
    .path-arrow.rel-informs    { color: var(--rel-informs); }
    .path-arrow.rel-requires   { color: var(--rel-requires); }
    .path-arrow.rel-enables    { color: var(--rel-enables); }
    .path-arrow.rel-pairs-with { color: var(--rel-pairs-with); }
    .path-arrow.rel-remedies   { color: var(--rel-remedies); }
    nav.path .actions {
      margin-left: auto;
      display: flex;
      gap: 6px;
      flex-shrink: 0;
    }
    nav.path button {
      padding: 4px 10px;
      background: var(--bg);
      border: 1px solid var(--border-strong);
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
      color: var(--muted);
      font-family: inherit;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    nav.path button:hover { background: var(--surface); color: var(--ink); border-color: var(--muted); }