/* ============================================================================
 * 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 page's accent is the style guide v2 layer's brand indigo
 * (css/sx-listing-sg-v2.css); the skill's own colour is its kind chip's,
 * which the token block below states at (0,2,1) —
 * `body.listing-v4-page.skill-listing-page` — 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 kind chip: ink, ring and tint. The style guide v2 layer draws the
     chip; each type says what colour it is. The prototype states both themes
     (`#075985` in light, `#BFE9FB` in dark), and the light ink reads 6.60:1 at
     its lowest, on its own tint, so both are ported as drawn. The skill's
     sky (`#56C2F0`, which the page's accent was until the layer, at
     `#0B6E9F` in light) is the chip's alone now: the style guide gives a
     page one brand accent and a type's colour to its chip. */
  --ig-kind-ink: #075985;
  --ig-kind-line: rgba(86, 194, 240, 0.3);
  --ig-kind-soft: rgba(86, 194, 240, 0.08);
}

/* 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 layer's `.ig-kind` already reads
   `--ig-kind-ink`, which the block above states, 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 {
  --ig-kind-ink: #bfe9fb;
  --ig-kind-line: rgba(86, 194, 240, 0.3);
  --ig-kind-soft: rgba(86, 194, 240, 0.08);
}

/* ── 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. The hero's title is the
   style guide's Geist title now (the layer out-specifies `h1.mono-title`, as
   the prototype's block does); the sticky bar's keeps the mono, as there. */
.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 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;
}

/* The line and its copy control (#4800). One row that claims the foot's full
   width, the line taking what the button leaves. Where that would leave the
   line under ~260px the button drops beneath it instead of squeezing it: on a
   phone the 140px button left the command 146px, five wrapped lines, where the
   line alone had 262px. */
.ig-cmd-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 1 1 100%;
  gap: 10px;
  min-width: 0;
}
.ig-cmd-row .ig-cmd {
  flex: 1 1 260px;
  min-width: 0;
}
.ig-cmd-row .ig-btn {
  flex: none;
}

/* Why the install command is absent (#5733). Sits in its slot and reads as
   prose rather than a command: it is a sentence, not something to paste. The
   ink is the warn token's *text* pair, never --sx-warn itself, which is a fill
   and measures ~3.2:1 as ink on a light surface. */
.ig-cmd-missing {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--sx-line);
  border-radius: 12px;
  background: var(--sx-bg-2);
  font-size: 13px;
  line-height: 1.5;
  color: var(--sx-warn-text);
}

/* `.ig-rel-card .ig-rel-name.mono-title` lived here — the related row's own
   mono title, one size down. The row renders the shared listing card now
   (docs/design_sync_log.md, 2026-08-29), which titles itself. */

/* 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);
}

/* ── the permission summary ──────────────────────────────────────────────
   #5764. Section 01's statement of what `allowed-tools` permits.

   Three tones, and the split is the point rather than decoration: only
   `read-only` earns the positive one. `undeclared` must not read as safe —
   a skill with no `allowed-tools` constrains its runtime to nothing, so the
   runtime's own defaults apply, which is looser than any declaration — and
   `unclassified` is an open question, not a clean bill. So both sit neutral,
   and `escalated` alone carries warn.

   Every colour is one of the shell's own token pairs, so this sheet needs no
   `[data-theme="dark"]` block of its own: `--ig-warn-text` / `--ig-ok-text`
   are already declared once per theme up there. Note which side of the pair
   each is on — the shell's own comment states the rule these encode, that a
   fill is never a `color:`, so the tints below mix from `--ig-warn` / `--ig-ok`
   and every `color` reads the `-text` counterpart. */
.sk-perms {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--sx-line);
  border-radius: 14px;
  background: var(--sx-bg-2);
}
.sk-perms-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--sx-text);
}
.sk-perms-head .ico {
  display: inline-flex;
  flex: none;
  color: var(--sx-text-3);
}
.sk-perms-sub {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sx-text-2);
}
.sk-perm-groups {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.sk-perm {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 12.5px;
}
.sk-perm .l {
  color: var(--sx-text-2);
}
.sk-perm .v {
  font-family: var(--ig-mono);
  font-size: 12px;
  color: var(--sx-text-3);
}

/* Escalated: the one tone that changes the panel itself, because it is the
   one a buyer has to notice without reading. */
.sk-perms[data-skill-permissions="escalated"] {
  border-color: color-mix(in srgb, var(--ig-warn) 38%, transparent);
  background: var(--ig-warn-soft);
}
.sk-perms[data-skill-permissions="escalated"] .sk-perms-head,
.sk-perms[data-skill-permissions="escalated"] .sk-perms-head .ico {
  color: var(--ig-warn-text);
}
.sk-perms[data-skill-permissions="escalated"] .sk-perm[data-skill-permission-group="shell"] .l,
.sk-perms[data-skill-permissions="escalated"] .sk-perm[data-skill-permission-group="write"] .l,
.sk-perms[data-skill-permissions="escalated"] .sk-perm[data-skill-permission-group="network"] .l {
  color: var(--ig-warn-text);
  font-weight: 600;
}

/* Read-only is the only claim strong enough to earn the positive ink. */
.sk-perms[data-skill-permissions="read-only"] .sk-perms-head .ico {
  color: var(--ig-ok-text);
}