/* ============================================================================
 * Listing detail — v4, assistant variant
 * Ported from Sigrix_new/marketplace/Marketplace - Listing Assistant v4.html at
 * f5b307d: its page-local "as-assistant" block and the assistant's kind chip. The
 * shell this sits on is `css/sx-listing-v4.css`, which the page loads first; the
 * style-guide layer (`css/sx-listing-sg-v2.css`) loads after this sheet.
 * This file holds only what no other type renders: the before/after card that is the
 * hero's proof, the prompt panel, the steps, the documents list, and the parts the
 * live page keeps that the prototype does not draw (the composed building blocks,
 * further examples, the ownership return panel).
 *
 * Translated, not copied. The prototype is authored at data-theme="dark" on its own
 * `.sx` div and reads bare tokens; here `data-theme` is on the root, light is the
 * default and the tokens are the site's. A prototype `--text-faint` that inks words is
 * `--sx-text-3` (the quietest step that clears 4.5:1 in both themes); its `--text-soft`
 * and `--text-mute` are one step here, `--sx-text-2`; its `--warn` as words is the
 * shell's `--ig-warn-text`. `--sx-bg-1`, which the global dark rule does not re-flip,
 * is not read (`.claude/rules/theme-tokens-and-contrast.md`).
 * ==========================================================================*/

/* ── the assistant's kind chip ───────────────────────────────────────────
   The page's accent is the style guide v2 layer's brand indigo, which it states
   for every listing page (`#3041FF` in light, `#8792FF` in dark, the hue the
   prototype's `--persona` and `--accent-3` resolve to, moved for AA:
   tests/test_assistant_page_ink_contrast.py). The assistant's own colour is its
   kind chip's, stated here at (0,2,1), so it wins on specificity rather than on
   which sheet the browser parsed last.

   The kind chip is violet. The prototype states its colour for both themes
   (`#E2C7FF` in dark, `#6D28D9` in light, a hairline ring and a faint tint of the
   same hue), so it is ported as drawn: the light ink is 7.1:1 on white and well over
   AA on its own tint. The style-guide layer draws the chip; each type says what colour
   it is. */
body.listing-v4-page.assistant-listing-page {
  --ig-kind-ink: #6d28d9;
  --ig-kind-line: rgba(140, 90, 255, 0.3);
  --ig-kind-soft: rgba(140, 90, 255, 0.08);
}

[data-theme="dark"] body.listing-v4-page.assistant-listing-page {
  --ig-kind-ink: #e2c7ff;
  --ig-kind-line: rgba(180, 140, 255, 0.3);
  --ig-kind-soft: rgba(180, 140, 255, 0.08);
}

/* ── the proof: what you paste, what you get back ────────────────────────
   The hero's left column, in the prototype's own terms (`.ig-ba`): two panes under one border, the
   input in the page's mono and the expected output in prose, since it is writing. Both keep the lines
   the seller wrote them in (`pre-wrap`), and wrap anywhere, so a long unbroken token cannot widen a
   track. An example with one side only is drawn as the one pane it has. The left pane is a step darker
   than the right, as the prototype draws it: the surface in light, `--sx-bg-2` in dark. */
.ig-ba {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-r-lg, 14px);
  overflow: hidden;
  background: var(--sx-line);
}
.ig-ba--one {
  grid-template-columns: minmax(0, 1fr);
}
.ig-ba-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--sx-surface);
}
[data-theme="dark"] .ig-ba-col {
  background: var(--sx-bg-2);
}
[data-theme="dark"] .ig-ba-col.is-after,
.ig-ba-col.is-after {
  background: var(--sx-surface);
}
.ig-ba-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-ba-col.is-after .ig-ba-head {
  color: var(--ig-accent);
}
.ig-ba-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;
  overflow-wrap: anywhere;
  color: var(--sx-text-2);
}
.ig-ba-col.is-after .ig-ba-pre {
  color: var(--sx-text);
}
.ig-ba-pre.as-prose {
  font-family: var(--sx-font-body, 'Geist', ui-sans-serif, system-ui, sans-serif);
  font-size: 13.5px;
  line-height: 1.6;
}
@media (max-width: 760px) {
  .ig-ba {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The proof's footer holds up to two jumps; they wrap rather than squeeze the note beside them. */
.as-jumps {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

/* The share row, under the buy box's points: a hairline above it, as the product page draws its. */
.as-share {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--sx-line);
}
.as-share .product-share {
  margin-top: 0;
}

/* ── the assistant: prompt, steps, download ──────────────────────────────
   The deliverable's panel is the shell's two-half frame (`.ig-locked`) in both states, as the
   prototype draws it: the prompt on the left for a viewer with access, what the download holds for
   everyone else, and on the right how to use it, the price or the bundle, and the one button. */
body.listing-v4-page .as-ph {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
body.listing-v4-page .as-ph h3 {
  margin: 0;
}
.as-prompt {
  position: relative;
  margin: 0;
  padding: 16px 18px;
  max-height: 420px;
  overflow: auto;
  border-radius: var(--sx-r-md, 12px);
  background: var(--sx-bg);
  border: 1px solid var(--sx-line);
  font: 12.5px/1.7 var(--ig-mono);
  color: var(--sx-text-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.as-lock-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--sx-text-2);
}
.as-lock-note svg {
  flex: none;
}
.as-steps {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--sx-text-2);
}
.as-steps li {
  margin-bottom: 6px;
}
.as-steps b {
  color: var(--sx-text);
  font-weight: 600;
}
.as-steps code {
  font: 12px var(--ig-mono);
  color: var(--sx-text);
  overflow-wrap: anywhere;
}
/* A guest's note takes the download's place in this column (#7262). The shell draws it for a panel with
   gutters of its own (`.ig-guest`, 26px a side); this column's inset sets its edges, so the note keeps no
   side padding and reads in line with the steps above it. */
.ig-locked-r .ig-guest {
  padding-inline: 0;
}
/* A finished example's panel: a line in its place, since there is nothing to unlock. */
.as-example-note {
  margin: 0;
  max-width: 68ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sx-text-2);
}

/* ── the documents it asks for ───────────────────────────────────────────
   One list under the panel, for every viewer: what the buyer should give, whether it is needed before
   the assistant runs, which files it takes, and the name the download files it under. A document's
   sample is not on the page, only the line that says one comes with it. The `.ig-incl .s` row is a
   block in the shell, so the meta line states its own flex at (0,3,0). */
.as-docs {
  margin-top: 28px;
}
.as-docs-h {
  margin-bottom: 12px;
}
.ig-incl .s.as-doc-m {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 4px;
}
.as-doc-m .is-need {
  color: var(--ig-warn-text);
}
.as-doc-m code {
  font: 12px var(--ig-mono);
  color: var(--sx-text-2);
  overflow-wrap: anywhere;
}
.assistant-knowledge-what {
  overflow-wrap: anywhere;
}

/* ── building blocks ─────────────────────────────────────────────────────
   Not in the prototype, which draws the assistant that runs on its prompt alone. An assistant that
   composes a prompt, a persona, skills or MCP servers draws one list per kind, in the shell's own
   included-items rows: the kind said as a small label before the name, the price or "Comes with this
   assistant" after it, and what the block asks of a buyer under it. */
.as-setup {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}
.as-group {
  margin-top: 28px;
}
.as-group:first-of-type {
  margin-top: 20px;
}
.as-group-h {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.as-group-p {
  margin: 8px 0 0;
  max-width: 78ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--sx-text-2);
  text-wrap: pretty;
}
.as-group-lead {
  margin: 10px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sx-text);
}
.as-group .ig-incl {
  margin-top: 10px;
}
.as-kind {
  margin-right: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sx-text-3);
}
.as-muted {
  font-weight: 400;
  color: var(--sx-text-2);
}
.ig-incl .t a {
  color: var(--ig-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ig-incl .t a:hover {
  text-decoration-thickness: 2px;
}
.ig-incl .t,
.ig-incl .s {
  overflow-wrap: anywhere;
}

/* ── further examples ────────────────────────────────────────────────── */
.as-examples {
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr);
}
.as-example-n {
  margin: 0 0 8px;
  font-family: var(--ig-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sx-text-3);
}

/* ── a buyer's own copy ──────────────────────────────────────────────────
   The old page's Ownership tab, in Details under the seller card: the certificate, the version they
   hold, the updates they are owed. Not in the prototype. A hairline card, as the product page draws its. */
.as-copy {
  margin-top: 28px;
  padding: 18px 20px;
  border-radius: var(--sx-r-lg, 14px);
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.as-copy-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.as-copy-head .n {
  font-family: var(--ig-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sx-text-3);
}
.as-copy-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.as-copy .ig-spec {
  margin-top: 0;
}
.as-copy-btn {
  margin-left: 10px;
  vertical-align: middle;
}
.as-copy-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--sx-text-2);
  text-wrap: pretty;
}
.as-copy-note b {
  color: var(--sx-text);
  font-weight: 600;
}

/* ── post-purchase panel ─────────────────────────────────────────────────
   One-time, on the return from checkout. Not in the prototype: it is the live page's, drawn in the
   design's own vocabulary (a hairline card, the page's accent on its tick). The ids it carries are
   `product_detail.js`'s. */
.as-post-wrap {
  padding-top: 24px;
}
.as-post {
  padding: 20px 22px;
  border-radius: var(--sx-r-lg, 14px);
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--ig-accent-line) inset;
}
.as-post-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.as-post-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--ig-accent-soft);
  box-shadow: 0 0 0 1px var(--ig-accent-line) inset;
  color: var(--ig-accent);
}
.as-post-head > div {
  min-width: 0;
}
.as-post-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.as-post-head p {
  margin: 6px 0 0;
  max-width: 68ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--sx-text-2);
  text-wrap: pretty;
}
.as-post-since {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12.5px;
}
.as-post-status {
  margin-top: 14px;
  min-height: 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--sx-text-2);
}
.as-post-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.as-post > .ig-btn {
  margin-top: 12px;
}