/* work/find-the-story (Ideas and data): this page's window sizes and the cards the page adds. The frame is shared/site.css;
   the shared cards are shared/app-cards.css. Window sizes live here, never in a style attribute (the narrow rule must reach them).
   Cards drawn only here so far (candidates for shared/app-cards.css): .pc-rf (ranked ideas), .pc-steps (a numbered plan),
   .pc-toggle (a rule switch), .pc-qs (questions for review), .pc-hbars (a bar chart), .pc-tiles-4 (four number tiles). */
/* red team wave 2: ONE hero window (780×580) and ONE stage window (900×660) on all six work pages, so the drawn UI keeps one
   scale: u ≈ 0.95 in the hero and in the stages at 1440, ≈ 0.88–0.90 at 1366, and ≥ 0.95 at 1440×780 (the design report's
   900/960 widths gave 0.82 in the hero against 0.90 in the stages, and 8–9 px window text at 1366). Phones: 430 × 640 / 760.
   A short laptop screen: the hero section drops its section padding so the window's caption stays above the fold
   (the shared rule sets the hero's own padding only; logged for shared/site.css). */
@media (max-height:820px) and (min-width:900px){.sec-hero{padding-top:0}}
.w-fs-hero{--dw:780;--dh:580}
.w-fs{--dw:900;--dh:660}
.w-fs .w-ctext,.w-fs-hero .w-ctext{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ranked ideas */
.pc-rows-label{padding:calc(var(--u)*10) calc(var(--u)*14) calc(var(--u)*6);font:600 calc(var(--u)*11)/1.2 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.pc-rf-rows li{display:grid;grid-template-columns:calc(var(--u)*22) minmax(0,1fr);gap:calc(var(--u)*10);padding:calc(var(--u)*8) calc(var(--u)*14);border-top:1px solid #454545}
.pc-rf-rows li>b{width:calc(var(--u)*22);height:calc(var(--u)*22);border-radius:50%;display:grid;place-items:center;background:rgba(33,173,143,.16);color:var(--teal-hi);font:600 calc(var(--u)*11)/1 var(--sans)}
.pc-rf-rows strong{display:flex;align-items:center;gap:calc(var(--u)*8);font-size:calc(var(--u)*13);font-weight:600;line-height:1.3}
.pc-rf-rows strong em{flex:none;padding:calc(var(--u)*2) calc(var(--u)*6);border-radius:calc(var(--u)*5);background:#333333;font:600 calc(var(--u)*11)/1.2 var(--sans);font-style:normal;letter-spacing:.05em;text-transform:uppercase;color:var(--sub)}
.pc-rf-rows small{display:block;margin-top:calc(var(--u)*2);font-size:calc(var(--u)*11.5);line-height:1.4;color:var(--sub)}
.pc-rf-rows i{display:block;width:var(--w);height:calc(var(--u)*4);margin-top:calc(var(--u)*6);border-radius:calc(var(--u)*2);background:var(--teal)}
.pc-rf-foot{padding:calc(var(--u)*8) calc(var(--u)*14) calc(var(--u)*10);border-top:1px solid #454545;font-size:calc(var(--u)*11);line-height:1.45;color:var(--dim)}
.pc-rf-foot span{font-weight:600;color:var(--sub)}

/* a numbered plan */
.pc-steps{display:grid;gap:calc(var(--u)*9);padding:calc(var(--u)*12) calc(var(--u)*14) calc(var(--u)*13)}
.pc-steps li{display:grid;grid-template-columns:calc(var(--u)*22) minmax(0,1fr);gap:calc(var(--u)*10);align-items:start}
.pc-steps li>b{width:calc(var(--u)*20);height:calc(var(--u)*20);border-radius:50%;display:grid;place-items:center;background:#333333;font:600 calc(var(--u)*11)/1 var(--sans);color:var(--sub)}
.pc-steps strong{display:block;font-size:calc(var(--u)*13);font-weight:600;line-height:1.35}
.pc-steps small{display:block;font-size:calc(var(--u)*11.5);color:var(--sub)}

/* survey: a rule switch under the areas, then questions for review */
.pc-toggle{display:flex;align-items:center;gap:calc(var(--u)*10);padding:calc(var(--u)*9) calc(var(--u)*12);border-top:1px solid #454545;font-size:calc(var(--u)*12.5);color:var(--sub)}
.pc-toggle>i{position:relative;flex:none;width:calc(var(--u)*30);height:calc(var(--u)*17);border-radius:calc(var(--u)*9);background:var(--teal)}
.pc-toggle>i::after{content:"";position:absolute;top:calc(var(--u)*2);left:calc(var(--u)*15);width:calc(var(--u)*13);height:calc(var(--u)*13);border-radius:50%;background:var(--ink)}
.pc-qs li{display:grid;grid-template-columns:calc(var(--u)*92) minmax(0,1fr) auto;gap:calc(var(--u)*10);align-items:center;min-height:calc(var(--u)*36);padding:calc(var(--u)*6) calc(var(--u)*12);border-bottom:1px solid #454545;font-size:calc(var(--u)*12.5);line-height:1.35}
.pc-qs small{font:600 calc(var(--u)*11)/1.3 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.pc-qs li>b{padding:calc(var(--u)*3) calc(var(--u)*8);border-radius:calc(var(--u)*6);background:rgba(33,173,143,.14);color:var(--teal-hi);font-size:calc(var(--u)*11);font-weight:600;white-space:nowrap}
.pc-qs li.more{display:block;min-height:0;padding:calc(var(--u)*8) calc(var(--u)*12);border-bottom:0;font-size:calc(var(--u)*11.5);color:var(--dim)}

/* data: four number tiles, a bar chart */
.pc-tiles-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pc-hbars{display:grid;gap:calc(var(--u)*10);padding:calc(var(--u)*14) calc(var(--u)*14) calc(var(--u)*12)}
.pc-hbars li{display:grid;grid-template-columns:calc(var(--u)*124) minmax(0,1fr) calc(var(--u)*40);align-items:center;gap:calc(var(--u)*10);font-size:calc(var(--u)*12.5);color:var(--sub)}
.pc-hbars li i{display:block;width:var(--w);height:calc(var(--u)*14);border-radius:calc(var(--u)*3);background:var(--teal)}
.pc-hbars li b{text-align:right;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.w-fs .pc-chosen{max-width:100%}

@media (max-width:899px){
  .fit .w-fs{--dh:760}
  .fit .w-fs-hero{--dh:640}
  .w-fs .pc-choice ul{grid-template-columns:minmax(0,1fr)}
  .w-fs .pc-choice li small{display:none}
  .pc-rf-rows strong{flex-wrap:wrap;gap:calc(var(--u)*4) calc(var(--u)*8)}
  .w-fs-hero .pc-rf-rows small,.pc-rf .pc-rows-label{display:none} /* a phone thread is narrower: the ranked rows keep title, type and strength */
  .pc-tiles-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pc-qs li{grid-template-columns:minmax(0,1fr) auto}
  .pc-qs small{display:none}
  .pc-hbars li{grid-template-columns:calc(var(--u)*110) minmax(0,1fr) calc(var(--u)*36)}
}