/* ===========================================================================
   THE WORK. The headline pair across both columns, the eyebrow, then the
   three questions on the left and the bench on the right. Robot's cards:
   the number in a circle out in the margin, Bebas questions, white.
   =========================================================================== */
.room.wide#work{max-width:1080px}
.wk-cols{display:grid; grid-template-columns:minmax(0,430px) minmax(0,1fr); gap:48px; align-items:start}

.wk-steps{list-style:none; margin:0; padding:0 0 0 46px}
.wk-step{position:relative; margin-bottom:12px}
.wk-step .gut{
  position:absolute; left:-46px; top:14px; width:34px; height:34px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; font-size:17px; font-weight:500;
}
.wk-card{position:relative; background:var(--white); color:var(--ink); border-radius:var(--r-card); padding:16px 20px; display:flex; align-items:center; gap:12px}
.wk-card > div{flex:1; min-width:0}
.wk-card h3{font-family:var(--display); font-weight:400; font-size:var(--head); line-height:1; letter-spacing:.01em; margin:0}
.wk-card p{margin:6px 0 0; font-size:var(--say); line-height:1.45; overflow-wrap:anywhere}
.wk-card p b{font-weight:600}
.wk-step.on .gut{background:var(--white); color:var(--red); box-shadow:var(--lift-step)}
.wk-step.on .wk-card{box-shadow:var(--lift-raised)}
.wk-step.on h3{color:var(--red)}
.wk-step.on .wk-card:after{content:""; position:absolute; right:-9px; top:30px; width:20px; height:20px; background:var(--white); transform:rotate(45deg); border-radius:3px}
.wk-step.done .gut{background:var(--white); color:var(--mid)}
.wk-step.done h3{color:var(--mid)}
.wk-step.todo .gut{border:2px solid var(--white-mid); color:var(--white-mid)}
.wk-step.todo h3,.wk-step.todo p{color:var(--mist)}
.lk{
  flex:none; width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  background:var(--white); color:var(--ink); box-shadow:var(--lift-button);
  display:inline-flex; align-items:center; justify-content:center;
}
.lk svg{width:16px; height:16px}
.lk:hover{color:var(--red)}

/* the bench */
.wk-bench{background:var(--white); color:var(--ink); border-radius:var(--r-card); padding:26px; box-shadow:var(--lift-raised)}
.bv{display:flex; flex-direction:column; min-height:360px}
.bv[hidden]{display:none}
.bfoot{display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:18px}
.bfoot .pill{align-self:center}
.bfoot .link.ink{font-size:var(--quiet)}

.doors{display:flex; justify-content:center; gap:34px; margin-bottom:16px}
.door{background:none; border:0; padding:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:8px}
.door .disc{width:56px; height:56px; border-radius:50%; border:1.5px solid var(--border); color:var(--mid); display:inline-flex; align-items:center; justify-content:center; transition:background .15s, color .15s}
.door .disc svg{width:24px; height:24px}
.door b{font-family:var(--label); font-weight:500; font-size:var(--quiet); letter-spacing:.1em; color:var(--mid)}
.door.on .disc{background:var(--red); border-color:var(--red); color:var(--white); box-shadow:var(--glow-red)}
.door.on b{color:var(--ink)}

.plate{
  flex:1; min-height:200px; border:1px solid var(--border); border-radius:var(--r-card); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; padding:20px;
  color:var(--mid); transition:border-color .15s, background .15s;
}
.plate[hidden]{display:none}
.plate.over{border-color:var(--ink); background:var(--paper)}
.plate-ic{width:24px; height:24px; margin-bottom:6px}
.plate-line{font-size:var(--say)}
.plate-line u{color:var(--red); text-underline-offset:3px}
.plate-kinds{font-size:var(--quiet)}
.plate-got{font-size:var(--say); color:var(--ink); margin-top:8px}
.plate-got:empty{display:none}
.plate.got .plate-ic{color:var(--ink)}
/* a picture in: its thumbnail, its name, Swap it */
.plate.pic{flex-direction:row; justify-content:flex-start; gap:20px; text-align:left}
.plate.pic .plate-ic,.plate.pic .plate-line,.plate.pic .plate-kinds{display:none}
.plate.pic .plate-got{margin:0; display:flex; gap:20px; align-items:center}
.thumb{width:200px; max-height:150px; object-fit:contain; border-radius:var(--r-input); background:var(--paper); flex:none}
.got-n{display:flex; flex-direction:column; gap:4px}
.got-n i{font-style:normal; color:var(--mid); font-size:var(--quiet)}
.got-n u{color:var(--red); font-size:var(--say); text-underline-offset:3px}
#workText{flex:1; min-height:200px; background:var(--white); border:1px solid var(--border); border-radius:var(--r-card)}
#about{min-height:0; resize:none; background:var(--white); border:1.5px solid var(--ink)}
/* the questions to tap: four starters, then three about the work. They pop
   in a tenth of a second apart, as a set. The dots wait for the three. */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.qchip.qpop,.qchip-dots.qpop{animation:qchip .22s cubic-bezier(.3,1.4,.6,1) both}
@keyframes qchip{from{opacity:0; transform:scale(.85)} to{opacity:1; transform:none}}
.qchip-dots{display:inline-flex; align-items:center; gap:4px; border-radius:var(--pill); background:var(--paper); padding:0 16px; height:36px}
.qchip-dots i{width:6px; height:6px; border-radius:50%; background:var(--mid); animation:dot 1s ease-in-out infinite}
.qchip-dots i:nth-child(2){animation-delay:.15s}
.qchip-dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:none; opacity:.5} 30%{transform:translateY(-4px); opacity:1}}
@media (prefers-reduced-motion:reduce){.qchip.qpop,.qchip-dots.qpop{animation:none} .qchip-dots i{animation:none}}
.qchip{border:0; border-radius:var(--pill); background:var(--paper); color:var(--ink); font:inherit; font-size:var(--say); padding:9px 16px; cursor:pointer}
.qchip:hover{background:var(--border)}
#fileMsg{margin-top:10px; color:var(--mid); font-size:var(--say)}

.vans{display:flex; flex-direction:column; gap:12px}
.van-row{display:flex; align-items:center; gap:16px; width:100%; text-align:left; background:var(--white); border:2px solid var(--border); border-radius:var(--r-card); padding:18px 20px; cursor:pointer; font:inherit; color:var(--ink); box-sizing:border-box}
.van-row.on{border-color:var(--ink)}
.vr-pick{flex:1; min-width:0; background:none; border:0; padding:0; font:inherit; color:inherit; text-align:left; cursor:pointer}
.vr-t{display:block; font-family:var(--label); font-weight:500; font-size:var(--lead); letter-spacing:.06em; text-transform:uppercase}
.vr-l{display:block; font-size:var(--say); color:var(--ink-soft); margin-top:4px}
.vr-who{background:none; border:0; padding:4px 0; font:inherit; font-size:var(--say); font-weight:600; color:var(--red); text-decoration:underline; text-underline-offset:3px; cursor:pointer; flex:none}
.vr-who:hover{color:var(--red-dark)}
.van-row .tick{width:26px; height:26px; border-radius:50%; border:1.5px solid var(--border); color:transparent; display:inline-flex; align-items:center; justify-content:center; font-size:13px; flex:none}
.van-row.on .tick{background:var(--ink); border-color:var(--ink); color:var(--white)}
/* Build your own: an invitation, not a greyed-out option */
.van-row.own{border-style:dashed}
.van-row.own .vr-t,.van-row.own .vr-l{color:var(--mid)}
.van-row.own .plus{width:26px; height:26px; border-radius:50%; border:1.5px solid var(--border); color:var(--mid); display:inline-flex; align-items:center; justify-content:center; flex:none; order:-1}
.van-row.own .plus svg{width:14px; height:14px}

/* the pop-up. Built on the door's sign-in card. */
.wk-pop{max-width:480px; align-items:stretch; padding:40px 30px 30px; text-align:left}
.wk-pop h2{margin:0; font-family:var(--display); font-weight:400; font-size:var(--title); line-height:1}
.wk-pop-l{margin:8px 0 18px; font-size:var(--talk); color:var(--ink-soft)}
.wk-pop-l:empty{display:none}
#wkPopBody{display:flex; flex-direction:column; gap:10px}
#wkPopBody:empty{display:none}
.wk-pop .pill{align-self:flex-end; margin-top:22px}
.pp{display:flex; gap:14px; align-items:center; background:var(--white); border-radius:var(--r-input); padding:12px 14px}
.pp-soon{margin:0; font-size:var(--talk); color:var(--ink)}
.pp .init{width:44px; height:44px; font-size:24px}
.pp-n{display:block; font-family:var(--display); font-size:var(--head); line-height:1}
.pp-l{display:block; font-size:var(--say); color:var(--mid); margin-top:2px}

/* BOUNCE IT: under the bench, full width. Greyed until all three are in. */
.bounce{
  width:100%; margin-top:16px; border:0; border-radius:var(--pill); cursor:pointer;
  font-family:var(--display); font-size:var(--head); letter-spacing:.06em; padding:14px 22px 11px;
  background:var(--ink); color:var(--white); box-shadow:var(--lift-bounce);
}
.bounce:hover{background:var(--black)}
.bounce:disabled{background:var(--white-lo); color:var(--white-hi); box-shadow:none; cursor:default}

/* phone: one column, the bench under its question */
@media (max-width:820px){
  .wk-cols{grid-template-columns:minmax(0,1fr); gap:0}
  .wk-step.on .wk-card:after{display:none}
  .wk-steps .wk-bench{margin:-4px 0 12px}
  .wk-right{padding-left:46px}
  .bv{min-height:0}
  .plate,#workText{min-height:160px}
}
@media (max-width:560px){
  .wk-steps{padding-left:40px}
  .wk-step .gut{left:-40px; width:30px; height:30px; font-size:15px}
  .wk-right{padding-left:40px}
  .wk-bench{padding:20px}
  /* the van row: tick top right, Who's in it drops underneath */
  .van-row[data-panel]{flex-wrap:wrap; row-gap:10px}
  .van-row .vr-pick{flex:1 1 calc(100% - 42px)}
  .vr-who{order:3}
}