/* ==========================================================================
   AUTRA 表面处理性能全景与视觉选型图表样式
   ========================================================================== */

.pm-section {
  margin: 3.5rem 0;
  padding: 2.5rem 2rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
}

.pm-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 2.5rem auto;
}

.pm-header .pm-eyebrow {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  color: #0d9488;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.pm-header h2 {
  font-size: 1.85rem;
  color: #0f172a;
  margin: 0 0 0.75rem 0;
  font-weight: 700;
}

.pm-header p {
  font-size: 1.02rem;
  color: #475569;
  line-height: 1.6;
  margin: 0;
}

.pm-family-heading {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  margin: 2.5rem 0 1.35rem;
}

.pm-family-number {
  flex: 0 0 auto;
  padding: 0.42rem 0.72rem;
  border-radius: 999px;
  background: #dff4f0;
  color: #0f766e;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.pm-family-heading h3 {
  margin: 0 0 0.25rem;
  color: #0f172a;
  font-size: 1.42rem;
}

.pm-family-heading p {
  margin: 0;
  color: #64748b;
  line-height: 1.6;
}

/* 快速工况直选按钮栏 */
.pm-scenario-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 2rem;
}

.pm-scenario-btn {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
  padding: 0.55rem 1.1rem;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  justify-content: center;
  min-height: 3.15rem;
  text-align: center;
}

.pm-scenario-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
  border-color: #94a3b8;
}

.pm-scenario-btn.active {
  background: #0f766e;
  border-color: #0f766e;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.25);
}

.pm-scenario-btn:last-child { grid-column: 1 / -1; }

/* 主展示网格：左侧雷达图 + 右侧指标卡片 */
.pm-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 1.25rem;
  align-items: stretch;
  margin-bottom: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid #f1f5f9;
}

/* 雷达图容器 */
.pm-radar-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 1.5rem;
  text-align: center;
  position: relative;
  min-width: 0;
}

.pm-radar-card h3 {
  font-size: 1.1rem;
  color: #1e293b;
  margin: 0 0 0.5rem 0;
}

.pm-radar-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem 0.75rem;
  margin-top: 1rem;
  font-size: 0.82rem;
  text-align: left;
}

.pm-radar-legend span {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #475569;
}

.pm-radar-legend .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

/* 右侧：聚焦镀层性能速览卡片 */
.pm-info-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 1.75rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
  min-width: 0;
}

.pm-info-card .pm-badge {
  display: inline-block;
  background: #ccfbf1;
  color: #0f766e;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 4px;
  margin-bottom: 0.75rem;
}

.pm-info-card h4 {
  font-size: 1.4rem;
  color: #0f172a;
  margin: 0 0 0.5rem 0;
}

.pm-info-card .pm-desc {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.pm-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.pm-metric-item {
  background: #f8fafc;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  border-left: 3px solid #0f766e;
}

.pm-metric-item dt {
  font-size: 0.8rem;
  color: #64748b;
  margin-bottom: 0.2rem;
}

.pm-metric-item dd {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.pm-info-card .pm-target {
  font-size: 0.9rem;
  color: #334155;
  background: #f1f5f9;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1.25rem;
}

.pm-info-card .pm-target strong {
  color: #0f766e;
}

/* 核心量化区间横向可视化（Range Benchmark Bars） */
.pm-ranges-section {
  margin-top: 1rem;
}

.pm-ranges-section h3 {
  font-size: 1.25rem;
  color: #0f172a;
  margin: 0 0 0.5rem 0;
  text-align: center;
}

.pm-ranges-section > p {
  text-align: center;
  color: #64748b;
  font-size: 0.92rem;
  margin: 0 0 2rem 0;
}

.pm-range-group {
  margin-bottom: 2rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
}

.pm-range-title {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 0.95rem;
  color: #1e293b;
  margin-bottom: 1rem;
}

.pm-range-title span.unit {
  font-weight: normal;
  color: #64748b;
  font-size: 0.85rem;
}

.pm-bar-track {
  position: relative;
  height: 28px;
  background: #e2e8f0;
  border-radius: 14px;
  margin-bottom: 0.6rem;
  overflow: hidden;
}

.pm-bar-pill {
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: all 0.3s ease;
  white-space: nowrap;
  padding: 0 8px;
}

.pm-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: #334155;
  margin-bottom: 0.25rem;
}

.pm-bar-label strong {
  color: #0f172a;
}

/* 刻度尺指示 */
.pm-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 0.4rem;
  padding: 0 4px;
}

/* 颜色方案 */
.bg-sic { background: linear-gradient(90deg, #2563eb, #1d4ed8); }
.bg-ptfe { background: linear-gradient(90deg, #059669, #10b981); }
.bg-nipb { background: linear-gradient(90deg, #d97706, #f59e0b); }
.bg-highp { background: linear-gradient(90deg, #7c3aed, #8b5cf6); }
.bg-bn { background: linear-gradient(90deg, #0284c7, #38bdf8); }
.bg-black { background: linear-gradient(90deg, #334155, #1e293b); }

.pm-other-methods {
  margin-top: 3rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e2e8f0;
  scroll-margin-top: 2rem;
}

.pm-method-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.pm-method-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.35rem;
  border: 1px solid #dce7e7;
  border-radius: 10px;
  background: #fbfdfd;
}

.pm-method-goal {
  color: #0f766e;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pm-method-card h4 {
  margin: 0.55rem 0 0.6rem;
  color: #0f172a;
  font-size: 1.1rem;
}

.pm-method-card p {
  margin: 0 0 1rem;
  color: #475569;
  font-size: 0.92rem;
  line-height: 1.65;
}

.pm-method-card a {
  margin-top: auto;
  color: #0f766e;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.pm-method-card a:hover,
.pm-method-card a:focus-visible {
  color: #115e59;
}

.pm-support-processes {
  margin-top: 1.25rem;
  padding: 1.4rem;
  border-radius: 10px;
  background: #f1f5f9;
}

.pm-support-processes h4 {
  margin: 0 0 0.35rem;
  color: #0f172a;
  font-size: 1.04rem;
}

.pm-support-processes > p {
  margin: 0 0 1rem;
  color: #475569;
  font-size: 0.9rem;
}

.pm-support-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.pm-support-links a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.85rem 1rem;
  border: 1px solid #dce7e7;
  border-radius: 7px;
  background: #fff;
  color: #0f766e;
  text-decoration: none;
}

.pm-support-links a:hover,
.pm-support-links a:focus-visible {
  border-color: #0f766e;
}

.pm-support-links span {
  color: #64748b;
  font-size: 0.82rem;
  line-height: 1.5;
}

.pm-other-note {
  margin: 1rem 0 0;
  color: #64748b;
  font-size: 0.85rem;
  line-height: 1.6;
}

/* 响应式适配 */
@media (max-width: 860px) {
  .pm-scenario-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-method-grid,
  .pm-support-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-main-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .pm-section {
    padding: 1.5rem 1rem;
    margin: 2rem 0;
  }
  .pm-header h2 {
    font-size: 1.5rem;
  }
  .pm-metrics-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  .pm-scenario-nav, .pm-radar-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-family-heading { flex-direction: column; gap: 0.65rem; }
  .pm-method-grid,
  .pm-support-links { grid-template-columns: 1fr; }
  .pm-scenario-btn { font-size: 0.84rem; padding: 0.55rem 0.65rem; }
  .pm-radar-card { padding: 1rem 0.5rem; }
  .pm-info-card { padding: 1.2rem; }
  .pm-range-title, .pm-bar-label { flex-wrap: wrap; gap: 0.2rem 0.5rem; }
}
.pm-purpose-card p,.pm-condition-card p{line-height:1.8}
.pm-purpose-table-wrap{width:100%;overflow:visible}
.pm-purpose-table{width:100%;min-width:0;border-collapse:collapse;table-layout:fixed;font-size:14px;line-height:1.7}
.pm-purpose-table caption{text-align:left;margin:0 0 12px;color:#4a5c56;font-size:14px}
.pm-purpose-table th,.pm-purpose-table td{padding:12px 10px;text-align:left;vertical-align:top;white-space:normal;overflow-wrap:anywhere;border-bottom:1px solid #dce3de}
.pm-purpose-table thead th{background:#eaf0e9;position:sticky;top:0}
.pm-purpose-table th:first-child{width:25%}
.pm-purpose-table tr.is-selected{background:#eaf0e9;box-shadow:inset 3px 0 #136654}
.pm-purpose-table a{color:#136654;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pm-reading-note{font-size:14px;color:#4a5c56;margin-top:18px}
.pm-condition-card .pm-metric-item dd{font-size:14px;font-weight:400;line-height:1.8}
.pm-condition-card .pm-metric-item dt{line-height:1.6}
.pm-condition-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px}
.pm-condition-grid article{border-top:2px solid #136654;padding:16px 0}
.pm-condition-grid h4{font-size:18px;margin:0 0 12px}
.pm-condition-grid p{font-size:15px;line-height:1.8}
.pm-condition-card .pm-metrics-grid{margin:22px 0}
@media(max-width:700px){.pm-condition-grid{grid-template-columns:1fr;gap:8px}.pm-purpose-table,.pm-purpose-table tbody,.pm-purpose-table tr,.pm-purpose-table th,.pm-purpose-table td{display:block;width:100%}.pm-purpose-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.pm-purpose-table tr{padding:12px;border:1px solid #dce3de;margin:12px 0;background:#fff}.pm-purpose-table th:first-child{width:100%;padding:4px 0 10px;font-size:16px;border:0}.pm-purpose-table td{padding:8px 0;border:0}.pm-purpose-table td:nth-child(2)::before{content:"用途：";font-weight:600}.pm-purpose-table td:nth-child(3)::before{content:"需先确认：";font-weight:600}.pm-condition-card .pm-metrics-grid{grid-template-columns:1fr}.pm-condition-notes{overflow:visible}}

@media(max-width:700px){.pm-purpose-table caption{display:block;width:100%;min-width:0}.pm-purpose-table th:first-child{max-width:none}}


/* Colored qualitative focus radar and linked product summary. */
#performance-matrix .pm-focus-radar { display:block; width:100%; height:320px; overflow:visible; }
#performance-matrix .pm-radar-grid { fill:none; stroke:#dce4e8; stroke-width:1; stroke-dasharray:3 3; }
#performance-matrix .pm-radar-axis { stroke:#cbd5df; stroke-width:1; }
#performance-matrix .pm-radar-axis-label { fill:#3b4e54; font:600 13px "PingFang SC","Microsoft YaHei",sans-serif; }
#performance-matrix .pm-radar-shape { fill:var(--series-color); fill-opacity:.055; stroke:var(--series-color); stroke-width:2; stroke-linejoin:round; }
#performance-matrix .pm-radar-points { display:none; fill:#fff; stroke:var(--series-color); stroke-width:2.4; }
#performance-matrix .pm-radar-series.is-muted .pm-radar-shape { fill-opacity:0; stroke:#cbd5df; stroke-width:1; stroke-dasharray:3 3; }
#performance-matrix .pm-radar-series.is-focused .pm-radar-shape { fill-opacity:.22; stroke-width:3; }
#performance-matrix .pm-radar-series.is-focused .pm-radar-points { display:block; }
#performance-matrix .pm-radar-legend { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
#performance-matrix .pm-radar-legend button { display:flex; align-items:center; gap:7px; min-height:36px; padding:6px; border:1px solid transparent; background:transparent; color:#475569; font:inherit; font-size:13px; cursor:pointer; text-align:left; border-radius:5px; }
#performance-matrix .pm-radar-legend button:hover,#performance-matrix .pm-radar-legend button.active { background:#fff; border-color:#cad9d2; color:#153e30; }
#performance-matrix .pm-radar-legend i,#performance-matrix .pm-focus-summary i { display:inline-block; flex:0 0 10px; width:10px; height:10px; border-radius:50%; }
#performance-matrix .pm-radar-guide { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px; margin:20px 0 0; color:#50615c; font-size:12px; }
#performance-matrix .pm-reading-note { font-size:13px; line-height:1.8; margin:10px 0 0; }
#performance-matrix .pm-focus-info { display:flex; flex-direction:column; }
#performance-matrix .pm-focus-info h3 { font-size:24px; margin:0 0 12px; line-height:1.5; }
#performance-matrix .pm-focus-info .pm-desc { margin:0 0 20px; line-height:1.8; color:#51645c; }
#performance-matrix .pm-focus-info .pm-metric-item dd { font-size:15px; font-weight:500; line-height:1.8; }
#performance-matrix .pm-focus-info .pm-metrics-grid { margin:0 0 20px; }
#performance-matrix .pm-reference-note { color:#59675f; font-size:13px; line-height:1.8; margin:0 0 22px; }
#performance-matrix .pm-focus-summary { list-style:none; margin:0 0 22px; padding:0; }
#performance-matrix .pm-focus-summary li { display:flex; align-items:flex-start; gap:12px; padding:9px 0; border-bottom:1px solid #edf0ee; }
#performance-matrix .pm-focus-summary i { margin-top:7px; }
#performance-matrix .pm-focus-summary strong { display:inline-block; min-width:90px; font-size:14px; }
#performance-matrix .pm-focus-summary span { font-size:14px; line-height:1.6; color:#586960; }
#performance-matrix .pm-card-actions { display:flex; flex-wrap:wrap; align-items:center; gap:15px 20px; margin-top:auto; font-size:14px; padding-top:8px; }
#performance-matrix .pm-card-actions .au-detail-link { margin-top:0; }
#performance-matrix .pm-test-references { border-block:1px solid #dbe4df; padding:0; margin:10px 0 34px; }
#performance-matrix .pm-test-references summary { padding:18px 0; font-weight:600; cursor:pointer; }
#performance-matrix .pm-test-references p { font-size:14px; line-height:1.8; color:#50635b; }
#performance-matrix .pm-test-references > div { display:flex; flex-wrap:wrap; gap:14px 24px; margin:18px 0 22px; font-size:14px; }
#performance-matrix .pm-scenario-btn:focus-visible,#performance-matrix .pm-radar-legend button:focus-visible { outline:3px solid #538c76; outline-offset:3px; }
@media(max-width:520px) { #performance-matrix .pm-focus-radar { height:auto; aspect-ratio:430/360; } #performance-matrix .pm-radar-axis-label { font-size:14px; } #performance-matrix .pm-radar-legend { grid-template-columns:repeat(2,minmax(0,1fr)); } #performance-matrix .pm-radar-guide { font-size:11px; gap:6px 10px; } #performance-matrix .pm-focus-info h3 { font-size:22px; } #performance-matrix .pm-focus-summary strong { display:block; } }
@media(prefers-reduced-motion:no-preference) { #performance-matrix .pm-radar-shape { transition:fill-opacity .18s ease,stroke .18s ease; } }