/* ============================================================================
 * Text prompt listing — v4 type variant
 * Ported from Sigrix_new/marketplace/Marketplace - Listing Prompt v4.html
 *
 * The fourth page on the shared v4 shell, after the graphic prompt, the skill
 * and the persona. The shell is `css/sx-listing-v4.css`, which the page loads
 * first; that prototype's stylesheet is the same shell as its three siblings'
 * and adds one type-variant block, and 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).
 *
 * What the prototype declares and this file does *not* is the point worth
 * knowing before adding to it: the chat card (`.pv-*`) and the guarantees row
 * (`.ig-guards`) are in the **shell**, not here. They arrived with the persona
 * page and moved down when this one landed, because a selector declared in two
 * variant sheets resolves by whichever sheet the browser parsed last — so a
 * page loading only one gets whichever half its variant happens to hold.
 * `test_no_selector_is_declared_in_two_variant_sheets` holds that line. The
 * item manifest (`.ig-file*`) and owner stats are in the shell for the same
 * reason, one port earlier.
 *
 * The page's accent is the style guide v2 layer's brand indigo
 * (css/sx-listing-sg-v2.css); the prompt's own colour is its kind chip's,
 * which the token block below states at (0,2,1) —
 * `body.listing-v4-page.prompt-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.prompt-listing-page {
  /* The kind chip: ink, ring and tint. The style guide v2 layer draws the
     chip and hides its dot; each type says what colour it is. The prototype
     states both themes (`#1E40AF` in light, `#B7D5FF` in dark), and the light
     ink reads 7.21:1 at its lowest, on its own tint, so both are ported as
     drawn. The prompt's blue (`#5B7CFF`, `--sx-lt-prompt`, which the page's
     accent and the chip's dot were until the layer, the accent at `#274FEC` in
     light and `#7591FF` in dark) 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: #1e40af;
  --ig-kind-line: rgba(59, 91, 255, 0.25);
  --ig-kind-soft: rgba(59, 91, 255, 0.08);
}

[data-theme="dark"] body.listing-v4-page.prompt-listing-page {
  --ig-kind-ink: #b7d5ff;
  --ig-kind-line: rgba(91, 124, 255, 0.35);
  --ig-kind-soft: rgba(91, 124, 255, 0.08);
}

/* ── the tagline ─────────────────────────────────────────────────────────
   A prompt listing's `subtitle` is the one line that says what the thing is
   *for*, and the prototype sets it in italic above the description at a size
   between the two. Rendered only when the seller wrote one — see the template;
   there is no synthesised fallback here, because the backfill that fills an
   empty subtitle writes the generated "<name> is a Prompt for <category> on
   Sigrix." sentence, and setting that in 19px italic as the page's second line
   would be the page shouting a sentence nobody authored. */
.tp-tagline {
  margin: 0 0 14px;
  font-size: 19px;
  line-height: 1.42;
  font-style: italic;
  color: var(--sx-text);
  max-width: 38ch;
  text-wrap: pretty;
}

/* ── the variables table (section 01) ────────────────────────────────────
   The prompt's interface: what a buyer fills in per run. This is the half of
   section 01 that is published *before* purchase — the tokens, their labels
   and the seller's own worked example — while the prompt they sit in stays
   gated. That split is the whole argument of the panel, so the table is
   deliberately as legible as the locked block above it rather than dimmed to
   look like a teaser.

   The rows come from `prompt_listing_view.prompt_variables`, which reads the
   same definitions the run form does, so the table cannot promise a field the
   prompt has no placeholder for. */
.tp-vars {
  display: grid;
  gap: 1px;
  background: var(--sx-line);
  border: 1px solid var(--sx-line);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 22px;
}
.tp-var {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: var(--sx-bg-2);
}
.tp-var .k {
  /* `min-width` rather than the prototype's flat `width: 16ch`, and the
     difference is visible on real data. A token is one unbroken string with no
     space to wrap at, so a fixed column breaks it mid-word:
     `{{primary_concer` / `n}}` — which is worse than a ragged column, because
     the buyer has to reassemble the thing they are meant to type. The
     prototype's own variable list would do the same (`{{primary_concern}}` is
     19 characters against its 16ch column); it just never rendered.

     So short tokens still align at 16ch, and a long one takes the room it
     needs on its own row. `nowrap` is what makes that a widening rather than a
     break. */
  flex: 0 0 auto;
  min-width: 16ch;
  white-space: nowrap;
  font-family: var(--ig-mono);
  font-size: 11.5px;
  color: var(--ig-accent);
  padding-top: 1px;
}
.tp-var .b {
  min-width: 0;
}
.tp-var .t {
  display: block;
  font-size: 13px;
  font-weight: 500;
}
.tp-var .s {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--sx-text-2);
  text-wrap: pretty;
}
.tp-var .z {
  margin-left: auto;
  flex: none;
  font-family: var(--ig-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sx-text-3);
  padding-top: 3px;
}

/* ── the clipped reply (hero proof) ──────────────────────────────────────
   The hero shows the recorded answer alone; section 02 shows it again with the
   input that produced it. The fade is decoration on text that was deliberately
   sent — `prompt_proof_exchange` has already cut the string server-side — not
   a lid over something withheld. Same posture as the persona page's gated
   prompt: a body the buyer cannot read is absent from the response, never
   present and covered. */
.pv-fade {
  position: relative;
  max-height: 352px;
  overflow: hidden;
}
.pv-fade::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--sx-surface));
  pointer-events: none;
}

@media (max-width: 640px) {
  /* Narrow enough that a 16ch column plus a label plus the required/optional
     chip cannot share a line — so the token takes its own row and the label
     drops under it. */
  .tp-var {
    flex-wrap: wrap;
  }
  .tp-var .k {
    min-width: 0;
  }
}