/* Dottpace landing — Home · Reports: the agency client report's window, a story on story.css's engine (the founder's order, Oct 16, 2026).
   The window is the app's report document on its canvas: a header that carries the brand (Dottpace's, then — step 3 — the agency's), one page
   per step (1 the summary that writes itself, 2 every fix with its verdict, 3 the white-label cover) and, at step 3, how it is delivered.
   Markup: build.py _rp_scene(). Gates (.fN/.uN), data-stage, data-play and .is-held are the engine's. At rest every step is finished; tokens only. */

.rp-in{position:relative;flex:1 1 auto;display:flex;flex-direction:column;min-height:0;padding:16px 18px 18px;background:var(--bg-band)}
.rp-doc{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;border-radius:10px;background:var(--surface);
  box-shadow:0 1px 2px color-mix(in srgb,var(--text-1) 5%,transparent),inset 0 0 0 1px var(--line);overflow:hidden}
/* the header: the brand, and what this report is */
.rp-hd{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;border-bottom:1px solid var(--line)}
.rp-brand{display:grid}
.rp-brand>*{grid-area:1/1;display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--text-2);white-space:nowrap}
.rp-brand b{font-weight:600;letter-spacing:-.012em;color:var(--text-1)}
.rp-dp-m{width:14px;height:17px;color:var(--logo)}
.rp-nl-m{width:22px;height:22px;flex:none}
.rp-nl-m rect{fill:var(--text-1)}
.rp-nl-m path{fill:none;stroke:var(--surface);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rp-nl-m circle{fill:var(--surface)}
.rp-meta{display:flex;flex-direction:column;align-items:flex-end;gap:1px;min-width:0;text-align:right}
.rp-meta b{font-size:12.5px;font-weight:600;white-space:nowrap}
.rp-meta small{font-size:11.5px;color:var(--text-3)}
/* the pages, stacked in one place */
.rp-pgs{display:grid;padding:16px 20px 18px}
.rp-pg{grid-area:1/1;min-width:0}
.rp-k{font:500 10.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-4)}
/* 1 · the summary: three sentences, the numbers marked; four figures */
.rp-s{margin-top:8px;max-width:60ch;font-size:14px;line-height:1.6;color:var(--text-1);text-wrap:pretty}
.rp-s mark{padding:0 3px;border-radius:4px;color:var(--text-1);font-weight:600;background-color:transparent;
  background-image:linear-gradient(color-mix(in srgb,var(--pos) 18%,transparent),color-mix(in srgb,var(--pos) 18%,transparent));background-repeat:no-repeat;background-size:100% 100%}
.rp-w{display:inline-block}
.rp-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
.rp-kpis li{display:flex;flex-direction:column;gap:3px;min-width:0;padding:11px 12px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line)}
.rp-kpis small{font-size:11px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-kpis b{font-size:20px;font-weight:600;line-height:1.15;letter-spacing:-.022em;white-space:nowrap}
.rp-kpis em{font-size:11px;font-style:normal;font-weight:400;letter-spacing:0;color:var(--text-3)}
.rp-up{font-size:11.5px;font-weight:500;color:var(--pos)}
.rp-mm{font-size:11.5px;color:var(--text-3)}
/* 2 · every fix, with its verdict */
.rp-tb{margin-top:10px}
.rp-th,.rp-tb li{display:grid;grid-template-columns:minmax(0,2.5fr) minmax(0,.9fr) minmax(0,.6fr) minmax(0,.9fr) minmax(0,1.1fr);gap:10px;align-items:center}
.rp-th{padding-bottom:7px;border-bottom:1px solid var(--line);font-size:11px;color:var(--text-3)}
.rp-th span:last-child,.rp-mo{text-align:right}
.rp-tb li{padding:7px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.rp-f{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:var(--text-1)}
.rp-by,.rp-dt{color:var(--text-2);white-space:nowrap}
.rp-mo{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-weight:600;color:var(--pos);white-space:nowrap}
.rp-mo small{font-size:10.5px;font-weight:500;color:var(--text-3)}
/* a fix still being measured: no result, no money — the day its verdict is due */
.rp-tb li.is-wait .rp-mo{color:var(--text-3);font-weight:500}
.rp-tb li.is-wait .rp-f{color:var(--text-2)}
.rp-tot{padding-top:8px;font-size:11px;line-height:1.4;color:var(--text-3)}
.rp-next{display:flex;align-items:center;gap:8px;margin-top:12px;padding:9px 12px;border-radius:9px;background:var(--info-bg);color:var(--info);font-size:12.5px}
.rp-next .ic{width:15px;height:15px;flex:none}
.rp-next b{font-weight:600}
/* 3 · the cover, under the agency's brand */
.rp-p3{max-width:calc(100% - 330px)}
.rp-cv{margin-top:10px;font-size:26px;font-weight:600;line-height:1.15;letter-spacing:-.026em;text-wrap:balance}
.rp-cvm{margin-top:8px;font-size:13px;color:var(--text-3)}
.rp-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.rp-pill{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--r-full);box-shadow:inset 0 0 0 1px var(--line-strong);font-size:12px;color:var(--text-2);white-space:nowrap}
/* the footer */
.rp-ft{display:flex;justify-content:space-between;gap:12px;margin-top:auto;padding:9px 20px;border-top:1px solid var(--line);font-size:11px;color:var(--text-3)}
.rp-fv{display:grid}
.rp-fv>*{grid-area:1/1;white-space:nowrap}
/* how it goes out (step 3) */
.rp-dlv{position:absolute;right:34px;bottom:62px;z-index:3;width:min(300px,46%);padding:13px 14px 14px;border-radius:12px;background:var(--sc-bg);box-shadow:var(--pop-shadow),inset 0 0 0 1px var(--line-strong)}
.rp-dk{font:500 10.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-4)}
.rp-dlv ul{margin-top:6px}
.rp-dlv li{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12.5px;color:var(--text-2)}
.rp-dlv li>.ic{width:14px;height:14px;color:var(--text-3);flex:none}
.rp-dlv li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-chips{gap:6px!important;padding-top:7px!important}
.rp-c{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:7px;box-shadow:inset 0 0 0 1px var(--line-ctl);font-size:11.5px;color:var(--text-1)}
.rp-c .ic{width:12px;height:12px;color:var(--text-3)}
.rp-sent{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;color:var(--text-2)}
.rp-sent b{font-weight:600;color:var(--pos)}
.rp-sc{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--pos);color:var(--surface)}
.rp-sc .ic{width:10px;height:10px;stroke-width:3}
/* stacked: each window shows its own step only */
.story:not(.is-pin) .sw-rp[data-stage="1"] :is(.rp-p2,.rp-p3),.story:not(.is-pin) .sw-rp[data-stage="2"] :is(.rp-p1,.rp-p3),.story:not(.is-pin) .sw-rp[data-stage="3"] :is(.rp-p1,.rp-p2){display:none}

/* stacked (no pin), the window takes its content's height: the cover keeps room for the delivery card beside it */
.story:not(.is-pin) .sw-rp .rp-p3{min-height:188px}

/* ---------- a narrower window ---------- */
@container sw (max-width:699px){
  .rp-p3,.story:not(.is-pin) .sw-rp .rp-p3{max-width:none;min-height:0}
  /* the table drops the date (the verdict and who approved it stay) */
  .rp-th,.rp-tb li{grid-template-columns:minmax(0,1fr) 72px 96px 118px}
  .rp-dt,.rp-th span:nth-child(3){display:none}
  /* pinned in a narrower window (1024): the delivery card sits over the cover's lower half, so the window still fits the screen */
  .story.is-pin .sw-rp .rp-dlv{position:absolute;left:34px;right:34px;bottom:62px;width:auto;margin:0}
  .story.is-pin .sw-rp .rp-cvm{display:none}
  .rp-dlv{position:static;width:auto;margin-top:12px}
  .sw-rp:not([data-stage="3"]) .rp-dlv{display:none}
}
@container sw (max-width:519px){
  .rp-in{padding:10px}
  .rp-hd{padding:11px 12px}
  .rp-meta small,.rp-mt{display:none}
  .rp-meta b{font-size:11.5px}
  .rp-pgs{padding:12px}
  .rp-s{font-size:13.5px}
  .rp-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .rp-th{display:none}
  .rp-tb li{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}
  .rp-f{grid-column:1;white-space:normal}
  .rp-by,.rp-dt{display:none}
  .rp-vd{grid-column:1;grid-row:2}
  .rp-mo{grid-column:2;grid-row:1/3}
  .rp-ft{padding:8px 12px}
  .rp-ft>span:last-child{display:none}
  .rp-cv{font-size:22px}
}

/* ====================================================================== the motion: each step once, as it becomes current ====================================================================== */
@keyframes rp-word{from{opacity:0;translate:0 4px}}
@keyframes rp-mark{from{background-size:0% 100%}}
@keyframes rp-up{from{opacity:0;translate:0 16px}}
@keyframes rp-row{from{opacity:0;translate:12px 0}}
@keyframes rp-brand{from{opacity:0;translate:0 10px;clip-path:inset(0 100% 0 0)}}
/* 1 · the summary writes itself — word by word, the numbers marked as they land — then the four figures count up */
.sw-rp[data-play="1"] .rp-p1 .rp-k{animation:sw-fade 300ms linear 80ms both}
.sw-rp[data-play="1"] .rp-w{animation:rp-word 260ms var(--ease-expo) var(--d) both}
.sw-rp[data-play="1"] .rp-s mark{animation:rp-mark 420ms var(--ease-out) var(--d) both}
.sw-rp[data-play="1"] .rp-kpis li:nth-child(1){animation:sw-in 380ms var(--ease-expo) 1450ms both}
.sw-rp[data-play="1"] .rp-kpis li:nth-child(2){animation:sw-in 380ms var(--ease-expo) 1540ms both}
.sw-rp[data-play="1"] .rp-kpis li:nth-child(3){animation:sw-in 380ms var(--ease-expo) 1630ms both}
.sw-rp[data-play="1"] .rp-kpis li:nth-child(4){animation:sw-in 380ms var(--ease-expo) 1720ms both}
.sw-rp[data-play="1"] .sw-st .u2{animation:sw-pop 340ms var(--sw-land) 200ms both}
/* 2 · the month's work lands row by row, each with its verdict and what it brought back; the total; what's next */
.sw-rp[data-play="2"] .rp-p2{animation:rp-up 460ms var(--ease-expo) 40ms both}
.sw-rp[data-play="2"] .rp-th{animation:sw-fade 300ms linear 200ms both}
.sw-rp[data-play="2"] .rp-tb li:nth-child(1){animation:rp-row 380ms var(--ease-expo) 330ms both}
.sw-rp[data-play="2"] .rp-tb li:nth-child(2){animation:rp-row 380ms var(--ease-expo) 500ms both}
.sw-rp[data-play="2"] .rp-tb li:nth-child(3){animation:rp-row 380ms var(--ease-expo) 670ms both}
.sw-rp[data-play="2"] .rp-tb li:nth-child(4){animation:rp-row 380ms var(--ease-expo) 840ms both}
.sw-rp[data-play="2"] .rp-tb li:nth-child(1) .chip{animation:sw-pop 360ms var(--sw-land) 490ms both}
.sw-rp[data-play="2"] .rp-tb li:nth-child(2) .chip{animation:sw-pop 360ms var(--sw-land) 660ms both}
.sw-rp[data-play="2"] .rp-tb li:nth-child(3) .chip{animation:sw-pop 360ms var(--sw-land) 830ms both}
.sw-rp[data-play="2"] .rp-tb li:nth-child(4) .chip{animation:sw-pop 360ms var(--sw-land) 1000ms both}
.sw-rp[data-play="2"] .rp-tb li:nth-child(5){animation:rp-row 380ms var(--ease-expo) 1010ms both}
.sw-rp[data-play="2"] .rp-tb li:nth-child(5) .chip{animation:sw-fade 360ms linear 1170ms both}
.sw-rp[data-play="2"] .rp-tot{animation:sw-fade 380ms linear 1250ms both}
.sw-rp[data-play="2"] .rp-next{animation:sw-in 420ms var(--ease-expo) 1450ms both}
.sw-rp[data-play="2"] .sw-st .f2{animation:sw-pop 340ms var(--sw-land) 1650ms both}
/* 3 · the agency's brand takes the header and the footer; the cover; how it goes out; Sent */
.sw-rp[data-play="3"] .rp-dp{animation:sw-out 260ms var(--sw-move) 80ms both}
.sw-rp[data-play="3"] .rp-nl{animation:rp-brand 520ms var(--ease-expo) 300ms both}
.sw-rp[data-play="3"] .rp-fv .f3{animation:sw-fade 360ms linear 380ms both}
.sw-rp[data-play="3"] .rp-p3{animation:rp-up 460ms var(--ease-expo) 120ms both}
.sw-rp[data-play="3"] .rp-pill:nth-child(1){animation:sw-in 340ms var(--ease-expo) 420ms both}
.sw-rp[data-play="3"] .rp-pill:nth-child(2){animation:sw-in 340ms var(--ease-expo) 500ms both}
.sw-rp[data-play="3"] .rp-pill:nth-child(3){animation:sw-in 340ms var(--ease-expo) 580ms both}
.sw-rp[data-play="3"] .rp-dlv{animation:sw-slide 560ms var(--ease-expo) 650ms both}
.sw-rp[data-play="3"] .rp-dlv li:nth-child(1){animation:sw-in 340ms var(--ease-expo) 900ms both}
.sw-rp[data-play="3"] .rp-dlv li:nth-child(2){animation:sw-in 340ms var(--ease-expo) 1020ms both}
.sw-rp[data-play="3"] .rp-dlv li:nth-child(3){animation:sw-in 340ms var(--ease-expo) 1140ms both}
.sw-rp[data-play="3"] .rp-sent{animation:sw-land 520ms var(--sw-land) 1500ms both}
.sw-rp[data-play="3"] .rp-sc{animation:sw-tick 420ms var(--sw-land) 1560ms both}
.sw-rp[data-play="3"] .sw-st .f3{animation:sw-pop 340ms var(--sw-land) 1750ms both}

/* a short screen, pinned (1024 × 700, 1280 × 720): the results page — five fixes, the note and what's next — still fits the window */
@media (max-height:780px){
  .story.is-pin .sw-rp .rp-hd{padding:11px 20px}
  .story.is-pin .sw-rp .rp-pgs{padding:12px 20px}
  .story.is-pin .sw-rp .rp-tb li{padding:5px 0}
  .story.is-pin .sw-rp .rp-tot{padding-top:6px}
  .story.is-pin .sw-rp .rp-next{margin-top:8px;padding:7px 12px}
}