/* matchgraph.css — the "Find Match" pair-graph overlay (matchgraph.js).
 *
 * A modal panel over the Songs page: a legend of the six compatibility
 * dimensions, then a scrollable stage where crate tracks sit in two columns
 * (left / right) with an SVG edge layer beneath the HTML node cards. Uses the
 * shared --jamn-* tokens (jam.css) so it themes with the rest of the app; the
 * six dimension hues are scoped to the overlay so they never leak globally. */

.fmg-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, #000 62%, transparent);
  /* Line COLOUR per compatibility dimension (edge stroke + legend swatch). */
  --fmg-dim-tempo: #F97316;
  --fmg-dim-harmony: #8B5CF6;
  --fmg-dim-melody: #22C55E;
  --fmg-dim-energy: #EF4444;
  --fmg-dim-instr: #3B82F6;
  --fmg-dim-vocal: #EC4899;
}
.fmg-overlay.is-open { display: flex; }
body.fmg-locked { overflow: hidden; }

.fmg-panel {
  display: flex;
  flex-direction: column;
  width: min(1100px, 100%);
  height: min(86vh, 900px);
  background: var(--jamn-surface1, #14141A);
  border: 1px solid var(--jamn-border, #2A2A36);
  border-radius: var(--jamn-radius-lg, 16px);
  color: var(--jamn-text, #fff);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
}

/* ---- header ---- */
.fmg-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--jamn-border, #2A2A36);
  flex: 0 0 auto;
}
.fmg-titles { flex: 1 1 auto; min-width: 0; }
.fmg-title { font-size: 1.35rem; font-weight: 800; margin: 0; }
.fmg-sub { font-size: .85rem; color: var(--jamn-text2, #A1A1AA); margin-top: 3px; }
.fmg-controls { display: flex; align-items: flex-end; gap: 18px; flex: 0 0 auto; flex-wrap: wrap; }
.fmg-control { display: flex; flex-direction: column; gap: 5px; }
.fmg-control-label {
  font-size: .66rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--jamn-text2, #A1A1AA);
}
.fmg-slider { width: 150px; accent-color: var(--jamn-accent, #8B5CF6); }
.fmg-slider-val { font-variant-numeric: tabular-nums; font-size: .78rem; color: var(--jamn-text2, #A1A1AA); }
.fmg-control:has(.fmg-slider) { flex-direction: row; align-items: center; gap: 8px; }
.fmg-control:has(.fmg-slider) .fmg-control-label { align-self: center; }
.fmg-select {
  background: var(--jamn-surface2, #1C1C24);
  color: var(--jamn-text, #fff);
  border: 1px solid var(--jamn-border, #2A2A36);
  border-radius: var(--jamn-radius-sm, 8px);
  padding: 5px 8px; font: inherit; font-size: .82rem;
}
/* Genre multi-select: button + checklist popover under it. */
.fmg-control-genre { position: relative; }
.fmg-genre-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  min-width: 128px; max-width: 200px; justify-content: space-between; text-align: left;
}
.fmg-genre-btn-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fmg-genre-caret { color: var(--jamn-text2, #A1A1AA); font-size: .7rem; }
.fmg-genre-btn.is-active { border-color: var(--jamn-accent, #8B5CF6); color: var(--jamn-text, #fff); }
.fmg-genre-btn:focus-visible { outline: 2px solid var(--jamn-accent, #8B5CF6); outline-offset: 1px; }
.fmg-genre-pop {
  /* Right-anchored: Genre is the last header control, and the panel clips
     overflow, so a left-anchored popover ran off the panel edge. */
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  width: 230px;
  background: var(--jamn-surface2, #1C1C24);
  border: 1px solid var(--jamn-border, #2A2A36);
  border-radius: var(--jamn-radius-md, 12px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  padding: 8px 0 6px;
}
.fmg-genre-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px 6px; border-bottom: 1px solid var(--jamn-border, #2A2A36);
}
.fmg-genre-title {
  font-size: .66rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--jamn-text2, #A1A1AA);
}
.fmg-genre-clear {
  background: transparent; border: 0; cursor: pointer; font: inherit; font-size: .78rem;
  color: var(--jamn-accent, #8B5CF6); padding: 2px 4px; border-radius: 5px;
}
.fmg-genre-clear:disabled { color: var(--jamn-text3, #52525B); cursor: default; }
.fmg-genre-list { max-height: 300px; overflow-y: auto; padding-top: 4px; }
.fmg-genre-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px; cursor: pointer; font-size: .84rem;
}
.fmg-genre-row:hover { background: rgba(255, 255, 255, .05); }
.fmg-genre-row input { accent-color: var(--jamn-accent, #8B5CF6); margin: 0; }
.fmg-genre-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fmg-genre-count { font-variant-numeric: tabular-nums; font-size: .74rem; color: var(--jamn-text2, #A1A1AA); }
.fmg-genre-empty { padding: 8px 12px; font-size: .8rem; color: var(--jamn-text2, #A1A1AA); }

.fmg-close {
  flex: 0 0 auto;
  background: transparent; border: 0; cursor: pointer;
  color: var(--jamn-text2, #A1A1AA); font-size: 1.1rem; line-height: 1;
  padding: 6px 8px; border-radius: 7px;
}
.fmg-close:hover { color: var(--jamn-text, #fff); background: rgba(255, 255, 255, .06); }

/* ---- legend ---- */
.fmg-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--jamn-border, #2A2A36);
  flex: 0 0 auto;
  font-size: .78rem; color: var(--jamn-text2, #A1A1AA);
}
/* "Match on": each legend item is a RADIO (role=radio) — exactly one chip
 * (Overall or a dimension) is active; picking one ranks the graph by it. */
.fmg-legend-title {
  font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--jamn-text2, #A1A1AA); margin-right: 2px;
}
.fmg-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; user-select: none;
  padding: 2px 5px; border-radius: 6px;
  transition: opacity .12s ease, background-color .12s ease;
}
.fmg-legend-item:hover { background: rgba(255, 255, 255, .06); }
.fmg-legend-item:focus-visible {
  outline: 2px solid var(--jamn-accent, #8B5CF6); outline-offset: 1px;
}
.fmg-legend-swatch { width: 18px; height: 3px; border-radius: 2px; display: inline-block; }
/* Overall's swatch = all six hues, so it reads as "every dimension". */
.fmg-legend-swatch--all {
  background: linear-gradient(90deg, var(--fmg-dim-tempo), var(--fmg-dim-harmony),
    var(--fmg-dim-melody), var(--fmg-dim-energy), var(--fmg-dim-instr), var(--fmg-dim-vocal));
}
/* Grouped legend (v2): Compatible · Similar · More · Creative combos. A group
 * is a labelled run of chips; the group's first chip ("All") ranks by the
 * group aggregate. Compatible leads — it is the stronger join. */
.fmg-legend-group {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
  padding-left: 10px; border-left: 1px solid var(--jamn-border, #2A2A36);
}
.fmg-legend-group-label {
  font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--jamn-text2, #A1A1AA); opacity: .8; margin-right: 2px;
}
.fmg-legend-group--compatibility .fmg-legend-group-label { color: var(--jamn-accent, #8B5CF6); opacity: 1; }
.fmg-legend-item--agg .fmg-legend-label { font-style: italic; }
/* The active choice reads by an outline + bold label, not colour alone (a11y). */
.fmg-legend-item.is-active {
  color: var(--jamn-text, #fff); font-weight: 600;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px var(--jamn-accent, #8B5CF6);
}

/* ---- stage: SVG edges under HTML node cards ---- */
.fmg-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.fmg-edges {
  position: absolute; top: 0; left: 0;
  width: 100%;
  pointer-events: none;   /* clicks fall through to the stage / cards */
  overflow: visible;
}
.fmg-nodes {
  position: relative;
  width: 100%;
  pointer-events: none;   /* only the cards themselves are interactive */
}

/* Edge stroke: width + opacity come from per-path custom props (--w/--o) set
 * in JS from the pair score; colour from the dimension class. */
.fmg-edge {
  fill: none;
  stroke-width: var(--w, 1.5);
  opacity: var(--o, .5);
  stroke-linecap: round;
  transition: opacity .12s ease;
}
.fmg-edge--tempo { stroke: var(--fmg-dim-tempo); }
.fmg-edge--harmony { stroke: var(--fmg-dim-harmony); }
.fmg-edge--melody { stroke: var(--fmg-dim-melody); }
.fmg-edge--energy { stroke: var(--fmg-dim-energy); }
.fmg-edge--instr { stroke: var(--fmg-dim-instr); }
.fmg-edge--vocal { stroke: var(--fmg-dim-vocal); }
/* Unknown (new backend) dimensions: stroke set inline from the stable palette. */

/* Per-dimension score bars (hover card + action bar): label · bar · number. */
.fmg-scores { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fmg-score {
  display: grid; grid-template-columns: minmax(64px, auto) 1fr 22px;
  align-items: center; gap: 7px;
  font-size: .68rem; color: var(--jamn-text2, #A1A1AA);
}
.fmg-score.is-active { color: var(--jamn-text, #fff); font-weight: 700; }
.fmg-score-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fmg-score-track {
  height: 4px; border-radius: 2px; overflow: hidden; min-width: 40px;
  background: color-mix(in srgb, var(--jamn-text2, #A1A1AA) 18%, transparent);
}
.fmg-score-fill { display: block; height: 100%; border-radius: 2px; }
.fmg-score-val { text-align: right; font-variant-numeric: tabular-nums; }
.fmg-hc-matchhead {
  font-size: .56rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--jamn-text2, #A1A1AA);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fmg-actionbar-scores { flex: 0 1 240px; min-width: 150px; }

/* When a node is active (hovered / selected), fade everything but its edges. */
.fmg-stage.has-active .fmg-edge:not(.is-hot) { opacity: .05 !important; }
.fmg-stage.has-active .fmg-edge.is-hot { opacity: 1 !important; stroke-width: calc(var(--w, 1.5) + 0.75); }

/* ---- node cards ---- */
.fmg-node {
  position: absolute;
  width: 210px;               /* keep in sync with matchgraph.js CARD_W */
  transform: translateY(-50%);
  pointer-events: auto;
  display: flex; flex-direction: column; gap: 2px;
  text-align: left; cursor: pointer;
  background: var(--jamn-surface2, #1C1C24);
  border: 1px solid var(--jamn-border, #2A2A36);
  border-radius: var(--jamn-radius-md, 12px);
  padding: 9px 11px;
  color: var(--jamn-text, #fff);
  font: inherit;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
  /* `top` glides a card to its search-ranked slot (matchgraph.js reorderCards);
   * the edge layer follows it frame by frame (glideEdges). */
  transition: opacity .12s ease, border-color .12s ease, transform .06s ease,
    top .3s cubic-bezier(.2, .8, .2, 1);
}
/* Resize re-spacing snaps — a glide would trail every frame of a window drag. */
.fmg-nodes.is-snap .fmg-node {
  transition: opacity .12s ease, border-color .12s ease, transform .06s ease;
}
@media (prefers-reduced-motion: reduce) {
  .fmg-node { transition: opacity .12s ease, border-color .12s ease; }
}
.fmg-node--left { left: 24px; }
.fmg-node--right { right: 24px; }
.fmg-node:hover { border-color: var(--jamn-accent, #8B5CF6); }
.fmg-node-title {
  font-weight: 600; font-size: .9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fmg-node-meta {
  font-size: .74rem; color: var(--jamn-text2, #A1A1AA);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Seed view: the neighbour's score to the seed under the active rank, pinned
 * top-right (absolute, so the card height never changes). */
.fmg-node.has-score .fmg-node-title { padding-right: 70px; }
.fmg-node-score {
  position: absolute; top: 8px; right: 9px;
  font-size: .62rem; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 1px 6px; border-radius: 999px; white-space: nowrap;
  color: var(--fmg-score-color, var(--jamn-accent, #8B5CF6));
  background: color-mix(in srgb, var(--fmg-score-color, var(--jamn-accent, #8B5CF6)) 18%, transparent);
}
.fmg-node-score--overall {
  color: var(--jamn-text2, #A1A1AA);
  background: color-mix(in srgb, var(--jamn-text2, #A1A1AA) 16%, transparent);
}
/* Gated candidate badge ("weak · 41%" / "tempo"): neutral, never a dimension
 * colour — it is not a match, just how close the refused pair came. */
.fmg-node-score--weak {
  color: var(--jamn-text2, #A1A1AA);
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--jamn-text2, #A1A1AA) 45%, transparent);
  font-weight: 600;
}
.fmg-node.is-seed { border-color: color-mix(in srgb, var(--jamn-accent, #8B5CF6) 70%, transparent); }

/* The mandatory CC credit — never clipped away entirely (title attr has full). */
.fmg-node-attrib {
  font-size: .7rem; color: var(--jamn-text2, #A1A1AA);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* BY-SA "share-alike" badge — amber, not danger red: the track is fully
 * usable (ALLOW + LABEL); it only tells you outputs get stamped CC BY-SA. */
.fmg-node-badge {
  align-self: flex-start; margin-top: 3px;
  font-size: .6rem; font-weight: 700; letter-spacing: .03em;
  padding: 1px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--jamn-warn, #F59E0B) 20%, transparent);
  color: var(--jamn-warn, #F59E0B);
}

/* Source badge — which pool a card's track came from. Crate = the shared CC
 * catalog (neutral); "My song" = the user's own library (accent-tinted so it
 * stands apart at a glance). Same pill geometry as the share-alike badge so
 * the card layout reads identically for both sources. */
.fmg-node-src {
  align-self: flex-start; margin-top: 3px;
  font-size: .6rem; font-weight: 700; letter-spacing: .03em;
  padding: 1px 6px; border-radius: 999px;
}
.fmg-node-src--crate {
  background: color-mix(in srgb, var(--jamn-text2, #A1A1AA) 20%, transparent);
  color: var(--jamn-text2, #A1A1AA);
}
.fmg-node-src--library {
  background: color-mix(in srgb, var(--jamn-accent, #8B5CF6) 22%, transparent);
  color: var(--jamn-accent, #8B5CF6);
}

/* Hover TOOLTIP — the hovered card's genre / mood / key / BPM / length /
 * license + tags, floated beside the card over the line space after a 1 s
 * rest. Absolutely positioned inside the stage (never affects a card's or the
 * panel's height); one element, repositioned. Reads as the graph's own chrome:
 * card radius, elevated surface, accent-tinted stroke, caret toward the card. */
.fmg-hovercard {
  position: absolute;
  /* Vertical centring on the card + the top/bottom-edge clamp both live in
   * JS now (showHovercard / clampPopoverRect) — a plain translateY(-50%)
   * here had no floor, so a top-row card's tooltip ran above the stage's
   * own scroll boundary and got clipped, right under the legend bar. Only
   * the entrance slide stays a transform. */
  transform: translateX(0);
  display: flex; flex-direction: column; gap: 9px;
  width: max-content; max-width: 250px;
  padding: 10px 12px;
  border-radius: var(--jamn-radius-md, 12px);
  background: var(--jamn-surface2, #1C1C24);
  border: 1px solid color-mix(in srgb, var(--jamn-accent, #8B5CF6) 45%, var(--jamn-border, #2A2A36));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .04) inset;
  color: var(--jamn-text, #fff);
  pointer-events: none; z-index: 3;
  opacity: 0; visibility: hidden;
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.fmg-hovercard--left  { transform: translateX(-4px); }
.fmg-hovercard--right { transform: translateX(4px); }
.fmg-hovercard.is-shown {
  opacity: 1; visibility: visible;
  transform: translateX(0);
  transition: opacity .16s ease, transform .16s ease, visibility 0s;
}
/* Caret toward the card: on the tooltip's left edge when it sits right of a
 * left-column card, on its right edge for a right-column card. */
.fmg-hovercard::after {
  content: ''; position: absolute; top: 50%; width: 9px; height: 9px;
  background: var(--jamn-surface2, #1C1C24);
  border: 1px solid color-mix(in srgb, var(--jamn-accent, #8B5CF6) 45%, var(--jamn-border, #2A2A36));
  border-right: 0; border-top: 0;
}
.fmg-hovercard--left::after  { left: -5.5px; transform: translateY(-50%) rotate(45deg); }
.fmg-hovercard--right::after { right: -5.5px; transform: translateY(-50%) rotate(225deg); }

.fmg-hc-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.fmg-hc-genre {
  font-size: .6rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  color: var(--jamn-accent, #8B5CF6);
  background: color-mix(in srgb, var(--jamn-accent, #8B5CF6) 18%, transparent);
}
.fmg-hc-mood { font-size: .74rem; color: var(--jamn-text2, #A1A1AA); white-space: nowrap; }
.fmg-hc-stats { display: flex; gap: 16px; }
.fmg-hc-stat { display: flex; flex-direction: column; gap: 1px; }
.fmg-hc-label {
  font-size: .56rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--jamn-text2, #A1A1AA);
}
.fmg-hc-value { font-size: .84rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fmg-hc-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.fmg-hc-tag {
  font-size: .64rem; padding: 2px 6px; border-radius: 5px;
  color: var(--jamn-text2, #A1A1AA);
  background: var(--jamn-surface1, #14141A);
  border: 1px solid var(--jamn-border, #2A2A36);
}
.fmg-hc-lic { display: flex; align-items: center; gap: 6px; font-size: .64rem; color: var(--jamn-text2, #A1A1AA); }
.fmg-hc-lock { font-size: .58rem; font-weight: 700; letter-spacing: .03em; color: var(--jamn-warn, #F59E0B); }

/* A track with no partner at the current threshold recedes. */
.fmg-node.is-lonely { opacity: .4; }
/* Gated candidate (seeded view): refused by the tempo/meter gates or the
 * borrow conform veto, listed only so it stays borrowable — dimmed like a
 * non-partner at rest. Selecting it still lifts it to full (is-selected). */
.fmg-node.is-gated { opacity: .35; }
/* Active spotlight: selected card pops, its partners stay lit, the rest dim. */
.fmg-stage.has-active .fmg-node:not(.is-selected):not(.is-partner) { opacity: .28; }
.fmg-node.is-selected {
  border-color: var(--jamn-accent, #8B5CF6);
  box-shadow: 0 0 0 2px var(--jamn-accent, #8B5CF6), 0 4px 14px rgba(0, 0, 0, .4);
  opacity: 1 !important;
}
.fmg-node.is-partner { border-color: color-mix(in srgb, var(--jamn-accent, #8B5CF6) 60%, transparent); opacity: 1 !important; }

/* ---- state overlay (loading / empty / error) ---- */
.fmg-state { display: none; }
.fmg-state.is-shown {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; position: absolute; inset: 0; pointer-events: none;
  color: var(--jamn-text2, #A1A1AA); text-align: center; padding: 24px;
}
.fmg-state-title { font-size: 1.1rem; font-weight: 700; color: var(--jamn-text, #fff); }
.fmg-state-sub, .fmg-state-msg { font-size: .9rem; }

/* ---- header search (spotlights matching nodes) ---- */
.fmg-search-input {
  width: 168px;
  background: var(--jamn-surface2, #1C1C24);
  color: var(--jamn-text, #fff);
  border: 1px solid var(--jamn-border, #2A2A36);
  border-radius: var(--jamn-radius-sm, 8px);
  padding: 5px 9px; font: inherit; font-size: .82rem;
}
.fmg-search-input::placeholder { color: var(--jamn-text2, #A1A1AA); }
.fmg-search-input:focus { outline: none; border-color: var(--jamn-accent, #8B5CF6); }

/* ---- selection action bar (Load / Borrow onto the pads) ---- */
.fmg-actionbar { display: none; }
.fmg-actionbar.is-shown {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 20px;
  border-top: 1px solid var(--jamn-border, #2A2A36);
  /* A faint accent wash so the bar reads as the spotlight's own strip. */
  background: color-mix(in srgb, var(--jamn-accent, #8B5CF6) 10%, transparent);
}
.fmg-actionbar-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fmg-actionbar-title {
  font-weight: 700; font-size: .95rem; color: var(--jamn-text, #fff);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fmg-actionbar-meta, .fmg-actionbar-attrib {
  font-size: .74rem; color: var(--jamn-text2, #A1A1AA);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fmg-actionbar-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.fmg-btn {
  background: var(--jamn-surface2, #1C1C24); color: var(--jamn-text, #fff);
  border: 1px solid var(--jamn-border, #2A2A36);
  border-radius: var(--jamn-radius-sm, 8px);
  cursor: pointer; font: inherit; font-size: .85rem; font-weight: 600;
  padding: 7px 16px;
}
.fmg-btn:hover { border-color: var(--jamn-accent, #8B5CF6); }
.fmg-btn--primary { background: var(--jamn-accent, #8B5CF6); border-color: transparent; color: #fff; }
.fmg-btn--ghost { background: transparent; }
.fmg-btn:disabled { opacity: .45; cursor: default; }
.fmg-btn:disabled:hover { border-color: var(--jamn-border, #2A2A36); }

/* ---- footer ---- */
.fmg-footer {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 20px;
  border-top: 1px solid var(--jamn-border, #2A2A36);
  font-size: .8rem; color: var(--jamn-text2, #A1A1AA);
}
.fmg-footer-sum { font-variant-numeric: tabular-nums; color: var(--jamn-text, #fff); font-weight: 600; }
.fmg-footer-hint { min-width: 0; }

/* ---- the "Find Match" launch button on the Songs page Crate tab ---- */
.songs-findmatch {
  display: none;                 /* shown only on the Crate tab (songs.js) */
  align-items: center; gap: 6px;
  background: var(--jamn-accent, #8B5CF6); color: #fff;
  border: 1px solid transparent; border-radius: var(--jamn-radius-sm, 8px);
  cursor: pointer; font: inherit; font-size: .85rem; font-weight: 600;
  padding: 6px 12px;
}
.songs-findmatch.is-shown { display: inline-flex; }
.songs-findmatch:hover { filter: brightness(1.08); }

/* Per-row "Show matches" (🔗) — opens Find Match seeded on that crate track.
 * Reuses the compact .songs-btn--icon geometry; the accent-tinted hover ties it
 * to the Find Match feature (same 🔗 as the launch button) without shouting over
 * the primary Load action on a busy row. */
.songs-btn--matches { line-height: 1; }
.songs-btn--matches:not(:disabled):hover {
  border-color: var(--jamn-accent, #8B5CF6);
  background: color-mix(in srgb, var(--jamn-accent, #8B5CF6) 14%, transparent);
}

@media (max-width: 760px) {
  .fmg-panel { height: 92vh; }
  .fmg-node { width: 168px; }
  .fmg-head { flex-wrap: wrap; }
  .fmg-search-input { width: 140px; }
  /* Stack the action bar so Load/Borrow don't crowd the title on a phone. */
  .fmg-actionbar.is-shown { flex-direction: column; align-items: stretch; gap: 10px; }
  .fmg-actionbar-actions { justify-content: flex-end; }
}