/* ============================================================
   银发客群图谱 v3 — S09 重构（点选驱动）
   对齐 DESIGN_LANGUAGE.md v1.0 单一真相源；仅保留本页特有样式。
   铁律：说明性文字不上前端（图例/轴名/数据标签/口径注脚除外）。
   ============================================================ */
.pa-head { background: var(--brand-gradient); color: #fff; padding: var(--sp-5) var(--sp-6) var(--sp-4); }
.pa-head h1 { font-size: var(--fs-xl); font-weight: 800; letter-spacing: 1px; margin: 0; }
.pa-head .sub { font-size: var(--fs-sm); opacity: .92; margin-top: var(--sp-2); }

.pa-section { padding: 0 var(--sp-6); margin-top: var(--sp-6); }
.pa-section-head { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.pa-section-head h2 { font-size: var(--fs-lg); font-weight: 700; color: var(--brand-dark); margin: 0; }
.pa-section-head .kicker { font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; }

/* 统计条 */
.pa-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-4); padding: 0 var(--sp-6); margin-top: var(--sp-5); }
.pa-stat { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md);
  padding: var(--sp-4); text-align: center; position: relative; overflow: hidden; }
.pa-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brand-primary); }
.pa-stat .v { font-size: 26px; font-weight: 800; color: var(--brand-primary); line-height: 1.1; font-variant-numeric: tabular-nums; }
.pa-stat .l { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: var(--sp-1); }

/* 辐射图 */
.pa-atlas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
.pa-figure { background: linear-gradient(160deg, #f7faf9, #eef6f2); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: var(--sp-4); display: flex; flex-direction: column; max-width: 760px; margin: 0 auto; width: 100%; }
.pa-figure svg { width: 100%; height: auto; display: block; }
.pa-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--border-color); }
.pa-legend span { font-size: var(--fs-xs); color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.pa-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* 覆盖矩阵：单元格 = 互证源数（0 置灰，1~≥5 五档加深，跨格可比） */
.pa-matrix-wrap { border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow-x: auto; }
table.pa-matrix { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
table.pa-matrix th, table.pa-matrix td { padding: 10px 10px; text-align: center; border-bottom: 1px solid var(--border-light); }
table.pa-matrix thead th { background: #f7faf9; color: var(--text-secondary); font-weight: 600; white-space: nowrap; }
table.pa-matrix tbody td:first-child, table.pa-matrix thead th:first-child { text-align: left; }
table.pa-matrix tbody tr.hl { background: var(--bg-highlight, #f0fdf4); }
table.pa-matrix tbody tr:hover { background: #fafcff; }
.pa-rowhead { display: flex; flex-direction: column; gap: 2px; }
.pa-rowhead .nm { font-weight: 700; color: var(--text-primary); cursor: help; }
.pa-rowhead .denom { font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pa-cell { display: inline-block; min-width: 42px; padding: 4px 8px; border-radius: 6px;
  font-variant-numeric: tabular-nums; font-weight: 600; cursor: pointer; transition: transform .1s, box-shadow .1s; }
.pa-cell:hover { transform: scale(1.08); box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.pa-cell.sel { box-shadow: 0 0 0 2px #059669, 0 0 0 4px #d1fae5; }
.c0 { background: #f3f4f6; color: #9ca3af; }
.c1 { background: #d1fae5; color: #047857; } .c2 { background: #a7f3d0; color: #065f46; }
.c3 { background: #6ee7b7; color: #065f46; } .c4 { background: #34d399; color: #064e3b; }
.c5 { background: #059669; color: #fff; }
.pa-mnote { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-2); }

/* 详情面板：左维度清单 + 右对照/趋势 */
.pa-detail { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.pa-detail-side { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  padding: var(--sp-4); position: sticky; top: var(--sp-4); }
.pa-detail-title { display: flex; align-items: center; gap: var(--sp-2); padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-light); margin-bottom: var(--sp-3); }
.pa-detail-title .pn { font-size: var(--fs-md); color: var(--text-primary); }
.pa-axistag { font-size: var(--fs-xs); padding: 1px 8px; border-radius: 999px; color: #fff; font-weight: 600; white-space: nowrap; }
.pa-dimlist { display: flex; flex-direction: column; gap: 2px; max-height: 560px; overflow: auto; }
.pa-dimrow { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-xs); }
.pa-dimrow:hover { background: #f0fdf4; }
.pa-dimrow.active { background: #ecfdf5; box-shadow: inset 3px 0 0 var(--brand-primary); }
.pa-dimrow .lab { color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.pa-dimrow .val { color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pa-dimrow .nsrc { font-size: 10px; padding: 1px 7px; border-radius: 999px; background: #f3f4f6; color: #6b7280; white-space: nowrap; }
.pa-empty2 { text-align: center; color: var(--text-muted); padding: 24px 0; font-size: var(--fs-xs); }

.pa-detail-main { min-width: 0; }
.pa-detail-head { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.pa-detail-head .dmname { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); }
.pa-detail-head .dmcov { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* 多源对照：同一维度下各来源数值并排，暴露互证/分歧 */
.pa-cmp { display: flex; flex-direction: column; gap: var(--sp-5); }
.pa-cmpunit { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  padding: var(--sp-4); }
.pa-cmpuhead { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-3);
  padding-bottom: 8px; border-bottom: 1px solid var(--border-light); }
.pa-cmpuhead .u { font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); }
.pa-cmpuhead .n { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* 刻度尺：与行内 track 同栅格，保证圆点与刻度对齐 */
.pa-cmpscale { display: grid; grid-template-columns: var(--cmp-cols); align-items: center;
  gap: 8px; margin-bottom: 6px; }
.pa-cmpscale .ruler { position: relative; height: 14px; border-bottom: 1px solid var(--border-light); grid-column: 5; }
.pa-cmpscale .tick { position: absolute; bottom: 0; font-size: 10px; color: var(--text-muted);
  transform: translateX(-50%); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pa-cmpitem { border-bottom: 1px dashed #f1f5f9; }
.pa-cmpitem:last-child { border-bottom: none; }
.pa-cmprow { display: grid; grid-template-columns: var(--cmp-cols); align-items: center; gap: 8px;
  padding: 5px 0; font-size: var(--fs-xs); }
.pa-cmprow:hover { background: #fafcff; }
.pa-cmprow .tier { font-size: 10px; padding: 1px 6px; border-radius: 999px; text-align: center;
  background: #f3f4f6; color: #6b7280; white-space: nowrap; }
.pa-cmprow .tier.green { background: #ecfdf5; color: #047857; }
.pa-cmprow .tier.orange { background: #fff7ed; color: #c2410c; }
.pa-cmprow .org { color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-cmprow .per { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pa-cmprow .qual { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-cmprow .track { position: relative; height: 12px; }
.pa-cmprow .track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--border-light); }
.pa-cmprow .dot { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%;
  transform: translate(-50%, -50%); box-shadow: 0 0 0 1.5px #fff; }
.pa-cmprow .val { text-align: right; font-weight: 700; color: var(--text-primary);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 原文展开按钮 + 引用框 */
.pa-qbtn { font-size: 10px; color: #2563eb; cursor: pointer; user-select: none; white-space: nowrap; text-align: center; }
.pa-qbtn:hover { text-decoration: underline; }
/* 对照列表分页（每组默认 10 条，超出换页） */
.pg-hide { display: none; }
.pa-pager { display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding-top: 10px; margin-top: 4px; border-top: 1px dashed var(--border-light); font-size: var(--fs-xs); }
.pa-pgbtn { cursor: pointer; padding: 3px 14px; border: 1px solid var(--border-color); border-radius: 999px;
  background: #fff; color: #374151; user-select: none; }
.pa-pgbtn:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.pa-pgbtn[data-off="1"] { opacity: .35; cursor: default; pointer-events: none; }
.pa-pginfo { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.pa-quotebox { display: none; font-size: var(--fs-xs); color: #334155; line-height: 1.6;
  border-left: 3px solid var(--brand-primary); background: #f8fafc; padding: 6px 10px; margin: 0 0 6px 52px; border-radius: 0 6px 6px 0; }
.pa-quotebox.open { display: block; }
.pa-qlink { display: inline-block; margin-left: 10px; font-size: 11px; color: #2563eb; white-space: nowrap; }
.pa-qlink:hover { text-decoration: underline; }
/* 定性条目行（无数值型维度，诚实降级） */
.pa-cmprow.q { grid-template-columns: var(--cmp-cols); }
.pa-cmprow.q .qtext { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
/* 注脚区（口径定义类，允许上图；操作说明类禁止） */
.pa-footnote { font-size: 11px; color: var(--text-muted); line-height: 1.6; margin-top: 16px;
  padding-top: 8px; border-top: 1px dashed var(--border-color); }

/* 跨年趋势卡（S13）：每组独立缩放，禁跨量纲同图 */
.pa-trend { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-5); }
.pa-tcard { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); }
.pa-tchead { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.pa-tchead .s { font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.pa-tchead .u { font-size: var(--fs-xs); font-weight: 700; color: var(--text-primary); }
.pa-tchead .q { font-size: 10px; color: var(--text-muted); }
.pa-tcard svg { width: 100%; height: auto; display: block; }

.pa-empty { text-align: center; color: var(--text-muted); padding: 40px 0; }

/* 年份徽章（数据标签）；.old = 2020 年及以前的旧数据，警示灰标 */
.pa-year { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 11px; line-height: 16px; background: #eff6ff; color: #2563eb; vertical-align: 1px; }
.pa-year.old { background: #fef3c7; color: #92400e; }

@media (max-width: 980px) {
  .pa-detail { grid-template-columns: 1fr; }
  .pa-detail-side { position: static; }
}