/* ==========================================================================
   基础重置与排版（global reset + typography）

   只写「全局生效」的规则。任何带语义的 UI 组件请放到 03-components.css。
   ========================================================================== */

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

/* ★★ 全局兜底：让 HTML 的 hidden 属性说话（2026-10-12 第 25 轮）
   UA 样式表里只有 `[hidden]{display:none}`，**任何**作者样式写的
   `display:flex/grid/block` 都会盖掉它 → 元素永远显示，JS 再设 hidden 也没用。
   这类 bug 极易漏测（JS 逻辑是对的，坏在 CSS 层叠）。一条 !important 兜底全站。 */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  /* ★★★ 第 78 轮（v2）：横向裁剪放在**根元素**上 —— 唯一"不会制造第二个滚动容器"的写法。
     根元素的 overflow 会**传播给视口**，html 自己不会变成滚动容器，
     全程只有一个滚动源，手感才可能线性。

     ⚠️ 两种写法都已试过、都不行（业主真机反馈）：
       · `body { overflow-x: hidden }` → 规范把 overflow-y 提升成 auto，
         body 也成了滚动容器 → 两个滚动源打架，"滑一点窜很远"；
       · `body { overflow-x: clip }` → 定制 Chromium 上会引入 clip 上下文，
         实测更糟（"直接滑到顶了"）。
     所以：**别再往 body 上放 overflow**。

     ⚠️ 也**不再设置 `scroll-behavior`**：全站 smooth 在华为/小米等定制 Chromium
        上会被用到手势滚动里，把手指位移插值放大。浏览器默认就是最线性的；
        本站没有「回到顶部」按钮，锚点跳转不需要过渡，去掉零功能损失。 */
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  /* ★ 第 78 轮：底部条在 iPhone 上还有 `env(safe-area-inset-bottom)`（约 34px），
     只按 --mobile-bar-h 留白 → 页面最后一段文字会被条遮住一截。
     两边用同一个公式，别再各写一份。
     ⚠️ **body 上不写任何 overflow**（见 html 那段注释：写了就会多出滚动容器）。 */
  padding-block-end: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom, 0px));
}

/* 阿语字形比拉丁字更高更宽，需单独调字号行高，否则会裁切 */
html[lang="ar"] body {
  font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", sans-serif;
  font-size: 17px;
  line-height: 1.85;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
p  { margin: 0 0 1em; }

/* ---------- 布局容器 ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  /* 铁律 24：不用 padding 简写，避免覆盖容器的左右内边距 */
  padding-inline: 16px;
}
/* 长文阅读容器：限制行宽在 65~75 字符（可读性最佳区间） */
.container--narrow { max-width: var(--container-narrow); }

/* ---------- 无障碍 ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* 键盘可达性：不要去掉焦点框（移动端点击不该出现，用 :focus-visible 区分） */
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* ---------- 技术值 LTR 隔离 ----------
   型号 / 邮箱 / 参数值在 RTL（阿语）页面里仍要按 LTR 渲染，
   否则 "10000mAh" 会被双向算法拆成乱序。 */
.ltr-value { direction: ltr; unicode-bidi: isolate; text-align: start; }

/* ---------- 动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- 宽屏基础调整 ---------- */
@media (min-width: 640px) {
  .container { padding-inline: 24px; }
}