/* ============================================================================
   wx_parse 运营控制台 · 基础层
   职责：重置、排版基线、焦点可见性、可访问性、降级动效
   —— 不含任何组件样式（组件在 components.css）
   ============================================================================ */

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

/* hidden 的兜底：作者样式里的 .note{display:flex}、.gate{display:grid} 这类规则
   会盖过浏览器对 [hidden] 的 UA 规则（作者样式永远赢 UA 样式，比优先级更靠前），
   结果 hidden 了仍然渲染出一个空盒子（如配置页的 #cfgStatus）。
   这里用 !important 一刀切兜底 —— 所有显隐切换都走 hidden 属性、没有 style.display 直改，
   所以不会误伤。 */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

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

body {
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-body);
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 主题切换时页面整体平滑过渡，避免闪白 */
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

/* ---------- 排版基线 ---------- */
h1, h2, h3 {
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: -0.012em;
}

h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-base); }

/* 数字一律等宽且表格对齐 —— 数据密集界面的可读性底线 */
.num,
.tnum,
table td,
table th { font-variant-numeric: tabular-nums; }

.mono { font-family: var(--font-mono); }

a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 3px;
}
a:hover { text-decoration: underline; }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 1px 5px;
}

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

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

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

/* ---------- 焦点可见性（键盘可达的底线） ---------- */
:focus { outline: none; }

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

/* 跳转链接：键盘用户第一个可达元素 */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 200;
  padding: var(--sp-2) var(--sp-4);
  background: var(--accent);
  /* 实底上的字一律用 --accent-on，别硬编码 #fff：
     深色主题下 --accent 是亮蓝紫(#8095FF)，白字只有 ~2.1:1。 */
  color: var(--accent-on);
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  font-weight: 600;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--sp-4); text-decoration: 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;
}

/* ---------- 滚动条（与整体质感一致） ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--r-full);
}
*::-webkit-scrollbar-thumb:hover { background: var(--line-3); background-clip: content-box; }

/* ============================================================================
   入场序列（技能 §4 · 一个编排好的编排 > 零散微交互）
   3–6 组、错峰 70ms、只动 opacity 与 transform
   ============================================================================ */
.reveal {
  opacity: 0;
  transform: translateY(14px);
}

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
  }
  .reveal.is-in { opacity: 1; transform: none; }

  /* 错峰：每组 +70ms，共 6 组 */
  .reveal[data-delay="1"] { transition-delay: calc(var(--stagger) * 1); }
  .reveal[data-delay="2"] { transition-delay: calc(var(--stagger) * 2); }
  .reveal[data-delay="3"] { transition-delay: calc(var(--stagger) * 3); }
  .reveal[data-delay="4"] { transition-delay: calc(var(--stagger) * 4); }
  .reveal[data-delay="5"] { transition-delay: calc(var(--stagger) * 5); }

  /* 健康度条分段依次抽出 */
  .rail-seg {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .rail.is-in .rail-seg { transform: scaleX(1); }
  .rail.is-in .rail-seg:nth-child(1) { transition-delay: 60ms; }
  .rail.is-in .rail-seg:nth-child(2) { transition-delay: 130ms; }
  .rail.is-in .rail-seg:nth-child(3) { transition-delay: 200ms; }
  .rail.is-in .rail-seg:nth-child(4) { transition-delay: 270ms; }
  .rail.is-in .rail-seg:nth-child(5) { transition-delay: 340ms; }
  .rail.is-in .rail-seg:nth-child(6) { transition-delay: 410ms; }
  .rail.is-in .rail-seg:nth-child(7) { transition-delay: 480ms; }

  /* 条形图宽度生长 */
  .bar-fill {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .is-in .bar-fill { transform: scaleX(1); }
}

/* ============================================================================
   降级：prefers-reduced-motion: reduce → 关闭全部动效（技能 §4 铁律）
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .rail-seg { transform: none; }
  .bar-fill { transform: none; }
}

/* ---------- 打印（运维需要把单页导出成 PDF） ---------- */
@media print {
  .sidebar, .topbar, .scrim, .footer, .no-print { display: none !important; }
  body { background: #fff; }
  .main-col { margin-left: 0 !important; }
  .panel { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
}