/* site/assets/css/oem-journey.css —— OEM 页「起订量、交期与付款」生产旅程（R7 T3）：石墨看板 + 四站等轴测场景 + 轨道（货箱 / 天数 / 付款旗）
   默认样式就是终态（无 JS、减少动态效果）；.jn.run 由 oem-journey.js 初始化成功后加上，才出现「未到站变暗、两行收起、旗未出」等动画中间态。
   只用逻辑属性：阿语页轨道自右向左，插画本身不镜像（.ill 固定 LTR）。铜只做细线 / 站点圈 / 旗杆 / 深底大数字 */
.jnintro{margin-block-end:var(--sp-3)}
.jnintro h2{margin:0 0 6px}
.jnintro p{margin:0;color:var(--mist);max-inline-size:60ch}
.jngroups{display:flex;flex-wrap:wrap;gap:8px;margin-block-end:var(--sp-3)}
.jngroups .btn[aria-pressed=false]{background:#fff;border-color:var(--line);color:var(--navy)}
.jngroups .btn[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.jnfor{margin:0 0 var(--sp-2);font-size:var(--fs-0);font-weight:600;color:var(--mist)}
/* 初始化成功（oem-journey.js 加 html.lt-on）才出现只靠脚本的控件、收起无 JS 用的产品线说明；脚本被拦 / 抛错时与无 JS 相同 */
html:not(.lt-on) .jnsec .jsonly{display:none}
html.lt-on .jnfor{display:none}

/* 看板：石墨底 + 极淡的车间地面网格 */
.jnboard{--sh:150px;--rh:28px;--lane:44px;--dim:rgba(169,175,182,.62);position:relative;color:var(--bg-2);background-color:var(--navy);background-image:linear-gradient(rgba(242,241,238,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(242,241,238,.04) 1px,transparent 1px);background-size:28px 28px;border-radius:var(--r-3);padding:var(--sp-5) var(--sp-5) var(--sp-4)}
.jnboard :focus-visible{outline-color:#fff;box-shadow:0 0 0 4px var(--navy)}

/* 看板头：天数计数器 | 起订量网格 | 重播 / 暂停 */
.jnhead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto;gap:var(--sp-4) var(--sp-5);align-items:end;padding-block-end:var(--sp-4);margin-block-end:var(--sp-4);border-block-end:1px solid rgba(169,175,182,.2)}
.jncount{display:block;font-size:clamp(2.25rem,1.4rem + 2.6vw,3.5rem);font-weight:700;line-height:1;letter-spacing:-.01em;color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
.jntotal{margin:10px 0 0;font-size:var(--fs-1);font-weight:600;color:var(--bg-2)}
.jnmoqn{margin:0 0 8px;font-size:var(--fs-2);font-weight:700}
.jnunits{display:grid;grid-template-columns:repeat(var(--cols,10),minmax(0,32px));gap:3px;list-style:none;margin:0 0 6px;padding:0;min-block-size:32px}
.jnunits li{min-inline-size:0}
.jnunits li[hidden]{display:none}
.jnscale{display:block;font-size:var(--fs-0);color:#A9AFB6;unicode-bidi:isolate}
.jnctl{display:flex;gap:8px;align-self:start}
.jnbtn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:var(--fs-0);font-weight:600;color:var(--bg-2);background:transparent;border:1px solid rgba(242,241,238,.5);border-radius:999px;padding:7px 14px;cursor:pointer;white-space:nowrap;transition:background-color .15s,color .15s}
.jnbtn:hover{background:var(--bg-2);color:var(--navy)}
.jnbtn svg{inline-size:14px;block-size:14px;flex:none}
.jnbtn[data-state=playing] .i-play,.jnbtn:not([data-state=playing]) .i-pause{display:none}
.jnbtn[aria-disabled=true]{opacity:.45;cursor:default}
.jnbtn[aria-disabled=true]:hover{background:transparent;color:var(--bg-2)}

/* 四站：列宽按该站最长天数分配（短站有最小宽度），轨道段落首尾相接 */
.jnstops{display:flex;list-style:none;margin:0;padding:0}
.jnstop{flex:var(--hi) 1 0;min-inline-size:12.5rem;position:relative;padding-inline-end:var(--sp-3);transition:flex-grow .5s ease}
.jnscene{block-size:var(--sh);display:flex;align-items:flex-end;justify-content:center;transition:opacity .5s ease,filter .5s ease,transform .5s ease}
.jnscene .ill{inline-size:100%}
.jnscene .ill svg{block-size:var(--sh)}
.jnrail{position:relative;block-size:var(--rh);margin-inline-end:calc(-1 * var(--sp-3))}
.jnstop:last-child .jnrail{margin-inline-end:0}
.jnrail::before{content:"";position:absolute;inset-inline:0;inset-block-start:calc(50% - 1px);block-size:2px;background:var(--dim)}
.jnfill{position:absolute;inset-inline-start:0;inset-block-start:calc(50% - 1.5px);block-size:3px;inline-size:calc(var(--f,1) * 100%);background:var(--gold)}
.jnrail::after{content:"";position:absolute;z-index:1;inset-inline-start:-7px;inset-block-start:calc(50% - 7px);inline-size:14px;block-size:14px;box-sizing:border-box;border-radius:50%;background:var(--navy);border:2px solid var(--gold);transition:border-color .3s ease,background-color .3s ease}
.jnend{position:absolute;z-index:1;inset-inline-end:-6px;inset-block-start:calc(50% - 6px);inline-size:12px;block-size:12px;background:var(--gold);transform:rotate(45deg);transition:background-color .3s ease}
.jncrate{position:absolute;z-index:2;inset-inline-start:calc(var(--f,1) * 100%);inset-block-end:calc(50% - 7px);inline-size:58px;margin-inline-start:-29px;pointer-events:none}
.jncrate .nos{display:none}
.jnname{margin:var(--lane) 0 0;font-size:var(--fs-1);font-weight:700;line-height:1.25;color:var(--bg-2);hyphens:auto;overflow-wrap:break-word;transition:color .4s ease}
.jndays{margin:2px 0 var(--sp-2);font-size:var(--fs-0);color:#A9AFB6}
.jnio{margin:0;display:grid;gap:10px;font-size:var(--fs-0);line-height:1.45;hyphens:auto;overflow-wrap:break-word;transition:opacity .5s ease,clip-path .7s ease}
.jnio dt{color:#A9AFB6;font-weight:600}
.jnio dd{margin:0;color:var(--bg-2)}
/* 付款旗：挂在该站起点的轨道下方（定金 = 批量生产起点，尾款 = 质检与发运起点） */
.jnflag{position:absolute;z-index:1;inset-inline-start:0;inset-block-start:calc(var(--sh) + var(--rh) / 2 + 10px);margin:0;max-inline-size:calc(100% - 8px);padding:3px 10px;background:var(--bg-2);color:var(--navy);font-size:var(--fs-0);font-weight:700;line-height:1.35;border-radius:6px;border-start-start-radius:0;transition:opacity .4s ease,transform .4s ease}
.jnflag::before{content:"";position:absolute;inset-inline-start:0;inset-block-end:100%;inline-size:2px;block-size:10px;background:var(--gold)}
.jnsec .lt-fallback{margin-block-start:var(--sp-4)}
.jnsec .lt-fallback+p{margin:var(--sp-3) 0 0;color:var(--mist)}
.jnlc{margin:var(--sp-4) 0 0;padding-block-start:var(--sp-3);border-block-start:1px solid rgba(169,175,182,.2);font-size:var(--fs-0);color:#A9AFB6}

/* 动画中间态（只在 .jn.run 下） */
.jn.run .jnstop[data-st=todo] .jnscene{opacity:.2;filter:grayscale(1)}
.jn.run .jnstop[data-st=now] .jnscene{transform:translateY(-6px)}
.jn.run .jnstop[data-st=todo] .jnname{color:#A9AFB6}
.jn.run .jnstop[data-st=todo] .jnio{opacity:0;clip-path:inset(0 0 100% 0)}
.jn.run .jnstop[data-st=todo] .jnrail::after{border-color:var(--dim)}
.jn.run .jnstop[data-st=now] .jnrail::after{background:var(--gold)}
.jn.run:not(.done) .jnend{background:var(--dim)}
.jn.run .jnflag:not(.on){opacity:0;transform:translateY(-8px)}
.jn.run .jnunits:not(.drop) li{opacity:0}
.jn.run .jnunits.drop li{animation:jn-drop .55s cubic-bezier(.2,.9,.3,1.25) both;animation-delay:calc(var(--i,0) * 90ms)}
.jn.paused .jnunits li{animation-play-state:paused}
@keyframes jn-drop{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:none}}
.jn.static .jnctl{display:none}
@media (prefers-reduced-motion:reduce){.jn *{transition:none!important;animation:none!important}}

/* 平板：缩小场景 */
@media (max-width:1000px){.jnboard{--sh:118px;padding:var(--sp-4)}.jnstop{min-inline-size:10.5rem}.jnhead{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.jnctl{grid-column:1/-1;grid-row:1;justify-self:end}}
/* 手机 / 窄屏：轨道改竖向，左侧（阿语右侧）一条竖线，场景在每站右侧 */
@media (max-width:600px){.jnunits{--cols:5}}
@media (max-width:820px){
  .jnboard{padding:var(--sp-3) var(--sp-3) var(--sp-3);border-radius:var(--r-2)}
  .jnhead{grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-3)}
  .jnclock{grid-column:1/-1}
  .jnctl{grid-column:2;grid-row:2;flex-direction:column;align-self:end;justify-self:end}
  .jnstops{flex-direction:column}
  .jnstop{flex:none;min-inline-size:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(42%,13rem));grid-template-areas:"name scene" "days scene" "io io";column-gap:var(--sp-2);align-content:start;padding:0 0 var(--sp-4);padding-inline-start:40px}
  .jnstop.has-flag{padding-block-start:46px}
  .jnstop:last-child{padding-block-end:var(--sp-3)}
  .jnscene{grid-area:scene;block-size:auto;align-self:start}
  .jnscene .ill svg{block-size:auto}
  .jnname{grid-area:name;margin:0;align-self:end}
  .jndays{grid-area:days;align-self:start}
  .jnio{grid-area:io;margin-block-start:var(--sp-2)}
  .jnrail{position:absolute;inset-block:0;inset-inline-start:0;inline-size:28px;block-size:auto;margin:0}
  .jnrail::before{inset-block:0;inset-inline:13px auto;inline-size:2px;block-size:auto}
  .jnfill{inset-block-start:0;inset-inline-start:12.5px;inline-size:3px;block-size:calc(var(--f,1) * 100%)}
  .jnrail::after{inset-block-start:-7px;inset-inline-start:7px}
  .jnend{inset-block-start:auto;inset-block-end:-6px;inset-inline-end:auto;inset-inline-start:8px}
  .jncrate{inset-block-start:calc(var(--f,1) * 100%);inset-block-end:auto;inset-inline-start:-10px;margin:-34px 0 0;inline-size:48px}
  .jnflag{inset-block-start:8px;inset-inline-start:40px;max-inline-size:calc(100% - 40px)}
  .jnflag::before{inset-block-end:auto;inset-block-start:calc(50% - 1px);inset-inline-start:auto;inset-inline-end:100%;inline-size:26px;block-size:2px}
  .jn.run .jnflag:not(.on){transform:translateX(-8px)}
  [dir=rtl] .jn.run .jnflag:not(.on){transform:translateX(8px)}
}