/* ==========================================================================
   FinLearn 字体层级修正层（Type Scale Final）
   --------------------------------------------------------------------------
   逐元素复测后发现层级是反的：

     元素                          实测      应为      问题
     ----------------------------  --------  --------  ------------------------
     首页首屏标题 .home-hero__title  20px      40px 级   被"页标题 20px"规则压扁
     页内标题 .page-head h1          24px      20px      偏大，与首屏竞争
     首屏导语 .home-hero__lead       14px w300 15px w400 中文字重 300 发虚
     卡片正文 .card-body             13px      14px      比全站正文小一号
     页脚                            12px      12px      OK

   根因：refine.css 第 1 节为「页标题 = Tabler h1 = 20px」写的
        .page-body h1 { font-size: 20px !important } 把首屏 display 级标题
        一并命中了。首屏标题语义上是 h1，视觉上属于 display 档，需要分开定档。

   本层建立四级层级并锁定，保证任何后续改动不会再打乱：
     display 30—42px  >  区块 24px  >  卡片 16px  >  正文 14px  >  次级 13px  >  标签 12px
   ========================================================================== */

:root {
  /* display 档：仅首屏使用，随视口微调但不低于 30px */
  --fz-display: clamp(30px, 3.2vw, 42px);
  --lh-display: 1.14;

  /* 明确的四级层级（供后续引用） */
  --fz-section: 24px;   /* 区块标题 */
  --fz-card: 16px;      /* 卡片标题 */
  --fz-body: 14px;      /* 正文 */
  --fz-sub: 13px;       /* 次级说明 */
}

/* ==========================================================================
   1. 首屏标题：恢复 display 档
   ========================================================================== */
.home-hero__title,
.page-body .home-hero__title,
.home-hero .home-hero__title,
h1.home-hero__title {
  font-size: var(--fz-display) !important;
  font-weight: 600 !important;
  line-height: var(--lh-display) !important;
  letter-spacing: -0.01em !important;
  color: #ffffff !important;
  margin-bottom: 16px !important;
  text-wrap: balance;
}

/* 第二行高亮 */
.home-hero__title em,
.page-body .home-hero__title em {
  display: block;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  color: #9cc4ff !important;
  font-style: normal;
}

/* 首屏导语：中文避免 300 字重（发虚），改 400 + 15px */
.home-hero__lead,
.page-body .home-hero__lead {
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 26px !important;
  color: rgba(234, 241, 251, 0.86) !important;
  max-width: 58ch;
}

/* 首屏小标 */
.home-hero__eyebrow,
.page-body .home-hero__eyebrow {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
}

/* 首屏按钮：40px 高、14px 字（与全站按钮一致） */
.home-hero__actions .btn,
.page-body .home-hero__actions .btn,
.btn--hero-solid,
.btn--hero-ghost {
  min-height: 44px !important;
  padding: 11px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

/* 首屏勾选点 */
.home-hero__points li { font-size: 13px !important; line-height: 20px !important; }

/* ==========================================================================
   2. 页内标题：统一 20px（不与首屏竞争）
   ========================================================================== */
.page-body .page-head h1,
.page-body .page-head > .shell > h1,
.page-body section.page-head h1,
.page-body .page-head__title {
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 28px !important;
  letter-spacing: normal !important;
}

/* 除首屏外的正文 h1 也统一到 20px */
.page-body h1:not(.home-hero__title) {
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 28px !important;
}

.page-body .page-head { padding-block: 16px 12px; }
.page-body .page-head__lead { font-size: 14px !important; line-height: 22px !important; }
.page-body .page-head__meta { font-size: 12px !important; line-height: 18px !important; }
.page-body .page-head__eyebrow { font-size: 12px !important; letter-spacing: 0.06em !important; }

/* ==========================================================================
   3. 卡片正文：13px → 14px
   ========================================================================== */
.page-body .card-body,
.page-body .card__body,
.page-body .tool__desc,
.page-body .who__list li,
.page-body .news__text,
.page-body .fl-bar__label,
.page-body .data-list,
.page-body .card p {
  font-size: 14px !important;
  line-height: 22px !important;
}

/* 卡片内的次级说明保留 13px，形成层级 */
.page-body .card-body .text-secondary,
.page-body .fl-stat__hint,
.page-body .stat__hint,
.page-body .board-card__hint,
.page-body .metric-mini__note,
.page-body .viz__subtitle,
.page-body .viz__source,
.page-body .section__note,
.page-body .card__meta {
  font-size: 13px !important;
  line-height: 20px !important;
}

/* ==========================================================================
   4. 区块标题与卡片标题锁定
   ========================================================================== */
.page-body .section__head-text h2,
.page-body .section__head h2 {
  font-size: var(--fz-section) !important;
  font-weight: 600 !important;
  line-height: 30px !important;
}

.page-body .card-title,
.page-body .viz__title,
.page-body .tool__title,
.page-body .who__name,
.page-body .tri__title {
  font-size: var(--fz-card) !important;
  font-weight: 600 !important;
  line-height: 24px !important;
}

/* ==========================================================================
   5. 页脚与元信息
   ========================================================================== */
.page-body .footer,
.page-body .site-footer,
.footer {
  font-size: 12px !important;
  line-height: 20px !important;
}

.footer .small,
.footer a,
.footer .link-secondary { font-size: 12px !important; }

/* ==========================================================================
   6. 表格与按钮的字号锁定（防止被后续层改动）
   ========================================================================== */
.page-body table > tbody > tr > td { font-size: 14px !important; }
.page-body table > thead > tr > th { font-size: 12px !important; }
.page-body .btn { font-size: 14px !important; }
.page-body .btn-sm, .page-body .btn--sm { font-size: 13px !important; }

/* ==========================================================================
   7. 中文观感：避免细字重与负字距
   ========================================================================== */
.page-body [style*="font-weight: 300"],
.page-body .fw-light { font-weight: 400 !important; }

/* 中文标题不加负字距（西文才需要） */
.page-body h1, .page-body h2, .page-body h3,
.page-body .card-title, .page-body .section__head-text h2 {
  letter-spacing: normal;
  font-kerning: normal;
}

/* ==========================================================================
   8. 深色模式
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  .home-hero__title { color: #ffffff !important; }
  .home-hero__title em { color: #9cc4ff !important; }
}

/* ==========================================================================
   9. 布局让位修正：侧栏是 fixed，靠变量让位而不是写死 margin
   --------------------------------------------------------------------------
   实测问题：侧栏 position:fixed 宽 224px，而 .page-wrapper 的 margin-left
        被写成 232px（shell-light）与 224px（refine），且 Tabler 自身已按
        margin-inline-start: var(--tblr-sidebar-width) 让位 —— 
        双重让位把内容推到 x=276，首页首屏标题因此被裁切。

   Tabler 的正确做法：只改 --tblr-sidebar-width 变量，让位由其自身规则完成。
   ========================================================================== */
:root {
  --tblr-sidebar-width: 224px;
}

@media (min-width: 992px) {
  .navbar-vertical.navbar-expand-lg { width: 224px; }

  /* 交给 Tabler 的 margin-inline-start 变量，不再手动设 margin-left */
  .page-wrapper {
    margin-left: var(--tblr-sidebar-width);
    margin-inline-start: var(--tblr-sidebar-width);
  }
}

/* 窄屏：侧栏收起，内容占满 */
@media (max-width: 991.98px) {
  .page-wrapper { margin-left: 0 !important; margin-inline-start: 0 !important; }
}

/* 内容区容器不再自带大内边距，避免与 Tabler 的 page-padding 叠加 */
.page-body > .container-xl {
  padding-inline: 20px;
}

/* ==========================================================================
   10. 首屏安全区：确保标题不被侧栏遮挡
   ========================================================================== */
.home-hero__inner,
.home-hero > .shell {
  padding-inline: 20px;
  box-sizing: border-box;
}

/* 首屏最低留白，保证长标题不贴边 */
.home-hero { padding-block: 48px 40px; }

@media (max-width: 1200px) {
  .home-hero { padding-block: 40px 32px; }
}

/* ==========================================================================
   11. 首屏文字对比度提升
   --------------------------------------------------------------------------
   实测首屏在小标、勾选点、导语上使用了 rgba(...,0.68—0.72) 的浅色，
   在深蓝底上虽然达标（约 9:1），但配合细字重显得发虚、没有分量。
   这里统一提高不透明度到 0.9+，并加粗小标。
   ========================================================================== */
.home-hero__eyebrow,
.page-body .home-hero__eyebrow {
  color: #dbe7f8 !important;
  font-weight: 600 !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.home-hero__lead,
.page-body .home-hero__lead {
  color: rgba(240, 245, 252, 0.94) !important;
}

.home-hero__points li,
.page-body .home-hero__points li {
  color: rgba(240, 245, 252, 0.9) !important;
  font-weight: 500 !important;
}

.home-hero__points li::before { border-color: rgba(156, 196, 255, 1) !important; }

/* 首屏按钮：幽灵按钮描边加强 */
.btn--hero-ghost {
  border-color: rgba(255, 255, 255, 0.46) !important;
  color: #f2f7fd !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.btn--hero-ghost:hover {
  border-color: #ffffff !important;
  background: rgba(255, 255, 255, 0.18) !important;
}

/* 首屏小圆点 */
.home-hero__dot {
  background: #7cb8f0 !important;
  box-shadow: 0 0 0 3px rgba(124, 184, 240, 0.3) !important;
}

/* 数据带内的说明文字 */
.stat-band__lead p,
.stat-band__item dt { color: rgba(240, 245, 252, 0.82) !important; }