/* ============ 03 · THE FACTORY — diorama + configurator ============ */

#works{min-height:100vh;padding:7rem 0 6rem;border-top:1px solid var(--hairline);--gutter:clamp(1.4rem,8vw,8rem)}
#works .works-head{padding:0 var(--gutter);margin-bottom:3rem}
#works .aw-logo{margin-bottom:1.5rem}
#works .aw-logo .align-text{color:var(--cream);font-size:1.12rem}
#works .aw-logo .align-text b{background:var(--cream)}
#works .consult{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.8rem}
#works .consult .lamp{color:var(--signal);box-shadow:0 0 6px var(--signal);animation:blinkstep 2.4s step-end infinite}
#works .works-head h2{font-weight:300;font-size:clamp(2rem,5vw,4.2rem);line-height:1.1;max-width:24ch}
#works .works-head h2 em{font-style:normal;font-weight:400;color:var(--amber)}
#works .works-head .sub{margin-top:1.6rem;max-width:70ch;color:var(--cream-dim);font-size:clamp(1rem,1.5vw,1.18rem)}
#works .works-head .sub b{color:var(--cream);font-weight:400}

/* what the factory ships — named, quietly */
.toolchips{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 1.3rem;margin-top:1.6rem;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-faint)}
.toolchips li span{color:var(--cream-dim);margin-right:.5em;transition:color .3s}
.toolchips a{color:inherit;text-decoration:none;transition:color .3s}
.toolchips a:hover,.toolchips a:hover span{color:var(--amber)}

/* the controls on the left, held in view; the floor, the drafted spec and the two buttons on the right */
.works-grid{
  display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);
  grid-template-areas:"panel floor" "panel spec" "panel cta";gap:1.4rem 2.4rem;align-items:start;
  padding:0 var(--gutter);
}
.works-grid > .panel{grid-area:panel;position:sticky;top:5rem}
.works-grid > .floor-wrap{grid-area:floor}
.works-grid > .spectape{grid-area:spec;width:100%}
.works-grid > .works-cta{grid-area:cta;padding:0;display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
#works-cta[disabled]{opacity:.42;cursor:not-allowed;box-shadow:none}
#works-cta[disabled]:hover{background:var(--amber);color:var(--void)}
@media(max-width:900px){
  .works-grid{grid-template-columns:1fr;grid-template-areas:"panel" "floor" "spec" "cta"}
  .works-grid > .panel{position:static}
}

/* ---- control panel ---- */
.panel{border-radius:14px;padding:18px 18px 20px}
.panel .panel-title{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.22em;color:#3B372B;
  text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:.6rem}
.panel .panel-hint{margin-left:auto;font-size:.46rem;letter-spacing:.16em;color:#6b6553}
.switchrow{display:flex;flex-direction:column;gap:10px}
.switch{
  display:grid;grid-template-columns:34px 1fr 12px;align-items:center;gap:12px;
  cursor:pointer;padding:8px 10px;border-radius:6px;background:rgba(0,0,0,.14);
  transition:background .25s;
}
.switch:hover{background:rgba(0,0,0,.24)}
.switch .toggle{
  width:30px;height:16px;border-radius:9px;background:#3B372B;position:relative;flex:none;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.5);
}
.switch .toggle::after{
  content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;
  background:linear-gradient(180deg,var(--metal-1),var(--metal-3));
  transition:transform .22s cubic-bezier(.2,.7,.3,1);box-shadow:0 1px 2px rgba(0,0,0,.5);
}
.switch .sw-label{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  color:#2c2a22;text-transform:uppercase}
.switch .sw-lamp{width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,.35);transition:all .25s}
.switch input:checked ~ .toggle{background:var(--amber-deep)}
.switch input:checked ~ .toggle::after{transform:translateX(14px)}
.switch input:checked ~ .sw-lamp{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.switch input:focus-visible ~ .toggle{outline:2px solid var(--amber);outline-offset:3px}
.panel .panel-note{margin-top:14px;font-family:var(--mono);font-size:.5rem;letter-spacing:.16em;
  color:#4a463a;text-transform:uppercase;line-height:1.8}

/* ---- the floor (SVG scene) ---- */
.floor-wrap{border:1px solid var(--hairline);border-radius:6px;background:rgba(13,12,8,.72);
  padding:clamp(.6rem,2vw,1.6rem);overflow:hidden;position:relative}
.floor-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background:repeating-linear-gradient(0deg,transparent 0 2px,#EDE7D6 2px 3px)}
.floor{width:100%;height:auto;display:block}

/* schematic defaults — non-scaling strokes stay crisp when the SVG shrinks */
.floor .sk{stroke:var(--cream-faint);fill:none;stroke-width:1.2;vector-effect:non-scaling-stroke}
.floor text{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.18em;
  fill:var(--cream-faint);text-transform:uppercase}
.floor text.stage-t{font-size:10px}
.floor .blamp{fill:#2a271d;transition:fill .4s}
.floor .agent .sk{transition:stroke .4s}
.floor .bench .desk{transition:stroke .4s}

/* belt */
.floor .beltline{stroke:var(--cream-faint);stroke-width:1.2;fill:none;opacity:.6;vector-effect:non-scaling-stroke}
.floor .beltpkg{stroke:var(--amber);stroke-width:3;fill:none;stroke-dasharray:10 78;vector-effect:non-scaling-stroke;
  animation:belt var(--belt-speed,7s) linear infinite;opacity:0;transition:opacity .5s}
@keyframes belt{to{stroke-dashoffset:-880}}

/* lit bench */
.floor .bench.lit .sk{stroke:var(--phosphor)}
.floor .bench.lit .blamp{fill:var(--phosphor);filter:drop-shadow(0 0 3px rgba(74,222,128,.8))}
.floor .bench.faint .sk{stroke:rgba(74,222,128,.45)}
.floor .bench.faint .blamp{fill:rgba(74,222,128,.45)}

/* drawings + inspection + dock accents */
.floor .drawings.lit .sk{stroke:var(--amber)}
.floor .drawings.lit .blamp{fill:var(--amber);filter:drop-shadow(0 0 3px rgba(224,122,40,.8))}

/* mode wiring */
#works:not([data-modes=""]) .beltpkg{opacity:1}
#works[data-modes~="erp"]{--belt-speed:7s}
#works[data-modes~="web"]{--belt-speed:2.8s}
#works[data-modes~="research"]{--belt-speed:4.5s}
#works[data-modes~="intel"]{--belt-speed:6s}
#works[data-modes~="else"]{--belt-speed:5s}

#works[data-modes~="erp"] .b1 .sk,#works[data-modes~="erp"] .b2 .sk,#works[data-modes~="erp"] .b3 .sk{stroke:var(--phosphor)}
#works[data-modes~="erp"] .b1 .blamp,#works[data-modes~="erp"] .b2 .blamp,#works[data-modes~="erp"] .b3 .blamp{
  fill:var(--phosphor);filter:drop-shadow(0 0 3px rgba(74,222,128,.8))}

#works[data-modes~="web"] .b2 .sk,#works[data-modes~="web"] .b4 .sk{stroke:var(--phosphor)}
#works[data-modes~="web"] .b2 .blamp,#works[data-modes~="web"] .b4 .blamp{
  fill:var(--phosphor);filter:drop-shadow(0 0 3px rgba(74,222,128,.8))}

#works[data-modes~="research"] .bench .sk{stroke:rgba(74,222,128,.55)}
#works[data-modes~="research"] .bench .blamp{fill:rgba(74,222,128,.55)}
#works[data-modes~="research"] .drawings .sk{stroke:var(--amber)}
#works[data-modes~="research"] .drawings .blamp{fill:var(--amber);filter:drop-shadow(0 0 3px rgba(224,122,40,.8))}

#works[data-modes~="intel"] .b3 .sk,#works[data-modes~="intel"] .b4 .sk,#works[data-modes~="intel"] .b5 .sk{stroke:var(--aqua)}
#works[data-modes~="intel"] .b3 .blamp,#works[data-modes~="intel"] .b4 .blamp,#works[data-modes~="intel"] .b5 .blamp{
  fill:var(--aqua);filter:drop-shadow(0 0 3px rgba(103,232,249,.8))}
#works[data-modes~="intel"] .inspection .sk{stroke:var(--amber)}

#works[data-modes~="else"] .blamp{animation:blinkstep 1.1s step-end infinite;fill:var(--amber)}
#works[data-modes~="else"] .bench .sk{stroke:var(--cream-dim)}

/* ---- the brief (spec tape) ---- */
.spectape{
  width:min(560px,100%);background:linear-gradient(180deg,var(--paper),var(--paper-lo));
  color:var(--ink);font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  padding:1.1rem 1.3rem 1.5rem;line-height:2;text-transform:uppercase;position:relative;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),97.5% 100%,95% calc(100% - 8px),92.5% 100%,90% calc(100% - 8px),87.5% 100%,85% calc(100% - 8px),82.5% 100%,80% calc(100% - 8px),77.5% 100%,75% calc(100% - 8px),72.5% 100%,70% calc(100% - 8px),67.5% 100%,65% calc(100% - 8px),62.5% 100%,60% calc(100% - 8px),57.5% 100%,55% calc(100% - 8px),52.5% 100%,50% calc(100% - 8px),47.5% 100%,45% calc(100% - 8px),42.5% 100%,40% calc(100% - 8px),37.5% 100%,35% calc(100% - 8px),32.5% 100%,30% calc(100% - 8px),27.5% 100%,25% calc(100% - 8px),22.5% 100%,20% calc(100% - 8px),17.5% 100%,15% calc(100% - 8px),12.5% 100%,10% calc(100% - 8px),7.5% 100%,5% calc(100% - 8px),2.5% 100%,0 calc(100% - 8px));
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.spectape .tp-head{font-size:.52rem;letter-spacing:.22em;color:var(--amber-deep);
  border-bottom:1px solid var(--ledger-line);padding-bottom:.5rem;margin-bottom:.6rem;
  display:flex;justify-content:space-between;gap:1rem}
.spectape .tp-line{display:block;min-height:1.4em;color:var(--ink)}
.spectape .tp-line .tcur{color:var(--amber-deep)}
.spectape .tp-title{font-family:var(--serif);text-transform:none;letter-spacing:-.005em;font-size:1.08rem;
  line-height:1.3;color:var(--ink);margin:.1rem 0 .6rem}
.spectape .tp-for{color:var(--amber-deep)}
.spectape .tp-for[hidden]{display:none}

/* one line about the organization, typed straight onto the panel */
.panel .panel-in{display:block;margin-top:16px;font-family:var(--mono);font-size:.5rem;letter-spacing:.16em;
  color:#4a463a;text-transform:uppercase}
.panel input[type="text"]{width:100%;margin-top:7px;background:rgba(0,0,0,.16);border:1px solid rgba(0,0,0,.22);
  border-radius:6px;padding:.55rem .7rem;font-family:var(--mono);font-size:.68rem;color:#1f1d17;outline:none;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.22)}
.panel input[type="text"]::placeholder{color:rgba(44,42,34,.5)}
.panel input[type="text"]:focus{border-color:var(--amber-deep)}

@media(max-width:700px){
  /* at phone scale the SVG text becomes unreadably small — hide it, keep the machinery */
  .floor text{display:none}
  .floor-wrap{min-height:180px}
  .floor .blamp{r:8px}
  .floor .sk,.floor .beltline{stroke-width:2.4}
  .floor .beltpkg{stroke-width:5}
}

@media(max-width:700px){
  #works{min-height:0;padding:3.2rem 0;border-top:0}
  #works .works-head{margin-bottom:2rem}
  #works .works-head h2{font-size:1.42rem;white-space:nowrap}
  #works .aw-logo{margin-bottom:1.1rem}
  #works .aw-logo .align-text{font-size:.95rem}
}