/* =====================================================================
 *  proof.css — Creation Journey (buyers) and Proof of Process (reviewers).
 *  Used by marketplace.php, artist_dashboard.php, admin.php,
 *  subadmin_dashboard.php and index.php. The stage squares, the dashed
 *  line and the "✦ A Real Touch" badge themselves live in oweili.css.
 *  Text is printed in both languages; only the one matching the page
 *  direction is shown (bi-en / bi-ar rule in oweili.css).
 * ===================================================================== */
.m-journey[hidden] { display: none !important; }

.pj { margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid var(--color-border); }
.pj-title { font-size: var(--fs-subtitle); font-weight: 700; color: var(--color-dark); margin: 0 0 var(--space-sm); }

/* stage captions under each square */
.stages-journey .stage, .stages-proof .stage { width: calc(var(--stage-size) + 24px); text-align: center; }
.stages-proof .stage { width: calc(var(--stage-size) + 48px); }
.stages .stage-note { display: block; font-size: var(--fs-label); line-height: 1.4; color: var(--color-dark); }
.stage.missing .stage-note { color: var(--color-body); }
.pj-date { display: block; font-size: var(--fs-min); line-height: 1.4; color: var(--color-body); }
.pj-gap  { display: block; font-size: var(--fs-min); line-height: 1.4; font-weight: 600; color: var(--color-accent-dark); }
.pj-warn {
  display: block; margin-top: 4px; padding: 4px 8px; border-radius: var(--radius-input);
  font-size: var(--fs-min); line-height: 1.4; font-weight: 700; color: var(--color-dark);
  background: var(--color-tint-pink); border: 1px solid rgba(var(--rgb-primary),0.3);
}
.stages-journey .stage-line, .stages-proof .stage-line { margin-top: calc(var(--stage-size) / 2); }

/* art type and colors used */
.pj-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--space-sm); font-size: 15px; color: var(--color-dark); }
.pj-meta-label { font-size: var(--fs-label); font-weight: 700; color: var(--color-dark); margin-inline-end: 4px; }
.pj-type { font-weight: 600; }
.pj-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong); font-size: var(--fs-label); font-weight: 600; color: var(--color-dark); background: var(--color-surface);
}
.pj-chip i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(var(--rgb-ink),0.2); }
.pj-note {
  margin: var(--space-sm) 0 0; padding: 12px 16px; border-radius: var(--radius-input);
  background: var(--color-tint-blue); border: 1px solid rgba(var(--rgb-accent),0.18);
  font-size: 15px; line-height: 1.6; color: var(--color-dark);
}

/* on narrow screens the three squares can scroll sideways instead of squeezing */
.stages-journey, .stages-proof { overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }