/* craft.css — styles for /craft/ (Proof of Craft page) only.
   Loads after base.css; relies on its tokens (--display, --mono, --cyan, …). */

/* ============ HERO ============ */
.craft-hero{min-height:78svh;display:flex;flex-direction:column;justify-content:center;padding-top:var(--hero-pad);padding-bottom:var(--sp-4)}
.craft-hero h1{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:var(--step-6);line-height:.96;letter-spacing:-.02em;
  text-shadow:0 2px 30px var(--scrim-1);
}
.craft-hero h1 .ink{
  background:linear-gradient(95deg,var(--cyan) 5%,var(--cobalt-bright) 45%,var(--violet) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.craft-hero .sub{max-width:600px;margin-top:30px;font-size:var(--step-0);color:var(--dim-bright);font-weight:500}
.craft-index{display:flex;gap:12px;flex-wrap:wrap;margin-top:44px}
.craft-index a{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line-3);border-radius:var(--r-pill);padding:.7em 1.4em;min-height:44px;
  display:inline-flex;align-items:center;gap:.7em;transition:color .3s,border-color .3s,transform .3s;
}
.craft-index a b{font-weight:500;color:var(--pc,var(--cyan))}
@media (hover:hover){.craft-index a:hover{color:var(--white);border-color:var(--pc,var(--cyan));transform:translateY(-2px)}}
.craft-index a:active{transform:scale(.97)}

/* ============ PROJECT SECTIONS ============ */
.proj .sec-head{align-items:flex-start}
.proj-no{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--pc);
  display:flex;align-items:center;gap:14px;margin-bottom:26px;
}
.proj-no::before{content:'';width:34px;height:1px;background:var(--pc)}
.proj h2 .tint{
  background:linear-gradient(95deg,var(--pc),var(--pc2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.proj-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.proj-tags i{
  font-style:normal;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line-3);border-radius:var(--r-pill);padding:.35em .9em;color:var(--dim);
}

/* demo panel */
.demo{
  position:relative;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--line-2);background:var(--void-soft);
  box-shadow:var(--shadow-lift);
}
.demo canvas{display:block;width:100%;height:clamp(380px,56vh,560px);touch-action:pan-y}
.demo .live-tag{
  position:absolute;top:16px;left:16px;z-index:3;display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--t-up);
  background:var(--scrim-2);border:1px solid var(--line-3);border-radius:var(--r-pill);padding:.55em 1.1em;
  backdrop-filter:blur(6px);pointer-events:none;
}
.demo .live-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--pc);box-shadow:0 0 10px var(--pc);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}
.demo .hint{
  position:absolute;top:16px;right:16px;z-index:3;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  background:var(--scrim-2);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:.55em 1.1em;
  backdrop-filter:blur(6px);pointer-events:none;
}
/* small screens keep the hint — bottom corner, out of the demo's face */
@media(max-width:640px){.demo .hint{top:auto;bottom:12px;right:12px;font-size:.62rem}}

/* control bar */
.demo-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 16px;border-top:1px solid var(--line-2);
  background:var(--scrim-1);backdrop-filter:blur(8px);
}
.demo-bar .readout{
  margin-left:auto;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  white-space:nowrap;
}
.cbtn{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);background:transparent;border:1px solid var(--line-3);border-radius:var(--r-pill);
  padding:.65em 1.3em;cursor:pointer;transition:color .25s,border-color .25s,background .25s,transform .25s;
  min-height:44px;display:inline-flex;align-items:center; /* 44px touch minimum, matching the form */
}
@media (hover:hover){.cbtn:hover{color:var(--white);border-color:var(--pc)}}
.cbtn:active{transform:scale(.96)}
.cbtn.primary{color:var(--void);background:var(--white);border-color:var(--white);font-weight:500}
@media (hover:hover){.cbtn.primary:hover{background:var(--pc);border-color:var(--pc);color:var(--white)}}
.cbtn.on{color:var(--white);border-color:var(--pc);background:var(--line-1)}
.cinput{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--white);background:var(--line-1);border:1px solid var(--line-3);border-radius:var(--r-pill);
  padding:.6em 1.2em;width:150px;min-height:44px;transition:border-color .25s;
}
.cinput:focus{border-color:var(--cyan)}
.cinput::placeholder{color:var(--dim)}

/* pads (signal bloom) */
.pads{display:flex;gap:8px;flex-wrap:wrap}
.pad{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);background:transparent;border:1px solid var(--line-3);border-radius:var(--r-md);
  padding:.8em 1.15em;cursor:pointer;transition:all .18s;position:relative;
  min-height:44px;
}
.pad small{display:block;font-size:.62rem;letter-spacing:.2em;color:var(--dim);margin-top:3px}
@media (hover:hover){.pad:hover{color:var(--white);border-color:var(--line-4)}}
.pad.lit{color:var(--void);background:var(--pc);border-color:var(--pc);box-shadow:0 0 24px -4px var(--pc)}
.pad.lit small{color:var(--scrim-1)}
.pad:active{transform:scale(.95)}

/* ============ CASE STUDY DETAIL ============ */
.detail{display:grid;grid-template-columns:1fr minmax(260px,340px);gap:var(--sp-3);margin-top:var(--sp-3)}
@media(max-width:860px){.detail{grid-template-columns:1fr}}
.detail h3{
  font-family:var(--display);font-weight:800;font-size:1.06rem;text-transform:uppercase;letter-spacing:.02em;
  margin:34px 0 10px;color:var(--white);
}
.detail h3:first-child{margin-top:0}
.detail h3::before{content:'◆ ';color:var(--pc);font-size:.6em;vertical-align:2px}
.detail p{color:var(--dim);font-size:.97rem;font-weight:500;max-width:62ch}
.detail p b{color:var(--white);font-weight:600}
.detail p + p{margin-top:10px}

/* spec sheet */
.spec{
  border:1px solid var(--line-2);border-radius:var(--r-card);overflow:hidden;
  background:rgba(11,11,18,.7);align-self:start;position:sticky;top:96px;
}
.spec .spec-head{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--pc);
  padding:16px 22px;border-bottom:1px solid var(--line-2);
  background:linear-gradient(90deg,var(--line-1),transparent);
}
.spec dl{display:grid;grid-template-columns:auto 1fr;gap:0;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em}
.spec dt{color:var(--dim);text-transform:uppercase;letter-spacing:.14em;padding:11px 0 11px 22px;border-bottom:1px solid var(--line-1)}
.spec dd{color:var(--white);text-align:right;padding:11px 22px 11px 0;border-bottom:1px solid var(--line-1)}
.spec dt:last-of-type,.spec dd:last-of-type{border-bottom:none}
.spec dd em{font-style:normal;color:var(--pc)}

/* stat chips */
.stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.stats span{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line-2);border-radius:var(--r-pill);padding:.55em 1.1em;
}
.stats span b{color:var(--pc);font-weight:500}

/* divider between projects inside same band */
.proj + .proj{margin-top:var(--sp-6)}

/* fallback message inside demo when a capability is missing */
.demo .nope{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;text-align:center;
  padding:30px;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.demo.dead canvas{display:none}
.demo.dead .nope{display:flex}

/* JR-CRAFT/05 Command Deck — the demo box has no canvas, so it gets its own
   stage treatment instead of .demo canvas's fixed height. */
.cmdk-showcase{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  text-align:center;padding:var(--sp-4) var(--sp-3);
  min-height:clamp(240px,34vh,340px);
}
.cmdk-showcase p{
  max-width:44ch;color:var(--dim);font-size:.95rem;font-weight:500;line-height:1.65;
}
.cmdk-showcase p a{color:var(--pc);text-decoration:underline;text-underline-offset:3px}
.cmdk-showcase-key{display:flex;align-items:center;gap:12px}
.cmdk-showcase-key span{font-family:var(--mono);font-size:1rem;color:var(--dim)}
.cmdk-showcase-key kbd{
  display:flex;align-items:center;justify-content:center;
  min-width:var(--sp-4);height:var(--sp-4);
  font-family:var(--mono);font-size:var(--step-1);color:var(--white);
  border:1px solid var(--line-3);border-radius:var(--r-md);background:var(--raised);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.9),inset 0 -3px 0 rgba(0,0,0,.45);
}

/* touch feedback */
@media (hover:none){
  .craft-index a:active{border-color:var(--pc,var(--cyan));color:var(--white)}
  .cbtn:active{color:var(--white);border-color:var(--pc)}
}

/* ============ TOAST ============ */
/* One channel for demo feedback (today: Save PNG). Its own role=status
   element — deliberately NOT the form's live region on /start/. */
.craft-toast{
  position:fixed;left:50%;bottom:26px;z-index:var(--z-modal);
  transform:translate(-50%,12px);opacity:0;pointer-events:none;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;
  background:var(--panel);border:1px solid var(--line-3);border-radius:var(--r-pill);
  padding:.85em 1.5em;color:var(--white);box-shadow:var(--shadow-lift);
  transition:opacity .25s ease,transform .25s var(--ease-out);
  max-width:calc(100vw - 32px);
}
.craft-toast.show{opacity:1;transform:translate(-50%,0)}
.craft-toast.err{border-color:var(--crimson);color:var(--white)}
.craft-toast b{color:var(--ok);font-weight:500}
.craft-toast.err b{color:var(--crimson)}

/* ============ SCROLL STORY (JR-CRAFT/08) ============ */
/* Base styles are the state-1 wireframe; .s2-.s5 layer the acts on top.
   The markup ships with all four classes so no-JS renders finished. */
/* .demo's overflow:hidden exists to clip canvases to the rounded corner —
   but ANY non-visible overflow between a sticky element and the scroller
   turns the sticky into normal flow. This demo has no canvas, so it opts
   out; the frame carries its own radius. */
#story-demo{overflow:visible}
.scy{display:grid;grid-template-columns:minmax(230px,330px) 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.scy-vis{position:sticky;top:96px}
.scy.static .scy-vis{position:static}
.scy-frame{
  position:relative;display:flex;flex-direction:column;gap:12px;
  padding:16px;border:1px solid var(--line-2);border-radius:var(--r-md);
  background:var(--s1,rgba(11,11,18,.7));transition:border-color .5s;
}
.scy.s5 .scy-frame{border-color:var(--pc)}
.scy-frame .f-nav{display:flex;gap:5px;align-items:center;height:12px}
.scy-frame .f-nav i{width:22px;height:5px;border-radius:var(--r-pill);background:var(--line-2)}
.scy-frame .f-nav i:first-child{width:12px}
.scy-frame .f-hero{padding:10px 0 2px}
.scy-frame .f-hero b{
  font-family:var(--display);font-weight:800;font-size:2.3rem;line-height:1;
  letter-spacing:-.01em;color:transparent;background:var(--line-2);
  border-radius:var(--r-xs);transition:background .5s,color .5s;
}
.scy.s2 .f-hero b{background:none;color:var(--white)}
.scy.s3 .f-hero b{
  background:linear-gradient(95deg,var(--pc),var(--pc2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.scy-frame .f-copy{display:flex;flex-direction:column;gap:6px}
.scy-frame .f-copy i{display:block;height:6px;border-radius:var(--r-pill);background:var(--line-1);transition:background .5s}
.scy-frame .f-copy i:last-child{width:68%}
.scy.s2 .f-copy i{background:var(--line-2)}
.scy-frame .f-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.scy-frame .f-cards i{
  display:block;aspect-ratio:4/5;border-radius:var(--r-sm);
  border:1px dashed var(--line-2);background:transparent;position:relative;
  transition:border-color .5s,background .5s;
}
.scy.s3 .f-cards i{border-style:solid;background:var(--s2)}
.scy.s3 .f-cards i::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  border-radius:var(--r-pill);background:var(--ca,var(--pc));opacity:.9;
}
.scy-frame .f-cards i:nth-child(1){--ca:var(--cat-w)}
.scy-frame .f-cards i:nth-child(2){--ca:var(--cat-m)}
.scy-frame .f-cards i:nth-child(3){--ca:var(--cat-b)}
.scy.s4 .f-cards i{animation:story-float 3.4s ease-in-out infinite}
.scy.s4 .f-cards i:nth-child(2){animation-delay:.5s}
.scy.s4 .f-cards i:nth-child(3){animation-delay:1s}
@keyframes story-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.scy-frame .f-cta{
  width:92px;height:26px;border-radius:var(--r-pill);margin-top:8px;
  border:1px dashed var(--line-2);transition:border-color .5s,background .5s,box-shadow .5s;
}
.scy.s3 .f-cta{border:1px solid var(--pc);background:color-mix(in oklab,var(--pc) 24%,transparent)}
.scy.s4 .f-cta{box-shadow:0 0 18px -4px var(--pc)}
.scy-frame .f-ship{
  position:absolute;top:12px;right:12px;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;
  border:1px solid var(--ok);border-radius:var(--r-pill);padding:.35em .8em;color:var(--ok);
  opacity:0;transform:scale(.85);transition:opacity .4s,transform .4s var(--ease-out);
}
.scy.s5 .f-ship{opacity:1;transform:none}

.scy-step{min-height:46vh;display:flex;flex-direction:column;justify-content:center;opacity:.35;transition:opacity .3s}
.scy-step.live,.scy.static .scy-step{opacity:1}
.scy.static .scy-step{min-height:0;padding:18px 0}
.scy-step h3{
  font-family:var(--display);font-weight:800;font-size:1.3rem;text-transform:uppercase;
  display:flex;align-items:baseline;gap:.7em;margin-bottom:10px;
}
.scy-step .scy-no{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.2em;color:var(--pc)}
.scy-step p{color:var(--dim);font-size:.95rem;font-weight:500;max-width:44ch}
.scy-step:last-child{min-height:32vh}

@media(max-width:880px){
  .scy{grid-template-columns:1fr}
  .scy-vis{top:78px;z-index:1}
  .scy-frame .f-hero b{font-size:1.9rem}
  .scy-step{min-height:52vh}
}