/* #report: "Thousands of steps. One ranked list." One frame like the hero scene, three steps:
 * 01 Many runs: 40 simulated testers, each with a profile, walk a nine-step scenario. Four are named and followed
 *    (Mara stuck, Ines goes back and tries again, Ola leaves, Tomas finishes); the scene points at Mara and Ines.
 * 02 Grouped and checked: what they ran into becomes findings, each observed, replayed, checked; 3 are withdrawn.
 * 03 One ranked list: the findings sort by severity, the list steps back and finding 1 grows into the full card.
 * The markup is the final state. section.js adds .is-armed and the cumulative classes .is-s0 .is-s1 .is-s2
 * (SCENE-GUIDE.md). Rule order below: final look, then :not(.is-s2) = step 2 look, :not(.is-s1) = step 1 look,
 * :not(.is-s0) = empty start. Without JS, with reduced motion or on error the final look shows as is.
 * One screen (v4): from 1240 px the stage has a fixed height of 630 px and every step is laid out to fit it, so the
 * whole frame with its step bar is about 700 px tall and sits under the sticky header of an 800 px window.
 * Below 1240 (v5): one panel per step across the full frame, fixed heights (tablet frame 618, phone frame 622), budget
 * at the top of the "Below 1240" block. Nothing is hidden: phones show the lanes as one strip and the card in one column.
 * Text in the scene at least 13 px (the "SI" logo glyph and the "!" pin excepted).
 * Shared: base.css .card .ev .pill .arrow-link .rv. Content of the sample is fictional (Sample Invest, its testers). */

#report .sec-head{margin-bottom:40px}
#report .rp-lead{margin-top:16px;max-width:58ch}

/* ---------- Frame (pattern: hero .vh-frame) ---------- */
#report .rp-frame{position:relative;margin:0;display:flex;flex-direction:column;padding:10px;border-radius:26px;background:#fff;border:1px solid #e6ebf1;
  box-shadow:0 1px 2px rgba(12,21,41,.04),0 60px 100px -60px rgba(12,21,41,.42)}
#report .rp-frame::before{content:"";position:absolute;left:56px;right:56px;top:-1px;height:2px;border-radius:2px;background:var(--grad);opacity:.85}
#report .rp-stage{--rh:44px;--wo:36px;
  position:relative;border-radius:18px;overflow:hidden;isolation:isolate;border:1px solid #e8edf3;
  background:
    radial-gradient(60% 55% at 88% 8%,color-mix(in srgb,var(--blue) 15%,transparent),transparent 70%),
    radial-gradient(50% 60% at 0% 100%,color-mix(in srgb,var(--red) 8%,transparent),transparent 70%),
    linear-gradient(180deg,#fbfcfe,#f3f6fa);
  font-size:13px;line-height:1.45;color:var(--ink)}
#report .rp-stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(12,21,41,.07) 1px,transparent 1.4px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 85% 80% at 50% 50%,#000 30%,transparent 85%);mask-image:radial-gradient(ellipse 85% 80% at 50% 50%,#000 30%,transparent 85%)}
#report .rp-sc{position:relative}
#report .rp-sc.no-anim,#report .rp-sc.no-anim *,#report .rp-sc.no-anim *::before,#report .rp-sc.no-anim *::after{transition:none!important}

/* Window bar with the counters */
#report .rp-win{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;min-height:44px;padding:6px 16px;border-bottom:1px solid #e8edf3;background:rgba(255,255,255,.75)}
#report .rp-dots{display:flex;gap:6px;flex:none}
#report .rp-dots i{width:9px;height:9px;border-radius:50%;background:#dfe5ec}
#report .rp-wt{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;min-width:0;font-size:13px;line-height:1.4;color:var(--muted)}
#report .rp-wt b{font-weight:600;color:var(--ink)}
#report .rp-meter{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;font-size:13px;line-height:1;color:var(--body)}
#report .rp-mk{margin-right:2px;font-size:13px;color:var(--muted);white-space:nowrap}
#report .rp-mv{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border-radius:999px;background:#fff;border:1px solid var(--line);white-space:nowrap}
#report .rp-num{display:inline-block;min-width:4.4ch;text-align:right;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

/* Two columns: the process panel and the main area */
#report .rp-body{display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px;padding:12px}
#report .rp-side{position:relative;display:grid;padding:14px 12px 12px;border-radius:16px;background:#fff;border:1px solid #e6ebf1;box-shadow:var(--sh)}
#report .rp-side > *{grid-area:1/1;min-width:0}


/* ---------- Step 1 layer: the testers ---------- */
#report .rp-run{display:flex;flex-direction:column;gap:10px;opacity:0;visibility:hidden;pointer-events:none}
#report .rp-ph{display:flex;flex-direction:column;gap:1px}
#report .rp-ph b,#report .rp-lh1 b{font-size:14.5px;font-weight:600;line-height:1.35;letter-spacing:-.01em}
#report .rp-ph small,#report .rp-lh1 small{font-size:13px;line-height:1.4;color:var(--muted)}
/* 5 rows of 8: the 40 testers. The four we follow carry their initial (built by section.js). */
#report .rp-roster{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;max-width:300px}
#report .rs-a{--st:transparent;display:grid;place-items:center;aspect-ratio:1;border-radius:50%;
  background:color-mix(in srgb,var(--h) 14%,#fff);color:color-mix(in srgb,var(--h) 55%,#0c1529);box-shadow:0 0 0 1.5px #fff,0 0 0 3px var(--st)}
#report .rs-a svg{width:58%;height:58%}
#report .rs-a:is(.o0,.o3){--st:color-mix(in srgb,var(--green) 70%,#fff)}
#report .rs-a:is(.o1,.o4){--st:var(--red);background:color-mix(in srgb,var(--red) 16%,#fff);color:var(--red-ink)}
#report .rs-a.o5{--st:var(--orange)}
#report .rs-a.o2{--st:#c5cdd8;background:#f1f4f7;color:var(--muted)}
#report .rs-n.rs-n{background:color-mix(in srgb,var(--h) 26%,#fff);color:color-mix(in srgb,var(--h) 42%,#0c1529)}
#report .rs-n i{font-size:13px;font-style:normal;font-weight:700;line-height:1}
#report .rp-wk{margin-top:2px;font-size:13px;font-weight:600;line-height:1.4;color:var(--ink)}
/* The four testers we follow: one line each, name and age, then what happened */
#report .rp-who{display:grid;gap:5px}
#report .rp-who li{--oc:var(--green);--oi:var(--green-ink);display:flex;align-items:center;gap:8px;min-width:0;min-height:34px;padding:4px 10px 4px 7px;border-radius:11px;
  background:#fff;border:1px solid var(--line-soft);font-size:13px;line-height:1.35;white-space:nowrap}
#report .rp-who .is-bad{--oc:var(--red);--oi:var(--red-ink);border-color:color-mix(in srgb,var(--red) 28%,#fff);background:color-mix(in srgb,var(--red) 4%,#fff)}
#report .rp-who .is-left{--oc:var(--orange);--oi:var(--orange-ink)}
#report .rw-a{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;background:color-mix(in srgb,var(--h) 16%,#fff);color:color-mix(in srgb,var(--h) 50%,#0c1529);
  font-size:13px;font-weight:600;line-height:1;box-shadow:0 0 0 1.5px #fff,0 0 0 3px var(--oc)}
#report .rp-who b{flex:none;font-weight:600;color:var(--ink)}
#report .rp-who em{min-width:0;margin-left:auto;padding-left:6px;font-style:normal;font-weight:600;color:var(--oi);overflow:hidden;text-overflow:ellipsis}
/* ---------- Steps 2 and 3 layer: the findings ---------- */
#report .rp-list{display:flex;flex-direction:column}
#report .rp-lh{display:grid;margin-bottom:10px}
#report .rp-lh > *{grid-area:1/1;min-width:0}
#report .rp-lh1{display:flex;flex-direction:column;gap:1px;opacity:0}
#report .rp-lt{font-size:14.5px;font-weight:600;line-height:1.35;letter-spacing:-.01em}

#report .rp-rows{position:relative;height:calc(var(--rh) * 10 + var(--wo))}
#report .rp-row{--sv:var(--red);--sv-ink:var(--red-ink);position:absolute;left:0;right:0;top:calc(var(--p) * var(--rh));height:calc(var(--rh) - 5px);
  display:grid;grid-template-columns:22px minmax(0,1fr) auto;grid-template-rows:auto auto;align-content:center;align-items:center;gap:0 9px;padding:0 8px;border-radius:10px;background:#fff;border:1px solid var(--line-soft)}
#report .rp-row.is-i{--sv:var(--orange);--sv-ink:var(--orange-ink)}
#report .rp-row.is-m{--sv:var(--blue);--sv-ink:var(--blue-ink)}
#report .rp-row.is-w{--sv:#98a2b3;--sv-ink:var(--muted);top:calc(var(--p) * var(--rh) + var(--wo));background:rgba(255,255,255,.55);border-color:#e3e8ee}
#report .rp-no{grid-row:1/3;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,var(--sv) 15%,#fff);color:var(--sv-ink);font-size:13px;font-weight:700;line-height:1}
#report .rp-no i{font-style:normal}
#report .is-w .rp-no{background:#f1f4f7}
#report .is-w .rp-no i{position:relative;width:10px;height:10px}
#report .is-w .rp-no i::before{content:"";position:absolute;left:-1px;right:-1px;top:4px;height:1.5px;border-radius:2px;background:#98a2b3;rotate:-45deg}
#report .rp-rt{display:contents}
#report .rp-rt b{grid-column:2/4;grid-row:1;justify-self:start;min-width:0;position:relative;max-width:100%;font-size:13.5px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#report .rp-rt small{grid-column:2;grid-row:2;min-width:0;font-size:13px;line-height:1.3;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#report .rp-rt em{font-style:normal;font-weight:600;color:var(--sv-ink)}
#report .is-w .rp-rt b{font-weight:500;color:var(--muted)}
#report .is-w .rp-rt b::after{content:"";position:absolute;left:0;right:0;top:52%;height:1.5px;border-radius:2px;background:#8a93a5;transform-origin:0 50%}
#report .is-w .rp-rt small{display:grid;grid-column:2/4}
#report .is-w .rp-rt small > span{grid-area:1/1;min-width:0;overflow:hidden;text-overflow:ellipsis}
#report .rp-m1{opacity:0}
#report .rp-wdh{position:absolute;left:0;right:0;top:calc(var(--rh) * 7);height:var(--wo);display:flex;align-items:center;gap:8px;padding:0 2px 6px;font-size:13px;font-weight:500;line-height:1.3;color:var(--muted)}
#report .rp-wdh svg{width:15px;height:15px;flex:none;fill:none;stroke:#98a2b3;stroke-width:1.5;stroke-linecap:round}

/* Proof per finding: observed, replayed, checked by an analyst (lit = present in the report) */
#report .rp-ck{grid-column:3;grid-row:2;display:flex;gap:3px}
#report .rp-ck i{position:relative;width:18px;height:18px;border-radius:50%;background:#fff;border:1px dashed #d5dce5;--ic:#c5cdd8}
#report .rp-ck i::before{content:"";position:absolute;inset:3px;background:var(--ic);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
#report .rp-ck .c-o{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 8S3.9 3.5 8 3.5 14.5 8 14.5 8 12.1 12.5 8 12.5 1.5 8 1.5 8Z'/%3E%3Ccircle cx='8' cy='8' r='2'/%3E%3C/svg%3E")}
#report .rp-ck .c-r{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 8a5.4 5.4 0 1 0 1.7-3.9'/%3E%3Cpath d='M4.3 1.6v2.6h2.6'/%3E%3C/svg%3E")}
#report .rp-ck .c-a{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6.5' cy='5' r='2.5'/%3E%3Cpath d='M2 13.5c0-2.6 2-4.2 4.5-4.2 1.6 0 2.9.6 3.7 1.7'/%3E%3Cpath d='m10.4 12.2 1.6 1.6 3-3.2'/%3E%3C/svg%3E")}
#report .rp-ck i.on{--ic:var(--blue-ink);border-style:solid;border-color:color-mix(in srgb,var(--blue) 40%,#fff);background:color-mix(in srgb,var(--blue) 11%,#fff)}
#report .rp-ck .c-a.on{--ic:var(--green-ink);border-color:color-mix(in srgb,var(--green) 40%,#fff);background:color-mix(in srgb,var(--green) 12%,#fff)}

/* Finding 1 is the one opened in the card. The connector spans side padding + border + column gap (12 + 1 + 14). */
#report .rp-row.is-open{border-color:color-mix(in srgb,var(--red) 36%,#fff);background:color-mix(in srgb,var(--red) 5%,#fff);
  box-shadow:inset 3px 0 0 var(--red),0 12px 26px -18px color-mix(in srgb,var(--red) 80%,transparent)}
#report .rp-row.is-open::after{content:"";position:absolute;left:100%;top:50%;width:27px;height:2px;margin-top:-1px;border-radius:2px;
  background:linear-gradient(90deg,var(--red),color-mix(in srgb,var(--red) 20%,transparent));transform-origin:0 50%}

/* Step 3: the list steps back so the opened finding is the one thing in focus (text keeps its contrast). */
#report .rp-side{transition:background-color .5s ease,box-shadow .5s ease,border-color .5s ease}
#report .rp-side{background:rgba(255,255,255,.5);border-color:#e9eef4;box-shadow:none}
#report .rp-row:not(.is-open):not(.is-w){background:rgba(255,255,255,.62)}

/* ---------- Main: the live run (steps 1 and 2) and the finding card (step 3) ---------- */
#report .rp-main{position:relative;display:grid;min-width:0}
#report .rp-field{--gut:58px;position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;padding:14px 18px 14px;border-radius:16px;background:#fff;border:1px solid #e6ebf1;box-shadow:var(--sh);
  opacity:0;visibility:hidden;pointer-events:none}
#report .rf-h{display:flex;align-items:center;gap:9px;font-size:13px;line-height:1.4;min-width:0}
#report .rf-h b{font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
#report .rf-h small{margin-left:auto;font-size:13px;color:var(--muted);white-space:nowrap}
#report .rf-live{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 18%,transparent);flex:none}
/* One sentence that says what you are looking at, then the colour key */
#report .rf-key{margin-top:5px;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;line-height:1.4;color:var(--body)}
#report .rf-key li{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
#report .rf-key i{width:9px;height:9px;border-radius:50%;background:var(--green)}
#report .rf-key .k-bad i{background:var(--red)}
#report .rf-key .k-left i{background:var(--orange)}
#report .rf-key .k-tool i{background:#98a2b3}
/* Axis: five phases over nine steps */
#report .rf-axis{position:relative;height:44px;margin:12px 10px 0 var(--gut)}
#report .rf-ph{position:absolute;top:0;display:flex;justify-content:center;left:calc(var(--a) / 9 * 100% + 3px);width:calc(var(--s) / 9 * 100% - 6px);padding-bottom:3px;border-bottom:2px solid #dfe5ec;
  font-size:13px;font-weight:600;line-height:1.3;color:var(--ink);white-space:nowrap}
#report .rf-ph.is-hot{border-bottom-color:color-mix(in srgb,var(--red) 55%,#fff)}
#report .rf-st{position:absolute;top:26px;left:calc(var(--x) * 100%);translate:-50% 0;font-size:13px;line-height:1.3;color:var(--muted);white-space:nowrap}
/* Lanes: one line per tester, 40 lanes packed into the height left (about 10 px each on desktop).
 * --y lane, --e where the tester stopped (share of the width). */
#report .rf-lanes{position:relative;flex:1 1 auto;min-height:0;margin:4px 10px 0 var(--gut);container-type:size}
#report .rf-g{position:absolute;top:0;bottom:0;left:calc(var(--x) * 100%);width:1px;background:#e9eef4}
#report .rf-g.is-hot{background:color-mix(in srgb,var(--red) 18%,#fff)}
#report .ln{--lc:color-mix(in srgb,var(--green) 45%,#fff);--dc:var(--green);--po:.45;--do:.5;position:absolute;left:0;right:0;top:calc((var(--y) + .5) * 2.5cqh);height:0}
#report .ln:is(.o1,.o4){--lc:color-mix(in srgb,var(--red) 45%,#fff);--dc:var(--red)}
#report .ln.o5{--lc:color-mix(in srgb,var(--orange) 55%,#fff);--dc:var(--orange)}
#report .ln.o2{--lc:#d5dce5;--dc:#98a2b3}
#report .ln:is(.o1,.o2,.o4,.o5){--do:.9}
#report .ln.is-f{--po:1;--do:1}
#report .ln::before{content:"";position:absolute;left:0;right:0;top:-.5px;height:1px;background:#f0f3f7}
#report .ln-p{position:absolute;left:0;top:-1px;width:100%;height:2px;border-radius:2px;background:var(--lc);transform-origin:0 50%;transform:scaleX(var(--e));opacity:calc(var(--po) * .6)}
#report .ln-d{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--dc);box-shadow:0 0 0 2px #fff;translate:calc(var(--e) * 100cqw) 0;opacity:var(--do)}
#report .ln.is-f .ln-p{top:-1.5px;height:3px}
#report .ln.is-f .ln-d{left:-6px;top:-6px;width:12px;height:12px;box-shadow:0 0 0 2.5px #fff,0 3px 8px -2px rgba(12,21,41,.35)}
#report .ln.o1 .ln-d{translate:calc(.5 * 100cqw + var(--ox)) calc(50cqh - (var(--y) + .5) * 2.5cqh + var(--oy))}
/* went back and tried again: a dashed loop from Choose back to Save */
#report .ln-b{position:absolute;left:38.889%;width:11.111%;bottom:0;height:8px;border:1.5px dashed var(--green-ink);border-bottom:0;border-radius:8px 8px 0 0;opacity:.4}
#report .ln-n{position:absolute;right:calc(100% + 10px);top:0;translate:0 -50%;font-size:13px;font-weight:600;line-height:1.3;color:var(--ink);white-space:nowrap}
/* Notes that name the tester the scene is about */
#report .rf-call{--cc:var(--red);--ci:var(--red-ink);position:absolute;left:calc(50% + 16px);top:calc((var(--y) + .5) * 2.5cqh);translate:0 -50%;z-index:2;
  display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:#fff;border:1px solid color-mix(in srgb,var(--cc) 45%,#fff);
  box-shadow:0 8px 20px -12px color-mix(in srgb,var(--cc) 80%,transparent);font-size:13px;line-height:1.3;color:var(--body);white-space:nowrap;opacity:0}
#report .rf-call b{font-weight:600;color:var(--ci)}
#report .rf-call::before{content:"";position:absolute;right:100%;top:50%;width:10px;height:1.5px;background:color-mix(in srgb,var(--cc) 60%,#fff)}
#report .rf-call.is-ok{--cc:var(--green);--ci:var(--green-ink)}
/* Step 2: the 14 gather in a tight knot on Portfolio, the badge sits right next to it */
#report .rf-ring{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--red) 14%,#fff) 0 55%,color-mix(in srgb,var(--red) 6%,transparent) 56% 100%);border:1px dashed color-mix(in srgb,var(--red) 45%,#fff)}
#report .rf-badge{position:absolute;right:calc(50% + 46px);top:50%;transform:translateY(-50%);z-index:3;max-width:236px;padding:12px 14px 13px;border-radius:14px;background:#fff;border:1px solid #e6ebf1;box-shadow:var(--sh-lg)}
#report .rf-n{display:flex;flex-direction:column}
#report .rf-n b{font-size:21px;font-weight:600;line-height:1.2;letter-spacing:-.02em;color:var(--red-ink)}
#report .rf-n small{font-size:13px;line-height:1.4;color:var(--body)}
#report .rf-ev{margin-top:8px;display:grid;gap:5px;justify-items:start}
#report .rf-ev .ev{height:26px;font-size:13px}
#report .rf-wd{position:absolute;right:calc(16.667% + 16px);top:calc(36.5 * 2.5cqh);transform:translateY(-50%);z-index:2;display:flex;flex-direction:column;align-items:flex-end;padding:4px 10px;border-radius:10px;background:rgba(255,255,255,.94);border:1px dashed #cfd6df;text-align:right}
#report .rf-wd s{font-size:13px;line-height:1.35;color:var(--muted)}
#report .rf-wd span{font-size:13px;font-weight:500;line-height:1.35;color:var(--body)}
@keyframes rp-live{0%,100%{opacity:1}50%{opacity:.35}}
#report .rp-stage[data-playing="true"] .rf-live{animation:rp-live 1.6s ease-in-out infinite}

/* ---------- Finding card: the main moment. Severity colour drives border, glow and accents (--sv). ----------
 * Head across the top (what broke, how often), then two columns: the proof (screenshot, marked spot, quote) and
 * the finding (why you can trust it, expected vs actual, steps in one line, the fix). */
#report .fd{--sv:var(--red);--sv-ink:var(--red-ink);display:flex;flex-direction:column;overflow:hidden;align-self:stretch;transform-origin:0 0;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--sv) 7%,transparent),0 2px 4px rgba(12,21,41,.05),0 44px 80px -40px color-mix(in srgb,var(--sv) 55%,rgba(12,21,41,.35))}
#report .fd::after{opacity:1;padding:1.5px;background:linear-gradient(140deg,var(--sv) 0%,color-mix(in srgb,var(--orange) 80%,#fff) 24%,color-mix(in srgb,var(--sv) 16%,#e6ebf1) 52%,#e6ebf1 78%)}
/* Head: what broke, and how often */
#report .fd-head{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 20px;padding:14px 18px 12px;border-bottom:1px solid var(--line-soft);
  background:radial-gradient(75% 150% at 0% 0%,color-mix(in srgb,var(--sv) 10%,#fff),transparent 70%),#fff}
#report .fd-top{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
#report .fd-sev{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 9px;border-radius:999px;background:var(--sv-ink);color:#fff;font-size:13px;font-weight:600;line-height:1;
  box-shadow:0 6px 14px -8px color-mix(in srgb,var(--sv) 90%,transparent)}
#report .fd-sev::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
#report .fd-title{margin-top:8px;font-size:22px;font-weight:600;line-height:1.2;letter-spacing:-.026em;text-wrap:balance}
/* 14 of 40: the number and its caption on the left, the 40 testers as dots on the right */
#report .fd-stat{display:grid;grid-template-columns:auto auto;grid-template-areas:"big dots" "cap dots";align-items:center;gap:3px 14px;padding:0}
#report .fd-big{grid-area:big;align-self:end;display:flex;align-items:baseline;gap:6px;font-size:16px;font-weight:600;line-height:1;color:var(--body)}
#report .fd-big b{font-size:36px;font-weight:700;letter-spacing:-.045em;color:var(--sv-ink)}
#report .fd-dots{grid-area:dots;display:grid;grid-template-columns:repeat(10,8px);gap:4px}
#report .fd-dots i{width:8px;height:8px;border-radius:50%;background:#e3e9f0}
#report .fd-dots i.on{background:var(--sv);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--sv) 16%,transparent)}
#report .fd-cap{grid-area:cap;align-self:start;max-width:130px;font-size:13px;line-height:1.35;color:var(--body)}
/* The card has two zones and says so. Left is the tested product as it was captured; right is
   what we concluded. A label at the top of each, and a different ground under the left, keep the
   two apart at a glance: before this they were white cards of the same shape side by side. */
#report .fd-ck{display:flex;align-items:baseline;gap:8px;margin-bottom:9px;font-size:13px;font-weight:600;line-height:1.3;letter-spacing:.01em;color:var(--ink)}
#report .fd-ck span{font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}

/* Proof (screenshot, quote) and the finding (expected vs actual, how we know, steps, fix) */
#report .fd-grid{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
/* A plain slate mat, not our brand wash: the captured screen should look pinned to a board. */
#report .fd-art{position:relative;isolation:isolate;display:flex;flex-direction:column;padding:12px 14px;border-right:1px solid var(--line);
  background:#edf1f6}
#report .fx{position:relative;background:#fff;border:1px solid #dfe5ec;border-radius:12px;box-shadow:0 1px 2px rgba(12,21,41,.05),0 18px 34px -26px rgba(12,21,41,.45);overflow:hidden}
#report .fx-bar{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px 0 10px;border-bottom:1px solid var(--line-soft);background:#fbfcfd}
#report .fx-dots{display:flex;gap:5px;flex:none}
#report .fx-dots i{width:7px;height:7px;border-radius:50%;background:#dfe5ec}
#report .fx-cap{margin-left:auto;flex:none;display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13px;line-height:1;color:var(--body);white-space:nowrap}
#report .fx-app{padding:10px 12px}
#report .fx-head{display:flex;align-items:center;gap:8px}
#report .fx-logo{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:color-mix(in srgb,var(--blue) 16%,#fff);color:var(--blue-ink);font-size:12px;font-weight:600;letter-spacing:.02em;flex:none}
#report .fx-head b{font-size:13.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
#report .fx-of{margin-left:auto;font-size:13px;color:var(--muted);white-space:nowrap}
#report .fx-steps{margin-top:8px;display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px}
#report .fx-steps li{display:inline-flex;align-items:center;gap:5px;font-size:13px;line-height:1.35;color:var(--muted);white-space:nowrap}
#report .fx-steps svg{width:14px;height:14px;fill:color-mix(in srgb,var(--green) 16%,#fff);stroke:var(--green-ink);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
#report .fx-steps svg path{fill:none;stroke-width:1.6}
#report .fx-steps li > i{width:14px;height:14px;border-radius:50%;border:1.5px solid #cfd6df;background:#fff}
#report .fx-steps .is-now{color:var(--ink);font-weight:600}
#report .fx-steps .is-now > i{border-color:var(--blue-ink);box-shadow:inset 0 0 0 3px #fff;background:var(--blue-ink)}
#report .fx-h{margin-top:8px;font-size:15px;font-weight:600;line-height:1.35;letter-spacing:-.015em}
#report .fx-opts{margin-top:6px;display:grid;gap:4px}
#report .fx-opts li{display:flex;align-items:center;gap:8px;height:30px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:13.5px;color:var(--ink)}
#report .fx-radio{position:relative;width:15px;height:15px;border-radius:50%;border:1.5px solid #c5cdd8;flex:none}
#report .fx-radio i{position:absolute;inset:3px;border-radius:50%;background:var(--blue-ink);opacity:0;scale:0}
#report .fx-name{font-weight:500;white-space:nowrap}
#report .fx-foot{position:relative;margin-top:6px;display:flex;align-items:center;gap:10px;padding:6px 6px 6px 8px}
#report .fx-msg{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:5px;font-size:13px;line-height:1.35;color:var(--body)}
#report .fx-msg svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--muted);stroke-width:1.4;stroke-linecap:round}
#report .fx-btn{flex:none;margin-left:auto;display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:8px;background:#eef2f6;color:#8a93a5;font-size:13px;font-weight:500;white-space:nowrap}
#report .fx-mark{position:absolute;inset:0;pointer-events:none}
#report .fx-mark svg{width:100%;height:100%;overflow:visible}
#report .fx-mark rect{fill:var(--red);fill-opacity:.06;stroke:var(--red);stroke-width:2;stroke-dasharray:100;stroke-dashoffset:0}
#report .fx-pin{position:absolute;left:-8px;top:-8px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--red-ink);color:#fff;font-size:12px;font-weight:700;line-height:1;box-shadow:0 0 0 3px #fff}
#report .fd-quote{position:relative;margin:10px 2px 0;padding:0 0 0 13px;border-left:2px solid color-mix(in srgb,var(--red) 55%,#fff)}
#report .fd-quote-t{font-size:14px;font-weight:600;line-height:1.35;letter-spacing:-.015em;color:var(--ink)}
#report .fd-quote-t mark{padding:0 2px;color:inherit;background:linear-gradient(transparent 60%,color-mix(in srgb,var(--red) 22%,transparent) 60%)}
#report .fd-quote-k{margin-top:3px;font-size:13px;line-height:1.4;color:var(--body)}
#report .fd-body{display:flex;flex-direction:column;justify-content:space-between;gap:13px;min-width:0;padding:12px 16px 14px}
#report .fd-trust{padding-top:13px;border-top:1px solid var(--line-soft)}
/* How we know. Two facts on one line, in the body colour: as four coloured pills they read as
   loud as the finding itself, and two of them only repeated the head and the screenshot. */
#report .fd-trust ul{display:flex;flex-wrap:wrap;align-items:center;gap:5px 16px}
#report .fd-trust li{display:flex}
#report .fd-trust .ev{height:auto;gap:6px;padding:0;border:0;background:none;box-shadow:none;font-size:13px;font-weight:500;color:var(--body)}
#report .fd-trust .ev svg{width:14px;height:14px;color:var(--green-ink)}
/* Expected vs actual: the label runs in front of the sentence, so each block is two lines */
/* Two rows, not two boxes: a coloured rule carries the contrast and the card keeps one filled
   block, the fix, so the eye knows where the answer is. The label sits on its own line, so the
   sentence starts at the same place on every line and in both rows. */
#report .fd-ea{display:grid;gap:12px}
#report .fd-ea > div{padding:1px 0 1px 11px;border-left:2px solid;line-height:1.45}
#report .fd-ea .is-exp{border-color:color-mix(in srgb,var(--green) 55%,#fff)}
#report .fd-ea .is-act{border-color:var(--red)}
#report .fd-ea dt{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;line-height:1.4;color:var(--green-ink)}
#report .fd-ea .is-act dt{color:var(--red-ink)}
#report .fd-ea dt svg{width:15px;height:15px;flex:none}
#report .fd-ea dd{margin-top:2px;font-size:13.5px;line-height:1.45;color:var(--ink)}
/* Steps to reproduce, folded into one line (the steps are in the full report and in the markup for screen readers) */
#report .fd-lb{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;line-height:1.4;color:var(--body)}
#report .fd-lb::before{content:"";width:14px;height:2px;flex:none;border-radius:2px;background:#c8d2dd}
#report .fd-fix{padding:12px 14px 13px;border-radius:12px;border:1px solid color-mix(in srgb,var(--green) 42%,#fff);
  background:linear-gradient(135deg,color-mix(in srgb,var(--green) 15%,#fff),color-mix(in srgb,var(--green) 6%,#fff));box-shadow:0 16px 30px -22px color-mix(in srgb,var(--green) 90%,transparent)}
#report .fd-fix-k{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;line-height:1.4;color:#1f6b47}
#report .fd-fix-k svg{width:20px;height:20px;flex:none;padding:3px;border-radius:50%;background:var(--green-ink);color:#fff}
#report .fd-fix-t{margin-top:4px;font-size:14px;font-weight:500;line-height:1.4;letter-spacing:-.01em;color:var(--ink)}

/* ---------- Step controls (pattern: hero .vh-bar) ---------- */
#report .rp-frame:not(.is-live) .rp-bar{display:none}
#report .rp-bar{display:flex;align-items:flex-start;gap:16px;padding:10px 8px 0}
#report .rp-steps{position:relative;flex:1 1 auto;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#report .rp-step{appearance:none;display:flex;flex-direction:column;gap:7px;min-width:0;padding:6px 2px 2px;border:0;border-radius:8px;background:none;text-align:left;cursor:pointer}
#report .rp-step-bar{position:relative;display:block;height:3px;border-radius:3px;background:var(--line-soft);overflow:hidden}
#report .rp-step-bar i{position:absolute;inset:0;border-radius:inherit;background:var(--grad);transform-origin:0 50%}
#report .rp-step-l{display:flex;gap:8px;font-size:13.5px;font-weight:500;line-height:1.4;color:var(--muted);transition:color .3s}
#report .rp-step-l em{font-style:normal;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--faint);transition:color .3s}
#report .rp-step[aria-current="step"] .rp-step-l,#report .rp-step:hover .rp-step-l{color:var(--ink)}
#report .rp-step[aria-current="step"] .rp-step-l em{color:var(--blue-ink)}
#report .rp-btn{appearance:none;flex:none;display:grid;place-items:center;width:34px;height:34px;margin-top:2px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--ink);transition:border-color .25s,box-shadow .25s}
#report .rp-btn[hidden]{display:none}
#report .rp-btn:hover{border-color:#cfd8e3;box-shadow:0 10px 22px -14px rgba(12,21,41,.35)}
#report .rp-btn:focus-visible{border-radius:50%}
#report .rp-btn svg{display:none;width:12px;height:12px}
#report .rp-btn .i-replay{width:16px;height:16px}
#report .rp-btn[data-state="playing"] .i-pause,#report .rp-btn[data-state="paused"] .i-play,#report .rp-btn[data-state="ended"] .i-replay{display:block}

#report .rp-foot{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}

/* ==================================================================================================================
 * Motion. Only under .is-armed (section.js). Transitions on the final look run when step 3 starts.
 * ================================================================================================================== */
/* --- entering step 3 (final look): the list steps back, finding 1 grows into the card --- */
#report .is-armed .rp-run{transition:opacity .3s ease,visibility 0s linear .3s}
#report .is-armed .rp-list{transition:opacity .35s ease .15s}
#report .is-armed .rp-lh1{transition:opacity .25s ease}
#report .is-armed .rp-lh2{transition:opacity .4s ease .35s}
#report .is-armed .rp-side{transition:background-color .6s ease 1.5s,box-shadow .6s ease 1.5s,border-color .6s ease 1.5s}
#report .is-armed .rp-row{transition:translate .85s var(--ease) calc(.2s + var(--p) * .05s),opacity .4s ease,transform .5s var(--ease),
  border-color .4s ease 1.6s,background-color .4s ease 1.6s,box-shadow .45s ease 1.6s}
#report .is-armed .rp-no{transition:background-color .3s ease calc(1s + var(--p) * .06s)}
#report .is-armed .rp-no i{transition:opacity .3s ease calc(1s + var(--p) * .06s),scale .45s var(--spring) calc(1s + var(--p) * .06s)}
#report .is-armed .rp-rt em{transition:color .3s ease 1s}
#report .is-armed .rp-row.is-open::after{transition:transform .45s var(--ease) 1.75s}
#report .is-armed .rp-wdh{transition:opacity .4s ease .95s}
#report .is-armed .rp-field{scale:.985;transition:opacity .45s ease,visibility 0s linear .45s,scale .6s var(--ease)}
#report .is-armed .fd{transition:opacity .5s ease .25s,scale .9s var(--ease) .25s,translate .8s var(--ease) .25s,box-shadow .35s ease}
#report .is-armed :is(.fd-hl > *,.fd-stat){transition:opacity .5s ease calc(.45s + var(--n) * .12s),translate .7s var(--ease) calc(.45s + var(--n) * .12s)}
#report .is-armed .fd-dots i.on{transition:background-color .25s ease calc(.95s + var(--i) * .045s),box-shadow .25s ease calc(.95s + var(--i) * .045s)}
#report .is-armed .fd-body > :not(.fd-trust){transition:opacity .5s ease calc(.75s + var(--n) * .22s),translate .7s var(--ease) calc(.75s + var(--n) * .22s)}
#report .is-armed .fx-was{transition:border-color .45s ease .8s,background-color .45s ease .8s}
#report .is-armed .fx-was .fx-radio{transition:border-color .45s ease .8s}
#report .is-armed .fx-was .fx-radio i{transition:opacity .3s ease .85s,scale .35s var(--ease) .8s}
#report .is-armed .fx-btn{transition:background-color .4s ease 1s,color .4s ease 1s}
#report .is-armed .fx-msg{transition:opacity .45s ease 1.1s,translate .6s var(--ease) 1.1s}
#report .is-armed .fx-mark rect{transition:stroke-dashoffset .8s cubic-bezier(.45,.05,.25,1) 1.4s,fill-opacity .4s ease 2s}
#report .is-armed .fx-pin{transition:opacity .25s ease 2.05s,scale .45s var(--spring) 2.05s}
#report .is-armed .fd-quote{transition:opacity .5s ease 2.15s,translate .7s var(--ease) 2.15s}
#report .is-armed .fd-ck{transition:opacity .4s ease 2.1s}
#report .is-armed .fd-trust li{transition:opacity .3s ease calc(2.4s + var(--n) * .14s),scale .45s var(--spring) calc(2.4s + var(--n) * .14s)}
/* field internals: their own final look is the step 2 look, so these run when step 2 starts */
#report .is-armed .ln-p{transition:opacity .5s ease .1s}
#report .is-armed .ln-d{transition:opacity .5s ease .2s,translate .8s var(--ease) calc(.35s + var(--j, 0) * .035s),background-color .3s ease}
#report .is-armed .ln-b{transition:opacity .4s ease .1s}
#report .is-armed .rf-call{transition:opacity .25s ease,translate .3s ease}
#report .is-armed .rf-ring{transition:opacity .4s ease .8s,scale .6s var(--spring) .8s}
#report .is-armed .rf-badge{transition:opacity .4s ease 1s,translate .6s var(--ease) 1s}
#report .is-armed .rf-ev li{transition:opacity .3s ease calc(1.4s + var(--n) * .3s),scale .45s var(--spring) calc(1.4s + var(--n) * .3s)}
#report .is-armed .rf-wd{transition:opacity .4s ease 2.2s,translate .6s var(--ease) 2.2s}
/* withdrawn rows: struck at the end of step 2 */
#report .is-armed .is-w .rp-rt b::after{transition:transform .5s var(--ease) calc(2.1s + (var(--q) - 1) * .05s)}
#report .is-armed .is-w .rp-rt b{transition:color .4s ease 2.15s}
#report .is-armed .rp-m1{transition:opacity .25s ease 2.2s}
#report .is-armed .rp-m2{transition:opacity .35s ease 2.35s}
#report .is-armed .is-w .rp-no i{transition:opacity .3s ease 2.2s}
#report .is-armed .rp-row.is-w{transition:translate .85s var(--ease) .2s,opacity .4s ease,transform .5s var(--ease),background-color .4s ease 2.2s}
#report .is-armed .rp-ck i.on{transition:border-color .3s ease calc(.55s + var(--q) * .09s + var(--k) * .35s),background-color .3s ease calc(.55s + var(--q) * .09s + var(--k) * .35s),scale .45s var(--spring) calc(.55s + var(--q) * .09s + var(--k) * .35s)}
#report .is-armed .rp-ck i.on::before{transition:background-color .3s ease calc(.55s + var(--q) * .09s + var(--k) * .35s)}
#report .rp-ck i:nth-child(1){--k:0}
#report .rp-ck i:nth-child(2){--k:1}
#report .rp-ck i:nth-child(3){--k:2}
/* step 1 pieces: their final look is the step 1 look, so these run when step 1 starts */
#report .is-armed .rs-a{transition:opacity .3s ease var(--a),scale .45s var(--spring) var(--a),box-shadow .3s ease var(--end),background-color .3s ease var(--end),color .3s ease var(--end)}
#report .is-armed .rp-wk{transition:opacity .4s ease 1.1s}
#report .is-armed .rp-who li{transition:opacity .4s ease var(--d),translate .6s var(--ease) var(--d)}

/* --- step 2 look (and earlier) --- */
#report .is-armed:not(.is-s2) .rp-lh1{opacity:1;transition:opacity .35s ease .2s}
#report .is-armed:not(.is-s2) .rp-lh2{opacity:0;transition:opacity .2s ease}
#report .is-armed:not(.is-s2) .rp-side{background:#fff;border-color:#e6ebf1;box-shadow:var(--sh);transition:background-color .3s ease,box-shadow .3s ease,border-color .3s ease}
#report .is-armed:not(.is-s2) .rp-row{translate:0 calc((var(--q) - var(--p)) * var(--rh));
  transition:opacity .4s ease calc(.25s + var(--q) * .09s),transform .6s var(--ease) calc(.25s + var(--q) * .09s)}
#report .is-armed:not(.is-s2) .rp-row:not(.is-w){background:#fff}
#report .is-armed:not(.is-s2) .rp-row.is-w{translate:0 calc((var(--q) - var(--p)) * var(--rh) - var(--wo));
  transition:opacity .4s ease calc(.25s + var(--q) * .09s),transform .6s var(--ease) calc(.25s + var(--q) * .09s),background-color .4s ease 2.2s,border-color .4s ease 2.2s}
#report .is-armed:not(.is-s2) .rp-row.is-open{border-color:var(--line-soft);background:#fff;box-shadow:none}
#report .is-armed:not(.is-s2) .rp-row.is-open::after{transform:scaleX(0)}
#report .is-armed:not(.is-s2) .rp-no{background:#eef2f6}
#report .is-armed.is-s2 .rp-ck{opacity:0;transition:opacity .3s ease}
#report .is-armed:not(.is-s2) .rp-no i{opacity:0;scale:.5}
#report .is-armed:not(.is-s2) .is-w .rp-no i{opacity:1;scale:1}
#report .is-armed:not(.is-s2) .rp-rt em{color:var(--muted)}
#report .is-armed:not(.is-s2) .rp-wdh{opacity:0;transition:opacity .2s ease}
#report .is-armed:not(.is-s2) .rp-field{opacity:1;visibility:visible;scale:1;transition:opacity .35s ease,visibility 0s}
#report .is-armed:not(.is-s2) .fx-was{border-color:color-mix(in srgb,var(--blue) 55%,#fff);background:color-mix(in srgb,var(--blue) 6%,#fff)}
#report .is-armed:not(.is-s2) .fx-was .fx-radio{border-color:var(--blue-ink)}
#report .is-armed:not(.is-s2) .fx-was .fx-radio i{opacity:1;scale:1}
#report .is-armed:not(.is-s2) .fx-btn{background:var(--ink);color:#fff}
#report .is-armed:not(.is-s2) .fx-msg{opacity:0;translate:-6px 0}
#report .is-armed:not(.is-s2) .fx-mark rect{stroke-dashoffset:100;fill-opacity:0}
#report .is-armed:not(.is-s2) .fx-pin{opacity:0;scale:.4}

/* --- step 1 look (and the empty start) --- */
#report .is-armed:not(.is-s1) .rp-run{opacity:1;visibility:visible;transition:opacity .35s ease .05s,visibility 0s}
#report .is-armed:not(.is-s1) .rp-list{opacity:0;transition:opacity .25s ease}
#report .is-armed:not(.is-s1) .rp-row{opacity:0;transform:translateX(-12px)}
#report .is-armed:not(.is-s1) .rp-ck i.on{--ic:#c5cdd8;border-style:dashed;border-color:#d5dce5;background:#fff;scale:.85}
#report .is-armed:not(.is-s1) .is-w .rp-rt b{color:var(--ink);font-weight:600}
#report .is-armed:not(.is-s1) .is-w .rp-rt b::after{transform:scaleX(0)}
#report .is-armed:not(.is-s1) .rp-m1{opacity:1}
#report .is-armed:not(.is-s1) .rp-m2{opacity:0}
#report .is-armed:not(.is-s1) .is-w .rp-no i{opacity:0}
#report .is-armed:not(.is-s1) .rp-row.is-w{background:#fff;border-color:var(--line-soft)}
#report .is-armed:not(.is-s1) .ln-p{opacity:var(--po);transition:transform var(--t) cubic-bezier(.45,.08,.3,1) var(--dl)}
#report .is-armed:not(.is-s1) .ln-d,
#report .is-armed:not(.is-s1) .ln.o1 .ln-d{opacity:var(--do);translate:calc(var(--e) * 100cqw) 0;
  transition:opacity .2s ease var(--dl),translate var(--t) cubic-bezier(.45,.08,.3,1) var(--dl),background-color .3s ease var(--end)}
/* the testers who go back are moved by section.js (a path with a loop), so no transition on their position */
#report .is-armed:not(.is-s1) .ln.o3 .ln-d{transition:opacity .2s ease var(--dl),background-color .3s ease var(--end)}
#report .is-armed:not(.is-s1) .ln-b{opacity:.85;transition:opacity .35s ease var(--bk)}
#report .is-armed:not(.is-s1) .rf-call{opacity:1;translate:0 -50%;transition:opacity .4s ease var(--d),translate .55s var(--ease) var(--d)}
#report .is-armed:not(.is-s1) :is(.rf-ring,.rf-ev li){opacity:0;scale:.6}
#report .is-armed:not(.is-s1) .rf-badge{opacity:0;translate:0 10px}
#report .is-armed:not(.is-s1) .rf-wd{opacity:0;translate:0 6px}

/* --- empty start --- */
#report .is-armed:not(.is-s0) .rs-a{opacity:0;scale:.5;--st:transparent;background:#f1f4f7;color:#98a2b3}
#report .is-armed:not(.is-s0) .rp-wk{opacity:0}
#report .is-armed:not(.is-s0) .rp-who li{opacity:0;translate:0 8px}
#report .is-armed:not(.is-s0) .ln-p{transform:scaleX(0)}
#report .is-armed:not(.is-s0) .ln-d,
#report .is-armed:not(.is-s0) .ln.o1 .ln-d{opacity:0;translate:0 0;background:var(--blue)}
#report .is-armed:not(.is-s0) .ln-b{opacity:0}
#report .is-armed:not(.is-s0) .rf-call{opacity:0;translate:-6px -50%}


/* ---------- Wide frames (1240 px and up): one screen ----------
 * Height budget: stage 630 = window bar 45 + body padding 24 + columns 559 + borders 2. Frame 699 with the step bar
 * (border 1 + padding 10 + stage 630 + bar 47 + padding 10 + border 1). Nothing inside scrolls.
 * Card, 559 tall: head about 124, below it two columns of about 400 (screenshot + quote | trust, expected vs actual,
 * steps line, fix). Left panel: step 1 about 435, step 2 list 61 + 10 rows of 44 = 501, step 3 list 61 + 8 rows. */
@media (min-width:1240px){
  #report .rp-stage{height:630px}
  #report .rp-sc{display:flex;flex-direction:column;height:100%}
  #report .rp-win{flex:none}
  #report .rp-body{flex:1 1 auto;min-height:0;grid-template-rows:minmax(0,1fr)}
  #report .rp-side,#report .rp-main{min-height:0}
  #report .rp-rows{height:calc(var(--rh) * 10)}
  #report .fd-trust ul{flex-direction:column;align-items:flex-start}

  /* Step 3: the three withdrawn findings slide into one quiet line under the ranked list and fade into it */
  #report .rp-wdh{height:calc(var(--rh) - 5px);padding:0 10px;border-radius:10px;background:rgba(255,255,255,.55);border:1px dashed #d5dce5}
  #report .rp-row.is-w{translate:0 calc((7 - var(--p)) * var(--rh) - var(--wo));opacity:0}
  #report .is-armed .rp-row.is-w{transition:translate .7s var(--ease) .2s,opacity .3s ease .65s,transform .5s var(--ease)}
  #report .is-armed.is-s1:not(.is-s2) .rp-row.is-w{opacity:1}
}

/* Card while the run is on, at every width (wide: the live run covers it and the card grows out of finding 1 in step 3;
 * below 1240 it waits unseen in its own panel and fades in on step 3). */
#report .is-armed:not(.is-s2) .fd{opacity:0;scale:.9}
#report .is-armed:not(.is-s2) :is(.fd-hl > *,.fd-stat){opacity:0;translate:0 10px}
#report .is-armed:not(.is-s2) .fd-dots i.on{background:#e3e9f0;box-shadow:none}
#report .is-armed:not(.is-s2) .fd-quote{opacity:0;translate:0 10px}
#report .is-armed:not(.is-s2) .fd-ck{opacity:0}
#report .is-armed:not(.is-s2) .fd-trust li{opacity:0;scale:.82}
#report .is-armed:not(.is-s2) .fd-body > :not(.fd-trust){opacity:0;translate:0 10px}

/* Short wording for narrow frames (.t-s), shown below 1000 px; the full wording (.t-l) stays for screen readers. */
#report .t-s{display:none}

/* Phone strip (below 760 only): the 40 lanes packed into one track. Dots walk to where their tester stopped, then
 * hop into a stack there (x and y run as two transitions, so the walk and the stacking read as two moves). */
#report .rp-strip{display:none}
/* Phone step 01: a heading, one stacked bar, the key and the one thing the bar does not say. */
#report .rs-h{font-size:13px;font-weight:600;line-height:1.4;color:var(--ink)}
#report .rs-bar{display:flex;gap:2px;margin-top:7px;height:12px}
#report .rs-bar i{flex:var(--f);border-radius:3px;background:var(--green)}
#report .rs-bar .k-bad{background:var(--red)}
#report .rs-bar .k-left{background:var(--orange)}
#report .rs-bar .k-tool{background:#b7c0cd}
#report .rs-note{margin-top:7px;font-size:13px;line-height:1.4;color:var(--body)}
#report .rs-lane{position:relative;height:62px;margin:0 6px;container-type:inline-size}
#report .rs-lane::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:#e3e9f0}
#report .rs-t{position:absolute;bottom:-3px;left:calc(var(--x) * 100%);width:1px;height:8px;background:#d5dce5}
#report .rs-t.is-hot{width:2px;margin-left:-.5px;background:color-mix(in srgb,var(--red) 60%,#fff)}
#report .rs-d{--c:var(--green);position:absolute;left:-3px;bottom:5px;width:6px;height:6px;border-radius:50%;background:var(--c);
  translate:calc(var(--e) * 100cqw + var(--ox)) 0;transform:translateY(calc(-1 * var(--oy)))}
#report .rs-d:is(.o1,.o4){--c:var(--red)}
#report .rs-d.o5{--c:var(--orange)}
#report .rs-d.o2{--c:#98a2b3}
#report .rs-d.is-f{box-shadow:0 0 0 1.5px #fff,0 0 0 3px var(--h)}
#report .rs-ax{display:grid;grid-template-columns:1fr auto 1fr;margin-top:6px;font-size:13px;font-weight:600;line-height:1.35;color:var(--ink)}
#report .rs-ax span:last-child{justify-self:end}
#report .rs-ax .is-hot{color:var(--red-ink)}
#report .rs-key{margin-top:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 12px}
#report .is-armed .rs-d{transition:opacity .4s ease}
#report .is-armed:not(.is-s1) .rs-d{transition:opacity .2s ease var(--dl),translate var(--t) cubic-bezier(.45,.08,.3,1) var(--dl),transform .45s var(--spring) var(--end)}
#report .is-armed:not(.is-s0) .rs-d{opacity:0;translate:0 0;transform:none}

/* ---------- Below 1240: one panel per step, fixed frame height (v5) ----------
 * Each step shows only its own panel across the full width of the frame and the panels cross-fade in place:
 * 01 the testers (and their lanes), 02 the findings being grouped and checked, 03 a strip "7 findings, ranked" with
 * finding 1 under it as the full card. The stage height is fixed, nothing scrolls inside, nothing is cut off.
 * Height budget, tablet (760 to 1239): stage 545 = border 2 + window bar 44 + body padding 24 + panel 475;
 *   frame 618 = border 2 + padding 20 + step bar 51 + stage 545.
 *   Step 3 at 760: strip 46 + card 417 (head 125, screenshot column 292). Step 2: header 30 + 10 rows of 42.
 * Height budget, phone (up to 759): stage 564 = border 2 + window bar 34 + body padding 12 + panel 516;
 *   frame 622 = border 2 + padding 12 + step bar 44 + stage 564.
 *   Step 3 at 390: strip 56 + card 454 of 460 (head 115, trust 24, screenshot 89, quote 38, expected/actual 72, fix 62).
 *   Step 2: header 49 + 10 rows of 44 = 489 of 496. Step 1: 481 of 490.
 * Below 1000 the card uses the short wording (.t-s); the full wording stays in the markup for screen readers. */
@media (max-width:1239px){
  #report .rp-frame{padding:10px}
  #report .rp-bar{order:-1;padding:2px 6px 12px}
  #report .rp-stage{--strip:46px;--rh:42px;--wo:0px;height:545px}
  #report .rp-sc{display:flex;flex-direction:column;height:100%}
  #report .rp-win{flex:none}
  #report .rp-body{flex:1 1 auto;min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:0;padding:12px}
  #report .rp-side,#report .rp-main{grid-area:1/1;min-width:0;min-height:0}
  /* the side column stops being a panel: every step brings its own */
  #report .rp-side,#report .is-armed:not(.is-s2) .rp-side{grid-template-rows:minmax(0,1fr);padding:0;background:none;border:0;box-shadow:none}

  /* Step 1 panel: the testers (the lanes sit next to or under it, see the tablet blocks) */
  #report .rp-run{padding:12px 14px;border-radius:16px;background:#fff;border:1px solid #e6ebf1;box-shadow:var(--sh)}

  /* Step 2 panel: the findings being grouped and checked. Its box and rows fade away in step 3, the strip stays. */
  #report .rp-list{position:relative;isolation:isolate;padding:12px 16px}
  #report .rp-list::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:16px;background:#fff;border:1px solid #e6ebf1;box-shadow:var(--sh);opacity:0}
  #report .rp-rows{height:calc(var(--rh) * 10);opacity:0;visibility:hidden}
  #report .rp-row.is-open::after{display:none}
  #report .rp-lh2{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}
  
  /* Step 3 panel: finding 1 across the full width, under the strip */
  #report .rp-main{grid-template-rows:minmax(0,1fr)}
  #report .fd{margin-top:var(--strip);min-height:0}
  #report .fd-head{padding:12px 16px 10px;gap:8px 18px}
  #report .fd-title{margin-top:6px;font-size:20px}
  #report .fd-lb,#report .fx-steps{display:none}
  #report .fd-sec{display:contents}
  /* Without its note the quote only repeats the line the screenshot shows above it. Kept for
     screen readers; the app name takes the room instead, because it names whose screen this is. */
  #report .fd-quote{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  #report .fd-quote-k{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  #report .fd-art{padding:10px 12px}
  #report .fx-h{margin-top:0}
  #report .fx-opts li{height:28px}
  #report .fd-quote-t{font-size:14px}
  #report .fd-body{gap:10px;padding:10px 14px 12px}

  /* Motion: the panels cross-fade. Step 2 hides the live run, step 3 fades the list box and rows, the card comes in. */
  #report .is-armed .rp-list::before{transition:opacity .35s ease}
  #report .is-armed .rp-rows{transition:opacity .3s ease,visibility 0s linear .3s}
  #report .is-armed:not(.is-s2) .rp-list::before{opacity:1}
  #report .is-armed:not(.is-s2) .rp-rows{opacity:1;visibility:visible;transition:opacity .35s ease .1s,visibility 0s}
  #report .is-armed.is-s1:not(.is-s2) .rp-field{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
}

/* Short wording, below 1000 */
@media (max-width:999px){
  #report .t-l{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  #report .t-s{display:inline}
  #report .fd-trust .ev{gap:4px;padding:0 8px 0 6px}
  /* Expected and Actual side by side */
  #report .fd-ea{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  #report .fd-ea dd{font-size:13px;line-height:1.4}
}

/* ---------- Tablet (760 to 1239) ---------- */
@media (min-width:760px) and (max-width:1239px){
  /* Findings on one line each: number, title, severity and count, proof */
  #report .rp-lh1{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:0 12px}
  #report .rp-row{grid-template-columns:22px minmax(0,1fr) auto auto;grid-template-rows:auto;column-gap:12px;padding:0 10px}
  #report .rp-no{grid-row:1}
  #report .rp-rt b{grid-column:2;grid-row:1}
  #report .rp-rt small{grid-column:3;grid-row:1;justify-self:end}
  #report .rp-ck{grid-column:4;grid-row:1}
  #report .is-w .rp-rt small{grid-column:3/5;justify-items:end}
}
@media (min-width:760px) and (max-width:959px){
  #report .rp-wt span{display:none}
}
/* 760 to 999: the testers in a band across the top, their 40 lanes under it (about 3.4 px per lane) */
@media (min-width:760px) and (max-width:999px){
  #report .rp-stage{--runh:180px}
  #report .rp-run{align-self:start;height:var(--runh);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:8px 20px}
  #report .rp-ph{grid-column:1;grid-row:1}
  #report .rp-roster{grid-column:1;grid-row:2;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;max-width:272px}
  #report .rp-wk{display:none}
  #report .rp-who{grid-column:2;grid-row:1/3;align-content:start;gap:4px}
  #report .rp-who li{min-height:26px;padding:2px 10px 2px 6px}
  #report .rw-a{width:20px;height:20px}
  #report .rp-field{--gut:56px;top:calc(var(--runh) + 10px);padding:12px 14px 10px}
    #report .rf-key{margin-top:4px}
  #report .rf-axis{margin:10px 6px 0 var(--gut)}
  #report .rf-lanes{margin:4px 6px 0 var(--gut)}
  #report .ln-d{left:-3px;top:-3px;width:6px;height:6px}
  #report .ln.is-f .ln-d{left:-5px;top:-5px;width:10px;height:10px}
  #report .rf-call{padding:2px 9px}
}
/* 1000 to 1239: the testers in a column on the left, the lanes beside them (as on desktop, without the side panel) */
@media (min-width:1000px) and (max-width:1239px){
  #report .rp-stage{--runw:240px}
  #report .rp-run{justify-self:start;width:var(--runw)}
  #report .rp-who li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:0 8px;padding:5px 10px 5px 7px;white-space:normal}
  #report .rw-a{grid-row:1/3;align-self:center}
  #report .rp-who em{margin-left:0;padding-left:0}
  #report .rp-field{--gut:54px;left:calc(var(--runw) + 12px);padding:14px 14px 12px}
  #report .rf-axis{margin-right:6px}
  #report .rf-lanes{margin-right:6px}
}

/* ---------- Phone (up to 759) ---------- */
@media (max-width:759px){
  #report .rp-frame{padding:6px;border-radius:22px}
  #report .rp-frame::before{left:28px;right:28px}
  #report .rp-stage{--strip:56px;--rh:44px;height:564px;border-radius:15px}
  /* Window bar: one line, the counters and what they are from */
  #report .rp-win{min-height:34px;padding:6px 10px;gap:4px 9px}
  #report .rp-dots,#report .rp-wt{display:none}
  #report .rp-meter{margin-left:0;gap:4px 9px}
  #report .rp-mk{margin-right:0}
  #report .rp-mv{height:auto;padding:0;border:0;border-radius:0;background:none}
  #report .rp-body{padding:6px}

  /* Step bar: three bars, the current step named under them */
  #report .rp-bar{gap:10px;padding:0 2px 8px}
  #report .rp-steps{gap:8px}
  #report .rp-step{min-height:34px;padding:6px 2px 0;gap:0}
  #report .rp-step-l{display:none}
  #report .rp-step[aria-current="step"] .rp-step-l{display:flex;position:absolute;left:2px;right:0;bottom:0;color:var(--ink);white-space:nowrap}

  /* Step 1: header, the 40 as a 10 x 4 grid, the lanes packed into one strip, the four we follow */
  #report .rp-field{display:none}
  /* The panel is as tall as step 03 needs. The blocks stay close together and the four rows
     take the slack, so the height goes into the content rather than into gaps between headings. */
  #report .rp-run{padding:14px 12px;gap:15px}
  #report .rp-who{flex:1;display:flex;flex-direction:column;gap:8px}
  #report .rp-who li{flex:1}
  /* Forty anonymous avatars and a scatter of dots are three pictures of the same forty people.
     The bar is the one that answers "what am I looking at" without a legend to decode first. */
  #report .rp-roster,#report .rs-lane,#report .rs-ax{display:none}
  #report .rp-strip{display:block;margin-top:2px}
  #report .rs-key{margin-top:9px}
  #report .rp-who li{min-height:38px;max-height:54px;padding:5px 10px 5px 6px}
  #report .rw-a{width:22px;height:22px}

  /* Step 2: the list, two lines per finding */
  #report .rp-list{padding:10px 12px}
  #report .rp-row{column-gap:8px;padding:0 7px}
  #report .rp-rt b{font-size:13px}

  /* Step 3: the strip takes two lines, the card stacks in one column */
  #report .rp-lh2{translate:0 -8px;gap:6px 12px}
  #report .fd-head{grid-template-columns:minmax(0,1fr);gap:8px;padding:10px 12px 8px}
  /* severity chip leads the title on its first line; "Finding 1 of 7" and the task stay for screen readers */
  #report .fd-hl{font-size:16px;line-height:26px}
  #report .fd-top{display:inline-flex;margin-right:8px}
  #report .fd-title{display:inline;margin:0;font-size:16px;line-height:inherit;letter-spacing:-.02em}
  /* 14 of 40, the 40 dots and the caption on one row */
  #report .fd-stat{justify-self:stretch;grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"big dots cap";gap:0 10px;padding:0;border:0;background:none;box-shadow:none}
  #report .fd-big{align-self:center;font-size:15px}
  #report .fd-big b{font-size:26px}
  #report .fd-dots{grid-template-columns:repeat(10,5px);gap:3px}
  #report .fd-dots i{width:5px;height:5px}
  #report .fd-cap{align-self:center;max-width:none}
  /* One column, in the order the card is written: their screen with its own ground, then ours.
     The two zones stay apart here the same way they do on a wide frame, by the mat and the labels. */
  #report .fd-grid{display:flex;flex-direction:column;gap:0;padding:0}
  #report .fd-art{padding:8px 12px 9px;border-right:0;border-bottom:1px solid var(--line-soft)}
  #report .fd-body{gap:8px;padding:9px 12px 10px}
  #report .fd-ck{margin-bottom:5px}
  #report .fd-ea{margin-top:0}
  #report .fx{flex:none}
  /* A phone has no room for the app head as well as both zone labels; the label above the
     screenshot already says whose screen it is. */
  #report .fx-h,#report .fx-opts,#report .fx-head{display:none}
  #report .fd-trust{padding-top:7px}
  #report .fd-trust ul{gap:3px 14px}
  #report .fd-trust .ev svg{width:13px;height:13px}
  #report .fx-bar{height:28px}
  #report .fx-app{padding:6px 10px}
  #report .fx-foot{margin-top:0}
  #report .fd-ea{gap:6px}
  #report .fd-fix{padding:8px 12px 9px}
  #report .fd-fix-t{margin-top:3px}
}
@media (max-width:640px){
  #report .sec-head{margin-bottom:24px}
  #report .rp-lead{margin-top:12px}
  #report .rp-foot{margin-top:24px;flex-direction:column;align-items:flex-start;gap:12px}
}