/* Project brief page — comic style */
.brief-hero{padding-bottom:64px}
.brief-hero .cs-title{font-size:clamp(40px,6.4vw,84px);line-height:1.06;max-width:860px}
html[lang=ar] .brief-hero .cs-title{line-height:1.5}
.brief-hero mark{display:inline}
.brief-hero .cs-meta{margin:34px 0 0}

/* sticky progress */
.brief-progress{position:sticky;top:64px;z-index:50;padding:12px 0;background:rgba(244,241,236,.92);backdrop-filter:blur(8px);border-bottom:3px solid var(--ink)}
.brief-progress .wrap{display:flex;align-items:center;gap:16px;max-width:900px}
.bp-pct{font:400 30px/1 var(--disp);min-width:64px;text-align:center;background:var(--red);color:#fff;border:3px solid var(--ink);border-radius:30px;padding:3px 10px 1px;box-shadow:3px 3px 0 var(--ink)}
.bp-bar{flex:1;height:18px;border:3px solid var(--ink);border-radius:20px;background:#fff;overflow:hidden}
.bp-bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(-45deg,var(--red) 0 10px,#c81616 10px 20px);border-radius:20px;transition:width .5s cubic-bezier(.3,1.4,.5,1)}
.bp-saved{font:900 13px var(--body);opacity:0;transition:opacity .3s;background:var(--ink);color:#fff;border-radius:20px;padding:2px 12px}
.bp-saved.show{opacity:1}

.brief-main{padding:60px 0 90px}
.wrap.narrow{max-width:900px}
.bsec{position:relative;background:#fff;border:var(--bd);border-radius:26px;box-shadow:10px 10px 0 var(--ink);padding:34px 34px 30px;margin-bottom:56px}
.bsec:nth-child(3n+1){box-shadow:10px 10px 0 var(--red)}
.bsec-head{display:flex;align-items:center;gap:16px;margin-bottom:6px}
.bsec-num{flex:none;width:56px;height:56px;border-radius:50%;background:var(--red);color:#fff;border:var(--bd);box-shadow:3px 3px 0 var(--ink);display:grid;place-items:center;font:400 28px/1 var(--disp);transform:rotate(-6deg)}
html[lang=ar] .bsec-num{font-weight:900;font-size:22px}
.bsec h2{font-size:clamp(30px,4vw,46px);margin:0;letter-spacing:.02em}
html[lang=ar] .bsec h2{font-size:clamp(26px,3.4vw,38px);line-height:1.5}
.bsec-sub{font-size:16.5px;font-weight:600;color:#5c574f;margin:0 0 22px;padding-inline-start:72px}
.bgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.bgrid.one{grid-template-columns:1fr}
.bgrid.one .bgrid{margin-top:0}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-weight:900;font-size:15px}
.req{color:var(--red);margin-inline-start:2px}
.field input,.field textarea{font:600 16px var(--body);color:var(--ink);background:var(--paper);border:3px solid var(--ink);border-radius:16px;padding:11px 16px;outline:none;transition:box-shadow .2s,background .2s,transform .2s;width:100%}
.field textarea{min-height:104px;resize:vertical;border-radius:18px}
.field input:focus,.field textarea:focus{background:#fff;box-shadow:5px 5px 0 var(--red);transform:translate(-2px,-2px)}
.field.invalid input{border-color:var(--red);background:#fff1f0;animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.hint{font-size:13.5px;font-weight:600;color:#77716A}
.btiles{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.btile{position:relative;display:flex;align-items:flex-start;gap:12px;background:var(--paper);border:3px solid var(--ink);border-radius:18px;padding:12px 16px;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.btile:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.btile input{position:absolute;opacity:0;pointer-events:none}
.btile .box{flex:none;width:28px;height:28px;border-radius:9px;border:3px solid var(--ink);background:#fff;display:grid;place-items:center;margin-top:2px;transition:background .2s,transform .3s cubic-bezier(.3,1.8,.5,1)}
.btile .box svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.4);transition:opacity .2s,transform .3s cubic-bezier(.3,1.8,.5,1)}
.btile:has(input:checked){background:var(--pink);box-shadow:5px 5px 0 var(--red)}
.btile:has(input:checked) .box{background:var(--red);transform:rotate(-8deg) scale(1.1)}
.btile:has(input:checked) .box svg{opacity:1;transform:none}
.btile input:focus-visible+.box{outline:3px solid var(--red);outline-offset:2px}
.btile b{display:block;font-size:15.5px;font-weight:900;line-height:1.35}
.btile .d{display:block;font-size:13px;font-weight:600;color:#6b665e;line-height:1.5;margin-top:2px}
.bs-char{position:absolute;top:-74px;inset-inline-end:26px;height:118px;width:auto;z-index:4;pointer-events:none;filter:drop-shadow(0 5px 0 rgba(17,17,17,.18))}

.brief-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;background:var(--ink);color:#fff;border:var(--bd);border-radius:26px;box-shadow:10px 10px 0 var(--red);padding:30px 34px}
.brief-actions .btn-red{box-shadow:5px 5px 0 #fff}
.brief-actions .btn-white{box-shadow:5px 5px 0 var(--red)}
.brief-actions .btn-ink{background:#333;border-color:#fff;color:#fff;margin-inline-start:auto;box-shadow:3px 3px 0 var(--red)}
.brief-err{display:none;flex-basis:100%;background:var(--red);color:#fff;font-weight:900;border:3px solid #fff;border-radius:14px;padding:8px 16px}
.brief-err.show{display:block;animation:shake .35s}
.brief-note{flex-basis:100%;margin:6px 0 0;font-size:14px;font-weight:600;color:#cfcac2}

/* print sheet */
#printSheet{display:none}
@media print{
  @page{size:A4;margin:14mm}
  body.brief-page>*:not(#printSheet){display:none!important}
  body.brief-page{background:#fff!important}
  body::before{display:none}
  #printSheet{display:block!important;font-family:Cairo,system-ui,sans-serif;color:#111}
  .ps-head{display:flex;align-items:center;gap:14px;background:#E21B1B;color:#fff;padding:14px 18px;border:3px solid #111;border-radius:16px;box-shadow:6px 6px 0 #111;margin-bottom:22px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .ps-head img{width:48px;height:48px;background:#fff;border-radius:50%;padding:5px}
  .ps-head b{display:block;font:400 30px/1 'Bebas Neue',Cairo;letter-spacing:.06em}
  .ps-head span{font-weight:900;font-size:16px}
  .ps-head em{margin-inline-start:auto;font-style:normal;font-weight:700;font-size:12px;direction:ltr}
  .ps-rows{display:grid;gap:8px}
  .ps-row{display:grid;grid-template-columns:150px 1fr;gap:14px;border:2px solid #111;border-radius:12px;padding:8px 14px;break-inside:avoid}
  .ps-row b{color:#E21B1B;font-weight:900}
  .ps-row span{font-weight:600;white-space:pre-wrap;overflow-wrap:anywhere}
}

@media(max-width:820px){
  .bgrid,.btiles{grid-template-columns:1fr}
  .bsec{padding:26px 20px 24px;margin-bottom:50px;border-radius:22px}
  .bsec-sub{padding-inline-start:0}
  .bs-char{height:90px;top:-58px}
  .brief-progress{top:60px}
  .brief-actions{padding:24px 20px}
  .brief-actions .btn-ink{margin-inline-start:0}
}