/* Metric Vault — keyword placement recommendations (js/mv-placement.js).
 * ---------------------------------------------------------------------------
 * Two surfaces: .mvpl-card is the fuller block under a single-keyword result,
 * and .mvpl-plan* is the "where these keywords go" card in Keyword Vault.
 * There was a third, .mvpl-chip, inside a column added to every keyword table;
 * it went with that column.
 *
 * No per-type accent colours on purpose. The design constitution gives colour
 * to state, not to categories, so create-vs-optimise is carried by the shared
 * .mvr-tier badge and every page type reads in the same neutral ink.
 *
 * Tokens only, radius from the scale, no forked colour definitions.
 */

/* ------------------------------------------------------------ table chip */

/* .mvpl-chip and .mvpl-chip-top styled the compact chip that rode inside the
   keyword-table column. That column is gone, and so are they. */
.mvpl-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-3);
}
.mvpl-lbl {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.mvpl-url {
  font-family: var(--cc-mono, ui-monospace, monospace);
  font-size: 11.5px;
  color: var(--text-2);
  background: var(--mvr-surface, var(--panel));
  border: 1px solid var(--mvr-line, var(--hairline));
  border-radius: var(--radius-xs);
  padding: 2px 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  /* inline-block + a bounded max-width so the path has a finite intrinsic
     width. Without it, table auto-layout sizes the column to the longest
     untruncated path and takes that width off the existing columns, which
     wrapped CPC to "$1.0 / 8" and broke "MEDIUM" mid-word. */
  display: inline-block;
  max-width: 200px;
  vertical-align: middle;
}

/* The column is optional context, not the point of the table: on a narrow
   screen the type and the badge are enough and the path is dropped rather
   than allowed to squeeze the metrics. */
@media (max-width: 900px) {
  .mvpl-url { display: none; }
}

/* --------------------------------------------------------------- card */

.mvpl-card {
  background: var(--mvr-surface, var(--panel));
  border: 1px solid var(--mvr-line, var(--hairline));
  border-radius: var(--radius);
  padding: 14px 16px;
}
.mvpl-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.mvpl-ic-lg {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--mvr-surface, var(--panel));
  border: 1px solid var(--mvr-line, var(--hairline));
  color: var(--purple);
}
.mvpl-main { min-width: 0; }
.mvpl-type {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: 'Inter Tight', Inter, sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
}
.mvpl-dest {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}
.mvpl-urlrow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 11px;
}
.mvpl-url-lg {
  font-size: 13px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  white-space: normal;
  overflow-wrap: anywhere;
}
.mvpl-open {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--purple);
  text-decoration: none;
}
.mvpl-open:hover { text-decoration: underline; }
.mvpl-found {
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--text-2);
}
/* The reason THIS page won, above the reason for the page type. Slightly
   stronger, because it is the sentence the customer is reading for. */
.mvpl-why-match { color: var(--text); font-weight: 500; }
.mvpl-why {
  margin: 11px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}
.mvpl-use {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--mvr-line, var(--hairline));
}
.mvpl-use-h {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.mvpl-slot {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--mvr-surface, var(--panel));
  border: 1px solid var(--mvr-line, var(--hairline));
  border-radius: var(--radius-pill);
  padding: 3px 9px;
}
.mvpl-caution {
  margin: 11px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--gold);
}

/* ---------------------------------------------------------- site plan */

/* Two classes on purpose: .card sets its own display, and a single-class rule
   in this file would not reliably outrank it. */
.card.mvpl-hidden,
.mvpl-hidden { display: none; }
.mvpl-plan-card { margin-top: 16px; }
.mvpl-plan-hd { margin: 2px 0 12px; }

.mvpl-plan {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mvpl-plan-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 0;
}
.mvpl-plan-row + .mvpl-plan-row { border-top: 1px solid var(--mvr-line, var(--hairline)); }
.mvpl-plan-main { min-width: 0; flex: 1; }
.mvpl-plan-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mvpl-plan-vol {
  margin-left: auto;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.mvpl-plan-url {
  display: inline-block;
  margin-top: 6px;
  white-space: normal;
  overflow-wrap: anywhere;
  /* The 200px cap exists to stop the table column stealing width from the
     metric columns. There is no such contention in the plan list, and
     inheriting it wrapped short paths across two lines for no reason. */
  max-width: none;
}
.mvpl-plan-kws {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.mvpl-plan-more {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-3);
}
.mvpl-plan-rest {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

/* ------------------------------------------------------------------
   Defeat the legacy result reset. Result containers carry .mvx, and
   css/legacy-mvx.css opens with `.mvx * { margin:0; padding:0 }`. That
   selector has the same specificity as these single-class rules, and it
   loads later, so every scrap of padding was stripped: the card lost its
   inset, the rows ran together with no breathing room, and the path pill
   collapsed to bare text.

   Same fix as css/rec-panel.css — re-assert the SAME values one specificity
   step higher, so the component is correct wherever it is mounted and
   whatever the stylesheet load order. Verified against the live Keyword
   Magic summary, which is inside .mvx.
   ------------------------------------------------------------------ */
.mvx .mvpl-card { padding: 14px 16px; }
.mvx .mvpl-plan { margin: 0; padding: 0; }
.mvx .mvpl-plan-row { padding: 12px 0; }
.mvx .mvpl-plan-url { margin-top: 6px; }
.mvx .mvpl-plan-kws { margin-top: 8px; }
.mvx .mvpl-plan-rest { margin: 10px 0 0; }
.mvx .mvpl-plan-more { margin: 0; }
.mvx .mvpl-url { padding: 2px 7px; }
.mvx .mvpl-url-lg { padding: 6px 10px; }
.mvx .mvpl-slot { padding: 3px 9px; }
.mvx .mvpl-dest { margin-top: 2px; }
.mvx .mvpl-urlrow { margin-top: 11px; }
.mvx .mvpl-found { margin-top: 7px; }
.mvx .mvpl-why { margin: 11px 0 0; }
.mvx .mvpl-use { margin-top: 12px; padding-top: 12px; }
.mvx .mvpl-caution { margin: 11px 0 0; }

/* ----------------------------------------------------------- table head */

/* Same as above: the words are data, not prose. */
.mvpl-words {
  margin: 6px 0 0;
  font-family: var(--cc-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--text-3);
}