/* css/views/guardrail.css — 「护栏策略」视图私有样式(R2-G / G4)。owner: G4。
 * 只许本视图写;全部选择器前缀 .v-gr;颜色/间距/圆角/字体一律 var(--*)(tokens.css 的 admin :root,
 * 绝不 --bs-*),禁止散落字面量。CSP:零内联 style —— 显隐/禁用切 class;芯片复用冻结族 .chip/.chip-remove。 */

.v-gr { display: block; }

/* ---- 列表态顶部说明(语义 + 裁决计数去向 + 传播延迟) ---- */
.v-gr-note {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin-bottom: var(--space-6);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-surface);
}
.v-gr-note-icon { color: var(--color-accent); flex: none; margin-top: 1px; }
.v-gr-note-text { font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; }
.v-gr-note-text p { margin: 0; }
.v-gr-note-text p + p { margin-top: var(--space-1); }
.v-gr-link { color: var(--color-accent); text-decoration: underline; }
.v-gr-link:hover { color: var(--color-accent-strong); }
.v-gr-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-control); }

/* ---- 表格行内操作按钮(右对齐,不换行;紧凑档走 app.css 的 .btn-sm) ---- */
.v-gr-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  flex-wrap: wrap;
  white-space: nowrap;
}

/* ---- 名称单元(名称 + 等宽 id) ---- */
.v-gr-namecell { display: flex; flex-direction: column; gap: var(--space-1); min-width: 200px; }
.v-gr-name { font-weight: 500; color: var(--color-text); }
.v-gr-id { font-size: 12px; }

/* ---- selector 表格单元(kind 中文 + 值串) ---- */
.v-gr-selcell { display: flex; flex-direction: column; gap: var(--space-1); min-width: 140px; }
.v-gr-selkind { font-size: 13px; color: var(--color-text); }
.v-gr-selvals { font-size: 12px; color: var(--color-accent); }

/* ---- guardrail_set 表格单元(类别芯片簇) ---- */
.v-gr-gschips { display: flex; flex-wrap: wrap; gap: var(--space-1); }

/* ---- 截断提示(命中端点上限时,显式说明结果可能不全) ---- */
.v-gr-capnote { margin-top: var(--space-2); font-size: 12px; color: var(--color-text-muted); }

/* ---- 规则态顶部(返回链 + 策略集元信息) ---- */
.v-gr-rules-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.v-gr-back { flex: none; }
.v-gr-rules-meta { display: flex; flex-direction: column; gap: var(--space-2); }
.v-gr-rules-title { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.v-gr-rules-name { font-size: 16px; font-weight: 600; color: var(--color-text); }
.v-gr-rules-sub {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: 12px;
  color: var(--color-text-secondary);
}

/* ---- 模态表单(字段多,内滚;留出焦点环空间避免被滚动容器裁切) ---- */
.v-gr-form {
  max-height: 64vh;
  overflow-y: auto;
  padding: var(--space-1);
  margin: calc(-1 * var(--space-1));
}
.v-gr-num { width: 160px; }

/* 表单服务端错误区(crimson tint 底 + crimson 字,语义固定,只用于错误) */
.v-gr-form-error {
  background: var(--color-danger-tint);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-control);
  padding: var(--space-2) var(--space-3);
  font-size: 13px;
}
.v-gr-form-error[hidden] { display: none; }
.v-gr-form-error p { margin: 0; }
.v-gr-form-error .trace-id { margin-top: var(--space-1); }
.v-gr-form-hint { color: var(--color-text-secondary); margin-top: var(--space-1); }

/* ---- selector 编辑器(kind 字段 + 值录入;kind=any 时隐藏值区) ---- */
.v-gr-selector {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-bg);
}
.v-gr-sel-vals { display: block; }
.v-gr-hidden { display: none; }

/* ---- 多值录入器(芯片 + 输入 + 添加) ---- */
.v-gr-values { display: flex; flex-direction: column; gap: var(--space-2); }
.v-gr-vals { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; min-height: 24px; }
.v-gr-vals-empty { font-style: normal; }
.v-gr-val-add { display: flex; gap: var(--space-2); align-items: center; }
.v-gr-val-input { flex: 1 1 auto; min-width: 0; }
.v-gr-val-error { color: var(--color-danger); font-size: 12px; }
.v-gr-val-error[hidden] { display: none; }
.v-gr-disabled { opacity: 0.5; }

/* ---- guardrail_set 编辑器(内置勾选 + 自由录入) ---- */
.v-gr-gset { display: flex; flex-direction: column; gap: var(--space-3); }
.v-gr-gset-builtins { display: flex; flex-direction: column; gap: var(--space-2); }
.v-gr-check-row { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: 13px; }
.v-gr-check { accent-color: var(--color-accent); flex: none; }
.v-gr-check-id { color: var(--color-accent); }
.v-gr-check-label { color: var(--color-text-secondary); }
.v-gr-gset-free { display: flex; flex-direction: column; gap: var(--space-2); }

/* ---- 复合 selector(一层 AND)构建器:子条件卡片列表 + 添加 ---- */
.v-gr-comp-wrap { display: block; }
.v-gr-composite { display: flex; flex-direction: column; gap: var(--space-2); }
.v-gr-clauses { display: flex; flex-direction: column; gap: var(--space-2); }
.v-gr-clause {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}
.v-gr-clause-head { display: flex; align-items: center; gap: var(--space-2); }
.v-gr-clause-and { font-size: 12px; color: var(--color-text-secondary); flex: none; }
.v-gr-clause-kind { flex: 1 1 auto; min-width: 0; }
.v-gr-clause-rm { flex: none; }
.v-gr-clause-error { color: var(--color-danger); font-size: 12px; }
.v-gr-clause-error[hidden] { display: none; }

/* ---- 复合 selector 表格内摘要:复合标签 + 子条件用 ∧ 连接 ---- */
.v-gr-comp-summary { display: flex; flex-direction: column; gap: var(--space-1); min-width: 160px; }
.v-gr-comp-tag { font-size: 11px; color: var(--color-accent); letter-spacing: 0.04em; }
.v-gr-comp-parts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.v-gr-comp-and { color: var(--color-text-secondary); font-size: 13px; padding: 0 var(--space-1); }

/* ---- 白画布 + 版头(§9g,2026-07-14 冲刺):两级动作槽居右(切级清空重填) ---- */
.v-gr-canvas {
  background: var(--color-surface);
  border-radius: 24px;
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.v-gr-canvas .section { margin-bottom: 0; }
.v-gr-sub { font-size: 12px; font-weight: 400; color: var(--color-text-muted); margin-left: var(--space-2); }
.v-gr-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.v-gr-sec-head .section-title { margin-bottom: 0; }
.v-gr-actions-slot { display: flex; gap: var(--space-2); }
.v-gr-canvas .table th,
.v-gr-canvas .table td { white-space: nowrap; } /* 基础排版:不竖排 */