/* ============================================================================
 * 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 mint is this page's own parts' (the delivery chip, the tool chips,
     What it runs, the example's output head), as the prototype paints them
     with its `--mc` tokens. The shell's accent (`--ig-accent`, the code in a
     note, a focus ring) is the style guide v2 layer's brand indigo, which is
     what the prototype's shared `--persona` resolves to under its block. The
     hero's glow is the layer's to hide, so this sheet tints none (#7273). */
  /* The kind chip: ink, ring and tint. The style guide v2 layer
     (css/sx-listing-sg-v2.css) draws the chip; each type says what colour it
     is. The prototype states both themes (`#047857` in light, `#C2F5DC` in
     dark), and the light ink reads 4.59:1 at its lowest, on its own tint over
     `--sx-bg-2`, so both are ported as drawn. The product page states its own
     rose in its own sheet, at its own selector. */
  --ig-kind-ink: #047857;
  --ig-kind-line: rgba(16, 150, 100, 0.28);
  --ig-kind-soft: rgba(16, 150, 100, 0.08);
}

[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);
  --ig-kind-ink: #c2f5dc;
  --ig-kind-line: rgba(111, 227, 176, 0.3);
  --ig-kind-soft: rgba(111, 227, 176, 0.08);
}

/* ── 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.

   Inside the column the buy box follows the title and the trust row, not the
   description, the facts and the tags, as #6059 did for the shell's own
   children. The shell orders `.ig-hero-info > .ig-buy`, but this page wraps its
   box in `section.mc-get`, one level down, so none of those rules reached it:
   measured at 390x844 the box started at 771px and its button sat on the fold,
   840 to 888px of an 844px window. The design draws the document order (its
   one phone rule here is `.mc-hero-id { order: -1 }`), so lifting the box, and
   the trust row before it (#3774), is a deliberate divergence, recorded in
   docs/design_sync_log.md. The title shares the -2 slot with the trust row and
   comes first in the document. Scoped to `body.listing-v4-page`, not this
   page's own class, so any page on this layout that links the sheet takes the
   two rules from here and declares none of its own
   (tests/test_mcp_detail_mobile_cta_order.py).

   A flex column's margins do not collapse and each block was spaced from the
   one that used to precede it: the 26px above the buy box was the tags' margin
   below, and the description has none above. Moved, the box touched the trust
   row and the description touched the box's checklist. So the trust row, which
   now follows the title, drops its 22px (the title's own 16px is the gap, as
   under the eyebrow), and the box takes the facts' 26px on both sides. */
@media (max-width: 1080px) {
  .mc-hero-id {
    order: -1;
  }
  body.listing-v4-page .ig-hero-info > .mc-trust {
    order: -2;
    margin-top: 0;
  }
  body.listing-v4-page .ig-hero-info > .mc-get {
    order: -1;
    margin: 26px 0;
  }
}

/* ── 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;
}
/* A finished example's buy box (#7139): words where the cart button would be, so no
   pointer, no hover fill and the text ramp on its own surface, not the brand gradient. */
.ig-btn[aria-disabled="true"] {
  cursor: default;
  color: var(--sx-text-2);
  background: var(--sx-surface-2);
}
.ig-btn[aria-disabled="true"]:hover {
  background: var(--sx-surface-2);
}
.ig-buy-cta .ig-btn[aria-disabled="true"] {
  white-space: normal;
  height: auto;
  min-height: 48px;
  text-align: center;
}
.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 states that are not live ─────────────────────────── */
/* The prototype's two states. Under the style guide v2 layer every state is
   flat and the layer colours the dot, Private's included, so this sheet
   draws no Private state of its own (#7273). */
.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);
}