/* ==========================================================================
   掌域官网 · 通用组件（components.css）
   导航 / 按钮 / 卡片 / chip / FAQ / Footer / 占位块 —— 6 个页面共用
   规则：组件形状只在这里定义；颜色一律取自 tokens.css 变量。
   ========================================================================== */

/* ============================== 区块骨架 ============================== */
/* 相邻区块间距 96/64：只给「上内边距」，避免上下都加造成双倍间距 */
.section{padding-top:var(--section-gap)}
.section-head{
  margin-bottom:var(--title-gap);
  display:flex;
  flex-direction:column;
  gap:var(--space-8);
}

/* ============================== 00 全局导航 ============================== */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  height:var(--nav-h);
  background:var(--color-surface);
}
/* 滚动后显现下缘分割线：用 ::after 的透明度切换，不改变高度（避免整页跳动） */
.nav::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:var(--stroke-hairline);
  background:var(--color-border);
  opacity:0;
  transition:opacity .2s ease-out;
  pointer-events:none;
}
.nav.is-scrolled::after{opacity:1}
.nav-inner{display:flex;align-items:center;height:100%;gap:var(--space-24)}
.nav-logo{
  display:inline-flex;
  align-items:center;
  gap:var(--space-8);
  min-width:64px;
  max-width:96px;
  font-size:var(--font-h3-size);
  line-height:1;
  font-weight:var(--weight-medium);
}
.nav-logo-mark{width:24px;height:24px;flex:none}
.nav-menu{display:flex;flex:1;align-items:center}
.nav-links{display:flex;flex:1;justify-content:center;gap:var(--space-24);list-style:none;margin:0}
.nav-link{
  display:inline-flex;
  align-items:center;
  height:var(--nav-h);
  position:relative;
  font-size:var(--font-caption-size);
  color:var(--color-text-secondary);
  transition:color .15s ease-out;
}
.nav-link:hover{color:var(--color-primary)}
/* 当前页：text-primary + 2px 下划线（不用蓝色字） */
.nav-link[aria-current="page"]{color:var(--color-text-primary)}
.nav-link[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:var(--color-text-primary);
}
.nav-cta{display:flex;align-items:center;gap:var(--space-16)}
.nav-login{font-size:var(--font-caption-size);color:var(--color-text-secondary);transition:color .15s ease-out}
.nav-login:hover{color:var(--color-primary)}
.nav-toggle{display:none;color:var(--color-text-primary)}

/* —— 移动端（<768）：汉堡 + 全屏抽屉 —— */
@media (max-width:767px){
  .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    margin-left:auto;
  }
  .nav-toggle .icon-close{display:none}
  .nav-toggle.is-open .icon-menu{display:none}
  .nav-toggle.is-open .icon-close{display:block}
  .nav-menu{
    position:fixed;
    top:var(--nav-h);
    left:0;right:0;bottom:0;
    z-index:49;
    display:flex;
    flex-direction:column;
    flex:none;
    padding:var(--space-24) var(--page-pad);
    background:var(--color-surface);
    opacity:0;
    visibility:hidden;
    transition:opacity .2s ease-out,visibility .2s ease-out;
  }
  .nav-menu.is-open{opacity:1;visibility:visible}
  .nav-links{flex-direction:column;flex:none;gap:0}
  .nav-link{height:auto;padding-block:var(--space-16);font-size:var(--font-body-size)}
  .nav-link[aria-current="page"]::after{width:24px;right:auto}
  .nav-cta{flex-direction:column;align-items:stretch;gap:var(--space-16);margin-top:auto;padding-top:var(--space-24)}
  .nav-login{font-size:var(--font-body-size);text-align:center;padding-block:var(--space-8)}
}
body.menu-open{overflow:hidden}

/* —— 无 JS 降级（<768）：导航链接以换行列表呈现，抽屉不可用也不丢导航 —— */
@media (max-width:767px){
  .no-js .nav{height:auto}
  .no-js .nav-inner{flex-wrap:wrap;gap:var(--space-8) var(--space-16);padding-block:var(--space-8)}
  .no-js .nav-toggle{display:none}
  .no-js .nav-menu{
    position:static;
    flex:1 1 100%;
    opacity:1;
    visibility:visible;
    padding:0;
    background:none;
  }
  .no-js .nav-links{flex-direction:row;flex-wrap:wrap;gap:var(--space-4) var(--space-16)}
  .no-js .nav-link{height:auto;padding-block:var(--space-4);font-size:var(--font-caption-size)}
  .no-js .nav-cta{flex-direction:row;align-items:center;margin-top:var(--space-8);padding-top:0}
}

/* ============================== 按钮 ============================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding-inline:var(--space-16);
  border-radius:var(--radius-8);
  font-size:var(--font-caption-size);
  font-weight:var(--weight-medium);
  line-height:1;
  text-align:center;
  border:var(--stroke-hairline) solid transparent;
  transition:background-color .15s ease-out,color .15s ease-out,border-color .15s ease-out;
}
.btn-primary{background:var(--color-text-primary);color:var(--color-surface)}
.btn-primary:hover{
  background:var(--color-text-primary);
  background:color-mix(in srgb,var(--color-on-strong) 4%,var(--color-text-primary));
}
.btn-secondary{background:transparent;color:var(--color-text-primary);border-color:var(--color-border)}
.btn-secondary:hover{border-color:var(--color-text-primary)}
.btn-sm{height:36px} /* 导航 CTA（文档 §3.2 区块专属规则：高 36） */
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-12)}
/* 深色块（仅区块 12）：Primary 反白 = 白底黑字；Secondary 描边反白 */
.btn-on-dark{background:var(--color-on-strong);color:var(--color-text-primary)}
.btn-on-dark:hover{background:var(--color-surface-muted)}
.btn-secondary-on-dark{color:var(--color-on-strong);border-color:var(--color-on-strong-line)}
.btn-secondary-on-dark:hover{border-color:var(--color-on-strong-line-strong)}
/* 禁用态（文档 §3.1） */
.btn[disabled],.btn.is-disabled{
  background:var(--color-surface-muted);
  color:var(--color-text-tertiary);
  border-color:transparent;
  cursor:not-allowed;
}
@media (max-width:767px){
  .btn{height:48px} /* 移动触控 48 */
}

/* ============================== 卡片 / chip ============================== */
/* 注意：卡片一律不得 overflow:hidden（会裁掉 04 的口径浮层、并造出 sticky 的滚动祖先） */
.card{
  background:var(--color-surface);
  border:var(--stroke-hairline) solid var(--color-border);
  border-radius:var(--radius-10);
  padding:var(--card-pad);
}
.chip{
  display:inline-flex;
  align-items:center;
  height:26px;
  padding-inline:var(--space-12);
  border:var(--stroke-hairline) dashed var(--color-border);
  border-radius:var(--radius-6);
  font-size:var(--font-eyebrow-size);
  line-height:1;
  color:var(--color-text-secondary);
}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-8)}

/* ============================== 11 FAQ 手风琴 ============================== */
.faq{border-top:var(--stroke-hairline) solid var(--color-border)}
.faq-item{border-bottom:var(--stroke-hairline) solid var(--color-border)}
.faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-16);
  min-height:56px; /* 题行高 56 */
  font-size:var(--font-body-size);
  font-weight:var(--weight-medium);
  list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-icon{flex:none;color:var(--color-text-tertiary);transition:transform .2s ease-out}
.faq-item[open] .faq-icon{transform:rotate(45deg)} /* 「+」转 45° 成「×」 */
/* 高度自适应动画（200ms ease-out）：0fr → 1fr；老浏览器直接展开（渐进增强） */
.faq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s ease-out}
.faq-item[open] .faq-body{grid-template-rows:1fr}
.faq-body-inner{overflow:hidden}
.faq-answer{
  padding-bottom:var(--space-24);
  max-width:72ch;
  font-size:var(--font-body-size);
  line-height:var(--font-body-lh);
  color:var(--color-text-secondary);
}

/* ============================== 13 Footer ============================== */
.footer{
  border-top:var(--stroke-hairline) solid var(--color-border);
  padding-top:var(--section-gap);
  padding-bottom:var(--space-24);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr auto;
  gap:var(--space-48);
}
.footer-brand{display:flex;flex-direction:column;gap:var(--space-12)}
.footer-logo{
  display:inline-flex;
  align-items:center;
  gap:var(--space-8);
  font-size:var(--font-h3-size);
  line-height:1;
  font-weight:var(--weight-medium);
}
.footer-slogan{font-size:var(--font-caption-size);line-height:var(--font-caption-lh);color:var(--color-text-secondary)}
.footer-col{display:flex;flex-direction:column;gap:var(--space-12)}
.footer-col-title{font-size:var(--font-eyebrow-size);line-height:var(--font-eyebrow-lh);color:var(--color-text-tertiary)}
.footer-links{display:flex;flex-direction:column;gap:var(--space-12);list-style:none;margin:0}
.footer-link{font-size:var(--font-caption-size);color:var(--color-text-secondary);transition:color .15s ease-out}
.footer-link:hover{color:var(--color-primary)}
.footer-qr{display:flex;gap:var(--space-16)}
.footer-qr-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-8)}
.footer-qr-box{
  width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  border:var(--stroke-hairline) dashed var(--color-border);
  border-radius:var(--radius-6);
  font-size:var(--font-eyebrow-size);
  color:var(--color-text-tertiary);
}
.footer-qr-label{font-size:var(--font-eyebrow-size);color:var(--color-text-tertiary)}
.footer-legal{
  margin-top:var(--section-gap);
  border-top:var(--stroke-hairline) solid var(--color-border);
  padding-top:var(--space-24);
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-8) var(--space-24);
  font-size:var(--font-eyebrow-size);
  line-height:var(--font-eyebrow-lh);
  color:var(--color-text-tertiary);
}
.footer-legal a{transition:color .15s ease-out}
.footer-legal a:hover{color:var(--color-primary)}
@media (max-width:767px){
  .footer-grid{grid-template-columns:1fr;gap:var(--space-32)}
}

/* ============================== 子页：页头与占位块 ============================== */
.page-head{
  padding-top:var(--section-gap);
  display:flex;
  flex-direction:column;
  gap:var(--space-12);
}
.page-title{
  font-size:var(--font-h2-size);
  line-height:var(--font-h2-lh);
  font-weight:var(--weight-medium);
}
.page-desc{color:var(--color-text-secondary);max-width:72ch}
.page-blocks{
  padding-top:var(--space-48);
  display:flex;
  flex-direction:column;
  gap:var(--space-16);
}
.placeholder{
  display:flex;
  flex-direction:column;
  gap:var(--space-8);
  padding:var(--space-24);
  border:var(--stroke-hairline) dashed var(--color-border);
  border-radius:var(--radius-10);
}
.placeholder p{font-size:var(--font-caption-size);line-height:var(--font-caption-lh);color:var(--color-text-tertiary)}

/* ============================== 示意标注（§3.6） ============================== */
/* 凡示意图表/占位数据必须带：「示意界面 · 真实数字以产品为准」 */
.demo-note{
  font-size:var(--font-eyebrow-size);
  line-height:var(--font-eyebrow-lh);
  color:var(--color-text-tertiary);
}
.footnote-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:var(--space-8) var(--space-16);
  margin-top:var(--space-16);
}
.footnote-row--end{justify-content:flex-end}