/* ============================================================================
 *  1010.WANG · 基线层 —— reset · 字面 · html/body · 排版基准
 *  规格书: ../../../DESIGN.md §2.1 §3
 *
 *  依赖 tokens.css 先于本文件引入。
 * ========================================================================== */

/* ---- 字面:自托管 Manrope 可变字体,拉丁子集 24 KB ----------------------- *
 * 一个文件覆盖 200–800 全部字重 —— 六档字重各自都有真实字面,浏览器永远
 * 不需要合成加粗。这比五个静态档更小(24 KB vs 约 150 KB)也更准。
 * Manrope 本就不含中文字形,中文走下方 --font 的 PingFang / YaHei fallback。 */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../webfont/fonts/manrope-var-latin.woff2') format('woff2-variations'),
       url('../webfont/fonts/manrope-var-latin.woff2') format('woff2');
}

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

* { margin: 0; }

/* 全站唯一一处 !important,理由在此:UA 的 `[hidden]{display:none}` 是**作者样式恒压**
   的,任何组件类的 display 都会赢过它 —— `.stack`(display:grid)、`.screen-state`
   (grid)、reset 里的 `img{display:block}` 全在此列。于是「藏起来」这个动作在三个
   页面上同时失效:概览页的加载态与内容同屏、管理面板七个 panel 一起显形、文章页
   空 hero 占着位。把语义还给属性,组件类不必再各自记得让路。 */
[hidden] { display: none !important; }

/* 防闪不变式:html 与 body 的底色都必须等于 --bg,且写在这里而非页面级 <style>。
   少一处,切页时会闪。移动端的对应规约是「三处底色必须相等」。 */
html,
body {
  background-color: var(--bg);
}

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;   /* 有无滚动条时页面不横跳,替掉旧的 modal padding 补偿 */
}

body {
  min-block-size: 100dvh;
  background-image: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--font);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
canvas { display: block; max-inline-size: 100%; }

img { block-size: auto; }

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

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

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

ul, ol { list-style: none; padding: 0; }

table { border-collapse: collapse; inline-size: 100%; }

/* 焦点:只给键盘用户,鼠标点击不画环 */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---- 排版基准 ----------------------------------------------------------- */
h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.25;
}

/* 数字文本一律等宽 —— 比例数字在刷新时会让整行左右抖动。这是一个数字每 30 秒
   重验一次的界面,不用等宽数字就等于让页面持续痉挛。 */
.tabular { font-variant-numeric: tabular-nums; }

/* 密排数值处降行高 */
.leading-tight { line-height: 1.2; }

/* 屏读器可见、视觉隐藏 */
.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 滚动容器:隐藏滚动条但保留滚动(替掉 smooth-scrollbar 那 52KB) */
.scroll-y {
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
}
.scroll-y::-webkit-scrollbar { display: none; }

/* ---- 无障碍兜底 --------------------------------------------------------- *
 * 用 1ms 而非 0s:保留 animationend 事件的触发,避免依赖它的 JS 静默失效。 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}