/* ─────────────────────────────────────────────────────────────
   CapraSEO — Marketplace item detail page
   Reuses .mk-* (marketplace.css), .kpi-* + .panel-* (health.css).
   ───────────────────────────────────────────────────────────── */

.stage-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
}
.stage-back:hover { color: var(--text); }

.mi-loading, .mi-empty { color: var(--muted); padding: 28px 4px; }
.mi-empty a { color: var(--accent); }

/* The two JS render containers (#mi-sections / #mi-sections-more, with the
   static AI card between them) must not break the .center flex stacking:
   display:contents puts every card directly in the flex column, so the
   container's uniform gap spaces them all — a per-card margin on top of
   that gap would double the space at the container boundaries. */
#mi-sections, #mi-sections-more { display: contents; }
.mi-card { padding: 18px 20px; }
.mi-card-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 12px; }
.mi-card-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.mi-card-title-row .mi-card-title { margin-bottom: 2px; }
.mi-card-sub { font-size: 12.5px; color: var(--muted); }
.mi-dim { color: var(--muted-2); font-weight: 400; }

/* Header */
.mi-head { display: flex; align-items: center; gap: 14px; }
.mi-domain {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 20px; font-weight: 600; color: var(--text); text-decoration: none;
}
.mi-domain:hover { color: var(--accent); }
.mi-domain .mk-ext { opacity: 0.5; }
.mi-head .mk-health { margin-left: auto; height: 26px; font-size: 12.5px; }

.mi-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.mi-meta .mk-sep { color: var(--muted-2); }
.mi-meta-badges { display: inline-flex; gap: 6px; }

.mi-topics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mi-topic {
  font-size: 11.5px; color: var(--lt40);
  background: rgba(var(--wash-rgb), 0.04); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 10px;
}

/* Insight flags */
.mi-flags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.mi-flag { display: flex; gap: 10px; align-items: flex-start; }
.mi-flag-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: var(--muted-2); }
.mi-sev-caution .mi-flag-dot { background: var(--red-2); }
.mi-sev-warning .mi-flag-dot { background: var(--gold-2); }
.mi-sev-info .mi-flag-dot { background: #6fb1ff; }
.mi-flag-text { display: flex; flex-direction: column; gap: 1px; }
.mi-flag-head { font-size: 13px; color: var(--text); }
.mi-flag-detail { font-size: 12px; color: var(--muted); }

/* ── Live vetting screen (free, refreshed monthly) ─────────── */
.mi-screen { border: 1px solid rgba(99, 102, 241,0.16); }
.mi-screen-meta { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; font-size: 11.5px; }

/* ── Paid report ───────────────────────────────────────────── */
.mi-report { border: 1px solid rgba(99, 102, 241,0.16); }
.mi-report [data-role="last-updated"] { font-size: 11.5px; color: var(--muted-2); display: inline-flex; align-items: center; gap: 6px; }
.mi-report .lu-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Locked state */
.mi-locked { text-align: center; padding: 26px 16px; }
.mi-locked .panel-locked-icon { color: var(--muted); display: flex; justify-content: center; margin-bottom: 10px; }
.mi-locked-title { font-size: 15px; font-weight: 600; color: var(--text); }
.mi-locked-sub { font-size: 12.5px; color: var(--muted); max-width: 440px; margin: 6px auto 14px; line-height: 1.5; }
.mi-locked-bal { font-size: 11.5px; color: var(--muted-2); margin-top: 10px; }
.mi-locked .panel-unlock-btn {
  background: linear-gradient(180deg, rgba(99, 102, 241,0.9), rgba(99, 102, 241,0.78));
  color: var(--mint-bg2); border: 0; border-radius: 9px; padding: 10px 18px;
  font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.mi-locked .panel-unlock-btn:hover { filter: brightness(1.06); }
.mi-locked .panel-unlock-btn[disabled] { opacity: 0.6; cursor: default; }
.mi-locked .panel-get-tokens {
  display: inline-block; background: rgba(230,196,122,0.12); color: var(--gold);
  border-radius: 9px; padding: 10px 18px; font-size: 13.5px; font-weight: 600; text-decoration: none;
}

/* Verdict banner */
.mi-verdict { padding: 11px 14px; border-radius: 9px; font-size: 13.5px; font-weight: 500; margin-bottom: 16px; }
.mi-v-good { background: rgba(99, 102, 241,0.10); color: var(--cyan-3); border: 1px solid rgba(99, 102, 241,0.25); }
.mi-v-warn { background: rgba(234,179,8,0.10); color: var(--gold-2); border: 1px solid rgba(234,179,8,0.25); }
.mi-v-bad  { background: rgba(239,68,68,0.10); color: var(--red-2); border: 1px solid rgba(239,68,68,0.25); }

/* Plain-language "should you buy this link?" summary — sits above the
   vetting tiles; reuses the .mi-v-* verdict tints. */
.mi-buy-summary {
  padding: 12px 14px; border-radius: 9px; margin-bottom: 16px;
  font-size: 13.5px; font-weight: 400; line-height: 1.55;
}

/* Panels + tiles */
.mi-panel { margin-top: 14px; }
.mi-panel-h { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-2); margin-bottom: 9px; }
.mi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.mi-tile { padding: 12px 14px; }
.mi-tile .kpi-label { font-size: 11.5px; color: var(--muted); }
.mi-tile .kpi-value { font-size: 20px; font-weight: 600; color: var(--text); margin-top: 3px; font-variant-numeric: tabular-nums; }
.mi-tile-sub { font-size: 11px; color: var(--muted-2); margin-top: 2px; }

/* Spam score */
.mi-spam { display: flex; align-items: baseline; gap: 7px; }
.mi-spam-word { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.mi-spam-low  { color: var(--cyan-1); }
.mi-spam-mid  { color: var(--gold-2); }
.mi-spam-high { color: var(--red-2); }
.mi-spam-na   { color: var(--muted-2); }
.mi-spambar { height: 4px; border-radius: 4px; background: rgba(var(--wash-rgb), 0.06); margin-top: 8px; overflow: hidden; }
.mi-spambar > span { display: block; height: 100%; border-radius: 4px; }
.mi-spambar > span.mi-spam-low { background: var(--cyan-1); }
.mi-spambar > span.mi-spam-mid { background: var(--gold-2); }
.mi-spambar > span.mi-spam-high { background: var(--red-2); }

/* Trend */
.mi-trend { display: flex; align-items: center; gap: 16px; }
.mi-spark { width: 260px; height: 44px; flex-shrink: 0; }
.mi-trend-up .mi-spark { color: var(--cyan-1); }
.mi-trend-down .mi-spark { color: var(--red-2); }
.mi-trend-delta { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mi-trend-up .mi-trend-delta { color: var(--cyan-1); }
.mi-trend-down .mi-trend-delta { color: var(--red-2); }

/* Callouts */
.mi-callout { margin-top: 10px; padding: 9px 12px; border-radius: 8px; font-size: 12.5px; }
.mi-callout-warn { background: rgba(234,179,8,0.10); color: var(--gold-2); }
.mi-callout-bad { background: rgba(239,68,68,0.10); color: var(--red-2); }

/* Ranking-strength stacked bar */
.mi-rankbar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin-top: 14px; background: rgba(var(--wash-rgb), 0.05); }
.mi-rankbar > span { display: block; height: 100%; }
.mi-rk-1 { background: var(--accent); }      /* #1 */
.mi-rk-2 { background: var(--cyan-1); }      /* #2–3 */
.mi-rk-3 { background: #6fb1ff; }      /* #4–10 */
.mi-rk-4 { background: var(--gold-2); }      /* #11–20 */
.mi-rk-5 { background: rgba(var(--wash-rgb), 0.14); }  /* #21+ */
.mi-rk-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 9px; font-size: 11.5px; color: var(--muted); }
.mi-rk-leg { display: inline-flex; align-items: center; gap: 5px; }
.mi-rk-leg i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.mi-rk-note { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.mi-rk-note strong { color: var(--text); }

/* Momentum */
.mi-mom { margin-top: 12px; font-size: 12.5px; font-weight: 500; }
.mi-mom-up { color: var(--cyan-1); }
.mi-mom-down { color: var(--red-2); }
.mi-mom-flat { color: var(--muted); }

/* Distribution bars (countries / link types) */
.mi-dist-row2 { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 16px; }
.mi-dist-col { flex: 1; min-width: 200px; }
.mi-dist-h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-2); margin-bottom: 8px; }
.mi-dist { display: flex; flex-direction: column; gap: 6px; }
.mi-dist-row { display: grid; grid-template-columns: 92px 1fr 52px; align-items: center; gap: 8px; font-size: 12px; }
.mi-dist-k { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-dist-bar { height: 6px; border-radius: 4px; background: rgba(var(--wash-rgb), 0.05); overflow: hidden; }
.mi-dist-bar > span { display: block; height: 100%; border-radius: 4px; background: #6fb1ff; }
.mi-dist-v { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }

/* "Save" toggle in the "Where to buy" header — adds the domain to the
   user's Saved-links shortlist. Green pill, matching the listing badge. */
.mi-save-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(180deg, rgba(99, 102, 241,0.9), rgba(99, 102, 241,0.78));
  color: var(--mint-bg2); border: 0; border-radius: 9px; padding: 9px 16px;
  font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: filter 140ms ease;
}
.mi-save-btn svg { flex-shrink: 0; }
.mi-save-btn:hover { filter: brightness(1.06); }
.mi-save-btn[data-saved="1"] {
  background: rgba(99, 102, 241,0.16); color: var(--cyan-1);
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241,0.4);
}

/* Save + Hide sit as a pair in the header. */
.mi-btn-pair { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; }

/* "Hide" toggle — muted sibling of Save; doubles as the unhide affordance. */
.mi-hide-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
  background: rgba(var(--wash-rgb), 0.04); color: var(--muted);
  border: 1px solid rgba(var(--wash-rgb), 0.16); border-radius: 9px; padding: 8px 15px;
  font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.mi-hide-btn svg { flex-shrink: 0; }
.mi-hide-btn:hover { color: var(--text); background: rgba(var(--wash-rgb), 0.08); border-color: rgba(var(--wash-rgb), 0.26); }
.mi-hide-btn[data-hidden="1"] {
  color: var(--gold); background: rgba(230,196,122,0.10);
  border-color: rgba(230,196,122,0.4);
}

/* ── Guest post generator ─────────────────────────────────────── */
.gp-card { display: block; padding: 20px 22px; }
.gp-loading { color: var(--muted); font-size: 14px; padding: 6px 0; }
.gp-head { margin-bottom: 14px; }
.gp-title { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--text); }
.gp-title b { color: var(--cyan-1); font-weight: 700; }
.gp-sub { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); max-width: 62ch; }
.gp-msg { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }

/* Locked → buy CTA */
.gp-lock { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.gp-lock-copy { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text); max-width: 62ch; }
.gp-lock-sub { margin: 0; font-size: 12px; color: var(--muted); }

/* Ready → form */
.gp-form { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.gp-field { display: flex; flex-direction: column; gap: 6px; }
.gp-label { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); }
.gp-select, .gp-input {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  font: inherit; font-size: 13.5px; color: var(--text);
  background: rgba(var(--wash-rgb), 0.05);
  border: 1px solid rgba(var(--wash-rgb), 0.16); border-radius: 9px;
}
.gp-select:focus, .gp-input:focus {
  outline: none; border-color: rgba(var(--wash-rgb), 0.3);
  background: rgba(var(--wash-rgb), 0.08);
}
.gp-input::placeholder { color: var(--muted); }
.gp-optimized { margin: 0; font-size: 12.5px; color: var(--muted); }
.gp-optimized b { color: var(--text); font-weight: 600; }
.gp-btn { align-self: flex-start; }
.gp-status { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.gp-status.is-error { color: #e2777a; }

/* Existing guest posts for this media */
.gp-existing { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.gp-existing-h {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin-bottom: 2px;
}
.gp-piece {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: 9px; text-decoration: none;
  background: rgba(var(--wash-rgb), 0.04);
  border: 1px solid rgba(var(--wash-rgb), 0.10);
  transition: background 140ms ease, border-color 140ms ease;
}
.gp-piece:hover { background: rgba(var(--wash-rgb), 0.08); border-color: rgba(var(--wash-rgb), 0.2); }
.gp-piece-title { font-size: 13.5px; color: var(--text); font-weight: 500; }
.gp-piece-status { font-size: 11.5px; font-weight: 600; color: var(--muted); flex-shrink: 0; }
.gp-piece-status.gp-st-ready { color: #59c08a; }
.gp-piece-status.gp-st-failed { color: #e2777a; }