/* ============================================================
   pickvoice.cn — 海口声栖科技有限公司 官网样式表
   审查版（非正式发布版本）

   实施依据：docs/site-draft/DESIGN_SPEC_V1.md V1.2（审查实施基线）
   文案基准：docs/site-draft/COPY_REVIEW_DRAFT_V1.md V1.4.1（审查稿）

   ⚠️ 本样式表中的「审查横幅 / 草案声明条 / 占位符」三类样式，
      须在正式发布前一并移除；移除须同时满足 DESIGN_SPEC §4.8 全部四项：
        ① P1–P14 全部解除
        ② 相应 N1–N21 发布阻塞项全部解除
        ③ 内部审查完成，且由具备相应资质的中国执业律师正式审定
        ④ owner 明确书面批准正式发布
      任一项未满足，均不得移除审查状态或部署。

   ⚠️ 不引入任何第三方 CSS / JS / CDN / webfont / 统计 / 广告。
   ============================================================ */

/* ---------- 1. 设计令牌（取自 docs/design/DESIGN_SYSTEM.md §3，一个新值不发明）---------- */

:root {
  /* 底 / 面 —— 日·宣纸 */
  --bg: #f3eddf;
  --surface: #fbf7ed;
  --surface-raised: #fefcf6;
  --border: rgba(42, 37, 30, 0.1);
  --divider: rgba(42, 37, 30, 0.06);

  /* 墨字阶 */
  --text-primary: #2a251e;
  --text-secondary: #544a3d;
  --text-tertiary: #6b6052;
  --text-muted: #9a8b72;
  --text-faint: #b6a98f;

  /* 印色 —— 日·朱砂 */
  --brand: #ae3b2e;
  --brand-pressed: #9a3328;
  --on-brand: #f7f0e2;
  --brand-soft: rgba(174, 59, 46, 0.1);

  /* 折角（比卡面深半档） */
  --fold-shade: #f0e7d5;

  /* 字体栈：不加载任何 webfont */
  --font-serif: 'Songti SC', 'STSong', 'Noto Serif CJK SC', 'Source Han Serif SC', SimSun, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Noto Sans CJK SC',
    'Source Han Sans SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* 间距（八点栅格，对齐 src/theme/spacing.ts） */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 20px;
  --sp-2xl: 24px;
  --sp-3xl: 32px;
  --sp-huge: 48px;

  --page-pad: var(--sp-xl);
  --section-gap: var(--sp-huge);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15120e;
    --surface: #1e1a14;
    --surface-raised: #241f17;
    --border: rgba(239, 230, 212, 0.1);
    --divider: rgba(239, 230, 212, 0.06);

    --text-primary: #efe6d4;
    --text-secondary: #c9bba0;
    --text-tertiary: #a89a82;
    --text-muted: #8e8167;
    --text-faint: #6a5f4b;

    --brand: #d8694f;
    --brand-pressed: #e2795f;
    --on-brand: #1a1109;
    --brand-soft: rgba(216, 105, 79, 0.14);

    --fold-shade: #241f18;
  }
}

@media (min-width: 768px) {
  :root {
    --page-pad: var(--sp-3xl);
    --section-gap: 64px;
  }
}

/* ---------- 2. 基础 ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.9;
  overflow-x: hidden; /* 页面永不横向滚动 */
}

a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--brand-pressed);
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: var(--page-pad);
}

/* 跳到正文（白名单 B） */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface-raised);
  color: var(--text-primary);
  padding: var(--sp-md) var(--sp-lg);
  border: 1px solid var(--border);
  z-index: 100;
}

.skip-link:focus {
  left: var(--sp-lg);
  top: var(--sp-lg);
}

/* ---------- 3. 审查横幅（C·审查状态标识）---------- */
/* ⚠️ 移除条件见文件头 DESIGN_SPEC §4.8 四项准入 */

.review-banner {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-tertiary);
  background: var(--surface-raised);
  border-bottom: 1px dashed var(--text-faint);
  padding: var(--sp-sm) var(--page-pad);
  text-align: center;
}

/* ---------- 4. 顶栏 C1 ---------- */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.site-header .wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  padding-block: var(--sp-md);
}

.site-brand {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.site-nav {
  display: flex;
  gap: var(--sp-lg);
  overflow-x: auto;
  scrollbar-width: none;
}

.site-nav::-webkit-scrollbar {
  display: none;
}

.site-nav a {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--sp-xs);
  border-bottom: 2px solid transparent;
}

.site-nav a[aria-current='page'] {
  color: var(--text-primary);
  border-bottom-color: var(--brand);
}

@media (min-width: 768px) {
  .site-header .wrap {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--sp-lg);
  }

  .site-nav {
    overflow: visible;
  }
}

/* ---------- 5. 主体与排版 ---------- */

main {
  padding-block: var(--section-gap) var(--sp-huge);
}

section + section {
  margin-top: var(--section-gap);
}

h1 {
  font-family: var(--font-serif);
  font-size: 1.625rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

h2 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  margin-bottom: var(--sp-lg);
}

h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.5;
  margin-top: var(--sp-2xl);
  margin-bottom: var(--sp-md);
}

p {
  margin-bottom: var(--sp-lg);
  color: var(--text-secondary);
}

.prose {
  max-width: 34em;
}

.prose-wide {
  max-width: 42em;
}

ul,
ol {
  margin-bottom: var(--sp-lg);
  padding-left: 1.4em;
  color: var(--text-secondary);
}

li {
  margin-bottom: var(--sp-md);
}

strong {
  color: var(--text-primary);
  font-weight: 600;
}

.lede {
  font-size: 1rem;
  color: var(--text-secondary);
}

.meta {
  font-size: 0.875rem;
  color: var(--text-tertiary);
  line-height: 1.7;
  margin-bottom: var(--sp-2xl);
}

@media (min-width: 768px) {
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.5rem;
  }
  h3 {
    font-size: 1.125rem;
  }
}

/* ---------- 6. 首页页头 ---------- */

.hero {
  text-align: center;
  padding-block: var(--sp-2xl) 0;
}

.hero h1 {
  font-size: 1.75rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
}

.hero p {
  margin-top: var(--sp-md);
  color: var(--text-secondary);
}

@media (min-width: 768px) {
  .hero h1 {
    font-size: 2.5rem;
  }
}

/* 幽灵印分隔 C4（DESIGN_SYSTEM §5） */
.seal-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-md);
  margin-block: var(--sp-3xl);
}

.seal-divider::before,
.seal-divider::after {
  content: '';
  width: 40px;
  height: 1px;
  background: rgba(42, 37, 30, 0.12);
}

@media (prefers-color-scheme: dark) {
  .seal-divider::before,
  .seal-divider::after {
    background: rgba(239, 230, 212, 0.12);
  }
}

.seal-divider i {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--brand);
  opacity: 0.45;
  display: grid;
  place-items: center;
}

.seal-divider i::after {
  content: '';
  width: 10px;
  height: 10px;
  border: 2px solid var(--brand);
}

/* ---------- 7. 产品卡 C2 + 朱文印 C3 ---------- */

.product-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: var(--sp-xl);
  overflow: hidden;
}

/* 折角：右上角三角（DESIGN_SYSTEM §5 几何） */
.product-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 28px solid var(--fold-shade);
  border-left: 28px solid transparent;
}

.product-head {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  margin-bottom: var(--sp-lg);
}

.seal {
  flex: none;
  color: var(--brand);
}

.product-head h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.375rem;
  margin: 0;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

.facts {
  display: grid;
  gap: var(--sp-lg);
  margin-block: var(--sp-xl);
  padding: 0;
  list-style: none;
}

.facts li {
  margin: 0;
  padding: var(--sp-lg);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
}

/* 标签与冒号随 V1.2.2 原文行内呈现（原文为「**标签**：正文」，不得拆成两行改变文本） */
.facts b {
  color: var(--text-primary);
  font-weight: 600;
}

.card-foot {
  margin-bottom: 0;
  color: var(--text-tertiary);
  font-size: 0.9375rem;
}

@media (min-width: 768px) {
  .product-card {
    padding: var(--sp-3xl);
  }
  .facts {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- 8. 草案声明条 C7 ---------- */
/* 仅用于三个草案法律／规则页面；contact.html 不设 */

.draft-notice {
  background: var(--surface);
  border-left: 3px solid var(--text-tertiary);
  padding: var(--sp-lg);
  margin-bottom: var(--sp-2xl);
  color: var(--text-secondary);
}

.draft-notice p {
  margin: 0;
}

/* ---------- 9. 占位符 C8「校样贴条」---------- */
/* ⚠️ 移除条件见文件头 DESIGN_SPEC §4.8 四项准入 */

.placeholder {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-tertiary);
  background: var(--surface-raised);
  border: 1px dashed var(--text-faint);
  border-radius: 4px;
  padding: 2px var(--sp-sm);
  white-space: normal;
}

/* ⚠️ 不得用 ::before 拼接「待确认」等占位符文字（Codex 总控 P0，2026-07-28）。
   占位符的完整原文 `【待确认：…】` 必须逐字写在 HTML 文本节点里——
   生成内容不进 DOM 文本、复制粘贴取不到、固定字符串检索命中为 0，
   会让「文字与位置完全一致」这条硬约束无法核验。本规则只负责视觉，不负责文字。 */

.placeholder-block {
  display: block;
  margin-top: var(--sp-lg);
  padding: var(--sp-lg);
}

/* ---------- 10. 数据表 C6 ---------- */

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--sp-lg);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.data-table caption {
  text-align: left;
  font-size: 0.8125rem;
  /* --text-muted 对宣纸底只有 2.85:1，不足 WCAG AA 4.5:1（实测）；改用 tertiary。 */
  color: var(--text-tertiary);
  padding-bottom: var(--sp-sm);
}

.data-table th,
.data-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--sp-md);
  border-bottom: 1px solid var(--divider);
  color: var(--text-secondary);
}

.data-table thead th {
  background: var(--surface-raised);
  color: var(--text-primary);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
}

.data-table tbody th {
  color: var(--text-primary);
  font-weight: 600;
}

/* 6 列表转卡片（内容只写一遍，靠 CSS 重排——单一事实源，不维护第二份正文）
   两个上下文共用同一套规则：
   ① 移动端 ≤767px；
   ② **打印**——A4 可打印宽仅 182mm，六列并排会被压成逐字竖排（owner 实测 Safari 12 页稿）。
   只改呈现结构，六项字段的内容、顺序、占位符位置语义一律不变。 */
@media (max-width: 767px), print {
  .data-table--cards,
  .data-table--cards caption,
  .data-table--cards thead,
  .data-table--cards tbody,
  .data-table--cards tr,
  .data-table--cards th,
  .data-table--cards td {
    display: block;
  }

  /* caption 在 display:block 的表里若保持 table-caption，会被压成一列竖排字（真机实测） */
  .data-table--cards caption {
    width: 100%;
    text-align: left;
  }

  .data-table--cards thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .data-table--cards tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: var(--sp-lg);
    margin-bottom: var(--sp-lg);
  }

  .data-table--cards tbody th {
    font-size: 1rem;
    padding: 0 0 var(--sp-sm);
    border-bottom: 1px solid var(--divider);
    margin-bottom: var(--sp-md);
  }

  .data-table--cards td {
    padding: 0 0 var(--sp-md);
    border-bottom: 0;
    font-size: 0.9375rem;
  }

  .data-table--cards td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 2px;
  }

  .data-table--cards td:last-child {
    padding-bottom: 0;
  }

  /* 一条记录（一张卡片）不得跨页断开 */
  .data-table--cards tr {
    break-inside: avoid;
  }
}

@media (max-width: 767px) {
  /* 2 列表：保持表格，仅收紧（只针对移动端，打印下 2 列表宽度充裕） */
  .data-table:not(.data-table--cards) th,
  .data-table:not(.data-table--cards) td {
    padding: var(--sp-sm) var(--sp-md);
    font-size: 0.875rem;
    word-break: break-word;
  }
}

/* ---------- 11. 目录（隐私政策）---------- */

.toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: var(--sp-lg);
  margin-bottom: var(--sp-2xl);
}

.toc summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-primary);
}

.toc ol {
  margin: var(--sp-md) 0 0;
  padding-left: 1.4em;
}

.toc li {
  margin-bottom: var(--sp-sm);
}

.toc a {
  color: var(--text-secondary);
}

.legal-layout {
  display: block;
}

@media (min-width: 1024px) {
  .legal-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: var(--sp-huge);
    align-items: start;
  }

  .legal-layout .toc {
    position: sticky;
    top: var(--sp-lg);
    margin-bottom: 0;
  }

  .legal-layout .toc summary {
    list-style: none;
    pointer-events: none;
  }

  .legal-layout .toc summary::-webkit-details-marker {
    display: none;
  }
}

/* 锚点跳转不被顶栏遮挡 */
section[id],
h2[id] {
  scroll-margin-top: var(--sp-lg);
}

/* ---------- 12. 注销页「冷静期」视觉锚点 ---------- */
/* ⚠️ 只对 V1.2.2 原文中已有的字加重，**不新增任何可见文字**。
      不得改回「独立大字块」写法——那会重复出现冷静期文案，
      属白名单外新增可见文字（DESIGN_SPEC §4.9）。 */

.cooldown-emphasis {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  line-height: 1.6;
  color: var(--brand);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* ---------- 13. 联系页 ---------- */

.mail {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--brand);
  margin-bottom: var(--sp-lg);
  letter-spacing: 0.02em;
}

/* ---------- 14. 页脚 C9 ---------- */

.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-block: var(--sp-3xl);
  margin-top: var(--section-gap);
}

.footer-nav {
  display: grid;
  gap: var(--sp-xl);
  margin-bottom: var(--sp-2xl);
}

.footer-nav h2 {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: var(--sp-sm);
}

.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav li {
  margin-bottom: var(--sp-sm);
}

.footer-nav a {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  text-decoration: none;
}

.footer-nav a:hover {
  text-decoration: underline;
}

.beian {
  border-top: 1px solid var(--divider);
  padding-top: var(--sp-lg);
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--text-muted);
}

.beian a {
  color: inherit;
  text-decoration: none;
}

.beian a:hover {
  text-decoration: underline;
}

.beian img {
  height: 18px;
  width: auto;
  vertical-align: middle;
  margin-right: 5px;
}

.beian .sep {
  margin: 0 var(--sp-md);
  color: var(--text-faint);
}

@media (min-width: 768px) {
  .footer-nav {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- 15. 打印与另存 PDF（DESIGN_SPEC §3.6）---------- */
/* ⚠️ 硬规则：审查标识必须在打印件每一页持续显示。
      不得隐藏 .review-banner / .draft-notice / .placeholder。 */

.print-running-head,
.print-mark,
.print-mark-inline {
  display: none;
}

@media print {
  /* 允许隐藏：纯导航类 */
  .site-nav,
  .footer-nav,
  .skip-link,
  .toc {
    display: none !important;
  }

  /* 必须保留：审查横幅（绝不 display:none） */
  .review-banner {
    display: block !important;
    border: 1px dashed #000;
    color: #000;
    background: transparent;
  }

  /* ★ 逐页重复的审查标识 —— 流内标识条（DESIGN_SPEC §3.6 降级方案）。
     position:fixed 与 table-header-group 的逐页重复都只在 Blink 成立；
     Safari 实测两者都失效（owner 两次导出 PDF：13 页稿第 2—12 页无标识）。
     现在不依赖任何「重复」原语：标识条按**流内间距**排布，
     相邻两条距离恒 < 一个可打印页高（269mm），因此任意一页都必然落进至少一条。 */
  .print-running-head {
    display: block;
    font-family: var(--font-mono);
    font-size: 9pt;
    line-height: 1.4;
    color: #000;
    text-align: center;
    padding: 3pt 0;
  }

  /* 页眉自带完整审查标识 + 文件名/版本号/发布主体，两行。
     这样即使某引擎不重复表尾行组，仅靠表头行组也能满足「每页都有」的硬要求；
     表尾是加固，不是唯一依赖。 */
  .print-running-head {
    border-bottom: 1px solid #000;
  }

  /* 末尾不再放独立页脚标识块：它排在 site-footer 之后，
     Safari 实测会把它单独挤成一页纯标识页（11 页稿的第 11 页）。
     末页的审查标识由流内标识条承担——间距审计保证末段仍在覆盖范围内。 */

  .print-running-head b {
    display: block;
    font-weight: 700;
  }

  .print-running-head span {
    display: block;
    font-weight: 400;
  }

  /* 流内审查标识条：四项要素齐全（标识串 + 文件名 + 发布主体 + 版本号） */
  .print-mark,
  .print-mark-inline {
    display: block;
    font-family: var(--font-mono);
    font-size: 7.5pt;
    line-height: 1.3;
    color: #000 !important;
    text-align: center;
    padding: 2pt 0;
    margin: 6pt 0;
    border-top: 1px dashed #000;
    border-bottom: 1px dashed #000;
    break-inside: avoid;
    break-after: avoid;
  }

  /* 页脚备案块整体不跨页，保证末页那一小段（备案号 + 版权行）与其标识条同页。
     不再用「</footer> 之后的独立页脚块」——Safari 实测会把它单独挤成一页纯标识页。 */
  .beian {
    break-inside: avoid;
  }

  .beian-mark {
    margin: 0 0 6pt;
  }

  /* 卡片内的标识条：挂在记录标题下，不新增表格行、不动六项字段 */
  .print-mark-inline {
    margin: 4pt 0 0;
    font-weight: 400;
  }

  @page {
    margin: 14mm;
  }

  /* 页眉/页脚现在在正常流里（表头/表尾行组），不再需要 body 上下留白避让 */
  html,
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 10.5pt;
  }

  a {
    color: #000 !important;
    text-decoration: underline;
  }

  /* 草案声明条必须打印 */
  .draft-notice {
    display: block !important;
    background: transparent;
    border-left: 3px solid #000;
    color: #000;
  }

  /* 占位符必须打印并保留可辨识样式 */
  .placeholder {
    display: inline-block;
    font-family: var(--font-mono) !important;
    border: 1px dashed #000 !important;
    background: transparent !important;
    color: #000 !important;
  }

  .placeholder-block {
    display: block;
  }

  .site-header,
  .site-footer,
  .product-card,
  .facts li,
  .cooldown,
  .toc {
    background: transparent !important;
    border-color: #666 !important;
  }

  .data-table th,
  .data-table td {
    border-color: #666 !important;
    color: #000 !important;
  }

  .data-table thead th {
    background: transparent !important;
  }

  /* 6 列表在打印下走卡片式分组块（规则见 §10 的共用媒体查询）。
     此处只做黑白化与分页控制，不改任何内容、顺序或字段数。 */
  .data-table--cards tr {
    background: transparent !important;
    border: 1px solid #666 !important;
    border-radius: 0;
    padding: 6pt 8pt;
    margin-bottom: 6pt;
    break-inside: avoid;
  }

  .data-table--cards tbody th {
    border-bottom: 1px solid #666 !important;
  }

  .data-table--cards td::before {
    color: #000 !important;
    font-weight: 700;
  }

  section {
    break-inside: auto;
  }

  h1,
  h2,
  h3 {
    break-after: avoid;
    color: #000 !important;
  }

  /* 只约束数据表的行；打印页框那一行必须允许跨页，否则整份文档挤成一页 */
  .data-table tr {
    break-inside: avoid;
  }
}

/* ---------- 16. 动效偏好 ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}