/* ============================================================
   hud.base.css — 基础层：底、字、数字、焦点、滚动条
   ============================================================ */

.hud-root,
[data-hud] body {
  background: var(--hud-bg-1);
  color: var(--hud-ink-1);
  font-family: var(--hud-sans);
  font-size: var(--hud-fs-body);
  line-height: var(--hud-lh);
  -webkit-font-smoothing: antialiased;
}

/* ---------- 排版 ---------- */
.hud-h1   { font-size: var(--hud-fs-h1);   font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.hud-h2   { font-size: var(--hud-fs-h2);   font-weight: 700; letter-spacing: -.005em; line-height: 1.25; }
.hud-label{
  font-family: var(--hud-mono);
  font-size: var(--hud-fs-label);
  letter-spacing: .06em;          /* 中文 ≤ .08em，且必须 em */
  color: var(--hud-ink-2);
}
.hud-micro{
  font-family: var(--hud-mono);
  font-size: var(--hud-fs-micro);
  letter-spacing: .05em;
  color: var(--hud-ink-3);
}

/* 中文不加 text-transform，改用字重与前缀符号 */
.hud-label--slash::before { content: "// "; color: var(--hud-ink-4); }
.hud-label--arrow::before { content: ">_ "; color: var(--hud-accent); }
.hud-label--hash::before  { content: "# ";  color: var(--hud-ink-4); }

/* ---------- 数字：必须等宽 ---------- */
.hud-num,
.hud-kpi__value,
.hud-readout .v,
.hud-table td,
[data-hud-num] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.hud-unit {
  font-family: var(--hud-mono);
  font-size: var(--hud-fs-micro);
  letter-spacing: .06em;
  color: var(--hud-ink-3);
  margin-left: 3px;
}

/* ---------- 焦点：不用浏览器默认 outline ---------- */
.hud-root :focus-visible,
[data-hud] :focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--hud-a52);
}

/* ---------- 滚动条 ---------- */
.hud-root ::-webkit-scrollbar,
[data-hud] ::-webkit-scrollbar { width: 8px; height: 8px; }
.hud-root ::-webkit-scrollbar-thumb,
[data-hud] ::-webkit-scrollbar-thumb {
  background: var(--hud-a32);
  border-radius: 0;
}
.hud-root ::-webkit-scrollbar-track,
[data-hud] ::-webkit-scrollbar-track { background: var(--hud-bg-2); }

/* ---------- 选区 ---------- */
.hud-root ::selection,
[data-hud] ::selection { background: var(--hud-a52); color: var(--hud-bg-1); }

/* ---------- 分隔线 ---------- */
.hud-hr {
  height: 1px;
  border: 0;
  background: var(--hud-line-1);
  margin: var(--hud-gap) 0;
}

/* ---------- 栅格 ---------- */
.hud-grid {
  display: grid;
  gap: var(--hud-gap);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.hud-grid > .col-3  { grid-column: span 3; }
.hud-grid > .col-4  { grid-column: span 4; }
.hud-grid > .col-6  { grid-column: span 6; }
.hud-grid > .col-8  { grid-column: span 8; }
.hud-grid > .col-12 { grid-column: span 12; }

@media (max-width: 900px) {
  .hud-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hud-grid > .col-3, .hud-grid > .col-4 { grid-column: span 3; }
  .hud-grid > .col-6, .hud-grid > .col-8, .hud-grid > .col-12 { grid-column: span 6; }
}
@media (max-width: 640px) {
  .hud-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hud-grid > * { grid-column: span 1 !important; }
}