/* ============================================================
   素养画像 · 样式
   ------------------------------------------------------------
   复用 math/style.css 的 .m-* 组件（卡片/页签/表格/按钮/提示），
   这里只写这一栏自己的东西：指数仪表条、雷达图容器、热力色阶、
   评估闭环流程图、数据看板。

   ★ 颜色一律走主题变量（--tx/--tx2/--tx3/--line/--accent/--jade/--red），
     热力色阶是**唯一例外**：它必须自己定义 5 档底色，因为「热力图」的语义
     就是色阶本身。这 5 档在浅色与深色主题下都要能看清字，所以底色用
     低透明度叠加、文字继承 --tx，而不是写死深色块。
   ============================================================ */

.pt-wrap { --ptR: 10px; }

/* ---------------- 顶部：素养指数仪表 ---------------- */
.pt-bar {
  display: flex; align-items: center; gap: 22px;
  flex-wrap: wrap;
}
.pt-bar-empty { color: var(--tx3); font-size: 13.5px; padding: 6px 2px; }
.pt-idx { display: flex; flex-direction: column; align-items: center; min-width: 84px; }
.pt-idx-num { font-size: 40px; font-weight: 800; line-height: 1; font-family: var(--serif); }
.pt-idx-lb { font-size: 11.5px; color: var(--tx3); letter-spacing: 2px; margin-top: 4px; }
.pt-idx-mid { flex: 1; min-width: 240px; }
.pt-lv { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.pt-lv b { font-size: 15px; color: var(--tx); }
.pt-lv-tip { font-size: 12.5px; color: var(--tx3); }
.pt-idx-track {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(var(--txRGB), .10);
}
.pt-idx-track i { display: block; height: 100%; border-radius: 999px; transition: width .5s ease; }
.pt-idx-sub { font-size: 12.5px; color: var(--tx2); margin-top: 7px; }
.pt-idx-sub b { color: var(--tx); }
.pt-idx-side {
  display: grid; grid-template-columns: repeat(2, minmax(96px, auto));
  gap: 6px 18px; padding: 10px 14px; border-radius: var(--ptR);
  background: rgba(var(--txRGB), .045); border: 1px solid var(--line);
}
.pt-side-kv { display: flex; flex-direction: column; }
.pt-side-kv span { font-size: 11.5px; color: var(--tx3); }
.pt-side-kv b { font-size: 15px; color: var(--tx); }

/* ---------------- 通用：条 / 表 / 小件 ---------------- */
.pt-bar-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.pt-bar-n { flex: 0 0 108px; font-size: 13px; color: var(--tx2); }
.pt-bar-track {
  flex: 1; height: 9px; border-radius: 999px; overflow: hidden;
  background: rgba(var(--txRGB), .09); min-width: 60px;
}
.pt-bar-track i { display: block; height: 100%; border-radius: 999px; transition: width .45s ease; }
.pt-bar-v { flex: 0 0 52px; text-align: right; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pt-bar-t { flex: 0 0 auto; font-size: 11.5px; color: var(--tx3); }
.pt-dim-row { padding: 2px 0; }
.pt-dim-row.is-empty .pt-bar-n { color: var(--tx3); }
.pt-dim-row .pt-bar-row { cursor: pointer; border-radius: 7px; }
.pt-dim-row .pt-bar-row:hover { background: rgba(var(--txRGB), .05); }
.pt-dim-warn { font-size: 11.5px; color: var(--accent); padding: 0 0 4px 118px; }

.pt-deco { display: flex; gap: 10px; margin-top: 12px; }
.pt-deco span {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 8px;
  font-family: var(--serif); font-size: 14px; color: var(--accent);
  background: rgba(var(--accentRGB), .07);
}

.pt-self-h {
  font-size: 12.5px; font-weight: 700; color: var(--tx2); letter-spacing: 1px;
  margin: 16px 0 6px; padding-left: 9px; border-left: 3px solid var(--accent);
}
.pt-kv { display: flex; gap: 10px; padding: 4px 0; font-size: 13px; }
.pt-kv-k { flex: 0 0 84px; color: var(--tx3); }
.pt-kv-v { flex: 1; color: var(--tx2); }

.pt-empty { text-align: center; padding: 34px 20px; }
.pt-empty-ico { font-size: 40px; margin-bottom: 8px; }
.pt-empty .m-ol { text-align: left; max-width: 560px; margin: 14px auto; }
.pt-next {
  margin-top: 10px; padding: 10px 13px; border-radius: var(--ptR);
  background: rgba(var(--accentRGB), .08); border: 1px solid rgba(var(--accentRGB), .3);
  font-size: 13px; color: var(--tx2); line-height: 1.75;
}
.pt-chip {
  display: inline-block; padding: 2px 8px; margin: 2px 5px 2px 0;
  border-radius: 999px; font-size: 11.5px;
  background: rgba(var(--txRGB), .07); border: 1px solid var(--line); color: var(--tx2);
}

/* ---------------- 雷达图 ---------------- */
.pt-radar-grid { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 22px; align-items: start; }
.pt-radar-host { margin: 0; }
.pt-radar-cv { display: block; width: 100%; }
.pt-radar-side { min-width: 0; }
.pt-side-h { font-size: 12.5px; color: var(--tx3); margin-bottom: 8px; letter-spacing: .5px; }

.pt-tip-box { border: 1px solid var(--line); border-radius: var(--ptR); padding: 14px 16px; background: rgba(var(--txRGB), .03); }
.pt-tip-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.pt-tip-h b { font-size: 16px; color: var(--tx); font-family: var(--serif); }
.pt-tip-h span { font-size: 12px; color: var(--tx3); }
.pt-tip-row { display: flex; gap: 12px; padding: 5px 0; font-size: 13px; line-height: 1.75; color: var(--tx2); }
.pt-tip-k { flex: 0 0 64px; color: var(--tx3); font-size: 12.5px; }
.pt-tip-extra { color: var(--tx3); font-size: 12px; }

.pt-collect td, .pt-collect th { font-size: 12.5px; }
.pt-collect td:first-child { white-space: nowrap; }

/* ---------------- 热力图 ---------------- */
.pt-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--tx3); margin-bottom: 14px; }
.pt-legend-n { color: var(--tx3); letter-spacing: 1px; }
.pt-lg { display: inline-flex; align-items: center; gap: 6px; }
.pt-lg i { width: 15px; height: 15px; border-radius: 4px; display: inline-block; border: 1px solid var(--line); }
.pt-lg em { font-style: normal; color: var(--tx3); font-size: 11px; }

.pt-heat-box { display: flex; flex-direction: column; gap: 10px; }
.pt-heat-row { display: flex; gap: 12px; align-items: stretch; }
.pt-heat-name {
  flex: 0 0 96px; display: flex; flex-direction: column; justify-content: center;
  font-size: 13px; color: var(--tx);
}
.pt-heat-name span { font-size: 11.5px; color: var(--tx3); margin-top: 3px; }
.pt-heat-cells { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.pt-heat-cell {
  border-radius: 8px; padding: 9px 6px; text-align: center;
  border: 1px solid var(--line); background: rgba(var(--txRGB), .04);
  display: flex; flex-direction: column; gap: 2px; align-items: center;
}
.pt-heat-cell i { font-style: normal; font-size: 11px; color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pt-heat-cell b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pt-heat-cell u { text-decoration: none; font-size: 10.5px; color: var(--tx3); }

/* 五档色阶：底色用低透明度叠加，文字继承 --tx —— 深浅主题都不糊 */
.pt-h5 { background: rgba(var(--jadeRGB), .26) !important; }
.pt-h4 { background: rgba(var(--jadeRGB), .16) !important; }
.pt-h3 { background: rgba(var(--accentRGB), .20) !important; }
.pt-h2 { background: rgba(var(--redRGB), .13) !important; }
.pt-h1 { background: rgba(var(--redRGB), .22) !important; }
.pt-h0 { background: rgba(var(--txRGB), .05) !important; }
.pt-h5 b { color: var(--jadeTx); }
.pt-h4 b { color: var(--jadeTx); }
.pt-h3 b { color: var(--tx); }
.pt-h2 b, .pt-h1 b { color: var(--redTx); }
.pt-h0 b { color: var(--tx3); }

.pt-weak-list { display: flex; flex-direction: column; gap: 7px; }
.pt-weak {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 9px; background: rgba(var(--txRGB), .03);
  font-size: 13px;
}
.pt-weak-s { flex: 0 0 34px; text-align: center; color: #fff; font-weight: 700; border-radius: 6px; padding: 3px 0; font-size: 13px; }
.pt-weak-n { flex: 0 0 auto; color: var(--tx); }
.pt-weak-t { color: var(--tx3); font-size: 11.5px; }
.pt-weak-a { flex: 1; text-align: right; color: var(--tx2); font-size: 12.5px; }

/* ---------------- 成长曲线 ---------------- */
.pt-curve-host { margin: 0; }
.pt-sci td, .pt-sci th { font-size: 12.5px; }
.pt-sci-tag {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  background: rgba(var(--accentRGB), .12); color: var(--accent); font-size: 11px;
}

/* ---------------- 评估闭环 ---------------- */
.pt-loop { display: flex; flex-direction: column; gap: 0; }
.pt-loop-node { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px dashed var(--line); }
.pt-loop-node:last-child { border-bottom: 0; }
.pt-loop-idx {
  flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: #fff; background: var(--tx3);
}
.pt-loop-ok .pt-loop-idx { background: var(--jade); }
.pt-loop-mid .pt-loop-idx { background: var(--accent); }
.pt-loop-low .pt-loop-idx { background: var(--red); }
.pt-loop-plan .pt-loop-idx { background: var(--blue); }
.pt-loop-main { flex: 1; min-width: 0; }
.pt-loop-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pt-loop-h b { font-size: 15px; color: var(--tx); font-family: var(--serif); }
.pt-loop-st {
  font-size: 11.5px; padding: 1px 9px; border-radius: 999px;
  background: rgba(var(--txRGB), .08); color: var(--tx2); border: 1px solid var(--line);
}
.pt-loop-ok .pt-loop-st { background: rgba(var(--jadeRGB), .16); color: var(--jadeTx); border-color: transparent; }
.pt-loop-mid .pt-loop-st { background: rgba(var(--accentRGB), .18); color: var(--tx); border-color: transparent; }
.pt-loop-low .pt-loop-st { background: rgba(var(--redRGB), .14); color: var(--redTx); border-color: transparent; }
.pt-loop-plan .pt-loop-st { background: rgba(var(--blueRGB), .16); color: var(--blueTx); border-color: transparent; }
.pt-loop-m { font-size: 11.5px; color: var(--tx3); }
.pt-loop-why { font-size: 13px; color: var(--tx2); line-height: 1.8; margin-top: 7px; }
.pt-loop-note { font-size: 12.5px; color: var(--tx3); margin-top: 5px; }
.pt-loop-deliver { font-size: 12px; color: var(--tx3); margin-top: 7px; }
.pt-loop-deliver .pt-chip { font-size: 11px; }

.pt-pbl { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 12px; }
.pt-pbl-card {
  border: 1px solid var(--line); border-radius: var(--ptR); padding: 14px;
  background: rgba(var(--txRGB), .03); display: flex; flex-direction: column; gap: 7px;
}
.pt-pbl-ico { font-size: 22px; }
.pt-pbl-t { font-size: 14.5px; font-weight: 700; color: var(--tx); font-family: var(--serif); }
.pt-pbl-from { display: flex; flex-wrap: wrap; }
.pt-pbl-task { font-size: 12.5px; color: var(--tx2); line-height: 1.8; flex: 1; }
.pt-pbl-cross { font-size: 11.5px; color: var(--tx3); border-top: 1px dashed var(--line); padding-top: 7px; }

/* ---------------- 数据看板 ---------------- */
.pt-scope { border: 1px solid var(--line); border-radius: var(--ptR); padding: 14px 16px; background: rgba(var(--txRGB), .03); margin-bottom: 14px; }
.pt-scope-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pt-scope-h b { font-size: 15px; color: var(--tx); font-family: var(--serif); }
.pt-src { font-size: 11px; padding: 1px 8px; border-radius: 999px; }
.pt-src.ok { background: rgba(var(--jadeRGB), .16); color: var(--jadeTx); }
.pt-src.plan { background: rgba(var(--blueRGB), .16); color: var(--blueTx); }
.pt-scope-row { display: flex; gap: 12px; font-size: 13px; color: var(--tx2); padding: 3px 0; line-height: 1.75; }
.pt-scope-row .pt-kv-k { flex: 0 0 74px; }

.pt-unavail { padding: 22px 20px; }
.pt-unavail-h { font-size: 15px; font-weight: 700; color: var(--tx); margin-bottom: 8px; font-family: var(--serif); }
.pt-unavail-plan { margin: 12px 0 4px; }

.pt-board td, .pt-board th { font-size: 12.5px; }
.pt-board-weak { color: var(--tx3); font-size: 12px; }

/* ---------------- 窄屏 ---------------- */
@media (max-width: 900px) {
  .pt-radar-grid { grid-template-columns: 1fr; }
  .pt-bar { gap: 14px; }
  .pt-idx-side { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
}
@media (max-width: 640px) {
  .pt-idx-num { font-size: 32px; }
  .pt-idx-mid { min-width: 0; width: 100%; }
  .pt-bar-n { flex: 0 0 84px; font-size: 12px; }
  .pt-heat-row { flex-direction: column; gap: 6px; }
  .pt-heat-name { flex: none; flex-direction: row; align-items: baseline; gap: 8px; }
  .pt-heat-name span { margin-top: 0; }
  /* 窄屏 25 格里每个字都会挤成两行，改成横向滚动而不是压扁 —— 与周期表同一处理 */
  .pt-heat-cells { grid-template-columns: repeat(5, minmax(62px, 1fr)); overflow-x: auto; padding-bottom: 4px; }
  .pt-dim-warn { padding-left: 0; }
  .pt-weak { flex-wrap: wrap; }
  .pt-weak-a { flex: 1 0 100%; text-align: left; }
  .pt-legend { gap: 9px; }
  .pt-lg em { display: none; }
}