/* ==========================================================================
   性格类型自测 · 前缀 pt-
   ========================================================================== */

/* hero 一句话不换行（与其他工具页惯例一致） */
.page-hero .lead {
  white-space: nowrap;
  font-size: clamp(0.7rem, 1.85vw, 1.05rem);
  max-width: none;
}

/* ---- 进度 ---- */
.pt-progress { margin-bottom: 28px; }
.pt-progress-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 0.95rem;
  font-weight: 500;
}
.pt-progress-hint { font-size: 0.82rem; color: var(--muted, #667); font-weight: 400; }
.pt-progress-bar {
  height: 6px;
  background: rgba(0, 0, 0, 0.07);
  border-radius: 3px;
  overflow: hidden;
}
.pt-progress-fill {
  height: 100%;
  width: 0;
  background: var(--life, #2f6f4f);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* ---- 题目列表 ---- */
.pt-list { display: flex; flex-direction: column; gap: 16px; }
.pt-q { padding: 22px 26px; margin-bottom: 0; }
.pt-q.answered { border-left: 3px solid var(--life, #2f6f4f); }
.pt-q-no {
  font-size: 0.78rem;
  color: var(--muted, #667);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.pt-q-text { font-size: 1.05rem; font-weight: 500; margin-bottom: 14px; }
.pt-opts { display: flex; flex-direction: column; gap: 10px; }
.pt-opt {
  text-align: left;
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  background: transparent;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pt-opt:hover { border-color: var(--life, #2f6f4f); }
.pt-opt.on {
  border-color: var(--life, #2f6f4f);
  background: var(--life-soft, rgba(47, 111, 79, 0.08));
  font-weight: 500;
}

/* ---- 结果 ---- */
.pt-result { margin-top: 32px; padding: 36px 34px; }
.pt-result-eyebrow {
  font-size: 0.82rem;
  color: var(--muted, #667);
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.pt-result-code {
  font-family: var(--serif, Georgia, serif);
  font-size: 3rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.1;
}
.pt-result-name { font-size: 1.3rem; margin: 8px 0 4px; }
.pt-tie {
  font-size: 0.9rem;
  color: var(--muted, #667);
  background: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 10px 0 0;
}
.pt-bars { margin: 22px 0 6px; display: flex; flex-direction: column; gap: 4px; }
.pt-bar-row {
  display: grid;
  grid-template-columns: 1fr 120px 1fr;
  gap: 10px;
  align-items: center;
}
.pt-bar-label { font-size: 0.82rem; color: var(--muted, #667); }
.pt-bar-label-r { text-align: right; }
.pt-bar-label.on { color: var(--life, #2f6f4f); font-weight: 600; }
.pt-bar-track {
  height: 8px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  overflow: hidden;
}
.pt-bar-fill {
  height: 100%;
  background: var(--life, #2f6f4f);
  border-radius: 4px;
}
.pt-bar-nums { font-size: 0.78rem; color: var(--muted, #667); text-align: center; }
.pt-desc { margin: 18px 0 0; font-size: 1rem; }
.pt-extra {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.pt-extra-block h3 { font-size: 1rem; margin-bottom: 8px; }
.pt-extra-block ul { padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 0.92rem; }
.pt-extra-block p { font-size: 0.92rem; }
.pt-disclaimer {
  margin-top: 20px;
  font-size: 0.8rem;
  color: var(--muted, #667);
}
.pt-result-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }

/* ---- 提示 ---- */
.pt-hint {
  margin-top: 32px;
  padding: 20px 26px;
  color: var(--muted, #667);
  font-size: 0.92rem;
}

/* ---- 使用建议区微调 ---- */
.pt-usage .card h3 { font-size: 1.02rem; }

@media (max-width: 720px) {
  .pt-bar-row { grid-template-columns: 1fr; gap: 4px; }
  .pt-bar-label-r { text-align: left; }
  .pt-bar-nums { text-align: left; }
  .pt-bar-track { order: 3; }
  .pt-extra { grid-template-columns: 1fr; }
  .pt-result { padding: 26px 20px; }
}

/* 窄屏允许 lead 换行：单行 nowrap 在移动端会横向溢出（2026-09-22 全站视觉打磨） */
@media (max-width: 680px) {
  .page-hero .lead,
  .lead { white-space: normal; }
}