/* ============================================================================
 * Persona listing — v4 type variant
 * Ported from Sigrix_new/marketplace/Marketplace - Listing Persona 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 skill one for
 * all 427 lines of the shell, and adds one "Type variants — persona" 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).
 *
 * Two blocks that were here have moved to the shell: the chat card (`.pv-*`)
 * and the guarantees row (`.ig-guards`). The text prompt page renders both, and
 * a selector declared in two variant sheets resolves by parse order — so they
 * are shared rather than copied. The `pv-` prefix stayed with them; renaming it
 * would have touched two templates and a test to say the same thing.
 *
 * The page's accent is the style guide v2 layer's brand indigo
 * (css/sx-listing-sg-v2.css); the persona's own colour is its kind chip's,
 * which the token block below states at (0,2,1) —
 * `body.listing-v4-page.persona-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.
 *
 * Four blocks the prototype declares are deliberately absent, because the live
 * page renders nothing that would use them:
 *
 *   .pv-tbl      a table inside the reply. Scenarios store the assistant's
 *                answer as plain text, so there is no structured reply to lay
 *                out — a rule with no markup is a rule the next reader has to
 *                work out is dead. Still true of the text prompt page, which
 *                is why the block did not travel to the shell with the card
 *                around it.
 *   .mono-title  declared in the prototype and used by nothing in it. The
 *                persona hero's <h1> is `.ig-title`, not the skill page's mono
 *                directory name.
 *   .ig-ba*      the before/after transform, which is the *skill* prototype's
 *                proof slot; the persona file keeps the rules but renders a
 *                chat exchange instead.
 *   .ig-cfg      the config-flag table, likewise inherited and unrendered.
 * ==========================================================================*/

body.listing-v4-page.persona-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
     (`#92400E` in light, `#FFD3B7` in dark), and the light ink reads 5.98:1 at
     its lowest, on its own tint, so both are ported as drawn. The persona's
     amber (`#E0A03C`, which the page's accent was until the layer, at
     `#8C5600` 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: #92400e;
  --ig-kind-line: rgba(199, 120, 0, 0.25);
  --ig-kind-soft: rgba(199, 120, 0, 0.08);
}

/* The prototype's `.ig-kind--persona` 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. The same goes for `.ig-rel-tag--persona`. */

[data-theme="dark"] body.listing-v4-page.persona-listing-page {
  --ig-kind-ink: #ffd3b7;
  --ig-kind-line: rgba(245, 180, 84, 0.3);
  --ig-kind-soft: rgba(245, 180, 84, 0.08);
}

/* The item manifest is entirely the shell's here — including `.ig-file .n`,
   whose prose typeface is the shell's default. The skill variant is the one
   that restates it, because a filename is set in mono; a persona row names an
   authored block ("When responding") and wants nothing of its own. */

/* ── the tagline ─────────────────────────────────────────────────────────
   A persona's one-line promise, above the description rather than instead of
   it. Italic and wider-set than `.ig-desc` so the two do not read as one
   paragraph broken in half. */
.pv-tagline {
  margin: 0 0 14px;
  font-size: 19px;
  line-height: 1.42;
  font-style: italic;
  color: var(--sx-text);
  max-width: 36ch;
  text-wrap: pretty;
}


/* ── the block list (section 01) ─────────────────────────────────────────
   What a persona ships: one row per authored block, each with what that block
   is for and what it weighs. This is the whole disclosure the listing makes
   before the prompt itself — which is why the row carries a description and
   not just a name. */
.pv-blocks {
  display: grid;
  gap: 1px;
  background: var(--sx-line);
  border: 1px solid var(--sx-line);
  border-radius: 14px;
  overflow: hidden;
}
.pv-block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--sx-bg-2);
}
.pv-block .n {
  flex: none;
  width: 8.5ch;
  font-family: var(--ig-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sx-text-3);
  padding-top: 2px;
}
.pv-block .t {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
}
.pv-block .s {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--sx-text-2);
  text-wrap: pretty;
}
.pv-block .z {
  margin-left: auto;
  flex: none;
  font-family: var(--ig-mono);
  font-size: 11.5px;
  color: var(--sx-text-3);
  padding-top: 3px;
}


/* ── the gated prompt (section 01, no access) ────────────────────────────
   The fade is decoration over text the server *chose* to send: a locked view
   model carries `preview_prompt`, which is the first PREVIEW_LINES lines and
   nothing else (services/persona_listing_view). The rest of the prompt is
   absent from the response, not covered — CLAUDE.md's rule, and the reason
   this is a mask on a short <pre> rather than a max-height on a long one.

   The geometry is a floor, a cap and a fixed fade tail, and all three are
   load-bearing. The prototype fades from 52% of the box, which works only
   because its example prompt fills it — on a persona whose opening block is a
   single sentence the box is one line tall and the *published* line is what
   the fade eats, so the page hides the one thing it decided to show. Anchoring
   the fade to the last 56px instead keeps everything above it fully opaque at
   any head length; `min-height` gives a short head that 56px to fade into, so
   the panel still reads as "there is more below" rather than as a box that
   happens to end. `max-height` is the cap, for a listing whose opening block
   runs long. */
.pv-gate .ig-pre {
  min-height: 132px;
  max-height: 250px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 56px), transparent);
}
.pv-gate-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 0 26px 24px;
}
.pv-gate-foot .t {
  font-size: 13px;
  line-height: 1.55;
  color: var(--sx-text-2);
  max-width: 44ch;
}
.pv-locked {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--sx-text-2);
}
/* The ink, not the fill — see the shell's `--ig-warn-text` note. */
.pv-locked svg {
  color: var(--ig-warn-text);
}

@media (max-width: 760px) {
  .pv-blocks .pv-block {
    flex-wrap: wrap;
  }
  /* The number column and the weight both go full-width rather than squeezing
     the title into a few characters — `8.5ch` plus a nowrap token count leaves
     under 20ch for the block name at 360px. */
  .pv-block .z {
    margin-left: 0;
    padding-top: 0;
  }
  .pv-gate-foot {
    padding: 0 18px 20px;
  }
}