/* ============================================================================
 * modcheck 官网 · Base（reset / 排版基线 / 布局原语 / 无障碍）
 * ----------------------------------------------------------------------------
 * 依赖：tokens.css（必须先加载）
 * 职责边界：
 *   - 本文件只管「元素默认样子」和 §4 里的布局类
 *     （.skip-link / .container* / .section* / .section-head / .eyebrow /
 *       .section-title / .section-sub / .prose）
 *   - 组件外观（按钮 / 卡片 / 胶囊 / 圆点…）归 components.css
 *   - 页面独有类归 assets/css/pages/<page>.css
 * 本文件不允许出现任何颜色字面量。
 * ==========================================================================*/

/* ==========================================================================
 * 1. Reset
 * ========================================================================*/

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

html {
  /* 横向防溢出兜底。
     子像素舍入会在某些「容器 100% + 相邻元素」组合下把文档宽度凑成 viewport+1px，
     在移动端表现为整页可以左右晃 1px（实测 en/product.html @375px 就是这种）。
     设计上不允许任何真实内容横向溢出（10 页 × 375/768/900 已逐页量过 overflow=0），
     所以这里直接夹死，避免「看着没问题但能晃动」这种廉价感。 */
  overflow-x: clip;
  /* §3 头部高度 + 16px 呼吸位：锚点跳转时标题不会被粘顶头部盖住 */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-header) + var(--sp-4));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--c-bg);
}

body {
  margin: 0;
  min-height: 100%;
  background-color: var(--c-bg);
  color: var(--c-text-2);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-none);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, pre {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
}

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
  /* 图未加载时不留白边，也不产生布局抖动 */
  border-style: none;
}

svg { flex: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

th { text-align: left; }

hr {
  border: 0;
  border-top: var(--bd-1) solid var(--c-line);
  margin: 0;
}

[hidden] { display: none !important; }

/* 贴底页脚：短页面也不让页脚浮在半空 */
body {
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

/* ==========================================================================
 * 2. 排版基线
 * ========================================================================*/

h1, h2, h3, h4, h5, h6 {
  color: var(--c-text);
  font-weight: var(--fw-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

/* 中文正文不缩放字距；中文大标题仅极轻微收紧（SPEC §2） */
:lang(zh) h1,
:lang(zh) h2,
:lang(zh) h3,
:lang(zh) h4,
:lang(zh) h5,
:lang(zh) h6 { letter-spacing: var(--ls-heading-cn); }

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
}

h2 { font-size: var(--fs-h2); }

h3 { font-size: var(--fs-h3); }

h4 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
}

h5 {
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
}

h6 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-none);
}

h1 + p, h2 + p, h3 + p, h4 + p { margin-top: var(--sp-4); }

p + p { margin-top: var(--sp-4); }

h2 { margin-top: var(--sp-12); }
h3 { margin-top: var(--sp-8); }
h4 { margin-top: var(--sp-6); }

h1:first-child, h2:first-child, h3:first-child, h4:first-child,
h5:first-child, h6:first-child { margin-top: 0; }

ul, ol { padding-left: var(--sp-6); }

/* 注意：相邻项间距**只作用于长文**，绝不能全局生效。
   .grid / .steps / .checklist / .footer__list 这类栅格容器里的 <li> 是布局单元，
   而栅格中 margin 不折叠 —— 一条全局 li + li 会把第 2、3 个格子整体顶下去 8px，
   卡片的顶边就对不齐了。组件层另有一条显式 margin-top:0 兜底。 */
.prose li + li { margin-top: var(--sp-2); }

.prose li > ul,
.prose li > ol { margin-top: var(--sp-2); }

a {
  color: var(--c-accent-hi);
  text-decoration: none;
  text-underline-offset: 0.2em;
  text-decoration-thickness: from-font;
  transition: color var(--t-fast);
}

a:hover {
  color: var(--c-text);
  text-decoration: underline;
}

a:active { color: var(--c-accent-hi); }

strong, b {
  color: var(--c-text);
  font-weight: var(--fw-semi);
}

em, i { font-style: italic; }

small {
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}

code, kbd, samp, pre {
  font-family: var(--f-mono);
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
}

code {
  color: var(--c-text);
  background-color: var(--c-surface-2);
  border: var(--bd-1) solid var(--c-line-soft);
  border-radius: var(--r-sm);
  padding: 0.1em 0.38em;
}

pre {
  overflow-x: auto;
  color: var(--c-text);
  background-color: var(--c-surface);
  border: var(--bd-1) solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  line-height: 1.6;
}

pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: 1em;
}

blockquote {
  border-left: var(--bd-1) solid var(--c-line);
  padding-left: var(--sp-5);
  color: var(--c-text-2);
}

/* 数字 / 版本号 / 表数据统一等宽表格数字 */
.num,
time,
[data-num] { font-variant-numeric: tabular-nums; }

::selection {
  background-color: var(--c-accent-dim);
  color: var(--c-text);
}

/* ==========================================================================
 * 3. 焦点与跳转（无障碍）
 * ========================================================================*/

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* 鼠标点击不显示焦点环，键盘操作始终显示（上一行的 :focus-visible 兜底） */
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: var(--z-toast);
  display: inline-block;
  transform: translateY(calc(-100% - var(--sp-4)));
  padding: var(--sp-3) var(--sp-5);
  min-height: var(--tap-min);
  background-color: var(--c-surface-2);
  border: var(--bd-1) solid var(--c-line);
  border-radius: var(--r-md);
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  box-shadow: var(--sh-2);
  transition: transform var(--t-fast);
}

.skip-link:focus {
  transform: translateY(0);
  text-decoration: none;
  color: var(--c-text);
}

/* 屏幕阅读器专用文本 */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
 * 4. 布局原语：.container / .section（SPEC §4）
 * ========================================================================*/

.container {
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

.container--wide { max-width: var(--w-wide); }

.container--text { max-width: var(--w-text); }

@media (min-width: 640px) {
  .container { padding-inline: var(--sp-8); }
}

.section {
  padding-block: var(--sp-16);
}

.section--tight { padding-block: var(--sp-12); }

/* 用表面色阶代替描边做区块分隔 */
.section--alt {
  background-color: var(--c-bg-soft);
  border-block: var(--bd-1) solid var(--c-line-soft);
}

.section--flush-top { padding-top: 0; }

.section--flush-bottom { padding-bottom: 0; }

@media (min-width: 640px) {
  .section { padding-block: var(--sp-20); }
  .section--tight { padding-block: var(--sp-16); }
}

@media (min-width: 900px) {
  .section { padding-block: var(--sp-24); }
  .section--tight { padding-block: var(--sp-20); }
}

/* ==========================================================================
 * 5. 区块标题组：.section-head / .eyebrow / .section-title / .section-sub
 * ========================================================================*/

.section-head {
  max-width: var(--w-text);
  margin-bottom: var(--sp-8);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--wide { max-width: 60ch; }

.eyebrow {
  display: block;
  margin-bottom: var(--sp-3);
  color: var(--c-text-3);
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  line-height: 1.4;
}

/* 全大写只对拉丁字母有意义；中文不做 text-transform */
:lang(en) .eyebrow { text-transform: uppercase; }

.section-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-heading);
  color: var(--c-text);
  line-height: var(--lh-heading);
  text-wrap: balance;
  margin: 0;
}

:lang(zh) .section-title { letter-spacing: var(--ls-heading-cn); }

.section-sub {
  margin-top: var(--sp-4);
  max-width: 62ch;
  color: var(--c-text-2);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

.section-head--center .section-sub { margin-inline: auto; }

@media (min-width: 900px) {
  .section-head { margin-bottom: var(--sp-10); }
}

/* ==========================================================================
 * 6. .prose —— 长文排版容器
 * ========================================================================*/

.prose {
  max-width: var(--w-text);
  color: var(--c-text-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.prose > * + * { margin-top: var(--sp-5); }

.prose h2 {
  margin-top: var(--sp-12);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-h3);
}

.prose h3 {
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-none);
}

.prose h4 {
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
}

.prose p,
.prose li {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.prose ul,
.prose ol {
  padding-left: var(--sp-6);
}

.prose li::marker { color: var(--c-text-4); }

.prose a {
  color: var(--c-accent-hi);
  text-decoration: underline;
  text-decoration-color: var(--c-accent-line);
}

.prose a:hover {
  color: var(--c-text);
  text-decoration-color: currentColor;
}

.prose code { white-space: nowrap; }

.prose pre code { white-space: pre; }

.prose hr {
  margin-block: var(--sp-8);
}

.prose blockquote {
  margin-block: var(--sp-6);
  color: var(--c-text-2);
}

.prose table {
  width: 100%;
  margin-block: var(--sp-6);
  font-size: var(--fs-sm);
}

.prose th,
.prose td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--bd-1) solid var(--c-line);
  text-align: left;
  vertical-align: top;
}

.prose th {
  color: var(--c-text);
  font-weight: var(--fw-semi);
  border-bottom-color: var(--c-line);
}

.prose tbody tr:last-child td { border-bottom: 0; }

.prose > :first-child { margin-top: 0; }

.prose > :last-child { margin-bottom: 0; }

/* ==========================================================================
 * 7. 动效降级（SPEC §5 硬性要求）
 * ========================================================================*/

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* 说明：这里不做全局 transform:none —— 那会破坏用 transform 做居中的静态装饰
     （例如下拉框 chevron）。位移动画的取消由各组件的降级块负责
     （见 components.css / appwin.css 里的 prefers-reduced-motion 段）。 */
}

/* ==========================================================================
 * 8. 打印基础降级
 * ========================================================================*/

@media print {
  html,
  body {
    background: var(--c-print-bg);
    color: var(--c-print-text);
  }

  /* 深色界面元素打印时全部反相为白底黑字 */
  h1, h2, h3, h4, h5, h6,
  strong, b,
  code, pre, kbd, samp {
    color: var(--c-print-text);
  }

  a,
  .prose a {
    color: var(--c-print-text);
    text-decoration: underline;
  }

  /* 打印时把链接目标附在文字后面，纸上也能追溯 */
  .prose a[href^="http"]::after {
    content: " (" attr(href) ")";
    color: var(--c-print-mute);
    font-size: var(--fs-xs);
    word-break: break-all;
  }

  code, pre {
    background: none;
    border-color: var(--c-print-line);
  }

  .section { padding-block: var(--sp-6); }

  .section--alt {
    background: none;
    border-color: var(--c-print-line);
  }

  hr,
  .prose th,
  .prose td { border-color: var(--c-print-line); }

  /* 交互外壳不打印 */
  .site-header,
  .site-footer,
  .nav-toggle,
  .skip-link,
  .btn { display: none !important; }
}