/* =============================================================================
   君安舆情对抗演练系统 · 基线样式（Base）
   依赖：tokens.css 必须先加载
   职责：reset + 排版基线 + 焦点环 + 布局工具类
   不含：具体组件样式（见 components.css）
   ========================================================================== */

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

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[class],
ol[class] {
  padding: 0;
  list-style: none;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--surface-0);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 表单控件统一继承字体，否则浏览器默认字体会在中文下明显不一致 */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  margin: 0;
}

button {
  background: none;
  border: 0;
  padding: 0;
  text-align: inherit;
}

/*
 * [hidden] 必须显式声明 display:none。
 * .alert / .tag / .chip 等组件设置了 display:flex，
 * 作者样式的优先级高于 UA 的 [hidden] { display:none }，
 * 若不写这条，hidden 属性会被静默失效 —— 空错误框常驻、普通用户看到错误的权限标签。
 */
[hidden] {
  display: none !important;
}

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

img {
  height: auto;
}

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

/* 表格数字对齐：所有关键数字必须等宽，避免跳动 */
table,
.tabular {
  font-variant-numeric: tabular-nums;
}

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

/* ---------------------------------------------------------------------------
   2. 排版阶梯
   每级都显式写 font-size + line-height + letter-spacing（来自 tokens）。
   中文标题不加 letter-spacing —— 仅 .t-micro 全大写英文标签例外。

   语义选择优先于视觉选择：
   页面主标题只用一次 .t-display；区块标题 .t-h1；小节 .t-h2；卡片 .t-h3。
   ------------------------------------------------------------------------ */

/* 页面主标题 —— 每页至多一次 */
.t-display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.t-h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.t-h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.t-h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.t-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.t-sm {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--text-secondary);
}

.t-xs {
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: var(--text-tertiary);
}

/* 全大写英文小标签 —— 全项目唯一允许 letter-spacing 的场景 */
.t-micro {
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-micro);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* 关键数字 */
.t-num {
  font-size: var(--fs-num);
  line-height: var(--lh-num);
  letter-spacing: var(--ls-num);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

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

/* 语义化颜色覆盖：文字角色 */
.c-primary {
  color: var(--text-primary);
}
.c-secondary {
  color: var(--text-secondary);
}
.c-tertiary {
  color: var(--text-tertiary);
}
.c-disabled {
  color: var(--text-disabled);
}
.c-accent {
  color: var(--accent);
}
.c-danger {
  color: var(--danger);
}
.c-success {
  color: var(--success);
}
.c-warning {
  color: var(--warning);
}

/* ---------------------------------------------------------------------------
   3. 元素默认排版
   ------------------------------------------------------------------------ */
h1,
h2,
h3,
h4 {
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  letter-spacing: 0; /* 中文标题不加字距 */
}

/* 正文行长上限 68ch —— 超过后中文阅读会明显吃力 */
p,
.prose {
  max-width: 68ch;
}

strong,
b {
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

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

/* 仅供屏幕阅读器 */
.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;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: var(--z-tooltip);
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  transition: top var(--t-fast) var(--ease-standard);
}
.skip-link:focus {
  top: var(--sp-4);
  color: var(--text-primary);
}

/* ---------------------------------------------------------------------------
   4. 焦点环
   键盘用户的唯一定位依据。所有可交互元素必须有可见焦点环。
   用 :focus-visible 而非 :focus，避免鼠标点击时出现多余描边。
   ------------------------------------------------------------------------ */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* 尊重系统偏好：关闭动画与过渡 */
@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;
  }
}

/* ---------------------------------------------------------------------------
   5. 布局工具类（克制，只提供真正复用的）
   ------------------------------------------------------------------------ */

/* 内容区：左对齐起排，最大 1200px —— 不居中单列（消除"落地页感"的关键） */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-inline: var(--sp-6);
}

.stack-1 > * + * {
  margin-top: var(--sp-1);
}
.stack-2 > * + * {
  margin-top: var(--sp-2);
}
.stack-3 > * + * {
  margin-top: var(--sp-3);
}
.stack-4 > * + * {
  margin-top: var(--sp-4);
}
.stack-5 > * + * {
  margin-top: var(--sp-5);
}
.stack-6 > * + * {
  margin-top: var(--sp-6);
}
.stack-8 > * + * {
  margin-top: var(--sp-8);
}

/* 横向排列：默认间距 --sp-2 */
.row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.row-tight {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

/* 两栏 / 三栏网格：断点处重排，不用 flex 百分比运算 */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}

/* 分隔线：区块之间用 1px 边界分隔，不堆叠色块 */
.divider {
  height: 1px;
  background: var(--border-subtle);
  border: 0;
}

.divider-v {
  width: 1px;
  align-self: stretch;
  background: var(--border-subtle);
}

.hidden {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   6. 响应式（重设计，非等比缩放）
   移动端必须重新选择字号档位，而不是乘系数。
   ------------------------------------------------------------------------ */

/* 1024–1279px：内容区 100%，两栏网格保留 */
@media (max-width: 1279px) {
  .container {
    max-width: 100%;
  }
}

/* 768–1023px：内容区加 24px padding，网格降为 1 列 */
@media (max-width: 1023px) {
  .container {
    padding-inline: var(--sp-5);
  }

  .grid-2,
  .grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* <768px：进一步收紧，标题降一档，触控目标放大到 44px */
@media (max-width: 767px) {
  .container {
    padding-inline: var(--sp-4);
  }

  .t-display {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
  }

  .t-h1 {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
  }

  .t-h2 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
  }
}