/* Project page: a pipeline board (where everything stands) and one card per project with its stage. */

/* ---------- Pipeline board ---------- */
.pj-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;scrollbar-width:none}
.pj-board::-webkit-scrollbar{display:none}
.pj-col{scroll-snap-align:start;display:grid;align-content:start;gap:8px;padding:16px;border-radius:var(--r);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.pj-col__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:4px}
.pj-col__head b{font-weight:620;font-size:15px}
.pj-col__head span{font:600 22px/1 var(--mono);font-variant-numeric:tabular-nums}
.pj-col--now .pj-col__head span{color:var(--accent)}
.pj-col__rail{height:4px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.pj-col__rail i{display:block;height:100%;background:var(--ink);border-radius:inherit}
.pj-col a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;padding:0 12px;border-radius:12px;background:var(--surface-2);font-size:14px;transition:background-color .2s ease}
.pj-col a:hover{background:var(--surface-3)}
.pj-col a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-col__empty{font-size:13px;color:var(--muted);padding:6px 2px}

/* ---------- Project cards ---------- */
.pj-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(12px,1.6vw,20px)}
.pj{display:grid;grid-template-columns:minmax(0,1fr);border-radius:var(--r);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
@media (min-width:760px){.pj{grid-template-columns:minmax(220px,300px) minmax(0,1fr)}}
.pj__stage{position:relative;display:flex;justify-content:center;padding-top:28px;height:260px;overflow:hidden;background:var(--surface-2)}
@media (min-width:760px){.pj__stage{height:auto;min-height:340px}}
.pj__stage .ui-phone{width:clamp(150px,52%,200px);height:auto;align-self:flex-start;transition:transform .5s var(--ease)}
.pj:hover .pj__stage .ui-phone{transform:translateY(-8px)}
.pj__body{display:grid;gap:14px;align-content:start;padding:clamp(20px,3vw,32px)}
.pj__top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.pj__top .ui-h3{margin-right:auto}
.pj__text{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
.pj__facts{display:grid;gap:6px;margin:0;font-size:14px;line-height:1.6}
.pj__facts div{display:grid;grid-template-columns:4.5em minmax(0,1fr);gap:8px}
.pj__facts dt{color:var(--muted)}
.pj__facts dd{margin:0;color:var(--ink-2)}
.pj__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:4px}
.pj__meta{font-size:13px;color:var(--muted)}
.pj__open{height:42px;padding:0 18px;font-size:14px}

/* Stage track: 设计 / 开发 / 测试 / 上线 */
.pj-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.pj-steps li{display:grid;gap:7px;font-size:12px;color:var(--muted)}
.pj-steps li::before{content:"";height:6px;border-radius:999px;background:var(--surface-3)}
.pj-steps li.is-done{color:var(--ink-2)}
.pj-steps li.is-done::before{background:var(--ink)}
.pj-steps li.is-now{color:var(--accent);font-weight:600}
.pj-steps li.is-now::before{background:linear-gradient(90deg,var(--accent) 0 55%,var(--accent-soft) 55% 100%)}
@media (prefers-reduced-motion:no-preference){
  .ui-motion .pj.is-in .pj-steps li::before{animation:pj-fill .9s var(--ease) both;transform-origin:left}
  .ui-motion .pj.is-in .pj-steps li:nth-child(2)::before{animation-delay:.08s}
  .ui-motion .pj.is-in .pj-steps li:nth-child(3)::before{animation-delay:.16s}
  .ui-motion .pj.is-in .pj-steps li:nth-child(4)::before{animation-delay:.24s}
}
@keyframes pj-fill{from{transform:scaleX(0)}}