/* 爷爷奶奶陪着您 · PC 官网健康自测页样式（健康标准批Plan5 Task 1，规格 §四 B4）
 * 依赖 css/style.css（:root 变量+btn/page/nav/footer/sec-intro 通用面）；本文件只增自测专属面。
 * 桌面基准宽 1440+1280~1439 clamp 弹性=index.html 惯例（P5-D5）；适老口径=题干 20px/选项行 56px 点高/
 * 高对比（ink on white card）/焦点可见（accent-color+outline）。
 * 视图显隐语义：.hl-sec[hidden]=display none（HTML hidden 属性驱动，JS showOnly 切换）。 */

/* ---------- 顶部常驻免责横幅（B4：问题list 原文，页头常驻） ---------- */
.hl-banner {
  padding: 14px var(--pad-x);
  background: var(--tag);
  border-bottom: 1px solid var(--line);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 700;
  color: var(--brand-deep);
  text-align: center;
}
.hl-banner--inline {
  margin: 8px 0 0;
  padding: 14px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

/* ---------- 主区与视图 ---------- */
.hl-main {
  padding: 48px var(--pad-x) 72px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-height: 60vh;
}
.hl-sec { display: flex; flex-direction: column; gap: 24px; }
.hl-sec[hidden] { display: none; }
.hl-note { font-size: 16px; line-height: 1.6; color: var(--muted); }

/* ---------- 标准/题集卡片栅格 ---------- */
.hl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hl-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.hl-card:hover { border-color: var(--brand); }
.hl-card:focus-visible { outline: 2px solid var(--brand); }
.hl-card-code { font-size: 14px; line-height: 1.5; font-weight: 700; color: var(--brand-deep); }
.hl-card-name { font-size: 22px; line-height: 1.4; font-weight: 700; color: var(--ink); }
.hl-card-purpose {
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hl-card-audience { font-size: 15px; line-height: 1.6; color: var(--brand-deep); }
.hl-card-meta { margin-top: auto; font-size: 15px; color: var(--muted); }

/* ---------- 免责确认闸（B4：全文+勾选「我已理解」+未勾选禁用「开始答题」） ---------- */
.hl-consent-card {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 48px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hl-consent-title { font-size: 28px; line-height: 1.3; font-weight: 700; color: var(--ink); }
.hl-consent-text { display: flex; flex-direction: column; gap: 12px; font-size: 18px; line-height: 1.8; color: var(--ink); }
.hl-consent-lead { font-weight: 700; font-size: 20px; line-height: 1.7; color: var(--brand-deep); }
.hl-consent-std { font-size: 17px; line-height: 1.8; color: var(--muted); }
.hl-consent-check {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  width: fit-content;
}
.hl-consent-check input { width: 24px; height: 24px; accent-color: var(--brand); cursor: pointer; }
.hl-consent-actions { display: flex; gap: 16px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:hover { filter: none; }

/* ---------- 答题区（六题型+进度+短路提示+错误态） ---------- */
.hl-quiz-head { display: flex; flex-direction: column; gap: 12px; max-width: 980px; }
.hl-quiz-title { font-size: 28px; line-height: 1.3; font-weight: 700; color: var(--ink); }
.hl-progress { height: 12px; border-radius: 6px; background: var(--cool); overflow: hidden; }
.hl-progress-bar { height: 100%; width: 0; border-radius: 6px; background: var(--brand); transition: width 0.2s; }
.hl-progress-text { font-size: 16px; color: var(--muted); }
.hl-quiz-body { display: flex; flex-direction: column; gap: 20px; max-width: 980px; }
.hl-section-title {
  font-size: 22px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--brand-deep);
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.hl-section-title[hidden] { display: none; }
.hl-q {
  padding: 24px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hl-q[hidden] { display: none; }
.hl-q--missing { border-color: #C0392B; box-shadow: 0 0 0 1px #C0392B; }
.hl-q-stem { font-size: 20px; line-height: 1.6; font-weight: 700; color: var(--ink); }
.hl-q-no { color: var(--brand-deep); margin-right: 8px; }
.hl-q-req { color: #C0392B; margin-left: 6px; }
.hl-q-desc { font-size: 16px; line-height: 1.7; color: var(--muted); }
.hl-opts { display: flex; flex-direction: column; gap: 10px; }
.hl-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  cursor: pointer;
  background: #FFFFFF;
}
.hl-opt:hover { border-color: var(--brand); }
.hl-opt input { width: 20px; height: 20px; accent-color: var(--brand); flex: none; }
.hl-opt--on { border-color: var(--brand); background: var(--tag); }
.hl-measure { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hl-input {
  width: 200px;
  height: 56px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 20px;
  color: var(--ink);
  background: #FFFFFF;
  font-family: inherit;
}
.hl-input:focus { outline: 2px solid var(--brand); border-color: var(--brand); }
.hl-unit { font-size: 18px; color: var(--muted); }
.hl-range { font-size: 15px; color: var(--muted); }
.hl-timer { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hl-timer-clock {
  font-size: 28px;
  font-weight: 700;
  color: var(--brand-deep);
  font-variant-numeric: tabular-nums;
  min-width: 110px;
}
.hl-checklist { display: flex; flex-direction: column; gap: 8px; }
.hl-check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  cursor: pointer;
  background: #FFFFFF;
}
.hl-check-item:hover { border-color: var(--brand); }
.hl-check-item input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--brand); flex: none; }
.hl-check-item--on { border-color: var(--brand); background: var(--tag); }
.hl-derived {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--cool);
  font-size: 18px;
  color: var(--ink);
}
.hl-derived-value { font-size: 22px; font-weight: 700; color: var(--brand-deep); }
.hl-derived-pending { font-size: 17px; font-weight: 400; color: var(--muted); }
.hl-terminated {
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--tag);
  font-size: 18px;
  line-height: 1.6;
  color: var(--brand-deep);
  max-width: 980px;
}
.hl-terminated[hidden] { display: none; }
.hl-error {
  padding: 16px 20px;
  border-radius: 12px;
  background: #FDEDEC;
  border: 1px solid #E6B0AA;
  font-size: 18px;
  line-height: 1.6;
  color: #943126;
  max-width: 980px;
}
.hl-error[hidden] { display: none; }
.hl-quiz-actions { display: flex; gap: 16px; }
.hl-foot { font-size: 16px; }
.hl-back-link { color: var(--brand-deep); font-size: 18px; }
.hl-back-link:hover { text-decoration: underline; }

/* ---------- 结果区（判级+band 文案+建议+再次免责无需确认） ---------- */
.hl-result-card {
  max-width: 980px;
  margin: 0 auto;
  padding: 40px 48px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hl-result-title { font-size: 26px; line-height: 1.3; font-weight: 700; color: var(--ink); }
.hl-result-score { display: flex; align-items: baseline; gap: 12px; }
.hl-result-score-num { font-size: 64px; font-weight: 700; color: var(--brand-deep); line-height: 1; }
.hl-result-score-max { font-size: 20px; color: var(--muted); }
.hl-result-level {
  align-self: flex-start;
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--tag);
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-deep);
}
.hl-result-level[hidden] { display: none; }
.hl-result-body { display: flex; flex-direction: column; gap: 14px; }
.hl-result-block { display: flex; flex-direction: column; gap: 6px; }
.hl-result-block-title { font-size: 17px; font-weight: 700; color: var(--muted); }
.hl-result-block-text { font-size: 19px; line-height: 1.8; color: var(--ink); }
.hl-result-terminated {
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--tag);
  font-size: 17px;
  line-height: 1.6;
  color: var(--brand-deep);
}
.hl-sections { width: 100%; border-collapse: collapse; font-size: 17px; }
.hl-sections th, .hl-sections td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  color: var(--ink);
}
.hl-sections th { color: var(--muted); font-weight: 700; }
.hl-result-disclaimer { font-size: 16px; line-height: 1.7; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
.hl-result-actions { display: flex; gap: 16px; margin-top: 8px; }