/* ============================================================
   ng.liuxia.xin/diag · 六轴速览页专属「蓝图/格子地图」视觉
   frontend-design 重构 · 让"陪诊市场是一张网格"看得见
   设计概念：编辑式蓝图——线框 / 刻度 / 交叉坐标 / 拥挤vs空
   色板：NG 墨绿+琥珀+暖白体系内，琥珀=拥挤实格，墨绿=可去之地
   ============================================================ */

.diag-scan{
  max-width:960px; margin:0 auto; padding:48px 22px 72px;
  position:relative;
}

/* 蓝图报头：细线框 + 坐标角标，像图纸一角 */
.scan-head{
  position:relative; padding:34px 8px 30px; margin-bottom:46px;
  border-top:3px solid var(--ng-green);
}
.scan-head::after{
  content:""; position:absolute; top:-3px; right:0; width:64px; height:3px; background:var(--ng-amber);
}
.scan-kicker{
  font-family:"SFMono-Regular",Consolas,monospace; font-size:11px; letter-spacing:.3em;
  color:var(--ng-amber-deep); margin:0 0 16px;
}
.scan-head h1{
  font-family:"Songti SC","STSong","SimSun",serif; font-size:clamp(30px,6vw,46px);
  line-height:1.22; color:var(--ng-fg); margin:0 0 18px; font-weight:700; letter-spacing:.01em;
}
.scan-head h1 .hl{ color:var(--ng-green); }
.scan-head h1 .amber{ color:var(--ng-amber-deep); }
.scan-lede{ font-size:17px; line-height:1.95; color:var(--ng-fg); max-width:640px; margin:0; }
.scan-lede b{ color:var(--ng-fg); }

/* 角标坐标（蓝图感小细节） */
.scan-head .coord{
  position:absolute; font-family:"SFMono-Regular",Consolas,monospace; font-size:9px; letter-spacing:.15em; color:var(--ng-fg-muted);
}
.coord-tl{ top:16px; left:0; }
.coord-tr{ top:16px; right:0; }
.coord-bl{ bottom:8px; left:0; }

/* ---------- 核心：六轴格子地图 ---------- */
.grid-map{
  position:relative; margin:0 0 52px; padding:26px 20px 30px;
  background:var(--ng-cream); border:1px solid var(--ng-line); border-radius:14px;
  overflow:hidden;
}
.grid-map .gm-label{
  font-family:"SFMono-Regular",Consolas,monospace; font-size:10px; letter-spacing:.24em;
  color:var(--ng-fg-muted); margin-bottom:18px;
}

/* 六根轴：每根一行，两端对比 */
.axis-row{ margin-bottom:14px; }
.axis-row:last-child{ margin-bottom:0; }
.axis-name{
  font-family:"Songti SC","STSong","SimSun",serif; font-size:14px; font-weight:700;
  color:var(--ng-green-deep); min-width:56px; display:inline-block;
}
.axis-track{
  position:relative; height:34px; flex:1; border-radius:8px;
  background:repeating-linear-gradient(90deg, var(--ng-green-soft) 0 2px, transparent 2px 1fr);
}
/* 拥挤端（左）vs 空端（右）——用"密度"表达 */
.axis-t{
  position:relative; display:flex; align-items:center; height:34px; border-radius:8px; overflow:hidden;
}
.axis-t .crowded{
  position:relative; height:100%; background:repeating-linear-gradient(90deg,var(--ng-amber) 0 7px,var(--ng-amber-deep) 7px 9px);
  transition:width 1.1s cubic-bezier(.22,.61,.36,1);
}
.axis-t .open{
  position:relative; height:100%; background:repeating-linear-gradient(90deg,transparent 0 15px,rgba(46,93,62,.18) 15px 16px);
  border-top:1px dashed rgba(46,93,62,.4); border-bottom:1px dashed rgba(46,93,62,.4);
}
.axis-t .t-lbl{
  position:absolute; top:50%; transform:translateY(-50%); font-size:12px; letter-spacing:.02em; z-index:2;
  white-space:nowrap;
}
.axis-t .l-lbl{ left:10px; color:#fff; font-weight:600; }
.axis-t .r-lbl{ right:10px; color:var(--ng-green-deep); }

/* 端的标签文字（轴下方） */
.axis-ends{ display:flex; justify-content:space-between; margin-top:4px; padding-left:60px; }
.axis-ends span{ font-size:11.5px; color:var(--ng-fg-muted); }
.axis-ends .e-low{ color:var(--ng-amber-deep); }
.axis-ends .e-high{ color:var(--ng-green); }

/* 地图下方一句点题 */
.map-point{
  margin-top:22px; padding:16px 18px; background:var(--ng-amber-pale);
  border-left:4px solid var(--ng-amber); border-radius:0 10px 10px 0;
  font-size:15px; line-height:1.75; color:var(--ng-fg);
}
.map-point b{ color:var(--ng-amber-deep); }

/* ============================================================
   六轴逐根解读：轴卡（左低右高 + 一句话 + 往右走一格）
   ============================================================ */
.scan-sec{ margin:0 0 60px; }
.scan-sec .ss-kicker{
  font-family:"SFMono-Regular",Consolas,monospace; font-size:10px; letter-spacing:.26em;
  color:var(--ng-fg-muted); margin-bottom:8px;
}
.scan-sec h2{
  font-family:"Songti SC","STSong","SimSun",serif; font-size:26px; color:var(--ng-fg);
  margin:0 0 8px; font-weight:700;
}
.scan-sec h2 .amber{ color:var(--ng-amber-deep); }
.scan-sec .ss-sub{ font-size:15px; color:var(--ng-fg-muted); margin:0 0 28px; line-height:1.8; }

/* 轴解读卡：图块式左右对比 */
.axis-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
.axcard{
  padding:22px 20px; background:#fff; border:1px solid var(--ng-line); border-radius:12px;
  position:relative; transition:transform .2s ease-out, box-shadow .2s ease-out;
}
.axcard:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(31,69,51,.08); }
.axcard .ax-no{
  font-family:"SFMono-Regular",Consolas,monospace; font-size:10px; letter-spacing:.2em;
  color:var(--ng-fg-muted); margin-bottom:12px;
}
.axcard h3{ font-family:"Songti SC","STSong","SimSun",serif; font-size:18px; color:var(--ng-fg); margin:0 0 16px; }
.axcard h3 small{ font-weight:400; color:var(--ng-fg-muted); font-size:12px; display:block; margin-top:3px; font-family:"Songti SC","STSong","SimSun",serif; }
.ax-two{ display:flex; flex-direction:column; gap:10px; }
.ax-two .a-cell{ display:flex; align-items:flex-start; gap:10px; padding:11px 13px; border-radius:9px; }
.ax-two .low{ background:var(--ng-amber-pale); }
.ax-two .high{ background:var(--ng-green-soft); }
.a-cell .a-tag{ font-size:10.5px; font-weight:700; letter-spacing:.06em; flex:0 0 auto; padding:2px 7px; border-radius:5px; margin-top:1px; }
.a-cell.low .a-tag{ background:var(--ng-amber); color:#fff; }
.a-cell.high .a-tag{ background:var(--ng-green); color:#fff; }
.a-cell p{ margin:0; font-size:13.5px; line-height:1.7; color:var(--ng-fg); }
.a-cell.high p b{ color:var(--ng-green-deep); }

/* ============================================================
   五种资本：横切成层
   ============================================================ */
.cap-stack{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.cap-item{
  padding:20px 16px; background:var(--ng-green); color:#fff; border-radius:12px;
  text-align:center; position:relative; min-height:120px; display:flex; flex-direction:column; justify-content:flex-end;
}
.cap-item:nth-child(2){ background:var(--ng-green-deep); }
.cap-item:nth-child(3){ background:#3D6B4C; }
.cap-item:nth-child(4){ background:#2A5540; }
.cap-item:nth-child(5){ background:var(--ng-green); }
.cap-item .c-no{
  position:absolute; top:14px; right:16px; font-family:"SFMono-Regular",Consolas,monospace;
  font-size:10px; letter-spacing:.2em; color:rgba(255,255,255,.5);
}
.cap-item h4{ font-family:"Songti SC","STSong","SimSun",serif; font-size:16px; margin:0 0 6px; }
.cap-item p{ margin:0; font-size:12px; line-height:1.7; color:#D6E4DA; }
.cap-item:nth-child(2) p{ color:#C6D8CC; }

/* ============================================================
   交叉点机会：窄缝高亮
   ============================================================ */
.cross-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
.cross{
  padding:22px 22px; background:#fff; border:1px solid var(--ng-line); border-radius:12px;
  border-left:5px solid var(--ng-amber); position:relative;
}
.cross .x-tag{ font-size:11px; letter-spacing:.14em; color:var(--ng-amber-deep); font-weight:700; margin-bottom:10px; display:block; }
.cross p{ margin:0; font-size:15.5px; line-height:1.85; color:var(--ng-fg); }
.cross p b{ color:var(--ng-green-deep); }
.cross .x-q{
  margin-top:12px; font-family:"Songti SC","STSong","SimSun",serif; font-size:14px; color:var(--ng-amber-deep);
  font-style:italic;
}

/* ============================================================
   三问验证：三个问题卡
   ============================================================ */
.three-q{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.tq{
  padding:22px 20px; border:1px solid var(--ng-line); border-radius:12px; background:#fff;
  counter-increment:q;
}
.tq .tq-no{ font-family:"SFMono-Regular",Consolas,monospace; font-size:10px; letter-spacing:.2em; color:var(--ng-amber-deep); display:block; margin-bottom:12px; }
.tq h4{ font-family:"Songti SC","STSong","SimSun",serif; font-size:16.5px; color:var(--ng-fg); margin:0 0 8px; }
.tq p{ margin:0; font-size:13.5px; line-height:1.75; color:var(--ng-fg-muted); }

/* 收束判定 */
.bp-verdict{
  margin-top:24px; padding:20px 24px; background:var(--ng-green-deep); color:#fff; border-radius:12px;
  font-size:15.5px; line-height:1.85;
}
.bp-verdict b{ color:var(--ng-amber); }

/* ============================================================
   进场动效（staggered reveal · CSS-only，尊重 reduced-motion）
   ============================================================ */
.srv{ opacity:0; transform:translateY(16px); transition:opacity .7s ease-out, transform .7s ease-out; }
.srv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .srv{ opacity:1; transform:none; transition:none; }
}

/* [锁定] 拥挤端宽度初始为 0，JS 载入后动画到目标值 */
.axis-t .crowded{ width:0; }
.axis-t.crowded-on .crowded{ }

/* ============================================================
   移动端
   ============================================================ */
@media(max-width:640px){
  .scan-head h1{ font-size:29px; }
  .axis-track{ height:30px; }
  .axis-t{ height:30px; }
  .axis-name{ min-width:48px; font-size:13px; }
  .axis-ends{ padding-left:52px; font-size:10.5px; }
  .axis-t .t-lbl{ font-size:10.5px; }
}