/* web/static/css/panels.css - 工作区浮层面板视觉层 (楔子报告 / 保存报告 / 诊断分类列表 / 修复预览)
 *
 * INPUT:  wedge.templ / save.templ / doctor.templ / repair.templ 的 class 与 id.
 * OUTPUT: 落地态楔子报告卡、save-impact 信任面板、分类列表 (.doctor-report__*)、修复预览卡 + reduced-motion 归零.
 * POS:    web/static/css - 纯样式; 由 cellsmith.css 的 token (:root) 供色, layout.templ 最后加载
 *         (reduced-motion 规则必须排在各面板 transition 之后才能覆盖).
 * PROTOCOL:
 *   - 从 cellsmith.css 拆出 (plan §10: 800 行上限), 拆分本身零视觉变化.
 *   - 变更时更新本头; class 增删同步对应 templ.
 */

/* ---- wedge report (落地态诊断报告: 复用 doctor-report 列表风格) ---- */
.wedge-report {
  width: 460px;
  max-width: 100%;
  max-height: 40vh;
  overflow: auto;
  margin-top: 18px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px 16px;
}

.wedge-report__summary {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* 分类列表复用 .doctor-report__list / __item 样式 (categoryItem 渲染同一组 class). */

.wedge-report__note { margin: 10px 0 0; font-size: 11.5px; color: var(--mute); }

/* ---- save-impact 信任面板 (持久可关闭卡片, 非 toast) ---- */
.save-report {
  position: static;
  width: 100%;
  max-width: 100%;
  max-height: 360px;
  overflow: auto;
  background: var(--surface-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  box-shadow: none;
  padding: 14px 16px;
}

.save-report__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.save-report__title { font-size: 12px; font-weight: 600; color: var(--text-primary); }

.save-report__close {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
  background: var(--surface-panel);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 80ms ease;
}

.save-report__close:hover { background: var(--surface-hover); }

.save-report__summary {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-secondary);
  white-space: pre-wrap;
}

.save-report__counts { margin: 0 0 12px; display: grid; grid-template-columns: 1fr auto; gap: 5px 14px; }
.save-report__counts dt { font-size: 11px; color: var(--text-secondary); }

.save-report__counts dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-primary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.save-report__sha { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }

.save-report__sha .tag {
  font-family: var(--font-ui);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.save-report__sha .code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.save-report__profile { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

/* ---- 诊断分类列表 (共享 categoryItem; 落地页楔子用, lessons #10) ---- */
/* 工作台内的诊断自 batch 2 起是第 2 站九项清单 (css/spine.css .checks). */
.doctor-report__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* item: 中性 info 默认细左边线 (FEEL 克制, 不惊吓). */
.doctor-report__item {
  padding: 8px 10px;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-subtle);
  border-radius: 6px;
  background: var(--surface-panel);
}

/* warn (仅 formula_injection): 轻微 amber 左线 + 极淡底; 不用刺眼红. */
.doctor-report__item--warn { border-left-color: var(--verm); background: var(--verm-bg); }
.doctor-report__item-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }

.doctor-report__label {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}

.doctor-report__count {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* warn 项计数轻调 amber, 引一眼注意但不指责. */
.doctor-report__item--warn .doctor-report__count { color: var(--verm); }

.doctor-report__sev {
  font-family: var(--font-ui);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.doctor-report__item--warn .doctor-report__sev { color: var(--verm); }
.doctor-report__message { margin: 0 0 4px; font-size: 11px; line-height: 1.45; color: var(--text-secondary); }

/* 受影响行/列号: mono + muted; 长 "and N more" 列表允许换行不断版. */
.doctor-report__rows {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
  word-break: break-word;
}

/* ---- Repair 预览面板 (preview-first 外科修复; 复用 light 卡片风格; 网格零动画) ---- */
/* 置于左侧, 避免与 Doctor 报告 (右上) 重叠; [hidden] 彻底移出渲染. */
.repair-preview {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 7;
  width: 380px;
  max-width: calc(100vw - 24px);
  /* 短窗口不溢出: 面板高度上限为工作区高减上下各 12px, 超出内部滚动. */
  max-height: calc(100% - 24px);
  overflow: auto;
  background: var(--surface-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(21, 26, 34, 0.12);
  padding: 14px 16px;
}

.repair-preview__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.repair-preview__title { font-size: 12px; font-weight: 600; color: var(--text-primary); }

.repair-preview__close {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
  background: var(--surface-panel);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 80ms ease;
}

.repair-preview__close:hover { background: var(--surface-hover); }

/* 影响计数: 英文中性全句; mono + tabular-nums (FEEL 数字列对齐, 不做装饰). */
.repair-preview__counts { margin: 0 0 12px; display: flex; flex-direction: column; gap: 4px; }

.repair-preview__line {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* 样本 before->after: 浅底卡 + mono; 首尾空白已由 JS 转成 middle dot 可视化. */
.repair-preview__samples {
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  background: var(--surface-header);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
}

.repair-preview__sample {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-secondary);
  word-break: break-all;
}

.repair-preview__loc { color: var(--text-muted); margin-right: 6px; }
.repair-preview__ba { color: var(--text-primary); }
.repair-preview__actions { display: flex; gap: 8px; align-items: center; }
.repair-preview__note { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

.repair-preview__confirm {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ---- motion: FEEL 下一帧法则. 网格永不动画; 仅微交互 <=80ms. ---- */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .save-report__close,
  .repair-preview__close {
    transition: none;
    animation: none;
  }
}

/* Preview lives in station 4, not above the grid. */
#station-preview #repair-preview { position: static; width: auto; max-width: none; max-height: none; overflow: visible; border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 8px 0 0; }
#station-preview #repair-preview[hidden] { display: none; }
.preview-head { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.preview-head__title { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.preview-head__counts { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; font-size: 11px; }
.preview-head__counts div { display: contents; }
.preview-head__counts dt { color: var(--text-muted); }
.preview-head__counts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.preview-head__kept { margin: 10px 0 0; font-size: 11px; line-height: 1.5; color: var(--text-muted); }
#station-preview .repair-preview__actions { flex-wrap: wrap; }
.vg-cell.preview-cell { line-height: 19px !important; padding-top: 3px !important; font-size: 11px !important; }
.preview-cell__before, .preview-cell__after { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 19px; }
.preview-cell__before { color: var(--text-muted); }
.preview-cell del { color: #A64235; background: #FBE8E3; text-decoration: line-through; }
.preview-cell ins { color: #236B50; background: #E2F2E9; text-decoration: none; }