/* ── Shared pp-* detail-page component CSS ──────────────────────────
   Consumed by persona_detail.html, prompt_detail.html and
   skill_detail.html. Extracted from the near-identical inline
   <style> blocks those three templates carried independently
   (#3756) so a change to a shared component (the access rail card,
   the tab band, .pp-rel-card, ...) only has to be made once.

   Every rule here is generic across listing type: it reads the
   page's own accent via --pp-accent / --pp-accent-2 / --pp-accent-soft
   / --pp-accent-line rather than a type-specific token. Each
   template aliases those onto its real --pp-persona / --pp-prompt /
   --pp-skill tokens (see the token block near the top of its own
   <style> block) — dark-mode re-flips keep working unmodified
   because var() resolves the alias against the cascade at use time,
   not at the point the alias is declared.

   Rules verified identical across ALL THREE pages are left as
   plain selectors. Rules verified identical across only TWO are
   deliberately scoped with a body.<type>-page prefix rather than
   left as a plain selector, even though nothing stops a plain
   class selector from working everywhere: the pp-* class
   vocabulary is shared, but a class NAME being reused is not proof
   the THIRD page means the same thing by it. skill's own .pp-locked
   is an unrelated locked-content notice box, not persona/prompt's
   small status pill -- an unscoped rule would have applied to it
   anyway and broken it. Only extend a rule to a page whose copy was
   actually diffed and found identical.

   Rules that render the same today but carry real per-type intent
   (spacing, shadows, a type's own accent-tinted shadow, ...) were
   deliberately left where they were: in the page that owns them.
   See the issue for the full accounting.

   Load this *before* a page's own <style> block (same as every
   other stylesheet in extra_head) so a page-local override with
   equal specificity still wins. */



/* ── Page shell (product-main width alignment, hero breakout, pp-grid breakpoint) ─ */

/* ── Align post-hero content (tabs + panels) to sx-container width ──── */

body.persona-page .product-main > .page-shell > .product-body,
body.persona-page .product-main > .page-shell > section:not(.product-hero):not(.checkout-summary),
body.persona-page .product-main > .page-shell > .marketplace-back-link-block,
body.persona-page .product-main > .page-shell > .pp-grid,
body.prompt-page .product-main > .page-shell > .product-body,
body.prompt-page .product-main > .page-shell > section:not(.product-hero):not(.checkout-summary),
body.prompt-page .product-main > .page-shell > .marketplace-back-link-block,
body.prompt-page .product-main > .page-shell > .pp-grid {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}

body.persona-page .product-main > .page-shell > .product-hero,
body.prompt-page .product-main > .page-shell > .product-hero {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 760px) {
  body.persona-page .product-main > .page-shell > .product-body,
  body.persona-page .product-main > .page-shell > section:not(.product-hero):not(.checkout-summary),
  body.persona-page .product-main > .page-shell > .pp-grid,
  body.prompt-page .product-main > .page-shell > .product-body,
  body.prompt-page .product-main > .page-shell > section:not(.product-hero):not(.checkout-summary),
  body.prompt-page .product-main > .page-shell > .pp-grid {
      padding-left: 20px;
      padding-right: 20px;
  }
}

/* Breathing room between the last tab content (or the related strip)
   and the footer, so the sticky tab band has room to release. */

body.persona-page .product-main,
body.prompt-page .product-main,
body.skill-page .product-main { padding-bottom: clamp(56px, 7vw, 96px); }

@media (max-width: 1080px) {
  .pp-grid { grid-template-columns: 1fr; gap: 24px; }
}


/* ── Hero (background art, breadcrumbs, cover frame) ───────────── */

.pp-hero-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
  radial-gradient(60% 60% at 18% 30%, var(--pp-accent-soft) 0%, transparent 60%),
  radial-gradient(80% 60% at 100% 0%, color-mix(in srgb, var(--pp-accent) 8%, transparent) 0%, transparent 55%);
}

.pp-hero > * { position: relative; }

/* Wayfinder-styled breadcrumb (matches the sx-eb eyebrow look; full path kept). */

.pp-crumbs {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 4px;
  font-family: var(--sx-font-body, 'Geist', system-ui, sans-serif);
  font-size: 13px; font-weight: 600; letter-spacing: 0.005em; line-height: 1.4;
  color: var(--sx-text-2, #4B5263);
}

.pp-crumbs a { color: var(--sx-brand-3, #3D4DFF); text-decoration: none; transition: color 120ms; }

.pp-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

.pp-crumbs .sep { font-size: 0; }

.pp-crumbs .sep::before { content: "›"; font-size: 13px; color: var(--sx-mute, #B7BCC8); }

.pp-crumbs .curr { color: var(--sx-text-2, #4B5263); font-weight: 600; }

.pp-hero .product-hero-layout { display: block; }

.pp-hero .product-heading.product-heading-main { padding: 0; }

@media (max-width: 980px) {
  .pp-hero .prompt-hero-content {
      grid-template-columns: 1fr;
      gap: 24px;
      align-items: start;
  }
}

/* The visual is a grid cell that stretches to the hero's full height (base
   rule provides display:flex; justify-content:center), so the cover fills
   the column instead of floating small and centered. */

.pp-hero .prompt-hero-visual { min-width: 0; }

.pp-cover-tag .d {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pp-accent);
}

.pp-cover-frame .listing-cover-hero {
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  margin: 0;
}

.pp-cover-frame .listing-cover-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.persona-page .pp-cover-frame .listing-cover-hero-placeholder .placeholder-title,
body.persona-page .pp-cover-frame .listing-cover-hero-placeholder .placeholder-caption,
body.prompt-page .pp-cover-frame .listing-cover-hero-placeholder .placeholder-title,
body.prompt-page .pp-cover-frame .listing-cover-hero-placeholder .placeholder-caption {
  color: rgba(255,255,255,0.92);
  position: relative;
  z-index: 1;
}

.pp-hero .product-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

body.persona-page .pp-hero .product-info > .eyebrow .d,
body.skill-page .pp-hero .product-info > .eyebrow .d {
  flex-shrink: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pp-accent);
  box-shadow: 0 0 0 3px var(--pp-accent-soft);
}

body.persona-page .pp-hero .product-info > .eyebrow .sep,
body.skill-page .pp-hero .product-info > .eyebrow .sep {
  flex-shrink: 0;
  width: 1px; height: 11px;
  background: var(--sx-line-2, #D6D9E1);
}

body.persona-page .pp-hero .product-info > .eyebrow .mono,
body.skill-page .pp-hero .product-info > .eyebrow .mono {
  text-transform: none;
  letter-spacing: 0;
  color: var(--sx-text-3, #616879);
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 760px) {
  body.persona-page .pp-hero .product-info > .eyebrow,
  body.skill-page .pp-hero .product-info > .eyebrow { flex-wrap: wrap; white-space: normal; }
}

.pp-hero .product-info .title-row { margin: 0; }


/* ── Hero meta pairs + tag chips (persona, skill; prompt has its own pp-stripe-cell variant) ─ */

body.persona-page .pp-hero-meta,
body.skill-page .pp-hero-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  padding: 16px 0;
  border-top: 1px solid var(--sx-line, rgba(20,22,28,0.10));
  border-bottom: 1px solid var(--sx-line, rgba(20,22,28,0.10));
  margin: 4px 0 18px;
}

body.persona-page .pp-meta-pair,
body.skill-page .pp-meta-pair { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

body.persona-page .pp-meta-pair .l,
body.skill-page .pp-meta-pair .l {
  font-family: var(--sx-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sx-mute, #B7BCC8);
}

body.persona-page .pp-meta-pair .v.mono,
body.skill-page .pp-meta-pair .v.mono { font-family: var(--sx-font-mono, 'JetBrains Mono', ui-monospace, monospace); }

/* Rating pair — star colored with the page's accent, muted review count beside it. */

body.persona-page .pp-meta-pair .v .star,
body.skill-page .pp-meta-pair .v .star { color: var(--pp-accent); }

body.persona-page .pp-meta-pair .v .rev,
body.skill-page .pp-meta-pair .v .rev { color: var(--sx-text-3, #616879); margin-left: 4px; font-size: 13px; }

body.persona-page .pp-meta-pair .pp-models,
body.skill-page .pp-meta-pair .pp-models { display: flex; flex-wrap: wrap; gap: 6px; }

body.persona-page .pp-tag,
body.prompt-page .pp-tag {
  display: inline-flex; align-items: center;
  height: 26px; padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--sx-line, rgba(20,22,28,0.10));
  background: var(--sx-surface, #FFFFFF);
  color: var(--sx-text-2, #4B5263);
  font-size: 12px;
  font-family: var(--sx-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}

body.persona-page .pp-tag::before,
body.prompt-page .pp-tag::before { content: "#"; color: var(--sx-mute, #B7BCC8); margin-right: 2px; }


/* ── Sticky tab band ───────────────────────────────────────────── */

body.persona-page .pp-tabs-row,
body.prompt-page .pp-tabs-row,
body.skill-page .pp-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  gap: 16px;
}

body.persona-page .pp-tabs-wrap #product-detail-tablist.type-tabs,
body.prompt-page .pp-tabs-wrap #product-detail-tablist.type-tabs,
body.skill-page .pp-tabs-wrap #product-detail-tablist.type-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow-x: auto;
  scrollbar-width: none;
  flex-wrap: nowrap;
  min-width: 0;
}

body.persona-page .pp-tabs-wrap #product-detail-tablist.type-tabs::-webkit-scrollbar,
body.prompt-page .pp-tabs-wrap #product-detail-tablist.type-tabs::-webkit-scrollbar,
body.skill-page .pp-tabs-wrap #product-detail-tablist.type-tabs::-webkit-scrollbar { display: none; }

@media (max-width: 720px) {
  body.persona-page .pp-tabs-wrap .tab-pill,
  body.prompt-page .pp-tabs-wrap .tab-pill,
  body.skill-page .pp-tabs-wrap .tab-pill {
      height: 42px;
      margin-right: 14px;
      font-size: 13px;
  }
}

@media (max-width: 480px) {
  body.persona-page .pp-tabs-wrap .tab-pill,
  body.prompt-page .pp-tabs-wrap .tab-pill,
  body.skill-page .pp-tabs-wrap .tab-pill {
      margin-right: 10px;
      font-size: 12.5px;
  }
}

body.persona-page .pp-tabs-aux,
body.prompt-page .pp-tabs-aux,
body.skill-page .pp-tabs-aux {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

body.persona-page .pp-tabs-aux .pp-tab-link,
body.prompt-page .pp-tabs-aux .pp-tab-link,
body.skill-page .pp-tabs-aux .pp-tab-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  box-shadow: none;
  min-height: 0;
  color: var(--sx-text-3, #616879);
  font-family: var(--sx-font-body, 'Geist', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s;
}

body.persona-page .pp-tabs-aux .pp-tab-link:hover,
body.prompt-page .pp-tabs-aux .pp-tab-link:hover,
body.skill-page .pp-tabs-aux .pp-tab-link:hover {
  background: var(--sx-surface-2, #EFF0F4);
  color: var(--sx-text, #15171C);
}

@media (max-width: 760px) {
  body.persona-page .pp-tabs-aux,
  body.prompt-page .pp-tabs-aux,
  body.skill-page .pp-tabs-aux { display: none; }
}


/* ── Sidebar rail: access card, seller card, share button (persona, skill; prompt has its own access rail) ─ */

body.persona-page .pp-rail-card .sx-eyebrow,
body.skill-page .pp-rail-card .sx-eyebrow {
  font-family: var(--sx-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sx-text-3, #616879);
}

body.persona-page .pp-access-price-row,
body.skill-page .pp-access-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

body.persona-page .pp-access-price,
body.skill-page .pp-access-price {
  font-family: 'Space Grotesk', 'Geist', system-ui, sans-serif;
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.02em;
  color: var(--sx-text, #15171C);
}

body.persona-page .pp-access-price.is-free,
body.skill-page .pp-access-price.is-free { color: var(--sx-good, #1F8A4C); }

.pp-access-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.pp-access-bullets li svg { color: var(--sx-good, #1F8A4C); flex-shrink: 0; }

body.persona-page .pp-rail-card .product-share,
body.skill-page .pp-rail-card .product-share {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px dashed var(--sx-line, rgba(20,22,28,0.10));
}

body.persona-page .pp-rail-card .product-share-label,
body.skill-page .pp-rail-card .product-share-label {
  font-size: 12px;
  color: var(--sx-text-3, #616879);
  margin-right: 2px;
}

/* base.css applies `button { min-height: 38px }` (and 44px on mobile)
   which stretched the copy-link <button> into an oval while the <a> share
   links stayed circular — the exact cross-listing drift #3716 calls out.
   Pin every share control to a 28px square so border-radius:999px renders
   a true circle. */

body.persona-page .product-share-button,
body.skill-page .product-share-button {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 999px;
  flex: 0 0 auto;
}

body.persona-page .product-share-button .fa-icon,
body.skill-page .product-share-button .fa-icon {
  width: 14px;
  height: 14px;
}

body.persona-page .pp-rail-card.pp-seller .pp-seller-row,
body.skill-page .pp-rail-card.pp-seller .pp-seller-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

body.persona-page .pp-rail-card.pp-seller .pp-seller-av,
body.skill-page .pp-rail-card.pp-seller .pp-seller-av {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--sx-surface-2, #EFF0F4);
  border: 1px solid var(--sx-line, rgba(20,22,28,0.10));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sx-font-display, 'Space Grotesk', system-ui, sans-serif);
  font-weight: 600;
  font-size: 16px;
  color: var(--sx-text, #15171C);
  flex-shrink: 0;
  object-fit: cover;
  overflow: hidden;
}

body.persona-page .pp-rail-card.pp-seller .pp-seller-av--img,
body.skill-page .pp-rail-card.pp-seller .pp-seller-av--img { background: var(--sx-bg-2, #F4F5F8); padding: 0; }

body.persona-page .pp-rail-card.pp-seller .pp-seller-info,
body.skill-page .pp-rail-card.pp-seller .pp-seller-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

body.persona-page .pp-rail-card.pp-seller .pp-seller-name-row,
body.skill-page .pp-rail-card.pp-seller .pp-seller-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

body.persona-page .pp-rail-card.pp-seller .pp-seller-display-name,
body.skill-page .pp-rail-card.pp-seller .pp-seller-display-name {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--sx-text, #15171C);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

body.persona-page .pp-rail-card.pp-seller .pp-seller-verified,
body.skill-page .pp-rail-card.pp-seller .pp-seller-verified {
  color: var(--sx-brand, #2A33C4);
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sx-brand, #2A33C4) 12%, transparent);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body.persona-page .pp-rail-card.pp-seller .pp-seller-handle,
body.skill-page .pp-rail-card.pp-seller .pp-seller-handle {
  font-family: var(--sx-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 12px;
  color: var(--sx-text-3, #616879);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.persona-page .pp-rail-card.pp-seller .pp-seller-bio,
body.skill-page .pp-rail-card.pp-seller .pp-seller-bio {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--sx-text-2, #4B5263);
}

body.persona-page .pp-rail-card.pp-seller .pp-seller-stats-grid > div,
body.skill-page .pp-rail-card.pp-seller .pp-seller-stats-grid > div { text-align: center; min-width: 0; }

body.persona-page .pp-rail-card.pp-seller .pp-seller-stats-grid .v,
body.skill-page .pp-rail-card.pp-seller .pp-seller-stats-grid .v {
  font-family: var(--sx-font-display, 'Space Grotesk', system-ui, sans-serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--sx-text, #15171C);
  font-variant-numeric: tabular-nums;
}

body.persona-page .pp-rail-card.pp-seller .pp-seller-stats-grid .l,
body.skill-page .pp-rail-card.pp-seller .pp-seller-stats-grid .l {
  font-family: var(--sx-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sx-text-faint, #B0B5C2);
  margin-top: 2px;
}

body.persona-page .pp-seller-profile-link,
body.skill-page .pp-seller-profile-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px dashed var(--sx-line, rgba(20,22,28,0.10));
  font-size: 13px;
  color: var(--sx-text-2, #4B5263);
  text-decoration: none;
}

body.persona-page .pp-seller-profile-link:hover,
body.skill-page .pp-seller-profile-link:hover { color: var(--sx-text, #15171C); }


/* ── "You own this" badge + stats list ─────────────────────────── */

.pp-owned {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--sx-good, #1F8A4C) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--sx-good, #1F8A4C) 30%, var(--sx-line, rgba(20,22,28,0.10)));
}

.pp-owned .ico {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sx-good, #1F8A4C);
  color: #FFFFFF;
}

.pp-owned .t { font-weight: 600; font-size: 14px; color: var(--sx-text, #15171C); }

.pp-owned .s { font-size: 12px; color: var(--sx-text-3, #616879); margin-top: 1px; }


/* ── Automated-test verdict badge (#3117) ──────────────────────── */
/* Only persona/skill store a testing_state; prompt has none, so -- unlike
   .pp-owned above -- this stays explicitly scoped rather than unscoped. */

body.persona-page .pp-test-badge,
body.skill-page .pp-test-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 14px;
}

body.persona-page .pp-test-badge svg,
body.skill-page .pp-test-badge svg { flex-shrink: 0; }

body.persona-page .pp-test-badge[data-testing-verdict="pass"],
body.skill-page .pp-test-badge[data-testing-verdict="pass"] {
  color: var(--sx-good, #1F8A4C);
  background: color-mix(in srgb, var(--sx-good, #1F8A4C) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--sx-good, #1F8A4C) 30%, transparent);
}

body.persona-page .pp-test-badge[data-testing-verdict="warn"],
body.skill-page .pp-test-badge[data-testing-verdict="warn"] {
  color: var(--sx-warn, #C77800);
  background: color-mix(in srgb, var(--sx-warn, #C77800) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--sx-warn, #C77800) 30%, transparent);
}

.pp-stats-list { list-style: none; margin: 0; padding: 0; }

.pp-stats-list li:last-child { border-bottom: 0; }

.pp-stats-list .l { color: var(--sx-text-3, #616879); }

body.persona-page .pp-stats-list .v.mono,
body.skill-page .pp-stats-list .v.mono {
  font-family: var(--sx-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 13px;
}


/* ── Generic .pp-card shell + version history ──────────────────── */

body.persona-page .pp-card,
body.skill-page .pp-card {
  background: var(--sx-bg-1, #FFFFFF);
  border: 1px solid var(--sx-line, rgba(20,22,28,0.10));
  border-radius: var(--sx-r-lg, 14px);
  padding: 28px;
  box-shadow: var(--sx-shadow-md, 0 6px 24px rgba(20,22,28,0.05));
}

.pp-card .pp-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.pp-card.pp-versions .pp-ver-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.pp-card.pp-versions .pp-ver {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding-bottom: 22px;
  position: relative;
}

.pp-card.pp-versions .pp-ver:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 22px;
  bottom: 0;
  width: 1px;
  background: var(--sx-line, rgba(20,22,28,0.10));
}

.pp-card.pp-versions .pp-ver-rail {
  padding-top: 4px;
  display: flex;
  justify-content: center;
}

.pp-card.pp-versions .pp-ver-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.pp-card.pp-versions .pp-ver-num {
  font-family: var(--sx-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 13px;
  color: var(--sx-text, #15171C);
  font-weight: 500;
}

.pp-card.pp-versions .pp-ver-date {
  color: var(--sx-text-3, #616879);
  font-size: 12px;
  margin-left: auto;
}

.pp-card.pp-versions .pp-ver-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--sx-text, #15171C);
  margin-bottom: 4px;
}

.pp-card.pp-versions .pp-ver-body-text {
  font-size: 13.5px;
  color: var(--sx-text-3, #616879);
  line-height: 1.6;
  max-width: 70ch;
}

body.persona-page .pp-card.pp-versions .pp-ver-body-text .mono,
body.skill-page .pp-card.pp-versions .pp-ver-body-text .mono {
  font-family: var(--sx-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 12px;
}


/* ── Message exchange preview (persona, prompt) ────────────────── */

body.persona-page .pp-mini-btn:hover,
body.prompt-page .pp-mini-btn:hover { background: var(--sx-surface-2, #EFF0F4); color: var(--sx-text, #15171C); }

body.persona-page .pp-locked,
body.persona-page .pp-tested,
body.prompt-page .pp-locked,
body.prompt-page .pp-tested {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--sx-surface-2, #EFF0F4);
  color: var(--sx-text-3, #616879);
  border: 1px solid var(--sx-line, rgba(20,22,28,0.10));
  font-family: var(--sx-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px;
  white-space: nowrap;
}

body.persona-page .pp-msg,
body.prompt-page .pp-msg {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px dashed var(--sx-line, rgba(20,22,28,0.10));
}

body.persona-page .pp-msg:last-of-type,
body.prompt-page .pp-msg:last-of-type { border-bottom: 0; }

body.persona-page .pp-msg-side,
body.prompt-page .pp-msg-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  width: 64px;
  padding-top: 4px;
}

body.persona-page .pp-msg-av,
body.prompt-page .pp-msg-av {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  font-family: 'Space Grotesk', 'Geist', system-ui, sans-serif;
}

body.persona-page .pp-msg-av.user,
body.prompt-page .pp-msg-av.user {
  background: var(--sx-surface-2, #EFF0F4);
  color: var(--sx-text, #15171C);
  border: 1px solid var(--sx-line, rgba(20,22,28,0.10));
}

body.persona-page .pp-msg-body,
body.prompt-page .pp-msg-body { flex: 1; min-width: 0; }

body.persona-page .pp-msg-body p:last-child,
body.prompt-page .pp-msg-body p:last-child { margin-bottom: 0; }

body.persona-page .pp-msg-body h1,
body.persona-page .pp-msg-body h2,
body.persona-page .pp-msg-body h3,
body.prompt-page .pp-msg-body h1,
body.prompt-page .pp-msg-body h2,
body.prompt-page .pp-msg-body h3 {
  font-family: 'Space Grotesk', 'Geist', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 18px 0 8px;
  color: var(--sx-text, #15171C);
}

body.persona-page .pp-msg-body :first-child,
body.prompt-page .pp-msg-body :first-child { margin-top: 0; }

body.persona-page .pp-msg-body ul,
body.persona-page .pp-msg-body ol,
body.prompt-page .pp-msg-body ul,
body.prompt-page .pp-msg-body ol {
  margin: 0 0 12px; padding-left: 20px; color: var(--sx-text, #15171C); font-size: 14.5px; line-height: 1.65;
}

body.persona-page .pp-msg-body code,
body.prompt-page .pp-msg-body code {
  font-family: var(--sx-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 12.5px;
  background: var(--sx-surface, #F7F8FB);
  border: 1px solid var(--sx-line, rgba(20,22,28,0.10));
  padding: 1px 5px;
  border-radius: 4px;
}

body.persona-page .pp-exchange-foot,
body.prompt-page .pp-exchange-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--sx-line, rgba(20,22,28,0.10));
  flex-wrap: wrap;
  gap: 12px;
}

body.persona-page .pp-tested-models,
body.prompt-page .pp-tested-models {
  color: var(--sx-text-3, #616879);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

body.persona-page .pp-tested-models .mb,
body.prompt-page .pp-tested-models .mb {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--sx-surface-2, #EFF0F4);
  border: 1px solid var(--sx-line, rgba(20,22,28,0.10));
  font-family: var(--sx-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px;
  color: var(--sx-text-2, #4B5263);
}

body.persona-page .pp-mini-btn[disabled],
body.prompt-page .pp-mini-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}


/* ── Building blocks grid (persona, prompt) ────────────────────── */

@media (max-width: 760px) {
  body.persona-page .pp-blocks-grid,
  body.prompt-page .pp-blocks-grid { grid-template-columns: 1fr; }
}

body.persona-page .pp-block-body,
body.prompt-page .pp-block-body { flex: 1; min-width: 0; }

body.persona-page .pp-block-name,
body.prompt-page .pp-block-name {
  font-weight: 600;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 4px;
  color: var(--sx-text, #15171C);
}

body.persona-page .pp-block-desc,
body.prompt-page .pp-block-desc {
  color: var(--sx-text-3, #616879);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

body.persona-page .pp-blocks-foot,
body.prompt-page .pp-blocks-foot {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed var(--sx-line, rgba(20,22,28,0.10));
}


/* ── FAQ accordion (persona, prompt) ───────────────────────────── */

/* ── FAQ (prototype pp-faq, native <details> accordion) ── */

body.persona-page .pp-faq-list,
body.prompt-page .pp-faq-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }

body.persona-page .pp-faq-list li,
body.prompt-page .pp-faq-list li { border-bottom: 1px solid var(--sx-line, rgba(20,22,28,0.10)); }

body.persona-page .pp-faq-list li:last-child,
body.prompt-page .pp-faq-list li:last-child { border-bottom: 0; }

body.persona-page .pp-faq-list details,
body.prompt-page .pp-faq-list details { padding: 14px 0; }

body.persona-page .pp-faq-list summary,
body.prompt-page .pp-faq-list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

body.persona-page .pp-faq-list summary::-webkit-details-marker,
body.prompt-page .pp-faq-list summary::-webkit-details-marker { display: none; }

body.persona-page .pp-faq-q,
body.prompt-page .pp-faq-q { font-size: 15px; font-weight: 500; color: var(--sx-text, #15171C); }

body.persona-page .pp-faq-ico,
body.prompt-page .pp-faq-ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sx-text-3, #616879);
  transition: transform .15s, color .15s;
}

body.persona-page .pp-faq-ico svg,
body.prompt-page .pp-faq-ico svg { display: block; width: 15px; height: 15px; }

body.persona-page .pp-faq-list summary:hover .pp-faq-ico,
body.prompt-page .pp-faq-list summary:hover .pp-faq-ico { color: var(--sx-text, #15171C); }

body.persona-page .pp-faq-list details[open] .pp-faq-ico,
body.prompt-page .pp-faq-list details[open] .pp-faq-ico { transform: rotate(180deg); }

body.persona-page .pp-faq-list p,
body.prompt-page .pp-faq-list p {
  color: var(--sx-text-3, #616879);
  font-size: 14px;
  line-height: 1.6;
  margin: 10px 0 4px;
  max-width: 70ch;
}


/* ── Compiled/code viewer + source blocks (persona, prompt) ────── */

body.persona-page .pp-card.pp-compiled .pp-compiled-actions,
body.prompt-page .pp-card.pp-compiled .pp-compiled-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

body.persona-page .pp-card.pp-compiled .pp-compiled-pre,
body.prompt-page .pp-card.pp-compiled .pp-compiled-pre {
  margin: 0;
  padding: 16px 18px;
  background: var(--sx-bg-2, #F4F5F8);
  border: 1px solid var(--sx-line, rgba(20,22,28,0.10));
  border-radius: var(--sx-r-md, 10px);
  font-family: var(--sx-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--sx-text, #15171C);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 460px;
  overflow: auto;
}

body.persona-page .pp-code-wrap,
body.prompt-page .pp-code-wrap {
  position: relative;
  border: 1px solid var(--sx-line, rgba(20,22,28,0.10));
  border-radius: var(--sx-r-md, 10px);
  overflow: hidden;
  background: var(--sx-bg-2, #F4F5F8);
}

body.persona-page .pp-code-bar .fn,
body.prompt-page .pp-code-bar .fn {
  font-family: var(--sx-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11.5px;
  color: var(--sx-text-3, #616879);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.persona-page .pp-code-dots,
body.prompt-page .pp-code-dots { display: inline-flex; gap: 6px; flex-shrink: 0; }

body.persona-page .pp-code-dots span,
body.prompt-page .pp-code-dots span {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--sx-surface-2, #EFF0F4);
  border: 1px solid var(--sx-line, rgba(20,22,28,0.10));
}

/* Inside the window the pre drops its own frame — the wrap supplies it. */

body.persona-page .pp-card.pp-compiled .pp-code-wrap .pp-compiled-pre,
body.prompt-page .pp-card.pp-compiled .pp-code-wrap .pp-compiled-pre {
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.persona-page .pp-src-list,
body.prompt-page .pp-src-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--sx-line, rgba(20,22,28,0.10));
  border-radius: var(--sx-r-md, 10px);
  overflow: hidden;
}

body.persona-page .pp-src-item,
body.prompt-page .pp-src-item {
  border-bottom: 1px solid var(--sx-line, rgba(20,22,28,0.10));
  background: var(--sx-bg-1, #FFFFFF);
}

body.persona-page .pp-src-item:last-child,
body.prompt-page .pp-src-item:last-child { border-bottom: 0; }

body.persona-page .pp-src-item > details > summary.pp-src-row,
body.prompt-page .pp-src-item > details > summary.pp-src-row {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  transition: background 0.12s ease;
}

body.persona-page .pp-src-item > details > summary.pp-src-row::-webkit-details-marker,
body.prompt-page .pp-src-item > details > summary.pp-src-row::-webkit-details-marker { display: none; }

body.persona-page .pp-src-row .nm,
body.prompt-page .pp-src-row .nm {
  font-weight: 600;
  font-size: 14.5px;
  flex: 1;
  min-width: 0;
  color: var(--sx-text, #15171C);
}

body.persona-page .pp-src-row .tok,
body.prompt-page .pp-src-row .tok {
  font-family: var(--sx-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11.5px;
  color: var(--sx-text-3, #616879);
  white-space: nowrap;
}

body.persona-page .pp-src-item > details[open] > summary.pp-src-row .ind,
body.prompt-page .pp-src-item > details[open] > summary.pp-src-row .ind { transform: rotate(180deg); }

body.persona-page .pp-src-body,
body.prompt-page .pp-src-body { padding: 0 18px 18px 50px; }

body.persona-page .pp-src-pre,
body.prompt-page .pp-src-pre {
  margin: 0;
  font-family: var(--sx-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--sx-text-2, #4B5263);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

body.persona-page .pp-src-body-foot,
body.prompt-page .pp-src-body-foot { display: flex; justify-content: flex-end; margin-top: 12px; }

@media (max-width: 560px) {
  body.persona-page .pp-src-body,
  body.prompt-page .pp-src-body { padding: 0 16px 16px 16px; }
}


/* ── Context-window token bar (persona, prompt) ────────────────── */

body.persona-page .pp-token-dots,
body.prompt-page .pp-token-dots { display: inline-flex; gap: 2px; }

body.persona-page .pp-card.pp-tokens .pp-card-head .pp-token,
body.prompt-page .pp-card.pp-tokens .pp-card-head .pp-token { align-self: center; }

body.persona-page .pp-tokens-bar,
body.prompt-page .pp-tokens-bar {
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--sx-line, rgba(20,22,28,0.10));
  background: var(--sx-bg-2, #F4F5F8);
  margin-bottom: 18px;
}

body.persona-page .pp-tokens-seg,
body.prompt-page .pp-tokens-seg {
  position: relative;
  transition: opacity .15s;
}

body.persona-page .pp-tokens-seg[data-i="1"],
body.prompt-page .pp-tokens-seg[data-i="1"] { background: #6A6FE0; }

body.persona-page .pp-tokens-seg[data-i="2"],
body.prompt-page .pp-tokens-seg[data-i="2"] { background: #9D6F1B; }

body.persona-page .pp-tokens-seg[data-i="3"],
body.prompt-page .pp-tokens-seg[data-i="3"] { background: #E2A33B; }

body.persona-page .pp-tokens-seg[data-i="4"],
body.prompt-page .pp-tokens-seg[data-i="4"] { background: #4FA697; }

body.persona-page .pp-tokens-seg:hover,
body.prompt-page .pp-tokens-seg:hover { opacity: 0.85; }

body.persona-page .pp-tokens-tip,
body.prompt-page .pp-tokens-tip {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--sx-surface-2, #EFF0F4);
  color: var(--sx-text, #15171C);
  font-family: var(--sx-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--sx-line, rgba(20,22,28,0.10));
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  z-index: 2;
}

body.persona-page .pp-tokens-seg:hover .pp-tokens-tip,
body.prompt-page .pp-tokens-seg:hover .pp-tokens-tip { opacity: 1; }

body.persona-page .pp-tokens-bar > .pp-tokens-seg:first-child .pp-tokens-tip,
body.prompt-page .pp-tokens-bar > .pp-tokens-seg:first-child .pp-tokens-tip {
  left: 0;
  transform: translateX(0);
}

body.persona-page .pp-tokens-bar > .pp-tokens-seg:last-child .pp-tokens-tip,
body.prompt-page .pp-tokens-bar > .pp-tokens-seg:last-child .pp-tokens-tip {
  left: auto;
  right: 0;
  transform: translateX(0);
}

body.persona-page .pp-tokens-legend,
body.prompt-page .pp-tokens-legend {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 16px;
}

@media (max-width: 760px) {
  body.persona-page .pp-tokens-legend,
  body.prompt-page .pp-tokens-legend { grid-template-columns: 1fr; }
}

body.persona-page .pp-tokens-legend li,
body.prompt-page .pp-tokens-legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--sx-text, #15171C);
}

body.persona-page .pp-tokens-legend .dot,
body.prompt-page .pp-tokens-legend .dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

body.persona-page .pp-tokens-legend .dot[data-i="1"],
body.prompt-page .pp-tokens-legend .dot[data-i="1"] { background: #6A6FE0; }

body.persona-page .pp-tokens-legend .dot[data-i="2"],
body.prompt-page .pp-tokens-legend .dot[data-i="2"] { background: #9D6F1B; }

body.persona-page .pp-tokens-legend .dot[data-i="3"],
body.prompt-page .pp-tokens-legend .dot[data-i="3"] { background: #E2A33B; }

body.persona-page .pp-tokens-legend .dot[data-i="4"],
body.prompt-page .pp-tokens-legend .dot[data-i="4"] { background: #4FA697; }

body.persona-page .pp-tokens-legend .n,
body.prompt-page .pp-tokens-legend .n { flex: 1; }

body.persona-page .pp-tokens-legend .t,
body.prompt-page .pp-tokens-legend .t {
  color: var(--sx-text-3, #616879);
  font-size: 12px;
}

body.persona-page .pp-tokens-note,
body.prompt-page .pp-tokens-note {
  margin: 0;
  padding-top: 14px;
  border-top: 1px dashed var(--sx-line, rgba(20,22,28,0.10));
  color: var(--sx-text-3, #616879);
  font-size: 13px;
  line-height: 1.55;
  max-width: 70ch;
}


/* ── Checkout summary / owner-mode banner (persona, prompt) ────── */

/* ── Owner / purchaser banner surface ─────────────────────────────────
   The purchase / creator banner composes from the same building block on
   both pages instead of falling back to the bare global .checkout-summary. */

body.persona-page .checkout-summary,
body.persona-page .owner-mode-banner,
body.prompt-page .checkout-summary,
body.prompt-page .owner-mode-banner {
  background: var(--sx-bg-1, #FFFFFF);
  border: 1px solid var(--sx-line, rgba(20,22,28,0.10));
  border-radius: var(--sx-r-lg, 14px);
  padding: 20px 24px;
  box-shadow: var(--sx-shadow-md, 0 6px 24px rgba(20,22,28,0.05));
  gap: 12px;
}

body.persona-page .owner-mode-banner,
body.prompt-page .owner-mode-banner {
  border-color: color-mix(in srgb, var(--sx-brand, #2A33C4) 25%, var(--sx-line, rgba(20,22,28,0.10)));
  background: linear-gradient(180deg, var(--sx-bg-1, #FFFFFF) 0%, var(--sx-bg-2, #F4F5F8) 100%);
}

body.persona-page .checkout-summary .checkout-summary-header h2,
body.persona-page .owner-mode-banner .checkout-summary-header h2,
body.prompt-page .checkout-summary .checkout-summary-header h2,
body.prompt-page .owner-mode-banner .checkout-summary-header h2 {
  font-family: var(--sx-font-display, 'Space Grotesk', 'Geist', system-ui, sans-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--sx-text, #15171C);
  margin: 0;
}

body.persona-page .checkout-summary .checkout-actions-row,
body.persona-page .owner-mode-banner .checkout-actions-row,
body.prompt-page .checkout-summary .checkout-actions-row,
body.prompt-page .owner-mode-banner .checkout-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

body.persona-page .owner-mode-banner .owner-moderation-guidance,
body.prompt-page .owner-mode-banner .owner-moderation-guidance {
  margin: 0;
  font-size: 12.5px;
  color: var(--sx-text-3, #616879);
  line-height: 1.55;
}

body.persona-page .owner-mode-banner .assistant-selection-hint,
body.persona-page .checkout-summary .assistant-selection-hint,
body.prompt-page .owner-mode-banner .assistant-selection-hint,
body.prompt-page .checkout-summary .assistant-selection-hint {
  font-size: 13px;
  color: var(--sx-text-3, #616879);
  margin: 0;
}


/* ── "More from this seller" related grid ──────────────────────── */

.pp-related {
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: clamp(28px, 3.5vw, 40px);
  border-top: 1px solid var(--sx-line, rgba(20,22,28,0.10));
}

.pp-related-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.pp-related-head .sx-eyebrow {
  display: inline-block;
  font-family: var(--sx-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sx-text-3, #616879);
}

.pp-related-head h2 {
  font-family: 'Space Grotesk', 'Geist', system-ui, sans-serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 6px 0 0;
  color: var(--sx-text, #15171C);
}

.pp-related-head .pp-related-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--sx-text-2, #4B5263);
  text-decoration: none;
  transition: background .15s, color .15s;
}

.pp-related-head .pp-related-more:hover {
  background: var(--sx-surface-2, #F7F8FB);
  color: var(--sx-text, #15171C);
}

.pp-related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1080px) {
  .pp-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .pp-related-grid { grid-template-columns: 1fr; }
}

.pp-rel-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pp-rel-tag {
  position: absolute; left: 12px; top: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(11,13,18,0.6);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.92);
  font-family: var(--sx-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.persona-page .pp-rel-tag--agent .d,
body.skill-page .pp-rel-tag--agent .d { background: #C7A0FF; }

.pp-rel-body {
  padding: 14px 16px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.pp-rel-name {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--sx-text, #15171C);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.pp-rel-desc {
  font-size: 13px;
  color: var(--sx-text-2, #4B5263);
  line-height: 1.5;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pp-rel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px dashed var(--sx-line, rgba(20,22,28,0.10));
}

.pp-rel-author {
  color: var(--sx-text-3, #616879);
  font-size: 11px;
  font-family: var(--sx-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}


/* ── Meta-value + file-chip variants (skill today; same accent contract ── */
/* Only skill_detail.html renders these markers today (SKILL.md file
   chip, "Validated" status value) — moved here anyway per #3756's
   comment thread, since they're the same kind of per-value styling as
   the hero meta pairs above and any future prompt/persona use should
   get them for free rather than re-copying. Scoped to body.skill-page,
   same policy as every other not-yet-all3 rule in this file. */

/* Status pair — "Validated" reads green with a shield, matching the v2
   design's hero status. */

body.skill-page .pp-meta-pair .v.pp-status-ok { color: var(--sx-good, #1F8A4C); }

body.skill-page .pp-meta-pair .v.pp-status-ok svg { flex-shrink: 0; }

body.skill-page .pp-meta-item .pp-meta-val { font-size: 14px; line-height: 1.4; color: var(--sx-text, #15171C); word-break: break-word; }

body.skill-page .pp-meta-item .pp-meta-val.mono { font-family: var(--sx-font-mono, 'JetBrains Mono', ui-monospace, monospace); }

body.skill-page .pp-meta-item .pp-meta-val.ok {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--sx-good, #1F8A4C);
}

body.skill-page .pp-meta-item .pp-meta-val.ok svg { flex-shrink: 0; }

body.skill-page .pp-mdfile {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border-radius: 6px;
  background: var(--sx-bg-2, #F4F5F8);
  border: 1px solid var(--sx-line, rgba(20,22,28,0.10));
  font-family: var(--sx-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11.5px; color: var(--sx-text-2, #4B5263);
  white-space: nowrap; flex-shrink: 0;
}

body.skill-page .pp-mdfile svg { color: var(--pp-accent); flex-shrink: 0; }

body.skill-page .pp-mdfile .pp-mdfile-size { color: var(--sx-text-faint, #B0B5C2); }