/* ============================================================
   hud.components.css — 十六个组件
   纪律：只引令牌，不出现字面色值；数字等宽；圆角 0
   ============================================================ */

/* ---------- 1. 面板 ---------- */
.hud-panel {
  clip-path: var(--cut-tl-br);
  background: var(--hud-bg-2);
  border: 1px solid var(--hud-line-1);
  padding: var(--hud-pad);
}
.hud-panel__title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--hud-mono);
  font-size: var(--hud-fs-label);
  letter-spacing: .06em;
  color: var(--hud-ink-2);
  margin-bottom: 14px;
}
.hud-panel__title::before {
  content: ""; width: 3px; height: 14px;
  background: var(--hud-accent);
  flex: none;
}
.hud-panel__title--slash::after { content: " //"; color: var(--hud-ink-4); }
.hud-panel__body { color: var(--hud-ink-1); }

/* ---------- 2. 按钮 ---------- */
.hud-btn {
  clip-path: var(--cut-tr);
  border-radius: 0;
  border: 1px solid var(--hud-line-1);
  background: transparent;
  color: var(--hud-ink-2);
  font-family: var(--hud-sans);
  font-size: var(--hud-fs-label);
  letter-spacing: .04em;
  padding: 7px 16px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background var(--hud-dur-1) var(--hud-ease-out),
              border-color var(--hud-dur-1) var(--hud-ease-out),
              color var(--hud-dur-1) var(--hud-ease-out),
              filter var(--hud-dur-1) var(--hud-ease-out),
              transform var(--hud-dur-1) var(--hud-ease-out);
}
/* 按钮有 clip-path，box-shadow 会被一起裁掉 —— 发光只能走 filter: drop-shadow（见 cut-system.md §六） */
.hud-btn:hover {
  border-color: var(--hud-a52); color: var(--hud-ink-1); background: var(--hud-a04);
  filter: drop-shadow(var(--hud-glow-sm));
  transform: translateY(-1px);   /* 悬停微抬，取归航卡片的位移反馈（见 components.md §2） */
}
/* 按下反馈取归航的 scale(.97)：这是操作确认，不是装饰，任何动效档都不关。 */
.hud-btn:active { transform: scale(.97); }
.hud-btn:disabled { opacity: .4; cursor: not-allowed; }
/* 关档只去掉悬停位移，按下反馈保留 */
[data-hud-motion="off"] .hud-btn:hover { transform: none; }

.hud-btn--primary {
  background: linear-gradient(180deg, var(--hud-a32), var(--hud-a18));
  border-color: var(--hud-a52);
  color: var(--hud-ink-1);
  position: relative;            /* 给对角短线做定位锚 */
}
.hud-btn--primary:hover { background: linear-gradient(180deg, var(--hud-a52), var(--hud-a32)); filter: drop-shadow(var(--hud-glow-md)); }
/* 对角装饰短线（取自归航 2026-09-21）：只给主按钮，别的档不加。
   按钮切的是右上 --cut-tr，左上 / 右下是完整直角，短线落这两处不会被裁 ——
   和面板 .hud-panel--edged 正好相反，因为面板切的是左上 + 右下（见 §10）。
   长度跟容器走：面板 34px，按钮只有 14px，照抄 34px 会横贯整个按钮。 */
.hud-btn--primary::before,
.hud-btn--primary::after {
  content: "";
  position: absolute;
  width: 14px; height: 2px;
  background: var(--hud-accent);
  pointer-events: none;
}
.hud-btn--primary::before { top: 0; left: 0; }
.hud-btn--primary::after  { bottom: 0; right: 0; }
/* 幽灵档：去边框，hover 才浮出描边。基类那 1px 边就是「描边档」——
   幽灵档若照抄基类写法，两档视觉不可分（见 references/components.md §2）。 */
.hud-btn--ghost { border-color: transparent; }
.hud-btn--ghost:hover { border-color: var(--hud-line-1); }
.hud-btn--danger { border-color: color-mix(in srgb, var(--hud-danger) 60%, transparent); color: var(--hud-danger); }
.hud-btn--danger:hover { background: color-mix(in srgb, var(--hud-danger) 12%, transparent); }

/* ---------- 3. KPI ---------- */
.hud-kpi {
  clip-path: var(--cut-tr);
  background: var(--hud-bg-3);
  padding: 16px 18px;
  border: 1px solid var(--hud-line-2);
}
.hud-kpi__label {
  font-family: var(--hud-mono);
  font-size: var(--hud-fs-label);
  letter-spacing: .04em;
  color: var(--hud-ink-2);
}
.hud-kpi__row { display: flex; align-items: baseline; margin-top: 8px; }
.hud-kpi__value {
  font-size: var(--hud-fs-kpi);
  font-weight: 700;
  color: var(--hud-ink-1);
  min-width: 5ch;              /* 数值跳动不推挤 */
  line-height: 1;
  text-shadow: var(--hud-glow-lg);   /* 霓虹发光：只引令牌，禁手写 rgba */
}

/* ---------- 4. 芯片 ---------- */
.hud-chip {
  display: inline-flex; align-items: center; gap: 5px;
  clip-path: var(--cut-tr);
  padding: 3px 10px;
  font-family: var(--hud-mono);
  font-size: var(--hud-fs-micro);
  letter-spacing: .06em;
  border: 1px solid var(--hud-a32);
  background: var(--hud-a08);
  color: var(--hud-accent);
}
.hud-chip--ok     { border-color: color-mix(in srgb, var(--hud-ok) 45%, transparent);     background: color-mix(in srgb, var(--hud-ok) 10%, transparent);     color: var(--hud-ok); }
.hud-chip--warn   { border-color: color-mix(in srgb, var(--hud-warn) 45%, transparent);   background: color-mix(in srgb, var(--hud-warn) 10%, transparent);   color: var(--hud-warn); }
.hud-chip--danger { border-color: color-mix(in srgb, var(--hud-danger) 45%, transparent); background: color-mix(in srgb, var(--hud-danger) 10%, transparent); color: var(--hud-danger); }

/* ---------- 5. 读数行 ---------- */
.hud-readout {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 6px 0;
  border-bottom: 1px solid var(--hud-line-2);
}
.hud-readout .k { color: var(--hud-ink-2); font-size: var(--hud-fs-label); letter-spacing: .03em; }
.hud-readout .v { color: var(--hud-ink-1); font-weight: 600; min-width: 5ch; text-align: right; }
.hud-readout .v em { font-style: normal; color: var(--hud-ink-3); font-size: var(--hud-fs-micro); margin-left: 3px; }

/* ---------- 6. 状态点 ---------- */
.hud-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--hud-mono);
  font-size: var(--hud-fs-label);
  letter-spacing: .04em;
  color: var(--hud-ink-2);
}
.hud-status::before {
  content: ""; width: 6px; height: 6px; flex: none;
  background: currentColor;
  animation: hud-pulse 2.4s linear infinite;   /* 循环 → linear */
}
.hud-status--ok     { color: var(--hud-ok); }
.hud-status--warn   { color: var(--hud-warn); }
.hud-status--danger { color: var(--hud-danger); }
.hud-status--idle   { color: var(--hud-ink-3); }
.hud-status--idle::before { animation: none; }

/* ---------- 7. 进度条 ---------- */
.hud-bar {
  clip-path: var(--cut-bar);
  height: 6px;
  background: var(--hud-a08);
  overflow: hidden;
}
.hud-bar__fill {
  height: 100%;
  background: var(--hud-accent);
  transition: width var(--hud-dur-2) var(--hud-ease-io);
}
.hud-bar--warn   .hud-bar__fill { background: var(--hud-warn); }
.hud-bar--danger .hud-bar__fill { background: var(--hud-danger); }

/* ---------- 8. 数据表 ---------- */
.hud-table { width: 100%; border-collapse: collapse; font-size: var(--hud-fs-body); }
.hud-table th {
  text-align: left;
  font-family: var(--hud-mono);
  font-size: var(--hud-fs-label);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--hud-ink-2);
  padding: 8px 10px;
  border-bottom: 1px solid var(--hud-line-1);
}
.hud-table td {
  padding: 8px 10px;
  color: var(--hud-ink-1);
  border-bottom: 1px solid var(--hud-line-2);
}
.hud-table th.num, .hud-table td.num { text-align: right; }
.hud-table tbody tr { transition: background var(--hud-dur-1) var(--hud-ease-out); }
.hud-table tbody tr:hover { background: var(--hud-a04); }
.hud-table td.over { color: var(--hud-warn); font-weight: 600; }

/* ---------- 9. 分段控件 ---------- */
.hud-seg {
  display: inline-flex;
  clip-path: var(--cut-tr);        /* 整组切一次 */
  border: 1px solid var(--hud-line-1);
  background: var(--hud-bg-3);
}
.hud-seg > button {
  clip-path: none;                 /* 内部项禁止再切 */
  border: 0; background: transparent;
  color: var(--hud-ink-2);
  font-family: var(--hud-mono);
  font-size: var(--hud-fs-label);
  letter-spacing: .04em;
  padding: 6px 14px;
  cursor: pointer;
  transition: background var(--hud-dur-1) var(--hud-ease-out),
              color var(--hud-dur-1) var(--hud-ease-out);
}
.hud-seg > button + button { border-left: 1px solid var(--hud-line-2); }
.hud-seg > button.is-active { background: var(--hud-a32); color: var(--hud-ink-1); }
.hud-seg > button:hover:not(.is-active) { background: var(--hud-a04); }

/* ---------- 10. 面板：对角装饰短线 ---------- */
/* 与 .hud-panel 叠加使用；短线 34×2，落在「没被切角」的右上 / 左下两个角，主色。
   默认切角 --cut-tl-br 切的是左上 + 右下 —— 短线若放在切角一侧，会被 clip-path
   沿斜边裁剩半截，露出突兀的小斜块。所以必须压在右上 / 左下。 */
.hud-panel--edged { position: relative; }
.hud-panel--edged::before,
.hud-panel--edged::after {
  content: "";
  position: absolute;
  width: 34px; height: 2px;
  background: var(--hud-accent);
  pointer-events: none;
}
.hud-panel--edged::before { top: 0; right: 0; }
.hud-panel--edged::after  { bottom: 0; left: 0; }

/* ---------- 11. 开关 ---------- */
/* 结构：<label class="hud-toggle"><input type="checkbox"><span class="hud-toggle__track"><span class="hud-toggle__thumb"></span></span></label>
   不被 clip-path 裁切，所以开启态可以用 box-shadow 发光。 */
.hud-toggle {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
  user-select: none;
  font-family: var(--hud-mono);
  font-size: var(--hud-fs-label);
  letter-spacing: .04em;
  color: var(--hud-ink-2);
}
.hud-toggle input {
  position: absolute;
  width: 0; height: 0;
  margin: 0; opacity: 0;
  pointer-events: none;
}
.hud-toggle__track {
  position: relative; flex: none;
  width: 38px; height: 18px;
  background: var(--hud-bg-4);
  border: 1px solid var(--hud-line-1);
  border-radius: 0;
  transition: background var(--hud-dur-1) var(--hud-ease-out),
              border-color var(--hud-dur-1) var(--hud-ease-out),
              box-shadow var(--hud-dur-1) var(--hud-ease-out);
}
.hud-toggle__thumb {
  position: absolute; top: 1px; left: 1px;
  width: 14px; height: 14px;
  background: var(--hud-ink-3);
  border-radius: 0;
  transition: transform var(--hud-dur-2) var(--hud-ease-back),
              background var(--hud-dur-1) var(--hud-ease-out);
}
.hud-toggle input:checked + .hud-toggle__track {
  background: var(--hud-a32);
  border-color: var(--hud-a52);
  box-shadow: var(--hud-glow-sm);
}
.hud-toggle input:checked + .hud-toggle__track .hud-toggle__thumb {
  transform: translateX(20px);
  background: var(--hud-accent);
}
.hud-toggle input:focus-visible + .hud-toggle__track {
  outline: 2px solid var(--hud-a52);
  outline-offset: 2px;
}
.hud-toggle input:disabled + .hud-toggle__track { opacity: .4; }
.hud-toggle input:disabled ~ * { cursor: not-allowed; }

/* ---------- 12. 滑杆 ---------- */
.hud-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
  accent-color: var(--hud-accent);
}
.hud-range::-webkit-slider-runnable-track {
  height: 6px;
  background: var(--hud-a08);
  border: 0;
  clip-path: var(--cut-bar);          /* 切角轨道 */
}
.hud-range::-moz-range-track {
  height: 6px;
  background: var(--hud-a08);
  border: 0;
  clip-path: var(--cut-bar);
}
.hud-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px; height: 18px;
  margin-top: -6px;                   /* (6 - 18) / 2 */
  background: var(--hud-accent);
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-bar);
}
.hud-range::-moz-range-thumb {
  width: 12px; height: 18px;
  background: var(--hud-accent);
  border: 0;
  border-radius: 0;
}
.hud-range:focus-visible { outline: 2px solid var(--hud-a52); outline-offset: 2px; }
.hud-range:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- 13. 通知条 ---------- */
/* 固定顶部居中，translateY 滑入，300ms 过渡。显隐靠 .is-show。
   动效不承载信息：关动效后 is-show 仍决定显隐，内容完整。 */
.hud-toast {
  position: fixed;
  top: 18px; left: 50%;
  z-index: 90;
  display: inline-flex; align-items: center; gap: 8px;
  clip-path: var(--cut-tr);
  padding: 10px 18px;
  background: var(--hud-bg-4);
  border: 1px solid var(--hud-a32);
  color: var(--hud-ink-1);
  font-family: var(--hud-mono);
  font-size: var(--hud-fs-label);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  transform: translate(-50%, calc(-100% - 24px));
  opacity: 0;
  transition: transform 300ms var(--hud-ease-out),
              opacity 300ms var(--hud-ease-out);
}
.hud-toast.is-show { transform: translate(-50%, 0); opacity: 1; }
.hud-toast--ok     { border-color: color-mix(in srgb, var(--hud-ok) 45%, transparent);     color: var(--hud-ok); }
.hud-toast--warn   { border-color: color-mix(in srgb, var(--hud-warn) 45%, transparent);   color: var(--hud-warn); }
.hud-toast--danger { border-color: color-mix(in srgb, var(--hud-danger) 45%, transparent); color: var(--hud-danger); }

/* ---------- 14. 成就徽章 ---------- */
/* 锁定态灰度 + 低透明；新获得态复用 hud-flicker 关键帧。 */
.hud-badge {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  clip-path: var(--cut-tr);
  padding: 10px 12px;
  background: var(--hud-bg-3);
  border: 1px solid var(--hud-line-2);
  color: var(--hud-ink-2);
  font-family: var(--hud-mono);
  font-size: var(--hud-fs-micro);
  letter-spacing: .05em;
  text-align: center;
}
.hud-badge__icon {
  font-size: 1.4rem;
  line-height: 1;
  color: var(--hud-accent);
}
.hud-badge__label { color: inherit; }
.hud-badge--locked { filter: grayscale(1); opacity: .28; }
.hud-badge--new {
  border-color: var(--hud-a52);
  animation: hud-flicker var(--hud-dur-3) var(--hud-ease-out) 2;
}

/* ---------- 15. 小节标题：▸ 前缀 + 右侧渐隐线 ---------- */
.hud-section-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--hud-mono);
  font-size: var(--hud-fs-label);
  letter-spacing: .06em;
  color: var(--hud-ink-2);
}
.hud-section-title::before { content: "▸"; color: var(--hud-accent); flex: none; }
.hud-section-title::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--hud-line-1), transparent);
}

/* ---------- 16. 键值网格：.hud-readout 的多列版 ---------- */
.hud-readout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  column-gap: var(--hud-gap);
  row-gap: 0;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}
.hud-readout-grid > .hud-readout { min-width: 0; }