/* ============================================================
   万杉 ONESVM — 加入我们（careers.html）
   复用 style.css 全部 token 与基座；本文件只定义招聘页组件
   ============================================================ */

/* ---------- 英雄区 ---------- */
.careers-hero{
  min-height:92vh;
}
.careers-hero .lede{ max-width:38em; }
.careers-hero .landing-cta{ justify-content:flex-start; }

/* ---------- 内容段（不占满整屏） ---------- */
.stage-flow{
  min-height:auto;
  padding-top:14vh;
  padding-bottom:14vh;
}

/* ---------- 岗位卡片（手风琴） ---------- */
.pos-list{
  display:flex; flex-direction:column; gap:18px;
}
.pos{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
  overflow:hidden;
  /* 与 .reveal 的 opacity/transform 动效并存（ careers.css 后加载，须显式合并） */
  transition:border-color .5s var(--ease), box-shadow .5s var(--ease),
             opacity .9s var(--ease), transform .9s var(--ease);
}
.pos:hover{ border-color:rgba(47,163,107,.4); }
.pos[open]{
  border-color:rgba(47,163,107,.5);
  box-shadow:var(--shadow);
}

.pos-head{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; gap:clamp(14px,2.4vw,26px);
  padding:clamp(22px,3vw,30px) clamp(20px,3vw,32px);
  transition:background .3s;
}
.pos-head::-webkit-details-marker{ display:none; }
.pos-head::marker{ content:""; }
.pos-head:hover{ background:rgba(47,163,107,.03); }
.pos-head:focus-visible{ outline:2px solid var(--green); outline-offset:-2px; border-radius:var(--radius); }

.pos-code{
  flex:none; margin-top:4px;
  font-size:12.5px; font-weight:700; letter-spacing:.12em;
  color:var(--green-deep);
  background:rgba(47,163,107,.1);
  border:1px solid rgba(47,163,107,.28);
  padding:4px 10px; border-radius:8px;
}

.pos-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.pos-titlerow{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pos-title{
  font-size:clamp(19px,2.4vw,23px); font-weight:700; letter-spacing:.01em;
}
.pos-status{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; letter-spacing:.08em; color:var(--green-deep);
}
.pos-status i{
  width:7px; height:7px; border-radius:50%;
  background:var(--green); box-shadow:0 0 10px var(--green-glow);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{ opacity:.55; } 50%{ opacity:1; }
}
.pos-status--paused{ color:var(--ink-faint); }

.pos-meta{ font-size:13.5px; color:var(--ink-faint); letter-spacing:.04em; }
.pos-summary{ font-size:14.5px; color:var(--ink-soft); max-width:44em; }

.pos-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.pos-tag{
  font-size:12px; letter-spacing:.06em; color:var(--green-deep);
  border:1px solid rgba(47,163,107,.35);
  padding:3px 10px; border-radius:999px;
  background:rgba(47,163,107,.06);
}

.pos-chev{
  flex:none; margin-top:6px; color:var(--ink-faint);
  transition:transform .45s var(--ease), color .3s;
}
.pos[open] .pos-chev{ transform:rotate(180deg); color:var(--green-deep); }

/* 暂停投递：不可展开 */
.pos--paused .pos-head{ cursor:default; }
.pos--paused .pos-chev{ display:none; }
.pos--paused .pos-title{ color:var(--ink-soft); }

/* ---------- 展开详情 ---------- */
.pos-body{
  padding:0 clamp(20px,3vw,32px) clamp(24px,3vw,34px);
  border-top:1px solid var(--line);
}
.pos-intro{
  margin:22px 0 4px; font-size:14.5px; color:var(--ink-soft); max-width:46em;
}
.pos-cols{
  display:grid; gap:8px 48px;
  grid-template-columns:1fr 1fr;
  margin-top:18px;
}
.pos-sec h4,
.pos-test h4,
.pos-apply h4{
  font-size:13px; font-weight:600; letter-spacing:.24em;
  color:var(--green-deep); text-transform:uppercase;
  margin:20px 0 12px;
  display:flex; align-items:center; gap:10px;
}
.pos-sec h4::before,
.pos-test h4::before,
.pos-apply h4::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--green); box-shadow:0 0 10px var(--green-glow);
}
.pos-sec ol,.pos-sec ul{
  padding-left:0; list-style:none;
  display:flex; flex-direction:column; gap:9px;
}
.pos-sec li{
  position:relative; padding-left:24px;
  font-size:14.5px; color:var(--ink-soft); line-height:1.75;
}
.pos-sec ol{ counter-reset:posli; }
.pos-sec ol li{ counter-increment:posli; }
.pos-sec ol li::before{
  content:counter(posli);
  position:absolute; left:0; top:1px;
  width:17px; height:17px; border-radius:50%;
  background:rgba(47,163,107,.12); color:var(--green-deep);
  font-size:11px; font-weight:700; line-height:17px; text-align:center;
}
.pos-sec ul li::before{
  content:""; position:absolute; left:6px; top:12px;
  width:5px; height:5px; border-radius:50%;
  background:var(--green);
}

/* 笔试下载区 */
.pos-test{
  margin-top:26px;
  background:rgba(47,163,107,.05);
  border:1px solid rgba(47,163,107,.18);
  border-radius:var(--radius);
  padding:4px clamp(18px,2.6vw,26px) clamp(20px,2.6vw,26px);
}
.pos-test-intro{ font-size:14.5px; color:var(--ink-soft); max-width:46em; }
.dl-row{ display:flex; flex-wrap:wrap; gap:14px 26px; margin-top:16px; }
.dl-item{ display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dl-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; letter-spacing:.04em;
  color:var(--green-deep);
  background:var(--bg-soft);
  border:1px solid rgba(47,163,107,.4);
  padding:10px 20px; border-radius:999px;
  transition:transform .35s var(--ease), background .3s, color .3s, box-shadow .35s var(--ease);
}
.dl-chip:hover{
  background:var(--green); color:#fff; transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(47,163,107,.28);
}
.dl-chip--pending{
  cursor:default; font-weight:500;
  color:var(--ink-faint);
  border-style:dashed; border-color:var(--line);
  background:transparent;
}
.dl-chip--pending:hover{
  background:transparent; color:var(--ink-faint);
  transform:none; box-shadow:none;
}
.dl-chip--pending em{
  font-style:normal; font-size:12px; letter-spacing:.06em;
}
.dl-pwd{
  font-family:inherit; font-size:12.5px; letter-spacing:.05em;
  color:var(--ink-soft); background:transparent;
  border:1px dashed rgba(47,163,107,.45); border-radius:8px;
  padding:5px 10px; cursor:pointer;
  transition:background .3s, color .3s, border-color .3s;
}
.dl-pwd:hover{ background:rgba(47,163,107,.1); color:var(--green-deep); }
.dl-pwd.copied{
  background:var(--green); color:#fff; border-color:var(--green);
}

/* 投递区 */
.pos-apply{
  margin-top:26px; padding-top:20px;
  border-top:1px dashed var(--line);
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
.pos-apply-main{ flex:1; min-width:260px; }
.pos-apply-main h4{ margin-top:0; }
.pos-apply-main p{ font-size:14px; color:var(--ink-soft); margin-bottom:12px; }
.subject-chip{
  font-family:inherit; font-size:13.5px; letter-spacing:.04em;
  color:var(--green-deep); background:rgba(47,163,107,.08);
  border:1px solid rgba(47,163,107,.3); border-radius:10px;
  padding:8px 14px; cursor:pointer;
  transition:background .3s, color .3s, border-color .3s;
}
.subject-chip:hover{ background:rgba(47,163,107,.16); }
.subject-chip.copied{ background:var(--green); color:#fff; border-color:var(--green); }
.pos-apply-btn{ flex:none; }

/* ---------- 空态 / noscript ---------- */
.positions-empty{
  border:1px dashed var(--line); border-radius:var(--radius);
  padding:44px 34px; text-align:center;
  color:var(--ink-soft); font-size:15px;
}
.positions-empty a{ color:var(--green-deep); font-weight:600; }
.positions-empty a:hover{ text-decoration:underline; }
.noscript-box{
  margin-top:20px;
  border:1px dashed var(--line); border-radius:var(--radius);
  padding:24px 26px; font-size:14.5px; color:var(--ink-soft);
}
.noscript-box a{ color:var(--green-deep); font-weight:600; }

/* ---------- 应聘流程 ---------- */
.steps{
  display:grid; gap:18px;
  grid-template-columns:repeat(4,1fr);
  counter-reset:step;
}
.step{
  counter-increment:step;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 24px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.step:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow);
  border-color:rgba(47,163,107,.4);
}
.step::before{
  content:"0" counter(step);
  display:block; margin-bottom:14px;
  font-size:26px; font-weight:700; letter-spacing:.04em;
  background:linear-gradient(120deg,var(--green-deep),var(--green));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.step h3{ font-size:16.5px; font-weight:600; margin-bottom:8px; }
.step p{ font-size:13.5px; color:var(--ink-soft); }
.step p code{
  font-size:12.5px; color:var(--green-deep);
  background:rgba(47,163,107,.08);
  padding:2px 7px; border-radius:6px;
}

.process-note{
  margin-top:34px; text-align:center;
  font-size:14.5px; color:var(--ink-soft); letter-spacing:.04em;
}
.process-note b{ color:var(--green-deep); font-weight:600; }

/* ---------- 自荐通道 ---------- */
.selfrec{
  margin-top:20px;
  display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
  text-align:center;
  border:1px solid var(--green); border-radius:var(--radius);
  padding:30px clamp(20px,4vw,40px);
  background:var(--bg-soft);
  box-shadow:0 0 0 1px var(--green-soft), 0 18px 40px rgba(47,163,107,.16);
}
.selfrec p{ font-size:15px; color:var(--ink-soft); max-width:34em; }
.selfrec b{ color:var(--green-deep); font-weight:600; }

/* ---------- 响应式 ---------- */
@media(max-width:900px){
  .steps{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:640px){
  .careers-hero{ min-height:auto; padding-top:22vh; }
  .pos-cols{ grid-template-columns:1fr; gap:8px; }
  .pos-head{ gap:14px; }
  .pos-code{ margin-top:2px; }
  .steps{ grid-template-columns:1fr; }
  .pos-apply{ flex-direction:column; align-items:flex-start; }
  .pos-apply-btn{ width:100%; }
  .dl-row{ flex-direction:column; align-items:stretch; }
  .dl-item{ width:100%; flex-direction:column; align-items:stretch; }
  .dl-chip{ width:100%; justify-content:center; padding:10px 12px; font-size:13px; word-break:keep-all; }
  .dl-chip svg{ flex:none; }
  .dl-chip--pending em{ font-size:11.5px; flex:none; }
  .dl-pwd{ align-self:center; }
}