/* ============================================================================
   基础层 —— 重置 + 全局排版 + 字号档位
   ----------------------------------------------------------------------------
   这一层只做三件事：
     1) 抹平浏览器默认差异
     2) 提供【字号档位】的唯一开关（改 <html> 根字号，全站 rem 字号整体缩放）
     3) 定下 body 的字体/颜色/行高
   具体组件样式不在这里。
   ============================================================================ */

/* ---------- 1. 重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote,
dl, dd, ol, ul, fieldset, legend, input, button, textarea, select {
  margin: 0;
  padding: 0;
}

ol[role="list"], ul[role="list"] { list-style: none; }

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }          /* 配合 HTML 上的 width/height 属性，避免布局跳动 (CLS) */

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

table { border-collapse: collapse; border-spacing: 0; }

/* ---------- 2. 字号档位（唯一开关） ----------
   在 <html> 上写 data-fs="small | (无) | large | xlarge" 即可整体缩放。
   注意：用的是百分比而非固定 px —— 这样浏览器自身的默认字号设置依然生效（无障碍要求）。
   —— 设置模块以后只需要改这个属性一个值，不必改任何字号具体数值。 */
html {
  font-size: 100%;        /* 标准（默认） */
  background: var(--bg);  /* 让 <html> 也涂上主题底色：避免 overscroll / 未铺满区域
                             露出浏览器默认的白色或深灰，跟页面底色不一致 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html[data-fs="small"]  { font-size: 93.75%; }  /* 小   ≈ 15px 基准 */
html[data-fs="large"]  { font-size: 112.5%; }  /* 大   ≈ 18px 基准 */
html[data-fs="xlarge"] { font-size: 125%; }    /* 特大 ≈ 20px 基准 */

/* ---------- 3. 全局排版 ---------- */
html { scroll-behavior: smooth; }
@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;
  }
}

body {
  min-height: 100dvh;                       /* 移动端地址栏收放时不抖动 */
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 标题与数字走 UI 字体（Space Grotesk + 中文回退） */
h1, h2, h3, h4, h5, h6,
.ui-font { font-family: var(--font-ui); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); }

/* 数字对齐：表格、统计、时间用等宽数字，避免跳动 */
.tnum, time, td.num { font-variant-numeric: tabular-nums; }

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

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }

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

/* ---------- 4. 无障碍：焦点指示（务必保留，不要 outline:none） ---------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* 屏幕阅读器专用文本 */
.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;
}

/* 跳过导航（键盘用户第一个 Tab 就能跳到正文） */
.skip-link {
  position: absolute; left: var(--sp-4); top: -100px;
  z-index: var(--z-toast);
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); color: var(--text);
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

/* ---------- 开发辅助：视口指示器 ----------
   只在 127.0.0.1 / localhost 下由 JS 注入，不会出现在正式部署里。
   作用：直接看到"页面此刻认为自己有多大"，用来区分
   「页面布局坏了」和「装页面的框本来就小」这两种完全不同的问题。 */
.vpbadge {
  position: fixed;
  left: var(--sp-2);
  bottom: var(--sp-2);
  z-index: var(--z-toast);
  padding: 2px var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  background: var(--surface);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  opacity: .8;
  cursor: pointer;
  user-select: none;
}
.vpbadge:hover { opacity: 1; color: var(--text); }

/* ---------- 5. 占位符（世界观内容尚未商议，模板里每一处空位都要有个标记） ----------
   约定（已与用户确认）：
     .ph      正文里表示"这里将来会有字"  → 灰斜体
     .ph-box  列表/卡片里表示"这里将来会有内容" → 纯虚线色块，不带字，不干扰版式
   两者都不写死任何具体文字，改内容只改 data/ 下的 JSON。
   ---------------------------------------------------------------------------- */
.ph {
  color: var(--ph-text);
  font-style: italic;
}

.ph-box {
  display: block;
  min-height: 1em;
  background: var(--ph-bg);
  border: 1px dashed var(--ph-line);
  border-radius: var(--r-xs);
}

/* 卡片封面等固定比例的占位块 */
.ph-cover {
  aspect-ratio: 2 / 3;
  background: var(--ph-bg);
  border: 1px dashed var(--ph-line);
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
}
.ph-cover::after {
  content: "封面位";
  font-size: var(--fs-2xs);
  color: var(--ph-text);
  letter-spacing: var(--ls-wide);
}