/* Capsule Marketplace (/products/capsule-marketplace/): page layout and the Fig. 01 feed demo parts.
   Shared classes are never redefined here; page-only classes carry the cm- prefix. */

.cm-link { margin-top: var(--s-5); font-weight: 500; }
/* Chapter 05 at >= 1024 px (short-chapter grid, contract J7): the link follows the lede it completes,
   in the right column, instead of landing under the heading */
@media (min-width: 1024px) {
  .chapter-section:not(:has(> :not(.rule-dots, .chapter, [popover]))) > .chapter:has(> .lede) > .cm-link { grid-column: 2; grid-row: 4; }
}

/* Fig. 01: sample rows keep their messy casing (fig.css uppercases canvas text) */
.cm-fig .cm-row text { text-transform: none; letter-spacing: 0; fill: var(--text); }
.cm-fig .cm-row rect { fill: var(--surface); transition: stroke var(--dur-s) var(--ease-out), opacity var(--dur-s) var(--ease-out); }
.cm-fig .cm-row { transition: opacity var(--dur-m) var(--ease-out); }
.cm-fig .cm-row.is-sent { opacity: 0.4; }
.cm-fig .cm-row.is-flag rect { stroke: var(--accent-soft); stroke-dasharray: 3 3; }
.cm-fig.cm-no-rejects .cm-row.is-flag rect { stroke: var(--ink-rule); stroke-dasharray: none; }

/* product card: a node drawn by hand (no symbol), so its paint lives here */
.cm-fig .cm-card-frame { fill: var(--fig-node-fill); stroke: var(--fig-node-stroke); stroke-width: var(--fig-stroke-w); vector-effect: non-scaling-stroke; transition: stroke var(--dur-m) var(--ease-out), fill var(--dur-m) var(--ease-out); }
.cm-fig .cm-card.is-lit .cm-card-frame,
html:not(.js) .cm-fig .cm-card-frame { stroke: var(--fig-node-lit); fill: var(--surface); }
.cm-fig .cm-key { fill: var(--text-2); transition: fill var(--dur-s) var(--ease-out); }
.cm-fig .cm-val { fill: var(--text); text-transform: none; letter-spacing: 0.01em; transition: opacity var(--dur-s) var(--ease-out), transform var(--dur-s) var(--ease-out); }
.cm-fig .cm-check { fill: none; stroke: var(--accent); stroke-width: var(--fig-stroke-w); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 24; stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-s) var(--ease-mech); }
.cm-fig .cm-reviewed text { fill: var(--accent); transition: opacity var(--dur-s) var(--ease-out); }

/* armed (page module loaded, full motion): values wait for their turn, the check waits for review */
.cm-fig.cm-armed .cm-val:not(.is-set) { opacity: 0; transform: translateX(-6px); }
.cm-fig.cm-armed .cm-val.is-set { transform: none; }
.cm-fig .cm-key.is-new { fill: var(--accent); }
.cm-fig.cm-armed:not(.cm-done) .cm-check { stroke-dashoffset: 24; }
.cm-fig.cm-armed:not(.cm-done) .cm-reviewed text { opacity: 0; }

/* SHOW REJECTS off: the detour and the note go; the person stays, dimmed */
.cm-fig.cm-no-rejects [data-route="reject"] { opacity: 0; }
.cm-fig.cm-no-rejects [data-node="human"] .node-flag { opacity: 0; }
/* with the person switched off nothing was reviewed: the card does not claim it */
.cm-fig.cm-no-rejects .cm-reviewed { opacity: 0; }

@media (max-width: 639px) {
  .cm-fig .fig-canvas { padding: var(--s-2); }
}

/* reduced motion: final states, no transitions */
html[data-motion="reduce"] .cm-fig :is(.cm-row, .cm-row rect, .cm-card-frame, .cm-key, .cm-val, .cm-check, .cm-reviewed text) { transition: none; }
@media (prefers-reduced-motion: reduce) {
  :root .cm-fig :is(.cm-row, .cm-row rect, .cm-card-frame, .cm-key, .cm-val, .cm-check, .cm-reviewed text) { transition: none; }
}