/* ============================================================================
 * Listing detail — v4, MCP server variant (#6450)
 * Ported from Sigrix_new/marketplace/Marketplace - Listing MCP v4.html at
 * 849eebd (its "MCP server listing — v4 shell + clean pattern set" block).
 *
 * Loads after css/sx-listing-v4.css (the shell) and holds what only the MCP
 * page renders: its mint accent, the hero's *What it runs* card, the trust
 * row, the buy box's MCP states, the Install code cards, the Tools list and
 * the Example pair. Two things the design draws here are left to what the
 * site already has, and docs/design_sync_log.md says why: the badge popover
 * (`.mc-pop` — the shared chip explains itself through seller_badge_tips.js)
 * and the category notice (`.mc-notice` — `.listing-category-notice` is
 * styled once in base.css).
 *
 * Translated, not copied: the prototype is authored at data-theme="dark" on
 * its own `.sx` div and reads bare tokens (`--line`, `--surface`,
 * `--text-soft`…). Here `data-theme` is on the root, light is the default,
 * and the tokens are the site's — `--sx-line`, `--sx-surface`, `--sx-text-2`,
 * the shell's `--ig-ok-text` / `--ig-warn-text` inks — the same mapping the
 * shell's own port used.
 * ==========================================================================*/

/* ── the mint accent ─────────────────────────────────────────────────────
   The design moved this page from indigo to mint, matching Browse. This is
   the page's own accent only: the type's site-wide colour (the card chip, the
   dots, `--sx-lt-mcp_server`) stays #4F46E5 until #6086 has weighed the mint
   against `--sx-ok`, which it sits ΔE 4.07 from in dark.

   The prototype's dark value, #6FE3B0, is a fill and an ink at once there;
   light splits it, as every v4 accent does: #1F9D6B is the fill and #0F6B45
   the ink. The ink measures 5.76:1 at its lowest (on the Delivered-by-Sigrix
   chip's own tint) and 6.54:1 on the card; the fill painted as words would read
   3.04:1. Dark's #6FE3B0 is 9.15:1 at its lowest. Measured by
   tests/test_mcp_page_mint_contrast.py over every coloured word the page
   serves. Written at (0,2,1) so it wins over the shell's token block on
   specificity rather than on load order. */
body.listing-v4-page.mcp-listing-page {
  --mc-accent: #1f9d6b;
  --mc-accent-text: #0f6b45;
  --mc-accent-soft: rgba(31, 157, 107, 0.08);
  --mc-accent-line: rgba(31, 157, 107, 0.28);
  /* The shell paints `--ig-accent` as text (the kind chip, the quality
     glyphs), so it takes the ink, never the fill. */
  --ig-accent: var(--mc-accent-text);
  --ig-hero-glow-a: color-mix(in srgb, var(--mc-accent) 13%, transparent);
  --ig-hero-glow-b: color-mix(in srgb, var(--sx-accent, #14b8a6) 8%, transparent);
}

[data-theme="dark"] body.listing-v4-page.mcp-listing-page {
  --mc-accent: #6fe3b0;
  --mc-accent-text: #6fe3b0;
  --mc-accent-soft: rgba(111, 227, 176, 0.1);
  --mc-accent-line: rgba(111, 227, 176, 0.3);
}

/* ── hero: kind and delivery chips ───────────────────────────────────── */
.ig-kind--mcp svg {
  flex: none;
}
.mc-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line-2) inset;
  color: var(--sx-text-2);
  font-family: var(--ig-mono);
  font-size: 11.5px;
}
.mc-mode--sigrix {
  background: var(--mc-accent-soft);
  box-shadow: 0 0 0 1px var(--mc-accent-line) inset;
  color: var(--mc-accent-text);
}
/* On a narrow screen the identity column reads first and What it runs
   follows it, as the design orders them below 1080px. */
@media (max-width: 1080px) {
  .mc-hero-id {
    order: -1;
  }
}

/* ── the trust row ────────────────────────────────────────────────────── */
.mc-trust {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}
.mc-by {
  display: flex;
  align-items: center;
  gap: 8px 10px;
  flex-wrap: wrap;
}
.mc-by-av {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sx-brand-3, #3d4dff) 0%, var(--sx-brand-2, #1a1f6b) 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex: none;
}
.mc-by-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mc-by-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--sx-text);
  text-decoration: none;
}
a.mc-by-name:hover {
  color: var(--ig-brand);
}
.mc-by-h {
  font-family: var(--ig-mono);
  font-size: 12px;
  color: var(--sx-text-2);
}
.mc-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* A check reads green; a role reads amber; Founding is tenure, which Sigrix
   never checked, so it takes the neutral chip (the badge's `kind`). */
.mc-badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-family: var(--ig-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: var(--sx-text-2);
  background: var(--sx-surface-2);
  box-shadow: 0 0 0 1px var(--sx-line-2) inset;
}
.mc-badge-chip--trust {
  color: var(--ig-ok-text);
  background: color-mix(in srgb, var(--ig-ok-text) 12%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ig-ok-text) 38%, transparent) inset;
}
.mc-badge-chip--tenure {
  color: var(--sx-text-2);
}
.mc-badge-chip--role {
  color: var(--ig-warn-text);
  background: color-mix(in srgb, var(--ig-warn-text) 12%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ig-warn-text) 40%, transparent) inset;
}
.mc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 6px;
  font-size: 13px;
  color: var(--sx-text-2);
}
.mc-meta > * {
  display: inline-block;
}
.mc-meta > * + *::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--sx-text-3);
  margin: 0 11px;
  vertical-align: middle;
}
.mc-meta a {
  color: inherit;
  text-decoration: none;
}
.mc-meta a:hover {
  color: var(--sx-text);
}
.mc-meta svg {
  vertical-align: -1px;
  margin-right: 5px;
  color: var(--ig-warn);
}
.mc-meta b {
  color: var(--sx-text);
  font-weight: 600;
}
.mc-plats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mc-plat {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  font-size: 12.5px;
  color: var(--sx-text-2);
  text-decoration: none;
}
.mc-plat:hover {
  color: var(--sx-text);
  box-shadow: 0 0 0 1px var(--sx-line-2) inset;
}

/* ── Get this MCP server ─────────────────────────────────────────────── */
.mc-get .listing-category-notice {
  margin: 0 0 14px;
}
.mc-test {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px;
  margin: 0 0 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
}
.mc-test[data-testing-verdict='pass'] {
  color: var(--ig-ok-text);
  background: color-mix(in srgb, var(--ig-ok) 12%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ig-ok) 30%, transparent) inset;
}
.mc-test[data-testing-verdict='warn'] {
  color: var(--ig-warn-text);
  background: color-mix(in srgb, var(--ig-warn) 12%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ig-warn) 30%, transparent) inset;
}
.mc-buy {
  min-height: 82px;
}
.mc-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex: none;
}
.mc-price-type {
  font-family: var(--ig-mono);
  font-size: 11.5px;
  color: var(--sx-text-2);
}
.mc-owned {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--ig-ok-text);
}
.mc-buy--gone {
  gap: 14px;
}
.mc-gone-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sx-surface-2);
  color: var(--sx-text-2);
  flex: none;
}
.mc-gone {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--sx-text);
}
.mc-line {
  margin: 12px 2px 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--sx-text-2);
  text-wrap: pretty;
}
.mc-line code,
.mc-points code {
  font-family: var(--ig-mono);
  font-size: 12px;
  color: var(--sx-text-2);
}
.mc-jump {
  display: inline-flex;
  margin: 12px 2px 0;
}

/* ── What it runs ─────────────────────────────────────────────────────── */
.mc-run {
  border-radius: var(--sx-r-xl, 20px);
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset, var(--sx-shadow-2, 0 8px 28px rgba(0, 0, 0, 0.06));
  overflow: hidden;
}
.mc-run-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--sx-line);
}
.mcp-listing-page .mc-run-t {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.mc-run-aux {
  font-family: var(--ig-mono);
  font-size: 11.5px;
  color: var(--sx-text-2);
}
.mc-kv {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  margin: 0;
  padding: 4px 22px;
}
.mc-kv dt {
  padding: 13px 16px 13px 0;
  border-top: 1px solid var(--sx-line);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sx-text-2);
}
.mc-kv dd {
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--sx-line);
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--sx-text);
}
.mc-kv dt:first-of-type,
.mc-kv dd:first-of-type {
  border-top: 0;
}
.mc-code {
  font-family: var(--ig-mono);
  font-size: 12.5px;
  color: var(--sx-text);
  background: var(--sx-bg-2);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  border-radius: 6px;
  padding: 2px 7px;
  word-break: break-word;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.mc-kv-note {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--sx-text-2);
}
.mc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--sx-surface-2);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  font-family: var(--ig-mono);
  font-size: 11.5px;
  color: var(--sx-text-2);
  word-break: break-all;
}
.mc-chip svg {
  flex: none;
  color: var(--sx-text-3);
}
.mc-chip--tool {
  background: var(--mc-accent-soft);
  box-shadow: 0 0 0 1px var(--mc-accent-line) inset;
  color: var(--mc-accent-text);
}
.mc-chip .r {
  color: var(--sx-text-2);
}
.mc-resolved-note {
  margin: 9px 0 0;
  font-size: 12px;
  color: var(--sx-text-2);
}
.mc-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  margin-left: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ig-warn) 12%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ig-warn) 36%, transparent) inset;
  color: var(--ig-warn-text);
  font-family: var(--ig-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.mc-where {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 0;
  padding: 15px 22px;
  border-top: 1px solid var(--sx-line);
  background: color-mix(in srgb, var(--sx-bg-2) 55%, transparent);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--sx-text-2);
  text-wrap: pretty;
}
.mc-where svg {
  flex: none;
  margin-top: 2px;
  color: var(--mc-accent-text);
}
@media (max-width: 560px) {
  .mc-kv {
    grid-template-columns: minmax(0, 1fr);
    padding: 4px 18px;
  }
  .mc-kv dt {
    padding: 12px 0 0;
  }
  .mc-kv dd {
    border-top: 0;
    padding-top: 6px;
  }
  .mc-kv dt:first-of-type {
    padding-top: 12px;
  }
}

/* ── Install ──────────────────────────────────────────────────────────── */
.mc-inst {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 16px;
  align-items: stretch;
}
.mc-code-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--sx-r-lg, 14px);
  background: var(--sx-bg-2);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  overflow: hidden;
}
.mc-code-h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 16px;
  border-bottom: 1px solid var(--sx-line);
  background: var(--sx-surface);
}
.mc-code-h .t {
  font-size: 13px;
  font-weight: 600;
}
.mc-code-h .f {
  font-family: var(--ig-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sx-text-3);
}
/* A 28px chip in a header row: the site-wide 44px floor matches `button`, so
   this opts out and restores it for a coarse pointer, declared after. */
.mc-copy {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  min-height: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  color: var(--sx-text-2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
@media (pointer: coarse) {
  .mc-copy {
    min-height: 44px;
  }
}
.mc-copy:hover {
  background: var(--sx-surface-2);
  color: var(--sx-text);
}
.mc-pre {
  flex: 1;
  margin: 0;
  padding: 16px 18px;
  font-family: var(--ig-mono);
  font-size: 12.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--sx-text-2);
}
.mc-pre .ph {
  color: var(--ig-warn-text);
  background: color-mix(in srgb, var(--ig-warn) 10%, transparent);
  border-radius: 4px;
  padding: 0 2px;
}
.mc-inst-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 28px;
  margin-top: 18px;
}
.mc-inst-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--sx-text-2);
  text-wrap: pretty;
}
.mc-inst-note svg {
  flex: none;
  margin-top: 3px;
  color: var(--sx-text-3);
}
.mc-inst-note a {
  color: var(--ig-brand);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--ig-brand) 40%, transparent);
}
.mc-inst-note code {
  font-family: var(--ig-mono);
  font-size: 12px;
  color: var(--sx-text);
}
@media (max-width: 900px) {
  .mc-inst,
  .mc-inst-notes {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Tools ─────────────────────────────────────────────────────────────── */
.mc-tools {
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: var(--sx-r-xl, 20px);
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.mc-tool {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: 12px 32px;
  padding: 24px 26px;
}
.mc-tool + .mc-tool {
  border-top: 1px solid var(--sx-line);
}
.mc-tool-n {
  font-family: var(--ig-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--mc-accent-text);
  word-break: break-word;
}
.mc-tool-t {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: var(--sx-text-2);
}
.mc-tool-d {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sx-text-2);
  max-width: 66ch;
  text-wrap: pretty;
}
/* The name and type columns are the prototype's `max-content` while they are
   short, and wrap at 30% and 35% once one is long. The prototype's samples
   were all short, but these are the seller's declared tools: an enum's type
   reads "one of: " and every value, which ran past a phone's edge, and a long
   argument name left the description no width at all at 1024px. */
.mc-args {
  display: grid;
  grid-template-columns: fit-content(30%) fit-content(35%) minmax(0, 1fr);
  margin: 14px 0 0;
}
.mc-arg {
  display: contents;
}
.mc-args dt,
.mc-args dd {
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--sx-line);
  font-size: 13px;
}
.mc-args dt {
  padding-right: 18px;
  overflow-wrap: anywhere;
}
.mc-args dt code {
  font-family: var(--ig-mono);
  font-size: 12.5px;
  color: var(--sx-text);
}
.mc-args dd.ty {
  padding-right: 18px;
  font-family: var(--ig-mono);
  font-size: 12px;
  color: var(--sx-text-2);
  overflow-wrap: anywhere;
}
.mc-args dd.ds {
  color: var(--sx-text-2);
  line-height: 1.55;
}
.mc-req {
  margin-left: 8px;
  font-family: var(--ig-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mc-accent-text);
}
.mc-noinput {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--sx-text-2);
}
.mc-foot {
  margin: 14px 4px 0;
  font-size: 12.5px;
  color: var(--sx-text-2);
}
@media (max-width: 760px) {
  .mc-tool {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px;
  }
  .mc-args {
    grid-template-columns: fit-content(55%) minmax(0, 1fr);
  }
  .mc-args dd.ds {
    grid-column: 1 / -1;
    border-top: 0;
    padding-top: 0;
  }
}

/* ── Example ──────────────────────────────────────────────────────────── */
.mc-eg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 1px;
  background: var(--sx-line);
  border-radius: var(--sx-r-xl, 20px);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--sx-line);
}
/* A seller who gave only one half: it takes the whole width rather than
   leaving an empty column beside it. */
.mc-eg--one {
  grid-template-columns: minmax(0, 1fr);
}
.mc-eg-col {
  min-width: 0;
  background: var(--sx-bg-2);
}
.mc-eg-col.is-out {
  background: var(--sx-surface);
}
.mc-eg-h {
  padding: 11px 20px;
  border-bottom: 1px solid var(--sx-line);
  font-family: var(--ig-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sx-text-2);
}
.mc-eg-col.is-out .mc-eg-h {
  color: var(--mc-accent-text);
}
.mc-eg-pre {
  margin: 0;
  padding: 20px 22px;
  font-family: var(--ig-mono);
  font-size: 13px;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--sx-text-2);
}
.mc-eg-ask {
  margin: 0;
  padding: 20px 22px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--sx-text);
  text-wrap: pretty;
}
@media (max-width: 760px) {
  .mc-eg {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── the owner bar's two states that are not live ────────────────────── */
.ig-ownerbar--pending {
  background: color-mix(in srgb, var(--ig-warn) 10%, var(--sx-bg-2));
}
.ig-ownerbar--pending .ig-dot {
  background: var(--ig-warn);
}
.ig-ownerbar--gone {
  background: var(--sx-surface-2);
}
.ig-ownerbar--gone .ig-dot {
  background: var(--sx-text-3);
}