/* Kanvas app sebenar atas latar halaman (/projects/ «What a project holds» dan «Files», /space/ «Collate»): iframe demo
   lutsinar, langkah di sisi (desktop) atau kanvas + segmen + kapsyen (≤1023px). Skrip: canvas-kit.js, canvas.js. */
.pjc{--teal:#0d9488;--violet:#7c3aed;--hl:#2563eb;--ease:cubic-bezier(.22,1,.36,1)}
.pjc + .pjc{border-top:0}
.pjc-split{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:80px;align-items:center}
.pjc-flip .pjc-split{grid-template-columns:minmax(0,1fr) minmax(300px,380px)}
.pjc-flip .pjc-copy{order:2}
@media(min-width:1024px){.pjc .pjc-split{margin-inline:calc(-1 * clamp(0px, (100vw - min(1120px, 80vw)) / 2 - 80px, 120px))}}
.pjc-split > *{min-width:0}

/* ── salinan padat ── */
.pjc-copy h2{margin:0}
.sp-page .pjc-lede{margin:16px 0 0;max-width:46ch}
.pjc-steps{margin:32px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.pjc-steps button{position:relative;display:block;width:100%;padding:16px 0;padding-inline-start:18px;border:0;border-bottom:1px solid var(--line);background:none;color:inherit;font:inherit;text-align:start;cursor:pointer}
.pjc-steps button > b{display:block;color:var(--muted);font:600 16px/1.4 var(--font-display);transition:color .2s}
.pjc-steps button > span{display:block;margin-top:4px;color:var(--muted);font-size:14.5px;line-height:1.6;transition:color .2s}
.pjc-steps button:hover > b,.pjc-steps button[aria-current] > b{color:var(--ink)}
.pjc-steps button[aria-current] > span{color:var(--copy)}
.pjc-bar{position:absolute;inset-block:14px;inset-inline-start:0;width:2px;border-radius:2px;background:var(--line);opacity:0;transition:opacity .2s}
.pjc-bar::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--ink);transform-origin:top}
.pjc-steps button[aria-current] .pjc-bar{opacity:1}
.pjc-steps button.run .pjc-bar::after{animation:pjc-fill var(--dur,4s) linear}   /* tempoh sebenar shot (--dur), bukan 4s tetap */
@keyframes pjc-fill{from{transform:scaleY(0)}}
.pjc-steps button:focus-visible{outline:2px solid var(--hl);outline-offset:2px}
.sp-page .pjc-note{margin:14px 0 0;color:var(--muted);font-size:13px;line-height:1.6}
html[lang="ar"] .pjc-steps button > b{font-size:18px;line-height:1.6}
html[lang="ar"] .pjc-steps button > span{font-size:16px;line-height:1.8}
html[lang="ar"] .sp-page .pjc-lede{font-size:17px;line-height:1.85}

/* ── kanvas ── */
.pjc-canvas{position:relative;display:flex;flex-direction:column;min-height:560px;color:var(--ink);font:400 13.5px/1.55 var(--font)}
@media(max-width:1023px){
  .pjc .pjc-split,.pjc-flip .pjc-split{grid-template-columns:minmax(0,1fr);gap:28px}
  .pjc-flip .pjc-copy{order:0}
  .pjc-steps{max-width:640px}
}

/* Files: app sebenar dalam iframe lutsinar atas kanvas */
.pjf{height:700px;min-height:0}
.pjf-frame{display:block;width:100%;height:100%;border:0;background:transparent;opacity:0;pointer-events:none}
.pjf-frame.live{opacity:1;pointer-events:none}   /* animasi, bukan untuk diklik: roda/hover pergi terus ke halaman (Lenis), tiada sentakan */
.pjf-frame.late{transition:opacity .4s var(--ease)}
/* Files: iframe melimpah ke jurang (80px) supaya panel Open macOS 880px muat pada saiz sebenar; kad di hujung kanvas */
.pjf{overflow:visible}
.pjf .pjf-frame{position:absolute;top:-40px;bottom:-40px;inset-inline-end:-80px;width:calc(100% + 160px);height:calc(100% + 80px)}
.pjc-copy{transition:opacity .35s var(--ease)}
.pjf .pjf-frame{z-index:1}
.pjf-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);
  -webkit-mask-image:radial-gradient(120% 95% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(120% 95% at 50% 50%,#000 62%,transparent 100%)}
.pjf-bg.on{opacity:.75}
.pjf-bg iframe{position:absolute;top:0;left:0;border:0;background:transparent;transform-origin:0 0;filter:blur(2.4px)}

/* ── «What a project holds»: halaman projek sebenar pada saiz sebenar atas kanvas (pjh.js) ── */
.pjh{position:relative;height:700px;min-height:0;overflow:visible}
.pjh-frame{position:absolute;top:-40px;height:calc(100% + 80px);inset-inline-start:-40px;width:calc(100% + 80px);border:0;background:transparent;opacity:0;pointer-events:none;z-index:1}
.pjh-frame.live{opacity:1;pointer-events:none}
.pjh-frame.late{transition:opacity .4s var(--ease)}
/* enam item: tajuk sahaja, penerangan satu baris bagi item aktif */
.pjh-steps{margin-top:24px}
.pjh-steps button{padding-block:12px}
/* semua senarai shot (sebelah-menyebelah): tajuk sahaja, penerangan hanya bagi shot yang sedang main (Faris 2026-11-11) */
@media(min-width:1024px){
  .pjc-steps button > span{max-height:0;margin-top:0;overflow:hidden;opacity:0;transition:max-height .3s var(--ease),margin-top .3s var(--ease),opacity .25s,color .2s}
  .pjc-steps button[aria-current] > span{max-height:9em;margin-top:4px;opacity:1}
}
.pjh-steps button.run .pjc-bar::after{animation-duration:var(--dur,4s)}

/* ── pentas app (pjk.js stage): saiz logik tetap 820×700; kanvas sempit = pentas dikecilkan + kamera ── */
.pjx-host{position:relative}
.pjx-stage{position:absolute;top:0;inset-inline-start:0;transform-origin:0 0;will-change:transform}
html[dir="rtl"] .pjx-stage,html[lang="ar"] .pjx-stage{left:0;right:auto}
.pjx-fit{overflow:hidden;contain:paint}

/* ── tablet dan telefon (susun atur bertindan): visual dan kapsyen langkah dalam satu pandangan — tajuk, lede,
   kanvas, segmen kemajuan (boleh diketuk), kemudian langkah aktif sahaja (pjc.js .pjc-now) ── */
.pjc-now{display:none}
@media(max-width:1023px){
  .pjc .pjc-split,.pjc-flip .pjc-split{gap:0}
  .pjc .pjc-copy{display:contents}
  .pjc .pjc-copy h2{order:1}
  .pjc .pjc-lede{order:2}
  .pjc .pjc-canvas{order:3;margin-top:24px}
  .pjc .pjc-steps{order:4;display:flex;gap:6px;max-width:none;margin:18px 0 0;border:0}
  .pjc .pjc-now{order:5;display:block;min-height:5.2em;margin-top:10px;transition:opacity .18s}
  .pjc .pjc-now.swap{opacity:0}
  .pjc .pjc-note{order:6}
  .pjc .pjc-steps li{flex:1;min-width:0}
  .pjc .pjc-steps button{height:24px;padding:0;border:0}
  .pjc .pjc-steps button > b,.pjc .pjc-steps button > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
  .pjc .pjc-bar{inset:auto 0;top:50%;width:auto;height:3px;margin-top:-1.5px;opacity:1;background:var(--line)}
  .pjc .pjc-bar::after{transform-origin:left;transform:scaleX(0)}
  html[dir="rtl"] .pjc .pjc-bar::after,html[lang="ar"] .pjc .pjc-bar::after{transform-origin:right}
  .pjc .pjc-steps button[aria-current] .pjc-bar::after{transform:none}
  .pjc .pjc-steps button.run .pjc-bar::after{animation:pjc-fillx var(--dur,4s) linear}
  .pjc-now b{display:block;color:var(--ink);font:600 17px/1.4 var(--font-display)}
  .pjc-now span{display:block;margin-top:4px;color:var(--copy);font-size:15px;line-height:1.6}
  html[lang="ar"] .pjc-now b{font-size:19px;line-height:1.6}
  html[lang="ar"] .pjc-now span{font-size:16.5px;line-height:1.8}
}
@keyframes pjc-fillx{from{transform:scaleX(0)}}

/* ── Space «Collate manuscripts»: app Space sebenar atas kanvas (space-collate.js) ── */
.pjt{position:relative;height:700px;min-height:0;overflow:visible}
.pjt-frame{position:absolute;top:-40px;height:calc(100% + 80px);inset-inline-start:-40px;width:calc(100% + 80px);border:0;background:transparent;opacity:0;pointer-events:none;z-index:1}
.pjt-frame.live{opacity:1}
/* kertas Space ditatal di dalam bingkai: pudar lembut di atas dan bawah, bukan potongan keras */
.pjt-frame{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 72px,#000 calc(100% - 72px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 72px,#000 calc(100% - 72px),transparent 100%)}
.pjt-frame.late{transition:opacity .4s var(--ease)}
/* #agent (space-agent.js): panel agent di tepi kanan app — tiada limpahan mendatar, supaya kamera boleh membingkainya penuh */
.pja .pjt-frame{inset-inline-start:0;width:100%;-webkit-mask-image:none;mask-image:none}   /* tiada pudar: cip agent di sudut bawah tidak dibayangi */

/* ── /intelligent-ui/ «Visual answers beside the book»: demo Side agent sedia ada; tiga salinan = tiga shot demo
   (site.js iuiSideShots), senarai langkah mengikut meter demo, meter dalam bar demo disembunyikan ── */
.iui-sidec{min-height:0;display:block}
.iui-sidec .sp-panel-demo{margin:0}
.iui-sidec .demo-meter,.iui-sidec .dm-track{display:none!important}
.pjc.hold .pjc-steps button.run .pjc-bar::after{animation-play-state:paused}

/* ── /intelligent-ui/ «The same answer at each level»: animasi kredit asal (sidepanel.css .iui-lv*); empat tahap =
   empat shot (site.js .iui-lvsteps); tablet/telefon: gambar → segmen → kapsyen ── */
.iui-lvc{min-height:0;display:block}
.iui-lvc .iui-lvshot{margin:0}
/* tajuk bermula pada jarak spec dari band (88px), sama tinggi dengan tepi atas jawapan; jawapan yang lebih tinggi
   memanjang ke bawah, bukan menolak salinan ke tengah */
.iui-levels-sec .pjc-split{align-items:start}

/* ── /projects/ «How the agent reads and cites your files»: projek sebenar atas kanvas (pj-reading.js) ── */
.pjr{position:relative;height:700px;min-height:0;overflow:visible}
.pjr.pjx-fit{height:auto}
.pjr-frame{position:absolute;top:0;height:100%;inset-inline-start:0;width:100%;border:0;background:transparent;opacity:0;pointer-events:none;z-index:1}
.pjr-frame.live{opacity:1}
.pjr-frame.late{transition:opacity .4s var(--ease)}

/* Garis langkah dipandu kemajuan sebenar (canvas-kit.js meter): --p 0…1 */
.pjc-steps button.js .pjc-bar::after{animation:none!important;transform:scaleY(var(--p,0))}
@media(max-width:1023px){.pjc .pjc-steps button.js .pjc-bar::after{animation:none!important;transform:scaleX(var(--p,0))}}

/* Senarai shot: buka/tutup penerangan dipandu site.js (tinggi + pudar bersama, 400ms, sama dengan kaki laman). Keadaan
   rehat di sini; peralihan max-height lama dimatikan supaya tidak berlawan dengan animasi itu. */
@media(min-width:1024px){
  .pjc-steps.x-steps-motion button > span{max-height:none!important;transition:color .2s!important;overflow:hidden}
  .pjc-steps.x-steps-motion button > span:not(.x-open){height:0;margin-top:0!important;opacity:0!important}
  .pjc-steps.x-steps-motion button > span.x-open{height:auto;margin-top:4px;opacity:1}
}

/* Kanvas seksyen masuk dengan lembut bila ditatal ke pandangan (site.js: .x-enter → .x-in, sekali). */
/* pudar sahaja (tanpa anjakan): garis sorotan dan kamera kanvas mengukur kedudukan sebenar sepanjang masa */
.pjc-canvas.x-enter{opacity:0;transition:opacity 1s cubic-bezier(.4,0,.2,1)}
.pjc-canvas.x-enter.x-in{opacity:1}
@media(prefers-reduced-motion:reduce){.pjc-canvas.x-enter{opacity:1;transition:none}}

/* ── /skills/ (Faris 2026-11-13): tiga bab mengikut kumpulan app — label bab di atas tajuk ── */
.sp-page .skc-kick{margin:0 0 14px;color:var(--muted);font:500 14px/1.4 var(--font)}
.skc-kick span{margin-inline-end:10px;color:var(--ink)}
html[lang="ar"] .sp-page .skc-kick{font-size:17px}


/* ── /skills/ sk-yours + sk-learned ── app Skills sebenar atas kanvas (sk-yours.js, sk-learned.js): iframe tepat sebesar
   pentas (tiada limpahan, tiada pudar), tinggi ikut salinan (pentas matchH/tight seperti /projects/ Reading) */
.sky,.skl{position:relative;height:700px;min-height:0;overflow:visible}
.sky.pjx-fit,.skl.pjx-fit{height:auto}
.sky .skf-frame,.skl .skf-frame{position:absolute;top:0;inset-inline-start:0;width:100%;height:100%;border:0;background:transparent;opacity:0;pointer-events:none;z-index:1;-webkit-mask-image:none;mask-image:none}
.sky .skf-frame.live,.skl .skf-frame.live{opacity:1}
.sky .skf-frame.late,.skl .skf-frame.late{transition:opacity .4s var(--ease)}

/* ── /skills/ sk-use + sk-inside ── app sebenar atas kanvas (sk-use.js: soalan → «Using»; sk-inside.js: halaman skill
   dengan garis biru): iframe tepat sebesar pentas, tanpa pudar atas/bawah (composer di hujung bawah tidak dibayangi) */
.sku,.ski{position:relative;height:700px;min-height:0;overflow:visible}
.sku.pjx-fit,.ski.pjx-fit{height:auto}
.sku .sku-frame,.ski .ski-frame{position:absolute;top:0;inset-inline-start:0;width:100%;height:100%;border:0;background:transparent;opacity:0;pointer-events:none;z-index:1}
.sku .sku-frame.live,.ski .ski-frame.live{opacity:1}
.sku .sku-frame.late,.ski .ski-frame.late{transition:opacity .4s var(--ease)}
/* /automations/ (au-canvas.js): empat bab = app sebenar, saiz pentas sama dengan kanvas /skills/ */
.aut,.aus,.aud,.aur{position:relative;height:700px;min-height:0;overflow:visible}
.aut.pjx-fit,.aus.pjx-fit,.aud.pjx-fit,.aur.pjx-fit{height:auto}
.au-frame{position:absolute;top:0;inset-inline-start:0;width:100%;height:100%;border:0;background:transparent;opacity:0;pointer-events:none;z-index:1}
.au-frame.live{opacity:1}
.au-frame.late{transition:opacity .4s var(--ease)}