/* ============================================================================
   PROOF LAYER —— 案例页「求职证据」共享层
   ----------------------------------------------------------------------------
   为案例页新增的招聘者导向模块提供样式：
     .focus-*        DESIGN FOCUS · 一句问题 + 一句设计处理
     .rev-*          DESIGN REVIEW · 设计复盘（真实 UI 五角度分析）
     .dv-*           DATA VISUALIZATION · 数据可视化模块
     .cs-*           COMPONENT SYSTEM · 组件系统（含 Refined 标注）
     .mp-*           MULTI-PLATFORM · 多端适配
     .ho-*           DESIGN → DEVELOPMENT · 协作链路
   依赖 tokens.css / system.css / editorial-case.css（变量全部来自 tokens）。
   组件演示均标注 Refined：依据已上线产品的视觉语言二次整理，非历史交付物。
   ============================================================================ */

/* ---------------------------------------------------------- DESIGN FOCUS -- */
.focus-intro{max-width:620px;margin-bottom:8vh}
.focus-intro .big{font-weight:var(--fw-bold);font-size:var(--fs-f-big);line-height:var(--lh-h3)}
.focus-intro p{margin-top:22px;color:var(--body)}
.focus-list{list-style:none}
/* 概览节内的紧凑 DESIGN FOCUS 子块 */
.ov-focus{margin-top:8vh}
.ov-focus_label{
  margin:0 0 3vh;font-size:var(--fs-micro);letter-spacing:var(--ls-2xl);
  text-transform:uppercase;color:var(--mut);font-weight:var(--fw-med);
}
.ov-focus .focus-item{padding:26px 8px}
.focus-item{display:grid;grid-template-columns:96px 1fr;gap:28px;padding:34px 8px;border-bottom:1px solid var(--line)}
.focus-item:first-child{border-top:1px solid var(--line)}
.focus-item .fn{font-size:var(--fs-f-note);color:var(--mut);padding-top:6px}
.focus-item h3{font-weight:var(--fw-bold);font-size:var(--fs-f-list);line-height:var(--lh-snug)}
.focus-item .fq{margin-top:10px;color:var(--body);font-size:var(--fs-f-body);max-width:560px}
.focus-item .fa{margin-top:8px;color:var(--mut);font-size:var(--fs-f-body);max-width:560px}
.focus-item .fa::before{content:"→ ";color:var(--acc);font-weight:var(--fw-bold)}
@media(max-width:767px){.focus-item{grid-template-columns:1fr;gap:10px}}

/* --------------------------------------------------------- DESIGN REVIEW -- */
/* 流程链：Existing Product → Design Review → UI Refinement → Design System → Final UI */
.rev-chain{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:7vh 0 9vh}
.rev-chain span{
  border:1px solid var(--line);border-radius:999px;padding:9px 18px;
  font-size:var(--fs-label);letter-spacing:var(--ls-lg);text-transform:uppercase;color:var(--mut);
}
.rev-chain i{font-style:normal;color:var(--c-ink-4);font-size:var(--fs-label)}
.rev-chain span.is-on{border-color:var(--acc);color:var(--acc-ink,var(--ink));background:var(--acc-soft)}
.rev-note{max-width:var(--read);color:var(--mut);font-size:var(--fs-f-body)}

/* 复盘行：左侧五角度分析，右侧真实 UI 截图 */
.rev-row{display:grid;grid-template-columns:5fr 7fr;gap:5vw;align-items:center;padding:7vh 0}
.rev-row+.rev-row{border-top:1px solid var(--line)}
.rev-row .rev-no{font-size:var(--fs-meta);letter-spacing:var(--ls-2xl);color:var(--mut);text-transform:uppercase}
.rev-row h3{margin-top:14px;font-weight:var(--fw-bold);font-size:var(--fs-f-h2);line-height:var(--lh-display);text-transform:uppercase}
.rev-row .rev-cn{margin-top:10px;font-weight:var(--fw-med);font-size:var(--fs-f-scn);letter-spacing:var(--ls-lg);color:var(--acc)}
.rev-row p{margin-top:20px;max-width:440px;color:var(--body)}
.rev-row .rev-img img{width:100%;border-radius:12px;box-shadow:0 40px 90px -70px rgba(23,23,23,.5);background:#fff}
.rev-row .rev-cap{margin-top:14px;font-size:var(--fs-label);letter-spacing:var(--ls-xl);text-transform:uppercase;color:var(--mut)}
.rev-row .rev-cap b{font-weight:var(--fw-med);color:var(--ink)}
@media(max-width:900px){
  .rev-row{grid-template-columns:1fr;gap:26px}
  .rev-row .rev-img{order:2}
}

/* ------------------------------------------------------ DATA VISUALIZATION */
.dv-lede{max-width:var(--read);margin-bottom:7vh;color:var(--body);font-size:var(--fs-f-body)}
.dv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5vh 3vw}
.dv-grid figure{min-width:0}
.dv-grid .ph{overflow:hidden;border-radius:12px;background:#fff;box-shadow:0 40px 90px -70px rgba(23,23,23,.45)}
.dv-grid img{width:100%;height:auto;transition:transform .7s cubic-bezier(.22,.68,.24,1)}
.dv-grid figure:hover img{transform:scale(1.02)}
.dv-grid figcaption{margin-top:14px;font-size:var(--fs-label);letter-spacing:var(--ls-xl);text-transform:uppercase;color:var(--mut)}
.dv-grid figcaption b{display:block;font-weight:var(--fw-med);color:var(--ink);margin-bottom:4px}
.dv-grid .dv-full{grid-column:span 2}
@media(max-width:767px){.dv-grid{grid-template-columns:1fr}.dv-grid .dv-full{grid-column:span 1}}

/* ------------------------------------------------------- COMPONENT SYSTEM */
.cs-note{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-size:var(--fs-micro);letter-spacing:var(--ls-lg);text-transform:uppercase;color:var(--mut);
  border:1px dashed var(--line);border-radius:999px;padding:6px 12px;
}
.cs-badge{
  display:inline-block;font-size:var(--fs-micro);letter-spacing:var(--ls-lg);text-transform:uppercase;
  color:var(--acc-ink,var(--ink));background:var(--acc-soft);border-radius:999px;padding:3px 10px;
}
/* Foundations：字体 / 色板 / 间距 / 栅格 / 圆角 */
.cs-found{display:grid;grid-template-columns:repeat(5,1fr);gap:2vw;margin-top:7vh}
.cs-found>div{border-top:1px solid var(--line);padding-top:18px}
.cs-found dt{font-size:var(--fs-micro);letter-spacing:var(--ls-2xl);text-transform:uppercase;color:var(--mut)}
.cs-found dd{margin-top:12px;font-size:var(--fs-label);color:var(--body);line-height:var(--lh-ui)}
.cs-swatch{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.cs-swatch i{width:26px;height:26px;border-radius:6px;border:1px solid var(--line)}
.cs-scale span{display:block}
@media(max-width:900px){.cs-found{grid-template-columns:repeat(2,1fr);gap:26px}}

/* 组件面板 */
.cs-panel{margin-top:9vh;border-top:1px solid var(--line);padding-top:22px;
  display:grid;grid-template-columns:220px 1fr;gap:40px}
.cs-panel>h4{font-weight:var(--fw-bold);font-size:var(--fs-f-sublabel);letter-spacing:var(--ls-4xl);text-transform:uppercase}
.cs-panel .cs-k{font-size:var(--fs-micro);letter-spacing:var(--ls-2xl);text-transform:uppercase;color:var(--mut);margin-top:10px}
.cs-stage{display:flex;flex-wrap:wrap;gap:2.4rem 3rem;align-items:flex-start}
.cs-cell{display:flex;flex-direction:column;gap:1rem;min-width:0}
.cs-cell>label{font-size:var(--fs-micro);letter-spacing:var(--ls-2xl);text-transform:uppercase;color:var(--mut)}
@media(max-width:900px){.cs-panel{grid-template-columns:1fr;gap:18px}}

/* ---- 组件本体（Refined：依据已上线 ERP 视觉语言二次整理） ---- */
.cs-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:500 var(--fs-ui)/1 var(--font);letter-spacing:var(--ls-sm);
  border-radius:8px;padding:12px 22px;cursor:default;white-space:nowrap;
  background:var(--acc);color:#fff;border:1px solid var(--acc);
}
.cs-btn--hover{filter:brightness(1.08)}
.cs-btn--active{transform:translateY(1px);filter:brightness(.94)}
.cs-btn--disabled{background:var(--c-page-2);color:var(--c-ink-4);border-color:var(--c-page-2)}
.cs-btn--loading{position:relative;color:transparent}
.cs-btn--loading::after{
  content:"";position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:cs-spin .8s linear infinite;
}
.cs-btn--ghost{background:transparent;color:var(--acc);border:1px solid var(--line)}
@keyframes cs-spin{to{transform:rotate(360deg)}}

.cs-field{display:flex;flex-direction:column;gap:8px;width:230px}
.cs-field>span{font-size:var(--fs-label);color:var(--c-ink-2);letter-spacing:var(--ls-sm)}
.cs-input{
  font:400 var(--fs-ui)/1.4 var(--font);color:var(--c-ink);
  border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:#fff;
}
.cs-input::placeholder{color:var(--c-ink-4)}
.cs-input--focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft);outline:none}
.cs-input--error{border-color:#c0392b}
.cs-input--disabled{background:var(--c-page-2);color:var(--c-ink-4)}
.cs-field .cs-msg{font-size:var(--fs-label);color:#c0392b}
.cs-select{position:relative;width:230px}
.cs-select .cs-input{padding-right:36px;appearance:none}
.cs-select::after{
  content:"";position:absolute;right:14px;top:50%;width:8px;height:8px;margin-top:-6px;
  border-right:1.5px solid var(--mut);border-bottom:1.5px solid var(--mut);transform:rotate(45deg);pointer-events:none;
}

.cs-table{width:100%;max-width:640px;border-collapse:collapse;font-size:var(--fs-ui)}
.cs-table th{
  text-align:left;font-weight:var(--fw-med);font-size:var(--fs-label);letter-spacing:var(--ls-lg);
  text-transform:uppercase;color:var(--mut);border-bottom:1px solid var(--line);padding:10px 14px;
}
.cs-table td{border-bottom:1px solid var(--c-page-2);padding:12px 14px;color:var(--c-ink-body)}
.cs-table tr:hover td{background:var(--c-page-2)}

.cs-tag{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 12px;
  font-size:var(--fs-label);letter-spacing:var(--ls-sm);white-space:nowrap}
.cs-tag i{width:6px;height:6px;border-radius:50%;flex:none}
.cs-tag--ok{background:rgba(46,125,50,.1);color:#2e7d32}.cs-tag--ok i{background:#2e7d32}
.cs-tag--run{background:var(--acc-soft);color:var(--acc-ink,var(--ink))}.cs-tag--run i{background:var(--acc)}
.cs-tag--warn{background:rgba(191,116,14,.1);color:#a15c0a}.cs-tag--warn i{background:#c0760a}

.cs-card{width:270px;border:1px solid var(--line);border-radius:12px;padding:18px;background:#fff}
.cs-card h5{font-size:var(--fs-label);letter-spacing:var(--ls-lg);text-transform:uppercase;color:var(--mut);font-weight:var(--fw-med)}
.cs-card .cs-kpi{display:flex;gap:8px;align-items:baseline;margin-top:10px}
.cs-card .cs-kpi b{font-size:var(--fs-h6);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight)}
.cs-card .cs-kpi span{font-size:var(--fs-label);color:var(--mut)}
.cs-card .cs-kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}

.cs-tabs{display:flex;gap:26px;border-bottom:1px solid var(--line);max-width:420px}
.cs-tabs span{font-size:var(--fs-ui);color:var(--mut);padding:0 2px 12px;letter-spacing:var(--ls-sm)}
.cs-tabs span.is-on{color:var(--ink);font-weight:var(--fw-med);border-bottom:2px solid var(--acc)}

.cs-modal{width:min(400px,100%);border:1px solid var(--line);border-radius:12px;background:#fff;
  box-shadow:0 30px 70px -40px rgba(23,23,23,.35);padding:22px}
.cs-modal h5{font-size:var(--fs-body);font-weight:var(--fw-bold)}
.cs-modal p{margin-top:10px;font-size:var(--fs-desc);color:var(--mut)}
.cs-modal .cs-modal_btns{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}

/* ---------------------------------------------------------- MULTI-PLATFORM */
.mp-grid{display:grid;grid-template-columns:7fr 4fr;gap:4vw;align-items:start;margin-top:7vh}
.mp-web img{width:100%;border-radius:12px;box-shadow:0 40px 90px -70px rgba(23,23,23,.5);background:#fff}
.mp-cap{margin-top:14px;font-size:var(--fs-label);letter-spacing:var(--ls-xl);text-transform:uppercase;color:var(--mut)}
.mp-cap b{font-weight:var(--fw-med);color:var(--ink)}
.mp-phones{display:flex;gap:2vw;justify-content:center;flex-wrap:wrap}
.mp-phones figure{width:min(180px,42%)}
.mp-phones img{width:100%;aspect-ratio:750/1500;object-fit:cover;object-position:top;
  border-radius:14px;box-shadow:0 40px 90px -70px rgba(23,23,23,.45);background:#fff}
.mp-phones figcaption{margin-top:12px;font-size:var(--fs-micro);letter-spacing:var(--ls-xl);text-transform:uppercase;color:var(--mut);text-align:center}
.mp-note{display:grid;grid-template-columns:repeat(3,1fr);gap:3vw;margin-top:9vh;
  border-top:1px solid var(--line);padding-top:5vh}
.mp-note dt{font-size:var(--fs-label);letter-spacing:var(--ls-2xl);text-transform:uppercase;color:var(--mut)}
.mp-note dd{margin-top:12px;font-size:var(--fs-desc);color:var(--body)}
@media(max-width:900px){
  .mp-grid{grid-template-columns:1fr}
  .mp-note{grid-template-columns:1fr;gap:24px}
}

/* ------------------------------------------------- DESIGN → DEVELOPMENT -- */
.ho-flow{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:6vh 0 8vh}
.ho-flow span{
  border:1px solid var(--line);border-radius:999px;padding:10px 20px;
  font-size:var(--fs-label);letter-spacing:var(--ls-lg);text-transform:uppercase;color:var(--ink);font-weight:var(--fw-med);
}
.ho-flow i{font-style:normal;color:var(--c-ink-4)}
.ho-list{list-style:none;border-top:1px solid var(--line)}
.ho-list li{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}
.ho-list b{font-weight:var(--fw-med);font-size:var(--fs-label);letter-spacing:var(--ls-2xl);text-transform:uppercase;color:var(--mut)}
.ho-list p{font-size:var(--fs-f-body);color:var(--body)}
.ho-quote{margin-top:8vh;max-width:var(--read);font-size:var(--fs-f-body);color:var(--mut)}
@media(max-width:767px){.ho-list li{grid-template-columns:1fr;gap:8px}}