/* DISCOVERY-ENGINE — "try adding these related concepts" panel
   Phase 5. Lives at the end of the active term's detail card. Each row
   surfaces a candidate concept with its hop distance, tag-overlap count,
   difficulty-match badge, and an On-graph / Add-to-graph action button. */

.discovery-panel {
  margin: 18px 0 0 0;
  padding: 14px 16px 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2, rgba(255,255,255,0.04));
}

.discovery-panel .disc-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.discovery-panel .disc-head h3 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--ink-dim, #6b6357);
  font-weight: 600;
}

.discovery-panel .disc-sub {
  margin: 0;
  font-size: 11px;
  color: var(--ink-faint, #8c8579);
  line-height: 1.45;
}

.discovery-panel .disc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.discovery-panel .disc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border-top: 1px dashed var(--border);
}

.discovery-panel .disc-row:first-child {
  border-top: none;
}

.discovery-panel .disc-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  transition: background-color 80ms ease, border-color 80ms ease;
}

.discovery-panel .disc-pill:hover {
  background: var(--surface-2, rgba(0,0,0,0.04));
  border-color: var(--ink-dim, #6b6357);
}

.discovery-panel .disc-num {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--ink-dim, #6b6357);
  flex-shrink: 0;
}

.discovery-panel .disc-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.discovery-panel .disc-meta {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
}

.discovery-panel .hop {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(123,141,240,0.10);   /* dark-mode --pre-action tint */
  color: #aeb5e0;
  border: 1px solid rgba(123,141,240,0.20);
}

.discovery-panel .hop-2 {
  background: rgba(176,138,53,0.12);   /* matches --rel-leads-to-ish */
  color: #dfc080;
  border-color: rgba(176,138,53,0.25);
}

.discovery-panel .diff-match {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(58,166,138,0.10);
  color: #8dd6c1;
  border: 1px solid rgba(58,166,138,0.20);
}

.discovery-panel .tag-overlap {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(160,90,160,0.10);
  color: #d2a8d2;
  border: 1px solid rgba(160,90,160,0.20);
}

.discovery-panel .disc-btn {
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  flex-shrink: 0;
  transition: background-color 80ms ease, color 80ms ease;
  white-space: nowrap;
  min-width: 88px;
  text-align: center;
}

.discovery-panel .disc-add {
  background: var(--ink);
  color: var(--paper, #fff);
  border: 1px solid var(--ink);
}

.discovery-panel .disc-add:hover {
  background: var(--ink-dim, #6b6357);
  border-color: var(--ink-dim, #6b6357);
}

/* .disc-on-graph was removed in the Phase-5 round-2 review cycle: the
   row button is unconditionally "Add to graph" because the candidate filter
   already excludes everything in `visibleSet`. (Future Phase-6 polish
   should keep this file free of unreferenced selectors.) */

/* Phase-9 dark-only: text colors updated in base rules above. */

/* Responsive: stack vertically on narrow screens so the row stays single-line-looking */
@media (max-width: 720px) {
  .discovery-panel .disc-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .discovery-panel .disc-meta {
    flex-basis: 100%;
    order: 3;
  }
  .discovery-panel .disc-btn {
    flex: 1 1 auto;
  }
}