/* ---------------------------------------------------------------------------
   Design tokens — THE control surface for every proof container on the site.
   Edit these to retheme every stage and window at once.
   -------------------------------------------------------------------------- */
:root {
  --proof-stage-bg: var(--launch-surface, #f6f6f7);
  --proof-stage-pad: clamp(14px, 2vw, 26px);
  --proof-stage-radius: 10px;
  --proof-win-radius: 8px;
  --proof-win-border: 1px solid var(--line, #e4e4e7);
  --proof-win-shadow: 0 24px 60px -30px rgba(18, 18, 20, .35);
  --proof-bar-h: 36px;
}

/* Proof window: the one macOS app-window frame every product-proof capture sits in.
   Replaces the per-page browser/URL-pill frames. Structure:

     .proof-stage            tinted inset panel the window sits on
       .proof-window         the macOS window itself
         .proof-window__bar  traffic lights + optional title + optional badge
         .proof-window__body media slot (img or video), clipped to the inner radius

   Geometry follows the tight-radius register: 8px outer, 5px inner, hairline
   border on --line, one long-throw shadow. No new tone, no new tokens. */

.proof-stage {
  padding: var(--proof-stage-pad);
  border-radius: var(--proof-stage-radius);
  background: var(--proof-stage-bg);
  box-shadow: none; /* elevation belongs to the window, never the ground */
}

.proof-window {
  overflow: hidden;
  border: var(--proof-win-border);
  border-radius: var(--proof-win-radius);
  background: #fff;
  box-shadow: var(--proof-win-shadow);
}

/* Title bar. The dots sit in a fixed-width lane so the centred title is centred
   against the window, not against the space the dots happen to leave. */
.proof-window__bar {
  position: relative;
  height: 36px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: #fbfbfc;
}

.proof-window__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.proof-window__dots i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d8d9dc;
}

.proof-window__dots i:nth-child(1) { background: #ff5f57; }
.proof-window__dots i:nth-child(2) { background: #febc2e; }
.proof-window__dots i:nth-child(3) { background: #28c840; }

/* Optical centring: the dots are round, so their mass sits a hair high against
   a cap-height title. Nudge the label, not the dots. */
.proof-window__title {
  grid-column: 2;
  justify-self: center;
  min-width: 0;
  overflow: hidden;
  color: rgba(24, 24, 27, .58);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.proof-window__badge {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(24, 24, 27, .52);
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
}

.proof-window__badge i {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
}

/* Media slot. Own stacking context so the media's own corners cannot paint over
   the window's clip on Safari. */
.proof-window__body {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0 0 7px 7px;
  background: #101012;
  line-height: 0;
}

.proof-window__body > img,
.proof-window__body > video,
.proof-window__body > picture > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

/* Light library UI reads wrong on the dark plate; opt in per instance. */
.proof-window--light .proof-window__body { background: #f3f3f4; }

@media (max-width: 700px) {
  .proof-stage { padding: 12px; border-radius: 8px; }
  .proof-window__bar { height: 32px; gap: 8px; padding: 0 11px; }
  .proof-window__dots { gap: 6px; }
  .proof-window__dots i { width: 9px; height: 9px; }
  .proof-window__title { font-size: 10.5px; }
}

/* Below the badge's breathing room the title alone carries the bar. */
@media (max-width: 460px) {
  .proof-window__badge { display: none; }
  .proof-window__bar { grid-template-columns: auto 1fr; }
  .proof-window__title { grid-column: 2; justify-self: center; }
}

/* Reduced motion.

   CSS cannot pause a playing video, so there is no honest pure-CSS degrade for
   an autoplaying loop — and a rule that only restates a UA default would be
   dead code dressed as an accessibility fix. The contract is in the markup
   instead: every slot video carries `poster`, so the still that replaces the
   loop already exists and is already the right frame. A UA that stops autoplay
   under the preference shows it with no layout change, because the poster
   paints into the same box at the same `object-fit: contain` the frames use.

   If the motion loops later need to actually stop for these users, that is a
   JS change (pause() on the media query), not a CSS one — deliberately not
   built here, per the no-JS constraint on this component. */

/* ---------------------------------------------------------------------------
   Library mock — the app's shape drawn in the site's own hand, in the register
   of the Studio hero mock: real product thumbnails carry the proof, everything
   incidental (search, counts, chrome) reduces to quiet skeleton. Not a
   screenshot; an abstraction that stays true and never goes stale.
   -------------------------------------------------------------------------- */
.proof-window__body:has(.lib-mock) { background: #fff }

.lib-mock {
  display: grid;
  line-height: 1.35;
  grid-template-columns: 132px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  background: #fff;
  color: #8c8d92;
  font-size: 9px;
}
.lib-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px;
  border-right: 1px solid #ececef;
  background: #fbfbfc;
}
.lib-nav em {
  margin: 8px 0 3px 7px;
  color: #a9aaae;
  font-size: 7.5px;
  font-style: normal;
  letter-spacing: .02em;
}
.lib-nav em:first-child { margin-top: 0 }
.lib-nav span {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border-radius: 4px;
  color: #6d6e73;
}
.lib-nav span.is-active {
  background: #f0f0f2;
  color: #2c2d31;
  font-weight: 500;
}
.lib-dot {
  width: 9px;
  height: 9px;
  flex: none;
  border: 1px solid #cfd0d4;
  border-radius: 2px;
}
.lib-nav span.is-active .lib-dot { border-color: #9a9ba0 }
.lib-main { min-width: 0; display: flex; flex-direction: column; padding: 16px 16px 14px }
.lib-head strong {
  display: block;
  line-height: 1.2;
  color: #232428;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.lib-head small { display: block; margin-top: 3px; color: #97989d; font-size: 8.5px }
.lib-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 13px 0 11px;
  padding-top: 11px;
  border-top: 1px solid #ececef;
}
.lib-count { color: #6d6e73 }
.lib-skel { width: 132px; height: 17px; margin-left: auto; border: 1px solid #eaeaec; border-radius: 4px; background: #fafafb }
.lib-cta {
  padding: 5px 9px;
  border-radius: 4px;
  background: #191a1d;
  color: #fff;
  font-size: 8px;
  font-weight: 500;
}
.lib-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px 8px;
  align-content: start;
}
.lib-grid figure { min-width: 0; margin: 0 }
.lib-card-art {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 5px;
  background: #f2f2f3;
}
.lib-card-art img { width: 100%; height: 100%; display: block; object-fit: cover }
.lib-card-art { border: 1px solid #ececef }
.lib-grid figcaption { margin-top: 5px }
.lib-grid b { display: block; color: #35363a; font-size: 8.5px; font-weight: 500 }
.lib-grid small { display: block; margin-top: 1px; color: #a0a1a6; font-size: 7.5px }

@media (max-width: 700px) {
  .lib-mock { grid-template-columns: 1fr }
  .lib-nav { display: none }
  .lib-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .lib-main { padding: 13px 13px 0 }
}

/* ---------------------------------------------------------------------------
   Automation mock — the builder's shape: a left-to-right node graph with the
   selected step's settings open beside it. Same register as the library mock:
   real structure and real values, incidental chrome reduced to quiet skeleton.
   -------------------------------------------------------------------------- */
.auto-mock {
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #8c8d92;
  font-size: 9px;
  line-height: 1.35;
}
.auto-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid #ececef;
}
.auto-head-title strong {
  display: block;
  color: #232428;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.auto-head-title small { display: block; margin-top: 2px; color: #9a9ba0; font-size: 8px }
.auto-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid #e2e8e2;
  border-radius: 999px;
  background: #f4f8f4;
  color: #3f7a55;
  font-size: 8px;
  font-weight: 500;
}
.auto-state i { width: 5px; height: 5px; border-radius: 50%; background: #4f9e6a }
.auto-body { display: grid; grid-template-columns: minmax(0, 1fr) 190px; min-width: 0 }
.auto-canvas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  padding: 26px 18px;
  border-right: 1px solid #ececef;
  background:
    radial-gradient(circle at 1px 1px, #e7e7ea 1px, transparent 0) 0 0 / 13px 13px;
}
.auto-node {
  flex: 0 1 176px;
  min-width: 0;
  padding: 10px 11px 11px;
  border: 1px solid #e4e4e7;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 26px -22px rgba(18, 18, 20, .5);
}
.auto-node.is-selected { border-color: #b9b3d8; box-shadow: 0 0 0 2px rgba(124, 108, 190, .14) }
.auto-node em {
  display: block;
  margin-bottom: 6px;
  color: #a4a5aa;
  font-size: 7.5px;
  font-style: normal;
}
.auto-node b {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #2d2e32;
  font-size: 10px;
  font-weight: 500;
}
.auto-node b svg { width: 13px; height: 13px; flex: none; color: var(--accent) }
.auto-node small {
  display: block;
  margin-top: 5px;
  padding-top: 6px;
  border-top: 1px solid #f0f0f2;
  color: #9a9ba0;
  font-size: 8px;
}
.auto-link {
  width: 26px;
  flex: none;
  height: 1px;
  background: #cfcfd4;
}
.auto-panel { min-width: 0; padding: 14px 14px 16px }
.auto-panel header { margin-bottom: 7px }
.auto-panel header span { display: block; color: #a4a5aa; font-size: 7.5px }
.auto-panel header strong { display: block; color: #232428; font-size: 11.5px; font-weight: 500 }
.auto-panel p { margin: 0 0 11px; color: #9a9ba0; font-size: 8px; line-height: 1.5 }
.auto-field { margin-bottom: 11px }
.auto-field > span { display: block; margin-bottom: 4px; color: #7d7e83; font-size: 8px }
.auto-select {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 7px;
  padding: 7px 8px;
  border: 1px solid #e4e4e7;
  border-radius: 5px;
}
.auto-swatch {
  grid-row: 1 / 3;
  align-self: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #ececed url("/images/library-mock/trail-runner.jpg") center/cover;
}
.auto-select b { color: #2d2e32; font-size: 9px; font-weight: 500 }
.auto-select small { color: #9a9ba0; font-size: 7.5px }
.auto-setting {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid #f0f0f2;
}
.auto-setting span { color: #4e4f54; font-size: 8.5px }
.auto-setting em { color: #9a9ba0; font-size: 7.5px; font-style: normal }
.auto-toggle {
  width: 18px;
  height: 10px;
  border-radius: 999px;
  background: #dedee1;
  position: relative;
}
.auto-toggle::after {
  content: "";
  position: absolute;
  top: 1.5px;
  left: 1.5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}
.auto-toggle.is-on { background: #4f9e6a }
.auto-toggle.is-on::after { left: auto; right: 1.5px }
.auto-jobs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #ececef;
}
.auto-jobs span {
  padding: 10px 14px;
  border-right: 1px solid #ececef;
  color: #9a9ba0;
  font-size: 8px;
}
.auto-jobs span:last-child { border-right: 0 }
.auto-jobs b { display: block; margin-bottom: 1px; color: #232428; font-size: 14px; font-weight: 500 }

@media (max-width: 760px) {
  .auto-body { grid-template-columns: 1fr }
  .auto-canvas { flex-direction: column; align-items: stretch; gap: 0; padding: 16px; border-right: 0; border-bottom: 1px solid #ececef }
  .auto-link { width: 1px; height: 14px; margin-left: 18px }
  .auto-panel { padding: 13px 16px 16px }
}

/* ---------------------------------------------------------------------------
   Proof facts — the three selling points under a proof window. Canonical form
   is the Studio hero (.pp-studio-facts); same metrics, shared here so every
   proof section carries the identical pattern.
   -------------------------------------------------------------------------- */
.proof-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.proof-facts article { min-width: 0; padding: 25px 28px 28px }
.proof-facts article + article { border-left: 1px solid var(--line) }
.proof-facts strong { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500 }
.proof-facts p { max-width: 34ch; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55 }
@media (max-width: 760px) {
  .proof-facts { grid-template-columns: 1fr; margin-top: 12px }
  .proof-facts article { padding: 20px 0 }
  .proof-facts article + article { border-top: 1px solid var(--line); border-left: 0 }
}

/* Hero-proof rhythm: the studio canon runs ~58px of air between the hero CTAs
   and the window, and the proof stands ~620px tall so the interface breathes. */
.pp-library-hero-stage, .pp-pipeline-proof-stage { margin-top: 56px }
@media (min-width: 761px) {
  .auto-canvas { min-height: 430px }
}

/* ---------------------------------------------------------------------------
   App chrome + skeleton vocabulary for the mocks — Stripe register: the app's
   real top navigation with only the active section named; secondary copy
   greeked to quiet bars.
   -------------------------------------------------------------------------- */
.app-skel {
  display: inline-block;
  height: 6px;
  border-radius: 3px;
  background: #e6e6e9;
  vertical-align: middle;
}
.app-topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  height: 42px;
  border-bottom: 1px solid #ececef;
  background: #fff;
}
.app-mark {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 4px;
  background: var(--accent);
}
.app-workspace {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border: 1px solid #ececef;
  border-radius: 6px;
}
.app-workspace i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #dcdce0;
}
.app-topnav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: 8px;
}
.app-topnav .is-active {
  padding: 4px 9px;
  border-radius: 5px;
  background: #f0f0f2;
  color: #2c2d31;
  font-size: 9px;
  font-weight: 500;
}
.app-topbar-right {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.app-kbd {
  padding: 3px 6px;
  border: 1px solid #ececef;
  border-radius: 4px;
  color: #a4a5aa;
  font-size: 8px;
  font-weight: 400;
}
.app-presence {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4f9e6a;
}
.lib-mock .app-topbar { border-bottom: 1px solid #ececef }
.lib-head small .app-skel { height: 6px }
.auto-skel-lines { display: grid; gap: 6px; margin: 0 0 11px }
.auto-skel-lines .app-skel { height: 6px }
.auto-canvas { position: relative }
.auto-zoom {
  position: absolute;
  left: 14px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border: 1px solid #e4e4e7;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 8px 22px -18px rgba(18,18,20,.5);
}
.auto-zoom em { color: #6d6e73; font-size: 8px; font-style: normal }

@media (max-width: 700px) {
  .app-topbar { gap: 10px; padding: 0 12px }
  .app-topnav .app-skel, .app-topbar-right .app-skel, .app-kbd, .app-workspace { display: none }
}

/* ---------------------------------------------------------------------------
   Asset index — the quiet enumeration of what lives in the library. The hero
   proof already made the argument; this row just names the five asset types
   and points at their docs. Whisper, not a second pitch.
   -------------------------------------------------------------------------- */
.pp-asset-index {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 48px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pp-asset-index article { min-width: 0; padding: 26px 28px 30px }
.pp-asset-index article + article { border-left: 1px solid var(--line) }
.pp-asset-index svg {
  width: 17px;
  height: 17px;
  display: block;
  margin-bottom: 14px;
  color: #77787d;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pp-asset-index strong { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500 }
.pp-asset-index p { margin: 0 0 12px; color: var(--muted); font-size: 12.5px; line-height: 1.5 }
.pp-asset-index a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4e4f54;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}
.pp-asset-index a svg { width: 13px; height: 13px; margin: 0; stroke-width: 1.25 }
.pp-asset-index a:hover { color: var(--ink, #18181b) }
@media (max-width: 900px) {
  .pp-asset-index { grid-template-columns: 1fr; margin-top: 64px }
  .pp-asset-index article { padding: 18px 0 20px }
  .pp-asset-index article + article { border-left: 0; border-top: 1px solid var(--line) }
}


/* ---------------------------------------------------------------------------
   Composition rule: stage > window > body > visual. A visual placed inside the
   window body surrenders its own frame — the window is the only chrome.
   -------------------------------------------------------------------------- */
.proof-window__body > .ai-agent-proof,
.proof-window__body > .pp-trigger-list,
.proof-window__body > .pp-delivery-window,
.proof-window__body > .pp-material-record-wrap,
.proof-window__body > .pp-upload-share-wrap,
.proof-window__body > .pp-library-delivery-wrap,
.proof-window__body > img {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Markup slots get their text metrics back (the body zeroes line-height for
   media slots) and sit full-bleed — the window is the frame, nothing inside
   draws a second one. */
.proof-window__body > :not(img):not(video) { line-height: 1.4 }

/* Upload-and-share mock (asset library) — same quiet vocabulary. */
.pp-upload-share-wrap {
  display: grid;
  gap: 14px;
  align-content: center;
  justify-content: center;
  grid-template-columns: min(420px, 100%);
  min-height: 430px;
  padding: 22px;
  background: #fff;
  line-height: 1.35;
}
.pp-upload-drop {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  padding: 16px;
  border: 1px dashed #cfd0d4;
  border-radius: 6px;
}
.pp-upload-drop svg { width: 20px; height: 20px; color: var(--accent) }
.pp-upload-drop strong { display: block; color: #2d2e32; font-size: 11px; font-weight: 500 }
.pp-upload-drop small { display: block; margin-top: 2px; color: #9a9ba0; font-size: 9px }
.pp-upload-bar { grid-column: 1 / -1; height: 4px; margin-top: 12px; border-radius: 2px; background: #eeeef0; overflow: hidden }
.pp-upload-bar i { display: block; width: 62%; height: 100%; border-radius: inherit; background: #191a1d }
.pp-upload-record {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #ececef;
  border-radius: 6px;
}
.pp-upload-record figure { width: 44px; height: 44px; margin: 0; overflow: hidden; border-radius: 5px; background: #f2f2f3 }
.pp-upload-record img { width: 100%; height: 100%; object-fit: cover }
.pp-upload-record strong { display: block; color: #2d2e32; font-size: 11px; font-weight: 500 }
.pp-upload-record small { display: block; margin-top: 2px; color: #9a9ba0; font-size: 9px }
.pp-upload-team { display: inline-flex; align-items: center; gap: 10px }
.pp-upload-team i {
  width: 22px; height: 22px;
  display: inline-grid; place-items: center;
  margin-right: -14px;
  border: 1.5px solid #fff; border-radius: 50%;
  background: #e3e4e6; color: #55565b;
  font-size: 8px; font-weight: 500; font-style: normal;
}
.pp-upload-team i:nth-child(3) { margin-right: 0 }
.pp-upload-team em { padding: 6px 9px; border: 1px solid #ececef; border-radius: 5px; color: #4e4f54; font-size: 9px; font-style: normal; font-weight: 500 }

/* ---------------------------------------------------------------------------
   Window cluster — two overlaid windows on one stage (cause behind, effect in
   front). Same primitives; the cluster only arranges them.
   -------------------------------------------------------------------------- */
.proof-cluster { position: relative }
.proof-cluster .proof-window--back { width: min(76%, 640px) }
.proof-cluster .proof-window--front {
  position: absolute;
  z-index: 2;
  right: clamp(8px, 3%, 26px);
  bottom: clamp(8px, 6%, 40px);
  width: min(52%, 430px);
  box-shadow: 0 32px 72px -32px rgba(18, 18, 20, .45);
}
.pp-run-card { background: #fff; font-size: 9px; color: #8c8d92; line-height: 1.4 }
.pp-run-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #ececef;
}
.pp-run-card header strong { display: block; color: #232428; font-size: 11px; font-weight: 500 }
.pp-run-card header small { display: block; margin-top: 2px; color: #9a9ba0; font-size: 8px }
.pp-run-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid #e2e8e2;
  border-radius: 999px;
  background: #f4f8f4;
  color: #3f7a55;
  font-size: 8px;
  font-weight: 500;
}
.pp-run-state i { width: 5px; height: 5px; border-radius: 50%; background: #4f9e6a }
.pp-run-card ul { margin: 0; padding: 4px 0; list-style: none }
.pp-run-card li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
}
.pp-run-card li + li { border-top: 1px solid #f3f3f5 }
.pp-run-check {
  width: 14px; height: 14px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  background: #eef5ef; color: #4f9e6a;
  font-size: 8px;
}
.pp-run-spin { width: 14px; height: 14px; border: 1.5px solid #e0e0e3; border-top-color: #55565b; border-radius: 50% }
.pp-run-card li b { color: #2d2e32; font-size: 9.5px; font-weight: 500 }
.pp-run-card li em { color: #9a9ba0; font-size: 8px; font-style: normal }
.pp-run-card footer {
  padding: 9px 14px;
  border-top: 1px solid #ececef;
  color: #9a9ba0;
  font-size: 8px;
}
@media (max-width: 700px) {
  .proof-cluster .proof-window--back { width: 100% }
  .proof-cluster .proof-window--front { position: static; width: 100%; margin-top: 10px }
}

/* Source-loop mock (AI page): the live scene as standing brief — revise the
   source above, the same direction lands on every new edit below. */
.pp-source-loop { display: grid; gap: 0; background: #fff; font-size: 9px; color: #8c8d92; line-height: 1.4 }
.pp-source-top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #ececef;
}
.pp-source-frame { position: relative; margin: 0; overflow: hidden; border-radius: 6px; background: #eee }
.ai-detail--source .pp-source-frame { position: relative; aspect-ratio: 16 / 10; height: auto; overflow: hidden }
.pp-mock-img { position: absolute; inset: 0; display: block; background-size: cover; background-position: center }
.pp-source-frame figcaption {
  position: absolute; left: 8px; top: 8px;
  padding: 4px 8px; border-radius: 4px;
  background: rgba(255,255,255,.92); color: #55565b;
  font-size: 7.5px; font-weight: 500;
}
.pp-source-controls { display: grid; gap: 7px }
.pp-source-controls span {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 10px;
  border: 1px solid #ececef; border-radius: 5px;
}
.pp-source-controls b { color: #4e4f54; font-size: 8.5px; font-weight: 500 }
.pp-source-controls em { color: #9a9ba0; font-size: 8px; font-style: normal }
.pp-source-rerender {
  justify-self: start;
  margin-top: 3px;
  padding: 6px 10px;
  border-radius: 5px;
  background: #191a1d; color: #fff;
  font-size: 8px; font-weight: 500;
}
.pp-source-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 16px 16px }
.pp-source-edit { position: relative; margin: 0; overflow: hidden; border: 1px solid #ececef; border-radius: 6px }
.ai-detail--source .pp-source-edit { display: grid; grid-template-rows: minmax(0, 1fr) auto }
.ai-detail--source .pp-source-edit > .pp-mock-img { position: relative; inset: auto; aspect-ratio: 4 / 3 }
.pp-source-edit figcaption {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 9px; background: #fff;
}
.pp-source-edit b { color: #4e4f54; font-size: 8px; font-weight: 500 }
.pp-source-edit em {
  padding: 3px 6px; border-radius: 3px;
  background: #f0f0f2; color: #6d6e73;
  font-size: 7px; font-style: normal; font-weight: 500;
}