/* work/create (Content and creative): 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-chips (tool chips on a deliverable), .c-src (a source note
   in a draft), .pc-img + .ig (an image result with its check line and versions), .pc-video, .pc-wb (the coding workbench line),
   .pc-preview (a web page preview). The client's brand mark is cream on brown, never the site's orange. */
/* 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-cr-hero{--dw:780;--dh:580}
.w-cr{--dw:900;--dh:660}
.w-cr .w-ctext,.w-cr-hero .w-ctext{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-cr-hero .w-canvas{width:calc(var(--u)*420)}
.w-cr-doc .w-canvas{width:calc(var(--u)*440)}

/* a deliverable's tool chips */
.pc-chips{display:flex;flex-wrap:wrap;gap:calc(var(--u)*6);padding:calc(var(--u)*10) calc(var(--u)*12)}
.pc-chips span{padding:calc(var(--u)*3) calc(var(--u)*8);border:1px solid var(--edge);border-radius:calc(var(--u)*6);font-size:calc(var(--u)*11);color:var(--sub)}
.pc-deliv .pc-tag{flex:none}
.pc-deliv footer{border-top:1px solid #454545}

/* a source note in the draft */
.c-src{margin-top:calc(var(--u)*12);padding:calc(var(--u)*9) calc(var(--u)*11);border:1px solid #3d3a33;border-radius:calc(var(--u)*9);background:#2a2824;font-size:calc(var(--u)*12);line-height:1.45;color:var(--sub)}
.c-src strong{display:block;margin-bottom:calc(var(--u)*2);font-size:calc(var(--u)*11);font-weight:600;color:var(--ink)}

/* an image result: the image, the check line and versions, the actions */
.pc-img-frame{padding:calc(var(--u)*12) calc(var(--u)*12) 0}
.ig{display:grid;gap:calc(var(--u)*10);padding:calc(var(--u)*20) calc(var(--u)*20) calc(var(--u)*16);border-radius:calc(var(--u)*10);background:linear-gradient(160deg,#2b2622,#1a1a1a)}
.ig>b{font-size:calc(var(--u)*30);font-weight:600;letter-spacing:-.03em;line-height:1.05}
.ig>small{margin-top:calc(var(--u)*-4);font-size:calc(var(--u)*12.5);color:#f5f5f5}
.ig-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--u)*10)}
.ig-row div{display:grid;gap:calc(var(--u)*2);padding:calc(var(--u)*9) calc(var(--u)*11);border-radius:calc(var(--u)*8);background:rgba(255,255,255,.05)}
.ig-row b{font-size:calc(var(--u)*20);font-weight:600}
.ig-row small{font-size:calc(var(--u)*11);color:#b3b3b3}
.ig-brand{justify-self:end;padding:calc(var(--u)*3) calc(var(--u)*8);border:1px solid #6b5a48;border-radius:calc(var(--u)*5);background:#3a2e25;font-size:calc(var(--u)*11);font-style:normal;font-weight:600;color:#efe3d3}
.pc-img-bar{display:flex;align-items:center;flex-wrap:wrap;gap:calc(var(--u)*8);padding:calc(var(--u)*10) calc(var(--u)*12);font-size:calc(var(--u)*11.5);color:var(--sub)}
.pc-chk{display:inline-flex;align-items:center;gap:calc(var(--u)*6);margin-right:auto;color:var(--teal-hi)}
.pc-chk .ic{width:calc(var(--u)*12);height:calc(var(--u)*12)}
.pc-ver{padding:calc(var(--u)*3) calc(var(--u)*9);border:1px solid var(--edge);border-radius:calc(var(--u)*999);font-size:calc(var(--u)*11);font-weight:600;color:var(--dim)}
.pc-ver.on{--d:inline;border-color:#1f6b5a;color:var(--teal-hi)}
.pc-img footer,.pc-video footer{border-top:1px solid #454545}

/* a video result */
.pc-vframe{position:relative;height:calc(var(--u)*220);margin:calc(var(--u)*12) calc(var(--u)*12) 0;border-radius:calc(var(--u)*10);display:grid;place-items:center;overflow:hidden;background:linear-gradient(180deg,#292929,#1a1a1a)}
.vf-title{position:absolute;top:calc(var(--u)*16);left:calc(var(--u)*16);right:calc(var(--u)*16);max-width:24ch;font-size:calc(var(--u)*15);font-weight:600;line-height:1.3}
.vf-cap{position:absolute;left:0;right:0;bottom:calc(var(--u)*38);width:max-content;max-width:90%;margin-inline:auto;padding:calc(var(--u)*4) calc(var(--u)*8);border-radius:calc(var(--u)*4);background:rgba(0,0,0,.65);font-size:calc(var(--u)*12.5);font-weight:600}
.vf-play{position:relative;width:calc(var(--u)*44);height:calc(var(--u)*44);border-radius:50%;background:rgba(255,255,255,.14)}
.vf-play::after{content:"";position:absolute;left:calc(var(--u)*17);top:calc(var(--u)*13);border-left:calc(var(--u)*14) solid #fff;border-top:calc(var(--u)*9) solid transparent;border-bottom:calc(var(--u)*9) solid transparent}
.vf-time{position:absolute;right:calc(var(--u)*12);bottom:calc(var(--u)*10);font:400 calc(var(--u)*11)/1 var(--sans);color:#f5f5f5}
.vf-brand{position:absolute;left:calc(var(--u)*12);bottom:calc(var(--u)*8)}
.pc-video .pc-img-bar{justify-content:flex-start}

/* the coding workbench line, then the page preview */
.pc-wb{--d:flex;align-items:center;gap:calc(var(--u)*8);padding:calc(var(--u)*7) calc(var(--u)*8) calc(var(--u)*7) calc(var(--u)*12);border:1px solid var(--edge);border-radius:calc(var(--u)*10);background:#292929;font-size:calc(var(--u)*12.5);color:var(--sub)}
.pc-wb>i{flex:none;width:calc(var(--u)*8);height:calc(var(--u)*8);border-radius:50%;background:var(--teal)}
.pc-wb b{font-weight:600;color:var(--ink)}
.pc-wb .pc-btn{margin-left:auto}
.pc-preview{max-width:calc(var(--u)*560);border:1px solid var(--edge);border-radius:calc(var(--u)*10);overflow:hidden;background:#fbfaf7;color:#1a1a1a}
.pv-bar{display:flex;align-items:center;gap:calc(var(--u)*5);padding:calc(var(--u)*7) calc(var(--u)*10);background:#ebe9e4;font-size:calc(var(--u)*11);color:#454545}
.pv-bar i{width:calc(var(--u)*8);height:calc(var(--u)*8);border-radius:50%;background:#c9c6bf}
.pv-bar span{margin-left:calc(var(--u)*8);font-family:var(--sans)}
.pv-page{display:grid;gap:calc(var(--u)*11);padding:calc(var(--u)*16) calc(var(--u)*18)}
.pv-page h4{font-size:calc(var(--u)*17);font-weight:600;letter-spacing:-.02em}
.pv-row{display:grid;grid-template-columns:calc(var(--u)*100) minmax(0,1fr) calc(var(--u)*56);align-items:center;gap:calc(var(--u)*12);font-size:calc(var(--u)*12.5)}
.pv-slider{position:relative;display:block;height:calc(var(--u)*6);border-radius:calc(var(--u)*3);background:#f5f5f5}
.pv-slider i{position:absolute;top:0;bottom:0;left:0;width:var(--p);border-radius:calc(var(--u)*3);background:#6b4f3a}
.pv-input{display:block;width:max-content;padding:calc(var(--u)*5) calc(var(--u)*10);border:1px solid #b3b3b3;border-radius:calc(var(--u)*6)}
.pv-result{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:baseline;gap:calc(var(--u)*2) calc(var(--u)*18);padding:calc(var(--u)*11) calc(var(--u)*14);border-radius:calc(var(--u)*8);background:#f1ede4}
.pv-result small{font-size:calc(var(--u)*11);color:#7a7a7a}
.pv-result b{font-size:calc(var(--u)*21);font-weight:600;letter-spacing:-.02em}

@media (max-width:899px){
  .fit .w-cr{--dh:760}
  .w-cr-hero .w-canvas{display:none}
  .w-cr-doc .w-canvas{width:100%}
  .w-cr-doc[data-state="3"] .w-canvas{display:none}
  .fit .w-cr-hero{--dh:640}
  .w-cr .pc-choice ul{grid-template-columns:minmax(0,1fr)}
  .w-cr .pc-choice li small{display:none}
  .pc-deliv footer .pc-btn:last-child{display:none}
  .pc-img footer .pc-btn:nth-child(2),.pc-img footer .pc-btn:nth-child(3){display:none}
  .pc-video footer .pc-btn:nth-child(1),.pc-video footer .pc-btn:nth-child(2){display:none}
  .pv-row{grid-template-columns:calc(var(--u)*84) minmax(0,1fr) calc(var(--u)*46)}
}