/* ============================================================================
 * Skill listing — v4 type variant
 * Ported from Sigrix_new/marketplace/Marketplace - Listing Skill v4.html
 *
 * The shell this sits on is `css/sx-listing-v4.css`, which the page loads
 * first. That prototype's stylesheet is byte-identical to the graphic prompt's
 * for everything in the shell, and adds one "Type variants — skill" block —
 * this file is that block, minus the parts of it the live listing has no data
 * behind (see docs/design_sync_log.md for what was refused and why).
 *
 * The accent is the one thing every v4 type restates. It is declared at
 * (0,2,1) — `body.listing-v4-page.skill-listing-page` — rather than at the
 * shell's (0,1,1), so it wins on specificity and not on which sheet the
 * browser happened to parse last. CLAUDE.md's admin.css note is the reason:
 * a same-specificity override that depends on load order is a rule nobody can
 * read off either file.
 * ==========================================================================*/

body.listing-v4-page.skill-listing-page {
  /* The prototype's skill accent is #56C2F0, which is a *dark theme* value —
     that page is authored at data-theme="dark". At 2.02:1 on white it is
     unreadable in light mode, and `--ig-accent` is text in six places in the
     shell (.ig-kind, .ig-sig .ico, .ig-editable, the mono captions). So the
     light value is the same hue (199°) taken down to #0B6E9F: 5.61:1 on the
     surface and 4.60:1 on its own 14% tint, both past AA, with the prototype's
     own colour restored for dark below. Measured, not guessed — see the
     contrast test. */
  --ig-accent: #0b6e9f;
  --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;
  --ig-hero-glow-b: color-mix(in srgb, var(--ig-accent) 8%, transparent);
}

/* The prototype's `.ig-kind--skill` modifier is deliberately absent from the
   markup. It exists there because that file has no token layer and has to
   recolour the chip by hand; here the shell's `.ig-kind` already reads
   `--ig-accent`, which the block above overrides, so the modifier would be a
   class that styles nothing — and a no-op class reads as load-bearing to
   whoever meets it next. */

[data-theme="dark"] body.listing-v4-page.skill-listing-page {
  /* Only the two literals restate here. `--ig-accent-soft` / `-line` /
     `--ig-hero-glow-b` are written as `var(--ig-accent)` above, so they
     re-resolve against whichever value wins on this same element — the
     `--pp-accent` rule in CLAUDE.md, verified in Chromium there. */
  --ig-accent: #56c2f0;
  --ig-accent-ink: #04211d;
}

/* ── monospace identity ──────────────────────────────────────────────────
   A skill's name is its directory name — `clean-pasted-text`, not "Clean
   Pasted Text" — and `validate_skill_name` enforces exactly that shape. The
   prototype sets it in mono for the same reason a filename is set in mono
   anywhere: it tells the reader the string is literal. */
.mono-title {
  font-family: var(--ig-mono);
  letter-spacing: -0.02em;
}
h1.mono-title {
  font-size: clamp(28px, 2.7vw, 38px);
}

/* ── the frontmatter card (hero proof) ───────────────────────────────────
   The prototype's proof slot is a before/after transform, which needs paired
   sample text no skill listing stores today; this renders the file's own head
   instead — see `services/skill_listing_view.frontmatter_text`. The
   declarations are the prototype's `.ig-ba-col` / `.ig-ba-head` / `.ig-ba-pre`
   verbatim; only the names changed, because "ba" would describe a comparison
   this card is not making. */
.ig-fm {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--sx-line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--sx-surface);
}
.ig-fm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--sx-line);
  font-family: var(--ig-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sx-text-3);
}
.ig-fm-head .n {
  color: var(--ig-accent);
}
.ig-fm-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);
  overflow-x: auto;
}
/* The redaction line, and the reason it is a line rather than a blur: a body
   the buyer cannot read should be *absent* from the response, not present and
   covered. `skill_listing_view` never puts it in a locked view model. */
.ig-fm-foot {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 18px;
  border-top: 1px dashed var(--sx-line-2);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--sx-text-2);
}
.ig-fm-foot svg {
  flex: none;
  margin-top: 2px;
  color: var(--sx-text-3);
}

/* ── the guest-delivery notice ───────────────────────────────────────────
   Its own class rather than the graphic prompt's `.ig-fill`: that panel is the
   buyer's parameter inputs, and one class name over two unrelated components
   is the `.pp-locked` collision CLAUDE.md documents. Same gutters as the
   panel it sits inside, so it reads as part of the open artifact. */
.ig-guest {
  padding: 18px 26px 0;
  border-top: 1px solid var(--sx-line);
}
.ig-guest-head {
  margin: 0 0 8px;
  font-family: var(--ig-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sx-text-3);
}

/* ── the install command ─────────────────────────────────────────────────
   Owner-only, beside the SKILL.md body. Same shape as the shell's .ig-open
   panel foot, scoped here because only this type has one. */
.ig-cmd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--sx-line);
  border-radius: 12px;
  background: var(--sx-bg-2);
  font-family: var(--ig-mono);
  font-size: 12.5px;
  color: var(--sx-text-2);
  overflow-x: auto;
}
.ig-cmd .p {
  color: var(--ig-accent);
  flex: none;
}

.ig-rel-card .ig-rel-name.mono-title {
  font-size: 13.5px;
}

/* The manifest row's label is the shell's, size, colour and all. One property
   is this type's: the string in it is a *filename*, so it is set in mono for
   the same reason `.mono-title` above is.

   Written at (0,3,1) rather than as a bare `.ig-file .n` so it beats the
   shell's (0,2,0) on specificity. A same-specificity restatement would win
   only because this sheet loads second, which is the admin.css trap in
   CLAUDE.md — and it would also collide with the persona variant, which
   declares nothing here at all and simply takes the shell's prose default. */
body.listing-v4-page.skill-listing-page .ig-file .n {
  font-family: var(--ig-mono);
}