/*
 * WebUI 运行基线（02 §5.1：文档级注入三件套之一）
 * 仅元素级 reset 与文档根样式，零类选择器；
 * 壳与插件共享，插件不引入任何样式文件。
 */

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

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  /* 触屏手感：移动端去除点击灰闪，聚焦态由各控件 :focus-visible 令牌环承载 */
  -webkit-tap-highlight-color: transparent;
}

#app {
  height: 100%;
}

/* 交互元素触屏基线：manipulation 仅去除双击缩放 300ms 延迟，不影响滚动/输入手势 */
a,
button,
[role='button'],
summary,
label,
select,
input,
textarea {
  touch-action: manipulation;
}

/* 发布页内容根（19 §5 预渲染契约结构 main[data-site] > #host-root）：
 * 控件容器查询锚点（39 §2 基建）——@container 三档断点以此宽度为基准；
 * 49 §D-2 内容宽单一真相：--page-w 限宽居中，与设计器 .canvas-page 同令牌
 * （所见即所得——容器宽度一致则 @container 档位与布局一致）。
 * header/footer/custom 部件在 #host-root 外仍通栏，不受限宽影响。 */
#host-root {
  container-type: inline-size;
  max-width: var(--page-w);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* 入场 reveal（39 §5）：host-client IntersectionObserver 后挂 data-reveal
 * 初始态 → 进入视口 data-revealed 过渡显现（上移淡入）；SSR 直出内容完整
 * 在位——无 JS 时零标记零隐藏（07 §5 完整性）；prefers-reduced-motion 双保险：
 * host-client 检测跳过挂标记 + 此处 @media 强制可见（运行中切换偏好亦成立） */
#host-root [data-reveal] {
  opacity: 0;
  transform: translateY(var(--motion-reveal-offset));
}

#host-root [data-reveal][data-revealed] {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--motion-reveal-duration) var(--ease-smooth),
    transform var(--motion-reveal-duration) var(--ease-smooth);
}

@media (prefers-reduced-motion: reduce) {
  #host-root [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

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

/* 全局 reduced-motion 兜底（可访问性基线）：用户开启「减少动态效果」时，
   全站过渡/动画压到近零——各业务显式 @media 规则仍优先，本规则只兜底未逐处
   声明的 spinner/呼吸/出入场等；scroll-behavior 同步关闭（WCAG 2.3.3）。 */
@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;
  }
}