/* ============================================================================
 * Listing detail — style guide v2 (#sg-v2)
 * Ported from the "sg-v2" <style> block the design added to every marketplace
 * listing prototype at f5b307d ("Style guide v2 — token remap onto the refined
 * palette, Geist-only type, one chip, hairlines, no tints/gradients"). The block
 * is the same in all seven listing prototypes but for one line, each type's
 * kind chip colour; this layer is that block, and the type's colour is the
 * variant sheet's (`--ig-kind-ink`, `-line`, `-soft`).
 *
 * It is opt-in, and every v4 listing page opts in. The design applies it to
 * every listing page at once; here the product page took it first, the
 * assistant page second, and the other listing pages followed, each by
 * carrying `sg-v2` on its body beside `listing-v4-page` and its type class
 * and linking this sheet last. Written at (0,3,1), it wins over the shell and
 * the variants on specificity rather than on load order, so a page that does
 * not carry the class is not touched: the shell's own rules stand for it.
 *
 * What the block does that the site did not already do:
 *   - the palette. The block's token remap (`--bg`, `--surface`, `--line`,
 *     `--text-mute`, …) is the site's own palette already, except that the
 *     site lifts the faint ink one step so labels clear 4.5:1 (`--sx-text-3`),
 *     so nothing is remapped here, but for two of its tokens. `--text-soft`
 *     becomes the second step of the ramp, which the review module had read
 *     as the third; and `--persona`, the prototypes' shared accent (a teal,
 *     beside a kind chip in the type's colour), becomes the brand indigo, the
 *     style guide's "one brand accent per view". So every page's accent is
 *     the brand here (`--ig-accent`, below), and a type's own colour is its
 *     kind chip's and the parts the prototype paints in it (a crew's manager);
 *   - Geist only: Space Grotesk, the shell's display face (`--ig-display`),
 *     goes, and so do the mono and caps on titles; prices and codes stay mono;
 *   - no hero glow, and the buy box, the unlock panel, the review form and the
 *     cards lose their shadows and tints for a hairline;
 *   - one chip: 22px, 4px corners, a hairline ring, the ink of the quietest
 *     label, whatever the chip says (kind, model, grade, seller badge, tag).
 *
 * Translated, not copied. A prototype class the site does not render
 * (`.ig-case`: a case-study card) is left out until a page draws it; a
 * prototype rule that painted a fill as words is restated in the site's ink
 * (`.ig-grade`, below). The block's `.as-*` rules are
 * `css/sx-listing-assistant.css`'s, and two of its parts are the site's under
 * other names: the skill prototype's cost cards (`.sk-cost`, `.sk-note`) are
 * the shell's `.ig-tok-cost` and `.ig-tok-note`, which every page that prices
 * its tokens draws, and its frontmatter card, a before/after card with one
 * column (`.ig-ba-head`), is the skill page's `.ig-fm-head`. Verified on
 * every listing page that carries it.
 * ==========================================================================*/

body.listing-v4-page.sg-v2 {
  /* Geist only. Every `font-family: var(--ig-display)` in the shell reads this. */
  --ig-display: var(--sx-font-body, 'Geist', ui-sans-serif, system-ui, sans-serif);
  /* One brand accent. The block's `--persona` is `#3D4DFF` in light and `#6B78FF` in dark, and the shell
     paints `--ig-accent` as words (the quality card's glyphs and the owner's Fix link, an editable
     field, a highlighted variable, a code span) on every surface of its theme and on the accent's own
     14% tint (`--ig-accent-soft`). There the prototype's values read 4.24:1 and 3.81:1, so the hue is
     kept and the lightness moved until each clears 4.5:1: `#3041FF` (5.79:1 on the surfaces, 4.68:1
     on the tint) and `#8792FF` (5.97:1, 4.77:1). `--ig-accent-ink` is what sits on an accent fill.
     A variant states no accent of its own, and the shell's default is painted on no page now: every
     page whose body carries `listing-v4-page` carries this layer, and the agent page takes the
     shell's tokens for its reviews module alone, which reads no accent (#7273). */
  --ig-accent: #3041ff;
  --ig-accent-soft: color-mix(in srgb, var(--ig-accent) 14%, transparent);
  --ig-accent-line: color-mix(in srgb, var(--ig-accent) 34%, transparent);
  --ig-accent-ink: #ffffff;
}

[data-theme="dark"] body.listing-v4-page.sg-v2 {
  /* Only the literals restate: the tint and the line are `var(--ig-accent)` above, so they re-resolve
     against whichever value wins on this same element. */
  --ig-accent: #8792ff;
  --ig-accent-ink: #0b0d12;
}

/* No glow behind the hero. */
body.listing-v4-page.sg-v2 .ig-hero-bg {
  display: none;
}

/* ── type ────────────────────────────────────────────────────────────────── */
body.listing-v4-page.sg-v2 .ig-title {
  font-family: inherit;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
}
body.listing-v4-page.sg-v2 .ig-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--sx-text-2);
}
body.listing-v4-page.sg-v2 .ig-locked-l h3,
body.listing-v4-page.sg-v2 .ig-locked-r .t,
body.listing-v4-page.sg-v2 .ig-owner-stats .v {
  font-family: inherit;
  font-weight: 600;
}
body.listing-v4-page.sg-v2 .ig-locked-l h3 {
  font-size: 18px;
}
body.listing-v4-page.sg-v2 .ig-locked-r .t {
  font-size: 17px;
  letter-spacing: -0.01em;
}
/* A price, a stat and a code are the numbers on the page: the one place mono stays. */
body.listing-v4-page.sg-v2 .ig-price,
body.listing-v4-page.sg-v2 .ig-locked-price .p,
body.listing-v4-page.sg-v2 .ig-stick-p,
body.listing-v4-page.sg-v2 .ig-owner-stats .v {
  font-family: var(--ig-mono);
  font-weight: 500;
  letter-spacing: -0.02em;
}
body.listing-v4-page.sg-v2 .ig-price {
  font-size: 26px;
}
body.listing-v4-page.sg-v2 .ig-locked-price .p {
  font-size: 22px;
}
body.listing-v4-page.sg-v2 .ig-stick-p {
  font-size: 16px;
}
/* The small caps label every card head and stat caption shares. */
body.listing-v4-page.sg-v2 .ig-kind,
body.listing-v4-page.sg-v2 .ig-signals-head .t,
body.listing-v4-page.sg-v2 .ig-owner-stats .l,
body.listing-v4-page.sg-v2 .ig-ba-head {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sx-text-3);
}
body.listing-v4-page.sg-v2 .ig-ba-col.is-after .ig-ba-head {
  color: var(--sx-text-2);
}
body.listing-v4-page.sg-v2 .ig-sec-aux {
  font-size: 12px;
  color: var(--sx-text-3);
}
/* The Tokens section's cost cards: the card's label is the small caps label, its figure a number in
   mono, its corners the layer's, and the note under them a solid hairline in place of a dashed one. */
body.listing-v4-page.sg-v2 .ig-tok-cost .k {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sx-text-3);
}
body.listing-v4-page.sg-v2 .ig-tok-cost .n {
  font-family: var(--ig-mono);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
body.listing-v4-page.sg-v2 .ig-tok-cost .c {
  border-radius: var(--sx-r-lg, 14px);
}
body.listing-v4-page.sg-v2 .ig-tok-note {
  border-top-style: solid;
  border-top-color: var(--sx-line);
}
/* The review module's quieter words, and three of the crew page's (a run's foot, a member card's foot,
   the fall-through note), are the prototype's `--text-soft`, which they read as the third step of the
   ramp; the block makes it the second, as the rest of the page reads it. The small report button keeps
   its hover, which this rule would otherwise out-specify. */
body.listing-v4-page.sg-v2 .rv-tally,
body.listing-v4-page.sg-v2 .rv-bar,
body.listing-v4-page.sg-v2 .rv-form .lead,
body.listing-v4-page.sg-v2 .rv-help,
body.listing-v4-page.sg-v2 .rv-hint,
body.listing-v4-page.sg-v2 .rv-done .s,
body.listing-v4-page.sg-v2 .rv-mini,
body.listing-v4-page.sg-v2 .rv-none .s,
body.listing-v4-page.sg-v2 .cr-foot,
body.listing-v4-page.sg-v2 .cr-mem-foot,
body.listing-v4-page.sg-v2 .cr-fallthrough {
  color: var(--sx-text-2);
}
body.listing-v4-page.sg-v2 .rv-mini:hover {
  color: var(--sx-text);
}
/* The skill page's frontmatter card is the prototype's before/after card with one column, so its head
   takes the small caps label, and the file's name the brighter step the block gives the after column's
   head, in place of the accent. */
body.listing-v4-page.sg-v2 .ig-fm-head {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sx-text-3);
}
body.listing-v4-page.sg-v2 .ig-fm-head .n {
  color: var(--sx-text-2);
}

/* ── one chip ────────────────────────────────────────────────────────────── */
/* The kind chip keeps its caps, at the chip's lighter tracking, and takes its
   type's colour from the page's variant sheet. */
body.listing-v4-page.sg-v2 .ig-kind {
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  font-weight: 500;
  color: var(--ig-kind-ink, var(--ig-accent));
  box-shadow: 0 0 0 1px var(--ig-kind-line, var(--sx-line)) inset;
  background: var(--ig-kind-soft, transparent);
}
body.listing-v4-page.sg-v2 .ig-kind .ig-dot {
  display: none;
}
/* The community-choice winner's badge (#4710) beside the kind chip: one chip, in the status ink that clears
   AA in both themes (`base.css` paints it `#8a5300`, 2.4:1 in dark, for a title it no longer sits in). */
body.listing-v4-page.sg-v2 .ig-eyebrow .community-choice-badge {
  height: 22px;
  gap: 6px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  background: color-mix(in srgb, var(--sx-warn) 10%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sx-warn) 40%, transparent) inset;
  color: var(--sx-warn-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
body.listing-v4-page.sg-v2 .ig-kind svg {
  color: currentColor;
}
body.listing-v4-page.sg-v2 .ig-model,
body.listing-v4-page.sg-v2 .ig-new,
body.listing-v4-page.sg-v2 .ig-grade,
body.listing-v4-page.sg-v2 .ig-shopb-chip {
  height: 22px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  color: var(--sx-text-3);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
/* The prototype inks a passing grade `--sx-ok`, a fill that reads 2.58:1 as words
   in light; the shell's own ink for it is `--ig-ok-text`. */
body.listing-v4-page.sg-v2 .ig-grade {
  color: var(--ig-ok-text);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ig-ok) 38%, transparent) inset;
  background: color-mix(in srgb, var(--ig-ok) 6%, transparent);
}
body.listing-v4-page.sg-v2 .ig-shopb-chip--trust,
body.listing-v4-page.sg-v2 .ig-shopb-chip--role {
  border: 0;
  background: transparent;
  color: var(--sx-text-2);
}
body.listing-v4-page.sg-v2 .ig-shopb-chip svg {
  color: var(--sx-text-3);
}
body.listing-v4-page.sg-v2 .ig-tag {
  height: 22px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  color: var(--sx-text-3);
}
body.listing-v4-page.sg-v2 .ig-tag:hover {
  box-shadow: 0 0 0 1px var(--sx-line-2) inset;
  color: var(--sx-text);
}

/* ── hairlines: no shadow, no tint ───────────────────────────────────────── */
body.listing-v4-page.sg-v2 .ig-buy,
body.listing-v4-page.sg-v2 .ig-owner-stats {
  border-radius: var(--sx-r-lg, 14px);
  box-shadow: none;
  border-color: var(--sx-line);
}
body.listing-v4-page.sg-v2 .ig-locked {
  border-radius: var(--sx-r-lg, 14px);
}
/* The hero's run card keeps its hairline and loses its shadow. The prototype draws it with neither: the
   block's `--shadow-md: none` lands in the card's two-layer `box-shadow` as `ring, none`, which is invalid
   at computed-value time and drops the ring with it. The block's intent is a hairline, and the buy box
   beside the card keeps its border. */
body.listing-v4-page.sg-v2 .mc-run {
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
/* The review form keeps its border and loses its shadow, as the prototype's does: it reads the block's
   `--shadow-md`, which is `none`. */
body.listing-v4-page.sg-v2 .rv-form {
  box-shadow: none;
}
body.listing-v4-page.sg-v2 .ig-locked-r {
  background: var(--sx-surface-2);
}
body.listing-v4-page.sg-v2 .ig-lock-ico {
  color: var(--sx-text-2);
}
body.listing-v4-page.sg-v2 .ig-signals,
body.listing-v4-page.sg-v2 .ig-ba,
body.listing-v4-page.sg-v2 .ig-seller {
  border-radius: var(--sx-r-lg, 14px);
}
/* The owner bar is flat in every state; its dot and its words say which. */
body.listing-v4-page.sg-v2 .ig-ownerbar {
  background: var(--sx-bg-2);
}
body.listing-v4-page.sg-v2 .ig-ownerbar .ig-dot {
  background: var(--sx-brand-3);
}
body.listing-v4-page.sg-v2 .ig-ownerbar--preview .ig-dot,
body.listing-v4-page.sg-v2 .ig-ownerbar--pending .ig-dot,
body.listing-v4-page.sg-v2 .ig-ownerbar--private .ig-dot {
  background: var(--sx-warn);
}
body.listing-v4-page.sg-v2 .ig-ownerbar--gone .ig-dot {
  background: var(--sx-text-3);
}