/* Buildcalchub Main Stylesheet — Notion-inspired (DESIGN.md alpha)
   全部组件按 DESIGN.md token 重写：颜色 / 字体 / 间距 / 圆角 / 边框。
   严禁：drop-shadow（用 border 表达层级）、CSS gradient（SVG 插画内嵌渐变除外）。
   保留 JS 锚点：.ad-slot[data-ad-state]、.calculator-tool[data-calc]、.calc-input[data-input]、
   .calc-unit[data-input]、[data-output]、.preset-btn[data-active]、.menu-toggle、
   .site-nav.is-open、body.nav-open、.reading-progress-bar、[data-current-year]。 */

/* ═══════════════════════════════════════════
   通用元素（DESIGN.md typography）
   ═══════════════════════════════════════════ */
ul, ol {
  padding-left: 1.5em;
  line-height: var(--lh-body);
  margin: 0 0 var(--space-md);
}
ul li, ol li { margin-bottom: var(--space-xs); }
strong, b { font-weight: var(--fw-semibold); }

hr {
  border: 0;
  border-top: 1px solid var(--color-hairline);
  margin: var(--space-xxl) 0;
}

blockquote {
  margin: var(--space-xl) 0;
  padding: var(--space-md) var(--space-lg);
  border-left: 3px solid var(--color-hairline-strong);
  background: var(--color-surface-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--color-charcoal);
}
blockquote p:last-child { margin-bottom: 0; }

abbr[title] { text-decoration: underline dotted; cursor: help; }

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--color-surface);
  padding: 2px var(--space-xs);
  border-radius: var(--radius-xs);
  color: var(--color-primary);
  border: 1px solid var(--color-hairline);
}

/* 折叠区渲染优化：减少移动端初始布局和绘制成本 */
@supports (content-visibility: auto) {
  .il-section,
  .faq-section,
  .related-section,
  .references,
  .site-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 720px;
  }
  .hero,
  .page-intro,
  .calculator-tool,
  .article-toc {
    content-visibility: visible;
  }
}

/* ═══════════════════════════════════════════
   组件 #4 · Header 移动端抽屉
   ═══════════════════════════════════════════ */
.site-nav.is-open {
  display: grid;
  position: fixed;
  inset: 64px 0 0 0;
  background: var(--color-canvas);
  grid-template-columns: 1fr;
  align-content: start;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-md) calc(var(--space-xxl) + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: var(--z-overlay);
  border-top: 1px solid var(--color-hairline);
}
.site-nav.is-open a,
.site-nav.is-open summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-canvas);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
}
.site-nav.is-open a:hover,
.site-nav.is-open summary:hover {
  background: var(--color-surface);
  text-decoration: none;
  border-color: var(--color-hairline-strong);
}
.site-nav.is-open .nav-dropdown {
  display: grid;
  gap: var(--space-xs);
}
.site-nav.is-open .nav-dropdown summary {
  justify-content: space-between;
}
.site-nav.is-open .nav-dropdown[open] .nav-submenu {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xs);
  padding-left: var(--space-sm);
}
.site-nav.is-open .nav-submenu a {
  min-height: 40px;
  font-size: var(--fs-caption);
  background: var(--color-surface-soft);
}
.site-nav.is-open a.nav-calculator-cta {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.site-nav.is-open a.nav-calculator-cta:hover {
  background: var(--color-primary-pressed);
  border-color: var(--color-primary-pressed);
  color: var(--color-on-primary);
}
body.nav-open { overflow: hidden; }
@media (min-width: 1024px) {
  .site-nav.is-open {
    position: static;
    display: flex;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
  }
}

/* ═══════════════════════════════════════════
   阅读进度条（首屏后）
   ═══════════════════════════════════════════ */
.reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--color-primary);
  z-index: var(--z-progress);
  transition: transform 0.1s linear;
}

/* ═══════════════════════════════════════════
   组件 #5 · Hero（首页双栏布局 / 快捷工具卡）
   ═══════════════════════════════════════════ */
.hero-grid {
  display: grid;
  gap: var(--space-xxl);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-section-sm);
  }
}
.hero-art {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-md);
}
.hero-art svg {
  max-width: 480px;
  width: 100%;
  height: auto;
}

.hero-quick-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-xxl);
}
.hero-quick-tools a {
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  color: var(--color-ink);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.hero-quick-tools a:hover {
  text-decoration: none;
  border-color: var(--color-hairline-strong);
  background: var(--color-surface-soft);
}
.hero-quick-tools strong {
  color: var(--color-ink);
  font-size: var(--fs-body-md);
  font-weight: var(--fw-semibold);
}
.hero-quick-tools span {
  color: var(--color-slate);
  font-size: var(--fs-caption);
  margin-top: var(--space-xxs);
}

/* ═══════════════════════════════════════════
   组件 #6 · Cards 基类（cluster-card / related-card）
   DESIGN.md card-base + 顶部 cluster 强调线
   ═══════════════════════════════════════════ */
.cluster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
}
.cluster-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-xl);
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-top: 3px solid var(--cluster-color, var(--color-primary));
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-ink);
  transition: border-color var(--transition-fast), background var(--transition-fast);
  min-height: 220px;
}
.cluster-card:hover {
  text-decoration: none;
  border-color: var(--cluster-color, var(--color-primary));
  background: var(--color-surface-soft);
}
.cluster-card .cluster-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-sm);
  background: var(--cluster-tint, var(--color-surface));
  color: var(--cluster-color, var(--color-primary));
  border-radius: var(--radius-lg);
}
.cluster-card .cluster-icon svg {
  width: 36px;
  height: 36px;
  display: block;
}
.cluster-card h3 {
  color: var(--color-ink);
  margin: 0 0 var(--space-xs);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
}
.cluster-card p {
  color: var(--color-slate);
  font-size: var(--fs-body-sm);
  margin: 0 0 var(--space-sm);
  flex: 1;
}
.cluster-card .cluster-cta {
  color: var(--cluster-color, var(--color-primary));
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
}

/* 首页 5 + 6 张卡片整齐分布 */
.home-trade-grid,
.home-project-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-sm);
}
.home-trade-grid .cluster-card,
.home-project-grid .related-card {
  min-height: 0;
  padding: var(--space-md);
}
.home-project-grid .related-card p { margin-bottom: 0; }
.home-popular-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
@media (min-width: 1024px) {
  .home-trade-grid,
  .home-project-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .home-popular-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .home-trade-grid .cluster-card,
  .home-project-grid .related-card,
  .home-popular-grid .related-card { height: 100%; }
}

/* Related cards（guide / pillar / project 关联推荐） */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.related-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-ink);
  transition: border-color var(--transition-fast), background var(--transition-fast);
  min-height: 180px;
}
.related-card:hover {
  text-decoration: none;
  border-color: var(--cluster-color, var(--color-primary));
  background: var(--color-surface-soft);
}
.related-cluster {
  display: inline-block;
  font-size: var(--fs-micro-uppercase);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--color-charcoal);
  margin-bottom: var(--space-xs);
}
.related-card h3 {
  font-size: var(--fs-h5);
  margin: 0 0 var(--space-xs);
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
}
.related-card p {
  color: var(--color-slate);
  font-size: var(--fs-body-sm);
  margin: 0 0 var(--space-sm);
  flex: 1;
}
.related-cta {
  color: var(--cluster-color, var(--color-primary));
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
}

/* Hub index pages reuse related cards as compact directory tiles. */
.hub-page .related-grid {
  align-items: start;
  gap: var(--space-sm);
}
.hub-page .related-card {
  min-height: 0;
  height: auto;
  padding: var(--space-md);
}
.hub-page .related-card h3 {
  font-size: var(--fs-body-md);
  line-height: var(--lh-h5);
}
.hub-page .related-card p {
  flex: 0;
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════
   全站统一页面宽度（不为正文单独限宽）
   ═══════════════════════════════════════════ */
.guide-page,
.calculator-page,
.pillar-page,
.project-page,
.legal-page {
  width: 100%;
  max-width: 100%;
}
.guide-page > *,
.calculator-page > *,
.pillar-page > *,
.project-page > *,
.legal-page > * { min-width: 0; }
.guide-page .calculator-tool,
.calculator-page .calculator-tool,
.pillar-page .calculator-tool,
.project-page .calculator-tool,
.data-table-wrap,
.examples-grid,
.related-grid,
.faq-list,
.page-figure,
.article-toc,
.references-section { max-width: 100%; }
.data-table-wrap,
.examples-section,
.related-section,
.faq-section,
.coverage-tables-section,
.references-section { width: 100%; }

/* ═══════════════════════════════════════════
   组件 #15 · Page Figures（insight / step / workflow / variables）
   ═══════════════════════════════════════════ */
.page-figure {
  margin: var(--space-xl) 0;
  padding: 0;
  text-align: center;
}
.page-figure img {
  width: 100%;
  height: auto;
  max-width: 720px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-hairline);
  background: var(--color-canvas);
}
.page-figure figcaption {
  margin: var(--space-xs) auto 0;
  font-size: var(--fs-caption);
  color: var(--color-slate);
  max-width: 720px;
}
.figure-insight img { border-top: 3px solid var(--cluster-color, var(--color-primary)); }
.figure-step img { border-left: 3px solid var(--cluster-color, var(--color-primary)); }
.figure-workflow img { border: 1px solid var(--color-hairline); }

/* ═══════════════════════════════════════════
   组件 #7 · 计算器工具卡（核心交互）
   ═══════════════════════════════════════════ */
.calculator-tool {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-top: 3px solid var(--cluster-color, var(--color-primary));
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
  min-width: 0;
  overflow: hidden;
}
@media (min-width: 768px) {
  .calculator-tool { padding: var(--space-xl); }
}
.calc-title {
  font-size: var(--fs-h4);
  margin: 0 0 var(--space-xs);
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
}
.calc-instruction {
  color: var(--color-slate);
  font-size: var(--fs-body-sm);
  margin: 0 0 var(--space-lg);
}

/* Preset 按钮（DESIGN.md pill-tab：active 切到 ink-deep 黑底白字） */
.calc-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  align-items: center;
}
.presets-label {
  font-size: var(--fs-micro-uppercase);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--color-slate);
}
.preset-btn {
  background: transparent;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-full);
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-slate);
  cursor: pointer;
  min-height: 32px;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.preset-btn:hover {
  border-color: var(--color-hairline-strong);
  color: var(--color-ink);
}
.preset-btn[data-active="true"] {
  background: var(--color-ink-deep);
  border-color: var(--color-ink-deep);
  color: var(--color-on-dark);
}

/* 输入字段网格 */
.calc-fields {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 600px) {
  .calc-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .calc-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.calc-field { min-width: 0; }
.calc-field label {
  display: block;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
  color: var(--color-ink);
  margin-bottom: var(--space-xs);
}
.calc-field abbr {
  background: var(--color-surface);
  border-radius: var(--radius-full);
  width: 18px;
  height: 18px;
  line-height: 16px;
  display: inline-block;
  text-align: center;
  font-size: var(--fs-micro-uppercase);
  color: var(--color-slate);
  margin-left: var(--space-xxs);
  cursor: help;
  text-decoration: none;
  border: 1px solid var(--color-hairline);
}

/* 输入行（DESIGN.md text-input：44px 高 / 1px hairline-strong / focus 切 2px primary） */
.calc-input-row {
  display: flex;
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-md);
  background: var(--color-canvas);
  transition: border-color var(--transition-fast);
  min-width: 0;
  max-width: 100%;
}
.calc-input-row:focus-within {
  border-color: var(--color-primary);
  border-width: 2px;
}
.calc-input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  background: transparent;
  color: var(--color-ink);
  min-height: 44px;
}
.calc-input:focus { outline: none; }
.calc-unit {
  border: 0;
  border-left: 1px solid var(--color-hairline);
  background: var(--color-surface);
  padding: 0 var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--color-slate);
  cursor: pointer;
  width: clamp(64px, 24vw, 84px);
  min-width: 0;
  max-width: 42%;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.calc-unit-static {
  display: flex;
  align-items: center;
  padding: 0 var(--space-xs);
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--color-slate);
  border-left: 1px solid var(--color-hairline);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  width: clamp(54px, 20vw, 72px);
  min-width: 0;
  max-width: 38%;
  justify-content: center;
  white-space: nowrap;
}
@media (max-width: 380px) {
  .calc-input-row { flex-direction: column; }
  .calc-unit,
  .calc-unit-static {
    width: 100%;
    max-width: 100%;
    min-height: 40px;
    border-left: 0;
    border-top: 1px solid var(--color-hairline);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
  }
}

/* 计算结果区（去渐变，纯 surface 底） */
.calc-results {
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-hairline);
}
.calc-output {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: var(--space-sm);
  min-width: 0;
}
.output-label {
  font-size: var(--fs-micro-uppercase);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--color-slate);
  margin-bottom: var(--space-xs);
}
.output-value {
  font-size: clamp(1.35rem, 6vw, var(--fs-h2));
  font-weight: var(--fw-semibold);
  color: var(--cluster-color, var(--color-primary));
  font-family: var(--font-mono);
  line-height: var(--lh-h2);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.calc-disclaimer {
  margin-top: var(--space-md);
  color: var(--color-slate);
  font-size: var(--fs-caption);
}

/* ═══════════════════════════════════════════
   组件 #16 · 公式块 / Insight 文案
   ═══════════════════════════════════════════ */
.formula-block {
  background: var(--color-brand-navy);
  color: var(--color-on-dark);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  margin: var(--space-md) 0;
  overflow-x: auto;
  border: 1px solid var(--color-brand-navy-deep);
}
.formula-block .var {
  color: var(--color-brand-yellow);
  font-weight: var(--fw-semibold);
}
.formula-block .op { color: var(--color-on-dark-muted); }
.formula-caption {
  font-size: var(--fs-body-sm);
  color: var(--color-slate);
  font-style: italic;
  margin-top: calc(var(--space-xs) * -1);
  margin-bottom: var(--space-lg);
}

/* ═══════════════════════════════════════════
   组件 #8 · 数据表（DESIGN.md comparison-table / comparison-row）
   ═══════════════════════════════════════════ */
.data-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-md) 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-hairline);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-sm);
  background: var(--color-canvas);
}
.data-table caption {
  caption-side: top;
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  font-weight: var(--fw-semibold);
  border-bottom: 1px solid var(--color-hairline);
  color: var(--color-ink);
  font-size: var(--fs-body-sm);
}
.data-table th, .data-table td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--color-hairline-soft);
}
.data-table thead th {
  background: var(--color-surface);
  font-size: var(--fs-micro-uppercase);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--color-slate);
}
.data-table tbody tr:nth-child(even) { background: var(--color-surface-soft); }
.data-table tbody tr:hover { background: var(--tint-cream); }
.data-table tbody th[scope="row"] {
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}
.table-note {
  font-size: var(--fs-caption);
  color: var(--color-slate);
  margin-top: var(--space-xs);
}

/* ═══════════════════════════════════════════
   组件 #16 · 示例计算卡片
   ═══════════════════════════════════════════ */
.examples-section { margin: var(--space-xxl) 0; }
.examples-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.example-card {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-left: 3px solid var(--cluster-color, var(--color-primary));
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: relative;
}
.example-card h3 {
  font-size: var(--fs-h5);
  margin: 0 0 var(--space-xs);
  font-weight: var(--fw-semibold);
}
.example-scenario {
  color: var(--color-slate);
  font-size: var(--fs-body-sm);
  margin: 0 0 var(--space-sm);
}
.example-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs);
  margin: var(--space-sm) 0;
  padding: var(--space-sm);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  font-size: var(--fs-caption);
}
.example-inputs > div { display: flex; flex-direction: column; }
.example-inputs dt { color: var(--color-steel); margin: 0; }
.example-inputs dd {
  color: var(--color-ink);
  margin: 0;
  font-weight: var(--fw-semibold);
}
.example-result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-sm);
  background: var(--cluster-tint, var(--color-surface));
  border-radius: var(--radius-sm);
  margin: var(--space-sm) 0;
}
.example-result strong {
  color: var(--color-ink);
  font-size: var(--fs-body-sm);
}
.result-value {
  font-family: var(--font-mono);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  color: var(--cluster-color, var(--color-primary));
  font-variant-numeric: tabular-nums;
}
.example-takeaway {
  font-size: var(--fs-body-sm);
  color: var(--color-slate);
  margin: 0;
}

/* ═══════════════════════════════════════════
   组件 #12 · References / Project materials
   ═══════════════════════════════════════════ */
.references-section {
  margin: var(--space-xxl) 0;
  padding: var(--space-lg);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  background: var(--color-surface-soft);
}
.references-intro {
  color: var(--color-slate);
  margin-top: calc(var(--space-xs) * -1);
}
.references-list {
  display: grid;
  gap: var(--space-md);
  padding-left: 1.25rem;
  margin: 0;
}
.references-list li { padding-left: var(--space-xs); }
.reference-publisher {
  display: block;
  color: var(--color-slate);
  font-size: var(--fs-body-sm);
  margin-top: var(--space-xxs);
}
.project-materials .related-grid { margin-top: var(--space-md); }

/* ═══════════════════════════════════════════
   组件 #9 · FAQ Accordion（DESIGN.md faq-accordion-item）
   ═══════════════════════════════════════════ */
.faq-section { margin: var(--space-xxl) 0; }
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-hairline);
}
.faq-item {
  background: var(--color-canvas);
  border-bottom: 1px solid var(--color-hairline);
  overflow: hidden;
  transition: background var(--transition-fast);
}
.faq-item[open] { background: var(--color-surface-soft); }
.faq-item summary {
  cursor: pointer;
  padding: var(--space-md) var(--space-lg);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-md);
  color: var(--color-ink);
  list-style: none;
  position: relative;
  padding-right: 48px;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-h4);
  color: var(--color-slate);
  font-weight: var(--fw-regular);
  transition: transform var(--transition);
  line-height: 1;
}
.faq-item[open] summary::after {
  content: '–';
  color: var(--color-primary);
}
.faq-answer {
  padding: 0 var(--space-lg) var(--space-md);
  color: var(--color-slate);
}
.faq-answer p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════
   相关推荐 / Related section（继 #6）
   ═══════════════════════════════════════════ */
.related-section {
  margin: var(--space-xxl) 0;
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--color-hairline);
}

/* ═══════════════════════════════════════════
   组件 #11 · 作者署名（去渐变头像）
   ═══════════════════════════════════════════ */
.author-byline {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-hairline);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: var(--space-lg) 0;
}
.byline-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
  flex-shrink: 0;
}
.byline-line {
  margin: 0;
  font-size: var(--fs-body-sm);
  color: var(--color-charcoal);
}
.byline-line a {
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}
.byline-dates {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--color-slate);
}

/* ═══════════════════════════════════════════
   组件 #10 · Sarah field note / Anecdote / 内容钩子
   DESIGN.md card-feature-yellow（高强调"现场经验"）
   ═══════════════════════════════════════════ */
.anecdote {
  margin: var(--space-lg) 0;
  padding: var(--space-lg);
  background: var(--tint-yellow);
  border: 1px solid var(--tint-yellow-bold);
  border-left: 3px solid var(--color-brand-orange);
  border-radius: var(--radius-md);
  color: var(--color-charcoal);
}
.anecdote p { margin: 0; }
.anecdote strong { color: var(--color-brand-orange-deep); }

.content-hook {
  margin: var(--space-xl) 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--tint-lavender);
  border: 1px solid var(--color-hairline);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
}
.content-hook p { margin: 0; }

.content-preview {
  margin: var(--space-lg) 0;
  padding: var(--space-lg);
  background: var(--color-surface-soft);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-hairline);
}
.content-preview p {
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-xs);
  color: var(--color-ink);
}
.content-preview ul {
  margin: 0;
  padding-left: 1.4em;
}
.content-preview li {
  margin-bottom: var(--space-xxs);
  color: var(--color-slate);
}

/* ═══════════════════════════════════════════
   组件 #16 · I-Language sections / TOC
   ═══════════════════════════════════════════ */
.il-section { margin: var(--space-xxl) 0; }
.il-section .section-eyebrow,
.section-eyebrow {
  display: inline-block;
  font-size: var(--fs-micro-uppercase);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--cluster-color, var(--color-primary));
  margin-bottom: var(--space-xs);
}
.il-section h2 { margin-top: 0; }
.section-transition {
  font-style: italic;
  color: var(--color-slate);
  border-left: 3px solid var(--color-hairline-strong);
  padding-left: var(--space-md);
  margin-top: var(--space-xl);
}

.article-toc {
  margin: var(--space-lg) 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
}
.toc-label {
  font-size: var(--fs-micro-uppercase);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--color-slate);
  margin-bottom: var(--space-sm);
}
.article-toc ol {
  padding-left: 1.4em;
  margin: 0;
}
.article-toc li {
  margin-bottom: var(--space-xs);
  font-size: var(--fs-body-sm);
}

.coverage-tables-section { margin: var(--space-xxl) 0; }
.coverage-tables-section h2 { margin-bottom: var(--space-md); }

/* ═══════════════════════════════════════════
   组件 #13 · AdSense slot（保留 data-ad-state 行为）
   ═══════════════════════════════════════════ */
.ad-slot {
  margin: var(--space-xl) 0;
  text-align: center;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs);
  border: 1px dashed var(--color-hairline-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  transition: opacity var(--transition);
}
.ad-slot[data-ad-state="empty"] {
  display: none !important;
  margin: 0;
  height: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}
.ad-label {
  font-size: var(--fs-micro-uppercase);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--color-slate);
  margin-bottom: var(--space-xs);
  display: block;
}

/* ═══════════════════════════════════════════
   组件 #14 · Footer（DESIGN.md footer-region：浅色 canvas + hairline 顶边）
   ═══════════════════════════════════════════ */
.site-footer {
  margin-top: var(--space-section);
  padding: var(--space-section) 0 var(--space-xl);
  background: var(--color-canvas);
  color: var(--color-charcoal);
  font-size: var(--fs-body-sm);
  border-top: 1px solid var(--color-hairline);
}
.site-footer a {
  color: var(--color-slate);
}
.site-footer a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-xl);
}
.footer-col .footer-heading {
  color: var(--color-ink);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-sm);
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col li {
  margin-bottom: var(--space-xxs);
}
.footer-col p { margin: 0 0 var(--space-sm); }
.footer-meta {
  font-size: var(--fs-caption);
  color: var(--color-slate);
}
.footer-bottom {
  margin-top: var(--space-xxl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-hairline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: space-between;
  font-size: var(--fs-caption);
  color: var(--color-slate);
}
.footer-bottom p { margin: 0; }
.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-sm);
}

/* ═══════════════════════════════════════════
   响应式压缩（移动端 section 间距收紧）
   ═══════════════════════════════════════════ */
@media (max-width: 767px) {
  .hero { padding: var(--space-xxl) 0 var(--space-xl); }
  .page-intro { padding: var(--space-md) 0 var(--space-xs); }
  .il-section,
  .faq-section,
  .examples-section,
  .related-section,
  .coverage-tables-section,
  .references-section { margin: var(--space-xl) 0; }
  .related-section { padding: var(--space-md) 0; }
  .calculator-tool,
  .ad-slot { margin: var(--space-lg) 0; }
  .site-footer {
    margin-top: var(--space-xxl);
    padding: var(--space-xxl) 0 var(--space-lg);
  }
}

/* ═══════════════════════════════════════════
   通用工具类
   ═══════════════════════════════════════════ */
.text-muted { color: var(--color-steel); }
.text-secondary { color: var(--color-slate); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.no-margin { margin: 0; }

/* Friend Links 区块（首页底部） */
.friend-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.friend-links li {
  margin: 0;
}
.friend-links a {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-full);
  font-size: var(--fs-body-sm);
  color: var(--color-charcoal);
  text-decoration: none;
}
.friend-links a:hover {
  background: var(--color-surface-soft);
  border-color: var(--color-hairline-strong);
  color: var(--color-primary);
  text-decoration: none;
}