/* ═══════════════════════════════════════════════════════════════════════
   base.css — 重置、排版基线、通用原子与页面外壳
   ═══════════════════════════════════════════════════════════════════════ */

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

html {
  scrollbar-width: thin;
  scrollbar-color: rgba(145, 169, 255, 0.28) transparent;
  /* 禁掉「横滑返回上一页」的手势。
     起因：曲线图要支持左右拖动（chart.js 在图上监听了水平拖动），
     而触屏上水平滑动到页面边缘会触发浏览器/系统的「前进后退」手势 ——
     实测在曲线图上横拖，页面会直接跳到上一页（甚至整页看起来「清空」了）。
     这不是图表的问题（在功能卡片区横拖也一样），是 overscroll 行为，
     但它会让人以为站点坏了，所以在这里统一关掉。
     contain 表示「只禁止传播给浏览器做导航，不禁止页面自身的滚动」。 */
  overscroll-behavior-x: contain;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  overflow-x: clip;
  overscroll-behavior-x: contain;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 首屏入场期间锁滚动，由 JS 摘除 */
body.is-locked { overflow: hidden; }

::selection { background: rgba(145, 169, 255, 0.3); color: #fff; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
em { font-style: normal; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

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

.mono { font-family: var(--font-mono); }
.num  { font-variant-numeric: tabular-nums; }   /* 变动的数字定宽，防左右抖 */

/* 仅供屏幕阅读器 */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─────────────────── 背景层：网格 + 噪点 ─────────────────── */

.bg-grid {
  position: fixed; inset: 0; z-index: var(--z-bg); pointer-events: none;
  background-image:
    linear-gradient(rgba(145, 169, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(145, 169, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 12%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 12%, transparent 78%);
}

/* 噪点用内联 SVG feTurbulence 生成：零请求、随分辨率无损。
   用 background-position 抖动而不是 transform —— transform 会把元素推出视口，
   在窄屏上造成横向滚动；background-position 不会影响布局。 */
.grain {
  position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none;
  opacity: 0.055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(3) infinite;
}
/* 只动 background-position：噪点会抖动（胶片感保留），但绝不产生横向滚动 */
@keyframes grain {
  0%   { background-position: 0 0; }
  33%  { background-position: -38px 24px; }
  66%  { background-position: 28px -32px; }
  100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }

/* ─────────────────── 通用原子 ─────────────────── */

/* 刊头短横线：全站复用，只改宽度与颜色就变成不同场景的分隔符 */
.tick {
  display: inline-block; width: 30px; height: 1px;
  background: var(--accent); box-shadow: var(--glow-dot); flex: none;
}
.tick--amber { background: var(--warn); box-shadow: 0 0 8px rgba(255, 179, 95, 0.5); }
.tick--green { background: var(--green); box-shadow: 0 0 8px rgba(7, 193, 96, 0.5); }

/* mono 小标签 */
.eyebrow {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs); letter-spacing: var(--ls-label);
  color: var(--fg-dim); text-transform: uppercase;
}

/* 药丸徽章 */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.12em; color: var(--badge-fg); background: var(--badge-bg);
}
.badge--accent { border-color: var(--line-accent); color: var(--accent); background: var(--accent-soft); }
.badge--green  { border-color: rgba(7, 193, 96, 0.4); color: var(--ok); background: var(--green-soft); }
.badge--warn   { border-color: rgba(255, 179, 95, 0.4); color: var(--warn); background: rgba(255, 179, 95, 0.12); }

/* 空心描边巨号编号 —— 参考站点最有质感的编号写法 */
.big-num {
  font-family: var(--font-mono); font-weight: var(--fw-black);
  font-size: clamp(3.2rem, 7vw, 6.4rem); line-height: 0.76;
  color: transparent; -webkit-text-stroke: 1.5px rgba(145, 169, 255, 0.62);
  text-shadow: 0 0 44px rgba(145, 169, 255, 0.18);
  font-variant-numeric: tabular-nums;
  user-select: none;
}

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 10px 18px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: rgba(5, 7, 15, 0.55); backdrop-filter: blur(10px);
  font-size: var(--fs-sm); letter-spacing: 0.04em; color: var(--fg);
  transition: border-color var(--dur-base), background var(--dur-base), color var(--dur-base);
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn--primary {
  background: var(--accent-strong); border-color: var(--accent-strong);
  color: var(--fg-inverse); font-weight: var(--fw-semi);
}
.btn--primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: var(--fg-inverse); }
/* 红色主行动按钮：「看看能做什么」 */
.btn--red {
  background: var(--red); border-color: var(--red);
  color: #fff; font-weight: var(--fw-semi);
  box-shadow: 0 6px 22px var(--red-glow), 0 1px 0 rgba(255, 255, 255, 0.24) inset;
}
.btn--red:hover {
  background: var(--red-hi); border-color: var(--red-hi); color: #fff;
  box-shadow: 0 8px 28px rgba(240, 65, 63, 0.46), 0 1px 0 rgba(255, 255, 255, 0.24) inset;
}
.btn--ghost { border-color: transparent; }
.btn--sm { padding: 6px 12px; font-size: var(--fs-xs); }
/* 主行动按钮（下载）：比普通按钮更大更亮，是首屏最想让人点的那个 */
.btn--lg {
  padding: 14px 30px; font-size: var(--fs-lg); letter-spacing: 0.03em;
  border-radius: var(--r-pill);
  box-shadow: 0 6px 22px rgba(113, 143, 255, 0.32), 0 1px 0 rgba(255, 255, 255, 0.22) inset;
}
.btn--lg:hover {
  box-shadow: 0 8px 28px rgba(113, 143, 255, 0.45), 0 1px 0 rgba(255, 255, 255, 0.22) inset;
  transform: translateY(-1px);
}
.btn--lg:active { transform: translateY(0); }
.btn__ico { display: inline-flex; }
.btn__big { font-weight: var(--fw-bold); }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

/* ─────────────────── 顶部导航 ─────────────────── */

.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex; align-items: center; gap: var(--sp-4);
  padding-inline: var(--sp-gutter);
  border-bottom: 1px solid transparent;
  background: linear-gradient(180deg, rgba(5, 7, 15, 0.92), rgba(5, 7, 15, 0.62));
  backdrop-filter: blur(16px);
  transition: border-color var(--dur-base), background var(--dur-base);
}
.nav.is-stuck { border-bottom-color: var(--line); }

.nav__brand {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  min-height: 44px;              /* 触摸目标：品牌是回首页的主要入口 */
  padding-right: var(--sp-2);
  font-weight: var(--fw-bold); letter-spacing: var(--ls-title);
  flex: none;
}
.nav__logo {
  width: 26px; height: 26px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--accent-strong), #3f56b8);
  color: var(--fg-inverse); font-size: 14px; font-weight: var(--fw-black);
  box-shadow: var(--glow-dot);
}
.nav__name { font-size: var(--fs-base); }
.nav__ver  { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.14em; color: var(--fg-faint); }

/* 面包屑：总览 › 模块名，返回总览的入口之一 */
.nav__crumbs {
  display: flex; align-items: center; gap: var(--sp-2);
  min-width: 0; overflow: hidden;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.1em; color: var(--fg-faint);
}
.nav__crumb { color: var(--fg-dim); transition: color var(--dur-base); }
.nav__crumb:hover { color: var(--accent); }
.nav__crumb--here { color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav__sep { color: var(--fg-faint); opacity: 0.6; }

.nav__spacer { flex: 1 1 auto; }
.nav__links { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.nav__menu-btn { display: none; }

@media (max-width: 720px) {
  .nav__crumbs { display: none; }
  .nav__ver { display: none; }
  .nav__menu-btn { display: inline-flex; }
}

/* ─────────────────── 右侧章节指示轨 ─────────────────── */

.rail {
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%);
  z-index: var(--z-nav);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  pointer-events: none;
}
.rail__num {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.14em; color: var(--accent);
}
.rail__track {
  width: 1px; height: 120px; background: var(--line); position: relative;
}
.rail__fill {
  position: absolute; inset: 0 auto 0 0; width: 100%; height: 0%;
  background: var(--accent); box-shadow: var(--glow-dot);
  transition: height var(--dur-fast) linear;
}
@media (max-width: 1160px) { .rail { display: none; } }

/* ─────────────────── 页脚 ─────────────────── */

.foot {
  border-top: 1px solid var(--line);
  padding: var(--sp-8) var(--sp-gutter) var(--sp-7);
  margin-top: var(--sp-section);
  display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-7);
  align-items: flex-start; justify-content: space-between;
  color: var(--fg-faint); font-size: var(--fs-sm);
}
.foot__col { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.foot__k { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-label); color: var(--fg-faint); }
.foot__v { color: var(--fg-dim); }
.foot__v b { color: var(--fg); font-weight: var(--fw-med); }
/* 页脚里的下载入口：需要看起来可点，而不是普通说明文字 */
.foot__lk {
  color: var(--accent); font-weight: var(--fw-med);
  border-bottom: 1px solid var(--line-accent); align-self: flex-start;
  transition: color var(--dur-base), border-color var(--dur-base);
}
.foot__lk:hover { color: var(--accent-hi); border-color: var(--accent-hi); }

/* ─────────────────── 入场动画 ─────────────────── */

/* 元素进入视口时由 IntersectionObserver 加上 .is-in */
[data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* ─────────────────── 手机端适配 ─────────────────── */
/*
 * 这个站的主要读者在手机上，所以手机端不是「缩小版桌面」，
 * 而是把有限的宽度全部让给内容：单列、好点、字号不上不下。
 * 令牌层面的调整在 tokens.css，这里处理结构与触摸目标。
 */
@media (max-width: 900px) {

  /* 触摸目标下限：所有可点控件至少 40px 高。
     用 min-height 而不是 padding 硬撑，图标按钮与文字按钮都能覆盖。 */
  .btn,
  .seg__b,
  .chip,
  .menu__i,
  .nav__crumb,
  .toc__a,
  .fpanel__b {
    min-height: var(--tap-min);
  }
  .btn, .chip, .seg__b { display: inline-flex; align-items: center; }
  /* 面包屑的「总览」是返回入口，单独给足高度 */
  .nav__crumb { display: inline-flex; align-items: center; padding-inline: 4px; }

  /* 滑块加粗、滑块头加大：手机上细轨道很难拖准 */
  .slider input[type="range"] { height: 8px; }
  .slider input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; }
  .slider input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; }

  /* 开关加大到 48×28，拇指更容易命中 */
  .switch__track { width: 48px; height: 28px; }
  .switch__track::after { width: 22px; height: 22px; }
  .switch input:checked + .switch__track::after { transform: translateX(20px); }
  .switch { padding-block: 4px; }

  /* 悬浮球放大到 56px：手机上 46px 的圆球偏小，长按区也更需要空间 */
  .balloon { width: 56px; height: 56px; }
  .balloon svg { width: 26px; height: 26px; }
  /* 拖拽容器给足高度，否则可移动范围太小 */
  .balloon-host { min-height: 190px; }

  /* 导航：手机上收起次要按钮，只留品牌 + 面包屑 + 一个主按钮 */
  .nav__links .btn:not(.btn--primary) { display: none; }
  /* 「点我下载」是首屏主行动，导航里也保留，但收紧内边距 */
  .nav__links .btn--primary { padding: 7px 13px; }

  /* 标签换行显示，不横向滚动 */
  .chips { gap: 6px; }
  .chip { font-size: var(--fs-xs); padding: 6px 11px; min-height: var(--tap-min); }

  /* 页脚链接：文字链接的可点区域只有文字本身，太小 */
  .foot__lk { display: inline-flex; align-items: center; min-height: var(--tap-min); }

  /* 功能点卡片：收紧内边距、放松行高 */
  .fp { padding: 14px 14px 14px 18px; }
  .fp__name { font-size: var(--fs-base); line-height: 1.45; }

  /* 键值表在窄屏改为上下排列，避免左侧标签挤压内容 */
  .mini-kv__r { flex-direction: column; gap: 2px; }
  .mini-kv__k { min-width: 0; }

  /* 代码与日志块：小字号 + 内部横向滚动，避免撑破卡片 */
  .code, .console { font-size: 11.5px; }

  /* 手机模型在窄屏占满可用宽度 */
  .device { max-width: 100%; }
  .device__screen { max-height: 280px; }

  /* 详情页大编号缩小，不抢标题视觉 */
  .big-num { font-size: 3rem; }

  /* 长文本行高放松，手机上更好读 */
  .stage__note, .fp__desc, .card__blurb { line-height: 1.7; }
}

/* 触摸设备：hover 效果没有意义，反而会在点按后残留高亮 */
@media (hover: none) {
  .card:hover { transform: none; }
  .card:hover::after { transform: scaleX(0); }
  .pager__a:hover { transform: none; }
  .ver:hover { transform: none; }
  .fp:hover { border-color: var(--line); background: var(--surface); }
  .swatch:hover { transform: none; }
  /* 触摸下改用 :active 给出即时反馈 */
  .card:active { transform: scale(0.99); }
  .btn:active { border-color: var(--accent); }
}