/* U08 状态投影面板 · 局部作用域样式
 *
 * 纪律（与 U07 `layout/warroom.css` 一致）：
 * 1. 本文件**只消费** `--uf-*` token，不定义、不覆盖任何全局 token；
 *    加载顺序由 RQ-U08-3 固定在 `ui-foundation.css` 与 `warroom.css` 之后。
 * 2. 不引入 web 字体、不用玻璃拟态、不用渐变文字、不用侧边色条（`border-left/right` 加粗）、
 *    无斑马纹；圆角 ≤ `--uf-radius-card`。
 * 3. 数值列右对齐 + `tabular-nums`；只读紧凑行 28–32px，交互目标 ≥40px。
 * 4. 断点只沿用 U07 `layout/responsive.rs` 的 730 / 1100，不新增全局断点。
 * 5. `prefers-reduced-motion: reduce` 关闭过渡与动画。
 *
 * 本文件在五个面板样式里**最先加载**（RQ-U08-3 的顺序），因此同时承载 U08 五面板共用的
 * 基元（`.u08-panel` / `.u08-note` / `.u08-controls` / `.u08-chip` / `.u08-table` /
 * `.u08-foot` / `.u08-reason` / `.u08-explained` / `.u08-focus` / `.u08-empty`）；
 * 后四个面板文件只写各自面板私有的类，不再重复定义基元。
 */

/* ── 共用基元 ── */
.u08-panel {
  display: flex;
  flex-direction: column;
  gap: calc(var(--uf-unit) * 3);
  box-sizing: border-box;
  min-width: 0;
  padding: calc(var(--uf-unit) * 3);
  background: var(--uf-surface);
  border: 1px solid var(--uf-divider);
  border-radius: var(--uf-radius-card);
  color: var(--uf-text);
  font: var(--uf-font-body) / 1.6 var(--uf-font);
}

.u08-panel h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.u08-panel h3 {
  margin: calc(var(--uf-unit) * 2) 0 0;
  font-size: var(--uf-font-body);
  font-weight: 600;
}
.u08-panel h4 {
  margin: 0 0 calc(var(--uf-unit) * 2);
  font-size: var(--uf-font-meta);
  font-weight: 600;
  color: var(--uf-muted);
}
.u08-panel p {
  margin: 0;
  font-size: var(--uf-font-meta);
  line-height: 1.7;
}

.u08-note {
  color: var(--uf-muted);
}

.u08-controls {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--uf-unit) * 2);
  align-items: center;
}

.u08-chip {
  min-height: 40px;
  padding: 6px 10px;
  font: inherit;
  font-size: var(--uf-font-meta);
  color: var(--uf-text);
  text-align: left;
  background: transparent;
  border: 1px solid var(--uf-divider);
  border-radius: var(--uf-radius-button);
  cursor: pointer;
  transition: background var(--uf-motion), border-color var(--uf-motion);
}
.u08-chip:hover { background: var(--uf-surface-hover); }
.u08-chip:focus-visible { outline: 2px solid var(--uf-accent); outline-offset: 2px; }
.u08-chip.is-active {
  border-color: var(--uf-accent);
  color: var(--uf-accent);
  background: var(--uf-surface-hover);
}

/* 表格：只读紧凑行（28–32px）、数值右对齐；无斑马纹，靠分隔线分行 */
.u08-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--uf-font-meta);
}
.u08-table caption {
  caption-side: top;
  padding-bottom: calc(var(--uf-unit) * 2);
  text-align: left;
  color: var(--uf-muted);
}
.u08-table th,
.u08-table td {
  padding: 4px 8px;
  min-height: 28px;
  line-height: 20px;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--uf-divider);
}
.u08-table tbody tr:last-child th,
.u08-table tbody tr:last-child td { border-bottom: 0; }
.u08-table thead th {
  color: var(--uf-muted);
  font-weight: 600;
}
.u08-table th.number,
.u08-table td.number,
.u08-table th.u08-stage-count,
.u08-table td.u08-stage-count { text-align: right; }

.u08-reason,
.u08-explained { color: var(--uf-muted); }
.u08-explained .mono,
.u08-explained .number { color: var(--uf-text); }

.u08-focus {
  display: flex;
  flex-direction: column;
  gap: calc(var(--uf-unit) * 2);
  padding: calc(var(--uf-unit) * 3);
  background: var(--uf-bg);
  border: 1px solid var(--uf-divider);
  border-radius: var(--uf-radius-button);
}
.u08-focus h3 { margin-top: 0; }

.u08-empty {
  padding: calc(var(--uf-unit) * 4) calc(var(--uf-unit) * 3);
  color: var(--uf-muted);
  text-align: center;
  border: 1px dashed var(--uf-border);
  border-radius: var(--uf-radius-button);
}

.u08-foot {
  color: var(--uf-muted);
}
.u08-foot .number,
.u08-foot .mono { color: var(--uf-text); }

/* ── 本面板私有：六阶段流程 ── */
.u08-projection .u08-axes {
  color: var(--uf-muted);
}

.u08-stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--uf-unit) * 2);
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.u08-stage-count {
  grid-column: 1 / -1;
  color: var(--uf-muted);
  font-size: var(--uf-font-meta);
}
.u08-stage {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--uf-unit) * 2);
  align-items: center;
  align-content: start;
  min-width: 0;
  padding: calc(var(--uf-unit) * 2) calc(var(--uf-unit) * 3);
  background: var(--uf-bg);
  border: 1px solid var(--uf-divider);
  border-radius: var(--uf-radius-button);
}
.u08-stage.is-success { border-color: var(--uf-ok); }
.u08-stage.is-plain { border-color: var(--uf-divider); }

.u08-stage-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  color: var(--uf-on-badge);
  background: var(--uf-surface-hover);
  border-radius: var(--uf-radius-pill);
  font-size: var(--uf-font-meta);
  font-variant-numeric: tabular-nums lining-nums;
}
.u08-stage-name { font-weight: 600; }
.u08-stage-state { color: var(--uf-muted); }
.u08-stage-family {
  padding: 1px 6px;
  color: var(--uf-on-badge);
  background: var(--uf-demo);
  border-radius: var(--uf-radius-pill);
  font-size: var(--uf-font-meta);
}
.u08-stage-summary,
.u08-stage-meta {
  flex: 1 1 100%;
  margin: 0;
  color: var(--uf-muted);
}

.u08-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: var(--uf-radius-pill);
  background: var(--uf-border);
}
.u08-dot.is-active { background: var(--uf-ok); }
.u08-dot.is-none { background: var(--uf-border); }

.u08-provenance { color: var(--uf-muted); }

.u08-error {
  padding: calc(var(--uf-unit) * 2) calc(var(--uf-unit) * 3);
  color: var(--uf-err);
  background: var(--uf-surface-hover);
  border: 1px solid var(--uf-err);
  border-radius: var(--uf-radius-button);
}

/* ── 响应式：只沿用 730 / 1100 两档 ── */
@media (max-width: 1100px) and (min-width: 731px) {
  .u08-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 中屏档同样要放行表格收窄：1024px 实测「WR01 字段属主表」的 auto 布局 min-content
     把面板撑到 1056（> 视口 1024），文档级横向溢出 61px。表格与窄屏同策。 */
  .u08-table { table-layout: fixed; }
  .u08-table th,
  .u08-table td { word-break: break-word; }
}
@media (max-width: 730px) {
  .u08-panel { padding: calc(var(--uf-unit) * 2); }
  .u08-stages { grid-template-columns: minmax(0, 1fr); }
  .u08-table { table-layout: fixed; }
  .u08-table th,
  .u08-table td { word-break: break-word; }
}

@media (prefers-reduced-motion: reduce) {
  .u08-panel *,
  .u08-panel *::before,
  .u08-panel *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}