/* Metric Vault — the "use my website" picker (js/mv-sitekw.js).
 *
 * Sits directly under a keyword input, so it has to read as an answer to what
 * was just typed rather than as another section of the page.
 *
 * Tokens only, radius from the scale. --mvr-* are scoped to .mvr result shells,
 * so every use falls back to a canonical token for the many places this panel
 * appears outside one.
 */

.mvsk-panel:empty { display: none; }
.mvsk-panel { margin: 10px 0 0; }

.mvsk-card {
  background: var(--mvr-surface, var(--panel));
  border: 1px solid var(--mvr-line, var(--hairline));
  border-radius: var(--radius);
  padding: 14px 16px;
}

.mvsk-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.mvsk-head > svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--purple);
}
.mvsk-h {
  font-family: 'Inter Tight', Inter, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}
.mvsk-p {
  margin: 3px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.mvsk-x {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--mvr-line, var(--hairline));
  border-radius: var(--radius-sm);
  color: var(--text-3);
  cursor: pointer;
}
.mvsk-x:hover { color: var(--text); border-color: var(--border-strong); }
.mvsk-x svg { width: 13px; height: 13px; }

.mvsk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}
.mvsk-chip {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 6px 13px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.mvsk-chip:hover {
  border-color: var(--purple);
  color: var(--purple);
}

.mvsk-foot {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--mvr-line, var(--hairline));
  font-size: 11.5px;
  color: var(--muted);
}

.mvsk-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-2);
}
.mvsk-empty {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.mvsk-empty > svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--gold);
}

/* Defeat the legacy result reset: containers carry .mvx and
   css/legacy-mvx.css sets `.mvx * { margin:0; padding:0 }`, which ties on
   specificity with the single-class rules above and loads later. Same fix and
   same reason as css/rec-panel.css and css/placement.css. */
.mvx .mvsk-panel { margin: 10px 0 0; }
.mvx .mvsk-card { padding: 14px 16px; }
.mvx .mvsk-p { margin: 3px 0 0; }
.mvx .mvsk-chips { margin-top: 12px; }
.mvx .mvsk-chip { padding: 6px 13px; }
.mvx .mvsk-foot { margin-top: 11px; padding-top: 10px; }
.mvx .mvsk-x { padding: 0; }